/* The intro page's hero demo (.demo): the still look of the TV, the phone, the four TVs and the chapter buttons. What moves,
   and when, is demo.js (GSAP); the page's other stories (stories.css) reuse its TV and phone (.dscr, .dcln, .dyt, .dfoc,
   .dfg, .dchap). Where GSAP moves a pseudo-element it moves a variable instead: --p (a bar's fill, 0 to 1), --o (a
   stroke's dash offset), --ty (a rise, in cqw), --x / --y (the finger, in %); the three counters are integers, so GSAP
   rounds them. Each rule here holds the state at second 0 of the loop. */
@property --dm{syntax:"<integer>";inherits:false;initial-value:312}
@property --dn{syntax:"<integer>";inherits:false;initial-value:0}
@property --ds{syntax:"<integer>";inherits:false;initial-value:52}
.demo{max-width:1000px;margin:44px auto 0}
.dstage{position:relative;aspect-ratio:16/10}
.dtvb{position:absolute;left:0;top:0;width:73%;container-type:inline-size}
.dstage .dph{position:absolute;right:0;bottom:0;width:22%;border-radius:24px;padding:5px}
.dscr{position:relative;overflow:hidden;container-type:inline-size;background:#000;border-radius:6px;aspect-ratio:16/9;font-family:"Be Vietnam Pro",system-ui,sans-serif;line-height:1.3}
.dph .dscr{aspect-ratio:9/19.5;border-radius:19px;background:#0d1119;color:#e9edf5;font-size:5cqw}
.dv{position:absolute;inset:0;container-type:inline-size}
.dL{position:absolute;inset:0;opacity:0}
.dq1{opacity:1}

/* ① the light home screen Optimize TV swaps in; also grandma's TV in ② and the kids' TV in ③ */
.dcln{background:radial-gradient(120% 90% at 18% 0,#173a55,#0b1322 58%,#070a10);color:#e9edf5}
.dcln .ck{position:absolute;right:5cqw;top:3.5cqw;font-size:4.4cqw;font-weight:300;display:grid}
.dcln .ck>span{grid-area:1/1}
.dcln .ck .t2{opacity:0}
.dcln .lb{position:absolute;left:6cqw;top:24.4cqw;font-size:2.1cqw;color:#9fb0c8;font-weight:600}
.dcln .lb.l2{top:40.2cqw}
.drw{position:absolute;left:6cqw;right:6cqw;top:28.5cqw;display:grid;grid-template-columns:repeat(5,1fr);gap:2.4cqw}
.drw>span{height:8.82cqw;border-radius:1.4cqw;display:grid;place-items:center;font-weight:800;font-size:3.2cqw;color:#fff;background:#2a3145}
.drw .y{background:#f00}.drw .y::after{content:"";width:3.4cqw;height:3.4cqw;background:#fff;clip-path:polygon(22% 8%,92% 50%,22% 92%)}
.drw .n{background:#111;color:#e50914;font-size:5cqw}.drw .s{background:#1ed760;color:#06140b}.drw .p{background:#00a8e1;font-size:2.4cqw}
.dcln .rw2{position:absolute;left:6cqw;right:6cqw;top:43.8cqw;display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw}
.dcln .rw2 i,.dblt .sg i,.dyt .ls i{display:block;border-radius:1.2cqw;background:linear-gradient(135deg,var(--a),var(--b))}
.dcln .rw2 i{height:9cqw}

/* ① the stock home screen: ads, suggestions, a spinner */
.dblt{background:#0b0e15;color:#e9edf5}
.dblt .hb{position:absolute;left:4cqw;top:2.6cqw;display:flex;gap:2.6cqw;align-items:center;font-size:2.1cqw;color:#9aa4b8}
.dblt .hb b{background:#e9edf5;color:#0a0e17;padding:.5cqw 1.8cqw;border-radius:9cqw}
.dblt .ad{position:absolute;left:4cqw;right:4cqw;top:8cqw;height:19cqw;border-radius:1.6cqw;background:linear-gradient(110deg,#4a1d6b,#c2185b 50%,#ff8f00);padding:4cqw}
.dblt .ad em{position:absolute;right:2cqw;top:2cqw;font-style:normal;font-size:1.7cqw;font-weight:700;background:rgba(0,0,0,.55);padding:.4cqw 1.2cqw;border-radius:.6cqw}
.dblt .ad i{display:block;height:2.6cqw;width:34cqw;border-radius:1cqw;background:rgba(255,255,255,.9)}
.dblt .ad i+i{height:3.4cqw;width:14cqw;margin-top:3.4cqw;border-radius:9cqw}
.dblt .lb{position:absolute;left:4cqw;top:29.4cqw;font-size:2cqw;color:#9aa4b8}
.dblt .lb.l2{top:43.2cqw}
.dblt .sg{position:absolute;left:4cqw;right:4cqw;top:33cqw;display:grid;grid-template-columns:repeat(6,1fr);gap:1.6cqw}
.dblt .sg i{height:7.9cqw}
.dblt .drw{left:4cqw;right:4cqw;top:46.6cqw;gap:1.6cqw;grid-template-columns:repeat(6,1fr)}
.dblt .drw>span{height:7.9cqw}
.dlag{position:absolute;left:50%;top:44%;width:8cqw;height:8cqw;margin:-4cqw;border-radius:50%;background:rgba(0,0,0,.6)}
.dlag::after{content:"";position:absolute;inset:1.6cqw;border-radius:50%;border:.6cqw solid rgba(255,255,255,.25);border-top-color:#fff;animation:dspin .9s linear infinite}
@keyframes dspin{to{transform:rotate(1turn)}}

/* YouTube: opened by grandma in ②, closed by the limit in ③ */
.dyt{background:#0f0f0f;color:#fff;opacity:0}
.dyt .lg{position:absolute;left:4cqw;top:3cqw;display:flex;align-items:center;gap:1cqw;font-weight:800;font-size:2.6cqw;letter-spacing:-.04em}
.dyt .lg::before{content:"";width:4.4cqw;height:3.1cqw;border-radius:.9cqw;background:#f00 linear-gradient(#fff,#fff) center/1.3cqw 1.4cqw no-repeat}
.dyt .pl{position:absolute;left:4cqw;top:9cqw;width:58cqw;aspect-ratio:16/9;border-radius:1.4cqw;background:linear-gradient(135deg,#1b3a5c,#5b2c6f 55%,#d9653b);overflow:hidden}
.dyt .pl::after{content:"";position:absolute;left:0;bottom:0;height:.8cqw;width:100%;background:#f00;transform-origin:left;transform:scaleX(var(--p,.04))}
.dyt .ls{position:absolute;left:65cqw;right:4cqw;top:9cqw;display:grid;gap:1.6cqw}
.dyt .ls i{height:8cqw}

/* ② the drawing, and grandma's focus on the YouTube tile */
.ddraw{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ddraw path{fill:none;stroke:#ffd23f;stroke-width:.9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100 100;stroke-dashoffset:var(--o,100);opacity:0}
.dfoc{position:absolute;left:6cqw;top:28.5cqw;width:15.68cqw;height:8.82cqw;border-radius:1.4cqw;box-shadow:0 0 0 .55cqw #fff,0 1cqw 3cqw rgba(0,0,0,.6);opacity:0}

/* ③ the limit counting on the TV, its notice, bedtime, standby */
.dlim{position:absolute;right:3cqw;top:3cqw;transform:translateY(calc(var(--ty,-2)*1cqw));padding:1cqw 2.2cqw;border-radius:9cqw;background:rgba(0,0,0,.72);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:2.2cqw;font-weight:700;opacity:0}
.dlim b{display:inline-grid;font-variant-numeric:tabular-nums;font-family:"JetBrains Mono",ui-monospace,monospace}
.dlim b>span{grid-area:1/1}
.dlim .cn{counter-reset:ds var(--ds)}
.dlim .cn::after{content:"59:" counter(ds,decimal-leading-zero)}
.dlim .full{color:#ff6b6b;opacity:0}
.dwarn{position:absolute;right:4cqw;bottom:4cqw;width:40cqw;padding:2cqw 2.4cqw;border-radius:1.6cqw;background:rgba(22,27,40,.97);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:2.1cqw;opacity:0}
.dwarn b{display:block;font-size:2.6cqw}.dwarn small{color:#aab3c5}
.dwarn i{display:block;height:.7cqw;margin-top:1.4cqw;border-radius:1cqw;background:#5b8cff;transform-origin:left;transform:scaleX(var(--p,1))}
.dff{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);padding:1.4cqw 3.2cqw;border-radius:9cqw;background:rgba(10,13,20,.9);border:1px solid rgba(255,255,255,.18);color:#fff;font-weight:700;font-size:3cqw;white-space:nowrap;opacity:0}
.doff{position:absolute;inset:0;background:#000;opacity:0}

/* ④ four TVs where the one was */
.dwall{position:absolute;inset:0;container-type:inline-size;display:grid;grid-template-columns:repeat(2,38cqw);justify-content:center;align-content:center;gap:1.4cqw 4cqw;opacity:0;pointer-events:none}
.mtv{text-align:center;font-size:2.2cqw;font-weight:700;color:var(--muted)}
.mtv>div{position:relative;padding:.8cqw;border-radius:1.4cqw;background:linear-gradient(#20263a,#151a28);box-shadow:0 0 0 1px rgba(255,255,255,.07) inset,0 2cqw 4cqw -1cqw rgba(0,0,0,.7);margin-bottom:.8cqw}
.mtv .ms{position:relative;aspect-ratio:16/9;border-radius:.6cqw;overflow:hidden;background:radial-gradient(120% 90% at 18% 0,#173a55,#0b1322 58%,#070a10)}
.mtv .t{position:absolute;left:2.6cqw;right:2.6cqw;top:9cqw;display:grid;grid-template-columns:repeat(5,1fr);gap:1cqw}
.mtv .t i{height:3.6cqw;border-radius:.5cqw;background:var(--c)}
.mtv .t i:last-child{opacity:0;background:linear-gradient(135deg,#7c4dff,#ff4fa3);box-shadow:0 0 1.6cqw rgba(160,90,255,.7)}
.mtv .pg{position:absolute;left:4cqw;right:4cqw;bottom:3cqw;height:1cqw;border-radius:1cqw;background:rgba(255,255,255,.15);overflow:hidden;opacity:0}
.mtv .pg::after{content:"";position:absolute;inset:0;background:#5b8cff;transform-origin:left;transform:scaleX(var(--p,0))}
.mtv .ok{position:absolute;left:50%;top:50%;width:8cqw;height:8cqw;margin:-4cqw;border-radius:50%;background:#3ddc84;color:#06140b;display:grid;place-items:center;font-size:4.4cqw;font-weight:900;opacity:0}
.mtv .bo{position:absolute;inset:0;background:#000;opacity:0}
.mtv .bo::after{content:"";position:absolute;left:50%;top:50%;width:5cqw;height:5cqw;margin:-2.5cqw;border-radius:50%;border:.5cqw solid rgba(255,255,255,.2);border-top-color:#fff;animation:dspin .9s linear infinite}

/* the phone */
.dst{position:absolute;left:7cqw;right:7cqw;top:3cqw;display:flex;justify-content:space-between;font-size:3.6cqw;font-weight:600;color:#c9d1e0;z-index:2}
.dhd{position:absolute;left:6cqw;right:6cqw;top:12cqw;font-weight:800;font-size:6.2cqw;display:flex;align-items:center;gap:2.4cqw;white-space:nowrap}
.dhd .dot{width:2.4cqw;height:2.4cqw;border-radius:50%;background:#3ddc84}
.dcard{position:absolute;left:5cqw;right:5cqw;border-radius:4cqw;background:#161c29;border:1px solid #232a3a;padding:4cqw}

.dp1 .ram{top:26cqw}
.dp1 .ram small{display:block;font-size:3.8cqw;color:#9aa4b8}
.dp1 .ram b{color:#ff6b6b;display:block;font-size:8cqw;font-weight:800;margin:.6cqw 0 2.4cqw;font-variant-numeric:tabular-nums;counter-reset:dm var(--dm)}
.dp1 .ram b::after{content:counter(dm) " MB"}
.dp1 .ram em{display:block;height:2cqw;border-radius:2cqw;background:#232a3a;overflow:hidden}
.dp1 .ram em{color:#ff6b6b}
.dp1 .ram em::after{content:"";display:block;height:100%;transform-origin:left;background:currentColor;transform:scaleX(var(--p,.16))}
.dp1 .go{position:absolute;left:5cqw;right:5cqw;top:60cqw;height:13cqw;border-radius:4cqw;background:#5b8cff;color:#06112b;font-weight:800;font-size:4.6cqw;display:grid;place-items:center}
.dp1 .go>span{grid-area:1/1;opacity:0}
.dp1 .go .g1{opacity:1}
.dp1 .cl{position:absolute;left:7cqw;right:5cqw;display:flex;align-items:center;gap:3cqw;font-size:4cqw;opacity:0;transform:translateY(calc(var(--ty,3)*1cqw))}
.dp1 .c1{top:80cqw}.dp1 .c2{top:93cqw}.dp1 .c3{top:106cqw}
.dp1 .cl i{position:relative;flex:none;width:6cqw;height:6cqw}
.dp1 .cl u{position:absolute;inset:0}
.dp1 .cl s{position:absolute;inset:0;border-radius:50%;border:.7cqw solid #2f3850;border-top-color:#5b8cff;animation:dspin .8s linear infinite}
.dp1 .cl i::after{content:"✓";position:absolute;inset:0;border-radius:50%;background:#3ddc84;color:#06140b;display:grid;place-items:center;font-size:3.8cqw;font-weight:900;opacity:var(--o,0);transform:scale(var(--sc,.4))}
.dp1 .cl .dn{counter-reset:dn var(--dn)}
.dp1 .cl .dn::after{content:counter(dn)}
.dp1 .un{position:absolute;left:0;right:0;top:124cqw;text-align:center;font-size:4cqw;font-weight:700;color:#9fb0c8;opacity:0;transform:translateY(calc(var(--ty,3)*1cqw))}
.dp1 .un small{display:block;font-weight:500;font-size:3.4cqw;color:#6b7489;margin-top:1.4cqw}

.dp2 .ts{position:absolute;left:6cqw;top:22cqw;font-size:3.4cqw;color:#9fd0ff;padding:.6cqw 2.4cqw;border-radius:9cqw;background:#13243a;border:1px solid #1f3b5c}
.dp2 .mir{position:absolute;left:4cqw;right:4cqw;top:32cqw;aspect-ratio:16/9;border-radius:2cqw;overflow:hidden;background:#000;container-type:inline-size}
.dp2 .tb{position:absolute;left:4cqw;right:4cqw;top:89cqw;display:flex;gap:2.6cqw;align-items:center}
.dp2 .tb>span{padding:2cqw 3.4cqw;border-radius:9cqw;background:#1f2738;font-size:3.8cqw;font-weight:700;color:#c9d1e0;white-space:nowrap}
.dp2 .tb i{flex:none;width:5cqw;height:5cqw;border-radius:50%;background:var(--c)}
.dp2 .tb i:first-of-type{box-shadow:0 0 0 .8cqw #0d1119,0 0 0 1.3cqw #ffd23f}
.dp2 .tb .x{margin-left:auto}
.dp2 .btns{position:absolute;left:8cqw;right:8cqw;top:110cqw;display:grid;grid-template-columns:repeat(3,1fr);gap:5cqw}
.dp2 .btns i{aspect-ratio:1;border-radius:50%;background:#161c29;border:1px solid #232a3a;display:grid;place-items:center;font-style:normal;font-size:5.6cqw;color:#9aa4b8}

.dp3 .r1{top:26cqw}.dp3 .r2{top:50cqw}
.dp3 .dcard b{display:block;font-size:4.4cqw}
.dp3 .dcard small{display:block;font-size:3.6cqw;color:#9aa4b8;margin-top:1cqw}
.dp3 .lock{position:absolute;inset:0;background:#000;opacity:0;text-align:center;padding-top:44cqw;color:#2b3242}
.dp3 .lock b{display:block;font-size:17cqw;font-weight:200}
.dp3 .lock small{font-size:4cqw}

.dp4 .dhd .all{margin-left:auto;font-size:3.8cqw;font-weight:700;color:#5b8cff}
.dp4 .fr{position:absolute;left:5cqw;right:5cqw;height:15cqw;border-radius:3.4cqw;background:#161c29;border:1px solid #232a3a;display:flex;align-items:center;gap:3cqw;padding:0 3.4cqw}
.dp4 .f1{top:25cqw}.dp4 .f2{top:42cqw}.dp4 .f3{top:59cqw}.dp4 .f4{top:76cqw}
.dp4 .cb{flex:none;width:5.4cqw;height:5.4cqw;border-radius:1.2cqw;border:.5cqw solid #4a5470;display:grid;place-items:center;font-style:normal;font-size:3.4cqw;font-weight:900;color:transparent}
.dp4 .fr>div{flex:1;min-width:0}
.dp4 .fr b{display:block;font-size:4.1cqw;white-space:nowrap}
.dp4 .fr small{position:relative;display:block;height:1.35em;font-size:3.3cqw;color:#9aa4b8}
.dp4 .fr small>span{position:absolute;left:0;top:0;white-space:nowrap;opacity:0}
.dp4 .fr .sc,.dp4 .fr .sf{color:#3ddc84;font-weight:700}
.dp4 .fr em{position:absolute;right:3.4cqw;bottom:3.6cqw;width:20cqw;height:1.4cqw;border-radius:2cqw;background:#232a3a;overflow:hidden;opacity:0}
.dp4 .fr em::after{content:"";position:absolute;inset:0;background:#5b8cff;transform-origin:left;transform:scaleX(var(--p,0))}
.dp4 .act{position:absolute;left:5cqw;right:5cqw;top:98cqw;display:grid;grid-template-columns:1fr 1fr;gap:3cqw}
.dp4 .act>span{height:12cqw;border-radius:3.4cqw;display:flex;align-items:center;justify-content:center;gap:1.4cqw;font-size:3.7cqw;font-weight:800;background:#1f2738;color:#c9d1e0;white-space:nowrap}

/* the finger, one per chapter, pressing where the phone reacts */
.dfg{position:absolute;left:calc(var(--x,0)*1%);top:calc(var(--y,0)*1%);width:15cqw;aspect-ratio:1;margin:-7.5cqw 0 0 -7.5cqw;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.85) 0 30%,rgba(255,255,255,.35) 32% 60%,transparent 62%);opacity:0;z-index:3;pointer-events:none}

/* between the two: the phone's touches going to the TV */
.dbeam{position:absolute;left:73%;width:5%;top:44%;height:2px;opacity:0}
.dbeam i{position:absolute;top:-3px;right:0;width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 10px var(--blue);animation:dfly .7s linear infinite}
.dbeam i:nth-child(2){animation-delay:.23s}.dbeam i:nth-child(3){animation-delay:.46s}
@keyframes dfly{from{right:0;opacity:0}20%{opacity:1}to{right:100%;opacity:0}}

/* what is going on, under the TV */
.dcap{position:absolute;left:0;width:73%;top:77%;height:3.2em;font-weight:700;font-size:clamp(15px,1.9vw,20px);text-align:center}
.dcap>p{position:absolute;left:0;right:0;top:0;margin:0;opacity:0}

/* the chapters under it; a click starts that one */
.dchap{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:26px;padding:0}
.dchap button{appearance:none;background:none;border:0;margin:0;font:inherit;display:block;width:100%;cursor:pointer;padding:12px 4px 0;color:var(--dim);font-weight:700;font-size:15px;text-align:center}
.dchap button:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:6px}
.dchap b{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:6px;border-radius:50%;background:var(--card2);font-size:12px}
.dchap i{display:block;height:3px;margin-bottom:10px;border-radius:3px;background:var(--line);overflow:hidden}
.dchap i::after{content:"";display:block;height:100%;background:var(--blue);transform-origin:left;transform:scaleX(var(--p,0))}
@media (max-width:620px){
  .dstage{aspect-ratio:auto;display:flex;flex-direction:column;align-items:center}
  .dtvb{position:relative;width:100%}
  .dcap{position:relative;width:100%;top:auto;margin-top:38px;font-size:15px}
  .dstage .dph{position:relative;width:46%;margin-top:6px;border-radius:20px;padding:4px}
  .dbeam{display:none}
  .dchap{gap:6px}.dchap button{font-size:12.5px;padding-top:10px}.dchap b{display:none}
}
/* reduced motion: the timeline is held on a still (anim.js), the spinners and the flying dots stand too */
@media (prefers-reduced-motion:reduce){.demo *,.demo *::after{animation-play-state:paused !important}}