:root{--text:#1d1d1f;--muted:#6e6e73;--alt:#f5f5f7;--blue:#0071e3;--link:#0066cc;--link-dark:#2997ff}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--text);background:#fff;line-height:1.47;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.wrap{max-width:1024px;margin:0 auto;padding:0 22px}

.nav{position:sticky;top:0;z-index:20;height:44px;background:rgba(22,22,23,.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(255,255,255,.08);color:#f5f5f7;font-size:12px}
.nav .wrap{height:100%;display:flex;align-items:center;gap:32px;max-width:1100px}
.nav a,.nav button{color:inherit;font:inherit;background:none;border:0;cursor:pointer;opacity:.8;transition:opacity .2s}
.nav a:hover,.nav button:hover,.dd.open>button{opacity:1}
button:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.nav .brand{font-size:19px;font-weight:600;opacity:1}
.menu{display:flex;gap:28px;flex:1;list-style:none}
.menu>li{display:flex;align-items:center;height:44px;position:relative}
.menu>.mob{display:none}
.drop{display:none;position:absolute;top:40px;left:-18px;min-width:250px;padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(28,28,30,.92);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.dd:hover .drop,.dd.open .drop{display:block}
.drop a{display:block;padding:10px 12px;border-radius:10px;font-size:14px}
.drop a:hover{background:rgba(255,255,255,.08)}
.acct{display:flex;align-items:center;gap:18px}
.nav .pill{padding:5px 14px;border-radius:980px;background:var(--blue);color:#fff;opacity:1}
.burger{display:none;margin-left:auto;font-size:20px!important}
@media(max-width:860px){
.burger{display:block}.acct{display:none}
.menu{display:none;position:fixed;inset:44px 0 0;flex-direction:column;gap:0;padding:8px 22px;background:rgba(0,0,0,.96);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);overflow:auto}
.nav.open .menu{display:flex}
.menu>li{display:block;height:auto;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:22px}
.menu>li>a,.menu>li>button{font-size:22px;opacity:1}
.menu>.mob{display:flex;gap:20px;flex-wrap:wrap;border:0}
.menu .drop{display:block!important;position:static;min-width:0;padding:6px 0 0;border:0;background:none;box-shadow:none}
.menu .drop a{font-size:17px;padding:8px 0}
}

.hero{position:relative;padding:88px 22px 120px;color:#f5f5f7;text-align:center;overflow:hidden;background:radial-gradient(ellipse 60% 50% at 50% 0,rgba(94,92,230,.28),transparent 70%),radial-gradient(ellipse 50% 40% at 85% 60%,rgba(255,55,95,.12),transparent 70%),#000}
h1{max-width:920px;margin:0 auto;font-size:clamp(44px,8.5vw,92px);font-weight:600;letter-spacing:-.03em;line-height:1.03;background:linear-gradient(180deg,#fff 35%,#8e8e93);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{max-width:640px;margin:20px auto 0;color:#a1a1a6;font-size:clamp(19px,2.4vw,24px);line-height:1.4}
.price{margin-top:8px;color:#6e6e73;font-size:17px}
.cta{display:flex;gap:28px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:24px}
.btn{background:var(--blue);color:#fff;padding:12px 24px;border-radius:980px;font-size:17px;transition:background .2s}
.btn:hover{background:#0077ed}
.more{font-size:19px;color:var(--link-dark)}
.more:hover{text-decoration:underline}

.ide{display:grid;grid-template-columns:1.1fr .9fr;max-width:980px;margin:72px auto 0;border:1px solid rgba(255,255,255,.1);border-radius:22px;background:rgba(28,28,30,.7);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);box-shadow:0 40px 120px rgba(0,0,0,.7),0 0 160px rgba(94,92,230,.18);overflow:hidden;text-align:left}
.pane{min-height:380px}
.top{display:flex;gap:6px;align-items:center;padding:14px 16px;font-size:12px;color:#8e8e93}
.top i{width:11px;height:11px;border-radius:50%;background:#ff5f57}
.top i:nth-child(2){background:#febc2e}
.top i:nth-child(3){background:#28c840}
.top span{margin-left:10px}
#code{padding:8px 22px 24px;font:13.5px/1.75 ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:#f2f2f7;tab-size:2;overflow:auto}
.h{opacity:0}
.h.v{opacity:1}
.caret{display:inline-block;width:2px;height:1.2em;margin:0 -1px;vertical-align:text-bottom;background:#2997ff;animation:bl 1s steps(1) infinite}
@keyframes bl{50%{opacity:0}}
.t{color:#ff7ab2}.a{color:#a167e6}.s{color:#ff8170}.p{color:#4eb0cc}.n{color:#d9c97c}
[data-do]{display:none}
.view{display:flex;flex-direction:column;padding:16px;border-left:1px solid rgba(255,255,255,.08)}
.view .top{padding:0 0 12px}
.pv{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:12px;padding:28px;border-radius:14px;background:#fff;color:#000;font-family:Georgia,"Times New Roman",serif;transition:background .8s,color .8s}
.pv>*{display:none}
.pv .p1{font-size:26px;font-weight:700}
.pv .p2{font-size:17px}
.pv .p3{font-size:16px;color:#00e;text-decoration:underline;transition:all .6s}
.pv.s1 .p1,.pv.s2 .p2{display:block}
.pv.s3 .p3{display:inline-block}
.pv.s4{background:#0b0b0c;color:#f5f5f7;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif}
.pv.s4 .p1{font-size:32px;letter-spacing:-.02em}
.pv.s4 .p2{color:#a1a1a6}
.pv.s5 .p3{padding:10px 22px;border-radius:980px;background:var(--blue);color:#fff;text-decoration:none}
@media(max-width:734px){.ide{grid-template-columns:1fr}.view{border-left:0;border-top:1px solid rgba(255,255,255,.08)}.view .pv{min-height:250px}}

.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px}
.tile{display:flex;flex-direction:column;min-height:600px;padding:56px 22px 0;border-radius:28px;background:var(--alt);text-align:center;overflow:hidden}
.tile.dark{background:#000;color:#f5f5f7}
.tile h2{font-size:clamp(32px,4.5vw,48px);font-weight:600;letter-spacing:-.01em;line-height:1.1}
.tile p{font-size:clamp(19px,2.2vw,24px);margin-top:8px}
.tile .cta{margin:16px 0 40px;gap:24px}
.tile .more{color:var(--link)}
.tile.dark .more{color:var(--link-dark)}
.lap{position:relative;width:min(380px,84%);margin:auto auto 0}
.scr{aspect-ratio:16/10;border:6px solid #1d1d1f;border-bottom:0;border-radius:14px 14px 0 0;background:linear-gradient(135deg,#0a84ff,#bf5af2 60%,#ff375f)}
.base{height:12px;width:112%;margin-left:-6%;border-radius:0 0 16px 16px;background:linear-gradient(#d2d2d7,#a1a1a6)}
.mini{position:absolute;right:-10%;bottom:0;width:22%;aspect-ratio:9/19;border:4px solid #1d1d1f;border-radius:14px;background:linear-gradient(160deg,#ff375f,#ff9f0a)}
.gauge{position:relative;display:grid;place-items:center;width:200px;height:200px;margin:auto auto -40px;border-radius:50%;background:conic-gradient(#30d158 0 98%,#2c2c2e 0);font-size:64px;font-weight:600}
.gauge::before{content:"";position:absolute;inset:14px;border-radius:50%;background:#000}
.gauge span{position:relative}
@media(max-width:734px){.tiles{grid-template-columns:1fr}.tile{min-height:520px}}
.steps{padding:120px 0;text-align:center}
.steps h2{max-width:760px;margin:0 auto;font-size:clamp(32px,5vw,56px);font-weight:600;letter-spacing:-.01em;line-height:1.1}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:72px}
.num{font-size:clamp(56px,8vw,88px);font-weight:600;line-height:1;background:linear-gradient(90deg,#0a84ff,#bf5af2,#ff375f);-webkit-background-clip:text;background-clip:text;color:transparent}
.grid3 h3{margin-top:16px;font-size:24px;font-weight:600}
.grid3 p{max-width:280px;margin:8px auto 0;color:var(--muted);font-size:19px}
@media(max-width:734px){.steps{padding:80px 0}.grid3{grid-template-columns:1fr;gap:56px}}
.final{padding:120px 22px;background:#000;color:#f5f5f7;text-align:center}
.final h2{font-size:clamp(36px,6vw,64px);font-weight:600;letter-spacing:-.01em;line-height:1.1}
.final p{margin-top:12px;color:#a1a1a6;font-size:21px}
footer{background:var(--alt);color:var(--muted);font-size:12px;line-height:1.33;padding:20px 0 40px}
footer .note{padding:16px 0 20px;border-bottom:1px solid #d2d2d7}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px;padding:20px 0}
footer h3{margin-bottom:8px;color:var(--text);font-size:12px;font-weight:600}
footer li{list-style:none;padding:3px 0}
footer a:hover{text-decoration:underline}
.copy{padding-top:16px;border-top:1px solid #d2d2d7}
.nav{border-bottom:1px solid rgba(255,255,255,.08)}
.tile{border:1px solid rgba(0,0,0,.05);border-radius:32px}
.tile.dark{border-color:rgba(255,255,255,.09)}
.tile.dark h2,.final h2{background:linear-gradient(180deg,#fff 35%,#8e8e93);-webkit-background-clip:text;background-clip:text;color:transparent}
.steps h2,.tile:not(.dark) h2{letter-spacing:-.025em}
.final{background:radial-gradient(ellipse 60% 70% at 50% 0,rgba(94,92,230,.25),transparent 70%),#000}
dialog{width:min(440px,92vw);max-height:90vh;margin:auto;padding:28px;border:1px solid rgba(255,255,255,.12);border-radius:24px;background:rgba(28,28,30,.96);color:#f5f5f7;box-shadow:0 40px 120px rgba(0,0,0,.7);overflow:auto}
dialog::backdrop{background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#panel{width:min(900px,94vw)}
#panel h2{font-size:30px;font-weight:600;letter-spacing:-.02em}
.x{position:absolute;top:14px;right:16px;border:0;background:none;color:#8e8e93;font-size:18px;cursor:pointer}
.tabs{display:flex;gap:4px;padding:4px;margin:8px 0 20px;border-radius:12px;background:rgba(255,255,255,.08)}
.tabs button{flex:1;padding:8px;border:0;border-radius:9px;background:none;color:#a1a1a6;font:inherit;font-size:14px;cursor:pointer}
.tabs .on{background:rgba(255,255,255,.14);color:#fff}
dialog form{display:flex;flex-direction:column;gap:14px}
dialog form[hidden]{display:none}
dialog label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#a1a1a6}
dialog input,dialog select,dialog textarea{padding:11px 14px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(0,0,0,.35);color:#f5f5f7;font:inherit;font-size:16px}
dialog input:focus,dialog select:focus,dialog textarea:focus{outline:2px solid var(--blue);outline-offset:1px}
dialog .btn{border:0;cursor:pointer;margin-top:4px}
.err{min-height:1em;color:#ff6961;font-size:13px}
.lnk{align-self:flex-end;margin-top:-4px;padding:4px 0;border:0;background:none;color:var(--link);font:inherit;font-size:13px;cursor:pointer}
.lnk:hover{text-decoration:underline}
.bdg{padding:2px 8px;border-radius:980px;background:var(--blue);color:#fff;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.chip{padding:4px 12px;border-radius:980px;background:var(--hov);font-size:13px}
.chip b{margin-left:4px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.pw{position:relative;display:block}
.pw input{display:block;width:100%;padding-right:46px}
.eye{position:absolute;top:50%;right:4px;display:grid;place-items:center;width:40px;height:40px;margin-top:-20px;padding:0;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer}
.eye:hover{color:var(--text);background:var(--hov)}
.eye svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.eye .sl{display:none}
.pw.on .sl{display:inline}
.adm>.pw{margin-bottom:12px}
.res{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px;text-align:left}
.res+.cap{max-width:560px;margin:24px auto 0;font-size:13px}
.card{display:flex;flex-direction:column;gap:16px;min-width:0;padding:26px 22px;border:1px solid var(--ln);border-radius:28px;background:var(--alt)}
.hd{display:flex;justify-content:space-between;align-items:center;gap:8px}
.card h3{font-size:21px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.tag{padding:3px 10px;border-radius:980px;background:var(--hov);color:var(--muted);font-size:12px;white-space:nowrap}
.card label{display:flex;flex-direction:column;gap:8px;color:var(--muted);font-size:14px}
.lb{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.lb b{color:var(--text);font-size:18px;font-weight:600}
.card input[type=range]{width:100%;accent-color:var(--blue)}
.bars{display:flex;flex-direction:column;gap:16px}
.bars>div{display:grid;grid-template-columns:44px 1fr;gap:6px 10px;align-items:center}
.bars span{color:var(--muted);font-size:13px}
.bars i{width:0;height:14px;border-radius:7px;background:var(--hov);transition:width 1.4s cubic-bezier(.16,1,.3,1) .4s}
.bars i.new{background:linear-gradient(90deg,#0a84ff,#bf5af2,#ff375f)}
.card.in .bars i{width:var(--t)}
.bars em{grid-column:1/-1;color:var(--muted);font-style:normal;font-size:14px}
.bars em b{color:var(--text);font-size:20px;font-weight:600}
.gain{margin-top:auto;color:var(--muted);font-size:14px}
.gain b{display:block;color:#30d158;font-size:clamp(26px,3.4vw,34px);font-weight:600;letter-spacing:-.02em}
.chart svg{width:100%;height:auto;overflow:visible}
.up{align-self:flex-start;padding:4px 12px;border-radius:980px;background:rgba(48,209,88,.15);color:#30d158;font-size:16px;font-weight:600}
.ln{fill:none;stroke:url(#rg1);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2s cubic-bezier(.22,1,.36,1) .3s}
.card.in .ln{stroke-dashoffset:0}
.ar{fill:url(#rg2);opacity:0;transition:opacity 1.2s 1.2s}
.card.in .ar{opacity:1}
.dt{fill:var(--bg);stroke:#bf5af2;stroke-width:2.5;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.3);transition:opacity .4s,transform .5s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(.5s + var(--i) * .25s)}
.card.in .dt{opacity:1;transform:none}
.ax{display:flex;justify-content:space-between;padding:0 4px;color:var(--muted);font-size:12px}
.axl{margin-top:-8px;color:var(--muted);font-size:12px;text-align:center}
.feed ul{display:flex;flex-direction:column;gap:10px;min-height:294px;list-style:none}
.feed li{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--ln);border-radius:18px;background:var(--bg);animation:sl .6s cubic-bezier(.16,1,.3,1) both}
.feed li i{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#0a84ff,#bf5af2);color:#fff;font-size:13px;font-style:normal;font-weight:600}
.feed li div{display:flex;flex-direction:column;min-width:0}
.feed .nm{flex:1}
.feed .am{align-items:flex-end}
.feed li b{font-size:15px}
.feed li span,.feed li small{overflow:hidden;color:var(--muted);font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.feed li strong{color:#30d158;font-size:15px;font-weight:600;white-space:nowrap}
@keyframes sl{from{opacity:0;transform:translateY(-14px) scale(.97)}}
@media(max-width:860px){.res{grid-template-columns:1fr}}
.muted{margin:4px 0 16px;color:#8e8e93}
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:12px 10px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left;vertical-align:top}
th{color:#8e8e93;font-weight:500}
td small{color:#8e8e93}
td select{padding:6px 8px;font-size:13px}
td button{border:0;background:none;color:#ff6961;font:inherit;cursor:pointer}
.adm{margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08)}
.adm h3{margin-bottom:12px;font-size:17px;font-weight:600}
.adm .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:734px){.adm .two{grid-template-columns:1fr}}
.lang{position:relative;display:flex;align-items:center;height:44px}
.lang .drop{left:auto;right:-10px;min-width:150px}
.drop a.cur{background:rgba(255,255,255,.12)}
@media(max-width:860px){.nav .wrap{gap:16px}.lang{margin-left:auto}.burger{margin-left:0}}
html:lang(zh) :is(h1,h2),html:lang(ja) :is(h1,h2),html:lang(ko) :is(h1,h2){letter-spacing:0!important}
:root{color-scheme:dark;--text:#f5f5f7;--muted:#a1a1a6;--alt:#161617;--link:#2997ff;--bg:#000;--glass:rgba(22,22,23,.8);--pop:rgba(28,28,30,.96);--menu:rgba(0,0,0,.96);--ln:rgba(255,255,255,.1);--hov:rgba(255,255,255,.08);--fld:rgba(0,0,0,.35);--td:#0d0d0e;--frame:#3a3a3c;--sh:rgba(0,0,0,.7);--glow:rgba(94,92,230,.28)}
:root[data-theme=light]{color-scheme:light;--text:#1d1d1f;--muted:#6e6e73;--alt:#f5f5f7;--link:#0066cc;--bg:#fff;--glass:rgba(255,255,255,.8);--pop:rgba(255,255,255,.97);--menu:rgba(255,255,255,.97);--ln:rgba(0,0,0,.1);--hov:rgba(0,0,0,.05);--fld:rgba(0,0,0,.04);--td:#000;--frame:#1d1d1f;--sh:rgba(0,0,0,.18);--glow:rgba(94,92,230,.14)}
body{background:var(--bg)}
.nav{background:var(--glass);color:var(--text);border-color:var(--ln)}
.drop{background:var(--pop);border-color:var(--ln);box-shadow:0 30px 80px var(--sh)}
.drop a:hover,.tg:hover{background:var(--hov)}
.hero{color:var(--text);background:radial-gradient(ellipse 60% 50% at 50% 0,var(--glow),transparent 70%),radial-gradient(ellipse 50% 40% at 85% 60%,rgba(255,55,95,.12),transparent 70%),var(--bg)}
h1,.final h2{background:linear-gradient(180deg,var(--text) 35%,var(--muted));-webkit-background-clip:text;background-clip:text}
.sub,.final p{color:var(--muted)}
.price{color:var(--muted);opacity:.7}
.more{color:var(--link)}
.ide{background:var(--glass);border-color:var(--ln);box-shadow:0 40px 120px var(--sh),0 0 160px var(--glow)}
.view{border-color:var(--ln)}
.top{color:var(--muted)}
#code{color:var(--text)}
:root[data-theme=light] .t{color:#c41a6a}:root[data-theme=light] .a{color:#6c36a9}:root[data-theme=light] .s{color:#c41a16}:root[data-theme=light] .p{color:#0e6f8a}:root[data-theme=light] .n{color:#7d6a00}
.tile{background:var(--alt);border-color:var(--ln)}
.tile.dark{background:var(--td);border-color:rgba(255,255,255,.09)}
.scr,.mini{border-color:var(--frame)}
.gauge::before{background:var(--td)}
.final{color:var(--text);background:radial-gradient(ellipse 60% 70% at 50% 0,var(--glow),transparent 70%),var(--bg);border-top:1px solid var(--ln)}
footer .note,footer .copy{border-color:var(--ln)}
dialog{background:var(--pop);color:var(--text);border-color:var(--ln);box-shadow:0 40px 120px var(--sh)}
dialog label,.x,.muted,th,td small{color:var(--muted)}
dialog input,dialog select,dialog textarea{background:var(--fld);border-color:var(--ln);color:var(--text)}
.tabs{background:var(--hov)}
.tabs button{color:var(--muted)}
.tabs .on{background:var(--ln);color:var(--text)}
th,td,.adm{border-color:var(--ln)}
@media(max-width:860px){.menu{background:var(--menu)}.menu>li{border-color:var(--ln)}}
.tg{position:relative;width:32px;height:32px;padding:0;border-radius:50%}
.tg svg{position:absolute;inset:8px;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .6s cubic-bezier(.34,1.56,.64,1),opacity .3s}
:root:not([data-theme=light]) .tg .moon,:root[data-theme=light] .tg .sun{opacity:0;transform:rotate(-90deg) scale(.3)}
@property --p{syntax:'<percentage>';inherits:false;initial-value:98%}
@keyframes up{from{opacity:0;transform:translateY(28px)}}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.96)}}
@keyframes fi{from{opacity:0}}
.hero h1,.hero .sub,.hero .price,.hero .cta,.ide{animation:up 1s cubic-bezier(.16,1,.3,1) both}
.hero .sub{animation-delay:.12s}.hero .price{animation-delay:.2s}.hero .cta{animation-delay:.28s}.ide{animation-delay:.45s}
.rv{opacity:0;transform:translateY(40px);transition:opacity 1s cubic-bezier(.16,1,.3,1) var(--d,0s),transform 1s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.rv.in{opacity:1;transform:none}
.gauge{--p:98%;background:conic-gradient(#30d158 0 var(--p),#2c2c2e 0);transition:--p 1.6s cubic-bezier(.16,1,.3,1)}
.js .gauge:not(.in){--p:0%}
.btn{transition:background .2s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.btn:hover{transform:scale(1.04)}.btn:active{transform:scale(.97)}
dialog[open]{animation:pop .45s cubic-bezier(.16,1,.3,1)}
dialog[open]::backdrop{animation:fi .45s}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}.gauge{--p:98%!important}}
@media(min-width:861px){.menu{justify-content:center}}
.demo{padding:120px 0 40px;text-align:center;overflow:hidden}
.demo h2{max-width:760px;margin:0 auto;font-size:clamp(32px,5vw,56px);font-weight:600;letter-spacing:-.025em;line-height:1.1}
.lead{max-width:560px;margin:14px auto 0;color:var(--muted);font-size:clamp(19px,2.2vw,24px);line-height:1.4}
.seg{--w:116px;position:relative;display:inline-flex;margin-top:32px;padding:4px;border-radius:980px;background:var(--hov)}
.seg i{position:absolute;top:4px;bottom:4px;left:4px;width:var(--w);border-radius:980px;background:var(--bg);box-shadow:0 1px 5px rgba(0,0,0,.25);transform:translateX(calc(var(--i,0) * var(--w)));transition:transform .5s cubic-bezier(.34,1.3,.64,1)}
.seg button{position:relative;width:var(--w);padding:9px 0;border:0;background:none;color:var(--muted);font:inherit;font-size:14px;cursor:pointer;transition:color .3s}
.seg button[aria-selected=true]{color:var(--text)}
.stage{--z:1;position:relative;width:min(760px,90%);margin:56px auto 0;transform:scale(calc(.82 + .18 * var(--z)));opacity:calc(.3 + .7 * var(--z));will-change:transform}
.lap2{display:flex;flex-direction:column;aspect-ratio:16/10;border:8px solid var(--frame);border-bottom:0;border-radius:18px 18px 0 0;background:#000;overflow:hidden;text-align:left}
.bar{display:flex;flex:none;gap:5px;align-items:center;height:26px;padding:0 10px;background:#2a2a2c}
.bar i{width:8px;height:8px;border-radius:50%;background:#ff5f57}
.bar i:nth-child(2){background:#febc2e}.bar i:nth-child(3){background:#28c840}
.bar span{margin:0 auto;padding:2px 28px;border-radius:6px;background:#1c1c1e;color:#a1a1a6;font-size:11px}
.vp{position:relative;flex:1;min-height:0;overflow:hidden;container-type:inline-size}
.base2{width:112%;height:14px;margin-left:-6%;border-radius:0 0 18px 18px;background:linear-gradient(#d2d2d7,#a1a1a6)}
.ph2{position:absolute;right:-5%;bottom:-6px;width:21%;aspect-ratio:9/19;border:6px solid var(--frame);border-radius:28px;background:#000;overflow:hidden;box-shadow:0 20px 50px var(--sh);text-align:left}
.ph2 .vp{position:absolute;inset:0}
.ph2::before{content:"";position:absolute;z-index:2;top:6px;left:50%;width:30%;height:9px;margin-left:-15%;border-radius:9px;background:#000}
.cap{margin-top:28px;color:var(--muted);font-size:17px}
.ms{background:var(--bg);color:var(--fg);font:max(5px,1.5cqw)/1.3 -apple-system,"SF Pro Display","Helvetica Neue",Arial,sans-serif;animation:fi .7s both,browse 16s cubic-bezier(.45,0,.55,1) infinite alternate}
.ph2 .ms{font-size:max(5px,4.4cqw)}
.mn{display:flex;gap:2em;align-items:center;padding:1.6em 3em;font-size:1.1em}
.mn b{margin-right:auto;font-size:1.4em}
.mn u{text-decoration:none;opacity:.7}
.hr{display:flex;flex-direction:column;align-items:center;gap:1.2em;padding:7em 3em 8em;text-align:center;background:radial-gradient(ellipse at 50% 100%,var(--a2),transparent 70%)}
.hr h4{font-size:5.4em;font-weight:600;letter-spacing:-.03em;line-height:1.05}
.hr p{font-size:1.9em;opacity:.7}
.hr span{padding:.8em 1.8em;border-radius:980px;background:var(--ac);color:#fff;font-size:1.5em}
.cs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6em;padding:0 3em 6em}
.cs div{padding:1.6em;border-radius:1.8em;background:rgba(128,128,128,.12);background:color-mix(in srgb,var(--fg) 7%,var(--bg));font-size:1.5em}
.cs i{display:block;aspect-ratio:4/3;margin-bottom:1em;border-radius:1em;background:linear-gradient(135deg,var(--ac),var(--a2))}
.ft{padding:3em;text-align:center;font-size:1.4em;opacity:.6}
.ph2 .mn u{display:none}
.ph2 .cs{grid-template-columns:1fr}
@keyframes browse{0%,12%{transform:translateY(0)}88%,100%{transform:translateY(-58%)}}
@media(max-width:734px){.seg{--w:96px}}
@media(prefers-reduced-motion:reduce){.stage{--z:1!important}}
.nav{font-size:15px}
.nav .brand{font-size:22px}
.drop a{font-size:16px}
.nav .pill{padding:6px 16px}
@media(min-width:861px){.nav .wrap{gap:28px}.menu{gap:28px}}
@media(min-width:861px) and (max-width:1000px){.nav{font-size:13px}.nav .wrap,.menu{gap:16px}}
.seg{--w:96px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.ms{animation:fi .7s both,browse 24s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes browse{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(calc(var(--sc,320px) * -1))}}
.mn em{padding:.5em 1.2em;border-radius:980px;background:var(--ac);color:var(--bt);font-style:normal;font-size:.95em}
.hr{position:relative;overflow:hidden}
.hr::before{content:"";position:absolute;top:-30%;left:50%;width:60%;aspect-ratio:1;margin-left:-30%;border-radius:50%;background:radial-gradient(circle,var(--ac),transparent 65%);opacity:.2}
.hr>*{position:relative}
.hr small{padding:.4em 1.1em;border-radius:980px;border:1px solid var(--ac);color:var(--ac);font-size:1.3em}
.hr span{color:var(--bt)}
.sts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6em;padding:0 3em 5em;text-align:center}
.sts strong{display:block;font-size:4em;font-weight:600;letter-spacing:-.03em;line-height:1.1;color:var(--ac)}
.sts span{display:block;font-size:1.4em;opacity:.65}
.cs div:nth-child(2) i{background:linear-gradient(45deg,var(--a2),var(--ac))}
.cs div:nth-child(3) i{background:linear-gradient(200deg,var(--ac),var(--a2) 80%)}
.cs b{display:block}
.cs em{display:block;margin-top:.3em;font-style:normal;color:var(--ac);font-size:.95em}
.qt{margin:0 1.58em 2.63em;padding:2.4em;border-radius:2em;background:rgba(128,128,128,.12);background:color-mix(in srgb,var(--fg) 7%,var(--bg));text-align:center;font-size:1.9em;line-height:1.35}
.qt cite{display:block;margin-top:.8em;font-style:normal;font-size:.62em;opacity:.6}
.ph2 .sts{grid-template-columns:1fr;gap:1em}
.ph2 .mn em{display:none}
@media(max-width:734px){.seg{--w:84px}}
.nav .brand{display:inline-flex;align-items:center;gap:9px}
.logo{width:30px;height:30px;flex:none}
.nav a,.nav button{white-space:nowrap}
.drop{width:max-content;max-width:92vw}
.drop a{white-space:nowrap}
@media(min-width:861px) and (max-width:1000px){.nav .wrap,.menu{gap:14px}.acct{gap:12px}.nav .brand{font-size:20px}.logo{width:26px;height:26px}.nav .pill{padding:5px 12px}}
@media(max-width:860px){.menu .drop{width:auto}.menu .drop a{font-size:clamp(15px,4.5vw,17px)}}
.nav .brand{font-size:20px}
@media(min-width:1001px){.nav .wrap,.menu{gap:24px}}
@media(max-width:860px){.nav .brand{font-size:19px}.logo{width:26px;height:26px}}
@media(max-width:420px){.nav .brand{font-size:16px;gap:7px}.logo{width:24px;height:24px}.nav .wrap{gap:10px}}
html{-webkit-text-size-adjust:100%}
.nav{background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
@media(hover:none){.dd:hover:not(.open) .drop{display:none}}
.seg{--w:110px}
@media(max-width:860px){
.burger{padding:10px 6px;margin-right:-6px}
html:has(.nav.open){overflow:hidden}
}
@media(max-width:734px){
.seg{--w:min(84px,calc((100vw - 52px) / 4))}
h1{font-size:clamp(36px,11vw,44px)}
.hero{padding:56px 20px 72px}
.ide{margin-top:44px;border-radius:18px}
.pane{min-height:0}
#code{font-size:12.5px;padding:6px 16px 18px}
.tile{min-height:0;padding:44px 20px 0;border-radius:26px}
.tile .cta{margin:14px 0 28px;gap:18px}
.gauge{width:170px;height:170px;font-size:54px;margin-top:8px}
.demo{padding:72px 0 24px}
.stage{width:min(250px,70%);margin-top:36px}
.lap2,.base2{display:none}
.ph2{position:relative;right:auto;bottom:auto;width:100%;border-width:7px;border-radius:34px}
.cap{margin-top:20px;font-size:15px}
.steps{padding:64px 0}
.grid3{margin-top:48px;gap:44px}
.final{padding:80px 22px}
footer{font-size:13px}
footer li{padding:6px 0}
dialog{width:calc(100vw - 20px);max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);padding:22px 18px 18px;border-radius:22px}
dialog form{gap:10px}
dialog input,dialog select,dialog textarea{padding:10px 12px}
dialog textarea{height:64px}
.x{top:6px;right:6px;width:40px;height:40px}
.tabs{margin:18px 0 14px}
#panel{width:calc(100vw - 16px)}
th,td{padding:10px 8px}
}
.seg{display:flex;width:min(100%,448px);max-width:none;margin-left:auto;margin-right:auto;overflow:visible;-webkit-tap-highlight-color:transparent}
.seg button{flex:1 1 0;width:auto;min-width:0;white-space:nowrap;touch-action:manipulation}
.seg i{width:calc((100% - 8px) / 4);transform:translateX(calc(var(--i,0) * 100%))}
@media(max-width:734px){.seg button{font-size:clamp(12.5px,3.7vw,14px)}}
#compare{padding-bottom:0}
#numbers{padding-bottom:0}
.ba{--bp:50%;position:relative;width:min(760px,92%);aspect-ratio:16/10;margin:48px auto 0;border-radius:26px;overflow:hidden;border:1px solid var(--ln);box-shadow:0 30px 80px var(--sh);text-align:left;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.ba:focus-within{outline:2px solid var(--blue);outline-offset:3px}
.ba>div{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:8%}
.ba-new{background:radial-gradient(ellipse at 70% 110%,#6b3a1e,#0b0b0c 70%);color:#f6ece2;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif}
.ba-new b{font-size:clamp(26px,6vw,56px);font-weight:600;letter-spacing:-.03em;line-height:1.05}
.ba-new span{opacity:.7;font-size:clamp(14px,2.4vw,22px)}
.ba-new a{align-self:flex-start;padding:.7em 1.5em;border-radius:980px;background:#d98b4a;color:#fff;font-size:clamp(14px,2.2vw,18px)}
.ba-old{background:#fff;color:#000;font-family:"Times New Roman",Times,serif;clip-path:inset(0 calc(100% - var(--bp)) 0 0)}
.ba-old b{font-size:clamp(20px,4vw,32px);text-decoration:underline}
.ba-old span{font-size:clamp(13px,2vw,16px)}
.ba-old a{align-self:flex-start;color:#00e;text-decoration:underline;font-size:clamp(13px,2vw,16px)}
.ba-bar{position:absolute;top:0;bottom:0;left:var(--bp);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.5);pointer-events:none}
.ba-bar::after{content:"↔";position:absolute;top:50%;left:50%;display:grid;place-items:center;width:40px;height:40px;margin:-20px;border-radius:50%;background:#fff;color:#000;font-size:18px;box-shadow:0 4px 16px rgba(0,0,0,.35)}
.ba input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.ba-tag{position:absolute;top:14px;z-index:2;padding:4px 12px;border-radius:980px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;pointer-events:none}
.ba-tag.l{left:14px}.ba-tag.r{right:14px}
.sw{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:28px;color:var(--muted);font-size:15px}
.sw div{display:flex;gap:14px}
.sw button{width:34px;height:34px;border:0;border-radius:50%;background:var(--c);cursor:pointer;box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--ln);transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.sw button:hover{transform:scale(1.15)}
.sw button[aria-pressed=true]{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--c)}
.sw button:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.fab{position:fixed;left:50%;bottom:16px;z-index:15;padding:12px 22px;border-radius:980px;background:var(--blue);color:#fff;font-size:16px;white-space:nowrap;box-shadow:0 10px 30px rgba(0,113,227,.45);transform:translate(-50%,140%);opacity:0;pointer-events:none;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .4s}
.fab.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
@media(min-width:861px){.fab{display:none}}
@media(max-width:734px){.ba{aspect-ratio:5/4;border-radius:22px}}