/* A printer's console: Courier, one orange filament, a gold bed. The page is as tall as the print is long. */
:root{--bg:#efece6;--ink:#1b1b1b;--pla:#ff5a00;color:var(--ink);background:var(--bg);font:12px/1.4 "Courier New",Courier,monospace;-webkit-text-size-adjust:100%}
*{box-sizing:border-box}
html,body{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--pla);outline-offset:2px}
.track{height:900svh}

#scene{position:fixed;inset:0;touch-action:pan-y;cursor:ew-resize}
#scene canvas{display:block;width:100%;height:100%}

header{position:fixed;left:0;right:0;top:0;z-index:2;padding:calc(10px + env(safe-area-inset-top)) 12px 0;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;pointer-events:none}
header a{pointer-events:auto;font:bold 20px/1 "Courier New",Courier,monospace;text-decoration:none;letter-spacing:-.04em}
header p{margin:0;font-variant-numeric:tabular-nums}
header b{color:var(--pla);font-size:15px}

#log{position:fixed;left:12px;right:12px;bottom:calc(34px + env(safe-area-inset-bottom));z-index:2;list-style:none;margin:0;padding:0;max-width:430px}
#log li{padding:1px 0;font-size:11px}
#log li[hidden]{display:none}
#log a{display:inline-block;background:var(--ink);color:var(--bg);padding:3px 6px;text-decoration:none;min-height:26px;line-height:20px}
#log a:hover{background:var(--pla)}

#hint{position:fixed;right:12px;top:calc(env(safe-area-inset-top) + 50%);margin:0;z-index:2;writing-mode:vertical-rl;text-transform:uppercase;pointer-events:none}
.done #hint{visibility:hidden}
#loading{position:fixed;inset:45% 0 auto;text-align:center;margin:0}
.fine{position:fixed;left:12px;right:12px;bottom:calc(6px + env(safe-area-inset-bottom));margin:0;font-size:9px;z-index:2}
@media(min-width:900px){#log{left:18px;bottom:36px}header{padding:14px 18px 0}}