:root{--h:220;--fg:#eef2ff;--mut:rgba(238,242,255,.68);--acc:hsl(var(--h) 90% 68%);--font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,system-ui,sans-serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font:16px/1.65 var(--font);background:#05070d;color:var(--fg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:10px}
.bg{position:fixed;inset:0;z-index:-2;background:radial-gradient(900px circle at 82% 28%,hsl(var(--h) 80% 32%/.6),transparent 62%),radial-gradient(800px circle at 8% 92%,hsl(calc(var(--h) + 70) 75% 26%/.5),transparent 60%),#05070d}
#pcb{position:fixed;inset:0;width:100%;height:100%;z-index:-1}
#scene{transform-origin:50% 50%}
.tr{fill:none;stroke:var(--acc);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s cubic-bezier(.2,.7,.2,1);filter:drop-shadow(0 0 6px var(--acc));opacity:.85}
#vi{opacity:0;transition:opacity .8s}#vi circle{fill:none;stroke:var(--acc);stroke-width:3}
#chip{transform-box:fill-box;transform-origin:center;transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity .8s}
#chip .b{fill:rgba(var(--wr),.07);stroke:rgba(var(--wr),.45);stroke-width:2}
#chip .d{fill:rgba(var(--wr),.05);stroke:var(--acc);stroke-width:2}
#chip .p{stroke:rgba(var(--wr),.5);stroke-width:4;stroke-linecap:round}
#chip text{fill:var(--fg);text-anchor:middle;font:650 30px var(--font)}#chip .s{font:500 15px var(--font);fill:var(--mut)}
.swap{animation:sw .7s cubic-bezier(.2,.8,.2,1)}
@keyframes sw{from{opacity:0;transform:translateY(8px)}}
.g{background:linear-gradient(135deg,rgba(var(--wr),.17),rgba(var(--wr),.04));backdrop-filter:blur(26px) saturate(190%);-webkit-backdrop-filter:blur(26px) saturate(190%);border:1px solid rgba(var(--wr),.2);box-shadow:inset 0 1px 1px rgba(var(--wr),.55),inset 0 -1px 1px rgba(var(--wr),.1),0 24px 60px -24px rgba(0,0,0,.7);border-radius:28px}
.g::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(320px circle at var(--x,30%) var(--y,0%),rgba(var(--wr),.2),transparent 60%);opacity:.55;transition:opacity .3s}
.pn,.btn,.card{position:relative}
#nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:10;display:flex;padding:5px;border-radius:99px;max-width:calc(100% - 20px)}
#nav a,.seg button{position:relative;z-index:1;padding:8px 16px;border-radius:99px;color:var(--mut);text-decoration:none;font-size:.9rem;transition:color .3s}
#nav a[aria-current],#nav a:hover,.seg button:hover,.seg button[aria-pressed=true]{color:var(--fg)}
.th{position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:99px;background:rgba(var(--wr),.2);box-shadow:inset 0 1px 1px rgba(var(--wr),.6),0 4px 14px rgba(0,0,0,.3);transition:transform .5s cubic-bezier(.3,1.3,.5,1),width .5s cubic-bezier(.3,1.3,.5,1)}
.w{max-width:1040px;margin:auto;padding:0 22px}
section{padding:120px 0 0}
.hero{min-height:100vh;padding-top:130px}
h2{font:650 clamp(1.9rem,4vw,2.6rem)/1.15 var(--font);letter-spacing:-.025em;margin-bottom:28px}
.hc{max-width:640px;padding:42px}
.h{opacity:0;transform:translateY(24px) scale(.97);filter:blur(10px);animation:in 1.1s cubic-bezier(.2,.7,.2,1) .15s forwards}
.stats.h{animation-delay:.45s}
@keyframes in{to{opacity:1;transform:none;filter:none}}
.av{width:72px;height:72px;border-radius:50%;object-fit:cover;border:1px solid rgba(var(--wr),.35);margin-bottom:22px;display:block}
h1{font:700 clamp(2.2rem,5.6vw,3.7rem)/1.06 var(--font);letter-spacing:-.035em}
.lead{color:var(--mut);font-size:1.1rem;margin:20px 0 28px}
.btns{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-block;padding:11px 22px;border-radius:99px;border:1px solid rgba(var(--wr),.25);background:rgba(var(--wr),.1);color:var(--fg);text-decoration:none;font:inherit;font-size:.95rem;cursor:pointer;backdrop-filter:blur(12px);box-shadow:inset 0 1px 1px rgba(var(--wr),.5);transition:transform .35s cubic-bezier(.3,1.4,.5,1),background .3s}
.btn:hover{transform:translateY(-2px) scale(1.03);background:rgba(var(--wr),.18)}.btn:active{transform:scale(.96)}
.btn.p{background:var(--pbg);color:var(--pfg);border-color:var(--pbg)}
.stats{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;max-width:640px}
.stats>div{flex:1 1 130px;padding:16px 20px;border-radius:22px}
.stats b{display:block;font:650 1.8rem/1.1 var(--font);letter-spacing:-.02em}.stats span{color:var(--mut);font-size:.82rem;line-height:1.3;display:block}
.seg{position:relative;display:inline-flex;padding:5px;border-radius:99px;margin-bottom:22px;max-width:100%;overflow-x:auto}
.seg button{background:none;border:0;font:inherit;font-size:.9rem;cursor:pointer;white-space:nowrap}
#grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.card{text-align:left;padding:24px;border-radius:26px;color:inherit;font:inherit;cursor:pointer;opacity:0;animation:in .7s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i)*60ms);transition:transform .45s cubic-bezier(.3,1.3,.5,1),border-color .3s}
.card:hover{transform:translateY(-6px) scale(1.015);border-color:rgba(var(--wr),.45)}.card:hover::before{opacity:1}
.card>*{position:relative}
.t{color:var(--acc);font-size:.85rem;font-weight:600}
.card h3{font:650 1.2rem/1.25 var(--font);letter-spacing:-.015em;margin:6px 0 8px}
.card p{color:var(--mut);font-size:.94rem;margin-bottom:14px}
.ks{display:flex;flex-wrap:wrap;gap:6px}
.ks span,dd span{font-size:.8rem;border:1px solid rgba(var(--wr),.2);background:rgba(var(--wr),.07);padding:3px 11px;border-radius:99px;color:var(--mut)}
dialog{border:1px solid rgba(var(--wr),.25);color:var(--fg);max-width:580px;width:calc(100% - 28px);padding:0;margin:auto;background:linear-gradient(135deg,rgba(40,48,70,.7),rgba(15,20,32,.78))}
dialog[open]{animation:sheet .55s cubic-bezier(.2,1.1,.3,1)}
dialog::backdrop{background:rgba(3,5,10,.55);backdrop-filter:blur(8px)}
@keyframes sheet{from{opacity:0;transform:translateY(60px) scale(.94)}}
.in{padding:34px;position:relative}
.in h3{font:650 1.6rem/1.2 var(--font);letter-spacing:-.02em;margin:6px 0 12px}
.in ul{margin:14px 0 18px 18px;color:var(--mut)}.in li{margin:6px 0}
.x{position:absolute;right:18px;top:14px;background:none;border:0;color:var(--mut);font-size:28px;cursor:pointer;line-height:1}
.dn{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.tls{padding:34px 34px 4px 58px;--tp:0}
.tls::after{content:"";position:absolute;left:30px;top:40px;bottom:40px;width:2px;border-radius:2px;background:linear-gradient(var(--acc),var(--acc)) 0 0/100% calc(var(--tp)*100%) no-repeat,rgba(var(--wr),.15);box-shadow:0 0 12px var(--acc)}
.tl{position:relative;display:grid;grid-template-columns:150px 1fr;gap:6px 28px;padding-bottom:34px}
.tl::before{content:"";position:absolute;left:-34px;top:8px;width:11px;height:11px;border-radius:50%;background:var(--bgc);border:2px solid var(--acc)}
.tl small{color:var(--mut);padding-top:3px}.tl h3{font:650 1.15rem var(--font);letter-spacing:-.01em}.tl p{color:var(--mut);max-width:38em}
.sk{padding:10px 30px}
.sk>div{display:grid;grid-template-columns:170px 1fr;gap:24px;padding:20px 0;border-bottom:1px solid rgba(var(--wr),.12)}.sk>div:last-child{border:0}
dt{color:var(--mut)}dd{display:flex;flex-wrap:wrap;gap:8px}
dd span{font-size:.9rem;padding:5px 14px;color:var(--fg);transition:transform .35s cubic-bezier(.3,1.4,.5,1),background .3s}dd span:hover{transform:translateY(-3px) scale(1.05);background:rgba(var(--wr),.16)}
.cc{padding:clamp(28px,6vw,64px)}
.ct{font:650 clamp(1.6rem,4vw,2.5rem)/1.25 var(--font);letter-spacing:-.03em;max-width:18em;margin-bottom:28px}
footer{text-align:center;color:var(--mut);font-size:.88rem;padding:70px 20px 30px}
#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);padding:10px 22px;border-radius:99px;font-size:.9rem;opacity:0;pointer-events:none;transition:all .4s cubic-bezier(.3,1.3,.5,1);z-index:20}
#toast.on{opacity:1;transform:translate(-50%,0)}
.js .rv{opacity:0;transform:translateY(26px) scale(.97);filter:blur(10px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .9s}
.js .rv.vis{opacity:1;transform:none;filter:none}
@media(max-width:700px){#nav a{padding:8px 11px;font-size:.82rem}.hc{padding:28px}.tl,.sk>div{grid-template-columns:1fr;gap:4px}.tls{padding:28px 24px 0 46px}.tls::after{left:22px}#chip{opacity:.5}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.h,.card,.js .rv{opacity:1!important;transform:none!important;filter:none!important}html{scroll-behavior:auto}}

/* v3: iOS liquid glass, hero, education, themes */
:root{--wr:255,255,255;--pbg:#fff;--pfg:#0a0f1a;--bgc:#05070d}
.g{background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.035) 55%,rgba(255,255,255,.08));backdrop-filter:blur(14px) saturate(200%) brightness(1.1);-webkit-backdrop-filter:blur(14px) saturate(200%) brightness(1.1);border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 2px 2px 1px -1px rgba(255,255,255,.8),inset -2px -2px 1px -1px rgba(255,255,255,.35),inset 0 0 22px rgba(255,255,255,.06),0 20px 44px -18px rgba(0,0,0,.6)}
.hw{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:26px;align-items:center;max-width:1160px}
.hc{max-width:none}.hw .stats{grid-column:1/-1;max-width:none}
.pf{position:relative;justify-self:center;width:min(100%,340px)}.pf.h{animation-delay:.3s}
.ph{padding:12px;border-radius:38px}
.ph .av{width:100%;height:auto;aspect-ratio:1;border-radius:28px;margin:0;border:0;position:relative}
.cap{display:grid;padding:14px 10px 6px;position:relative}.cap span{color:var(--mut);font-size:.9rem}
.fb{position:absolute;padding:8px 16px;border-radius:99px;font-size:.86rem;font-weight:600;color:var(--fg);white-space:nowrap}
.f1{top:24px;left:-34px}.f2{top:44%;right:-30px}.f3{bottom:96px;left:-28px}
.edu{padding:34px 34px 4px}.edu .tl::before{display:none}h2.s2{margin-top:56px}
.in{max-height:88vh;overflow:auto}
.in h4{font:600 .8rem var(--font);color:var(--mut);margin:18px 0 6px}
.rs{margin-top:14px;padding:10px 14px;border-radius:14px;background:rgba(var(--wr),.08);font-size:.92rem}
#tb{position:fixed;top:14px;right:16px;z-index:11;width:44px;height:44px;border-radius:50%;color:var(--fg);font-size:18px;cursor:pointer;display:grid;place-items:center}
#tm{position:fixed;top:66px;right:16px;z-index:11;padding:8px;border-radius:22px;display:grid;gap:2px;min-width:190px}
#tm[hidden]{display:none}
#tm button{display:flex;align-items:center;gap:10px;background:none;border:0;color:var(--fg);font:inherit;font-size:.92rem;padding:9px 12px;border-radius:14px;cursor:pointer;text-align:left}
#tm button::before{content:"";width:16px;height:16px;border-radius:50%;border:1px solid rgba(var(--wr),.35);background:var(--sw)}
#tm button:hover,#tm button[aria-checked=true]{background:rgba(var(--wr),.12)}
[data-t=glass]{--sw:linear-gradient(135deg,#2457f5,#8a3df5)}[data-t=black]{--sw:#000}[data-t=white]{--sw:#fff}[data-t=matte-dark]{--sw:#26272c}[data-t=matte-light]{--sw:#dfe1e5}
[data-theme=black]{--fg:#f5f5f7;--mut:#8e8e93;--acc:#8ab4ff;--p:#0b0b0c;--pb:#232326;--ps:none;--bgc:#000;--pbg:#f5f5f7;--pfg:#000}
[data-theme=white]{--fg:#111114;--mut:#6b6b73;--acc:#0a63ff;--wr:0,0,0;--p:#fff;--pb:#e4e4e9;--ps:0 10px 30px -12px rgba(0,0,0,.16);--bgc:#fff;--pbg:#111114;--pfg:#fff}
[data-theme=matte-dark]{--fg:#e8e9ec;--mut:#9a9ca4;--acc:#7fb0ff;--p:#1f2024;--pb:#2d2e34;--ps:0 14px 30px -14px rgba(0,0,0,.6);--bgc:#16171a;--pbg:#e8e9ec;--pfg:#16171a}
[data-theme=matte-light]{--fg:#1d1f24;--mut:#62666f;--acc:#2f5bd9;--wr:0,0,0;--p:#f1f2f4;--pb:#d9dbe0;--ps:0 12px 26px -14px rgba(30,40,60,.25);--bgc:#e4e6ea;--pbg:#1d1f24;--pfg:#f1f2f4}
html:not([data-theme=glass]) body,html:not([data-theme=glass]) .bg{background:var(--bgc)}
html:not([data-theme=glass]) .g{background:var(--p);backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid var(--pb);box-shadow:var(--ps)}
html:not([data-theme=glass]) .g::before{display:none}
html:not([data-theme=glass]) dialog{background:var(--p)}
html:not([data-theme=glass]) .tr{filter:none;opacity:.5}
html:not([data-theme=glass]) .btn,html:not([data-theme=glass]) .th{box-shadow:none;backdrop-filter:none}
@media(max-width:700px){.hw{grid-template-columns:1fr}.pf{width:min(100%,300px)}.f1{left:-8px}.f2{right:-8px}.f3{left:-8px}#tb{top:auto;bottom:18px}#tm{top:auto;bottom:72px}}