:root{--bg: #0e0f16;--panel: #181a26;--panel-hi: #242838;--line: #3a4058;--shadow: #05060a;--text: #e2e6f2;--muted: #8f97b2;--accent: #6cc4ff;--brass: #e2b45e;font-family:Pixelify Sans,ui-monospace,monospace;font-size:15px;color:var(--text);background:var(--bg)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg);-webkit-user-select:none;user-select:none}h1{margin:0;font-family:Silkscreen,monospace;font-weight:400;font-size:22px;color:var(--accent);text-shadow:2px 2px 0 var(--shadow)}h2{margin:0 0 8px;font-family:Silkscreen,monospace;font-weight:400;font-size:13px;color:var(--brass)}.muted{color:var(--muted);line-height:1.4;margin:8px 0;font-size:14px}button{font:inherit;font-size:14px;color:var(--text);background:var(--panel-hi);border:2px solid var(--shadow);border-radius:0;padding:3px 10px;cursor:pointer;box-shadow:inset 2px 2px #3c4460,inset -2px -2px #121420}button:hover{background:#2e3448}button:active{box-shadow:inset 2px 2px #121420,inset -2px -2px #3c4460}button.active{background:#1f4a6e;box-shadow:inset 2px 2px #3c7cb0,inset -2px -2px #0c2236;color:#fff}button:disabled{opacity:.5;cursor:default}kbd{font:inherit;font-size:11px;color:var(--muted);margin-right:6px}header{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:10px 16px;background:var(--panel);border-bottom:4px solid var(--shadow)}.group{display:flex;gap:4px}#stats{display:flex;gap:16px;color:var(--muted);margin-left:auto}#stats b{color:var(--accent);font-weight:600}main{display:grid;grid-template-columns:minmax(0,1280px) 300px;gap:16px;padding:16px;align-items:start}#view{width:100%;image-rendering:pixelated;border:2px solid var(--shadow);outline:2px solid var(--line);cursor:crosshair;display:block}aside{display:flex;flex-direction:column;gap:12px}aside section{background:var(--panel);border:2px solid var(--shadow);box-shadow:inset 2px 2px 0 var(--line),4px 4px 0 var(--shadow);padding:10px}.tools{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}.levels{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}.levels button{text-align:left}.levels button.done:after{content:" ✓";color:#7be08a}#goal .goal-label{color:var(--text);margin-bottom:6px}.meter{height:10px;background:var(--shadow);border:2px solid var(--line);margin-bottom:4px}.meter i{display:block;height:100%;background:var(--accent)}#goal b.ok{color:#7be08a}#goal b.bad{color:#ff8a7a}.solved{margin:8px 0;padding:6px 8px;background:#1f4a2c;border:2px solid #7be08a;color:#d8ffe0;display:flex;justify-content:space-between;align-items:center;gap:8px}.hint{font-size:13px}.stage{position:relative}#banner{position:absolute;left:50%;top:18%;transform:translate(-50%);pointer-events:none;text-align:center;opacity:0;font-family:Silkscreen,monospace;color:#fff;text-shadow:3px 3px 0 #05060a,-1px -1px 0 #05060a}#banner .big{font-size:44px;letter-spacing:2px}#banner .small{font-family:Pixelify Sans,monospace;font-size:18px;margin-top:6px;color:#d8e8ff}#banner.title-banner{animation:title-in 1.7s steps(17) forwards;color:#9ad8ff}#banner.solved-banner{animation:solved-in 3.2s steps(32) forwards;color:#ffe27a}@keyframes title-in{0%{opacity:0;transform:translate(-50%,-40px)}15%{opacity:1;transform:translate(-50%,6px)}25%{transform:translate(-50%)}80%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-12px)}}@keyframes solved-in{0%{opacity:0;transform:translate(-50%) scale(.3)}10%{opacity:1;transform:translate(-50%) scale(1.25)}16%{transform:translate(-50%) scale(.92)}22%{transform:translate(-50%) scale(1.05)}28%{transform:translate(-50%) scale(1)}85%{opacity:1;transform:translate(-50%) scale(1)}to{opacity:0;transform:translate(-50%,-20px) scale(1)}}.shake{animation:shake .35s steps(7)}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}}.levels button small{display:block;font-size:11px;color:var(--muted)}#goal .best{margin:2px 0 6px;color:var(--brass)}.new-best{color:#7be08a;font-family:Silkscreen,monospace;font-size:13px;animation:shake .35s steps(7) 2;display:inline-block}html,body{image-rendering:pixelated}body{background:var(--dither-bg) 0 0 / calc(var(--px) * 4) calc(var(--px) * 4)}button,header,aside section,.meter,.solved,.stage,kbd{image-rendering:pixelated}header{border:none;border-image:var(--frame-header) 3 fill / calc(var(--px) * 3) stretch;background:none;margin:calc(var(--px) * 4) calc(var(--px) * 8) 0;padding:calc(var(--px) * 6) calc(var(--px) * 10)}aside section{border:none;box-shadow:calc(var(--px) * 2) calc(var(--px) * 2) 0 #05060a;border-image:var(--frame-panel) 3 fill / calc(var(--px) * 3) stretch;background:var(--dither-panel) 0 0 / calc(var(--px) * 4) calc(var(--px) * 4);background-clip:padding-box;padding:calc(var(--px) * 7)}.stage{border-image:var(--frame-inset) 3 fill / calc(var(--px) * 3) stretch;padding:calc(var(--px) * 3);box-shadow:calc(var(--px) * 2) calc(var(--px) * 2) 0 #05060a}#view{border:none;outline:none}button{border:none;box-shadow:none;background:none;border-image:var(--frame-button) 3 fill / calc(var(--px) * 3) stretch;padding:calc(var(--px) * 3) calc(var(--px) * 6);display:inline-flex;align-items:center;gap:var(--px)}button:hover{background:none;border-image-source:var(--frame-button-hover)}button:active,button.active{background:none;box-shadow:none;border-image-source:var(--frame-button-down);padding:calc(var(--px) * 4) calc(var(--px) * 5) calc(var(--px) * 2) calc(var(--px) * 7)}.levels button{display:flex;flex-direction:column;align-items:flex-start}button .icon{width:calc(var(--px) * 12);height:calc(var(--px) * 12);image-rendering:pixelated;margin-right:calc(var(--px) * 2);flex:none}kbd{display:inline-block;border-image:var(--frame-inset) 3 fill / calc(var(--px) * 2) stretch;padding:0 calc(var(--px) * 2);line-height:1.2;margin-right:calc(var(--px) * 3)}.meter{border:none;border-image:var(--frame-inset) 3 fill / calc(var(--px) * 3) stretch;height:calc(var(--px) * 9);padding:calc(var(--px) * 2);background:none}.meter i{background:repeating-linear-gradient(90deg,var(--accent) 0 calc(var(--px) * 3),#3a8ccc calc(var(--px) * 3) calc(var(--px) * 4))}.solved{border:none;border-image:var(--frame-solved) 3 fill / calc(var(--px) * 3) stretch;background:none;padding:calc(var(--px) * 4) calc(var(--px) * 6)}h2{padding-bottom:calc(var(--px) * 2);box-shadow:0 var(--px) 0 #6e5a34,0 calc(var(--px) * 2) 0 #05060a;margin-bottom:calc(var(--px) * 5)}*{scrollbar-color:#4a5270 #0b0c12}::-webkit-scrollbar{width:calc(var(--px) * 6);height:calc(var(--px) * 6)}::-webkit-scrollbar-track{background:var(--dither-bg) 0 0 / calc(var(--px) * 4) calc(var(--px) * 4)}::-webkit-scrollbar-thumb{border-image:var(--frame-button) 3 fill / calc(var(--px) * 2) stretch}html,body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}#view{touch-action:none}button{touch-action:manipulation}.stage{width:100%;max-width:calc((100dvh - var(--chrome-h, 120px)) * 16 / 9);min-width:240px}main{grid-template-columns:minmax(0,1fr) 320px}[data-brush]{padding-left:calc(var(--px) * 4);padding-right:calc(var(--px) * 4)}.stage{justify-self:end}.levels button .lbl,.levels button small{display:block}#banner .big{font-size:clamp(22px,5vw,44px)}#banner .small{font-size:clamp(13px,2.4vw,18px)}@media(hover:none){button:not(.active):hover{border-image-source:var(--frame-button)}}@media(pointer:coarse){kbd{display:none}button{min-height:36px}}@media(max-width:1000px),(max-height:540px){:root{font-size:13px}header{gap:10px;margin:calc(var(--px) * 2) calc(var(--px) * 2) 0;padding:calc(var(--px) * 3) calc(var(--px) * 6)}h1{font-size:15px}#stats,.group-label{display:none}button{font-size:12px}main{gap:calc(var(--px) * 4);padding:calc(var(--px) * 4)}aside{gap:calc(var(--px) * 4)}aside section{padding:calc(var(--px) * 5)}#tools-panel{order:-1}#tools-panel [data-tool] .lbl{display:none}#tools-panel [data-tool] .icon{width:calc(var(--px) * 12);height:calc(var(--px) * 12);margin-right:0}#tools-panel [data-tool] .cnt:not(:empty){font-size:11px;margin-left:var(--px)}#tool-hint{font-size:12px}}@media(orientation:portrait)and (max-width:760px){main{grid-template-columns:minmax(0,1fr)}.stage{max-width:none}}#dock,#scrim,#chip,#rotate,.compact-only{display:none}#tools-panel [data-brush] .icon{margin-right:var(--px)}@media(orientation:landscape)and (max-height:540px){html,body{height:100dvh;overflow:hidden}header{display:none}main{display:flex;justify-content:center;align-items:center;gap:calc(var(--px) * 3);height:100dvh;padding:calc(var(--px) * 3)}.stage{flex:none;max-width:none;min-width:0;width:min(calc((100dvh - var(--px) * 12 - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 16 / 9 + var(--px) * 6),calc(100vw - 96px - var(--px) * 9 - env(safe-area-inset-left) - env(safe-area-inset-right)))}#dock{display:grid;grid-template-columns:repeat(2,40px);grid-auto-rows:34px;gap:var(--px);align-content:start;align-self:stretch;max-height:calc(100dvh - var(--px) * 6);overflow-y:auto}#dock button{min-height:0;padding:0;justify-content:center;font-size:15px}#dock button:active,#dock button.active{padding:var(--px) 0 0 var(--px)}#dock [data-act=menu],#dock [data-act=pause]{font-family:Silkscreen,monospace}#dock [data-tool] kbd,#dock [data-tool] .lbl,#dock [data-tool] .cnt{display:none}#dock .icon{margin:0;width:calc(var(--px) * 12);height:calc(var(--px) * 12)}#chip:not(:empty){display:flex;align-items:center;gap:calc(var(--px) * 4);position:absolute;top:calc(var(--px) * 5);left:50%;transform:translate(-50%);padding:calc(var(--px) * 2) calc(var(--px) * 5);font-size:12px;white-space:nowrap;border-image:var(--frame-panel) 3 fill / calc(var(--px) * 3) stretch;opacity:.92;pointer-events:none}#chip .meter{display:block;width:70px;height:calc(var(--px) * 6);margin:0;padding:var(--px)}#chip b.ok{color:#7be08a}#chip b.bad{color:#ff8a7a}#chip button{pointer-events:auto;font-size:12px;min-height:0}aside{position:fixed;top:0;right:0;bottom:0;z-index:30;width:min(340px,75vw);overflow-y:auto;padding:calc(var(--px) * 4) calc(var(--px) * 4) calc(var(--px) * 4 + env(safe-area-inset-bottom));padding-right:calc(var(--px) * 4 + env(safe-area-inset-right));background:var(--dither-bg) 0 0 / calc(var(--px) * 4) calc(var(--px) * 4);box-shadow:calc(var(--px) * -3) 0 0 #05060a;transform:translate(calc(100% + 8px));transition:transform .18s steps(4)}body.drawer-open aside{transform:none}body.drawer-open #scrim{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:25;border:none;border-image:none;background:#05060a8c}.compact-only{display:flex;flex-wrap:wrap;gap:var(--px);align-items:center}#tools-panel{order:0}#tools-panel .tools,#tools-panel .brush-h{display:none}}@media(pointer:coarse)and (orientation:portrait)and (max-width:900px){#rotate{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--px) * 6);position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;text-align:center;font-family:Silkscreen,monospace;font-size:18px;background:var(--dither-bg) 0 0 / calc(var(--px) * 4) calc(var(--px) * 4)}#rotate .icon{width:72px;height:72px;image-rendering:pixelated;animation:tilt 1.6s steps(4) infinite}#rotate .muted{font-family:Pixelify Sans,monospace;font-size:14px}header,main{display:none}}@keyframes tilt{0%,40%{transform:rotate(0)}60%,to{transform:rotate(-90deg)}}.levels button{position:relative;padding-right:calc(var(--px) * 14)}.levels button.done:after{position:absolute;right:calc(var(--px) * 6);top:calc(var(--px) * 3)}.levels button.done:active:after,.levels button.done.active:after{top:calc(var(--px) * 4);right:calc(var(--px) * 5)}