.media-main { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.media-hero { min-height: 440px; display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: center; gap: 65px; padding: 66px 0 58px; }
.media-hero h1 { max-width: 780px; margin: 24px 0 18px; font-size: clamp(46px, 6.6vw, 76px); line-height: 1.02; letter-spacing: -.065em; }
.media-hero h1 em { color: var(--coral); font-family: Georgia, "Songti SC", serif; font-weight: 500; }
.media-hero p { max-width: 690px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.75; }
.device-hero-art { height: 245px; position: relative; display: grid; place-items: center; }
.art-screen { width: 265px; height: 166px; position: relative; display: grid; place-items: center; border: 9px solid #242321; border-radius: 25px; background: linear-gradient(145deg, #dcebe3, #accbbc); box-shadow: 0 26px 50px rgba(43, 54, 47, .17); transform: rotate(2deg); }
.art-screen::before { content: ""; width: 104px; height: 104px; border-radius: 50%; background: #fffefa; box-shadow: inset 0 0 0 18px #85b29e; }
.art-screen i { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #242321; }
.art-screen span { position: absolute; left: 50%; bottom: -40px; width: 96px; height: 34px; border-bottom: 9px solid #242321; transform: translateX(-50%); }
.device-hero-art > b { position: absolute; right: 9px; top: 22px; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 21px; color: #fff; background: var(--coral); font-size: 27px; box-shadow: 0 14px 28px rgba(255, 107, 74, .25); transform: rotate(-7deg); }
.device-hero-art > em { position: absolute; left: 5px; bottom: 24px; width: 58px; height: 58px; border: 10px solid #e0b673; border-radius: 50%; }
.media-workbench { margin-bottom: 34px; padding: 22px; border: 1px solid rgba(117,108,95,.2); border-radius: 28px; background: rgba(255,254,250,.82); box-shadow: 0 24px 64px rgba(58,50,39,.09); backdrop-filter: blur(12px); }
.workbench-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 4px 3px 18px; }
.workbench-heading > div:first-child { display: flex; align-items: baseline; gap: 12px; }
.workbench-heading > div:first-child > span { color: var(--coral-dark); font-size: 10px; font-weight: 850; letter-spacing: .12em; }
.workbench-heading h2 { margin: 0; font-size: 18px; letter-spacing: -.025em; }
.local-note { display: inline-flex; align-items: center; gap: 7px; color: #8d877e; font-size: 10px; }
.local-note i { width: 6px; height: 6px; border-radius: 50%; background: #58a47f; }
.test-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; }
.test-card { min-width: 0; padding: 20px; border: 1px solid #e3ddd4; border-radius: 20px; background: #fff; }
.camera-test, .keyboard-test, .display-test { grid-column: 1 / -1; }
.test-card-heading { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 18px; }
.test-number { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: #315f4d; background: #dcebe3; font: italic 700 12px Georgia, serif; }
.test-card-heading h3 { margin: 0 0 4px; font-size: 15px; }
.test-card-heading p { margin: 0; color: #8a847c; font-size: 10px; line-height: 1.5; }
.test-state { padding: 5px 8px; border-radius: 999px; color: #8b857c; background: #f1eee8; font-size: 9px; font-weight: 800; white-space: nowrap; }
.test-state.is-ready { color: #25704f; background: #e1f1e8; }
.camera-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(270px, .75fr); gap: 18px; }
.video-stage, .recording-stage { aspect-ratio: 16/9; position: relative; overflow: hidden; border-radius: 16px; background: #242321; }
.video-stage video, .recording-stage video { width: 100%; height: 100%; display: block; object-fit: contain; }
.stage-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; color: #b8b3aa; background: radial-gradient(circle at 50% 42%, #3a3936, #242321 62%); }
.stage-empty[hidden] { display: none; }
.stage-empty b { width: 58px; height: 42px; display: grid; place-items: center; border: 2px solid #77736d; border-radius: 12px; color: #ddd9d1; font-size: 11px; }
.stage-empty span { font-size: 10px; }
.test-controls { display: flex; flex-direction: column; }
.test-controls label, .select-control, .recorder-options label { display: grid; gap: 7px; color: #59544d; font-size: 10px; font-weight: 800; }
.test-card select, .recorder-options select { width: 100%; min-height: 39px; border: 1px solid #d9d3c9; border-radius: 10px; padding: 0 10px; color: var(--ink); background: #faf8f3; outline: 0; }
.test-card select:focus, .recorder-options select:focus { border-color: #70a18a; box-shadow: 0 0 0 3px rgba(88,144,116,.11); }
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 13px 0; }
.metric-grid div { min-height: 58px; padding: 10px; border-radius: 11px; background: #f4f1eb; }
.metric-grid span { display: block; margin-bottom: 7px; color: #969087; font-size: 8px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.metric-grid strong { font-size: 11px; }
.action-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.action-row button, .speaker-buttons button, .screen-swatches button, .recording-actions button, .download-recording { min-height: 39px; border: 1px solid #d9d3c9; border-radius: 10px; padding: 0 13px; color: #615c54; background: #f5f2ec; font-size: 10px; font-weight: 800; cursor: pointer; }
.action-row button:hover:not(:disabled), .speaker-buttons button:hover, .screen-swatches button:hover { border-color: #aaa398; background: #fff; }
.action-row button:disabled, .recording-actions button:disabled { cursor: not-allowed; opacity: .5; }
.primary-media-action, .action-row .primary-media-action, .speaker-buttons .primary-media-action, .recording-actions .primary-media-action, .download-recording { border-color: #242321; color: #fff; background: #242321; }
.primary-media-action:hover:not(:disabled), .download-recording:hover { color: #fff; background: #3a3835; }
.inline-message { min-height: 16px; margin: 10px 0 0; color: #8b857d; font-size: 9px; line-height: 1.5; }
.microphone-test, .speaker-test { min-height: 390px; }
.microphone-meter { margin: 14px 0; }
.meter-label { display: flex; justify-content: space-between; margin-bottom: 7px; color: #79736b; font-size: 9px; }
.meter-track { height: 8px; overflow: hidden; border-radius: 99px; background: #e7e2d9; }
.meter-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: #4a9270; transition: width .08s linear; }
.meter-track i[data-state="loud"] { background: var(--coral); }
#microphoneWaveform { width: 100%; height: 110px; display: block; margin-top: 10px; border-radius: 12px; background: #f5f2ec; }
#microphonePlayback { width: 100%; height: 40px; margin-top: 12px; }
.speaker-visual { min-height: 145px; display: grid; grid-template-columns: 1fr 1.4fr 1fr; align-items: center; justify-items: center; margin: 8px 0 12px; border-radius: 14px; color: #827c73; background: #f5f2ec; font-size: 9px; font-weight: 850; }
.speaker-visual > div { display: flex; align-items: center; justify-content: center; gap: 8px; }
.speaker-visual i { display: block; width: 5px; height: 34px; border-radius: 99px; background: #6aa087; }
.speaker-visual i:nth-child(2) { height: 70px; background: var(--coral); }
.speaker-visual i:nth-child(3) { height: 50px; }
.speaker-buttons { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; }
.keyboard-stats { display: grid; justify-items: end; gap: 3px; }
.keyboard-stats strong { color: var(--coral-dark); font-size: 15px; }
.keyboard-stats span { color: #928c83; font-size: 8px; }
.keyboard-board { display: grid; gap: 5px; overflow-x: auto; padding: 14px; border-radius: 15px; background: #292825; }
.keyboard-row { min-width: 800px; display: flex; justify-content: center; gap: 5px; }
.keyboard-row span { min-width: 38px; height: 35px; display: grid; place-items: center; border: 1px solid #514f4a; border-bottom-width: 3px; border-radius: 7px; color: #bcb7ae; background: #343330; font-size: 8px; font-weight: 750; transition: .08s; }
.keyboard-row span.wide-key { min-width: 66px; }
.keyboard-row span[data-code="Space"] { min-width: 255px; }
.keyboard-row span.tested { color: #d9f2e3; border-color: #4b896e; background: #315f4d; }
.keyboard-row span.pressed { color: #fff; border-color: #ff8c72; background: var(--coral); transform: translateY(2px); }
.screen-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; }
.screen-swatches button { height: 68px; display: grid; grid-template-columns: 25px 1fr; align-items: center; gap: 7px; text-align: left; }
.screen-swatches i { width: 25px; height: 25px; border: 1px solid #ccc6bc; border-radius: 7px; background: #000; }
.screen-swatches [data-screen-mode="white"] i { background: #fff; }.screen-swatches [data-screen-mode="red"] i { background: #f33; }.screen-swatches [data-screen-mode="green"] i { background: #23aa58; }.screen-swatches [data-screen-mode="blue"] i { background: #2878eb; }.screen-swatches [data-screen-mode="gradient"] i { background: linear-gradient(135deg,#000,#fff); }
.screen-test-overlay { position: fixed; inset: 0; z-index: 1000; cursor: none; }
.screen-test-overlay[hidden] { display: none; }
.screen-test-overlay[data-mode="black"] { background: #000; }.screen-test-overlay[data-mode="white"] { background: #fff; }.screen-test-overlay[data-mode="red"] { background: #f00; }.screen-test-overlay[data-mode="green"] { background: #0f0; }.screen-test-overlay[data-mode="blue"] { background: #00f; }.screen-test-overlay[data-mode="gradient"] { background: linear-gradient(90deg,#000 0%,#fff 50%,#000 100%); }
.screen-test-overlay button { position: absolute; right: 18px; top: 18px; border: 0; border-radius: 999px; padding: 10px 14px; color: #fff; background: rgba(0,0,0,.64); cursor: pointer; }
.screen-test-overlay span { position: absolute; left: 50%; bottom: 20px; padding: 8px 12px; border-radius: 999px; color: #fff; background: rgba(0,0,0,.55); font-size: 10px; transform: translateX(-50%); }
.media-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0 86px; }
.media-benefits article { min-height: 145px; padding: 21px; border: 1px solid rgba(117,108,95,.18); border-radius: 17px; background: rgba(255,254,250,.56); }
.media-benefits article > span { color: var(--coral-dark); font: italic 700 11px Georgia, serif; }
.media-benefits strong { display: block; margin: 18px 0 7px; font-size: 14px; }
.media-benefits p { margin: 0; color: #837d75; font-size: 10px; line-height: 1.6; }

.recorder-hero-art { width: 310px; height: 230px; position: relative; display: grid; place-items: center; }
.recorder-hero-art > div { width: 272px; aspect-ratio: 16/10; position: relative; display: grid; place-items: center; overflow: hidden; border: 9px solid #242321; border-radius: 25px; color: #fff; background: linear-gradient(145deg, #57534d, #242321); box-shadow: 0 26px 50px rgba(43, 40, 35, .2); transform: rotate(-2deg); }
.recorder-hero-art > div::before { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; background: linear-gradient(135deg, rgba(255,255,255,.07), transparent 55%); }
.recorder-hero-art > div span { z-index: 1; display: inline-flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 900; letter-spacing: .04em; }
.recorder-hero-art > div span::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 7px rgba(255,107,74,.14); }
.recorder-hero-art > div i { position: absolute; right: 27px; bottom: 26px; width: 54px; height: 39px; border: 3px solid #fff; border-radius: 10px; background: #8ab39f; }
.recorder-hero-art > b { position: absolute; left: -2px; bottom: 3px; padding: 12px 18px; border-radius: 13px; color: #fff; background: var(--coral); font: 800 13px/1 ui-monospace, monospace; box-shadow: 0 14px 28px rgba(255,107,74,.25); transform: rotate(5deg); }
.record-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(255,107,74,.12); }
.recorder-layout { display: grid; grid-template-columns: minmax(285px, .72fr) minmax(0, 1.28fr); gap: 14px; }
.recorder-settings, .recorder-preview { min-width: 0; padding: 20px; border: 1px solid #e3ddd4; border-radius: 20px; background: #fff; }
.setup-heading, .preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.setup-heading { justify-content: flex-start; }
.setup-heading > span { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; color: #8f402e; background: #ffe0d8; font: italic 700 12px Georgia, serif; }
.setup-heading h3, .preview-heading h3 { margin: 0 0 4px; font-size: 15px; }
.setup-heading p { margin: 0; color: #8a847c; font-size: 9px; line-height: 1.5; }
.preview-heading span, .result-copy > span { color: var(--coral-dark); font-size: 9px; font-weight: 850; letter-spacing: .1em; }
.toggle-list { display: grid; gap: 8px; }
.toggle-list label { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border: 1px solid #e2ddd5; border-radius: 12px; background: #faf8f4; cursor: pointer; }
.toggle-list label > span { min-width: 0; display: grid; gap: 4px; }
.toggle-list b { color: #504b44; font-size: 10px; }
.toggle-list small { color: #918b82; font-size: 8px; line-height: 1.4; }
.toggle-list input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-list label > i { width: 34px; height: 20px; flex: 0 0 auto; position: relative; border-radius: 99px; background: #d4cfc7; transition: .18s; }
.toggle-list label > i::after { content: ""; width: 14px; height: 14px; position: absolute; left: 3px; top: 3px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.18); transition: .18s; }
.toggle-list input:checked + i { background: #5c9a7c; }
.toggle-list input:checked + i::after { transform: translateX(14px); }
.toggle-list input:focus-visible + i { outline: 3px solid rgba(88,144,116,.2); outline-offset: 2px; }
.toggle-list input:disabled + i { opacity: .55; }
.recorder-options { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 14px 0; }
.start-recording-button { width: 100%; min-height: 47px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 12px; color: #fff; background: var(--coral); font-size: 11px; font-weight: 850; cursor: pointer; box-shadow: 0 12px 24px rgba(255,107,74,.2); }
.start-recording-button:hover:not(:disabled) { background: #ee6042; }
.start-recording-button:disabled { cursor: not-allowed; opacity: .58; }
.start-recording-button i { width: 10px; height: 10px; border: 2px solid currentColor; border-radius: 50%; }
.recording-note { margin: 11px 0 0; color: #918b82; font-size: 8px; line-height: 1.5; }
.recording-clock { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 999px; background: #f3f0ea; }
.recording-clock i { width: 7px; height: 7px; border-radius: 50%; background: #aaa49c; }
.recording-clock i[data-state="recording"] { background: var(--coral); animation: recorder-pulse 1.2s infinite; }
.recording-clock i[data-state="paused"] { background: #e0b05e; }
.recording-clock strong { font: 800 10px/1 ui-monospace, monospace; }
@keyframes recorder-pulse { 50% { box-shadow: 0 0 0 5px rgba(255,107,74,0); opacity: .55; } }
.recording-stage { min-height: 250px; }
.recording-stage .stage-empty b { color: #fff; border-color: #817c74; }
.countdown { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; color: #fff; background: rgba(24,23,21,.72); font: 800 72px/1 Georgia, serif; backdrop-filter: blur(3px); }
.countdown[hidden] { display: none; }
.recording-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; }
.recording-actions .stop-recording-button { color: #fff; border-color: var(--coral); background: var(--coral); }
.capture-status { display: flex; justify-content: space-between; gap: 14px; margin-top: 11px; color: #827c73; font-size: 8px; line-height: 1.4; }
.capture-status em { color: #aaa39a; font-style: normal; text-align: right; }
.inline-message[data-state="error"] { color: #c24831; }
.inline-message[data-state="warning"] { color: #a66b18; }
.inline-message[data-state="complete"] { color: #26714f; }
.recording-result { display: grid; grid-template-columns: .65fr 1.35fr; align-items: center; gap: 20px; margin-top: 14px; padding: 20px; border: 1px solid #d9e5dd; border-radius: 20px; background: #f5faf7; }
.recording-result[hidden] { display: none; }
.result-copy h3 { margin: 8px 0 6px; font-size: 18px; }
.result-copy p { margin: 0 0 14px; color: #7e786f; font-size: 9px; line-height: 1.6; }
.download-recording { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.result-copy button { display: block; margin-top: 9px; padding: 0; border: 0; color: #847e76; background: transparent; font-size: 9px; text-decoration: underline; cursor: pointer; }
.recording-result video { width: 100%; max-height: 430px; border-radius: 14px; background: #242321; }

@media (max-width: 980px) {
  .media-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 55px; }
  .device-hero-art, .recorder-hero-art { display: none; }
  .test-grid { grid-template-columns: 1fr; }
  .camera-test, .keyboard-test, .display-test { grid-column: auto; }
  .camera-layout { grid-template-columns: 1fr; }
  .screen-swatches { grid-template-columns: repeat(3, 1fr); }
  .recorder-layout { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .media-main { width: min(100% - 28px, 1180px); }
  .media-hero { padding: 42px 0; }
  .media-hero h1 { font-size: clamp(39px, 12vw, 58px); }
  .media-workbench { padding: 13px; border-radius: 20px; }
  .workbench-heading { align-items: flex-start; flex-direction: column; }
  .workbench-heading > div:first-child { display: grid; }
  .test-card { padding: 15px; }
  .test-card-heading { grid-template-columns: auto 1fr; }
  .test-card-heading > :last-child { grid-column: 2; justify-self: start; }
  .microphone-test, .speaker-test { min-height: 0; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .screen-swatches { grid-template-columns: 1fr 1fr; }
  .media-benefits { grid-template-columns: 1fr; }
  .recorder-settings, .recorder-preview { padding: 15px; }
  .recorder-options { grid-template-columns: 1fr 1fr; }
  .recording-stage { min-height: 190px; }
  .recording-result { grid-template-columns: 1fr; padding: 15px; }
}

@media (max-width: 430px) {
  .recorder-options { grid-template-columns: 1fr; }
  .capture-status { display: grid; }
  .capture-status em { text-align: left; }
}