*,*::before,*::after{box-sizing:border-box}
/* Mobile feel: no gray tap flash, no page bounce past the thread's scroll-snap. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
body{overscroll-behavior:none}
body,h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit;touch-action:manipulation}

@font-face{font-family:Fraunces;src:url("../fonts/Fraunces.ttf") format("truetype");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Fraunces;src:url("../fonts/Fraunces-Italic.ttf") format("truetype");font-weight:100 900;font-style:italic;font-display:swap}
:root{
  --font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
  --font-mono:Menlo,"SF Mono","Roboto Mono",ui-monospace,monospace;
  --font-display:Fraunces,"Iowan Old Style","Palatino Linotype",serif;
  --fs-display:clamp(44px,7.5vw,96px);
  --fs-title:clamp(34px,5vw,64px);
  --fs-body:clamp(16px,11px + .62vw,19px);
  --fs-note:clamp(15px,11px + .3vw,16px);
}
html[data-hero-scale="giant"]{--fs-display:clamp(52px,11vw,120px)}
html[data-hero-scale="mid"]{--fs-display:clamp(44px,7.5vw,88px)}
html[data-hero-scale="mini"]{--fs-display:clamp(36px,5vw,56px)}
body{background:var(--ground);color:var(--text);font:400 15px/1.5 var(--font-ui)}
h1,h2{font-family:var(--font-display);font-weight:400;font-variation-settings:"SOFT" 100,"opsz" 144;letter-spacing:-.02em;line-height:1.05;text-wrap:balance}
h1{font-size:var(--fs-display)}
h2{font-size:var(--fs-title)}
.eyebrow{font:600 14px/1.2 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ember-soft)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--text-muted)}

/* Section copy: body and notes grow with the window. Text inside the phone is set in em and does not use these. */
.stage [class*="__body"]{font-size:var(--fs-body)}
.stage [class*="__note"],.stage [class*="__premium"]{font-size:var(--fs-note)}
.premium-note{display:block;margin-top:var(--space-1)}

html{scroll-behavior:smooth}
html[data-snap="proximity"]{scroll-snap-type:y proximity}
html[data-snap="mandatory"]{scroll-snap-type:y mandatory}
body{position:relative;min-height:100vh;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0}
html[data-glow="top-right"] body::before{background:radial-gradient(60% 50% at 100% 0%,color-mix(in srgb,var(--glow) 22%,transparent),transparent 70%)}
html[data-glow="top-left"] body::before{background:radial-gradient(60% 50% at 0% 0%,color-mix(in srgb,var(--glow) 22%,transparent),transparent 70%)}
main,footer{position:relative;z-index:1}
.stage{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:var(--space-12) var(--space-6);scroll-snap-align:start}
html[data-density="compact"] .stage{padding-block:var(--space-8)}
.stage__inner{position:relative;z-index:1;max-width:44rem;display:grid;gap:var(--space-4)}
.stage--right .stage__inner{margin-left:auto}
.thread-seg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}
.thread-cold,.thread-warm{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-width:var(--thread-width,1.5px)}
.thread-cold{stroke:var(--line)}
.thread-warm{stroke:var(--ember);stroke-dasharray:1;stroke-dashoffset:0}
.thread-stop{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;z-index:1;pointer-events:none;background:var(--cold-cell);transition:background var(--dur-grow,600ms) ease-out,box-shadow var(--dur-grow,600ms) ease-out,transform var(--dur-grow,600ms) ease-out;clip-path:polygon(50% 25%,57% 43%,75% 50%,57% 57%,50% 75%,43% 57%,25% 50%,43% 43%)}
.thread-stop.is-lit{background:var(--ember);transform:scale(1.6);clip-path:polygon(50% 0,57% 43%,100% 50%,57% 57%,50% 100%,43% 57%,0 50%,43% 43%)}
.thread-stop.is-glow{filter:drop-shadow(0 0 8px var(--glow))}
.thread-ember{position:absolute;left:0;top:0;width:12px;height:12px;margin:0;border-radius:50%;z-index:2;pointer-events:none;background:var(--ember);box-shadow:0 0 14px 4px color-mix(in srgb,var(--glow) 55%,transparent);will-change:transform;display:none}
.js-ready .thread-ember{display:block}
.thread-ember[hidden]{display:none!important}
.js-ready .thread-warm{stroke-dashoffset:1}
.side-rail{display:none}
.side-rail a[aria-current]{background:var(--ember)}
.site-footer{padding:var(--space-12) var(--space-6);display:grid;gap:var(--space-4);border-top:1px solid var(--line);background:var(--ground-deep)}
.site-footer ul{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.site-footer small{color:var(--text-muted)}
@media (min-width:1100px){
  .stage{padding-inline:var(--space-12)}
  .side-rail{display:block;position:fixed;right:var(--space-4);top:50%;transform:translateY(-50%);z-index:5}
  .side-rail ul{display:grid;gap:var(--space-3)}
  .side-rail a{display:block;width:10px;height:10px;border-radius:var(--radius-pill);background:var(--cold-cell)}
  .side-rail a{transition:background var(--dur-warm,400ms)}
  .side-rail a{position:relative}
  .side-rail a::before{content:"";position:absolute;inset:-7px}
  .side-rail a:hover,.side-rail a:focus-visible{background:var(--ember-soft)}
  .side-rail a:focus-visible{outline:2px solid var(--ember-soft);outline-offset:4px}
  .rail__name{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font:500 13px/1.2 var(--font-ui);white-space:nowrap;color:var(--text-muted);opacity:0;pointer-events:none;transition:opacity var(--dur-warm,400ms) ease-out}
  .side-rail a[aria-current] .rail__name{opacity:1;color:var(--text)}
  .side-rail a:hover .rail__name,.side-rail a:focus-visible .rail__name{opacity:1;color:var(--text)}
  .side-rail a[href="#hero"] .rail__name{display:none}
}
@media (max-width:699px){
  .stage{padding:var(--space-12) var(--space-4) var(--space-12) var(--space-12)}
  .thread-seg{display:none}
  .has-thread .stage::before,.has-thread .stage::after{content:"";position:absolute;left:20px;top:0;bottom:0;width:var(--thread-width,1.5px);margin-left:calc(var(--thread-width,1.5px)/-2);pointer-events:none}
  .has-thread .stage::before{background:var(--line)}
  .has-thread .stage::after{background:var(--ember);transform-origin:top;transform:scaleY(var(--seg-p,1))}
  .thread-stop{left:20px!important}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;scroll-snap-type:none!important}.thread-ember{display:none!important}.js .thread-warm{stroke-dashoffset:0}.thread-stop{transition:none}}

.page{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:var(--space-12) var(--space-6)}
.page__main{max-width:44rem;width:100%;margin:0 auto}
.page__line{font-size:var(--fs-title)}
.page__back{max-width:44rem;width:100%;margin:var(--space-6) auto 0}
.page a,.site-footer a{color:var(--ember-soft)}
.page__draft{padding:var(--space-3) var(--space-4);margin-bottom:var(--space-6);border-radius:var(--radius-md);background:var(--ember-wash);color:var(--ember-soft);font-weight:600}
.prose{display:grid;gap:var(--space-4);line-height:1.6}
.prose h1,.prose h2,.prose h3{font-family:var(--font-display);font-weight:400;margin-top:var(--space-4)}
.prose h1{font-size:var(--fs-title)}
.prose h2{font-size:clamp(24px,3vw,32px)}
.prose h3{font-size:20px}
.prose ul,.prose ol{padding-left:var(--space-6);list-style:revert;display:grid;gap:var(--space-2)}
.prose table{border-collapse:collapse;width:100%}
.prose th,.prose td{text-align:left;padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--line);vertical-align:top}
.prose blockquote{border-left:2px solid var(--line);padding-left:var(--space-4);color:var(--text-muted)}
.page__licence{white-space:pre-wrap;font:400 13px/1.5 var(--font-mono);color:var(--text-muted);background:var(--surface);padding:var(--space-4);border-radius:var(--radius-md);overflow-wrap:anywhere}

.btn{display:inline-flex;align-items:center;justify-content:center;justify-self:start;align-self:start;width:fit-content;max-width:100%;min-height:46px;padding:12px var(--space-8);border-radius:var(--radius-pill);background:var(--ember);color:var(--on-ember);font:600 15px/1.2 var(--font-ui);text-align:center;text-decoration:none;transition:transform var(--dur-press) ease-out,background var(--dur-press) ease-out;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
/* :active fires on every input, including touch, and gives the tap its own feedback. */
a.btn:active{background:var(--ember-deep);transform:scale(.98)}
/* :hover only where the input can truly hover, so a tap never leaves the button stuck lit. */
@media (hover:hover) and (pointer:fine){a.btn:hover{background:var(--ember-deep)}}
.btn:focus-visible{outline:2px solid var(--ember-soft);outline-offset:3px}
.btn--static{cursor:default}
@media (max-width:699px){.btn{width:100%;justify-self:stretch}}
.status{display:flex;align-items:center;gap:var(--space-2);margin:0;color:var(--ember-soft);font:500 16px/1.3 var(--font-ui);cursor:default;user-select:none}
.status .spark{flex:none;width:22px;height:22px}

.spark,.spark-field{display:block;overflow:visible}

.spark-field{flex:none}
.spark,.spark-field{display:block;overflow:visible}
.sf-cell{transform-box:fill-box;transform-origin:center}
.sf-lit{transform-box:fill-box;transform-origin:center}
.sf-cold{opacity:0}
.is-alive .sf-hot{animation:breathe var(--dur-breathe) ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.14)}}
@media (prefers-reduced-motion:reduce){.is-alive .sf-hot{animation:none}}

.phone{position:relative;width:var(--phone-width,280px);aspect-ratio:390/844;font-size:calc(var(--phone-width,280px)/28);border:1px solid var(--line);border-radius:calc(var(--phone-width,280px)*.14);background:var(--ground-deep);padding:6px;overflow:hidden}
.phone__island{position:absolute;top:.9em;left:50%;width:28%;height:3.2%;transform:translateX(-50%);border-radius:var(--radius-pill);background:var(--ground-deep);z-index:2}
.phone__screen{position:relative;width:100%;height:100%;border-radius:calc(var(--phone-width,280px)*.12);background:var(--ground);overflow:hidden;padding:0}

.sheet{background:var(--ground-deep);border-radius:var(--radius-frame);padding:var(--space-2) var(--space-3)}
.sheet__strip{height:6px;margin:var(--space-1) 0;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--text) 20%,transparent) 0 8px,transparent 8px 14px)}
.sheet__frames{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2)}
.frame{margin:0}
.frame__photo{position:relative;aspect-ratio:4/3;border-radius:3px;background:var(--ember-wash);overflow:hidden}
.frame--cold .frame__photo{background:var(--surface-high);filter:grayscale(1) brightness(.55)}
.frame__box{position:absolute;width:38%;height:34%;border:2px solid var(--box)}
.frame__spark{position:absolute;top:2px;right:2px;line-height:0}
.frame__photo .photo{position:absolute;inset:0}
.frame__photo{transition:filter var(--dur-warm) ease-out}
.frame__spark{transform-origin:center}
.is-alive .frame--hot .frame__spark{animation:breathe var(--dur-breathe) ease-in-out infinite}
.frame__no{margin-top:var(--space-1);font:400 11px/1.2 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-muted)}
.frame--next .frame__no{color:var(--ember-soft)}
@media (prefers-reduced-motion:reduce){.is-alive .frame--hot .frame__spark{animation:none}}
/* Film strip: the sheet as the first screen. One gap (the sheet's own), no shadows, no tiles. */
.sheet--film{display:flex;flex-direction:column;flex:1;min-height:0;width:100%}
.sheet--film .sheet__frames{flex:1;min-height:0;grid-template-columns:repeat(var(--n),minmax(0,1fr));grid-auto-rows:minmax(0,1fr)}
.frame--link{display:grid;grid-template-rows:minmax(44px,1fr) auto auto;gap:var(--space-2);min-height:0;color:var(--text);text-decoration:none;border-radius:3px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.frame--link .fr__crop{aspect-ratio:auto;container-type:size;min-height:44px;transition:filter var(--dur-warm) ease-out}
.fr__name{font:400 clamp(20px,1.9vw,28px)/1.1 var(--font-display);font-variation-settings:"SOFT" 100,"opsz" 72;letter-spacing:-.01em;color:var(--text)}
.fr__line{min-height:2.7em;font:400 clamp(12px,1.05vw,15px)/1.35 var(--font-ui);color:var(--text-muted)}
.frame--link .fr__crop::after{content:"";position:absolute;inset:0;z-index:2;border:2px solid var(--ember);border-radius:3px;opacity:0;pointer-events:none;transition:opacity var(--dur-press) ease-out}
.frame--link:focus-visible{outline:none}
.frame--link:focus-visible .fr__crop{filter:brightness(1.14) saturate(1.1)}
.frame--link:focus-visible .fr__crop::after{opacity:1}
.frame--link:focus-visible .fr__line{color:var(--text)}
/* :hover only for a real pointer, so a tap never leaves a frame stuck bright. */
@media (hover:hover) and (pointer:fine){
  .frame--link:hover .fr__crop{filter:brightness(1.14) saturate(1.1)}
  .frame--link:hover .fr__crop::after{opacity:1}
  .frame--link:hover .fr__line{color:var(--text)}
}
@media (min-width:700px) and (max-width:1099px){.sheet--film .sheet__frames{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:699px){
  .sheet--film .sheet__frames{grid-template-columns:repeat(2,minmax(0,1fr))}
  .frame--link{gap:var(--space-1)}
  .fr__name{font-size:20px}
  .fr__line{min-height:2.6em;font-size:12px;line-height:1.3}
}

.photo{display:block;width:100%;height:100%;object-fit:cover;transition:filter var(--dur-warm) ease-out}
.photo-cold{filter:grayscale(1) brightness(.55)}

.spark-ring{display:block;width:100%;height:auto;overflow:visible}
.spark-ring text{font:400 11.5px var(--font-ui);fill:var(--text-muted);text-anchor:middle;dominant-baseline:middle}
.spark-ring .sr-label--first{font-size:13px;fill:var(--ember-soft)}
.sr-ring{fill:none;stroke:var(--text);stroke-opacity:.12;stroke-width:1}
.sr-seg{fill:none;stroke:var(--heat-4);stroke-width:2;stroke-linecap:round;opacity:0}
.sr-disc{fill:var(--surface-high);stroke:var(--text);stroke-opacity:.28;stroke-width:1.2}
.sr-icon{fill:none;stroke:var(--text-muted);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transform:scale(.85)}
.sr-icon--warm{stroke:var(--ember-soft)}
.sr-warm{opacity:0}
.sr-warm-disc{fill:var(--ember-wash);stroke:var(--ember);stroke-width:2}
.sr-node[data-node="0"] .sr-warm{opacity:1}
.sr-pulse{opacity:.55;transform-box:fill-box;transform-origin:center}
.sr-node:not([data-node="0"]) .sr-pulse{display:none}
.sr-centre-cold{fill:none;stroke:var(--heat-2);stroke-width:1.4;opacity:0}
.sr-model{opacity:1}

.stage__title{display:flex;align-items:center;gap:.22em;font-size:clamp(44px,5vw,76px);line-height:1.02;color:var(--text);text-wrap:balance}
.stage__spark{flex:none;width:.46em;height:.46em;overflow:visible}
.stage__tag{font:italic 400 clamp(21px,2vw,30px)/1.25 var(--font-display);font-variation-settings:"SOFT" 100,"opsz" 72;color:var(--text-muted);text-wrap:balance}

/* Hero: the overview. Tagline, descriptor and call to action on top, one film strip of the six stages below. */
.s-hero{--tail:clamp(40px,7svh,64px);--cold:grayscale(1) brightness(.55);flex-direction:column;align-items:stretch;justify-content:flex-start;gap:clamp(12px,2.2svh,24px);padding:clamp(20px,4svh,40px) var(--space-6) var(--tail)}
.hero__head{position:relative;z-index:1;display:grid;gap:clamp(8px,1.4svh,16px);justify-items:start}
.hero__row{display:flex;align-items:center;gap:var(--space-4)}
.hero__mark{flex:none;display:block;width:clamp(38px,3.4vw,52px);height:clamp(38px,3.4vw,52px)}
.hero__row h1{max-width:none;font-size:clamp(34px,5vw,72px);line-height:1.04}
.hero__descriptor{max-width:60em;font-size:clamp(18px,.6rem + 1.3vw,28px);line-height:1.35;color:var(--text)}
.hero__action{padding-top:var(--space-1)}
.hero__sheet{position:relative;z-index:3;display:flex;flex:1;min-height:clamp(340px,52svh,720px)}
/* The thread leaves the sheet's bottom edge on the Test side. Only the tail below the sheet shows; the ember passes under the sheet. */
.s-hero .thread-seg{clip-path:inset(calc(100% - var(--tail)) 0 0 0)}
.s-hero .thread-stop{top:auto;bottom:calc(var(--tail)/2 - 7px);margin-top:0}
/* Frame crops. Each is a drawing of the stage's real interface, built from the same tokens. */
.fr__crop{position:relative}
.fr__pic{--pw:max(100cqw,133.34cqh);position:absolute;top:50%;left:clamp(calc(100cqw - var(--pw)),calc(50cqw - var(--px,.5)*var(--pw)),0px);width:var(--pw);aspect-ratio:4/3;transform:translateY(-50%)}
.fr__pic .photo{position:absolute;inset:0}
.fr__tag{position:absolute;transform:translateY(-100%);padding:.1em .6em;border-radius:4px 4px 0 0;background:var(--box);color:var(--ink);font:600 13px/1.4 var(--font-ui)}
.fr__shutter{position:absolute;left:50%;bottom:12px;width:44px;height:44px;margin-left:-22px;display:grid;place-items:center;border-radius:50%;border:2px solid var(--text)}
.fr__shutter i{display:block;width:32px;height:32px;border-radius:50%;background:var(--text)}
.fr__save{position:absolute;left:10px;right:10px;bottom:10px;display:grid;place-items:center;height:30px;border-radius:var(--radius-pill);background:var(--ember);color:var(--on-ember);font:600 13px/1 var(--font-ui)}
.fr__heat{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);gap:3px;padding:3px;align-content:start;background:var(--ground-deep)}
.fr__heat i{display:block;aspect-ratio:1;border-radius:3px;background:var(--cold-cell)}
.fr__heat .h2{background:var(--heat-2)}
.fr__heat .h3{background:var(--heat-3)}
.fr__heat .h4{background:var(--heat-4)}
.fr__heat .is-rose{background:var(--error)}
.fr__chips{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(4px,1.6cqh,12px);padding:0 10px;background:var(--surface)}
.fr__row{position:relative;display:flex;align-items:center;flex:0 1 48px;min-height:0}
.fr__chip{flex:none;width:76%;height:100%;display:flex;align-items:center;padding:0 12px;border-radius:var(--radius-md);border:1px solid var(--line);background:var(--surface-high);color:var(--text);font-size:clamp(12px,1.05vw,15px);white-space:nowrap}
.fr__row.is-chosen .fr__chip{border-color:var(--ember);background:var(--ember-wash)}
.fr__send{position:relative;flex:1;border-top:2px dashed var(--ember)}
.fr__send::after{content:"";position:absolute;right:0;top:-7px;width:10px;height:10px;border-radius:2px;background:var(--ember)}
.fr__tap{position:absolute;left:58%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;border:2px solid var(--text);background:color-mix(in srgb,var(--text) 18%,transparent)}
.fr__term{position:absolute;inset:0;display:flex;flex-direction:column;gap:6px;padding:10px;overflow:hidden;background:var(--ground);border:1px solid var(--line);font-size:clamp(12px,.95vw,14px);line-height:1.45;color:var(--text-muted)}
.fr__dots{display:flex;gap:5px;padding-bottom:4px}
.fr__dots i{width:8px;height:8px;border-radius:50%;background:var(--cold-cell)}
.fr__cmd{color:var(--text);overflow-wrap:anywhere}
.fr__cmd b{font-weight:400;color:var(--ember-soft)}
.fr__out{overflow-wrap:anywhere}
/* Cold start. The HTML is the final state. With scripts and motion, the frames start grey until the scene warms them; if the scene never starts, they warm by themselves. */
html.js .s-hero:not([data-ready]) .fr__crop{filter:var(--cold);animation:thaw 1ms 2.5s forwards}
.s-hero[data-pre] .fr__crop{filter:var(--cold)}
.s-hero[data-pre] .sf-lit{opacity:0}
.s-hero[data-pre] .sf-cold{opacity:1}
@keyframes thaw{to{filter:none}}
@media (prefers-reduced-motion:reduce){html.js .s-hero:not([data-ready]) .fr__crop{filter:none;animation:none}}
@media (min-width:1100px){
  .s-hero{padding-inline:var(--space-12)}
  .hero__row h1{white-space:nowrap}
}
@media (max-width:699px){
  .s-hero{--tail:40px;gap:var(--space-3);padding:var(--space-4) var(--space-4) var(--tail)}
  .hero__head{gap:var(--space-2)}
  .hero__descriptor{font-size:18px;line-height:1.35}
  .hero__sheet{min-height:380px}
  .hero__mark{align-self:flex-start;margin-top:6px}
  .fr__shutter{bottom:6px;width:34px;height:34px;margin-left:-17px}
  .fr__shutter i{width:24px;height:24px}
  .fr__save,.fr__dots,.fr__out:nth-of-type(n+4){display:none}
  .fr__tag{font-size:12px}
  .fr__chip{font-size:12px;padding:0 8px}
  .fr__tap{width:18px;height:18px;margin:-9px 0 0 -9px}
  .fr__term{padding:6px 8px;gap:3px;font-size:12px;line-height:1.35}
  .has-thread .s-hero::before,.has-thread .s-hero::after{top:auto;height:var(--tail)}
}

.s-evening{--pw:min(24vw,340px);align-items:flex-start;overflow:hidden}
.evening__copy{position:relative;z-index:1;width:min(44%,34rem);display:grid;gap:var(--space-4);align-content:start}
.evening__body{color:var(--text)}
.evening__note{color:var(--text-muted)}
.evening__phone{position:absolute;z-index:1;left:calc(78% - var(--pw)/2);bottom:calc(var(--pw)*-.62)}
.ev{height:100%;padding:3.4em 1.4em 0}
.ev__greet{font:400 2.6em/1.05 var(--font-display);font-variation-settings:"SOFT" 100,"opsz" 144;letter-spacing:-.02em;margin:0 0 .5em}
.ev__card{background:var(--surface);border-radius:1.2em;padding:1em}
.ev__head{display:flex;align-items:center;gap:.8em;margin-bottom:.9em}
.ev__head .spark-field{width:2.4em;height:2.4em}
.ev__lines{display:grid;gap:.45em;flex:1}
.ev__lines i{display:block;height:.7em;border-radius:var(--radius-pill);background:var(--surface-high)}
.ev__lines i:first-child{width:70%}
.ev__lines i:last-child{width:46%;height:.55em}
.ev .sheet{padding:.3em .5em;border-radius:.7em}
.ev .sheet__strip{height:.4em;margin:.3em 0}
.ev .sheet__frames{gap:.4em}
.ev .frame__no{font-size:.7em;margin-top:.2em}
.ev .frame__box{border-width:1.5px}
.ev__bar{margin-top:1em;height:.45em;border-radius:var(--radius-pill);background:var(--surface-high)}
.ev__bar i{display:block;width:64%;height:100%;border-radius:inherit;background:var(--ember)}
.s-evening[data-pre] .evening__phone{opacity:0}
.s-evening[data-pre] .ev__greet{opacity:0}
@media (max-width:699px){
  .s-evening{--pw:min(calc(100vw - 96px),300px);flex-direction:column;align-items:stretch;padding-bottom:0}
  .evening__copy{width:100%}
  .ev .frame__no{display:none}
  .evening__phone{position:relative;left:auto;bottom:auto;margin:auto 8% calc(var(--pw)*-.55) 0;align-self:flex-end}
}

.s-capture{display:grid;grid-template-columns:58fr 14fr 28fr;align-items:center;padding-inline:0}
.capture__block{grid-column:1;position:relative;z-index:1;background:var(--ground-deep);border-radius:0 var(--radius-card) var(--radius-card) 0;padding:var(--space-8) var(--space-12) var(--space-6) var(--space-12)}
.capture__sheet .sheet{padding:var(--space-3) var(--space-4)}
.capture__sheet .sheet__strip{height:8px}
.capture__sheet .sheet__frames{gap:var(--space-3)}
.capture__sheet .frame__no{font-size:12px}
.capture__sheet .frame__box{border-width:2px}
.capture__bar{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-6)}
.capture__shutter{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;border:2px solid var(--text)}
.capture__shutter i{display:block;width:42px;height:42px;border-radius:50%;background:var(--text)}
.capture__count{font-size:28px;line-height:1;color:var(--text)}
.capture__copy{grid-column:3;position:relative;z-index:1;display:grid;gap:var(--space-4);align-content:center;padding-right:var(--space-12)}
.capture__body{color:var(--text)}
.capture__note{color:var(--text-muted)}
.capture__format{margin-top:var(--space-2)}
.s-capture[data-pre] .frame--new{opacity:0}
@media (max-width:699px){
  .s-capture{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-6);padding:var(--space-8) var(--space-4) var(--space-8) var(--space-12)}
  .capture__block{border-radius:var(--radius-card);padding:var(--space-3)}
  .capture__sheet .sheet{padding:var(--space-1) var(--space-2)}
  .capture__sheet .sheet__frames{gap:var(--space-1)}
  .capture__sheet .frame__no{font-size:11px}
  .capture__bar{margin-top:var(--space-3);gap:var(--space-3)}
  .capture__shutter{width:40px;height:40px}
  .capture__shutter i{width:28px;height:28px}
  .capture__count{font-size:22px}
  .capture__copy{padding-right:0}
}

.s-label{--pw:min(26vw,calc((100svh - 128px)*.462));display:grid;grid-template-columns:17fr 34fr 15fr 34fr;align-items:center;padding-inline:0;overflow:hidden}
.label__wash{position:absolute;z-index:0;left:0;top:0;width:51%;height:100%;background:radial-gradient(48% 46% at 66% 50%,color-mix(in srgb,var(--ember-wash) 70%,transparent),transparent 72%);pointer-events:none}
.label__scene{grid-column:2;position:relative;z-index:1;justify-self:center}
.label__copy{grid-column:4;position:relative;z-index:1;align-self:end;display:grid;gap:var(--space-4);padding-right:var(--space-12);max-width:30rem}
.label__body{color:var(--text)}
.label__note{color:var(--text-muted)}
.label__line{display:block;margin-bottom:var(--space-1);font-size:clamp(15px,12px + .4vw,18px);color:var(--text)}
/* The editor (DESIGN.md section 4). 1em is a 28th of the phone width. */
.ed{height:100%;display:flex;flex-direction:column;padding-top:3.4em;font-size:1em}
.ed__top{display:flex;align-items:center;justify-content:space-between;height:2.6em;padding:0 1em}
.ed__ico{display:flex;gap:.5em;color:var(--text)}
.ed__ico svg{width:1.55em;height:1.55em}
.ed__pos{font-size:1.05em;color:var(--text)}
.ed__photo{position:relative;aspect-ratio:1;width:100%;overflow:hidden;background:var(--surface-high)}
.ed__boxsvg{position:absolute;inset:0;width:100%;height:100%}
.ed__box{fill:none;stroke:var(--label-2);stroke-width:.7;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke var(--dur-warm) ease-out,stroke-dashoffset 520ms ease-out}
.ed__tag{position:absolute;transform:translateY(-100%);padding:.2em .7em;border-radius:.3em .3em 0 0;background:var(--label-2);color:var(--on-ember);font:600 1.05em/1.4 var(--font-ui);transition:opacity var(--dur-enter) ease-out}
.ed__spark{position:absolute;top:.8em;right:.8em;line-height:0;transform-origin:center;transition:transform var(--dur-grow) cubic-bezier(.2,.8,.3,1),opacity var(--dur-enter) ease-out}
.ed__spark svg{width:2.1em;height:2.1em}
.ed__seg{display:flex;margin:.8em 1em 0;height:2.8em;border-radius:var(--radius-pill);background:var(--ground-deep);padding:.25em}
.ed__seg span{flex:1;display:grid;place-items:center;border-radius:var(--radius-pill);color:var(--text-muted)}
.ed__seg span.is-on{background:var(--surface-high);color:var(--text)}
.ed__seg svg{width:1.4em;height:1.4em}
.ed__chips{display:flex;gap:.6em;margin:.9em 1em 0}
.chip{display:flex;align-items:center;gap:.5em;padding:.45em .9em;border-radius:var(--radius-pill);border:1px solid var(--line);font-size:1.05em;line-height:1.2;color:var(--text);transition:background var(--dur-press) ease-out,border-color var(--dur-press) ease-out}
.chip i{width:.8em;height:.8em;border-radius:50%;background:var(--chip)}
.chip.is-chosen{border-color:var(--chip);background:color-mix(in srgb,var(--chip) 22%,transparent)}
.ed__film{display:flex;gap:.45em;margin:1.1em 1em 0}
.film__f{position:relative;flex:1;aspect-ratio:1;border-radius:.3em;overflow:hidden}
.film__f.is-current{outline:2px solid var(--ember-soft);outline-offset:1px}
.film__f.is-cold .photo{filter:grayscale(1) brightness(.55)}
.ed__foot{margin-top:auto;padding:0 1em 1.2em;display:grid;gap:.7em}
.ed__left{font-size:1.15em;color:var(--text)}
.ed__save{display:grid;place-items:center;height:3.3em;border-radius:var(--radius-pill);background:var(--ember);color:var(--on-ember);font:600 1.1em/1 var(--font-ui)}
/* Playing: data-step runs 0 (cold, nothing drawn) to 5 (done). No attribute is the finished picture. */
.label__scene[data-step] .ed__photo > .photo,.label__scene[data-step] .film__f.is-current .photo{filter:grayscale(1) brightness(.55)}
.label__scene[data-step="0"] .ed__box{stroke-dashoffset:1;stroke:var(--text)}
.label__scene[data-step="1"] .ed__box{stroke-dashoffset:0;stroke:var(--text)}
.label__scene:is([data-step="0"],[data-step="1"]) .ed__tag{opacity:0}
.label__scene:is([data-step="0"],[data-step="1"]) .chip.is-chosen{border-color:var(--line);background:transparent}
.label__scene:is([data-step="3"],[data-step="4"],[data-step="5"]) .ed__photo > .photo,.label__scene:is([data-step="3"],[data-step="4"],[data-step="5"]) .film__f.is-current .photo{filter:none}
.label__scene:is([data-step="0"],[data-step="1"],[data-step="2"],[data-step="3"]) .ed__spark{transform:scale(0);opacity:0}
@media (max-width:699px){
  .s-label{--pw:min(calc(100vw - 80px),300px);display:flex;flex-direction:column;align-items:stretch;gap:var(--space-4);padding:var(--space-8) var(--space-4) 0 var(--space-12)}
  .label__wash{width:100%}
  .label__copy{order:-1;padding-right:0;max-width:none}
  .label__scene{align-self:center;margin-top:auto;margin-bottom:calc(var(--pw)*-.2)}
  .label__copy{gap:var(--space-3)}
}

.s-health{flex-direction:column;align-items:stretch;justify-content:flex-start;padding:clamp(24px,5svh,56px) 0 var(--space-12)}
.health__strip{position:relative;z-index:1;display:grid;grid-template-columns:repeat(40,1fr);gap:4px}
.hs{display:block;aspect-ratio:1;border-radius:3px;background:var(--cold-cell)}
.hs--2{background:var(--heat-2)}
.hs--3{background:var(--heat-3)}
.hs--4{background:var(--heat-4)}
.hs--rose{background:var(--error)}
.health__legend{position:relative;z-index:1;display:flex;align-items:center;gap:var(--space-2);margin:var(--space-4) var(--space-12) 0;color:var(--text-muted)}
.health__legend .hs{width:14px}
.health__legend span{font-size:var(--fs-note);color:var(--text);opacity:1}
.health__copy{position:relative;z-index:1;margin:auto var(--space-12) 0;max-width:34rem;display:grid;gap:var(--space-4)}
.health__body{color:var(--text)}
.health__note{color:var(--text-muted)}
.s-health[data-pre] .hs{background:var(--cold-cell)}
.s-health[data-pre] .health__legend{opacity:0}
@media (max-width:699px){
  .s-health{padding-bottom:var(--space-8)}
  .health__strip{grid-template-columns:repeat(20,1fr);gap:3px}
  .health__legend{margin-inline:var(--space-4)}
  .health__copy{margin:auto var(--space-4) 0 var(--space-12)}
}

.s-private{--ps:min(104svh,78vw);background:var(--ground-deep);overflow:hidden}
.private__spark{position:absolute;z-index:1;left:calc(96% - var(--ps)/2);top:calc(50% - var(--ps)/2);width:var(--ps);height:var(--ps);pointer-events:none}
.private__spark .spark{width:100%;height:100%}
.private__copy{position:relative;z-index:2;max-width:27rem;display:grid;gap:var(--space-4)}
.private__body{color:var(--text)}
.private__facts{display:grid;margin-top:var(--space-2);color:var(--text-muted);font-size:var(--fs-note)}
.private__facts li{padding:var(--space-3) 0;border-top:1px solid var(--line)}
.s-private[data-pre] .private__spark{opacity:0}
@media (max-width:699px){
  .s-private{--ps:min(150vw,70svh);align-items:flex-start}
  .private__spark{left:calc(100% - var(--ps)*.62);top:auto;bottom:calc(var(--ps)*-.28)}
  .private__copy{gap:var(--space-3)}
  .private__facts li{padding:var(--space-2) 0}
}

.s-export{--cw:clamp(17rem,25vw,27rem);--ch:clamp(5rem,13svh,8rem);background:var(--surface);display:grid;grid-template-columns:5fr 7fr;column-gap:var(--space-8);align-items:center}
.export__lead{position:relative;z-index:1;max-width:26rem;display:grid;gap:var(--space-4)}
.export__body{color:var(--text)}
.export__note{color:var(--text-muted)}
.export__stage{position:relative;z-index:1;align-self:center;height:min(76svh,700px)}
.ex__chips{position:absolute;inset:0}
.ex__chip{position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center;width:var(--cw);height:var(--ch);padding:0 var(--space-8);border-radius:var(--radius-xl);border:1px solid var(--line);background:var(--surface-high);color:var(--text);font-size:clamp(22px,2.3vw,36px);transition:opacity var(--dur-enter) ease-out,transform var(--dur-enter) ease-out,border-color var(--dur-press) ease-out,background var(--dur-press) ease-out}
.ex__chip.is-chosen{border-color:var(--ember);background:var(--ember-wash)}
.ex__line{position:absolute;left:calc(var(--x) + var(--cw));right:0;top:calc(var(--y) + var(--ch)/2);border-top:2px dashed var(--ember);transition:border-color var(--dur-warm) ease-out}
.ex__line::after{content:"";position:absolute;right:0;top:-12px;width:22px;height:22px;border-radius:5px;background:var(--ember);transition:background var(--dur-warm) ease-out}
.ex__tap{position:absolute;left:calc(var(--x) + var(--cw)*.78);top:calc(var(--y) + var(--ch)*.52);width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:3px solid var(--text);background:color-mix(in srgb,var(--text) 18%,transparent);transition:opacity var(--dur-enter) ease-out,transform var(--dur-enter) ease-out}
@keyframes tap-ripple{from{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(2.2)}}
.ex__tap::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--text);opacity:0}
.export__stage[data-step="5"] .ex__tap::after{animation:tap-ripple 700ms ease-out both}
/* Playing: data-step 0 nothing, 1 to 3 the chips step in, 4 one is chosen, 5 a tap shows, 6 the line warms. No attribute is the finished picture. */
.export__stage[data-step="0"] .ex__chip{opacity:0;transform:translateY(-16px)}
.export__stage[data-step="1"] .ex__chip:nth-child(n+2){opacity:0;transform:translateY(-16px)}
.export__stage[data-step="2"] .ex__chip:nth-child(n+3){opacity:0;transform:translateY(-16px)}
.export__stage:is([data-step="0"],[data-step="1"],[data-step="2"],[data-step="3"]) .ex__chip.is-chosen{border-color:var(--line);background:var(--surface-high)}
.export__stage:is([data-step="0"],[data-step="1"],[data-step="2"],[data-step="3"],[data-step="4"]) .ex__tap{opacity:0;transform:scale(.4)}
.export__stage:is([data-step="0"],[data-step="1"],[data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"]) .ex__line{border-color:var(--line)}
.export__stage:is([data-step="0"],[data-step="1"],[data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"]) .ex__line::after{background:var(--cold-cell)}
@media (max-width:699px){
  .s-export{--cw:13rem;--ch:4.2rem;grid-template-columns:1fr;row-gap:var(--space-6)}
  .export__stage{align-self:stretch;height:min(44svh,340px)}
  .ex__chip{padding:0 var(--space-4);font-size:20px;border-radius:var(--radius-lg)}
  .ex__tap{width:44px;height:44px;margin:-22px 0 0 -22px}
}

.s-train{background:var(--ground-deep);display:grid;grid-template-columns:58fr 14fr 28fr;align-items:center;padding-inline:0}
.train__panel{grid-column:1;position:relative;z-index:1;background:var(--ground);border:1px solid var(--line);border-left:0;border-radius:0 var(--radius-card) var(--radius-card) 0;overflow:hidden}
.tr__bar{display:flex;gap:var(--space-2);padding:var(--space-6) var(--space-8) 0}
.tr__bar i{width:12px;height:12px;border-radius:50%;background:var(--cold-cell)}
.tr__text{padding:var(--space-6) var(--space-12) var(--space-12);font-size:clamp(16px,1.4vw,21px);line-height:1.85}
.tr__cmd{display:flex;gap:.8em;color:var(--text)}
.tr__prompt{flex:none;color:var(--ember-soft)}
.tr__typed{flex:1;min-width:0;display:grid;overflow-wrap:anywhere}
.tr__typed::before{content:attr(data-full);grid-area:1/1;visibility:hidden}
.tr__typed > [data-cmd]{grid-area:1/1}
.tr__out{margin-top:var(--space-6);color:var(--text-muted);overflow-wrap:anywhere}
.tr__out li:last-child{color:var(--ember-soft)}
.train__copy{grid-column:3;position:relative;z-index:1;display:grid;gap:var(--space-4);align-content:center;padding-right:var(--space-12)}
.train__body{color:var(--text)}
.train__note{color:var(--text-muted)}
.train__link{color:var(--ember-soft);text-decoration:underline;text-underline-offset:4px;font-weight:600;touch-action:manipulation}
@media (hover:hover) and (pointer:fine){.train__link:hover{color:var(--text)}}
.train__link:focus-visible{outline:2px solid var(--ember-soft);outline-offset:3px}
/* Playing: data-step 0 command typing, 1 to 3 result lines. No attribute is the finished picture. */
.s-train[data-step="0"] .tr__out li,.s-train[data-step="0"] .tr__out{visibility:hidden}
.s-train[data-step="1"] .tr__out li:nth-child(n+2),.s-train[data-step="2"] .tr__out li:nth-child(n+3){visibility:hidden}
@media (max-width:699px){
  .s-train{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-6);padding:var(--space-8) var(--space-4) var(--space-8) var(--space-12)}
  .train__panel{border-left:1px solid var(--line);border-radius:var(--radius-card)}
  .tr__text{padding:var(--space-2) var(--space-4) var(--space-6);font-size:13px;line-height:1.6}
  .tr__out{margin-top:var(--space-4)}
  .tr__bar{padding:var(--space-3) var(--space-4)}
  .train__copy{padding-right:0}
}

.s-test{background:var(--ground-deep);align-items:flex-end;overflow:hidden;padding-bottom:var(--space-12)}
.s-test .thread-seg{z-index:1}
.test__canvas{position:absolute;z-index:0;inset:0;overflow:hidden;container-type:size}
.test__frame{--fw:max(100cqw,133.333cqh);position:absolute;top:50%;width:var(--fw);aspect-ratio:4/3;transform:translateY(-50%);left:min(0px,max(calc(100cqw - var(--fw)),calc(.6*100cqw - .655*var(--fw))))}
.test__frame .photo{position:absolute;inset:0}
.test__boxsvg{position:absolute;inset:0;width:100%;height:100%}
.test__box{fill:none;stroke:var(--ember);stroke-width:.24;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 600ms ease-out}
.test__tag{position:absolute;transform:translateY(-100%);padding:.25em .8em;border-radius:6px 6px 0 0;background:var(--ember);color:var(--on-ember);font:600 clamp(15px,1.6vw,24px)/1.4 var(--font-ui);transition:opacity var(--dur-enter) ease-out}
.test__scrim{position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(to top right,color-mix(in srgb,var(--ground-deep) 96%,transparent) 0%,color-mix(in srgb,var(--ground-deep) 86%,transparent) 30%,transparent 62%)}
.test__copy{position:relative;z-index:2;max-width:28rem;display:grid;gap:var(--space-4)}
.test__model{position:absolute;z-index:2;right:var(--space-12);bottom:var(--space-12);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);background:var(--ground-deep);color:var(--text);font-size:clamp(15px,1.4vw,20px)}
.test__body{color:var(--text)}
.test__note{color:var(--text-muted)}
/* Playing: data-step 0 nothing, 1 the photo fades in, 2 the box draws, 3 the tag shows. No attribute is the finished picture. */
.s-test .test__canvas{transition:opacity 700ms ease-out}
.s-test[data-step="0"] .test__canvas{opacity:0}
.s-test:is([data-step="0"],[data-step="1"]) .test__box{stroke-dashoffset:1}
.s-test:is([data-step="0"],[data-step="1"],[data-step="2"]) .test__tag{opacity:0}
@media (max-width:699px){
  .s-test{padding-bottom:var(--space-8)}
  .test__canvas{inset:0 0 40% 0}
  .test__scrim{background:linear-gradient(to top,var(--ground-deep) 0%,color-mix(in srgb,var(--ground-deep) 90%,transparent) 50%,transparent 66%)}
  .test__copy{gap:var(--space-3)}
  .test__model{right:var(--space-4);bottom:calc(40% + var(--space-3));font-size:15px}
}

.s-projects{display:grid;grid-template-columns:60fr 16fr 24fr;align-items:center;padding-inline:0}
.projects__stage{grid-column:1;position:relative;z-index:1;min-height:clamp(260px,40svh,360px);display:flex;align-items:center;justify-content:center}
.pq__stack{position:relative;list-style:none;width:min(80%,320px);height:clamp(180px,26svh,260px)}
.pq__card{position:absolute;left:50%;bottom:0;display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-4) var(--space-6);border-radius:var(--radius-card);border:1px solid var(--line);background:var(--surface);transform:translateX(-50%) translateY(calc((2 - var(--i)) * 14px)) scale(calc(1 - (2 - var(--i)) * .06));z-index:var(--i);opacity:calc(1 - (2 - var(--i)) * .3);transition:opacity var(--dur-enter) ease-out,transform var(--dur-enter) ease-out}
.pq__icon .spark-field{display:block}
.pq__name{font:600 16px/1.2 var(--font-ui);color:var(--text)}
.pq__hint{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;border:3px solid var(--text);background:color-mix(in srgb,var(--text) 18%,transparent);opacity:0;z-index:4;pointer-events:none}
.projects__copy{grid-column:3;position:relative;z-index:1;display:grid;gap:var(--space-4);align-content:center;padding-right:var(--space-12)}
.projects__body{color:var(--text)}
.projects__note{color:var(--text-muted)}
.s-projects[data-pre] .pq__card{opacity:0!important;transform:translateX(-50%) translateY(16px)!important}
@media (max-width:699px){
  .s-projects{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-6);padding:var(--space-8) var(--space-4) var(--space-8) var(--space-12)}
  .projects__stage{min-height:220px}
  .pq__stack{width:min(90%,280px);height:200px}
  .projects__copy{padding-right:0}
}

.s-share{--sc:min(26rem,86vw);background:var(--surface);display:grid;grid-template-columns:5fr 7fr;column-gap:var(--space-8);align-items:center}
.share__copy{position:relative;z-index:1;max-width:26rem;display:grid;gap:var(--space-4)}
.share__body{color:var(--text)}
.share__note{color:var(--text-muted)}
.share__stage{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:var(--space-4);justify-self:center}
.sh__sheet{display:flex;gap:var(--space-3);list-style:none}
.sh__icon{position:relative;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface-high);transition:opacity var(--dur-enter) ease-out,transform var(--dur-enter) ease-out}
.sh__icon::after{content:"";position:absolute;inset:12px;background:var(--text-muted);border-radius:2px}
.sh__icon--b::after{border-radius:50%}
.sh__icon--c::after{inset:10px;border-radius:0}
.sh__card{width:var(--sc);padding:var(--space-6);border-radius:var(--radius-card);border:1px solid var(--line);background:var(--surface-high);display:grid;gap:var(--space-4);transition:opacity var(--dur-enter) ease-out,transform var(--dur-enter) ease-out}
.sh__name{font:600 20px/1.2 var(--font-ui);color:var(--text);margin:0}
.sh__chips{display:flex;gap:var(--space-2);flex-wrap:wrap;list-style:none;margin:0;padding:0}
.sh__chip{padding:.3em .8em;border-radius:var(--radius-pill);border:1px solid var(--line);background:var(--surface);color:var(--text-muted);font-size:14px}
.sh__join .btn{margin-top:var(--space-1)}
.s-share[data-pre] .sh__icon{opacity:0;transform:translateY(-10px)}
.s-share[data-pre] .sh__card{opacity:0;transform:translateY(16px)}
@media (max-width:699px){
  .s-share{display:flex;flex-direction:column-reverse;align-items:stretch;gap:var(--space-6)}
  .share__copy{max-width:none}
  .share__stage{justify-self:stretch}
  .sh__card{width:100%}
}

.s-ring{--rw:min(34vw,50svh,460px);align-items:center;justify-content:flex-start}
.ring__copy{position:relative;z-index:1;width:min(40%,32rem);display:grid;gap:var(--space-4);align-content:center}
.ring__body{color:var(--text)}
.ring__art{position:absolute;z-index:1;left:66%;top:50%;width:var(--rw);transform:translate(-50%,calc(var(--rw)*-.1744))}
.s-ring[data-pre] .sr-warm{opacity:0}
.s-ring[data-pre] .sr-pulse,.s-ring[data-pre] .sr-centre-hot,.s-ring[data-pre] .sr-model{opacity:0}
.s-ring[data-pre] .sr-centre-cold{opacity:1}
.s-ring[data-pre] [data-ring-rise]{opacity:0}
@keyframes sr-pulse{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:.7;transform:scale(1.12)}}
@media (prefers-reduced-motion:no-preference){.s-ring.is-alive .sr-pulse{animation:sr-pulse 3.4s ease-in-out infinite}}
@media (max-width:699px){
  .s-ring{--rw:min(100%,60svh,360px);flex-direction:column-reverse;justify-content:center;gap:var(--space-8)}
  .ring__copy{width:100%}
  .ring__art{position:relative;left:auto;top:auto;transform:none;width:var(--rw);margin:0 auto}
}

/* placeholder section: W3 to W5 fill this in */
.s-footer{}