:root{font-family:'Helvetica Neue',Helvetica,Arial,'Microsoft YaHei',sans-serif;color:#16202d;background:#f7f7f8;--blue:#002fa7}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,.stage:focus-visible{outline:2px solid var(--blue);outline-offset:5px}header{height:88px;margin:0 4%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #aab0bc;position:relative;z-index:5}.logo{font-size:40px;font-weight:900;letter-spacing:-3px;color:var(--blue);text-decoration:none}.logo span{font-size:13px;vertical-align:top;letter-spacing:0}.edition{font-size:11px;letter-spacing:2px}header button{background:none;border:1px solid #aab0bc;padding:10px 20px;font-size:12px}main{position:relative;min-height:670px;height:calc(100svh - 170px);overflow:hidden;isolation:isolate}.ghost{position:absolute;left:3%;top:5px;font-size:clamp(80px,13.5vw,240px);font-weight:900;letter-spacing:-.08em;line-height:1;color:#002fa709;z-index:-1}.coordinate{position:absolute;width:64vw;left:12%;top:-17%;opacity:.19;pointer-events:none;z-index:1}.coordinate svg{fill:none;stroke:var(--blue);stroke-width:.6}.heading{position:absolute;left:5%;top:13%;z-index:3;pointer-events:none}.heading>span{font-size:11px;letter-spacing:2px;color:var(--blue)}h1{font-size:clamp(42px,4.5vw,78px);letter-spacing:-3px;line-height:1.13;margin:23px 0;font-weight:800}.heading p{font-size:12px;line-height:2.1;color:#627082;letter-spacing:1px}.stage{position:absolute;width:79%;height:96%;left:-1%;top:-2%;cursor:grab;touch-action:pan-y;user-select:none;mix-blend-mode:multiply;z-index:2;filter:saturate(.7);mask-image:linear-gradient(to right,transparent,black 13%,black 82%,transparent),linear-gradient(to bottom,transparent,black 15%,black 78%,transparent);mask-composite:intersect}.stage.dragging{cursor:grabbing}.stage img,.stage video{width:100%;height:100%;position:absolute;inset:0;object-fit:contain;pointer-events:none}.stage video{display:none}.stage video.active{display:block}.views{position:absolute;right:4%;top:21%;width:27%;z-index:4;display:grid;gap:13px}.view-button{position:relative;display:flex;align-items:center;gap:18px;text-align:left;border:1px solid #a9b1c0;background:#ffffffdc;color:#243244;padding:22px 20px;min-height:105px;transition:background .25s,transform .25s}.view-button:nth-child(2){margin-left:18px}.view-button:nth-child(3){margin-left:36px}.view-button[aria-pressed=true]{background:var(--blue);color:white;border-color:var(--blue);transform:translateX(-12px)}.view-button small{font-size:11px;align-self:flex-start}.view-button span{font-size:26px;font-weight:700;white-space:nowrap}.view-button em{display:block;font-size:9px;font-weight:400;letter-spacing:2px;font-style:normal;margin-top:5px}.view-button b{font-size:10px;font-weight:400;margin-left:auto;writing-mode:vertical-rl;letter-spacing:2px}.view-button svg{width:22px;fill:none;stroke:currentColor;stroke-width:1}.object-note{position:absolute;left:47%;top:18%;display:flex;align-items:center;gap:12px;font-size:9px;letter-spacing:2px;color:var(--blue);z-index:3;pointer-events:none}.cross{width:33px;height:33px;background:var(--blue);clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%)}.content{position:absolute;left:5%;bottom:9%;width:31%;z-index:4;border-top:1px solid #8996aa;padding-top:15px;transition:opacity .2s,transform .2s}.content small{font-size:10px;color:var(--blue);letter-spacing:2px}.content h2{font-size:22px;margin:12px 0 8px;letter-spacing:-.5px}.content p{font-size:11px;color:#627082;line-height:1.8;margin:0 0 12px}.content button{background:var(--blue);color:white;border:0;padding:11px 17px;font-size:11px}.content .chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}.content .chips button{background:white;color:var(--blue);border:1px solid #a9b1c0}.content .chips button.selected{background:var(--blue);color:white}.content input{width:100%;border:0;border-bottom:1px solid #8996aa;background:transparent;padding:10px 0;font:inherit;font-size:12px;outline-color:var(--blue)}.transitioning .content{opacity:0;transform:translateY(8px)}.gesture{position:absolute;left:44%;bottom:6%;display:flex;align-items:center;gap:12px;font-size:10px;color:#5e6e85;z-index:3;pointer-events:none}.gesture svg{width:45px;fill:none;stroke:var(--blue);stroke-width:1}.folio{position:absolute;right:4%;bottom:6%;font-size:10px;letter-spacing:2px;color:var(--blue)}.folio span{font-size:45px;font-weight:300;letter-spacing:-3px;margin-left:10px}footer{height:82px;margin:0 4%;border-top:1px solid #aab0bc;display:flex;align-items:center;gap:20px}footer button{border:1px solid #a9b1c0;background:transparent;padding:10px 20px;font-size:11px}#play{width:43px;height:43px;background:var(--blue);border:0;padding:12px}#play svg{fill:white;width:20px}.now{display:grid;gap:6px;min-width:170px}.now small{font-size:9px;color:#6b788b}.now strong{font-size:12px;letter-spacing:1px}.wave{display:flex;align-items:center;gap:3px;height:28px}.wave i{width:2px;height:var(--h);background:var(--blue)}.playing .wave i{animation:wave .7s ease-in-out infinite alternate;animation-delay:var(--d)}@keyframes wave{to{transform:scaleY(.25)}}.audio-note{margin-left:auto;font-size:10px;color:#6b788b}#save[aria-pressed=true]{color:var(--blue);border-color:var(--blue)}@media(max-width:760px){header{height:68px}.logo{font-size:32px}.edition{font-size:9px;letter-spacing:0}header button{padding:8px;font-size:10px}main{height:calc(100svh - 148px);min-height:700px}.ghost{top:15px;font-size:20vw}.heading{top:7%;left:6%}h1{font-size:38px;margin:14px 0;letter-spacing:-2px}.heading p{font-size:10px}.coordinate{width:130vw;left:-21%;top:1%}.stage{width:135%;height:65%;left:-25%;top:9%}.object-note{left:68%;top:14%;font-size:8px;writing-mode:vertical-rl}.views{left:6%;right:6%;top:auto;bottom:27%;width:auto;display:flex;gap:5px}.view-button,.view-button:nth-child(n){margin:0;padding:12px 9px;min-height:75px;flex:1;gap:8px}.view-button[aria-pressed=true]{transform:translateY(-6px)}.view-button span{font-size:20px}.view-button em{font-size:7px;letter-spacing:.5px}.view-button b,.view-button svg{display:none}.view-button small{font-size:8px}.content{left:6%;bottom:4%;width:72%;padding-top:10px;min-height:135px}.content h2{font-size:18px;margin:8px 0}.content p{font-size:10px;margin-bottom:8px}.content button{padding:8px 12px}.gesture{left:6%;bottom:40%;font-size:9px}.folio{bottom:5%;right:6%;font-size:8px;writing-mode:vertical-rl}.folio span{font-size:32px;margin:8px 0}.audio-note{display:none}footer{gap:12px;height:80px}.now{min-width:135px}.wave{flex:1;overflow:hidden}footer button{padding:9px}.content .chips{margin-top:8px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Blend the rendered studio edge into the page while keeping the glass crisp. */
.stage img,.stage video{mask-image:linear-gradient(to bottom,transparent 8%,black 26%,black 70%,transparent 91%);}
@media(min-width:761px){.stage{left:10%;width:66%;}.heading{left:5%;}.heading p{max-width:160px}.content{width:32%}}
@media(min-width:761px){main{min-height:540px}.stage{height:auto;aspect-ratio:1.6;top:15%}.stage img,.stage video{object-fit:cover;mask-image:none}}
@media(max-width:760px){.stage{height:auto;aspect-ratio:1.6;top:15%}.stage img,.stage video{object-fit:cover;mask-image:none}}
/* Spatial navigation: labels sit on the ice, with fine attachment lines. */
.ice-links{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;fill:none;stroke:#002fa780;stroke-width:.7;transition:opacity .2s}.ice-links circle{fill:#002fa7;stroke:white;stroke-width:1.5}
.views{inset:0;width:100%;height:100%;display:block;pointer-events:none}.view-button,.view-button:nth-child(n){position:absolute;margin:0;min-height:0;width:155px;padding:12px 15px;gap:10px;background:#ffffff60;border:1px solid #ffffffb0;backdrop-filter:blur(12px);pointer-events:auto;box-shadow:none;transform:none;transition:background .25s,opacity .2s,translate .5s}.view-button[data-view=front]{left:25%;top:28%;transform:rotate(-7deg)}.view-button[data-view=right]{left:55%;top:23%;transform:rotate(6deg)}.view-button[data-view=left]{left:55%;top:57%;transform:rotate(-5deg)}.view-button[aria-pressed=true]{background:#002fa7df;color:#fff;border-color:#002fa7;translate:0 -5px}.view-button span{font-size:23px}.view-button em{font-size:8px;letter-spacing:1px}.view-button b{display:none}.view-button svg{margin-left:auto;width:18px}.heading{top:9%}h1{font-size:clamp(35px,3.6vw,60px)}.heading p{max-width:140px}.stage{left:11%;width:79%;top:8%;}.content{left:32%;bottom:6%;width:35%;padding:17px 21px;background:#ffffffb0;border:1px solid #ffffffda;backdrop-filter:blur(16px);border-left:3px solid var(--blue)}.content h2{font-size:19px}.gesture{left:5%;bottom:7%;max-width:23%;line-height:1.7}.object-note{left:72%;top:14%}.transitioning .views,.transitioning .ice-links{opacity:0;pointer-events:none}.transitioning .view-button{pointer-events:none}.views{transition:opacity .2s}.content::before{content:'';position:absolute;left:40%;bottom:100%;height:30px;width:1px;background:#002fa770}.folio{bottom:7%}
body[data-space=right] .view-button[data-view=front]{left:30%;top:32%}body[data-space=right] .view-button[data-view=right]{left:55%;top:22%}body[data-space=right] .view-button[data-view=left]{left:59%;top:52%}body[data-space=left] .view-button[data-view=front]{left:29%;top:24%}body[data-space=left] .view-button[data-view=right]{left:59%;top:31%}body[data-space=left] .view-button[data-view=left]{left:48%;top:54%}
@media(max-width:760px){.stage{width:145%;left:-24%;top:21%}.heading{top:6%}h1{font-size:34px}.heading p{max-width:none}.object-note{left:83%;top:13%}.view-button,.view-button:nth-child(n){width:117px;padding:10px;gap:7px}.view-button span{font-size:20px}.view-button svg{display:none}.view-button[data-view=front],body[data-space=right] .view-button[data-view=front],body[data-space=left] .view-button[data-view=front]{left:13%;top:32%}.view-button[data-view=right],body[data-space=right] .view-button[data-view=right],body[data-space=left] .view-button[data-view=right]{left:59%;top:29%}.view-button[data-view=left],body[data-space=right] .view-button[data-view=left],body[data-space=left] .view-button[data-view=left]{left:54%;top:48%}.content{left:10%;width:77%;bottom:10%;min-height:140px;padding:14px 17px}.gesture{left:10%;bottom:4%;max-width:75%}.folio{display:none}.ice-links{opacity:.35}.content::before{height:40px}}
@media(min-width:761px){.view-button[data-view=left],body[data-space=right] .view-button[data-view=left],body[data-space=left] .view-button[data-view=left]{left:70%;top:51%}.heading p{max-width:180px}}
/* One camera view exposes one functional layer. */
.view-button[hidden]{display:none!important}.ice-links{display:none}.view-button svg{display:none}.view-button[aria-pressed=true]{pointer-events:none}.content{width:39%;left:39%;bottom:5%}.content .song-results{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.song-results button{text-align:left;font-size:9px!important;padding:9px!important}.song-results button small{display:block;margin-top:6px;font-size:8px;letter-spacing:0;color:inherit}.recent-title{font-size:12px;font-weight:500;margin:14px 0 4px}.categories button{padding:7px 12px}.content::before{left:14%}.view-button[data-view=front],body[data-space=right] .view-button[data-view=right],body[data-space=left] .view-button[data-view=left]{left:42%;top:31%;transform:rotate(-6deg);width:173px;padding:17px}.view-button span{font-size:29px}.content h2{font-size:18px;margin:8px 0}.content .chips p{margin:0}.content input{padding-top:12px}.gesture{max-width:30%}
@media(max-width:760px){.view-button[data-view=front],body[data-space=right] .view-button[data-view=right],body[data-space=left] .view-button[data-view=left]{left:40%;top:34%;width:145px;padding:13px}.content{left:9%;width:82%;bottom:9%;min-height:180px}.content .song-results{grid-template-columns:1fr}.song-results button small{display:inline;margin-left:10px}.content .song-results button{padding:7px!important}.gesture{max-width:80%}.content::before{left:57%;height:23px}}
/* Dark spatial glass interface. */
:root{color:#e7edf5;background:#05070a;--blue:#91bfff}body{background:#05070a}header,footer{border-color:#ffffff20}.logo,.heading>span,.object-note,.folio{color:#cfdef5}header button,footer button{color:#dce7f5;background:#ffffff08;border-color:#ffffff25;border-radius:22px}.edition,.heading p,.gesture,.audio-note,.now small{color:#8391a4}.ghost{color:#ffffff03}.coordinate{opacity:.09}.coordinate svg{stroke:#c5ddff}.stage{mix-blend-mode:screen;filter:brightness(.52) contrast(3) saturate(.5);mask-image:radial-gradient(ellipse at center,black 32%,transparent 72%)}.heading{pointer-events:none}.heading h1{font-weight:500;letter-spacing:-2px}.cross{background:#bcd7ff}.view-button[aria-pressed=true]{background:transparent!important;border:0!important;backdrop-filter:none;box-shadow:none;color:#eff5ff;transform:none!important;translate:none}.view-button em{color:#a5bad3}.view-button small{color:#74899f}.view-button span{font-weight:400;font-size:32px}.views{z-index:4}.view-button[data-view=front],body[data-space=right] .view-button[data-view=right],body[data-space=left] .view-button[data-view=left]{left:45%;top:34%;padding:0;width:auto}.content{inset:0;width:100%;height:100%;padding:0;border:0;background:none;backdrop-filter:none;pointer-events:none;transform:none!important;opacity:1;z-index:4}.content::before{display:none}.content>small,.content>h2,.content>p,.recent-title{display:none}.content .chips{display:contents}.content button,.content input,.content .chips button{position:absolute;pointer-events:auto;border:1px solid #ffffff33!important;background:linear-gradient(135deg,#ffffff19,#ffffff04 50%,#c2dcff0c)!important;color:#dceafa!important;border-radius:22px;padding:15px 21px!important;backdrop-filter:blur(18px) saturate(1.3);box-shadow:inset 0 1px 0 #ffffff30,inset 0 -1px 0 #ffffff09,0 12px 35px #00000040;font-size:12px;transition:background .25s,border-color .25s,box-shadow .25s}.content button:hover{box-shadow:inset 0 1px 0 #ffffff60,0 0 25px #8dbdff17}.content button.selected{border-color:#a1ccff!important;background:#accdff22!important}.content input{left:27%;top:17%;width:28%;outline:none;padding:16px 23px!important;font-size:12px}.content input::placeholder{color:#9aaac0}.categories button:nth-child(1){left:16%;top:38%}.categories button:nth-child(2){left:26%;top:61%}.categories button:nth-child(3){left:62%;top:23%}.categories button:nth-child(4){left:72%;top:43%}.content .song-results button{font-size:10px!important;min-width:140px;text-align:left}.song-results button:nth-child(1){left:15%;top:77%}.song-results button:nth-child(2){left:43%;top:75%}.song-results button:nth-child(3){left:70%;top:68%}.song-results button small{color:#879bb6!important;font-size:9px;display:block;margin:7px 0 0}.content> .chips:not(.categories):not(.song-results)>button:nth-child(1){left:22%;top:29%}.content> .chips:not(.categories):not(.song-results)>button:nth-child(2){left:67%;top:39%}.content> .chips:not(.categories):not(.song-results)>button:nth-child(3){left:44%;top:69%}.content .chips>p{position:absolute;left:35%;top:68%;font-size:11px;color:#8a9cb4;width:35%}.content .recent-title+.chips>button:nth-child(n){top:74%;left:58%}.gesture svg{stroke:#8699b3}.wave i{background:#a3bfdc}#play{background:#c0d6ee;border-radius:50%}#play svg{fill:#09101b}.folio{opacity:.5}.scene-lines{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}.scene-lines line{stroke:#c6dfff;stroke-opacity:.27;stroke-width:.7;stroke-dasharray:1;animation:lineIn .75s ease both}.scene-lines circle{fill:#c5ddf5;opacity:.65}.scene-node{animation:glassIn .7s cubic-bezier(.18,.7,.2,1) both;animation-delay:var(--arrival,0ms)}.transitioning .content,.transitioning .scene-lines,.transitioning .views{opacity:0;transition:opacity .2s;pointer-events:none}.transitioning .content *{pointer-events:none}.views:not(.transitioning .views){transition:opacity .5s}.content{transition:opacity .22s}.scene-lines{transition:opacity .2s}@keyframes glassIn{from{opacity:0;translate:0 14px;filter:blur(7px)}to{opacity:1;translate:0 0;filter:blur(0)}}@keyframes lineIn{from{opacity:0;stroke-dashoffset:1}to{opacity:1;stroke-dashoffset:0}}@media(max-width:760px){.heading h1{font-size:29px}.heading p{font-size:10px}.stage{top:25%;width:150%;left:-25%}.view-button[data-view=front],body[data-space=right] .view-button[data-view=right],body[data-space=left] .view-button[data-view=left]{left:43%;top:40%}.view-button span{font-size:27px}.content{inset:0;width:100%;height:100%;min-height:0}.content input{left:10%;top:25%;width:66%}.categories button:nth-child(1){left:8%;top:39%}.categories button:nth-child(2){left:13%;top:58%}.categories button:nth-child(3){left:73%;top:35%}.categories button:nth-child(4){left:75%;top:56%}.content .song-results button{min-width:0;padding:12px!important;font-size:9px!important}.song-results button:nth-child(1){left:6%;top:75%}.song-results button:nth-child(2){left:53%;top:72%}.song-results button:nth-child(3){left:33%;top:85%}.content> .chips:not(.categories):not(.song-results)>button:nth-child(1){left:8%;top:30%}.content> .chips:not(.categories):not(.song-results)>button:nth-child(2){left:62%;top:58%}.content> .chips:not(.categories):not(.song-results)>button:nth-child(3){left:19%;top:73%}.content .chips>p{left:17%;top:66%;width:65%}.gesture{bottom:2%;left:8%}.song-results button small{display:block;margin:5px 0 0}.content .recent-title+.chips>button:nth-child(n){left:48%;top:78%}}
@media(prefers-reduced-motion:reduce){.scene-node,.scene-lines line{animation:none!important}}
.content .recent-title+.chips>button:nth-child(1){left:15%;top:79%}.content .recent-title+.chips>button:nth-child(2){left:43%;top:81%}.content .recent-title+.chips>button:nth-child(3){left:70%;top:77%}.content .recent-title+.chips>p{top:81%}.content .song-results>p{top:78%}.content input{border-radius:28px}.scene-node:focus-visible{outline:2px solid #b9dcff;outline-offset:4px}
@media(max-width:760px){.content .recent-title+.chips>button:nth-child(1){left:4%;top:82%}.content .recent-title+.chips>button:nth-child(2){left:52%;top:80%}.content .recent-title+.chips>button:nth-child(3){left:29%;top:90%}.content .recent-title+.chips>p{top:81%}}
/* Full-height scene with a cool luminous edge pass over the rendered ice. */
main{height:calc(100svh - 88px)}.stage{filter:url(#ice-rim);transition:filter .4s}body[data-space=left] .stage{filter:url(#ice-rim) brightness(1.2)}.content button[aria-pressed=true]{border-color:#b9e1ff!important}.gesture{bottom:5%}@media(max-width:760px){main{height:calc(100svh - 68px)}}
/* One fine edge pass is applied to both stills and moving frames. */
.stage,body[data-space=left] .stage{filter:url(#ice-rim) brightness(var(--ice-light,1));transition:filter 1s cubic-bezier(.4,0,.2,1)}
/* Brighter connectors retain their fine stroke. */
.scene-lines line{stroke:#d7ebff;stroke-opacity:.68;stroke-width:.8}.scene-lines circle{fill:#e4f3ff;opacity:.95}
/* Reference-inspired dark capsules with a moving iridescent rim. */
@property --rim-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.content button,.content .chips button,.content input{border-radius:999px!important;border:1px solid transparent!important;background:linear-gradient(110deg,#08090b 8%,#111418 60%,#252a30 100%) padding-box,conic-gradient(from var(--rim-angle),#ffffff35 0deg,#dce8f58c 65deg,#ffffff20 125deg,#79f8eb 175deg,#879cff 209deg,#d492d9 237deg,#e7cf85 265deg,#ffffff40 305deg,#ffffff35 360deg) border-box!important;box-shadow:inset 0 2px 5px #ffffff21,inset 0 -3px 7px #000c,0 0 10px #b3dcff15,0 5px 14px #0008!important;backdrop-filter:none!important;color:#f1f4f8!important;animation:glassIn .7s cubic-bezier(.18,.7,.2,1) both,rimFlow 8s linear infinite!important;animation-delay:var(--arrival,0ms),0s!important;transition:box-shadow .3s,filter .3s!important}
.content button:hover,.content .chips button:hover{box-shadow:inset 0 2px 6px #ffffff40,inset 0 -2px 5px #000a,0 0 16px #83eaff38,0 5px 14px #0008!important;filter:brightness(1.15)}
.content button.selected,.content button[aria-pressed=true]{background:linear-gradient(110deg,#080c0e,#13292c 80%,#286269) padding-box,conic-gradient(from var(--rim-angle),#eefeff,#70ffee,#96a7ff,#e6b6db,#eefeff) border-box!important;box-shadow:inset 0 1px 6px #cefffa40,0 0 13px #68eee52a!important}.content input:focus{box-shadow:inset 0 1px 6px #ffffff30,0 0 16px #8fe6ff30!important;outline:none}.content input::placeholder{color:#c0c6d0}.content .song-results button small{color:#aeb9c8!important}
@keyframes rimFlow{to{--rim-angle:360deg}}
@media(prefers-reduced-motion:reduce){.content button,.content .chips button,.content input{animation:none!important}}

/* Flow and rim lighting now come directly from the Blender geometry render. */
.stage,body[data-space=left] .stage{filter:none;transition:none;mix-blend-mode:screen}
.stage video.idle-flow{display:none}.stage video.idle-active{display:block}
#clip-layer{position:absolute;inset:0;z-index:1;pointer-events:none}
#clip-layer video.active{animation:flowReveal .16s linear both}
@keyframes flowReveal{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#clip-layer video.active{animation:none}}
/* A restrained cool bloom follows both the idle and transition footage. */
.stage,body[data-space=left] .stage{filter:url(#ice-soft-bloom)}
/* Lift the background typography and orbital geometry without flattening the scene. */
.ghost{color:#afc9ef12}.coordinate{opacity:.24}.coordinate svg{stroke:#b8d5fa;stroke-width:.85}.object-note{color:#d3e5ff}
/* Two flat-color bands pulse outward like a speaker diaphragm. */
.sound-rings{position:absolute;left:51%;top:47%;width:min(49vw,620px);aspect-ratio:1;translate:-50% -50%;z-index:-1;pointer-events:none;isolation:isolate}.sound-ring{position:absolute;inset:0;border-radius:50%;border:22px solid;will-change:transform,opacity;transform-origin:center}.ring-inner{border-color:#087d96;animation:speakerInner 3.2s cubic-bezier(.2,.65,.25,1) infinite}.ring-outer{border-color:#4543a8;animation:speakerOuter 3.2s cubic-bezier(.2,.65,.25,1) infinite}.ring-inner{z-index:2}.ring-outer{z-index:1}
@keyframes speakerInner{0%{transform:scale(.66);opacity:0}9%{transform:scale(.72);opacity:.64}17%{transform:scale(.69);opacity:.58}28%{transform:scale(.85);opacity:.64}40%{transform:scale(.82);opacity:.5}76%{transform:scale(1.18);opacity:.19}100%{transform:scale(1.4);opacity:0}}
@keyframes speakerOuter{0%,10%{transform:scale(.7);opacity:0}23%{transform:scale(.86);opacity:.56}31%{transform:scale(.83);opacity:.48}44%{transform:scale(1.02);opacity:.53}54%{transform:scale(.99);opacity:.42}85%{transform:scale(1.38);opacity:.13}100%{transform:scale(1.56);opacity:0}}
@media(max-width:760px){.sound-rings{top:45%;width:78vw;left:51%}.sound-ring{border-width:15px}}
@media(prefers-reduced-motion:reduce){.ring-inner{animation:none;transform:scale(.9);opacity:.28}.ring-outer{animation:none;transform:scale(1.13);opacity:.23}}
/* Synchronized, more opaque two-color speaker bands. */
.ring-inner{inset:8%;animation:speakerTogether 3.2s cubic-bezier(.2,.65,.25,1) infinite}.ring-outer{inset:-5%;animation:speakerTogether 3.2s cubic-bezier(.2,.65,.25,1) infinite}
@keyframes speakerTogether{0%{transform:scale(.66);opacity:0}9%{transform:scale(.72);opacity:.92}17%{transform:scale(.69);opacity:.85}28%{transform:scale(.85);opacity:.94}40%{transform:scale(.82);opacity:.8}76%{transform:scale(1.18);opacity:.46}100%{transform:scale(1.4);opacity:0}}
@media(prefers-reduced-motion:reduce){.ring-inner,.ring-outer{animation:none;transform:scale(1);opacity:.65}}
/* Thicker, closely spaced bands with a faster shared pulse. */
.sound-ring{border-width:34px}.ring-inner{inset:4%;animation-duration:2.2s}.ring-outer{inset:-4%;animation-duration:2.2s}
@media(max-width:760px){.sound-ring{border-width:23px}}
/* Start the pulse outside the ice cluster; keep the recoil outside as well. */
.sound-rings{width:min(72vw,900px);top:47%}
@keyframes speakerTogether{0%{transform:scale(.98);opacity:0}9%{transform:scale(1.02);opacity:.92}17%{transform:scale(1);opacity:.85}28%{transform:scale(1.1);opacity:.94}40%{transform:scale(1.08);opacity:.8}76%{transform:scale(1.3);opacity:.46}100%{transform:scale(1.46);opacity:0}}
@media(max-width:760px){.sound-rings{width:116vw;top:45%}}
/* Softer translucent bands, retaining the outer start radius and timing. */
@keyframes speakerTogether{0%{transform:scale(.98);opacity:0}9%{transform:scale(1.02);opacity:.48}17%{transform:scale(1);opacity:.42}28%{transform:scale(1.1);opacity:.5}40%{transform:scale(1.08);opacity:.38}76%{transform:scale(1.3);opacity:.18}100%{transform:scale(1.46);opacity:0}}
@media(prefers-reduced-motion:reduce){.ring-inner,.ring-outer{opacity:.3}}
/* Cropped record surfaces: concentric grooves, hub rings and restrained reflections. */
.record-textures{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}.background-record{position:absolute;width:clamp(320px,40vw,660px);aspect-ratio:1;border-radius:50%;border:1px solid #c3d0e41c;background:radial-gradient(circle,transparent 0 8%,#9aacbf20 8.2% 8.5%,transparent 8.8% 13%,#aabbd326 13.2% 13.5%,transparent 13.8% 20%,#05070a10 20.3%),conic-gradient(from 25deg,#05070a00 0deg,#b8c7d329 38deg,#12161a0a 62deg,#00000000 155deg,#aebfc324 206deg,#07090c05 228deg,#00000000 360deg),repeating-radial-gradient(circle,#8494ab19 0px,#8494ab19 .6px,#04060935 1px,#04060935 3px);mask-image:radial-gradient(circle,transparent 0 7.5%,black 8.2% 66%,transparent 71%);opacity:.65}.record-left{left:-22%;top:12%;rotate:-19deg}.record-right{right:-23%;top:-11%;rotate:31deg;opacity:.53}.background-record:after{content:'';position:absolute;inset:26%;border:1px solid #bac8df32;border-radius:50%;box-shadow:0 0 0 6px #a5bcd308,0 0 0 28px #97aec40a}.record-arc{position:absolute;width:66%;aspect-ratio:1;border:1px solid #b7c9e31a;border-radius:50%}.arc-left{left:-24%;top:-34%;transform:rotate(-25deg) scaleY(.86)}.arc-right{right:-24%;top:-42%;transform:rotate(20deg) scaleY(.9)}
@media(max-width:760px){.background-record{width:80vw}.record-left{left:-51%;top:22%}.record-right{right:-47%;top:4%}.record-arc{width:110%}.arc-left{left:-65%;top:1%}.arc-right{right:-69%;top:-9%}}
/* Wider sound bands with the existing spacing and pulse. */
.sound-ring{border-width:46px}@media(max-width:760px){.sound-ring{border-width:31px}}
/* Monochrome circular outlines frame the scene without adding motion. */
.outline-circles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1;color:#aabbd2}.outline-circles i{position:absolute;display:block;aspect-ratio:1;border:1px solid currentColor;border-radius:50%;opacity:.18}.outline-circles i:nth-child(1){width:25vw;left:-9vw;top:2%}.outline-circles i:nth-child(2){width:19vw;left:-6vw;top:calc(2% + 3vw);opacity:.1}.outline-circles i:nth-child(3){width:31vw;right:-10vw;bottom:-13vw}.outline-circles i:nth-child(4){width:25vw;right:-7vw;bottom:-10vw;opacity:.11}.outline-circles i:nth-child(5){width:8vw;right:13%;top:7%;opacity:.23}.outline-circles i:nth-child(6){width:12vw;left:15%;bottom:9%;opacity:.13}
@media(max-width:760px){.outline-circles i:nth-child(1){width:49vw;left:-24vw}.outline-circles i:nth-child(2){width:39vw;left:-19vw;top:calc(2% + 5vw)}.outline-circles i:nth-child(3){width:62vw;right:-32vw;bottom:-15vw}.outline-circles i:nth-child(4){width:50vw;right:-26vw;bottom:-9vw}.outline-circles i:nth-child(5){width:18vw;right:8%;top:12%}.outline-circles i:nth-child(6){width:23vw;left:-8%;bottom:24%}}
/* Main view titles share the ECHO wordmark's font and heavy weight. */
.heading h1,.view-button span{font-family:'Helvetica Neue',Helvetica,Arial,'Microsoft YaHei',sans-serif;font-weight:900;letter-spacing:-.055em;-webkit-text-stroke:1.2px #000;paint-order:stroke fill}.view-button em{font-weight:700;letter-spacing:1px;-webkit-text-stroke:0}.heading h1{line-height:1.13}@media(max-width:760px){.heading h1,.view-button span{-webkit-text-stroke:1px #000}}
/* Larger primary labels, centered more closely on the ice cluster. */
.view-button span{font-size:42px}.view-button[data-view=front],body[data-space=right] .view-button[data-view=right],body[data-space=left] .view-button[data-view=left]{left:51%;top:46%;transform:translate(-50%,-50%)!important}.view-button em{font-size:10px;margin-top:7px}
@media(max-width:760px){.view-button span{font-size:35px}.view-button[data-view=front],body[data-space=right] .view-button[data-view=right],body[data-space=left] .view-button[data-view=left]{left:51%;top:46%;width:auto}.view-button em{font-size:9px}}
/* Keep all decorative line art below the ice and interactive connectors. */
.coordinate,.record-textures,.outline-circles{z-index:-1}.stage{z-index:2}.scene-lines{z-index:3}
/* Fade background geometry under the glass so screen blending cannot bring it forward. */
.coordinate{mask-image:radial-gradient(ellipse at 50% 58%,transparent 0 27%,#000 55%)}
/* Soft circular light behind the center of the ice scene. */
.center-aura{position:absolute;left:51%;top:47%;width:min(76vw,960px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;z-index:-1;background:radial-gradient(circle,#7daedb30 0%,#427eae28 20%,#2849711c 40%,#15233d0c 58%,transparent 73%)}
@media(max-width:760px){.center-aura{width:130vw;top:45%}}
/* Broad icy-blue radial wash, spanning the full backdrop behind the records and ice. */
.center-aura{left:50%;top:50%;width:100%;height:100%;aspect-ratio:auto;translate:-50% -50%;border-radius:0;background:radial-gradient(ellipse 57% 71% at 50% 48%,#a9dfff25 0%,#7cc5f21f 24%,#438bb81a 47%,#234b6d12 67%,transparent 88%),radial-gradient(ellipse 30% 42% at 26% 38%,#79bde60c 0%,transparent 100%),radial-gradient(ellipse 34% 48% at 76% 60%,#75b4e90d 0%,transparent 100%);filter:saturate(.9)}
@media(max-width:760px){.center-aura{left:50%;top:48%;width:125%;height:90%}}
.center-aura{background:radial-gradient(ellipse 61% 76% at 50% 48%,#a9dfff52 0%,#7cc5f23e 23%,#438bb832 46%,#234b6d20 67%,transparent 88%),radial-gradient(ellipse 34% 46% at 26% 38%,#79bde61c 0%,transparent 100%),radial-gradient(ellipse 38% 52% at 76% 60%,#75b4e91f 0%,transparent 100%)}
/* Slightly clearer background rings and record outlines. */
.coordinate{opacity:.32}.coordinate svg{stroke-width:1}.record-arc{border-color:#b7c9e333}.outline-circles i:nth-child(1){opacity:.27}.outline-circles i:nth-child(2){opacity:.17}.outline-circles i:nth-child(3){opacity:.27}.outline-circles i:nth-child(4){opacity:.18}.outline-circles i:nth-child(5){opacity:.31}.outline-circles i:nth-child(6){opacity:.22}
/* Straighten the circular background artwork against the section-title baseline. */
.record-left,.record-right{rotate:0deg}.arc-left{transform:scaleY(.86)}.arc-right{transform:scaleY(.9)}
/* Wordmark follows the supplied bold condensed cyan/magenta offset reference. */
.logo{font-family:Impact,'Arial Narrow',sans-serif;font-stretch:condensed;font-weight:900;font-size:48px;line-height:.9;letter-spacing:-2px;color:#f4f6fb;text-shadow:-3px 0 #00e8f0,3px 0 #ff087f}.logo span{font-family:Arial,sans-serif;color:#dce4ee;text-shadow:none;font-size:12px;letter-spacing:0}
@media(max-width:760px){.logo{font-size:39px;letter-spacing:-1.7px}}
.logo{font-size:60px;letter-spacing:-2.5px}.logo span{font-size:12px}@media(max-width:760px){.logo{font-size:45px;letter-spacing:-2px}}
.logo{letter-spacing:1.5px}@media(max-width:760px){.logo{letter-spacing:1px}}

.content .personal-data-link{display:inline-flex;align-items:center;padding:12px 22px;border:1px solid #b7d9f55c;border-radius:999px;background:linear-gradient(115deg,#10161e,#263b4c);color:#dcefff;font-size:12px;text-decoration:none;position:absolute;left:54%;top:76%;z-index:8;box-shadow:inset 0 1px 2px #d1f0ff29,0 5px 18px #0006;white-space:nowrap}@media(max-width:760px){.content .personal-data-link{left:40%;top:73%;font-size:10px;padding:10px 16px}}
.content .personal-data-link{pointer-events:auto!important}

/* Archive is a scene node: shares the existing capsule material and connector. */
.content button.personal-data-link{left:71%;top:28%;display:flex;align-items:center;gap:22px;min-width:172px;text-align:left;z-index:8;pointer-events:auto}
.content button.personal-data-link span{font-size:13px;font-weight:500;letter-spacing:1px}.content button.personal-data-link small{display:block;margin-top:7px;color:#aab9c9;font-size:9px;letter-spacing:.4px;font-weight:400}
.content button.personal-data-link svg{width:19px;height:19px;fill:none;stroke:#d4eaff;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.transitioning .content button.personal-data-link{pointer-events:none!important}
@media(max-width:760px){.content button.personal-data-link{left:auto;right:7%;top:24%;min-width:151px;gap:14px;padding:13px 18px!important}.content button.personal-data-link span{font-size:12px}.content button.personal-data-link small{font-size:8px}}

/* Let the opening camera settle before revealing the main scene fully. */
body>main,body>header{transition:opacity .95s cubic-bezier(.22,1,.36,1)}
html.home-arriving body>main{opacity:.18}
html.home-arriving body>header{opacity:.35}
@media(prefers-reduced-motion:reduce){html.home-arriving body>main,html.home-arriving body>header{opacity:1}body>main,body>header{transition:none}}

/* Black opening veil fades away when the opening view is ready. */
html::after{content:"";position:fixed;inset:0;z-index:2147483001;background:#000;opacity:0;pointer-events:none;transition:opacity .65s cubic-bezier(.22,1,.36,1)}
html.home-arriving::after{opacity:1}
@media(prefers-reduced-motion:reduce){html::after{display:none}}

.transitioning .heading{opacity:0;transition:opacity .15s ease}.heading{transition:opacity .15s ease}

/* Keep all ice views within the viewport, including narrow desktop windows. */
.stage{width:min(79%,1040px,112svh);height:auto;aspect-ratio:1.6;left:50%;translate:-50% 0}
.stage img,.stage video{object-fit:contain}
@media(max-width:760px){.stage{width:100%;max-width:680px;left:50%;top:21%;height:auto;aspect-ratio:1.6}}