:root{
    --bg:#0f0f16;
    --grid:#1d1d28;
    --ink:#ffffff;
    --dim:#8f8f9c;
    --faint:#55555f;
    --pink:#ff1496;
    --pink-deep:#ff5cb8;
    --pink-soft:#1a0c16;
    --pink-line:#2e1626;
    --panel:#171720;
    --glow-top:rgba(255,20,150,.13);
  }
  html.light{
    --bg:#f5f5f8;
    --grid:#dddde8;
    --ink:#16161e;
    --dim:#6b6b80;
    --faint:#a8a8bc;
    --pink:#cc0066;
    --pink-deep:#990050;
    --pink-soft:#fef0f7;
    --pink-line:#f0c8e0;
    --panel:#ffffff;
    --glow-top:rgba(204,0,102,.07);
  }
  html.grey{
    --bg:#191108;
    --grid:#2e2208;
    --ink:#f0e0c0;
    --dim:#a08060;
    --faint:#7a6044;
    --pink:#ff1496;
    --pink-deep:#ff5cb8;
    --pink-soft:#261608;
    --pink-line:#3e2808;
    --panel:#231908;
    --glow:0 0 0 4px rgba(255,20,150,.24);
    --glow-top:rgba(255,20,150,.09);
    --on-pink:#000000;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:"JetBrains Mono",monospace;
    min-height:100vh;
    padding:clamp(16px,4vw,48px);
    background-image:
      linear-gradient(var(--grid) 1px,transparent 1px),
      linear-gradient(90deg,var(--grid) 1px,transparent 1px);
    background-size:46px 46px;background-position:center;
    position:relative;
    transition:background-color .25s,color .25s;
  }
  body::before{content:"";position:fixed;inset:0;pointer-events:none;
    background:radial-gradient(ellipse 80% 55% at 50% -8%,var(--glow-top),transparent 60%);}
  .wrap{max-width:820px;margin:0 auto;position:relative}
  header{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:8px}
  h1{font-family:"Archivo",sans-serif;font-weight:900;letter-spacing:.16em;font-size:clamp(26px,5vw,40px)}
  .back{font-size:12px;letter-spacing:.08em;color:var(--pink-deep);text-decoration:none;border-bottom:1px solid var(--pink-line)}
  .back:hover{color:var(--pink)}
  .sub{color:var(--dim);font-size:12px;letter-spacing:.06em;line-height:1.7;margin-bottom:26px;border-bottom:1.5px solid var(--pink-line);padding-bottom:16px}
  .toc{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:34px;font-size:12px}
  .toc a{color:var(--pink-deep);text-decoration:none}
  .toc a:hover{color:var(--pink);text-decoration:underline}
  .cat{font-family:"Archivo",sans-serif;font-weight:700;letter-spacing:.04em;font-size:18px;color:var(--ink);
    margin:34px 0 6px;padding-top:18px;border-top:1.5px solid var(--pink-line)}
  .cat:first-of-type{border-top:none;padding-top:0}
  .item{margin:18px 0}
  .q{font-weight:700;color:var(--ink);font-size:15px;margin-bottom:5px;scroll-margin-top:20px}
  .q::before{content:"▸ ";color:var(--pink-deep)}
  .a{color:var(--dim);font-size:13.5px;line-height:1.75}
  .a b{color:var(--ink)}
  .a code,.ex{font-size:12.5px;background:var(--pink-soft);color:var(--pink-deep);padding:1px 6px;border-radius:3px;word-break:break-all}
  .a p{margin:8px 0}
  .a ul{margin:8px 0 8px 4px;list-style:none}
  .a li{position:relative;padding-left:18px;margin:5px 0;line-height:1.7}
  .a li::before{content:"–";position:absolute;left:2px;color:var(--pink-deep)}
  .stat-good{color:#35c46a;font-weight:700}
  html.light .stat-good{color:#0b8a3d}
  .stat-warn{color:#e6a700;font-weight:700}
  html.light .stat-warn{color:#9a6b00}
  .stat-bad{color:#ff4d4f;font-weight:700}
  html.light .stat-bad{color:#d40000}
  footer{margin-top:44px;font-size:11px;color:var(--faint);letter-spacing:.06em;line-height:1.7;border-top:1.5px solid var(--pink-line);padding-top:16px}
  footer a{color:var(--pink-deep);text-decoration:none;border-bottom:1px solid var(--pink-line)}
  footer a:hover{color:var(--pink)}