:root{
    --font-sans: 'Poppins', system-ui, sans-serif;
    --font-serif: 'Poppins', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --bg:#070B14;
    --surface:#0A1426;
    --surface-2:#0E1B33;
    --ink:#EDEFF2;
    --muted:#94a3b8;
    --border:rgba(148,163,184,.18);
    --accent:#4FA9E8;
    --accent-ink:#070B14;
    --shadow: 0 0 0 1px rgba(79,169,232,.18), 0 12px 28px -14px rgba(0,0,0,.6), 0 0 24px rgba(79,169,232,.12);
    --danger:#D7263D;
    --site-bar-h: 56px;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#070B14;
      --surface:#0A1426;
      --surface-2:#0E1B33;
      --ink:#EDEFF2;
      --muted:#94a3b8;
      --border:rgba(148,163,184,.18);
      --accent:#4FA9E8;
      --accent-ink:#070B14;
      --shadow: 0 0 0 1px rgba(79,169,232,.18), 0 12px 28px -14px rgba(0,0,0,.6), 0 0 24px rgba(79,169,232,.12);
      --danger:#D7263D;
    }
  }
  :root[data-theme="dark"]{
    --bg:#070B14;
    --surface:#0A1426;
    --surface-2:#0E1B33;
    --ink:#EDEFF2;
    --muted:#94a3b8;
    --border:rgba(148,163,184,.18);
    --accent:#4FA9E8;
    --accent-ink:#070B14;
    --shadow: 0 0 0 1px rgba(79,169,232,.18), 0 12px 28px -14px rgba(0,0,0,.6), 0 0 24px rgba(79,169,232,.12);
    --danger:#D7263D;
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-sans);
    -webkit-font-smoothing:antialiased;
    letter-spacing:-.005em;
    color-scheme:dark;
  }
  ::selection{ background:var(--accent); color:var(--accent-ink); }

  .mono{ font-family:var(--font-mono); }
  .serif{ font-family:var(--font-serif); }

  a{ color:inherit; }
  button{ font-family:inherit; }

  /* ---------- Monkyfi chrome ---------- */
  .site-bar{
    position:sticky; top:0; z-index:80;
    height:var(--site-bar-h);
    display:flex; align-items:center; gap:10px;
    padding:0 22px;
    background:rgba(7,11,20,.72);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
  }
  .site-brand{
    display:flex; align-items:center; gap:10px;
    text-decoration:none;
    flex:none;
  }
  .site-mark{
    width:36px; height:36px; flex:none;
    border-radius:9px;
    background:radial-gradient(circle at 30% 30%, #143055, #0A1426 70%);
    border:1px solid rgba(79,169,232,.35);
    box-shadow:0 0 18px rgba(79,169,232,.18);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .site-mark img{ width:78%; height:78%; object-fit:contain; }
  .site-name{
    font-weight:700; font-size:16px; letter-spacing:-.02em; color:#EDEFF2;
  }
  .site-name .fi{ color:var(--accent); }
  .site-sep{ color:var(--muted); opacity:.55; font-weight:300; }
  .site-page{
    font-family:var(--font-mono);
    font-size:11px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--accent);
  }
  .site-edit-badge{
    font-family:var(--font-mono);
    font-size:10px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--accent-ink);
    background:var(--accent);
    border-radius:4px;
    padding:2px 7px;
  }
  .site-home-link{
    margin-left:auto;
    font-size:13px; font-weight:500; color:var(--muted);
    text-decoration:none;
    white-space:nowrap;
  }
  .site-home-link:hover{ color:var(--accent); }
  @media (max-width: 640px){
    .site-bar{ padding:0 12px; gap:8px; }
    .site-name{ font-size:15px; }
    .site-home-link{ font-size:12px; }
  }

  .site-foot{
    border-top:1px solid var(--border);
    padding:40px 22px 28px;
    background:var(--surface);
  }
  .foot-top{
    max-width:1100px; margin:0 auto;
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap:28px;
  }
  .foot-brand p{
    margin:12px 0 0;
    font-size:13px; color:var(--muted); line-height:1.5;
  }
  .foot-top h5{
    color:#EDEFF2; font-size:12px; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase;
    margin:0 0 12px;
  }
  .foot-top ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
  .foot-top ul a{ color:var(--muted); font-size:13.5px; text-decoration:none; }
  .foot-top ul a:hover{ color:var(--accent); }
  .foot-bottom{
    max-width:1100px; margin:28px auto 0;
    padding-top:18px;
    border-top:1px solid var(--border);
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:12px;
  }
  .foot-bottom small{ color:#64748b; font-size:12px; }
  .foot-bottom a{ color:inherit; text-decoration:none; }
  .foot-bottom a:hover{ color:var(--accent); }
  .foot-social{ font-size:12.5px; color:var(--muted); text-decoration:none; }
  .foot-social:hover{ color:var(--accent); }
  @media (max-width: 820px){ .foot-top{ grid-template-columns:1fr 1fr; } }
  @media (max-width: 560px){ .foot-top{ grid-template-columns:1fr; } }

  body.is-public .add-btn,
  body.is-public .save-bar{ display:none !important; }

  /* ---------- shell ---------- */
  .shell{
    display:grid;
    grid-template-columns: 280px 1fr;
    min-height:calc(100vh - var(--site-bar-h));
  }
  .shell > *{ min-width:0; }

  /* ---------- left rail ---------- */
  .rail{
    position:sticky; top:var(--site-bar-h); align-self:start;
    height:calc(100vh - var(--site-bar-h));
    overflow-y:auto;
    background:var(--surface);
    border-right:1px solid var(--border);
    padding:28px 22px 32px;
    display:flex; flex-direction:column; gap:26px;
  }
  .brand{
    display:flex; flex-direction:column; gap:2px;
  }
  .brand .mark{
    display:flex; align-items:baseline; gap:9px;
  }
  .brand .mark .num{
    font-family:var(--font-mono);
    font-size:11px; color:var(--accent);
    border:1px solid var(--accent);
    border-radius:3px;
    padding:1px 5px;
    letter-spacing:.03em;
  }
  .brand h1{
    font-family:var(--font-serif);
    font-weight:700;
    font-size:24px;
    margin:2px 0 0;
    letter-spacing:-.025em;
    text-wrap:balance;
  }
  .brand p{
    margin:4px 0 0;
    font-size:14px;
    color:var(--muted);
    line-height:1.5;
  }

  .rail-section{ display:flex; flex-direction:column; gap:8px; }
  .rail-label{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--muted);
  }

  .view-switch{
    display:flex; flex-direction:column; gap:3px;
  }
  .view-switch button{
    all:unset;
    cursor:pointer;
    display:flex; align-items:center; justify-content:space-between;
    padding:9px 10px;
    border-radius:6px;
    font-size:16px;
    color:var(--ink);
  }
  .view-switch button:hover{ background:var(--surface-2); }
  .view-switch button.active{
    background:var(--accent);
    color:var(--accent-ink);
    font-weight:600;
  }
  .view-switch button .cnt{
    font-family:var(--font-mono);
    font-size:12px;
    opacity:.75;
  }

  .cat-list{ display:flex; flex-direction:column; gap:2px; }
  .cat-list button{
    all:unset;
    cursor:pointer;
    display:flex; align-items:center; gap:8px;
    padding:7px 10px;
    border-radius:6px;
    font-size:15px;
    color:var(--cat-color, var(--muted));
    border-left:3px solid transparent;
  }
  .cat-list button:hover{ background:var(--surface-2); color:var(--cat-color, var(--ink)); }
  .cat-list button.active{
    background:color-mix(in srgb, var(--cat-color, var(--accent)) 42%, #0A1426);
    color:#FFFDF8;
    font-weight:700;
    border-left-color:var(--cat-color, var(--accent));
  }
  .cat-list button.active .tag,
  .cat-list button.active .n{
    color:#FFFDF8;
    background:rgba(255,255,255,.16);
  }
  .cat-list button[data-cat="__all"]{ color:var(--muted); }
  .cat-list button[data-cat="__all"]:hover{ color:var(--ink); }
  .cat-list button[data-cat="__all"].active{ color:#FFFDF8; background:#0A1426; border-left-color:var(--accent); }
  .cat-list button[data-cat="__all"].active .tag{ color:#FFFDF8; background:transparent; }
  .cat-list button[data-cat="__all"] .tag{ color:var(--accent); background:transparent; }
  .cat-list button .tag{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.04em;
    border-radius:4px;
    padding:1px 4px;
    width:32px;
    flex:none;
    text-align:center;
  }
  .cat-list button .n{ margin-left:auto; font-family:var(--font-mono); font-size:12px; color:var(--muted); }

  .rail-footer{
    margin-top:auto;
    display:flex; flex-direction:column; gap:10px;
  }
  .add-btn{
    all:unset;
    cursor:pointer;
    text-align:center;
    background:var(--accent);
    color:var(--accent-ink);
    padding:11px 14px;
    border-radius:8px;
    font-weight:600;
    font-size:15px;
    box-shadow:0 0 0 1px var(--accent), 0 8px 22px rgba(79,169,232,.35);
  }
  .add-btn:hover{ opacity:.88; }
  .rail-footer-row{
    display:flex; gap:8px;
  }
  .rail-footer-row .lang-btn,
  .rail-footer-row .refresh-btn{
    flex:1;
  }
  .lang-btn, .refresh-btn{
    all:unset;
    cursor:pointer;
    text-align:center;
    background:transparent;
    color:var(--muted);
    border:1px solid var(--border);
    padding:9px 10px;
    border-radius:8px;
    font-weight:600;
    font-size:13.5px;
  }
  .lang-btn:hover, .refresh-btn:hover{ color:var(--ink); border-color:var(--accent); }
  .refresh-btn.is-spinning .refresh-icon{ display:inline-block; animation:spin .6s linear; }
  @media (prefers-reduced-motion: reduce){ .refresh-btn.is-spinning .refresh-icon{ animation:none; } }
  @keyframes spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
  .storage-note{
    font-size:12px;
    color:var(--muted);
    line-height:1.5;
  }

  .sources-note{
    margin:6px 0 0;
    font-size:12px;
    color:var(--muted);
    line-height:1.5;
  }

  /* Mobile / touch: neither the "stack the rail above main" nor the
     "split the screen in half" approach survived real-device testing —
     both rely on @media(max-width) actually matching the device's CSS
     pixel width, and in the webview this app gets opened in (an
     in-app/share-sheet browser), that width is not being reported as
     narrow, so those breakpoints silently never fire and the desktop
     two-column sticky layout renders instead, with the sticky/100vh
     rail overlapping scrolled content.
     Fix: stop depending on width entirely. Target touch input directly
     via (hover:none) and (pointer:coarse) — true for a phone regardless
     of what width the webview reports — OR a narrow width as a backup
     for narrow-but-mouse-driven windows. Turn the rail into an off-canvas
     drawer (hidden by default, slides in over a backdrop) instead of a
     second column, so there is no shared space left to overlap. Must
     come AFTER the base .shell/.rail rules above — same cascade-order
     reason noted elsewhere in this file. */
  @media (max-width: 860px), (hover: none) and (pointer: coarse){
    .shell{ grid-template-columns: 1fr; }
    .menu-toggle{ display:inline-flex; }
    .rail{
      position:fixed; top:0; left:0; z-index:1000;
      height:100vh; width:82%; max-width:320px;
      overflow-y:auto;
      background:var(--surface);
      border-right:1px solid var(--border);
      padding:24px 20px 28px;
      box-shadow:2px 0 28px rgba(0,0,0,.28);
      transform:translateX(-100%);
      transition:transform .25s ease;
    }
    body.rail-open .rail{ transform:translateX(0); }
    .rail-backdrop{
      position:fixed; inset:0; z-index:900;
      background:rgba(0,0,0,.42);
      opacity:0; pointer-events:none;
      transition:opacity .2s ease;
    }
    body.rail-open .rail-backdrop{ opacity:1; pointer-events:auto; }
    body.rail-open{ overflow:hidden; }
  }
  .menu-toggle{
    display:none;
    all:unset;
    cursor:pointer;
    align-items:center; justify-content:center;
    width:38px; height:38px; flex:none;
    border:1px solid var(--border);
    border-radius:8px;
    color:var(--ink);
    font-size:18px;
  }
  .menu-toggle:hover{ border-color:var(--accent); }

  /* ---------- main ---------- */
  main{ padding:30px 40px 80px; max-width:980px; }
  @media (max-width: 860px){ main{ padding:16px 12px 60px; } }
  @media (max-width: 640px){ main{ padding:14px 10px 60px; } }

  .topbar{
    display:flex; align-items:center; gap:14px;
    margin-bottom:22px;
    flex-wrap:wrap;
  }
  .search{
    flex:1; min-width:220px;
    position:relative;
  }
  .search input{
    width:100%;
    background:var(--surface);
    border:1px solid var(--border);
    color:var(--ink);
    border-radius:8px;
    padding:10px 14px 10px 34px;
    font-size:14px;
    font-family:inherit;
  }
  .search input:focus{ outline:2px solid var(--accent); outline-offset:-1px; }
  /* Small phones: .search's 220px min-width above can still be wider
     than a very narrow screen even with main at full width, so relax
     it here. Must come after the base .search/.topbar rules above for
     the same cascade-order reason noted on .rail. */
  @media (max-width: 420px){
    .topbar{ gap:8px; }
    .search{ min-width:0; }
    .search input{ padding:8px 10px 8px 30px; font-size:13px; }
    .result-count{ display:none; }
  }
  .search::before{
    content:"⌕";
    position:absolute; left:12px; top:50%; transform:translateY(-50%);
    color:var(--muted); font-size:15px;
  }
  .search input::placeholder{ color:var(--muted); }
  .result-count{
    font-family:var(--font-mono);
    font-size:11.5px;
    color:var(--muted);
    white-space:nowrap;
  }

  .save-bar{
    display:flex; align-items:center; gap:8px;
    font-size:12px;
    color:var(--muted);
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:20px;
    padding:5px 8px 5px 12px;
    white-space:nowrap;
  }
  .save-bar[hidden]{ display:none; }
  .save-dot{
    width:7px; height:7px; border-radius:50%;
    background:var(--muted);
    flex:none;
  }
  .save-bar.is-dirty .save-dot{ background:var(--accent); }
  .save-bar.is-saving .save-dot{ background:var(--accent); animation:pulse 1s ease-in-out infinite; }
  .save-bar.is-saved .save-dot{ background:#3c7a4c; }
  .save-bar.is-error .save-dot{ background:var(--danger); }
  @media (prefers-reduced-motion: reduce){ .save-bar.is-saving .save-dot{ animation:none; } }
  @keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
  #save-now-btn{
    all:unset;
    cursor:pointer;
    font-size:11.5px;
    font-weight:600;
    color:var(--accent-ink);
    background:var(--accent);
    padding:4px 10px;
    border-radius:14px;
  }
  #save-now-btn:hover{ opacity:.88; }
  #save-now-btn[hidden]{ display:none; }

  .view-title{
    display:flex; align-items:baseline; gap:10px;
    margin:4px 0 18px;
  }
  .view-title h2{
    font-family:var(--font-serif);
    font-weight:700;
    font-size:21px;
    margin:0;
    letter-spacing:-.025em;
  }
  .view-title .sub{ font-size:12.5px; color:var(--muted); }

  .letter-heading{
    font-family:var(--font-serif);
    font-size:15px;
    font-weight:600;
    color:var(--accent);
    margin:26px 0 8px;
    padding-bottom:5px;
    border-bottom:1px solid var(--border);
  }
  .letter-heading:first-child{ margin-top:0; }

  .cat-heading{
    display:flex; align-items:center; gap:8px;
    margin:30px 0 10px;
  }
  .cat-heading:first-child{ margin-top:0; }
  .cat-heading .tag{
    font-family:var(--font-mono);
    font-size:10px; color:var(--accent);
    border:1px solid var(--accent);
    border-radius:3px; padding:1px 5px;
  }
  .cat-heading h3{
    font-family:var(--font-serif);
    font-size:17px; font-weight:600; margin:0;
  }
  .cat-heading .n{ font-family:var(--font-mono); font-size:11px; color:var(--muted); }

  /* ---------- entry card ---------- */
  .entry{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:10px;
    padding:16px 18px;
    margin-bottom:10px;
    cursor:pointer;
    transition:box-shadow .15s ease, border-color .15s ease;
  }
  .entry:hover{ box-shadow:var(--shadow); border-color:color-mix(in srgb, var(--accent) 35%, var(--border)); }
  .entry-head{
    display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  }
  .entry-term{
    font-family:var(--font-serif);
    font-weight:600;
    font-size:17px;
    letter-spacing:-.02em;
  }
  .entry-cat{
    font-family:var(--font-mono);
    font-size:10px;
    color:var(--accent);
    letter-spacing:.03em;
  }
  .drag-handle{
    margin-left:auto;
    flex:none;
    display:flex; align-items:center; justify-content:center;
    width:22px; height:22px;
    border-radius:5px;
    color:var(--muted);
    cursor:grab;
    letter-spacing:1px;
    font-size:13px;
    line-height:1;
    touch-action:none;
  }
  .drag-handle:hover{ color:var(--ink); background:var(--surface-2); }
  .entry.dragging{ opacity:.4; }
  .entry.drag-over-top{ box-shadow: inset 0 2px 0 0 var(--accent); }
  .entry.drag-over-bottom{ box-shadow: inset 0 -2px 0 0 var(--accent); }
  .entry-usecase{
    margin:5px 0 0;
    font-size:13.5px;
    color:var(--ink);
    line-height:1.5;
  }
  .entry-tags{
    display:flex; gap:6px; flex-wrap:wrap;
    margin-top:9px;
  }
  .entry-tags span{
    font-family:var(--font-mono);
    font-size:10px;
    color:var(--muted);
    background:var(--surface-2);
    border-radius:4px;
    padding:2px 6px;
  }
  .entry-body{
    display:none;
    margin-top:13px;
    padding-top:13px;
    border-top:1px solid var(--border);
  }
  .entry.open .entry-body{ display:block; }
  .entry-prompt{
    font-size:14px;
    line-height:1.65;
    margin:0 0 12px;
    color:var(--ink);
  }
  .prompt-para{
    margin:0 0 14px;
    white-space:pre-wrap;
    color:var(--ink);
  }
  .prompt-para:last-child{ margin-bottom:0; }
  .prompt-section{
    padding:12px 0;
    border-top:1px solid var(--border);
  }
  .prompt-section:first-child{
    padding-top:0;
    border-top:none;
  }
  .prompt-section:last-child{ padding-bottom:0; }
  .prompt-label{
    display:inline-block;
    font-family:var(--font-mono);
    font-size:10px;
    font-weight:600;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--accent);
    border:1px solid var(--accent);
    border-radius:4px;
    padding:1px 7px;
    margin-bottom:8px;
  }
  .prompt-body{
    white-space:pre-wrap;
    margin:0;
    color:var(--ink);
  }
  .prompt-section.prompt-template{
    background:var(--surface-2);
    border-top:none;
    border-radius:8px;
    padding:12px 14px;
    margin-top:2px;
  }
  .prompt-section.prompt-template .prompt-label{
    background:var(--accent);
    color:var(--accent-ink);
    border-color:var(--accent);
  }
  .entry-actions{ display:flex; gap:8px; flex-wrap:wrap; }
  .entry-actions button{
    all:unset; cursor:pointer;
    font-size:12px; font-weight:600;
    padding:6px 11px;
    border-radius:6px;
    border:1px solid var(--border);
  }
  .entry-actions .copy{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
  .entry-actions .copy.copied{ background:#3c7a4c; border-color:#3c7a4c; color:#fff; }
  .entry-actions .edit:hover, .entry-actions .del:hover{ background:var(--surface-2); }
  .entry-actions .del{ color:var(--danger); }

  .empty-state{
    text-align:center;
    padding:60px 20px;
    color:var(--muted);
  }
  .empty-state .glyph{ font-family:var(--font-serif); font-size:34px; color:var(--border); margin-bottom:8px; }

  /* ---------- modal ---------- */
  .overlay{
    position:fixed; inset:0;
    background:rgba(7,11,20,.72);
    display:none;
    align-items:flex-start; justify-content:center;
    padding:6vh 16px;
    overflow-y:auto;
    z-index:50;
  }
  .overlay.show{ display:flex; }
  .modal{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    width:100%; max-width:560px;
    padding:26px 26px 22px;
    box-shadow:var(--shadow);
  }
  .modal h3{
    font-family:var(--font-serif);
    font-size:19px; margin:0 0 16px;
  }
  .field{ margin-bottom:14px; display:flex; flex-direction:column; gap:5px; }
  .field label{
    font-size:11px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--muted); font-family:var(--font-mono);
  }
  .field input, .field select, .field textarea{
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:7px;
    padding:9px 11px;
    font-size:14px;
    color:var(--ink);
    font-family:inherit;
    resize:vertical;
  }
  .field textarea{ min-height:120px; line-height:1.55; }
  .field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--accent); outline-offset:-1px; }
  .field-row{ display:flex; gap:10px; }
  .field-row .field{ flex:1; }
  .modal-actions{
    display:flex; justify-content:flex-end; gap:10px; margin-top:6px;
  }
  .modal-actions button{
    all:unset; cursor:pointer;
    font-size:13.5px; font-weight:600;
    padding:9px 16px; border-radius:7px;
  }
  .modal-actions .cancel{ color:var(--muted); }
  .modal-actions .cancel:hover{ color:var(--ink); }
  .modal-actions .save{ background:var(--accent); color:var(--accent-ink); }
  .save-status{
    font-family:var(--font-mono);
    font-size:10.5px; color:var(--muted);
    margin-right:auto; align-self:center;
  }

  .confirm-box{
    display:flex; align-items:center; gap:10px;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:7px;
    padding:9px 11px;
    margin-top:10px;
    font-size:12.5px;
  }
  .confirm-box button{
    all:unset; cursor:pointer; font-weight:600; font-size:12px;
    padding:4px 9px; border-radius:5px;
  }
  .confirm-box .yes{ background:var(--danger); color:#fff; }
  .confirm-box .no{ border:1px solid var(--border); }

  [hidden]{ display:none !important; }

  /* Embedded on monkyfi.com: site masthead + sticky nav.top sit above the glossary.
     Rail sticks under nav.top (~72px). Drawer still covers the full viewport. */
  body.lexicon-embed{
    --site-bar-h: 72px;
  }
  body.lexicon-embed .lexicon-main{
    padding:0;
    max-width:none;
  }
  body.lexicon-embed .lexicon-board{
    padding:30px 40px 80px;
    max-width:980px;
    min-width:0;
  }
  @media (max-width: 860px){
    body.lexicon-embed .lexicon-board{ padding:16px 12px 60px; }
  }
  @media (max-width: 640px){
    body.lexicon-embed .lexicon-board{ padding:14px 10px 60px; }
  }
  body.lexicon-embed #lang-toggle{ display:none !important; }
  body.lexicon-embed .brand h1{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  }

  html[data-edition="morning"]{
    --bg:#F3EBDD;
    --surface:#FFF9EF;
    --surface-2:#FFFFFF;
    --ink:#0A1426;
    --muted:#3D4A5C;
    --border:rgba(10,20,38,.14);
    --accent-ink:#070B14;
    --shadow: 0 0 0 1px rgba(79,169,232,.16), 0 12px 28px -14px rgba(10,20,38,.16), 0 0 24px rgba(79,169,232,.08);
  }
  html[data-edition="morning"] body,
  html[data-edition="morning"] body.lexicon-embed{
    color-scheme:light;
    background:#F3EBDD;
    color:#0A1426;
  }
  html[data-edition="morning"] .lexicon-main,
  html[data-edition="morning"] .lexicon-board,
  html[data-edition="morning"] .shell,
  html[data-edition="morning"] .rail{
    background:#F3EBDD;
    color:#0A1426;
  }
  html[data-edition="morning"] .overlay{
    background:rgba(243,235,221,.72);
  }
  html[data-edition="morning"] .site-bar{
    background:rgba(255,249,239,.88);
  }
  html[data-edition="morning"] .entry,
  html[data-edition="morning"] .modal,
  html[data-edition="morning"] .search input,
  html[data-edition="morning"] .field input,
  html[data-edition="morning"] .field select,
  html[data-edition="morning"] .field textarea{
    background:#FFFDF8;
    color:#0A1426;
  }
  html[data-edition="morning"] .entry-usecase,
  html[data-edition="morning"] .entry-prompt,
  html[data-edition="morning"] .prompt-para,
  html[data-edition="morning"] .prompt-body{
    color:#0A1426;
  }
  html[data-edition="morning"] .rail .brand h1,
  html[data-edition="morning"] .rail .brand p,
  html[data-edition="morning"] .rail-label,
  html[data-edition="morning"] .sources-note,
  html[data-edition="morning"] .storage-note,
  html[data-edition="morning"] .view-switch button:not(.active),
  html[data-edition="morning"] .cat-list button,
  html[data-edition="morning"] .cat-list button .n,
  html[data-edition="morning"] .cat-list button .tag,
  html[data-edition="morning"] .rail .lang-btn,
  html[data-edition="morning"] .rail .refresh-btn{
    color:#0A1426;
  }
  html[data-edition="morning"] .view-switch button.active{
    background:color-mix(in srgb, var(--accent) 22%, #FFF9EF);
    color:#0A1426;
  }
  html[data-edition="morning"] .cat-list button.active,
  html[data-edition="morning"] .cat-list button[data-cat="__all"].active{
    background:color-mix(in srgb, var(--cat-color, var(--accent)) 18%, #FFF9EF);
    color:#0A1426;
    border-left-color:var(--cat-color, var(--accent));
  }
  html[data-edition="morning"] .cat-list button.active .n,
  html[data-edition="morning"] .cat-list button.active .tag,
  html[data-edition="morning"] .cat-list button[data-cat="__all"].active .tag{
    color:#0A1426;
    background:color-mix(in srgb, var(--cat-color, var(--accent)) 22%, #FFF9EF);
  }
  html[data-edition="morning"] .cat-list button[data-cat="__all"].active{
    background:color-mix(in srgb, var(--accent) 16%, #FFF9EF);
    border-left-color:var(--accent);
  }