/* Two illustrated choices flank one substantial shared transport. */
#sound-panel.acoustic-seal{right:-95px;width:320px;max-width:calc(100vw - 28px);padding:8px 0 12px;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;overflow:visible;transform-origin:83% 0;isolation:isolate}
.acoustic-seal::before{content:"";display:block;position:absolute;inset:-20px -25px -28px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,#071d27fa 26%,#071d27f0 55%,#071d2799 69%,transparent 81%);border-radius:48%;filter:blur(9px)}
.acoustic-seal::after{display:none}
.acoustic-seal .panel-heading{justify-content:center;height:23px;min-height:23px;margin:0 0 7px;padding:0;border:0;font:400 11px/1.2 var(--type-body);letter-spacing:.13em;color:#c5c4aa;text-transform:uppercase;text-shadow:0 1px 5px #031118}
.acoustic-seal #sound-close{display:none!important}
.acoustic-dial{position:relative;width:100%;height:132px}
.acoustic-geometry{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.acoustic-seal .track-options{display:contents}
.acoustic-seal .track-options::before{display:none}
.acoustic-seal .track{position:absolute;top:7px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;width:115px;min-width:44px;min-height:44px;height:118px;padding:0;background:none;border:0;border-radius:0;text-align:center;color:#bdc8b9;text-shadow:0 1px 5px #031118;font:400 14px/1.23 var(--type-body);letter-spacing:.005em;transition:color .7s}
.acoustic-west{left:0}.acoustic-east{right:0}
.acoustic-seal .track .track-engraving{display:block;flex-shrink:0;width:57px;height:57px;margin:0 0 8px;opacity:.69;fill:initial;stroke:none;filter:none;transition:opacity .7s,filter .7s}
.acoustic-seal .track .acoustic-track-name{display:block;max-width:108px;font:inherit;line-height:1.23;color:inherit;white-space:normal}
.acoustic-seal .track::after{left:calc(50% - 10px);bottom:6px;width:20px;height:1px;opacity:0;background:linear-gradient(90deg,transparent,#daca9e,transparent);transition:opacity .7s}
.acoustic-seal .track .track-dot{display:none}
.acoustic-seal .track:is(.active,:hover,:focus-visible){color:#f1e3bd;background:none}
.acoustic-seal .track:is(.active,:hover,:focus-visible) .track-engraving{opacity:1;filter:drop-shadow(0 0 5px #b4d5c638)}
.acoustic-seal .track.active::after{width:20px;opacity:.8}
.acoustic-seal .track .acoustic-water-lines{transform:translateY(1.8px);transition:transform 1.2s ease}
.acoustic-seal .track:is(:hover,:focus-visible) .acoustic-water-lines{transform:translateY(0)}
.acoustic-glint{transform-origin:48px 16px;transform:scale(.75);opacity:.5;transition:transform 1.3s ease,opacity 1.3s}
.track:is(.active,:hover,:focus-visible) .acoustic-glint{transform:scale(1);opacity:1}
.acoustic-mallet{transform-origin:48px 31px;transform:rotate(-10deg);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.track:is(:hover,:focus-visible) .acoustic-mallet{transform:rotate(0)}
.acoustic-workshop-ring{transition:opacity 1.2s}.track:is(:hover,:focus-visible) .acoustic-workshop-ring{opacity:.9}
#acoustic-play{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;left:calc(50% - 36px);top:7px;width:72px;height:104px;min-height:44px;gap:0;padding:0;background:none;border:0;border-radius:0;text-align:center;font:400 14px/1.23 var(--type-body);color:#ded2b2;text-shadow:0 1px 5px #031118}
#acoustic-play:is(:hover,:focus-visible){color:#f5e8c4}.acoustic-music-mark{width:59px;height:59px;filter:drop-shadow(0 3px 5px #0006);transition:filter .7s}
#acoustic-play:is(:hover,:focus-visible) .acoustic-music-mark{filter:drop-shadow(0 0 7px #a5d7c940)}
.acoustic-music-state{display:block;white-space:nowrap;margin-top:6px}
.acoustic-music-play,.acoustic-music-pause{transform-origin:32px 32px;transition:opacity .6s,transform .75s}
.acoustic-music-pause{opacity:0;transform:scale(.75)}
#acoustic-play[data-playing=true] .acoustic-music-play{opacity:0;transform:scale(.75)}
#acoustic-play[data-playing=true] .acoustic-music-pause{opacity:1;transform:scale(1)}
.acoustic-settings{position:relative;width:230px;margin:4px auto 0;padding:0;background:none}
.acoustic-settings::before{display:none}
.acoustic-seal .sound-bottom{display:block;width:184px;margin:0 auto;padding:0}
.acoustic-seal .volume{width:184px;gap:11px;margin:0 auto}.acoustic-seal .volume svg{width:13px;height:13px;stroke-width:.8;stroke:#d8c89f;opacity:.85;flex-shrink:0}.acoustic-seal .volume input{width:160px;height:30px}
.acoustic-seal .volume input::-webkit-slider-runnable-track{height:1px;background:linear-gradient(90deg,#dfc792,#afc8ba);opacity:.8}
.acoustic-seal .volume input::-webkit-slider-thumb{width:7px;height:7px;margin-top:-3px;box-shadow:0 0 6px #c6bf8625}
.acoustic-cues{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:0 auto;min-height:44px}
.acoustic-seal #effects-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:auto;max-width:100%;height:44px;min-height:44px;padding:0 6px;gap:10px;border:0;background:none;color:#ced3c0;font:400 13px/1.2 var(--type-body);text-align:left;text-shadow:0 1px 4px #031118}
.acoustic-seal #effects-toggle>span:first-child{font:inherit;letter-spacing:.015em;white-space:nowrap}
.effects-indicator{display:inline-flex;align-items:center;gap:2px}
.effects-indicator svg{width:24px;height:28px;overflow:visible;transition:opacity .65s,filter .65s}
.acoustic-seal #effects-state{font:400 12px/1.1 var(--type-body);min-width:18px;color:#c7e5d2;transition:color .65s}
.acoustic-seal #effects-toggle[aria-pressed=false] #effects-state{color:#a7b4ab}
#effects-toggle[aria-pressed=false] .effects-indicator svg{opacity:.45;filter:saturate(.35)}
#effects-toggle .resonator-halo{opacity:.25;transition:opacity .6s}#effects-toggle[aria-pressed=true] .resonator-halo{opacity:.65}
#effects-toggle:is(:hover,:focus-visible) .resonator-halo{opacity:.85}
#effects-toggle[data-sounding=true] .resonator-string{animation:string-ring .7s ease-out both}
#effects-toggle[data-sounding=true] .resonator-wave{animation:resonance .8s ease-out both}
.acoustic-seal #audio-error{margin:10px 15px 0;padding:9px 12px;background:#071d26ef;font-size:13px;text-align:center}
.acoustic-seal :is(button,input):focus-visible{outline:1px solid #b8dace;outline-offset:4px;border-radius:2px}
@media(max-width:760px){#sound-panel.acoustic-seal{top:65px;right:14px;width:310px}}
@media(max-width:340px){#sound-panel.acoustic-seal{width:286px;right:10px;max-width:calc(100vw - 20px)}.acoustic-seal .track{width:104px;font-size:13px}.acoustic-seal .track .track-engraving{width:52px;height:57px}.acoustic-seal .track .acoustic-track-name{max-width:99px}#acoustic-play{width:68px;left:calc(50% - 34px)}.acoustic-music-mark{width:55px}}
@media(max-height:440px){#sound-panel.acoustic-seal{max-height:calc(100svh - 75px);overflow-y:auto;overflow-x:hidden}}
html[data-motion=off] .acoustic-seal *,html[data-motion=off] .acoustic-seal *::after{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.acoustic-seal *,.acoustic-seal *::after{animation:none!important;transition:none!important}}
@media(max-width:760px){.introduction{transition:opacity .5s ease,filter .5s ease}.stage:has(.acoustic-seal:not([hidden])) .introduction{opacity:.07;filter:blur(3px)}}
html[data-motion=off] .introduction{transition:none}
@media(prefers-reduced-motion:reduce){.introduction{transition:none}}