:root{--bg:#080C12;--panel:#121A24;--text:#E6EDF3;--muted:#A7B4C2;--cyan:#47F3FF;--magenta:#FF4FD8;--amber:#FFC857;--danger:#FF667A;font-family:system-ui,sans-serif;color:var(--text);background:var(--bg);color-scheme:dark}*{box-sizing:border-box}body{margin:0;padding:24px 12px;background:radial-gradient(ellipse at top,#1b2735,transparent 65%),var(--bg)}button,input,textarea{font:inherit}button{min-height:48px;min-width:48px;border:1px solid #5b6878;border-radius:3px;background:linear-gradient(#283443,#1a232e);color:var(--text);font-weight:700;cursor:pointer;padding:10px}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--magenta);outline-offset:3px}input,textarea{background:#080e16;color:var(--text);border:1px solid #697b8e;border-radius:2px;padding:10px;min-width:0}input{min-height:48px}textarea{width:100%;min-height:80px;resize:vertical}label{display:block;font-size:14px;color:var(--muted);margin-bottom:6px}[hidden]{display:none!important}.terminal{max-width:460px;margin:auto;padding:22px;border:2px solid #4b5561;border-radius:16px;background:linear-gradient(130deg,#293340,#141c27 30%,#1d2630);box-shadow:inset 0 0 0 4px #111820,0 22px 60px #0009;position:relative}.terminal:before,.terminal:after{content:"+";font-family:monospace;position:absolute;color:#7b8692;top:4px;font-size:14px}.terminal:before{left:9px}.terminal:after{right:9px}header{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:18px}small,footer,.display-top,.sound>label,.tuning label{font-family:ui-monospace,monospace;font-size:11px;letter-spacing:.08em;color:var(--muted)}h1{font:800 27px ui-monospace,monospace;letter-spacing:.03em;margin:6px 0}h1 span{display:block;font-size:12px;letter-spacing:.2em;color:var(--muted);margin-top:3px}#power{font-size:12px;border-top:3px solid var(--magenta)}#power span{display:block;font-size:24px}#power[aria-pressed=true]{color:var(--cyan)}.mock{padding:8px;border:1px solid var(--amber);color:var(--amber);font-size:12px;margin-bottom:12px}.login-row{display:flex;gap:8px}.login-row input{flex:1 1 0;width:0}.login-row button{flex:0 0 auto;font-size:13px;white-space:nowrap}#login-error{font-size:14px;color:var(--danger)}.display{background:repeating-linear-gradient(0deg,#47f3ff04 0px,#47f3ff04 1px,transparent 1px,transparent 4px),#050e16;border:2px solid #4c5967;border-radius:5px;box-shadow:inset 0 2px 14px #000;padding:16px}.display-top{display:flex;justify-content:space-between;gap:4px;font-size:10px}#led{color:var(--cyan);font-size:9px}.digits{display:flex;align-items:baseline;gap:8px;white-space:nowrap}.digits>span{font:700 clamp(37px,10vw,56px) ui-monospace,monospace;font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:var(--cyan);text-shadow:0 0 12px #47f3ff22}.digits small{color:var(--cyan)}#channel{font:600 14px ui-monospace,monospace;color:var(--text);margin-top:6px}.tuning{display:flex;gap:8px;align-items:flex-end;margin:16px 0}.tuning>button{font-size:28px;line-height:1;padding:0;display:grid;place-items:center;border-radius:50%;width:48px;height:48px;flex-shrink:0}.tuning form{flex:1;display:grid;grid-template-columns:1fr auto;gap:6px;min-width:0}.tuning label{grid-column:1/-1;text-align:center;margin:0}.tuning input{width:100%;font:16px ui-monospace,monospace}.tuning form button{font-size:11px;padding:6px}.status{border-left:3px solid var(--cyan);padding:10px;background:var(--panel);font:700 13px ui-monospace,monospace;min-height:38px}.countdown{font:12px ui-monospace,monospace;color:var(--amber);height:24px;text-align:right;padding-top:5px}.ptt{width:100%;min-height:145px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:2px solid #617182;border-bottom:8px solid #080d13;background:linear-gradient(140deg,#364251,#202936);box-shadow:inset 0 0 0 5px #141c24,0 4px 4px #0008}.ptt strong{font-size:22px;letter-spacing:.025em}.ptt span{font-size:10px;color:var(--amber)}.ptt:active:not(:disabled){border-bottom-width:4px;transform:translateY(3px)}#retry,#listen{width:100%;margin-top:8px;border-color:var(--amber)}.sound{display:grid;grid-template-columns:1fr;gap:4px;margin:20px 0 12px}.sound input[type=range]{width:100%;accent-color:var(--magenta);padding:0;min-height:36px}.mute{display:flex;align-items:center;gap:8px;color:var(--text)}.mute input{min-height:24px;width:20px;height:20px;accent-color:var(--magenta)}.message{padding:12px;border:1px solid #536170;background:var(--panel);margin-bottom:14px}.message p{font-size:15px;line-height:1.5;margin:8px 0 0;overflow-wrap:anywhere}footer{display:flex;justify-content:space-between;font-size:9px;padding-top:12px;border-top:1px solid #536170;gap:6px}[data-state=OFF] .digits>span{color:var(--muted);text-shadow:none}[data-state=OFF] #led{color:var(--muted)}[data-state=TRANSMITTING] .status,[data-state=PROCESSING] .status,[data-state=CONNECTING] .status{border-color:var(--amber);color:var(--amber)}[data-state=TRANSMITTING] #led{color:var(--amber)}[data-state=TRANSMITTING] .ptt{border-color:var(--amber)}[data-state=ERROR] .status{border-color:var(--danger);color:var(--danger)}[data-state=RECEIVING] .status{color:var(--cyan)}@media(max-width:350px){body{padding:8px}.terminal{padding:16px}h1{font-size:23px}.digits>span{font-size:40px}.display{padding:12px}.tuning{gap:5px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.ptt:active:not(:disabled){transform:none}}
