:root {
      color-scheme: dark;
      --bg: #05070d;
      --bg-deep: #030712;
      --panel: rgba(8, 15, 28, .62);
      --panel-strong: rgba(12, 22, 40, .82);
      --panel-soft: rgba(15, 23, 42, .48);
      --line: rgba(148, 163, 184, .18);
      --line-strong: rgba(45, 212, 191, .42);
      --line-hot: rgba(96, 165, 250, .38);
      --text: #e5edf7;
      --text-soft: #a8b3c7;
      --muted: #738198;
      --teal: #2dd4bf;
      --cyan: #67e8f9;
      --blue: #60a5fa;
      --amber: #f59e0b;
      --danger: #fb7185;
      --ok: #34d399;
      --shadow: 0 24px 80px rgba(0, 0, 0, .42);
      --shadow-soft: 0 16px 52px rgba(0, 0, 0, .28);
      --glow-teal: 0 0 0 1px rgba(45, 212, 191, .24), 0 0 42px rgba(45, 212, 191, .13);
      --glow-blue: 0 0 0 1px rgba(96, 165, 250, .22), 0 0 42px rgba(96, 165, 250, .12);
      --radius-xl: 34px;
      --radius-lg: 24px;
      --radius-md: 16px;
      --radius-sm: 12px;
      --container: 1180px;
      --font-sans: "Inter", "SF Pro Display", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
      --font-display: "SF Pro Display", "Inter", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
      --font-mono: "JetBrains Mono", "Cascadia Code", "SFMono-Regular", Consolas, monospace;
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--text);
      font-family: var(--font-sans);
      line-height: 1.72;
      background:
        radial-gradient(circle at 16% 8%, rgba(45, 212, 191, .16), transparent 30rem),
        radial-gradient(circle at 86% 6%, rgba(96, 165, 250, .18), transparent 32rem),
        radial-gradient(circle at 50% 100%, rgba(245, 158, 11, .08), transparent 36rem),
        linear-gradient(135deg, var(--bg) 0%, #08111f 48%, var(--bg-deep) 100%);
      overflow-x: hidden;
    }

    .aurora {
      position: fixed;
      inset: -42vmax;
      z-index: -2;
      pointer-events: none;
      opacity: .74;
      filter: blur(16px) saturate(155%);
      mix-blend-mode: screen;
      background:
        radial-gradient(ellipse at 18% 28%, rgba(45, 212, 191, .46), transparent 32vmax),
        radial-gradient(ellipse at 78% 18%, rgba(96, 165, 250, .40), transparent 34vmax),
        radial-gradient(ellipse at 58% 76%, rgba(103, 232, 249, .26), transparent 30vmax),
        radial-gradient(ellipse at 34% 72%, rgba(245, 158, 11, .18), transparent 28vmax);
      transform-origin: 50% 50%;
      animation: aurora-breathe 34s cubic-bezier(.22, 1, .36, 1) infinite alternate;
      will-change: transform;
      contain: paint;
    }

    .aurora::before,
    .aurora::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      border-radius: 45%;
      will-change: transform, opacity;
    }

    .aurora::before {
      opacity: .58;
      background:
        radial-gradient(ellipse at 42% 38%, rgba(45, 212, 191, .34), transparent 30vmax),
        radial-gradient(ellipse at 64% 60%, rgba(96, 165, 250, .26), transparent 32vmax),
        radial-gradient(ellipse at 32% 58%, rgba(103, 232, 249, .20), transparent 24vmax);
      transform: rotate(-18deg) skewX(-10deg) scale(1.12, .86);
      animation: aurora-knead-a 42s cubic-bezier(.22, 1, .36, 1) infinite alternate;
    }

    .aurora::after {
      opacity: .46;
      background:
        radial-gradient(ellipse at 68% 32%, rgba(96, 165, 250, .28), transparent 34vmax),
        radial-gradient(ellipse at 38% 68%, rgba(45, 212, 191, .30), transparent 28vmax),
        radial-gradient(ellipse at 52% 46%, rgba(245, 158, 11, .13), transparent 26vmax);
      transform: rotate(16deg) skewY(12deg) scale(.92, 1.18);
      animation: aurora-knead-b 48s cubic-bezier(.22, 1, .36, 1) infinite alternate;
    }

    @keyframes aurora-breathe {
      0%   { transform: translate3d(-7vw, -5vh, 0) rotate(-8deg) skew(-6deg, 2deg) scale(1.02, .96); }
      25%  { transform: translate3d(9vw, -8vh, 0) rotate(5deg) skew(8deg, -5deg) scale(1.16, .88); }
      50%  { transform: translate3d(6vw, 8vh, 0) rotate(12deg) skew(-9deg, 7deg) scale(.98, 1.15); }
      75%  { transform: translate3d(-10vw, 6vh, 0) rotate(-3deg) skew(7deg, 9deg) scale(1.12, 1.02); }
      100% { transform: translate3d(7vw, -4vh, 0) rotate(-11deg) skew(-10deg, -4deg) scale(.96, 1.18); }
    }

    @keyframes aurora-knead-a {
      0%   { transform: translate3d(-4vw, 2vh, 0) rotate(-18deg) skewX(-10deg) scale(1.12, .86); opacity: .42; }
      33%  { transform: translate3d(8vw, -6vh, 0) rotate(9deg) skewX(16deg) scale(.92, 1.20); opacity: .64; }
      66%  { transform: translate3d(-6vw, 9vh, 0) rotate(22deg) skewY(-14deg) scale(1.22, .92); opacity: .54; }
      100% { transform: translate3d(5vw, -3vh, 0) rotate(-7deg) skewX(11deg) scale(.98, 1.16); opacity: .62; }
    }

    @keyframes aurora-knead-b {
      0%   { transform: translate3d(6vw, -3vh, 0) rotate(16deg) skewY(12deg) scale(.92, 1.18); opacity: .34; }
      30%  { transform: translate3d(-9vw, 5vh, 0) rotate(-14deg) skewY(-16deg) scale(1.22, .88); opacity: .54; }
      65%  { transform: translate3d(4vw, 10vh, 0) rotate(7deg) skewX(13deg) scale(1.06, 1.10); opacity: .48; }
      100% { transform: translate3d(-7vw, -7vh, 0) rotate(20deg) skewX(-12deg) scale(.90, 1.24); opacity: .58; }
    }

.container {
      width: min(var(--container), calc(100% - 36px));
      margin: 0 auto;
    }

    header {
      min-height: 96vh;
      display: grid;
      align-items: center;
      padding: 76px 0 42px;
    }

    main { padding-bottom: 36px; }

    section {
      position: relative;
      margin: 28px 0;
      padding: clamp(24px, 4vw, 42px);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: linear-gradient(135deg, rgba(8, 15, 28, .58), rgba(8, 15, 28, .34));
      backdrop-filter: blur(8px) saturate(118%);
      -webkit-backdrop-filter: blur(8px) saturate(118%);
      box-shadow: var(--shadow-soft);
      overflow: hidden;
    }

    section::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(120deg, rgba(45, 212, 191, .10), transparent 30%, rgba(96, 165, 250, .08));
      opacity: .48;
      pointer-events: none;
    }

    section > * { position: relative; z-index: 1; }

    h1, h2, h3 {
      font-family: var(--font-display);
      line-height: 1.06;
      letter-spacing: -.035em;
      margin-top: 0;
    }

    h1 {
      margin: 14px 0 22px;
      max-width: 780px;
      font-size: clamp(48px, 7.2vw, 96px);
      font-weight: 900;
    }

    h2 {
      margin-bottom: 18px;
      font-size: clamp(30px, 4.8vw, 54px);
      font-weight: 860;
    }

    h3 {
      margin-bottom: 10px;
      font-size: 22px;
      font-weight: 820;
    }

    p { margin: 0 0 14px; color: var(--text-soft); }
    .muted { color: var(--muted); }
    .mono { font-family: var(--font-mono); }

    .hero-shell {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(360px, .72fr);
      gap: clamp(22px, 4vw, 48px);
      align-items: center;
      padding: clamp(30px, 5vw, 60px);
      border: 1px solid rgba(45, 212, 191, .22);
      border-radius: var(--radius-xl);
      background:
        linear-gradient(135deg, rgba(8, 15, 28, .86), rgba(8, 15, 28, .52)),
        radial-gradient(circle at 76% 18%, rgba(45, 212, 191, .18), transparent 24rem),
        radial-gradient(circle at 92% 78%, rgba(96, 165, 250, .14), transparent 26rem);
      backdrop-filter: blur(10px) saturate(122%);
      -webkit-backdrop-filter: blur(10px) saturate(122%);
      box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
      overflow: hidden;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border: 1px solid rgba(45, 212, 191, .24);
      border-radius: 999px;
      background: rgba(45, 212, 191, .07);
      color: var(--cyan);
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .status-dot {
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: var(--ok);
      box-shadow: 0 0 18px rgba(52, 211, 153, .85);
    }

    .lead {
      max-width: 760px;
      color: #c7d4e7;
      font-size: clamp(18px, 2vw, 23px);
      line-height: 1.72;
    }

    .hero-actions,
    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 28px;
    }

    .capsule-nav {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0;
      min-height: 46px;
      margin-top: 28px;
      padding: 5px;
      border: 1px solid rgba(45, 212, 191, .34);
      border-radius: 999px;
      background: rgba(2, 6, 23, .58);
      box-shadow: 0 18px 50px rgba(45, 212, 191, .10), inset 0 1px 0 rgba(255,255,255,.06);
    }

    .capsule-link {
      display: inline-flex;
      align-items: center;
      min-height: 36px;
      padding: 0 15px;
      border-radius: 999px;
      color: #dffefa;
      font-weight: 850;
      white-space: nowrap;
      transition: color .18s ease, background .18s ease, box-shadow .18s ease;
    }

    .capsule-link:hover,
    .capsule-link:focus-visible {
      color: #fff;
      background: linear-gradient(135deg, rgba(45, 212, 191, .22), rgba(96, 165, 250, .15));
      box-shadow: 0 0 26px rgba(45, 212, 191, .12);
    }

    .capsule-divider {
      color: rgba(148, 163, 184, .42);
      font-family: var(--font-mono);
      user-select: none;
    }

    .button-link,
    .chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 40px;
      border-radius: 999px;
      font-weight: 800;
      letter-spacing: -.01em;
    }

    .button-link {
      padding: 10px 16px;
      border: 1px solid rgba(45, 212, 191, .38);
      background: linear-gradient(135deg, rgba(45, 212, 191, .18), rgba(96, 165, 250, .12));
      color: #e9fffb;
      box-shadow: 0 14px 36px rgba(45, 212, 191, .10);
    }

    .chip {
      padding: 8px 13px;
      border: 1px solid rgba(148, 163, 184, .16);
      background: rgba(15, 23, 42, .54);
      color: var(--text-soft);
      font-size: 13px;
    }

    .cockpit {
      border: 1px solid rgba(45, 212, 191, .24);
      border-radius: 26px;
      background: linear-gradient(180deg, rgba(2, 6, 23, .72), rgba(15, 23, 42, .46));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 22px 56px rgba(0,0,0,.26);
      overflow: hidden;
    }

    .cockpit-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 16px;
      border-bottom: 1px solid rgba(148, 163, 184, .14);
      background: rgba(15, 23, 42, .54);
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--muted);
    }

    .window-dots { display: flex; gap: 7px; }
    .window-dots i { width: 10px; height: 10px; border-radius: 999px; display: block; }
    .window-dots i:nth-child(1) { background: var(--danger); }
    .window-dots i:nth-child(2) { background: var(--amber); }
    .window-dots i:nth-child(3) { background: var(--ok); }

    .cockpit-body { padding: 18px; }

    .terminal-line {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 10px;
      align-items: center;
      padding: 11px 0;
      border-bottom: 1px solid rgba(148, 163, 184, .10);
      font-family: var(--font-mono);
      font-size: 13px;
      color: var(--text-soft);
    }

    .terminal-line:last-child { border-bottom: 0; }
    .prompt { color: var(--teal); }
    .terminal-ok { color: var(--ok); font-weight: 900; }
    .terminal-warn { color: var(--amber); font-weight: 900; }

    .console-meter {
      margin-top: 18px;
      padding: 15px;
      border: 1px solid rgba(96, 165, 250, .18);
      border-radius: 18px;
      background: rgba(96, 165, 250, .06);
    }

    .meter-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--muted);
    }

    .meter-bar {
      margin-top: 10px;
      height: 9px;
      border-radius: 999px;
      background: rgba(148, 163, 184, .14);
      overflow: hidden;
    }

    .meter-bar span {
      display: block;
      width: 76%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--teal), var(--blue));
      box-shadow: 0 0 22px rgba(45, 212, 191, .40);
    }

    .section-kicker {
      margin-bottom: 10px;
      color: var(--teal);
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .section-head {
      display: grid;
      grid-template-columns: minmax(0, .78fr) minmax(280px, .42fr);
      gap: 22px;
      align-items: end;
      margin-bottom: 22px;
    }

    .grid { display: grid; gap: 16px; }
    .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

    .panel-card {
      position: relative;
      min-height: 100%;
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: linear-gradient(180deg, rgba(15, 23, 42, .56), rgba(15, 23, 42, .34));
      box-shadow: 0 12px 34px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
    }

    .panel-card::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 3px;
      border-radius: 999px 0 0 999px;
      background: linear-gradient(180deg, var(--teal), transparent);
      opacity: .46;
    }

    .panel-card:hover,
    .panel-card:focus-within {
      border-color: rgba(45, 212, 191, .36);
      box-shadow: var(--glow-teal);
      background: linear-gradient(180deg, rgba(15, 23, 42, .70), rgba(15, 23, 42, .44));
    }

    .metric {
      display: flex;
      flex-direction: column;
      gap: 9px;
      min-height: 138px;
    }

    .metric strong {
      color: var(--text);
      font-family: var(--font-display);
      font-size: clamp(27px, 4vw, 42px);
      line-height: .98;
      letter-spacing: -.035em;
    }

    .metric span { color: var(--muted); font-size: 14px; font-weight: 700; }

    .status-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--teal);
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 800;
    }

    .status-label::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: currentColor;
      box-shadow: 0 0 16px currentColor;
    }

    .architecture {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 12px;
      align-items: stretch;
      margin-top: 24px;
    }

    .arch-node {
      position: relative;
      padding: 18px;
      min-height: 170px;
      border: 1px solid rgba(96, 165, 250, .20);
      border-radius: 20px;
      background: linear-gradient(180deg, rgba(8, 15, 28, .70), rgba(8, 15, 28, .42));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    }

    .arch-node:not(:last-child)::after {
      content: "";
      position: absolute;
      top: 50%;
      right: -12px;
      width: 12px;
      height: 1px;
      background: linear-gradient(90deg, var(--teal), rgba(45, 212, 191, .08));
      box-shadow: 0 0 14px rgba(45, 212, 191, .45);
    }

    .arch-index {
      display: inline-grid;
      place-items: center;
      width: 32px;
      height: 32px;
      margin-bottom: 16px;
      border: 1px solid rgba(45, 212, 191, .28);
      border-radius: 12px;
      color: var(--teal);
      font-family: var(--font-mono);
      font-weight: 900;
      background: rgba(45, 212, 191, .08);
    }

    .boundary-card {
      min-height: 220px;
    }

    .boundary-card.danger {
      border-color: rgba(251, 113, 133, .32);
      background: linear-gradient(180deg, rgba(76, 5, 25, .30), rgba(15, 23, 42, .42));
    }

    .boundary-card.danger::before { background: linear-gradient(180deg, var(--danger), transparent); }

    .tabs {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0;
      margin: 0 0 18px;
      padding: 5px;
      border: 1px solid rgba(45, 212, 191, .30);
      border-radius: 999px;
      background: rgba(2, 6, 23, .62);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    }

    .tab-divider {
      color: rgba(148, 163, 184, .48);
      font-family: var(--font-mono);
      user-select: none;
    }

    .tab-button,
    .timeline-step,
    .copy-btn {
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: var(--text-soft);
      cursor: pointer;
      font-family: var(--font-sans);
      font-weight: 820;
      transition: transform .18s ease, color .18s ease, background .18s ease;
    }

    .tab-button { padding: 10px 16px; }
    .timeline-step { padding: 10px 14px; border: 1px solid rgba(148, 163, 184, .18); background: rgba(15, 23, 42, .58); }
    .copy-btn { padding: 8px 11px; font-size: 12px; border: 1px solid rgba(148, 163, 184, .18); background: rgba(15, 23, 42, .58); }

    .tab-button:hover,
    .tab-button.active,
    .timeline-step:hover,
    .timeline-step.is-active,
    .copy-btn:hover {
      transform: translateY(-1px);
      color: #eafffb;
      background: rgba(45, 212, 191, .13);
    }

    .tab-button.active { box-shadow: inset 0 0 0 1px rgba(45, 212, 191, .34); }
    .tab-panel { display: none; }
    .tab-panel.active { display: block; }

    .models-secrets-section .section-head { margin-bottom: 18px; }

    .models-secrets-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(360px, .76fr);
      gap: 18px;
      align-items: stretch;
      min-height: 560px;
    }

    .feature-card,
    .ops-board {
      position: relative;
      border: 1px solid rgba(45, 212, 191, .22);
      border-radius: 20px;
      background:
        radial-gradient(circle at 10% 0%, rgba(45, 212, 191, .10), transparent 22rem),
        rgba(2, 6, 23, .58);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
    }

    .feature-card {
      display: flex;
      flex-direction: column;
      padding: 18px;
      min-width: 0;
    }

    .ops-board {
      display: flex;
      flex-direction: column;
      min-width: 0;
      min-height: 100%;
      overflow: hidden;
    }

    .models-secrets-grid > .feature-card,
    .models-secrets-grid > .ops-board {
      height: 560px;
      min-height: 560px;
      max-height: 560px;
    }

    .models-secrets-grid > .feature-card:hover,
    .models-secrets-grid > .feature-card:focus-within,
    .models-secrets-grid > .ops-board:hover,
    .models-secrets-grid > .ops-board:focus-within {
      transform: translateY(-3px);
      border-color: rgba(var(--theme-a), .52);
      background:
        radial-gradient(circle at var(--glow-x, 18%) var(--glow-y, 8%), rgba(var(--theme-a), .16), transparent 20rem),
        radial-gradient(circle at 86% 100%, rgba(var(--theme-b), .10), transparent 18rem),
        rgba(2, 6, 23, .68);
      box-shadow:
        0 0 0 1px rgba(var(--theme-a), .18),
        0 0 0 6px rgba(var(--theme-a), .055),
        0 0 0 14px rgba(var(--theme-b), .035),
        0 0 0 24px rgba(var(--theme-c), .022),
        0 24px 70px rgba(var(--theme-a), .14),
        inset 0 1px 0 rgba(255,255,255,.08);
    }

    .models-secrets-grid > .feature-card::after,
    .models-secrets-grid > .ops-board::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      opacity: 0;
      background:
        radial-gradient(circle at 0% 0%, rgba(var(--theme-a), .28), transparent 18rem),
        radial-gradient(circle at 100% 0%, rgba(var(--theme-b), .20), transparent 16rem),
        radial-gradient(circle at 100% 100%, rgba(var(--theme-c), .18), transparent 18rem),
        radial-gradient(circle at 0% 100%, rgba(var(--theme-d), .14), transparent 16rem);
      transition: opacity .22s ease;
    }

    .models-secrets-grid > .feature-card:hover::after,
    .models-secrets-grid > .feature-card:focus-within::after,
    .models-secrets-grid > .ops-board:hover::after,
    .models-secrets-grid > .ops-board:focus-within::after {
      opacity: 1;
    }

    .ops-board .command-body {
      display: flex;
      flex: 1;
      flex-direction: column;
      min-height: 0;
      overflow: auto;
    }

    .ops-board pre {
      flex: 1;
      min-height: 170px;
    }

    .feature-panel {
      flex: 1;
      min-width: 0;
      padding: 4px 2px 0;
      border: 0;
      border-radius: 0;
      background: transparent;
    }

    .models-secrets-grid .tab-panel.active {
      flex: 1;
      min-height: 0;
      overflow: auto;
      padding-right: 4px;
    }

    .models-secrets-grid .feature-list li,
    .models-secrets-grid .command-notes li,
    .models-secrets-grid .feature-facts span {
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }

    .models-secrets-grid .feature-list li:hover,
    .models-secrets-grid .command-notes li:hover,
    .models-secrets-grid .feature-facts span:hover {
      transform: translateX(3px);
      border-color: rgba(var(--theme-a), .34);
      background: rgba(15, 23, 42, .62);
      box-shadow:
        0 0 0 1px rgba(var(--theme-a), .10),
        0 0 0 5px rgba(var(--theme-a), .038),
        0 0 0 10px rgba(var(--theme-b), .026),
        0 10px 26px rgba(0, 0, 0, .18);
    }

    .feature-panel h3 { margin-bottom: 12px; }
    .feature-lead { color: #c8d7eb; font-size: 16px; }

    .feature-list,
    .command-notes {
      display: grid;
      gap: 10px;
      margin: 16px 0 0;
      padding: 0;
      list-style: none;
    }

    .feature-list li,
    .command-notes li {
      position: relative;
      padding: 11px 12px 11px 34px;
      border: 1px solid rgba(148, 163, 184, .14);
      border-radius: 13px;
      background: rgba(15, 23, 42, .42);
      color: var(--text-soft);
    }

    .feature-list li::before,
    .command-notes li::before {
      content: "";
      position: absolute;
      left: 13px;
      top: 1.15em;
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--teal);
      box-shadow: 0 0 14px rgba(45, 212, 191, .44);
    }

    .feature-facts {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 10px;
      margin-top: 16px;
    }

    .feature-facts span {
      display: grid;
      min-width: 0;
      gap: 4px;
      padding: 12px;
      border: 1px solid rgba(96, 165, 250, .18);
      border-radius: 14px;
      background: rgba(15, 23, 42, .42);
      color: #dbeafe;
      font-size: 13px;
    }

    .feature-facts b {
      color: var(--cyan);
      font-family: var(--font-mono);
      font-size: 12px;
    }

    .feature-facts code {
      display: block;
      max-width: 100%;
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: break-word;
      line-height: 1.45;
    }


    .timeline-wrap {
      display: grid;
      grid-template-columns: minmax(260px, .42fr) minmax(0, .78fr);
      gap: 18px;
      align-items: start;
      margin-top: 22px;
    }

    .timeline {
      display: grid;
      gap: 10px;
      padding-left: 18px;
      border-left: 1px solid rgba(45, 212, 191, .28);
    }

    .timeline-step {
      width: 100%;
      border-radius: 16px;
      text-align: left;
      display: grid;
      grid-template-columns: 32px 1fr;
      gap: 10px;
      align-items: center;
    }

    .timeline-step b {
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border-radius: 10px;
      color: var(--teal);
      background: rgba(45, 212, 191, .08);
      font-family: var(--font-mono);
    }

    .timeline-step span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 700;
    }

    .timeline-detail {
      min-height: 100%;
      border: 1px solid rgba(45, 212, 191, .24);
      border-radius: 22px;
      background: rgba(2, 6, 23, .54);
      padding: 22px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    }

    .split-panel {
      display: grid;
      grid-template-columns: minmax(0, .55fr) minmax(0, .45fr);
      gap: 16px;
    }

    .command-card {
      border: 1px solid rgba(96, 165, 250, .20);
      border-radius: 20px;
      overflow: hidden;
      background: rgba(2, 6, 23, .72);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    }

    .command-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      padding: 12px 14px;
      border-bottom: 1px solid rgba(148, 163, 184, .14);
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: 12px;
      background: rgba(15, 23, 42, .66);
    }

    .command-body { padding: 16px; }

    .command-summary {
      margin: 0 0 14px;
      color: #c8d7eb;
      font-size: 14px;
      line-height: 1.65;
    }

    .command-notes { margin-bottom: 14px; }

    .command-notes li {
      padding-top: 9px;
      padding-bottom: 9px;
      font-size: 13px;
      line-height: 1.55;
    }

    pre {
      margin: 0;
      padding: 18px;
      overflow: auto;
      color: #d7f9ff;
      font-family: var(--font-mono);
      font-size: 13px;
      line-height: 1.72;
      background: transparent;
    }

    .command-body pre {
      border: 1px solid rgba(45, 212, 191, .16);
      border-radius: 15px;
      background: rgba(0, 0, 0, .22);
    }

    code { font-family: var(--font-mono); }

    .fit-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 16px;
    }

    .fit-list {
      display: grid;
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .fit-list li {
      padding: 12px 13px;
      border: 1px solid rgba(148, 163, 184, .14);
      border-radius: 14px;
      background: rgba(15, 23, 42, .44);
      color: var(--text-soft);
    }

    .safe-zone {
      border-color: rgba(251, 113, 133, .34);
      background:
        linear-gradient(135deg, rgba(76, 5, 25, .36), rgba(8, 15, 28, .62)),
        repeating-linear-gradient(-45deg, rgba(251, 113, 133, .06) 0 1px, transparent 1px 12px);
    }

    .safe-zone::before {
      background: radial-gradient(circle at 12% 0%, rgba(251, 113, 133, .18), transparent 26rem);
    }

    .doc-links {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-top: 18px;
    }

    .doc-link {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 96px;
      padding: 18px;
      border: 1px solid rgba(45, 212, 191, .22);
      border-radius: 18px;
      background: rgba(15, 23, 42, .50);
      color: var(--text);
      min-width: 0;
      overflow: hidden;
      text-decoration: none;
      transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
    }

    .doc-link strong,
    .doc-link span {
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.4;
    }

    .doc-link strong {
      flex: 0 0 auto;
      color: var(--text);
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .doc-link span {
      color: var(--text-soft);
    }

    .doc-link:hover {
      border-color: rgba(45, 212, 191, .50);
      background: rgba(45, 212, 191, .08);
      box-shadow: var(--glow-teal);
    }

    .doc-link small {
      display: block;
      margin-top: 10px;
      color: var(--muted);
      line-height: 1.55;
    }

    footer {
      padding: 40px 0 72px;
      color: var(--muted);
      text-align: center;
      font-family: var(--font-mono);
      font-size: 12px;
    }

    [data-reveal] {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity .7s ease, transform .7s ease;
    }

    [data-reveal].is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .accent-text { color: var(--teal); }
    .warn-text { color: var(--amber); }
    .danger-text { color: var(--danger); }

    @media (max-width: 980px) {
      .hero-shell,
      .section-head,
      .timeline-wrap,
      .split-panel,
      .models-secrets-grid,
      .fit-grid { grid-template-columns: 1fr; }
      .grid-5, .grid-3, .grid-2, .architecture, .feature-facts, .doc-links { grid-template-columns: 1fr; }
      .capsule-nav { border-radius: 24px; }
      .capsule-divider { display: none; }
      .arch-node:not(:last-child)::after { display: none; }
      header { min-height: auto; padding-top: 36px; }
    }

    @media (max-width: 620px) {
      .container { width: min(100% - 24px, var(--container)); }
      .hero-shell, section { padding: 22px; border-radius: 22px; }
      h1 { font-size: clamp(42px, 15vw, 68px); }
      pre { font-size: 12px; }
    }

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

    body[data-theme="main-teal"] {
      --bg: #05070d; --bg-deep: #030712; --theme-mid: #08111f;
      --teal: #2dd4bf; --cyan: #67e8f9; --blue: #60a5fa; --amber: #f59e0b;
      --line-strong: rgba(45, 212, 191, .42); --line-hot: rgba(96, 165, 250, .38);
      --theme-a: 45, 212, 191; --theme-b: 96, 165, 250; --theme-c: 103, 232, 249; --theme-d: 245, 158, 11;
    }

    body[data-theme="ubuntu-emerald"] {
      --bg: #030b08; --bg-deep: #020604; --theme-mid: #062019;
      --teal: #34d399; --cyan: #a7f3d0; --blue: #38bdf8; --amber: #fbbf24;
      --line-strong: rgba(52, 211, 153, .42); --line-hot: rgba(56, 189, 248, .36);
      --theme-a: 52, 211, 153; --theme-b: 56, 189, 248; --theme-c: 167, 243, 208; --theme-d: 251, 191, 36;
    }

    body[data-theme="windows-cobalt"] {
      --bg: #040817; --bg-deep: #020412; --theme-mid: #0a1230;
      --teal: #38bdf8; --cyan: #bfdbfe; --blue: #818cf8; --amber: #fb7185;
      --line-strong: rgba(56, 189, 248, .42); --line-hot: rgba(129, 140, 248, .38);
      --theme-a: 56, 189, 248; --theme-b: 129, 140, 248; --theme-c: 191, 219, 254; --theme-d: 251, 113, 133;
    }

    body[data-theme="macos-ruby"] {
      --bg: #0d050b; --bg-deep: #070306; --theme-mid: #1b0a17;
      --teal: #fb7185; --cyan: #fbcfe8; --blue: #a78bfa; --amber: #fbbf24;
      --line-strong: rgba(251, 113, 133, .42); --line-hot: rgba(167, 139, 250, .38);
      --theme-a: 251, 113, 133; --theme-b: 167, 139, 250; --theme-c: 251, 207, 232; --theme-d: 251, 191, 36;
    }

    body[data-theme] {
      background:
        radial-gradient(circle at 16% 8%, rgba(var(--theme-a), .16), transparent 30rem),
        radial-gradient(circle at 86% 6%, rgba(var(--theme-b), .18), transparent 32rem),
        radial-gradient(circle at 50% 100%, rgba(var(--theme-d), .08), transparent 36rem),
        linear-gradient(135deg, var(--bg) 0%, var(--theme-mid) 48%, var(--bg-deep) 100%);
    }

    body[data-theme] .aurora {
      background:
        radial-gradient(ellipse at 18% 28%, rgba(var(--theme-a), .46), transparent 32vmax),
        radial-gradient(ellipse at 78% 18%, rgba(var(--theme-b), .40), transparent 34vmax),
        radial-gradient(ellipse at 58% 76%, rgba(var(--theme-c), .26), transparent 30vmax),
        radial-gradient(ellipse at 34% 72%, rgba(var(--theme-d), .18), transparent 28vmax);
    }

    body[data-theme] .aurora::before {
      background:
        radial-gradient(ellipse at 42% 38%, rgba(var(--theme-a), .34), transparent 30vmax),
        radial-gradient(ellipse at 64% 60%, rgba(var(--theme-b), .26), transparent 32vmax),
        radial-gradient(ellipse at 32% 58%, rgba(var(--theme-c), .20), transparent 24vmax);
    }

    body[data-theme] .aurora::after {
      background:
        radial-gradient(ellipse at 68% 32%, rgba(var(--theme-b), .28), transparent 34vmax),
        radial-gradient(ellipse at 38% 68%, rgba(var(--theme-a), .30), transparent 28vmax),
        radial-gradient(ellipse at 52% 46%, rgba(var(--theme-d), .13), transparent 26vmax);
    }

    .flow-list {
      display: grid;
      gap: 10px;
      margin: 16px 0 0;
      padding: 0;
      list-style: none;
    }

    .flow-list li {
      position: relative;
      padding: 11px 12px 11px 34px;
      border: 1px solid rgba(148, 163, 184, .14);
      border-radius: 13px;
      background: rgba(15, 23, 42, .42);
      color: var(--text-soft);
    }

    .flow-list li::before {
      content: "";
      position: absolute;
      left: 13px;
      top: 1.15em;
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--teal);
      box-shadow: 0 0 14px rgba(var(--theme-a), .44);
    }

    .page-note {
      margin-top: 18px;
      padding: 14px 16px;
      border: 1px solid rgba(var(--theme-a), .22);
      border-radius: 16px;
      background: rgba(2, 6, 23, .44);
      color: #c8d7eb;
    }

    .hero-shell,
    section,
    .cockpit,
    .panel-card,
    .arch-node,
    .boundary-card,
    .feature-card,
    .ops-board,
    .timeline-detail,
    .command-card,
    .safe-zone,
    .doc-link,
    .terminal-line,
    .feature-list li,
    .command-notes li,
    .feature-facts span,
    .flow-list li,
    .fit-list li,
    .chip {
      --glow-x: 50%;
      --glow-y: 20%;
      --glow-lift: -3px;
      transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        background .22s ease,
        color .18s ease;
    }

    .terminal-line,
    .feature-list li,
    .command-notes li,
    .feature-facts span,
    .flow-list li,
    .fit-list li,
    .chip {
      --glow-lift: -1px;
    }

    .hero-shell:hover,
    .hero-shell:focus-within,
    section:hover,
    section:focus-within,
    .cockpit:hover,
    .cockpit:focus-within,
    .panel-card:hover,
    .panel-card:focus-within,
    .arch-node:hover,
    .arch-node:focus-within,
    .boundary-card:hover,
    .boundary-card:focus-within,
    .feature-card:hover,
    .feature-card:focus-within,
    .ops-board:hover,
    .ops-board:focus-within,
    .timeline-detail:hover,
    .timeline-detail:focus-within,
    .command-card:hover,
    .command-card:focus-within,
    .safe-zone:hover,
    .safe-zone:focus-within,
    .doc-link:hover,
    .doc-link:focus-within,
    .terminal-line:hover,
    .feature-list li:hover,
    .command-notes li:hover,
    .feature-facts span:hover,
    .flow-list li:hover,
    .fit-list li:hover,
    .chip:hover {
      transform: translateY(var(--glow-lift));
      border-color: rgba(var(--theme-a), .50);
      background:
        radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(var(--theme-a), .16), transparent 16rem),
        radial-gradient(circle at calc(100% - var(--glow-x)) calc(100% - var(--glow-y)), rgba(var(--theme-b), .10), transparent 18rem),
        linear-gradient(180deg, rgba(15, 23, 42, .72), rgba(15, 23, 42, .46));
      box-shadow:
        0 0 0 1px rgba(var(--theme-a), .20),
        0 0 0 6px rgba(var(--theme-a), .060),
        0 0 0 14px rgba(var(--theme-b), .040),
        0 0 0 24px rgba(var(--theme-c), .026),
        0 22px 64px rgba(var(--theme-a), .16),
        inset 0 1px 0 rgba(255,255,255,.08);
    }

    .hero-shell:hover,
    .hero-shell:focus-within,
    section:hover,
    section:focus-within {
      --glow-lift: -2px;
      box-shadow:
        0 0 0 1px rgba(var(--theme-a), .18),
        0 0 0 8px rgba(var(--theme-a), .050),
        0 0 0 18px rgba(var(--theme-b), .034),
        0 0 0 30px rgba(var(--theme-c), .022),
        0 26px 90px rgba(var(--theme-a), .13),
        inset 0 1px 0 rgba(255,255,255,.08);
    }

    .boundary-card.danger:hover,
    .boundary-card.danger:focus-within,
    .safe-zone:hover,
    .safe-zone:focus-within {
      border-color: rgba(251, 113, 133, .54);
      background:
        radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(251, 113, 133, .18), transparent 16rem),
        linear-gradient(135deg, rgba(76, 5, 25, .44), rgba(8, 15, 28, .68));
      box-shadow:
        0 0 0 1px rgba(251, 113, 133, .20),
        0 0 0 6px rgba(251, 113, 133, .060),
        0 0 0 14px rgba(var(--theme-b), .036),
        0 0 0 24px rgba(var(--theme-c), .022),
        0 22px 64px rgba(251, 113, 133, .14),
        inset 0 1px 0 rgba(255,255,255,.08);
    }