/* Bonut — shared stylesheet for the site and the legal pages. */

:root{
  --bg:#08080c;
  --ink:#c6c6d2;
  --bright:#f4f4f9;
  --muted:#7e7e8c;
  --dim:#5a5a68;

  --pink:#f2a2c0;
  --violet:#b48cff;
  --gold:#ffd24a;
  --green:#5ce65c;
  --red:#ff6b6b;

  --glass:rgba(255,255,255,.035);
  --glass-2:rgba(255,255,255,.055);
  --edge:rgba(255,255,255,.09);
  --edge-hi:rgba(255,255,255,.18);

  --r:16px;
  --r-lg:22px;
  --shell:1120px;
  --grad:linear-gradient(115deg,var(--pink),var(--violet) 55%,#8ad7ff);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.7 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ------------------------------------------------------------------ *
 *  Aurora. Three slow blobs behind everything, painted once and left
 *  alone; the wrapper is fixed so scrolling does not repaint them.
 * ------------------------------------------------------------------ */
.aurora{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
.aurora::before,.aurora::after,.aurora i{
  content:""; position:absolute; border-radius:50%;
  filter:blur(90px); opacity:.4; will-change:transform;
}
.aurora::before{
  width:52vw; height:52vw; left:-14vw; top:-18vw;
  background:radial-gradient(circle,rgba(242,162,192,.55),transparent 68%);
  animation:drift1 26s ease-in-out infinite;
}
.aurora::after{
  width:46vw; height:46vw; right:-12vw; top:6vh;
  background:radial-gradient(circle,rgba(180,140,255,.5),transparent 68%);
  animation:drift2 32s ease-in-out infinite;
}
.aurora i{
  width:40vw; height:40vw; left:26vw; top:52vh;
  background:radial-gradient(circle,rgba(138,215,255,.32),transparent 70%);
  animation:drift3 38s ease-in-out infinite;
}
@keyframes drift1{50%{transform:translate3d(7vw,5vh,0) scale(1.14)}}
@keyframes drift2{50%{transform:translate3d(-6vw,8vh,0) scale(1.1)}}
@keyframes drift3{50%{transform:translate3d(4vw,-7vh,0) scale(1.18)}}

/* A faint grain/grid so the flat black is not completely dead. */
.aurora u{
  position:absolute; inset:0; display:block; opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 78%);
}

.shell{max-width:var(--shell); margin:0 auto; padding:0 24px}
a{color:var(--pink); text-decoration:none; transition:color .16s}
a:hover{color:var(--bright)}
h1,h2,h3,h4{color:var(--bright); line-height:1.15; margin:0; letter-spacing:-.025em}
h2{font-size:clamp(1.7rem,3.6vw,2.5rem); font-weight:700}
h3{font-size:1.08rem; font-weight:650; letter-spacing:-.015em}
p{margin:0}
.lede{color:var(--muted); max-width:60ch; margin-top:16px; font-size:1.02rem}
.grad{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

:focus-visible{outline:2px solid var(--pink); outline-offset:3px; border-radius:6px}
.skip{position:absolute; left:-9999px; top:0; background:var(--bright); color:#000;
      padding:10px 16px; border-radius:0 0 10px 0; z-index:200; font-weight:600}
.skip:focus{left:0}

/* ---------------------------- scroll progress ---------------------------- */
.progress{position:fixed; top:0; left:0; height:2px; width:100%; z-index:100;
          transform:scaleX(0); transform-origin:0 50%; background:var(--grad)}

/* --------------------------------- nav ---------------------------------- */
header{position:sticky; top:0; z-index:60; transition:background .25s,border-color .25s}
header::after{content:""; position:absolute; inset:0; z-index:-1; opacity:0;
              background:rgba(8,8,12,.72); backdrop-filter:blur(14px) saturate(150%);
              border-bottom:1px solid var(--edge); transition:opacity .25s}
header.stuck::after{opacity:1}
nav{display:flex; align-items:center; gap:28px; height:70px}
.brand{font-weight:800; font-size:1.2rem; color:var(--bright); letter-spacing:-.04em}
.brand em{font-style:normal; background:var(--grad); -webkit-background-clip:text;
          background-clip:text; color:transparent}
.navlinks{display:flex; gap:26px; margin-left:auto; align-items:center}
.navlinks a{color:var(--muted); font-size:.92rem; font-weight:500}
.navlinks a:hover{color:var(--bright)}
.navtoggle{display:none; margin-left:auto; background:var(--glass); border:1px solid var(--edge);
           color:var(--bright); border-radius:10px; padding:8px 12px; font:inherit;
           font-size:.9rem; cursor:pointer}
@media(max-width:760px){
  .navtoggle{display:block}
  .navlinks{position:absolute; top:70px; left:0; right:0; flex-direction:column; gap:0;
            background:rgba(10,10,15,.97); backdrop-filter:blur(14px);
            border-block:1px solid var(--edge); padding:8px 0; display:none}
  .navlinks.open{display:flex}
  .navlinks a{padding:13px 24px; width:100%; font-size:1rem}
}

/* -------------------------------- buttons ------------------------------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
     font:inherit; font-size:.95rem; font-weight:650; cursor:pointer;
     border-radius:12px; padding:13px 24px; border:1px solid transparent;
     transition:transform .16s,box-shadow .2s,opacity .16s,border-color .2s,background .2s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--grad); color:#0b0b10; box-shadow:0 6px 26px -8px rgba(242,162,192,.6)}
.btn-primary:hover{box-shadow:0 10px 34px -8px rgba(242,162,192,.8); color:#0b0b10}
.btn-ghost{background:var(--glass); border-color:var(--edge); color:var(--ink)}
.btn-ghost:hover{border-color:var(--edge-hi); background:var(--glass-2); color:var(--bright)}
.btn.done{background:var(--green); color:#08120a; box-shadow:none}

/* --------------------------------- glass -------------------------------- */
.glass{
  position:relative; background:var(--glass); border:1px solid var(--edge);
  border-radius:var(--r); backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 18px 40px -28px rgba(0,0,0,.9);
}
/* The gloss: a highlight running along the top edge only. */
.glass::before{
  content:""; position:absolute; inset:0 0 auto; height:1px; border-radius:inherit;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  opacity:.7;
}

/* Cards that light up under the pointer. --mx/--my are set from JS. */
.lift{transition:transform .22s cubic-bezier(.2,.7,.3,1),border-color .22s}
.lift::after{
  content:""; position:absolute; inset:0; border-radius:inherit; opacity:0;
  transition:opacity .25s; pointer-events:none;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),
             rgba(242,162,192,.14),transparent 62%);
}
.lift:hover{transform:translateY(-4px); border-color:var(--edge-hi)}
.lift:hover::after{opacity:1}

/* ------------------------------ scroll reveal --------------------------- */
/* Gated on .js: with scripting off or app.js failing to load, nothing is ever hidden. */
.js .rise{opacity:0; transform:translateY(20px); transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.js .rise.in{opacity:1; transform:none}

/* --------------------------------- hero --------------------------------- */
.hero{padding:104px 0 88px; text-align:center; position:relative}
.hero h1{font-size:clamp(3rem,10vw,6rem); font-weight:850; letter-spacing:-.05em; line-height:1}
.hero .sub{color:var(--muted); font-size:clamp(1.02rem,2.3vw,1.24rem); margin:20px auto 0; max-width:52ch}

.pill{display:inline-flex; align-items:center; gap:10px; margin-bottom:30px;
      padding:8px 18px 8px 14px; border-radius:999px; font-size:.88rem; color:var(--muted)}
.pill b{color:var(--bright); font-weight:650}
.dot{width:8px; height:8px; border-radius:50%; background:var(--dim); flex:none; transition:background .3s}
.dot.up{background:var(--green); box-shadow:0 0 0 4px rgba(92,230,92,.16); animation:pulse 2.6s ease-in-out infinite}
.dot.down{background:var(--red); box-shadow:0 0 0 4px rgba(255,107,107,.16)}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(92,230,92,0)}}

.cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:36px}
.ipbox{display:flex; align-items:center; gap:14px; padding:9px 9px 9px 22px; border-radius:14px}
.ipbox code{font:650 1.18rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--bright)}
@media(max-width:520px){
  .ipbox{flex-direction:column; gap:12px; padding:18px; width:100%}
  .cta .btn{width:100%}
}

/* --------------------------------- stats -------------------------------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
       gap:14px; margin-top:52px}
.stat{padding:22px 18px; text-align:center; border-radius:var(--r)}
.stat .n{font-size:1.85rem; font-weight:800; color:var(--bright); letter-spacing:-.03em;
         font-variant-numeric:tabular-nums}
.stat .l{font-size:.8rem; color:var(--muted); margin-top:4px; text-transform:uppercase; letter-spacing:.1em}

/* -------------------------------- sections ------------------------------ */
section{padding:88px 0; position:relative}
section + section{border-top:1px solid rgba(255,255,255,.055)}
.eyebrow{font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
         background:var(--grad); -webkit-background-clip:text; background-clip:text;
         color:transparent; margin-bottom:12px}

.grid{display:grid; gap:16px; margin-top:40px;
      grid-template-columns:repeat(auto-fit,minmax(266px,1fr))}
.card{padding:26px}
.card .ic{font-size:1.55rem; line-height:1; margin-bottom:14px; display:block}
.card p{margin-top:10px; color:var(--muted); font-size:.94rem}
code.k{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.86em;
       color:var(--pink); background:rgba(242,162,192,.1);
       border:1px solid rgba(242,162,192,.18); padding:1px 7px; border-radius:6px;
       white-space:nowrap}

/* ------------------------------- versions ------------------------------- */
.chips{display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-top:20px}
.chip{background:var(--glass-2); border:1px solid var(--edge); color:var(--ink);
      border-radius:9px; padding:6px 13px; font-size:.83rem;
      font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
      transition:border-color .18s,transform .18s,color .18s}
.chip:hover{border-color:var(--pink); color:var(--bright); transform:translateY(-2px)}

/* --------------------------------- ranks -------------------------------- */
.ranks{display:grid; gap:18px; margin-top:44px;
       grid-template-columns:repeat(auto-fit,minmax(244px,1fr))}
.rank{padding:30px 26px; text-align:center; border-radius:var(--r-lg)}
.rank.best{border-color:rgba(242,162,192,.42);
           box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 0 46px -18px rgba(242,162,192,.55)}
.flag{position:absolute; top:-12px; left:50%; transform:translateX(-50%);
      background:var(--grad); color:#0b0b10; font-size:.68rem; font-weight:800;
      letter-spacing:.1em; text-transform:uppercase; padding:5px 14px;
      border-radius:999px; white-space:nowrap}
.rank .nm{font-weight:750; font-size:1.14rem; background:var(--grad);
          -webkit-background-clip:text; background-clip:text; color:transparent}
.rank .pr{font-size:2.5rem; font-weight:850; color:var(--bright); margin:14px 0 0;
          letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.rank .pr small{font-size:.82rem; font-weight:500; color:var(--muted); letter-spacing:0}
.rank ul{list-style:none; padding:0; margin:20px 0 0; text-align:left; font-size:.92rem}
.rank li{padding:7px 0 7px 24px; position:relative; color:var(--muted)}
.rank li::before{content:"›"; position:absolute; left:7px; top:6px; color:var(--pink); font-weight:800}

/* --------------------------------- steps -------------------------------- */
ol.steps{counter-reset:s; list-style:none; padding:0; margin:44px 0 0; max-width:70ch}
ol.steps li{counter-increment:s; position:relative; padding:0 0 30px 60px}
ol.steps li:not(:last-child)::after{content:""; position:absolute; left:17px; top:38px;
  bottom:0; width:1px; background:linear-gradient(var(--edge),transparent)}
ol.steps li::before{content:counter(s); position:absolute; left:0; top:0;
  width:35px; height:35px; border-radius:50%; background:var(--glass);
  border:1px solid var(--edge); color:var(--pink); font-weight:750; font-size:.9rem;
  display:grid; place-items:center; backdrop-filter:blur(6px)}
ol.steps p{margin-top:5px; color:var(--muted); font-size:.95rem}

/* --------------------------------- rules -------------------------------- */
ol.rules{margin:36px 0 0; padding-left:24px; max-width:66ch}
ol.rules li{margin:12px 0; padding-left:8px}
ol.rules li::marker{color:var(--pink); font-weight:750}
.warn{margin-top:30px; border:1px solid rgba(255,107,107,.28);
      background:rgba(255,107,107,.07); padding:16px 20px; border-radius:12px; font-size:.95rem}
.warn strong{color:#ffb3b3}

/* -------------------------------- footer -------------------------------- */
footer{border-top:1px solid rgba(255,255,255,.055); padding:56px 0 44px;
       color:var(--muted); font-size:.9rem}
.fgrid{display:grid; gap:34px; grid-template-columns:2fr 1fr 1fr}
@media(max-width:700px){.fgrid{grid-template-columns:1fr 1fr}.fgrid .fbrand{grid-column:1/-1}}
footer h4{font-size:.78rem; text-transform:uppercase; letter-spacing:.13em;
          color:var(--muted); font-weight:700; margin-bottom:14px}
footer ul{list-style:none; padding:0; margin:0}
footer li{margin:9px 0}
footer li a{color:var(--ink); font-size:.92rem}
.fbrand .b{font-weight:800; font-size:1.15rem; color:var(--bright); letter-spacing:-.04em}
.fbrand .b em{font-style:normal; background:var(--grad); -webkit-background-clip:text;
              background-clip:text; color:transparent}
.legal{margin-top:40px; padding-top:26px; border-top:1px solid rgba(255,255,255,.055);
       display:flex; gap:16px; justify-content:space-between; flex-wrap:wrap;
       font-size:.84rem; color:var(--dim)}

/* -------------------------- legal / prose pages ------------------------- */
.prose{max-width:76ch; margin:0 auto; padding:56px 0 88px}
.prose h1{font-size:clamp(2rem,5vw,2.9rem); font-weight:800}
.prose .updated{color:var(--dim); font-size:.88rem; margin-top:12px}
.prose h2{font-size:1.3rem; margin-top:52px; font-weight:700}
.prose h3{margin-top:30px; color:var(--ink)}
.prose p,.prose li{color:var(--muted); font-size:.98rem}
.prose p{margin-top:14px}
.prose ul,.prose ol{margin-top:14px; padding-left:24px}
.prose li{margin:9px 0}
.prose li::marker{color:var(--pink)}
.prose strong{color:var(--ink)}
.prose a{text-decoration:underline; text-underline-offset:3px}
.notice{border:1px solid rgba(255,210,74,.3); background:rgba(255,210,74,.07);
        padding:18px 22px; border-radius:12px; margin-top:28px; font-size:.94rem}
.notice strong{color:var(--gold)}
.toc{padding:22px 26px; border-radius:var(--r); margin-top:34px}
.toc h4{font-size:.76rem; text-transform:uppercase; letter-spacing:.13em;
        color:var(--muted); margin:0 0 12px; font-weight:700}
.toc ol{margin:0; padding-left:20px; columns:2; column-gap:32px}
@media(max-width:620px){.toc ol{columns:1}}
.toc li{margin:6px 0; font-size:.92rem}
.backlink{display:inline-flex; align-items:center; gap:7px; color:var(--muted);
          font-size:.9rem; margin-bottom:8px}
.backlink:hover{color:var(--bright)}

/* --------------------------------- 404 ---------------------------------- */
.oops{text-align:center; padding:120px 0}
.oops .big{font-size:clamp(5rem,18vw,10rem); font-weight:850; letter-spacing:-.06em;
           background:var(--grad); -webkit-background-clip:text; background-clip:text;
           color:transparent; line-height:1}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
                       transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .rise{opacity:1; transform:none}
}