@font-face{font-family:DR Game;src:url(../ui/game.woff) format("woff");font-display:swap}@font-face{font-family:DR Display;src:url(../ui/display.woff) format("woff");font-display:swap}:root{color-scheme:dark;--void:#000;--ink:#14182e;--panel:#2c354d;--raise:#3a3f5e;--line:#686f99;--text:#f5ffe8;--muted:#a3a7c2;--orange:#fd7801;--gold:#f0b541;--font:"DR Game",ui-monospace,monospace;--title:"DR Display","DR Game",ui-monospace,monospace;--frame:0 0 0 2px var(--ink),0 0 0 4px var(--text),6px 6px 0 4px #000a;--cur:url(../ui/cursor-arrow.png) 6 6,default;--cur-hand:url(../ui/cursor-hand.png) 10 4,pointer}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--void);color:var(--text);font:400 24px/1.15 var(--font);overflow:hidden;cursor:var(--cur);-webkit-font-smoothing:none;font-smooth:never;text-rendering:optimizeSpeed}button{font:inherit;color:inherit;background:none;border:0;cursor:var(--cur-hand);padding:0}button:disabled{cursor:var(--cur)}:focus-visible{outline:2px dashed var(--orange);outline-offset:3px}svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;shape-rendering:crispEdges}#view{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none;outline:none;cursor:var(--cur)}#view[data-cursor=hand]{cursor:var(--cur-hand)}#view[data-cursor=none]{cursor:none}.key{display:inline-block;flex:none;width:32px;height:32px;vertical-align:middle;image-rendering:pixelated;background:url(../ui/keys.png) calc(var(--kx) * -32px) calc(var(--ky) * -32px) / 512px 832px no-repeat}button:hover:not(:disabled) .key,button[aria-pressed=true] .key{background-position-x:calc((var(--kx) + 1) * -32px)}button:disabled .key{background-position-x:calc((var(--kx) + 2) * -32px)}.mouse{display:inline-block;flex:none;width:32px;height:32px;vertical-align:middle;image-rendering:pixelated;background:url(../ui/mouse.png) calc(var(--mx, 1) * -32px) calc(var(--my, 1) * -32px) / 192px 320px no-repeat}#crop{position:fixed;left:50%;top:50%;width:var(--cw,100vw);height:var(--ch,100vh);transform:translate(-50%,-50%);box-shadow:0 0 0 200vmax var(--void);pointer-events:none;z-index:1}body:not(.intro) #crop{display:none}.card{position:absolute;top:0;right:0;bottom:0;left:0;text-align:center;transition:opacity .25s steps(3);background:linear-gradient(180deg,#0000 55%,#0b0402d9 92%)}body.revealing .card{opacity:0}.titleblock{position:absolute;left:calc(var(--title-x, .5) * 100%);top:calc(var(--title-y, .36) * 100% - var(--title-size, 60px) / 2);translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:calc(var(--title-size, 60px) * .45)}.card h1{--u:calc(var(--title-size, 60px) / 20);margin:0;font:400 var(--title-size, 60px)/1 var(--title);color:#fff4c8;text-transform:uppercase;white-space:nowrap;text-shadow:var(--u) 0 #1d1009,calc(var(--u) * -1) 0 #1d1009,0 var(--u) #1d1009,0 calc(var(--u) * -1) #1d1009,var(--u) var(--u) #1d1009,calc(var(--u) * -1) var(--u) #1d1009,var(--u) calc(var(--u) * -1) #1d1009,calc(var(--u) * -1) calc(var(--u) * -1) #1d1009,calc(var(--u) * 2) calc(var(--u) * 2) #1d1009}#btnStart{pointer-events:auto;display:flex;align-items:center;gap:10px;padding:6px 12px;text-transform:uppercase;text-shadow:2px 2px 0 #000}#btnStart .mouse{background-position:-32px -96px;animation:press 1.2s steps(1) infinite}#btnStart:hover,#btnStart:focus-visible{color:var(--orange)}#btnStart:hover .mouse{animation:none}@keyframes press{50%{background-position:0 -96px}}body.at-desk .dock,body.at-desk .tray{opacity:0;pointer-events:none}body.at-desk .dock{translate:-50% 16px}body.at-desk .tray{translate:16px -50%}.coach{position:fixed;left:50%;bottom:28px;translate:-50% 0;margin:0;display:flex;align-items:center;gap:8px;font-size:16px;color:var(--text);text-transform:uppercase;text-shadow:2px 2px 0 #000;pointer-events:none;opacity:0;transition:opacity .4s steps(4)}.coach.on{opacity:1}.coach .mouse{background-position:-32px -96px;animation:press 1.2s steps(1) infinite}.dock,.tray{transition:opacity .3s steps(4),translate .3s steps(4)}body.intro .dock,body.intro .tray{opacity:0;pointer-events:none}body.intro .dock{translate:-50% 16px}body.intro .tray{translate:16px -50%}.hint{position:fixed;left:50%;bottom:86px;translate:-50% 0;margin:0;padding:4px 14px 4px 8px;display:flex;align-items:center;gap:8px;background:#000c;color:var(--text);max-width:calc(100vw - 32px);text-transform:uppercase;pointer-events:none;opacity:0;transition:opacity .15s steps(2)}.hint.on{opacity:1}.hint:not(:has(.key,.mouse)){padding-left:14px}.win{background:linear-gradient(180deg,var(--panel),var(--ink));box-shadow:var(--frame)}.dock{position:fixed;left:50%;bottom:20px;translate:-50% 0;display:flex;align-items:center;gap:16px;max-width:calc(100vw - 24px)}.dock .group{display:flex;align-items:center;gap:2px;padding:4px}.tool{height:40px;min-width:40px;padding:0 10px 0 4px;display:flex;align-items:center;gap:6px;flex:none;text-transform:uppercase;white-space:nowrap}.tool svg{display:none}.tool:hover:not(:disabled){background:var(--raise);outline:2px solid #fff;outline-offset:-2px}.tool:disabled{opacity:.45}.tool.icon{padding:0 4px}.tool[aria-pressed=true]{color:var(--gold)}.sep{width:2px;height:28px;background:var(--line);margin:0 6px;flex:none}#pageinfo{min-width:150px;text-align:center;font-variant-numeric:tabular-nums}.tray{position:fixed;right:20px;top:50%;translate:0 -50%;width:184px;display:flex;flex-direction:column;gap:18px}.slot{display:flex;flex-direction:column;gap:6px;padding:6px}.grab{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px 8px;text-transform:uppercase}.grab:hover{background:var(--raise);outline:2px solid #fff;outline-offset:-2px}.grab img{width:96px;height:96px;display:block;image-rendering:pixelated;filter:drop-shadow(3px 3px 0 #000a)}.grab:hover img{translate:0 -2px}.grab img[hidden],.grab svg[hidden]{display:none}.grab svg{width:44px;height:44px;margin:26px}.grab .key{position:absolute;top:2px;right:2px}.grab[aria-pressed=true]{background:var(--orange);color:var(--ink)}.grab[aria-pressed=true] .key{display:none}.opts[hidden]{display:none!important}.opts.zoom{display:flex;align-items:center;justify-content:space-between;font-variant-numeric:tabular-nums}.opts.zoom button{display:grid;place-items:center;width:36px;height:36px}.opts.zoom button:hover:not(:disabled){outline:2px solid #fff;outline-offset:-2px}.opts.zoom button:disabled{opacity:.45}.opts.ink{display:flex;flex-direction:column;gap:6px;align-items:center}.swatches{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.swatch{width:32px;height:32px;background:var(--c);box-shadow:inset 0 0 0 2px #0006}.swatch:hover{outline:2px solid #fff;outline-offset:2px}.swatch[aria-pressed=true]{outline:2px solid var(--orange);outline-offset:2px}.opts.ink.erasing .swatches{opacity:.35}.wipe{padding:4px;color:var(--muted);width:100%;text-transform:uppercase}.wipe:hover{background:var(--raise);color:var(--text)}.tutorial{position:fixed;top:0;right:0;bottom:0;left:0;z-index:4;display:grid;place-items:center;background:#000b;opacity:0;pointer-events:none;transition:opacity .25s steps(3)}.tutorial.on{opacity:1;pointer-events:auto;cursor:var(--cur-hand)}.tut-wrap{display:flex;flex-direction:column;align-items:center;gap:20px;text-transform:uppercase}.tut-card{display:flex;flex-direction:column;gap:18px;padding:22px 30px}.tut-title{text-align:center;font:400 40px/1 var(--title);letter-spacing:1px;color:var(--gold);text-shadow:3px 3px 0 #000}.tut-row{display:flex;align-items:center;gap:18px}.key.big{width:64px;height:64px;background-size:1024px 1664px;background-position:calc(var(--kx) * -64px) calc(var(--ky) * -64px)}.mouse.big{width:64px;height:64px;background-size:384px 640px;background-position:0 -64px}.mouse.big.wheel{animation:wheel 1s steps(1) infinite}@keyframes wheel{50%{background-position:-192px -64px}}.tut-dismiss{margin:36px 0 0;font-size:16px;text-shadow:2px 2px 0 #000;color:var(--muted);animation:blink 1.1s steps(1) infinite}@keyframes blink{50%{opacity:.35}}#scrim{position:fixed;top:0;right:0;bottom:0;left:0;background:#000a;opacity:0;pointer-events:none;transition:opacity .2s steps(3)}#scrim.on{opacity:1;pointer-events:auto}#drawer{position:fixed;left:16px;top:16px;bottom:16px;width:min(460px,calc(100vw - 48px));translate:calc(-100% - 40px) 0;visibility:hidden;transition:translate .2s steps(5),visibility 0s .2s;display:flex;flex-direction:column}#drawer.on{translate:0 0;visibility:visible;transition:translate .2s steps(5)}.dhead{display:flex;justify-content:space-between;align-items:center;padding:10px 8px 10px 16px;border-bottom:2px solid var(--line)}.dhead b{font:400 40px/1 var(--title);letter-spacing:1px}.dhead .tool{padding:0 8px 0 4px}.dbody{overflow-y:auto;flex:1;padding:8px 8px 20px;scrollbar-color:var(--line) transparent}.chap,.item{position:relative;display:flex;justify-content:space-between;gap:12px;width:100%;text-align:left;padding:6px 10px 6px 26px}.chap{color:var(--gold);text-transform:uppercase;margin-top:10px}.item{color:var(--muted)}.item.sub{padding-left:42px}.chap:hover,.item:hover,.chap:focus-visible,.item:focus-visible{background:var(--raise);color:var(--text);outline:none}.chap:hover:before,.item:hover:before,.chap:focus-visible:before,.item:focus-visible:before{content:"";position:absolute;left:8px;top:50%;translate:0 -50%;border:6px solid transparent;border-left:8px solid var(--orange);border-right:0}.num{font-variant-numeric:tabular-nums;color:var(--muted);flex:none}#loader{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--void);transition:opacity .4s steps(4);text-align:center;padding:24px;z-index:3}#loader.done{opacity:0;pointer-events:none}#loader b{font:400 60px/1 var(--title);letter-spacing:2px}.bar{width:min(288px,70vw);height:16px;padding:2px;box-shadow:0 0 0 2px var(--text)}.bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--orange) 0 10px,transparent 10px 12px)}#loadmsg{color:var(--muted);max-width:44ch;text-transform:uppercase}.devcam{position:fixed;top:16px;right:16px;z-index:5;width:340px;padding:10px 14px 12px;font-size:16px;display:flex;flex-direction:column;gap:8px}.devcam header{display:flex;justify-content:space-between;align-items:baseline}.devcam b{color:var(--gold);text-transform:uppercase}.devcam .dim{color:var(--muted);margin:0}.devcam dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:0;font-variant-numeric:tabular-nums}.devcam dt{color:var(--muted)}.devcam dd{margin:0}.devcam label{display:flex;align-items:center;gap:8px}.devcam output{min-width:46px;text-align:right;font-variant-numeric:tabular-nums}.devcam input[type=range]{flex:1;accent-color:var(--orange)}.devcam input[type=checkbox]{accent-color:var(--orange)}.devcam .row{display:flex;gap:6px}.devcam .tool{height:32px;padding:0 10px;font-size:16px;background:var(--raise)}body.devcam-on #btnStart,body.devcam-notitle .card h1{visibility:hidden}@media (max-width:760px){.tool .label,.tool .key:not(.arrow){display:none}.tool svg{display:block}.tool{padding:0 9px}.tool.icon{padding:0 2px}.sep{margin:0 2px}.dock{gap:6px}#pageinfo{min-width:76px}.tray{top:auto;right:auto;left:50%;bottom:84px;translate:-50% 0;width:auto;flex-direction:row;align-items:flex-end;gap:12px;max-width:calc(100vw - 16px)}body.intro .tray{translate:-50% 16px}.slot{flex-direction:row;align-items:center;gap:4px;padding:4px}.grab{flex-direction:row;gap:6px;padding:2px 10px 2px 2px;white-space:nowrap}.grab img{width:48px;height:48px}.tool,.grab,.wipe,#pageinfo{font-size:16px}#pageinfo{min-width:96px}.grab svg{width:24px;height:24px;margin:8px}.grab .key{display:none}.opts.ink{flex-direction:row}.swatches{grid-template-columns:repeat(4,1fr);gap:6px}.swatch{width:24px;height:24px}.wipe{width:auto;white-space:nowrap}.hint{bottom:150px;font-size:16px}.card h1{font-size:40px}}@media (hover:none){.hint .key,.grab .key{display:none}.tool .key:not(.arrow){display:none}.tool svg{display:block}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}