:root{
  --ink:#071a24; --deep:#0a3346; --sea:#14708a; --foam:#e6f4f5; --sun:#ff8a1f;
  --lime:#9be15d; --alarm:#ff5a4d; --mute:#86adb8; --line:rgba(230,244,245,.16);
  --disp:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --body:'Barlow','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--ink);color:var(--foam);font-family:var(--body);overflow:hidden}
#app{position:relative;width:100%;height:100%;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;background:var(--ink)}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block}
#c{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#fail{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:32px;font:600 16px/1.5 var(--body);color:var(--foam);background:var(--ink)}
#fail[hidden]{display:none}
.ov{position:absolute;inset:0;display:flex;padding:clamp(16px,4vw,48px)}
.ov[hidden]{display:none}
#menu{align-items:flex-end;background:linear-gradient(90deg,rgba(7,26,36,.94) 0%,rgba(7,26,36,.78) 44%,rgba(7,26,36,.10) 100%)}
.card{max-width:540px;display:flex;flex-direction:column;gap:16px;max-height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
.eyebrow{font:600 12px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sun);margin:0}
h1{font:800 clamp(56px,10vw,112px)/.84 var(--disp);text-transform:uppercase;margin:0;letter-spacing:-.005em}
h1 em{font-style:normal;color:transparent;-webkit-text-stroke:2px var(--foam)}
h2{font:800 clamp(34px,5vw,54px)/.9 var(--disp);text-transform:uppercase;margin:0}
.lede{font:400 17px/1.45 var(--body);color:#c6dde2;margin:0;max-width:46ch}
.seg{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.seg .lab{font:600 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-right:6px}
button{font:700 16px/1 var(--disp);letter-spacing:.09em;text-transform:uppercase;cursor:pointer;color:var(--foam);background:transparent;border:1.5px solid var(--line);border-radius:4px;padding:13px 18px;transition:transform .12s,background .12s,border-color .12s}
button:hover{border-color:var(--foam)}
button:active{transform:translateY(1px)}
button.primary{background:var(--sun);color:#1a0c00;border-color:var(--sun);padding:16px 24px;font-size:18px}
button.primary:hover{background:#ffa04a;border-color:#ffa04a}
button.chip{padding:8px 12px;font-size:14px}
button.chip[aria-pressed="true"]{background:var(--foam);color:var(--ink);border-color:var(--foam)}
:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.keys{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:2px 0 0;font:400 13.5px/1.3 var(--body);color:var(--mute);align-items:center}
.keys dt{display:flex;gap:4px;flex-wrap:wrap;margin:0}
.keys dd{margin:0}
kbd{font:600 11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:2px 6px;color:var(--foam);background:rgba(230,244,245,.06)}
#results{justify-content:flex-end;align-items:center;background:linear-gradient(270deg,rgba(7,26,36,.88),rgba(7,26,36,.0) 70%)}
#results .card{max-width:400px;width:100%;background:rgba(7,26,36,.82);border:1px solid var(--line);border-radius:12px;padding:22px}
ol#resList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
ol#resList li{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:8px 10px;border-radius:6px;font:600 17px/1 var(--disp);letter-spacing:.05em;text-transform:uppercase}
ol#resList li .t{font:500 14px var(--mono);color:var(--mute);letter-spacing:0}
ol#resList li.me{background:rgba(255,138,31,.16);color:var(--sun)}
ol#resList li .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:-1px}
#touch{position:absolute;inset:0;pointer-events:none}
#touch[hidden]{display:none}
#touch button{pointer-events:auto;background:rgba(7,26,36,.55);backdrop-filter:blur(4px);border-color:rgba(230,244,245,.28);min-width:64px;min-height:64px;font-size:15px;padding:10px}
.tgrp{position:absolute;display:flex;gap:10px;top:46%}
.tgrp.left{left:14px}
.tgrp.right{right:14px;flex-direction:column;align-items:flex-end}
.tgrp.right .row{display:flex;gap:10px}
#touch .tools{position:absolute;right:14px;top:170px;display:flex;flex-direction:column;gap:6px}
#touch .tools button{min-width:0;min-height:0;padding:8px 10px;font-size:12px}
#rig{align-items:flex-start;justify-content:flex-end;background:linear-gradient(270deg,rgba(7,26,36,.92) 0%,rgba(7,26,36,.7) 55%,rgba(7,26,36,.05) 100%)}
#rig[hidden]{display:none}
#rig .card{max-width:380px;width:100%;background:rgba(7,26,36,.7);border:1px solid var(--line);border-radius:12px;padding:20px;gap:14px}
.rigRow{display:flex;flex-direction:column;gap:6px}
.rigLab{display:flex;justify-content:space-between;align-items:baseline;font:600 13px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.rigLab b{color:var(--foam);font:700 15px var(--disp);letter-spacing:.03em}
.rigTag{font:600 11px var(--mono);padding:2px 7px;border-radius:9px;letter-spacing:.04em}
.rigTag.ok{background:rgba(155,225,93,.22);color:var(--lime)}
.rigTag.warn{background:rgba(255,176,32,.2);color:#ffb020}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:rgba(230,244,245,.16)}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:rgba(230,244,245,.16)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-7px;border-radius:50%;background:var(--foam);border:3px solid var(--sun);cursor:pointer}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--foam);border:3px solid var(--sun);cursor:pointer}
.tieRow{display:flex;gap:8px}
.tie{flex:1;padding:10px 4px;font-size:12px;letter-spacing:.04em}
.tie[aria-pressed="true"]{background:var(--lime);color:#0a2410;border-color:var(--lime)}
.rigMeta{font:500 13px/1.4 var(--body);color:var(--mute);margin:0}
.rigMeta b{color:var(--foam);font-weight:600}
@media (max-width:640px){.keys{display:none}}
@media (prefers-reduced-motion:reduce){button{transition:none}}