:root{--paper: #efeae1;--ink: #1c1915;--muted: #6f675c;--line: #d9d1c4;--board: #f7f4ee;--accent: #143d3a;color:var(--ink);background:var(--paper);font-family:Newsreader,Georgia,serif}*{box-sizing:border-box}html,body,#app{margin:0;height:100%}body{overflow:hidden}#app{display:grid;grid-template-rows:auto 1fr auto;height:100%}.strip{border-bottom:1px solid var(--line);background:#f6f2ea}.strip-bar{display:flex;align-items:center;gap:14px;padding:10px 16px 0}.feature-note{margin:0;padding:9px 16px;border-bottom:1px solid var(--line);background:var(--paper);color:var(--muted);font:11px/1.6 IBM Plex Mono,ui-monospace,monospace;text-align:center;text-wrap:balance}.feature-note a{color:var(--accent);text-decoration-color:var(--line);text-underline-offset:3px}.feature-note a:hover{text-decoration-color:currentColor}.feature-note a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.brand{display:flex;gap:8px;align-items:baseline;min-width:92px}.brand-name{font-size:22px;letter-spacing:-.03em}.brand-sub{font-family:IBM Plex Mono,ui-monospace,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.hint,.tilt-hint,.legend,#copy-note,.selection{font-family:IBM Plex Mono,ui-monospace,monospace;font-size:11px;color:var(--muted)}.hint{margin:0}.search-pill{margin-left:auto;font-family:IBM Plex Mono,ui-monospace,monospace;font-size:13px;padding:4px 8px;border:1px solid var(--ink);background:#fff}button{font-family:IBM Plex Mono,ui-monospace,monospace;font-size:12px;border:1px solid var(--line);background:transparent;color:var(--ink);padding:6px 10px;cursor:pointer}button.on,button.primary{background:var(--accent);color:#f6f2ea;border-color:var(--accent)}button:disabled{opacity:.4;cursor:default}.scroller{overflow:hidden;height:118px;cursor:grab;position:relative}.scroller:active{cursor:grabbing}.track{position:relative;height:100%}.card{position:absolute;top:10px;width:84px;display:flex;flex-direction:column;align-items:center;gap:4px;background:transparent;border:0;padding:0}.card canvas{width:72px;height:72px;background:var(--board);border:1px solid transparent}.card.selected canvas{border-color:var(--ink)}.card span{font-family:IBM Plex Mono,ui-monospace,monospace;font-size:10px;color:var(--muted)}#stage{position:relative;min-height:0}#source{position:absolute;left:16px;top:16px;z-index:2;width:168px;padding:10px;background:#f6f2eaeb;border:1px solid var(--line)}.source-label{margin:0 0 8px;font-family:IBM Plex Mono,ui-monospace,monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}#source-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}.source-cell{aspect-ratio:1;background:#f4f0e8;position:relative;overflow:hidden}.source-cell i{position:absolute;left:0;right:0;bottom:0;height:100%;transform-origin:bottom}.source-cell.on{outline:1px solid var(--ink);z-index:1}button.chem-on{background:var(--ink);color:#f6f2ea;border-color:var(--ink)}#stage canvas{display:block;width:100%;height:100%}.dock{border-top:1px solid var(--line);padding:10px 16px 14px;display:flex;flex-direction:column;gap:8px;background:#f6f2ea}.dock-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.modes{display:flex}.modes button{margin:0}.chems{gap:8px}.chem-label{font-family:IBM Plex Mono,ui-monospace,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase}.tilt-hint{margin-left:6px}#dry{margin-left:auto}.legend{margin:0}dialog{border:1px solid var(--ink);background:var(--paper);padding:16px;width:min(520px,calc(100vw - 32px))}dialog::backdrop{background:#1c191559}dialog form{margin:0}dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.result-actions,.result-overlay{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.result-overlay{margin-bottom:4px}#overlay.on{background:var(--ink);color:var(--paper)}.dock-left{display:flex;align-items:center;gap:10px;margin-right:auto;flex-wrap:wrap}#pour-modes button,#canvas-modes button{padding:8px 10px}.add-credit{display:flex;align-items:center;gap:8px}.add-credit input{width:7em}dialog.banner{width:min(960px,calc(100vw - 32px))}dialog h2{font-weight:550;font-size:28px;margin:0}dialog img{width:100%;display:block;background:#fff;margin:8px 0}button.icon{width:34px;height:34px;display:grid;place-items:center;padding:0}button.texty{border:0;padding-left:0}@media(max-width:720px){.hint{display:none}.brand-name{font-size:18px}.scroller{height:104px}}[hidden]{display:none!important}#stage{margin-left:270px}#source{left:-246px;top:50%;transform:translateY(-50%);width:222px;padding:18px}#source-grid{gap:5px}#status,.source-note{font:11px/1.7 ui-monospace,monospace;color:var(--muted)}#status{color:var(--ink);min-height:38px}progress{width:100%;height:4px;margin-top:20px;accent-color:var(--accent)}.source-cell{background:#e3ddd3}.source-cell.on{outline:2px solid var(--accent);outline-offset:1px}button{border-radius:3px;padding:9px 14px}button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}#pour,#dry{min-width:112px}.strip-bar{padding-top:16px}.dock{padding:16px 24px}@media(max-width:720px){#stage{margin-left:122px}#source{left:-114px;width:112px;padding:8px}#source-grid{gap:2px}.source-label{font-size:8px}.source-note{display:none}.tilt-hint{font-size:9px}.dock{padding:10px}}.chemical-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:100%}.strength-pop{position:fixed;z-index:5;display:flex;align-items:center;gap:4px;padding:4px;background:#f6f2eaf5;border:1px solid var(--line)}.strength-pop input{width:3em;text-align:center;font:14px IBM Plex Mono,ui-monospace,monospace;padding:6px 4px;border:1px solid var(--ink);background:#fff}.strength-pop button{min-width:36px;min-height:36px;padding:4px 8px}body.phone .chemical-tools{gap:6px}body.phone .chemical-tools button{min-height:44px;padding:8px 10px}#chemical-note{line-height:1.5}#phone-pick{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 16px 22px}#phone-art{width:min(72vw,320px);height:auto;background:var(--board);border:1px solid var(--line);touch-action:none}#phone-id{margin:0;font-family:IBM Plex Mono,ui-monospace,monospace;font-size:14px}#phone-search{display:flex;gap:8px;align-items:center}#phone-search label{font-family:IBM Plex Mono,ui-monospace,monospace;font-size:12px;color:var(--muted)}#phone-input{width:7em;margin-left:6px;font:14px IBM Plex Mono,ui-monospace,monospace;padding:6px 8px;border:1px solid var(--ink);background:#fff}#phone-note{margin:0;text-align:center}body.phone .scroller,body.phone #pause,body.phone .hint{display:none}body.phone:not(.painting) #source{display:none}body.phone.painting #stage{margin-left:0}body.phone.painting #source{left:8px;top:8px;transform:none;width:24px;padding:2px}body.phone.painting #source-grid{gap:1px}body.phone.painting #source progress,body.phone.painting #status{display:none}body.phone.painting .source-note,body.phone.painting .source-label{display:none}body.phone #stage canvas{touch-action:none}