:root {
    --audio-bg: rgba(255, 253, 248, .97);
    --audio-text: #18221f;
    --audio-muted: #6d7873;
    --audio-line: #d9d2c5;
    --audio-soft: #f1ebe0;
    --audio-accent: #ef6b55;
    --audio-trigger: #18221f;
    --audio-trigger-text: #fffdf8;
}

.audio-guide-dock { position: fixed; z-index: 94; left: 18px; bottom: 18px; }
.audio-guide-trigger {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    gap: 9px;
    padding: 6px 14px 6px 7px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 12px 24px 24px 24px;
    color: var(--audio-trigger-text);
    background: var(--audio-trigger);
    box-shadow: 0 12px 32px rgba(22,31,27,.18);
    font-size: 10px;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}
.audio-guide-trigger:hover { transform: translateY(-1px); box-shadow: 0 16px 36px rgba(22,31,27,.23); }
.audio-trigger-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #17201d; background: var(--audio-accent); }
.audio-trigger-copy { display: grid; gap: 1px; text-align: left; }
.audio-trigger-copy strong { font-size: 10px; }
.audio-trigger-copy small { color: rgba(255,255,255,.67); font-size: 7px; letter-spacing: .2px; }
.audio-trigger-short { display: none; }

.audio-wave { display: flex; height: 15px; align-items: center; gap: 2px; }
.audio-wave i { display: block; width: 2px; height: 5px; border-radius: 2px; background: currentColor; }
.audio-wave i:nth-child(2) { height: 11px; }
.audio-wave i:nth-child(3) { height: 8px; }
.is-playing .audio-wave i { animation: audioWave .72s ease-in-out infinite alternate; }
.is-playing .audio-wave i:nth-child(2) { animation-delay: -.35s; }
.is-playing .audio-wave i:nth-child(3) { animation-delay: -.18s; }
@keyframes audioWave { to { height: 14px; } }

.audio-guide-panel {
    position: absolute;
    left: 0;
    bottom: 60px;
    width: 370px;
    padding: 17px;
    border: 1px solid var(--audio-line);
    border-radius: 15px 22px 18px 12px;
    color: var(--audio-text);
    background: var(--audio-bg);
    box-shadow: 0 24px 60px rgba(18,27,23,.2);
    backdrop-filter: blur(18px);
    animation: audioGuideIn .18s ease-out;
}
@keyframes audioGuideIn { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.audio-guide-heading { display: flex; align-items: flex-start; gap: 12px; }
.audio-guide-mark { display: grid; flex: 0 0 auto; width: 39px; height: 39px; place-items: center; border-radius: 11px 8px 12px 9px; color: #17201d; background: var(--audio-accent); }
.audio-guide-heading-copy { display: grid; gap: 3px; padding-top: 1px; }
.audio-guide-heading-copy small { color: #ce5946; font-size: 7px; font-weight: 900; letter-spacing: 1px; }
.audio-guide-heading-copy strong { font: 600 18px/1.15 Georgia, serif; }
.audio-guide-close { display: grid; flex: 0 0 auto; width: 34px; height: 34px; margin: -3px -4px 0 auto; place-items: center; border: 0; border-radius: 50%; color: var(--audio-muted); background: transparent; font-size: 20px; cursor: pointer; }
.audio-guide-close:hover { background: var(--audio-soft); }
.audio-guide-intro { margin: 13px 0 15px; color: var(--audio-muted); font-size: 10px; line-height: 1.55; }
.audio-guide-controls { display: flex; align-items: center; gap: 8px; }
.audio-guide-play { display: inline-flex; min-height: 44px; flex: 1; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; border: 0; border-radius: 10px 16px 16px 16px; color: #fff; background: var(--audio-trigger); font-size: 10px; font-weight: 850; cursor: pointer; }
.audio-guide-play:disabled { opacity: .5; cursor: not-allowed; }
.audio-guide-restart { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--audio-line); border-radius: 12px 9px 12px 12px; color: var(--audio-text); background: transparent; font-size: 17px; cursor: pointer; }
.audio-guide-restart:hover { background: var(--audio-soft); }
.audio-guide-restart:disabled { opacity: .45; cursor: not-allowed; }
.audio-guide-progress-row { display: flex; align-items: center; gap: 10px; margin-top: 13px; }
.audio-guide-progress { height: 5px; flex: 1; overflow: hidden; border-radius: 8px; background: var(--audio-soft); }
.audio-guide-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--audio-accent); transition: width .2s linear; }
.audio-guide-time { min-width: 55px; color: var(--audio-muted); font-size: 8px; font-variant-numeric: tabular-nums; text-align: right; }
.audio-guide-status { min-height: 14px; margin: 8px 0 0; color: var(--audio-muted); font-size: 8px; }
.audio-guide-transcript { margin-top: 9px; padding-top: 10px; border-top: 1px solid var(--audio-line); }
.audio-guide-transcript summary { width: fit-content; color: var(--audio-text); font-size: 9px; font-weight: 800; cursor: pointer; }
.audio-guide-transcript p { max-height: 160px; overflow-y: auto; margin: 10px 0 0; padding-right: 4px; color: var(--audio-muted); font: 400 11px/1.65 Georgia, serif; }
.audio-guide-privacy { display: block; margin-top: 10px; color: var(--audio-muted); font-size: 7px; line-height: 1.45; }

html[data-theme="night"] {
    --audio-bg: rgba(24,35,30,.98);
    --audio-text: #f2f5f3;
    --audio-muted: #a8b4ae;
    --audio-line: #405148;
    --audio-soft: #26352e;
    --audio-accent: #f17b65;
    --audio-trigger: #edf3ef;
    --audio-trigger-text: #101713;
}
html[data-theme="night"] .audio-trigger-copy small { color: rgba(16,23,19,.67); }
html[data-theme="night"] .audio-guide-play { color: #101713; }

html[data-theme="clarity"] {
    --audio-bg: #fff;
    --audio-text: #000;
    --audio-muted: #1f1f1f;
    --audio-line: #000;
    --audio-soft: #eee;
    --audio-accent: #ffdf00;
    --audio-trigger: #000;
    --audio-trigger-text: #fff;
}
html[data-theme="clarity"] .audio-guide-panel,
html[data-theme="clarity"] .audio-guide-trigger,
html[data-theme="clarity"] .audio-guide-play,
html[data-theme="clarity"] .audio-guide-restart { border: 2px solid #000; box-shadow: none; }

@media (max-width: 700px) {
    .audio-guide-dock { left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
    .audio-guide-trigger { min-height: 46px; padding: 6px 11px 6px 6px; }
    .audio-trigger-icon { width: 32px; height: 32px; }
    .audio-trigger-full, .audio-trigger-copy small { display: none; }
    .audio-trigger-short { display: inline; }
    .audio-guide-panel { position: fixed; left: 10px; bottom: calc(68px + env(safe-area-inset-bottom)); width: min(370px, calc(100vw - 20px)); max-height: min(520px, calc(100vh - 90px)); overflow-y: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .audio-guide-panel, .audio-guide-trigger, .audio-guide-progress span { animation: none; transition: none; }
    .is-playing .audio-wave i { animation: none; }
}