:root{color-scheme:light;--ink:#453b32;--paper:#f6eed9;--line:#c5b797;--green:#47634e}*{box-sizing:border-box}body{margin:0;background:#e8dfcb;color:var(--ink);font:16px/1.55 system-ui,sans-serif}main{max-width:1120px;margin:auto;padding:22px 22px 44px}nav{display:flex;gap:24px;flex-wrap:wrap}a{color:var(--green);text-underline-offset:4px}nav a,.notes a{display:inline-flex;align-items:center;min-height:44px}header{padding:20px 0 16px;max-width:800px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}h1,h2{font-family:Georgia,serif;font-weight:normal;line-height:1.15}h1{font-size:clamp(34px,5.5vw,58px);margin:10px 0 20px}h2{font-size:30px}.workbench{padding:22px;background:var(--paper);border:1px solid var(--line);border-radius:16px}.toolbar,.options{display:flex;align-items:end;flex-wrap:wrap;gap:12px}.toolbar label,.options label{display:grid;gap:5px;min-width:0}.toolbar label{flex:1}button,select,input{font:inherit;color:inherit}button,select{min-height:44px;padding:9px 12px;border:1px solid #ad9d81;border-radius:7px;background:#fff9e8;max-width:100%}button{cursor:pointer}button:hover{background:#d7e2cb}button:disabled{cursor:default;opacity:.6}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #527a65;outline-offset:3px}.stage{margin-top:20px;background:#e8dfc9;border:1px solid #cfc0a0;border-radius:12px;overflow:hidden}.stage canvas{display:block;width:100%;height:auto;image-rendering:pixelated}.readout{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px 24px}.readout h2{margin:16px 0 4px}.readout p{color:#73654e}.hint,#status,.notes{font-size:14px;color:#716451}details{border-top:1px solid var(--line);margin-top:14px;padding-top:4px}summary{cursor:pointer;min-height:48px;align-content:center;font-weight:600}summary::marker{color:var(--green)}.materials{display:flex;gap:12px;margin:18px 0}.materials label{display:grid;flex:1;gap:5px;min-width:0}.materials input{width:100%;height:44px;min-width:0;border:1px solid var(--line);padding:4px;background:#fff9e8;border-radius:6px}.options .check{display:flex;align-items:center;min-height:44px}.check input{width:22px;height:22px}.phases{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.phases figure{margin:0;min-width:0;text-align:center;font-size:12px}.phases canvas{display:block;margin:auto;max-width:100%;image-rendering:pixelated;background:#e0e1cc;border-radius:6px}.library{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:20px 0 30px}.library button{padding:12px;background:var(--paper);min-width:0;display:grid;justify-items:center;gap:8px;border-radius:12px}.library button[aria-pressed=true]{border:2px solid var(--green);background:#dce5d0}.library img{width:140px;height:140px;max-width:100%;object-fit:contain;image-rendering:pixelated}.library span{font-family:Georgia,serif;font-size:21px}.library small{color:#716451}.notes{border-top:1px solid var(--line);padding-top:10px}#error{background:#fff0d4;border:1px solid #a56a47;padding:16px}section[aria-labelledby=library-title]{margin-top:34px}@media(max-width:650px){main{padding:14px 12px 30px}.workbench{padding:15px}.toolbar{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toolbar label:first-child{grid-column:1/-1}.toolbar select{width:100%}.library{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.library img{height:112px}.phases{grid-template-columns:repeat(3,minmax(0,1fr))}.materials{gap:8px}.materials label{font-size:13px}.readout{gap:0 15px}.stage{margin-top:15px}}
