:root {
    color-scheme: dark;
    --night: oklch(0.105 0.025 228);
    --deep: oklch(0.135 0.033 213);
    --panel: oklch(0.17 0.035 202);
    --panel-soft: oklch(0.205 0.04 194);
    --screen: oklch(0.145 0.052 151);
    --mist: oklch(0.9 0.034 177);
    --muted: oklch(0.7 0.046 194);
    --line: oklch(0.49 0.078 185 / 0.38);
    --line-strong: oklch(0.7 0.13 174 / 0.76);
    --aqua: oklch(0.79 0.15 171);
    --amber: oklch(0.8 0.145 76);
    --violet: oklch(0.7 0.16 304);
    --coral: oklch(0.69 0.18 32);
    --good: oklch(0.8 0.17 142);

    --page: oklch(0.105 0.026 28);
    --page-glow: oklch(0.31 0.075 47 / 0.3);
    --case-top: oklch(0.235 0.055 32);
    --case-bottom: oklch(0.145 0.038 26);
    --case-rim: oklch(0.46 0.085 49);
    --case-shine: oklch(0.72 0.08 69 / 0.22);
    --case-shadow: oklch(0.035 0.018 20 / 0.82);
    --surface: oklch(0.17 0.035 30);
    --surface-raised: oklch(0.22 0.047 36);
    --surface-inset: oklch(0.105 0.025 215);
    --ink: oklch(0.89 0.04 82);
    --ink-muted: oklch(0.68 0.047 70);
    --accent: oklch(0.78 0.13 168);
    --measure: oklch(0.82 0.14 78);
    --hardware: oklch(0.58 0.055 82);
    --glass: oklch(0.16 0.04 191 / 0.86);
    --glass-edge: oklch(0.69 0.09 169 / 0.42);
    --font-body: "Aptos", "Trebuchet MS", system-ui, sans-serif;
    --font-display: Rockwell, "Roboto Slab", Georgia, serif;
    --font-mono: "Cascadia Mono", "Lucida Console", Consolas, monospace;
}

:root[data-theme="light"] {
    color-scheme: light;
    --page: oklch(0.83 0.035 155);
    --page-glow: oklch(0.91 0.075 94 / 0.62);
    --case-top: oklch(0.82 0.045 162);
    --case-bottom: oklch(0.69 0.05 171);
    --case-rim: oklch(0.48 0.06 177);
    --case-shine: oklch(0.98 0.035 96 / 0.72);
    --case-shadow: oklch(0.23 0.045 164 / 0.36);
    --surface: oklch(0.88 0.04 89);
    --surface-raised: oklch(0.94 0.035 88);
    --surface-inset: oklch(0.76 0.035 161);
    --ink: oklch(0.245 0.055 203);
    --ink-muted: oklch(0.43 0.045 184);
    --accent: oklch(0.49 0.115 173);
    --measure: oklch(0.55 0.145 65);
    --hardware: oklch(0.53 0.04 69);
    --glass: oklch(0.19 0.043 194 / 0.9);
    --glass-edge: oklch(0.43 0.09 173 / 0.55);
}

:root[data-theme="light"] select,
:root[data-theme="light"] input[type="file"] {
    color: var(--ink);
}

* { box-sizing: border-box; }

html {
    min-width: 320px;
    background: var(--page);
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    font-family: var(--font-body);
    background:
        radial-gradient(ellipse at 13% 7%, var(--page-glow), transparent 34rem),
        radial-gradient(ellipse at 87% 92%, oklch(0.39 0.09 302 / 0.2), transparent 42rem),
        radial-gradient(ellipse at 71% 18%, oklch(0.42 0.08 170 / 0.13), transparent 28rem),
        var(--page);
    background-attachment: fixed;
}

button,
select,
input { font: inherit; }

button,
select,
input[type="file"] { color: var(--ink); }

button:focus-visible,
select:focus-visible,
input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

h1,
h2,
p,
figure,
dl,
dd { margin: 0; }

.station-shell {
    position: relative;
    width: min(1600px, calc(100% - 20px));
    margin: 10px auto;
    padding: 13px;
    border: 1px solid var(--case-rim);
    border-radius: 35px 15px 44px 21px;
    background:
        radial-gradient(ellipse at 16% -10%, var(--case-shine), transparent 34%),
        radial-gradient(ellipse at 94% 112%, oklch(0.39 0.085 318 / 0.18), transparent 32%),
        linear-gradient(137deg, var(--case-top), var(--case-bottom) 72%);
    box-shadow:
        inset 0 1px 0 var(--case-shine),
        inset 0 -5px 12px oklch(0.04 0.02 24 / 0.35),
        0 24px 60px var(--case-shadow),
        0 3px 0 oklch(0.04 0.015 22 / 0.5);
}

.station-shell::before,
.station-shell::after {
    position: absolute;
    z-index: 2;
    width: 8px;
    height: 8px;
    border: 1px solid oklch(0.23 0.03 65);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, oklch(0.82 0.04 91), var(--hardware) 39%, oklch(0.25 0.025 52));
    box-shadow: 0 1px 2px oklch(0.04 0.01 30 / 0.8);
    content: "";
}

.station-shell::before { top: 20px; left: 21px; }
.station-shell::after { right: 26px; bottom: 20px; }

.station-header,
.station-footer {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--case-rim);
    color: var(--ink);
    background:
        linear-gradient(101deg, transparent 0 58%, var(--case-shine) 75%, transparent 92%),
        linear-gradient(178deg, var(--surface-raised), var(--surface));
    box-shadow:
        inset 0 1px 0 var(--case-shine),
        inset 0 -2px 5px oklch(0.05 0.018 30 / 0.3),
        0 4px 8px oklch(0.04 0.018 25 / 0.25);
}

.station-header {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 9px 13px 9px 18px;
    border-radius: 21px 7px 18px 10px;
}

.brand-lockup,
.receiver-state,
.scope-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.brand-lockup { gap: 13px; }

.brand {
    display: inline-block;
    padding: 7px 10px 6px 14px;
    border: 1px solid color-mix(in oklch, var(--hardware) 76%, var(--ink));
    border-radius: 10px 4px 11px 5px;
    color: var(--good);
    font-family: var(--font-display);
    font-size: 1.04rem;
    font-weight: 700;
    letter-spacing: 0.29em;
    line-height: 1;
    background: linear-gradient(155deg, var(--surface-inset), color-mix(in oklch, var(--surface-inset) 73%, var(--night)));
    box-shadow:
        inset 0 2px 6px oklch(0.03 0.018 210 / 0.7),
        0 1px 0 var(--case-shine);
    text-shadow: 0 0 13px color-mix(in oklch, var(--good) 60%, transparent);
    transform: rotate(-0.35deg);
}

.subtitle,
.receiver-state,
.helper,
.path-readout,
.scope-legend,
.station-footer {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.045em;
}

.subtitle,
.helper,
.station-footer { color: var(--ink-muted); }

.receiver-state {
    gap: 8px;
    color: var(--measure);
}

.lock-lamp {
    width: 9px;
    height: 9px;
    border: 1px solid color-mix(in oklch, var(--amber) 55%, var(--hardware));
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, oklch(0.96 0.08 84), var(--amber) 42%, oklch(0.39 0.1 66));
    box-shadow: 0 0 10px var(--amber), inset 0 1px 1px oklch(0.98 0.04 84 / 0.8);
}

.lock-lamp.locked {
    background: radial-gradient(circle at 35% 30%, oklch(0.96 0.08 142), var(--good) 42%, oklch(0.36 0.12 145));
    box-shadow: 0 0 11px var(--good);
}

.lock-lamp.lost {
    background: radial-gradient(circle at 35% 30%, oklch(0.92 0.08 34), var(--coral) 42%, oklch(0.35 0.12 28));
    box-shadow: 0 0 11px var(--coral);
}

.header-button,
.preset-grid button {
    position: relative;
    border: 1px solid color-mix(in oklch, var(--hardware) 72%, var(--case-rim));
    color: var(--ink);
    background:
        linear-gradient(150deg, var(--case-shine), transparent 40%),
        linear-gradient(180deg, var(--surface-raised), var(--surface));
    box-shadow:
        inset 0 1px 0 var(--case-shine),
        0 3px 0 color-mix(in oklch, var(--surface) 65%, oklch(0.05 0.02 30)),
        0 5px 8px oklch(0.04 0.015 25 / 0.28);
    cursor: pointer;
    transition: transform 160ms cubic-bezier(.2, .9, .35, 1.4), box-shadow 160ms ease, filter 160ms ease;
}

.header-button {
    min-height: 31px;
    padding: 4px 11px;
    border-radius: 10px 4px 11px 5px;
    font-family: var(--font-mono);
    font-size: 0.65rem;
}

.theme-toggle { color: var(--accent); }

.theme-toggle::before {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
    content: "";
}

.header-button:hover,
.preset-grid button:hover {
    filter: brightness(1.09) saturate(1.08);
    transform: translateY(-1px) rotate(-0.25deg);
}

.header-button:active,
.preset-grid button:active {
    box-shadow: inset 0 2px 4px oklch(0.04 0.02 25 / 0.48), 0 1px 0 color-mix(in oklch, var(--surface) 70%, black);
    transform: translateY(2px) scale(0.985);
}

.station-grid {
    display: grid;
    grid-template-columns: 282px minmax(0, 1fr);
    gap: 11px;
    margin-top: 11px;
}

.control-bank,
.environment-panel,
.scope-panel,
.picture-well {
    position: relative;
    min-width: 0;
    border: 1px solid var(--case-rim);
    box-shadow: inset 0 1px 0 var(--case-shine), 0 7px 13px oklch(0.04 0.02 24 / 0.3);
}

.control-bank {
    overflow: hidden;
    border-radius: 28px 7px 37px 12px;
    background:
        radial-gradient(ellipse at 8% 5%, var(--case-shine), transparent 25%),
        linear-gradient(166deg, var(--surface-raised), var(--surface) 72%);
}

.control-bank::after {
    position: absolute;
    right: -34px;
    bottom: 9%;
    width: 88px;
    height: 175px;
    border-radius: 50%;
    background: radial-gradient(ellipse, oklch(0.48 0.11 310 / 0.14), transparent 68%);
    pointer-events: none;
    content: "";
}

.control-section {
    position: relative;
    padding: 15px 16px 17px;
}

.control-section + .control-section::before {
    position: absolute;
    top: 0;
    left: 11%;
    width: 76%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--case-rim) 18% 72%, transparent);
    content: "";
}

.control-section:nth-child(2)::before { left: 4%; width: 84%; }
.control-section:nth-child(4)::before { left: 18%; width: 72%; }
.control-section:last-child { padding-bottom: 23px; }

.section-heading,
.panel-heading,
.scope-header,
.picture-well figcaption,
.range-row,
.station-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.section-heading {
    justify-content: flex-start;
    margin-bottom: 12px;
}

.section-heading span,
.eyebrow {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.13em;
}

.section-heading span {
    min-width: 25px;
    padding: 3px 4px;
    border: 1px solid color-mix(in oklch, var(--accent) 43%, transparent);
    border-radius: 8px 3px 7px 4px;
    text-align: center;
    background: color-mix(in oklch, var(--surface-inset) 75%, transparent);
}

.section-heading h2,
.scope-header h2 {
    font-family: var(--font-display);
    font-size: 0.79rem;
    font-weight: 700;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.control-label,
.file-label,
.range-row { font-size: 0.76rem; }

.control-label,
.file-label {
    display: block;
    margin: 9px 0 5px;
}

select,
input[type="file"] {
    width: 100%;
    min-height: 35px;
    border: 1px solid color-mix(in oklch, var(--case-rim) 75%, var(--surface-inset));
    border-radius: 5px 14px 6px 10px;
    background: linear-gradient(180deg, var(--surface-inset), color-mix(in oklch, var(--surface-inset) 82%, var(--night)));
    box-shadow: inset 0 2px 5px oklch(0.04 0.02 210 / 0.48), 0 1px 0 var(--case-shine);
    padding: 6px 9px;
    color: var(--mist);
    font-size: 0.74rem;
}

input[type="file"]::file-selector-button {
    border: 1px solid color-mix(in oklch, var(--accent) 70%, var(--hardware));
    margin-right: 8px;
    padding: 5px 8px;
    border-radius: 8px 3px 8px 4px;
    color: var(--night);
    background: linear-gradient(155deg, color-mix(in oklch, var(--accent) 64%, var(--mist)), var(--accent));
    box-shadow: inset 0 1px 0 oklch(0.95 0.03 170 / 0.7);
    font-family: var(--font-mono);
    cursor: pointer;
}

.helper { margin-top: 7px; }

.section-note {
    margin: 2px 0 5px;
    padding: 8px 9px 8px 11px;
    border-left: 3px solid var(--good);
    border-radius: 3px 12px 12px 4px;
    color: var(--ink-muted);
    line-height: 1.48;
    background: linear-gradient(90deg, color-mix(in oklch, var(--good) 8%, transparent), transparent);
}

.range-row { margin-top: 12px; }

.range-row output {
    color: var(--measure);
    font-family: var(--font-mono);
    font-size: 0.68rem;
}

input[type="range"] {
    width: 100%;
    height: 17px;
    margin: 1px 0 0;
    appearance: none;
    background: transparent;
}

input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border: 1px solid color-mix(in oklch, var(--hardware) 65%, var(--surface-inset));
    border-radius: 6px 2px 7px 3px;
    background: linear-gradient(180deg, color-mix(in oklch, var(--surface-inset) 80%, var(--night)), var(--surface-inset));
    box-shadow: inset 0 1px 3px oklch(0.04 0.02 210 / 0.75), 0 1px 0 var(--case-shine);
}

input[type="range"]::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    margin-top: -6px;
    appearance: none;
    border: 1px solid color-mix(in oklch, var(--accent) 68%, var(--hardware));
    border-radius: 48% 54% 50% 46%;
    background: radial-gradient(circle at 34% 26%, oklch(0.94 0.07 164), var(--accent) 43%, oklch(0.38 0.1 174));
    box-shadow: 0 0 8px color-mix(in oklch, var(--accent) 48%, transparent), 0 2px 3px oklch(0.04 0.02 24 / 0.5);
    cursor: grab;
}

input[type="range"]::-moz-range-track {
    height: 6px;
    border: 1px solid var(--hardware);
    border-radius: 6px 2px 7px 3px;
    background: var(--surface-inset);
}

input[type="range"]::-moz-range-progress {
    height: 6px;
    border-radius: 6px 2px 7px 3px;
    background: var(--accent);
}

input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 1px solid var(--hardware);
    border-radius: 48% 54% 50% 46%;
    background: var(--accent);
    box-shadow: 0 0 8px color-mix(in oklch, var(--accent) 48%, transparent);
    cursor: grab;
}

.preset-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 7px;
}

.preset-grid button {
    min-height: 38px;
    padding: 5px;
    border-radius: 11px 4px 12px 5px;
    font-family: var(--font-mono);
    font-size: 0.65rem;
}

.preset-grid button:nth-child(2) { border-radius: 5px 13px 4px 10px; }
.preset-grid button:nth-child(3) { border-radius: 14px 4px 9px 5px; }
.preset-grid button:nth-child(4) { border-radius: 4px 10px 5px 14px; }

.instrument-bank {
    min-width: 0;
    display: grid;
    gap: 11px;
}

.environment-panel,
.scope-panel {
    padding: 15px;
}

.environment-panel {
    border-radius: 9px 34px 12px 19px;
    background:
        linear-gradient(136deg, var(--case-shine), transparent 25%),
        linear-gradient(160deg, var(--surface-raised), var(--surface));
}

.panel-heading,
.scope-header { margin-bottom: 11px; }

.panel-heading h1 {
    margin-top: 3px;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 2.1vw, 1.72rem);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.path-readout {
    padding: 5px 7px;
    border: 1px solid color-mix(in oklch, var(--measure) 35%, transparent);
    border-radius: 3px 10px 4px 8px;
    color: var(--measure);
    text-align: right;
    background: color-mix(in oklch, var(--surface-inset) 58%, transparent);
}

#environment-canvas,
#waveform-canvas {
    display: block;
    width: 100%;
    border: 1px solid var(--glass-edge);
    background: var(--deep);
    box-shadow:
        inset 0 0 28px oklch(0.03 0.025 194 / 0.82),
        0 1px 0 var(--case-shine),
        0 0 0 5px color-mix(in oklch, var(--surface) 80%, transparent);
}

#environment-canvas {
    height: 250px;
    border-radius: 8px 24px 7px 15px;
}

.picture-deck {
    display: grid;
    grid-template-columns: minmax(0, 0.93fr) 60px minmax(0, 1.07fr);
    gap: 9px;
    align-items: stretch;
}

.picture-well {
    padding: 11px;
    background:
        radial-gradient(ellipse at 12% 0%, var(--case-shine), transparent 30%),
        linear-gradient(158deg, var(--surface-raised), var(--surface));
}

.source-well { border-radius: 22px 5px 28px 8px; }

.received-well {
    border-color: color-mix(in oklch, var(--good) 37%, var(--case-rim));
    border-radius: 5px 29px 8px 35px;
    background:
        radial-gradient(ellipse at 82% 4%, color-mix(in oklch, var(--good) 13%, transparent), transparent 35%),
        linear-gradient(148deg, var(--surface-raised), var(--surface));
}

.picture-well figcaption {
    margin-bottom: 9px;
    color: var(--ink-muted);
    font-family: var(--font-mono);
    font-size: 0.65rem;
}

.picture-well figcaption span:first-child { color: var(--ink); }

.picture-well canvas {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--glass-edge);
    background: oklch(0.055 0.015 224);
    box-shadow: inset 0 0 20px oklch(0.02 0.02 210 / 0.75), 0 0 0 4px color-mix(in oklch, var(--surface) 82%, transparent);
}

.source-well canvas {
    border-radius: 4px 14px 5px 10px;
    image-rendering: pixelated;
}

.received-well canvas {
    border-radius: 15px 5px 19px 6px;
    background: var(--screen);
    box-shadow: inset 0 0 38px oklch(0.02 0.02 155 / 0.9), 0 0 0 4px color-mix(in oklch, var(--surface) 82%, transparent), 0 0 17px color-mix(in oklch, var(--good) 12%, transparent);
}

.channel-mark {
    display: grid;
    place-content: center;
    gap: 5px;
    color: var(--ink-muted);
    font-family: var(--font-mono);
    font-size: 0.61rem;
    text-align: center;
}

.channel-mark b {
    color: var(--accent);
    font-size: 1.7rem;
    font-weight: 400;
    text-shadow: 0 0 9px color-mix(in oklch, var(--accent) 55%, transparent);
}

.scope-panel {
    border-radius: 27px 7px 22px 9px;
    background:
        linear-gradient(115deg, var(--case-shine), transparent 22%),
        linear-gradient(165deg, var(--surface-raised), var(--surface));
}

.scope-legend {
    justify-content: flex-end;
    gap: 12px;
    color: var(--ink-muted);
}

.scope-legend span::before {
    display: inline-block;
    width: 17px;
    height: 2px;
    margin-right: 5px;
    vertical-align: middle;
    background: currentColor;
    box-shadow: 0 0 5px currentColor;
    content: "";
}

.legend-source { color: var(--aqua); }
.legend-received { color: var(--amber); }
.legend-threshold { color: var(--violet); }

#waveform-canvas {
    height: 142px;
    border-radius: 8px 18px 7px 15px;
}

.receiver-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    margin-top: 11px;
    padding: 4px;
    border: 1px solid color-mix(in oklch, var(--hardware) 42%, transparent);
    border-radius: 10px 4px 12px 5px;
    background: color-mix(in oklch, var(--surface-inset) 72%, transparent);
    box-shadow: inset 0 2px 5px oklch(0.03 0.02 210 / 0.42);
}

.receiver-metrics div {
    min-width: 0;
    padding: 7px 9px;
    border-radius: 5px 2px 7px 3px;
    background: color-mix(in oklch, var(--deep) 88%, var(--panel));
}

.receiver-metrics div:nth-child(2) { border-radius: 3px 7px 3px 6px; }
.receiver-metrics div:nth-child(4) { border-radius: 7px 3px 6px 2px; }

.receiver-metrics dt,
.receiver-metrics dd {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.receiver-metrics dt {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.62rem;
}

.receiver-metrics dd {
    margin-top: 3px;
    color: var(--amber);
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.station-footer {
    flex-wrap: wrap;
    margin-top: 11px;
    padding: 10px 16px;
    border-radius: 7px 18px 8px 14px;
}

.station-footer span:first-child { color: var(--accent); }

@media (max-width: 1050px) {
    .station-grid { grid-template-columns: 244px minmax(0, 1fr); }
    .picture-deck { grid-template-columns: 1fr; }
    .channel-mark { grid-template-columns: auto auto; min-height: 42px; }
    .channel-mark b { transform: rotate(90deg); }
}

@media (max-width: 760px) {
    .station-shell {
        width: min(100% - 8px, 1600px);
        margin: 4px auto;
        padding: 8px;
        border-radius: 24px 9px 30px 12px;
    }

    .station-header,
    .station-grid {
        display: grid;
        grid-template-columns: 1fr;
    }

    .receiver-state { justify-content: flex-start; }

    .control-bank {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .control-section + .control-section::before { display: none; }

    .control-section:nth-child(even) {
        border-left: 1px solid color-mix(in oklch, var(--case-rim) 48%, transparent);
    }

    .receiver-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
    .brand-lockup { align-items: flex-start; flex-direction: column; }
    .subtitle { line-height: 1.45; }
    .control-bank,
    .receiver-metrics { grid-template-columns: 1fr; }
    .control-section:nth-child(even) { border-left: 0; }
    .panel-heading,
    .scope-header { align-items: flex-start; flex-direction: column; }
    .scope-legend { justify-content: flex-start; }
    #environment-canvas { height: 210px; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}