:root {
      --bg: #f5f0e6;
      --ink: #1d1b19;
      --muted: #5d564e;
      --card: #fffdf8;
      --line: #ddd2c0;
      --accent: #0b7a65;
      --accent2: #e95f1e;
      --accent3: #0d63bd;
      --good: #146c2e;
      --warn: #b1251c;
      --radius: 18px;
      --shadow: 0 10px 30px rgba(29, 27, 25, 0.08);
    }

    * { box-sizing: border-box; }

    html, body {
      margin: 0;
      padding: 0;
      color: var(--ink);
      background:
        radial-gradient(circle at 12% 10%, #fde8cc 0 18%, transparent 19%),
        radial-gradient(circle at 84% 20%, #d8f1ea 0 16%, transparent 17%),
        linear-gradient(180deg, #f6efe2 0%, #f6f2e9 38%, #f3eee4 100%);
      font-family: "Space Grotesk", "Segoe UI", sans-serif;
      line-height: 1.6;
    }

    .grain {
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: 0.07;
      background-image: radial-gradient(#000 0.45px, transparent 0.45px);
      background-size: 3px 3px;
      z-index: 0;
    }

    .wrap {
      position: relative;
      z-index: 1;
      width: min(1120px, 92vw);
      margin: 0 auto;
      padding: 28px 0 70px;
    }

    .panel {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 15;
      backdrop-filter: blur(10px);
      background: rgba(246, 240, 230, 0.85);
      border-radius: 999px;
      padding: 8px;
      margin: 8px auto 26px;
      width: fit-content;
    }

    .nav {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
    }

    .nav a {
      text-decoration: none;
      color: var(--ink);
      font-size: 0.9rem;
      padding: 7px 12px;
      border-radius: 999px;
      transition: background .2s ease;
    }

    .nav a:hover { background: #eee3d3; }

    .hero {
      display: grid;
      grid-template-columns: 1.12fr 0.88fr;
      gap: 18px;
      align-items: stretch;
      position: relative;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: -16px -12px auto -12px;
      height: 66%;
      border-radius: 24px;
      background: linear-gradient(120deg, rgba(13, 99, 189, 0.1) 0%, rgba(11, 122, 101, 0.12) 60%, rgba(233, 95, 30, 0.08) 100%);
      z-index: -1;
      filter: blur(1px);
    }

    .hero-main {
      padding: 34px;
      opacity: 0;
      transform: translateY(8px);
      animation: rise .55s ease forwards;
    }

    .hero-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 14px;
    }

    .hero-btn {
      text-decoration: none;
      border-radius: 999px;
      padding: 10px 14px;
      font-size: .88rem;
      border: 1px solid #185f53;
      background: #185f53;
      color: #fff;
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .hero-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 18px rgba(24, 95, 83, 0.24);
    }

    .hero-btn.secondary {
      background: #fff;
      color: #185f53;
    }

    .hero-strip {
      margin-top: 14px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .chip {
      font-size: .76rem;
      border: 1px solid #d8cbb8;
      border-radius: 999px;
      padding: 4px 9px;
      background: #fff;
      color: #4a433b;
    }

    .kicker {
      display: inline-block;
      border: 1px solid #d4c4aa;
      border-radius: 999px;
      padding: 4px 10px;
      font-size: .8rem;
      color: var(--muted);
      letter-spacing: .04em;
      text-transform: uppercase;
      background: #fbf5eb;
      margin-bottom: 12px;
    }

    h1, h2, h3 {
      margin: 0 0 10px;
      line-height: 1.15;
      letter-spacing: -.02em;
    }

    h1 { font-size: clamp(1.8rem, 2.5vw, 3rem); margin-bottom: 14px; }

    p { margin: 0 0 12px; color: var(--muted); }

    .accent { color: var(--accent3); font-weight: 700; }

    .takeaway {
      margin-top: 14px;
      padding: 14px;
      border-radius: 14px;
      border: 1px dashed #ccb79a;
      background: linear-gradient(90deg, #fffaf1 0%, #fff 100%);
      color: #372f27;
      font-size: .95rem;
    }

    .hero-side {
      display: grid;
      gap: 12px;
      padding: 14px;
      background: linear-gradient(160deg, #fff9ed 0%, #f2fff8 100%);
      border: 1px solid #d5c6ae;
      border-radius: var(--radius);
      opacity: 0;
      transform: translateY(8px);
      animation: rise .75s ease forwards;
    }

    .hero-visual {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }

    .visual-card {
      border: 1px solid #d6c8b3;
      border-radius: 14px;
      padding: 10px;
      background: #fff;
    }

    .visual-title {
      font-size: .8rem;
      color: #5b5349;
      margin-bottom: 8px;
    }

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

    .hero-svg {
      width: 100%;
      height: auto;
      display: block;
      border: 1px solid #e1d4c1;
      border-radius: 10px;
      background: #fffdf8;
    }

    .mini-cell {
      border: 1px solid #dfd2be;
      border-radius: 8px;
      text-align: center;
      padding: 7px 4px;
      font-size: .75rem;
      background: #fffaf2;
      color: #3e362e;
      font-family: "IBM Plex Mono", monospace;
    }

    .pulse-row {
      display: grid;
      gap: 6px;
    }

    .pulse {
      height: 8px;
      border: 1px solid #decfb9;
      border-radius: 999px;
      overflow: hidden;
      background: #f7eee0;
    }

    .pulse > span {
      display: block;
      height: 100%;
      width: 0;
      background: linear-gradient(90deg, #0b7a65, #31af91);
      animation: pulseGrow 2.8s ease-in-out infinite;
    }

    .pulse:nth-child(2) > span { animation-delay: .4s; }
    .pulse:nth-child(3) > span { animation-delay: .8s; }

    @keyframes pulseGrow {
      0% { width: 15%; }
      50% { width: 92%; }
      100% { width: 25%; }
    }

    .metric {
      padding: 15px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
    }

    .metric .v {
      display: block;
      font-size: 1.58rem;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 4px;
      line-height: 1.1;
    }

    .section {
      margin-top: 22px;
      padding: 26px;
    }

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

    .card {
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 16px;
      background: #fff;
      min-width: 0;
    }

    .tag {
      display: inline-block;
      font-family: "IBM Plex Mono", monospace;
      font-size: .76rem;
      padding: 3px 8px;
      border-radius: 8px;
      border: 1px solid #cfd9d5;
      color: #174f43;
      background: #edfbf6;
      margin-bottom: 10px;
    }

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

    .equation {
      font-family: "IBM Plex Mono", ui-monospace, monospace;
      border: 1px solid #d7cfbf;
      border-left: 4px solid var(--accent3);
      border-radius: 12px;
      padding: 10px 12px;
      background: #fffcf6;
      margin: 10px 0;
      overflow-x: auto;
      font-size: .91rem;
      color: #222;
    }

    .formula-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 8px;
    }

    .arch {
      margin-top: 10px;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 14px;
      background: linear-gradient(180deg, #fff 0%, #fff8ef 100%);
      overflow-x: auto;
    }

    .arch-track {
      min-width: 760px;
      display: flex;
      gap: 12px;
      align-items: center;
      justify-content: space-between;
    }

    .node {
      width: 170px;
      padding: 10px;
      border: 1px solid #d8ccb6;
      border-radius: 12px;
      background: #fff;
      text-align: center;
      font-size: .86rem;
    }

    .arrow {
      width: 36px;
      height: 2px;
      background: #9f8d72;
      position: relative;
      flex: 0 0 auto;
    }

    .arrow::after {
      content: "";
      position: absolute;
      right: -1px;
      top: -4px;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-left: 7px solid #9f8d72;
    }

    .playground {
      margin-top: 12px;
      border: 1px solid #dcd2c2;
      border-radius: 14px;
      padding: 14px;
      background: #fff;
    }

    .play-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      align-items: end;
    }

    .layer-demo {
      margin-top: 10px;
      border: 1px solid #d8cbb8;
      border-radius: 12px;
      padding: 12px;
      background: #fffbf4;
    }

    .layer-row {
      display: grid;
      grid-template-columns: 115px 1fr 64px;
      gap: 8px;
      align-items: center;
      margin-bottom: 8px;
    }

    .bar {
      height: 12px;
      border-radius: 999px;
      background: #ece3d5;
      overflow: hidden;
      border: 1px solid #d8ccb8;
    }

    .bar > span {
      display: block;
      height: 100%;
      background: linear-gradient(90deg, var(--accent), #28a58a);
      width: 0;
      transition: width .35s ease;
    }

    input[type="range"] { width: 100%; accent-color: var(--accent); }

    input[type="text"] {
      width: 100%;
      padding: 10px;
      border: 1px solid #cfc5b5;
      border-radius: 10px;
      font-family: "IBM Plex Mono", monospace;
      font-size: .9rem;
      background: #fffefc;
    }

    .result {
      margin-top: 10px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .box {
      border: 1px solid #ddd2c1;
      border-radius: 10px;
      padding: 10px;
      background: #fffaf1;
      text-align: center;
      font-size: .88rem;
    }

    .stepper {
      margin-top: 14px;
      border: 1px solid #d7ccbb;
      border-radius: 12px;
      background: #fff;
      padding: 12px;
    }

    .step-controls {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 10px;
      align-items: center;
      margin: 10px 0 8px;
    }

    .step-controls button {
      border: 1px solid #1b6d5c;
      background: #1b6d5c;
      color: #fff;
      border-radius: 999px;
      padding: 7px 12px;
      font-size: .82rem;
      cursor: pointer;
    }

    .step-controls button.stop {
      background: #fff;
      color: #1b6d5c;
    }

    .step-desc {
      margin-top: 8px;
      border: 1px dashed #d4c6b1;
      border-radius: 10px;
      padding: 8px 10px;
      font-size: .86rem;
      background: #fffcf6;
      color: #4f473e;
    }

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

    .step {
      border: 1px solid #ddd1bf;
      border-radius: 10px;
      padding: 8px;
      text-align: center;
      font-size: .82rem;
      background: #fffaf0;
      opacity: .45;
      transform: translateY(4px);
      transition: all .25s ease;
    }

    .step.active {
      opacity: 1;
      transform: translateY(0);
      border-color: #0f7560;
      box-shadow: inset 0 0 0 1px #0f7560;
      background: #effcf8;
    }

    .code-tabs {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }

    .refs-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 8px;
    }

    .ref-card {
      border: 1px solid #ddd2c1;
      border-radius: 12px;
      padding: 12px;
      background: #fff;
    }

    .ref-type {
      display: inline-block;
      border: 1px solid #d3c6b1;
      border-radius: 999px;
      padding: 3px 8px;
      font-size: .74rem;
      color: #4d453c;
      background: #fbf4e8;
      margin-bottom: 8px;
    }

    .ref-card a {
      color: #0f5fb7;
      text-decoration: none;
      font-weight: 600;
    }

    .ref-card a:hover {
      text-decoration: underline;
    }

    .quiz {
      margin-top: 14px;
      border: 1px solid #d8ccb8;
      border-radius: 12px;
      padding: 14px;
      background: #fffef9;
    }

    .quiz-q {
      border: 1px solid #e2d7c7;
      border-radius: 10px;
      padding: 10px;
      margin-top: 8px;
      background: #fff;
    }

    .quiz-q legend {
      padding: 0 6px;
      font-weight: 600;
      color: #3d352c;
    }

    .quiz-q label {
      display: block;
      margin: 5px 0;
      font-size: .9rem;
      color: #51493f;
    }

    .quiz-actions {
      margin-top: 10px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .quiz-actions button {
      border: 1px solid #0f5fb7;
      background: #0f5fb7;
      color: #fff;
      border-radius: 999px;
      padding: 7px 12px;
      font-size: .84rem;
      cursor: pointer;
    }

    .quiz-actions button.secondary {
      background: #fff;
      color: #0f5fb7;
    }

    .quiz-result {
      margin-top: 8px;
      border: 1px solid #d8ccb8;
      border-radius: 10px;
      padding: 9px 10px;
      background: #f5fbff;
      font-size: .88rem;
      color: #2d3a47;
    }

    .tab-btn {
      border: 1px solid #c7baa6;
      border-radius: 999px;
      padding: 7px 12px;
      font-size: .86rem;
      cursor: pointer;
      background: #fff;
      color: #3c352d;
    }

    .tab-btn.active {
      background: #1f6feb;
      color: #fff;
      border-color: #1f6feb;
    }

    .code-panel { display: none; }
    .code-panel.active { display: block; }

    pre {
      margin: 0;
      background: #161b22;
      color: #e6edf3;
      border-radius: 12px;
      border: 1px solid #30363d;
      padding: 14px;
      overflow-x: auto;
      font-family: "IBM Plex Mono", ui-monospace, monospace;
      font-size: .82rem;
      line-height: 1.45;
    }

    .footnote {
      margin-top: 14px;
      font-size: .84rem;
      color: #6e665b;
    }

    .reveal {
      opacity: 0;
      transform: translateY(14px);
      transition: all .45s ease;
    }

    .reveal.show {
      opacity: 1;
      transform: translateY(0);
    }

    .ok { color: var(--good); font-weight: 700; }
    .warn { color: var(--warn); font-weight: 700; }

    @keyframes rise { to { opacity: 1; transform: translateY(0); } }

    @media (max-width: 940px) {
      .hero { grid-template-columns: 1fr; }
      .formula-grid, .grid-2, .play-grid { grid-template-columns: 1fr; }
      .steps { grid-template-columns: 1fr 1fr; }
      .layer-row { grid-template-columns: 1fr; }
      .refs-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 680px) {
      .wrap { width: min(960px, 94vw); }
      .section, .hero-main { padding: 18px; }
      .result { grid-template-columns: 1fr; }
      .topbar { border-radius: 16px; width: 100%; }
      .nav { justify-content: flex-start; }
      .steps { grid-template-columns: 1fr; }
    }