:root {
      --navy: #0f172a;
      --crimson: #991b1b;
      --electron: #0284c7;
    }

    html, body {
      background-color: var(--navy);
    }

    body {
      min-height: 100vh;
      color: #e2e8f0;
      background-image:
        radial-gradient(ellipse 80% 50% at 10% -10%, rgba(2, 132, 199, 0.16), transparent 55%),
        radial-gradient(ellipse 70% 45% at 95% 110%, rgba(153, 27, 27, 0.18), transparent 50%),
        linear-gradient(rgba(148, 163, 184, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.045) 1px, transparent 1px);
      background-size: auto, auto, 52px 52px, 52px 52px;
    }

    .glass {
      background: rgba(15, 23, 42, 0.62);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border: 1px solid rgba(125, 211, 252, 0.16);
    }

    .glass-card {
      background: linear-gradient(180deg, rgba(30, 41, 59, 0.55) 0%, rgba(15, 23, 42, 0.72) 100%);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border: 1px solid rgba(2, 132, 199, 0.22);
      transition: border-color 280ms ease, box-shadow 280ms ease, transform 280ms ease;
    }

    .glass-card:hover {
      border-color: rgba(56, 189, 248, 0.55);
      box-shadow: 0 0 0 1px rgba(2, 132, 199, 0.18), 0 18px 50px rgba(2, 132, 199, 0.12);
      transform: translateY(-4px);
    }

    .badge {
      letter-spacing: 0.04em;
    }

    .launch-btn {
      background: linear-gradient(90deg, #0369a1 0%, #0284c7 55%, #38bdf8 140%);
      box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.25), 0 8px 24px rgba(2, 132, 199, 0.28);
      transition: box-shadow 250ms ease, transform 250ms ease, filter 250ms ease;
    }

    .launch-btn:hover {
      filter: brightness(1.08);
      box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.45), 0 0 28px rgba(2, 132, 199, 0.55);
      transform: translateY(-1px);
    }

    .back-btn {
      transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
    }

    .back-btn:hover {
      border-color: rgba(56, 189, 248, 0.55);
      box-shadow: 0 0 22px rgba(2, 132, 199, 0.25);
      background: rgba(2, 132, 199, 0.12);
    }

    .chevron {
      transition: transform 280ms ease;
    }

    .accordion-open .chevron {
      transform: rotate(180deg);
    }

    .accordion-body {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 380ms ease;
    }

    .accordion-open .accordion-body {
      grid-template-rows: 1fr;
    }

    .accordion-body > .inner {
      overflow: hidden;
    }

    input[type='range'] {
      -webkit-appearance: none;
      appearance: none;
      height: 6px;
      border-radius: 999px;
      background: linear-gradient(90deg, #7f1d1d, #0284c7);
      outline: none;
    }

    input[type='range']::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #f8fafc;
      border: 2px solid #38bdf8;
      box-shadow: 0 0 12px rgba(56, 189, 248, 0.7);
      cursor: pointer;
    }

    input[type='range']::-moz-range-thumb {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #f8fafc;
      border: 2px solid #38bdf8;
      box-shadow: 0 0 12px rgba(56, 189, 248, 0.7);
      cursor: pointer;
    }

    select, .field {
      background: rgba(15, 23, 42, 0.85);
      border: 1px solid rgba(148, 163, 184, 0.25);
    }

    select:focus, .field:focus {
      outline: none;
      border-color: #38bdf8;
      box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.25);
    }

    .eq {
      font-family: 'IBM Plex Serif', Georgia, serif;
    }

    .fade-view {
      animation: fadeUp 420ms ease both;
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .wm-letter {
      display: inline;
      animation: letterIn 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    @keyframes letterIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    #wordmark {
      display: inline-block;
      animation: fadeUp 800ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .wordmark-shimmer {
      background: linear-gradient(
        105deg,
        #f8fafc 0%,
        #7dd3fc 28%,
        #ffffff 50%,
        #fda4af 72%,
        #f8fafc 100%
      );
      background-size: 220% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: shimmer 9s ease-in-out 1.1s infinite;
    }

    @keyframes shimmer {
      0%, 18% { background-position: 100% 50%; }
      50% { background-position: 0% 50%; }
      82%, 100% { background-position: 100% 50%; }
    }

    .schema-card {
      background: linear-gradient(180deg, rgba(15, 23, 42, 0.4) 0%, rgba(2, 132, 199, 0.06) 48%, rgba(153, 27, 27, 0.08) 100%);
    }

    .e-float { animation: eDrift 7s ease-in-out infinite; }
    .h-float { animation: hDrift 8.5s ease-in-out infinite; }

    @keyframes eDrift {
      0%, 100% { transform: translate(0, 0); }
      50% { transform: translate(118px, 6px); }
    }

    @keyframes hDrift {
      0%, 100% { transform: translate(0, 0); }
      50% { transform: translate(-110px, -5px); }
    }

    .schema-gap-pulse {
      animation: gapPulse 3.6s ease-in-out infinite;
    }

    @keyframes gapPulse {
      0%, 100% { opacity: 0.35; }
      50% { opacity: 0.7; }
    }

    .takeaway {
      margin-top: 1.75rem;
      padding: 1rem 0 0;
      border-top: 1px solid rgba(148, 163, 184, 0.14);
      max-width: 40rem;
      font-family: 'IBM Plex Serif', Georgia, serif;
      font-style: italic;
      font-size: 0.98rem;
      line-height: 1.65;
      color: #94a3b8;
    }

    .step-card {
      animation: fadeUp 480ms ease both;
    }

    @media (prefers-reduced-motion: reduce) {
      .wm-letter, .wordmark-shimmer, .e-float, .h-float, .schema-gap-pulse, .step-card, .fade-view,
      .intro-atom, .intro-bond, .intro-wave, .intro-cb, .intro-vb, .intro-eg, .intro-e, .intro-h,
      .intro-photon, .intro-photon-lab, .intro-dep, .intro-iv, .intro-q, .intro-brand, .intro-chain span, .intro-chain i, .intro-junc {
        animation: none !important;
        color: inherit;
        background: none;
        -webkit-background-clip: unset;
        background-clip: unset;
        filter: none;
        transform: none;
      }
      .wordmark-shimmer { color: #f8fafc; }
      .intro-splash { display: none !important; }
    }

    .js-plot {
      width: 100%;
      min-height: 380px;
    }

    .plot-3d {
      min-height: 520px;
    }

    .status-ok {
      border-color: rgba(34, 197, 94, 0.45);
      background: rgba(22, 163, 74, 0.12);
      color: #86efac;
    }

    .status-warn {
      border-color: rgba(251, 191, 36, 0.45);
      background: rgba(217, 119, 6, 0.12);
      color: #fde68a;
    }

    .led-bulb {
      width: 11.5rem;
      height: 11.5rem;
      border-radius: 50%;
      transition: background 220ms ease, box-shadow 220ms ease, filter 220ms ease, opacity 220ms ease;
    }

    .led-bulb.is-ir {
      opacity: 0.28;
      filter: grayscale(0.55);
    }

    .led-bulb.is-uv {
      opacity: 0.7;
    }

    .led-bulb.is-weak {
      opacity: 0.22;
      filter: saturate(0.35);
    }

    .led-flash {
      animation: ledPulse 700ms ease;
    }

    @keyframes ledPulse {
      0% { transform: scale(1); }
      40% { transform: scale(1.06); }
      100% { transform: scale(1); }
    }

    .preset-btn.active {
      background: rgba(2, 132, 199, 0.28);
      border-color: rgba(56, 189, 248, 0.55);
      color: #e0f2fe;
    }

    .carrier-dot { pointer-events: none; }
    .q-dot {
      filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.8));
    }

    .lab-tab {
      border: 1px solid rgba(148, 163, 184, 0.2);
      color: #94a3b8;
      background: transparent;
    }
    .lab-tab.active {
      background: rgba(2, 132, 199, 0.22);
      border-color: rgba(56, 189, 248, 0.45);
      color: #e0f2fe;
    }
    .why-box {
      border-left: 3px solid #38bdf8;
      background: rgba(2, 132, 199, 0.08);
    }
    .state-rung {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .seat {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      border: 1px solid rgba(148,163,184,0.45);
    }
    .seat.on { background: #38bdf8; border-color: #7dd3fc; box-shadow: 0 0 8px rgba(56,189,248,0.55); }
    .seat.hole { background: transparent; border-color: #e11d48; box-shadow: 0 0 8px rgba(225,29,72,0.35); }

    .intro-lock { overflow: hidden; }

    .intro-splash {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: grid;
      place-items: center;
      background:
        radial-gradient(ellipse 70% 50% at 20% 20%, rgba(2, 132, 199, 0.22), transparent 55%),
        radial-gradient(ellipse 60% 45% at 88% 80%, rgba(153, 27, 27, 0.24), transparent 50%),
        #0f172a;
      cursor: pointer;
    }
    .intro-splash.is-gone {
      opacity: 0;
      pointer-events: none;
      transition: opacity 280ms ease;
    }
    .intro-skip {
      position: absolute;
      top: 1.1rem;
      right: 1.2rem;
      z-index: 2;
      border: 1px solid rgba(148, 163, 184, 0.28);
      background: rgba(15, 23, 42, 0.5);
      color: #94a3b8;
      font-size: 0.7rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 0.4rem 0.7rem;
      border-radius: 999px;
      cursor: pointer;
    }
    .intro-frame {
      width: min(920px, 92vw);
      text-align: center;
    }
    .intro-stage {
      width: 100%;
      height: auto;
      overflow: visible;
    }
    .intro-atom {
      transform-box: fill-box;
      transform-origin: center;
      animation: introPop 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    .intro-atom.a1 { animation-delay: 0ms; }
    .intro-atom.a2 { animation-delay: 50ms; }
    .intro-atom.a3 { animation-delay: 90ms; }
    .intro-atom.a4 { animation-delay: 130ms; }
    .intro-atom.a5 { animation-delay: 180ms; }
    .intro-bond {
      fill: none;
      stroke: #38bdf8;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-dasharray: 420;
      stroke-dashoffset: 420;
      animation: introDraw 700ms ease 120ms forwards;
    }
    .intro-wave {
      stroke-dasharray: 360;
      stroke-dashoffset: 360;
      opacity: 0.85;
      animation: introDraw 520ms ease 220ms forwards;
    }
    .intro-cb {
      transform-origin: 455px 140px;
      animation: introSplitUp 520ms cubic-bezier(0.16, 1, 0.3, 1) 380ms both;
    }
    .intro-vb {
      transform-origin: 455px 230px;
      animation: introSplitDn 520ms cubic-bezier(0.16, 1, 0.3, 1) 380ms both;
    }
    .intro-eg {
      animation: introFade 360ms ease 620ms both;
    }
    .intro-e {
      transform-box: fill-box;
      transform-origin: center;
      animation: introJump 480ms cubic-bezier(0.2, 0.8, 0.2, 1) 620ms both;
    }
    .intro-h {
      animation: introFade 260ms ease 740ms both;
    }
    .intro-photon, .intro-photon-lab {
      animation: introFlash 380ms ease 780ms both;
    }
    .intro-junc {
      animation: introFade 360ms ease 860ms both;
    }
    .intro-dep {
      transform-box: fill-box;
      transform-origin: center;
      animation: introNarrow 420ms ease 980ms both;
    }
    .intro-iv {
      stroke-dasharray: 280;
      stroke-dashoffset: 280;
      animation: introDraw 440ms ease 1000ms forwards;
    }
    .intro-q {
      animation: introPop 300ms cubic-bezier(0.16, 1, 0.3, 1) 1280ms both;
    }
    .intro-brand {
      margin-top: -0.4rem;
      animation: introFade 380ms ease 1080ms both;
    }
    .intro-kicker {
      font-size: 0.68rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: #7dd3fc;
    }
    .intro-title {
      margin-top: 0.2rem;
      font-size: clamp(2.4rem, 7vw, 4.4rem);
      font-weight: 700;
      letter-spacing: -0.04em;
      line-height: 1;
      background: linear-gradient(105deg, #f8fafc 0%, #7dd3fc 40%, #fda4af 78%, #f8fafc 100%);
      background-size: 180% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: introFade 380ms ease 1080ms both, shimmer 9s ease-in-out 1.5s infinite;
    }
    .intro-chain {
      margin-top: 1rem;
      font-size: 0.78rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #64748b;
    }
    .intro-chain span, .intro-chain i {
      display: inline-block;
      animation: introFade 280ms ease both;
    }
    .intro-chain span:nth-child(1) { animation-delay: 80ms; color: #7dd3fc; }
    .intro-chain i:nth-child(2) { animation-delay: 220ms; }
    .intro-chain span:nth-child(3) { animation-delay: 360ms; color: #fbbf24; }
    .intro-chain i:nth-child(4) { animation-delay: 500ms; }
    .intro-chain span:nth-child(5) { animation-delay: 640ms; color: #38bdf8; }
    .intro-chain i:nth-child(6) { animation-delay: 780ms; }
    .intro-chain span:nth-child(7) { animation-delay: 920ms; color: #fca5a5; }
    .intro-chain i:nth-child(8) { animation-delay: 1060ms; }
    .intro-chain span:nth-child(9) { animation-delay: 1200ms; color: #e2e8f0; }

    @keyframes introPop {
      from { opacity: 0; transform: scale(0.2); }
      to { opacity: 1; transform: scale(1); }
    }
    @keyframes introDraw {
      to { stroke-dashoffset: 0; }
    }
    @keyframes introSplitUp {
      from { opacity: 0; transform: translateY(28px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes introSplitDn {
      from { opacity: 0; transform: translateY(-28px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes introJump {
      0% { opacity: 0; transform: translate(0, 0); }
      18% { opacity: 1; }
      100% { opacity: 1; transform: translate(0, -132px); }
    }
    @keyframes introFlash {
      0% { opacity: 0; }
      35% { opacity: 1; }
      100% { opacity: 0.15; }
    }
    @keyframes introNarrow {
      from { transform: scaleX(1.55); }
      to { transform: scaleX(0.72); }
    }
    @keyframes introFade {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* E–k momentum sandbox */
    #ek-svg, #ek-svg-a, #ek-svg-b, #ek-svg-h {
      width: 100%;
      height: auto;
      cursor: ew-resize;
      touch-action: none;
      user-select: none;
    }

    .ek-qty {
      min-width: 0;
    }

    .ek-field-btn.is-on {
      background: linear-gradient(90deg, #b45309 0%, #f59e0b 70%);
      box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.4), 0 0 24px rgba(245, 158, 11, 0.35);
    }

    .ek-fchain {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.35rem 0.45rem;
    }
    .ek-fchain [data-f] {
      border: 1px solid rgba(148, 163, 184, 0.2);
      background: rgba(15, 23, 42, 0.45);
      color: #94a3b8;
      border-radius: 999px;
      padding: 0.28rem 0.65rem;
      font-size: 0.72rem;
      letter-spacing: 0.02em;
      transition: border-color 220ms ease, background 220ms ease, color 220ms ease, box-shadow 220ms ease;
    }
    .ek-fchain [data-f].on {
      border-color: rgba(251, 191, 36, 0.55);
      background: rgba(245, 158, 11, 0.16);
      color: #fde68a;
      box-shadow: 0 0 16px rgba(245, 158, 11, 0.2);
    }

    .ek-chain {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.4rem 0.45rem;
    }
    .ek-chain-node {
      border: 1px solid rgba(148, 163, 184, 0.18);
      background: rgba(15, 23, 42, 0.4);
      color: #64748b;
      border-radius: 999px;
      padding: 0.35rem 0.7rem;
      font-size: 0.72rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      transition: opacity 280ms ease, border-color 280ms ease, color 280ms ease, box-shadow 280ms ease, background 280ms ease;
    }
    .ek-chain-node.on {
      border-color: rgba(56, 189, 248, 0.5);
      background: rgba(2, 132, 199, 0.2);
      color: #e0f2fe;
      box-shadow: 0 0 18px rgba(2, 132, 199, 0.22);
    }
    .ek-chain-arrow {
      color: #475569;
      font-size: 0.8rem;
    }

    .ek-track {
      position: relative;
      height: 52px;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid rgba(125, 211, 252, 0.16);
      background:
        repeating-linear-gradient(90deg, rgba(56, 189, 248, 0.07) 0 20px, rgba(15, 23, 42, 0.5) 20px 40px);
    }
    .ek-track-block + .ek-track-block { margin-top: 0.7rem; }
    .ek-real-dot {
      position: absolute;
      top: 50%;
      width: 16px;
      height: 16px;
      margin-left: -8px;
      border-radius: 50%;
      transform: translateY(-50%);
      box-shadow: 0 0 12px rgba(56, 189, 248, 0.7);
      z-index: 2;
    }
    .ek-real-dot.hole {
      background: transparent;
      border: 2.4px solid #fb7185;
      box-shadow: 0 0 12px rgba(251, 113, 133, 0.45);
    }
    .ek-real-v {
      position: absolute;
      top: 50%;
      height: 3px;
      background: linear-gradient(90deg, rgba(56, 189, 248, 0.15), #38bdf8);
      border-radius: 99px;
      pointer-events: none;
    }
    .ek-field-chev {
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        90deg,
        transparent 0 18px,
        rgba(251, 191, 36, 0.09) 18px 22px
      );
      animation: ekChev 1.4s linear infinite;
    }
    @keyframes ekChev {
      from { background-position: 0 0; }
      to { background-position: 40px 0; }
    }

    .ek-tip {
      position: relative;
      display: inline-grid;
      place-items: center;
      width: 1.15rem;
      height: 1.15rem;
      border-radius: 99px;
      border: 1px solid rgba(148, 163, 184, 0.35);
      color: #94a3b8;
      font-size: 0.65rem;
      font-weight: 700;
      cursor: help;
      background: rgba(15, 23, 42, 0.5);
    }
    .ek-tip-pop {
      display: none;
      position: absolute;
      z-index: 20;
      left: 50%;
      bottom: calc(100% + 8px);
      width: 16.5rem;
      transform: translateX(-50%);
      padding: 0.55rem 0.7rem;
      border-radius: 0.7rem;
      border: 1px solid rgba(125, 211, 252, 0.25);
      background: rgba(15, 23, 42, 0.96);
      color: #cbd5e1;
      font-size: 0.72rem;
      font-weight: 400;
      line-height: 1.45;
      letter-spacing: 0;
      text-transform: none;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    }
    .ek-tip:hover .ek-tip-pop, .ek-tip:focus .ek-tip-pop, .ek-tip:focus-visible .ek-tip-pop {
      display: block;
    }

    #ek-guide-dots span {
      width: 7px;
      height: 7px;
      border-radius: 99px;
      background: #334155;
    }
    #ek-guide-dots span.on { background: #38bdf8; box-shadow: 0 0 8px rgba(56, 189, 248, 0.7); }
    #ek-guide-dots span.done { background: #64748b; }

    @media (prefers-reduced-motion: reduce) {
      .ek-field-chev, .ek-chain-node, .ek-fchain [data-f] {
        animation: none !important;
        transition: none !important;
      }
    }

    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: #0f172a; }
    ::-webkit-scrollbar-thumb {
      background: #334155;
      border-radius: 999px;
      border: 2px solid #0f172a;
    }