:root{
  --bg:#08091a; --bg2:#0e1028; --line:rgba(184,192,224,.12); --text:#eef0fa; --muted:#9aa0bf;
  --accent:#6677e0; --navy:#252b63; --cap:#b8c0e0;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font:16px/1.6 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* nav */
nav{position:sticky;top:0;z-index:10;backdrop-filter:blur(12px);background:rgba(8,9,26,.7);border-bottom:1px solid var(--line)}
nav .wrap{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{width:26px;height:26px}
.links{display:flex;gap:28px;font-size:14px;color:var(--muted)}
.links a:hover{color:var(--text)}
.btn{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 18px;border-radius:999px;background:var(--text);color:var(--bg);font-weight:600;font-size:14px;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 30px rgba(102,119,224,.35)}
.btn.lg{height:48px;padding:0 24px;font-size:15px}
.btn svg{width:16px;height:16px}

/* hero */
.hero{position:relative;padding:110px 0 80px;text-align:center}
.hero::before{content:"";position:absolute;inset:-200px 0 auto;height:700px;background:radial-gradient(600px 340px at 50% 30%,rgba(102,119,224,.28),transparent 70%);pointer-events:none}
.eyebrow{display:inline-flex;gap:8px;align-items:center;font:500 12px var(--mono);color:var(--cap);border:1px solid var(--line);padding:6px 12px;border-radius:999px;margin-bottom:28px}
.eyebrow b{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
h1{font-size:clamp(44px,8vw,84px);line-height:1.02;letter-spacing:-.045em;font-weight:700;max-width:900px;margin:0 auto}
h1 span{background:linear-gradient(180deg,#fff 20%,#8d98d8);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:560px;margin:24px auto 36px}
.sub{font:500 12px var(--mono);color:var(--muted);margin-top:16px}

/* keycap */
kbd{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 7px;font:500 12px var(--mono);color:#1b2050;background:linear-gradient(#fafbff,#dfe2ef);border-radius:6px;box-shadow:0 2px 0 var(--cap),0 3px 6px rgba(0,0,0,.35)}

/* desktop scene: sized in em off a 1440px-wide design, so it scales like a screenshot */
.desk{margin:72px auto 0;max-width:1240px;container-type:inline-size;border-radius:14px;overflow:hidden;box-shadow:0 50px 140px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.08);text-align:left}
.screen{font-size:1.111cqw;aspect-ratio:16/10;position:relative;color:#f2f3f8;
  background:
    radial-gradient(60em 40em at 12% 18%,#ff9a6b 0,transparent 55%),
    radial-gradient(55em 45em at 85% 10%,#7b6cf6 0,transparent 60%),
    radial-gradient(70em 50em at 70% 95%,#1fb5c9 0,transparent 55%),
    radial-gradient(50em 40em at 5% 95%,#e0457b 0,transparent 60%),
    linear-gradient(135deg,#2b1f5c,#121738)}
.menubar{display:flex;align-items:center;gap:1.4em;height:2.1em;padding:0 1.2em;font-size:.85em;background:rgba(10,12,30,.25);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.menubar b{font-weight:700}.menubar .sp{flex:1}
.apple{width:.9em;height:1.05em;background:#fff;-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.4 12.6c0-2.6 2.1-3.8 2.2-3.9-1.2-1.8-3.1-2-3.7-2-1.6-.2-3.1.9-3.9.9-.8 0-2-.9-3.4-.9-1.7 0-3.3 1-4.2 2.6-1.8 3.1-.5 7.7 1.3 10.2.9 1.2 1.9 2.6 3.2 2.6 1.3-.1 1.8-.8 3.3-.8 1.6 0 2 .8 3.4.8 1.4 0 2.3-1.3 3.1-2.5 1-1.4 1.4-2.8 1.4-2.9-.1 0-2.7-1-2.7-4.1zM13.9 5c.7-.9 1.2-2 1-3.2-1 0-2.3.7-3 1.6-.7.7-1.2 1.9-1.1 3.1 1.2.1 2.3-.6 3.1-1.5z"/></svg>') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.4 12.6c0-2.6 2.1-3.8 2.2-3.9-1.2-1.8-3.1-2-3.7-2-1.6-.2-3.1.9-3.9.9-.8 0-2-.9-3.4-.9-1.7 0-3.3 1-4.2 2.6-1.8 3.1-.5 7.7 1.3 10.2.9 1.2 1.9 2.6 3.2 2.6 1.3-.1 1.8-.8 3.3-.8 1.6 0 2 .8 3.4.8 1.4 0 2.3-1.3 3.1-2.5 1-1.4 1.4-2.8 1.4-2.9-.1 0-2.7-1-2.7-4.1zM13.9 5c.7-.9 1.2-2 1-3.2-1 0-2.3.7-3 1.6-.7.7-1.2 1.9-1.1 3.1 1.2.1 2.3-.6 3.1-1.5z"/></svg>') center/contain no-repeat}
.win{position:absolute;inset:4.2em 3.5em 3em;display:flex;border-radius:1.1em;overflow:hidden;
  background:rgba(22,24,40,.55);backdrop-filter:blur(40px) saturate(1.4);-webkit-backdrop-filter:blur(40px) saturate(1.4);
  box-shadow:0 2.5em 6em rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.12)}
.lights{position:absolute;top:1em;left:1.1em;display:flex;gap:.5em}
.lights i{width:.8em;height:.8em;border-radius:50%;background:#ff5f57}.lights i+i{background:#febc2e}.lights i+i+i{background:#28c840}
.main{flex:1;min-width:0;padding:2.6em 1.8em 0}
.g{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 .2em .8em rgba(0,0,0,.15)}
.hdr{display:flex;align-items:center;gap:.4em;margin-bottom:.9em;font-size:.95em}
.hdr .sp{flex:1}
.circ{display:grid;place-items:center;width:2.2em;height:2.2em;border-radius:50%;color:rgba(255,255,255,.75);margin-right:.2em}
.tab{padding:.45em 1em;border-radius:99em;color:rgba(255,255,255,.6)}
.tab small{font-size:.85em;opacity:.7;margin-left:.3em}
.tab.on{color:#fff;font-weight:600;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.acct{display:flex;align-items:center;gap:.6em;padding:.5em 1em;border-radius:99em;color:rgba(255,255,255,.7);font-size:.92em}
.acct i{width:.45em;height:.45em;border-radius:50%;background:#7b8cff}
.list{list-style:none;padding:0}
.list li{display:flex;align-items:center;padding:.95em .9em .95em 0;border-radius:.65em;font-size:.95em;white-space:nowrap}
.list li.sel{background:rgba(74,102,237,.22)}
.list .d{flex:0 0 1.7em;display:grid;place-items:center}
.list .d::before{content:"";width:.45em;height:.45em;border-radius:50%}
.d.u::before{background:#4a66ed}.d.p::before{background:#b06cf0}.d.s::before{background:#f2c84b}
.list .f{flex:0 0 13em;overflow:hidden;text-overflow:ellipsis}
.list .f s{text-decoration:none;opacity:.55;margin-left:.3em;font-weight:400}
.list li:has(.u) .f,.list li:has(.u) b{font-weight:600}
.list .m{flex:1;min-width:0;display:flex;align-items:center;gap:.5em;overflow:hidden}
.list .m b{font-weight:400}
.list .m span{color:rgba(255,255,255,.5);overflow:hidden;text-overflow:ellipsis}
.list em{font-style:normal;font-size:.82em;font-weight:500;padding:.1em .45em;border-radius:.35em}
.c-green{color:#5fd38a;background:rgba(95,211,138,.14)}.c-purple{color:#c08bff;background:rgba(192,139,255,.14)}.c-orange{color:#ffa45c;background:rgba(255,164,92,.14)}
.list time{flex:0 0 6em;text-align:right;color:rgba(255,255,255,.5);font-size:.92em}
.ctx{flex:0 0 17em;margin:2em .7em .7em 0;border-radius:1.2em;padding:1.3em;font-size:.9em}
.ctx .av{width:2.6em;height:2.6em;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:1.15em;color:#5fd38a;background:rgba(95,211,138,.18);margin-bottom:.5em}
.ctx h4{font-size:1.1em}
.ctx h5{font-size:.85em;color:rgba(255,255,255,.55);margin:1.5em 0 .5em}
.ctx p{margin-bottom:.5em;line-height:1.35}
.ctx small{color:rgba(255,255,255,.5)}
.ctx .mut{color:rgba(255,255,255,.55)}
@media (max-width:860px){.desk{margin-top:48px;border-radius:10px}.ctx{display:none}}

/* sections */
section{padding:110px 0;border-top:1px solid var(--line)}
.label{font:500 12px var(--mono);color:var(--accent);text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px}
h2{font-size:clamp(32px,4.5vw,52px);line-height:1.08;letter-spacing:-.035em;font-weight:700;max-width:680px}
.intro{color:var(--muted);font-size:18px;max-width:560px;margin-top:18px}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:56px}
.card{background:var(--bg);padding:32px 28px;}
.card .keys{display:flex;gap:6px;margin-bottom:40px}
.card h3{font-size:17px;font-weight:600;letter-spacing:-.01em;margin-bottom:6px}
.card code{font:500 12px var(--mono);color:var(--cap);align-self:center;margin-left:6px}
.card p{color:var(--muted);font-size:15px}

.shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.keylist{list-style:none;border:1px solid var(--line);border-radius:14px;background:var(--bg2)}
.keylist li{display:flex;justify-content:space-between;align-items:center;padding:15px 22px;border-bottom:1px solid var(--line);font-size:15px}
.keylist li:last-child{border:0}
.keylist span{display:flex;gap:6px}

.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:56px}
.facts h3{font-size:17px;font-weight:600;margin-bottom:8px}
.facts p{color:var(--muted);font-size:15px}
.facts .n{font:500 12px var(--mono);color:var(--cap);display:block;margin-bottom:14px}

.cta{text-align:center;padding:130px 0}
.cta img{width:96px;height:96px;margin-bottom:28px}
.cta h2{margin:0 auto}
.cta .intro{margin:18px auto 36px}

footer{border-top:1px solid var(--line);padding:32px 0;font-size:13px;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a:hover{color:var(--text)}

@media (max-width:860px){
  .links{display:none}
  .grid,.facts{grid-template-columns:1fr}
  .shortcuts{grid-template-columns:1fr;gap:40px}
  .hero{padding:72px 0 56px}
  section{padding:80px 0}
}
@media (max-width:520px){
  .wrap{padding:0 16px}
  nav .btn span{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* release notes */
.notes{padding-top:100px;padding-bottom:120px}
.notes-h{font-size:clamp(40px,6vw,64px);text-align:left;margin:0}
.links a[aria-current]{color:var(--text)}
#list{margin-top:64px;border-top:1px solid var(--line)}
.empty{color:var(--muted);padding:40px 0}
.empty a{color:var(--cap);text-decoration:underline}
.rel{display:grid;grid-template-columns:220px 1fr;gap:48px;padding:48px 0;border-bottom:1px solid var(--line);scroll-margin-top:80px}
.meta{position:sticky;top:90px;align-self:start;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.ver{font:500 14px var(--mono);color:var(--text)}
.tag{font:500 11px var(--mono);color:var(--accent);border:1px solid rgba(102,119,224,.4);border-radius:999px;padding:2px 8px}
.meta time{flex-basis:100%;color:var(--muted);font-size:14px}
.body{max-width:640px;color:var(--muted);min-width:0}
.body h2{font-size:24px;letter-spacing:-.02em;color:var(--text);margin-bottom:16px}
.body h3{color:var(--text);font-size:16px;margin:24px 0 8px}
.body p,.body ul,.body ol{margin-bottom:14px}
.body ul,.body ol{padding-left:20px}
.body li{margin-bottom:6px}
.body a{color:var(--cap);text-decoration:underline}
.body code{font:13px var(--mono);background:var(--bg2);padding:2px 6px;border-radius:4px;color:var(--text)}
.body img{max-width:100%;border-radius:10px}
@media (max-width:860px){.notes{padding-top:64px}.rel{grid-template-columns:1fr;gap:16px}.meta{position:static}}
.legal h2{font-size:20px;margin:40px 0 12px}
.legal .intro{margin-bottom:0}

.providers{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px}
.prov{display:flex;align-items:center;gap:20px;padding:24px 28px;border:1px solid var(--line);border-radius:14px;background:var(--bg2)}
.prov svg{flex:0 0 48px;height:40px}
.prov h3{font-size:17px;font-weight:600}
.prov p{color:var(--muted);font-size:15px}
@media (max-width:860px){.providers{grid-template-columns:1fr}}

.ai{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}
.aikeys{list-style:none;display:flex;gap:28px;margin-top:28px;padding:0;color:var(--muted);font-size:15px}
.aikeys li{display:flex;align-items:center;gap:6px}
.aikeys li kbd:last-of-type{margin-right:6px}
.ais{display:grid;gap:12px}
.aip{display:flex;align-items:center;gap:18px;padding:20px 24px;border:1px solid var(--line);border-radius:14px;background:var(--bg2)}
.aip svg{flex:0 0 32px;height:32px}
.aip h3{font-size:16px;font-weight:600}
.aip p{color:var(--muted);font-size:14px}
.aifine{color:var(--muted);font-size:13px;margin-top:4px}
@media (max-width:860px){.ai{grid-template-columns:1fr;gap:40px}.aikeys{flex-wrap:wrap;gap:16px 28px}}