* { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    /* V5.9 Aurora. Names are unchanged — every rule below and app.css's
       overrides depend on them. app.css re-declares the shared subset for the
       EMBEDDED SE; these values are what the STANDALONE explorer.html gets, so
       the two are kept in agreement deliberately. */
    --bg-dark:   #08080C;
    --bg-mid:    #101017;
    --bg-panel:  #1A1A24;
    --bg-card:   #14141C;
    --text-main: #F2F3F7;
    --text-dim:  #A2A6B4;
    --text-muted:#6B7080;
    --text-light:#FFFFFF;      /* was referenced by #copyright but never defined */
    --green:     #34D399;
    --green-hov: #10B981;
    --red:       #F87171;
    --accent:    #8B5CF6;
    --accent-hov:#7C3AED;
    --inactive:  #1E1E28;
    --orange:    #F5A524;
    --orange-hov:#D98D14;
    /* category tiles — one hue per family, modernised but still distinct */
    --blue:      #1D4ED8;  --blue-hov:   #1E40AF;
    --grn:       #047857;  --grn-hov:    #065F46;
    --org:       #B45309;  --org-hov:    #92400E;
    --purp:      #7C3AED;  --purp-hov:   #6D28D9;
    --pink:      #BE185D;  --pink-hov:   #9D174D;
    --brown:     #78624F;  --brown-hov:  #5F4E3F;
    --blue-dk:   #4338CA;  --blue-dk-hov:#3730A3;
    --teal:      #0F766E;  --teal-hov:   #115E59;
    --line:      rgba(255,255,255,.09);
    --line-2:    rgba(255,255,255,.05);
    --surface:   rgba(255,255,255,.038);
    --surface-2: rgba(255,255,255,.065);
    --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
  }
  body::before {
    content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
      radial-gradient(900px 520px at 10% -8%, rgba(139,92,246,.20), transparent 62%),
      radial-gradient(780px 460px at 92% -6%, rgba(245,165,36,.13), transparent 60%),
      radial-gradient(760px 520px at 55% 112%, rgba(34,211,238,.10), transparent 62%);
  }
  #topbar, #content, #selbar, #statusbar, #copyright { position: relative; z-index: 1; }
  /* Same type treatment as app.css — grayscale smoothing above all, without
     which macOS subpixel-antialiases and every glyph reads heavier than it was
     designed. The embedded SE gets it from app.css's `body`; this is what the
     STANDALONE explorer.html gets, and the two must not drift. */
  body {
    background: var(--bg-dark);
    color: var(--text-main);
    font: 14px/1.5 system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    display: flex; flex-direction: column;
    /* 100dvh tracks the visible viewport on iPad/iPhone Safari (see app.css
       body — the two must not drift); 100vh is the no-dvh fallback. */
    height: 100vh; height: 100dvh; overflow: hidden;
  }
  button, select, input, textarea { font: inherit; }
  #topbar {
    background: rgba(8,8,12,.72); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
    border-bottom: 1px solid var(--line-2);
    display: flex; align-items: center;
    padding: 0 18px; height: 56px; flex-shrink: 0;
    gap: 10px;
  }
  /* the SE icon (favicon-se.svg, an <img> from structureExplorer.js) sits flush
     beside the title: the flex gap is 10px for the bar as a whole, pulled back
     to 7px between icon and title so the pair reads as one lockup */
  #topbar .icon { width: 22px; height: 22px; display: block; margin-right: -3px; }
  #topbar .title {
    font-size: 19px; font-weight: 700; white-space: nowrap; letter-spacing: -.015em;
    background: linear-gradient(150deg, var(--accent), #22D3EE);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  #breadcrumb { flex: 1; font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 8px; }
  #breadcrumb span[style*="pointer"]:hover { color: var(--accent); }
  #selbar {
    background: var(--surface); border-bottom: 1px solid var(--line-2);
    padding: 9px 18px; display: none;
    align-items: center; gap: 10px; flex-shrink: 0;
  }
  #selbar .sel-name { font-size: 14px; font-weight: 700; }
  #selbar .sel-deg  { font-size: 13px; font-family: var(--mono); color: var(--orange); letter-spacing: .05em; }
  #content { flex: 1; overflow: hidden; background: transparent; }
  #statusbar { padding: 3px 16px; font-size: 12px; color: var(--text-dim); background: var(--bg-dark); flex-shrink: 0; }
  #copyright  { padding: 2px 16px 4px; font-size: 10px; color: var(--text-muted); background: var(--bg-dark); flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 12px; letter-spacing: 0.03em; }
  #copyright a.donate-btn { color: #fff; background: #003087; border-radius: 4px; padding: 2px 10px; font-size: 10px; font-weight: 600; text-decoration: none; letter-spacing: 0.04em; opacity: 0.75; transition: opacity 0.15s; }
  #copyright a.donate-btn:hover { opacity: 1; }
  #copyright a.site-link { color: inherit; text-decoration: none; }
  #copyright a.site-link:hover { color: var(--text-light); text-decoration: underline; }
  button {
    border: none; border-radius: 8px; cursor: pointer;
    font-family: inherit; font-weight: 600; transition: background 0.15s;
    white-space: nowrap;
  }
  button:hover { filter: brightness(1.15); }
  button:active { filter: brightness(0.9); }
  button.btn-accent   { background: var(--accent);   color: #fff; }
  button.btn-inactive { background: var(--surface); color: var(--text-dim); border: 1px solid var(--line); }
  button.btn-green    { background: var(--green);    color: #08080C; }
  button.btn-red      { background: transparent; color: var(--text-muted); border: 1px solid var(--line); }
  button.btn-blue     { background: var(--blue);     color: var(--text-main); }
  button.btn-grn      { background: var(--grn);      color: var(--text-main); }
  button.btn-org      { background: var(--org);      color: var(--text-main); }
  button.btn-purp     { background: var(--purp);     color: var(--text-main); }
  button.btn-pink     { background: var(--pink);     color: var(--text-main); }
  button.btn-brown    { background: var(--brown);    color: var(--text-main); }
  button.btn-blue-dk  { background: var(--blue-dk);  color: var(--text-main); }
  button.btn-teal     { background: var(--teal);     color: var(--text-main); }
  button.btn-small    { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
  button.btn-med      { padding: 6px 14px; font-size: 12px; }
  button.btn-info     { background: var(--surface); color: var(--text-dim); border: 1px solid var(--line); width:28px; height:28px; border-radius:8px; padding:0; font-size:12px; flex-shrink:0; }
  button.btn-info:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
  /* Desktop tiers: mode rows in group cards + relation rows use the tiny size */
  .group-sub button.btn-small, .rel-row button.btn-small { font-size: 11px; }
  .group-sub button.btn-info  { width: 24px; height: 24px; font-size: 11px; }
  .home-wrapper { padding: 24px; height: 100%; overflow-y: auto; display: flex; flex-direction: column; align-items: center; }
  .home-inner { width: 100%; max-width: 520px; }
  .home-hint { font-size: 11px; font-weight: 700; color: var(--text-muted); margin-bottom: 20px; text-transform: uppercase; letter-spacing: .12em; }
  .cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
  .cat-btn { height: 66px; font-size: 14.5px; font-weight: 650; border-radius: 14px; width: 100%; letter-spacing: -.01em; }
  .cat-cell { position: relative; width: 100%; }
  .exotic-cell { position: relative; width: 300px; }
  .cat-info-badge { position: absolute; top: 7px; right: 7px; width: 20px; height: 20px;
                    border: 1.5px solid #B0B6C4; border-radius: 50%; color: #B0B6C4;
                    font-family: Georgia, 'Times New Roman', serif; font-size: 13px;
                    line-height: 17px; text-align: center; cursor: pointer;
                    background: transparent; padding: 0; }
  .cat-info-badge:hover { border-color: var(--text-main); color: var(--text-main); }
  .exotic-row { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-2); display: flex; justify-content: center; width: 100%; }
  .exotic-btn { height: 66px; width: 300px; font-size: 14.5px; font-weight: 650; border-radius: 14px; }
  .cat-view { height: 100%; display: flex; flex-direction: column; }
  .nav-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px 6px; flex-shrink: 0; }
  .nav-row .nav-title { font-size: 14px; font-weight: 700; }
  .list-scroll { flex: 1; overflow-y: auto; padding: 0 8px 16px; }
  .item-row {
    background: var(--surface); border: 1px solid var(--line-2); border-radius: 11px;
    display: flex; align-items: center; padding: 9px 13px;
    margin: 4px 0; gap: 10px; transition: background .12s, border-color .12s;
  }
  .item-row:hover { background: var(--surface-2); border-color: var(--line); }
  .item-name { font-family: 'SF Mono', 'Fira Mono', monospace; font-size: 13px; flex: 1; }
  .item-extra { font-size: 11px; color: var(--text-main); font-family: 'SF Mono', 'Fira Mono', monospace; }
  .item-btns  { display: flex; gap: 4px; flex-shrink: 0; }
  .group-card { background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; margin: 6px 0; overflow: hidden; }
  .group-hdr  { background: rgba(0,0,0,.28); border-bottom: 1px solid var(--line-2); padding: 8px 13px; font: 700 10px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim); }
  .group-sub  { display: flex; align-items: center; padding: 3px 8px 3px 12px; gap: 6px; }
  .sub-ttype  { font-size: 11px; color: var(--text-main); font-family: 'SF Mono', monospace; width: 150px; flex-shrink: 0; }
  .sub-formula{ font-size: 11px; font-family: 'SF Mono', monospace; flex: 1; }
  .sub-btns   { display: flex; gap: 3px; flex-shrink: 0; }
  .sub-mode   { font-size: 11px; color: var(--text-main); font-family: 'SF Mono', monospace; width: 70px; flex-shrink: 0; }
  .sub-spell  { font-size: 11px; font-family: 'SF Mono', monospace; flex: 1; }
  .sub-nature { font-size: 11px; font-family: 'SF Mono', monospace; flex-shrink: 0; padding-right: 6px; }
  .sub-hex    { font-size: 11px; font-family: 'SF Mono', monospace; flex-shrink: 0; color: var(--text-dim); padding-right: 6px; }
  .sub-nathead { font-size: 11px; color: var(--text-dim); padding: 8px 12px 1px; }
  .sub-tspell { font-size: 11px; color: var(--text-main); font-family: 'SF Mono', monospace; flex: 1; }
  .sect-hdr { font-size: 12px; color: var(--text-main); padding: 10px 12px 4px; }
  .sect-subhdr { font-size: 11px; color: var(--text-dim); padding: 6px 12px 2px 24px; }
  .sect-div  { height: 1px; background: var(--line-2); margin: 12px 8px 4px; }
  .l1-view { height: 100%; display: flex; flex-direction: column; }
  .l1-cols { flex: 1; display: flex; gap: 0; overflow: hidden; }
  .l1-col  { flex: 1; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; margin: 0 6px 10px; overflow: hidden; }
  .l1-col-hdr { padding: 13px 16px 9px; font-size: 12.5px; font-weight: 650; flex-shrink: 0; border-bottom: 1px solid var(--line-2); }
  .l1-col-hdr.within    { color: var(--green); }
  .l1-col-hdr.containing { color: var(--orange); }
  .l1-col-scroll { flex: 1; overflow-y: auto; padding: 4px; }
  .rel-row {
    background: transparent; border-radius: 9px;
    display: flex; align-items: center; padding: 6px 9px;
    margin: 1px 0; gap: 8px; transition: background .12s;
  }
  .rel-row:hover { background: var(--surface); }
  .rel-name { font-size: 11px; font-family: 'SF Mono', monospace; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; }
  .rel-cat-label { font-size: 12px; padding: 4px 8px 2px; margin-top: 6px; }
  .rel-cat-sublabel { font-size: 11px; padding: 2px 8px 2px 24px; margin-top: 2px; font-style: italic; color: var(--text-main); }
  .rel-none { font-size: 12px; color: var(--text-muted); padding: 8px; }
  #overlay {
    position: fixed; inset: 0; background: rgba(5,5,9,.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    display: none; justify-content: center; align-items: center; z-index: 100;
  }
  #overlay.open { display: flex; }
  .popup {
    background: rgba(22,22,29,.95); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
    border: 1px solid var(--line); box-shadow: 0 30px 90px rgba(0,0,0,.8); border-radius: 20px;
    width: min(560px, 95vw); max-height: 85vh;
    display: flex; flex-direction: column; overflow: hidden;
  }
  .popup-hdr  { border-bottom: 1px solid var(--line-2); padding: 16px 20px; flex-shrink: 0; }
  .popup-hdr .popup-title { font-size: 14px; font-weight: 700; }
  .popup-body { overflow-y: auto; padding: 0 0 8px; flex: 1; }
  .popup-sect-label { font: 700 10px var(--mono); text-transform: uppercase; letter-spacing: .11em; color: var(--text-muted); padding: 14px 20px 5px; }
  .popup-row  { display: grid; grid-template-columns: 150px 1fr; padding: 4px 20px; gap: 12px; }
  .popup-lbl  { font-size: 11px; color: var(--text-dim); font-family: 'SF Mono', monospace; }
  .popup-val  { font-size: 11px; font-family: 'SF Mono', monospace; color: var(--text-main); word-break: break-word; }
  .popup-val.accent { color: #A5F3FC; }
  .popup-div  { height: 1px; background: var(--line-2); margin: 8px 20px; }
  .popup-close-row { padding: 10px 16px; display: flex; justify-content: flex-end; flex-shrink: 0; }
  .popup-info-line { font-size: 12px; color: var(--text-main); padding: 4px 24px; font-family: 'SF Mono', monospace; line-height: 1.5; }
  .popup-cat-info { font-size: 14px; color: var(--text-main); padding: 8px 24px 0; line-height: 1.6; }
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 3px; }

  /* Quick-start coach-mark tour (quickstart.js) — mirrors app.css .qs-*.
     The card is PAPER — the one bright object on the dimmed screen. */
  .qs-overlay { position: fixed; inset: 0; z-index: 3000; }
  .qs-ring { position: absolute; border-radius: 10px; pointer-events: none; box-shadow: 0 0 0 9999px rgba(8,12,26,0.62), 0 0 0 2px var(--accent), 0 0 18px 2px rgba(139,92,246,0.5); transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease; }
  .qs-pop { position: absolute; max-width: 320px; background: #F4F5F9; color: #17181B; border: 1px solid rgba(255,255,255,.6); border-radius: 14px; padding: 15px 17px; box-shadow: 0 18px 50px -12px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.28); }
  .qs-step { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-hov); font-weight: 700; margin-bottom: 6px; }
  .qs-text { font-size: 14px; color: #17181B; line-height: 1.45; }
  .qs-text b { color: #08080C; }
  .qs-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
  .qs-skip { background: transparent; color: rgba(23,24,27,.62); border: 1px solid rgba(23,24,27,.28); border-radius: 8px; padding: 5px 12px; font-size: 13px; cursor: pointer; }
  .qs-skip:hover { color: #17181B; border-color: rgba(23,24,27,.5); }
  .qs-next { background: linear-gradient(150deg, var(--accent), #22D3EE); color: #08080C; border: none; border-radius: 9px; padding: 6px 15px; font-size: 13px; font-weight: 650; cursor: pointer; }
  .qs-next:hover { filter: brightness(1.08); }
  .se-qs-btn { background: var(--surface); color: var(--text-dim); border: 1px solid var(--line); border-radius: 8px; width: 30px; height: 30px; font-size: 15px; cursor: pointer; margin-left: 6px; }
  .se-qs-btn:hover { color: var(--accent); border-color: var(--accent); }
  /* ── No-frosting fallback ───────────────────────────────────────────────
     Same contract as app.css's block: on an engine with neither form of
     backdrop-filter the frosted films become opaque panels (the rgba above
     flattened onto the dark ground) instead of compositing against nothing.
     Skipped entirely by any engine with either form, so it changes nothing
     on a working browser. */
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    #topbar { background: #08080C; }
    .popup { background: #15151C; }
  }