@font-face{font-family:Barlow Condensed;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/barlow-condensed-latin-500-normal-BgYH2mbd.woff2)format("woff2"),url(/assets/barlow-condensed-latin-500-normal-HIEiP5Ov.woff)format("woff")}@font-face{font-family:Barlow Condensed;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/barlow-condensed-latin-600-normal-DepVgxBB.woff2)format("woff2"),url(/assets/barlow-condensed-latin-600-normal-BFJEwTuo.woff)format("woff")}@font-face{font-family:Barlow Condensed;font-style:normal;font-display:swap;font-weight:700;src:url(/assets/barlow-condensed-latin-700-normal-v1xN8_Wq.woff2)format("woff2"),url(/assets/barlow-condensed-latin-700-normal-Dmwat-ge.woff)format("woff")}@font-face{font-family:Barlow Condensed;font-style:normal;font-display:swap;font-weight:800;src:url(/assets/barlow-condensed-latin-800-normal-BKzMuPgK.woff2)format("woff2"),url(/assets/barlow-condensed-latin-800-normal-e9GbPXiK.woff)format("woff")}@font-face{font-family:Barlow Condensed;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/barlow-condensed-latin-ext-500-normal-yA5ONLQ9.woff2)format("woff2"),url(/assets/barlow-condensed-latin-ext-500-normal-B1RE8WP7.woff)format("woff")}@font-face{font-family:Barlow Condensed;font-style:normal;font-display:swap;font-weight:700;src:url(/assets/barlow-condensed-latin-ext-700-normal-CwuXbfVR.woff2)format("woff2"),url(/assets/barlow-condensed-latin-ext-700-normal-BIHFfxf0.woff)format("woff")}:root{--ink:#f2e6cb;--ink-soft:#d8c8a6;--shade:#241a169e;--accent:#e0a15a;color:var(--ink);font-family:Barlow Condensed,Arial Narrow,sans-serif;font-weight:500}*{box-sizing:border-box}html,body{background:#936b70;height:100%;margin:0;overflow:hidden}#stage,#stage canvas{touch-action:none;cursor:grab;width:100%;height:100%;display:block;position:fixed;inset:0}#stage canvas:active{cursor:grabbing}#stage canvas{opacity:1;transition:opacity .9s ease-out}body.loading #stage canvas{opacity:0}#title{animation:.5s ease-out rise}@keyframes rise{0%{opacity:0;transform:translateY(8px)}}.loader{min-height:2.6rem;color:var(--ink-soft);align-items:center;gap:.8rem;margin-top:1.2rem;font-size:1.1rem;display:flex}.loader .bar{background:#f2e6cb2e;border-radius:2px;flex:none;width:9rem;height:4px;overflow:hidden}#load-bar{background:var(--accent);width:4%;height:100%;transition:width .4s ease-out;display:block}body:not(.loading) .loader,body.loading .choices,body.loading #clock,body.loading #clock-toggle{display:none!important}.choices{flex-wrap:wrap;gap:.6rem;margin-top:1.2rem;animation:.4s ease-out rise;display:flex}.choices button{margin-top:0}button.quiet{color:var(--ink);background:#f2e6cb24}button.quiet:hover,button.quiet:focus-visible{background:#f2e6cb42}.screen .note{color:var(--ink-soft);font-size:1.05rem}.controls{border-top:1px solid #f2e6cb29;grid-template-columns:max-content 1fr;gap:.25rem .9rem;margin:1rem 0 0;padding-top:.85rem;font-size:1.05rem;line-height:1.25;display:grid}.controls dt{color:var(--ink);font-weight:600}.controls dd{color:var(--ink-soft);margin:0}kbd{min-width:1.35em;font:inherit;text-align:center;color:var(--ink);border:1px solid #f2e6cb59;border-radius:3px;margin-right:.15em;padding:0 .3em;font-size:.92em;font-weight:600;line-height:1.3;display:inline-block}dd kbd{margin:0 .05em}body.wandering #clock .ends{display:none}#to-title{justify-self:start;margin-top:.35rem;padding:.25rem .8rem .3rem;font-size:1.05rem;display:none}body.playing #to-title{display:block}[hidden]{display:none!important}.screen{background:var(--shade);letter-spacing:.01em;border-radius:3px;width:min(32rem,100vw - 32px);max-height:calc(100vh - 2*clamp(24px,9vh,96px));padding:1.6rem 1.9rem 1.8rem;font-size:1.28rem;line-height:1.32;position:fixed;bottom:clamp(24px,9vh,96px);left:clamp(16px,6vw,88px);overflow-y:auto}@media (height<=760px){body:not(.touch) .screen{max-height:calc(100vh - 32px);bottom:16px}}h1,h2{margin:0;font-weight:700;line-height:1}h1{font-size:clamp(3.2rem,7vw,5.2rem)}h2{font-size:clamp(2.2rem,5vw,3.2rem)}.screen p{margin:.7rem 0 0}.lead{color:var(--accent);font-size:1.6rem;font-weight:600}.keys{color:var(--ink-soft);font-size:1.1rem}button{font:inherit;color:#2a1e16;background:var(--accent);cursor:pointer;border:0;border-radius:2px;margin-top:1.2rem;padding:.5rem 1.3rem .55rem;font-size:1.35rem;font-weight:700}button:hover,button:focus-visible{background:#f0bb78}button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}#things{background:var(--shade);pointer-events:none;border-radius:3px;margin:0;padding:.65rem 1rem .75rem;font-size:1.1rem;line-height:1.32;list-style:none;position:fixed;top:18px;left:20px}#things strong{font-weight:700}#things span{color:var(--ink-soft)}#things li.done{opacity:.55;text-decoration:line-through}#clock{background:var(--shade);border-radius:3px;gap:.3rem;width:min(17rem,100vw - 32px);padding:.65rem 1rem .7rem;font-size:1.1rem;line-height:1.25;display:grid;position:fixed;top:18px;right:20px}#clock output{float:right;font-variant-numeric:tabular-nums;font-weight:700}#clock input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer;margin:.1rem 0 .35rem}#clock .tick{cursor:pointer;align-items:baseline;gap:.45rem;display:flex}#clock .tick input{accent-color:var(--accent);flex:none;margin:0}#clock small{color:var(--ink-soft);margin-top:.2rem;font-size:.95rem}#caption{background:var(--shade);text-align:center;opacity:0;pointer-events:none;border-radius:3px;width:max-content;max-width:min(44rem,100vw - 32px);margin:0;padding:.45rem 1rem .5rem;font-size:1.32rem;transition:opacity .4s;position:fixed;bottom:42px;left:50%;transform:translate(-50%)}#caption.on{opacity:1}#t-pad,#clock-toggle,#view-toggle,.keys-touch{display:none}body.touch{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}body.touch .keys-desktop{display:none}body.touch .keys-touch{display:block}body.touch.playing #t-pad{touch-action:none;width:50%;display:block;position:fixed;top:0;bottom:0;left:0}#t-stick{left:max(96px, calc(env(safe-area-inset-left) + 88px));top:calc(100% - max(96px, calc(env(safe-area-inset-bottom) + 88px)));pointer-events:none;opacity:.55;background:#241a1647;border:2px solid #f2e6cb47;border-radius:50%;width:120px;height:120px;margin:-60px 0 0 -60px;transition:opacity .2s;position:absolute}#t-stick.held{opacity:1;border-color:#f2e6cb99}#t-knob{background:radial-gradient(circle at 40% 35%,#fff4dc,#d8c8a6);border-radius:50%;width:52px;height:52px;margin:-26px 0 0 -26px;position:absolute;top:50%;left:50%;box-shadow:0 2px 8px #0006}body.touch #clock-toggle{top:max(12px, env(safe-area-inset-top));right:max(12px, env(safe-area-inset-right));min-height:44px;color:var(--ink);background:var(--shade);border:0;margin:0;padding:0 1rem;font-size:1.1rem;display:block;position:fixed}body.touch.playing #view-toggle{right:max(12px, env(safe-area-inset-right));bottom:max(16px, env(safe-area-inset-bottom));min-height:44px;color:var(--ink);background:var(--shade);margin:0;padding:0 1rem;font-size:1.1rem;display:block;position:fixed}body.touch #clock{top:calc(max(12px, env(safe-area-inset-top)) + 52px);right:max(12px, env(safe-area-inset-right));width:min(18rem,100vw - 24px)}body.touch #clock .tick{align-items:center;min-height:36px}body.touch #clock input[type=checkbox]{width:20px;height:20px}body.touch #clock input[type=range]{height:32px}body.touch #things{top:max(12px, env(safe-area-inset-top));left:max(12px, env(safe-area-inset-left));max-width:calc(100vw - 150px);padding:.45rem .75rem .5rem;font-size:.95rem;line-height:1.22}body.touch #caption{bottom:max(16px, env(safe-area-inset-bottom));max-width:calc(100vw - 32px);font-size:1.1rem}body.touch.playing #caption{bottom:calc(max(16px, env(safe-area-inset-bottom)) + 56px)}body.touch .screen{left:max(12px, env(safe-area-inset-left));right:max(12px, env(safe-area-inset-right));bottom:max(12px, env(safe-area-inset-bottom));width:auto;max-width:32rem;max-height:calc(100dvh - 24px);padding:1.1rem 1.25rem 1.3rem;font-size:1.15rem;overflow-y:auto}body.touch button{min-height:48px}@media (height<=480px){body.touch .screen{padding:.7rem 1rem .9rem;font-size:1rem}body.touch h1{font-size:2.4rem}body.touch .lead{font-size:1.25rem}body.touch #things{font-size:.85rem}}@media (width<=720px){body:not(.touch) #clock{top:auto;bottom:16px;right:16px}}
