/* Keep symbols independent of the platform's emoji font. */
svg.site-symbol{display:inline-block!important;width:1em!important;height:1em!important;min-width:1em;vertical-align:-.12em;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* The product captions must always sit above the decorative cutout. */
.universe .tape{z-index:7}
@media(max-width:1100px){
 *,*:before,*:after{box-sizing:border-box}
 body{min-width:0}
 img,iframe{max-width:100%}
 p,h1,h2,h3,a,button{overflow-wrap:break-word}
 .site-footer{padding-inline:20px}
 /* A phone-sized composition, with each destination in its own space. */
 .universe{display:flex;flex-direction:column;align-items:center;gap:28px;height:auto;min-height:0;padding:30px 6% 55px;overflow:clip}
 .universe .brand,.universe .edition,.universe .jasper-stage,.universe .floating-synth,.universe .jasper-note,.universe .vesper{position:relative;inset:auto;width:100%;max-width:540px;height:auto;margin:0;transform:none;translate:none!important;animation:none}
 .universe .brand{width:200px;align-self:flex-start;order:0}
 .universe .edition{order:1;text-align:left;font-size:12px;line-height:1.7}
 .universe nav{display:contents}
 .universe .nav-link{position:relative;inset:auto;transform:none;animation:none;margin:0;width:100%;max-width:540px}
 .universe .login{position:absolute;top:46px;right:6%;width:auto;font-size:18px}
 .universe .catalog{order:2;font-size:clamp(48px,12vw,85px)}
 .universe .catalog .nav-type{font-size:inherit}
 .universe .jasper-stage{order:3;width:90%;height:auto;aspect-ratio:1;max-width:450px}
 .universe .jasper{width:100%;height:100%;object-fit:contain;transform:none}
 .universe .jasper-note{order:4;text-align:center;font-size:16px}
 .universe .jasper-note>span{position:static;display:inline-block;font-size:32px;vertical-align:middle;margin-right:10px}
 .universe .about{order:5;font-size:clamp(35px,9vw,60px);padding:20px 0}
 .universe .about br{display:none}
 .universe .about .nav-type{font-size:inherit;line-height:1.3}
 .universe .about .divider{display:inline}
 .universe .tape{order:6}
 .universe .subzero{order:7}
 .universe .floating-synth{padding:10px 0 25px}
 .universe .floating-synth img{display:block;width:100%;height:auto;transform:none}
 .universe .floating-synth>span{display:block;position:relative;inset:auto;width:100%;max-width:100%;transform:none;font-size:14px;line-height:1.7;text-align:center;margin:18px 0 0}
 .universe .vesper{order:8;padding-top:18px}
 .universe .vesper-art{width:100%;height:auto;aspect-ratio:1.5}
 .universe .vesper-caption{font-size:15px;line-height:1.6}
 .universe .vesper-title{position:relative;inset:auto;width:100%;margin-top:18px}
 .universe .spark{z-index:0;opacity:.3}
 .universe .shape-trails{z-index:0;opacity:.25}
 /* About: the complete workshop and wall logo, followed by the introduction. */
 .welcome{height:auto;min-height:0;max-height:none;aspect-ratio:auto;padding:0 0 45px}
 .welcome .workshop-scene{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:3/2;z-index:0;mask-image:none;-webkit-mask-image:none}
 .welcome .scene-art,.welcome .vesper-screen,.welcome .monitor-life{position:absolute;inset:0;width:100%;height:100%;max-width:100%;object-fit:contain}
 .welcome .framed-logo-link{display:block}
 .welcome:after{display:none}
 .welcome .welcome-copy{position:relative;inset:auto;width:auto;margin:32px 7%}
 .welcome .welcome-copy h1{font-size:clamp(44px,10vw,74px)}
 .welcome .welcome-copy h1 em{white-space:normal}
 .welcome .welcome-intro{max-width:36em;font-size:16px}
 .welcome .scene-navigation{position:relative;inset:auto;margin:30px 7% 0;gap:22px;flex-wrap:wrap}
 .welcome .scene-navigation a,.welcome .scene-navigation a:last-child{margin:0;transform:none;font-size:28px}
 .contact>.contact-signature{left:0;max-width:100%;margin:40px auto 0;bottom:auto}
 .contact-signature .contact-location{margin:20px 0 0;text-align:center}
 .outro-nav{padding:45px 7%;gap:28px;flex-wrap:wrap}
 /* Vesper: let both illustrated scenes scale as complete 3:2 pictures. */
 body[data-page="vesper"] .heaven{padding:0 0 85px}
 .heaven .choir-art,.demo-world .ritual-art{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:3/2;z-index:0;mask-image:none;-webkit-mask-image:none}
 .heaven .choir-art>.scene-art-source,.demo-world .ritual-art>.scene-art-source{width:100%;height:100%;object-fit:contain;object-position:center}
 .heaven .title-composition{width:86%;margin:32px auto 42px;padding:0;text-align:center}
 .demo-world .listening{display:flex;flex-direction:column;padding:36px 6% 45px;gap:36px}
 .demo-world .demo-island{width:100%;max-width:520px;margin-inline:auto;min-width:0}
 .demo-world .demo-poem{width:100%;max-width:100%}
 .scene-nav{position:relative;inset:auto;flex-wrap:wrap;gap:15px;padding:18px 6%}
 /* Cortex: scale the image and its aligned motion layers together. */
 .laboratory .scene-window{height:auto;overflow:visible}
 .laboratory .art-plane{left:auto;width:100%;max-width:100%;aspect-ratio:3/2}
 .laboratory .laboratory-art,.laboratory .light-map,.laboratory .scene-motion{width:100%;height:100%;max-width:100%;mask-image:none}
 .laboratory .floating-nav{position:relative;inset:auto;display:flex;flex-wrap:wrap;justify-content:space-around;gap:20px;padding:20px 5%}
 .laboratory .floating-nav a{position:relative;inset:auto;transform:none}
 .laboratory .instrument-mount{margin-top:25px}
 .instrument-scroll .panel{width:100%;min-width:0;margin:0}
 .instrument-scroll .panel>img{width:100%;max-width:100%}
 .instrument-scroll{padding-inline:4%}
 .swipe-hint{display:none}
 /* Obsidian: full stage, full percussion world, full alley; copy follows art. */
 .opening{height:auto;max-height:none;overflow:clip;padding-bottom:45px}
 .opening .opening-art{position:relative;inset:auto;display:block;width:100%;max-width:100%;height:auto;object-fit:contain;mask-image:none;z-index:0}
 .opening .stage-effects{inset:0 0 auto;width:100%;height:auto;aspect-ratio:1672/941;z-index:1}
 .opening:before,.opening:after{display:none}
 .opening .floating-title{position:relative;inset:auto;width:88%;margin:30px auto 0}
 .opening .impact-type .opening-whisper{font-size:clamp(26px,6vw,40px);line-height:1.2}
 .panel-scroll .instrument-panel{width:100%;min-width:0}
 body[data-page="obsidian"] .world{aspect-ratio:auto;margin:35px 0;display:grid;grid-template-columns:1fr;background:#080e18}
 .world .world-art{position:relative;inset:auto;aspect-ratio:1024/1536;width:100%;mask-image:none;overflow:clip}
 .world .world-art>.world-plate{object-fit:contain}
 .world .story{position:relative;inset:auto;width:auto;margin:24px 7%;padding:15px 0;animation:none;transform:none;opacity:1}
 .world .story h2,.world .core-story h2,.world .strata-story h2{font-size:clamp(34px,8vw,48px);line-height:1.08}
 .world .story p{display:block;max-width:none;font-size:16px;line-height:1.65}
 .world .story button,.world .story-jump{font-size:16px;line-height:1.4;margin-top:12px}
 .world>.cherry-branch{height:180px;width:24%;left:0;top:-35px}
 .world>.botanical-bridge{position:relative;height:120px;margin-top:30px}
 .closing-world{margin-top:0;padding-top:0}
 .closing-world .alley-scene{position:relative;inset:auto;width:100%;aspect-ratio:1672/941;z-index:0}
 .closing-world .closing-content{padding-top:35px}
 .closing-world .closing-motto{max-width:100%;margin-inline:auto}
}
/* The filter-order reference also remains a complete, readable picture. */
.order-evidence-frame{height:auto;aspect-ratio:2;overflow:visible}
.order-evidence-frame img{position:relative;inset:auto;display:block;width:100%;height:auto;max-width:100%;transform:none}
@media(max-width:1100px){
 .demo-world .vesper-apparition{width:90%;max-width:620px;margin:30px auto;align-self:center}
 .vesper-apparition .complete-vesper{transform:none;animation:none;mask-image:none}
 .demo-world .ritual-art{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:3/2;z-index:0;mask-image:none}
 .demo-world .listening{padding-top:36px}
}
@media(max-width:1100px){
 .instrument-zone .scroll-hint{display:none}
 .closing-world .closing-content{width:88%;margin-inline:auto;min-height:0}
 .closing-world nav{flex-wrap:wrap}
}
@media(max-width:1100px){
 .universe .about .nav-type{font-size:clamp(28px,7.3vw,48px);line-height:1.5}
 .universe .about .arrow{white-space:nowrap}
 .instrument-zone .mobile-instruction{display:none}
 .instrument-panel .hotspot span{display:none}
 .route-track{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;gap:12px}
 .route-track .route-node{min-width:0}
 .route-track:before,.route-energy{display:none}
}
@media(min-width:1101px){
 .universe{min-height:1400px;height:max(1400px,100svh)}
 .universe .tape{left:7%;top:82%;width:24%;transform:rotate(-5deg);animation:tape-clear-float 15s ease-in-out infinite}
 .universe .tape>span{width:100%;max-width:none;transform:none}
}
@keyframes tape-clear-float{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-8px)}}
@media(prefers-reduced-motion:reduce){.universe .tape{animation:none}}
@media(max-width:1100px){
 .universe .vesper-art,.universe .vesper:hover .vesper-art{height:auto;aspect-ratio:auto;overflow:visible;mask-image:none;transform:none}
 .universe .vesper-art img{height:auto}
}