:root {
    color-scheme: dark;
    --background: #101316;
    --surface: #181d22;
    --surface-2: #20262d;
    --surface-3: #252d35;
    --border: #303943;
    --text: #edf1f5;
    --muted: #aab4be;
    --blue: #72a7d8;
    --blue-dark: #183149;
    --amber: #e7bd62;
    --amber-dark: #423517;
    --red: #df7b7b;
    --red-dark: #452323;
    --green: #81c995;
    --green-dark: #183723;
    --max-width: 1120px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at top left, #17212a 0, transparent 28rem),
        var(--background);
    color: var(--text);
    font-family:
        Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
    line-height: 1.65;
}

button,
input,
select {
    font: inherit;
}

button,
audio,
input[type="range"] {
    accent-color: var(--blue);
}

button:disabled,
input:disabled,
select:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

audio {
    width: 100%;
}

a {
    color: #9bc5eb;
}

.container {
    width: min(calc(100% - 2rem), var(--max-width));
    margin-inline: auto;
}

.hero {
    padding: 6rem 0 4rem;
    border-bottom: 1px solid var(--border);
}

.hero h1 {
    max-width: 900px;
    margin: 0;
    font-size: clamp(2.5rem, 7vw, 5.5rem);
    line-height: 1;
    letter-spacing: -0.055em;
}

.lead {
    max-width: 820px;
    margin: 2rem 0;
    color: #d7dfe6;
    font-size: clamp(1.1rem, 2.4vw, 1.45rem);
}

.eyebrow {
    margin: 0 0 0.8rem;
    color: var(--blue);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.section {
    padding: 4.5rem 0;
    border-bottom: 1px solid var(--border);
}

.section h2 {
    margin-top: 0;
    font-size: clamp(1.8rem, 4vw, 3rem);
    letter-spacing: -0.035em;
}

.section-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1.5rem;
}

.cards,
.audio-grid,
.two-column {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.two-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card,
.audio-card,
.finding-block,
.selection-panel,
.zoom-panel,
.fallback-player {
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    background: var(--surface);
}

.card h3,
.audio-card h3 {
    margin: 1rem 0 0.5rem;
}

.audio-card p {
    color: var(--muted);
    font-size: 0.9rem;
}

.diagnostic {
    border-color: #6f5c30;
}

.status {
    display: inline-block;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    white-space: nowrap;
}

.status.high {
    color: var(--green);
    background: var(--green-dark);
}

.status.moderate {
    color: var(--amber);
    background: var(--amber-dark);
}

.status.uncertain {
    color: #f1d7a2;
    background: #3a311f;
}

.status.unsupported {
    color: var(--red);
    background: var(--red-dark);
}

.notice {
    max-width: 880px;
    padding: 1rem 1.2rem;
    border-left: 4px solid var(--amber);
    background: var(--amber-dark);
}

.lab-intro {
    max-width: 900px;
}

.channel-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin: 1.5rem 0 0.8rem;
    color: var(--muted);
    font-size: 0.92rem;
}

.channel-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.channel-legend i {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 0.2rem;
}

.channel-one {
    background: #78a9d1;
}

.channel-two {
    background: #d8aa5d;
}

.wave-shell {
    position: relative;
    min-height: 285px;
    padding: 1rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    background: #0c0f12;
}

.wave-status {
    position: absolute;
    z-index: 5;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(12, 15, 18, 0.86);
    color: var(--muted);
    text-align: center;
}

.wave-status.ready {
    display: none;
}

#waveform {
    min-height: 230px;
}

#waveform ::part(region) {
    border-left: 1px solid rgba(255, 219, 133, 0.9);
    border-right: 1px solid rgba(255, 219, 133, 0.9);
}

#waveform ::part(region-handle) {
    width: 5px !important;
    background: rgba(255, 219, 133, 0.95);
}

#timeline {
    min-height: 28px;
}

.transport,
.selection-controls,
.zoom-panel,
.bookmarks {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.75rem;
}

.transport {
    margin: 1rem 0;
}

.transport button,
.selection-controls button,
.zoom-panel button,
.bookmark,
.open-full-selection {
    min-height: 2.65rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
}

.transport button:hover:not(:disabled),
.selection-controls button:hover:not(:disabled),
.zoom-panel button:hover:not(:disabled),
.bookmark:hover:not(:disabled),
.open-full-selection:hover {
    border-color: var(--blue);
    background: var(--blue-dark);
}

.transport output {
    margin-left: auto;
    padding: 0.55rem 0;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.compact-field,
.selection-controls label {
    display: grid;
    gap: 0.3rem;
    color: var(--muted);
    font-size: 0.84rem;
}

.compact-field select,
.selection-controls input {
    min-height: 2.65rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    background: #10151a;
    color: var(--text);
}

.selection-panel {
    margin-top: 1rem;
}

.selection-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.selection-heading h3,
.selection-heading p {
    margin-top: 0;
}

.selection-heading p {
    margin-bottom: 0;
    color: var(--muted);
}

.selection-heading output {
    color: var(--amber);
    font-variant-numeric: tabular-nums;
}

.loop-control {
    display: flex !important;
    grid-template-columns: auto 1fr;
    align-items: center;
    align-self: center;
    gap: 0.5rem !important;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: #10151a;
}

.zoom-panel {
    margin-top: 1rem;
}

.zoom-panel > label {
    display: grid;
    flex: 1 1 340px;
    gap: 0.35rem;
    color: var(--muted);
    font-size: 0.84rem;
}

.zoom-panel output {
    min-width: 90px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.bookmarks {
    margin-top: 1rem;
}

.bookmarks > span {
    color: var(--muted);
    font-size: 0.9rem;
}

.fallback-player {
    margin-top: 1rem;
}

.fallback-player summary {
    cursor: pointer;
    font-weight: 700;
}

.fallback-player audio {
    margin-top: 1rem;
}

.technical-note {
    font-size: 0.86rem;
}

.source-chain {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
}

.source-chain div {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--surface);
}

.source-chain span {
    color: var(--blue);
    font-size: 1.4rem;
}

.muted {
    color: var(--muted);
}

.reveal-button,
.primary-link {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 0.8rem 1.1rem;
    border: 1px solid var(--blue);
    border-radius: 0.5rem;
    background: var(--blue-dark);
    color: #dcecff;
    font: inherit;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
}

.open-full-selection {
    margin: 0 0 1rem;
}

.reveal-button:hover,
.primary-link:hover {
    background: #214361;
}

.transcript {
    max-width: 760px;
    margin-top: 1rem;
    padding: 1.2rem;
    border: 1px solid var(--amber);
    border-radius: 0.6rem;
    background: var(--amber-dark);
    font-size: 1.1rem;
}

.large-finding {
    margin-top: 0;
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 750;
}

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
}

th,
td {
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
}

th {
    color: var(--muted);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.method-list,
.limitations {
    max-width: 800px;
}

footer {
    padding: 2.5rem 0;
    color: var(--muted);
}

@media (max-width: 800px) {
    .cards,
    .audio-grid,
    .two-column {
        grid-template-columns: 1fr;
    }

    .section-heading,
    .selection-heading {
        display: block;
    }

    .section-heading .status,
    .selection-heading output {
        margin-bottom: 1rem;
    }

    .transport output {
        width: 100%;
        margin-left: 0;
    }

    .hero {
        padding-top: 4rem;
    }

    .wave-shell {
        padding-inline: 0.5rem;
    }
}

/* Forensic listening laboratory */

.forensic-panel {
    margin: 1rem 0;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    background: linear-gradient(180deg, var(--surface), #14191e);
}

.forensic-panel h3 {
    margin: 0;
    font-size: 1.25rem;
}

.forensic-panel-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.forensic-panel-heading .eyebrow {
    margin-bottom: 0.25rem;
}

.panel-description,
.compact-note {
    margin-top: 0;
}

.processing-state {
    display: inline-block;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #10151a;
    color: var(--muted);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.processing-state.active {
    border-color: var(--amber);
    color: var(--amber);
    background: var(--amber-dark);
}

.control-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

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

.control-grid > label,
.filter-grid label,
.export-grid label,
.inline-control {
    display: grid;
    gap: 0.35rem;
    color: var(--muted);
    font-size: 0.84rem;
}

.control-grid select,
.export-grid select,
.inline-control select {
    min-height: 2.65rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 0.45rem;
    background: #10151a;
    color: var(--text);
}

.range-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 84px;
    align-items: center;
    gap: 0.7rem;
}

.range-row output {
    color: var(--text);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.button-row,
.export-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.75rem;
    margin-top: 1rem;
}

.button-row button,
.export-grid button {
    min-height: 2.65rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
}

.button-row button:hover:not(:disabled),
.export-grid button:hover:not(:disabled) {
    border-color: var(--blue);
    background: var(--blue-dark);
}

.warning-strip {
    margin-top: 1rem;
    padding: 0.8rem 1rem;
    border-left: 3px solid var(--amber);
    background: rgba(66, 53, 23, 0.55);
    color: #e9dfc8;
    font-size: 0.88rem;
}

.processing-panel > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
}

.processing-panel > summary::-webkit-details-marker {
    display: none;
}

.processing-panel > summary span {
    display: grid;
}

.processing-panel > summary small {
    color: var(--muted);
    font-weight: 400;
}

.processing-content {
    padding-top: 1.25rem;
}

.checkbox-control {
    display: flex !important;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.55rem !important;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.filter-grid fieldset {
    display: grid;
    gap: 0.8rem;
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    background: #10151a;
}

.filter-grid legend {
    padding: 0 0.4rem;
    color: var(--text);
}

#spectrum-canvas {
    display: block;
    width: 100%;
    height: 220px;
    border: 1px solid var(--border);
    border-radius: 0.55rem;
    background: #090c0f;
}

.selection-analysis-panel table th,
.selection-analysis-panel table td {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.export-grid > label {
    min-width: 220px;
}

.hash-output {
    display: block;
    margin-top: 1rem;
    padding: 0.8rem;
    overflow-wrap: anywhere;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: #10151a;
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.78rem;
}

@media (max-width: 900px) {
    .control-grid,
    .channel-control-grid,
    .filter-grid {
        grid-template-columns: 1fr;
    }

    .forensic-panel-heading {
        display: block;
    }

    .forensic-panel-heading .processing-state {
        margin-top: 0.75rem;
    }

    .processing-panel > summary {
        align-items: start;
    }
}


/* machine-hypotheses-v1 */
.hypothesis-warning { margin-bottom: 1.25rem; }
.hypothesis-principles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.25rem 0;
}
.hypothesis-principles > div {
    display: grid;
    gap: 0.35rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    background: var(--surface);
}
.hypothesis-principles span { color: var(--muted); font-size: 0.88rem; }
.hypothesis-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 260px auto auto auto;
    align-items: end;
    gap: 0.75rem;
    margin: 1.25rem 0;
}
.hypothesis-toolbar > label:not(.checkbox-control) {
    display: grid;
    gap: 0.35rem;
    color: var(--muted);
    font-size: 0.84rem;
}
.hypothesis-toolbar input[type="search"],
.hypothesis-toolbar select {
    min-height: 2.65rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 0.45rem;
    background: #10151a;
    color: var(--text);
}
.hypothesis-toolbar button {
    min-height: 2.65rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
}
.hypothesis-checkbox {
    min-height: 2.65rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: #10151a;
    color: var(--muted);
}
.hypothesis-load-status {
    padding: 1rem;
    border: 1px dashed var(--border);
    border-radius: 0.65rem;
    color: var(--muted);
    background: #10151a;
}
.hypothesis-run-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1rem 0;
}
.hypothesis-run-summary > div {
    padding: 0.85rem;
    border: 1px solid var(--border);
    border-radius: 0.55rem;
    background: var(--surface);
}
.hypothesis-run-summary strong,
.hypothesis-run-summary span { display: block; }
.hypothesis-run-summary span {
    margin-top: 0.25rem;
    color: var(--muted);
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}
.hypothesis-segments { display: grid; gap: 0.8rem; }
.hypothesis-segment {
    border: 1px solid var(--border);
    border-radius: 0.7rem;
    background: var(--surface);
}
.hypothesis-segment[hidden] { display: none; }
.hypothesis-segment > summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 1rem;
    padding: 1rem;
    cursor: pointer;
    list-style: none;
}
.hypothesis-segment > summary::-webkit-details-marker { display: none; }
.hypothesis-time-button {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--blue);
    border-radius: 0.45rem;
    background: var(--blue-dark);
    color: #dcecff;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.hypothesis-best-text { display: grid; gap: 0.3rem; }
.hypothesis-best-text strong { font-size: 1.05rem; }
.hypothesis-best-text span { color: var(--muted); font-size: 0.82rem; }
.agreement-badge {
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.76rem;
    white-space: nowrap;
}
.agreement-badge.strong { border-color: #396c49; color: var(--green); background: var(--green-dark); }
.agreement-badge.mixed { border-color: #806728; color: var(--amber); background: var(--amber-dark); }
.agreement-badge.disagreement { border-color: #824444; color: var(--red); background: var(--red-dark); }
.hypothesis-body { display: grid; gap: 1rem; padding: 0 1rem 1rem; }
.hypothesis-subsection {
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    background: #11161b;
}
.hypothesis-subsection h3 { margin-top: 0; font-size: 1rem; }
.hypothesis-list { display: grid; gap: 0.65rem; margin: 0; padding: 0; list-style: none; }
.hypothesis-list li {
    padding: 0.7rem;
    border: 1px solid var(--border);
    border-radius: 0.45rem;
    background: #0d1115;
}
.hypothesis-list code { white-space: normal; overflow-wrap: anywhere; }
.hypothesis-source-line { display: block; margin-top: 0.25rem; color: var(--muted); font-size: 0.78rem; }
.word-slot-table td:first-child { font-variant-numeric: tabular-nums; }
.word-alternative {
    display: inline-block;
    margin: 0.12rem 0.25rem 0.12rem 0;
    padding: 0.16rem 0.35rem;
    border: 1px solid var(--border);
    border-radius: 0.35rem;
    background: var(--surface-2);
}
.hypothesis-provenance {
    margin-top: 1.25rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    background: var(--surface);
}
.hypothesis-provenance summary { cursor: pointer; font-weight: 700; }
.hypothesis-provenance pre {
    max-height: 38rem;
    overflow: auto;
    padding: 1rem;
    border-radius: 0.5rem;
    background: #090c0f;
    color: #cdd7df;
    font-size: 0.75rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
@media (max-width: 1000px) {
    .hypothesis-toolbar, .hypothesis-run-summary { grid-template-columns: 1fr 1fr; }
    .hypothesis-principles { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
    .hypothesis-toolbar, .hypothesis-run-summary { grid-template-columns: 1fr; }
    .hypothesis-segment > summary { grid-template-columns: 1fr; }
}

/* visual-refresh-v1 */
:root {
    --background: #090d12;
    --surface: #111820;
    --surface-2: #18212b;
    --surface-3: #202c38;
    --border: #293744;
    --text: #edf4f8;
    --muted: #92a3b1;
    --blue: #7fc4ef;
    --blue-dark: #123149;
    --amber: #efc36b;
    --amber-dark: #3c3017;
    --max-width: 1380px;
}

html { scroll-padding-top: 5rem; }

body.visual-refresh {
    background:
        radial-gradient(circle at 12% -8%, rgba(47,109,148,.24), transparent 31rem),
        radial-gradient(circle at 88% 12%, rgba(132,91,28,.12), transparent 28rem),
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
        var(--background);
    background-size: auto, auto, 34px 34px, 34px 34px, auto;
    line-height: 1.58;
}

.visual-refresh .container { width: min(calc(100% - 2.25rem), var(--max-width)); }

.visual-refresh .hero {
    padding: 3rem 0 2.25rem;
    border-bottom: 1px solid rgba(127,196,239,.2);
    background: linear-gradient(120deg, rgba(12,23,33,.96), rgba(10,14,19,.84));
}

.visual-refresh .hero h1 {
    font-size: clamp(2.35rem, 6vw, 4.7rem);
    line-height: .98;
}

.visual-refresh .lead {
    max-width: 780px;
    margin: 1.15rem 0;
    font-size: clamp(1rem, 2vw, 1.22rem);
}

.visual-refresh .hero .notice {
    max-width: 840px;
    padding: .8rem 1rem;
    border: 1px solid rgba(239,195,107,.28);
    border-left: 3px solid var(--amber);
    border-radius: .55rem;
    background: rgba(60,48,23,.6);
    font-size: .88rem;
}

.hero-actions,
.hero-metrics,
.site-section-nav-inner,
.lab-tab-list {
    display: flex;
    gap: .55rem;
}

.hero-actions { flex-wrap: wrap; margin-top: 1rem; }

.hero-action {
    padding: .58rem .9rem;
    border: 1px solid var(--border);
    border-radius: .55rem;
    background: rgba(17,24,32,.78);
    color: var(--text);
    font-size: .86rem;
    font-weight: 750;
    text-decoration: none;
}

.hero-action.primary {
    border-color: rgba(127,196,239,.65);
    background: linear-gradient(#1a4564, #123149);
}

.hero-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    max-width: 1000px;
    margin-top: 1rem;
}

.hero-metric {
    padding: .75rem .85rem;
    border: 1px solid rgba(127,196,239,.16);
    border-radius: .6rem;
    background: rgba(14,21,28,.76);
}

.hero-metric strong,
.hero-metric span { display: block; }
.hero-metric span { margin-top: .15rem; color: var(--muted); font-size: .74rem; }

.site-section-nav {
    position: sticky;
    z-index: 80;
    top: 0;
    border-bottom: 1px solid rgba(127,196,239,.16);
    background: rgba(9,13,18,.88);
    backdrop-filter: blur(16px);
}

.site-section-nav-inner {
    align-items: center;
    min-height: 3.55rem;
    overflow-x: auto;
}

.site-nav-brand {
    margin-right: .3rem;
    font-size: .75rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.site-nav-link,
.site-nav-control {
    flex: 0 0 auto;
    padding: .42rem .68rem;
    border: 1px solid transparent;
    border-radius: .45rem;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .77rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.site-nav-link:hover,
.site-nav-link.active,
.site-nav-control:hover {
    border-color: var(--border);
    background: var(--surface-2);
    color: var(--text);
}

.site-nav-link.active { color: var(--blue); }
.site-nav-spacer { flex: 1 0 1rem; }

.visual-refresh main { padding: 1.25rem 0 3rem; }

.visual-refresh .section {
    width: min(calc(100% - 2.25rem), var(--max-width));
    margin: 0 auto 1rem;
    padding: 1.3rem;
    border: 1px solid var(--border);
    border-radius: .9rem;
    background: linear-gradient(180deg, rgba(20,29,38,.96), rgba(14,20,27,.96));
    box-shadow: 0 16px 48px rgba(0,0,0,.22);
    scroll-margin-top: 5rem;
}

.visual-refresh .section.full-recording { border-color: rgba(127,196,239,.3); }
.visual-refresh .section h2 { margin-bottom: 0; font-size: clamp(1.45rem,3vw,2.25rem); }
.visual-refresh .section-heading { align-items: center; margin-bottom: .7rem; }

.compact-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .65rem;
}

.compact-section-heading h2 { margin: 0; }

.section-collapse-button {
    flex: 0 0 auto;
    padding: .45rem .7rem;
    border: 1px solid var(--border);
    border-radius: .45rem;
    background: var(--surface-2);
    color: var(--muted);
    font: inherit;
    font-size: .77rem;
    font-weight: 750;
    cursor: pointer;
}

.compactable-section.is-collapsed { padding-block: .85rem; }
.compactable-section.is-collapsed .section-heading,
.compactable-section.is-collapsed .compact-section-heading { margin-bottom: 0; }
.compactable-section.is-collapsed .section-body { display: none; }

.lab-intro { margin: .45rem 0 .9rem; color: var(--muted); font-size: .9rem; }
.lab-workspace { margin-top: .9rem; }

.lab-tab-list {
    position: sticky;
    z-index: 45;
    top: 3.8rem;
    padding: .5rem;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: .7rem;
    background: rgba(11,16,22,.92);
    backdrop-filter: blur(14px);
}

.lab-tab-button {
    flex: 0 0 auto;
    padding: .48rem .78rem;
    border: 1px solid transparent;
    border-radius: .45rem;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .81rem;
    font-weight: 760;
    cursor: pointer;
}

.lab-tab-button:hover,
.lab-tab-button.active {
    border-color: var(--border);
    background: var(--surface-2);
    color: var(--text);
}

.lab-tab-button.active { border-color: rgba(127,196,239,.55); color: var(--blue); }
.lab-tab-panel { padding-top: .8rem; }
.lab-tab-panel[hidden] { display: none; }
.lab-listen-grid, .lab-measure-grid { display: grid; gap: .8rem; }

.lab-enhance-grid {
    display: grid;
    grid-template-columns: minmax(300px,.8fr) minmax(420px,1.2fr);
    align-items: start;
    gap: .8rem;
}

.visual-refresh .forensic-panel,
.visual-refresh .selection-panel,
.visual-refresh .zoom-panel,
.visual-refresh .fallback-player { margin: 0; border-radius: .7rem; }

.visual-refresh .channel-panel { padding: 1rem; }
.visual-refresh .channel-panel .panel-description { color: var(--muted); font-size: .85rem; }
.visual-refresh .wave-shell { min-height: 275px; background: #080c10; }

.visual-refresh .transport {
    position: sticky;
    z-index: 38;
    bottom: .55rem;
    margin: 0;
    padding: .65rem;
    border: 1px solid var(--border);
    border-radius: .65rem;
    background: rgba(10,15,20,.93);
    box-shadow: 0 12px 32px rgba(0,0,0,.34);
    backdrop-filter: blur(14px);
}

.visual-refresh .selection-panel,
.visual-refresh .zoom-panel { padding: 1rem; }
.visual-refresh .spectrum-panel { position: sticky; top: 8rem; }
.visual-refresh #spectrum-canvas { height: 180px; }
.visual-refresh .filter-grid,
.visual-refresh .control-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.visual-refresh .selection-analysis-panel { margin: 0; }

.visual-refresh table { border: 1px solid var(--border); background: #0e141a; }
.visual-refresh th,
.visual-refresh td { padding: .72rem .8rem; }

.visual-refresh .card,
.visual-refresh .audio-card,
.visual-refresh .finding-block { padding: 1rem; border-radius: .68rem; }

.visual-refresh .hypothesis-toolbar,
.visual-refresh .background-toolbar {
    position: sticky;
    z-index: 30;
    top: 3.8rem;
    margin: .8rem 0;
    padding: .65rem;
    border: 1px solid var(--border);
    border-radius: .65rem;
    background: rgba(10,15,20,.93);
    backdrop-filter: blur(14px);
}

.visual-refresh .hypothesis-segments,
.visual-refresh .background-candidates { gap: .5rem; }

.visual-refresh .hypothesis-segment > summary,
.visual-refresh .background-candidate > summary { padding: .75rem; }

.back-to-top {
    position: fixed;
    z-index: 90;
    right: 1rem;
    bottom: 1rem;
    display: grid;
    width: 2.7rem;
    height: 2.7rem;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(17,24,32,.92);
    color: var(--text);
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: .16s ease;
}

.back-to-top.visible { opacity: 1; pointer-events: auto; transform: none; }

@media (max-width: 1000px) {
    .hero-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .lab-enhance-grid { grid-template-columns: 1fr; }
    .visual-refresh .spectrum-panel { position: static; }
}

@media (max-width: 720px) {
    .visual-refresh .container,
    .visual-refresh .section { width: min(calc(100% - 1rem), var(--max-width)); }
    .visual-refresh .hero { padding: 2.3rem 0 1.7rem; }
    .visual-refresh .section { padding: .9rem; border-radius: .72rem; }
    .site-nav-brand, .site-nav-control, .site-nav-spacer { display: none; }
    .visual-refresh .filter-grid,
    .visual-refresh .control-grid { grid-template-columns: 1fr; }
    .hero-actions { display: grid; grid-template-columns: 1fr; }
    .hero-action { text-align: center; }
}

@media (max-width: 430px) {
    .hero-metrics { grid-template-columns: 1fr; }
}
/* selection-spectrogram-v1 */

.spectrogram-panel {
    margin: 0;
}

.spectrogram-presets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin: 1rem 0;
}

.spectrogram-presets button {
    min-height: 2.55rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 0.48rem;
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
}

.spectrogram-presets button:first-child {
    border-color: rgba(127, 196, 239, 0.55);
    background: var(--blue-dark);
}

.spectrogram-control-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.spectrogram-control-grid > label {
    display: grid;
    align-content: start;
    gap: 0.35rem;
    color: var(--muted);
    font-size: 0.82rem;
}

.spectrogram-control-grid select {
    min-height: 2.55rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 0.45rem;
    background: #0d141b;
    color: var(--text);
}

.spectrogram-canvas-shell {
    position: relative;
    min-height: 480px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 0.7rem;
    background: #080c10;
}

#selection-spectrogram-canvas {
    display: block;
    width: 100%;
    height: 520px;
}

.spectrogram-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 2rem;
    color: var(--muted);
    text-align: center;
    pointer-events: none;
}

.spectrogram-placeholder[hidden] {
    display: none;
}

.spectrogram-summary {
    margin: 0.75rem 0;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: #0d141b;
    color: var(--muted);
    font-family:
        ui-monospace, SFMono-Regular, Consolas,
        monospace;
    font-size: 0.76rem;
    overflow-wrap: anywhere;
}

.spectrogram-tab-button {
    border-color: rgba(239, 195, 107, 0.28);
}

@media (max-width: 950px) {
    .spectrogram-control-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .spectrogram-control-grid {
        grid-template-columns: 1fr;
    }

    .spectrogram-canvas-shell {
        min-height: 410px;
    }

    #selection-spectrogram-canvas {
        height: 440px;
    }
}

/* synthetic-reconstruction-tab-v1 */

.synthetic-reconstruction-tab-button {
    border-color: rgba(239, 143, 143, 0.34);
}

.synthetic-reconstruction-warning {
    margin-bottom: 1rem;
    border-color: rgba(239, 143, 143, 0.45);
    border-left-color: var(--red);
    background: rgba(61, 32, 37, 0.7);
}

.synthetic-request-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(140px, 0.55fr))
        repeat(2, minmax(180px, 1fr));
    align-items: end;
    gap: 0.7rem;
    margin-bottom: 0.7rem;
}

.synthetic-request-grid label {
    display: grid;
    gap: 0.35rem;
    color: var(--muted);
    font-size: 0.82rem;
}

.synthetic-request-grid input {
    min-height: 2.55rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 0.45rem;
    background: #0d141b;
    color: var(--text);
}

.synthetic-request-grid button,
.synthetic-request-actions button,
.synthetic-candidate-actions button {
    min-height: 2.55rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.48rem;
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
}

.synthetic-request-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-bottom: 0.65rem;
}

#synthetic-copy-command {
    border-color: rgba(127, 196, 239, 0.6);
    background: var(--blue-dark);
}

.synthetic-result-status {
    margin: 1rem 0;
    padding: 0.8rem;
    border: 1px solid var(--border);
    border-radius: 0.55rem;
    background: #0d141b;
    color: var(--muted);
}

.synthetic-audio-comparisons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    margin-bottom: 1rem;
}

.synthetic-audio-card {
    display: grid;
    gap: 0.35rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.55rem;
    background: #0d141b;
}

.synthetic-audio-card strong {
    text-transform: capitalize;
}

.synthetic-audio-card span {
    min-height: 2.5em;
    color: var(--muted);
    font-size: 0.77rem;
}

.synthetic-audio-card audio {
    width: 100%;
}

.synthetic-candidates {
    display: grid;
    gap: 0.75rem;
}

.synthetic-candidate-card {
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    background:
        linear-gradient(
            180deg,
            rgba(21, 29, 38, 0.98),
            rgba(13, 19, 25, 0.98)
        );
}

.synthetic-candidate-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.synthetic-candidate-rank {
    color: var(--blue);
    font-size: 0.77rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.synthetic-support-label {
    padding: 0.28rem 0.5rem;
    border: 1px solid rgba(239, 195, 107, 0.35);
    border-radius: 999px;
    background: var(--amber-dark);
    color: var(--amber);
    font-size: 0.72rem;
}

.synthetic-candidate-text {
    margin: 0.85rem 0;
    padding: 0.85rem;
    border-left: 3px solid var(--red);
    background: rgba(61, 32, 37, 0.34);
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.55;
}

.synthetic-candidate-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}

.synthetic-candidate-stats > div {
    min-width: 0;
    padding: 0.6rem;
    border: 1px solid var(--border);
    border-radius: 0.45rem;
    background: #0d141b;
}

.synthetic-candidate-stats strong,
.synthetic-candidate-stats span {
    display: block;
}

.synthetic-candidate-stats strong {
    color: var(--muted);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.synthetic-candidate-stats span {
    margin-top: 0.2rem;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.synthetic-candidate-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 0.7rem;
}

.synthetic-candidate-actions button:first-child {
    border-color: rgba(239, 143, 143, 0.55);
    background: var(--red-dark);
}

.synthetic-candidate-sources {
    padding: 0.7rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: #0b1015;
}

.synthetic-candidate-sources summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 750;
}

.synthetic-candidate-sources ul {
    display: grid;
    gap: 0.55rem;
    margin: 0.7rem 0 0;
    padding: 0;
    list-style: none;
}

.synthetic-candidate-sources li {
    padding: 0.65rem;
    border: 1px solid var(--border);
    border-radius: 0.45rem;
    background: #0d141b;
}

.synthetic-candidate-sources strong,
.synthetic-candidate-sources span {
    display: block;
}

.synthetic-candidate-sources span {
    margin-top: 0.2rem;
    color: var(--muted);
    font-size: 0.73rem;
}

.synthetic-candidate-sources blockquote {
    margin: 0.55rem 0 0;
    padding-left: 0.65rem;
    border-left: 2px solid var(--border-strong);
    color: #dce6ed;
}

.synthetic-provenance {
    margin-top: 1rem;
    padding: 0.8rem;
    border: 1px solid var(--border);
    border-radius: 0.55rem;
    background: #0d141b;
}

.synthetic-provenance summary {
    cursor: pointer;
    font-weight: 750;
}

.synthetic-provenance pre {
    max-height: 38rem;
    overflow: auto;
    margin: 0.8rem 0 0;
    padding: 0.75rem;
    border-radius: 0.45rem;
    background: #070a0d;
    color: #cbd6de;
    font-size: 0.73rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.synthetic-empty {
    padding: 1rem;
    border: 1px dashed var(--border);
    border-radius: 0.55rem;
    color: var(--muted);
}

@media (max-width: 1050px) {
    .synthetic-request-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .synthetic-candidate-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .synthetic-request-grid,
    .synthetic-candidate-stats,
    .synthetic-audio-comparisons {
        grid-template-columns: 1fr;
    }
}


/* synthetic-background-chatter-ui-v1 */

.synthetic-background-chatter {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.synthetic-background-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.synthetic-background-heading h3 {
    margin: 0;
}

.synthetic-background-heading button,
.synthetic-background-toolbar select,
.synthetic-background-toolbar input {
    min-height: 2.5rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 0.45rem;
    background: var(--surface-2);
    color: var(--text);
}

.synthetic-background-warning {
    margin-bottom: 0.8rem;
    border-color: rgba(239, 195, 107, 0.4);
    background: rgba(60, 48, 23, 0.62);
}

.synthetic-background-toolbar {
    display: grid;
    grid-template-columns:
        minmax(220px, 0.7fr)
        minmax(240px, 1fr);
    gap: 0.7rem;
    margin: 0.8rem 0;
}

.synthetic-background-toolbar label {
    display: grid;
    gap: 0.35rem;
    color: var(--muted);
    font-size: 0.8rem;
}

.synthetic-background-candidates {
    display: grid;
    gap: 0.7rem;
}

.synthetic-background-candidate-card {
    padding: 0.9rem;
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    background: #0d141b;
}

.synthetic-background-candidate-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.7rem;
}

.synthetic-background-candidate-header strong {
    color: var(--blue);
    font-family:
        ui-monospace, SFMono-Regular, Consolas,
        monospace;
}

.synthetic-background-candidate-text {
    margin: 0.7rem 0;
    padding: 0.75rem;
    border-left: 3px solid var(--amber);
    background: rgba(60, 48, 23, 0.34);
    font-size: 1rem;
    line-height: 1.5;
}

.synthetic-background-candidate-metrics {
    margin-bottom: 0.65rem;
    color: var(--muted);
    font-size: 0.76rem;
}

@media (max-width: 720px) {
    .synthetic-background-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .synthetic-background-toolbar {
        grid-template-columns: 1fr;
    }
}

/* model-interpretation-audio-loop-v1 */

.actual-audio-review-bar {
    display: grid;
    grid-template-columns:
        minmax(280px, 1fr)
        minmax(360px, auto);
    gap: 0.8rem 1rem;
    align-items: center;
    margin: 0.9rem 0 1.1rem;
    padding: 0.9rem;
    border: 1px solid rgba(127, 196, 239, 0.35);
    border-radius: 0.65rem;
    background:
        linear-gradient(
            120deg,
            rgba(18, 49, 73, 0.58),
            rgba(13, 20, 27, 0.94)
        );
}

.actual-audio-review-copy {
    display: grid;
    gap: 0.2rem;
}

.actual-audio-review-copy .eyebrow {
    margin: 0;
}

.actual-audio-review-copy strong {
    font-size: 1rem;
}

.actual-audio-review-copy span {
    max-width: 760px;
    color: var(--muted);
    font-size: 0.79rem;
    line-height: 1.5;
}

.actual-audio-review-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.actual-audio-review-actions button,
.actual-audio-loop-button,
.candidate-open-adjustments,
.candidate-stop-loop {
    min-height: 2.45rem;
    padding: 0.46rem 0.72rem;
    border: 1px solid var(--border);
    border-radius: 0.46rem;
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
}

#model-loop-current-selection,
.actual-audio-loop-button {
    border-color: rgba(127, 196, 239, 0.58);
    background: var(--blue-dark);
}

#model-raw-channel-2 {
    border-color: rgba(239, 195, 107, 0.44);
    background: var(--amber-dark);
}

#model-stop-loop,
.candidate-stop-loop {
    border-color: rgba(239, 143, 143, 0.38);
}

.actual-audio-review-status {
    grid-column: 1 / -1;
    min-height: 2.25rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 0.45rem;
    background: #0a1016;
    color: var(--muted);
    font-family:
        ui-monospace, SFMono-Regular, Consolas,
        monospace;
    font-size: 0.75rem;
}

.synthetic-candidate-actions:empty {
    display: none;
}

@media (max-width: 900px) {
    .actual-audio-review-bar {
        grid-template-columns: 1fr;
    }

    .actual-audio-review-actions {
        justify-content: flex-start;
    }
}
/* guided-listening-mode-v1 */

.guided-manual-help {
    margin: -0.15rem 0 0.85rem;
    color: var(--muted);
    font-size: 0.78rem;
}

.guided-manual-help > summary {
    cursor: pointer;
    font-weight: 720;
}

.guided-manual-help > div {
    margin-top: 0.45rem;
    padding: 0.65rem 0.75rem;
    border-left: 2px solid var(--border);
    line-height: 1.5;
}

.guided-listening-panel {
    margin: 0 0 1rem;
    padding: 1rem;
    border: 1px solid rgba(127, 196, 239, 0.34);
    border-radius: 0.7rem;
    background:
        linear-gradient(
            145deg,
            rgba(20, 42, 58, 0.68),
            rgba(13, 20, 27, 0.96) 45%
        );
    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.16);
}

.guided-listening-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 0.75rem;
    margin-bottom: 0.8rem;
}

.guided-listening-heading h3 {
    margin: 0.12rem 0 0;
    font-size: clamp(1.05rem, 2vw, 1.35rem);
}

#guided-advanced-toggle {
    flex: 0 0 auto;
    min-height: 2.4rem;
    padding: 0.46rem 0.72rem;
    border: 1px solid var(--border);
    border-radius: 0.46rem;
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    font-weight: 720;
}

.guided-step {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0.7rem;
    padding: 0.85rem 0;
    border-top: 1px solid var(--border);
}

.guided-step-number {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(127, 196, 239, 0.44);
    border-radius: 999px;
    background: var(--blue-dark);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 820;
}

.guided-step-content {
    min-width: 0;
}

.guided-step-content h4 {
    margin: 0 0 0.2rem;
    font-size: 0.98rem;
}

.guided-step-content > p {
    max-width: 920px;
    margin: 0 0 0.65rem;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.guided-choice-row,
.guided-playback-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.guided-choice-row button,
.guided-playback-row button {
    min-height: 2.55rem;
    padding: 0.5rem 0.72rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    font-weight: 720;
    text-align: left;
}

.guided-choice-row button {
    display: grid;
    gap: 0.1rem;
    min-width: 155px;
}

.guided-choice-row button small {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 580;
}

.guided-choice-row button.active,
.guided-mode-grid button.active {
    border-color: rgba(127, 196, 239, 0.76);
    background:
        linear-gradient(
            145deg,
            rgba(35, 87, 121, 0.68),
            rgba(20, 42, 58, 0.76)
        );
    box-shadow:
        inset 0 0 0 1px
        rgba(158, 198, 229, 0.16);
}

.guided-mode-grid {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(135px, 1fr));
    gap: 0.5rem;
}

.guided-mode-grid button {
    display: grid;
    align-content: start;
    gap: 0.25rem;
    min-height: 5.15rem;
    padding: 0.7rem;
    border: 1px solid var(--border);
    border-radius: 0.52rem;
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    text-align: left;
}

.guided-mode-grid button strong {
    font-size: 0.82rem;
    line-height: 1.25;
}

.guided-mode-grid button span {
    color: var(--muted);
    font-size: 0.7rem;
    line-height: 1.4;
}

.guided-mode-explanation {
    margin-top: 0.6rem;
    padding: 0.65rem 0.72rem;
    border-left: 3px solid var(--blue);
    background: rgba(13, 20, 27, 0.72);
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.5;
}

.guided-mode-explanation strong {
    color: var(--text);
}

#guided-play-once,
#guided-loop {
    border-color: rgba(127, 196, 239, 0.55);
    background: var(--blue-dark);
}

#guided-compare {
    border-color: rgba(239, 195, 107, 0.48);
    background: var(--amber-dark);
}

#guided-stop {
    border-color: rgba(239, 143, 143, 0.38);
}

.guided-listening-status {
    display: block;
    min-height: 2.3rem;
    margin-top: 0.6rem;
    padding: 0.58rem 0.68rem;
    border: 1px solid var(--border);
    border-radius: 0.46rem;
    background: #0a1016;
    color: var(--muted);
    font-family:
        ui-monospace, SFMono-Regular, Consolas,
        monospace;
    font-size: 0.72rem;
    line-height: 1.45;
}

.guided-safety-note {
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.76rem;
}

.guided-safety-note > summary {
    cursor: pointer;
    color: var(--amber);
    font-weight: 740;
}

.guided-safety-note p {
    max-width: 950px;
    margin-bottom: 0;
    line-height: 1.55;
}

body.guided-listening-site:not(
    .guided-advanced-open
) .guided-advanced-control,
body.guided-listening-site:not(
    .guided-advanced-open
) .guided-advanced-tab {
    display: none !important;
}

body.guided-advanced-open
.guided-advanced-control {
    animation:
        guided-control-reveal 150ms ease-out;
}

@keyframes guided-control-reveal {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.guided-choice-row button:hover,
.guided-mode-grid button:hover,
.guided-playback-row button:hover,
#guided-advanced-toggle:hover {
    border-color: rgba(127, 196, 239, 0.62);
}

.guided-choice-row button:focus-visible,
.guided-mode-grid button:focus-visible,
.guided-playback-row button:focus-visible,
#guided-advanced-toggle:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

@media (max-width: 1040px) {
    .guided-mode-grid {
        grid-template-columns:
            repeat(3, minmax(140px, 1fr));
    }
}

@media (max-width: 720px) {
    .guided-listening-heading {
        align-items: stretch;
        flex-direction: column;
    }

    #guided-advanced-toggle {
        align-self: start;
    }

    .guided-step {
        grid-template-columns: 1fr;
    }

    .guided-step-number {
        width: 1.8rem;
        height: 1.8rem;
    }

    .guided-mode-grid {
        grid-template-columns: 1fr;
    }

    .guided-mode-grid button {
        min-height: auto;
    }

    .guided-choice-row,
    .guided-playback-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .guided-choice-row button,
    .guided-playback-row button {
        width: 100%;
    }
}
/* top-methods-link-v1 */

.hero-methods-link {
    margin: 0.75rem 0 0;
}

.hero-methods-link a {
    color: var(--blue);
    font-weight: 720;
    text-decoration: none;
}

.hero-methods-link a:hover {
    text-decoration: underline;
}
/* processing-residue-audit-v1 */

.processing-audit-panel {
    margin-top: 1rem;
}

.processing-audit-grid {
    display: grid;
    grid-template-columns: minmax(15rem, 0.85fr) minmax(18rem, 1.4fr);
    gap: 1rem;
    align-items: end;
}

.processing-audit-shortcuts {
    margin: 0;
}

.processing-audit-shortcuts button {
    flex: 1 1 10rem;
}

@media (max-width: 760px) {
    .processing-audit-grid {
        grid-template-columns: 1fr;
    }
}
/* standardized-phase-indicator-v1 */

.phase-heading {
    align-items: flex-start;
}

.phase-heading > div {
    min-width: 0;
}

.phase-heading .status {
    flex: 0 0 auto;
    margin-top: 0.15rem;
}

.phase-validation-note {
    margin: 0.35rem 0 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.4;
}