:root{--cream: #f2eee6;--paper: #f7f4ee;--ink: #151515;--muted: #77716a;--accent: #c8432f;--scene-bg: #f2eee6;--hud-ink: #151515;--hud-muted: #6d675f;--panel-w: 312px;--mono: ui-monospace, "SF Mono", "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;--serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif}:root[data-time=night]{--hud-ink: #f2eee6;--hud-muted: #a7a6a8}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--scene-bg);color:var(--ink);font-family:var(--mono);-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;cursor:pointer}#app{display:grid;grid-template-columns:minmax(0,1fr) var(--panel-w);height:100vh;height:100dvh}#stage{position:relative;overflow:hidden;background:var(--scene-bg);min-width:0}#stage canvas{display:block;width:100%;height:100%;touch-action:none}.masthead{position:absolute;top:26px;left:30px;max-width:300px;color:var(--hud-ink);pointer-events:none;transition:color .6s}.masthead h1{margin:0;font-family:var(--serif);font-weight:400;font-size:44px;line-height:1;letter-spacing:.01em;text-transform:uppercase}.masthead p{margin:12px 0 0;padding-top:10px;border-top:1px solid currentColor;font-size:11px;line-height:1.55;letter-spacing:.02em;color:var(--hud-muted)}.keys{position:absolute;left:30px;bottom:26px;display:grid;gap:7px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--hud-ink);pointer-events:none;transition:color .6s}.keys>div{display:flex;align-items:center;gap:4px}.keys .k{display:inline-flex;gap:3px}.keys .sep{color:var(--hud-muted);margin:0 2px}.keys .d{margin-left:8px}kbd{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 4px;border:1px solid currentColor;font-family:var(--mono);font-size:10px}kbd.w{min-width:58px}.keys .tip{margin:4px 0 0;font-size:10px;text-transform:none;letter-spacing:.02em;color:var(--hud-muted)}#announce{position:absolute;left:50%;top:12%;display:flex;flex-direction:column;align-items:center;min-width:220px;padding:12px 24px;background:var(--paper);border:1px solid var(--ink);text-align:center;pointer-events:none;opacity:0;transform:translate(-50%,-8px);transition:opacity .25s,transform .25s}#announce.show{opacity:1;transform:translate(-50%)}#announce .t{font-family:var(--serif);font-style:italic;font-size:30px;line-height:1.1}#announce .s{margin-top:6px;font-size:10px;letter-spacing:.16em;text-transform:uppercase}#announce .s+.s{margin-top:3px;color:var(--muted)}#banner{position:absolute;left:50%;top:50%;padding:14px 22px;background:var(--ink);color:var(--cream);font-size:12px;letter-spacing:.2em;text-transform:uppercase;pointer-events:none;opacity:0;transform:translate(-50%,-50%);transition:opacity .3s}#banner.show{opacity:1}#hint{position:absolute;left:50%;bottom:26px;padding:8px 13px;background:var(--ink);color:var(--cream);font-size:10px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,6px);transition:opacity .25s,transform .25s}#hint.show{opacity:1;transform:translate(-50%)}#flash{position:absolute;left:50%;bottom:70px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--hud-ink);pointer-events:none;opacity:0;transform:translate(-50%)}#flash.show{animation:flash .9s ease-out}@keyframes flash{0%{opacity:0;transform:translate(-50%,6px)}15%{opacity:1;transform:translate(-50%)}70%{opacity:1}to{opacity:0;transform:translate(-50%,-6px)}}#panel{background:var(--cream);border-left:1px solid var(--ink);overflow-y:auto;font-size:11px;letter-spacing:.03em;scrollbar-width:thin}.p-head{display:flex;justify-content:space-between;padding:13px 18px 12px;border-bottom:1px solid var(--ink);font-size:10px;letter-spacing:.18em;text-transform:uppercase}.isles{display:grid;grid-template-columns:2fr 1fr 1fr;border-bottom:1px solid var(--ink)}.isles a,.isles span{padding:9px 6px;border-right:1px solid var(--ink);color:inherit;font-size:10px;letter-spacing:.12em;text-align:center;text-decoration:none;text-transform:uppercase;transition:background .15s,color .15s}.isles>:last-child{border-right:0}.isles a:hover{background:var(--ink);color:var(--cream)}.isles .home{text-align:left;padding-left:18px}.isles .off{color:var(--muted);opacity:.45}.film-link{display:flex;justify-content:space-between;align-items:center;padding:9px 18px;border-bottom:1px solid var(--ink);color:inherit;font-size:10px;letter-spacing:.12em;text-decoration:none;text-transform:uppercase;transition:background .15s,color .15s}.film-link span{display:flex;align-items:center;gap:8px}.film-link b{width:7px;height:7px;border-radius:50%;background:var(--accent)}.film-link i{font-style:normal;color:var(--muted);letter-spacing:.08em}.film-link:hover{background:var(--ink);color:var(--cream)}.film-link:hover i{color:var(--cream)}.sec{padding:15px 18px 17px;border-bottom:1px solid var(--ink)}.sec h2{display:flex;justify-content:space-between;margin:0 0 11px;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}.sec h2 i{font-style:normal;font-weight:400;color:var(--muted)}.lbl{margin:12px 0 6px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.lbl:first-of-type{margin-top:0}.lbl em{font-style:normal;text-transform:none;letter-spacing:.02em}.note{margin:8px 0 0;font-size:10px;color:var(--muted)}.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--ink)}.seg button{padding:7px 4px;border:0;border-right:1px solid var(--ink);background:transparent;font-size:10px;letter-spacing:.08em;text-transform:uppercase;transition:background .15s,color .15s}.seg button:last-child{border-right:0}.seg button:hover{background:#1515150f}.seg button[aria-pressed=true]{background:var(--ink);color:var(--cream)}.btn{display:block;width:100%;margin-top:12px;padding:8px 6px;border:1px solid var(--ink);background:transparent;font-size:10px;letter-spacing:.12em;text-transform:uppercase;transition:background .15s,color .15s}.btn:hover{background:var(--ink);color:var(--cream)}.pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}.pair .btn{margin-top:0}.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.trio .btn{margin-top:0;padding:8px 2px}.influence{margin:12px 0 2px;padding-left:10px;border-left:1px solid var(--accent)}.influence .lbl:first-child{margin-top:0}#app[data-mode=watch] .keys-play,#app:not([data-mode=watch]) .keys-watch,#app[data-mode=watch] #touch{display:none}.row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:11px;font-size:10px;letter-spacing:.1em;text-transform:uppercase}.row output{font-variant-numeric:tabular-nums;color:var(--muted)}.tog{display:inline-grid;grid-template-columns:1fr 1fr;border:1px solid var(--ink);background:transparent;padding:0;font-size:9px;letter-spacing:.1em;text-transform:uppercase}.tog span{padding:4px 7px}.tog[aria-pressed=false] span:first-child,.tog[aria-pressed=true] span:last-child{background:var(--ink);color:var(--cream)}.dep{padding-left:10px;border-left:1px solid var(--ink);margin:4px 0 2px;transition:opacity .2s}.dep.off{opacity:.35;pointer-events:none}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:18px;margin:6px 0 0;background:transparent}input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--ink)}input[type=range]::-moz-range-track{height:1px;background:var(--ink)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;margin-top:-5px;border:1px solid var(--ink);border-radius:0;background:var(--cream)}input[type=range]::-moz-range-thumb{width:11px;height:11px;border:1px solid var(--ink);border-radius:0;background:var(--cream)}button:focus-visible,input:focus-visible{outline:1px solid var(--accent);outline-offset:2px}.score{border-bottom:1px solid var(--ink)}.sc-row{display:grid;grid-template-columns:1fr 42px 42px 48px;align-items:baseline;padding:7px 0;border-top:1px solid var(--ink);font-variant-numeric:tabular-nums}.sc-row>span:not(.sc-name){text-align:right}.sc-cols{padding:0 0 5px;border-top:0;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.sc-name{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase}.srv{width:7px;height:7px;border:1px solid var(--ink);border-radius:50%}.srv.on{background:var(--accent);border-color:var(--accent)}.sc-sets,.sc-games{font-size:15px}.sc-pts{font-family:var(--serif);font-size:22px;line-height:1}.sc-status{margin:8px 0 0;min-height:1em;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}.p-foot{margin:0;padding:14px 18px 20px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}body.filming #app{grid-template-columns:minmax(0,1fr);justify-items:center}body.filming #stage{width:min(100vw,56.25dvh);height:min(100dvh,calc(100vw * 16 / 9));align-self:center}body.filming #stage canvas:not(.film-frame){position:absolute;opacity:0;pointer-events:none}body.filming .film-frame{display:block;width:100%;height:100%}body.filming #panel,body.filming #scrim,body.filming #drawer-toggle,body.filming .masthead,body.filming .keys,body.filming #touch,body.filming #hint,body.filming #flash,body.filming #banner,body.filming #announce,body.filming #meter{display:none!important}.film-bar{position:fixed;left:24px;bottom:24px;z-index:30;width:260px;padding:14px 16px;border:1px solid var(--ink);background:var(--cream);font-size:11px}.film-title{margin:0 0 10px;font-size:10px;letter-spacing:.16em;text-transform:uppercase}.film-bar .pair{margin-top:10px}.film-quit{display:inline-block;margin-top:8px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.quick{position:absolute;top:16px;right:16px;z-index:4;display:flex;gap:8px;align-items:stretch}.quick .seg{background:var(--cream)}.quick .seg button{padding:7px 12px}.quick .snd{padding:7px 12px;border:1px solid var(--ink);background:var(--cream);font-size:10px;letter-spacing:.08em;text-transform:uppercase}.quick .snd[aria-pressed=false]{color:var(--muted);text-decoration:line-through}body.filming .quick{display:none}#drawer-toggle{display:none;position:absolute;top:16px;right:16px;padding:7px 11px;border:1px solid var(--ink);background:var(--cream);font-size:10px;letter-spacing:.14em;text-transform:uppercase}#scrim{display:none}#touch{position:absolute;inset:auto 0 0 0;height:0}#touch[hidden]{display:none}.stick{position:absolute;left:22px;bottom:22px;width:112px;height:112px;border:1px solid var(--hud-ink);border-radius:50%;touch-action:none}.knob{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--ink)}.tbtns{position:absolute;right:22px;bottom:30px;display:flex;gap:12px;align-items:flex-end}.tbtns button{width:76px;height:76px;border:1px solid var(--ink);border-radius:50%;background:var(--cream);font-size:10px;letter-spacing:.12em;text-transform:uppercase;touch-action:none}.tbtns button[data-act=hit]{width:88px;height:88px;background:var(--ink);color:var(--cream)}.touch .keys{display:none}.touch #hint{bottom:150px}@media(max-width:860px){.quick{top:auto;right:auto;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translate(-50%)}#app.touch:not([data-mode=watch]) .quick{bottom:calc(150px + env(safe-area-inset-bottom))}#app{grid-template-columns:minmax(0,1fr)}#panel{position:fixed;top:0;right:0;bottom:0;z-index:20;width:min(88vw,340px);transform:translate(100%);transition:transform .3s ease}#scrim{position:fixed;top:0;right:0;bottom:0;left:0;z-index:19;background:#15151540;opacity:0;pointer-events:none;transition:opacity .3s}#app.drawer-open #panel{transform:none}#app.drawer-open #scrim{display:block;opacity:1;pointer-events:auto}#scrim,#drawer-toggle{display:block}.masthead{top:16px;left:16px;max-width:calc(100% - 130px)}.masthead h1{font-size:30px}.masthead p{font-size:10px}.keys{left:16px;bottom:16px}#announce{top:18%}}@media(max-width:860px)and (max-height:560px){.masthead p,.keys{display:none}}