@font-face{font-family:'Cormorant Garamond';font-weight:300 600;font-display:swap;src:url(assets/fonts/cormorant-garamond.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:400 600;font-display:swap;src:url(assets/fonts/hanken-grotesk.woff2) format('woff2')}
:root{
  --white:#fff;--cloud:#f4f9fd;--sky-200:#bfe5fb;--sky-400:#7cc8f5;--sky-700:#1f6fa8;
  --ink:#14306b;--ink-soft:#44597f;--pink-300:#ffc2e0;--pink-500:#ff7ebb;
  --bubblegum:linear-gradient(135deg,#ffd0e7,#ff9fce);
  --display:'Cormorant Garamond',Georgia,serif;--text:'Hanken Grotesk',system-ui,sans-serif;
  --glow:151 207 161;--H:100vh;--gut:max(16px,env(safe-area-inset-left,0px));
  --line:rgba(20,48,107,.14);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:#dfeefa;color:var(--ink);font:400 1rem/1.5 var(--text);overflow:hidden;color-scheme:light}
::selection{background:var(--pink-300);color:var(--ink)}
:focus-visible{outline:2px solid var(--sky-700);outline-offset:2px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button,a{transition:transform .1s ease-out}
button:active,a.cta:active{transform:scale(.97)}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* Review shell */
.shell{position:fixed;inset:0;display:flex;flex-direction:column}
.bar{flex:none;display:flex;align-items:center;gap:.5rem;min-height:3rem;padding:.375rem var(--gut);background:#fff;box-shadow:0 1px 0 var(--line);z-index:30;overflow-x:auto;scrollbar-width:none}
.bar::-webkit-scrollbar{display:none}
.seg{display:flex;flex:none;padding:.1875rem;border-radius:.625rem;background:#e9f2fa}
.seg button{min-height:2.25rem;padding:0 .75rem;border-radius:.4375rem;font-size:.875rem;font-weight:500;color:var(--ink-soft);white-space:nowrap}
.seg button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(20,48,107,.2)}
.seg b{font-variant-numeric:tabular-nums;font-weight:600;margin-right:.375rem;color:var(--sky-700)}
.bar .sp{flex:1}
#dirs{flex:0 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}#dirs::-webkit-scrollbar{display:none}#dirs button{flex:none}
.bar>:not(#dirs){flex-shrink:0}
.floor{flex:1;min-height:0;display:flex;justify-content:center;position:relative}
.frame{position:relative;width:100%;height:100%;overflow:hidden;background:#fff}
.frame.phone{width:390px;max-width:100%;box-shadow:0 0 0 1px var(--line),0 1rem 3rem rgba(20,48,107,.25)}
.stage{height:100%;overflow-y:auto;overflow-x:hidden;container:stage/inline-size;scrollbar-color:var(--sky-400) transparent;scrollbar-width:thin;position:relative;background:#fff}
.notes{position:absolute;top:.75rem;right:max(.75rem,env(safe-area-inset-right,0px));width:min(22rem,calc(100% - 1.5rem));max-height:calc(100% - 1.5rem);overflow:auto;padding:1.125rem 1.25rem;border-radius:1rem;background:#fff;box-shadow:0 1rem 2.5rem rgba(20,48,107,.28),0 0 0 1px var(--line);z-index:25;font-size:.9375rem;transform-origin:100% 0;transition:opacity .2s,transform .25s cubic-bezier(.2,.8,.2,1)}
.notes[hidden]{display:block;opacity:0;transform:scale(.96);pointer-events:none;visibility:hidden}
.notes h2{font:500 1.625rem/1.1 var(--display);margin-bottom:.5rem}
.notes p{color:var(--ink-soft);margin-bottom:.75rem}
.notes li{padding:.25rem 0;font-size:.875rem}
.notes a{color:var(--sky-700)}
.notes h3{font-size:.8125rem;font-weight:600;margin:.75rem 0 .125rem}

/* Shared parts */
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:0 1.5rem;border-radius:62.5rem;background:var(--bubblegum);color:var(--ink);font-weight:600;font-size:1rem;text-decoration:none;white-space:nowrap;box-shadow:0 .625rem 1.5rem -.5rem rgba(255,126,187,.8),inset 0 1px 0 rgba(255,255,255,.7)}
.cta.sm{min-height:2.25rem;padding:0 1rem;font-size:.875rem}
.next-note{font-size:.8125rem;color:var(--ink-soft)}
.wm{font:500 1.5rem/1 var(--display);letter-spacing:-.01em}
.glass{background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:0 .75rem 2rem rgba(20,48,107,.28),inset 0 1px 0 rgba(255,255,255,.7),0 0 0 .5px rgba(20,48,107,.16)}
.cues{display:flex;gap:.25rem}
.cue-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;min-width:5.25rem;min-height:3.75rem;padding:.375rem .625rem;border-radius:.875rem;font-size:.8125rem;font-weight:500;color:var(--ink-soft)}
.cue-btn[aria-pressed=true]{background:var(--ink);color:#fff}
.ic{position:relative;width:1.75rem;height:1.125rem;display:block}
.ic.m::before{content:'';position:absolute;inset:0;margin:auto;width:1.125rem;height:1.125rem;border-radius:50%;background:radial-gradient(circle at 35% 30%,#eef9d0,rgb(var(--glow)) 55%,#2c6b5c)}
.ic.v{border-radius:.25rem;background:radial-gradient(closest-side,#fff 40%,#2a3a5e 100%);box-shadow:inset 0 0 0 1px rgba(127,140,170,.6)}
.ic.g{border-radius:.25rem;background:#1c2748;overflow:hidden}
.ic.g::before{content:'';position:absolute;left:50%;top:-.5rem;width:1.75rem;height:1.25rem;translate:-50% 0;background:radial-gradient(closest-side,rgb(var(--glow)),transparent)}
.ic.g::after{content:'';position:absolute;left:50%;top:0;width:.625rem;height:.1875rem;translate:-50% 0;background:#000;border-radius:0 0 .125rem .125rem}
.rh{display:flex;gap:.125rem;padding:.1875rem;border-radius:.625rem;background:rgba(20,48,107,.08)}
.rh button{min-height:2.25rem;padding:0 .625rem;border-radius:.4375rem;font-size:.8125rem;font-weight:500;white-space:nowrap}
.rh button[aria-pressed=true]{background:#fff;box-shadow:0 1px 3px rgba(20,48,107,.25)}
.phase-tag{font-size:.8125rem;font-variant-numeric:tabular-nums;color:var(--ink-soft);white-space:nowrap;min-width:5rem;text-align:center}

/* The Mac screen */
.screen{position:relative;overflow:hidden;background:url(assets/plates/sky.webp) center/cover #bfe5fb;container-type:inline-size;font:400 .75rem/1.45 -apple-system,BlinkMacSystemFont,var(--text),sans-serif;color:#1d2433}
.zoomer{position:absolute;inset:0;transform-origin:50% 0;font-size:clamp(.5625rem,1.15cqw,.875rem)}
.wall{position:absolute;inset:0;background:url(assets/plates/dusk.webp) center/cover;opacity:0;transition:opacity .6s}
.screen[data-page=desk][data-solo=glow] .wall{opacity:1}
.screen[data-page=desk][data-solo=glow] .win,.screen[data-page=desk][data-solo=glow] .mbar{opacity:0}
.screen[data-page=deck] .wall{opacity:1;transition:none}
.screen[data-page=deck] .win.full{left:10%;right:10%;top:24%}
.mbar{position:absolute;left:0;right:0;top:0;display:flex;gap:1.25em;align-items:center;height:2em;padding:0 1.25em;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:opacity .6s}
.win{position:absolute;overflow:hidden;border-radius:.75em;background:#fff;box-shadow:0 1.25em 3em rgba(20,30,60,.3),0 0 0 .5px rgba(0,0,0,.2);transition:opacity .6s}
.tb{display:flex;align-items:center;gap:.75em;height:2.25em;padding:0 .875em;background:#f3f4f6;border-bottom:1px solid #e3e5ea;font-weight:500;color:#515a6b}
.tb i{display:inline-block;width:.7em;height:.7em;margin-right:.3em;border-radius:50%;background:#d6d8de}
.win.full{left:6%;right:6%;top:9%;bottom:-3%}
.win.w-main{left:21%;right:21%;top:9%;bottom:-3%}
.win.w-sheet{left:2%;top:15%;width:34%}
.win.w-mail{right:2%;top:12%;width:30%}
.pg-doc{padding:1.75em 2.25em;font-size:1.1em}
.pg-doc h4{font:600 1.85em/1.2 -apple-system,var(--text);margin:0 0 .5em}
.pg-doc h5{font:600 1.15em/1.3 -apple-system,var(--text);margin:1em 0 .25em}
.pg-doc p{margin:0 0 .75em;color:#3b4354}
.pg-sheet{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.pg-sheet td{padding:.5em .75em;border:1px solid #e6e8ec}
.pg-sheet td+td{text-align:right}
.pg-sheet tr:first-child td,.pg-sheet tr:last-child td{font-weight:600;background:#f5f6f8}
.pg-deck{display:flex;height:calc(100% - 2.25em);background:#eceef2}
.pg-deck .th{width:14%;padding:.75em;display:flex;flex-direction:column;gap:.625em}
.pg-deck .th i{aspect-ratio:16/10;background:#fff;border-radius:.25em;box-shadow:0 0 0 1px #d5d8df}
.pg-deck .th i:first-child{box-shadow:0 0 0 2px var(--sky-700)}
.pg-deck .sl{flex:1;margin:1.25em;padding:2em;background:#fff;box-shadow:0 .25em 1em rgba(20,30,60,.16);display:flex;flex-direction:column}
.pg-deck h4{font:600 2.25em/1.1 -apple-system,var(--text);margin:0 0 .5em}
.pg-deck .br{flex:1;display:flex;align-items:flex-end;gap:6%;min-height:6em}
.pg-deck .br i{flex:1;background:var(--sky-400);border-radius:.25em .25em 0 0}
.pg-mail li{padding:.625em .875em;border-bottom:1px solid #eceef1}
.pg-mail b,.pg-mail span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-mail span{color:#596273}
.ov{position:absolute;inset:0;pointer-events:none}
.v{background:radial-gradient(closest-side,transparent 50%,rgba(0,0,0,.4) 78%,rgba(0,0,0,.9) 100%);opacity:0}
.clip{overflow:hidden}
.au{position:absolute;left:50%;top:0;width:max(34cqw,16rem);height:max(17.2cqw,8rem);margin-left:calc(max(34cqw,16rem) / -2);margin-top:calc(max(17.2cqw,8rem) / -2);background:radial-gradient(closest-side,rgb(var(--glow)/.9) 20%,rgb(var(--glow)/.5) 55%,rgb(var(--glow)/0) 100%);opacity:0}
.nt{position:absolute;left:50%;top:0;width:max(13cqw,5.5rem);height:max(2.3cqw,1.25rem);translate:-50% 0;background:#000;border-radius:0 0 .625rem .625rem}
.mb{position:absolute;right:13%;bottom:13%;width:max(19cqw,7.5rem);aspect-ratio:1;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.mb:active{cursor:grabbing}
.mb canvas{position:absolute;left:-45%;top:-45%;width:190%;height:190%;pointer-events:none}
.no-gl .mb canvas{left:12%;top:12%;width:76%;height:76%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#eef9d0,rgb(var(--glow)) 55%,#2c6b5c)}

/* Content sections, shared and reshaped per direction */
.sec{padding:clamp(3.5rem,9cqw,7rem) var(--gut)}
.wrap{max-width:68rem;margin:0 auto}
.h2{font:400 clamp(2.25rem,5.5cqw,4.25rem)/1.04 var(--display);letter-spacing:-.012em;margin-bottom:clamp(1.5rem,3cqw,2.5rem)}
.note{max-width:65ch;color:var(--ink-soft);font-size:.9375rem}
.rhythms{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:.75rem}
.rcard{display:block;width:100%;text-align:left;padding:1rem 1.125rem;border-radius:.875rem;background:#fff;box-shadow:0 0 0 1px var(--line),0 .25rem .75rem rgba(20,48,107,.06)}
.rcard[aria-pressed=true]{box-shadow:0 0 0 2px var(--pink-500),0 .25rem .75rem rgba(20,48,107,.08)}
.rcard{position:relative}
.rcard h3{font:500 1.5rem/1.1 var(--display);padding-right:6.25rem;min-height:2.25em}
.gw{position:absolute;display:block;overflow:hidden;background:url(assets/plates/dusk.webp) 50% 30%/cover #1c2748;border-radius:.5rem;box-shadow:0 .25rem .75rem rgba(20,48,107,.25),0 0 0 .5px rgba(20,48,107,.3);container-type:inline-size;pointer-events:none}
.rcard .gw{top:.75rem;right:.75rem;width:5.5rem;aspect-ratio:16/10}
.gw.pip{left:4%;bottom:6%;width:max(16cqw,6.5rem);aspect-ratio:16/10;z-index:2}
.gw-a{position:absolute;left:50%;top:0;width:90cqw;height:60cqw;margin:-30cqw 0 0 -45cqw;background:radial-gradient(closest-side,rgb(var(--glow)/.9) 20%,rgb(var(--glow)/.5) 55%,rgb(var(--glow)/0) 100%);opacity:0}
.gw-n{position:absolute;left:50%;top:0;width:30cqw;height:7cqw;translate:-50% 0;background:#000;border-radius:0 0 .1875rem .1875rem}
.rcard .tm{display:block;font-size:.875rem;font-variant-numeric:tabular-nums;margin:.125rem 0 .5rem;color:var(--ink-soft)}
.rcard .ses{display:block;font-size:.8125rem;color:var(--ink-soft);margin-top:.5rem}
.rcard .warn{display:block;font-size:.8125rem;font-weight:600;margin-top:.25rem}
.tr{display:block;height:3rem;overflow:visible}
.tr path.s{fill:none;stroke:var(--sky-700);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.tr path.f{fill:rgba(124,200,245,.2)}
.tr circle{fill:var(--pink-500)}
.rail{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.25rem var(--gut) 1rem;margin:0 calc(var(--gut) * -1);scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail>li{flex:0 0 min(78cqw,19rem);scroll-snap-align:center}
.rrow{display:grid;grid-template-columns:minmax(9rem,1.1fr) minmax(0,1.4fr) minmax(0,1.5fr);gap:1rem;align-items:center;width:100%;text-align:left;padding:.75rem .5rem;border-top:1px solid var(--line)}
.rrow[aria-pressed=true]{background:rgba(255,194,224,.22)}
.rrow h3{font:500 1.375rem/1.1 var(--display)}
.rrow .tm{font-size:.875rem;font-variant-numeric:tabular-nums;color:var(--ink-soft);display:block}
.rrow .ses{font-size:.875rem;color:var(--ink-soft)}
.bars{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));margin-bottom:1.5rem}
.chart{padding:1.25rem;border-radius:.875rem;background:var(--cloud)}
.chart strong{display:block;font-weight:600}
.chart small{display:block;font-size:.8125rem;color:var(--ink-soft);margin-bottom:.75rem}
.chart p{font-size:.8125rem;font-weight:600;margin:.75rem 0 .25rem}
.barrow{display:grid;grid-template-columns:8.5rem 1fr 3.25rem;gap:.5rem;align-items:center;font-size:.8125rem;margin-bottom:.25rem}
.barrow span.t{display:block;height:.75rem;background:#fff;border-radius:.1875rem;overflow:hidden}
.barrow i{display:block;height:100%;background:#a6b6cf}
.barrow i.hi{background:var(--pink-500)}
.barrow b{font-variant-numeric:tabular-nums;text-align:right}
.chart .src{font-size:.8125rem;color:var(--ink-soft);margin-top:.75rem}
.chart .src a,.limit a{color:var(--sky-700)}
.ev{width:100%;border-collapse:collapse;font-size:.875rem;margin-bottom:1.25rem}
.ev th,.ev td{padding:.625rem .75rem .625rem 0;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.ev thead th{font-weight:600;border-top:0}
.ev tbody th{font-weight:600}
.limit{font-size:1.0625rem;font-weight:500;max-width:60ch}
.close{position:relative;overflow:hidden;text-align:center;padding:clamp(5rem,12cqw,9rem) var(--gut);background:url(assets/plates/sky.webp) center/cover #bfe5fb}
.close h2{font:400 clamp(2.5rem,6.5cqw,5rem)/1.02 var(--display);letter-spacing:-.012em;margin-bottom:1.5rem}
.close p{max-width:52ch;margin:1rem auto 0;font-size:.875rem;color:var(--ink)}
.plain{font-size:.9375rem}
@container stage (max-width:44rem){
  .rrow{grid-template-columns:1fr;gap:.25rem}
  .ev thead{display:none}
  .ev tr{display:block;padding:.625rem 0;border-top:1px solid var(--line)}
  .ev th,.ev td{display:block;border:0;padding:.0625rem 0}
  .barrow{grid-template-columns:7rem 1fr 3rem}
}

.plate2{background:#f7c9b5}
.plate2 .h2{color:var(--ink)}
.plate2 .note{color:var(--ink);background:rgba(255,255,255,.88);padding:.75rem 1rem;border-radius:.75rem}
.plate2 .rcard{background:rgba(255,255,255,.9)}
.panel{background:rgba(255,255,255,.9);border-radius:1rem;padding:.25rem .75rem;box-shadow:0 1rem 2.5rem rgba(90,50,100,.2)}
.panel .rrow:first-child{border-top:0}
/* 6 Scroll to Breathe */
.e6-pin{position:relative;height:calc(var(--H) * 6)}
.e6-stick{position:sticky;top:0;height:var(--H);overflow:hidden}
.e6-stick .screen{position:absolute;inset:0}
.over-top{position:absolute;left:0;right:0;top:0;z-index:4;display:flex;justify-content:space-between;align-items:center;padding:.625rem var(--gut)}
.over-top .wm{padding:.4375rem .75rem;border-radius:.75rem}
.e6-say{position:absolute;left:50%;bottom:clamp(1rem,4vh,2.25rem);translate:-50% 0;z-index:4;padding:.625rem 1.25rem;border-radius:1rem;font:400 clamp(1.75rem,5cqw,3rem)/1.1 var(--display);white-space:nowrap}
/* 7 With and Without */
.f-cmp{position:relative;height:var(--H);min-height:28rem;overflow:hidden;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.f-cmp .screen{position:absolute;inset:0}
.f-cmp .mb{pointer-events:none}
.f-off{position:absolute;inset:0;z-index:2;pointer-events:none}
.f-line{position:absolute;top:0;bottom:0;z-index:3;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 .5rem rgba(20,48,107,.5)}
.f-knob{position:absolute;left:50%;top:50%;width:3rem;height:3rem;margin:-1.5rem 0 0 -1.5rem;border-radius:50%;background:#fff;box-shadow:0 .5rem 1.25rem rgba(20,48,107,.4);display:grid;place-items:center}
.f-knob svg{width:1.25rem;height:1.25rem;fill:none;stroke:var(--ink);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.f-tag{position:absolute;bottom:5.25rem;z-index:3;padding:.375rem .75rem;border-radius:.625rem;font-size:.875rem;font-weight:600}
.f-tag.l{left:var(--gut)}.f-tag.rt{right:var(--gut)}
.f-rail{position:absolute;left:50%;bottom:clamp(.75rem,3vh,1.5rem);translate:-50% 0;z-index:4;margin:0;width:max-content;max-width:calc(100% - 1rem)}
.f-rail button{white-space:nowrap}
#stage article{overflow-x:clip}
/* 8 Ten Tempos */
.g-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:4rem;padding:0 var(--gut);background:url(assets/plates/sky.webp) center/cover}
.g-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(46%,12.5rem),1fr));gap:.75rem}
.g-tile{display:block;width:100%;text-align:left;padding:.5rem .5rem .75rem;border-radius:.875rem;background:rgba(255,255,255,.92);box-shadow:0 .5rem 1.25rem rgba(90,50,100,.2)}
.g-tile .gw{position:relative;width:100%;aspect-ratio:16/10;margin-bottom:.5rem;box-shadow:none}
.g-tile b{display:block;font:500 1.25rem/1.1 var(--display);padding:0 .25rem}
.g-tile span.tm{display:block;font-size:.75rem;font-variant-numeric:tabular-nums;color:var(--ink-soft);padding:.125rem .25rem 0}
#sheet{position:absolute;left:0;top:0;width:100%;height:100%;z-index:20;transform-origin:0 0;overflow:hidden;will-change:transform}
#sheet[hidden]{display:none}
#sheet .screen{position:absolute;inset:0}
.g-close{position:absolute;right:var(--gut);top:.75rem;z-index:3;min-height:2.75rem;padding:0 1rem;border-radius:.875rem;font-weight:600;font-size:.875rem}
.g-name{position:absolute;left:var(--gut);bottom:1rem;z-index:3;padding:.5rem 1rem;border-radius:.875rem}
.g-name b{display:block;font:500 1.75rem/1.1 var(--display)}
.g-name span{font-size:.8125rem;font-variant-numeric:tabular-nums}
/* 12 Calm Lab */
.lab{--b:0;--dx:0;--dy:0;--wi:0;--wo:0;--turn:0;--cd:0;--end:1;--c:0;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:1rem;align-items:start;padding:1rem var(--gut) 2rem;background:url(assets/plates/sky.webp) center/cover fixed #bfe5fb}
.lab-side{position:sticky;top:1rem;display:grid;gap:.625rem}
.lab-bar{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.lab-bar .wm{padding:.4375rem .75rem;border-radius:.75rem}
.lab-clear{min-height:2.75rem;padding:0 1rem;border-radius:.875rem;font-weight:600;font-size:.875rem}
.lab-count{font-size:.9375rem;font-weight:600;color:var(--ink);padding:.25rem .75rem;border-radius:.75rem;justify-self:start}
.lab-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.625rem}
@container stage (max-width:56rem){.lab{grid-template-columns:1fr}.lab-side{top:.5rem;z-index:6}}
.lab-t{display:block;width:100%;text-align:left;padding:.375rem .375rem .625rem;border-radius:.875rem;background:rgba(255,255,255,.9);box-shadow:0 .5rem 1.25rem rgba(90,50,100,.16)}
.lab-t[aria-pressed=true]{box-shadow:0 0 0 2px var(--ink),0 .5rem 1.25rem rgba(90,50,100,.2)}
.lab-t b{display:block;font:500 1.125rem/1.15 var(--display);padding:.375rem .25rem 0}
.lab-t small{display:block;font-size:.75rem;line-height:1.3;color:var(--ink-soft);padding:.125rem .25rem 0}
.lab-s{position:relative;display:block;overflow:hidden;aspect-ratio:16/10;border-radius:.625rem;background:url(assets/plates/sky.webp) center/cover #bfe5fb;container-type:inline-size;font:400 1em/1.4 -apple-system,BlinkMacSystemFont,var(--text),sans-serif;color:#1d2433;text-align:left}
.lab-s>.win{font-size:2cqw}
.lab-big{border-radius:1rem;box-shadow:0 1.25rem 3rem rgba(20,48,107,.3)}
.lab-big>.win{font-size:1.25cqw}
.lab-s .win{z-index:1;transition:none;top:18%}
.lab-s .nt{z-index:5;width:13cqw;height:2.3cqw;border-radius:0 0 .6cqw .6cqw}
.lab-cloud,.fx-colour{position:absolute;z-index:2;left:4%;width:92%;top:-23cqw;height:46cqw;pointer-events:none;transform-origin:50% 40%;transform:scale(calc(.7 + .3 * var(--b)));opacity:var(--b);background:radial-gradient(38% 58% at 50% 46%,rgb(var(--c1)/.6),rgb(var(--c1)/0)),radial-gradient(26% 44% at 31% 54%,rgb(var(--c1)/.38),rgb(var(--c1)/0)),radial-gradient(28% 40% at 69% 50%,rgb(var(--c1)/.38),rgb(var(--c1)/0)),radial-gradient(18% 30% at 15% 42%,rgb(var(--c1)/.2),rgb(var(--c1)/0)),radial-gradient(20% 32% at 85% 40%,rgb(var(--c1)/.2),rgb(var(--c1)/0));--c1:var(--glow)}
.fx{position:absolute;inset:0;z-index:3;pointer-events:none;display:block}.fx[hidden]{display:none}
.fx i{position:absolute;display:block}
.lab-s[data-on~=drift] .lab-cloud,.lab-s[data-on~=drift] .fx-colour{translate:calc(var(--dx) * 8cqw) calc(var(--dy) * 2.5cqw);rotate:calc(var(--dx) * 3deg)}
.fx.fx-colour{inset:auto;--c1:125 185 240;opacity:calc(var(--b) * var(--cd))}
.lab-s[data-on~=colour] .lab-cloud{opacity:calc(var(--b) * (1 - var(--cd)))}
.lab-s[data-on~=end] .lab-cloud{opacity:calc(var(--b) * var(--end))}
.fx-side i{top:0;bottom:0;width:16cqw;opacity:var(--b)}
.fx-side i:first-child{left:0;background:linear-gradient(90deg,rgb(var(--glow)/.65),rgb(var(--glow)/0))}
.fx-side i:last-child{right:0;background:linear-gradient(270deg,rgb(var(--glow)/.65),rgb(var(--glow)/0))}
.fx-tide i{left:-10%;right:-10%;bottom:0;height:34cqw;opacity:var(--b);transform:translateY(calc((1 - var(--b)) * 16cqw));background:radial-gradient(50% 100% at 50% 100%,rgb(var(--glow)/.7),rgb(var(--glow)/0))}
.fx-wash i{inset:0;opacity:var(--b);background:rgb(var(--glow)/.28)}
.fx-vig i{inset:0;opacity:var(--b);box-shadow:inset 0 0 12cqw 2cqw rgb(var(--glow)/.75)}
.fx-rings i{left:50%;top:0;width:30cqw;height:30cqw;margin:-15cqw 0 0 -15cqw;border-radius:50%;border:.3cqw solid rgb(var(--glow)/.8);opacity:calc(var(--b) * .8)}
.fx-rings i:nth-child(1){transform:scale(calc(.3 + .5 * var(--b)))}.fx-rings i:nth-child(2){transform:scale(calc(.5 + .9 * var(--b)));opacity:calc(var(--b) * .5)}.fx-rings i:nth-child(3){transform:scale(calc(.7 + 1.4 * var(--b)));opacity:calc(var(--b) * .3)}
.fx-petals i{width:1.3cqw;height:1.3cqw;border-radius:60% 40% 60% 40%;background:rgb(var(--glow));opacity:calc(.25 + .6 * var(--b));transform:translate(calc(var(--dx) * 2cqw),calc((1 - var(--b)) * var(--f) * 1cqw))}
.fx-aurora i{top:0;width:14cqw;height:46cqw;transform-origin:50% 0;transform:scaleY(calc(.25 + .75 * var(--b))) skewX(calc(var(--dx) * 6deg));opacity:calc(var(--b) * .7);background:radial-gradient(50% 100% at 50% 0,rgb(var(--glow)/.75),rgb(var(--glow)/0))}
.fx-puffs i{top:-6cqw;width:42cqw;height:24cqw;opacity:calc(.3 + .7 * var(--b));background:radial-gradient(50% 50% at 50% 50%,rgba(255,236,242,.95),rgba(255,226,236,.55) 55%,rgba(255,226,236,0))}
.fx-puffs i:first-child{left:-22cqw;transform:translateX(calc(var(--b) * 20cqw))}.fx-puffs i:last-child{right:-22cqw;transform:translateX(calc(var(--b) * -20cqw))}
.fx-sun{z-index:0}.fx-sun i{left:70%;top:1cqw;width:9cqw;height:9cqw;border-radius:50%;background:radial-gradient(closest-side,#fff3e8,#ffc9d6 60%,rgba(255,201,214,0));transform:translateY(calc((1 - var(--b)) * 9cqw))}
.fx-thread i{left:50%;top:2.3cqw;height:.4cqw;width:calc(var(--b) * 70cqw);translate:-50% 0;border-radius:1cqw;background:linear-gradient(90deg,rgb(var(--glow)/0),rgb(var(--glow)),rgb(var(--glow)/0))}
.fx-dots{z-index:6}.fx-dots i{top:3.4cqw;width:1.1cqw;height:1.1cqw;border-radius:50%;background:var(--ink)}
.fx-dots i:nth-child(1){left:47.2%;opacity:clamp(.2,var(--c),1)}.fx-dots i:nth-child(2){left:49.4%;opacity:clamp(.2,calc(var(--c) - 1),1)}.fx-dots i:nth-child(3){left:51.6%;opacity:clamp(.2,calc(var(--c) - 2),1)}
.fx-words{z-index:6}.fx-words i{left:0;right:0;top:3.2cqw;text-align:center;font:400 3.2cqw/1 var(--display);font-style:normal;color:var(--ink)}
.fx-words i:first-child{opacity:var(--wi)}.fx-words i:last-child{opacity:var(--wo)}
.lab-s[data-on~=rim2] .win{box-shadow:0 0 calc(var(--b) * 6cqw) calc(var(--b) * 1cqw) rgb(var(--glow)/.85)}
.lab-s[data-on~=quiet] .win{box-shadow:0 0 0 100cqw rgba(38,30,70,.32)}
.lab-s[data-on~=rim2][data-on~=quiet] .win{box-shadow:0 0 calc(var(--b) * 6cqw) calc(var(--b) * 1cqw) rgb(var(--glow)/.85),0 0 0 100cqw rgba(38,30,70,.32)}
.lab-s[data-on~=breath] .win{transform-origin:50% 30%;transform:scale(calc(.955 + .045 * var(--b)))}
.fx-cursor{z-index:6}.fx-cursor i{left:60%;top:58%;width:16cqw;height:16cqw;margin:-8cqw 0 0 -8cqw;border-radius:50%;background:radial-gradient(closest-side,rgb(var(--glow)/.8),rgb(var(--glow)/0));transform:scale(calc(.3 + .7 * var(--b)))}
.fx-cursor svg{position:absolute;left:60%;top:58%;width:2.6cqw;height:auto}
.fx-menu{z-index:4}.fx-menu i:first-child{left:0;right:0;top:0;height:2.6cqw;background:rgba(255,255,255,.6)}.fx-menu i:last-child{right:3cqw;top:.45cqw;width:1.7cqw;height:1.7cqw;border-radius:50%;background:rgb(var(--glow));box-shadow:0 0 1cqw rgb(var(--glow));transform:scale(calc(.5 + .7 * var(--b)))}
.fx-hush{z-index:4}.fx-hush i{right:2cqw;top:3cqw;padding:.8cqw 1.6cqw;border-radius:1.4cqw;background:rgba(255,255,255,.9);box-shadow:0 .6cqw 2cqw rgba(20,30,60,.25);font:600 1.9cqw/1.2 -apple-system,var(--text);font-style:normal;color:#1d2433;white-space:nowrap}
.fx-sound{z-index:4}.fx-sound i{bottom:4cqw;width:1.2cqw;height:10cqw;border-radius:1cqw;background:rgb(var(--glow));transform-origin:50% 100%;transform:scaleY(calc(var(--k) + (1 - var(--k)) * var(--b)))}
.fx-track{z-index:4}.fx-track i:first-child{left:50%;bottom:-2cqw;width:30cqw;height:17cqw;margin-left:-15cqw;border-radius:1.6cqw;background:#dfe1e7;box-shadow:0 0 0 .2cqw #b9bdc8}
.fx-track i:last-child{left:50%;bottom:4cqw;width:9cqw;height:9cqw;margin-left:-4.5cqw;border-radius:50%;background:radial-gradient(closest-side,rgb(var(--glow)/.9),rgb(var(--glow)/0));opacity:var(--turn);transform:scale(calc(1.6 - .8 * var(--turn)))}
.fx-keys{z-index:4;display:grid}.fx-keys span{position:absolute;left:12cqw;right:12cqw;bottom:1.2cqw;display:grid;grid-template-columns:repeat(14,1fr);gap:.35cqw;padding:.8cqw;border-radius:1.2cqw;background:#23262e}
.fx-keys span i{position:static;height:2.6cqw;border-radius:.35cqw;background:rgb(var(--glow));opacity:calc(.15 + .85 * var(--b))}
@media (prefers-reduced-motion:reduce){.lab-t{transition:none}}
/* Calm Lab, cloud wave */
.cw{--u:1cqw;--t0:2.7cqw;position:absolute;inset:0;display:block;pointer-events:none;opacity:calc(.3 + .7 * var(--b));-webkit-mask-image:radial-gradient(calc(var(--u) * var(--mw,11)) calc(var(--u) * 4) at 50% calc(var(--t0) + var(--u) * 1.3),#000 40%,transparent 100%);mask-image:radial-gradient(calc(var(--u) * var(--mw,11)) calc(var(--u) * 4) at 50% calc(var(--t0) + var(--u) * 1.3),#000 40%,transparent 100%)}
.cw::before{content:'';position:absolute;left:50%;top:calc(var(--t0) + var(--u) * .4 + (1 - var(--b)) * var(--u) * 2.2);width:calc(var(--u) * 14);height:calc(var(--u) * 5);margin:calc(var(--u) * -2.5) 0 0 calc(var(--u) * -7);mix-blend-mode:screen;opacity:calc(.25 + .75 * var(--b));background:radial-gradient(closest-side,rgb(var(--glow)/.85),rgb(var(--glow)/.35) 45%,rgb(var(--glow)/0) 100%)}
.cw-s{display:none;position:absolute;left:50%;top:var(--t0);width:calc(var(--u) * 26);height:calc(var(--u) * 3);margin-left:calc(var(--u) * -13)}
.cw-l{display:none;position:absolute;left:50%;top:calc(var(--t0) - var(--u) * 2);width:calc(var(--u) * 30);height:calc(var(--u) * 7);margin-left:calc(var(--u) * -15);overflow:clip;will-change:transform}
.cw-t{opacity:0;will-change:opacity}
.cw-o{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--u) * 1.5),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - var(--u) * 1.5),transparent)}
.cw-li{position:absolute;inset:0;display:block;will-change:transform}
.cw-s svg,.cw-l svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round}
.cw-s svg{stroke-width:.14;opacity:.28}
.cw-l svg{position:absolute;left:calc(var(--u) * 2);top:calc(var(--u) * 2);width:calc(var(--u) * 26);height:calc(var(--u) * 3)}
.cw-a{filter:blur(calc(var(--u) * .45))}
.cw-a .a1{stroke:rgb(var(--glow));stroke-width:1.2;opacity:.75}
.cw-a .a2{stroke:rgb(170 150 245);stroke-width:.7;opacity:.45;transform:translateY(.5px)}
.cw-c{stroke-width:.13;filter:blur(calc(var(--u) * .08))}
[data-wave=fill] .cw,[data-wave=still] .cw{--mw:16;opacity:1}
[data-wave=none] .cw{display:none}
[data-wave=fill] .cw-w,[data-wave=still] .cw-w{display:none}
[data-wave=fill] .cw-s,[data-wave=still] .cw-s,[data-wave=fill] .cw-l{display:block}
[data-wave=fill] .cw>i,[data-wave=fill] .cw::before{display:none}
[data-wave=still] .cw>i,[data-wave=still] .cw::before{left:calc(50% + (var(--p,0) - .5) * 26 * var(--u))}
.p-pickhead{justify-content:space-between}
.pz{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:1.25rem;align-items:start}
.pz-side{position:sticky;top:1rem;min-width:0}
.pz-win{position:relative;display:block;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:.875rem;background:url(assets/plates/sky.webp) center/cover #bfe5fb;box-shadow:0 .75rem 2rem rgba(20,48,107,.28),0 0 0 .5px rgba(20,48,107,.3);container-type:inline-size;touch-action:none}
.pz-win .cw{--u:2.2cqw;--t0:8cqw;z-index:3}
.pz-win .gw-a,.pz-win .gw-n{z-index:4}
.pz-win .gw-a{z-index:2}
.pz-v{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:radial-gradient(115% 120% at 50% 45%,rgba(15,12,30,0) 42%,rgba(15,12,30,.9) 100%)}
.pz-m{position:absolute;z-index:5;width:15cqw;height:15cqw;margin:-7.5cqw 0 0 -7.5cqw;border-radius:50%;cursor:grab;background:radial-gradient(circle at 36% 30%,var(--pale),var(--mint) 38%,var(--teal) 72%,var(--deep));box-shadow:0 .5cqw 2cqw rgba(10,20,40,.4);touch-action:none}
.pz-m:active{cursor:grabbing}
.pz-m.ghost{background:radial-gradient(circle at 36% 30%,rgba(255,255,255,.75),rgba(255,255,255,.08) 34%,rgba(255,255,255,0) 70%);box-shadow:inset 0 0 0 .2cqw rgba(255,255,255,.75),inset 0 0 2.5cqw var(--mint)}
.pz-read{margin-top:.75rem;padding:.625rem .875rem;border-radius:.75rem;background:rgba(255,255,255,.88);color:var(--ink);font-size:.9375rem;font-variant-numeric:tabular-nums}
.pz-ctl{display:grid;gap:.875rem;min-width:0}
.pz-grp{padding:.875rem 1rem;border-radius:1rem;background:rgba(255,255,255,.88);color:var(--ink)}
.pz-grp[hidden]{display:none}
.pz-n{margin:0 0 .25rem;font-size:.8125rem;color:var(--ink-soft)}
.pz-opts{display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0}
.pz-opt{min-height:2.75rem;padding:0 1rem;border-radius:.875rem;background:rgba(20,48,107,.08);font-weight:600;color:var(--ink);transition:background .15s,color .15s}
.pz-opt[aria-pressed=true]{background:var(--ink);color:#fff}
.pz-sum{margin:.25rem 0 .5rem;font-size:.9375rem;font-variant-numeric:tabular-nums}
.pz-nav{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-top:.75rem}
.pz-row .next-note{display:block;font-size:.75rem;color:var(--ink-soft)}
.pz-win .t-dim{display:block}
.pz-grp h3{font:500 1.375rem/1.2 var(--display);margin-bottom:.375rem}
.pz-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:2.75rem;font-size:.9375rem}
.pz-step{display:flex;align-items:center;gap:.25rem;font-variant-numeric:tabular-nums}
.pz-step button{width:2.75rem;height:2.75rem;border-radius:.625rem;background:rgba(20,48,107,.08);font-size:1.125rem;font-weight:600;color:var(--ink)}
.pz-step button:active{background:rgba(20,48,107,.18)}
.pz-step output{min-width:3.25rem;text-align:center;font-weight:600}
.pz-sw{position:relative;flex:none;width:2.75rem;height:1.625rem;border-radius:1rem;background:rgba(20,48,107,.22);transition:background .15s}
.pz-sw::after{content:'';position:absolute;left:.125rem;top:.125rem;width:1.375rem;height:1.375rem;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(20,48,107,.35);transition:translate .15s}
.pz-sw[aria-checked=true]{background:var(--ink)}
.pz-sw[aria-checked=true]::after{translate:1.125rem 0}
.pz-sw:disabled{opacity:.45}
.pz-row input[type=range]{flex:1;min-width:0;max-width:60%;height:2.75rem;accent-color:var(--ink)}
.pz-row input[type=range]:disabled{opacity:.4}
.pz-pals{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.25rem;margin-bottom:.25rem}
.pz-pal{position:relative;display:grid;justify-items:center;gap:.25rem;min-height:2.75rem;padding:.25rem 0;font-size:.6875rem;color:var(--ink);cursor:pointer}
.pz-pal i{display:block;width:1.75rem;height:1.75rem;border-radius:50%;background:radial-gradient(circle at 36% 30%,var(--pale),var(--mint) 38%,var(--teal) 72%,var(--deep))}
.pz-pal[aria-pressed=true] i{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem var(--ink)}
.pz-pal input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
@container stage (max-width:56rem){.pz{grid-template-columns:minmax(0,1fr)}.pz-side{position:static}}
.p-graph{display:flex;align-items:center;gap:.25rem;padding:.25rem;border-radius:.875rem;background:rgba(255,255,255,.88)}
.p-graph span{padding:0 .5rem;font-size:.8125rem;color:var(--ink)}
.p-graph button{min-height:2.75rem;padding:0 .75rem;border-radius:.625rem;font-size:.8125rem;font-weight:600;color:var(--ink)}
.p-graph button[aria-pressed=true]{background:var(--ink);color:#fff}
.fx-cwave{z-index:6}
.p-hero .cw{--u:max(1cqw,.5rem);--t0:calc(var(--nt-h) + var(--u) * .5);z-index:6}
@container stage (max-width:36rem){.p-hero .cw-s,.p-hero .cw-w{top:3.25rem}.p-hero .cw-l{top:calc(3.25rem - var(--u) * 2)}.p-hero .cw>i,.p-hero .cw::before{top:calc(3.25rem + var(--u) * 1.5)}}
.gw .cw{--u:2.2cqw;--t0:8cqw;z-index:1}
.cw>svg.cw-w{position:absolute;left:50%;top:var(--t0);width:calc(var(--u) * 126);height:calc(var(--u) * 3);margin-left:calc(var(--u) * -54);overflow:visible;fill:none;stroke:#fff;stroke-width:.34;stroke-linecap:round;stroke-linejoin:round;mix-blend-mode:screen;filter:blur(calc(var(--u) * .13)) drop-shadow(0 0 calc(var(--u) * .5) rgb(var(--glow))) drop-shadow(0 0 calc(var(--u) * 1.1) rgb(var(--glow)));transform:translateX(calc(var(--sx) * var(--u) * -1))}
.cw i{position:absolute;display:block;left:50%;top:calc(var(--t0) + var(--u) * .4 + (1 - var(--b)) * var(--u) * 2.2);width:calc(var(--u) * 1.6);height:calc(var(--u) * 1.6);margin:calc(var(--u) * -.8) 0 0 calc(var(--u) * -.8);border-radius:50%;mix-blend-mode:screen;background:radial-gradient(closest-side,#fff 15%,rgb(var(--glow)/.75) 45%,rgb(var(--glow)/0) 100%)}
.lab-tempo{display:flex;flex-wrap:wrap;gap:.375rem}
.lab-tempo button{min-height:2.75rem;padding:.25rem .75rem;border-radius:.75rem;background:rgba(255,255,255,.72);font-size:.8125rem;font-weight:600;color:var(--ink);text-align:left}
.lab-tempo button span{display:block;font-weight:400;font-size:.6875rem;font-variant-numeric:tabular-nums}
.lab-tempo button[aria-pressed=true]{background:var(--ink);color:#fff}
/* Calm Lab, second round */
.lab{--line:#d4608a;--sc:0;--sx:0}
.lab-t{content-visibility:auto;contain-intrinsic-size:auto 14rem}
.lab-h{grid-column:1/-1;margin:.875rem 0 0;justify-self:start;padding:.25rem .75rem;border-radius:.75rem;background:rgba(255,255,255,.88);font:400 1.5rem/1.15 var(--display);color:var(--ink)}
.lab-h:first-child{margin-top:0}
.fx-guide{z-index:6}.fx-guide i{height:.45cqw;top:1cqw;border-radius:1cqw}
.fx-guide .tr-l,.fx-guide .tr-r{width:30cqw;background:rgb(var(--glow)/.3)}.fx-guide .tr-l{right:56.5%}.fx-guide .tr-r{left:56.5%}
.fx-guide .ln-l,.fx-guide .ln-r{width:calc(var(--b) * 30cqw);background:var(--line)}.fx-guide .ln-l{right:56.5%}.fx-guide .ln-r{left:56.5%}
.fx-guide .tk{width:.35cqw;height:1.6cqw;top:.45cqw;background:var(--line)}.fx-guide .tk-l{right:calc(56.5% + 30cqw)}.fx-guide .tk-r{left:calc(56.5% + 30cqw)}
.fx-guide .bd{width:1.5cqw;height:1.5cqw;top:.48cqw;border-radius:50%;background:#fff;box-shadow:0 0 0 .3cqw var(--line),0 0 1.4cqw var(--line)}
.fx-guide .bd-l{right:calc(56.5% + var(--b) * 30cqw - .75cqw)}.fx-guide .bd-r{left:calc(56.5% + var(--b) * 30cqw - .75cqw)}
.fx-guide .d{top:3.3cqw;width:1.1cqw;height:1.1cqw;border-radius:50%;background:var(--line)}
.fx-guide .d1{left:47.3%;opacity:clamp(.25,var(--c),1)}.fx-guide .d2{left:49.45%;opacity:clamp(.25,calc(var(--c) - 1),1)}.fx-guide .d3{left:51.6%;opacity:clamp(.25,calc(var(--c) - 2),1)}
.fx-ticks{z-index:6}.fx-ticks i{top:.8cqw;width:.6cqw;height:1.5cqw;border-radius:.3cqw;background:var(--line);opacity:clamp(.18,calc(var(--b) * 10 - var(--n)),1)}
.fx-arc svg,.fx-rim svg{position:absolute;inset:0;width:100%;height:100%;fill:none}
.fx-arc,.fx-rim{z-index:6}.fx-arc path,.fx-rim path{stroke:var(--line);stroke-width:.6;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--b) * 100)}
.fx-arc .bg{stroke:rgb(var(--glow)/.4);stroke-dashoffset:0}
.fx-wave{z-index:6;-webkit-mask-image:linear-gradient(90deg,transparent 12%,#000 35%,#000 65%,transparent 88%);mask-image:linear-gradient(90deg,transparent 12%,#000 35%,#000 65%,transparent 88%)}
.fx-wave svg{position:absolute;left:50%;top:3cqw;width:280cqw;height:10cqw;margin-left:-120cqw;overflow:visible;fill:none;stroke:#fff;stroke-width:.7;mix-blend-mode:screen;filter:blur(.25cqw) drop-shadow(0 0 .8cqw rgb(var(--glow))) drop-shadow(0 0 1.8cqw rgb(var(--glow)));transform:translateX(calc(var(--sc) * -40cqw))}
.fx-wave i{left:50%;top:calc(3cqw + (1 - var(--b)) * 9cqw);width:3cqw;height:3cqw;margin:-1.5cqw 0 0 -1.5cqw;border-radius:50%;mix-blend-mode:screen;background:radial-gradient(closest-side,#fff 15%,rgb(var(--glow)/.75) 45%,rgb(var(--glow)/0) 100%)}
.fx-orb{z-index:4}.fx-orb i{left:50%;top:calc(1cqw + (1 - var(--b)) * 36cqw);width:9cqw;height:9cqw;margin-left:-4.5cqw;border-radius:50%;background:radial-gradient(closest-side,#fff,rgb(var(--glow)/.85) 45%,rgb(var(--glow)/0));}
.fx-beam i{left:20%;right:20%;top:0;height:48cqw;opacity:var(--b);clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);background:linear-gradient(rgb(var(--glow)/.65),rgb(var(--glow)/0))}
.fx-orbit{z-index:6}.fx-orbit i{left:50%;top:0;width:1.4cqw;height:1.4cqw;margin-left:-.7cqw;border-radius:50%;background:var(--line);box-shadow:0 0 1.2cqw var(--line);transform:translate(calc((var(--b) * 2 - 1) * 7.6cqw),calc(2.8cqw - (var(--b) * 2 - 1) * (var(--b) * 2 - 1) * 2.2cqw))}
.kb{position:absolute;left:12cqw;right:12cqw;bottom:.8cqw;display:grid;grid-template-columns:repeat(14,1fr);gap:.35cqw;padding:.9cqw;border-radius:1.2cqw;background:#23262e;box-shadow:0 .8cqw 2cqw rgba(20,20,40,.4)}
.kb i{position:static;height:2.1cqw;border-radius:.35cqw;background:rgb(var(--glow));opacity:calc(.12 + .88 * var(--b))}
.fx-kwave .kb i{opacity:clamp(.1,calc(var(--b) * 16 - var(--x)),1)}
.fx-kmid .kb i{opacity:clamp(.1,calc(var(--b) * 9 - var(--mx)),1)}
.fx-krows .kb i{opacity:clamp(.1,calc(var(--b) * 5 - var(--ry)),1)}
.fx-khome .kb i{opacity:.08}.fx-khome .kb i[style*="--y:2"]{opacity:calc(.12 + .88 * var(--b))}
.fx-keys{display:block}.fx-keys,.fx-kwave,.fx-kmid,.fx-krows,.fx-khome{z-index:4}
.fx-quiet,.fx-deep,.fx-mist,.fx-spot{z-index:0}
.fx .bgw{top:22%;width:17%;bottom:12%;border-radius:1.2cqw;background:#fff;box-shadow:0 .6cqw 2cqw rgba(20,30,60,.22)}.fx .bgw:first-child{left:2.5%}.fx .bgw:last-child{right:2.5%}
.lab-s[data-on~=quiet] .win,.lab-s[data-on~=deep] .win,.lab-s[data-on~=mist] .win,.lab-s[data-on~=spot] .win{left:22%;right:22%}
.fx-mist .bgw{filter:blur(.8cqw);opacity:.45}
.lab-s[data-on~=deep] .win{box-shadow:0 0 0 100cqw rgba(38,30,70,calc(.12 + .34 * (1 - var(--b))))}
.fx-spotl{z-index:3}.fx-spotl i{inset:0;background:radial-gradient(circle at 50% 52%,rgba(38,30,70,0) 20cqw,rgba(38,30,70,.42) 34cqw)}
.fx-dock{z-index:4}.fx-dock span{position:absolute;left:24cqw;right:24cqw;bottom:1cqw;display:flex;justify-content:center;gap:.9cqw;padding:.9cqw;border-radius:1.6cqw;background:rgba(255,255,255,.65)}
.fx-dock span i{position:static;width:3.2cqw;height:3.2cqw;border-radius:.8cqw;background:var(--tint);transform:translateY(calc(var(--b) * -1.3cqw))}
.fx-wallp{z-index:0;overflow:hidden}.fx-wallp i{inset:-6%;background:url(assets/plates/sky.webp) center/cover;transform:scale(calc(1 + .1 * var(--b)))}
.fx-dawn i{inset:0;opacity:var(--cd);background:linear-gradient(rgba(255,158,120,.42),rgba(255,190,170,.1) 60%,rgba(255,190,170,0))}
.fx-shade i{left:10%;top:-20%;width:56%;height:120%;border-radius:50%;background:radial-gradient(closest-side,rgba(60,60,100,.28),rgba(60,60,100,0));transform:translateX(calc(var(--dx) * 34cqw))}
.fx-stars i{width:.6cqw;height:.6cqw;border-radius:50%;background:#fff;box-shadow:0 0 .8cqw #fff;opacity:calc((1 - var(--b)) * .95)}
.lab-s[data-on~=tabs] .t-strip>span:not(.t-dots):not(.on){opacity:calc(.15 + .25 * var(--b))}
.lab-s[data-on~=tabs] .win{z-index:1}
/* 11 Press Start */
.t-strip .on{background:#fff;color:#1f2937}
.gw-page{position:absolute;inset:0;font:400 2.3cqw/1.4 -apple-system,BlinkMacSystemFont,var(--text),sans-serif;color:#1d2433;text-align:left}
.gw-page .win{transition:none}
.w-news,.w-notes>div,.w-chat>div{padding:1.5em 2em}
.w-news h4,.w-notes h4{font:600 1.85em/1.2 -apple-system,var(--text);margin:0 0 .5em}
.w-lead{height:6em;border-radius:.4em;background:#d8dee8;margin-bottom:.75em}
.w-col p,.w-notes p,.w-chat p{margin:0 0 .75em;color:#3b4354}
.w-col strong{display:block;font-weight:600}
.w-notes,.w-chat{display:flex;height:100%}
.w-notes aside,.w-chat aside{width:24%;flex:none;padding:1.25em 1em;display:flex;flex-direction:column;gap:.6em;background:#f3f4f6;color:#515a6b}
.w-chat aside{background:#35243f;color:#e9dff0}
.w-notes p i{display:inline-block;width:.8em;height:.8em;margin-right:.6em;border:1px solid #9aa2b1;border-radius:.2em}
.w-chat strong{display:block;font-weight:600;color:#1d2433}
.w-term{height:100%;margin:0;padding:1.25em 1.5em;background:#14181f;color:#c9f2d0;font:400 1em/1.5 ui-monospace,Menlo,monospace;white-space:pre}
.w-code{background:#1d2230;color:#d6dbe6}.w-code em{font-style:normal;color:#f3a6c8}
.w-mail{margin:0;padding:0;list-style:none}
.w-mail strong{display:block;font-weight:600}
.t-cell{position:absolute;pointer-events:none;box-shadow:inset 0 0 0 2px #1a73e8;transition:left 180ms cubic-bezier(.23,1,.32,1),top 180ms cubic-bezier(.23,1,.32,1),width 180ms cubic-bezier(.23,1,.32,1),height 180ms cubic-bezier(.23,1,.32,1)}
.t-pane{position:relative}
.t-dim{position:absolute;left:5%;right:5%;top:15%;bottom:-3%;z-index:3;border-radius:.5rem;pointer-events:none;opacity:0;box-shadow:0 0 0 200vmax rgba(14,12,32,.72)}
.gw-page .t-dim,.pz-win .t-dim{overflow:hidden}
.t-pane[hidden]{display:none}
.t-strip i.t-unread{font-style:normal}
.w-mail li.t-read{background:#e8f0fe}
.win.t-win{left:5%;right:5%;top:15%;bottom:-3%}
.t-strip{display:flex;align-items:flex-end;gap:.25em;height:2.75em;padding:0 .875em;background:#dfe3ea;color:#515a6b;white-space:nowrap;overflow:hidden}
.t-strip>span:not(.t-dots),.t-strip b{padding:.55em 1.25em;border-radius:.5em .5em 0 0;font-weight:500}
.t-strip b{background:#fff;color:#1f2937}
.t-dots{align-self:center;margin-right:.75em}.t-dots i{display:inline-block;width:.7em;height:.7em;margin-right:.3em;border-radius:50%;background:#c7cad2}
.t-fx{height:2.25em;display:flex;align-items:center;gap:.875em;padding:0 .875em;border-bottom:1px solid #e3e5ea;color:#3b4354}.t-fx i{color:#7a8294}
.t-sheet tr:first-child td{font-weight:500;color:#7a8294;text-align:center}
.t-sheet tr td:first-child{width:2.5em;text-align:center;font-weight:500;color:#7a8294;background:#f5f6f8}
.t-sheet tr:nth-child(2) td{font-weight:600}
.plate2.p-sky{background-image:url(assets/plates/sky.webp);background-position:center}
.p-cols .gw{background:url(assets/plates/sky.webp) center/cover #bfe5fb}
.gw-v{display:none;position:absolute;inset:0;background:radial-gradient(closest-side,transparent 50%,rgba(0,0,0,.4) 78%,rgba(0,0,0,.9) 100%)}
.p-cols .gw-v{display:block}
.p-pickhead{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin-bottom:1.5rem}
.p-pickhead h2{margin:0;padding:.375rem .875rem;border-radius:.75rem;font:500 clamp(1.5rem,3cqw,2.25rem)/1.1 var(--display)}
.p-pickhead p{margin:0;padding:.375rem .75rem;border-radius:.75rem;font-size:.875rem;color:var(--ink)}
.p-cols .g-tile{position:relative;display:flex;flex-direction:column;padding:.5rem .5rem .25rem;transition:box-shadow .2s}
.g-cat{padding:0 .25rem .125rem;font-size:.75rem;font-weight:600;color:var(--ink-soft)}
.p-cols .g-tile[aria-current=true]{box-shadow:0 0 0 .1875rem var(--ink),0 .5rem 1.25rem rgba(90,50,100,.2)}
.p-cols .g-tile:active{scale:.985}
.g-ph{position:absolute;left:3%;right:3%;bottom:4%;z-index:7;display:flex;gap:2px;opacity:0;font-size:.5625rem;line-height:1.3;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink);transition:opacity .15s}
.g-ph>span{padding:.125rem .1875rem;border-radius:.1875rem;background:rgba(255,255,255,.88);text-align:center}
.g-ph em{font-style:normal;font-weight:600}
.g-ph>span.on{background:rgb(255 170 205)}
.p-cols .g-tile:focus-visible .g-ph,.p-cols .g-tile:hover .g-ph{opacity:1}
@media (hover:hover){@container stage (min-width:56rem){
  .p-cols .g-tile{transition:scale 150ms cubic-bezier(.23,1,.32,1),box-shadow .2s;transform-origin:50% 0}
  .p-cols .g-tile:hover,.p-cols .g-tile:focus-visible{scale:1.4;z-index:10;transition-duration:200ms,200ms;box-shadow:0 1.25rem 2.5rem rgba(20,48,107,.3)}
  .p-cols .g-tile[aria-current=true]:hover,.p-cols .g-tile[aria-current=true]:focus-visible{box-shadow:0 0 0 .125rem var(--ink),0 1.25rem 2.5rem rgba(20,48,107,.3)}
  .p-cols .g-tile:nth-child(1){transform-origin:0 0}
  .p-cols .g-tile:nth-child(5){transform-origin:100% 0}
  .p-cols .g-tile:nth-child(n+6){transform-origin:50% 100%}
  .p-cols .g-tile:nth-child(6){transform-origin:0 100%}
  .p-cols .g-tile:nth-child(10){transform-origin:100% 100%}
}}
@media (prefers-reduced-motion:reduce){.p-cols .g-tile{transition:none}.p-cols .g-tile:hover,.p-cols .g-tile:focus-visible{scale:1}}
.g-for{display:block;margin:.375rem 0 0;padding:0 .25rem;font-size:.8125rem;line-height:1.35;color:var(--ink)}
.g-for span{display:block;position:relative;padding-left:.875rem}
.g-for span::before{content:'';position:absolute;left:.125rem;top:.5em;width:.25rem;height:.25rem;border-radius:50%;background:currentColor}
.g-for span+span{margin-top:.125rem}
.g-try{margin-top:auto;display:flex;align-items:center;min-height:2.75rem;padding:0 .25rem;font-size:.8125rem;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:.1875rem}
.p-cols .gw-a{background:radial-gradient(closest-side,rgb(var(--glow-c,var(--glow))/.9) 20%,rgb(var(--glow-c,var(--glow))/.5) 55%,rgb(var(--glow-c,var(--glow))/0) 100%);will-change:transform,opacity}
.p-cols .gw-v{will-change:opacity}
.p-hero .au{--w:max(92cqw,30rem);--h:max(46cqw,19rem);width:var(--w);height:var(--h);margin-left:calc(var(--w) / -2);margin-top:calc(var(--h) / -2);transform-origin:50% 40%;background:radial-gradient(38% 58% at 50% 46%,rgb(var(--glow)/.5),rgb(var(--glow)/0)),radial-gradient(26% 44% at 31% 54%,rgb(var(--glow)/.3),rgb(var(--glow)/0)),radial-gradient(28% 40% at 69% 50%,rgb(var(--glow)/.3),rgb(var(--glow)/0)),radial-gradient(18% 30% at 15% 42%,rgb(var(--glow)/.16),rgb(var(--glow)/0)),radial-gradient(20% 32% at 85% 40%,rgb(var(--glow)/.16),rgb(var(--glow)/0));filter:blur(1.5cqw)}
.p-hero{position:relative;height:var(--H);min-height:30rem;overflow:hidden}
.p-hero .screen{position:absolute;inset:0}
.p-intro{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:var(--gut);overflow:hidden;background:url(assets/plates/sky.webp) center/cover #bfe5fb;cursor:pointer;transition:opacity .9s cubic-bezier(.4,0,.2,1)}
.p-intro::before{content:'';position:absolute;left:50%;top:50%;width:max(110cqw,40rem);height:max(70cqw,30rem);translate:-50% -50%;background:radial-gradient(closest-side,rgba(245,170,200,.75),rgba(245,170,200,.28) 55%,rgba(245,170,200,0));animation:p-bloom 2.9s cubic-bezier(.3,0,.2,1) both}
.p-intro p{position:relative;max-width:14em;margin:0;font:500 clamp(2.75rem,7.5cqw,6.5rem)/1.04 var(--display);letter-spacing:-.02em;text-align:center;text-wrap:balance;color:var(--ink);transition:translate .9s cubic-bezier(.4,0,.2,1)}
.p-intro span{display:inline-block;animation:p-word .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.2s + var(--i) * .09s)}
.p-intro.out{opacity:0;pointer-events:none}
.p-intro.out p{translate:0 -.4em}
.p-hero .win{transition:translate 1.1s cubic-bezier(.2,.8,.2,1)}
.p-hero.intro .win{translate:0 7cqh}
@keyframes p-word{from{opacity:0;translate:0 .4em;filter:blur(.12em)}}
@keyframes p-bloom{from{opacity:0;scale:.7}}
@media (prefers-reduced-motion:reduce){.p-intro::before,.p-intro span{animation:none}.p-intro p,.p-hero .win{transition:none}.p-intro.out p{translate:none}.p-hero.intro .win{translate:none}}
.p-guide{position:absolute;left:50%;bottom:clamp(1rem,5vh,3rem);translate:-50% 0;z-index:4;width:min(25rem,calc(100% - 2 * var(--gut)));padding:1.25rem;border-radius:1.5rem;text-align:center;transition:opacity .5s,scale .5s cubic-bezier(.2,.8,.2,1);transform-origin:50% 100%}
.p-guide.wait{opacity:0;scale:.96;pointer-events:none}
.p-guide p{margin:0}
.p-guide .cta{width:100%}
.p-scenes{display:flex;justify-content:center;gap:.125rem;margin:-.25rem -.25rem .75rem}
.p-scenes button{flex:1;min-height:2.75rem;padding:0 .25rem;border-radius:.75rem;font-size:.8125rem;font-weight:600;color:var(--ink-soft);transition:background .25s,color .25s}
.p-scenes button[aria-pressed=true]{background:var(--ink);color:#fff}
.p-set{position:absolute;right:max(var(--gut),5%);top:clamp(4.5rem,18%,9rem);z-index:5;width:15rem;padding:.5rem .875rem;border-radius:1rem;color:var(--ink);font-size:.875rem;transition:opacity .4s,scale .4s cubic-bezier(.23,1,.32,1)}
.p-set[hidden]{display:block;opacity:0;scale:.96;pointer-events:none}
.p-set-r{display:flex;justify-content:space-between;align-items:center;gap:.75rem;min-height:2.25rem}
.p-set i.pz-sw{display:block}
.p-set i.pz-sw.on{background:var(--ink)}
.p-set i.pz-sw.on::after{translate:1.125rem 0}
#p-hint b{font-weight:600}
.p-go{min-height:3.5rem;font-size:1.25rem}
.p-hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(90% 70% at 50% 0,rgb(236 110 160/.5),rgb(170 150 245/.18) 60%,rgb(236 110 160/0));opacity:var(--j,0)}
.p-hero .over-top{transition:opacity .6s}
.p-hero.going .over-top{opacity:0;pointer-events:none}
#p-run:not([hidden]){animation:p-in 240ms cubic-bezier(.23,1,.32,1) both;transform-origin:50% 100%}
@keyframes p-in{from{opacity:0;scale:.97}}
@media (prefers-reduced-motion:reduce){#p-run:not([hidden]){animation:none}}
.p-free{margin-top:.375rem!important;font-weight:600;font-size:1rem;color:var(--ink)}
.p-redo{margin:.25rem 0 -.5rem}
.p-sub{margin-top:.625rem!important;font-size:.9375rem;color:var(--ink)}
.p-row{display:flex;align-items:baseline;justify-content:center;gap:.75rem}
.p-word{font:400 clamp(2.5rem,7cqw,3.5rem)/1.05 var(--display);letter-spacing:-.01em}
.p-num{font:400 clamp(2.5rem,7cqw,3.5rem)/1.05 var(--display);font-variant-numeric:tabular-nums;min-width:1ch}
.p-bar{height:.3125rem;margin:.875rem 0 .75rem;border-radius:1rem;background:rgba(20,48,107,.16);overflow:hidden}
.p-bar i{display:block;height:100%;background:var(--ink);border-radius:inherit;transform-origin:0 50%;transform:scaleX(0)}
.p-foot{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem;font-size:.875rem;font-variant-numeric:tabular-nums}
.p-stop{min-height:2.75rem;padding:0 1rem;margin-right:-.5rem;border-radius:.875rem;font-weight:600}
.p-end{font:400 1.75rem/1.15 var(--display);text-wrap:balance;margin-bottom:.875rem!important}
.p-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.875rem}
.p-col h2{display:inline-block;margin:0 0 .625rem;padding:.25rem .75rem;border-radius:.75rem;background:rgba(255,255,255,.88);font:400 clamp(1.375rem,2.2cqw,1.75rem)/1.15 var(--display);color:var(--ink)}
.p-tiles{display:grid;gap:.75rem}
@container stage (max-width:56rem){.p-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}}
/* 9 Your Breath */
.h-hero{position:relative;min-height:var(--H);background:url(assets/plates/sky.webp) center/cover;display:flex;flex-direction:column;align-items:center;padding:4rem var(--gut) 1.5rem;gap:.75rem}
.h-hit{position:relative;width:min(58cqw,44vh);aspect-ratio:1;border-radius:50%;touch-action:none;user-select:none;-webkit-user-select:none}
.h-hit:active{transform:none}
.h-hit [data-screen]{position:absolute;inset:0;pointer-events:none}
.h-hit .mb{inset:0;width:100%;pointer-events:none}
.h-say{font:400 clamp(1.75rem,4.5cqw,3rem)/1.1 var(--display);text-align:center;text-wrap:balance;min-height:1.1em}
.h-read{font-size:.9375rem;font-variant-numeric:tabular-nums;min-height:1.5em}
.h-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.625rem;width:min(68rem,100%);margin-top:auto}
.h-trio .screen{overflow:hidden;aspect-ratio:16/10;border-radius:.75rem;box-shadow:0 .75rem 1.75rem -.5rem rgba(20,48,107,.45)}
@container stage (max-width:44rem){.h-trio{grid-template-columns:1fr}.h-trio .screen{aspect-ratio:16/8}}
/* 10 The Stack */
.s-card{position:sticky;top:0;height:var(--H);min-height:26rem}
.s-in{position:absolute;inset:0;overflow:hidden;border-radius:1.25rem 1.25rem 0 0;transform-origin:50% 0;will-change:transform;box-shadow:0 -1rem 2.5rem rgba(20,48,107,.3)}
.s-card:first-child .s-in{border-radius:0}
.s-in .screen{position:absolute;inset:0}
.s-dim{position:absolute;inset:0;z-index:3;background:#0a1430;opacity:0;pointer-events:none}
.s-word{position:absolute;left:var(--gut);bottom:1rem;z-index:2;padding:.375rem 1rem;border-radius:.875rem;font:400 clamp(2rem,6cqw,4rem)/1.1 var(--display)}
.s-cta{position:sticky;top:0;height:0;z-index:6;display:block}
.s-cta>div{display:flex;justify-content:space-between;align-items:center;padding:.625rem var(--gut)}
.s-cta .wm{padding:.4375rem .75rem;border-radius:.75rem}
@media (prefers-reduced-transparency:reduce){.over-top .glass,.s-cta .glass{background:#fff}}
/* 1 The Desk */
.a-hero{position:relative;height:var(--H);min-height:30rem}
.a-hero .screen{position:absolute;inset:0}
.a-nav{position:absolute;left:0;right:0;top:0;z-index:4;display:flex;align-items:center;gap:1rem;height:2.75rem;padding:0 .75rem 0 var(--gut);font-size:.875rem;font-weight:500;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.a-nt{position:absolute;left:50%;top:0;width:clamp(5.5rem,13cqw,11rem);height:1.5rem;translate:-50% 0;background:#000;border-radius:0 0 .625rem .625rem}
.a-nav{transition:background .4s,color .4s}
.a-hero:has(.screen[data-solo=glow]) .a-nav{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:#fff}
.a-nav .nv{display:flex;gap:1rem;margin-right:auto}
.a-nav .spacer{margin-right:auto}
.a-dock{position:absolute;left:50%;bottom:clamp(.875rem,3cqw,1.75rem);translate:-50% 0;z-index:4;display:flex;align-items:center;gap:.75rem;padding:.5rem;border-radius:1.375rem;max-width:calc(100% - 1.5rem)}
.a-dock .ctl{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding-right:.25rem}
@container stage (max-width:44rem){
  .a-nav .nv{display:none}
  .a-dock{flex-direction:column;gap:.375rem;width:calc(100% - 1.5rem)}
  .a-dock .cues{width:100%}.a-dock .cue-btn{flex:1;min-width:0}
  .win.w-sheet,.win.w-mail{display:none}.win.w-main{left:6%;right:6%}
  .screen .mb{bottom:34%}
}

/* 2 One Scroll */
.b-pin{position:relative;height:calc(var(--H) * 5)}
.b-stick{position:sticky;top:0;height:var(--H);overflow:hidden;background:url(assets/plates/sky.webp) center/cover;perspective:90rem;display:flex;flex-direction:column;align-items:center}
.b-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:.75rem var(--gut);z-index:3}
.b-tilt{position:relative;width:min(70rem,92%);height:62%;margin-top:clamp(4.25rem,9vh,6rem);transform-origin:50% 100%;border-radius:1rem;overflow:hidden;box-shadow:0 2.5rem 5rem -1.5rem rgba(20,48,107,.55),0 0 0 1px rgba(20,48,107,.12);will-change:transform}
.b-tilt .screen{position:absolute;inset:0;opacity:0}
#b-tilt .screen[data-page=deck] .win.full{top:40%}
.b-word{position:relative;font:400 clamp(3rem,10cqw,6rem)/1 var(--display);letter-spacing:-.02em;margin-top:clamp(.75rem,2.5vh,1.5rem);height:1em;width:100%;text-align:center}
.b-word span{position:absolute;left:0;right:0;opacity:0}
.b-rail{display:flex;gap:.25rem;padding:.1875rem;border-radius:.75rem;margin-top:auto;margin-bottom:clamp(.75rem,2.5vh,1.5rem)}
.b-rail button{min-height:2.5rem;padding:0 .875rem;border-radius:.5625rem;font-size:.875rem;font-weight:500;color:var(--ink-soft)}
.b-rail button[aria-pressed=true]{background:var(--ink);color:#fff}

/* 3 Three Rooms */
.c-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:4rem;padding:0 var(--gut);background:url(assets/plates/sky.webp) center/cover}
.c-rooms{display:flex;gap:.25rem;height:calc(var(--H) - 4rem);min-height:28rem;background:#fff;padding:.25rem}
.room{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:.875rem;cursor:pointer}
.room-in{position:absolute;top:0;bottom:0;left:50%;width:calc(100cqw - 13rem);translate:-50% 0}
.room-in .screen{position:absolute;inset:0}
.room-tag{position:absolute;left:.75rem;bottom:.75rem;z-index:3;padding:.5rem .875rem;border-radius:.75rem;font:500 1.5rem/1.1 var(--display);white-space:nowrap}
.room .stretch{position:absolute;inset:0;z-index:4;width:100%;border-radius:.875rem}
@container stage (max-width:44rem){
  .c-rooms{flex-direction:column;height:calc(var(--H) * 1.1)}
  .room-in{width:100%;top:0;bottom:auto;height:calc(var(--H) * .62)}
}

/* 4 The Object */
.d-pin{position:relative;height:calc(var(--H) * 2.6)}
.d-stick{position:sticky;top:0;height:var(--H);overflow:hidden;background:url(assets/plates/sky.webp) center/cover}
.d-top{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;justify-content:flex-end;padding:.75rem var(--gut)}
.d-name{position:absolute;left:0;right:0;top:12%;text-align:center;font:400 clamp(3.5rem,14cqw,6rem)/1 var(--display);letter-spacing:-.02em;color:#fff;text-shadow:0 .125rem 1.5rem rgba(31,111,168,.5)}
.d-big{position:absolute;left:50%;top:52%;width:min(62cqw,56vh);margin-left:calc(min(62cqw,56vh) / -2);margin-top:calc(min(62cqw,56vh) / -2);z-index:4;right:auto;bottom:auto;will-change:transform;transform-origin:50% 50%}
.d-ctl{position:absolute;left:50%;bottom:clamp(.875rem,3vh,1.75rem);translate:-50% 0;z-index:6;display:flex;gap:.25rem;align-items:center;padding:.375rem;border-radius:1.125rem;max-width:calc(100% - 1.5rem)}
.d-ctl .sw{width:2.5rem;height:2.5rem;border-radius:50%;flex:none;position:relative}
.d-ctl .sw[aria-pressed=true]{box-shadow:0 0 0 2px var(--ink)}
.d-ctl .sw i{position:absolute;inset:.3125rem;border-radius:50%}
.d-ctl .gh{min-height:2.5rem;padding:0 .75rem;border-radius:.75rem;font-size:.875rem;font-weight:500}
.d-ctl .gh[aria-pressed=true]{background:var(--ink);color:#fff}
.d-screen{position:absolute;left:50%;top:50%;width:min(66rem,90%);height:72%;translate:-50% -50%;border-radius:1rem;overflow:hidden;box-shadow:0 2.5rem 5rem -1.5rem rgba(20,48,107,.55),0 0 0 1px rgba(20,48,107,.12);opacity:0;will-change:transform,opacity}
.d-screen .screen{position:absolute;inset:0}
.d-slot{position:absolute;right:9%;bottom:12%;width:max(16cqw,6rem);aspect-ratio:1}
.d-cta{position:absolute;left:0;right:0;top:clamp(4rem,12vh,6rem);z-index:5;text-align:center;opacity:0;pointer-events:none}
.player{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(1.5rem,4cqw,3.5rem);align-items:center}
.p-stage{position:relative;aspect-ratio:1;max-width:30rem;width:100%;margin:0 auto;border-radius:1.25rem;background:url(assets/plates/dusk.webp) center/cover;overflow:hidden}
.p-stage .mb{left:25%;top:25%;right:auto;bottom:auto;width:50%}
.chips{display:flex;flex-wrap:wrap;gap:.375rem;margin-bottom:1.25rem}
.chips button{background:rgba(255,255,255,.9);min-height:2.75rem;padding:0 1.125rem;border-radius:62.5rem;font-weight:500;box-shadow:inset 0 0 0 1px var(--line)}
.chips button[aria-pressed=true]{background:var(--ink);color:#fff;box-shadow:none}
.alts button{display:grid;grid-template-columns:1fr auto;gap:.125rem .75rem;width:100%;padding:.75rem;text-align:left;border-top:1px solid var(--line)}
.alts button[aria-pressed=true]{background:rgba(255,194,224,.25)}
.alts h3{font:500 1.375rem/1.1 var(--display)}
.alts span{font-size:.875rem;color:var(--ink-soft);font-variant-numeric:tabular-nums;align-self:center}
.alts .tr{grid-column:1/-1;margin-top:.25rem;height:2.5rem}
@container stage (max-width:44rem){
  .player{grid-template-columns:1fr}
  .d-ctl{flex-wrap:wrap;justify-content:center}
  .d-ctl .sw{width:2.25rem;height:2.25rem}
}

/* 5 The Live Page */
.live{position:absolute;inset:0;z-index:10;pointer-events:none;container-type:inline-size;overflow:hidden}
.live[hidden]{display:none}
.live.screen{background:none;color:var(--ink);font:inherit}
.live .mb{pointer-events:auto;right:max(4cqw,.75rem);bottom:6.5rem;width:clamp(5.5rem,11cqw,9rem)}
.live-dock{position:absolute;left:50%;bottom:clamp(.75rem,2.5cqw,1.25rem);translate:-50% 0;display:flex;gap:.625rem;align-items:center;padding:.375rem;border-radius:1.25rem;pointer-events:auto;max-width:calc(100% - 1.5rem)}
.live-dock .cue-btn{min-height:3rem;min-width:4.5rem;flex-direction:row;gap:.375rem}
.e-hero{position:relative;height:var(--H);min-height:30rem;background:url(assets/plates/dusk.webp) center/cover #1c2748;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;color:#fff;text-align:center;padding:0 var(--gut) 5rem}
.e-hero h1{font:400 clamp(4rem,14cqw,6rem)/.95 var(--display);letter-spacing:-.02em;text-shadow:0 .125rem 2rem rgba(10,20,50,.5)}
.e-hero .next-note{color:rgba(255,255,255,.85)}
.e-sky{background:linear-gradient(#fff,#fff)}
.e-sky .rcard{background:rgba(255,255,255,.86)}
@container (max-width:44rem){
  .live-dock{flex-direction:column;gap:.25rem;width:calc(100% - 1.5rem)}
  .live-dock .cues{width:100%}.live-dock .cue-btn{flex:1;min-width:0;padding:.25rem;flex-direction:column;gap:.125rem;font-size:.75rem}
  .live .mb{bottom:10.5rem}
}
@container (max-width:30rem){.pg-deck .th{display:none}.pg-deck .sl{margin:.75em}}
@media (prefers-reduced-transparency:reduce){.glass,.a-nav,.mbar{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-contrast:more){.glass{background:#fff;box-shadow:0 0 0 1.5px var(--ink)}}
@media (prefers-reduced-motion:reduce){button:active,a.cta:active{transform:none}.notes{transition:opacity .2s}}
.faq{padding:clamp(3.5rem,9cqw,7rem) var(--gut);background:var(--cloud)}
.faq>*{max-width:48rem;margin-inline:auto}
.faq h2{font:400 clamp(2.25rem,5cqw,3.5rem)/1.05 var(--display);margin-bottom:1.5rem}
.faq details{border-top:1px solid var(--line);padding:1rem 0}
.faq summary{cursor:pointer;font-weight:500}
.faq details p{margin-top:.625rem;max-width:65ch;color:var(--ink-soft)}
.close a:not(.cta){color:inherit}
.site-footer{display:flex;justify-content:space-between;gap:1rem;padding:1.5rem var(--gut);background:#fff;font-size:.875rem}
.site-footer a{color:var(--sky-700)}