*{box-sizing:border-box}html,body{background:#efe3c8;height:100%;margin:0;font-family:system-ui,sans-serif;overflow:hidden}main{height:100%}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.scroll{touch-action:none;cursor:crosshair;width:100vw;height:100dvh;position:relative}#ink-canvas{display:block;position:absolute;inset:0}.hint{color:#14121073;letter-spacing:.04em;pointer-events:none;justify-content:center;align-items:center;margin:0;font-size:clamp(1.2rem,4vw,1.8rem);transition:opacity .6s;display:flex;position:absolute;inset:0}.hint.hidden{opacity:0}.controls{gap:8px;display:flex;position:absolute;top:12px;right:12px}.control-button{color:#14121099;font:inherit;letter-spacing:.03em;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:#efe3c8b3;border:1px solid #14121040;border-radius:999px;padding:6px 14px;font-size:.85rem}.control-button:hover{color:#141210d9;background:#efe3c8e6}.control-button:focus-visible{outline-offset:2px;outline:2px solid #14121080}.control-button:disabled{opacity:.4;cursor:default}.mode-toggle{background:#1412100d;border:1px solid #14121026;border-radius:999px;gap:2px;padding:2px;display:flex}.mode-button{color:#14121073;font:inherit;letter-spacing:.02em;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:0 0;border:none;border-radius:999px;padding:4px 10px;font-size:.75rem}.mode-button:hover{color:#141210b3}.mode-button:focus-visible{outline-offset:2px;outline:2px solid #14121080}.mode-button[aria-pressed=true]{color:#141210bf;background:#efe3c8e6;box-shadow:0 1px 2px #14121026}.palette{background:#1412100d;border:1px solid #14121026;border-radius:999px;align-items:center;gap:5px;padding:3px 6px;display:flex}.swatch{background:var(--swatch);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border:1px solid #1412104d;border-radius:50%;width:16px;height:16px;padding:0}.swatch:hover{border-color:#14121080}.swatch:focus-visible{outline-offset:2px;outline:2px solid #14121080}.swatch.selected{box-shadow:0 0 0 2px #efe3c8e6,0 0 0 3px #1412108c}.artwork-label{color:#14121080;letter-spacing:.03em;pointer-events:none;margin:0;font-size:.8rem;position:absolute;top:12px;left:12px}.artwork-label.hidden{display:none}.scores-menu{position:relative}.scores-list{background:#efe3c8f2;border:1px solid #14121040;border-radius:12px;flex-direction:column;gap:2px;min-width:200px;margin:0;padding:6px;list-style:none;display:flex;position:absolute;top:calc(100% + 6px);right:0}.scores-list.hidden,.scores-list li.hidden{display:none}.score-item{color:#141210bf;width:100%;font:inherit;text-align:left;cursor:pointer;background:0 0;border:none;border-radius:8px;padding:6px 10px;font-size:.85rem;display:block}.score-item:hover{background:#14121014}.score-item:focus-visible{outline-offset:2px;outline:2px solid #14121080}@media (width<=480px){.controls{flex-wrap:wrap;justify-content:flex-end;gap:6px;left:12px}.control-button,.mode-button{padding:5px 10px;font-size:.78rem}.swatch{width:22px;height:22px}}