:root{color-scheme:light;--bg:#ebe4d4;--ink:#1e1a15;--muted:#5f574b;--accent:#a83f27;--ui:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--serif:ui-serif,"Iowan Old Style","Palatino Linotype",Georgia,serif}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font:14px/1.5 var(--ui)}
main{position:fixed;inset:0;width:100vw;height:100dvh}
canvas{display:block;width:100%;height:100%;cursor:crosshair;touch-action:none;-webkit-tap-highlight-color:transparent}
canvas:focus{outline:none}canvas:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Readout: a reserved band along the bottom edge. Position and height come from app.js; nothing is drawn beneath it. */
.readout{position:absolute;z-index:2;margin:0;padding:6px 12px;display:flex;flex-direction:column;justify-content:center;pointer-events:none;background:#f1ebdde6;border-top:1px solid #a83f2766;font:12px/1.4 var(--mono);color:var(--muted);text-align:center}
.readout strong{display:block;color:var(--ink);font:500 14px/1.3 var(--serif)}
.readout strong:empty{display:none}
.readout span{display:block}
.readout.idle{background:transparent;border-top-color:#1e1a151f}
.explore-open{position:fixed;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));z-index:4;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid #1e1a1533;background:#ebe4d4cc;color:#1e1a15b0;font:16px/1 var(--mono);cursor:pointer}
.explore-open:hover,.explore-open:focus-visible{color:var(--ink);border-color:#1e1a15a0;background:#f4efe3}
.status{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:min(460px,calc(100vw - 48px));margin:0;padding:14px;text-align:center;color:var(--ink);background:var(--bg);font:12px/1.8 var(--mono)}
.status p{margin:0}
@media(max-width:599px){.readout{font-size:11px;line-height:1.38;padding:5px 9px;text-align:left}.readout strong{font-size:13px}}
@media(max-height:499px){.readout{padding:4px 12px;font-size:11px;line-height:1.35}.readout strong{font-size:13px;line-height:1.25}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(forced-colors:active){.explore-open{border-color:ButtonText;color:ButtonText}canvas{border:1px solid CanvasText}.readout{border:1px solid CanvasText}}