@font-face {
      font-family: 'classy';
      src: url('https://vkfonts.storage.googleapis.com/classy.woff2') format('woff2');
      font-weight: normal;
      font-style: normal;
    }

    .ms {
      font-family: 'Material Symbols Rounded';
      font-weight: 300;
      font-style: normal;
      font-size: 1.1em;
      line-height: 1;
      letter-spacing: normal;
      text-transform: none;
      display: inline-block;
      white-space: nowrap;
      vertical-align: middle;
      font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
      position: relative;
      top: -1px;
    }

    :root {
      --bg: #090a0f;
      --text: #ffffff;
      --muted: #8e939d;

      /* Accent — softened from #00E54D */
--accent: #96E72A;
--accent-bright: #96E72A;
--accent-dim: rgba(150, 231, 42, 0.09);
        
      /* Matte surfaces */
      --matte-bg: #111319;
      --matte-border: #1e222d;
      --matte-sub: #161922;

      /* Semantic status */
      --ok:   #5a8a6e;
      --warn: #8a7a3e;
      --err:  #8a4e4e;
      --info: #4e6a8a;
    }

    * {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
      background-color: var(--bg);
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'classy', monospace;
      font-size: 15px;
      line-height: 1.6;
      padding-bottom: 80px;
    }

    /* ── Layout ── */
    .wrap {
      width: min(900px, calc(100% - 32px));
      margin: 0 auto;
    }

    /* ── Nav ── */
    nav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(9, 10, 15, 0.96);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--matte-border);
      padding: 0 24px;
      display: flex;
      overflow-x: auto;
      scrollbar-width: none;
    }
    nav::-webkit-scrollbar { display: none; }

    nav a {
      color: var(--muted);
      text-decoration: none;
      font-size: 0.72rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 14px 14px;
      white-space: nowrap;
      border-bottom: 2px solid transparent;
      transition: color 0.15s, border-color 0.15s;
    }
    nav a:hover {
      color: var(--accent);
      border-bottom-color: var(--accent);
    }

    /* ── Hero ── */
    .hero {
      padding: 72px 32px 56px;
      margin-bottom: 0;
      border-bottom: 1px solid var(--matte-border);
    }

    .hero-logo {
      font-size: clamp(3rem, 8vw, 6rem);
      letter-spacing: -0.04em;
      line-height: 1;
      color: var(--accent);
      margin-bottom: 4px;
    }

    .hero-tagline {
      font-size: 0.72rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 28px;
    }

    .hero h1 {
      font-size: clamp(2rem, 5vw, 3.4rem);
      letter-spacing: -0.03em;
      line-height: 1.1;
      color: #ffffff;
      margin-bottom: 16px;
    }

    .hero h1 .highlight { color: var(--accent); }

    .hero .lead {
      color: var(--muted);
      font-size: 0.95rem;
      max-width: 680px;
      margin-bottom: 0;
    }

    .meta-badges {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 28px;
    }

    .badge {
      background: var(--matte-sub);
      border: 1px solid var(--matte-border);
      border-radius: 20px;
      padding: 3px 12px;
      font-size: 0.7rem;
      letter-spacing: 0.06em;
      color: var(--muted);
    }

    .badge.accent {
      border-color: var(--accent-bright);
      color: var(--accent);
    }

    .actions {
      display: flex;
      gap: 12px;
      margin-top: 28px;
    }

    .btn {
      color: #060d08;
      background: var(--accent);
      border: 1px solid var(--accent);
      padding: 10px 22px;
      text-decoration: none;
      border-radius: 6px;
      font-size: 0.82rem;
      letter-spacing: 0.04em;
      font-family: inherit;
      transition: opacity 0.15s;
    }
    .btn:hover { opacity: 0.85; }

    .btn.ghost {
      color: #ffffff;
      background: transparent;
      border-color: var(--matte-border);
    }
    .btn.ghost:hover {
      background: var(--matte-sub);
      border-color: #313749;
    }

    /* ── Panels ── */
    .matte-panel {
      background: var(--matte-bg);
      border: 1px solid var(--matte-border);
      border-radius: 12px;
      padding: 32px;
      margin-bottom: 16px;
    }

    .matte-subpanel {
      background: var(--matte-sub);
      border: 1px solid var(--matte-border);
      border-radius: 6px;
      padding: 16px;
    }

    /* ── Section wrapper (full-width, no card look for spec sections) ── */
    .spec-section {
      padding: 52px 0 0;
    }

    /* ── Typography ── */
    .eyebrow, .section-label {
      margin: 0 0 8px;
      color: var(--accent);
      font-size: 0.72rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
    }

    h2 {
      font-size: clamp(1.4rem, 3vw, 2rem);
      letter-spacing: -0.03em;
      line-height: 1.1;
      color: #ffffff;
      margin: 0 0 20px;
    }

    h3 {
      font-size: 1rem;
      color: #ffffff;
      margin: 28px 0 10px;
    }

    h4 {
      font-size: 0.85rem;
      color: var(--accent);
      margin: 18px 0 8px;
      letter-spacing: 0.04em;
    }

    p {
      color: var(--muted);
      margin: 12px 0 0;
      font-size: 0.92rem;
    }

    strong { color: var(--accent); }

    ul, ol {
      padding-left: 20px;
      color: var(--muted);
      margin: 12px 0 0;
      font-size: 0.92rem;
    }

    li { margin: 6px 0; }

    /* ── Code ── */
    code {
      color: var(--accent);
      background: var(--accent-dim);
      padding: 2px 6px;
      border-radius: 4px;
      font-family: inherit;
      font-size: 0.88em;
    }

    pre {
      margin: 16px 0 0;
      padding: 18px 20px;
      overflow-x: auto;
      background: var(--matte-sub);
      border: 1px solid var(--matte-border);
      border-radius: 8px;
      font-family: inherit;
      font-size: 0.84rem;
      line-height: 1.65;
      color: #c9d1e0;
    }

    pre code {
      color: #c9d1e0;
      background: transparent;
      padding: 0;
      border: none;
      white-space: pre;
    }

    /* ── Grid ── */
    .grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      margin-top: 16px;
    }

    /* ── File tree ── */
    .filetree {
      background: var(--matte-sub);
      border: 1px solid var(--matte-border);
      border-radius: 8px;
      padding: 18px 20px;
      overflow-x: auto;
      margin: 16px 0 0;
      font-size: 0.84rem;
      line-height: 1.7;
      color: #c9d1e0;
    }
    .filetree .dir  { color: var(--accent); }
    .filetree .file { color: var(--text); }
    .filetree .note { color: var(--muted); }

    /* ── Tables ── */
    .matrix {
      width: 100%;
      border-collapse: collapse;
      margin: 16px 0 0;
      font-size: 0.84rem;
    }
    .matrix th,
    .matrix td {
      border: 1px solid var(--matte-border);
      padding: 11px 14px;
      text-align: left;
      vertical-align: top;
      color: var(--muted);
    }
    .matrix th {
      background: var(--matte-sub);
      font-size: 0.7rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--accent);
    }
    .matrix tr:nth-child(even) td {
      background: rgba(255,255,255,.02);
    }
    .matrix td:first-child { color: var(--text); }

    /* ── Comparison table special col colors ── */
    .matrix .col-method  { color: var(--accent); }
    .matrix .col-good    { color: #7ab89a; }
    .matrix .col-neutral { color: var(--muted); }
    .matrix .col-warn    { color: #c9a96e; }

    /* ── Callouts ── */
    .callout {
      border-radius: 8px;
      padding: 16px 18px;
      margin: 16px 0 0;
    }
    .callout-title {
      font-size: 0.68rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 6px;
      opacity: 0.65;
      color: var(--text);
    }
    .callout p { margin-top: 6px; }
    .callout pre { margin-top: 10px; }

    .callout.intent {
      background: rgba(0, 229, 77, 0.06);
    }
    .callout.rule {
      background: rgba(0, 229, 77, 0.05);
    }
    .callout.warn {
      background: rgba(180, 150, 60, 0.10);
    }
    .callout.error {
      background: rgba(180, 60, 60, 0.10);
    }
    .callout.ok {
      background: rgba(70, 160, 100, 0.08);
    }

    /* Status pill text */
    .status-error  { color: #c47a7a; }
    .status-warn   { color: #c4a45a; }
    .status-ok     { color: #6aaa8a; }

    /* ── Divider ── */
    .divider {
      height: 1px;
      background: var(--matte-border);
      margin: 48px 0 0;
    }

    /* ── Footer ── */
    footer {
      text-align: center;
      padding: 24px 0 0;
    }
    footer p {
      color: var(--muted);
      font-size: 0.78rem;
    }

    /* ── Responsive ── */
    @media (max-width: 700px) {
      .wrap { width: calc(100% - 24px); }
      .matte-panel { padding: 20px; }
      .grid { grid-template-columns: 1fr; }
      .hero { padding: 40px 20px 36px; }
      .matrix { font-size: 0.78rem; }
    }