/* Sayne v3: thirty years, any business */
:root{
  --bar:54px; --railw:38vw; --bandh:0px; --yfs:300px; --tfs:200px; --cell:1em;
  --punch:var(--ease-punch); --main:var(--ease-main);
  --ivory:var(--s-ivory); --blush:var(--s-blush); --blush2:var(--s-blush-soft); --plum:var(--s-plum); --plum2:var(--s-plum-2); --peach:var(--s-peach); --rose:var(--s-rose); --ink:var(--s-ink);
  --t-bg:var(--e96-desk); --t-ink:var(--e96-cream); --rail:var(--e96-hi);
}
html[data-theme="teal"]{--t-bg:var(--e96-desk);--t-ink:var(--e96-cream);--rail:var(--e96-hi)}
html[data-theme="beige"]{--t-bg:var(--e96-bg);--t-ink:var(--e96-ink);--rail:var(--e96-desk)}
html[data-theme="sky"]{--t-bg:var(--e03-blue);--t-ink:var(--e03-white);--rail:var(--e03-white)}
html[data-theme="grass"]{--t-bg:var(--e03-grass);--t-ink:var(--s-ivory);--rail:var(--s-peach)}
html[data-theme="blue"]{--t-bg:var(--e10-blue);--t-ink:var(--e03-white);--rail:var(--e03-white)}
html[data-theme="ivory"]{--t-bg:var(--s-ivory);--t-ink:var(--e96-ink);--rail:var(--s-plum)}

*{box-sizing:border-box}
html{background:var(--e96-desk)}
body{margin:0;font-family:Geist,system-ui,sans-serif;color:var(--e96-ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font:inherit;cursor:pointer}
a{color:inherit}

/* top shortcut bar */
.bar{position:fixed;inset:0 0 auto 0;height:var(--bar);z-index:30;display:flex;align-items:center;gap:22px;padding:0 22px 0 3vw;color:var(--t-ink);
  background:color-mix(in srgb,var(--t-bg) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background .45s,color .45s}
.mark{font-family:"Instrument Serif",serif;font-size:28px;text-decoration:none;line-height:1}
.mark span{color:var(--blush)}
html[data-theme="ivory"] .mark span{color:var(--s-rose)}

/* year rail */
.rail{position:fixed;left:0;top:var(--bar);bottom:0;width:var(--railw);z-index:6;pointer-events:none;color:var(--rail);
  display:flex;flex-direction:column;justify-content:space-between;padding:3.2vh 1.6vw 4vh 3vw;transition:color .5s}
.era-lbl{position:relative;height:1.4em;overflow:hidden;font:500 13px/1.4 "Geist Mono",monospace;letter-spacing:.16em;text-transform:uppercase}
.era-lbl .el{position:absolute;left:0;top:0;white-space:nowrap}
.yr-wrap{position:relative;flex:1;display:flex;align-items:center;perspective:1200px}
.yr{display:grid;grid-template-columns:repeat(2,max-content);font-size:var(--yfs);line-height:1;position:relative;
  transform-origin:50% 50%;transition:transform .8s var(--punch),opacity .5s;font-variant-numeric:tabular-nums}
.dg{display:block;height:var(--cell);overflow:hidden}
.rl{display:block;will-change:transform}
.rl i{display:block;height:var(--cell);line-height:var(--cell);font-style:normal;text-align:center}
.yr-meas{position:absolute;visibility:hidden;font-size:100px;white-space:nowrap;left:0;top:0}
.yr-today{position:absolute;left:0;top:50%;font:700 var(--tfs)/1 Geist,sans-serif;letter-spacing:-.045em;opacity:0;transform:translateY(-50%) rotateX(-95deg);transform-origin:50% 50%;transition:transform .9s var(--punch),opacity .4s;color:var(--plum)}
html.is-today .yr{transform:rotateX(95deg);opacity:0}
html.is-today .yr-today{opacity:1;transform:translateY(-50%) rotateX(0)}
.rail-ind{margin:0;font:400 13px/1.3 "Geist Mono",monospace;letter-spacing:.04em;opacity:.9}
.rail-ind b{font-weight:500}
/* era typefaces for the year */
html[data-era="0"] .yr{font-family:VT323,monospace;--cell:.8em;text-shadow:0 0 .06em currentColor}
html[data-era="1"] .yr{font-family:Tahoma,Verdana,"DejaVu Sans",sans-serif;font-weight:700;letter-spacing:-.02em;text-shadow:.035em .035em 0 rgba(0,20,90,.45)}
html[data-era="2"] .yr{font-family:"Helvetica Neue",Helvetica,Arimo,Arial,sans-serif;font-weight:700;letter-spacing:-.03em}
html[data-era="2"] .rl i{background:linear-gradient(180deg,var(--e03-white) 0%,var(--e03-white) 46%,var(--e10-gloss) 54%,var(--e03-white) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 .018em 0 rgba(10,20,60,.55))}
html[data-era="3"] .yr{font-family:Geist,sans-serif;font-weight:700;letter-spacing:-.06em}
html[data-era="0"] .yr-meas,html[data-era="1"] .yr-meas,html[data-era="2"] .yr-meas,html[data-era="3"] .yr-meas{font-family:inherit}

.replay{position:fixed;left:3vw;bottom:22px;z-index:25;border:0;border-radius:999px;padding:10px 16px;font-size:13px;background:var(--plum);color:var(--ivory);opacity:0;pointer-events:none;transform:translateY(10px);transition:.4s var(--punch)}
.replay.show{opacity:1;pointer-events:auto;transform:none}

/* blocks */
.blk{position:relative;min-height:100vh;padding:16vh 6vw 14vh calc(var(--railw) + 2vw);background:var(--bg);color:var(--ink)}
.blk>.in{position:relative;z-index:2;max-width:820px}
.k{font:500 12.5px/1.4 "Geist Mono",monospace;letter-spacing:.16em;text-transform:uppercase;margin:0 0 18px;opacity:.85}
.hl{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(58px,7.4vw,140px);line-height:.9;letter-spacing:-.005em;margin:0 0 .32em;color:var(--hl,inherit)}
.hl .ln{padding-bottom:.04em}
.hl.serif{font-family:"Instrument Serif",serif;text-transform:none;line-height:.95;letter-spacing:-.02em;font-size:clamp(60px,7.6vw,146px)}
.hl em{font-style:italic;color:var(--s-rose)}
.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.55;max-width:34em;margin:0 0 10px}
.lede b{font-weight:600}

.gl3d{position:fixed;inset:0;width:100vw;height:100vh;z-index:1;pointer-events:none;display:none}
html.has3d .gl3d{display:block}
html.has3d .ofb{visibility:hidden}
.blk>.in .stage,.blk>.in .collect{z-index:2}

/* hero */
.hero{--bg:var(--e96-desk);--ink:var(--e96-cream);--hl:var(--e96-hi);padding-top:calc(var(--bar) + 12vh)}
.hero-in{display:grid;grid-template-columns:1fr minmax(200px,34%);gap:0 2vw;max-width:1040px!important}
.hero-txt{grid-column:1}
.s-hero{grid-column:2;grid-row:1;align-self:center;aspect-ratio:1}
.pick,.hint{grid-column:1 / -1}
.cyc{font-size:clamp(22px,2vw,30px);margin:0 0 18px;font-family:"Instrument Serif",serif}
.cyc-w{display:inline-block;height:1.2em;overflow:hidden;vertical-align:bottom;color:var(--e96-hi);font-style:italic}
.cyc-r{display:block}
.cyc-r span{display:block;height:1.2em;line-height:1.2em;white-space:nowrap}
.pick{margin-top:26px;padding:18px 20px;border-radius:18px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(244,236,214,.2)}
.pick p{margin:0 0 12px;font-size:15px}
.hint{display:flex;align-items:center;gap:10px;font:500 12.5px "Geist Mono",monospace;letter-spacing:.1em;text-transform:uppercase;margin-top:5vh;opacity:.8}
.hint i{width:18px;height:28px;border:1.5px solid currentColor;border-radius:10px;position:relative}
.hint i:after{content:"";position:absolute;left:50%;top:6px;width:3px;height:6px;margin-left:-1.5px;border-radius:2px;background:currentColor;animation:wh 1.6s infinite}
@keyframes wh{0%{transform:translateY(0);opacity:1}100%{transform:translateY(9px);opacity:0}}

/* static fallbacks for the 3D object */
.slot{position:relative}
.ofb{position:absolute;inset:8%}
.ofb-floppy{background:linear-gradient(150deg,var(--e10-blue-deep),var(--e96-carbon));border-radius:5%;box-shadow:0 30px 60px rgba(0,0,0,.35),inset 0 0 0 2px rgba(255,255,255,.06);transform:rotate(-8deg)}
.ofb-floppy .sh{position:absolute;left:24%;width:52%;top:0;height:33%;background:linear-gradient(90deg,var(--e03-silver),var(--e10-mist) 40%,var(--mix-10-now));border-radius:0 0 3% 3%}
.ofb-floppy .sh:after{content:"";position:absolute;right:16%;top:18%;width:18%;height:60%;background:var(--e96-carbon);border-radius:2px}
.ofb-floppy .lb{position:absolute;left:12%;right:12%;bottom:6%;height:46%;background:repeating-linear-gradient(var(--e96-cream) 0 18%,var(--e96-rule) 18% 19.5%);border-radius:3%;font:400 clamp(14px,2.2vw,30px)/1.1 "Permanent Marker",cursive;color:var(--e96-pen);padding:10% 8%;font-style:normal}
.ofb-floppy .lb small{font-size:.55em}
.ofb-cd{border-radius:50%;background:radial-gradient(circle,#0000 0 9%,var(--e10-mist) 9.5% 15%,var(--e10-alu) 15.5% 17%,#0000 17.5%),conic-gradient(from 20deg,var(--e10-line),var(--s-blush),var(--e10-gloss),var(--e10-mist),var(--s-peach),var(--e10-line),var(--e10-line),var(--s-blush),var(--e03-sky-2),var(--e10-line));
  -webkit-mask:radial-gradient(circle,#0000 0 6.5%,var(--px-black) 7%);mask:radial-gradient(circle,#0000 0 6.5%,var(--px-black) 7%);box-shadow:0 0 0 1px rgba(255,255,255,.4)}
.ofb-phone{inset:2% 14%;border-radius:12%/7%;background:var(--e10-black);box-shadow:0 0 0 3px var(--e10-alu),0 0 0 4px var(--e10-gray),0 30px 60px rgba(0,0,0,.4);padding:16% 6% 18%}
.ofb-phone .ph-scr{height:100%;background:linear-gradient(var(--e10-blue-deep),var(--e96-carbon));border-radius:2px;position:relative;overflow:hidden}
.ph-st{display:block;font:600 9px/14px Arimo,sans-serif;color:var(--e03-white);text-align:center;background:rgba(0,0,0,.6);font-style:normal}
.ph-g{display:grid;grid-template-columns:repeat(4,1fr);gap:9% 8%;padding:9% 8%}
.ph-g i{aspect-ratio:1;border-radius:22%;background:linear-gradient(var(--c1),var(--c2));box-shadow:inset 0 1px 0 rgba(255,255,255,.4);position:relative}
.ph-g i:before{content:"";position:absolute;inset:0 0 50% 0;border-radius:22% 22% 50% 50%/22% 22% 18% 18%;background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.08))}
.ph-g i b{position:absolute;right:-18%;top:-18%;min-width:46%;height:46%;border-radius:999px;background:var(--e10-badge);color:var(--e03-white);font:700 8px/1 Arimo;display:grid;place-items:center;box-shadow:0 0 0 1.5px var(--e03-white);padding:0 2px}
.ph-home{position:absolute;left:50%;bottom:4%;width:12%;aspect-ratio:1;margin-left:-6%;border-radius:50%;box-shadow:inset 0 0 0 2px var(--e96-ink)}
.ofb-orb{inset:14%;border-radius:50%;background:radial-gradient(circle at 34% 30%,var(--s-blush) 0,var(--s-rose) 18%,var(--s-plum-2) 42%,var(--s-plum) 70%,var(--s-plum-deep) 100%);box-shadow:0 30px 70px rgba(82,37,69,.35)}
.ofb-orb:after{content:"";position:absolute;inset:-22% -30%;border-radius:50%;border:3px solid var(--s-blush);transform:rotate(-18deg) scaleY(.32);opacity:.9}

/* stages */
.stage{position:relative;width:100%;aspect-ratio:1.28;container-type:inline-size;margin:7vh 0 8vh}
.stage>*{position:absolute}

/* 1996 */
.b96{--bg:var(--e96-bg);--ink:var(--e96-ink);--hl:var(--e96-desk)}
.b96 .pains{--card:var(--e96-paper)}
.mon{left:0;top:1%;width:58%}
.bez{background:linear-gradient(170deg,var(--e96-cream),var(--e96-plastic));border-radius:3.4cqw;padding:3.2cqw 3.2cqw 6cqw;box-shadow:inset 0 0 0 .35cqw var(--e96-manila),inset 0 -1.4cqw 2cqw rgba(120,100,60,.25),0 2.4cqw 4cqw rgba(60,40,10,.28)}
.scr{position:relative;aspect-ratio:4/3;background:var(--e96-desk);border-radius:1.6cqw/2cqw;overflow:hidden;box-shadow:inset 0 0 4cqw rgba(0,0,0,.65)}
.scan{position:absolute;inset:0;background:repeating-linear-gradient(rgba(0,0,0,.16) 0 1px,transparent 1px 3px);pointer-events:none}
.w95{position:absolute;left:9%;top:16%;width:82%;background:var(--e03-silver);font:1.9cqw/1.25 Arimo,Arial,sans-serif;color:var(--px-black);box-shadow:inset -1px -1px var(--e10-black),inset 1px 1px var(--e03-white),inset -2px -2px var(--e03-gray),inset 2px 2px var(--e10-line);padding:3px}
.t95{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(90deg,var(--e03-navy),var(--e03-title));color:var(--e03-white);font-weight:700;padding:.3cqw .6cqw}
.b95 i{display:inline-block;width:2.2cqw;height:1.9cqw;margin-left:2px;background:var(--e03-silver);color:var(--px-black);font:700 1.5cqw/1.9cqw Arimo;text-align:center;font-style:normal;box-shadow:inset -1px -1px var(--e10-black),inset 1px 1px var(--e03-white)}
.c95{padding:1.6cqw 2cqw 2cqw;position:relative}
.c95 p{margin:0 0 .8cqw}
.modem{position:absolute;right:2cqw;top:1.6cqw;display:flex;gap:.6cqw}
.modem i{width:2.6cqw;height:3.6cqw;background:linear-gradient(var(--e96-rule),var(--e96-desk-2));border:1px solid var(--px-black)}
.pb95{height:2.4cqw;margin:1cqw 0;box-shadow:inset -1px -1px var(--e03-white),inset 1px 1px var(--e03-gray);padding:2px;display:flex}
.pb95 i{display:block;height:100%;width:var(--pb,8%);background:repeating-linear-gradient(90deg,var(--e03-navy) 0 1.6cqw,transparent 1.6cqw 1.9cqw)}
.btn95{display:inline-block;padding:.5cqw 2.4cqw;box-shadow:inset -1px -1px var(--e10-black),inset 1px 1px var(--e03-white),inset -2px -2px var(--e03-gray),inset 2px 2px var(--e10-line);float:right}
.neck{width:26%;height:3cqw;margin:0 auto;background:linear-gradient(var(--e96-manila),var(--e03-chrome-edge))}
.base{width:62%;height:3.6cqw;margin:0 auto;background:linear-gradient(var(--e96-bg),var(--e96-manila));border-radius:1cqw 1cqw .6cqw .6cqw;position:relative;box-shadow:0 1.4cqw 2cqw rgba(60,40,10,.25)}
.base i{position:absolute;right:12%;top:40%;width:22%;height:.6cqw;background:var(--e96-ink-2);border-radius:2px}
.fax{right:0;top:12%;width:38%}
.fx-paper{position:relative;z-index:0;width:78%;margin:0 auto -6cqw;background:linear-gradient(var(--e96-paper),var(--e96-cream));padding:2.2cqw 2.2cqw 7cqw;font:2.6cqw/1.12 VT323,monospace;color:var(--e96-ink);box-shadow:0 .4cqw 1.4cqw rgba(0,0,0,.18);transform:translateY(var(--fy,40%));border-radius:.3cqw .3cqw 0 0}
.fx-paper p{margin:0}
.fx-h{border-bottom:1px dashed var(--e10-gray-2);margin-bottom:1cqw!important;font-size:.85em}
.fx-n{opacity:.45;letter-spacing:.1em}
.fx-body{position:relative;z-index:1;background:linear-gradient(var(--e03-chrome),var(--e96-manila));border-radius:2.4cqw 2.4cqw 1.2cqw 1.2cqw;padding:2cqw;display:flex;gap:2cqw;align-items:center;box-shadow:inset 0 .4cqw 0 rgba(255,255,255,.6),0 2cqw 3cqw rgba(60,40,10,.25)}
.fx-body:before{content:"";position:absolute;left:10%;right:10%;top:0;height:1cqw;background:var(--e96-lcd-dark);border-radius:0 0 .6cqw .6cqw}
.fx-lcd{flex:1;background:var(--e96-lcd);color:var(--e03-ink);font:2.4cqw/1 VT323;padding:1.2cqw;border-radius:.6cqw;box-shadow:inset 0 0 .6cqw rgba(0,0,0,.4)}
.fx-keys{display:grid;grid-template-columns:repeat(3,2cqw);gap:.7cqw}
.fx-keys i{height:1.6cqw;background:var(--e96-ink-3);border-radius:.4cqw;box-shadow:0 .25cqw 0 var(--e96-ink-2)}
.rdx{left:3%;bottom:1%;width:44%;perspective:60cqw}
.rdx-cards{position:relative;height:24cqw;transform-style:preserve-3d}
.rc{position:absolute;left:6%;right:6%;bottom:0;height:20cqw;background-color:var(--e96-paper);border-radius:1cqw;padding:2.2cqw 2.4cqw;transform-origin:50% 100%;transform:translateY(calc(var(--i) * -1.6cqw)) rotateX(calc(var(--i) * 6deg));
  box-shadow:0 .6cqw 1.6cqw rgba(60,40,10,.25);display:flex;flex-direction:column;gap:.6cqw;backface-visibility:hidden;
  background-image:linear-gradient(transparent 0 30%,var(--s-rose) 30% calc(30% + 2px),transparent 0),repeating-linear-gradient(transparent 0 3.2cqw,var(--e03-sky-2) 3.2cqw calc(3.2cqw + 1px))}
.rc b{font:600 3cqw/1 "Geist Mono",monospace;color:var(--e10-blue-deep)}
.rc span{font:2.4cqw/1 "Geist Mono",monospace;color:var(--e96-lcd-dark);margin-top:1.4cqw}
.rc small{font:400 3cqw/1.1 "Permanent Marker",cursive;color:var(--e96-pen);margin-top:.6cqw}
.rc:after{content:"";position:absolute;bottom:-1px;left:30%;width:12%;height:2cqw;background:var(--bg);border-radius:1cqw 1cqw 0 0;box-shadow:16cqw 0 0 var(--bg)}
.rdx-base{position:relative;height:5cqw;margin-top:-1cqw;background:linear-gradient(var(--e96-lcd-dark),var(--e03-ink));border-radius:1.2cqw;box-shadow:0 1.6cqw 2.4cqw rgba(0,0,0,.3)}
.rdx-base i{position:absolute;top:-2.4cqw;width:6cqw;height:6cqw;border-radius:50%;background:radial-gradient(circle at 40% 35%,var(--e96-ink-2),var(--e10-ink));left:-2cqw}
.rdx-base i+i{left:auto;right:-2cqw}
.pgr{right:5%;bottom:5%;width:27%;aspect-ratio:1.9;background:linear-gradient(160deg,var(--e96-lcd-dark),var(--s-ink));border-radius:2.2cqw;padding:2.2cqw;box-shadow:0 2cqw 3cqw rgba(0,0,0,.35),inset 0 .3cqw 0 rgba(255,255,255,.12)}
.pg-lcd{height:62%;background:linear-gradient(var(--e96-lcd),var(--e96-ink-3));border-radius:.8cqw;display:flex;align-items:center;padding:0 1.6cqw;font:3.4cqw/1 VT323,monospace;color:var(--e03-ink);box-shadow:inset 0 0 1cqw rgba(0,0,0,.45);overflow:hidden;white-space:nowrap}
.pg-b{display:inline-block;width:4cqw;height:1.6cqw;margin:1.6cqw 1cqw 0 0;background:var(--e10-gray-2);border-radius:1cqw}

/* pains */
.pains{margin-top:4vh}
.ph{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;margin-bottom:16px}
.ph-t{margin:0;font:600 clamp(19px,1.6vw,24px)/1.2 Geist,sans-serif;letter-spacing:-.01em}
.showing{margin:0;display:flex;align-items:center;gap:10px;font-size:14px;position:relative}
.showing b{font-weight:600}
.rot{position:absolute;left:0;right:0;bottom:-7px;height:2px;background:color-mix(in srgb,currentColor 18%,transparent);border-radius:2px;overflow:hidden}
.rot b{display:block;height:100%;width:100%;background:currentColor;transform-origin:0 50%;transform:scaleX(0)}
html.picked .rot{display:none}
.pg{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pc{background:var(--card,var(--e03-white));color:var(--e96-ink);border-radius:14px;padding:18px 20px 20px;box-shadow:0 10px 30px rgba(0,0,0,.1)}
.pc h3{margin:0 0 8px;display:flex;align-items:center;gap:9px;font:500 12px/1 "Geist Mono",monospace;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.pc h3 i{width:9px;height:9px;border-radius:2px;background:var(--dot,var(--e96-desk))}
.pc p{margin:0;font-size:16.5px;line-height:1.45}
.b96 .pc{border-radius:4px;font-family:Geist,sans-serif;background-image:repeating-linear-gradient(transparent 0 25px,var(--e10-gloss) 25px 26px);background-color:var(--e96-paper)}
.b03g .pc{background:var(--e03-chrome);border-radius:6px;box-shadow:inset 0 0 0 1px var(--e03-white),0 0 0 1px var(--e10-gray),0 10px 26px rgba(0,30,0,.2);--dot:var(--e03-blue)}
.b03g .pc h3{color:var(--e03-blue-deep);opacity:1}
.b10 .pc{background:linear-gradient(var(--e03-white),var(--e10-mist));border-radius:12px;box-shadow:0 1px 0 var(--e03-white) inset,0 0 0 1px rgba(0,0,0,.18),0 14px 30px rgba(0,0,0,.25);--dot:var(--e10-blue)}
.now .pc{background:var(--blush2);color:var(--plum);box-shadow:none;--dot:var(--plum)}
.now .pc h3{opacity:1}
.now .pc h3 i{background:none;width:14px;height:8px;border-left:2px solid var(--plum);border-bottom:2px solid var(--plum);border-radius:0;transform:rotate(-45deg) translateY(-2px)}

/* 2003 sky */
.b03{--ink:var(--e03-white);background:linear-gradient(var(--e03-blue) 0,var(--e03-blue) 34vh,var(--e03-blue-2) 70%,var(--e03-sky) 100%);--hl:var(--e03-white)}
.b03 .hl{text-shadow:0 .03em 0 rgba(0,20,90,.35)}
.cloud{position:absolute;z-index:1;width:30vw;height:9vw;border-radius:50%;background:radial-gradient(ellipse at 50% 60%,rgba(255,255,255,.9),rgba(255,255,255,0) 65%);filter:blur(4px)}
.c1{left:4vw;top:58vh}.c2{right:2vw;top:120vh;width:40vw}.c3{left:20vw;bottom:10vh;width:24vw}
.xp{font-family:Tahoma,Verdana,"DejaVu Sans",sans-serif;font-size:1.7cqw;color:var(--px-black);background:var(--e03-chrome);border:.45cqw solid var(--e03-title);border-top:0;border-radius:1.2cqw 1.2cqw 0 0;box-shadow:0 2cqw 4cqw rgba(0,10,60,.35)}
.xt{display:flex;align-items:center;gap:1cqw;height:4.2cqw;padding:0 .6cqw 0 1cqw;margin:0 -.45cqw;border-radius:1.2cqw 1.2cqw 0 0;color:var(--e03-white);font-weight:700;text-shadow:1px 1px var(--e03-navy);
  background:linear-gradient(180deg,var(--e03-blue-2) 0%,var(--e03-title) 12%,var(--e03-title) 50%,var(--e03-title) 88%,var(--e03-blue-deep) 100%)}
.xt span:first-of-type{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xb{display:flex;gap:.4cqw}
.xb i{width:3cqw;height:3cqw;border-radius:.5cqw;border:1px solid var(--e03-white);background:linear-gradient(var(--e10-sky),var(--e03-blue))}
.xb i.x{background:linear-gradient(var(--e03-orange),var(--e96-red));position:relative}
.xb i.x:before,.xb i.x:after{content:"";position:absolute;left:50%;top:22%;height:56%;width:2px;background:var(--e03-white);transform:rotate(45deg)}
.xb i.x:after{transform:rotate(-45deg)}
.xi{width:2.4cqw;height:2.4cqw;border-radius:.3cqw;flex:none}
.xi-grid{background:linear-gradient(var(--e03-white),var(--e03-white)) 50% 50%/70% 70% no-repeat,repeating-linear-gradient(90deg,var(--e03-xls) 0 .5cqw,var(--e10-green) .5cqw 1cqw)}
.xi-man{background:radial-gradient(circle at 50% 30%,var(--e03-sun) 0 28%,transparent 30%),radial-gradient(ellipse at 50% 90%,var(--e03-sun) 0 40%,transparent 42%)}
.xm{display:flex;gap:1.6cqw;padding:.6cqw 1cqw;border-bottom:1px solid var(--e03-white)}
.xtb{display:flex;gap:.6cqw;align-items:center;padding:.5cqw 1cqw;border-bottom:1px solid var(--e03-chrome-edge);background:linear-gradient(var(--e96-paper),var(--e96-bg))}
.xtb i{width:2.2cqw;height:2.2cqw;border-radius:.3cqw;background:linear-gradient(135deg,var(--e03-sky),var(--e03-blue))}
.xtb i:nth-child(3n){background:linear-gradient(135deg,var(--e96-hi),var(--e96-amber))}
.xtb i.sep{width:1px;background:var(--e03-chrome-edge)}
.xtb b{font-weight:400;background:var(--e03-white);border:1px solid var(--mix-96-03);padding:0 1.4cqw;margin-left:.6cqw}
.xf{display:flex;gap:1cqw;align-items:center;padding:.5cqw 1cqw;background:var(--e03-white);border-bottom:1px solid var(--e03-chrome-edge)}
.xnm{border:1px solid var(--mix-96-03);padding:0 1.2cqw}
.xg{position:relative;display:grid;grid-template-columns:3.2cqw 1.25fr 1fr 1.1fr;background:var(--e03-white)}
.xg span{border-right:1px solid var(--e03-win);border-bottom:1px solid var(--e03-win);padding:.45cqw .8cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:3.3cqw}
.xg .h,.xg .n{background:linear-gradient(var(--e96-paper),var(--e96-bg));text-align:center;color:var(--e96-lcd-dark)}
.xg .hd{font-weight:700}
.xg .dup{background:var(--peach)}
.xg .cur{position:absolute;left:3.2cqw;top:calc(var(--row,4) * 3.3cqw);width:calc((100% - 3.2cqw) * .375);height:3.3cqw;border:.4cqw solid var(--px-black);pointer-events:none;transition:top .25s}
.xs{display:flex;gap:.4cqw;align-items:center;padding:.4cqw 1cqw;background:var(--e03-chrome);border-top:1px solid var(--e03-chrome-edge)}
.xs span{padding:.2cqw 1.4cqw;background:var(--e03-win);border-radius:0 0 .6cqw .6cqw}
.xs span.on{background:var(--e03-white)}
.xs em{margin-left:auto;font-style:normal;color:var(--e10-gray-2)}
.xls{left:0;top:0;width:68%}
.away{right:0;top:3%;width:32%}
.aw-b{padding:1.4cqw;background:var(--e03-white);margin:.6cqw;border:1px solid var(--mix-96-03)}
.aw-b p{margin:0 0 1cqw}
.aw-s{color:var(--e96-ink-2);font-size:1.5cqw}
.aw-m{font:italic 2cqw/1.3 Arimo,Arial,sans-serif;color:var(--e03-blue-deep)}
.xbtn{display:inline-block;padding:.5cqw 2cqw;border:1px solid var(--e03-blue-deep);border-radius:.6cqw;background:linear-gradient(var(--e03-white),var(--e03-chrome))}
.s-cd{right:2%;top:36%;width:30%;aspect-ratio:1}
.bb{left:38%;bottom:0;width:22%;aspect-ratio:.72;background:linear-gradient(160deg,var(--e96-lcd-dark),var(--s-ink));border-radius:3cqw 3cqw 2.4cqw 2.4cqw;padding:2.2cqw 1.8cqw;box-shadow:0 0 0 .5cqw var(--e10-gray),0 2cqw 4cqw rgba(0,0,0,.4)}
.bb-led{position:absolute;right:2.2cqw;top:1cqw;width:1cqw;height:1cqw;border-radius:50%;background:var(--e10-badge);box-shadow:0 0 1.4cqw var(--e96-red);animation:led 1.4s steps(1) infinite}
@keyframes led{50%{opacity:.15}}
.bb-scr{height:46%;background:linear-gradient(var(--e10-mist),var(--e10-line));border-radius:.6cqw;padding:1cqw;font:1.45cqw/1.25 Arimo,Arial,sans-serif;overflow:hidden;color:var(--e10-black)}
.bb-scr p{margin:0 0 .6cqw;padding-left:2.4cqw;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-scr p:before{content:"";position:absolute;left:0;top:.2cqw;width:1.8cqw;height:1.2cqw;background:var(--e96-hi);border:1px solid var(--e96-brass)}
.bb-scr .bb-h{background:var(--e10-blue-deep);color:var(--e03-white);margin:-1cqw -1cqw 1cqw;padding:.6cqw 1cqw;font-weight:700}
.bb-scr .bb-h:before{display:none}
.bb-kb{height:38%;margin-top:6%;background:radial-gradient(circle,var(--e10-gray-2) 0 38%,transparent 40%) 0 0/20% 25%}
.bb-wheel{position:absolute;right:-1.4cqw;top:30%;width:1.4cqw;height:7cqw;border-radius:1cqw;background:repeating-linear-gradient(var(--e10-gray) 0 .5cqw,var(--e10-gray-2) .5cqw 1cqw)}
.flip{right:3%;bottom:2%;width:17%;perspective:50cqw}
.fl-top{position:relative;aspect-ratio:.8;transform-origin:50% 100%;transform:rotateX(var(--fl,170deg));transform-style:preserve-3d;transition:none}
.fl-in,.fl-out{position:absolute;inset:0;border-radius:2cqw 2cqw .6cqw .6cqw;backface-visibility:hidden}
.fl-in{background:linear-gradient(var(--e10-alu),var(--mix-10-now));padding:1.8cqw}
.fl-in:before{content:"";position:absolute;inset:1.8cqw;border-radius:.6cqw;background:linear-gradient(var(--e96-rule),var(--e10-sky))}
.fl-in p{position:relative;margin:0 0 .5cqw;font:1.5cqw/1.2 Arimo,Arial,sans-serif;color:var(--e96-carbon);padding:0 .6cqw}
.fl-in .fl-h{font-weight:700;margin-top:.8cqw;background:var(--e96-carbon);color:var(--e03-white);padding:.3cqw .6cqw}
.fl-out{transform:rotateX(180deg);background:linear-gradient(var(--e10-line),var(--mix-10-now));box-shadow:inset 0 0 0 .3cqw rgba(255,255,255,.5)}
.fl-out i{position:absolute;left:30%;top:24%;width:40%;height:24%;border-radius:.6cqw;background:var(--e96-carbon)}
.fl-bot{aspect-ratio:.8;border-radius:.6cqw .6cqw 2cqw 2cqw;background:linear-gradient(var(--e03-silver),var(--e10-gray));padding:2cqw;box-shadow:0 2cqw 3cqw rgba(0,0,0,.3)}
.fl-bot i{display:block;height:100%;background:radial-gradient(ellipse,var(--e10-mist) 0 40%,transparent 44%) 0 0/33.33% 25%}

/* 2003 hill */
.b03g{--bg:linear-gradient(var(--e03-grass),var(--e03-grass-deep));background:linear-gradient(var(--e03-grass),var(--e03-grass-deep));--ink:var(--s-ivory);padding-top:24vh;min-height:auto}
.balloon{display:inline-flex;flex-direction:column;gap:4px;max-width:420px;padding:12px 16px;margin-bottom:5vh;background:var(--e03-tip);color:var(--px-black);border:1px solid var(--px-black);border-radius:10px;font:13px/1.35 Tahoma,Verdana,"DejaVu Sans",sans-serif;box-shadow:3px 3px 0 rgba(0,0,0,.25)}
.balloon b{font-weight:700}

/* 2010 */
.b10{--bg:var(--e10-blue);--ink:var(--e03-white);--hl:var(--e03-white)}
.b10 .hl{text-shadow:0 -.02em 0 rgba(0,0,0,.35)}
.s10{aspect-ratio:1.08}
.s-phone{left:0;top:0;width:33%;aspect-ratio:.52}
.feed{left:37%;top:0;width:63%;background:var(--e03-white);color:var(--e10-ink);border-radius:.8cqw;overflow:hidden;font:1.9cqw/1.35 Arimo,"Lucida Grande",sans-serif;box-shadow:0 2cqw 4cqw rgba(0,0,0,.3)}
.fd-bar{display:flex;align-items:center;gap:1.4cqw;background:linear-gradient(var(--e10-blue-2),var(--e10-blue));color:var(--e03-white);padding:1cqw 1.6cqw;font-size:2.1cqw;border-bottom:1px solid var(--e96-pen)}
.fd-bar b{flex:1}
.fd-bar i{width:2.2cqw;height:2.2cqw;border-radius:.4cqw;background:rgba(255,255,255,.3)}
.fd-post{display:flex;gap:1.6cqw;padding:1.8cqw}
.av{flex:none;width:6cqw;height:6cqw;border-radius:.4cqw;background:linear-gradient(135deg,var(--s-blush),var(--s-rose))}
.fd-to{color:var(--e03-gray)}
.fd-post p{margin:.6cqw 0}
.fd-post small{color:var(--e10-gray);font-size:1.6cqw}
.fd-lk{background:var(--e10-mist);padding:.6cqw 1cqw;font-size:1.6cqw;color:var(--e10-blue)}
.fd-r{font-size:1.6cqw;color:var(--e96-lcd-dark);border-left:.4cqw solid var(--e03-win);padding-left:1cqw}
.books{left:37%;top:46%;width:63%;background:var(--s-ivory);border-radius:.8cqw .8cqw .4cqw .4cqw;overflow:hidden;font:1.75cqw/1.3 Arimo,Arial,sans-serif;color:var(--e03-ink);box-shadow:0 2cqw 4cqw rgba(0,0,0,.35)}
.bk-t{display:flex;align-items:center;gap:1cqw;padding:.9cqw 1.2cqw;color:var(--e03-white);font-weight:700;background:linear-gradient(var(--e10-green),var(--e03-start));text-shadow:0 1px rgba(0,0,0,.3)}
.bk-t>i{width:2.6cqw;height:2.6cqw;border-radius:50%;background:radial-gradient(circle,var(--e03-white) 0 30%,var(--e03-start) 32% 50%,var(--e03-white) 52%)}
.bk-t span:nth-of-type(1){flex:1}
.bk-b{padding:1.4cqw}
.bk-r{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:.6cqw 1cqw;align-items:center;margin-bottom:1.2cqw}
.bk-r b{font-weight:400;background:var(--e03-white);border:1px solid var(--mix-10-now);padding:.3cqw .8cqw}
.bk-tab{display:grid;grid-template-columns:1.6fr 1fr;background:var(--e03-white);border:1px solid var(--mix-10-now)}
.bk-tab span{padding:.5cqw .9cqw;border-bottom:1px solid var(--e10-line)}
.bk-tab .h{background:linear-gradient(var(--e10-mist),var(--e10-line));font-weight:700}
.bk-tab .u{color:var(--e96-brass);background:var(--e03-tip)}
.bk-f{display:flex;gap:1.4cqw;align-items:baseline;margin:1.2cqw 0 0}
.bk-f b{font-size:2.6cqw}
.bk-f span{margin-left:auto;color:var(--e03-gray);font-size:1.5cqw}
.wb{left:0;top:69%;width:100%;height:31%;background:linear-gradient(135deg,var(--e96-paper),var(--e03-chrome));border:1.2cqw solid var(--e10-alu);border-radius:1cqw;box-shadow:inset 0 0 0 .3cqw var(--e10-gray),0 2cqw 4cqw rgba(0,0,0,.35);display:flex;gap:3%;align-items:center;padding:4cqw 3cqw 2cqw}
.wb-t{position:absolute;left:3cqw;top:.6cqw;margin:0;font:3cqw/1 "Permanent Marker",cursive;color:var(--e03-blue);transform:rotate(-2deg)}
.wb-line{position:absolute;height:.4cqw;background:var(--e96-red);border-radius:1cqw;opacity:.6}
.wb-line.l1{left:30cqw;top:2.2cqw;width:22cqw;transform:rotate(-3deg)}
.wb-line.l2{right:6cqw;top:3cqw;width:14cqw;background:var(--e03-xls);transform:rotate(2deg)}
.sn{position:relative!important;flex:1;aspect-ratio:1;background:linear-gradient(var(--e96-hi),var(--e96-hi));box-shadow:0 1.2cqw 1.6cqw rgba(0,0,0,.22);transform:rotate(var(--r));padding:1.6cqw;font:2.3cqw/1.2 "Permanent Marker",cursive;color:var(--e96-ink);transform-origin:50% 0}
.sn.p{background:linear-gradient(var(--s-blush),var(--s-blush))}
.sn:before{content:"";position:absolute;left:0;right:0;top:0;height:22%;background:rgba(0,0,0,.05)}
.wb-tray{position:absolute;left:10%;right:10%;bottom:-2.6cqw;height:1.6cqw;background:var(--mix-10-now);border-radius:0 0 .6cqw .6cqw}

/* today */
.now{--bg:var(--s-ivory);--ink:var(--e96-ink);--hl:var(--plum);padding-top:12vh}
.now .k{color:var(--plum)}
.ring{position:relative;width:100%;max-width:640px;aspect-ratio:1;margin:6vh auto 4vh;container-type:inline-size}
.links{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.orbit{fill:none;stroke:var(--s-rose);stroke-width:.25;stroke-dasharray:1 1.4}
.spokes line{stroke:var(--plum);stroke-width:.35;stroke-linecap:round}
.nd{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(calc(var(--a) * 1deg)) translateX(40cqw) rotate(calc(var(--a) * -1deg));z-index:2}
.nd b{display:block;white-space:nowrap;padding:1.8cqw 3cqw;border-radius:999px;background:var(--blush2);color:var(--plum);font:600 2.9cqw/1 Geist,sans-serif;box-shadow:0 .6cqw 2cqw rgba(82,37,69,.15)}
.s-orb{position:absolute;left:32%;top:32%;width:36%;aspect-ratio:1}
.hubl{position:absolute;left:0;right:0;top:69%;text-align:center;margin:0;font:400 5cqw/1 "Instrument Serif",serif;color:var(--plum)}
.hubl span{color:var(--s-rose)}
.ai{display:grid;gap:10px;margin:0 0 5vh}
.ai-h{margin:0 0 4px;font:500 12.5px "Geist Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--plum);display:flex;align-items:center;gap:8px}
.ai-h i,.aic i{width:8px;height:8px;border-radius:50%;background:var(--s-rose);flex:none}
.aic{margin:0;display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:14px;background:var(--plum);color:var(--ivory);font-size:16px;max-width:560px}
.aic:nth-child(odd){margin-left:6%}
.aic i{background:var(--peach);box-shadow:0 0 0 4px rgba(252,221,199,.2)}

/* finale */
.fin{--ink:var(--plum);background:linear-gradient(var(--s-ivory) 0%,var(--s-ivory) 30%,var(--s-blush) 100%);padding-top:10vh;padding-bottom:0}
.collect{position:relative;width:100%;max-width:700px;aspect-ratio:1.35;margin:0 auto 4vh;container-type:inline-size}
.tok{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);transform:rotate(calc(var(--r) * 1deg));width:13cqw;aspect-ratio:1.3;border-radius:1.2cqw;display:grid;place-items:center;text-align:center;font:600 1.7cqw/1.1 Arimo,Arial,sans-serif;color:var(--e96-ink);box-shadow:0 1.6cqw 3cqw rgba(82,37,69,.22);z-index:2}
.t-card{background:var(--e96-paper);background-image:linear-gradient(transparent 0 30%,var(--s-rose) 30% calc(30% + 2px),transparent 0)}
.t-fax{background:var(--e96-paper);font-family:VT323,monospace;font-size:2.6cqw;aspect-ratio:.8;width:10cqw}
.t-pgr{background:linear-gradient(var(--e96-lcd-dark),var(--s-ink));color:var(--e96-lcd);font-family:VT323,monospace;font-size:2.4cqw}
.t-xls{background:var(--e03-white);border-top:2.4cqw solid var(--e03-title);color:var(--e03-xls)}
.t-flip{width:7cqw;aspect-ratio:.5;background:linear-gradient(var(--e10-line),var(--mix-10-now))}
.t-bb{width:8cqw;aspect-ratio:.72;background:linear-gradient(var(--e96-lcd-dark),var(--s-ink));box-shadow:0 0 0 .4cqw var(--e10-gray)}
.t-sn,.t-sn2{width:11cqw;aspect-ratio:1;background:linear-gradient(var(--e96-hi),var(--e96-hi));font:400 1.9cqw/1.15 "Permanent Marker",cursive;padding:1cqw}
.t-sn2{background:linear-gradient(var(--s-blush),var(--s-blush))}
.t-app{width:8cqw;aspect-ratio:1;border-radius:22%;background:linear-gradient(var(--e03-sky),var(--e03-blue-2));color:var(--e03-white);font-size:2.6cqw}
.t-inv{background:var(--s-ivory);border-top:2cqw solid var(--e03-start)}
.t-cd{width:10cqw;aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--e10-line),var(--s-blush),var(--e10-gloss),var(--s-peach),var(--e10-line));-webkit-mask:radial-gradient(circle,#0000 0 12%,var(--px-black) 13%);mask:radial-gradient(circle,#0000 0 12%,var(--px-black) 13%)}
.t-fl{width:9cqw;aspect-ratio:1;background:linear-gradient(150deg,var(--e10-blue-deep),var(--e96-carbon))}
.s-hub{position:absolute;left:34%;top:26%;width:32%;aspect-ratio:1}
.fin-h{max-width:12em;text-wrap:balance;overflow-wrap:normal;hyphens:none}
.fin-h em{white-space:normal}
/* Round 5: the industry name wraps between words (it was nowrap and clipped). Checked for all 26 at 360, 393 and iPad widths */
.cta{display:inline-flex;align-items:center;gap:12px;margin:14px 0 26px;padding:18px 26px;border-radius:999px;background:var(--plum);color:var(--ivory);text-decoration:none;font-weight:600;font-size:17px;box-shadow:0 16px 40px rgba(82,37,69,.3);transition:transform .3s var(--punch)}
.cta:hover{transform:translateY(-3px)}
.cta span{font:500 12px "Geist Mono",monospace;padding:5px 9px;border-radius:999px;background:rgba(251,246,238,.16)}
.fin-pick p{margin:0 0 10px;font-size:14px}

/* iPad portrait and narrower: the year becomes a top band */
html.band{--railw:0px}
html.band .rail{right:0;width:auto;bottom:auto;height:var(--bandh);flex-direction:row;align-items:center;justify-content:space-between;padding:0 6vw;
  background:var(--t-bg);box-shadow:0 10px 24px -18px rgba(0,0,0,.45);transition:color .5s,background .45s}
html.band .yr-wrap{flex:none;order:0}
html.band .yr{grid-template-columns:repeat(4,max-content)}
html.band .era-lbl{order:1;position:absolute;right:6vw;top:18px;text-align:right}
html.band .era-lbl .el{left:auto;right:0}
html.band .rail-ind{position:absolute;right:6vw;bottom:16px;text-align:right;max-width:34vw}
html.band .blk{padding:calc(var(--bar) + var(--bandh) + 6vh) 6vw 10vh}
html.band .hero{padding-top:calc(var(--bar) + var(--bandh) + 5vh)}
html.band .hl{font-size:clamp(52px,10.4vw,110px)}
html.band .hl.serif{font-size:clamp(56px,11vw,120px)}
html.band .blk>.in{max-width:none}
html.band .bar{gap:12px;padding:0 16px 0 4vw}
html,body{overflow-x:clip}
.bar>*{flex-shrink:0}.bar .ipick{flex-shrink:1;min-width:0}
@media (max-width:700px){.pg{grid-template-columns:1fr}.hero-in{grid-template-columns:1fr}.s-hero{grid-column:1;grid-row:auto;width:60%;justify-self:center}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* typed business */
.dial-sweep{position:fixed;inset:0;z-index:29;pointer-events:none;visibility:hidden;opacity:0;background:linear-gradient(to bottom,transparent 0,transparent 38%,rgba(220,147,160,.28) 47%,rgba(251,246,238,.55) 50%,rgba(220,147,160,.28) 53%,transparent 62%,transparent 100%)}
.tk-h{margin:0 0 12px;font:500 12.5px "Geist Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--plum);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tk-h i{width:8px;height:8px;border-radius:50%;background:var(--s-rose);flex:none}
.tk-h b{font-weight:600}


.tasks{margin:0 0 5vh}
.tk-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;counter-reset:tk}
.tk-l > li{counter-increment:tk;position:relative;padding:18px 20px 18px 20px;border-radius:16px;background:var(--s-blush);color:var(--plum);font-size:15px;line-height:1.45;display:flex;flex-direction:column;gap:8px}
.tk-l > li::before{content:counter(tk,decimal-leading-zero);position:static;font:500 11.5px "Geist Mono",monospace;letter-spacing:.1em;opacity:.65}
.tk-l > li.tk-x{display:none}
.tasks.open .tk-l > li.tk-x{display:flex}
.tk-l h4{margin:0;font:600 17px/1.25 Geist,sans-serif;letter-spacing:-.01em}
.tk-l p{margin:0}
.tk-l p span{display:block;font:500 10.5px "Geist Mono",monospace;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-bottom:2px}
.tk-o{padding-top:8px;border-top:1px solid rgba(82,37,69,.16)}
.tk-y span{color:var(--plum2);opacity:1!important}
.tk-more{margin-top:14px;border:1px solid var(--plum);background:transparent;color:var(--plum);border-radius:999px;padding:0 20px;min-height:44px;font:inherit;font-size:14.5px;font-weight:500;transition:background .2s,color .2s}
.tk-more:hover{background:var(--plum);color:var(--ivory)}
.fin-line{margin:-4px 0 18px;max-width:640px;font-size:clamp(17px,1.6vw,21px);line-height:1.45;color:var(--plum2);font-style:italic}

/* ombre blends between eras (comment #6): every boundary is a long soft gradient, no hard seam */
.hero{background:linear-gradient(var(--e96-desk) 0,var(--e96-desk) calc(100% - 18vh),var(--mix-hero-96) 100%)}
.b96{background:linear-gradient(var(--mix-hero-96) 0,var(--e96-bg) 18vh,var(--e96-bg) calc(100% - 18vh),var(--mix-96-03) 100%)}
.b03{background:linear-gradient(var(--mix-96-03) 0,var(--e03-blue) 18vh,var(--e03-blue) 45%,var(--e03-blue-2) 70%,var(--e03-sky) calc(100% - 18vh),var(--mix-03-grass) 100%)}
.b03g{background:linear-gradient(var(--mix-03-grass) 0,var(--e03-grass) 18vh,var(--e03-grass-deep) calc(100% - 18vh),var(--mix-grass-10) 100%)}
.b10{background:linear-gradient(var(--mix-grass-10) 0,var(--e10-blue) 18vh,var(--e10-blue) calc(100% - 18vh),var(--mix-10-now) 100%)}
.now{background:linear-gradient(var(--mix-10-now) 0,var(--s-ivory) 18vh,var(--s-ivory) 100%)}
/* phone and iPad portrait: no dead space at the top of each era (comments #4, #5) */
html.band .blk{padding-top:9vh;padding-bottom:9vh}
html.band .hero{padding-bottom:6vh}
html.band .b03g{padding-top:6vh}
@media (max-width:700px){.hint{display:none}}

/* ================= HERO: CRT boot, sign on, zoom (comments #1 to #3) ================= */
html[data-theme="crt"]{--t-bg:var(--s-plum);--t-ink:var(--s-ivory);--rail:var(--s-blush)}
html{background:var(--s-plum)}
.rail{transition:color .5s,opacity .5s}
html[data-theme="crt"] .rail,html.pin-on .rail{opacity:0;pointer-events:none}
.crt-sec{padding:0!important;min-height:0;background:var(--s-plum);color:var(--s-ivory);--thread:var(--s-rose)}
.crt-run{position:relative;height:223svh}
.crt-stick{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:calc(var(--bar) + 2.4svh) 5vw 12svh}
.hx-big{position:relative;z-index:3;margin:0;font:400 120px/.84 var(--f-display);text-transform:uppercase;letter-spacing:-.01em;color:var(--s-blush);text-align:center;width:100%;flex:none}
.hx-big .hx-w{display:inline-block;white-space:nowrap;animation:hxIn .62s cubic-bezier(.2,.9,.25,1) both;animation-delay:calc(.04s + var(--i) * .075s)}
.hx-big .hx-l{display:block;white-space:nowrap;line-height:.86}
.hx-big .hx-last .hx-w{color:var(--s-ivory)}
.hx-big .hx-last .hx-w:last-child{color:var(--s-apricot)}
@keyframes hxIn{0%{transform:scale(2.6) translateY(-12%) rotate(-4deg);opacity:0;filter:blur(10px)}55%{opacity:1;filter:blur(0)}78%{transform:scale(.96)}100%{transform:none;opacity:1}}
.hx-mq{position:absolute;left:0;right:0;top:58%;z-index:1;overflow:hidden;pointer-events:none;transform:translateY(-50%) rotate(-4deg)}
.hx-mq-r{display:flex;width:max-content;animation:mq 26s linear infinite}
.hx-mq-r span{font:400 clamp(90px,24svh,260px)/1 var(--f-display);text-transform:uppercase;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px var(--s-rose);opacity:.42;padding-right:.4em}
@keyframes mq{to{transform:translateX(-50%)}}
.crt{position:relative;z-index:2;flex:1 1 auto;min-height:0;width:100%;container-type:size;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:1.6svh;animation:crtFloat 6s ease-in-out infinite;will-change:transform}
@keyframes crtFloat{50%{translate:0 -6px}}
.crt-body{position:relative;width:min(92cqw,calc(88cqh * 1.16));aspect-ratio:1.16;border-radius:7%/8%;padding:5.2% 6.2% 0;
  background:linear-gradient(170deg,var(--e96-cream),var(--e96-plastic) 55%,var(--e96-manila));box-shadow:inset 0 2px 0 rgba(255,255,255,.7),inset 0 -1.2cqw 2cqw rgba(91,86,72,.35),0 3cqh 6cqh rgba(20,5,15,.45);display:flex;flex-direction:column}
.crt-glass{flex:none;aspect-ratio:4/3;width:100%;padding:3.4%;border-radius:6%/7.5%;background:var(--s-ink);box-shadow:inset 0 .8cqh 1.6cqh rgba(0,0,0,.7),0 0 0 2px var(--e96-ink-3)}
.crt-scr{position:relative;width:100%;height:100%;overflow:hidden;border-radius:5%/6.5%;background:var(--s-ink);container-type:inline-size;transition:background .15s}
html.crt-desk .crt-scr{background:var(--e96-desk)}
.crt-scr::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--e96-phosphor);z-index:6;opacity:0;pointer-events:none}
html.crt-on .crt-scr::before{animation:crtOn .5s var(--ease-out) both}
@keyframes crtOn{0%{opacity:1;transform:scaleX(.02)}40%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1) scaleY(140)}}
.crt-fx{position:absolute;inset:0;z-index:5;pointer-events:none;
  background:repeating-linear-gradient(rgba(0,0,0,.2) 0 1px,transparent 1px 3px),radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(0,0,0,.5) 100%);animation:flick 4s steps(1) infinite}
.crt-fx::after{content:"";position:absolute;left:0;right:0;height:18%;top:-20%;background:linear-gradient(transparent,rgba(255,255,255,.06),transparent);animation:roll 5.5s linear infinite}
@keyframes flick{0%,100%{opacity:1}47%{opacity:.86}48%{opacity:1}83%{opacity:.92}}
@keyframes roll{to{top:110%}}
.crt-boot{position:absolute;inset:0;padding:6cqw 7cqw;font:400 6.2cqw/1.12 VT323,monospace;color:var(--e96-phosphor);text-shadow:0 0 .3em rgba(200,214,192,.5);white-space:pre-wrap;z-index:2}
html.crt-desk .crt-boot{display:none}
.cur{display:inline-block;width:.55em;height:.95em;vertical-align:-.12em;margin-left:.1em;background:var(--thread,var(--s-plum));animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.so{position:absolute;left:11%;right:11%;top:9%;z-index:3;background:var(--e96-window);color:var(--s-ink);font:400 4.2cqw/1.2 Arimo,Arial,sans-serif;
  box-shadow:inset -.5cqw -.5cqw 0 var(--e03-gray),inset .5cqw .5cqw 0 var(--px-white),.8cqw .8cqw 0 rgba(0,0,0,.35);opacity:0;transform:scale(.86);transition:opacity .2s,transform .35s var(--ease-punch)}
html.crt-desk .so{opacity:1;transform:none}
.so-t{display:flex;align-items:center;justify-content:space-between;margin:.6cqw;padding:.8cqw 1.6cqw;background:linear-gradient(90deg,var(--e96-title),var(--e03-title));color:var(--px-white);font-weight:700}
.so-t i{width:4.4cqw;height:3.8cqw;background:var(--e96-window);box-shadow:inset -.4cqw -.4cqw 0 var(--e03-gray),inset .4cqw .4cqw 0 var(--px-white)}
.so-b{padding:2.4cqw 4cqw 3.4cqw}
.so-logo{display:flex;align-items:center;gap:2.6cqw;margin-bottom:2.4cqw}
.so-orb{width:9cqw;height:9cqw;border-radius:50%;flex:none;background:radial-gradient(circle at 34% 30%,var(--s-blush) 0,var(--s-rose) 20%,var(--s-plum-2) 45%,var(--s-plum) 72%,var(--s-plum-deep));box-shadow:0 0 0 .5cqw var(--px-white)}
html.crt-conn .so-orb{animation:orbP 1.4s var(--ease-punch) infinite}
@keyframes orbP{50%{transform:scale(1.1)}}
.so-logo b{font:400 8cqw/1 var(--f-serif);color:var(--s-plum)}
.so-logo b span{color:var(--s-rose)}
.so-logo small{display:block;font:700 2.8cqw/1 Arimo,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--e96-ink-2);margin-top:.6cqw}
.so-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;margin-bottom:2cqw}
.so-s{display:grid;place-items:center;height:9cqw;font:400 4.6cqw/1 VT323,monospace;font-style:normal;color:var(--e03-gray);background:var(--e96-window);box-shadow:inset .4cqw .4cqw 0 var(--e03-gray),inset -.4cqw -.4cqw 0 var(--px-white)}
.so-s::before{content:attr(data-l)}
.so-s.on{color:var(--e96-hi);background:var(--s-plum);box-shadow:inset .4cqw .4cqw 0 var(--s-plum-deep),inset -.4cqw -.4cqw 0 var(--s-plum-2)}
.so-s.done{color:var(--s-plum);background:var(--s-blush)}
.so-st{margin:0 0 2cqw;font-weight:700;min-height:1.2em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.so-f{display:flex;align-items:center;gap:2cqw;margin:0 0 1.4cqw}
.so-f span{width:30%;flex:none}
.so-f b{flex:1;min-width:0;padding:.8cqw 1.6cqw;background:var(--px-white);box-shadow:inset .4cqw .4cqw 0 var(--e03-gray);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.2em}
.so-bar{height:4.6cqw;margin-top:2cqw;padding:.6cqw;background:var(--px-white);box-shadow:inset .4cqw .4cqw 0 var(--e03-gray)}
.so-bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--e96-title) 0 3cqw,transparent 3cqw 3.6cqw);transition:width .6s steps(6)}
.crt-chin{flex:1;display:flex;align-items:center;gap:4%;padding:0 2%}
.crt-mark{font:400 clamp(12px,5.2cqw,30px)/1 var(--f-serif);color:var(--s-plum)}
.crt-mark span{color:var(--s-rose)}
.crt-vent{flex:1;height:26%;background:repeating-linear-gradient(90deg,rgba(91,86,72,.45) 0 2px,transparent 2px 6px);border-radius:2px}
.crt-led{width:clamp(6px,1.6cqw,11px);aspect-ratio:1;border-radius:50%;background:var(--e96-ink-3);transition:background .2s,box-shadow .2s}
html.crt-on .crt-led{background:var(--e10-green);box-shadow:0 0 8px var(--e10-green)}
.crt-neck{width:min(46cqw,calc(42cqh * 1.16));height:6cqh;flex:none;background:linear-gradient(var(--e96-manila),var(--e96-plastic));clip-path:polygon(16% 0,84% 0,100% 100%,0 100%);border-radius:0 0 8px 8px}
.hx-sub{position:relative;z-index:3;margin:1.6svh 0 0;max-width:36ch;text-align:center;font:400 clamp(16px,1.5vw,20px)/1.4 var(--f-sans);color:var(--s-ivory);opacity:0;animation:fadeUp .8s var(--ease-punch) .7s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.snd,.hx-cue{position:absolute;bottom:3.4svh;z-index:4}
.snd{right:5vw;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--r-pill);border:1px solid rgba(251,246,238,.45);background:rgba(46,16,40,.35);color:var(--s-ivory);font:500 13px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;-webkit-tap-highlight-color:transparent}
.snd i{width:16px;height:12px;position:relative;background:linear-gradient(currentColor,currentColor) 0 50%/5px 6px no-repeat;clip-path:none}
.snd i::before{content:"";position:absolute;left:4px;top:0;border-style:solid;border-width:6px 6px 6px 0;border-color:transparent currentColor transparent transparent}
.snd[aria-pressed="false"] i::after{content:"";position:absolute;right:-3px;top:5px;width:9px;height:1.5px;background:currentColor;transform:rotate(45deg)}
.snd[aria-pressed="true"]{background:var(--s-blush);color:var(--s-plum);border-color:var(--s-blush)}
.hx-cue{left:5vw;margin:0;font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--s-blush);display:flex;align-items:center;gap:10px}
.hx-cue::before{content:"";width:1px;height:26px;background:currentColor;animation:cue 1.6s var(--ease-main) infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.crt-fill{position:absolute;inset:0;z-index:8;background:var(--e96-desk);opacity:0;pointer-events:none}
/* Round 5: 1996 overlaps the last 18svh of the zoom. Its top is see-through, so its first lines rise over the glass as it goes solid. No dead teal. */
.crt-sec{position:relative;z-index:1}
.hero{position:relative;z-index:2;margin-top:-18svh;padding-top:2svh!important;background:linear-gradient(transparent 0,transparent 18svh,var(--e96-desk) 18svh,var(--e96-desk) calc(100% - 18vh),var(--mix-hero-96) 100%)}
html.band .hero{padding-top:2svh!important}
@media (max-width:700px){.crt-stick{padding-bottom:13svh}.hx-cue{display:none}.snd{right:50%;transform:translateX(50%)}}
@media (orientation:landscape) and (max-height:520px){.hx-sub{display:none}}

/* ================= TODAY: the turn (Round 4). One pinned, scrubbed, reversible scene ================= */
/* S1 problem > S2 the turn on plum > ombre back to ivory > S3 what one system means > S4 AI on top. Nothing toggles: every state is a scrubbed tween. */
.conv-sec{padding:0!important;min-height:0;background:linear-gradient(var(--mix-10-now) 0,var(--s-ivory) var(--blend),var(--s-ivory) 100%);color:var(--s-plum);--oy:64%;--ow:min(50vw,34svh)}
.now{background:var(--s-ivory)!important}
.conv-run{position:relative;height:815svh}
.conv-stick{position:sticky;top:0;height:100svh;overflow:hidden}
.cv-orb{position:absolute;left:50%;top:var(--oy);width:var(--ow);aspect-ratio:1;margin:calc(var(--ow) / -2) 0 0 calc(var(--ow) / -2);border-radius:50%;z-index:1;
  background:radial-gradient(circle at 34% 30%,var(--s-blush) 0,var(--s-rose) 18%,var(--s-plum-2) 42%,var(--s-plum) 70%,var(--s-plum-deep) 100%);box-shadow:0 4svh 12svh rgba(82,37,69,.35);transform:scale(.5);will-change:transform}
.cv-ring{position:absolute;left:50%;top:var(--oy);width:var(--ow);aspect-ratio:1;margin:calc(var(--ow) / -2) 0 0 calc(var(--ow) / -2);border-radius:50%;border:2px solid var(--s-rose);opacity:0;z-index:1}
.cv-tok{position:absolute;left:50%;top:var(--oy);z-index:3;padding:10px 14px;border-radius:var(--r-sm);font:600 clamp(12px,1.3vw,16px)/1.1 Arimo,Arial,sans-serif;white-space:nowrap;box-shadow:0 10px 24px rgba(46,16,40,.18);will-change:transform}
.cv-tok.k96{background:var(--e96-paper);color:var(--e96-ink);font-family:VT323,monospace;font-size:clamp(16px,1.7vw,22px);font-weight:400;border-radius:2px}
.cv-tok.k03{background:var(--e03-chrome);color:var(--e03-ink);box-shadow:inset 0 0 0 1px var(--e03-chrome-edge),0 10px 24px rgba(46,16,40,.18);border-top:6px solid var(--e03-blue)}
.cv-tok.k10{background:var(--e10-white);color:var(--e10-ink);border-radius:12px}
.cv-tok.k10 b{display:inline-grid;place-items:center;min-width:1.5em;height:1.5em;margin-right:6px;border-radius:99px;background:var(--e10-badge);color:var(--px-white);font-size:.85em}
.cv-tok.note{background:var(--e03-tip);color:var(--e96-ink);font-family:"Permanent Marker",cursive;font-weight:400;transform-origin:center}
/* plum field: a 300% tall ombre (plum, plum 2, blush, ivory) that slides up, so plum resolves into ivory with no edge */
.cv-plum{position:absolute;inset:0;z-index:2;opacity:0;overflow:hidden;pointer-events:none}
.cv-plum i{position:absolute;left:0;right:0;top:0;height:300%;will-change:transform;
  background:linear-gradient(180deg,var(--s-plum-2) 0,var(--s-plum) 12%,var(--s-plum) 33.4%,var(--s-plum-2) 42%,var(--s-blush) 55%,var(--s-blush-soft) 61%,var(--s-ivory) 68%,var(--s-ivory) 100%)}
.cv-s1{position:absolute;left:6vw;right:6vw;top:calc(var(--bar) + 6svh);z-index:4;text-align:center}
.cv-t1{margin:0;font:400 clamp(56px,15vw,150px)/.86 var(--f-display);text-transform:uppercase;color:var(--s-plum);text-wrap:balance}
.cv-s1p{margin:1.4em auto 0;max-width:26em;font-size:clamp(16px,1.6vw,20px);line-height:1.45;color:var(--s-plum);opacity:.85;text-wrap:balance}
.cv-one{position:absolute;left:4vw;right:4vw;top:44%;z-index:5;margin:0;text-align:center;pointer-events:none;opacity:0;
  font:400 clamp(76px,21vw,260px)/.9 var(--f-serif);color:var(--s-ivory);text-shadow:0 .04em .2em rgba(46,16,40,.35);transform:translateY(-50%)}
.cv-one .w,.cv-h3 .w{display:inline-block;white-space:nowrap;will-change:transform}
.cv-one em{color:var(--s-blush);font-style:normal}
.cv-not{position:absolute;left:6vw;right:6vw;top:calc(44% + clamp(52px,13vw,170px));z-index:5;margin:0;text-align:center;opacity:0;
  font:500 var(--t-xs)/1.5 var(--f-mono);letter-spacing:var(--tr-kicker);text-transform:uppercase;color:var(--s-blush)}
/* S3 and S4 share one frame, below the header bar */
.cv-s3,.cv-s4{position:absolute;left:0;right:0;top:var(--bar);bottom:0;z-index:4;padding:3svh 6vw 4svh;display:flex;flex-direction:column;justify-content:center;gap:2.6svh;pointer-events:none}
.cv-s3 .k{color:var(--plum);margin:0 0 10px}
.cv-h3,.cv-h4{margin:0;font:400 clamp(50px,13vw,120px)/.92 var(--f-serif);color:var(--plum);letter-spacing:-.01em}
.cv-h3{visibility:hidden}
.cv-h3 em,.cv-h4 em{color:var(--s-rose);font-style:normal}
.cv-h4 em{font-style:italic}
.cv-b3,.cv-b4{margin:14px 0 0;max-width:30em;font-size:clamp(16px,1.7vw,20px);line-height:1.45;color:var(--e96-ink)}
.cv-rg.ring{flex:none;width:min(84vw,40svh,600px);margin:0 auto;z-index:auto}
.cv-rg .nd b{font-size:clamp(11px,3.4cqw,17px);padding:.6em 1em}
.cv-rg .hubl{font-size:clamp(18px,5.5cqw,34px)}
.cv-s4 .ai{margin:0;gap:10px}
.cv-s4 .aic{font-size:clamp(15px,1.5vw,18px);line-height:1.35}
.cv-s4 .aic:nth-child(odd){margin-left:0}
.cv-s4 .aic:nth-child(even){margin-left:6%}
.conv-sec .cv-s3 .k,.conv-sec .cv-b3,.conv-sec .cv-s4 .cv-h4,.conv-sec .cv-b4,.conv-sec .cv-s4 .aic{opacity:0}
@media (max-width:700px) and (max-height:760px){
  .conv-sec{--oy:67%}
  .cv-s1p{margin-top:1em}
}
@media (max-width:700px){
  .cv-s1{top:calc(var(--bar) + 5svh)}
  .cv-s3,.cv-s4{gap:2.2svh}
  .cv-rg.ring{width:min(90vw,46svh)}
  .cv-s4 .aic{padding:12px 15px}
}
/* iPad and other tall tablets */
@media (min-width:701px) and (max-aspect-ratio:1/1){
  .conv-sec{--ow:min(42vw,30svh)}
  .cv-t1{font-size:clamp(80px,13vw,130px)}
  .cv-h3,.cv-h4{font-size:clamp(70px,11vw,110px)}
  .cv-rg.ring{width:min(76vw,44svh,640px)}
  .cv-s4 .ai{max-width:620px}
}
/* wide screens: copy left, picture right */
@media (min-aspect-ratio:1/1) and (min-width:900px){
  .conv-sec{--oy:66%;--ow:min(26vw,36svh)}
  .cv-t1{font-size:clamp(64px,8.4vw,150px)}
  .cv-s3,.cv-s4{flex-direction:row;align-items:center;justify-content:space-between;padding:4svh 6vw;gap:5vw}
  .cv-tx{flex:1 1 44%;max-width:640px}
  .cv-h3,.cv-h4{font-size:clamp(60px,6.4vw,120px)}
  .cv-rg.ring{width:min(42vw,72svh,640px);margin:0}
  .cv-s4 .ai{flex:1 1 46%;max-width:620px}
}
/* reduced motion: no pin, no scrub. The same words, stacked, in the same order */
@media (prefers-reduced-motion:reduce){
  .conv-run{height:auto}
  .conv-stick{position:relative;height:auto;overflow:visible;padding:calc(var(--bar) + 8vh) 0 6vh}
  .cv-orb,.cv-ring,.cv-tok,.cv-plum,.cv-one{display:none}
  .cv-s1,.cv-s3,.cv-s4,.cv-not{position:relative;inset:auto;top:auto;left:auto;right:auto;padding:0 6vw;margin:0 0 9vh}
  .cv-not{display:block;opacity:1;color:var(--plum);text-align:left;margin:-6vh 0 9vh}
  .cv-s1{text-align:left}
  .cv-h3{visibility:visible}
  .conv-sec .cv-s3 .k,.conv-sec .cv-b3,.conv-sec .cv-s4 .cv-h4,.conv-sec .cv-b4,.conv-sec .cv-s4 .aic{opacity:1}
}

/* ================= Sayne thread: the plum cursor on every era kicker ================= */
.k::after{content:"";display:inline-block;width:.6em;height:1.05em;vertical-align:-.2em;margin-left:.4em;background:var(--thread,var(--s-plum));animation:blink 1.05s steps(1) infinite}
.hero,.b03,.b03g,.b10{--thread:var(--s-rose)}
.b96,.now,.fin{--thread:var(--s-plum)}
@media (prefers-reduced-motion:reduce){.hx-big .hx-w,.hx-sub{animation:none!important;opacity:1}}
.so{top:6%;font-size:3.7cqw}
.so-b{padding:1.8cqw 4cqw 2.6cqw}
.so-logo{margin-bottom:1.6cqw}.so-orb{width:7.6cqw;height:7.6cqw}.so-logo b{font-size:7cqw}
.so-s{height:7.4cqw}.so-steps{margin-bottom:1.6cqw}
.so-f span{width:34%;white-space:nowrap}
.so-bar{height:4cqw;margin-top:1.4cqw}

/* ===== Round 2: story header, pickers ===== */
.story-bar .hdr-pick{display:contents}
.showing{flex-wrap:wrap}
.ipick.mini{min-height:34px;padding:0 28px 0 12px;font-size:13px;gap:6px}
.ipick.mini::after{right:12px;width:6px;height:6px;margin-top:-5px}
.ipick.mini .ip-v{display:none}
.hero .ipick.big{margin-top:6px;max-width:100%}
.fin-pick{margin-top:4vh}
.fin-pick .ipick.big{background:var(--s-blush-soft);color:var(--s-plum)}

/* ===== Round 2: before and after (one real task) ===== */
.ba-sec{background:var(--s-ivory);color:var(--s-plum)}
.ba-run{position:relative;height:330svh}
.ba-stick{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;padding:calc(var(--bar) + 3svh) 5vw 4svh;box-sizing:border-box}
.ba-top{position:relative;z-index:3;max-width:900px}
.ba-k{position:relative;height:30px;margin:0 0 8px}
.ba-tag{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--r-pill);font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.ba-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.t-old{background:var(--s-peach);color:var(--s-plum)}
.t-new{background:var(--s-plum);color:var(--s-ivory);opacity:0}
.ba-h{margin:0;font:400 clamp(34px,6.4vw,84px)/.95 var(--f-display);text-transform:uppercase;letter-spacing:-.005em}
.ba-ex{margin:10px 0 0;font-size:14px}
.ba-ex a{color:var(--s-plum);font-weight:600}
.ba-stage{position:relative;flex:1 1 auto;min-height:0;margin-top:3svh}
.ba-old,.ba-new{position:absolute;inset:0}
.mw{position:absolute;background:#FFFDF7;border-radius:10px;box-shadow:0 18px 40px rgba(46,16,40,.18),0 0 0 1px rgba(82,37,69,.14);overflow:hidden;font-size:clamp(12.5px,1.2vw,15px)}
.mw-t{margin:0;padding:8px 12px;display:flex;gap:8px;align-items:center;background:linear-gradient(180deg,#E9DEC6,#D9CCB0);font:600 12px/1.2 var(--f-sans);color:#3B2A30}
.mw-t i{width:9px;height:9px;border-radius:50%;background:var(--s-rose);box-shadow:14px 0 0 var(--s-peach)}
.mw-t i+*{margin-left:16px}
.mw-t b{margin-left:auto;background:var(--s-rose);color:var(--s-ivory);padding:2px 7px;border-radius:9px;font-size:11px}
.mw ul{list-style:none;margin:0;padding:4px 0}
.mw li{padding:8px 12px;border-bottom:1px dashed rgba(82,37,69,.16);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#3B2A30}
.mw-mail{left:0;top:0;width:min(560px,72%);transform:rotate(-2deg)}
.mw-mail li{font-weight:600}
.mw-mail li:nth-child(n+3){font-weight:400;opacity:.8}
.mw-xls{right:0;top:30%;width:min(520px,70%);transform:rotate(2.5deg)}
.mw-xls .mw-t{background:linear-gradient(180deg,#DDEBD5,#C4DBB8)}
.mw-xls li{font-family:var(--f-mono);font-size:.92em;word-spacing:.6em}
.stk{position:absolute;margin:0;width:clamp(120px,15vw,190px);padding:14px 14px 18px;background:var(--s-peach);color:#4A3A1C;font:400 clamp(17px,1.7vw,22px)/1.15 "Permanent Marker",cursive;box-shadow:0 12px 24px rgba(46,16,40,.2)}
.stk.k1{left:4%;bottom:14%;transform:rotate(-7deg)}
.stk.k2{left:38%;bottom:4%;transform:rotate(4deg);background:var(--s-blush)}
.stk.k3{right:6%;top:2%;transform:rotate(9deg)}
.ba-cap{position:absolute;left:0;right:0;bottom:0;margin:0;text-align:center;font:400 clamp(26px,4.4vw,56px)/1 var(--f-serif);z-index:2}
.ba-cap em{color:var(--s-rose)}
.ba-old .ba-cap{text-shadow:0 0 18px var(--s-ivory),0 0 6px var(--s-ivory)}
.ba-new{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3svh;clip-path:inset(100% 0 0 0)}
.sw{width:min(620px,100%);background:var(--s-ivory);border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(46,16,40,.22),0 0 0 1px rgba(82,37,69,.12)}
.sw-t{margin:0;display:flex;align-items:center;gap:7px;padding:12px 16px;background:linear-gradient(90deg,var(--s-plum),var(--s-plum-2));color:var(--s-ivory);font:500 13px/1 var(--f-sans)}
.sw-t i{width:9px;height:9px;border-radius:50%;background:var(--s-blush);opacity:.85}
.sw-t span{margin-left:8px}
.sw-t em{margin-left:auto;font-style:normal;background:var(--s-peach);color:var(--s-plum);padding:4px 9px;border-radius:var(--r-pill);font-size:11.5px;font-weight:600}
.sw-b{padding:clamp(16px,2.4vw,26px);display:grid;gap:8px}
.sw-l{margin:6px 0 0;font:500 11.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.sw-l::before{content:"";width:10px;height:10px;border-radius:3px}
.sw-l.l-p::before{background:var(--s-blush)}
.sw-l.l-y::before{background:var(--s-peach)}
.sw-d{margin:0;padding:12px 14px;border-radius:12px;background:var(--s-blush-soft);font-size:clamp(15px,1.5vw,18px);line-height:1.35}
.sw-o{margin:0;padding:12px 14px;border-radius:12px;background:var(--s-peach);font-weight:600;font-size:clamp(15px,1.5vw,18px);line-height:1.35}
.sw-h{margin:10px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-size:14.5px}
.sw-ok{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:var(--r-pill);background:var(--s-plum);color:var(--s-ivory);font-weight:600;box-shadow:0 0 0 0 rgba(220,147,160,.6);animation:okPulse 2.2s ease-out infinite}
.sw-ok::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--s-peach)}
@keyframes okPulse{0%{box-shadow:0 0 0 0 rgba(220,147,160,.6)}70%,100%{box-shadow:0 0 0 14px rgba(220,147,160,0)}}
.ba-wipe{position:absolute;inset:-4svh -6vw;z-index:4;background:linear-gradient(180deg,var(--s-plum),var(--s-plum-deep));transform:scaleY(0);transform-origin:50% 100%;pointer-events:none}
@media (max-width:700px){
  .mw-mail{width:88%}.mw-xls{width:84%;top:36%}
  .stk{width:118px;padding:10px 10px 14px}
  .stk.k1{bottom:16%}.stk.k2{left:auto;right:4%;bottom:10%}.stk.k3{display:none}
  .ba-cap{font-size:30px}
}

/* ===== Round 2: three full screen moments (stacking panels) ===== */
.seq-sec{position:relative}
.sq{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;box-sizing:border-box;padding:calc(var(--bar) + 4svh) 5vw 6svh;border-radius:28px 28px 0 0;box-shadow:0 -20px 50px rgba(46,16,40,.12)}
.sq1{background:var(--s-blush-soft);color:var(--s-plum)}
.sq2{background:var(--s-peach);color:var(--s-plum)}
.sq3{background:radial-gradient(120% 90% at 80% 0%,var(--s-plum-2),var(--s-plum) 55%,var(--s-plum-deep));color:var(--s-ivory)}
.sq-in{width:100%;max-width:1100px;margin:0 auto}
.sq-n{margin:0 0 14px;font:500 12.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.sq-n span{font-size:1.5em;color:var(--s-rose)}
.sq3 .sq-n span{color:var(--s-apricot)}
.sq-h{margin:0 0 4svh;font:400 clamp(46px,9vw,132px)/.9 var(--f-display);text-transform:uppercase}
.sq-h em{font:italic 400 1em/1 var(--f-serif);text-transform:none;color:var(--s-rose)}
.sq3 .sq-h em{color:var(--s-blush)}
.sq-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sq-l li{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:18px;background:var(--s-ivory);box-shadow:0 10px 30px rgba(46,16,40,.08)}
.sq2 .sq-l li{background:var(--s-peach-soft)}
.sq3 .sq-l li{background:rgba(251,246,238,.08);box-shadow:inset 0 0 0 1px rgba(247,207,212,.28)}
.sq-c{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--s-blush);color:var(--s-plum);font:400 18px/1 var(--f-display)}
.sq2 .sq-c{background:var(--s-plum);color:var(--s-peach)}
.sq3 .sq-c{background:var(--s-peach);color:var(--s-plum)}
.sq-l b{display:block;font:500 12px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;opacity:.75;margin-bottom:6px}
.sq-l p{margin:0;font-size:clamp(16px,1.5vw,19px);line-height:1.38}
.ok-chip{display:inline-block;margin-top:10px;padding:6px 12px;border-radius:var(--r-pill);background:var(--s-blush);color:var(--s-plum);font-weight:600;font-size:13px}
.sq-rule{margin:4svh 0 0;font:400 clamp(20px,2.2vw,28px)/1.25 var(--f-serif);color:var(--s-blush)}
.js .sq-l li{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease-punch),transform .7s var(--ease-punch);transition-delay:calc(var(--i) * .12s)}
.js .sq.sq-on .sq-l li{opacity:1;transform:none}
@media (max-width:860px){
  .sq-l{grid-template-columns:1fr;gap:10px}
  .sq-l li{padding:14px}
  .sq-l p{font-size:15.5px}
  .sq-h{margin-bottom:3svh}
}

/* ===== Round 2: finale CTA cards ===== */
.fin-cards{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:3svh 0 2svh;max-width:1100px}
.fc{position:relative;display:flex;flex-direction:column;gap:8px;padding:22px 22px 52px;border-radius:22px;text-decoration:none;color:var(--s-plum);transition:transform .35s var(--ease-punch),box-shadow .35s}
.fc:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(46,16,40,.16)}
.fc-y{background:var(--s-peach)}.fc-b{background:var(--s-blush)}.fc-p{background:var(--s-plum);color:var(--s-ivory)}
.fc-k{font:500 11.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.fc b{font:400 clamp(30px,3vw,40px)/1 var(--f-display);text-transform:uppercase}
.fc i{position:absolute;right:20px;bottom:16px;font-style:normal;font-size:22px}
@media (max-width:860px){.fin-cards{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.ba-run{height:auto}.ba-stick{position:relative;height:auto;min-height:100svh}.ba-old{position:relative;height:60svh}.ba-new{position:relative;clip-path:none;margin-top:4svh}.t-new{opacity:1;left:150px}.js .sq-l li{opacity:1;transform:none}}

/* ===== Round 2: hero instant message (dial-up era chat) ===== */
.im{position:absolute;right:max(2%,calc(50% - 46cqh - 150px));bottom:16%;z-index:5;width:min(300px,64%);border-radius:4px;overflow:hidden;background:#ECE6D6;box-shadow:0 18px 40px rgba(20,6,16,.45),inset 0 0 0 1px #fff8,0 0 0 1px #2a1a24;font:13px/1.35 Arimo,Arial,sans-serif;color:#1d1218;transform:translateY(16px) scale(.85);opacity:0;transform-origin:100% 100%;pointer-events:none}
html.crt-im .im{animation:imPop .45s cubic-bezier(.2,1.4,.4,1) forwards}
.im-t{margin:0;display:flex;align-items:center;justify-content:space-between;padding:4px 6px 4px 8px;background:linear-gradient(90deg,#16357E,#5778C7);color:#fff;font-weight:700;font-size:12px}
.im-t i{width:14px;height:12px;background:#ECE6D6;box-shadow:inset -1px -1px #6b6b6b,inset 1px 1px #fff}
.im-b{padding:8px 10px;background:#FFFDF7;margin:5px;box-shadow:inset 1px 1px #8a8a8a}
.im-b p{margin:0 0 4px}
.im-b b{color:#B0233F}
.im-2{opacity:0}
html.crt-im .im-2{animation:fadeUp .4s ease 1.3s forwards}
@keyframes imPop{to{transform:none;opacity:1}}
@media (max-width:700px){.im{right:0;bottom:4%;width:54%;font-size:10.5px}.im-b{padding:5px 7px;margin:4px}.im-t{font-size:10.5px;padding:3px 5px 3px 7px}}
@media (prefers-reduced-motion:reduce){html.crt-im .im,html.crt-im .im-2{animation:none;opacity:1;transform:none}}
@media (max-width:700px){.hx-sub{font-size:14.5px;max-width:32ch;margin-top:1svh}}
.ba-ex b{font:600 14px/1.3 var(--f-sans);color:var(--s-plum)}
.sq-n b{font-weight:600;color:inherit}



/* ===== Round 3: after card + closing line never collide; tablet fill ===== */
.ba-new{justify-content:center;gap:0;padding:0}
.ba-new .sw{flex:0 0 auto}
.ba-new .ba-cap{position:static;flex:0 0 auto;margin-top:clamp(14px,3svh,32px)}
.sw-h{line-height:1.3}
.sw-h b{flex:1 1 160px;min-width:0}
@media (max-width:700px){
  .ba-stick{padding-top:calc(var(--bar) + 2svh);padding-bottom:3svh}
  .ba-h{font-size:clamp(30px,8.6vw,40px)}
  .ba-stage{margin-top:2svh}
  .sw-t{padding:10px 14px}
  .sw-b{padding:14px;gap:6px}
  .sw-l{margin-top:4px}
  .sw-d,.sw-o{padding:10px 12px;font-size:15px}
  .sw-h{margin-top:6px;font-size:14px;gap:8px 12px}
  .sw-ok{padding:9px 15px}
  .ba-new .ba-cap{font-size:28px}
}
@media (min-width:701px) and (max-aspect-ratio:1/1){
  .ba-stick{justify-content:center;padding-top:calc(var(--bar) + 4svh)}
  .ba-h{font-size:clamp(56px,8.4vw,92px)}
  .ba-ex{font-size:17px}.ba-ex b{font-size:17px}
  .ba-k{height:36px}.ba-tag{font-size:14px;padding:9px 16px}
  .ba-stage{flex:0 0 auto;height:min(68svh,860px);margin-top:3.5svh}
  .mw{font-size:20px}.mw-t{font-size:15px;padding:11px 16px}.mw li{padding:12px 16px}
  .mw-mail{width:80%}.mw-xls{width:80%;top:33%}
  .stk{width:200px;font-size:24px;padding:18px 18px 22px}
  .stk.k1{left:2%;bottom:13%}.stk.k2{left:40%;bottom:6%}.stk.k3{right:0;top:-2%}
  .ba-old .ba-cap{font-size:58px}
  .sw{width:min(680px,100%)}
  .sw-t{font-size:16px;padding:15px 20px}.sw-t em{font-size:14px}
  .sw-b{padding:30px;gap:12px}
  .sw-l{font-size:13.5px}
  .sw-d,.sw-o{font-size:22px;padding:16px 18px}
  .sw-h{font-size:18px}.sw-ok{padding:13px 22px}
  .ba-new .ba-cap{font-size:58px}
}
@media (min-width:701px) and (max-aspect-ratio:1/1){
  .mw-mail{width:72%}.stk.k3{top:-4%}
  .sw{width:min(720px,100%);border-radius:24px}
  .sw-t{font-size:18px;padding:18px 24px}.sw-t i{width:12px;height:12px}.sw-t em{font-size:15px;padding:6px 12px}
  .sw-b{padding:36px;gap:14px}
  .sw-l{font-size:15px;margin-top:8px}
  .sw-d,.sw-o{font-size:25px;padding:20px 22px;border-radius:16px}
  .sw-h{font-size:20px;margin-top:16px}.sw-ok{padding:15px 26px}
}
.rot{display:none!important}
/* Round 5: reduced motion has no zoom, so no pinned run and no overlap */
@media (prefers-reduced-motion:reduce){.crt-run{height:auto}.crt-stick{position:relative;height:100svh}.hero{margin-top:0;padding-top:12vh!important;background:linear-gradient(var(--e96-desk) 0,var(--e96-desk) calc(100% - 18vh),var(--mix-hero-96) 100%)}}

/* Round 6: headings fade before passing under the sticky year bar (driven by app.js) */
html.band .xo{filter:opacity(var(--xo,1))}

/* ===== Round 6 F: photoreal devices. Photos are the hardware, screens stay live HTML over the photo's glass. ===== */
.dv{background:none!important;box-shadow:none!important;padding:0!important;border-radius:0!important;border:0!important;aspect-ratio:auto!important;height:auto}
.dv-img{display:block;width:100%;height:auto;filter:drop-shadow(0 1.8cqw 2.2cqw rgba(30,15,10,.30)) drop-shadow(0 .3cqw .4cqw rgba(30,15,10,.18));pointer-events:none;user-select:none;-webkit-user-drag:none;position:relative;z-index:1}
.dv-scr{position:absolute!important;left:var(--sx);top:var(--sy);width:var(--sw)!important;height:var(--sh)!important;margin:0!important;overflow:hidden;z-index:2;aspect-ratio:auto!important}
.dv-scr::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:20;border-radius:inherit;
  background:linear-gradient(160deg,rgba(255,255,255,.20),rgba(255,255,255,.05) 30%,transparent 48%),radial-gradient(120% 90% at 50% 50%,transparent 62%,rgba(0,0,0,.30));
  box-shadow:inset 0 0 1.2cqw rgba(0,0,0,.35)}
/* CRT glass: curved corners, bulge vignette, top-left reflection */
.dv-crt .dv-scr,.mon .dv-scr{border-radius:6%/8%!important}
.dv-crt .dv-scr::after,.mon .dv-scr::after{background:radial-gradient(70% 45% at 28% 18%,rgba(255,255,255,.16),transparent 70%),linear-gradient(165deg,rgba(255,255,255,.10),transparent 40%),radial-gradient(110% 100% at 50% 50%,transparent 58%,rgba(0,0,0,.55));box-shadow:inset 0 0 2.4cqw rgba(0,0,0,.6)}
/* hero CRT */
.crt-body.dv{display:block;width:min(92cqw,calc(90cqh * .996))}
.crt-body.dv .crt-glass{padding:0;background:var(--s-ink)}
.crt-body.dv .crt-scr{border-radius:6%/8%}
.crt-body.dv .crt-led{position:absolute;z-index:3;left:90.6%;top:84.6%;width:1.4%;height:auto;aspect-ratio:1}
/* 1996 monitor */
.mon.dv{width:56%}
.mon .dv-scr{background:var(--e96-desk)}
.mon .w95{font-size:1.75cqw}
/* fax: paper rises out of the top slot */
.fax.dv{top:22%;width:40%}
.fx-slot{position:absolute;left:42%;width:49%;bottom:89%;height:60cqw;overflow:hidden;z-index:0;pointer-events:none}
.fx-slot .fx-paper{position:absolute;left:3%;right:3%;bottom:0;width:auto;margin:0;padding:2cqw 2cqw 3cqw;font-size:2.2cqw;transform:translateY(var(--fy,88%));border-radius:.3cqw .3cqw 0 0}
.fax .fx-lcd{display:flex;align-items:center;justify-content:center;background:linear-gradient(#b9c79a,#9fb07c);color:#1d2416;font:2.6cqw/1 VT323,monospace;padding:0;border-radius:.4cqw;letter-spacing:.08em}
/* rolodex: live cards stand in front of the fanned photo cards */
.rdx.dv{width:46%;bottom:0}
.rdx.dv .rdx-cards{position:absolute;left:15%;width:70%;top:3%;height:71%;z-index:2}
.rdx.dv .rc{height:100%;left:0;right:0;font-size:2.3cqw}
/* pager */
.pgr.dv{width:28%;bottom:3%}
.pgr .pg-lcd{background:linear-gradient(#a9b88c,#8fa070);border-radius:.4cqw;font-size:3cqw;color:#1b2313;padding:0 1.4cqw;box-shadow:none}
/* floppy */
.dv-floppy{rotate:-5deg}
.dv-floppy .lb{position:absolute;z-index:2;left:13%;top:39%;width:73%;height:50%;rotate:2deg;display:grid;place-content:center;text-align:center;font:400 clamp(16px,2.4vw,32px)/1.05 "Permanent Marker",cursive;color:#1f2f78;background:none}
.dv-floppy .lb small{font-size:.5em;display:block;margin-top:.3em}
.s-hero.dv-floppy{aspect-ratio:auto}
/* 2003 */
.s-cd.dv-cd{aspect-ratio:auto;width:28%}
.bb.dv{width:21%}
.bb .bb-scr{background:linear-gradient(#dfe8ee,#c3d0d8);padding:.8cqw;font-size:1.25cqw;border-radius:.3cqw}
.bb .bb-scr .bb-h{margin:-.8cqw -.8cqw .8cqw;padding:.5cqw .8cqw}
.bb.dv .bb-led{left:auto;right:21%;top:6.5%;width:1.1cqw;height:1.1cqw;z-index:3}
.flip.dv{width:14%;bottom:0}
.flip .fl-in{padding:.8cqw;background:linear-gradient(#cfe3f2,#9fc3df);border-radius:.4cqw;backface-visibility:visible}
.flip .fl-in:before{display:none}
.flip .fl-in p{font-size:1.25cqw;padding:0}
.flip .fl-in .fl-h{margin:0 -.8cqw .6cqw;padding:.3cqw .8cqw}
/* 2010: phone, tablet with the page, laptop with the books */
.s10{aspect-ratio:.8}
.s-phone.dv{left:0;top:3%;width:30%}
.s-phone .ph-scr{background:linear-gradient(var(--e10-blue-deep),var(--e96-carbon));border-radius:.3cqw}
.tab10{left:32%;top:0;width:68%}
.lap10{left:24%;top:35.5%;width:76%;z-index:3}
.tab10 .dv-scr,.lap10 .dv-scr{border-radius:.3cqw;background:var(--e03-white)}
.tab10 .feed,.lap10 .books{position:relative;left:auto;top:auto;width:100%;height:100%;border-radius:0;box-shadow:none}
.tab10 .feed{font-size:1.6cqw}
.lap10 .books{font-size:1.4cqw}
.s10 .wb{top:79%;height:21%;z-index:4}
@media (prefers-reduced-motion:reduce){.dv-scr::after{animation:none}}
.b03g{padding-top:2vh!important}
.fax .fx-lcd{font-size:1.9cqw;letter-spacing:0}
.s-cd.dv-cd{right:0;top:27%;width:25%}
.flip.dv{right:5%;bottom:-2%;width:13%}
.bb.dv{left:33%;bottom:0;width:24%}
.bb .bb-scr{font-size:1.4cqw}
.s10{aspect-ratio:.78}
.s10 .wb{top:80.5%;height:19.5%}
html.band .ri-p{display:block}html.band .rail-ind{max-width:44vw;font-size:12px}
/* R6 A: tighter 1996 entry on phones, shorter ombre so the band reads as one soft blend, not empty space */
@media (max-width:700px){
.hero .pick{margin-top:14px}
html.band .hero,.hero{padding-bottom:2vh}
.hero{background:linear-gradient(transparent 0,transparent 18svh,var(--e96-desk) 18svh,var(--e96-desk) calc(100% - 9vh),var(--mix-hero-96) 100%)}
.b96{padding-top:3vh!important;background:linear-gradient(var(--mix-hero-96) 0,var(--e96-bg) 9vh,var(--e96-bg) calc(100% - 18vh),var(--mix-96-03) 100%)}
}
/* R6 B: no sync balloon, so the 2003 stage runs straight into the four headaches */
@media (max-width:700px){
.b03{min-height:auto!important;padding-bottom:3vh!important}
.b03g{padding-top:1vh!important}
}
.b03{min-height:auto}
@media (max-width:700px){.s03{margin-bottom:8px!important}.b03g .pains{margin-top:0!important}}
/* R6 C+D: the 01/02/03 cards are full bleed (no plum frame), each card fades in from transparent so it
   blends over the one below, pink ombres into peach, peach into plum, plum back into ivory */
.seq-sec{padding:0!important;background:var(--s-ivory)}
.sq{border-radius:0;box-shadow:none;padding-bottom:14svh}
.sq1{background:linear-gradient(180deg,rgba(253,231,234,0) 0,var(--s-blush-soft) 9svh,var(--s-blush-soft) calc(100% - 13svh),var(--s-peach) 100%)}
.sq2{background:linear-gradient(180deg,rgba(252,221,199,0) 0,var(--s-peach) 9svh,var(--s-peach) calc(100% - 15svh),var(--s-blush) calc(100% - 6svh),var(--s-plum-2) 100%)}
.sq3{background:linear-gradient(180deg,rgba(122,61,104,0) 0,var(--s-plum-2) 9svh,var(--s-plum) 40%,var(--s-plum) calc(100% - 22svh),var(--s-plum-2) calc(100% - 13svh),var(--s-blush) calc(100% - 5svh),var(--s-ivory) 100%)}
.sq-n{line-height:1.7;margin-bottom:10px}
.sq-n span{line-height:1}
@media (max-width:900px){
.sq{min-height:auto;padding-top:calc(var(--bar) + 7svh);align-items:flex-start}
}
/* R6 C: AI cards sit low in the pinned frame and THE OLD WAY follows right after, no ivory void */
@media (max-width:700px){
.cv-s4{justify-content:flex-end;padding-bottom:5svh}
.ba-sec{padding-top:0!important;padding-bottom:0!important}
}
/* R6 D: the old-to-new wipe is a soft plum ombre with feathered edges, not a hard block */
.ba-wipe{inset:-14svh -6vw;background:linear-gradient(180deg,rgba(251,246,238,0) 0,var(--s-blush-soft) 8%,var(--s-blush) 18%,var(--s-plum-2) 32%,var(--s-plum) 44%,var(--s-plum) 56%,var(--s-plum-2) 68%,var(--s-blush) 82%,var(--s-blush-soft) 92%,rgba(251,246,238,0) 100%)}
@media (max-width:700px){.cv-s4{padding-bottom:11svh}}
html.band .rail-ind{max-width:31vw;font-size:10.5px;letter-spacing:.02em;line-height:1.3}
@media (max-width:380px){html.band .rail-ind{max-width:29vw;font-size:10px}}
.dv-floppy{container-type:inline-size}.dv-floppy .lb{font-size:12.5cqw}.dv-floppy .lb small{font-size:.48em}
/* R6 D: blush resolves into the plum footer through an ombre, no hard line */
.site-foot{padding-top:calc(clamp(56px,10vh,100px) + 16vh);background:linear-gradient(180deg,var(--s-blush) 0,var(--s-rose) 5vh,var(--s-plum-2) 10vh,var(--s-plum) 14vh,var(--s-plum-deep) 20vh,var(--s-plum-deep) 100%)}
/* R6 E: long industry names (Home services company, Interior design studio) never clip in the big pickers */
.ipick.big .ip-v{white-space:normal;line-height:1.15;padding:8px 0;overflow:visible}
@media (max-width:700px){.hero-in{grid-template-columns:minmax(0,1fr)!important}.ipick.big{padding:0 40px 0 18px}.ipick.big::after{right:18px}}
/* R6 F: pager and dial-up screens fit their glass on every size */
.pgr{container-type:inline-size}
.pgr .pg-lcd{container-type:inline-size;font-size:9.5cqw;line-height:1.02;white-space:normal;justify-content:center;text-align:center;padding:0 3cqw}
.c95 p:first-of-type{padding-right:9cqw}
/* R6 C/D: on phones and tablets the Today cards flow (no pin), each one starting in the colour the last one ended in, so there is no empty ivory under a pinned card and no hard line */
@media (max-width:900px){
.sq{position:relative!important;top:auto!important}
.sq1{background:linear-gradient(180deg,var(--s-ivory) 0,var(--s-blush-soft) 12svh,var(--s-blush-soft) calc(100% - 13svh),var(--s-peach) 100%)}
.sq2{background:linear-gradient(180deg,var(--s-peach) 0,var(--s-peach) calc(100% - 15svh),var(--s-blush) calc(100% - 6svh),var(--s-plum-2) 100%)}
.sq3{background:linear-gradient(180deg,var(--s-plum-2) 0,var(--s-plum) 30%,var(--s-plum) calc(100% - 22svh),var(--s-plum-2) calc(100% - 13svh),var(--s-blush) calc(100% - 5svh),var(--s-ivory) 100%)}
.sq2,.sq3{padding-top:9svh}
}
/* R6 D: close the hairline seam where the CRT zoom hands off to the 1996 intro */
.crt-stick{box-shadow:0 3px 0 var(--e96-desk)}
/* R7: when the year bar is showing, the header above it is solid, so nothing ghosts through behind it */
html.band:not([data-theme="crt"]):not(.pin-on) .site-bar{background:var(--t-bg,var(--s-ivory));backdrop-filter:none;-webkit-backdrop-filter:none}
/* R7: normal rhythm on phones and portrait tablets. Sections size to their content; blends stay soft but short */
@media (max-width:900px),(orientation:portrait) and (max-width:1100px){
.hero,.b96,.b10,.now,.fin,.site-foot,.seq-sec,.ba-sec{min-height:auto!important}
.b96{padding-bottom:5svh!important}
.b03{padding-top:6svh!important}
.b03g{padding-bottom:5svh!important}
.b10{padding-top:6svh!important;padding-bottom:5svh!important}
.now,.fin{padding-top:6svh!important;padding-bottom:6svh!important}
.stage{margin-top:4vh;margin-bottom:3vh}
.stage+.pains{margin-top:1.5vh}
.sq{padding-bottom:8svh}
.sq2,.sq3{padding-top:6svh}
.hero{padding-bottom:3vh!important}
}
/* R7: AI cards frame is optically centred and fills the frame, no empty band above the headline */
@media (max-width:700px){
.cv-s4{justify-content:center!important;padding:2svh 6vw 7svh!important;gap:2.8svh}
.cv-s4 .cv-h4{font-size:clamp(50px,15vw,72px)}
.cv-s4 .ai{gap:12px}
.cv-s4 .aic{font-size:16px;padding:14px 16px}
}
@media (min-width:701px) and (max-width:1100px) and (orientation:portrait){
.cv-s4{justify-content:center;padding:3svh 7vw 7svh;gap:3.2svh}
.cv-s4 .cv-h4{font-size:clamp(90px,15vw,150px)}
.cv-s4 .cv-b4{font-size:22px;max-width:34em}
.cv-s4 .ai{max-width:none;gap:16px}
.cv-s4 .aic{font-size:22px;padding:22px 26px;max-width:88%}
}
/* R7: closing collect scene, no dead space under the orb on phones and tablets */
@media (max-width:900px),(orientation:portrait) and (max-width:1100px){
.fin .collect{aspect-ratio:1.6;margin-bottom:0}
.s03{margin-bottom:8px!important}
}

/* ===== Round 8: first screen value line, hero actions, mid story CTAs, look-alike rework ===== */
.so-t{background:linear-gradient(90deg,var(--s-plum),var(--s-plum-2))}
.im-t{background:linear-gradient(90deg,var(--s-plum),var(--s-plum-2))}
.xi-st{border-radius:50%;background:radial-gradient(circle,var(--e10-green,#4CAF50) 0 34%,transparent 37%),radial-gradient(circle,transparent 0 52%,var(--s-plum) 55% 68%,transparent 71%)}
.hx-acts{position:static;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 18px;margin-top:2svh;opacity:0;animation:hxaIn .8s ease .9s both}
@keyframes hxaIn{from{opacity:0}to{opacity:1}}
.hx-q{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 24px;border-radius:var(--r-pill);background:var(--s-peach);color:var(--s-plum);font:600 16px/1 var(--f-sans);text-decoration:none;box-shadow:0 8px 24px rgba(46,16,40,.35);transition:transform .3s var(--ease-punch)}
.hx-q:hover{transform:translateY(-2px)}
.hx-q i{font-style:normal;transition:transform .3s var(--ease-punch)}.hx-q:hover i{transform:translateX(4px)}
.hx-skip{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;color:var(--s-ivory);font:500 14px/1 var(--f-sans);text-decoration:underline;text-decoration-color:var(--s-rose);text-underline-offset:5px;text-decoration-thickness:2px}
.hx-sub{color:var(--s-ivory);opacity:1}
@media (max-width:700px){.hx-q{min-height:48px;padding:0 22px;font-size:15.5px}.hx-acts{gap:6px 14px;margin-top:1.6svh}}
@media (orientation:landscape) and (max-height:520px){.hx-acts{margin-top:8px}}
@media (prefers-reduced-motion:reduce){.hx-acts{animation:none!important;opacity:1}}
html[data-theme="crt"] .hx-acts,html.crt-zoom .hx-acts{pointer-events:auto}
.mid-cta{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 22px;margin:clamp(26px,5vh,56px) auto 0;padding:16px 22px;max-width:760px;border-radius:22px;background:rgba(251,246,238,.92);color:var(--s-plum);box-shadow:0 10px 30px rgba(46,16,40,.18);text-align:center}
.mid-cta p{margin:0;font:400 clamp(20px,2vw,26px)/1.2 var(--f-serif)}
.mid-cta p b{font-weight:400;font-style:italic}
.mid-cta .mc-q{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 20px;border-radius:var(--r-pill);background:var(--s-plum);color:var(--s-ivory);font:600 15px/1 var(--f-sans);text-decoration:none}
.mid-cta .mc-s{color:var(--s-plum);font:500 14px/1 var(--f-sans);text-decoration:underline;text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center}
html.foot-in .rail{opacity:0!important;pointer-events:none}
.hx-q,.hx-skip{position:relative;z-index:4}
@media (max-width:560px){.story-bar .q-pill{background:var(--s-blush);color:var(--s-plum);box-shadow:0 4px 12px rgba(46,16,40,.25)}.story-bar .q-pill i{background:var(--s-plum);box-shadow:none}}

/* R8 perf: headline waits for its font so it never reflows on screen */
html:not(.hx-ok) .hx-big{visibility:hidden}html:not(.hx-ok) .hx-big .hx-w{animation-play-state:paused}
.hx-big .hx-w+.hx-w{margin-left:.24em}
@media (min-width:901px){.hx-sub{max-width:60ch}}
.tk-l p span{opacity:.85}.tk-l li::before{opacity:.8}
/* R10: Today panels seam. The panels now use their own "sq-on" reveal class (the old "in" class also matched .blk>.in,
   which unstuck the panels and cut them to 820px, so the ivory page showed through as a hard line).
   On desktop each stacking panel is opaque and carries a feathered lead-in above its top edge, so whatever it slides over
   melts into it at every scroll position. */
.sq::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:14svh;pointer-events:none}
@media (min-width:901px){
.sq1{background:linear-gradient(180deg,var(--s-ivory) 0,var(--s-blush-soft) 9svh,var(--s-blush-soft) calc(100% - 13svh),var(--s-peach) 100%)}
.sq2{background:linear-gradient(180deg,var(--s-peach) 0,var(--s-peach) calc(100% - 15svh),var(--s-blush) calc(100% - 6svh),var(--s-plum-2) 100%)}
.sq3{background:linear-gradient(180deg,var(--s-plum-2) 0,var(--s-plum) 30%,var(--s-plum) calc(100% - 22svh),var(--s-plum-2) calc(100% - 13svh),var(--s-blush) calc(100% - 5svh),var(--s-ivory) 100%)}
.sq2::before{background:linear-gradient(180deg,rgba(252,221,199,0) 0,rgba(252,221,199,.55) 45%,var(--s-peach) 100%)}
.sq3::before{background:linear-gradient(180deg,rgba(122,61,104,0) 0,rgba(122,61,104,.45) 40%,rgba(122,61,104,.85) 75%,var(--s-plum-2) 100%)}
}

/* Hero: Book a free fit call next to Get a quote (kept from Round 10) */
.hx-bk{position:relative;z-index:4;display:inline-flex;align-items:center;gap:9px;min-height:50px;padding:0 22px;border-radius:var(--r-pill);border:1.5px solid rgba(247,207,212,.7);background:rgba(46,16,40,.35);color:var(--s-ivory);font:600 16px/1 var(--f-sans);text-decoration:none;transition:transform .3s var(--ease-punch),background .3s}
.hx-bk:hover{transform:translateY(-2px);background:rgba(247,207,212,.16)}
.hx-bk i{font-style:normal;color:var(--s-blush)}
@media (max-width:700px){
  .hx-acts{gap:10px 10px}
  .hx-q,.hx-bk{min-height:48px;padding:0 17px;font-size:15px}
  .hx-bk{gap:7px}
  .hx-acts .snd{position:static;transform:none;min-height:44px}
  .crt-stick{padding-bottom:5svh}
}
@media (max-width:360px){.hx-q,.hx-bk{padding:0 13px;font-size:14px}}

/* R11 short and mobile screens (Brooke, Nov 3 2026): the computer keeps a real size and the New message window sits beside it, never on the glass */
@media (max-width:700px){
  .crt{flex-direction:row;justify-content:center;align-items:center;gap:8px}
  .crt-body.dv{flex:none;width:min(calc(100cqw - 188px),89.6cqh)}
  .im{position:relative;right:auto;bottom:auto;flex:none;width:180px;align-self:center;margin-top:12cqh;transform-origin:0 100%}
}
@media (max-width:360px){.crt-body.dv{width:min(calc(100cqw - 168px),89.6cqh)}.im{width:160px}}
@media (max-width:700px) and (max-height:819px){
  .crt-stick{padding-top:calc(var(--bar) + 1.6svh);padding-bottom:3svh}
  .crt{margin-top:1svh}
  .hx-sub{font-size:13.5px;max-width:none;margin-top:.8svh}
  .hx-acts{margin-top:1.2svh;gap:6px 10px}
}
.snd{display:none!important}
/* returning visitors: the floating Replay button hides while the hero is on screen, so it never sits on top of Skip the story */
html[data-theme="crt"] .replay.show{opacity:0;pointer-events:none}