/* Edutained v3 — hand-built (round xps16). Tokens from the estate board bv.edt.*79ec.hd.jpg (09 web hero mockups). */
html,body{background:var(--bg);color:var(--ink)}

@font-face{font-family:"Instrument Serif";src:url('fonts/instrument-serif.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url('fonts/instrument-serif-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Inter;src:url('fonts/inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('fonts/inter-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('fonts/inter-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --bg:#FBF7F5; --bg-2:#F6EEF1; --ink:#1E1238; --ink-2:rgba(30,18,56,.74); --muted:rgba(30,18,56,.62);
  --line:rgba(30,18,56,.12); --glass:rgba(255,255,255,.62); --glass-2:rgba(255,255,255,.82); --glass-line:rgba(255,255,255,.9);
  --shadow:0 1px 2px rgba(30,18,56,.06),0 14px 44px rgba(90,44,140,.14);
  --sun:#FF8A3D; --coral:#FF5A6E; --magenta:#E8389A; --violet:#9B4DFF; --blue:#4D6BFF;
  --play:linear-gradient(100deg,#B23CF6 0%,#F0418F 50%,#FF8A3D 100%);
  --play-btn:linear-gradient(100deg,#A23BE8 0%,#D6286F 58%,#D8462F 100%);
  --wash-a:rgba(255,176,128,.42); --wash-b:rgba(196,150,255,.40); --wash-c:rgba(255,140,190,.30);
  --serif:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1); --ease-ui:cubic-bezier(.2,.8,.2,1);
  --gut:80px; --nav:72px; --r:20px;
  color-scheme:light;
}
[data-theme=dark]{
  --bg:#0D0B1F; --bg-2:#13102B; --ink:#F5F0FB; --ink-2:rgba(245,240,251,.80); --muted:rgba(245,240,251,.64);
  --line:rgba(245,240,251,.13); --glass:rgba(38,28,70,.52); --glass-2:rgba(48,36,86,.78); --glass-line:rgba(255,255,255,.14);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 22px 64px rgba(0,0,0,.5);
  --wash-a:rgba(88,62,210,.24); --wash-b:rgba(146,72,255,.32); --wash-c:rgba(232,56,154,.20);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:16px;line-height:1.55;letter-spacing:-.005em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;transition:background-color .35s var(--ease-ui),color .35s var(--ease-ui)}
::selection{background:rgba(232,56,154,.22)}
html{scrollbar-color:color-mix(in oklab,var(--ink) 28%,transparent) var(--bg);accent-color:#D6286F;caret-color:#D6286F}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--magenta);outline-offset:3px;border-radius:8px}
.wrap{width:min(100% - 2*var(--gut),1280px);margin-inline:auto}
.skip{position:absolute;left:16px;top:-60px;z-index:50;padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:500}
.skip:focus{top:12px}
.glass{background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border:1px solid var(--glass-line);box-shadow:var(--shadow);border-radius:var(--r)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:20;height:var(--nav);border-bottom:1px solid transparent;transition:background-color .3s var(--ease-ui),border-color .3s var(--ease-ui)}
.nav.is-scrolled{background:color-mix(in oklab,var(--bg) 84%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav-row{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.lockup{display:flex;align-items:center;gap:9px;flex:none}
.lockup-mark{height:38px;width:auto}
.wm{display:inline-block;background:var(--ink);-webkit-mask:url('logo/edt-word.png') no-repeat left center/contain;mask:url('logo/edt-word.png') no-repeat left center/contain}
.lockup .wm{height:33px;aspect-ratio:564/172}
.nav-links{display:flex;gap:34px;font-size:14.5px;font-weight:500}
.nav-links a,.foot-links a,.signin{color:var(--ink-2);position:relative;transition:color .2s var(--ease-ui)}
.nav-links a::after,.foot-links a::after,.signin::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease)}
.nav-links a:hover,.foot-links a:hover,.signin:hover{color:var(--ink)}
.nav-links a:hover::after,.foot-links a:hover::after,.signin:hover::after{transform:scaleX(1);transform-origin:left}
.nav-right{display:flex;align-items:center;gap:18px}
.signin{font-size:14.5px;font-weight:500}
.theme{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:var(--glass);color:var(--ink);cursor:pointer;transition:transform .14s var(--ease-ui),border-color .2s}
.theme:hover{transform:translateY(-1px);border-color:color-mix(in oklab,var(--ink) 30%,transparent)}
.theme svg{width:18px;height:18px}
.theme .moon,[data-theme=dark] .theme .sun{display:none}
[data-theme=dark] .theme .moon{display:block}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 24px;border-radius:999px;font:500 15px/1 var(--sans);letter-spacing:-.01em;white-space:nowrap;cursor:pointer;transition:transform .14s var(--ease-ui),box-shadow .2s var(--ease-ui),filter .2s,background-color .2s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn .arr{width:15px;height:15px;transition:transform .2s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.btn-play{color:#fff;background:var(--play-btn);box-shadow:0 1px 1px rgba(255,255,255,.35) inset,0 8px 22px rgba(224,58,150,.32)}
.btn-play:hover{filter:saturate(1.12) brightness(1.04);box-shadow:0 1px 1px rgba(255,255,255,.35) inset,0 12px 30px rgba(224,58,150,.42)}
[data-theme=dark] .nav .btn-play{color:#1E1238;background:#fff;box-shadow:0 10px 30px rgba(240,65,143,.28)}
.btn-glass{color:var(--ink);background:var(--glass-2);border:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.btn-glass:hover{border-color:color-mix(in oklab,var(--ink) 28%,transparent)}
.btn-sm{height:40px;padding:0 18px;font-size:14px}
.disc{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1.5px solid currentColor;margin-left:-8px}
.disc svg{width:9px;height:9px;margin-left:1px}

/* ---------- hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:740px;max-height:1100px;overflow:clip;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:
  radial-gradient(60% 55% at 12% 18%,var(--wash-a),transparent 70%),
  radial-gradient(55% 60% at 88% 30%,var(--wash-b),transparent 72%),
  radial-gradient(50% 50% at 62% 92%,var(--wash-c),transparent 70%)}
.book{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 140px);mask-image:linear-gradient(180deg,transparent 0,#000 140px)}
.hero-grid{height:100%;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;align-items:center;padding-top:var(--nav)}
.hero-text{position:relative;z-index:2;padding-bottom:24px}
.h1{font-family:var(--serif);font-weight:400;font-size:clamp(54px,6.7vw,108px);line-height:.92;letter-spacing:-.028em;margin:0 0 28px}
.h1 .ln{display:block;overflow:hidden;padding:0 .08em .08em 0;margin-bottom:-.08em}
.h1 .ln>span{display:inline-block;white-space:nowrap}
.h1 .into{font-style:italic}
.play{font-style:italic;background:var(--play);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.lede{font-size:17.5px;line-height:1.55;color:var(--ink-2);max-width:33.5rem;margin:0 0 32px}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.nw{white-space:nowrap}
.note{margin:18px 0 0;font-size:13.5px;color:var(--muted)}

/* studio */
.studio-wrap{position:relative;height:100%;display:flex;align-items:center;justify-content:flex-end;perspective:1700px}
.studio{position:relative;width:min(100%,680px);aspect-ratio:680/470;transform-style:preserve-3d;transform:rotateY(-13deg) rotateX(5deg) translateZ(0);margin-right:8px}
.panel-back{position:absolute;inset:-6% -5% 18% 22%;transform:translateZ(-80px);opacity:.6}
/* over the live canvas: no backdrop-filter (it would re-blur every frame); denser fills instead */
.studio .glass,.studio .chips li,.studio .thumbs{-webkit-backdrop-filter:none;backdrop-filter:none}
.studio .glass{background:color-mix(in oklab,var(--glass-2) 88%,transparent)}
.studio .thumbs{background:color-mix(in oklab,var(--glass-2) 94%,transparent)}
.player{position:absolute;inset:4% 0 14% 8%;display:flex;flex-direction:column;overflow:hidden;border-radius:18px}
.chrome{display:flex;align-items:center;gap:12px;height:38px;padding:0 14px;font-size:12px;font-weight:500;color:var(--ink-2);border-bottom:1px solid var(--line)}
.dots{display:flex;gap:6px}.dots i{width:9px;height:9px;border-radius:50%;background:color-mix(in oklab,var(--ink) 18%,transparent)}
.chrome-title{flex:1}
.tag{font-size:11.5px;padding:3px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.screen{position:relative;flex:1;margin:10px 10px 0;border-radius:12px;overflow:hidden;background:#2a1450}
.screen canvas{position:absolute;inset:0;width:100%;height:100%}
.screen::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.85) 50%,transparent 100%);transform:translateX(-110%);pointer-events:none}
.screen.is-cut::after{animation:wipe .55s var(--ease) both}
@keyframes wipe{to{transform:translateX(110%)}}
.bar{display:flex;align-items:center;gap:12px;height:44px;padding:0 14px;font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ctl{width:22px;height:22px;display:grid;place-items:center}
.ctl svg{width:12px;height:12px}
.i-play{display:none}
.is-paused .i-pause{display:none}.is-paused .i-play{display:block}
.track{position:relative;flex:1;height:4px;border-radius:4px;background:color-mix(in oklab,var(--ink) 14%,transparent)}
.track .fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:4px;background:var(--play)}
.track i{position:absolute;left:var(--x);top:-3px;width:2px;height:10px;border-radius:2px;background:color-mix(in oklab,var(--ink) 30%,transparent)}
.chips{list-style:none;margin:0;padding:0;position:absolute;left:0;top:20%;display:flex;flex-direction:column;gap:12px;transform:translateZ(60px)}
.chips li{width:70px;height:70px;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:11.5px;font-weight:500;color:#fff;background:linear-gradient(150deg,#8E4DFF,#C23CF0 55%,#E8389A);border:1px solid rgba(255,255,255,.45);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:transform .5s var(--ease),color .3s,box-shadow .4s}
.chips svg{width:22px;height:22px}
.chips li{opacity:.78}
.chips li.is-on{opacity:1;transform:translateX(-6px);box-shadow:0 0 0 3px var(--bg),0 0 0 5px #E8389A,var(--shadow)}
.thumbs{list-style:none;margin:0;padding:8px;position:absolute;left:16%;right:6%;bottom:0;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;border-radius:16px;background:var(--glass-2);border:1px solid var(--glass-line);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transform:translateZ(40px)}
.thumbs li{aspect-ratio:16/10;border-radius:8px;overflow:hidden;opacity:.62;transition:transform .5s var(--ease),opacity .4s,box-shadow .4s}
.thumbs li.is-on{opacity:1;transform:translateY(-5px);box-shadow:0 0 0 2px #F0418F}
.thumbs canvas{width:100%;height:100%;display:block}
.pause{position:absolute;right:0;top:calc(50% + 192px);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:var(--glass-2);color:var(--ink);cursor:pointer;z-index:3;transition:transform .14s var(--ease-ui)}
.pause:hover{transform:translateY(-1px)}
.pause svg{width:12px;height:12px}

/* entrance (only when JS runs; rest state visible without it) */
.js:not(.is-ready) [data-in]{opacity:0}
.js:not(.is-ready) .h1 .ln>span{transform:translateY(110%)}
.js:not(.is-ready) .studio{opacity:0}

/* ---------- shared section scaffold ---------- */
.h2{font-family:var(--serif);font-weight:400;font-size:clamp(40px,4.6vw,72px);line-height:1;letter-spacing:-.022em;margin:0}
.sec{position:relative;min-height:100svh;padding:120px 0 96px;display:flex;align-items:center}
.sec>.wrap{width:min(100% - 2*var(--gut),1280px)}
.sec-alt{background:var(--bg-2)}
.sec-head{max-width:46rem;margin-bottom:56px}
.sec-lede{font-size:18px;color:var(--ink-2);margin:18px 0 0;max-width:36rem}
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* ---------- story (pinned) ---------- */
.story{position:relative;height:400svh;background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%)}
.story-pin{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:clip}
.story-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center;padding-top:calc(var(--nav) - 12px)}
.steps{list-style:none;margin:40px 0 0;padding:0;display:grid}
.step{grid-area:1/1;opacity:0;transform:translateY(16px);transition:opacity .45s var(--ease),transform .45s var(--ease);pointer-events:none}
.step.is-on{opacity:1;transform:none;pointer-events:auto}
.step .idx{display:block;font-size:13px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums;margin-bottom:10px}
.step h3{font:600 21px/1.25 var(--sans);letter-spacing:-.015em;margin:0 0 8px}
.step p{margin:0;font-size:17px;color:var(--ink-2);max-width:28rem}
.rail{margin-top:36px;width:220px;height:2px;border-radius:2px;background:var(--line);overflow:hidden}
.rail span{display:block;height:100%;width:100%;background:var(--play);transform:scaleX(0);transform-origin:left}
.stage-box{position:relative;width:100%;aspect-ratio:640/520}
.stage{position:absolute;left:0;top:0;width:640px;height:520px;transform-origin:top left}
.stage>*{position:absolute}
.paper{left:170px;top:40px;width:300px;height:410px;border-radius:10px;padding:30px 28px;background:#fff;box-shadow:0 2px 4px rgba(30,18,56,.06),0 24px 60px rgba(90,44,140,.18);display:flex;flex-direction:column;gap:11px}
[data-theme=dark] .paper{background:#f4eff8}
.paper>span{display:block;border-radius:3px;background:rgba(30,18,56,.16);height:7px}
.p-title{width:78%;height:12px!important;background:rgba(30,18,56,.75)!important;margin-bottom:2px}
.p-sub{width:46%;margin-bottom:8px}
.p-line.short{width:62%}
.p-line.hl{position:relative}
.p-line.hl b{position:absolute;inset:-3px -4px;border-radius:4px;background:linear-gradient(90deg,rgba(255,138,61,.55),rgba(240,65,143,.5));transform:scaleX(0);transform-origin:left}
.p-chart{height:96px!important;background:none!important;display:flex!important;align-items:flex-end;gap:12px;margin:6px 0;padding:0 6px;border-bottom:1.5px solid rgba(30,18,56,.25)!important;border-radius:0!important}
.p-chart i{flex:1;height:var(--h);border-radius:4px 4px 0 0;background:linear-gradient(180deg,#F0418F,#9B4DFF)}
.fact-chip{left:430px;top:var(--y);display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;font-size:13px;font-weight:500;color:var(--ink);background:var(--glass-2);border:1px solid var(--glass-line);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);white-space:nowrap;opacity:0}
.fact-chip i{width:8px;height:8px;border-radius:50%;background:var(--play)}
.routes{left:0;top:0;width:640px;height:520px;overflow:visible}
.routes path{fill:none;stroke-width:2.5;stroke-linecap:round}
.r-main{stroke:#F0418F}
.r-alt{stroke:color-mix(in oklab,var(--ink) 30%,transparent);stroke-dasharray:6 8}
.tile{left:var(--x);top:var(--y);width:140px;height:84px;border-radius:10px;overflow:hidden;box-shadow:var(--shadow);opacity:0;transition:box-shadow .4s}
.tile canvas,.cut canvas,.master canvas{width:100%;height:100%;display:block}
.tile::after{content:"";position:absolute;inset:0;border-radius:10px;box-shadow:inset 0 0 0 3px #F0418F;opacity:var(--ring,0)}
.route-label{left:var(--x);top:var(--y);font-size:12.5px;font-weight:500;color:var(--muted);opacity:0}
.master{left:80px;top:40px;width:480px;height:270px;border-radius:14px;overflow:hidden;box-shadow:0 2px 4px rgba(30,18,56,.08),0 28px 70px rgba(90,44,140,.25);opacity:0}
.m-play{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.m-play svg{width:18px;height:18px;margin-left:3px}
.words{left:80px;top:334px;width:480px;opacity:0}
.w-row{display:flex;flex-wrap:nowrap;gap:6px 10px;font-family:var(--serif);font-size:26px;line-height:1.1;color:var(--ink);margin-bottom:12px}
.w-row .pz{font:500 11.5px/1 var(--sans);align-self:center;padding:5px 9px;border-radius:999px;color:#fff;background:var(--play-btn)}
.wave{position:relative;height:58px;display:flex;align-items:center;gap:4px;padding:0 4px;border-radius:10px;background:var(--glass-2);border:1px solid var(--glass-line)}
.wave i{flex:1;height:calc(var(--h)*80%);border-radius:2px;background:color-mix(in oklab,var(--ink) 28%,transparent)}
.wave .head{position:absolute;top:-6px;bottom:-6px;left:4px;width:2px;border-radius:2px;background:#F0418F;box-shadow:0 0 0 3px rgba(240,65,143,.18)}
.cut{left:var(--x);top:var(--y);opacity:0;border-radius:12px;box-shadow:var(--shadow)}
.cut>b{position:absolute;left:0;top:calc(100% + 10px);font:500 12.5px/1 var(--sans);color:var(--ink-2);white-space:nowrap}
.cut.reel{width:126px;height:224px;overflow:visible}
.cut.reel canvas,.cut.deck canvas{border-radius:12px}
.cut.carousel{width:150px;height:150px;box-shadow:none}
.cut.carousel>b{top:calc(100% + 30px)}
.cut.carousel .sq{position:absolute;inset:0;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);background:var(--glass-2)}
.cut.carousel .sq:nth-child(2){transform:translate(10px,10px);z-index:-1;opacity:.8}
.cut.carousel .sq:nth-child(3){transform:translate(20px,20px);z-index:-2;opacity:.6}
.cut.deck{width:180px;height:101px}
.cut.thread{width:180px;height:112px;padding:16px;background:var(--glass-2);border:1px solid var(--glass-line);display:flex;flex-direction:column;gap:9px}
.cut.thread i{display:block;height:7px;border-radius:4px;background:color-mix(in oklab,var(--ink) 20%,transparent)}
.cut.thread i.s{width:58%}
.cut.phone{width:92px;height:184px;border-radius:20px;padding:6px;background:#1b1430;box-shadow:0 18px 40px rgba(30,18,56,.3)}
.ph-screen{position:absolute;inset:6px;border-radius:15px;background:linear-gradient(160deg,#3b1d6e,#62227a 60%,#9c2660);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:18px 8px 12px;color:#fff}
.ph-code{font:600 12px/1 var(--sans);letter-spacing:.04em}
.ph-next{font:600 12px/1 var(--sans);padding:12px 0;width:100%;text-align:center;border-radius:10px;background:rgba(255,255,255,.18)}
.cut.phone>b{left:0}

/* ---------- edutainer ---------- */
.edu-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:24px;align-items:center}
.roles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 24px}
.roles li{font-family:var(--serif);font-style:italic;font-size:clamp(36px,3.6vw,56px);line-height:1.15;letter-spacing:-.02em;color:color-mix(in oklab,var(--ink) 56%,var(--bg));transition:color .5s var(--ease)}
.roles .e,.roles .x{background:var(--play);-webkit-background-clip:text;background-clip:text;color:color-mix(in oklab,var(--ink) 56%,var(--bg));transition:color .5s var(--ease)}
.roles li.is-on{color:var(--ink)}
.roles li.is-on .e,.roles li.is-on .x{color:transparent}
.agent{padding:24px;max-width:560px;justify-self:end;width:100%}
.ag-modes{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:color-mix(in oklab,var(--ink) 7%,transparent);font-size:13px;font-weight:500;margin-bottom:20px}
.ag-modes span{padding:6px 14px;border-radius:999px;color:var(--muted)}
.ag-modes .on{background:var(--glass-2);color:var(--ink);box-shadow:0 1px 3px rgba(30,18,56,.12)}
.ag-q{margin:0 0 14px auto;width:fit-content;max-width:86%;padding:12px 16px;border-radius:16px 16px 4px 16px;background:var(--ink);color:var(--bg);font-size:15.5px}
.ag-a{margin:0;min-height:76px;font-size:16.5px;line-height:1.55;color:var(--ink)}
.caret{display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-2px;background:#F0418F;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.ag-cite{display:inline-flex;align-items:center;gap:8px;margin:12px 0 18px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:500;border:1px solid var(--line);opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.ag-cite i{width:8px;height:8px;border-radius:50%;background:var(--play)}
.ag-acts{display:flex;gap:10px;opacity:0;transition:opacity .4s var(--ease)}
.ag-acts span{padding:9px 16px;border-radius:999px;font-size:14px;font-weight:500;border:1px solid var(--line)}
.ag-acts .ok{color:#fff;background:var(--ink);border-color:var(--ink)}
[data-theme=dark] .ag-acts .ok{color:var(--bg)}
.agent.is-answered .ag-cite{opacity:1;transform:none}
.agent.is-answered .ag-acts{opacity:1}
.agent.is-approved .ag-acts .ok{background:var(--play-btn);border-color:transparent;color:#fff}
.laws{list-style:none;margin:56px 0 0;padding:28px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:16px 48px;font-size:16px;color:var(--ink-2)}
.laws li{display:flex;align-items:center;gap:10px}
.laws svg{width:20px;height:20px;color:var(--magenta)}

/* ---------- present ---------- */
.present-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:24px;align-items:stretch}
.screenwall{position:relative;padding:18px;display:flex}
.slides{position:relative;flex:1;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#2a1450}
.slide{position:absolute;inset:0;width:100%;height:100%;clip-path:inset(0 0 0 100%);transition:clip-path .6s var(--ease)}
.slide.on{clip-path:inset(0)}
.slide.was{clip-path:inset(0);z-index:-1}
.slide-n{position:absolute;left:34px;bottom:30px;padding:5px 10px;border-radius:999px;font-size:12.5px;font-weight:500;color:#fff;background:rgba(14,10,28,.78);font-variant-numeric:tabular-nums}
.remote{position:absolute;right:-18px;bottom:-34px;width:168px;padding:16px 14px 14px;border-radius:28px;background:#1b1430;color:#fff;box-shadow:0 26px 60px rgba(30,18,56,.35);display:flex;flex-direction:column;gap:8px;align-items:stretch;border:5px solid #2a2140}
.r-room{font-size:11.5px;opacity:.65;text-align:center}
.r-code{font-weight:600;font-size:17px;letter-spacing:.06em;text-align:center;margin-bottom:6px}
.r-next{display:flex;align-items:center;justify-content:center;gap:8px;height:78px;border-radius:16px;font-weight:600;font-size:16px;background:linear-gradient(140deg,#D6286F,#8E35D9);transition:transform .12s var(--ease-ui),filter .2s}
.r-next svg{width:16px;height:16px}
.r-next.is-pressed{transform:scale(.95);filter:brightness(1.15)}
.r-prev{height:36px;display:grid;place-items:center;border-radius:12px;font-size:13px;background:rgba(255,255,255,.08)}
.post{padding:16px;display:flex;flex-direction:column;gap:16px}
.post-media{flex:1;min-height:200px;border-radius:12px;overflow:hidden}
.post-media canvas{width:100%;height:100%;display:block;object-fit:cover}
.post-meta{display:flex;flex-direction:column;gap:12px}
.post-kind{font-size:13px;font-weight:500;color:var(--muted)}
.state{display:inline-flex;align-items:center;gap:8px;width:fit-content;padding:7px 14px;border-radius:999px;font-size:14.5px;font-weight:500;background:color-mix(in oklab,var(--ink) 7%,transparent)}
.state i{width:9px;height:9px;border-radius:50%;background:var(--muted);transition:background .3s}
.state[data-s="3"] i,.state[data-s="4"] i{background:#F0418F}
.ladder{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12.5px;color:var(--muted)}
.ladder li{position:relative;padding-left:12px}
.ladder li::before{content:"";position:absolute;left:0;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:currentColor;opacity:.5}
.ladder li.is-done{color:var(--ink)}

/* ---------- close + footer ---------- */
.close{position:relative;min-height:calc(100svh - 90px);display:flex;align-items:center;padding:112px 0 80px;overflow:clip;isolation:isolate;background:var(--bg-2)}
.close::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(50% 60% at 50% 40%,var(--wash-b),transparent 70%),radial-gradient(40% 40% at 30% 80%,var(--wash-a),transparent 70%)}
.close .book{opacity:.9}
.close-body{display:flex;flex-direction:column;align-items:center;text-align:center}
.big-lockup{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:44px}
.big-lockup img{height:88px;width:auto}
.big-word{display:flex;flex-direction:column;align-items:center;gap:12px}
.big-word .wm{height:66px;aspect-ratio:564/172}
.big-word .tg{display:block;height:15px;aspect-ratio:500/60;background:var(--ink);-webkit-mask:url('logo/edt-tag.png') no-repeat center/contain;mask:url('logo/edt-tag.png') no-repeat center/contain;opacity:.85}
.close-h{max-width:20ch;margin-bottom:18px}
.close-note{color:var(--ink-2);font-size:17px;margin:0 0 32px}
.close .actions{justify-content:center}
.foot{border-top:1px solid var(--line);background:var(--bg-2)}
.foot-row{display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;padding:28px 0 32px;font-size:14px;color:var(--muted)}
.foot-row p{margin:0}
.foot-links{display:flex;gap:24px;flex-wrap:wrap}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .nav-links{gap:24px}
  .studio{transform:rotateY(-10deg) rotateX(4deg)}
}
@media (max-width:1023px){
  :root{--gut:48px}
  .nav-links{display:none}
  .hero{height:auto;min-height:100svh;max-height:none}
  .hero-grid{grid-template-columns:1fr;gap:40px;padding:calc(var(--nav) + 56px) 0 64px;align-content:start}
  .studio-wrap{justify-content:center;perspective:none}
  .studio{transform:none;width:min(100%,640px)}
  .studio-wrap{flex-direction:column;align-items:flex-end;gap:14px}
  .pause{position:static}
  .story-grid{grid-template-columns:1fr;gap:20px;align-content:start;padding-top:calc(var(--nav) + 12px)}
  .story-text .h2{font-size:clamp(34px,6vw,52px)}
  .steps{margin-top:18px}
  .rail{display:none}
  .stage-box{max-width:560px;margin:0 auto;width:100%}
  .edu-grid,.present-grid{grid-template-columns:1fr}
  .agent{justify-self:stretch;max-width:none}
  .remote{right:12px;bottom:-24px;width:140px}
  .r-next{height:60px}
}
@media (max-width:640px){
  :root{--gut:20px;--nav:60px}
  .lockup-mark{height:28px}.lockup .wm{height:25px}
  .signin{display:none}
  .nav .btn-sm{height:44px;padding:0 16px;font-size:13.5px}
  .nav .btn-sm .arr{display:none}
  .nav-right{gap:10px}
  .theme{width:44px;height:44px}
  .hero-grid{padding-top:calc(var(--nav) + 36px);gap:36px}
  .h1{font-size:clamp(46px,14.4vw,64px)}
  .lede{font-size:16.5px}
  .actions .btn{flex:1 1 100%;justify-content:center}
  .chips{gap:8px;top:14%}
  .chips li{width:52px;height:52px;border-radius:14px;font-size:10px;gap:3px}
  .chips svg{width:17px;height:17px}
  .thumbs{padding:6px;gap:6px;left:12%;right:0}
  .chrome{height:32px;font-size:11px}
  .tag{display:none}
  .bar{height:36px}
  .story-text .h2{font-size:34px}
  .story-pin{align-items:flex-start}
  .story-grid{padding-top:calc(var(--nav) + 28px)}
  .w-row{font-size:30px}
  .step h3{font-size:18px}.step p{font-size:15.5px}
  .sec{padding:96px 0 72px}
  .sec-head{margin-bottom:36px}
  .sec-lede{font-size:16.5px}
  .roles{gap:2px 16px}
  .roles li{font-size:30px}
  .remote{right:8px;bottom:-20px;width:104px;padding:10px 9px 9px;border-radius:20px;gap:5px;border-width:3px}
  .r-code{font-size:13px;margin-bottom:2px}.r-room{font-size:10.5px}
  .r-next{height:44px;font-size:14px;border-radius:12px}.r-prev{display:none}
  .cut>b,.route-label{font-size:21px}.cut>b{top:calc(100% + 8px)}.cut.carousel>b{top:calc(100% + 28px)}
  .fact-chip{font-size:19px;padding:10px 16px}
  .laws{flex-direction:column;gap:12px}
  .big-lockup img{height:80px}.big-word .wm{height:58px}.big-word .tg{height:11px}
  .foot-row{flex-direction:column;align-items:flex-start}
}
@media (max-height:780px) and (min-width:1024px){
  .h1{font-size:clamp(52px,6vw,88px)}
  .lede{margin-bottom:24px}
}

/* ---------- reduced motion / no JS fallbacks ---------- */
@media (prefers-reduced-motion:reduce){
  /* state stays visible; movement goes: no travel, no wipes, no blinking — colour/opacity feedback kept */
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .caret,.screen.is-cut::after{animation:none}
  .slide{transition:none}
  .btn,.btn:hover,.btn:active,.theme:hover,.pause:hover,.chips li.is-on,.thumbs li.is-on{transform:none}
  .nav-links a::after,.foot-links a::after,.signin::after{transition:none}
}
.story.is-static{height:auto}
.story.is-static .story-pin{position:relative;height:auto;padding:120px 0 96px}
.story.is-static .step{opacity:1;transform:none;grid-area:auto;margin-bottom:22px}
.story.is-static .rail{display:none}
html:not(.js) .story{height:auto}
html:not(.js) .story-pin{position:relative;height:auto;padding:120px 0 96px}
html:not(.js) .step{opacity:1;transform:none;grid-area:auto;margin-bottom:22px}
html:not(.js) .cut,html:not(.js) .route-label{opacity:1}
html:not(.js) .paper,html:not(.js) .fact-chip,html:not(.js) .routes,html:not(.js) .tile,html:not(.js) .master,html:not(.js) .words{display:none}