:root{--paper:#EFEDE8;--ink:#2B2B2D;--graphite:color-mix(in srgb,var(--ink) 58%,var(--paper));--line:color-mix(in srgb,var(--ink) 20%,transparent);
--serif:"Instrument Serif",Georgia,serif;--sans:"DM Sans",system-ui,sans-serif;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;color:var(--ink);font:400 1rem/1.5 var(--sans);-webkit-font-smoothing:antialiased}
canvas{position:fixed;left:0;top:0;width:100%;height:100%;height:100lvh;display:block}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.6;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .35  0 0 0 0 .35  0 0 0 .3 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.ui{position:fixed;transition:opacity .6s}
body.dim .ui{opacity:.35}
body.dim .ui:hover,body.dim .ui:focus-within{opacity:1}
body.photo .ui{opacity:0;pointer-events:none}
.odo{top:calc(env(safe-area-inset-top,0px) + 1rem);left:max(1rem,env(safe-area-inset-left,0px));display:flex;align-items:baseline;gap:.3rem;background:none;border:0;padding:.3rem .4rem;margin:-.3rem -.4rem;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;text-align:left;text-shadow:0 0 10px color-mix(in srgb,var(--paper) 80%,transparent)}
.odo b{font:400 1.6rem/1 var(--serif);font-variant-numeric:tabular-nums}
.odo span:empty{display:none}
.odo span{font:500 .7rem var(--sans);letter-spacing:.08em;color:var(--graphite)}
.menu{top:calc(env(safe-area-inset-top,0px) + .7rem);right:max(.8rem,env(safe-area-inset-right,0px))}
.fab{position:relative;width:44px;height:44px;border:0;background:none;color:var(--ink);display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fab::before{content:"";position:absolute;inset:8px;border-radius:50%;background:color-mix(in srgb,var(--ink) 8%,transparent);transition:background .2s}
.fab svg{position:relative;width:18px;height:18px;fill:currentColor;opacity:.45;transition:opacity .2s}
.fab:hover::before,.fab[aria-expanded="true"]::before{background:color-mix(in srgb,var(--ink) 15%,transparent)}
.fab:hover svg,.fab:focus-visible svg,.fab[aria-expanded="true"] svg{opacity:1}
body.dim .menu{opacity:.2}
.tray{position:absolute;top:calc(100% + .5rem);right:0;width:232px;padding:6px;border-radius:18px;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:0 14px 34px -14px rgba(0,0,0,.4);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top right;transition:opacity .2s,transform .2s,visibility .2s}
.tray.open{opacity:1;visibility:visible;transform:none}
.tray button{display:flex;align-items:center;gap:.7rem;width:100%;min-height:44px;padding:0 .8rem;border:0;border-radius:12px;background:none;color:var(--ink);font:500 .9rem var(--sans);cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}
.tray button:hover{background:var(--line)}
.tray svg{width:20px;height:20px;fill:currentColor;flex:none}
.tray kbd{margin-left:auto;font:500 .68rem var(--sans);color:var(--graphite);border:1px solid var(--line);border-radius:5px;padding:0 .35rem}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:2px 6px 6px}
.tray .seg button{min-height:36px;justify-content:center;padding:0;border:1px solid var(--line);border-radius:10px;font-size:.8rem}
.tray .seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
#walk .pa,#walk[aria-pressed="true"] .pl{display:none}
#walk[aria-pressed="true"] .pa{display:block}
button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#revive{position:fixed;top:0;right:0;width:64px;height:64px;border:0;background:none;cursor:pointer;display:none;-webkit-tap-highlight-color:transparent}
#revive::after{content:"";position:absolute;top:22px;right:22px;width:8px;height:8px;border-radius:50%;background:var(--ink);opacity:.25}
body.photo #revive{display:block}
#hint{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 1.1rem);max-width:calc(100vw - 11rem);text-align:center;font:400 .8rem/1.3 var(--sans);color:var(--graphite);transition:opacity .8s;pointer-events:none}
#flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:9}
#flash.on{opacity:.75}
#flash:not(.on){transition:opacity .45s}
@media(hover:none){.tray kbd{display:none}}
#spacer{width:1px;pointer-events:none}
.lbl{font:500 .66rem var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--graphite);padding:.45rem .9rem .1rem}
.tray{max-height:calc(100vh - 6rem);max-height:calc(100dvh - 6rem);overflow-y:auto}
@media(prefers-reduced-motion:reduce){.ui,.tray,#hint{transition:none}}