.media-panel{padding:26px}.media-panel>.hint:last-child{margin:22px 0 0;line-height:1.8}.media-options{margin-top:18px}.audio-stage,.microphone-stage{display:flex;min-height:300px;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;margin:22px 0;background:radial-gradient(ellipse at center,rgba(214,207,194,.12),transparent 65%)}.media-state{font-size:clamp(19px,2.3vw,26px);font-weight:750;letter-spacing:-.04em}.audio-stage>.hint,.microphone-stage>.hint{margin:0 16px}.headphone-visual{position:relative;width:200px;height:152px;margin-bottom:12px}.headphone-band{position:absolute;left:28px;top:0;width:144px;height:130px;border:12px solid #303844;border-bottom:0;border-radius:90px 90px 0 0}.ear-cup{position:absolute;bottom:0;width:43px;height:78px;border:1px solid #9b9b96;border-radius:14px;background:linear-gradient(110deg,#efede7,#d8d5cd);display:grid;place-items:center;color:#4a515c;font:700 18px monospace;z-index:1}.ear-left{left:13px}.ear-right{right:13px}.audio-wave{position:absolute;left:66px;right:66px;bottom:25px;display:flex;align-items:center;justify-content:center;gap:4px;height:40px}.audio-wave i{width:3px;height:4px;background:#c1bdb5;border-radius:4px}.is-playing .audio-wave i{background:#f05b35;animation:lab-wave .7s ease-in-out infinite alternate}.is-playing .audio-wave i:nth-child(2n){animation-delay:.3s}.is-playing .audio-wave i:nth-child(3n){animation-delay:.15s}.sound-left .ear-left,.sound-right .ear-right,.sound-both .ear-cup,.sound-pan .ear-cup{border-color:#f05b35;color:#f05b35;box-shadow:0 0 35px #f05b3520}.audio-button-grid{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:10px;max-width:620px;margin:auto}.audio-button-grid .btn{justify-content:center}.volume-field{display:flex!important;flex-flow:row wrap!important;align-items:center;gap:10px;margin-left:auto;font-size:12px}.volume-field input{max-width:130px;accent-color:#f05b35;padding:0!important}.volume-field output{font:12px monospace;min-width:30px}.mic-icon{position:relative;width:70px;height:85px;margin:6px 0 10px}.mic-icon span{display:block;width:31px;height:52px;margin:0 auto;border-radius:20px;border:2px solid #73746e;background:repeating-linear-gradient(0deg,#e9e6df,#e9e6df 5px,#c4c1b9 5px,#c4c1b9 7px)}.mic-icon i{position:absolute;left:8px;top:28px;width:54px;height:39px;border:2px solid #73746e;border-top:0;border-radius:0 0 30px 30px}.mic-icon:before{content:'';position:absolute;left:34px;bottom:0;height:17px;width:2px;background:#73746e}.mic-icon:after{content:'';position:absolute;left:21px;bottom:0;height:2px;width:28px;background:#73746e}.mic-meter{width:min(430px,85%);height:15px;margin-top:8px;border-radius:3px;background:#e7e3dc;overflow:hidden;outline:1px solid #d5d0c8}.mic-meter span{display:block;height:100%;width:0;background:linear-gradient(90deg,#4775ce,#f05b35);transition:width .08s linear}.mic-readouts{width:min(430px,85%);display:flex;justify-content:space-between;gap:10px;color:#797f85;font-size:12px}.mic-readouts b{color:#f05b35;font-weight:500}.is-warning{color:#ba4022!important}.recording-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}.recording-slot{background:#faf8f4;border:1px solid #e0dcd4;border-radius:12px;padding:20px;min-width:0}.recording-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:#7c807f}.recording-slot p{font-size:14px;color:#3c444b;margin:17px 0}.recording-slot audio{display:block;width:100%;height:36px;margin-top:18px;color-scheme:light}.recording-slot audio[hidden]{display:none}.display-swatches{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 18px}.display-swatch{display:flex;align-items:center;gap:7px;padding:9px 12px;background:#ffffff;border:1px solid #ddd9d1;border-radius:8px;color:#5b6167;cursor:pointer;font:inherit;font-size:12px}.display-swatch span{height:13px;width:13px;border-radius:50%;border:1px solid #00000020}.display-swatch.active{border-color:#f05b35;color:#f05b35;background:#fff2ec}.display-preview{position:relative;height:350px;border:1px solid #b5b5af;border-radius:12px;overflow:hidden;background:#000}.display-preview:focus-visible{outline:2px solid #f05b35;outline-offset:4px}.display-pattern{position:absolute;inset:0}.display-grid-guides{position:absolute;inset:0;border:3px solid #e5ebf3;background-image:linear-gradient(#a8c4e630 1px,transparent 1px),linear-gradient(90deg,#a8c4e630 1px,transparent 1px);background-size:40px 40px;color:#e5ebf3}.display-grid-guides .corner{position:absolute;font:10px monospace;padding:10px}.top-left{top:0;left:0}.top-right{top:0;right:0}.bottom-left{bottom:0;left:0}.bottom-right{bottom:0;right:0}.display-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:30px monospace}.display-fullscreen-toolbar{display:none}.display-preview:fullscreen{height:100%;width:100%;border:0;border-radius:0}.display-preview:fullscreen .display-fullscreen-toolbar{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:#faf8f1ec;border:1px solid #aaa69e;border-radius:12px;padding:10px;color:#303842;font-size:13px;white-space:nowrap;opacity:.15;transition:opacity .2s}.display-preview:fullscreen .display-fullscreen-toolbar:hover,.display-preview:fullscreen .display-fullscreen-toolbar:focus-within{opacity:1}.display-fullscreen-toolbar .btn{padding:10px 13px}.display-fullscreen-toolbar [data-pattern-label]{min-width:85px;text-align:center}@keyframes lab-wave{from{height:5px}to{height:30px}}@media(prefers-reduced-motion:reduce){.is-playing .audio-wave i{animation:none;height:19px}.mic-meter span{transition:none}}@media(max-width:640px){.media-panel{padding:18px}.recording-grid{grid-template-columns:1fr}.volume-field{margin-left:0}.display-preview{height:280px}.audio-button-grid{gap:6px}.audio-button-grid .btn{padding:12px 8px;font-size:12px}.display-fullscreen-toolbar{max-width:calc(100% - 20px);gap:4px!important}.display-fullscreen-toolbar .btn{padding:8px!important}.display-fullscreen-toolbar [data-pattern-label]{min-width:50px}}

.audio-stage,.microphone-stage{background:#f7f5f1;border-color:#e3dfd7;padding:35px 24px}
.media-state{color:#1e2530;font-weight:700}
.headphone-band{box-shadow:inset 0 3px 0 #838a92}
.ear-cup{box-shadow:0 8px 12px #2b26200e}
.sound-left .ear-left,.sound-right .ear-right,.sound-both .ear-cup,.sound-pan .ear-cup{background:#f05b35;border-color:#c94a29;color:#fff}
.microphone-stage .mic-icon{transform:scale(.7);height:68px;margin:-8px 0 -8px}
.mic-signal-panel{width:100%;max-width:880px;background:#fff;border:1px solid #e5e0d8;border-radius:12px;padding:16px 20px 12px;margin:14px 0 6px;text-align:left}
.mic-signal-heading,.mic-signal-values{display:flex;justify-content:space-between;align-items:center;gap:14px;color:#797b79;font:10px var(--mono,monospace);letter-spacing:.4px}
.mic-signal-heading>span:first-child{color:#343c44}
.mic-waveform{display:block;width:100%;height:144px;margin:14px 0;overflow:visible}
.mic-wave-grid{fill:none;stroke:#ece8e1;stroke-width:1;vector-effect:non-scaling-stroke}
.mic-wave-line{fill:none;stroke:#f05b35;stroke-width:1.6;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.mic-signal-values b{color:#333d46;font-weight:500}
.mic-meter{height:9px;border-radius:6px;outline:none}
.mic-readouts{font-size:11px}
@media(max-width:640px){.microphone-stage{padding:22px 12px}.mic-signal-panel{padding:12px 10px}.mic-signal-heading{font-size:9px;letter-spacing:0}.mic-signal-values{gap:7px;font-size:9px}}