/* Two distinct atmospheres, built from light CSS layers around the real screens. */
.listening-story{background:var(--ink)}
.listening-pin{isolation:isolate;background:var(--ink)}
.listening-top{position:relative;z-index:3}
.listening-top>.eyebrow,.mode-controls button{transition:color .6s,border-color .6s}
.mode-controls{gap:8px;border:1px solid #02cbbe30;padding:5px;border-radius:30px;background:#080d1080;transition:background .6s,border-color .6s}
.mode-controls button{padding:0 18px;border:0;border-radius:24px;color:var(--paper)}
.mode-controls button[aria-pressed=true]{background:var(--aqua);color:var(--ink);border:0}
.mode-panels{position:relative;z-index:0}
.mode-panel{position:relative;isolation:isolate}
.mode-copy{position:relative;z-index:2}
.mode-copy h2{transition:color .4s}
.mode-copy>p{max-width:440px}
.mode-feature{margin-top:25px;padding-top:18px}
.mode-backdrop{position:absolute;inset:-110px calc(-1 * var(--gutter)) -50px;z-index:-3;pointer-events:none;overflow:hidden}
.immersive-backdrop{background:radial-gradient(ellipse at 78% 45%,#02cbbe25 0%,#02cbbe0c 40%,transparent 75%),var(--ink)}
.immersive-aura{position:absolute;inset:-15%;background:radial-gradient(ellipse at 76% 38%,#02cbbe38,transparent 35%),radial-gradient(ellipse at 70% 52%,#02cbbe0c,transparent 27%);animation:bilboAurora 15s ease-in-out infinite alternate;animation-play-state:paused}
.immersive-stars{position:absolute;inset:0;mask-image:linear-gradient(90deg,transparent 30%,#000 70%)}
.immersive-stars i{position:absolute;left:var(--star-x);top:var(--star-y);width:3px;height:3px;border-radius:50%;background:var(--aqua);box-shadow:0 0 13px 3px #02cbbe40;opacity:.45;animation:bilboStar 7s var(--star-delay) ease-in-out infinite;animation-play-state:paused}
.mode-visual{perspective:1200px;isolation:isolate}
.mode-device{position:relative;z-index:2;transform-style:preserve-3d;transform:translate3d(var(--mode-x,0px),var(--mode-y,0px),0);transition:transform .55s ease-out}
.mode-panel[data-mode="0"] .mode-device{animation:bilboFloat 7s ease-in-out infinite;animation-play-state:paused}
.mode-panel[data-mode="0"] .phone{transform:rotate(-5deg);box-shadow:0 30px 65px #0009,0 0 45px #02cbbe32;border-color:#02cbbe7a}
.immersive-halo{position:absolute;inset:-15% -20%;z-index:-1;background:radial-gradient(ellipse at center,#02cbbe22 0%,#02cbbe07 38%,transparent 65%);transform:scale(var(--mode-scale,1));transition:transform .2s linear;pointer-events:none}
.sound-rings{width:135%;z-index:0;transform:rotateX(20deg) rotateZ(-15deg) scale(var(--mode-scale,1));transition:transform .2s linear}
.sound-rings i{border:1px solid #02cbbe80;box-shadow:0 0 22px #02cbbe10,inset 0 0 22px #02cbbe0b;animation:bilboSound 6s ease-out infinite;animation-play-state:paused!important}
.sound-rings i:nth-child(2){width:100%;animation-delay:-1.5s}
.sound-rings i:nth-child(3){width:100%;animation-delay:-3s}
.sound-rings i:nth-child(4){width:100%;animation-delay:-4.5s}
.listening-wave{display:flex;align-items:center;gap:3px;margin-top:25px;min-height:38px}
.listening-wave i{display:block;flex:none;width:3px;height:var(--wave-height);border-radius:3px;background:var(--aqua);transform-origin:center;animation:bilboWave 1.7s var(--wave-delay) ease-in-out infinite;animation-play-state:paused}
.listening-wave span{font-size:11px;color:var(--muted);margin-left:16px;white-space:nowrap}
.study-backdrop{background:var(--ink);transition:opacity .65s}
.study-backdrop::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 72% 45%,#02cbbe0c,transparent 60%)}
.mode-panel[data-mode="1"]{color:var(--paper)}
.mode-panel[data-mode="1"] .mode-copy>.eyebrow{color:var(--aqua)}
.mode-panel[data-mode="1"] .mode-copy h2 em{color:var(--aqua)}
.mode-panel[data-mode="1"] .mode-copy>p{color:#bac7ca}
.mode-panel[data-mode="1"] .mode-feature{color:var(--aqua);border-color:var(--line)}
.mode-panel[data-mode="1"] .phone{box-shadow:0 35px 50px -20px #000a,0 0 35px #02cbbe0d;border-color:#02cbbe55;transform:rotate(1deg)}
.study-focus-frame{position:absolute;inset:4% 7% 3%;z-index:1;pointer-events:none;transform:scale(var(--study-frame-scale,1));transition:transform .2s linear}
.study-focus-frame i{position:absolute;width:30px;height:30px;border:solid #02cbbea6;border-width:1px 0 0 1px}
.study-focus-frame i:nth-child(1){left:0;top:0}.study-focus-frame i:nth-child(2){right:0;top:0;transform:rotate(90deg)}
.study-focus-frame i:nth-child(3){right:0;bottom:0;transform:rotate(180deg)}.study-focus-frame i:nth-child(4){left:0;bottom:0;transform:rotate(270deg)}
.study-focus-frame>span{position:absolute;bottom:-25px;left:0;right:0;text-align:center;font-size:9px;text-transform:uppercase;letter-spacing:.15em;color:var(--aqua)}
.study-excerpt{margin-top:25px;padding-left:18px;border-left:2px solid var(--aqua)}
.excerpt-label{display:block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.study-excerpt>p{font-size:clamp(14px,1.22vw,19px);line-height:1.7;color:var(--paper)}
.study-excerpt>p span{padding:2px 3px;background:linear-gradient(90deg,#02cbbe33,#02cbbe33) no-repeat left center;background-size:calc(var(--study-mark,1) * 100%) 82%;transition:background-size .2s linear}
.study-excerpt>p span:last-child{background-size:calc(var(--study-mark-two,1) * 100%) 82%}
.excerpt-note{display:flex;align-items:center;gap:7px;margin-top:12px;font-size:11px;color:var(--aqua);opacity:var(--study-note,1);transform:translateX(calc((1 - var(--study-note,1)) * -10px));transition:opacity .3s,transform .3s}
.excerpt-note svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
.story-enabled[data-active-mode="1"] .listening-top>.eyebrow{color:var(--muted)}
.story-enabled[data-active-mode="1"] .mode-controls{background:#080d1080;border-color:#02cbbe38}
.story-enabled[data-active-mode="1"] .mode-controls button{color:var(--paper)}
.story-enabled[data-active-mode="1"] .mode-controls button[aria-pressed=true]{background:var(--aqua);color:var(--ink)}
.story-enabled[data-active-mode="1"] .story-progress{background:#02cbbe22}
.story-enabled[data-active-mode="1"] .story-progress span{background:var(--aqua)}
.mode-panel.effects-visible .immersive-aura,.mode-panel.effects-visible .immersive-stars i,.mode-panel.effects-visible .listening-wave i,.mode-panel.effects-visible[data-mode="0"] .mode-device{animation-play-state:running}
.mode-panel.effects-visible .sound-rings i{animation-play-state:running!important}
.mode-panel:not(.is-active) .immersive-aura,.mode-panel:not(.is-active) .immersive-stars i,.mode-panel:not(.is-active) .listening-wave i,.mode-panel:not(.is-active) .mode-device{animation-play-state:paused}
.story-enabled .mode-panel:not(.is-active) .sound-rings i{animation-play-state:paused!important}
.page-is-hidden .mode-panel *{animation-play-state:paused!important}
@keyframes bilboAurora{0%{transform:translate(-2%,2%) scale(.95);opacity:.65}100%{transform:translate(3%,-3%) scale(1.08);opacity:1}}
@keyframes bilboStar{0%,100%{transform:translateY(0);opacity:.15}50%{transform:translateY(-16px);opacity:.7}}
@keyframes bilboFloat{0%,100%{transform:translate3d(var(--mode-x,0px),calc(var(--mode-y,0px) + 5px),0) rotateY(-5deg)}50%{transform:translate3d(var(--mode-x,0px),calc(var(--mode-y,0px) - 6px),0) rotateY(2deg)}}
@keyframes bilboSound{0%{transform:scale(.38);opacity:0}15%{opacity:.65}100%{transform:scale(1.12);opacity:0}}
@keyframes bilboWave{0%,100%{transform:scaleY(.28);opacity:.45}50%{transform:scaleY(1);opacity:1}}
@media(min-width:800px) and (min-height:620px){
 .story-enabled{height:300svh}
 .story-enabled .mode-panel{transition:opacity .65s,transform .8s cubic-bezier(.2,.8,.2,1),visibility .65s}
 .story-enabled .mode-device{height:min(64svh,620px);aspect-ratio:402/856}
 .story-enabled .mode-visual .phone{width:100%;height:100%;aspect-ratio:402/856}
 .story-enabled .mode-copy h2{font-size:clamp(40px,4.5vw,72px);margin:20px 0}
 .story-enabled .mode-copy>p{font-size:clamp(14px,1.15vw,17px);line-height:1.65}
}
@media(min-width:800px) and (max-height:800px){
 .mode-copy h2{margin:16px 0!important}.mode-feature{margin-top:18px;padding-top:14px}
 .listening-wave,.study-excerpt{margin-top:17px}.study-excerpt>p{font-size:14px}
 .excerpt-note{margin-top:7px}.listening-wave span{font-size:10px}
 .story-enabled .mode-device{height:60svh}
}
@media(max-width:1100px){.listening-wave i:nth-of-type(n+23){display:none}.listening-wave span{margin-left:10px;font-size:10px}.study-focus-frame{inset:4% 0% 3%}.study-focus-frame>span{font-size:8px;letter-spacing:.08em}.mode-controls button{font-size:11px;padding-inline:13px}}
@media(max-width:799px),(max-height:619px){
 .listening-pin{padding-top:0}.listening-top{padding-block:32px 0}
 .mode-panel{padding-block:60px 75px}
 .mode-backdrop{inset:0 calc(-1 * var(--gutter))}
 .mode-panel[data-mode="0"] .mode-backdrop{top:-70px}
 .mode-panel[data-mode="1"]{border-top:0}
 .mode-copy h2{font-size:clamp(38px,5.4vw,58px)}
 .mode-device{width:clamp(210px,30vw,280px)}
 .mode-visual .phone{width:100%}
 .study-focus-frame{inset:-5% -4%}
 .study-focus-frame>span{bottom:-24px}
 .immersive-stars{mask-image:none;opacity:.45}
}
@media(max-width:560px){
 .mode-panel{gap:65px;padding-block:55px 95px}
 .mode-copy h2{font-size:50px}
 .mode-visual{padding-inline:15px}
 .mode-device{width:min(80%,270px)}
 .mode-visual .phone{width:100%}
 .mode-panel[data-mode="0"] .phone{transform:rotate(-4deg)}
 .sound-rings{width:155%}
 .study-focus-frame{inset:0 1% -2%}
 .study-focus-frame>span{font-size:9px;bottom:-29px}
 .study-excerpt>p{font-size:16px}
  .listening-wave i:nth-of-type(n+23){display:block}
 .listening-wave span{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
 .mode-panel *{animation:none!important;transition:none!important}
 .mode-device{transform:none!important}
 .sound-rings i{animation:none!important;transform:none;opacity:.3}
 .sound-rings i:nth-child(2){transform:scale(.8)}.sound-rings i:nth-child(3){transform:scale(.6)}.sound-rings i:nth-child(4){transform:scale(.4)}
}
@media(max-width:360px){.listening-wave i:nth-of-type(n+25){display:none}}