:root {
      --bg: #07111f;
      --panel: #0d1c2d;
      --panel-2: #10263d;
      --ink: #eef6ff;
      --muted: #a8bfd4;
      --line: #28445f;
      --accent: #6fd3ff;
      --accent-2: #b9f6ca;
      --warm: #ffd28a;
      --danger: #ff9d9d;
      --ok: #8ee3b5;
      --shadow: 0 18px 50px rgba(0,0,0,.28);
      --radius: 18px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--ink);
      background:
        radial-gradient(circle at 15% 0%, rgba(42, 128, 170, .20), transparent 35rem),
        radial-gradient(circle at 100% 20%, rgba(34, 102, 80, .16), transparent 30rem),
        var(--bg);
      line-height: 1.55;
    }

    a { color: var(--accent); }
    code, .formula { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }

    .wrap { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
    header { padding: 48px 0 22px; }
    .eyebrow { letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-size: .78rem; }
    h1 { font-size: clamp(2.2rem, 6vw, 4.8rem); line-height: .98; margin: 10px 0 18px; max-width: 900px; }
    h2 { margin: 0 0 8px; font-size: clamp(1.4rem, 3vw, 2rem); }
    h3 { margin: 0 0 8px; font-size: 1.08rem; }
    p { margin: 0 0 12px; }
    .lead { max-width: 900px; color: #cee0ef; font-size: 1.08rem; }

    .notice {
      margin-top: 24px;
      padding: 14px 16px;
      border: 1px solid #3e5f7a;
      border-radius: 14px;
      background: rgba(19, 43, 66, .72);
      color: #dcebf7;
    }

    nav {
      position: sticky; top: 0; z-index: 20;
      backdrop-filter: blur(14px);
      background: rgba(7,17,31,.86);
      border-top: 1px solid rgba(255,255,255,.04);
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .navinner { display: flex; gap: 10px; overflow-x: auto; padding: 10px 0; }
    nav a {
      white-space: nowrap;
      text-decoration: none;
      color: #c9ddec;
      border: 1px solid transparent;
      border-radius: 999px;
      padding: 7px 11px;
      font-size: .9rem;
    }
    nav a:hover { border-color: var(--line); background: #0d2034; }

    main { padding: 30px 0 70px; }
    section { scroll-margin-top: 72px; margin: 0 0 26px; }
    .section-intro { color: var(--muted); max-width: 900px; margin-bottom: 16px; }

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

    .card {
      background: linear-gradient(180deg, rgba(17,38,61,.94), rgba(12,28,45,.94));
      border: 1px solid rgba(96, 145, 181, .28);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 18px;
    }

    .inputs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
    .input-group { min-width: 0; }
    label { display: block; font-size: .86rem; color: #c6d8e7; margin-bottom: 5px; }
    input, select {
      width: 100%;
      border: 1px solid #36536d;
      border-radius: 10px;
      padding: 10px 11px;
      background: #071523;
      color: var(--ink);
      outline: none;
      font: inherit;
    }
    input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(111,211,255,.12); }
    .hint { color: var(--muted); font-size: .78rem; margin-top: 4px; }

    .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
    button {
      border: 1px solid #3d6d89;
      border-radius: 999px;
      padding: 9px 13px;
      background: #123550;
      color: #eef8ff;
      cursor: pointer;
      font: inherit;
    }
    button:hover { background: #174564; }
    button.secondary { background: transparent; color: #cce0ef; }

    .result-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-top: 14px; }
    .result {
      min-width: 0;
      padding: 12px;
      border-radius: 13px;
      background: rgba(5,16,28,.62);
      border: 1px solid rgba(91,139,172,.22);
    }
    .result .k { color: var(--muted); font-size: .78rem; }
    .result .v { font-size: 1.2rem; margin-top: 2px; overflow-wrap: anywhere; }
    .result .s { color: #bcd1e1; font-size: .76rem; margin-top: 2px; }

    .status-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 14px; }
    .status { padding: 12px; border-radius: 13px; border: 1px solid #385770; background: #0a1a2b; }
    .status .title { color: var(--accent-2); font-size: .82rem; }
    .status .body { color: #dbe9f4; margin-top: 4px; font-size: .92rem; }

    .warning { border-color: #7e663a; background: rgba(72,52,21,.35); }
    .warning .title { color: var(--warm); }
    .danger { border-color: #7e4444; background: rgba(76,30,30,.35); }
    .danger .title { color: var(--danger); }

    .explain {
      margin-top: 14px;
      padding: 13px 14px;
      border-left: 3px solid var(--accent);
      background: rgba(8, 24, 39, .55);
      border-radius: 0 12px 12px 0;
      color: #cfe0ed;
    }
    .formula {
      display: inline-block;
      padding: 2px 6px;
      border-radius: 6px;
      background: #071421;
      border: 1px solid #2e4c64;
      color: #dff5ff;
      font-size: .9em;
    }

    details { margin-top: 12px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 10px; }
    summary { cursor: pointer; color: #d9ecfa; }
    details p, details li { color: #b9cedf; font-size: .9rem; }

    .callout {
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: 14px;
      align-items: start;
      margin: 16px 0 0;
      padding: 15px;
      border-radius: 14px;
      background: rgba(22, 48, 66, .55);
      border: 1px solid #395b73;
    }
    .callout .tag { color: var(--accent); text-transform: uppercase; letter-spacing: .08em; font-size: .76rem; }

    .flowbar { display: grid; grid-template-columns: repeat(5,1fr); gap: 3px; margin-top: 10px; }
    .flowbar span { height: 8px; border-radius: 3px; background: #244158; opacity: .58; }
    .flowbar span.active { background: var(--accent); opacity: 1; }

    .mini-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
    .mini-table th, .mini-table td { border-bottom: 1px solid rgba(255,255,255,.08); padding: 8px 6px; text-align: left; font-size: .88rem; }
    .mini-table th { color: #9fb7ca; }

    .refs li { margin-bottom: 9px; color: #bcd0df; }
    footer { color: #839bb0; padding: 0 0 36px; font-size: .86rem; }

    @media (max-width: 900px) {
      .grid.two, .grid.three, .inputs, .result-grid, .status-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
    }
    @media (max-width: 620px) {
      .wrap { width: min(100% - 20px, 1180px); }
      header { padding-top: 34px; }
      .grid.two, .grid.three, .inputs, .result-grid, .status-row { grid-template-columns: 1fr; }
      .callout { grid-template-columns: 1fr; }
    }