*,*:before,*:after{box-sizing:border-box}html,body{margin:0;height:100%;overscroll-behavior:none}body{-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}.face{position:relative;width:100%;height:100dvh;min-height:100dvh;overflow:hidden}.cellbox{position:relative;overflow:hidden}canvas.cells{position:absolute;inset:0;display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}.face *{transition:none!important;animation:none!important}button{font:inherit;color:inherit;border:0;margin:0;padding:0;background:none;cursor:pointer;touch-action:none}.fault{position:absolute;left:50%;bottom:4px;transform:translate(-50%);margin:0;max-width:90%;text-align:center;font-size:12px;line-height:1.4;color:#ff8f6b}.back{position:absolute;top:4px;left:4px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;opacity:.45;color:inherit;padding:6px 10px}.back:hover,.back:focus-visible{opacity:1}.column{--lit: #efebde;--unlit: #0a0a06;--rail: #1a1913;--housing: #16150f;--ink: #efebde;--dim: #8b8676;--lamp-on: #f2e14a;--lamp-off: #463f2c;--bottom: 200px;--rail-w: 96px;display:flex;flex-direction:column;background:var(--housing);color:var(--ink);font-family:JetBrains Mono,ui-monospace,SF Mono,Menlo,Consolas,monospace}@media(min-width:700px){.column{--bottom: 214px;--rail-w: 163px}}.body{flex:1;display:flex;min-height:0}.rail{width:var(--rail-w);flex:none;background:var(--rail);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:18px 6px;position:relative}.arrow-block{height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:10px;letter-spacing:.2em;color:var(--ink);visibility:hidden}.arrow{width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent}.arrow--up{border-bottom:22px solid var(--ink)}.arrow--down{border-top:22px solid var(--ink)}[data-direction=sharp] .arrow-block--top,[data-direction=flat] .arrow-block--bottom{visibility:visible}.name{display:flex;flex-direction:column;align-items:center}.spacer{display:block;height:18px}.name b{font-family:Space Grotesk,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:62px;font-weight:700;line-height:1;letter-spacing:-.03em}.name small{height:18px;font-size:11px;color:var(--dim)}.rail__state{position:absolute;bottom:14px;font-size:10px;letter-spacing:.2em;color:var(--dim)}[data-state=listening] .name b{font-size:46px;color:var(--dim)}[data-stale] .name b{font-size:62px;color:var(--dim)}[data-stale] .name small{color:var(--rail)}.field{flex:1;display:flex;gap:8px;padding-left:8px;background:var(--unlit);box-shadow:inset 3px 0 8px #00000090;min-width:0}.col{min-width:0;background:var(--unlit)}[data-state=off] .name,[data-state=off] .arrow-block{visibility:hidden}[data-state=off] .field{gap:0;padding-left:0;background:var(--housing);box-shadow:none}[data-state=off] .col{background:var(--housing)}[data-state=off] canvas.cells{visibility:hidden}.bar{height:var(--bottom);flex:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 22px}.bar__gate{flex:1;min-width:0}.keybox{flex:none;display:flex;flex-direction:column;align-items:center;gap:12px}.bar__legend{font-size:10px;letter-spacing:.2em;color:var(--dim);text-align:center;max-width:12ch;line-height:1.5}.gate{display:flex;flex-direction:column;gap:8px;max-width:420px}.gate__head,.gate__ends{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;letter-spacing:.2em;color:var(--dim)}.gate__value{color:var(--ink);letter-spacing:.12em}[data-state=off] .gate__value{color:var(--dim)}.gate__track{display:flex;align-items:flex-end;gap:4px;height:22px;touch-action:none;cursor:pointer}.gate__track:focus-visible{outline:2px solid var(--lamp-on);outline-offset:4px}.gate__step{flex:1;min-width:0;height:10px;background:#262418}.gate__step.is-past{height:15px;background:var(--dim)}.gate__step.is-at{height:22px;background:var(--lamp-on)}[data-state=off] .gate__step.is-past{background:#3c3828}[data-state=off] .gate__step.is-at{background:#4e4830}.key{width:88px;height:88px;border-radius:44px;background:var(--rail);display:grid;place-items:center;position:relative;box-shadow:0 6px 14px #00000070,inset 0 1px #ffffff10}.key[data-holding]{box-shadow:inset 0 4px 10px #00000090}.lamp{width:16px;height:16px;background:var(--lamp-off)}[data-state=listening] .lamp,[data-state=locked] .lamp{background:var(--lamp-on)}.key:after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--lamp-on);clip-path:inset(calc(100% - var(--hold, 0) * 100%) 0 0 0)}