:root{
    --cream:#FBF3E6;
    --cream-soft:#F1E6D3;
    --surface:#FFFFFF;
    --surface-2:#F7F1E4;
    --ink:#15183A;
    --ink-soft:#565A82;
    --ink-faint:#8A8DB0;
    --royal:#1E2BD1;
    --royal-ink:#101B8C;
    --coral:#FF5B49;
    --gold:#B8860B;
    --gold-bg:#FFC94D;
    --lilac:#7A63C9;
    --mint:#1F8F6C;
    --line: rgba(21,24,58,.14);
    --line-strong: rgba(21,24,58,.24);
    --chip-bg: rgba(30,43,209,.08);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --cream:#12142B;
      --cream-soft:#1B1E3D;
      --surface:#20233F;
      --surface-2:#262a4a;
      --ink:#F4EFE3;
      --ink-soft:#B7BAD9;
      --ink-faint:#797ea8;
      --royal:#5C68FF;
      --royal-ink:#C7CCFF;
      --coral:#FF7C6C;
      --gold:#FFD873;
      --gold-bg:#4a3f1f;
      --lilac:#C9B9FF;
      --mint:#78E7BC;
      --line: rgba(244,239,227,.16);
      --line-strong: rgba(244,239,227,.3);
      --chip-bg: rgba(92,104,255,.14);
    }
  }
  :root[data-theme="dark"]{
    --cream:#12142B;
    --cream-soft:#1B1E3D;
    --surface:#20233F;
    --surface-2:#262a4a;
    --ink:#F4EFE3;
    --ink-soft:#B7BAD9;
    --ink-faint:#797ea8;
    --royal:#5C68FF;
    --royal-ink:#C7CCFF;
    --coral:#FF7C6C;
    --gold:#FFD873;
    --gold-bg:#4a3f1f;
    --lilac:#C9B9FF;
    --mint:#78E7BC;
    --line: rgba(244,239,227,.16);
    --line-strong: rgba(244,239,227,.3);
    --chip-bg: rgba(92,104,255,.14);
  }

  *{ box-sizing:border-box; }
  body{
    margin:0; background:var(--cream); color:var(--ink);
    font-family:'Literata', Georgia, serif; font-size:16px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  }
  h1,h2,h3,.display{ font-family:'Baloo 2', ui-rounded, sans-serif; font-weight:800; line-height:1.1; letter-spacing:-.01em; margin:0; text-wrap:balance; }
  .mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; }
  .eyebrow{ font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }
  a{ color:inherit; }
  button{ font:inherit; }

  .topbar{ border-bottom:1px solid var(--line); background:var(--cream); position:sticky; top:0; z-index:30; }
  .topbar-inner{ max-width:1180px; margin:0 auto; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
  .brand{ display:flex; align-items:center; gap:10px; font-family:'Baloo 2',sans-serif; font-weight:800; font-size:1.05rem; }
  .brand .mark{ width:34px; height:34px; border-radius:10px; background:var(--royal); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1rem; }
  .back-link{ font-family:'IBM Plex Mono',monospace; font-size:.82rem; color:var(--ink-soft); text-decoration:none; display:flex; align-items:center; gap:6px; }
  .back-link:hover{ color:var(--royal-ink); }

  .shell{ max-width:1180px; margin:0 auto; padding:36px 24px 90px; display:grid; grid-template-columns:340px 1fr; gap:32px; align-items:start; }
  @media (max-width:920px){ .shell{ grid-template-columns:1fr; padding:24px 18px 60px; } }

  .intro{ margin-bottom:8px; }
  .intro h1{ font-size:clamp(1.7rem,3vw,2.2rem); }
  .intro p{ margin-top:10px; color:var(--ink-soft); max-width:64ch; font-size:1.02rem; }

  /* sidebar */
  .side{ position:sticky; top:78px; display:flex; flex-direction:column; gap:20px; }
  @media (max-width:920px){ .side{ position:static; } }
  .panel{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:20px; }
  .panel h2{ font-size:.95rem; margin-bottom:14px; }
  .code-table{ width:100%; border-collapse:collapse; font-size:.86rem; }
  .code-table td{ padding:6px 4px; border-top:1px solid var(--line); }
  .code-table tr:first-child td{ border-top:0; }
  .code-table td:first-child{ font-family:'IBM Plex Mono',monospace; font-weight:700; color:var(--royal-ink); width:28px; }
  .code-table td:last-child{ color:var(--ink-soft); text-align:right; letter-spacing:.03em; }
  .code-note{ margin-top:12px; font-size:.8rem; color:var(--ink-faint); line-height:1.5; }
  .credit{ font-size:.78rem; color:var(--ink-faint); line-height:1.6; }
  .credit a{ text-decoration:underline; text-underline-offset:2px; }

  /* main */
  .main{ display:flex; flex-direction:column; gap:22px; min-width:0; }
  .tabs{ display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:100px; padding:4px; gap:2px; }
  .tab-btn{ border:0; background:transparent; padding:9px 18px; border-radius:100px; cursor:pointer; font-family:'IBM Plex Mono',monospace; font-size:.82rem; font-weight:600; color:var(--ink-soft); }
  .tab-btn[aria-selected="true"]{ background:var(--royal); color:#fff; }
  .tab-btn:focus-visible{ outline:2px solid var(--gold-bg); outline-offset:2px; }

  .card{ background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:26px; }

  /* number -> word */
  .num-input-row{ display:flex; gap:12px; align-items:center; }
  #numInput{
    flex:1; min-width:0; font-family:'IBM Plex Mono',monospace; font-size:1.8rem; font-weight:600;
    background:var(--surface-2); border:1.5px solid var(--line-strong); border-radius:14px;
    padding:14px 18px; color:var(--ink); letter-spacing:.03em;
  }
  #numInput:focus-visible{ outline:2px solid var(--royal); outline-offset:1px; }
  .clear-btn{ background:var(--surface-2); border:1.5px solid var(--line); color:var(--ink-soft); border-radius:12px; padding:0 18px; height:56px; cursor:pointer; font-family:'IBM Plex Mono',monospace; font-size:.82rem; }
  .clear-btn:hover{ border-color:var(--line-strong); }
  .input-hint{ margin-top:10px; font-size:.82rem; color:var(--ink-faint); }

  .controls{ display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; margin-top:4px; }
  .control-group{ display:flex; align-items:center; gap:8px; font-size:.84rem; color:var(--ink-soft); }
  .seg{ display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:100px; padding:3px; }
  .seg button{ border:0; background:transparent; padding:6px 13px; border-radius:100px; cursor:pointer; font-size:.8rem; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace; }
  .seg button[aria-pressed="true"]{ background:var(--royal); color:#fff; }
  .switch{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; font-size:.84rem; color:var(--ink-soft); }
  .switch input{ accent-color:var(--royal); width:16px; height:16px; }

  .results-block{ margin-top:6px; }
  .results-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }
  .results-head h3{ font-size:1rem; }
  .results-count{ font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:var(--ink-faint); }
  .word-grid{ display:flex; flex-wrap:wrap; gap:9px; }
  .word-chip{ display:inline-flex; align-items:baseline; gap:6px; background:var(--chip-bg); border:1px solid transparent; border-radius:10px; padding:8px 12px; font-size:.98rem; }
  .word-chip .rae-dot{ width:6px; height:6px; border-radius:50%; background:var(--mint); flex:none; align-self:center; }
  .empty-state{ padding:30px 8px; text-align:center; color:var(--ink-faint); font-size:.92rem; }
  .show-more{ margin-top:14px; background:transparent; border:1px dashed var(--line-strong); color:var(--ink-soft); border-radius:10px; padding:8px 16px; cursor:pointer; font-family:'IBM Plex Mono',monospace; font-size:.8rem; }

  .seg-section{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }
  .seg-list{ display:flex; flex-direction:column; gap:10px; }
  .seg-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:10px 12px; }
  .seg-chunk{ display:flex; flex-direction:column; align-items:center; gap:2px; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:7px 12px; cursor:pointer; }
  .seg-chunk:hover{ border-color:var(--royal); }
  .seg-chunk .code{ font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:var(--ink-faint); }
  .seg-chunk .wd{ font-family:'Baloo 2',sans-serif; font-weight:700; font-size:1rem; color:var(--royal-ink); }
  .seg-plus{ color:var(--ink-faint); font-size:.9rem; }

  /* word -> number */
  #wordInput{
    width:100%; font-family:'Literata',serif; font-size:1.3rem;
    background:var(--surface-2); border:1.5px solid var(--line-strong); border-radius:14px;
    padding:14px 18px; color:var(--ink);
  }
  #wordInput:focus-visible{ outline:2px solid var(--royal); outline-offset:1px; }
  .breakdown{ margin-top:22px; display:flex; flex-direction:column; gap:16px; }
  .bd-word{ display:flex; flex-wrap:wrap; gap:4px; align-items:flex-end; }
  .bd-letter{ display:flex; flex-direction:column; align-items:center; min-width:30px; }
  .bd-letter .ch{ font-family:'Literata',serif; font-size:1.3rem; }
  .bd-letter .digit{ font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:.95rem; color:var(--coral); margin-top:2px; }
  .bd-letter .digit.empty{ color:var(--line-strong); }
  .bd-total{ margin-top:6px; font-family:'IBM Plex Mono',monospace; font-size:1.6rem; font-weight:600; color:var(--royal-ink); }
  .bd-total span{ font-family:'Literata',serif; font-size:.95rem; font-weight:400; color:var(--ink-soft); }

  footer.page{ max-width:1180px; margin:0 auto; padding:20px 24px 50px; font-size:.8rem; color:var(--ink-faint); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
  footer.page a{ text-decoration:underline; text-underline-offset:2px; }

  [hidden]{ display:none !important; }