.toggle-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 1px 0 20px;
  padding: 13px 14px;
  border: 1px solid #303631;
  border-radius: 8px;
  background: #0d100e;
  cursor: pointer;
}

.toggle-field:hover { border-color: #465047; }
.toggle-field input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.toggle-control { position: relative; flex: 0 0 42px; width: 42px; height: 23px; border-radius: 20px; background: #313732; transition: .2s; }
.toggle-control i { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #939a94; transition: .2s; }
.toggle-field input:checked + .toggle-control { background: var(--green); box-shadow: 0 0 18px rgba(142,245,32,.16); }
.toggle-field input:checked + .toggle-control i { left: 22px; background: #0a0d09; }
.toggle-field input:focus-visible + .toggle-control { outline: 2px solid var(--green); outline-offset: 3px; }
.toggle-copy strong, .toggle-copy small { display: block; }
.toggle-copy strong { color: var(--text); font: 600 13px var(--display); }
.toggle-copy small { margin-top: 4px; color: #737b74; font-size: 10px; font-weight: 400; line-height: 1.4; }

.media-area.audio-mode { background: radial-gradient(circle,rgba(142,245,32,.085),transparent 50%),#0d100e; }
.audio-only-trigger > span { padding: 0; font-family: var(--display); font-size: 34px; }
.audio-shell { position: relative; width: 100%; height: 100%; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(circle at 50% 45%,rgba(142,245,32,.1),transparent 35%); }
.audio-shell::before, .audio-shell::after { content: ""; position: absolute; width: 260px; height: 260px; border: 1px solid rgba(142,245,32,.08); border-radius: 50%; animation: audio-pulse 2.4s ease-out infinite; }
.audio-shell::after { animation-delay: 1.2s; }
.audio-engine-host { position: fixed !important; top: -10000px !important; left: -10000px !important; width: 0 !important; height: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(100%) !important; contain: strict !important; opacity: 0 !important; pointer-events: none !important; z-index: -2147483648 !important; }
.audio-engine { display: block !important; width: 200px !important; height: 200px !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; }
.audio-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 13px; padding: 0; border: 0; border-radius: 50%; background: var(--green); color: #0a0e08; font: 700 35px var(--display); box-shadow: 0 0 42px rgba(142,245,32,.2); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.audio-icon:hover { transform: scale(1.05); box-shadow: 0 0 52px rgba(142,245,32,.36); }
.audio-icon:focus-visible { outline: 3px solid #fff; outline-offset: 4px; box-shadow: 0 0 56px rgba(142,245,32,.42); }
.audio-icon:active { transform: scale(.98); }
.audio-label { position: relative; z-index: 1; color: var(--green); font: 700 9px var(--display); letter-spacing: .2em; text-transform: uppercase; }
.audio-state { position: relative; z-index: 1; margin: 5px 0 12px; font: 600 19px var(--display); }
.audio-equalizer { position: relative; z-index: 1; height: 31px; display: flex; align-items: center; gap: 4px; margin-bottom: 15px; }
.audio-equalizer i { width: 3px; height: 8px; border-radius: 4px; background: var(--green); animation: audio-bars .7s ease-in-out infinite alternate; animation-delay: calc(var(--bar) * -.07s); }
.audio-clip-progress { position: relative; z-index: 1; width: min(380px,65%); height: 3px; overflow: hidden; border-radius: 3px; background: #2b312c; }
.audio-clip-progress i { display: block; width: 100%; height: 100%; background: var(--green); transform-origin: left; animation: audio-progress var(--action-duration,var(--clip-duration,1s)) linear forwards; box-shadow: 0 0 10px rgba(142,245,32,.45); }
.audio-clip-progress.paused i { animation-play-state: paused; }
.audio-clip-progress.complete i { animation: none; transform: scaleX(1); }
.audio-clip-progress.continuous i { animation: audio-continuous 1.6s ease-in-out infinite; }
.audio-shell > small { position: relative; z-index: 1; margin-top: 8px; color: #697169; }
.audio-replay { position: relative; z-index: 1; margin-top: 13px; padding: 7px 12px; border: 1px solid #384039; border-radius: 6px; background: rgba(255,255,255,.025); color: #aeb5ae; font: 600 10px var(--display); letter-spacing: .05em; }
.audio-replay:hover { border-color: var(--green); color: var(--green); }
.audio-extra-controls { position: relative; z-index: 1; display: flex; gap: 8px; margin-top: 8px; }
.audio-extra-controls button { min-width: 108px; padding: 8px 12px; border: 1px solid #313832; border-radius: 6px; background: #111512; color: #d7dcd7; font: 600 10px var(--display); }
.audio-extra-controls button:hover { border-color: var(--green); color: var(--green); }
.audio-extra-controls [data-audio-continue] { border-color: rgba(142,245,32,.35); }
.audio-shell:not(.is-playing) .audio-equalizer i { height: 3px; animation-play-state: paused; }
.audio-shell.complete .audio-equalizer i, .audio-shell.complete::before, .audio-shell.complete::after { animation-play-state: paused; }
.audio-shell.complete .audio-equalizer i { height: 3px; }
.replay-area .audio-shell { min-height: 245px; border: 1px solid #252b26; border-radius: 8px; }

@keyframes audio-bars { from { height: 5px; opacity: .45; } to { height: 28px; opacity: 1; } }
@keyframes audio-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes audio-continuous { 0% { transform: translateX(-100%) scaleX(.35); } 50% { transform: translateX(20%) scaleX(.55); } 100% { transform: translateX(100%) scaleX(.35); } }
@keyframes audio-pulse { from { transform: scale(.35); opacity: .7; } to { transform: scale(1.35); opacity: 0; } }