:root{
    --bg: #10131a;
    --bg-raised: #171b24;
    --bg-code: #0b0d12;
    --line: #262c38;
    --text: #e7e9ee;
    --muted: #8892a4;
    --comment: #5c6577;
    --accent-ok: #6fd08c;
    --accent-ok-dim: #2c4636;
    --accent-bad: #ff6b6a;
    --accent-bad-dim: #4a2626;
    --accent-warn: #f2b155;
    --display: 'Space Grotesk', sans-serif;
    --mono: 'JetBrains Mono', monospace;
    --body: 'Inter', sans-serif;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:var(--body);
    line-height:1.6;
  }
  a{color:var(--accent-warn);}

  .wrap{max-width:1180px;margin:0 auto;padding:0 24px;}

  /* ---------- HERO ---------- */
  header.hero{
    padding:90px 0 60px;
    border-bottom:1px solid var(--line);
    position:relative;
    overflow:hidden;
  }
  header.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      linear-gradient(180deg, rgba(255,107,106,0.06), transparent 40%);
    pointer-events:none;
  }
  .eyebrow{
    font-family:var(--mono);
    font-size:13px;
    letter-spacing:0.08em;
    color:var(--accent-bad);
    text-transform:uppercase;
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:22px;
  }
  .eyebrow .dot{
    width:8px;height:8px;border-radius:50%;
    background:var(--accent-bad);
    box-shadow:0 0 0 4px var(--accent-bad-dim);
    animation:pulse 2.2s infinite;
  }
  @keyframes pulse{
    0%,100%{opacity:1;}
    50%{opacity:0.35;}
  }
  h1{
    font-family:var(--display);
    font-size:clamp(22px, 4.2vw, 54px);
    line-height:1.08;
    margin:0 0 20px;
    font-weight:700;
  }
  h1 .accent{color:var(--accent-bad);}
  .lede{
    font-size:18px;
    color:var(--muted);
    max-width:62ch;
    margin:0 0 36px;
  }
  .stat-row{
    display:flex;
    flex-wrap:wrap;
    gap:0;
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
    background:var(--bg-raised);
  }
  .stat{
    flex:1 1 160px;
    padding:20px 24px;
    border-right:1px solid var(--line);
  }
  .stat:last-child{border-right:none;}
  .stat .num{
    font-family:var(--mono);
    font-size:26px;
    font-weight:700;
    color:var(--accent-warn);
    display:block;
  }
  .stat .label{
    font-size:12.5px;
    color:var(--muted);
    margin-top:4px;
    display:block;
  }

  /* ---------- SECTIONS ---------- */
  section{padding:56px 0;}
  section.divider-top{border-top:1px solid var(--line);}
  h2{
    font-family:var(--display);
    font-size:28px;
    margin:0 0 8px;
    font-weight:600;
  }
  .section-intro{
    color:var(--muted);
    max-width:70ch;
    margin:0 0 32px;
  }

  /* ---------- CHECKLIST ---------- */
  .checklist{
    display:grid;
    grid-template-columns:1fr;
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
  }
  .check-item{
    background:var(--bg-raised);
    padding:22px 26px;
    display:grid;
    grid-template-columns:52px 1fr;
    gap:18px;
  }
  .check-item .n{
    font-family:var(--mono);
    font-size:22px;
    font-weight:700;
    color:var(--accent-bad);
    opacity:0.8;
  }
  .check-item h3{
    font-family:var(--display);
    font-size:16.5px;
    margin:0 0 6px;
    font-weight:600;
  }
  .check-item p{margin:0;color:var(--muted);font-size:14.5px;}
  .check-item code, p code, li code{
    font-family:var(--mono);
    background:var(--bg-code);
    padding:2px 6px;
    border-radius:4px;
    font-size:0.88em;
    color:var(--accent-ok);
    border:1px solid var(--line);
  }
  .check-item pre{
    margin:12px 0 0;
    background:var(--bg-code);
    border:1px solid var(--line);
    border-radius:8px;
    padding:14px 16px;
    overflow-x:auto;
  }
  .check-item pre code{
    background:none;border:none;padding:0;color:var(--accent-warn);
  }

  /* ---------- COMPARISON ---------- */
  .compare-wrap{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
  }
  @media (max-width:880px){
    .compare-wrap{grid-template-columns:1fr;}
  }
  .panel{
    border-radius:10px;
    overflow:hidden;
    border:1px solid var(--line);
    background:var(--bg-code);
    display:flex;
    flex-direction:column;
  }
  .panel-head{
    padding:14px 18px;
    display:flex;
    align-items:center;
    gap:10px;
    font-family:var(--mono);
    font-size:13px;
    letter-spacing:0.03em;
  }
  .panel.ok .panel-head{
    background:var(--accent-ok-dim);
    color:var(--accent-ok);
    border-bottom:1px solid #2f5240;
  }
  .panel.bad .panel-head{
    background:var(--accent-bad-dim);
    color:var(--accent-bad);
    border-bottom:1px solid #603333;
  }
  .panel-head .icon{font-size:15px;}
  .code-scroll{
    overflow-x:auto;
    flex:1;
  }
  pre.code{
    margin:0;
    padding:18px 0;
    font-family:var(--mono);
    font-size:13px;
    line-height:1.65;
    color:var(--text);
    counter-reset:line;
  }
  .code-line{
    display:block;
    padding:0 18px 0 54px;
    position:relative;
    white-space:pre;
  }
  .code-line::before{
    counter-increment:line;
    content:counter(line);
    position:absolute;
    left:0;
    width:38px;
    text-align:right;
    color:var(--comment);
    font-size:11.5px;
    opacity:0.7;
  }
  .code-line.flag{
    background:rgba(255,107,106,0.10);
    border-left:2px solid var(--accent-bad);
  }
  .code-line.flag::after{
    content: attr(data-flag);
    display:inline-block;
    margin-left:16px;
    font-family:var(--mono);
    font-size:10.5px;
    color:var(--accent-bad);
    background:var(--accent-bad-dim);
    padding:1px 7px;
    border-radius:20px;
    vertical-align:middle;
    white-space:normal;
  }
  .tok-comment{color:var(--comment);}
  .tok-string{color:var(--accent-ok);}
  .tok-key{color:#8ab4f8;}
  .tok-func{color:var(--accent-warn);}

  .flag-legend{
    margin-top:14px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
  .flag-legend span{
    font-family:var(--mono);
    font-size:12px;
    color:var(--accent-bad);
    background:var(--accent-bad-dim);
    border:1px solid #603333;
    padding:4px 10px;
    border-radius:20px;
  }

  .install-file-label{
    font-family:var(--mono);
    font-size:12.5px;
    color:var(--muted);
    margin:22px 0 10px;
    padding-top:18px;
    border-top:1px dashed var(--line);
  }
  .install-file-label b{color:var(--accent-bad);}

  .explain-list{
    margin-top:22px;
    display:grid;
    gap:12px;
  }
  .explain-item{
    display:grid;
    grid-template-columns:26px 1fr;
    gap:12px;
    font-size:14.5px;
    color:var(--muted);
  }
  .explain-item b{color:var(--text);}
  .explain-item .badge{
    font-family:var(--mono);
    color:var(--accent-bad);
    font-weight:700;
  }

  /* ---------- RULE BOX ---------- */
  .rule-box{
    background:linear-gradient(135deg, var(--bg-raised), var(--bg-code));
    border:1px solid var(--accent-warn);
    border-radius:12px;
    padding:32px 34px;
    position:relative;
  }
  .rule-box::before{
    content:"TL;DR";
    position:absolute;
    top:-12px;
    left:28px;
    background:var(--accent-warn);
    color:#241a06;
    font-family:var(--mono);
    font-weight:700;
    font-size:12px;
    padding:3px 10px;
    border-radius:5px;
    letter-spacing:0.05em;
  }
  .rule-box p{
    margin:0;
    font-size:17px;
    color:var(--text);
    max-width:75ch;
  }

  /* ---------- ADOPTION DETECTION ---------- */
  .method-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    gap:20px;
  }
  .method-card{
    min-width:0;
    background:var(--bg-raised);
    border:1px solid var(--line);
    border-radius:10px;
    padding:22px 24px;
  }
  .method-card .idx{
    font-family:var(--mono);
    font-size:12px;
    color:var(--accent-warn);
    letter-spacing:0.05em;
    margin-bottom:10px;
    display:block;
  }
  .method-card h3{
    font-family:var(--display);
    font-size:16.5px;
    margin:0 0 8px;
    font-weight:600;
  }
  .method-card p{
    margin:0;
    font-size:14px;
    color:var(--muted);
  }
  .method-card .fields{
    margin-top:12px;
    display:grid;
    gap:6px;
  }
  .method-card .field{
    font-family:var(--mono);
    font-size:12.5px;
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:6px 10px;
    background:var(--bg-code);
    border-radius:5px;
    border:1px solid var(--line);
  }
  .method-card .field .k{color:var(--muted);}
  .method-card .field .v{color:var(--accent-ok);}
  .method-card .field.warn .v{color:var(--accent-bad);}

  .term-block{
    margin-top:14px;
    background:var(--bg-code);
    border:1px solid var(--line);
    border-radius:8px;
    padding:14px 16px;
    font-family:var(--mono);
    font-size:12.5px;
    color:var(--muted);
    overflow-x:auto;
  }
  .term-block .prompt{color:var(--accent-warn);}
  .term-block .out-flag{color:var(--accent-bad);}
  .term-block .out-ok{color:var(--accent-ok);}

  .golden-rule{
    margin-top:28px;
    border-left:3px solid var(--accent-warn);
    padding:14px 20px;
    background:var(--bg-code);
    border-radius:0 8px 8px 0;
    font-size:15px;
  }
  .golden-rule b{color:var(--accent-warn);}

  /* ---------- TOOLS ---------- */
  .tool-card{
    background:var(--bg-raised);
    border:1px solid var(--line);
    border-radius:10px;
    padding:24px 26px;
  }
  .tool-card + .tool-card{margin-top:16px;}
  .tool-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:8px;
  }
  .tool-head h3{
    font-family:var(--mono);
    font-size:16px;
    margin:0;
    color:var(--text);
    font-weight:600;
  }
  .tool-tag{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:0.04em;
    padding:3px 9px;
    border-radius:20px;
    white-space:nowrap;
  }
  .tool-tag.active{background:var(--accent-ok-dim);color:var(--accent-ok);border:1px solid #2f5240;}
  .tool-tag.caution{background:var(--accent-bad-dim);color:var(--accent-bad);border:1px solid #603333;}
  .tool-card p{margin:0 0 12px;color:var(--muted);font-size:14.5px;}
  .tool-card .install-line{
    font-family:var(--mono);
    font-size:13px;
    background:var(--bg-code);
    border:1px solid var(--line);
    border-radius:6px;
    padding:10px 14px;
    color:var(--accent-warn);
    overflow-x:auto;
  }
  .tool-card a{
    font-family:var(--mono);
    font-size:13px;
    display:inline-block;
    margin-top:10px;
  }

  footer{
    padding:40px 0 70px;
    border-top:1px solid var(--line);
    color:var(--comment);
    font-size:13px;
    font-family:var(--mono);
  }

  ::selection{background:var(--accent-bad-dim);color:var(--text);}