/* Glimmerthaw landing page. Shared tokens and tiles live in site.css.
   thaw.js sets .ready on <html>; until then the page shows its static version. */
:root:not(.ready) .js-only{display:none}

/* hero */
.hero{position:relative;overflow:hidden;padding-top:4px}
.drift{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.moon{display:none;position:absolute;z-index:0;top:84px;right:max(18px,6vw);width:clamp(52px,7vw,92px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 36%,#FFF7E6 0 30%,#F3E3C3 62%,#E2CDA6 100%);box-shadow:0 0 70px 14px rgba(246,235,217,.16)}
.moon::before,.moon::after{content:"";position:absolute;border-radius:50%;background:rgba(190,165,125,.35)}
.moon::before{width:22%;height:22%;left:56%;top:24%}
.moon::after{width:14%;height:14%;left:30%;top:60%}
.hero-grid{position:relative;z-index:2;display:grid;gap:36px;padding-top:12px;padding-bottom:clamp(110px,15vw,190px)}
.hero-copy{container-type:inline-size;min-width:0}
.hero h1{position:relative;display:inline-block;font-size:clamp(2.8rem,15.4cqi,6.4rem);line-height:.95;letter-spacing:-.015em;padding-bottom:.06em}
.hero h1 .word{color:var(--paper);text-shadow:0 0 38px rgba(255,179,71,.35),0 5px 0 rgba(8,10,30,.55)}
.hero h1 .frost{position:absolute;inset:0;color:#E4F2FF;text-shadow:0 0 18px rgba(170,215,255,.75),0 5px 0 rgba(8,10,30,.55);-webkit-text-stroke:1px rgba(255,255,255,.55);clip-path:inset(0 0 0 0);animation:title-thaw 1.7s .45s cubic-bezier(.55,.05,.35,1) forwards}
.no-js .hero h1 .frost{display:none}
@keyframes title-thaw{to{clip-path:inset(0 0 100% 0)}}
.tag{font-family:var(--display);font-weight:500;font-size:clamp(1.4rem,1.1rem + 1.4vw,2rem);line-height:1.2;color:var(--ember);margin:14px 0 14px}
.lede{color:var(--dim);font-size:1.125rem;max-width:33rem;margin-bottom:0}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin-top:28px}
.cta .soon{margin:0}
.more{display:inline-flex;align-items:center;min-height:44px;font-family:var(--display);font-weight:500;font-size:1.0625rem;color:var(--paper)}
.hills{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(110px,15vw,200px);z-index:1}
@media (min-width:960px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,440px);align-items:center;gap:56px;padding-top:8px}
  .moon{display:block;top:96px;right:auto;left:44%}
}

/* the playable demo */
.demo{position:relative;width:100%;max-width:440px;justify-self:center;min-width:0}
.demo-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 12px;margin-bottom:10px}
.demo-title{grid-column:1;grid-row:1}
.demo-title{font-size:1.375rem}
.demo-sub{grid-column:1/-1;grid-row:2;position:relative;margin:0;color:var(--dim);font-size:.9375rem}
.demo-sub.has-chip>:first-child{visibility:hidden}
.demo-sub .freed-chip{position:absolute;left:0;top:50%;transform:translateY(-50%);white-space:nowrap}
.still{margin:0}
.still img{width:min(100%,260px);margin:0 auto;border-radius:28px;border:8px solid var(--ink)}
.still figcaption{color:var(--dim);font-size:.9375rem;text-align:center;margin-top:10px}
.board{position:relative;background:var(--panel);border-radius:var(--r-lg);padding:10px;box-shadow:0 4px 0 #0E1330,0 26px 60px rgba(5,6,20,.55);touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.frame{position:relative;padding:8px;border-radius:14px;border:2px dashed rgba(246,235,217,.3);background-color:#141A44;
  background-image:var(--star),var(--star),var(--star),var(--star);background-repeat:no-repeat;background-size:16px 16px;background-origin:border-box;background-position:-7px -7px,calc(100% + 7px) -7px,-7px calc(100% + 7px),calc(100% + 7px) calc(100% + 7px);
  --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5v13M2.4 4.8l11.2 6.4M2.4 11.2l11.2-6.4' stroke='%23FF9F43' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")}
.mural{position:relative;width:100%;aspect-ratio:var(--cols)/var(--rows);background-image:radial-gradient(circle,rgba(246,235,217,.07) 22%,transparent 24%);background-size:calc(100% / var(--cols)) calc(100% / var(--rows))}
.mural .tile{width:calc(100% / var(--cols));height:calc(100% / var(--rows))}
.mural .painted{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.2,.8,.2,1);transform:scale(.97)}
.board.won .painted{opacity:1;transform:none}
.board .tile{transition:transform .22s cubic-bezier(.34,1.45,.64,1)}
.board .instant .tile{transition:none}
.board.fast .tile{transition-duration:.11s}
.tile .fl{position:absolute;inset:4.5%;border-radius:24%;background:#F2FAFF;opacity:0;z-index:2}
.tile.will>i{box-shadow:0 0 0 3px #fff,0 0 12px 3px color-mix(in srgb,var(--c),#fff 30%)}
.tile.will{z-index:3}
.tile.snooze>i{background:#D3E7F8;box-shadow:inset 0 0 0 2px rgba(255,255,255,.9),inset 0 -3px 0 rgba(63,109,153,.3),0 2px 0 rgba(8,10,30,.45)}
.tile.snooze>i::after{display:none}
.tile.snooze svg{left:-12%;top:-18%;width:124%;height:124%;color:inherit;filter:none;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.snooze .aw,.cr .aw{opacity:0;transition:opacity .2s}
.snooze .zz,.cr .zz{transition:opacity .2s}
.awake .aw,.awake.aw{opacity:1}
.awake .zz{opacity:0}
.freed{position:absolute;z-index:4;right:-12px;top:-30px;width:58px;height:58px;pointer-events:none}
.perches{display:flex;justify-content:center;align-items:flex-end;gap:2px;height:78px;margin:6px 0 4px}
.perch{position:relative;flex:0 1 64px;height:100%;display:flex;justify-content:center;align-items:flex-end}
.dish{position:absolute;left:9%;right:9%;bottom:6px;height:12px;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,#FFE0A0 0,#FFB347 40%,#C8631F 75%,#6E3212 100%);box-shadow:0 0 16px 4px rgba(255,179,71,.38),inset 0 -2px 0 rgba(0,0,0,.25)}
.perch .gl{position:relative;width:54px;height:63px;margin-bottom:11px}
.perch.new{animation:pop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop{0%{transform:scale(.2);opacity:0}100%{transform:none;opacity:1}}
.lanes{display:grid;grid-template-columns:repeat(var(--lanes,3),minmax(0,1fr));gap:8px}
.lane{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:136px;padding:8px 4px 10px;border-radius:14px;background:#151B45;box-shadow:inset 0 0 0 1px rgba(246,235,217,.06)}
.front{position:relative;display:grid;place-items:center;width:84px;height:88px;padding:0;border:0;border-radius:18px;background:none;color:inherit;cursor:pointer;font:inherit}
.front .gl{position:relative;width:66px;height:77px;transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
.front .glow{position:absolute;inset:4px 10px 10px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c),transparent 45%),transparent 70%)}
@media (hover:hover){.front:not(:disabled):hover .gl{transform:translateY(-4px) scale(1.04)}}
.front:focus-visible .gl{transform:translateY(-4px) scale(1.04)}
.front:disabled{cursor:default}
.front:disabled .gl{opacity:.55}
.front:empty,.front.away>*{visibility:hidden}
.front .melts{position:absolute;z-index:2;top:-8px;left:50%;transform:translateX(-50%);padding:3px 9px;border-radius:999px;background:var(--paper);color:var(--ink);font:600 .8125rem/1.2 var(--display);white-space:nowrap;opacity:0;transition:opacity .15s}
.front.preview .melts{opacity:1}
.lanes .front.queued .gl{transform:translateY(-9px) scale(1.06)}
.front.hint::after{content:"";position:absolute;inset:6px 8px;border-radius:50%;border:3px solid var(--ember);animation:ring 1.7s ease-out infinite;pointer-events:none}
@keyframes ring{0%{transform:scale(.72);opacity:.95}100%{transform:scale(1.18);opacity:0}}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin:0;padding:0;list-style:none}
.chip{display:inline-flex;align-items:center;gap:2px;height:24px;padding:0 8px 0 4px;border-radius:999px;background:var(--c);color:var(--ink);font:600 .8125rem/1 var(--display)}
.chip svg{width:14px;height:14px;color:var(--ink)}
:root[data-palette="cb"] .chip.t4,:root[data-palette="cb"] .chip.t4 svg{color:#fff}
.bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;min-height:48px}
.status{flex:1 1 auto;margin:0;min-height:4.05em;color:var(--dim);font-size:.9375rem;line-height:1.35}
.tools{display:flex;gap:6px;flex:none}
@media (max-width:480px){.bar{flex-wrap:wrap}.status{flex-basis:100%}.tools{margin-left:auto}}
.tool{display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;padding:0 12px;border:0;border-radius:12px;background:#BFD7FF;color:var(--ink);font:600 .9375rem/1 var(--display);cursor:pointer;box-shadow:0 3px 0 #8EA6D4}
.tool svg{width:18px;height:18px}
.tool:disabled{opacity:.45;cursor:default}
.tool:not(:disabled):active{transform:translateY(2px);box-shadow:0 1px 0 #8EA6D4}
/* Effects and Music switches beside the demo title. In the page they come after the
   subtitle, so a screen reader reads the title and subtitle first; on narrow phones
   they move under the subtitle. */
.snd{grid-column:2;grid-row:1;display:flex;gap:4px}
.snd .tool{gap:5px;padding:0 10px}
.snd .tool[aria-pressed="false"]{background:none;color:var(--paper);box-shadow:inset 0 0 0 2px rgba(191,215,255,.5)}
.snd [aria-pressed="true"] .off,.snd [aria-pressed="false"] .on{display:none}
.snd-hint{grid-column:1/-1;grid-row:4;margin:6px 0 0;color:var(--dim);font-size:.875rem;line-height:1.35}
@media (max-width:370px){.snd{grid-column:1/-1;grid-row:3;margin-top:10px}}
@media (forced-colors:active){.snd .tool{border:2px solid ButtonText}.snd .tool[aria-pressed="true"]{forced-color-adjust:none;background:Highlight;color:HighlightText}}
.fx{position:absolute;inset:0;z-index:6;pointer-events:none}
.fx>*{position:absolute;left:0;top:0}
.spark{width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:radial-gradient(circle,#fff 0 22%,var(--c) 46%,transparent 72%);box-shadow:0 0 12px 4px color-mix(in srgb,var(--c),transparent 40%)}
.shard{width:9px;height:9px;margin:-4px 0 0 -4px;background:var(--c);clip-path:polygon(50% 0,100% 85%,0 100%)}
.puff{width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:radial-gradient(circle,rgba(246,235,217,.55),transparent 70%)}
.win{position:absolute;z-index:7;left:10px;right:10px;bottom:10px;padding:16px 16px 18px;border-radius:var(--r-lg);background:var(--paper);color:var(--ink);text-align:center;box-shadow:0 4px 0 #C9B9A0,0 16px 40px rgba(5,6,20,.5)}
.win h3{display:flex;align-items:center;justify-content:center;gap:8px;font-size:1.5rem}
.win h3 svg{width:26px;height:26px;color:#E89A1C}
.win p{margin:6px 0 12px;font-size:.9375rem;color:#3E3A52}
.again{min-height:48px;padding:0 22px;border:0;border-radius:14px;background:var(--ember);color:var(--ink);font:600 1.0625rem/1 var(--display);cursor:pointer;box-shadow:0 3px 0 #C47A1E}
.win:not([hidden]){animation:rise .45s cubic-bezier(.34,1.4,.64,1)}
@keyframes rise{from{transform:translateY(24px);opacity:0}}
@media (max-width:420px){.front{width:76px;height:82px}.front .gl{width:60px;height:70px}.perch .gl{width:48px;height:56px}.tool{padding:0 10px}}

/* bands */
.band{background:var(--hill0)}
.ridge{position:relative;margin-top:calc(-1 * clamp(36px,6vw,80px))}
.how{position:relative;padding:20px 0 96px}
.how-grid{display:grid;gap:44px}
.steps{list-style:none;counter-reset:s;margin:28px 0 0;padding:0;display:grid;gap:24px;max-width:36rem}
.steps li{counter-increment:s;position:relative;padding-left:66px;min-height:52px}
.steps li::before{content:counter(s);position:absolute;left:0;top:-6px;width:48px;height:56px;padding-top:16px;text-align:center;font:600 1.375rem/1 var(--display);color:var(--ink);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-42 -58 84 104'%3E%3Cpath d='M0 -55.2C22 -34 40.8 -14 40 4.8A40 40 0 0 1 -40 4.8C-40.8 -14 -22 -34 0 -55.2Z' fill='%23FFB347' stroke='%23C47A1E' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat}
.steps h3{margin:0 0 4px}
.steps p{margin:0;color:var(--dim)}
.aside{max-width:36rem;margin:30px 0 0;padding:14px 18px;border-left:4px solid var(--ember);border-radius:0 14px 14px 0;background:rgba(255,179,71,.08)}
.phone-fig{margin:0}
.phone{position:relative;width:min(100%,280px);margin-inline:auto;padding:8px;border-radius:38px;background:var(--ink);box-shadow:0 0 0 2px var(--hill2),0 30px 60px rgba(4,5,18,.6)}
.phone img{width:100%;height:auto;border-radius:30px}
@media (min-width:900px){.how-grid{grid-template-columns:minmax(0,1fr) 300px;gap:80px;align-items:center}.phone-fig .phone{transform:rotate(2.5deg)}}

/* scroll thaw */
.thaw{position:relative;background:#141B42;padding-bottom:88px}
.thaw-intro{padding-top:20px}
.thaw-intro p{max-width:36rem;color:var(--dim);margin:16px 0 0;font-size:1.125rem}
.stage-grid{display:grid;gap:22px;align-items:center;padding-top:32px}
.beats{list-style:none;counter-reset:b;margin:0;padding:0;display:grid;gap:10px;max-width:30rem}
.beats li{counter-increment:b;position:relative;padding:12px 14px 12px 52px;border-radius:14px;color:var(--paper);transition:background-color .3s,color .3s}
.beats li::before{content:counter(b);position:absolute;left:12px;top:11px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;border:2px solid currentColor;font:600 .9375rem/1 var(--display);transition:background-color .3s,border-color .3s,color .3s}
.thaw-art{min-width:0;width:100%;max-width:480px;justify-self:center}
.thaw-art .frame{padding-bottom:calc(8px + 9%)}
.thaw-art .mural .tile{will-change:transform,opacity}
.thaw .snooze{transform:translate(calc(var(--x) * 100%),calc(var(--rows) * 100% + 8%))}
.thaw .painted{opacity:1;transform:none}
.thaw.live .beats li{color:var(--dim)}
.thaw.live .beats li.on{background:rgba(221,239,255,.08);color:var(--paper)}
.thaw.live .beats li.on::before{background:var(--ember);border-color:var(--ember);color:var(--ink)}
.thaw.live .track{height:290vh}
.thaw.live .stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center}
.thaw.live .stage-grid{padding-top:0;width:100%}
/* The pinned stage is one screen tall: on a landscape phone the art shrinks to fit with its captions. */
.thaw.live .thaw-art{max-width:min(480px,calc(100vh - 180px));max-width:min(480px,calc(100svh - 180px))}
.thaw.live .painted{transition:none}
.thaw.live .snooze{transition:transform .5s cubic-bezier(.34,1.4,.64,1)}
.thaw.live .frame{transition:box-shadow .8s}
.thaw.live.warm .frame{box-shadow:0 0 0 2px rgba(255,179,71,.25),0 0 60px rgba(255,179,71,.22)}
@media (max-width:899px){
  .thaw-art{order:-1}
  .thaw.live .beats{min-height:4.6em}
  .thaw.live .beats li:not(.on){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;padding:0}
}
@media (min-width:900px){.stage-grid{grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:64px}}

/* critters */
.critters{position:relative;padding:20px 0 40px}
.intro{max-width:38rem;color:var(--dim);margin:16px 0 0;font-size:1.125rem}
.crew{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 14px}
.pod{text-align:center}
.pod h3{margin:0 0 6px}
.pod p{margin:0 auto;max-width:15rem;color:var(--dim);font-size:1rem}
.wake{position:relative;display:block;width:100%;max-width:170px;aspect-ratio:1;margin:0 auto 12px;padding:0;border:0;border-radius:30px;background:none;color:inherit;cursor:pointer}
.wake:disabled{cursor:default}
.wake::before{content:"";position:absolute;left:12%;right:12%;bottom:-2%;height:12%;border-radius:50%;background:rgba(221,239,255,.13)}
.wake .cr{position:absolute;left:6%;top:4%;width:88%;height:88%;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.wake .ice{position:absolute;inset:8% 8% 4%;border-radius:26% 22% 28% 24%;background:linear-gradient(165deg,rgba(236,246,255,.5),rgba(150,196,240,.34));box-shadow:inset 0 0 0 3px rgba(255,255,255,.75),inset 0 -8px 0 rgba(63,109,153,.28),0 8px 0 rgba(8,10,30,.35);z-index:1;transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .3s}
.wake .ice::before{content:"";position:absolute;left:14%;top:12%;width:22%;height:8%;border-radius:999px;background:rgba(255,255,255,.85);transform:rotate(-35deg)}
.wake .trick{position:absolute;z-index:2;right:0;top:0;width:32%;transform:scale(0);transition:transform .4s .15s cubic-bezier(.34,1.56,.64,1)}
.wake[aria-pressed="true"] .ice,:root:not(.ready) .wake .ice{transform:scale(1.18);opacity:0}
.wake[aria-pressed="true"] .cr{transform:translateY(-4%) scale(1.06)}
.wake[aria-pressed="true"] .trick,:root:not(.ready) .wake .trick{transform:none}
.wake[aria-pressed="true"] .aw,:root:not(.ready) .wake .aw{opacity:1}
.wake[aria-pressed="true"] .zz,:root:not(.ready) .wake .zz{opacity:0}
.wake .cr .zz{animation:snore 3.4s ease-in-out infinite}
@keyframes snore{50%{transform:translateY(1.5px)}}
@media (hover:hover){.wake:not(:disabled):hover .ice{transform:rotate(-2deg) scale(1.03)}}
.album{max-width:40rem;margin:40px 0 0;color:var(--dim)}
@media (min-width:900px){.crew{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}}

.fair{background:var(--hill0);padding:56px 0 96px}
.fair-list{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:30px}
.fair-list svg{width:48px;height:48px;margin-bottom:14px}
.fair-list h3{margin-bottom:6px}
.fair-list p{margin:0;color:var(--dim);max-width:24rem}
@media (min-width:900px){.fair-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:44px}}

/* chapters */
.chapters{position:relative;padding:0 0 88px}
.ridge.flip{margin-top:0;transform:scaleY(-1)}
.chapters h2{margin-top:44px}
.trail-wrap{position:relative;margin:44px 0 28px}
.trail{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid;gap:18px}
.trail li{display:flex;align-items:center;gap:16px;min-height:64px}
.trail li:nth-child(even){margin-left:72px}
.lamp{flex:none;display:grid;place-items:center;width:64px;height:64px;font:600 1.5rem/1 var(--display);color:var(--paper);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%233A4785'%3E%3Ccircle cx='32' cy='32' r='26'/%3E%3Ccircle cx='32' cy='6' r='7'/%3E%3Ccircle cx='45' cy='9.5' r='7'/%3E%3Ccircle cx='54.5' cy='19' r='7'/%3E%3Ccircle cx='58' cy='32' r='7'/%3E%3Ccircle cx='54.5' cy='45' r='7'/%3E%3Ccircle cx='45' cy='54.5' r='7'/%3E%3Ccircle cx='32' cy='58' r='7'/%3E%3Ccircle cx='19' cy='54.5' r='7'/%3E%3Ccircle cx='9.5' cy='45' r='7'/%3E%3Ccircle cx='6' cy='32' r='7'/%3E%3Ccircle cx='9.5' cy='19' r='7'/%3E%3Ccircle cx='19' cy='9.5' r='7'/%3E%3C/g%3E%3Ccircle cx='32' cy='32' r='21' fill='%232A3570'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),color .3s}
.lamp::before{content:"";position:absolute;width:64px;height:64px;border-radius:50%;opacity:0;transition:opacity .5s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23F0805A'%3E%3Ccircle cx='32' cy='32' r='26'/%3E%3Ccircle cx='32' cy='6' r='7'/%3E%3Ccircle cx='45' cy='9.5' r='7'/%3E%3Ccircle cx='54.5' cy='19' r='7'/%3E%3Ccircle cx='58' cy='32' r='7'/%3E%3Ccircle cx='54.5' cy='45' r='7'/%3E%3Ccircle cx='45' cy='54.5' r='7'/%3E%3Ccircle cx='32' cy='58' r='7'/%3E%3Ccircle cx='19' cy='54.5' r='7'/%3E%3Ccircle cx='9.5' cy='45' r='7'/%3E%3Ccircle cx='6' cy='32' r='7'/%3E%3Ccircle cx='9.5' cy='19' r='7'/%3E%3Ccircle cx='19' cy='9.5' r='7'/%3E%3C/g%3E%3Ccircle cx='32' cy='32' r='21' fill='%23FFB347'/%3E%3Ccircle cx='32' cy='32' r='21' fill='none' stroke='%23FFD58A' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat;
  box-shadow:0 0 30px 6px rgba(255,179,71,.35)}
.lamp{position:relative}
.lamp>*{position:relative}
.trail li .name{font-family:var(--display);font-weight:500;font-size:1.125rem}
.trail li.lit .lamp,:root:not(.ready) .trail .lamp{color:var(--ink);transform:scale(1.06)}
.trail li.lit .lamp::before,:root:not(.ready) .trail .lamp::before{opacity:1}
.lamp{isolation:isolate}
.lamp::before{z-index:-1}
.trail-line{position:absolute;left:0;top:0;display:block}
.trail-line.h{display:none}
.extras{display:grid;gap:26px;margin-top:44px}
.extras p{margin:8px 0 0;color:var(--dim);max-width:30rem}
.chapters h2.sub{margin-top:72px}
@media (min-width:760px){
  .trail{grid-template-columns:repeat(7,minmax(0,1fr));gap:0}
  .trail li{flex-direction:column;gap:12px;text-align:center}
  .trail li:nth-child(even){margin-left:0;margin-top:64px}
  .trail-line.v{display:none}
  .trail-line.h{display:block;width:100%;height:128px}
  .extras{grid-template-columns:1fr 1fr;gap:48px}
  .extras.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
}

/* comfort */
.comfort{position:relative;padding:20px 0 96px}
.comfort-grid{display:grid;gap:44px}
.swatches{list-style:none;margin:26px 0 24px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 10px;max-width:30rem}
.swatches li{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.875rem;line-height:1.3;color:var(--dim);text-align:center}
.sw{position:relative;display:block;width:58px;height:58px}
.sw>i{position:absolute;inset:4.5%;border-radius:24% 21% 26% 22%;background:var(--c);box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--c),#000 28%),0 3px 0 rgba(8,10,30,.45);transition:background-color .3s}
.sw>i::after{content:"";position:absolute;inset:13%;border-radius:22%;background:color-mix(in srgb,var(--c),#fff 20%)}
.sw svg{position:absolute;left:27%;top:27%;width:46%;height:46%;color:color-mix(in srgb,var(--c),#000 46%)}
:root[data-contrast="high"] .sw>i{box-shadow:inset 0 0 0 2px #000,0 3px 0 rgba(8,10,30,.45)}
:root[data-contrast="high"] .sw svg{color:var(--ink)}
:root[data-contrast="high"][data-palette="cb"] .sw.t4 svg{color:#fff}
.switches{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.switch{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 16px 0 8px;border:2px solid var(--line);border-radius:999px;background:rgba(246,235,217,.05);color:var(--paper);font:500 1rem/1.2 var(--display);cursor:pointer}
.knob{position:relative;flex:none;width:44px;height:26px;border-radius:999px;background:#3A4377;transition:background-color .2s}
.knob::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--paper);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.switch[aria-checked="true"]{border-color:rgba(255,179,71,.6)}
.switch[aria-checked="true"] .knob{background:var(--ember)}
.switch[aria-checked="true"] .knob::after{transform:translateX(18px)}
.fine{flex-basis:100%;margin:6px 0 0;font-size:.875rem;color:var(--dim)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:16px;align-content:start}
.ticks li{position:relative;padding-left:36px;color:var(--dim)}
.ticks li::before{content:"";position:absolute;left:0;top:.15em;width:24px;height:24px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1' y='1' width='22' height='22' rx='7' fill='%236DBB5A'/%3E%3Cpath d='M7 12.5l3.5 3.5L17 9' fill='none' stroke='%230B0F26' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.ticks strong{color:var(--paper);font-weight:600}
@media (min-width:600px){.swatches{grid-template-columns:repeat(6,minmax(0,1fr));max-width:none}}
@media (min-width:980px){.comfort-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:72px;align-items:start}.ticks{padding-top:78px}}

/* gallery */
.gallery{position:relative;background:#141B42;padding:20px 0 96px}
.shots{list-style:none;display:flex;gap:20px;margin:30px 0 0;padding:6px var(--gutter) 22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--hill2) transparent}
.shots li{flex:0 0 auto;width:min(62vw,230px);scroll-snap-align:start}
.shots figure{margin:0}
.shots .phone{width:100%;padding:7px;border-radius:32px}
.shots .phone img{border-radius:25px}
.shots figcaption{margin-top:12px;color:var(--dim);font-size:.9375rem;line-height:1.35;text-align:center}
.shots:focus-visible{outline-offset:-3px}
@media (min-width:1560px){.shots{justify-content:center;overflow:visible}}

/* finale */
.finale{position:relative;padding:72px 0 112px;text-align:center;background:radial-gradient(ellipse 60% 50% at 50% 40%,rgba(255,179,71,.1),transparent 70%)}
.finale-inner{max-width:680px}
.finale p{color:var(--dim);margin:16px auto 0;max-width:34rem}
.finale .cta{justify-content:center}
.finale .fine{font-size:.9375rem}
.perched{position:relative;width:130px;height:140px;margin:0 auto 18px}
.perched .dish{left:6px;right:6px;bottom:2px;height:22px}
.perched .gl{position:absolute;left:50%;bottom:16px;width:96px;height:112px;margin-left:-48px;animation:bob 3.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}


@media (prefers-reduced-motion:reduce){
  .hero h1 .frost{display:none}
  .thaw .snooze{transition:none}
}
.thaw .snooze{z-index:2}
.thaw .snooze>i{transition:opacity .3s,transform .3s}
.thaw .snooze.awake>i{opacity:0;transform:scale(1.3)}
.thaw .snooze.awake svg{transform:scale(1.25)}
.freed-chip{display:inline-flex;align-items:center;gap:6px;color:var(--ember);font:600 .9375rem/1.2 var(--display)}
.freed-chip svg{width:30px;height:30px;margin:-6px 0}