.schematic{--diagram-bg:var(--color,var(--accent));color:#171713;width:100%;pointer-events:none}.schematic svg{width:100%;height:100%;display:block;overflow:visible}.portal .schematic{position:absolute;left:3%;top:29px;width:94%;height:51%;z-index:0}.kinetic-figure .schematic{height:clamp(250px,24vw,360px)}.schematic svg *{animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-delay:var(--delay,0s)}
.needle{animation-name:needle;animation-duration:2.3s}.fader-loop{animation-name:fader;animation-duration:6s}.knob{animation-name:knob;animation-duration:7s}.key-pulse{animation-name:key;animation-duration:2.4s}.drum-pulse{animation-name:drum;animation-duration:1.6s}.cymbal-loop{animation-name:cymbal;animation-duration:3.2s}.mic-signal{animation-name:signal;animation-duration:3.2s}.string-vibrate{animation-name:strings;animation-duration:1.6s}.door-loop{animation-name:door;animation-duration:9s}.room-highlight{opacity:.025;animation-name:room;animation-duration:9s}.layout-loop{animation-name:layout;animation-duration:6s}.card-loop{animation-name:card;animation-duration:6s}.button-loop{animation-name:button;animation-duration:6s}.cursor-loop{animation-name:cursor;animation-duration:6s}
@keyframes needle{0%,100%{transform:rotate(-12deg)}30%{transform:rotate(23deg)}60%{transform:rotate(5deg)}80%{transform:rotate(32deg)}}
@keyframes fader{0%,100%{transform:translateY(0)}40%{transform:translateY(-20px)}70%{transform:translateY(9px)}}
@keyframes knob{0%,100%{transform:rotate(-25deg)}50%{transform:rotate(50deg)}}
@keyframes key{0%,35%,65%,100%{opacity:1}45%,55%{opacity:.22}}
@keyframes drum{0%,40%,70%,100%{transform:scale(1)}45%,75%{transform:scale(1.035)}}
@keyframes cymbal{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.91)}}
@keyframes signal{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:.85;transform:scale(1.14)}}
@keyframes strings{0%,100%{transform:translateY(0)}40%{transform:translateY(.8px)}70%{transform:translateY(-.8px)}}
@keyframes door{0%,15%,100%{transform:rotate(0deg)}45%,70%{transform:rotate(65deg)}}
@keyframes room{0%,15%,100%{opacity:.015}45%,70%{opacity:.085}}
@keyframes layout{0%,100%{transform:translateX(0)}45%,65%{transform:translateX(-7px)}}
@keyframes card{0%,100%{transform:translateY(0);opacity:1}45%,65%{transform:translateY(-4px);opacity:.55}}
@keyframes button{0%,35%,75%,100%{fill:transparent}45%,60%{fill:#17171318}}
@keyframes cursor{0%,100%{transform:translate(16px,7px)}40%,65%{transform:translate(0,0)}}
.schematic-paused *,html.schematics-hidden .schematic *{animation-play-state:paused!important}.motion-off .schematic *,body.still .schematic *{animation:none!important}
@media(prefers-reduced-motion:reduce){.schematic *{animation:none!important}}
@media(max-width:700px){.portal .schematic{top:24px;height:45%;width:98%;left:1%}.kinetic-figure .schematic{height:265px}}
/* Revised precision schematics: anchored instruments, static architecture, real viewport scrolling. */
.session-strings{animation:session-string 2.4s ease-in-out infinite}.beat-ring{animation:beat-ring 2.4s ease-out infinite}.studio-room-pulse{animation:room-sound 4s ease-out infinite;transform-origin:0px 0px}.console-meter{animation:console-meter 3s ease-in-out infinite}
.site-scroll{animation:site-scroll 12s cubic-bezier(.45,0,.25,1) infinite}.mobile-scroll{animation:mobile-scroll 12s cubic-bezier(.45,0,.25,1) infinite}.scroll-thumb{animation:scroll-thumb 12s cubic-bezier(.45,0,.25,1) infinite}
@keyframes session-string{0%,100%{opacity:.5}45%{opacity:1;stroke-width:1.1}}
@keyframes beat-ring{0%,100%{opacity:.12;transform:scale(.92)}20%{opacity:.6;transform:scale(1)}60%{opacity:0;transform:scale(1.16)}}
@keyframes room-sound{0%,100%{opacity:0;transform:scale(.85)}30%{opacity:.2}75%{opacity:0;transform:scale(1.6)}}
@keyframes console-meter{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes site-scroll{0%,12%,100%{transform:translateY(0)}40%,51%{transform:translateY(-85px)}72%,85%{transform:translateY(-181px)}}
@keyframes mobile-scroll{0%,15%,100%{transform:translateY(0)}43%,53%{transform:translateY(-72px)}75%,85%{transform:translateY(-105px)}}
@keyframes scroll-thumb{0%,12%,100%{transform:translateY(0)}40%,51%{transform:translateY(46px)}72%,85%{transform:translateY(108px)}}