:root{--surface:12 12 14;--surface-container:22 22 26;--surface-container-high:32 32 38;--on-surface:232 232 236;--on-surface-variant:156 156 168;--outline:64 64 74;--outline-variant:44 44 52;--primary:130 180 255;--on-primary:8 20 40;--error:255 120 120;--success:120 220 160;--mono:"IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Code", monospace;--sans:"Inter", system-ui, -apple-system, sans-serif}@media (prefers-color-scheme:light){:root{--surface:250 250 252;--surface-container:240 240 244;--surface-container-high:230 230 236;--on-surface:24 24 28;--on-surface-variant:90 90 102;--outline:180 180 190;--outline-variant:210 210 218;--primary:40 100 210;--on-primary:255 255 255;--error:200 40 40;--success:30 150 90}}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:var(--sans);background:rgb(var(--surface));color:rgb(var(--on-surface));-webkit-font-smoothing:antialiased;line-height:1.5;overflow:hidden}#app{flex-direction:column;gap:.6rem;max-width:1680px;height:100%;margin:0 auto;padding:clamp(.55rem,1.3vw,.95rem);display:flex;overflow:hidden}.topbar{border-bottom:1px solid rgb(var(--outline-variant));flex:none;grid-template-columns:1fr auto 1fr;align-items:center;gap:.75rem;padding-bottom:.55rem;display:grid}.brand-mark{color:rgb(var(--on-surface-variant));justify-self:start;align-items:center;gap:.45rem;display:inline-flex}.brand-mark .material-symbols-outlined{color:rgb(var(--primary));font-size:18px}.brand-mark .mark-text{font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;font-weight:600}.topbar-actions{justify-self:end;align-items:center;gap:.6rem;display:flex}.status-pill{border:1px solid rgb(var(--outline-variant));background:rgb(var(--surface-container));font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;color:rgb(var(--on-surface-variant));white-space:nowrap;align-items:center;gap:.4rem;padding:.3rem .6rem;font-size:.66rem;display:inline-flex}.status-dot{background:rgb(var(--on-surface-variant));border-radius:999px;width:8px;height:8px;transition:background .2s,box-shadow .2s}#app.live .status-dot{background:rgb(var(--success));box-shadow:0 0 0 3px rgba(var(--success), .18)}#app.connecting .status-dot{background:#e0a83a}.connect-btn{padding:.5rem 1.15rem;font-size:.85rem;font-weight:600}#app.live .connect-btn{color:rgb(var(--on-surface));border-color:rgb(var(--outline));background:0 0}.view-toggle{border:1px solid rgb(var(--outline-variant));justify-self:center;display:inline-flex}.view-toggle button{font-family:var(--sans);background:rgb(var(--surface-container));color:rgb(var(--on-surface-variant));border:none;padding:.38rem 1.2rem;font-size:.78rem;font-weight:600}.view-toggle button.active{background:rgb(var(--primary));color:rgb(var(--on-primary))}.workspace{flex:auto;grid-template-columns:minmax(0,1fr) minmax(288px,340px);gap:.6rem;min-height:0;display:grid;overflow:hidden}.stage{grid-template-rows:auto minmax(0,1fr) auto;gap:.5rem;min-width:0;min-height:0;display:grid}.display-tabs{border:1px solid rgb(var(--outline-variant));width:max-content;display:inline-flex}.display-tabs button{border:none;border-right:1px solid rgb(var(--outline-variant));font-family:var(--mono);letter-spacing:.03em;background:rgb(var(--surface-container));color:rgb(var(--on-surface-variant));padding:.32rem .95rem;font-size:.72rem}.display-tabs button:last-child{border-right:none}.display-tabs button.active{background:rgb(var(--surface-container-high));color:rgb(var(--primary))}.display-area{border:1px solid rgb(var(--outline-variant));background:rgb(var(--surface));min-height:0;position:relative;overflow:hidden}.disp{opacity:0;pointer-events:none;transition:opacity .16s;position:absolute;inset:0}.disp.active{opacity:1;pointer-events:auto;z-index:1}.disp-panorama .gpu-displays,.disp-panorama .demo-wrap{position:absolute;inset:0}.gpu-displays{display:flex}.display-stack{background:rgb(var(--outline-variant));flex-direction:column;flex:1;gap:1px;display:flex}.canvas-wrap{background:rgb(var(--surface));position:relative;overflow:hidden}.canvas-wrap canvas{width:100%;height:100%;display:block}.canvas-wrap.spectrum{flex:0 0 36%}.canvas-wrap.waterfall{flex:auto}.disp-constellation,.disp-scope{display:flex}.disp-constellation .canvas-wrap,.disp-scope .canvas-wrap{flex:1}.demo-canvas,.scope-canvas{width:100%;height:100%;display:block}.canvas-label{font-family:var(--mono);color:rgb(var(--on-surface-variant));pointer-events:none;text-transform:uppercase;letter-spacing:.08em;z-index:2;font-size:.66rem;position:absolute;top:6px;left:8px}.disp-hint{text-align:center;font-family:var(--mono);color:rgb(var(--on-surface-variant));justify-content:center;align-items:center;padding:1rem;font-size:.78rem;display:none;position:absolute;inset:0}#app.offline .disp-constellation .disp-hint{display:flex}.demo-wrap.hidden,.gpu-displays.hidden,.rail-view.hidden,.canvas-wrap.hidden{display:none}.transport{border:1px solid rgb(var(--outline-variant));background:rgb(var(--surface-container));flex-wrap:wrap;align-items:center;gap:.5rem 1.1rem;padding:.5rem .85rem;display:flex}.transport-bands{gap:2px;display:inline-flex}.transport-bands button{font-family:var(--mono);padding:.4rem .9rem;font-size:.8rem;font-weight:600}.transport-bands button.active{background:rgb(var(--primary));color:rgb(var(--on-primary));border-color:rgb(var(--primary))}.tuner{flex:auto;justify-content:center;align-items:center;gap:.4rem;display:flex}.tuner-freq{text-align:center;min-width:8ch;padding:0 .4rem}.radio-freq{font-family:var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums;cursor:ns-resize;-webkit-user-select:none;user-select:none;outline:none;font-size:clamp(1.7rem,4vw,2.6rem);font-weight:600;line-height:1}.radio-freq:focus-visible{color:rgb(var(--primary))}.radio-freq .radio-unit{color:rgb(var(--on-surface-variant));margin-left:.35rem;font-size:.36em}.radio-band{font-family:var(--mono);letter-spacing:.1em;color:rgb(var(--on-surface-variant));text-transform:uppercase;margin-top:.25rem;font-size:.66rem;display:block}.radio-btn{justify-content:center;align-items:center;min-width:2.8rem;padding:.6rem .7rem;display:flex}.radio-btn .material-symbols-outlined{font-size:20px}.transport-readout{flex:auto;justify-content:flex-end;align-items:center;gap:.85rem;display:flex}.meter-wrap{align-items:center;gap:.45rem;min-width:170px;display:flex}.meter-cap{font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;color:rgb(var(--on-surface-variant));font-size:.6rem}.meter{background:rgb(var(--surface));border:1px solid rgb(var(--outline-variant));flex:1;height:8px;overflow:hidden}.meter-fill{background:rgb(var(--success));width:0%;height:100%;transition:width .2s}.signal-db{font-family:var(--mono);color:rgb(var(--on-surface-variant));text-align:right;font-variant-numeric:tabular-nums;min-width:6ch;font-size:.7rem}.transport-rds{min-width:0;max-width:24ch}.radio-name{font-family:var(--mono);letter-spacing:.04em;white-space:nowrap;text-overflow:ellipsis;font-size:.95rem;font-weight:600;overflow:hidden}.radio-text{font-family:var(--mono);color:rgb(var(--on-surface-variant));white-space:nowrap;text-overflow:ellipsis;font-size:.68rem;overflow:hidden}.rail{scrollbar-width:thin;flex-direction:column;gap:.55rem;min-height:0;padding-right:2px;display:flex;overflow:hidden auto}.rail-view{flex-direction:column;gap:.55rem;display:flex}.panel{background:rgb(var(--surface-container));border:1px solid rgb(var(--outline-variant));flex-direction:column;gap:.55rem;padding:.75rem .85rem .85rem;display:flex}.panel h2{text-transform:uppercase;letter-spacing:.12em;color:rgb(var(--on-surface-variant));border-bottom:1px solid rgb(var(--outline-variant) / .55);padding-bottom:.4rem;font-size:.66rem;font-weight:600}.control-row{justify-content:space-between;align-items:center;gap:.5rem;font-size:.82rem;display:flex}.control-row label{color:rgb(var(--on-surface-variant))}button{font-family:var(--sans);border:1px solid rgb(var(--outline));background:rgb(var(--surface-container-high));color:rgb(var(--on-surface));cursor:pointer;padding:.45rem .85rem;font-size:.82rem;transition:background .12s,color .12s}button:hover:not(:disabled){background:rgb(var(--outline-variant))}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:rgb(var(--primary));color:rgb(var(--on-primary));border-color:rgb(var(--primary));font-weight:600}.mode-group{grid-template-columns:repeat(3,1fr);gap:3px;display:grid}.mode-group button{padding:.45rem .2rem}.mode-group button.active{background:rgb(var(--primary));color:rgb(var(--on-primary));border-color:rgb(var(--primary))}input[type=range]{width:100%;accent-color:rgb(var(--primary))}input[type=text],input[type=number],select{font-family:var(--mono);background:rgb(var(--surface));color:rgb(var(--on-surface));border:1px solid rgb(var(--outline));width:100%;padding:.45rem .55rem;font-size:.82rem}.badge{font-family:var(--mono);border:1px solid rgb(var(--outline));text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;padding:.15rem .5rem;font-size:.66rem;display:inline-block}.badge.on{color:rgb(var(--success));border-color:rgb(var(--success))}.badge.off{color:rgb(var(--on-surface-variant))}.preset-grid{grid-template-columns:repeat(3,1fr);gap:2px;display:grid}.preset-slot{flex-direction:column;align-items:flex-start;gap:.1rem;min-height:2.8rem;padding:.45rem .55rem;display:flex}.preset-slot.empty{color:rgb(var(--on-surface-variant));opacity:.6}.preset-num{font-family:var(--mono);color:rgb(var(--on-surface-variant));font-size:.62rem}.preset-freq{font-family:var(--mono);font-size:.92rem;font-weight:600}.preset-empty{font-size:.72rem}.hint{color:rgb(var(--on-surface-variant));font-size:.68rem}.panel-header{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.panel-header h2{border:none;margin:0;padding:0}.panel-header button{align-items:center;gap:.35rem;padding:.35rem .7rem;font-size:.72rem;display:inline-flex;position:relative;overflow:hidden}.panel-header button .material-symbols-outlined{font-size:15px}.panel-header button.scanning{border-color:rgb(var(--primary))}.panel-header button.scanning:after{content:"";height:2px;width:var(--scan-progress,0%);background:rgb(var(--primary));transition:width .2s linear;position:absolute;bottom:0;left:0}.scan-panel{min-height:0}.station-list{flex-direction:column;gap:2px;display:flex}.station-row{font-family:var(--mono);justify-content:space-between;align-items:center;padding:.42rem .65rem;display:flex}.station-freq{font-variant-numeric:tabular-nums;font-size:.92rem;font-weight:600}.station-strength{color:rgb(var(--success));letter-spacing:.15em}.rds-panel{font-family:var(--mono)}.rds-name{letter-spacing:.05em;min-height:1.3em;font-size:1.05rem;font-weight:600}.rds-text{color:rgb(var(--on-surface-variant));word-break:break-word;min-height:1.2em;font-size:.8rem}.stat-grid{font-family:var(--mono);grid-template-columns:auto 1fr;gap:.35rem 1rem;font-size:.78rem;line-height:1.4;display:grid}.stat-grid .key{color:rgb(var(--on-surface-variant))}.stat-grid .value{text-align:right;font-variant-numeric:tabular-nums}.notice{border:1px solid rgb(var(--outline));background:rgb(var(--surface-container));flex:none;padding:.7rem .9rem;font-size:.85rem}.notice.error{border-color:rgb(var(--error));color:rgb(var(--error))}.notice pre{font-family:var(--mono);white-space:pre-wrap;color:rgb(var(--on-surface-variant));margin-top:.5rem;font-size:.78rem}.app-footer{border-top:1px solid rgb(var(--outline-variant));flex:none;padding-top:.45rem}.diagnostics{font-family:var(--mono);color:rgb(var(--on-surface-variant));flex-wrap:wrap;gap:.25rem .9rem;font-size:.68rem;display:flex}.material-symbols-outlined{vertical-align:-.15em;justify-content:center;align-items:center;font-size:20px;line-height:1;display:inline-flex}.material-symbols-outlined svg{width:1em;height:1em;display:block}@media (max-width:860px){body{overflow:auto}#app{height:auto;min-height:100%;overflow:visible}.workspace{grid-template-columns:1fr;overflow:visible}.rail{overflow:visible}.display-area{min-height:340px}.topbar{grid-template-columns:auto 1fr;row-gap:.5rem}.view-toggle{grid-column:1/-1;justify-self:stretch}.view-toggle button{flex:1}}