/* Microphone Test */

.microphone-page {
    overflow-x: clip;
}

.microphone-test-page {
    background: var(--color-background);
}

.mic-hero {
    padding-block: clamp(var(--space-5, 1.25rem), 2.5vw, var(--space-8)) var(--space-4);
}

.mic-hero__inner {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    text-align: center;
}

.mic-hero__eyebrow {
    color: var(--color-mint);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mic-hero h1 {
    max-width: 25ch;
    font-size: clamp(2.25rem, 3.6vw, 3.5rem);
}

.mic-hero__support {
    max-width: 72ch;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.mic-hero__jumps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-4);
    margin-block-start: var(--space-2);
    font-size: var(--text-sm);
}

.mic-hero__jumps a {
    color: var(--color-cyan);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.mic-terms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: var(--space-3) var(--space-6);
    margin-block-end: var(--space-6);
}

.mic-terms > div {
    padding-block: var(--space-3);
    border-block-start: 1px solid var(--color-border);
}

.mic-terms dt {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.mic-terms dd {
    margin: var(--space-1) 0 0;
    color: var(--color-text-secondary);
    line-height: 1.55;
}

.mic-tool {
    --mic-panel-columns: minmax(0, 1.65fr) minmax(18rem, 0.7fr);
    padding-block-end: var(--space-8);
}

.mic-console {
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-mint) 32%, var(--color-border));
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: 0 18px 52px rgb(0 0 0 / 0.24);
}

.mic-console::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, var(--color-mint), var(--color-cyan) 58%, transparent 88%);
}

.mic-console__header {
    min-height: 4.5rem;
    padding: var(--space-3) clamp(var(--space-4), 2vw, var(--space-6));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    border-block-end: 1px solid var(--color-border);
}

.mic-console__title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.mic-console__asset,
.mic-secondary-tools__icon {
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--color-mint) 34%, var(--color-border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-mint) 9%, var(--color-surface-elevated));
    color: var(--color-mint);
}

.mic-console__asset img {
    width: 1.55rem;
    height: 1.55rem;
    object-fit: contain;
}

.mic-console__title h2 {
    font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.mic-console__title p {
    margin-block-start: var(--space-1);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.mic-console__session-state {
    min-height: 2.25rem;
    padding-inline: var(--space-3);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.mic-console__session-state > span {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--color-text-secondary);
}

.mic-tool[data-session="starting"] .mic-console__session-state,
.mic-tool[data-session="active"] .mic-console__session-state {
    border-color: color-mix(in srgb, var(--color-mint) 46%, var(--color-border));
    color: var(--color-text);
}

.mic-tool[data-session="active"] .mic-console__session-state > span {
    background: var(--color-mint);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-mint) 12%, transparent);
}

.mic-tool[data-session="starting"] .mic-console__session-state > span {
    background: var(--color-warning);
}

.mic-tool[data-session="error"] .mic-console__session-state {
    border-color: color-mix(in srgb, var(--color-danger) 50%, var(--color-border));
    color: var(--color-danger);
}

.mic-tool[data-session="error"] .mic-console__session-state > span {
    background: var(--color-danger);
}

.mic-console__controls {
    padding: var(--space-3) clamp(var(--space-4), 2vw, var(--space-6));
    display: grid;
    grid-template-columns: auto minmax(14rem, 1fr) auto auto auto;
    align-items: end;
    gap: var(--space-3);
    border-block-end: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-cyan) 1.8%, var(--color-background));
}

.mic-console__control-note,
.mic-console__report-note {
    max-width: none;
    padding-inline: clamp(var(--space-4), 2vw, var(--space-6));
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.mic-console__control-note {
    padding-block-start: var(--space-3);
}

.mic-console__report-note {
    padding-block: var(--space-2) var(--space-3);
    border-block-end: 1px solid var(--color-border);
}

.mic-console__control-note a,
.mic-console__report-note a {
    color: var(--color-cyan);
}

.mic-button,
.mic-device select {
    min-height: 2.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font: inherit;
}

.mic-button {
    padding-inline: var(--space-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    background: var(--color-surface-elevated);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}

.mic-button:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--color-cyan) 62%, var(--color-border));
    background: color-mix(in srgb, var(--color-cyan) 8%, var(--color-surface-elevated));
}

.mic-button:disabled,
.mic-device select:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.mic-button--primary {
    border-color: color-mix(in srgb, var(--color-mint) 72%, var(--color-cyan));
    background: var(--brand-gradient);
    color: var(--color-dark-background);
}

.mic-button--primary:hover:not(:disabled) {
    border-color: var(--color-mint);
    background: var(--brand-gradient);
    color: var(--color-dark-background);
    filter: saturate(112%);
}

.mic-button__icon svg,
.mic-secondary-tools__icon svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.mic-button__icon svg circle,
.mic-secondary-tools__icon--record svg circle {
    fill: currentColor;
    stroke: none;
}

.mic-button--stop:hover:not(:disabled) {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.mic-button--reset,
.mic-button--quiet {
    background: transparent;
    color: var(--color-text-secondary);
}

.mic-button--report {
    border-color: color-mix(in srgb, var(--color-cyan) 48%, var(--color-border));
    background: color-mix(in srgb, var(--color-cyan) 5%, var(--color-surface-elevated));
}

.mic-button--report:hover:not(:disabled) {
    border-color: var(--color-cyan);
}

.mic-device {
    min-width: 0;
    display: grid;
    gap: var(--space-1);
}

.mic-device > span {
    color: var(--color-text-secondary);
    font-size: 0.68rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mic-device select {
    width: 100%;
    padding-inline: var(--space-3) 2.5rem;
    background: var(--color-surface-elevated);
    color-scheme: dark;
}

.mic-console__body {
    display: grid;
    grid-template-columns: var(--mic-panel-columns);
}

.mic-live-panel {
    min-width: 0;
    padding: clamp(var(--space-4), 2vw, var(--space-6));
}

.mic-diagnostics {
    min-width: 0;
    padding: var(--space-4) clamp(var(--space-4), 1.6vw, var(--space-5, 1.25rem));
    display: grid;
    align-content: start;
    gap: var(--space-4);
    border-inline-start: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-cyan) 2%, var(--color-background));
}

.mic-metrics {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr));
    border-block: 1px solid var(--color-border);
}

.mic-metric {
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    display: grid;
    gap: var(--space-1);
}

.mic-metric + .mic-metric {
    border-inline-start: 1px solid var(--color-border);
}

.mic-metric span {
    color: var(--color-text-secondary);
    font-size: 0.68rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mic-metric output {
    overflow: hidden;
    color: var(--color-text);
    font-family: var(--font-measurement);
    font-size: clamp(1.15rem, 2.2vw, 1.7rem);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mic-metric--primary output {
    color: var(--color-mint);
}

.mic-level {
    --mic-level: 0%;
    --mic-level-scale: 0;
    --mic-peak: 0%;
    margin-block-start: var(--space-4);
}

.mic-level__label,
.mic-level__scale {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.mic-level__label span:first-child {
    font-weight: var(--font-weight-semibold);
}

.mic-level__label span:last-child {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
}

.mic-level__track {
    height: 1.1rem;
    margin-block-start: var(--space-2);
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-cyan) 22%, var(--color-border));
    border-radius: var(--radius-xs);
    background: var(--color-background);
}

.mic-level__track > span,
.mic-level__track > i,
.mic-level__track > b {
    position: absolute;
    inset-block: 0;
}

.mic-level__safe {
    inset-inline: 0 16.666%;
    background: color-mix(in srgb, var(--color-mint) 5%, transparent);
}

.mic-level__hot {
    inset-inline: auto 4.166%;
    width: 12.5%;
    background: color-mix(in srgb, var(--color-warning) 8%, transparent);
}

.mic-level__clip {
    inset-inline: auto 0;
    width: 4.166%;
    background: color-mix(in srgb, var(--color-danger) 13%, transparent);
}

.mic-level__track > i {
    inset-inline: 0 auto;
    width: 100%;
    background: linear-gradient(90deg, var(--color-cyan), var(--color-mint) 76%, var(--color-warning) 92%, var(--color-danger));
    box-shadow: 8px 0 18px color-mix(in srgb, var(--color-mint) 25%, transparent);
    transform: scaleX(var(--mic-level-scale));
    transform-origin: left center;
    transition: transform 90ms linear;
}

.mic-level__track > b {
    inset-inline-start: var(--mic-peak);
    width: 2px;
    background: var(--color-text);
    transform: translateX(-1px);
    transition: inset-inline-start 90ms linear;
}

.mic-level__scale {
    margin-block-start: var(--space-2);
    color: var(--color-text-secondary);
    font-family: var(--font-measurement);
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
}

.mic-signal {
    margin-block: var(--space-3);
    padding-block: var(--space-3);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--space-3);
    border-block: 1px solid var(--color-border);
}

.mic-signal__dot {
    width: 0.72rem;
    height: 0.72rem;
    margin-block-start: 0.35rem;
    border: 2px solid var(--color-text-secondary);
    border-radius: 50%;
}

.mic-signal > div > span {
    display: block;
    color: var(--color-text-secondary);
    font-size: 0.68rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mic-signal strong {
    display: block;
    margin-block-start: var(--space-1);
    font-family: var(--font-display);
    font-size: var(--text-base);
}

.mic-signal p {
    margin-block-start: var(--space-1);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.mic-signal[data-state="active"] .mic-signal__dot,
.mic-signal[data-state="low"] .mic-signal__dot {
    border-color: var(--color-mint);
    background: var(--color-mint);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-mint) 10%, transparent);
}

.mic-signal[data-state="hot"] .mic-signal__dot {
    border-color: var(--color-warning);
    background: var(--color-warning);
}

.mic-signal[data-state="clipping"] .mic-signal__dot {
    border-color: var(--color-danger);
    background: var(--color-danger);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-danger) 10%, transparent);
}

.mic-visuals {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(15rem, 0.75fr);
    gap: var(--space-3);
}

.mic-readout {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-background);
}

.mic-readout figcaption {
    min-height: 2.4rem;
    padding-inline: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border-block-end: 1px solid var(--color-border);
}

.mic-readout figcaption strong {
    font-size: var(--text-sm);
}

.mic-readout figcaption span,
.mic-readout figcaption a {
    color: var(--color-text-secondary);
    font-size: 0.68rem;
}

.mic-readout figcaption a {
    color: var(--color-cyan);
    text-decoration: none;
}

.mic-readout canvas {
    width: 100%;
    height: 6rem;
}

.mic-readout--spectrum canvas {
    height: 5.25rem;
}

.mic-readout__axis {
    padding: 0 var(--space-2) var(--space-2);
    display: flex;
    justify-content: space-between;
    color: var(--color-text-secondary);
    font-family: var(--font-measurement);
    font-size: 0.58rem;
}

.mic-diagnostics h3 {
    font-size: var(--text-base);
    letter-spacing: -0.01em;
}

.mic-diagnostics__status ul {
    margin-block-start: var(--space-2);
    display: grid;
    border-block-start: 1px solid var(--color-border);
}

.mic-diagnostics__status li {
    min-width: 0;
    min-height: 2.1rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    border-block-end: 1px solid var(--color-border);
    font-size: var(--text-xs);
}

.mic-diagnostics__status li > span {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-text-secondary);
}

.mic-diagnostics__status li small {
    max-width: 9rem;
    overflow: hidden;
    color: var(--color-text-secondary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mic-diagnostics__status li[data-state="ok"] > span { background: var(--color-mint); }
.mic-diagnostics__status li[data-state="warning"] > span { background: var(--color-warning); }
.mic-diagnostics__status li[data-state="danger"] > span { background: var(--color-danger); }

.mic-diagnostics__details dl {
    margin: var(--space-2) 0 0;
    border-block-start: 1px solid var(--color-border);
}

.mic-diagnostics__details dl > div {
    min-height: 2.05rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    border-block-end: 1px solid var(--color-border);
    font-size: var(--text-xs);
}

.mic-diagnostics__details dt {
    color: var(--color-text-secondary);
}

.mic-diagnostics__details dd {
    max-width: 11rem;
    overflow: hidden;
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    text-align: end;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mic-privacy-note {
    padding-block-start: var(--space-3);
    max-width: none;
    border-block-start: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
}

.mic-privacy-note span {
    color: var(--color-mint);
    margin-inline-end: var(--space-2);
}

.mic-secondary-tools {
    margin-block-start: var(--space-4);
    overflow: hidden;
    display: grid;
    grid-template-columns: var(--mic-panel-columns);
    border: 1px solid color-mix(in srgb, var(--color-mint) 22%, var(--color-border));
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.mic-recorder,
.mic-quiet-reference {
    min-width: 0;
    padding: clamp(var(--space-4), 2vw, var(--space-6));
}

.mic-quiet-reference {
    border-inline-start: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-cyan) 2%, var(--color-background));
}

.mic-recorder > header,
.mic-quiet-reference > header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.mic-secondary-tools__icon {
    width: 2.55rem;
    height: 2.55rem;
}

.mic-secondary-tools__icon--record {
    border-color: color-mix(in srgb, var(--color-danger) 34%, var(--color-border));
    background: color-mix(in srgb, var(--color-danger) 8%, var(--color-surface-elevated));
    color: var(--color-danger);
}

.mic-recorder h3,
.mic-quiet-reference h3 {
    font-size: var(--text-xl);
}

.mic-recorder header p,
.mic-quiet-reference header p {
    margin-block-start: var(--space-1);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.mic-recorder__timeline {
    height: 2.75rem;
    margin-block-start: var(--space-4);
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
    gap: var(--space-1);
    overflow: hidden;
    border-block: 1px solid var(--color-border);
}

.mic-recorder__timeline > span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 100%;
    background: color-mix(in srgb, var(--color-danger) 9%, transparent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 100ms linear;
}

.mic-recorder__timeline > i {
    width: 1px;
    height: 42%;
    justify-self: center;
    background: color-mix(in srgb, var(--color-cyan) 34%, var(--color-border));
}

.mic-recorder__timeline > i:nth-of-type(3n) { height: 72%; }
.mic-recorder[data-recorder-state="recording"] .mic-recorder__timeline > i { background: color-mix(in srgb, var(--color-danger) 72%, var(--color-border)); }

.mic-recorder__status {
    min-height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    border-block-end: 1px solid var(--color-border);
    font-size: var(--text-sm);
}

.mic-recorder__status time {
    color: var(--color-cyan);
    font-family: var(--font-measurement);
    font-variant-numeric: tabular-nums;
}

.mic-recorder__actions {
    margin-block-start: var(--space-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.mic-button--record:not(:disabled) {
    border-color: color-mix(in srgb, var(--color-danger) 58%, var(--color-border));
    color: var(--color-danger);
}

.mic-recorder__privacy {
    max-width: none;
}

.mic-recorder__privacy,
.mic-quiet-reference__note {
    margin-block-start: var(--space-3);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
}

.mic-quiet-reference__result {
    margin-block: var(--space-4) var(--space-3);
}

.mic-quiet-reference__gauge {
    height: 0.5rem;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--color-border);
}

.mic-quiet-reference__gauge span {
    width: 100%;
    height: 100%;
    display: block;
    background: var(--brand-gradient);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 100ms linear;
}

.mic-quiet-reference[data-quiet-state="strong"] .mic-quiet-reference__gauge span { background: var(--color-warning); }
.mic-quiet-reference[data-quiet-state="clipping"] .mic-quiet-reference__gauge span { background: var(--color-danger); }

.mic-quiet-reference__result > div:last-child {
    margin-block-start: var(--space-3);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.mic-quiet-reference__result output {
    color: var(--color-cyan);
    font-family: var(--font-measurement);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
}

.mic-button--quiet-reference {
    width: 100%;
    border-color: color-mix(in srgb, var(--color-cyan) 52%, var(--color-border));
}

.mic-console__alert {
    max-width: none;
    padding: var(--space-4) clamp(var(--space-5, 1.25rem), 2.5vw, var(--space-8));
    border-block-start: 1px solid color-mix(in srgb, var(--color-danger) 42%, var(--color-border));
    background: color-mix(in srgb, var(--color-danger) 7%, var(--color-surface));
    color: color-mix(in srgb, var(--color-danger) 70%, white);
    font-size: var(--text-sm);
}

.mic-intro {
    padding-block: clamp(var(--space-8), 5vw, var(--space-16));
    border-block-start: 1px solid var(--color-border);
}

.mic-intro__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.8fr);
    align-items: start;
    gap: clamp(var(--space-8), 7vw, var(--space-20));
}

.mic-intro__lead {
    max-width: 64ch;
    color: var(--color-text);
    font-size: clamp(var(--text-lg), 2vw, var(--text-xl));
    line-height: 1.55;
}

.mic-intro__privacy {
    padding-block: var(--space-4);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    border-block: 1px solid var(--color-border);
}

.mic-intro__privacy > span {
    width: 0.68rem;
    height: 0.68rem;
    margin-block-start: 0.42rem;
    border-radius: 50%;
    background: var(--color-mint);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-mint) 10%, transparent);
}

.mic-intro__privacy p {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.mic-copy-section,
.mic-faq {
    padding-block: var(--section-space);
}

.mic-copy-section--surface,
.mic-faq {
    background: color-mix(in srgb, var(--color-cyan) 2%, var(--color-surface));
}

.mic-section-header {
    max-width: 54rem;
    margin-block-end: var(--space-10, 2.5rem);
}

.mic-section-header--wide {
    max-width: 64rem;
}

.mic-section-header h2,
.mic-editorial-lead h2,
.mic-split-copy h2,
.mic-recording-copy h2,
.mic-processing-layout h2,
.mic-quiet-copy h2,
.mic-troubleshooting-layout h2 {
    font-size: clamp(2rem, 3vw, 3rem);
}

.mic-section-header > p,
.mic-editorial-lead p,
.mic-split-copy p,
.mic-recording-copy__layout > div > p,
.mic-processing-layout > div > p,
.mic-quiet-copy > div > p,
.mic-troubleshooting-layout > div > p {
    margin-block-start: var(--space-4);
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
}

.mic-editorial-lead {
    display: grid;
    grid-template-columns: minmax(18rem, 0.75fr) minmax(0, 1.25fr);
    gap: clamp(var(--space-8), 7vw, var(--space-20));
}

.mic-editorial-lead p:first-child {
    margin-block-start: 0;
}

.mic-editorial a,
.mic-faq a {
    color: var(--color-cyan);
}

.mic-data-table {
    width: 100%;
    table-layout: fixed;
    border-block-start: 1px solid var(--color-border);
}

.mic-data-table th,
.mic-data-table td {
    padding: var(--space-4) var(--space-5, 1.25rem);
    border-block-end: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    text-align: start;
    vertical-align: top;
}

.mic-data-table thead th {
    color: var(--color-cyan);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mic-data-table tbody th {
    width: 24%;
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.mic-steps {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-12);
    list-style: none;
}

.mic-steps li {
    padding-block: var(--space-6);
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: var(--space-4);
    border-block-start: 1px solid var(--color-border);
}

.mic-steps li > span {
    color: var(--color-cyan);
    font-family: var(--font-measurement);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
}

.mic-steps h3 {
    font-size: var(--text-lg);
}

.mic-steps p {
    margin-block-start: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.mic-levels-section {
    padding-block-start: clamp(var(--space-16), 7vw, var(--space-24));
}

.mic-explain-rows {
    border-block-start: 1px solid var(--color-border);
}

.mic-explain-rows article {
    padding-block: clamp(var(--space-8), 5vw, var(--space-16));
    display: grid;
    grid-template-columns: minmax(14rem, 0.72fr) minmax(0, 1.28fr);
    align-items: center;
    gap: clamp(var(--space-8), 7vw, var(--space-20));
    border-block-end: 1px solid var(--color-border);
}

.mic-explain-rows h3 {
    font-size: clamp(1.65rem, 2.4vw, 2.35rem);
}

.mic-explain-rows p {
    margin-block-start: var(--space-4);
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
}

.mic-explain-rows__visual {
    min-height: 9rem;
    padding-block: var(--space-5, 1.25rem);
    position: relative;
    display: grid;
    align-content: center;
    border-block: 1px solid color-mix(in srgb, var(--color-cyan) 28%, var(--color-border));
    font-family: var(--font-measurement);
    font-variant-numeric: tabular-nums;
}

.mic-explain-rows__visual small {
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: var(--text-xs);
}

.mic-explain-rows__visual--dbfs {
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 0 var(--space-2);
}

.mic-explain-rows__visual--dbfs strong {
    color: var(--color-danger);
    font-size: clamp(3rem, 7vw, 5rem);
    line-height: 0.9;
}

.mic-explain-rows__visual--dbfs > span {
    color: var(--color-text-secondary);
}

.mic-explain-rows__visual--dbfs i {
    height: 2px;
    grid-column: 1 / -1;
    margin-block: var(--space-3);
    background: linear-gradient(90deg, var(--color-mint), var(--color-warning) 74%, var(--color-danger));
}

.mic-explain-rows__visual--headroom {
    grid-template-columns: auto minmax(3rem, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
}

.mic-explain-rows__visual--headroom > span { color: var(--color-cyan); font-size: var(--text-xl); }
.mic-explain-rows__visual--headroom > i { height: 2px; background: var(--color-mint); }
.mic-explain-rows__visual--headroom > strong { font-size: var(--text-2xl); }
.mic-explain-rows__visual--headroom > small { grid-column: 1 / -1; text-align: end; }

.mic-explain-rows__visual--wave svg {
    width: 100%;
    height: 4.5rem;
}

.mic-explain-rows__visual--wave path {
    fill: none;
    stroke: var(--color-mint);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.mic-inline-link {
    margin-block-start: var(--space-5, 1.25rem);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.mic-recording-copy__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(18rem, 0.7fr);
    align-items: start;
    gap: clamp(var(--space-8), 7vw, var(--space-20));
}

.mic-recording-copy__layout > div > p:first-of-type {
    margin-block-start: var(--space-5, 1.25rem);
}

.mic-recording-copy aside {
    padding-block: var(--space-6);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    border-block: 1px solid color-mix(in srgb, var(--color-warning) 34%, var(--color-border));
}

.mic-recording-copy aside > span {
    width: var(--space-3);
    height: var(--space-3);
    margin-block-start: 0.35rem;
    border: 2px solid var(--color-warning);
    border-radius: 50%;
}

.mic-recording-copy aside p {
    grid-column: 2;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.mic-split-copy {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(var(--space-8), 7vw, var(--space-20));
}

.mic-split-copy article {
    min-width: 0;
}

.mic-processing-section {
    padding-block: clamp(var(--space-12), 6vw, var(--space-20));
    border-block: 1px solid var(--color-border);
}

.mic-processing-layout {
    display: grid;
    grid-template-columns: minmax(18rem, 0.78fr) minmax(0, 1.22fr);
    align-items: start;
    gap: clamp(var(--space-8), 7vw, var(--space-20));
}

.mic-processing-list {
    margin: 0;
    border-block-start: 1px solid var(--color-border);
}

.mic-processing-list > div {
    padding-block: var(--space-4);
    display: grid;
    grid-template-columns: minmax(10rem, 0.45fr) minmax(0, 1fr);
    gap: var(--space-6);
    border-block-end: 1px solid var(--color-border);
}

.mic-processing-list dt {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.mic-processing-list dd {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.mic-quiet-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.82fr);
    align-items: center;
    gap: clamp(var(--space-8), 7vw, var(--space-20));
}

.mic-noise-reference {
    border-block-start: 1px solid var(--color-border);
}

.mic-noise-reference > div {
    padding-block: var(--space-4);
    display: grid;
    grid-template-columns: 7.5rem minmax(3rem, 1fr) 8.5rem;
    align-items: center;
    gap: var(--space-3);
    border-block-end: 1px solid var(--color-border);
    font-size: var(--text-sm);
}

.mic-noise-reference i {
    height: 0.45rem;
    border-radius: var(--radius-pill);
    background: var(--color-mint);
}

.mic-noise-reference > div:nth-child(2) i { width: 58%; background: var(--color-cyan); }
.mic-noise-reference > div:nth-child(3) i { width: 78%; background: var(--color-warning); }
.mic-noise-reference > div:nth-child(4) i { width: 100%; background: var(--color-danger); }

.mic-noise-reference small {
    color: var(--color-text-secondary);
}

.mic-problems-layout {
    display: grid;
    grid-template-columns: minmax(17rem, 0.72fr) minmax(0, 1.28fr);
    align-items: start;
    gap: clamp(var(--space-8), 6vw, var(--space-16));
}

.mic-problems-layout .mic-section-header {
    margin: 0;
    position: sticky;
    top: calc(var(--space-20) + var(--space-6));
}

.mic-details-list,
.mic-faq__list {
    border-block-start: 1px solid var(--color-border);
}

.mic-details-list details,
.mic-faq__list details {
    border-block-end: 1px solid var(--color-border);
}

.mic-details-list summary,
.mic-faq__list summary {
    min-height: 4.5rem;
    padding-block: var(--space-4);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.5rem;
    align-items: center;
    gap: var(--space-4);
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    list-style: none;
    cursor: pointer;
}

.mic-details-list summary::marker,
.mic-details-list summary::-webkit-details-marker,
.mic-faq__list summary::marker,
.mic-faq__list summary::-webkit-details-marker {
    content: "";
    display: none;
}

.mic-details-list summary > span:last-child,
.mic-faq__list summary > span:last-child {
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-cyan);
    font-size: var(--text-xl);
    font-weight: var(--font-weight-regular);
}

.mic-details-list details[open] summary > span:last-child,
.mic-faq__list details[open] summary > span:last-child {
    transform: rotate(45deg);
}

.mic-details-list details p,
.mic-faq__list details p {
    max-width: none;
    padding: var(--space-1) 4.25rem var(--space-6) 0;
    color: var(--color-text-secondary);
}

.mic-troubleshooting-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
    align-items: start;
    gap: clamp(var(--space-8), 7vw, var(--space-20));
}

.mic-troubleshooting-layout ol {
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
    counter-reset: troubleshooting;
    border-block-start: 1px solid var(--color-border);
}

.mic-troubleshooting-layout li {
    padding-block: var(--space-4);
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: var(--space-3);
    border-block-end: 1px solid var(--color-border);
    counter-increment: troubleshooting;
}

.mic-troubleshooting-layout li::before {
    content: counter(troubleshooting, decimal-leading-zero);
    color: var(--color-cyan);
    font-family: var(--font-measurement);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
}

.mic-troubleshooting-layout aside {
    padding-block: var(--space-6);
    border-block: 1px solid color-mix(in srgb, var(--color-cyan) 28%, var(--color-border));
}

.mic-troubleshooting-layout aside h3 {
    font-size: var(--text-2xl);
}

.mic-troubleshooting-layout aside p {
    margin-block-start: var(--space-4);
    color: var(--color-text-secondary);
}

.mic-limits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-12);
}

.mic-limits > div {
    padding-block: var(--space-6);
    border-block: 1px solid var(--color-border);
}

.mic-limits h3 {
    font-size: var(--text-2xl);
}

.mic-limits ul {
    margin: var(--space-5, 1.25rem) 0 0;
    padding-inline-start: 1.15rem;
}

.mic-limits li {
    color: var(--color-text-secondary);
}

.mic-limits li + li {
    margin-block-start: var(--space-3);
}

.mic-related-tools {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-block-start: 1px solid var(--color-border);
}

.mic-related-tools a {
    min-height: 9rem;
    padding: var(--space-6);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: start;
    gap: var(--space-3) var(--space-4);
    border-block-end: 1px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
}

.mic-related-tools a:not(:nth-child(4n)) {
    border-inline-end: 1px solid var(--color-border);
}

.mic-related-tools strong {
    font-family: var(--font-display);
    font-size: var(--text-lg);
}

.mic-related-tools span {
    grid-column: 1 / -1;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.mic-related-tools i {
    color: var(--color-cyan);
    font-style: normal;
    transition: transform var(--duration-fast) var(--ease-standard);
}

.mic-related-tools a:hover {
    background: color-mix(in srgb, var(--color-cyan) 4%, transparent);
}

.mic-related-tools a:hover i {
    transform: translateX(var(--space-1));
}

.mic-faq__list {
    columns: 2;
    column-gap: var(--space-12);
}

.mic-faq__list details {
    break-inside: avoid;
}

@media (max-width: 68rem) {
    .mic-tool {
        --mic-panel-columns: minmax(0, 1.45fr) minmax(17rem, 0.75fr);
    }

    .mic-console__controls {
        grid-template-columns: auto minmax(12rem, 1fr) auto;
    }

    .mic-button--reset {
        grid-column: 1;
        width: 100%;
    }

    .mic-button--report {
        grid-column: 2 / -1;
        width: 100%;
    }

    .mic-visuals {
        grid-template-columns: 1fr;
    }

    .mic-related-tools {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mic-related-tools a:not(:nth-child(4n)) {
        border-inline-end: 0;
    }

    .mic-related-tools a:nth-child(odd) {
        border-inline-end: 1px solid var(--color-border);
    }
}

@media (max-width: 56rem) {
    .mic-tool {
        --mic-panel-columns: 1fr;
    }

    .mic-console__header {
        align-items: flex-start;
    }

    .mic-console__body,
    .mic-secondary-tools,
    .mic-intro__layout,
    .mic-editorial-lead,
    .mic-recording-copy__layout,
    .mic-processing-layout,
    .mic-quiet-copy,
    .mic-problems-layout,
    .mic-troubleshooting-layout {
        grid-template-columns: 1fr;
    }

    .mic-diagnostics,
    .mic-quiet-reference {
        border-inline-start: 0;
        border-block-start: 1px solid var(--color-border);
    }

    .mic-problems-layout .mic-section-header {
        position: static;
    }
}

@media (max-width: 48rem) {
    .mic-console__controls {
        grid-template-columns: 1fr 1fr;
    }

    .mic-device {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .mic-button--primary,
    .mic-button--stop {
        width: 100%;
    }

    .mic-button--reset {
        grid-column: 1;
    }

    .mic-button--report {
        grid-column: 2;
    }

    .mic-split-copy,
    .mic-explain-rows article,
    .mic-steps,
    .mic-limits {
        grid-template-columns: 1fr;
    }

    .mic-explain-rows article {
        gap: var(--space-6);
    }

    .mic-explain-rows__visual {
        min-height: 7rem;
    }

    .mic-data-table thead {
        display: none;
    }

    .mic-data-table,
    .mic-data-table tbody,
    .mic-data-table tr,
    .mic-data-table th,
    .mic-data-table td {
        width: 100%;
        display: block;
    }

    .mic-data-table tr {
        padding-block: var(--space-5, 1.25rem);
        border-block-end: 1px solid var(--color-border);
    }

    .mic-data-table th,
    .mic-data-table td {
        padding: var(--space-2) 0;
        border: 0;
    }

    .mic-data-table th::before,
    .mic-data-table td::before {
        content: attr(data-label);
        margin-block-end: var(--space-1);
        display: block;
        color: var(--color-cyan);
        font-size: 0.68rem;
        font-weight: var(--font-weight-bold);
        letter-spacing: 0.07em;
        text-transform: uppercase;
    }

    .mic-processing-list > div {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .mic-faq__list {
        columns: 1;
    }
}

@media (max-width: 40rem) {
    .mic-hero {
        padding-block: var(--space-8) var(--space-5, 1.25rem);
    }

    .mic-tool {
        padding-block-end: var(--space-6);
    }

    .mic-console {
        border-radius: var(--radius-lg);
    }

    .mic-console__header {
        min-height: auto;
        flex-direction: column;
        gap: var(--space-4);
    }

    .mic-console__session-state {
        max-width: 100%;
    }

    .mic-console__session-state strong {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        line-height: 1.3;
    }

    .mic-console__controls,
    .mic-live-panel,
    .mic-diagnostics,
    .mic-recorder,
    .mic-quiet-reference {
        padding-inline: var(--space-4);
    }

    .mic-metrics {
        grid-template-columns: 1fr 1fr;
    }

    .mic-metric--primary {
        grid-column: 1 / -1;
        border-block-end: 1px solid var(--color-border);
    }

    .mic-metric:nth-child(2) {
        border-inline-start: 0;
    }

    .mic-level__label {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-1);
    }

    .mic-level__scale span:nth-child(even) {
        display: none;
    }

    .mic-readout figcaption {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 0;
    }

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

    .mic-noise-reference > div {
        grid-template-columns: 7rem minmax(3rem, 1fr);
    }

    .mic-noise-reference small {
        grid-column: 1 / -1;
    }

    .mic-related-tools {
        grid-template-columns: 1fr;
    }

    .mic-related-tools a:nth-child(odd) {
        border-inline-end: 0;
    }

    .mic-details-list details p,
    .mic-faq__list details p {
        padding-inline-end: 0;
    }

    .mic-section-header > p,
    .mic-editorial-lead p,
    .mic-split-copy p,
    .mic-recording-copy__layout > div > p,
    .mic-processing-layout > div > p,
    .mic-quiet-copy > div > p,
    .mic-troubleshooting-layout > div > p,
    .mic-explain-rows p {
        font-size: var(--text-base);
    }
}

@media (max-width: 24rem) {
    .mic-console__controls,
    .mic-recorder__actions {
        grid-template-columns: 1fr;
    }

    .mic-device,
    .mic-button--reset,
    .mic-button--report {
        grid-column: auto;
    }

    .mic-metric {
        padding-inline: var(--space-3);
    }
}

@media (hover: none) {
    .mic-button:hover:not(:disabled) {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mic-level__track > i,
    .mic-level__track > b,
    .mic-quiet-reference__gauge span,
    .mic-recorder__timeline > span,
    .mic-related-tools i {
        transition-duration: 0.01ms;
    }
}