:root{--bg:#05070d;--navy:#0a1124;--navy2:#0f1830;--ink:#f3f5ff;--mut:#9eaacb;--mut2:#7d89aa;--cyan:#3ee6f2;--lav:#b9a8ff;--ok:#8ff0c4;--warn:#ffc27a;--hot:#ff7b98;--edge:rgba(255,255,255,.1);--edge2:rgba(185,168,255,.28);--glass:rgba(255,255,255,.045);
--disp:ui-sans-serif,system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
--body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:14px}
html.calm{scroll-behavior:auto}
html{background:#020309}
body{margin:0 auto;max-width:480px;min-height:100vh;position:relative;box-shadow:0 0 0 1px #111830;background:var(--bg);color:var(--ink);font:16px/1.55 var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}a{color:inherit}
button,a,input,select,label{touch-action:manipulation}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.wrap{width:100%;max-width:1100px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px;top:0}.skip:focus{left:12px;top:12px;z-index:99999;background:#fff;color:#000;padding:12px;border-radius:8px}
[hidden]{display:none!important}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:14px 20px;border-radius:15px;font:700 15px/1.2 var(--disp);letter-spacing:.05em;text-decoration:none;border:0;text-align:center;transition:transform .2s,box-shadow .2s}
.btn:active{transform:scale(.98)}
.btn-p{background:linear-gradient(110deg,#cbbcff 0%,#8fd8ff 50%,#4ee9f3 100%);color:#04101c;box-shadow:0 12px 40px -10px rgba(78,233,243,.7)}
.btn-g{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.24);color:#fff}
.btn-s{min-height:44px;padding:10px 14px;border-radius:12px;font:600 14px/1.2 var(--body);background:#17213d;border:1px solid #34436c;color:#e8edff;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}
.btn-s.solid{background:#e9ecff;color:#0a1124;border-color:#e9ecff}
.btn-s:disabled{opacity:.45;cursor:not-allowed}
.demo-tag{display:inline-flex;align-items:center;gap:6px;font:700 10px/1 var(--body);letter-spacing:.14em;color:#ffd9a3;background:rgba(255,194,122,.1);border:1px solid rgba(255,194,122,.35);padding:6px 8px;border-radius:99px;white-space:nowrap}
.kick{font:700 11px/1.3 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin:0 0 12px}
.h2{font:700 clamp(30px,8.4vw,40px)/1.02 var(--disp);letter-spacing:-.035em;margin:0 0 14px;text-transform:uppercase}
.lede{color:var(--mut);max-width:640px;margin:0 0 24px}
.grad{background:linear-gradient(100deg,#fff 0%,#cdbfff 40%,#5ee9f3 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hook{margin:26px 0 0;font:500 clamp(19px,5.2vw,25px)/1.3 var(--disp);letter-spacing:-.02em;color:#e9e5ff;padding-left:14px;border-left:3px solid var(--lav)}
.toast{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;background:#eef2ff;color:#0a1124;padding:11px 16px;border-radius:12px;font-size:14px;font-weight:600;z-index:200;transition:.25s;box-shadow:0 10px 30px #0008;max-width:calc(100vw - 32px);text-align:center}
.toast.on{opacity:1;transform:translateX(-50%)}
.progress{position:fixed;top:0;left:max(0px,calc(50% - 240px));height:3px;width:min(100%,480px);transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--lav),var(--cyan));z-index:120;pointer-events:none}

/* ================= INTRO ================= */
#intro{display:none}
html.intro-on #intro{display:block}
html.intro-on body{overflow:hidden;height:100%}
html.intro-on .bnav,html.intro-on .progress{opacity:0;pointer-events:none}
#intro{position:fixed;inset:0;z-index:1000;background:#020309;overflow:hidden;opacity:1;transition:opacity .38s ease}
#intro.leaving{opacity:0}
.in-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 55% at 50% 42%,#1b2350 0%,#0a0e22 45%,#020309 80%)}
#intro.p2 .in-bg,#intro.p3 .in-bg{background:radial-gradient(ellipse 80% 60% at 60% 36%,#273b71 0%,transparent 55%),radial-gradient(ellipse 70% 50% at 30% 70%,#35265f 0%,transparent 55%),#05070d}
.in-stage{position:absolute;top:0;bottom:0;left:50%;width:min(100vw,480px,calc(100vh * 9 / 16));width:min(100vw,480px,calc(100dvh * 9 / 16));transform:translateX(-50%);perspective:900px;overflow:hidden}
.in-grid{position:absolute;left:-30%;right:-30%;bottom:-10%;height:60%;background-image:linear-gradient(rgba(140,170,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(140,170,255,.35) 1px,transparent 1px);background-size:44px 44px;transform:rotateX(72deg);transform-origin:50% 100%;opacity:.0;-webkit-mask-image:linear-gradient(transparent,#000 70%);mask-image:linear-gradient(transparent,#000 70%);transition:opacity .6s}
#intro.p2 .in-grid{opacity:.35}#intro.p3 .in-grid{opacity:.18}
.in-cam{position:absolute;inset:0;transform-style:preserve-3d}
#intro.p1 .in-cam{animation:camPush 1.5s cubic-bezier(.3,.1,.3,1) forwards}
@keyframes camPush{0%{transform:scale(.92) rotate(-2deg)}70%{transform:scale(1.12) rotate(3deg)}85%{transform:scale(1.14) rotate(2deg) translateX(-3px)}100%{transform:scale(1.18) rotate(4deg) translateX(3px)}}
#intro.p2 .in-cam{transform:scale(1) rotateX(10deg);transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
#intro.p2.settle .in-cam{transform:none}
#intro.p3 .in-cam{transform:none}
#intro.push .in-cam{transform:scale(1.7);transition:transform .5s cubic-bezier(.6,0,.4,1)}
.ic{position:absolute;left:50%;top:50%;width:min(160px,41%);margin-left:calc(min(160px,41%) / -2);margin-top:-25px;height:50px;display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:12px;background:rgba(20,28,54,.92);border:1px solid rgba(160,180,255,.25);box-shadow:0 10px 26px rgba(0,0,0,.5);font:600 10.5px/1.25 var(--body);color:#e8edff;opacity:0;will-change:transform,opacity}
.ic i{font-style:normal;flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:#24305a;font-size:13px}
.ic span{min-width:0;overflow:hidden}.ic b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10.5px}.ic small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#9eaacb;font-size:9.5px;font-weight:500}
.ic em{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--hot);color:#fff;font:700 10px/18px var(--body);font-style:normal;text-align:center}
.ic.hot{border-color:var(--cyan);box-shadow:0 0 0 1px rgba(62,230,242,.5),0 0 26px rgba(62,230,242,.45)}
.ic.hot em{background:var(--cyan);color:#03121a}
.lowfx .ic{box-shadow:none}
.in-hush{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
#intro.hush .in-hush{opacity:.72;transition:opacity .12s}
#intro.p2:not(.hush) .in-hush{opacity:0;transition:opacity .5s}
.in-beam{position:absolute;left:-60%;top:-20%;width:46%;height:140%;background:linear-gradient(90deg,transparent,rgba(130,110,255,.0) 20%,rgba(150,130,255,.55) 45%,rgba(120,240,255,.95) 50%,rgba(150,130,255,.55) 55%,transparent 80%);filter:blur(6px);transform:rotate(18deg) translateX(0);opacity:0;mix-blend-mode:screen;pointer-events:none}
#intro.beam .in-beam{animation:beam .75s cubic-bezier(.5,0,.3,1) forwards}
@keyframes beam{0%{opacity:0;transform:rotate(18deg) translateX(0)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:rotate(18deg) translateX(390%)}}
.in-lanes{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s}
#intro.lanes .in-lanes{opacity:1}
.in-lanes span{position:absolute;top:calc(50% - 168px);font:700 10px/1 var(--body);letter-spacing:.2em;padding:6px 9px;border-radius:99px}
.in-lanes .l1{left:7%;color:#03121a;background:var(--cyan)}.in-lanes .l2{right:7%;color:#cfd6ff;border:1px solid #4a5585}
.in-t{position:absolute;left:6%;right:6%;margin:0;text-align:center;font:700 min(11.4vw,6.6vh,55px)/.95 var(--disp);letter-spacing:-.04em;text-transform:uppercase;color:#fff;opacity:0;pointer-events:none;text-shadow:0 4px 40px rgba(0,0,0,.8)}
.in-t.t1{top:50%;transform:translateY(-50%) scale(1.35);font-size:min(13.5vw,7.8vh,65px)}
#intro.t1on .t1{animation:slam .45s cubic-bezier(.2,1.4,.4,1) forwards}
#intro.t1off .t1{opacity:0!important;transform:translateY(-50%) scale(.9)!important;filter:blur(8px);transition:.25s;animation:none}
@keyframes slam{0%{opacity:0;transform:translateY(-50%) scale(1.6);letter-spacing:.1em;filter:blur(10px)}100%{opacity:1;transform:translateY(-50%) scale(1);letter-spacing:-.04em;filter:blur(0)}}
.in-t.t1 .glitch{color:var(--hot)}
.in-t.t2{top:9%;transform:translateY(16px);font-size:min(10.4vw,6vh,50px)}
#intro.t2on .t2{opacity:1;transform:none;transition:opacity .45s,transform .7s cubic-bezier(.2,.8,.2,1)}
#intro.t2off .t2{opacity:0;transition:opacity .25s}
.in-t.t2 span{background:linear-gradient(100deg,#d6caff,#5ee9f3);-webkit-background-clip:text;background-clip:text;color:transparent}
.in-t.t3{top:8%;transform:translateY(16px)}
.in-t.t3 h2{margin:0;font:inherit;font-size:min(11.4vw,6.6vh,55px)}
.in-t.t3 p{margin:14px 0 0;font:700 11px/1.3 var(--body);letter-spacing:.32em;color:var(--cyan)}
#intro.t3on .t3{opacity:1;transform:none;transition:opacity .5s,transform .7s cubic-bezier(.2,.8,.2,1)}
.in-hub{position:absolute;left:7%;right:7%;top:33%;padding:14px;border-radius:22px;background:linear-gradient(160deg,rgba(28,38,74,.94),rgba(12,17,38,.96));border:1px solid rgba(160,180,255,.3);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px rgba(120,110,255,.25);opacity:0;transform:scale(.8) translateY(30px);pointer-events:none}
#intro.hub .in-hub{opacity:1;transform:none;transition:opacity .45s,transform .8s cubic-bezier(.2,.9,.2,1)}
.hub-head{display:flex;align-items:center;gap:8px;font:700 10px/1 var(--body);letter-spacing:.16em;color:#cdd6ff;margin-bottom:12px}
.hub-head .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok)}
.hub-head span:last-child{margin-left:auto;color:var(--mut2)}
.hub-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hp{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:9px;min-height:74px;font-size:10px;color:#dfe5ff;opacity:0;transform:translateY(10px)}
#intro.hub .hp{opacity:1;transform:none;transition:.5s cubic-bezier(.2,.8,.2,1)}
#intro.hub .hp:nth-child(2){transition-delay:.08s}#intro.hub .hp:nth-child(3){transition-delay:.16s}#intro.hub .hp:nth-child(4){transition-delay:.24s}#intro.hub .hp:nth-child(5){transition-delay:.32s}
.hp p{margin:0 0 7px;font:700 8.5px/1 var(--body);letter-spacing:.18em;color:var(--cyan)}
.hp i{display:block;height:6px;border-radius:3px;margin:5px 0;width:var(--w);background:linear-gradient(90deg,var(--lav),var(--cyan))}
.hp span{display:block;margin:3px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp em{display:block;height:5px;border-radius:3px;background:#3a4672;margin:6px 0;width:100%}.hp em.s{width:60%}
.hp b{display:block;margin-top:6px;color:var(--warn);font-weight:600}
.hp.wide{grid-column:1/-1;min-height:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}.hp.wide p{width:100%}
.tg{display:inline-block!important;padding:4px 8px;border-radius:99px;font-weight:700;font-size:9px;margin:0!important}
.tg.on{background:rgba(143,240,196,.15);color:var(--ok)}.tg.ask{background:rgba(255,194,122,.15);color:var(--warn)}.tg.off{background:rgba(255,123,152,.14);color:var(--hot)}
#inVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#020309}
.in-poster{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 24px calc(48px + env(safe-area-inset-bottom));gap:12px;background:linear-gradient(transparent 40%,rgba(2,3,9,.85))}
.in-poster.img{background-size:cover;background-position:center}
#intro.poster .in-t.t3,#intro.poster .in-hub{opacity:1;transform:none}
#intro.poster .hp{opacity:1;transform:none}
#intro.poster .ic{display:none}
.in-poster .btn{width:min(340px,100%)}
.in-skip{position:absolute;top:calc(12px + env(safe-area-inset-top));right:max(12px,calc(50% - 228px));z-index:5;min-height:44px;min-width:44px;padding:10px 16px;border-radius:99px;background:rgba(10,14,30,.6);border:1px solid rgba(255,255,255,.3);color:#fff;font:600 13px/1 var(--body);letter-spacing:.04em;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.in-brand{position:absolute;top:calc(24px + env(safe-area-inset-top));left:max(18px,calc(50% - 222px));z-index:5;font:700 12px/1 var(--disp);letter-spacing:.2em;color:#cfd6ff;opacity:.85}
.in-brand em{font-style:normal;color:var(--cyan)}
.in-bar{position:absolute;left:max(18px,calc(50% - 222px));right:max(18px,calc(50% - 222px));bottom:calc(16px + env(safe-area-inset-bottom));height:2px;background:rgba(255,255,255,.14);border-radius:2px;overflow:hidden;z-index:5}
.in-bar span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--lav),var(--cyan))}
#intro.run .in-bar span{transform:scaleX(1);transition:transform 5s linear}

/* ================= HERO ================= */
.hero{position:relative;overflow:hidden;background:radial-gradient(ellipse 80% 60% at 60% 36%,#273b71 0%,transparent 55%),radial-gradient(ellipse 70% 50% at 30% 70%,#35265f 0%,transparent 55%),#05070d;padding-bottom:56px}
.hero:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(150,170,220,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(150,170,220,.13) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:linear-gradient(transparent 25%,#000 95%);mask-image:linear-gradient(transparent 25%,#000 95%);pointer-events:none}
.top{display:flex;align-items:center;justify-content:space-between;padding-top:calc(12px + env(safe-area-inset-top));padding-bottom:12px;position:relative;z-index:3}
.brand{font:700 13px/1 var(--disp);letter-spacing:.2em;text-decoration:none}
.brand em{font-style:normal;color:var(--cyan)}
.top-r{display:flex;gap:8px;align-items:center}
.top-link{display:none;font-size:13px;color:var(--mut);text-decoration:none;padding:12px 8px}
.lang{min-height:44px;min-width:56px;padding:8px 14px;border-radius:99px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);color:#fff;font-weight:600;font-size:14px}
.hero-in{position:relative;z-index:2;padding-top:18px}
.eyebrow{font:700 11.5px/1.3 var(--body);letter-spacing:.24em;color:var(--cyan);margin:0 0 14px}
.h1{font:700 clamp(40px,11.2vw,54px)/.96 var(--disp);letter-spacing:-.045em;margin:0 0 18px;text-transform:uppercase;max-width:15ch}
:lang(zh-CN) .h1{font-size:clamp(40px,11vw,53px);line-height:1.08;letter-spacing:-.02em}
.hero-sub{color:#c4cde6;font-size:16px;margin:0 0 22px;max-width:480px}
.hero-sub b{color:#fff;font-weight:600}
.cta{display:grid;gap:10px;max-width:440px}
.micro{font-size:12px;color:var(--mut2);margin:12px 0 0}
.hl{animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
.hl:nth-child(2){animation-delay:.08s}.hl:nth-child(3){animation-delay:.18s}.hl:nth-child(4){animation-delay:.28s}.hl:nth-child(5){animation-delay:.36s}.hl:nth-child(6){animation-delay:.5s}
html.intro-on .hl{animation-play-state:paused}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.ws{margin-top:34px;max-width:460px;padding:16px;border-radius:20px;background:rgba(14,20,42,.78);border:1px solid var(--edge2);box-shadow:0 30px 70px -20px rgba(0,0,0,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ws-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font:700 10px/1 var(--body);letter-spacing:.2em;color:var(--mut)}
.ws-row{display:flex;align-items:center;gap:12px;padding:12px;border-radius:13px;background:rgba(255,255,255,.04);margin-bottom:8px;font-size:14.5px;opacity:0;transform:translateX(-14px);animation:wsIn .55s cubic-bezier(.2,.8,.2,1) forwards}
.ws-row:nth-of-type(2){animation-delay:.9s}.ws-row:nth-of-type(3){animation-delay:1.25s}.ws-row:nth-of-type(4){animation-delay:1.6s}
html.intro-on .ws-row{animation-play-state:paused}
@keyframes wsIn{to{opacity:1;transform:none}}
.ws-row i{font-style:normal;width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:#202b52;color:var(--lav)}
.ws-row span{flex:1}
.ws-row em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--warn);text-transform:uppercase}
.ws-row.done{background:rgba(62,230,242,.08);box-shadow:inset 0 0 0 1px rgba(62,230,242,.35)}
.ws-row.done em{color:var(--ok)}
.btn-ws{margin-top:6px;width:100%;background:transparent;border:1px solid var(--cyan);color:var(--cyan);animation:pulse 2.4s ease-in-out 2.2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(62,230,242,.0)}50%{box-shadow:0 0 0 6px rgba(62,230,242,.14)}}
.hero-orb{position:absolute;right:-120px;top:120px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#c6fdff 0,#6bb8f8 14%,#8465ce 40%,#0c1742 72%);opacity:.32;filter:blur(2px);z-index:1;pointer-events:none}

/* ================= SIMULATOR ================= */
.sim{padding:70px 0 80px;background:linear-gradient(180deg,#05070d,#080d1b)}
.pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.pk{position:relative;text-align:left;padding:16px 14px;min-height:112px;border-radius:18px;background:#0e1530;border:1px solid #26325a;color:#fff;display:flex;flex-direction:column;justify-content:space-between;gap:10px;transition:transform .2s,border-color .2s,background .2s}
.pk i{font-style:normal;font-size:22px;color:var(--lav)}
.pk b{font:700 16px/1.15 var(--disp);letter-spacing:-.01em;display:block}
.pk small{display:block;color:var(--mut);font-size:12px;margin-top:3px}
.pk[aria-pressed=true]{background:linear-gradient(150deg,#232f63,#141c3d);border-color:var(--lav);box-shadow:0 0 0 1px rgba(185,168,255,.4)}
.pk:active{transform:scale(.98)}
.pick.nudge .pk{animation:nudge .9s ease 2}
@keyframes nudge{50%{border-color:var(--cyan)}}
.sim-panel{border-radius:24px;background:linear-gradient(170deg,#0f1733,#0a1024);border:1px solid #2a3766;padding:18px;box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.sim-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.sim-state{font:700 11px/1 var(--body);letter-spacing:.08em;color:var(--ok);display:flex;align-items:center;gap:6px;text-align:right}
.sim-state:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.sim-state.busy{color:var(--cyan)}.sim-state.busy:before{animation:blink .8s infinite}
@keyframes blink{50%{opacity:.2}}
.stepper{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:0;margin:0 0 16px;counter-reset:s}
.stepper li{font-size:10px;line-height:1.2;color:var(--mut2);text-align:center;counter-increment:s;padding-top:20px;position:relative}
.stepper li:before{content:"";position:absolute;top:6px;left:0;right:0;height:4px;border-radius:2px;background:#26315a}
.stepper li.on{color:#fff;font-weight:700}.stepper li.on:before{background:var(--cyan)}
.stepper li.done{color:#c7d0ee}.stepper li.done:before{background:var(--lav)}
.sim-sit{font:500 17px/1.4 var(--disp);margin:0 0 14px}
.board{position:relative;min-height:150px;margin-bottom:12px}
.pile{display:flex;flex-wrap:wrap;gap:8px;padding:4px}
.pile .card{transform:rotate(var(--r))}
.lanes{display:grid;gap:10px}
.lane{border-radius:14px;border:1px dashed #33406a;padding:10px;background:rgba(255,255,255,.015)}
.lane h4{margin:0 0 8px;font:700 10px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.lane.hot{border-style:solid;border-color:rgba(62,230,242,.5);background:rgba(62,230,242,.05)}
.lane.hot h4{color:var(--cyan)}
.lane .cards{display:flex;flex-wrap:wrap;gap:6px}
.card{display:inline-flex;flex-direction:column;padding:9px 11px;border-radius:11px;background:#18224a;border:1px solid #2f3c6c;font-size:13px;line-height:1.25;max-width:100%}
.card b{font-weight:600}.card small{color:var(--mut);font-size:11px;margin-top:2px}
.lane.hot .card{border-color:rgba(62,230,242,.55)}
.proc{display:grid;gap:6px;margin:4px 0 12px}
.pl{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:#cdd6f0;animation:rise .35s both}
.pl i{font-style:normal;width:18px;flex:none;text-align:center;color:var(--cyan)}
.pl.ok i{color:var(--ok)}
.spin{display:inline-block;width:12px;height:12px;border:2px solid rgba(62,230,242,.3);border-top-color:var(--cyan);border-radius:50%;animation:sp .7s linear infinite;vertical-align:-1px}
@keyframes sp{to{transform:rotate(360deg)}}
.out{border-radius:16px;background:#060b1a;border:1px solid #2e4a7a;padding:14px;margin:6px 0 12px}
.out-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;font-size:12px}
.out-head b{font:700 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.out-head span{color:var(--mut2);font-size:11px}
.result{font-size:14.5px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.result div{animation:rise .4s both}
.result .rh{font-weight:700;color:#fff;margin-top:6px}
.result.flash{animation:flash .9s}
@keyframes flash{0%{background:rgba(62,230,242,.18)}100%{background:transparent}}
.out textarea{width:100%;min-height:220px;background:#0b1328;border:1px solid #4a5d92;border-radius:10px;color:#fff;padding:10px;font-size:14px;line-height:1.55}
.why{margin:10px 0 0;font-size:12.5px;color:var(--mut);border-top:1px solid #1e2a50;padding-top:10px}
.lbl{font:700 10.5px/1 var(--body);letter-spacing:.2em;color:var(--lav);margin:16px 0 10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:10px 14px;border-radius:99px;border:1px solid #3c4a7c;background:#141d3c;color:#e3e9ff;font-size:13.5px}
.chip[aria-pressed=true]{background:#3a3480;border-color:var(--lav)}
.row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.prompt-box{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:#060b1a;border:1px solid #2c3966;border-radius:12px;padding:12px;margin:0 0 10px;color:#d6e2ff;max-height:260px;overflow:auto}
.tools-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.tools-links a{font-size:13px}
.sim-foot{margin:14px 0 0;font-size:11.5px;color:var(--mut2)}
.sim-run{width:100%}

/* ================= STORY ================= */
.story{position:relative;background:#020309}
.story-intro{padding:70px 0 10px}
.story-body{position:relative}
.stage-wrap{position:sticky;top:0;height:46vh;height:46svh;z-index:1;overflow:hidden;background:radial-gradient(ellipse at 50% 60%,#121a3d 0%,#020309 70%)}
.stage{position:absolute;inset:0;--c1:0;--c2:0;--c3:0}
.stg-hud{position:absolute;top:12px;left:16px;right:16px;display:flex;justify-content:space-between;font:700 10px/1 var(--body);letter-spacing:.18em;color:var(--mut);z-index:3}
.stg-hud b{color:var(--hot);transition:color .3s}.stg-hud b.ok{color:var(--ok)}
.sc{position:absolute;left:50%;top:50%;width:min(124px,31%);margin-left:calc(min(124px,31%) / -2);margin-top:-18px;height:36px;padding:5px 8px;border-radius:9px;background:#172048;border:1px solid #34407a;font:600 10px/1.2 var(--body);color:#dfe5ff;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;will-change:transform,opacity;opacity:0}
.sc i{font-style:normal;color:var(--lav);flex:none}
.sc span{overflow:hidden;text-overflow:ellipsis}
.sc.hot{border-color:var(--cyan);box-shadow:0 0 18px rgba(62,230,242,.35)}
.stg-lanes{position:absolute;left:0;right:0;top:20%;display:flex;justify-content:space-around;opacity:var(--c2);pointer-events:none}
.stg-lanes span{font:700 9.5px/1 var(--body);letter-spacing:.18em;padding:5px 9px;border-radius:99px;border:1px solid #3a4680;color:#cfd6ff}
.stg-lanes span:first-child{background:var(--cyan);border-color:var(--cyan);color:#03121a}
.stg-rules{position:absolute;left:8%;right:8%;top:50%;padding:14px;border-radius:18px;background:rgba(10,14,32,.94);border:1px solid rgba(185,168,255,.5);box-shadow:0 0 50px rgba(120,100,255,.3);opacity:var(--c3);transform:translateY(calc(-50% + (1 - var(--c3)) * 40px)) scale(calc(.9 + var(--c3) * .1));pointer-events:none;z-index:2}
.stg-rules p{margin:0 0 8px;font:700 10px/1 var(--body);letter-spacing:.2em;color:var(--lav)}
.stg-rules div{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;padding:4px 0;border-top:1px solid rgba(255,255,255,.06)}
.stg-rules div:first-of-type{border-top:0}
.stg-rules em{font-style:normal;font-weight:700;font-size:10.5px;white-space:nowrap}
.stg-rules em.free{color:var(--ok)}.stg-rules em.ask{color:var(--warn)}.stg-rules em.never{color:var(--hot)}
.stg-flare{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(62,230,242,calc(var(--c2) * .18)),transparent 60%);pointer-events:none}
.steps{position:relative;z-index:2}
.chap{min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;padding:0 0 12vh}
.chap-card{width:100%;max-width:560px;margin:0 auto;padding:22px 20px;border-radius:22px;background:rgba(8,11,24,.93);border:1px solid #1f2a52;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.chap-n{font:700 11px/1 var(--body);letter-spacing:.22em;color:var(--cyan);margin:0 0 12px;display:flex;gap:10px;align-items:center}
.chap-n:before{content:"";width:22px;height:2px;background:var(--cyan)}
.chap h3{font:700 clamp(28px,8vw,38px)/1.02 var(--disp);letter-spacing:-.035em;margin:0 0 12px}
.chap p{color:#c3cbe5;margin:0}
.chap .hook{font-size:clamp(17px,4.8vw,22px)}
.c1 .chap-card{border-color:rgba(255,123,152,.35)}
.c2 .chap-card{border-color:rgba(62,230,242,.35)}
.c3 .chap-card{border-color:rgba(185,168,255,.45)}
.chapnav{position:absolute;left:0;right:0;bottom:6px;z-index:4;display:flex;justify-content:center;gap:4px}
.chapnav a{min-width:44px;min-height:44px;display:grid;place-items:center;border-radius:99px;font:700 11px/1 var(--body);color:var(--mut);text-decoration:none;background:rgba(10,14,32,.8);border:1px solid #2a3560}
.chapnav a.on{color:#03121a;background:var(--cyan);border-color:var(--cyan)}
/* permissions control */
.perms{display:grid;gap:8px;margin:16px 0 0}
.perm{display:grid;gap:7px;padding:10px;border-radius:13px;background:rgba(255,255,255,.03);border:1px solid #232e56}
.perm b{font-size:14px;font-weight:600}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:#0a1024;border-radius:10px;padding:3px}
.seg button{min-height:40px;border:0;border-radius:8px;background:transparent;color:var(--mut);font-size:12px;font-weight:600;padding:4px}
.seg button:disabled{opacity:.3;cursor:not-allowed;text-decoration:line-through}
.seg button[aria-pressed=true][data-v=free]{background:rgba(143,240,196,.18);color:var(--ok)}
.seg button[aria-pressed=true][data-v=ask]{background:rgba(255,194,122,.18);color:var(--warn)}
.seg button[aria-pressed=true][data-v=never]{background:rgba(255,123,152,.18);color:var(--hot)}

/* ================= BUILD ================= */
.build{padding:80px 0 70px;background:linear-gradient(180deg,#0c0d22 0%,#11132e 50%,#0b0d22 100%);position:relative}
.build:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 30% at 80% 0%,rgba(185,168,255,.16),transparent 70%);pointer-events:none}
.build .wrap{position:relative}
.meter{position:sticky;top:8px;z-index:6;margin:0 0 22px;padding:12px 14px;border-radius:16px;background:rgba(18,20,48,.95);border:1px solid #33346a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.meter-top{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;gap:10px}
.meter-top b{font-weight:700}
.meter-bar{height:5px;border-radius:5px;background:#26285a;margin-top:9px;overflow:hidden}
.meter-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--lav),var(--cyan));transition:width .4s}
.meter-list{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:8px;font-size:11px;color:var(--mut2)}
.meter-list span.ok{color:var(--ok)}
.bstep{display:grid;grid-template-columns:44px 1fr;gap:4px 12px;padding:20px 0;border-top:1px solid rgba(185,168,255,.16)}
.bnum{font:700 30px/1 var(--disp);color:transparent;-webkit-text-stroke:1px var(--lav);letter-spacing:-.04em}
.bstep h3{font:700 20px/1.2 var(--disp);margin:2px 0 4px;letter-spacing:-.02em}
.bstep .hint{color:var(--mut);font-size:13.5px;margin:0 0 12px}
.bstep>div{min-width:0}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.role{text-align:left;padding:14px 12px;border-radius:14px;background:#f1efff0d;border:1px solid #393b78;color:#fff;min-height:84px}
.role i{display:block;font-style:normal;font-size:20px;margin-bottom:6px}
.role b{display:block;font-size:14.5px}.role small{display:block;color:var(--mut);font-size:11.5px;margin-top:2px}
.role[aria-pressed=true]{background:#e9e4ff;color:#14123a;border-color:#e9e4ff}
.role[aria-pressed=true] small{color:#4b4880}
.goals{display:flex;flex-wrap:wrap;gap:8px}
.goals .chip[aria-pressed=true]{background:#e9e4ff;color:#14123a;border-color:#e9e4ff}
.styles{display:grid;gap:8px}
.styl{text-align:left;padding:12px 14px;border-radius:13px;background:transparent;border:1px solid #393b78;color:#fff;min-height:56px}
.styl b{display:block;font-size:14.5px}.styl small{color:var(--mut);font-size:12px}
.styl[aria-pressed=true]{border-color:var(--lav);background:rgba(185,168,255,.12);box-shadow:inset 3px 0 0 var(--lav)}
.field{display:grid;gap:6px;margin-bottom:10px}
.field label{font-size:13px;color:#cfd3f5}
.inp{width:100%;min-height:48px;padding:12px 14px;border-radius:12px;background:#0b0d26;border:1px solid #3b3e7c;color:#fff;font-size:16px}
.inp:focus{border-color:var(--lav);outline:none;box-shadow:0 0 0 3px rgba(185,168,255,.25)}
textarea.inp{min-height:110px;resize:vertical;line-height:1.5}
select.inp{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#b9a8ff 50%),linear-gradient(135deg,#b9a8ff 50%,transparent 50%);background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.status{font-size:13px;color:var(--ok);min-height:20px;margin:8px 0 0}
.gen-box{margin-top:14px;padding:16px;border-radius:18px;background:#070819;border:1px solid #3c3a82}
.gen-box textarea{min-height:340px;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:#0b0d26}
.teach{margin-top:40px}
.teach h3.big{font:700 clamp(26px,7vw,34px)/1.05 var(--disp);letter-spacing:-.03em;margin:0 0 6px;text-transform:uppercase}
.tsteps{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.tstep{border-radius:16px;background:rgba(255,255,255,.03);border:1px solid #2c2e66;overflow:hidden}
.tstep summary{list-style:none;display:flex;align-items:center;gap:12px;padding:14px;cursor:pointer;min-height:56px}
.tstep summary::-webkit-details-marker{display:none}
.tstep summary b{flex:1;font-size:15px}
.tstep summary .n{font:700 13px/1 var(--disp);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#24265c;color:var(--lav);flex:none}
.tstep.done summary .n{background:var(--ok);color:#06241a}
.tstep summary:after{content:"+";font-size:20px;color:var(--mut)}
.tstep[open] summary:after{content:"–"}
.tbody{padding:0 14px 16px;color:#c9cdee;font-size:14px}
.tbody p{margin:0 0 10px}
.tbody ul{margin:0 0 10px;padding-left:18px}
.tbody .prompt-box{font-size:12.5px}
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.tool-grid a{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:12px;border:1px solid #3a3d7c;text-decoration:none;min-height:60px}
.tool-grid a b{font-size:14px}.tool-grid a small{font-size:11px;color:var(--mut)}
.mark{min-height:44px}

/* ================= TOOLS ================= */
.tools{padding:76px 0;background:#070b18}
.tabs{display:flex;gap:6px;overflow-x:auto;padding:4px 2px 10px;margin:0 -20px 14px;padding-left:20px;padding-right:20px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;min-height:44px;padding:10px 16px;border-radius:99px;background:#111a35;border:1px solid #2b3766;color:#cdd5f3;font-size:14px;font-weight:600;white-space:nowrap}
.tab[aria-selected=true]{background:#e9ecff;color:#0a1124;border-color:#e9ecff}
.tpanel{border-radius:22px;background:#0d1430;border:1px solid #243060;padding:18px}
.tpanel h3{font:700 22px/1.15 var(--disp);margin:0 0 6px;letter-spacing:-.02em}
.tpanel .sub{color:var(--mut);font-size:13.5px;margin:0 0 14px}
.mode{font:700 10px/1 var(--body);letter-spacing:.12em;padding:6px 9px;border-radius:99px;border:1px solid #4e5f99;color:#d7e0ff;white-space:nowrap}
.mode.live{border-color:var(--ok);color:var(--ok)}
.chatlog{height:300px;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:14px;background:#060a18;border:1px solid #222d58;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.bub{max-width:88%;padding:10px 12px;border-radius:14px;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.bub.me{align-self:flex-end;background:#4a3f9a}
.bub.ai{align-self:flex-start;background:#18244a}
.bub .tagl{display:block;font:700 9.5px/1 var(--body);letter-spacing:.14em;color:var(--warn);margin-bottom:6px}
.bub .tagl.live{color:var(--ok)}
.chatform{display:flex;gap:6px;margin-top:10px}
.chatform .inp{flex:1;min-width:0}
.chatform .btn-s{min-width:52px}
.daytrack{position:relative;padding-left:22px;margin:16px 0}
.daytrack:before{content:"";position:absolute;left:6px;top:8px;bottom:10px;width:2px;background:linear-gradient(var(--lav),var(--cyan))}
.dayev{position:relative;margin:0 0 10px;padding:11px 13px;border-radius:12px;background:#141d3c;transition:transform .3s,background .3s,opacity .3s}
.dayev:before{content:"";position:absolute;left:-21px;top:16px;width:11px;height:11px;border-radius:50%;background:#7b6fd6}
.dayev.done{background:#15352e;transform:translateX(4px)}.dayev.done:before{background:var(--ok)}
.dayev small{display:block;color:var(--mut);font-size:12px}
.daystory{font-size:14px;padding:12px;border-left:3px solid var(--lav);background:#141d3c;border-radius:0 12px 12px 0}
.bar{height:6px;border-radius:6px;background:#26315a;overflow:hidden;margin-top:10px}
.bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--lav),var(--cyan));transition:width .5s}
.out2{white-space:pre-wrap;overflow-wrap:anywhere;background:#060a18;border:1px solid #26315f;border-radius:12px;padding:12px;margin-top:12px;max-height:320px;overflow:auto;font-size:12.5px;line-height:1.7}
.hint2{font-size:12px;color:var(--mut2);margin:10px 0 0}
input[type=file].inp{padding:10px;font-size:13px}

/* ================= LIBRARY ================= */
.lib{padding:76px 0;background:#05070d}
.libtools{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.libtools .inp{flex:1 1 100%}
.libgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.case{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:14px;border:1px solid #1f2850;background:transparent;text-align:left;color:#fff;min-height:118px;position:relative}
.case .n{font:700 10px/1 var(--body);letter-spacing:.14em;color:var(--mut2)}
.case b{font:700 15px/1.2 var(--disp)}
.case small{color:var(--mut);font-size:12px;flex:1}
.case .for{position:absolute;top:10px;right:10px;font:700 9px/1 var(--body);letter-spacing:.12em;color:#03121a;background:var(--cyan);padding:4px 6px;border-radius:99px}
.case:active{background:#0e1530}
.libres{margin-top:16px;padding:16px;border-radius:18px;background:#0e1530;border:1px solid #33447a}
.empty{grid-column:1/-1;padding:20px;color:var(--mut)}

/* ================= FAQ / PRIVACY / FOOTER ================= */
.faq{padding:70px 0;background:#070b18}
.faq details{border-bottom:1px solid #1f2850}
.faq summary{list-style:none;padding:18px 30px 18px 0;font-weight:600;cursor:pointer;position:relative;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:4px;top:16px;font-size:20px;color:var(--mut)}
.faq details[open] summary:after{content:"–"}
.faq details p{margin:0 0 18px;color:var(--mut);font-size:14.5px}
.final{padding:80px 0;text-align:center;background:radial-gradient(ellipse at 50% 100%,#2a2466 0%,#05070d 60%)}
.final .h2{max-width:14ch;margin-left:auto;margin-right:auto}
.final .btn{max-width:400px;margin:24px auto 0}
.priv{padding:60px 0;background:#05070d;border-top:1px solid #151c38}
.priv h2{font:700 24px/1.2 var(--disp);margin:0 0 10px}
.priv p{color:var(--mut);font-size:14px}
.priv-grid{display:grid;gap:12px;margin-top:18px}
.pbox{border-radius:16px;border:1px solid #1f2850;padding:16px;background:#0a0f22}
.pbox h3{margin:0 0 6px;font-size:16px}
.pbox p{margin:0 0 10px;font-size:13px}
.checks{display:grid;gap:6px;margin-top:10px}
.checks div{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:10px 12px;border-radius:10px;background:#111a35}
.checks b{color:#c9d6ff;font-size:12px;text-align:right}
pre.counts{font-size:12px;color:#cfdcff;white-space:pre-wrap;margin:10px 0 0}
.footer{padding:30px 0 calc(110px + env(safe-area-inset-bottom));color:var(--mut2);font-size:12px;border-top:1px solid #151c38}
.footer .row{margin-top:12px}
.bnav{position:fixed;left:50%;width:100%;max-width:480px;bottom:0;transform:translateX(-50%);z-index:100;display:flex;justify-content:space-around;padding:6px 4px calc(6px + env(safe-area-inset-bottom));background:rgba(6,9,20,.92);border-top:1px solid #1f2a52;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:transform .3s,opacity .3s}
.bnav a{flex:1;min-height:50px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;font-size:10.5px;color:#aab4d4;border-radius:12px}
.bnav a i{font-style:normal;font-size:16px;line-height:1}
.bnav a.on{color:#fff;background:rgba(185,168,255,.12)}
.bnav.hide{transform:translateX(-50%) translateY(110%)}

@media(max-width:360px){.pick{grid-template-columns:1fr}.libgrid{grid-template-columns:1fr}.stepper li{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}html{scroll-behavior:auto}}
html.calm *,html.calm *:before,html.calm *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}

html.lang-wait body{visibility:hidden}
html.no-case .h1,html.no-case .h2,html.no-case .kick,html.no-case .in-t,html.no-case .eyebrow{text-transform:none;letter-spacing:0}
:lang(zh-Hant) .h1{font-size:clamp(36px,10vw,48px);line-height:1.12;letter-spacing:0;text-transform:none}
html[dir="rtl"] body{text-align:start}
html[dir="rtl"] .hook{border-left:0;border-right:3px solid var(--lav);padding-left:0;padding-right:14px}
html[dir="rtl"] .in-skip{right:auto;left:max(12px,calc(50% - 228px))}
html[dir="rtl"] .in-brand{left:auto;right:max(18px,calc(50% - 222px))}
.lang{max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lang-panel{position:fixed;inset:0;z-index:3000;background:rgba(2,3,9,.72);display:flex;align-items:flex-end;justify-content:center}
.lang-sheet{width:min(480px,100%);max-height:min(82dvh,680px);background:#0c1224;border:1px solid rgba(255,255,255,.16);border-bottom:0;border-radius:22px 22px 0 0;padding:14px 14px calc(12px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;box-shadow:0 -20px 80px rgba(0,0,0,.45)}
.lang-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lang-head b{font-size:16px}
.lang-x{min-width:44px;min-height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;font-size:22px}
.lang-geo{margin:0;color:var(--mut);font-size:12px}
.lang-list{overflow:auto;display:grid;gap:6px;padding-bottom:4px}
.lang-opt{min-height:48px;text-align:start;border-radius:12px;border:1px solid transparent;background:#121a33;padding:8px 12px;color:#fff;display:flex;flex-direction:column;justify-content:center}
.lang-opt.on{border-color:var(--cyan);background:#142038}
.lang-opt small{color:var(--mut);font-weight:500}
html.lang-open body{overflow:hidden}

html.need-safari,html.need-safari body{overflow:hidden!important}
html.need-safari #intro,html.need-safari .bnav,html.need-safari .progress,html.need-safari .lang-panel{display:none!important}
#safariGate{display:none}
html.need-safari.lang-ready #safariGate{display:block;visibility:visible!important}
#safariGate{position:fixed;inset:0;z-index:10000;overflow:auto;background:
  radial-gradient(ellipse 80% 60% at 60% 36%,#273b71 0%,transparent 55%),
  radial-gradient(ellipse 70% 50% at 30% 70%,#35265f 0%,transparent 55%),
  #05070d}
#safariGate:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(150,170,220,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(150,170,220,.13) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:linear-gradient(transparent 18%,#000 92%);mask-image:linear-gradient(transparent 18%,#000 92%);pointer-events:none}
.sg-in{position:relative;z-index:1;width:min(480px,100%);min-height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start;padding:calc(18px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));box-sizing:border-box}
.sg-top{display:flex;align-items:center;gap:10px;margin:0 0 36px}
.sg-brand{font:700 13px/1 var(--disp,system-ui);letter-spacing:.2em;color:#f3f5ff}
.sg-brand em{font-style:normal;color:var(--cyan,#3ee6f2)}
.sg-compass{width:34px;height:34px;margin-left:auto;border-radius:11px;background:radial-gradient(circle at 32% 24%,#fff,#d5e4f2 46%,#8ea4bb);box-shadow:0 8px 22px rgba(62,230,242,.22);display:grid;place-items:center}
.sg-compass svg{width:30px;height:30px;display:block}
html[dir="rtl"] .sg-compass{margin-left:0;margin-right:auto}
.sg-kick{margin:0 0 14px;font:700 11.5px/1.3 var(--body,system-ui);letter-spacing:.24em;text-transform:uppercase;color:var(--cyan,#3ee6f2)}
.sg-title{margin:0 0 18px;font:700 clamp(40px,11.2vw,54px)/.96 var(--disp,system-ui);letter-spacing:-.045em;text-transform:uppercase;color:#f3f5ff;text-wrap:balance}
.sg-title .grad{background:linear-gradient(100deg,#fff 0%,#cdbfff 40%,#5ee9f3 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sg-sub{margin:0 0 22px;color:#c4cde6;font:16px/1.55 var(--body,system-ui);max-width:480px}
.sg-sub b{color:#fff;font-weight:600}
#safariGate .sg-open{width:100%;min-height:54px;border:0;border-radius:15px;padding:14px 18px;font:700 15px/1.2 var(--disp,system-ui);letter-spacing:.04em;color:#04101c;background:linear-gradient(110deg,#cbbcff 0%,#8fd8ff 50%,#4ee9f3 100%);box-shadow:0 12px 40px -10px rgba(78,233,243,.7)}
#safariGate .sg-open:active{transform:scale(.98)}
html.no-case .sg-title,html.no-case .sg-kick{text-transform:none;letter-spacing:0}
:lang(zh-CN) .sg-title,:lang(zh-Hant) .sg-title,:lang(ja) .sg-title,:lang(ko) .sg-title{font-size:clamp(34px,9.4vw,46px);line-height:1.16;letter-spacing:0;text-transform:none}
html[dir="rtl"] .sg-title,html[dir="rtl"] .sg-kick,html[dir="rtl"] .sg-sub{letter-spacing:0;text-align:right}