/* Jonathan's Family TV — the site wears the look. Tokens morph via registered properties. */
@font-face{font-family:'El Messiri';font-weight:500;font-display:swap;src:url(../assets/fonts/ElMessiri-500.ttf) format('truetype')}
@font-face{font-family:'El Messiri';font-weight:700;font-display:swap;src:url(../assets/fonts/ElMessiri-700.ttf) format('truetype')}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:400;font-display:swap;src:url(../assets/fonts/IBMPlexSansArabic-400.ttf) format('truetype')}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:500;font-display:swap;src:url(../assets/fonts/IBMPlexSansArabic-500.ttf) format('truetype')}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:600;font-display:swap;src:url(../assets/fonts/IBMPlexSansArabic-600.ttf) format('truetype')}
@property --bg{syntax:'<color>';inherits:true;initial-value:#222}
@property --bg2{syntax:'<color>';inherits:true;initial-value:#333}
@property --fg{syntax:'<color>';inherits:true;initial-value:#fff}
@property --mut{syntax:'<color>';inherits:true;initial-value:#aaa}
@property --line{syntax:'<color>';inherits:true;initial-value:#fff3}
@property --acc{syntax:'<color>';inherits:true;initial-value:#fb0}
@property --acc2{syntax:'<color>';inherits:true;initial-value:#0bf}
@property --onacc{syntax:'<color>';inherits:true;initial-value:#111}
:root{--disp:'El Messiri','IBM Plex Sans Arabic',serif;--body:'IBM Plex Sans Arabic','El Messiri',system-ui,sans-serif;--ease:cubic-bezier(.2,.8,.2,1);--r:22px;
 transition:--bg .9s,--bg2 .9s,--fg .9s,--mut .9s,--line .9s,--acc .9s,--acc2 .9s,--onacc .9s}
[data-look=pearl]{--bg:oklch(.93 .04 300);--bg2:oklch(.985 .01 300);--fg:oklch(.27 .04 280);--mut:oklch(.45 .04 285);--line:oklch(.3 .04 280/.2);--acc:oklch(.5 .17 280);--acc2:oklch(.7 .12 230);--onacc:oklch(.98 .01 300)}
[data-look=aurora]{--bg:oklch(.19 .05 265);--bg2:oklch(.26 .05 255);--fg:oklch(.96 .01 250);--mut:oklch(.79 .03 250);--line:oklch(1 0 0/.16);--acc:oklch(.86 .15 170);--acc2:oklch(.7 .13 300);--onacc:oklch(.2 .05 200)}
[data-look=neon]{--bg:oklch(.13 .04 305);--bg2:oklch(.2 .07 310);--fg:oklch(.96 .02 330);--mut:oklch(.79 .05 320);--line:oklch(1 0 0/.16);--acc:oklch(.74 .25 335);--acc2:oklch(.83 .13 200);--onacc:oklch(.15 .05 320)}
[data-look=sakura]{--bg:oklch(.95 .03 355);--bg2:oklch(.99 .01 355);--fg:oklch(.28 .04 350);--mut:oklch(.46 .05 350);--line:oklch(.3 .04 350/.2);--acc:oklch(.5 .17 355);--acc2:oklch(.72 .12 330);--onacc:oklch(.98 .01 355)}
[data-look=desert]{--bg:oklch(.9 .045 85);--bg2:oklch(.96 .025 85);--fg:oklch(.27 .04 60);--mut:oklch(.43 .05 65);--line:oklch(.3 .04 60/.22);--acc:oklch(.48 .13 55);--acc2:oklch(.68 .13 75);--onacc:oklch(.98 .01 85)}
[data-look=ocean]{--bg:oklch(.25 .05 210);--bg2:oklch(.32 .06 220);--fg:oklch(.96 .02 195);--mut:oklch(.83 .04 205);--line:oklch(1 0 0/.18);--acc:oklch(.85 .12 185);--acc2:oklch(.7 .12 240);--onacc:oklch(.2 .05 210)}
[data-look=steel]{--bg:oklch(.93 .004 260);--bg2:oklch(.985 .003 260);--fg:oklch(.22 .02 265);--mut:oklch(.45 .02 265);--line:oklch(.25 .02 265/.2);--acc:oklch(.42 .07 255);--acc2:oklch(.62 .04 260);--onacc:oklch(.98 0 0)}
[data-look=ramadan]{--bg:oklch(.18 .07 280);--bg2:oklch(.25 .08 280);--fg:oklch(.96 .02 90);--mut:oklch(.8 .05 285);--line:oklch(1 0 0/.16);--acc:oklch(.85 .13 85);--acc2:oklch(.7 .14 300);--onacc:oklch(.2 .05 70)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font:400 clamp(16px,1.05vw + 11px,18px)/1.8 var(--body);overflow-x:hidden;min-height:100vh}
img,canvas,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px;border-radius:8px}
html[data-l=ar] .e,html[data-l=en] .a{display:none!important}
html[data-l=en] body{line-height:1.65}
.wrap{width:min(1240px,100% - clamp(36px,8vw,128px));margin-inline:auto}
h1,h2,h3,.disp{font-family:var(--disp);font-weight:700;line-height:1.3}
.num{font-feature-settings:'tnum';font-variant-numeric:tabular-nums}
/* ambient layer: one calm signature per look (all static or very slow) */
.amb{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.amb::before{content:"";position:absolute;inset:-10%;background:radial-gradient(60% 50% at 80% 0%,color-mix(in oklch,var(--acc) 14%,transparent),transparent 70%),radial-gradient(50% 45% at 5% 100%,color-mix(in oklch,var(--acc2) 14%,transparent),transparent 70%)}
.amb i{position:absolute;inset:0;opacity:0;transition:opacity .9s}
[data-look=pearl] .s-pearl,[data-look=aurora] .s-aurora,[data-look=neon] .s-neon,[data-look=sakura] .s-sakura,[data-look=desert] .s-desert,[data-look=ocean] .s-ocean,[data-look=steel] .s-steel,[data-look=ramadan] .s-ramadan{opacity:1}
.s-aurora{background:radial-gradient(130% 38% at 70% 42%,oklch(.55 .12 170/.35),transparent 70%),radial-gradient(1.5px 1.5px at 12% 22%,#fff,transparent),radial-gradient(1.5px 1.5px at 38% 70%,#fff,transparent),radial-gradient(2px 2px at 64% 14%,#fff,transparent),radial-gradient(1.5px 1.5px at 86% 58%,#fff,transparent),radial-gradient(1px 1px at 52% 40%,#fff,transparent),radial-gradient(1.5px 1.5px at 24% 90%,#fff,transparent);animation:twink 8s ease-in-out infinite}
@keyframes twink{50%{filter:brightness(.6)}}
.s-pearl{background:radial-gradient(50% 42% at 8% 18%,oklch(.86 .08 225/.8),transparent),radial-gradient(46% 46% at 88% 82%,oklch(.84 .09 320/.8),transparent),radial-gradient(30% 30% at 60% 40%,oklch(.9 .06 340/.6),transparent)}
.s-neon::before{content:"";position:absolute;left:-50%;right:-50%;bottom:-8%;height:52%;background:repeating-linear-gradient(90deg,oklch(.7 .25 335/.7) 0 1px,transparent 1px 64px),repeating-linear-gradient(0deg,oklch(.7 .25 335/.7) 0 1px,transparent 1px 44px);transform:perspective(520px) rotateX(64deg);transform-origin:bottom;-webkit-mask:linear-gradient(0deg,#000,transparent 90%);mask:linear-gradient(0deg,#000,transparent 90%)}
.s-neon::after{content:"";position:absolute;left:50%;bottom:30%;width:min(34vw,360px);aspect-ratio:2/1;translate:-50% 0;border-radius:999px 999px 0 0;background:linear-gradient(oklch(.6 .22 310/.55),oklch(.5 .25 345/.35));-webkit-mask:linear-gradient(#000 60%,transparent);mask:linear-gradient(#000 60%,transparent)}
.s-sakura{background:radial-gradient(40% 40% at 20% 75%,oklch(.86 .1 355/.7),transparent),radial-gradient(30% 36% at 90% 20%,oklch(.9 .07 330/.7),transparent),radial-gradient(9px 5px at 14% 18%,oklch(.78 .12 355/.8),transparent),radial-gradient(8px 5px at 72% 38%,oklch(.78 .12 355/.8),transparent),radial-gradient(10px 6px at 46% 64%,oklch(.78 .12 355/.8),transparent),radial-gradient(8px 5px at 84% 86%,oklch(.78 .12 355/.8),transparent);animation:drift 40s ease-in-out infinite alternate}
@keyframes drift{to{background-position:30px 40px,0 0,0 0,0 0,0 0,0 0}}
.s-desert{background:linear-gradient(160deg,oklch(.93 .05 90/.6),transparent 60%),repeating-linear-gradient(60deg,oklch(.45 .08 70/.13) 0 1px,transparent 1px 110px),repeating-linear-gradient(-60deg,oklch(.45 .08 70/.13) 0 1px,transparent 1px 110px)}
.s-ocean{background:radial-gradient(circle at 16% 80%,transparent 8px,oklch(1 0 0/.22) 9px 10px,transparent 11px),radial-gradient(circle at 34% 55%,transparent 5px,oklch(1 0 0/.2) 6px 7px,transparent 8px),radial-gradient(circle at 72% 70%,transparent 12px,oklch(1 0 0/.18) 13px 14px,transparent 15px),radial-gradient(circle at 88% 30%,transparent 6px,oklch(1 0 0/.2) 7px 8px,transparent 9px),linear-gradient(0deg,oklch(.2 .06 225/.7),transparent 60%);animation:rise 50s linear infinite}
@keyframes rise{to{background-position:0 -80px,0 -80px,0 -80px,0 -80px,0 0}}
.s-steel{background:linear-gradient(90deg,transparent calc(66% - .5px),oklch(.3 .02 265/.28) calc(66% - .5px) calc(66% + .5px),transparent calc(66% + .5px)),linear-gradient(180deg,oklch(.97 .003 260),oklch(.9 .006 260))}
.s-ramadan::before{content:"";position:absolute;width:clamp(70px,9vw,120px);aspect-ratio:1;border-radius:50%;inset-block-start:9vh;inset-inline-end:8vw;box-shadow:calc(clamp(70px,9vw,120px)*-.2) calc(clamp(70px,9vw,120px)*.08) 0 0 var(--acc),0 0 60px 6px oklch(.85 .13 85/.25)}
.s-ramadan::after{content:"";position:absolute;inset:0;background:radial-gradient(7px 11px at 6% 5.5%,oklch(.85 .15 80),transparent),radial-gradient(7px 11px at 11% 7.5%,oklch(.85 .15 80),transparent),linear-gradient(90deg,transparent 5.8%,oklch(.85 .13 85/.5) 5.8% calc(5.8% + 1px),transparent calc(5.8% + 1px) 11%,oklch(.85 .13 85/.5) 11% calc(11% + 1px),transparent calc(11% + 1px)) 0 0/100% 5vh no-repeat,radial-gradient(1.5px 1.5px at 30% 20%,#fff,transparent),radial-gradient(1.5px 1.5px at 55% 60%,#fff,transparent),radial-gradient(2px 2px at 78% 40%,#fff,transparent),radial-gradient(1.5px 1.5px at 20% 80%,#fff,transparent);animation:twink 8s ease-in-out infinite}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;padding-block:14px}
.nav .bar{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 18px;padding-inline:18px 10px;border:1px solid var(--line);border-radius:999px;background:color-mix(in oklch,var(--bg) 78%,transparent);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;margin-inline-end:auto}
.brand b{font:700 1.35rem/1 var(--disp)}.brand small{font-size:.74rem;color:var(--mut);letter-spacing:.02em}
.menu{display:flex;gap:2px}
.menu a{padding:8px 13px;border-radius:999px;text-decoration:none;font-size:.9rem;font-weight:500;transition:background .25s}
.menu a:hover,.menu a.on{background:var(--fg);color:var(--bg)}
.chip-btn{min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:.9rem;transition:background .25s,border-color .25s}
.chip-btn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 0 var(--acc);animation:ping 2.4s infinite}
@keyframes ping{70%{box-shadow:0 0 0 9px transparent}}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);place-items:center}
.burger i,.burger i::before{display:block;width:18px;height:2px;background:currentColor;position:relative;border-radius:2px}.burger i::before{content:"";position:absolute;top:-6px}
.pop{position:absolute;inset-block-start:calc(100% + 8px);inset-inline-end:0;width:min(420px,100%);padding:12px;border:1px solid var(--line);border-radius:24px;background:color-mix(in oklch,var(--bg2) 94%,transparent);backdrop-filter:blur(18px);box-shadow:0 30px 80px #0006;display:none;grid-template-columns:1fr 1fr;gap:6px}
.pop.open{display:grid}.navin{position:relative}
.pop button{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;text-align:start;min-height:48px;font-size:.92rem;font-weight:500;transition:background .2s}
.pop button:hover{background:color-mix(in oklch,var(--fg) 12%,transparent)}.pop button[aria-pressed=true]{background:var(--acc);color:var(--onacc)}
.pop .sw{width:22px;height:22px;border-radius:7px;flex:none;border:1px solid var(--line)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;font-weight:600;border:1.5px solid var(--fg);transition:transform .3s var(--ease),background .25s,color .25s}
.btn:hover{transform:translateY(-3px)}
.btn.pri{background:var(--acc);border-color:var(--acc);color:var(--onacc)}
.btn.pri:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.btn.ghost:hover{background:var(--fg);color:var(--bg)}
.tl{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;border-bottom:2px solid var(--acc);padding-block:4px}
.tl:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
/* sections */
.sec{padding-block:clamp(76px,11vw,150px);position:relative}
.ch{display:inline-flex;align-items:center;gap:10px;font:500 .8rem/1 var(--disp);letter-spacing:.14em;color:var(--mut);padding:8px 14px;border:1px solid var(--line);border-radius:8px;margin-bottom:22px;direction:ltr}
.ch::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--acc);animation:blink 1.4s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
h2{font-size:clamp(2.1rem,5.2vw,4.2rem);max-width:17ch;text-wrap:balance}
html[data-l=en] h2{max-width:20ch}
.lead{font-size:clamp(1.05rem,1.4vw + .6rem,1.3rem);color:var(--mut);max-width:46ch;margin-top:20px;text-wrap:pretty}
.head{display:grid;gap:4px;margin-bottom:clamp(36px,5vw,64px)}
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--d,0)*90ms)}
.js .rv.in{opacity:1;transform:none}
.noanim .rv{opacity:1;transform:none;transition:none}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.6vw,32px);position:relative;overflow:hidden}
.card h3{font-size:1.45rem;margin-bottom:8px}
.card p{color:var(--mut);font-size:.96rem;line-height:1.75}
.tag{font-size:.74rem;font-weight:600;padding:3px 10px;border-radius:999px;border:1px solid var(--line);color:var(--mut)}
/* hero */
.hero{min-height:100svh;padding-block:clamp(110px,14vw,150px) 56px;display:grid;align-items:center}
.hero .grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);align-items:center}
.eyebrow{font-weight:600;font-size:.95rem;color:var(--acc);margin-bottom:18px}
h1{font-size:clamp(3rem,8.4vw,7rem);line-height:1.12;letter-spacing:0}
html[data-l=en] h1{font-size:clamp(2.8rem,7.4vw,6rem);line-height:1.05}
h1 em{font-style:normal;color:var(--acc)}
.cta{display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center;margin-top:34px}
.facts{display:flex;gap:clamp(18px,3vw,40px);margin-top:44px;padding-top:22px;border-top:1px solid var(--line)}
.facts b{font:700 clamp(1.8rem,3vw,2.6rem)/1 var(--disp);display:block;color:var(--fg)}.facts span{font-size:.85rem;color:var(--mut)}
.stage{position:relative;padding-top:calc(clamp(80px,9vw,112px) + 10px)}
.tv{position:relative;aspect-ratio:16/9;border-radius:clamp(14px,2vw,26px);border:clamp(7px,1vw,12px) solid oklch(.12 .01 260);background:#000;box-shadow:0 0 0 1.5px oklch(1 0 0/.14),0 40px 90px -20px color-mix(in oklch,var(--acc) 38%,#000),0 20px 40px #0007;transition:box-shadow .9s}
.tv::after{content:"";position:absolute;inset-inline:18%;bottom:-24px;height:14px;border-radius:0 0 10px 10px;background:oklch(.12 .01 260);transform:perspective(40px) rotateX(-20deg)}
.screen{position:absolute;inset:0;overflow:hidden;border-radius:clamp(6px,1vw,14px);animation:poweron 1.3s var(--ease) both}
@keyframes poweron{0%{clip-path:inset(49.5% 0 49.5% 0);filter:brightness(3)}40%{clip-path:inset(49.5% 0 49.5% 0);filter:brightness(3)}100%{clip-path:inset(0);filter:none}}
.screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .7s,transform 1.2s var(--ease);transform:scale(1.03)}
.screen img.on{opacity:1;transform:none}
.screen::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#0000 0 3px,#0000000d 3px 4px);pointer-events:none}
.osd{position:absolute;inset-block-start:14px;inset-inline-start:14px;z-index:3;padding:6px 12px;border-radius:8px;background:#000b;color:#fff;font:500 .82rem/1.2 var(--disp);display:flex;gap:10px;align-items:center;direction:ltr}
.osd b{color:oklch(.85 .17 140);letter-spacing:.1em}
.perch{position:absolute;pointer-events:none;width:clamp(96px,11vw,140px);height:clamp(80px,9vw,112px)}
.stage .perch{inset-block-start:0;inset-inline-start:6%}
.dial{display:grid;grid-template-columns:repeat(8,1fr);gap:clamp(4px,.8vw,10px);margin-top:44px}
.dial button{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;border:2px solid transparent;opacity:.62;transition:opacity .25s,transform .3s var(--ease),border-color .25s}
.dial button:hover{opacity:1;transform:translateY(-4px)}
.dial button[aria-pressed=true]{opacity:1;border-color:var(--acc);transform:translateY(-4px)}
.dial img{width:100%;height:100%;object-fit:cover}
.scroll-hint{margin-top:28px;font-size:.84rem;color:var(--mut);display:flex;gap:10px;align-items:center}
/* scenes */
.scn{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(24px,4vw,56px);align-items:start}
.frame{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#000;aspect-ratio:16/9;box-shadow:0 40px 80px -30px #000a;transform-style:preserve-3d;transition:transform .5s var(--ease)}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .5s}
.frame img.on{opacity:1}
.cap{margin-top:22px;min-height:7.5em}
.cap h3{font-size:clamp(1.6rem,2.6vw,2.2rem)}.cap p{color:var(--mut);margin-top:8px;max-width:52ch}
.slist{display:grid;gap:2px;counter-reset:s;list-style:none;padding:0}
.slist button{width:100%;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;text-align:start;min-height:56px;transition:background .25s,color .25s}
.slist button::before{counter-increment:s;content:counter(s,decimal);font:700 1.15rem var(--disp);color:var(--mut);text-align:center}
html[data-l=en] .slist button::before{content:counter(s,decimal-leading-zero)}
.slist button:hover{background:color-mix(in oklch,var(--fg) 10%,transparent)}
.slist button[aria-pressed=true]{background:var(--fg);color:var(--bg)}
.slist button[aria-pressed=true]::before{color:var(--acc2)}
.slist b{font:700 1.2rem/1.2 var(--disp);display:block}.slist small{display:block;font-size:.78rem;opacity:.7;line-height:1.3}
.slist .sw{width:34px;height:20px;border-radius:6px;border:1px solid var(--line)}
.classic{display:flex;align-items:center;gap:16px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line);font-size:.9rem;color:var(--mut)}
.classic img{width:92px;border-radius:8px;border:1px solid var(--line);aspect-ratio:16/9;object-fit:cover}
/* alive */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,20px)}
.b4{grid-column:span 4}.b5{grid-column:span 5}.b6{grid-column:span 6}.b7{grid-column:span 7}.b8{grid-column:span 8}.b12{grid-column:span 12}
.sky{position:relative;height:150px;border-radius:16px;overflow:hidden;margin-block:16px;background:linear-gradient(var(--s1,#1b2a52),var(--s2,#f08a4b));transition:background .3s}
.sky .sun{position:absolute;width:34px;height:34px;border-radius:50%;background:var(--sc,#ffd66b);box-shadow:0 0 36px 8px var(--sg,#ffb34744);translate:-50% 50%}
.sky::after{content:"";position:absolute;inset-inline:0;bottom:0;height:34%;background:linear-gradient(transparent,#0007),repeating-linear-gradient(90deg,#0004 0 8px,transparent 8px 14px)}
.clock{font:500 clamp(2.6rem,5vw,3.8rem)/1 var(--disp);direction:ltr;display:flex;gap:10px;align-items:baseline}.clock small{font-size:1rem;color:var(--mut)}
input[type=range]{width:100%;accent-color:var(--acc);height:44px;cursor:pointer;background:none}
.greet{font:700 1.4rem var(--disp);margin-top:6px}
.wx{display:flex;gap:10px;margin-top:16px}
.wx button{flex:1;min-height:76px;border:1px solid var(--line);border-radius:16px;display:grid;place-items:center;gap:2px;padding:8px;transition:background .25s,color .25s,transform .3s var(--ease)}
.wx button svg{width:34px;height:34px}.wx button span{font-size:.82rem}
.wx button:hover{background:color-mix(in oklch,var(--fg) 10%,transparent)}.wx button[aria-pressed=true]{background:var(--fg);color:var(--bg)}
.wxview{height:96px;border-radius:16px;margin-top:16px;position:relative;overflow:hidden;background:linear-gradient(#5aa7e8,#bfe3ff);transition:background .6s}
.wxview[data-w=cloud]{background:linear-gradient(#7a8798,#b9c2cd)}.wxview[data-w=rain]{background:linear-gradient(#3d4a5e,#7b8aa0)}
.wxview .sun2{position:absolute;inset-block-start:16px;inset-inline-end:26px;width:44px;height:44px;border-radius:50%;background:#ffd66b;box-shadow:0 0 30px 10px #ffd66b88;transition:opacity .6s,transform .6s}
.wxview[data-w=cloud] .sun2{opacity:.35;transform:translateX(-14px)}.wxview[data-w=rain] .sun2{opacity:0}
.wxview .cl{position:absolute;width:90px;height:30px;border-radius:30px;background:#fffd;inset-block-start:30px;inset-inline-start:20%;opacity:0;transition:opacity .6s;animation:cl 9s ease-in-out infinite alternate}
.wxview .cl.two{inset-inline-start:52%;inset-block-start:14px;width:70px}
@keyframes cl{to{transform:translateX(40px)}}
.wxview[data-w=cloud] .cl,.wxview[data-w=rain] .cl{opacity:1}
.wxview[data-w=rain]::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(100deg,transparent 0 10px,#cfe7ffaa 10px 11px);animation:rain 1s linear infinite}
.occ{display:flex;flex-wrap:wrap;gap:8px;margin-block:16px 12px}
.occ button{min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:999px;font-weight:500;transition:background .25s,color .25s}
.occ button:hover{background:color-mix(in oklch,var(--fg) 10%,transparent)}.occ button[aria-pressed=true]{background:var(--acc);color:var(--onacc);border-color:var(--acc)}
.occ-stage{height:120px;display:grid;place-items:center}.perch.p-occ{position:relative;margin-inline:auto;inset:auto}
.live{display:grid;gap:10px;margin-top:16px}
.match{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:14px 16px;border-radius:16px;background:color-mix(in oklch,var(--fg) 7%,transparent);border:1px solid var(--line);font-weight:600}
.match .tm{display:flex;align-items:center;gap:10px}.match .tm:last-child{justify-content:flex-end}
.badge{width:30px;height:30px;border-radius:50%;background:oklch(.55 .16 270);color:#fff;display:grid;place-items:center;font-size:.85rem;flex:none}
.score{font:700 1.6rem var(--disp);direction:ltr;display:flex;gap:6px;align-items:center}
.score span{display:inline-block;min-width:1ch;transition:transform .5s var(--ease)}.score span.flip{transform:rotateX(360deg)}
.lv{display:inline-flex;gap:6px;align-items:center;font-size:.76rem;font-weight:600;color:#fff;background:oklch(.55 .22 27);padding:3px 11px;border-radius:999px}.lv::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 1s steps(2) infinite}
/* tota section */
.meet{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,5fr);gap:clamp(24px,5vw,80px);align-items:center}
.tota-stage{position:relative;aspect-ratio:1;border-radius:50%;max-width:520px;width:100%;margin-inline:auto;display:grid;place-items:center;background:radial-gradient(closest-side,color-mix(in oklch,var(--acc) 22%,transparent),transparent 72%);}
.tota-stage::before{content:"";position:absolute;inset:6%;border-radius:50%;border:1.5px dashed var(--line);animation:spin 60s linear infinite}
@keyframes spin{to{rotate:360deg}}
.tota-stage .perch{position:relative;width:clamp(180px,26vw,320px);height:clamp(150px,22vw,260px)}
.abil{list-style:none;padding:0;display:grid;gap:0;margin-top:30px}
.abil li{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;padding:15px 0;border-top:1px solid var(--line)}
.abil li:last-child{border-bottom:1px solid var(--line)}
.abil b{font:700 1.2rem var(--disp)}.abil span.d{color:var(--mut);font-size:.92rem;grid-column:2}
.abil i{grid-row:span 2;width:34px;height:34px;border-radius:10px;background:var(--acc);color:var(--onacc);display:grid;place-items:center;font:700 .95rem var(--disp);font-style:normal}
.hint{font-size:.84rem;color:var(--mut);margin-top:18px;display:flex;gap:8px;align-items:center}
/* voice */
.vcard{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:clamp(20px,4vw,56px);background:oklch(.19 .02 265);color:oklch(.97 .01 90);border:1.5px solid oklch(.55 .09 80);border-radius:clamp(24px,3vw,40px);padding:clamp(24px,4vw,56px);position:relative;--va:oklch(.84 .14 78);box-shadow:0 50px 90px -40px #000}
.vcard h3{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:20px}
.steps{list-style:none;padding:0;display:grid;gap:12px;margin-bottom:26px}
.steps li{display:flex;gap:14px;align-items:center;font-size:1.05rem}.steps i{width:34px;height:34px;border-radius:50%;background:var(--va);color:oklch(.2 .04 70);display:grid;place-items:center;font:700 1rem var(--disp);font-style:normal;flex:none}
.try{font-size:.9rem;color:var(--va);margin-bottom:10px}
.cmds{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.cmds button{min-height:48px;padding:0 20px;border-radius:999px;background:oklch(.3 .02 265);font-weight:500;border:1.5px solid transparent;transition:background .25s,border-color .25s,color .25s}
.cmds button:hover{background:oklch(.38 .03 265)}.cmds button[aria-pressed=true]{border-color:var(--va);background:oklch(.34 .04 80)}
.vbtn{background:#fff;color:oklch(.2 .02 265);min-height:56px;padding:0 30px;border-radius:999px;font-weight:600;display:inline-flex;gap:10px;align-items:center;transition:background .25s,color .25s,transform .3s var(--ease)}
.vbtn:hover{background:var(--va);transform:translateY(-3px)}.vbtn:disabled{opacity:.6;cursor:progress;transform:none}
.vbtn svg{width:20px;height:20px}
.talk{margin-top:26px;min-height:150px;border-radius:20px;background:oklch(.24 .02 265);padding:18px 22px;display:grid;gap:10px;align-content:start}
.talk .lab{font-size:.78rem;color:oklch(.78 .02 265)}
.heard{font:500 1.25rem/1.5 var(--disp);min-height:1.5em}
.lvl{display:flex;gap:4px;align-items:center;height:22px}.lvl i{width:4px;border-radius:3px;background:#38e1ff;height:4px;transition:height .08s}
.say{display:flex;gap:12px;align-items:flex-start;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s var(--ease)}.say.on{opacity:1;transform:none}
.say p{font-weight:500;font-size:1.02rem;color:oklch(.97 .01 90)}
.res{display:inline-flex;align-items:center;gap:12px;padding:8px 14px;border-radius:12px;background:oklch(.32 .05 80);font-size:.9rem;margin-top:6px}
.vol{width:120px;height:8px;border-radius:8px;background:oklch(.4 .02 265);overflow:hidden}.vol i{display:block;height:100%;width:var(--w,30%);background:var(--va);transition:width .9s var(--ease)}
.remote{width:128px;margin-inline:auto;align-self:center;height:min(340px,100%);min-height:300px;border-radius:70px;background:linear-gradient(oklch(.34 .02 265),oklch(.24 .02 265));border:1.5px solid oklch(.45 .02 265);display:grid;justify-items:center;align-content:space-evenly;padding:22px 0;position:relative}
.remote .eye{width:12px;height:12px;border-radius:50%;background:oklch(.5 .02 265)}
.remote .pad{width:84px;height:84px;border-radius:50%;background:oklch(.14 .01 265);display:grid;place-items:center}.remote .pad i{width:36px;height:36px;border-radius:50%;background:oklch(.25 .02 265)}
.remote .row{display:flex;gap:10px}.remote .row i{width:20px;height:20px;border-radius:50%;background:oklch(.5 .02 265)}
.remote .mic{width:50px;height:50px;border-radius:50%;background:var(--va);color:oklch(.2 .04 70);display:grid;place-items:center;box-shadow:0 0 0 0 var(--va);animation:ping 2.4s infinite}
.remote .mic.live{animation:ping .8s infinite;background:#38e1ff}
.remote .bar{width:22px;height:46px;border-radius:12px;background:oklch(.45 .02 265)}
.remote .arrow{position:absolute;inset-inline-start:-52px;top:63%;width:40px;color:var(--va);animation:nudge 1.4s var(--ease) infinite}
@keyframes nudge{50%{translate:-8px 0}}html[dir=ltr] .remote .arrow{scale:-1 1;animation-name:nudge2}@keyframes nudge2{50%{translate:8px 0}}
.vcard .perch{inset-block-start:-70px;inset-inline-end:clamp(160px,22vw,260px)}
/* film */
.film{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(20px,4vw,56px);align-items:stretch}
.mem{display:grid;grid-template-columns:96px 1fr;gap:10px 16px;align-items:center;padding-block:14px;border-top:1px solid var(--line)}
.mem:first-of-type{border-top:0}.mem b{font:700 1.15rem var(--disp)}
.moods{display:flex;flex-wrap:wrap;gap:8px}.moods button{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);font-size:.92rem;font-weight:500;transition:background .25s,color .25s,transform .3s var(--ease)}
.moods button:hover{background:color-mix(in oklch,var(--fg) 12%,transparent)}.moods button[aria-pressed=true]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.pick{min-height:380px;display:grid;place-items:center;text-align:center;position:relative}
.pick .poster{position:relative;width:min(200px,50%);margin-inline:auto}
.pick .poster img{width:100%;height:auto;border-radius:10px;box-shadow:0 30px 60px -20px #000c}
.pick .ph{aspect-ratio:2/3;display:grid;place-items:center;border:2px dashed var(--line);border-radius:12px;color:var(--mut);font:700 4.5rem var(--disp)}
.ticket{margin-top:20px}.ticket h3{font-size:1.7rem}.ticket p{color:var(--mut);font-size:.95rem}
.pick.think .poster{animation:shake .5s infinite}@keyframes shake{25%{rotate:-3deg}75%{rotate:3deg}}
.pick .poster.reveal{animation:popin .9s var(--ease)}@keyframes popin{from{opacity:0;transform:scale(.7) rotate(-6deg)}}
/* smart */
.sm{min-height:340px;display:flex;flex-direction:column}
.sm .viz{margin-top:auto;padding-top:22px}
.mini-tv{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#05060a;border:1px solid var(--line)}
.mini-tv img.bgp{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(22px) brightness(.55);transform:scale(1.3)}
.mini-tv img.pp{position:absolute;inset-block:10px;left:50%;translate:-50% 0;height:calc(100% - 20px);width:auto;border-radius:6px}
.goal{position:absolute;inset-block-start:10px;inset-inline-end:10px;display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:12px;background:oklch(.16 .02 265/.92);color:#fff;font-size:.78rem;font-weight:600;backdrop-filter:blur(8px);border:1px solid oklch(1 0 0/.18);transform:translateX(130%);opacity:0;transition:transform .6s var(--ease),opacity .4s}
html[dir=ltr] .goal{transform:translateX(130%)}html[dir=rtl] .goal{transform:translateX(-130%)}
.goal.on{transform:none!important;opacity:1}.goal img{width:20px;height:20px;object-fit:contain}.goal b{color:oklch(.87 .17 95);direction:ltr}
.teams{display:flex;gap:8px;flex-wrap:wrap}.teams button{display:inline-flex;gap:8px;align-items:center;min-height:44px;padding:0 14px 0 10px;padding-inline:10px 14px;border:1px solid var(--line);border-radius:999px;font-weight:500;font-size:.9rem;transition:background .25s,color .25s}
.teams button img{width:24px;height:24px;object-fit:contain}.teams button:hover{background:color-mix(in oklch,var(--fg) 12%,transparent)}.teams button[aria-pressed=true]{background:var(--fg);color:var(--bg)}
.notif{margin-top:14px;padding:12px 14px;border-radius:14px;background:color-mix(in oklch,var(--acc) 18%,transparent);border:1px solid color-mix(in oklch,var(--acc) 40%,transparent);font-size:.9rem;min-height:3.8em}
.bars{display:flex;align-items:flex-end;gap:8px;height:110px}.bars i{flex:1;border-radius:8px 8px 3px 3px;background:var(--acc);height:var(--h);transform-origin:bottom;transform:scaleY(.1);transition:transform 1s var(--ease);transition-delay:calc(var(--i)*70ms)}
.in .bars i,.bars.in i{transform:none}.bars-l{display:flex;gap:8px;font-size:.72rem;color:var(--mut);margin-top:6px}.bars-l span{flex:1;text-align:center}
.phone{display:flex;gap:18px;align-items:center}.phone .ph{width:96px;height:176px;flex:none;border-radius:22px;border:3px solid var(--fg);padding:8px;display:grid;gap:6px;align-content:start;justify-items:center;background:var(--bg)}
.phone .ph i{width:34px;height:4px;border-radius:3px;background:var(--line)}.phone .ph .d{width:56px;height:56px;border-radius:50%;background:var(--bg2);border:1px solid var(--line)}
.qr{width:110px;height:110px;border-radius:12px;padding:8px;background:#fff;image-rendering:pixelated}.qr canvas{width:100%;height:100%;image-rendering:pixelated}
.ring{width:84px;height:84px;rotate:-90deg}.ring circle{fill:none;stroke-width:8;stroke-linecap:round}.ring .t{stroke:var(--line)}.ring .p{stroke:var(--acc);stroke-dasharray:226;stroke-dashoffset:226;animation:fill 4s var(--ease) infinite}
@keyframes fill{60%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:.2}}
.cloud{width:120px}.cloud .arr{animation:up 2.2s ease-in-out infinite}@keyframes up{0%{translate:0 10px;opacity:0}50%{opacity:1}100%{translate:0 -6px;opacity:0}}
/* night */
.night{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,72px);align-items:center}
.nsteps{display:grid;gap:8px;margin-top:30px}.nsteps button{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:center;text-align:start;padding:14px 16px;border-radius:18px;border:1px solid transparent;transition:background .3s,border-color .3s;min-height:68px}
.nsteps button:hover{background:color-mix(in oklch,var(--fg) 8%,transparent)}.nsteps button[aria-pressed=true]{background:var(--bg2);border-color:var(--line)}
.nsteps i{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font:700 1rem var(--disp);font-style:normal;transition:background .3s,color .3s}.nsteps button[aria-pressed=true] i{background:var(--acc);color:var(--onacc);border-color:var(--acc)}
.nsteps b{display:block;font:700 1.15rem var(--disp)}.nsteps span{font-size:.88rem;color:var(--mut)}
.nstage{position:relative;padding-top:calc(clamp(80px,9vw,112px) + 10px)}.nstage .perch{inset-block-start:0;inset-inline-end:8%}
.ntv{position:relative;aspect-ratio:16/9;border-radius:22px;border:10px solid oklch(.12 .01 260);overflow:hidden;background:#06070c;box-shadow:0 40px 80px -30px #000}
.ntv .film-bg{position:absolute;inset:0;background:radial-gradient(70% 90% at 30% 40%,oklch(.4 .08 40),transparent),linear-gradient(120deg,oklch(.25 .05 260),oklch(.12 .02 260));transition:filter .8s,opacity .8s}
.ntv .ph-tm{position:absolute;inset-block-end:16px;inset-inline:18px;height:5px;border-radius:5px;background:#fff3}.ntv .ph-tm i{display:block;height:100%;width:43%;background:var(--acc);border-radius:5px}
.ntv .nclock{position:absolute;inset-block-start:14px;inset-inline-end:18px;font:500 .95rem var(--disp);color:#fff9;direction:ltr}
.ntv .dlg{position:absolute;inset:auto 0 0 0;margin:auto;inset-block:0;width:min(78%,360px);height:fit-content;padding:20px 22px;border-radius:20px;background:oklch(.19 .02 265/.94);color:#fff;text-align:center;backdrop-filter:blur(8px);border:1.5px solid oklch(.55 .09 80);transition:opacity .5s,transform .6s var(--ease)}
.dlg h4{font:700 1.5rem var(--disp);margin-bottom:10px}.dlg .cd{width:60px;height:60px;margin:0 auto 8px;rotate:-90deg}.dlg .cd circle{fill:none;stroke-width:6}.dlg .cd .a{stroke:#ffffff30}.dlg .cd .b{stroke:oklch(.84 .14 78);stroke-linecap:round;stroke-dasharray:151;stroke-dashoffset:0;transition:stroke-dashoffset 3.4s linear}
.ntv[data-s="0"] .dlg{opacity:0;transform:translateY(20px)}
.ntv[data-s="1"] .cd .b{stroke-dashoffset:151}
.ntv[data-s="2"] .dlg,.ntv[data-s="3"] .dlg{opacity:0}
.ntv .off{position:absolute;inset:0;background:#000;display:grid;place-items:center;color:oklch(.85 .08 270);font:700 1.6rem var(--disp);opacity:0;transition:opacity .6s}
.ntv[data-s="2"] .off{opacity:1;animation:crt .9s var(--ease)}@keyframes crt{0%{clip-path:inset(0)}60%{clip-path:inset(49% 0 49% 0)}100%{clip-path:inset(49% 49% 49% 49%)}}
.ntv[data-s="2"] .film-bg{filter:brightness(.0)}
.ntv .res2{position:absolute;inset-inline:18px;inset-block-end:34px;display:flex;gap:14px;align-items:center;padding:12px 16px;border-radius:16px;background:oklch(.19 .02 265/.92);color:#fff;font-size:.9rem;opacity:0;transform:translateY(16px);transition:opacity .6s .3s,transform .6s .3s var(--ease)}
.ntv[data-s="3"] .res2{opacity:1;transform:none}.res2 img{height:64px;width:auto;border-radius:6px}
.ntv[data-s="3"] .film-bg{filter:none}.ntv[data-s="2"] .nclock{opacity:0}
/* app */
.apptabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.apptabs button{min-height:46px;padding:0 20px;border-radius:999px;border:1px solid var(--line);font-weight:500;transition:background .25s,color .25s}
.apptabs button:hover{background:color-mix(in oklch,var(--fg) 12%,transparent)}.apptabs button[aria-selected=true]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.tvui{background:oklch(.17 .02 265);color:oklch(.97 .01 90);border-radius:clamp(18px,2.4vw,32px);padding:clamp(18px,3vw,40px);min-height:430px;border:1.5px solid oklch(.35 .02 265);box-shadow:0 50px 90px -40px #000a;--va:oklch(.84 .14 78)}
.tvui .tt{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:16px}.tvui h3{font-size:1.7rem}.tvui .tt p{color:oklch(.78 .02 265);font-size:.92rem}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.tile{position:relative;border-radius:18px;background:oklch(.26 .03 265);padding:18px;min-height:130px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;overflow:hidden;transition:transform .35s var(--ease),background .25s;border:1.5px solid transparent}
.tile:hover{transform:translateY(-5px);background:oklch(.31 .04 265);border-color:var(--va)}
.tile b{font:700 1.25rem/1.3 var(--disp)}.tile small{color:oklch(.78 .02 265)}.tile .lv{position:absolute;inset-block-start:12px;inset-inline-start:12px}
.tile .st{position:absolute;inset-block-start:6px;inset-inline-end:6px;width:44px;height:44px;display:grid;place-items:center;color:oklch(.78 .02 265);transition:color .2s,transform .3s var(--ease)}.tile .st[aria-pressed=true]{color:var(--va)}.tile .st:hover{color:var(--va);transform:scale(1.15)}
.tile .st svg{width:24px;height:24px}
.tile.fam{background:oklch(.95 .02 85);color:oklch(.2 .02 80)}.tile.fam small{color:oklch(.4 .02 80)}.tile.fam img{height:auto;width:auto;max-width:100%;max-height:68px;object-fit:contain;align-self:center;margin-bottom:6px}
.posters{display:flex;gap:18px;flex-wrap:wrap}.posters figure{width:150px}.posters img{width:150px;height:auto;border-radius:10px;background:oklch(.26 .03 265);transition:transform .35s var(--ease)}.posters figure:hover img{transform:translateY(-6px) scale(1.03)}.posters figcaption{margin-top:8px;font-weight:500;font-size:.92rem}
.cw{display:grid;gap:12px}.cw .r{display:grid;grid-template-columns:54px 1fr;gap:16px;align-items:center;padding:10px 14px;border-radius:16px;background:oklch(.26 .03 265)}.cw img{width:54px;height:auto;border-radius:6px}
.cw .pb{height:6px;border-radius:6px;background:oklch(.4 .02 265);overflow:hidden;margin-top:8px}.cw .pb i{display:block;height:100%;background:var(--va);width:var(--p);transform-origin:var(--o,left);animation:grow 1.4s var(--ease) both}
html[dir=rtl] .cw .pb i{transform-origin:right}@keyframes grow{from{transform:scaleX(0)}}
.epg{position:relative;display:grid;gap:10px;overflow:hidden}.epg .row{display:grid;grid-template-columns:130px 1fr;gap:12px;align-items:center}.epg .ch2{font-weight:600;font-size:.9rem}
.epg .tl2{display:flex;gap:6px;height:56px}.epg .blk{border-radius:12px;padding:8px 12px;font-size:.84rem;display:flex;flex-direction:column;justify-content:center;background:oklch(.28 .04 265);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:background .25s}
.epg .blk:hover{background:oklch(.36 .06 265)}.epg .blk.k2{background:oklch(.3 .06 80)}.epg .blk.k3{background:oklch(.3 .07 25)}
.epg .now{position:absolute;inset-block:0;width:2px;background:oklch(.65 .22 27);inset-inline-start:calc(130px + 12px + 38%);animation:nowm 14s linear infinite alternate}
@keyframes nowm{to{inset-inline-start:calc(130px + 12px + 56%)}}
/* brain */
.pipe{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;margin-top:10px}
.node{position:relative;text-align:center;padding:0 8px}
.node .ic{width:76px;height:76px;margin:0 auto 14px;border-radius:24px;background:var(--bg2);border:1.5px solid var(--line);display:grid;place-items:center;transition:background .4s,border-color .4s,transform .5s var(--ease),color .4s;position:relative;z-index:1}
.node.on .ic{background:var(--acc);color:var(--onacc);border-color:var(--acc);transform:translateY(-8px) scale(1.08)}
.node svg{width:34px;height:34px}.node b{font:700 1.08rem var(--disp);display:block}.node span{font-size:.82rem;color:var(--mut);display:block;line-height:1.5;margin-top:2px}
.node::before{content:"";position:absolute;inset-block-start:38px;inset-inline:-50% 50%;border-top:2px dashed var(--line);z-index:0}.node:first-child::before{display:none}
.node.done::before{border-color:var(--acc)}
.pkt{position:absolute;inset-block-start:31px;width:14px;height:14px;border-radius:50%;background:var(--acc);box-shadow:0 0 18px 4px var(--acc);z-index:2;transition:inset-inline-start 1s var(--ease)}
.intent{margin-top:clamp(40px,6vw,72px);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:20px;align-items:center}
.intent .q{font:500 clamp(1.3rem,2.4vw,1.9rem)/1.5 var(--disp);padding:22px 26px;border-radius:20px;background:var(--bg2);border:1px solid var(--line);min-height:5.5em;display:flex;align-items:center}
.intent .fl{display:flex;flex-wrap:wrap;gap:10px}.intent .fl span{padding:10px 16px;border-radius:12px;background:color-mix(in oklch,var(--acc) 20%,transparent);border:1px solid color-mix(in oklch,var(--acc) 50%,transparent);font-size:.95rem;animation:popin .6s var(--ease) both;animation-delay:calc(var(--i)*120ms)}
.intent .fl small{color:var(--mut);display:block;font-size:.7rem}
.intent svg{width:44px;height:44px;color:var(--acc)}html[dir=ltr] .intent svg{scale:-1 1}
.qs{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.qs button{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);font-size:.9rem;font-weight:500;transition:background .25s,color .25s}.qs button:hover{background:color-mix(in oklch,var(--fg) 12%,transparent)}.qs button[aria-pressed=true]{background:var(--fg);color:var(--bg)}
/* footer */
.foot{padding-block:clamp(90px,12vw,170px) 60px;text-align:center;border-top:1px solid var(--line);position:relative}
.foot .perch{position:relative;margin:0 auto 10px;width:clamp(160px,20vw,240px);height:clamp(130px,16vw,190px)}
.foot h2{margin-inline:auto;max-width:14ch}.foot .lead{margin-inline:auto}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center;margin-top:44px;font-size:.9rem}
.foot small{display:block;margin-top:34px;color:var(--mut);font-size:.82rem}
/* floating */
#tota{position:fixed;left:0;top:0;z-index:55;direction:ltr;pointer-events:none;will-change:transform}
#flip{position:fixed;inset:0;z-index:90;pointer-events:none;background:linear-gradient(transparent 0 48%,#fff 48% 52%,transparent 52%);opacity:0}
#flip.go{animation:flip .55s ease-out}@keyframes flip{0%{opacity:.9;transform:scaleY(.02)}40%{opacity:.9;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1)}}
#toast{position:fixed;inset-block-start:86px;inset-inline-end:clamp(18px,4vw,56px);z-index:70;padding:10px 16px;border-radius:12px;background:#000c;color:#fff;font:500 .95rem var(--disp);display:flex;gap:12px;align-items:center;opacity:0;transform:translateY(-8px);transition:opacity .4s,transform .5s var(--ease);pointer-events:none;direction:ltr}
#toast.on{opacity:1;transform:none}#toast b{color:oklch(.85 .17 140);letter-spacing:.08em}
/* responsive */
@media(max-width:1180px){.menu{display:none}.burger{display:grid}.menu.open{display:grid;position:absolute;inset-block-start:calc(100% + 8px);inset-inline:0;padding:10px;border-radius:24px;background:var(--bg2);border:1px solid var(--line);box-shadow:0 30px 80px #0007}.menu.open a{padding:14px 16px;font-size:1rem}}
@media(max-width:1020px){ .hero .grid,.scn,.meet,.night,.film{grid-template-columns:1fr}.hero{min-height:auto}.b4,.b5,.b6,.b7,.b8{grid-column:span 12}.vcard{grid-template-columns:1fr}.remote{display:none}.vcard .perch{inset-inline-end:20px}
 .pipe{grid-template-columns:1fr;gap:26px;padding-inline-start:0}.node{display:grid;grid-template-columns:76px 1fr;text-align:start;gap:0 18px;align-items:center}.node .ic{margin:0}.node::before{display:none}.pkt{display:none}
 .intent{grid-template-columns:1fr}.intent svg{margin-inline:auto}html[dir] .intent svg{scale:none;rotate:-90deg}.sm{min-height:0}}
@media(max-width:640px){.nav .bar{padding-inline:14px 8px}.brand small{display:none}.chip-btn .lbl{display:none}.chip-btn{padding:0 12px}.dial{grid-template-columns:repeat(4,1fr);gap:8px}.facts{flex-wrap:wrap}.slist button{grid-template-columns:34px 1fr auto}.slist .sw{display:none}.epg .row{grid-template-columns:1fr}.epg .now{display:none}.mem{grid-template-columns:1fr}.pop{grid-template-columns:1fr}.wx{flex-wrap:wrap}.phone{flex-direction:column;align-items:flex-start}.tvui{padding:18px}.match{grid-template-columns:1fr;justify-items:center;text-align:center}.match .tm,.match .tm:last-child{justify-content:center}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}}
.tile .st svg{fill:none}.tile .st[aria-pressed=true] svg{fill:currentColor}
.tile.fam:hover{background:oklch(.99 .02 85)}.tile.fam .st{color:oklch(.45 .02 80)}.tile.fam .st[aria-pressed=true],.tile.fam .st:hover{color:oklch(.55 .17 60)}
.slist button[aria-pressed=true]::before{color:var(--bg);opacity:.65}

/* anatomy frame + hotspots */
.frame.anat{aspect-ratio:16/9;direction:ltr}.hl{position:absolute;border-radius:14px;border:2.5px solid var(--acc);box-shadow:0 0 0 9999px oklch(0 0 0/.42),0 0 28px color-mix(in oklch,var(--acc) 60%,transparent);transition:left .55s var(--ease),top .55s var(--ease),width .55s var(--ease),height .55s var(--ease),opacity .3s;pointer-events:none;z-index:2}
.frame.anat::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit}
.note{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line);font-size:.92rem;color:var(--mut)}
.badge-d{font-size:.7rem;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--acc);color:var(--onacc);margin-inline-start:8px;vertical-align:middle}
.slist .sw{width:34px;height:20px}
/* worlds corner */
.pickr{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px;padding:20px 24px;border-radius:var(--r);background:var(--bg2);border:1px solid var(--line);margin-bottom:22px}
.pickr h3{font-size:1.25rem}.pickr .sws{display:flex;gap:8px;flex-wrap:wrap}
.pickr .sws button{width:44px;height:44px;border-radius:50%;border:2px solid var(--line);transition:transform .3s var(--ease),border-color .25s}
.pickr .sws button:hover{transform:translateY(-3px)}.pickr .sws button[aria-pressed=true]{border-color:var(--fg);box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--acc)}
.tog{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-weight:600;padding:0 4px}
.tog i{position:relative;width:54px;height:30px;border-radius:999px;background:color-mix(in oklch,var(--fg) 24%,transparent);transition:background .3s;flex:none}
.tog i::after{content:"";position:absolute;inset-block-start:3px;inset-inline-start:3px;width:24px;height:24px;border-radius:50%;background:var(--bg);transition:inset-inline-start .3s var(--ease),background .3s;box-shadow:0 1px 4px #0004}
.tog[aria-checked=true] i{background:var(--acc)}.tog[aria-checked=true] i::after{inset-inline-start:27px;background:var(--onacc)}
.pop .tog{grid-column:1/-1;justify-content:space-between;padding:10px 12px;border-top:1px solid var(--line);margin-top:4px;border-radius:0;font-size:.92rem}
.wlock{position:relative;border-radius:var(--r);overflow:hidden;min-height:300px;display:grid;place-items:center;text-align:center;border:1px dashed var(--line);padding:30px}
.wlock img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(18px) grayscale(.8) brightness(.6);transform:scale(1.15);opacity:.55}
.wlock div{position:relative;max-width:42ch}.wlock svg{width:40px;height:40px;margin:0 auto 12px;color:var(--fg)}.wlock p{font-weight:600;font-size:1.1rem;background:color-mix(in oklch,var(--bg) 80%,transparent);padding:14px 20px;border-radius:16px}
[data-w=off] .wopen{display:none}[data-w=on] .wlock{display:none}
.wopen .frame img{transition:opacity .5s,transform 9s linear}.wopen .frame img.on{transform:scale(1.04)}
.slist.plain button,#anlist button{grid-template-columns:44px 1fr}
#wlist .sw{display:none}#wlist button{grid-template-columns:44px 1fr}