*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#f4f5f9; --text:#14161c; --text-dim:#5c6472; --text-faint:#8b93a3;
  --accent:#1a5cff; --accent-soft:rgba(26,92,255,.10);
  --glass:rgba(255,255,255,.55); --glass-strong:rgba(255,255,255,.75);
  --glass-brd:rgba(255,255,255,.85); --glass-shadow:0 8px 32px rgba(20,22,28,.07);
  --hairline:rgba(20,22,28,.08);
  --blob-1:#f6b8e4; --blob-2:#c3b4f8; --blob-3:#a9e7f7; --blob-op:.55;
  --r-md:20px; --r-lg:28px; --r-pill:999px;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --shell:min(820px,100% - 2.5rem);
}
html[data-theme="dark"]{
  --bg:#0a0b0f; --text:#eef0f5; --text-dim:#9aa3b4; --text-faint:#6b7385;
  --accent:#5c8dff; --accent-soft:rgba(92,141,255,.14);
  --glass:rgba(255,255,255,.055); --glass-strong:rgba(255,255,255,.09);
  --glass-brd:rgba(255,255,255,.11); --glass-shadow:0 8px 32px rgba(0,0,0,.35);
  --hairline:rgba(255,255,255,.09);
  --blob-1:#c0389c; --blob-2:#5b3fd0; --blob-3:#1f7fa8; --blob-op:.40;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);background:var(--bg);color:var(--text);
  font-size:16px;line-height:1.7;overflow-x:hidden;min-height:100vh;
  -webkit-font-smoothing:antialiased;transition:background .4s ease,color .4s ease;
}

.blobs{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:var(--blob-op)}
.b1{width:46vw;height:46vw;min-width:340px;min-height:340px;background:var(--blob-1);top:-16vw;left:-10vw}
.b2{width:40vw;height:40vw;min-width:300px;min-height:300px;background:var(--blob-2);top:-8vw;right:-8vw}
.b3{width:38vw;height:38vw;min-width:280px;min-height:280px;background:var(--blob-3);bottom:-14vw;left:20%}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.28;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}

.glass{
  background:var(--glass);
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--glass-brd);box-shadow:var(--glass-shadow);border-radius:var(--r-lg);
}

.shell{width:var(--shell);margin-inline:auto}

nav{position:fixed;top:14px;left:0;right:0;z-index:200;display:flex;justify-content:center;padding-inline:1.25rem}
.nav-inner{
  width:min(1160px,100% - 2.5rem);display:flex;align-items:center;gap:16px;
  padding:9px 9px 9px 18px;border-radius:var(--r-pill);
  background:var(--glass-strong);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--glass-brd);box-shadow:var(--glass-shadow);
}
.logo{display:flex;align-items:center;gap:9px;font-weight:600;font-size:15px;letter-spacing:-.01em;color:var(--text);text-decoration:none}
.logo span{color:var(--accent)}
.logo svg{width:22px;height:22px;flex:0 0 22px}
.nav-tools{margin-left:auto;display:flex;gap:6px;align-items:center}
.icon-btn{
  width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--hairline);background:transparent;color:var(--text);cursor:pointer;
  transition:background .2s,border-color .2s,transform .2s;
}
.icon-btn:hover{background:var(--accent-soft);border-color:transparent}
.icon-btn:active{transform:scale(.93)}
.icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
html[data-theme="dark"] .sun{display:none}
html[data-theme="light"] .moon{display:none}
.back{
  display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:var(--r-pill);
  font-size:14px;color:var(--text-dim);text-decoration:none;transition:color .2s,background .2s;
}
.back:hover{color:var(--text);background:var(--accent-soft)}

main{padding:clamp(120px,16vw,170px) 0 80px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.eyebrow::before{content:'';width:20px;height:1px;background:var(--accent);opacity:.5}
h1{font-size:clamp(32px,5.5vw,52px);font-weight:600;letter-spacing:-.04em;line-height:1.08;margin-bottom:14px}
.lede{color:var(--text-dim);max-width:60ch;font-size:17px;margin-bottom:40px}
.doc{padding:clamp(26px,3.6vw,44px)}
.doc h2{font-size:20px;font-weight:500;letter-spacing:-.02em;margin:34px 0 12px}
.doc h2:first-child{margin-top:0}
.doc h3{font-size:16px;font-weight:500;margin:20px 0 8px}
.doc p{color:var(--text-dim);margin-bottom:12px}
.doc ul{color:var(--text-dim);margin:0 0 14px 1.1rem}
.doc li{margin-bottom:6px}
.doc a{color:var(--accent);text-decoration:none}
.doc a:hover{text-decoration:underline}
.doc strong{color:var(--text);font-weight:500}
.doc hr{border:0;border-top:1px solid var(--hairline);margin:32px 0}
.todo{
  display:block;padding:14px 18px;border-radius:var(--r-md);
  background:rgba(255,193,7,.12);border:1px solid rgba(255,193,7,.35);
  color:var(--text);font-size:14px;margin:16px 0;
}

footer{padding:30px 0 44px;border-top:1px solid var(--hairline)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.foot p{font-size:13.5px;color:var(--text-faint)}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.foot-links a{font-size:13.5px;color:var(--text-dim);text-decoration:none;transition:color .2s}
.foot-links a:hover{color:var(--accent)}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

@media (max-width:600px){
  :root{--shell:min(820px,100% - 1.75rem)}
  body{font-size:15.5px}
  .blob{filter:blur(64px)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}