/* ===== Theme Tokens ===== */
  html[data-theme="dark"]{
    --bg:#0b1220; --panel:#0f172a; --ink:#e5e7eb; --muted:#9aa3b2;
    --accent:#38bdf8; --ok:#22c55e; --err:#ef4444; --warn:#f59e0b; --border:#1f2937;
    --chip:#0d162f; --ring:#38bdf855;
  }
  html[data-theme="light"]{
    --bg:#f8fafc; --panel:#ffffff; --ink:#0f172a; --muted:#475569;
    --accent:#0284c7; --ok:#16a34a; --err:#dc2626; --warn:#d97706; --border:#e5e7eb;
    --chip:#f1f5f9; --ring:#0284c74d;
  }

  :root { color-scheme: light dark; }
  *{box-sizing:border-box}
  body{
    margin:0; font:16px/1.5 system-ui,Segoe UI,Roboto,Ubuntu,Apple Color Emoji,Segoe UI Emoji;
    background:var(--bg); color:var(--ink);
    min-height:100svh; display:grid; place-items:start center;
  }
  .wrap{ width:min(1100px,100%); padding:24px; }
  header{ display:flex; align-items:center; gap:12px; justify-content:space-between; margin-bottom:16px; }
  h1{ font-size:clamp(20px,2.2vw,28px); margin:0; letter-spacing:.2px }
  .muted{ color:var(--muted) }
  .card{
    background:var(--panel); border:1px solid var(--border); border-radius:16px;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    overflow:hidden;
  }

  /* Tabs */
  .tabs{ display:flex; gap:4px; padding:8px; border-bottom:1px solid var(--border); background:linear-gradient(0deg,transparent,rgba(0,0,0,.05))}
  .tab-btn{
    appearance:none; border:1px solid var(--border); background:var(--chip); color:var(--ink);
    padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:600;
  }
  .tab-btn[aria-selected="true"]{ outline:2px solid var(--ring); background:transparent; color:var(--accent) }

  .panel{ display:none; padding:16px; }
  .panel.active{ display:block; }

  /* Controls */
  .grid{ display:grid; gap:12px; grid-template-columns:1fr; }
  @media (min-width:760px){ .grid.cols-2{ grid-template-columns:1fr 1fr } }
  label{ font-weight:600 }
  input[type="text"], input[type="number"], textarea{
    width:100%; padding:12px 14px; color:var(--ink); background:transparent;
    border:1px solid var(--border); border-radius:12px; outline-color:var(--accent);
  }
  textarea{ min-height:120px; resize:vertical }
  .row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center }
  .btn{
    appearance:none; border:1px solid var(--border); background:var(--chip); color:var(--ink);
    padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:600;
  }
  .btn.primary{ background:var(--accent); color:white; border-color:transparent }
  .btn.ok{ background:var(--ok); color:white; border-color:transparent }
  .btn.warn{ background:var(--warn); color:white; border-color:transparent }
  .btn.ghost{ background:transparent }
  .seg{ display:flex; border:1px solid var(--border); border-radius:12px; overflow:hidden }
  .seg button{ flex:1; border:0; background:transparent; padding:8px 12px; color:var(--ink) }
  .seg button[aria-pressed="true"]{ background:var(--chip); color:var(--accent) }

  /* Results */
  .result{
    margin-top:14px; padding:14px; border:1px dashed var(--border); border-radius:12px; background:rgba(0,0,0,.04);
  }
  .badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-weight:700; letter-spacing:.3px }
  .prime{ background:color-mix(in oklab, var(--ok) 20%, transparent); border:1px solid color-mix(in oklab, var(--ok) 50%, transparent); }
  .composite{ background:color-mix(in oklab, var(--err) 15%, transparent); border:1px solid color-mix(in oklab, var(--err) 50%, transparent); }
  .info{ background:var(--chip); border:1px solid var(--border) }
  .kv{ display:grid; gap:6px; grid-template-columns:160px 1fr; align-items:center; padding:6px 0; border-bottom:1px dashed var(--border) }
  .kv:last-child{ border-bottom:0 }
  code{ background:var(--chip); border:1px solid var(--border); padding:2px 6px; border-radius:6px }
  .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace }

  .footer{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:16px; color:var(--muted) }
  .switch{ cursor:pointer; display:inline-flex; align-items:center; gap:8px; user-select:none }
  .switch input{ accent-color:var(--accent) }

  progress{ width:100%; height:10px; }

  /* tiny helpers */
  .examples{ color:var(--muted); font-size:13px }