:root{--ink:#0f1013;--ink-2:#131518;--card:#17191d;--card-2:#1b1d22;--line:#26292e;--line-2:#383c43;--text:#f2f3f5;--soft:#b5bbc5;--mute:#7e8590;--accent:#5ca5ff;--accent-soft:rgba(92,165,255,.14);--rec:#ef4f4f;
--sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","PingFang SC","Hiragino Sans GB",sans-serif;
--serif:ui-serif,"New York","Iowan Old Style",Charter,Georgia,"Songti SC","STSong",serif;
--mono:ui-monospace,"SF Mono",Menlo,monospace;--ease:cubic-bezier(.2,.7,.2,1)}
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--text);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
::selection{background:rgba(92,165,255,.35)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{width:min(1180px,100% - 48px);margin:0 auto}
.narrow{width:min(820px,100% - 48px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:16px;top:-48px;z-index:50;padding:8px 14px;border-radius:8px;background:var(--text);color:var(--ink);font-weight:600}
.skip:focus{top:12px}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
:lang(zh-CN) em{font-style:normal;font-weight:500}

/* Header */
header{position:sticky;top:0;z-index:30;background:rgba(15,16,19,.72);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.01em}
.brand img{border-radius:7px}
nav{display:flex;align-items:center;gap:4px}
nav a{padding:6px 12px;border-radius:99px;font-size:13.5px;color:var(--soft);transition:color .2s,background .2s}
nav a:hover{color:var(--text);background:rgba(255,255,255,.06)}
nav .lang{margin-left:8px;border:1px solid var(--line-2);font:500 11.5px/1.6 var(--mono);letter-spacing:.08em;color:var(--text)}

/* Buttons */
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.primary{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:99px;background:var(--text);color:var(--ink);font-weight:600;font-size:15px;box-shadow:0 10px 30px -12px rgba(255,255,255,.35);transition:transform .25s var(--ease),box-shadow .25s}
.primary:hover{transform:translateY(-1px);box-shadow:0 14px 34px -12px rgba(255,255,255,.45)}
.release{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:99px;border:1px solid var(--line-2);color:var(--soft);font-size:15px;transition:border-color .2s,color .2s}
.release:hover{border-color:var(--mute);color:var(--text)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.dot.quiet{background:var(--mute);box-shadow:0 0 0 4px rgba(126,133,144,.16)}
.text-link{color:var(--accent);font-weight:500;border-bottom:1px solid rgba(92,165,255,.3);transition:border-color .2s}
.text-link:hover{border-color:var(--accent)}

/* Hero */
.hero{position:relative;padding:96px 0 40px;text-align:center;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px;background-position:center top;-webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 30%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 70% 55% at 50% 30%,#000 30%,transparent 75%)}
.hero::after{content:"";position:absolute;z-index:-1;left:50%;top:44%;width:1100px;height:620px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(92,165,255,.16),transparent);filter:blur(10px)}
.hero-icon{margin:0 auto 28px;border-radius:24px;filter:drop-shadow(0 24px 40px rgba(0,0,0,.55)) drop-shadow(0 0 60px rgba(92,165,255,.18))}
.eyebrow{display:inline-flex;align-items:center;gap:12px;margin-bottom:26px;padding:6px 14px 6px 12px;border:1px solid var(--line-2);border-radius:99px;background:rgba(23,25,29,.6);font:500 12px/1.4 var(--mono);letter-spacing:.06em;color:var(--soft)}
h1{font-size:clamp(42px,7vw,88px);line-height:1.02;letter-spacing:-.035em;font-weight:650}
h1 em,h2 em{background:linear-gradient(100deg,#fff 10%,#cfe3ff 45%,var(--accent) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
.intro{max-width:620px;margin:28px auto 36px;font-size:clamp(17px,1.7vw,19.5px);line-height:1.65;color:var(--soft)}
.toggle{display:none;margin:64px auto 28px;padding:4px;border:1px solid var(--line-2);border-radius:99px;background:rgba(23,25,29,.8)}
.js .toggle{display:inline-flex}
.toggle button{appearance:none;border:0;padding:8px 18px;border-radius:99px;background:none;color:var(--mute);font:500 13.5px var(--sans);cursor:pointer;transition:color .25s,background .25s}
.toggle button[aria-pressed=true]{background:var(--text);color:var(--ink)}
.toggle button:hover:not([aria-pressed=true]){color:var(--text)}
.stage{max-width:780px;margin:64px auto 0}
.js .stage{margin-top:0}
.device{padding:10px;border-radius:20px;background:linear-gradient(170deg,#2c2f35,#141619 60%);border:1px solid #3a3e45;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 60px 120px -40px rgba(0,0,0,.9),0 0 0 1px #000}
.device::before{content:"";position:absolute;top:4px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#0a0b0d;box-shadow:inset 0 0 0 1px #2b2e33}
.screen{display:grid;border-radius:10px;overflow:hidden;background:#000}
.screen>*{grid-area:1/1;width:100%;height:auto;opacity:0;transform:scale(1.01);transition:opacity .9s var(--ease),transform 1.2s var(--ease)}
.stage[data-mode=compact] .v-compact,.stage[data-mode=classroom] .v-classroom,.stage[data-mode=conversation] .v-conversation{opacity:1;transform:none}
/* Compact mode: the small window floating on a quiet desktop, with a hint of menu bar and another app behind it */
.v-compact{position:relative;display:grid;place-items:center;height:100%;background:radial-gradient(ellipse at 30% 20%,rgba(92,165,255,.16),transparent 60%),radial-gradient(ellipse at 80% 90%,rgba(140,110,255,.12),transparent 55%),linear-gradient(160deg,#1a1d24,#0c0d10)}
.v-compact::before{content:"";position:absolute;inset:0 0 auto;height:3.2%;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.06)}
.v-compact::after{content:"";position:absolute;left:7%;top:12%;width:46%;height:56%;border-radius:10px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025)}
.v-compact img{position:relative;z-index:1;width:52%;height:auto;margin:6% 0 0 22%;border-radius:10px;box-shadow:0 40px 80px -24px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.08)}
.base{position:relative;height:16px;margin:0 -5.5%;border-radius:2px 2px 18px 18px;background:linear-gradient(#3a3d43,#1d1f23 70%);box-shadow:0 30px 50px -20px #000}
.base::before{content:"";position:absolute;left:50%;top:0;width:16%;height:6px;transform:translateX(-50%);border-radius:0 0 8px 8px;background:#202226;box-shadow:inset 0 -1px 0 #45484e}
.stage-note{margin-top:36px;font:12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}

/* Corner registration marks */
.marks{position:relative}
.marks::after{content:"";position:absolute;inset:-12px;pointer-events:none;--m:var(--line-2);background:
 linear-gradient(var(--m),var(--m)) left top/14px 1px no-repeat,linear-gradient(var(--m),var(--m)) left top/1px 14px no-repeat,
 linear-gradient(var(--m),var(--m)) right top/14px 1px no-repeat,linear-gradient(var(--m),var(--m)) right top/1px 14px no-repeat,
 linear-gradient(var(--m),var(--m)) left bottom/14px 1px no-repeat,linear-gradient(var(--m),var(--m)) left bottom/1px 14px no-repeat,
 linear-gradient(var(--m),var(--m)) right bottom/14px 1px no-repeat,linear-gradient(var(--m),var(--m)) right bottom/1px 14px no-repeat}
.device.marks::after{inset:-18px}

/* Language marquee */
.langs{padding:48px 0 24px}
.langs-view{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.langs-track{display:flex;width:max-content;animation:marquee 60s linear infinite}
.langs-view:hover .langs-track{animation-play-state:paused}
.set{display:flex;align-items:center}
.set span{padding:0 22px;font:400 clamp(18px,2vw,24px)/1.5 var(--serif);color:var(--mute);white-space:nowrap;transition:color .3s}
.set span::after{content:"";display:inline-block;width:3px;height:3px;margin-left:44px;border-radius:50%;background:var(--line-2);vertical-align:middle}
.set span:hover{color:var(--text)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Sections */
.section{position:relative;padding:136px 0}
.section::before{content:"";position:absolute;top:0;left:50%;width:min(1180px,100% - 48px);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--line-2) 20%,var(--line-2) 80%,transparent)}
.sh{max-width:760px}
.sh-label{display:flex;align-items:center;gap:12px;margin-bottom:22px;font:500 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.idx{color:var(--accent)}
.rule{width:36px;height:1px;background:var(--line-2)}
.new{padding:4px 8px;border-radius:99px;border:1px solid rgba(92,165,255,.5);background:var(--accent-soft);color:var(--accent);letter-spacing:.12em}
h2{font-size:clamp(34px,4.6vw,58px);line-height:1.06;letter-spacing:-.03em;font-weight:650}
.lede{margin-top:24px;max-width:640px;font-size:clamp(16.5px,1.5vw,18.5px);line-height:1.7;color:var(--soft)}
h3{font-size:17px;line-height:1.35;letter-spacing:-.01em;font-weight:600}
.ic{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--line-2);background:linear-gradient(160deg,#20232a,#16181c);color:var(--soft);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.ic-svg{width:20px;height:20px}

/* Reveal and line drawing */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal .art :is(path,rect,circle):not(.dash){stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset 1.5s var(--ease),opacity .4s}
.js .reveal.in .art :is(path,rect,circle){stroke-dashoffset:0;opacity:1}
.js .reveal.done .art :is(path,rect,circle){stroke-dasharray:none}
.js .reveal .art .dash{opacity:0;transition:opacity 1.2s .4s}
.js .reveal.in .art .dash{opacity:1}
.art{width:100%;height:auto}
.art .f{fill:var(--card)}

/* 01 Scenarios */
.scenes{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:64px}
.scene{grid-column:span 2;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;background:var(--card);overflow:hidden;transition:border-color .3s,transform .4s var(--ease)}
.scene:nth-child(-n+2){grid-column:span 3}
.scene:hover{border-color:var(--line-2)}
.scene-art{position:relative;padding:28px 24px 8px;border-bottom:1px solid var(--line);background:radial-gradient(ellipse at 50% 0,rgba(92,165,255,.07),transparent 70%),linear-gradient(var(--ink-2),var(--card))}
.scene-art .art{max-width:420px;margin:0 auto}
.fig{position:absolute;top:14px;left:16px;font:500 10.5px var(--mono);letter-spacing:.14em;color:var(--mute)}
.scene-copy{padding:24px 26px 28px}
.chip{display:inline-block;margin-bottom:14px;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.04);border:1px solid var(--line);font:500 11.5px var(--mono);letter-spacing:.04em;color:var(--soft)}
.scene-copy h3{font-size:20px;margin-bottom:8px}
.scene-copy p:last-child{color:var(--soft);font-size:15px;line-height:1.65}

/* 02 Live demo */
.demo{display:grid;grid-template-columns:1fr 1.08fr;gap:80px;align-items:center}
.key{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:14px}
.key li{display:flex;align-items:center;gap:14px;color:var(--soft);font-size:15px}
.key b{color:var(--text);font-weight:600}
.sw{flex:none;width:28px;height:8px;border-radius:99px}
.sw.w{background:var(--text)}.sw.g{background:var(--mute)}.sw.a{background:var(--accent)}
.demo-fig{margin:0}
.demo-fig figcaption{margin-top:22px;text-align:right;font:11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
/* Scale replica of the compact window (real one is 1520×760 at 2×): sizes in cqw so it matches at any width. */
.win{position:relative;container-type:inline-size;aspect-ratio:2/1;display:grid;grid-template-rows:1fr 1fr auto;border:1px solid #3a3b40;border-radius:14px;background:#202125;box-shadow:0 50px 100px -40px rgba(0,0,0,.9),0 0 80px -30px rgba(92,165,255,.2);overflow:hidden;color:#e4e4e6}
.win-bar{position:absolute;inset:0 0 auto;height:3.7cqw;display:flex;align-items:center;gap:1.05cqw;padding-left:1.2cqw}
.win-bar>i{width:1.6cqw;height:1.6cqw;border-radius:50%;background:#ff5f57}
.win-bar>i:nth-child(2){background:#febc2e}.win-bar>i:nth-child(3){background:#28c840}
.win-bar .ic-svg{width:2cqw;height:2cqw;margin-left:.6cqw;color:#9a9ba0}
.win-bar span{position:absolute;left:0;right:0;text-align:center;font-size:max(10px,1.7cqw);font-weight:500;color:#d6d7da;pointer-events:none}
.win-tr,.win-or{overflow:hidden;padding:3.4cqw 2.5cqw 0;font-size:max(12px,2.5cqw);line-height:1.5}
.win-tr p,.win-or p{display:inline}
.win-tr p+p,.win-or p+p{margin-left:.3em}
.win-tr p.fresh{animation:fade .6s var(--ease) both}
@keyframes fade{from{opacity:0}}
.w{color:#e4e4e6;transition:color .45s}
.g{color:#8c8d92}
.win-foot{display:flex;align-items:center;padding:1.6cqw 2.2cqw;font-size:max(10px,1.55cqw);color:#c9cacd}
.langs{flex:1;display:flex;gap:2.4cqw}
.langs>span{display:flex;align-items:center;gap:.25em;white-space:nowrap}
.globe{font-style:normal;margin-right:.15em}
.langs .ic-svg{width:1.2em;height:1.2em}
.ctl{display:flex;align-items:center;gap:3cqw}
.ctl i{display:block;background:#e8524a}
.dot{width:1.3cqw;height:1.3cqw;border-radius:50%;animation:pulse 1.8s ease-in-out infinite}
.bars{width:1.6cqw;height:2.1cqw;background:linear-gradient(90deg,#e8524a 38%,transparent 38% 62%,#e8524a 62%)!important}
.sq{width:1.6cqw;height:1.6cqw;border-radius:2px}
@keyframes pulse{50%{opacity:.35}}
.tools{flex:1;display:flex;justify-content:flex-end;gap:2cqw}
.tools .ic-svg{width:2.1cqw;height:2.1cqw;min-width:13px;min-height:13px}
.tools{color:var(--mute)}

/* Plates and callouts */
.framed{margin:64px 0 0}
.shot{position:relative}
.shot img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line-2);box-shadow:0 60px 120px -50px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.6)}
.framed figcaption{display:flex;justify-content:space-between;gap:24px;margin-top:26px;font:500 11px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.framed figcaption span:first-child{color:var(--soft)}
.pin{position:absolute;display:grid;place-items:center;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--accent);color:#06111f;font:700 12px/1 var(--mono);box-shadow:0 0 0 4px rgba(92,165,255,.25),0 6px 16px rgba(0,0,0,.5);transition:transform .25s var(--ease),box-shadow .25s;cursor:default}
.pin.hot{transform:scale(1.25);box-shadow:0 0 0 7px rgba(92,165,255,.3),0 6px 16px rgba(0,0,0,.5)}
.legend{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:56px;}
.legend li{display:grid;grid-template-columns:30px 1fr;column-gap:16px;padding:18px 0;border-top:1px solid var(--line);transition:border-color .25s}
.legend li::before{content:attr(data-n);grid-row:1/3;display:grid;place-items:center;width:24px;height:24px;margin-top:1px;border-radius:50%;border:1px solid rgba(92,165,255,.55);font:600 11px/1 var(--mono);color:var(--accent);transition:background .25s,color .25s}
.legend li.hot{border-top-color:rgba(92,165,255,.5)}
.legend li.hot::before{background:var(--accent);color:#06111f}
.legend b{font-weight:600;font-size:15.5px}
.legend span{color:var(--soft);font-size:14.5px;line-height:1.6}
.callouts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.75fr) minmax(0,1fr);grid-template-areas:"l f r";column-gap:52px;align-items:center;width:min(1340px,100vw - 48px);margin:72px 0 0 calc(50% - min(670px,50vw - 24px))}
.callouts>figure{grid-area:f}.callouts>.l{grid-area:l}.callouts>.r{grid-area:r}
.callouts .legend{display:block;margin:0 0 54px}
.callouts .legend li{position:relative;padding:16px 0}
.callouts .legend li:last-child{border-bottom:1px solid var(--line)}
.callouts .legend b{font-size:14.5px}
.callouts .legend span{font-size:13.5px}
.callouts .l li{grid-template-columns:1fr 30px;text-align:right}
.callouts .l li::before{grid-column:2}
.callouts .l b,.callouts .l span{grid-column:1}
.callouts .legend b{grid-row:1}.callouts .legend span{grid-row:2}
.callouts .legend li::after{content:"";position:absolute;top:29px;width:34px;height:1px;background:var(--line-2);transition:background .25s,width .25s}
.callouts .l li::after{right:-44px;background:linear-gradient(90deg,var(--line-2),transparent)}
.callouts .r li::after{left:-44px;background:linear-gradient(270deg,var(--line-2),transparent)}
.callouts .legend li.hot::after{background:var(--accent)}

/* Tiles */
.tiles{display:grid;gap:16px}
.tiles.two{grid-template-columns:1fr 1fr}
.tiles.three{grid-template-columns:repeat(3,1fr);margin-top:64px}
.tile{padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--card);transition:border-color .3s,background .3s}
.tile:hover{border-color:var(--line-2);background:var(--card-2)}
.tile h3{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 8px}
.tile p{color:var(--soft);font-size:14.5px;line-height:1.6}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chips span{padding:3px 9px;border-radius:6px;border:1px solid var(--line-2);font:500 11.5px var(--mono);color:var(--soft)}
.keys{display:inline-flex;gap:4px;flex:none}
kbd{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 7px;border-radius:7px;border:1px solid #42464e;border-bottom-color:#2a2d33;background:linear-gradient(#2a2d33,#1c1e22);box-shadow:0 1px 0 #000,inset 0 1px 0 rgba(255,255,255,.07);font:500 12.5px/1 var(--sans);color:var(--text)}
kbd.wide{min-width:64px}
.window-row{display:grid;grid-template-columns:.92fr 1.08fr;gap:20px;margin-top:64px;align-items:stretch}
.art-card{position:relative;margin:0;display:flex;flex-direction:column;justify-content:center;padding:40px 28px 24px;border:1px solid var(--line);border-radius:18px;background:radial-gradient(ellipse at 70% 30%,rgba(92,165,255,.08),transparent 60%),var(--card)}
.art-card .art{max-width:440px;margin:0 auto}
.art-card figcaption{margin-top:20px;text-align:center;font:500 11.5px var(--mono);letter-spacing:.08em;color:var(--soft)}
.art-card.marks::after{inset:-8px}

/* 06 Audio */
.audio{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:center}
.audio .framed{margin:0}
.sources{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:64px}
.source{padding:26px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,var(--card),var(--ink-2))}
.source h3{margin:18px 0 8px}
.source p{color:var(--soft);font-size:14.5px;line-height:1.6}
.fine{margin-top:28px;color:var(--mute);font-size:14px}

/* 08 Shortcuts */
.cheat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:64px}
.panel{padding:26px 26px 14px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.panel h3{padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid var(--line);font:500 11.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.panel ul{list-style:none;margin:0;padding:0}
.panel li{display:flex;align-items:center;gap:12px;padding:11px 0;font-size:14.5px;color:var(--soft)}
.panel li>span:first-child{display:flex;flex-direction:column}
.panel small{font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.lead{flex:1;min-width:12px;height:1px;border-bottom:1px dotted #4a4e56;transform:translateY(3px)}

/* 09 Privacy */
.privacy-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:center}
.checks{list-style:none;margin:32px 0 28px;padding:0;display:grid;gap:12px}
.checks li{position:relative;padding-left:30px;color:var(--soft);font-size:15.5px}
.checks li::before{content:"";position:absolute;left:2px;top:.42em;width:12px;height:6px;border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(-45deg)}
.settings{margin-top:96px}
.settings-label{display:flex;align-items:center;gap:14px;margin-bottom:20px;font:500 11.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.settings-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:18px;background:var(--card);overflow:hidden}
.settings-grid article{padding:28px 24px}
.settings-grid article+article{border-left:1px solid var(--line)}
.settings-grid h3{margin:18px 0 8px}
.settings-grid p{color:var(--soft);font-size:14px;line-height:1.6}

/* 10 Steps */
.steps{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
.steps li{position:relative;padding:30px 28px 30px;border:1px solid var(--line);border-radius:18px;background:var(--card)}
.steps li::before{counter-increment:s;content:counter(s);display:block;margin-bottom:18px;font:italic 400 64px/1 var(--serif);background:linear-gradient(160deg,#fff,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.steps li:not(:last-child)::after{content:"";position:absolute;top:58px;right:-17px;width:18px;height:1px;background:var(--line-2)}
.steps h3{margin-bottom:10px;font-size:18px}
.steps p{color:var(--soft);font-size:14.5px;line-height:1.65}
.gentle{margin-top:28px;color:var(--mute);font-size:14.5px}

/* FAQ */
details{border-bottom:1px solid var(--line)}
.narrow .sh+details{margin-top:56px;border-top:1px solid var(--line)}
summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 4px;cursor:pointer;list-style:none;font-size:18px;font-weight:600;letter-spacing:-.01em;transition:color .2s}
summary::-webkit-details-marker{display:none}
summary:hover{color:#fff}
summary span:last-child{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);font-weight:300;font-size:20px;color:var(--soft);transition:transform .35s var(--ease),border-color .2s}
details[open] summary span:last-child{transform:rotate(45deg);border-color:var(--accent);color:var(--accent)}
.detail-copy{padding:0 4px 32px;color:var(--soft);font-size:15.5px;line-height:1.75}
.detail-copy p+p,.detail-copy ul+p{margin-top:12px}
.detail-copy strong{color:var(--text);font-weight:600}
.detail-copy a{color:var(--accent)}
.detail-copy h2{margin:32px 0 12px;font-size:17px;line-height:1.4;letter-spacing:-.005em;color:var(--text)}
.detail-copy .note{padding:14px 16px;border-radius:12px;border:1px solid var(--line-2);background:rgba(255,255,255,.025);color:var(--soft);font-size:14.5px}
.guide-steps,.guide-list{margin:0;padding-left:22px}
.guide-steps li,.guide-list li{margin-top:10px}
.guide-steps li::marker{color:var(--accent);font-family:var(--mono)}
.guide-list li::marker{color:var(--mute)}
.guide-steps p{margin-top:4px}

/* Closing and footer */
.closing{position:relative;padding:150px 0 140px;text-align:center;overflow:hidden;isolation:isolate}
.closing::before{content:"";position:absolute;z-index:-1;left:50%;top:0;width:900px;height:520px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(92,165,255,.14),transparent)}
.closing-icon{margin:0 auto 36px;border-radius:22px;filter:drop-shadow(0 20px 40px rgba(0,0,0,.6)) drop-shadow(0 0 50px rgba(92,165,255,.25))}
.closing h2{font-size:clamp(40px,6vw,76px)}
.closing p{margin:24px auto 36px;color:var(--soft);font-size:17px}
footer{border-top:1px solid var(--line);padding:36px 0 48px;color:var(--mute);font-size:13.5px}
.footer-inner{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.footer-inner .brand{color:var(--text)}
.footer-inner div{display:flex;flex-wrap:wrap;gap:22px;margin-left:auto}
.footer-inner div a:hover{color:var(--text)}
.final-note{margin-top:28px;padding-top:24px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.7;color:#646a74}
.not-found{min-height:100vh;display:grid;place-content:center;justify-items:center;gap:24px;padding:24px;text-align:center}
.not-found img{border-radius:20px}
.not-found h1{font-size:clamp(28px,4vw,40px)}
.not-found p{display:flex;gap:20px;align-items:center}

@media (max-width:1180px){
 .callouts{grid-template-columns:1fr 1fr;grid-template-areas:none;column-gap:40px;width:auto;margin-left:0}
 .callouts>figure{grid-column:1/-1;margin-bottom:28px}
 .callouts .legend{display:contents}
 .callouts .l li{grid-template-columns:30px 1fr;text-align:left}
 .callouts .l li::before{grid-column:1}.callouts .l b,.callouts .l span{grid-column:2}
 .callouts .legend li:last-child{border-bottom:0}
 .callouts .legend li::after{display:none}
}
@media (max-width:960px){
 nav a:not(.keep){display:none}
 .scenes{grid-template-columns:1fr 1fr}
 .scene,.scene:nth-child(-n+2){grid-column:auto}
 .scene:first-child{grid-column:1/-1}
 .demo,.audio,.privacy-layout,.window-row{grid-template-columns:1fr;gap:48px}
 .audio .sh{order:-1}
 .tiles.three,.cheat,.sources,.steps{grid-template-columns:1fr 1fr}
 .settings-grid{grid-template-columns:1fr 1fr}
 .settings-grid article:nth-child(3){border-left:0}
 .settings-grid article:nth-child(n+3){border-top:1px solid var(--line)}
 .steps li::after{display:none}
}
@media (max-width:760px){
 .wrap,.narrow,.section::before{width:calc(100% - 32px)}
 .hero{padding-top:64px}
 .hero-icon{width:84px;height:84px}
 .toggle{margin-top:48px}
 .toggle button{padding:8px 14px;font-size:13px}
 .device{padding:5px;border-radius:12px}
 .screen{border-radius:7px}
 .base{height:9px}
 .section{padding:96px 0}
 .scenes,.tiles.two,.tiles.three,.cheat,.sources,.steps,.legend,.settings-grid{grid-template-columns:1fr}
 .scene:first-child{grid-column:auto}
 .settings-grid article+article{border-left:0;border-top:1px solid var(--line)}
 .framed figcaption{flex-direction:column;gap:6px}
 .callouts{grid-template-columns:1fr}
 .pin{width:20px;height:20px;margin:-10px 0 0 -10px;font-size:10px;box-shadow:0 0 0 3px rgba(92,165,255,.25)}
 .ctl{margin:0 0 0 auto}
 .marks::after{inset:-8px}
 .device.marks::after{inset:-10px}
 .footer-inner div{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition:none!important}
 .js .reveal,.js .reveal .art *{opacity:1!important;transform:none!important;stroke-dasharray:none!important}
 .langs-track .set+.set{display:none}
 .langs-track{width:auto;flex-wrap:wrap;justify-content:center}
 .langs-track .set{flex-wrap:wrap;justify-content:center;row-gap:8px}
}
@media (prefers-reduced-transparency:reduce){header{background:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (forced-colors:active){.pin,.legend li::before{border:1px solid CanvasText}h1 em,h2 em,.steps li::before{color:CanvasText;background:none}}

/* Generated by build.py: callout positions, line-drawing stagger */
.fullscreen-classroom-1-zh{left:66.5%;top:7.6%}
.fullscreen-classroom-1-en{left:66.5%;top:7.6%}
.fullscreen-classroom-2-zh{left:89.8%;top:3.4%}
.fullscreen-classroom-2-en{left:89.8%;top:3.4%}
.fullscreen-classroom-3-zh{left:96.3%;top:3.4%}
.fullscreen-classroom-3-en{left:96.3%;top:3.4%}
.fullscreen-classroom-4-zh{left:3.1%;top:15.7%}
.fullscreen-classroom-4-en{left:3.1%;top:15.7%}
.fullscreen-classroom-5-zh{left:81%;top:63.8%}
.fullscreen-classroom-5-en{left:81%;top:63.8%}
.fullscreen-classroom-6-zh{left:10.5%;top:90.6%}
.fullscreen-classroom-6-en{left:10.5%;top:90.6%}
.fullscreen-classroom-7-zh{left:50%;top:90.6%}
.fullscreen-classroom-7-en{left:50%;top:90.6%}
.fullscreen-classroom-8-zh{left:93.8%;top:90.6%}
.fullscreen-classroom-8-en{left:93.8%;top:90.6%}
.fullscreen-conversation-1-zh{left:66.5%;top:7.6%}
.fullscreen-conversation-1-en{left:66.5%;top:7.6%}
.fullscreen-conversation-2-zh{left:81.3%;top:3.4%}
.fullscreen-conversation-2-en{left:81.3%;top:3.4%}
.fullscreen-conversation-3-zh{left:50%;top:7.6%}
.fullscreen-conversation-3-en{left:50%;top:7.6%}
.fullscreen-conversation-4-zh{left:9%;top:90.6%}
.fullscreen-conversation-4-en{left:9%;top:90.6%}
.fullscreen-conversation-5-zh{left:50%;top:90.6%}
.fullscreen-conversation-5-en{left:50%;top:90.6%}
.reader-1-zh{left:2.6%;top:5%}
.reader-1-en{left:2.6%;top:5%}
.reader-2-zh{left:49.2%;top:62%}
.reader-2-en{left:49.2%;top:62%}
.reader-3-zh{left:13.7%;top:85%}
.reader-3-en{left:13.7%;top:85%}
.reader-4-zh{left:50%;top:85%}
.reader-4-en{left:50%;top:85%}
.reader-5-zh{left:92.9%;top:85%}
.reader-5-en{left:92.9%;top:85%}
.library-1-zh{left:11.4%;top:3.8%}
.library-1-en{left:15.9%;top:3.8%}
.library-2-zh{left:60%;top:12.4%}
.library-2-en{left:60%;top:12.4%}
.library-3-zh{left:95.2%;top:10.6%}
.library-3-en{left:95.2%;top:10.6%}
.library-4-zh{left:72.5%;top:24.5%}
.library-4-en{left:72.5%;top:24.5%}
.library-5-zh{left:37.2%;top:41%}
.library-5-en{left:37.2%;top:44.5%}
@media (max-width:1180px){.callouts li[data-n="1"]{order:1}.callouts li[data-n="2"]{order:2}.callouts li[data-n="3"]{order:3}.callouts li[data-n="4"]{order:4}.callouts li[data-n="5"]{order:5}.callouts li[data-n="6"]{order:6}.callouts li[data-n="7"]{order:7}.callouts li[data-n="8"]{order:8}}
.js .reveal .art :nth-child(2){transition-delay:0.08s}
.js .reveal .art :nth-child(3){transition-delay:0.16s}
.js .reveal .art :nth-child(4){transition-delay:0.24s}
.js .reveal .art :nth-child(5){transition-delay:0.32s}
.js .reveal .art :nth-child(6){transition-delay:0.40s}
.js .reveal .art :nth-child(7){transition-delay:0.48s}
.js .reveal .art :nth-child(8){transition-delay:0.56s}
.js .reveal .art :nth-child(9){transition-delay:0.64s}
.js .reveal .art :nth-child(10){transition-delay:0.72s}
.js .reveal .art :nth-child(11){transition-delay:0.80s}
.js .reveal .art :nth-child(12){transition-delay:0.88s}
.js .reveal .art :nth-child(13){transition-delay:0.96s}
.js .reveal .art :nth-child(14){transition-delay:1.04s}
.js .reveal .art :nth-child(15){transition-delay:1.12s}
.js .reveal .art :nth-child(16){transition-delay:1.20s}
.js .reveal .art :nth-child(17){transition-delay:1.28s}
.js .reveal .art :nth-child(18){transition-delay:1.36s}
.js .reveal .art :nth-child(19){transition-delay:1.44s}
.js .reveal .art :nth-child(20){transition-delay:1.52s}
.js .reveal .art :nth-child(21){transition-delay:1.60s}
.js .reveal .art :nth-child(22){transition-delay:1.68s}
.js .reveal .art :nth-child(23){transition-delay:1.76s}
.js .reveal .art :nth-child(24){transition-delay:1.84s}
.js .reveal .art :nth-child(25){transition-delay:1.92s}