.audio-main { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.audio-hero { min-height: 430px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: center; gap: 68px; padding: 62px 0 54px; }
.audio-hero h1 { max-width: 790px; margin: 24px 0 18px; font-size: clamp(48px, 6.6vw, 77px); line-height: 1.01; letter-spacing: -.068em; }
.audio-hero h1 em { color: #8d5ec7; font-family: Georgia, "Songti SC", serif; font-weight: 500; }
.audio-hero p { max-width: 710px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.72; }
.audio-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: #8d5ec7; box-shadow: 0 0 0 5px rgba(141,94,199,.12); }
.audio-hero-art { height: 245px; position: relative; display: grid; place-items: center; }
.audio-hero-art::before { content: ""; width: 235px; height: 170px; position: absolute; border-radius: 28px; background: #dcd0ee; transform: rotate(-7deg); }
.hero-wave { width: 255px; height: 174px; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 9px; border: 9px solid #242321; border-radius: 25px; background: #2c2634; box-shadow: 0 26px 50px rgba(50,39,63,.2); transform: rotate(3deg); }
.hero-wave i { width: 8px; border-radius: 99px; background: #b99adf; }
.hero-wave i:nth-child(1), .hero-wave i:nth-child(9) { height: 24px; }
.hero-wave i:nth-child(2), .hero-wave i:nth-child(8) { height: 51px; }
.hero-wave i:nth-child(3), .hero-wave i:nth-child(7) { height: 83px; }
.hero-wave i:nth-child(4), .hero-wave i:nth-child(6) { height: 112px; background: #ff8268; }
.hero-wave i:nth-child(5) { height: 72px; background: #f4df8d; }
.audio-hero-art > span { z-index: 2; position: absolute; left: 8px; bottom: 17px; padding: 10px 13px; border-radius: 10px; color: #fff; background: #8d5ec7; font: 800 10px/1 ui-monospace, monospace; box-shadow: 0 10px 22px rgba(141,94,199,.24); transform: rotate(-5deg); }
.audio-hero-art > b { z-index: 2; width: 45px; height: 45px; display: grid; place-items: center; position: absolute; right: 3px; top: 22px; border-radius: 13px; color: #5d4722; background: #f4df8d; font-size: 19px; transform: rotate(7deg); }

.audio-workbench { margin-bottom: 34px; padding: 22px; border: 1px solid rgba(117,108,95,.2); border-radius: 28px; background: rgba(255,254,250,.86); box-shadow: 0 24px 64px rgba(58,50,39,.09); backdrop-filter: blur(12px); }
.audio-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 4px 3px 18px; }
.audio-heading > div:first-child { display: flex; align-items: baseline; gap: 12px; }
.audio-heading > div:first-child > span { color: #8d5ec7; font-size: 10px; font-weight: 850; letter-spacing: .12em; }
.audio-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; }

.audio-source { padding: 18px; border: 1px solid #e1dcd3; border-radius: 19px; background: #fff; }
.source-tabs { width: max-content; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 13px; padding: 4px; border-radius: 11px; background: #efebe5; }
.source-tabs button { min-width: 112px; min-height: 36px; border: 0; border-radius: 8px; color: #7d766e; background: transparent; font-size: 9px; font-weight: 850; cursor: pointer; }
.source-tabs button.active { color: #fff; background: #302a38; box-shadow: 0 7px 15px rgba(48,42,56,.15); }
.source-panel[hidden] { display: none; }
.audio-drop-zone { width: 100%; min-height: 164px; display: grid; place-items: center; align-content: center; gap: 6px; border: 1px dashed #c8b9d9; border-radius: 15px; color: #4d4655; background: #faf8fc; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.audio-drop-zone:hover, .audio-drop-zone.dragging { border-color: #8d5ec7; background: #f5f0fa; transform: translateY(-1px); }
.audio-upload-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 5px; border-radius: 12px; color: #fff; background: #8d5ec7; font-size: 18px; }
.audio-drop-zone strong { font-size: 13px; }.audio-drop-zone small { color: #918a96; font-size: 9px; }.audio-drop-zone em { margin-top: 7px; padding: 9px 13px; border-radius: 8px; color: #fff; background: #302a38; font-size: 9px; font-style: normal; font-weight: 800; }
.voice-recorder { min-height: 164px; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 25px; border-radius: 15px; background: #faf8fc; }
.record-orb { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: #eedbd7; }
.record-orb i { width: 17px; height: 17px; border-radius: 50%; background: #df654d; }
.record-orb.recording { animation: recordPulse 1.6s ease-in-out infinite; }.record-orb.recording i { border-radius: 4px; }
@keyframes recordPulse { 50% { box-shadow: 0 0 0 10px rgba(223,101,77,.11); } }
.voice-recorder > div:nth-child(2) { min-width: 210px; display: grid; gap: 5px; }.voice-recorder strong { font: 850 24px/1 ui-monospace, monospace; }.voice-recorder span { color: #8a838c; font-size: 9px; }
.voice-recorder button { min-height: 39px; border: 1px solid #d8d0dd; border-radius: 9px; padding: 0 13px; color: #6f6675; background: #fff; font-size: 9px; font-weight: 850; cursor: pointer; }
.voice-recorder .record-button { color: #fff; border-color: #8d5ec7; background: #8d5ec7; }.voice-recorder button:disabled { opacity: .45; cursor: not-allowed; }
.audio-message { min-height: 15px; margin: 10px 2px 0; color: #8b857d; font-size: 9px; line-height: 1.5; }
.audio-message[data-state="error"] { color: #c24831; }.audio-message[data-state="success"] { color: #26714f; }.audio-message[data-state="working"] { color: #7652a5; }

.audio-editor { margin-top: 14px; }.audio-editor[hidden] { display: none; }
.audio-file-bar { display: flex; align-items: center; gap: 20px; padding: 14px 16px; border: 1px solid #e1dcd3; border-radius: 14px; background: #f6f3ee; }
.audio-file-bar > div:first-child { min-width: 220px; display: grid; gap: 5px; }.audio-file-bar > div:first-child span { color: #8d5ec7; font-size: 8px; font-weight: 850; letter-spacing: .12em; }.audio-file-bar > div:first-child strong { max-width: 270px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.audio-file-metrics { flex: 1; display: flex; justify-content: center; gap: 27px; }.audio-file-metrics span { display: grid; gap: 3px; color: #958f87; font-size: 8px; }.audio-file-metrics b { color: #4e4944; font-size: 10px; }
.audio-file-bar > button { border: 0; padding: 8px; color: #8d5ec7; background: transparent; font-size: 9px; font-weight: 800; cursor: pointer; }
.waveform-card { margin-top: 14px; padding: 20px; border-radius: 18px; color: #fff; background: #2d2933; }
.waveform-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 17px; }
.waveform-heading > div:first-child span, .audio-section-heading span { color: #c0a2e2; font-size: 8px; font-weight: 850; letter-spacing: .12em; }.waveform-heading h3 { margin: 5px 0 0; font-size: 15px; }
.play-clock { display: flex; align-items: baseline; gap: 6px; font: 750 10px/1 ui-monospace, monospace; }.play-clock strong { color: #f7e7a5; font-size: 14px; }.play-clock em { color: #9e98a4; font-style: normal; }
#audioWaveform { width: 100%; height: 220px; display: block; border-radius: 11px; background: #25222b; cursor: crosshair; }
.range-stack { height: 22px; position: relative; margin: -2px 0 7px; }
.range-stack input { width: 100%; height: 22px; position: absolute; inset: 0; margin: 0; pointer-events: none; appearance: none; background: transparent; }
.range-stack input::-webkit-slider-thumb { width: 16px; height: 16px; border: 3px solid #2d2933; border-radius: 50%; background: #c0a2e2; cursor: ew-resize; pointer-events: auto; appearance: none; }
.range-stack #selectionEndRange::-webkit-slider-thumb { background: #ff8268; }
.range-stack input::-moz-range-thumb { width: 10px; height: 10px; border: 3px solid #2d2933; border-radius: 50%; background: #c0a2e2; cursor: ew-resize; pointer-events: auto; }.range-stack #selectionEndRange::-moz-range-thumb { background: #ff8268; }
.selection-controls { display: grid; grid-template-columns: auto auto 150px 150px minmax(90px, 1fr); align-items: end; gap: 8px; }
.selection-controls button { min-height: 38px; border: 1px solid #57515e; border-radius: 9px; padding: 0 12px; color: #d9d2df; background: #3b3642; font-size: 9px; font-weight: 800; cursor: pointer; }.selection-controls .play-selection { color: #2d2933; border-color: #f4df8d; background: #f4df8d; }.selection-controls button:disabled { opacity: .45; cursor: not-allowed; }
.selection-controls label { display: grid; gap: 5px; color: #aaa3af; font-size: 8px; }.selection-controls input { width: 100%; min-width: 0; min-height: 38px; border: 1px solid #514b57; border-radius: 9px; padding: 0 9px; color: #fff; background: #25222b; font: 9px ui-monospace, monospace; }
.selection-controls > div { display: grid; justify-content: end; gap: 5px; text-align: right; }.selection-controls > div span { color: #918b96; font-size: 8px; }.selection-controls > div strong { color: #f4df8d; font: 800 13px ui-monospace, monospace; }

.audio-options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.audio-effects, .audio-export { min-width: 0; padding: 20px; border: 1px solid #e1dcd3; border-radius: 18px; background: #fff; }
.audio-section-heading { margin-bottom: 20px; }.audio-section-heading span { color: #8d5ec7; }.audio-section-heading h3 { margin: 5px 0 0; font-size: 15px; }
.audio-effects > label:not(.mono-option) { display: grid; gap: 9px; margin-top: 17px; }.audio-effects > label > span { display: flex; justify-content: space-between; gap: 10px; font-size: 9px; }.audio-effects > label > span em { color: #8d5ec7; font-style: normal; font-weight: 800; }.audio-effects input[type="range"] { width: 100%; accent-color: #8d5ec7; }
.mono-option { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 20px; padding-top: 18px; border-top: 1px solid #ebe7e0; cursor: pointer; }.mono-option > span { display: grid !important; justify-content: initial !important; gap: 4px; }.mono-option small { color: #948e86; font-size: 8px; }.mono-option input { position: absolute; opacity: 0; }.mono-option i { width: 38px; height: 21px; position: relative; border-radius: 99px; background: #d9d4cd; transition: background .2s; }.mono-option i::after { content: ""; width: 15px; height: 15px; position: absolute; left: 3px; top: 3px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.16); transition: transform .2s; }.mono-option input:checked + i { background: #8d5ec7; }.mono-option input:checked + i::after { transform: translateX(17px); }
.export-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.export-options label { display: grid; gap: 7px; color: #5e5952; font-size: 9px; font-weight: 800; }.export-options select { width: 100%; min-height: 42px; border: 1px solid #dcd6cd; border-radius: 9px; padding: 0 10px; color: #4e4944; background: #f7f5f1; font-size: 9px; }
.export-audio-button { width: 100%; min-height: 48px; margin-top: 18px; border: 0; border-radius: 10px; color: #fff; background: #8d5ec7; box-shadow: 0 10px 21px rgba(141,94,199,.2); font-size: 10px; font-weight: 850; cursor: pointer; }.export-audio-button:hover { background: #7b4eb3; }.export-audio-button:disabled { opacity: .55; cursor: wait; }
.audio-progress { display: grid; gap: 7px; margin-top: 13px; }.audio-progress[hidden] { display: none; }.audio-progress > span { display: flex; justify-content: space-between; color: #756e78; font-size: 8px; }.audio-progress em { font-style: normal; }.audio-progress > div { height: 5px; overflow: hidden; border-radius: 99px; background: #e7e1eb; }.audio-progress i { width: 0; height: 100%; display: block; border-radius: inherit; background: #8d5ec7; transition: width .15s; }
.encoder-credit { margin: 10px 0 0; color: #aaa39c; font-size: 7px; text-align: center; }.encoder-credit a { color: inherit; }
.audio-result { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 440px); align-items: center; gap: 25px; margin-top: 14px; padding: 22px; border: 1px solid #cce0d7; border-radius: 18px; background: #eef7f3; }.audio-result[hidden] { display: none; }.audio-result > div > span { color: #3b8769; font-size: 8px; font-weight: 850; letter-spacing: .12em; }.audio-result h3 { margin: 6px 0; font-size: 16px; }.audio-result p { margin: 0 0 15px; color: #73837c; font-size: 9px; }.audio-result a, .audio-result button { min-height: 37px; display: inline-flex; align-items: center; border: 0; border-radius: 8px; padding: 0 12px; font-size: 9px; font-weight: 800; text-decoration: none; cursor: pointer; }.audio-result a { color: #fff; background: #34785e; }.audio-result button { color: #6f7d77; background: transparent; }.audio-result audio { width: 100%; }
.audio-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0 86px; }.audio-benefits article { min-height: 145px; padding: 21px; border: 1px solid rgba(117,108,95,.18); border-radius: 17px; background: rgba(255,254,250,.56); }.audio-benefits article > span { color: #8d5ec7; font: italic 700 11px Georgia, serif; }.audio-benefits strong { display: block; margin: 18px 0 7px; font-size: 14px; }.audio-benefits p { margin: 0; color: #837d75; font-size: 10px; line-height: 1.6; }

@media (max-width: 980px) {
  .audio-hero { min-height: 0; grid-template-columns: 1fr; padding-top: 55px; }.audio-hero-art { display: none; }
  .audio-file-bar { align-items: flex-start; flex-wrap: wrap; }.audio-file-metrics { order: 3; width: 100%; justify-content: flex-start; }.audio-file-bar > button { margin-left: auto; }
  .selection-controls { grid-template-columns: auto auto 1fr 1fr; }.selection-controls > div { grid-column: 1 / -1; justify-content: start; text-align: left; }
}
@media (max-width: 720px) {
  .audio-main { width: min(100% - 28px, 1180px); }.audio-hero { padding: 42px 0; }.audio-hero h1 { font-size: clamp(40px, 12vw, 58px); }
  .audio-workbench { padding: 13px; border-radius: 20px; }.audio-heading { align-items: flex-start; flex-direction: column; }.audio-heading > div:first-child { display: grid; }
  .audio-source { padding: 13px; }.source-tabs { width: 100%; }.source-tabs button { min-width: 0; }
  .audio-drop-zone { min-height: 180px; padding: 22px 12px; }.audio-drop-zone small { max-width: 270px; line-height: 1.5; }
  .voice-recorder { flex-wrap: wrap; text-align: center; }.voice-recorder > div:nth-child(2) { width: calc(100% - 70px); min-width: 0; text-align: left; }.voice-recorder button { flex: 1; }
  .audio-file-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.audio-file-bar > div:first-child { min-width: 0; max-width: calc(100% - 65px); }
  .waveform-card { padding: 14px; }.waveform-heading { align-items: flex-start; flex-direction: column; }#audioWaveform { height: 170px; }
  .selection-controls { grid-template-columns: 1fr 1fr; }.selection-controls button { padding-inline: 7px; }
  .audio-options-grid { grid-template-columns: 1fr; }.audio-effects, .audio-export { padding: 16px; }
  .audio-result { grid-template-columns: 1fr; }.audio-benefits { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .export-options { grid-template-columns: 1fr; }.audio-file-metrics { grid-template-columns: 1fr 1fr; }
  .selection-controls { grid-template-columns: 1fr 1fr; }.selection-controls label { grid-row: 2; }
}