/* The original viewer stylesheet stays unchanged. */
#audio-callout { position:absolute; top:50%; right:0; transform:translateY(-50%); z-index:80; }
#audio-settings-toggle { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px; width:40px; height:152px; padding:15px 0; border:1px solid #ffffff38; border-right:0; border-radius:10px 0 0 10px; color:#e2e6e3; background:#0a0e112e; backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px); cursor:pointer; animation:audio-invitation 6.5s ease-in-out infinite; transition:background-color .2s ease,border-color .2s ease; }
#audio-settings-toggle>span:not(.audio-on-dot) { writing-mode:vertical-rl; font:500 9px var(--font); letter-spacing:.15em; text-transform:uppercase; }
#audio-settings-toggle>svg { flex:none; }
#audio-settings-toggle:hover,#audio-settings-toggle:focus-visible { color:#fff; border-color:#ffffff80; background:#ffffff0a; animation:none; }
#audio-settings-toggle.has-audio { color:#d0e4db; }
#audio-settings-toggle[aria-expanded="true"] { animation:none; }
.audio-on-dot { display:none; position:absolute; right:18px; bottom:8px; width:3px; height:3px; border-radius:50%; background:#b4d6c7; }
#audio-settings-toggle.has-audio .audio-on-dot { display:block; }
#audio-notes { position:absolute; inset:0; pointer-events:none; }
#audio-note-flight-layer { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:2000; }
#visit-music-note { position:absolute; left:0; top:0; display:block; width:20px; height:28px; color:#fff; font:700 28px/1 Georgia,serif; text-align:center; pointer-events:none; user-select:none; will-change:transform; }
/* Let the view's colours pass through, without leaving recognizable details behind the controls. */
#audio-panel { position:fixed; inset:50% 56px auto auto; transform:translateY(-50%); margin:0; width:min(316px,calc(100vw - 32px)); height:auto; max-width:calc(100vw - 32px); max-height:calc(100dvh - 40px); padding:0; border:1px solid #ffffff30; border-radius:6px; color:#f1f0ed; background:rgba(10,14,17,.38); backdrop-filter:blur(40px) brightness(.7); -webkit-backdrop-filter:blur(40px) brightness(.7); box-shadow:0 12px 36px #00000026; overflow-y:auto; overscroll-behavior:contain; color-scheme:dark; }
#audio-panel[open] { animation:audio-panel-enter .24s ease-out; }
#audio-panel::backdrop { background:transparent; }
.audio-panel-inner { position:relative; padding:24px 20px 16px; display:flex; flex-direction:column; box-sizing:border-box; }
.audio-visually-hidden,.audio-status:not(.is-error) { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
#audio-close { position:absolute; top:10px; right:10px; width:40px; height:40px; }
#audio-close svg { width:18px; height:18px; }
#audio-panel button { cursor:pointer; }
#audio-panel button:focus-visible, #audio-panel input:focus-visible, #audio-panel a:focus-visible { outline:2px solid #c6dfd4; outline-offset:4px; }
.audio-round { flex-shrink:0; display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:4px; color:#d5d8d4; background:transparent; }
.audio-round:hover { color:white; background:#ffffff08; }
.audio-round[aria-pressed="true"] { color:#d3e8de; }
.audio-round svg { width:16px; height:16px; }
.audio-section { margin:0 0 18px; padding:0 0 14px; border-bottom:1px solid #ffffff15; }
.audio-section-row { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:16px; margin-bottom:16px; }
.audio-ambience .audio-section-row { padding-right:36px; }
.audio-section h3 { margin:0; font:600 10px/1.4 var(--font); letter-spacing:.12em; text-transform:uppercase; color:#c7cfca; }
.audio-section-row p { margin:0; color:#c0c8c3; font:10px/1.5 var(--font); }
.audio-volume-row { display:flex; align-items:center; gap:10px; }
.audio-volume-row .audio-range { flex:1; width:0; margin:0; }
.audio-volume-row output { min-width:29px; font:10px var(--font); font-variant-numeric:tabular-nums; text-align:right; color:#b2bbb5; }
.audio-range { --volume:50%; appearance:none; -webkit-appearance:none; display:block; width:100%; height:30px; margin:4px 0 0; padding:0; border:0; border-radius:0; cursor:pointer; background:transparent; }
.audio-range::-webkit-slider-runnable-track { height:2px; background:linear-gradient(to right,#d9dfd6 var(--volume),#ffffff29 var(--volume)); }
.audio-range::-moz-range-track { height:2px; background:#ffffff29; }
.audio-range::-moz-range-progress { height:2px; background:#d9dfd6; }
.audio-range::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:12px; height:12px; margin-top:-5px; background:#e5e8e0; border:0; border-radius:50%; }
.audio-range::-moz-range-thumb { width:12px; height:12px; background:#e5e8e0; border:0; border-radius:50%; }
.audio-status { min-height:14px; margin:2px 0 0; color:#8f9b94; font:.6rem/1.5 var(--font); }
.audio-status.is-error { color:#e4b69e; }
.audio-sounds { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin:0 0 12px; }
.audio-sound { position:relative; min-height:72px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:10px 2px 8px; border:1px solid transparent; border-radius:3px; background:transparent; color:#d5ddd8; font:400 10px/1.3 var(--font); text-align:center; }
.audio-sound svg { width:29px; height:29px; flex-shrink:0; }
.audio-sound:hover { color:#fff; background:#ffffff07; }
.audio-sound[data-selected="true"] { border-color:#ffffff21; }
.audio-sound[aria-pressed="true"] { background:#afcdb60e; border-color:#b0cdb650; color:#e5efe4; }
.audio-sound[aria-pressed="true"]::after { content:''; position:absolute; top:7px; right:7px; width:3px; height:3px; border-radius:50%; background:#a7c9b3; }
.audio-sound[aria-busy="true"] { border-style:dashed; }
.audio-section:last-of-type { border-bottom:0; margin-bottom:6px; padding-bottom:0; }
.audio-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:12px; margin-top:6px; border-top:1px solid #ffffff15; }
#audio-stop-all { display:inline-flex; align-items:center; gap:8px; min-height:36px; border:0; border-radius:4px; background:transparent; color:#bdc6bf; padding:4px 0; font:400 10px var(--font); }
#audio-stop-all:hover { color:#fff; }
.audio-footer a { color:#bbc6be; font:9px var(--font); text-decoration:none; }
.audio-footer a:hover { color:#dbe3db; }
@keyframes audio-panel-enter { from { opacity:0; transform:translate(12px,-50%); } to { opacity:1; transform:translate(0,-50%); } }
@keyframes audio-invitation { 0%,75%,100% { border-color:#ffffff38; box-shadow:0 0 0 0 #ffffff00; } 35% { border-color:#ffffff65; box-shadow:0 0 14px 0 #ffffff0c; } }
@media(max-width:680px) { #audio-callout { top:112px; transform:none; } #audio-settings-toggle { width:36px; height:142px; gap:10px; } .audio-on-dot { right:16px; bottom:7px; } #audio-settings-toggle>svg { width:18px; height:18px; } #audio-panel { right:12px; width:calc(100vw - 24px); max-width:316px; max-height:calc(100dvh - 24px); } .audio-volume-row .audio-round { width:44px; height:44px; } }
@media (max-height:500px) { .audio-panel-inner { padding-top:20px; }.audio-section { margin-bottom:10px; padding-bottom:8px; }.audio-section-row { margin-bottom:10px; }.audio-sounds { margin-bottom:8px; }.audio-sound { min-height:64px; gap:5px; } }
@media (prefers-reduced-motion:reduce) { #audio-panel[open],#audio-settings-toggle { animation:none; } }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { #audio-panel { background:#151c20f2; } #audio-settings-toggle { background:#151c20d9; } }