:root{
      color-scheme:dark;
      --bg:#070b14;
      --panel:#101725;
      --panel-2:#151e2f;
      --text:#eef3ff;
      --muted:#a8b3c9;
      --line:rgba(255,255,255,.09);
      --accent:#dfe8ff;
      --glow:rgba(110,140,255,.18);
      --radius:26px;
      --shadow:0 28px 70px rgba(0,0,0,.32);
    }

    *{box-sizing:border-box}

    html{scroll-behavior:smooth}

    body{
      margin:0;
      font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at top, rgba(104,122,255,.16), transparent 24%),
        radial-gradient(circle at right top, rgba(73,187,255,.08), transparent 18%),
        var(--bg);
      line-height:1.68;
    }

    a{
      color:#fff;
      text-decoration:none;
    }

    .page{
      width:min(1080px, calc(100% - 32px));
      margin:24px auto 56px;
    }

    .hero{
      position:relative;
      overflow:hidden;
      padding:30px;
      border:1px solid var(--line);
      border-radius:32px;
      background:
        radial-gradient(circle at top right, var(--glow), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
        var(--panel);
      box-shadow:var(--shadow);
    }

    .hero::after{
      content:"";
      position:absolute;
      inset:auto -40px -60px auto;
      width:220px;
      height:220px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(255,255,255,.08), transparent 68%);
      pointer-events:none;
    }

    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      margin-bottom:22px;
    }

    .back-link{
      display:inline-flex;
      align-items:center;
      gap:10px;
      min-height:44px;
      padding:0 16px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.04);
      color:var(--accent);
      font-size:14px;
      font-weight:600;
    }

    .doc-badge{
      display:inline-flex;
      align-items:center;
      min-height:40px;
      padding:0 14px;
      border-radius:999px;
      border:1px solid rgba(108,127,255,.32);
      background:rgba(89,105,255,.12);
      color:var(--accent);
      font-size:12px;
      font-weight:700;
      letter-spacing:.04em;
      text-transform:uppercase;
    }

    h1{
      max-width:780px;
      margin:0 0 12px;
      font-size:clamp(34px, 6vw, 64px);
      line-height:1;
      letter-spacing:-.03em;
    }

    .hero-text{
      max-width:760px;
      margin:0;
      color:var(--muted);
      font-size:16px;
    }

    .hero-meta{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:22px;
    }

    .hero-pill{
      display:inline-flex;
      align-items:center;
      min-height:42px;
      padding:0 14px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.035);
      color:var(--accent);
      font-size:13px;
      font-weight:600;
    }

    .content{
      display:grid;
      grid-template-columns:minmax(0, 280px) minmax(0, 1fr);
      gap:22px;
      margin-top:22px;
    }

    .toc,
    .document{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
        var(--panel);
      box-shadow:var(--shadow);
    }

    .toc{
      position:sticky;
      top:20px;
      align-self:start;
      padding:22px;
    }

    .toc-title{
      margin:0 0 14px;
      font-size:13px;
      font-weight:700;
      letter-spacing:.06em;
      text-transform:uppercase;
      color:var(--accent);
    }

    .toc nav{
      display:grid;
      gap:8px;
    }

    .toc a{
      display:block;
      padding:10px 12px;
      border-radius:14px;
      color:var(--muted);
      background:rgba(255,255,255,.02);
      transition:background .2s ease, color .2s ease;
    }

    .toc a:hover{
      color:#fff;
      background:rgba(255,255,255,.05);
    }

    .document{
      padding:28px;
    }

    .section{
      padding:22px 0;
      border-bottom:1px solid rgba(255,255,255,.06);
    }

    .section:first-child{padding-top:0}
    .section:last-child{
      padding-bottom:0;
      border-bottom:none;
    }

    h2{
      margin:0 0 12px;
      font-size:clamp(22px, 3vw, 30px);
      line-height:1.12;
      letter-spacing:-.02em;
    }

    p{
      margin:0 0 14px;
      color:var(--muted);
      font-size:15px;
    }

    ul{
      margin:0;
      padding-left:18px;
      color:var(--muted);
    }

    li{
      margin:0 0 9px;
    }

    .accent-card{
      margin-top:8px;
      padding:18px 18px 16px;
      border-radius:20px;
      border:1px solid rgba(255,255,255,.08);
      background:
        radial-gradient(circle at top right, rgba(92,122,255,.13), transparent 32%),
        rgba(255,255,255,.025);
    }

    .accent-card p:last-child,
    .section p:last-child,
    .section ul:last-child{
      margin-bottom:0;
    }

    @media (max-width: 920px){
      .content{
        grid-template-columns:1fr;
      }

      .toc{
        position:static;
      }
    }

    @media (max-width: 640px){
      .page{
        width:min(100%, calc(100% - 20px));
        margin:10px auto 28px;
      }

      .hero,
      .document,
      .toc{
        padding:20px;
        border-radius:22px;
      }

      .topbar{
        flex-direction:column;
        align-items:flex-start;
        margin-bottom:18px;
      }

      .hero-text{
        font-size:15px;
      }
    }