/* Selected 6 November: Instrument lettering, Orbit and seat, inset diamond. */
@font-face{font-family:ImagoInstrument;src:url('assets/fonts/Jost.ttf');font-display:swap}
.places::before{display:none!important}
.place-control .place-label{font-family:ImagoInstrument,sans-serif!important;font-style:normal!important;font-weight:400!important;font-size:clamp(12px,1.3vw,19px)!important;letter-spacing:.18em!important;text-transform:uppercase}
#place-title,.work-kind{font-family:ImagoInstrument,sans-serif!important;font-style:normal!important;letter-spacing:.15em;text-transform:uppercase}
#place-title{font-size:clamp(22px,3vw,34px)}
#place-content,.work-link{font-family:ImagoInstrument,sans-serif!important}
#play{display:none!important}
#sound-toggle{display:flex;gap:8px;align-items:center;padding:0 4px;background:none!important;border:0!important;box-shadow:none!important;min-height:44px}
#sound-toggle .sound-resonator{width:32px;height:32px;overflow:visible;flex:none}
#music-state{font:400 14px ImagoInstrument,sans-serif;letter-spacing:.13em;text-transform:uppercase}
.sound-aperture{transform-origin:20px 20px;transform:scaleX(.65);opacity:.35;transition:transform .7s,opacity .7s}
#sound-toggle[aria-expanded=true] .sound-aperture{transform:scaleX(1);opacity:1}
#sound-toggle::after,#sound-toggle::before{display:none!important}
#sound-toggle:focus-visible{outline:1px solid #8bc9c8!important;outline-offset:5px}
#sound-panel.acoustic-seal{width:274px;right:-20px;padding:5px 0 4px}
.acoustic-seal .panel-heading{display:none}
.acoustic-dial{height:114px}
.acoustic-seal .track{width:97px;height:109px;font:400 12px/1.3 ImagoInstrument,sans-serif;letter-spacing:.035em}
.acoustic-seal .track .track-engraving{width:47px;height:47px;margin-bottom:7px}
.acoustic-seal .track .acoustic-track-name{max-width:94px}
#acoustic-play{width:64px;left:calc(50% - 32px);height:101px;font:400 12px ImagoInstrument,sans-serif}
.acoustic-music-mark{width:52px;height:52px}
.acoustic-music-state{margin-top:2px}
.acoustic-settings{width:210px;margin:0 auto}
.acoustic-seal .sound-bottom,.acoustic-seal .volume{width:170px}
.acoustic-seal .volume input{width:146px}
.acoustic-seal #effects-toggle{font:400 12px ImagoInstrument,sans-serif;letter-spacing:.06em;gap:8px;padding:0 4px}
#effects-state{display:none!important}
#effects-toggle::after,#effects-toggle::before{display:none!important}
#effects-toggle[aria-pressed=false] .resonator-wave{opacity:0;transform:scaleX(.1)}
#effects-toggle .resonator-wave{transform-origin:24px 24px;transition:opacity .6s,transform .6s}
#effects-toggle[aria-pressed=false] .resonator-bead{transform:translateY(11px)}
.resonator-bead{transition:transform .6s}
#motion{background:none!important;border:0!important;box-shadow:none!important}
#motion>svg{width:34px;height:34px;overflow:visible}
#motion .orbit-bead{transform-origin:32px 32px}
#motion-label{font-family:ImagoInstrument,sans-serif!important;font-size:14px;letter-spacing:.08em}
@media(max-width:760px){#sound-panel.acoustic-seal{right:10px;width:274px}.place-control .place-label{letter-spacing:.09em!important;font-size:11px!important}}
@media(prefers-reduced-motion:reduce){.sound-aperture,.resonator-bead,#effects-toggle .resonator-wave{transition:none}}
#motion .orbit-bead{transform-origin:0 0}
.place-control .place-label{white-space:nowrap;font-size:clamp(10px,1.08vw,16px)!important;letter-spacing:.15em!important}
#motion[aria-pressed=false]>svg{transform:none;opacity:.8}

/* Touch sound belongs to the instrument; volume is its final control. */
.acoustic-dial{height:134px}
.acoustic-dial .acoustic-cues{position:absolute;top:87px;left:0;height:44px;min-height:44px;width:100%}
.acoustic-seal #effects-toggle{height:44px;gap:5px;font-size:11px;letter-spacing:.08em}
.acoustic-seal #effects-toggle .effects-indicator svg{width:30px;height:30px}
.acoustic-settings{margin-top:0}.acoustic-seal .sound-bottom{padding:0}
.touch-response,.touch-contact{transition:opacity .6s,transform .6s;transform-origin:24px 24px}
#effects-toggle[aria-pressed=false] .touch-response{opacity:0}
#effects-toggle[aria-pressed=false] .touch-contact{transform:translateY(6px)}
#effects-toggle:is(:hover,:focus-visible) .touch-contact{filter:drop-shadow(0 0 2px #a8e9de)}
