:root {
  /* LIGHT is the default theme. Palette = "fresh" (overridden by [data-palette] below while we try options). */
  --bg: #f6f7ff;
  --surface: #ffffff;
  --surface-2: #eef0fb;
  --text: #1a1f36;
  --muted: #5a6180;
  --border: #e1e4f2;
  --accent: #4f46e5;
  --accent-soft: #e8e7ff;
  --accent-2: #db2777;
  --accent-3: #0d9488;
  --accent-4: #d97706;
  --glow-1: rgba(99, 102, 241, .18);
  --glow-2: rgba(236, 72, 153, .14);
  --glow-3: rgba(20, 184, 166, .14);
  --form: #15935a;
  --form-soft: #dcf5e7;
  --break: #d6336c;
  --break-soft: #fde6ee;
  --warn: #b7791f;
  --warn-soft: #fdf3dc;
  --mol-bg: #ffffff;
  --shadow: 0 1px 2px rgba(40, 40, 110, .06), 0 6px 20px rgba(60, 60, 140, .08);
  --radius: 14px;
  color-scheme: light;
}
/* light palettes to try (temporary picker, bottom-right) */
:root[data-palette="sunny"] {
  --bg: #fff8ef; --surface: #ffffff; --surface-2: #fff0dd; --text: #2b1d12; --muted: #7a6150; --border: #f3e2cc;
  --accent: #e8590c; --accent-soft: #ffe8d6; --accent-2: #0b7fc7; --accent-3: #2f9e44; --accent-4: #c2255c;
  --glow-1: rgba(255, 146, 43, .22); --glow-2: rgba(255, 212, 59, .22); --glow-3: rgba(77, 171, 247, .14);
  --shadow: 0 1px 2px rgba(120, 70, 20, .06), 0 6px 20px rgba(150, 90, 30, .09);
}
:root[data-palette="ocean"] {
  --bg: #f0f8ff; --surface: #ffffff; --surface-2: #e3f1fb; --text: #0f2233; --muted: #4f6578; --border: #d4e6f3;
  --accent: #0b6fb8; --accent-soft: #dcefff; --accent-2: #e8485f; --accent-3: #0c9488; --accent-4: #f08c00;
  --glow-1: rgba(34, 139, 230, .2); --glow-2: rgba(21, 170, 191, .16); --glow-3: rgba(255, 107, 107, .12);
  --shadow: 0 1px 2px rgba(10, 60, 110, .06), 0 6px 20px rgba(20, 80, 140, .09);
}
:root[data-palette="candy"] {
  --bg: #fcf5ff; --surface: #ffffff; --surface-2: #f5e9fd; --text: #24163a; --muted: #6a5a80; --border: #ecdcf7;
  --accent: #8b2fd6; --accent-soft: #f1e2ff; --accent-2: #e64980; --accent-3: #0ca678; --accent-4: #f59f00;
  --glow-1: rgba(190, 75, 219, .18); --glow-2: rgba(247, 103, 7, .12); --glow-3: rgba(32, 201, 151, .14);
  --shadow: 0 1px 2px rgba(80, 30, 120, .06), 0 6px 20px rgba(100, 40, 150, .09);
}
/* DARK = the original look. Chosen with the 🌙 toggle (stored per browser). */
:root[data-theme="dark"] {
  --bg: #0f1320;
  --surface: #171c2c;
  --surface-2: #1f2538;
  --text: #e6e9f2;
  --muted: #9aa3b8;
  --border: #2a3147;
  --accent: #7b93ff;
  --accent-soft: #232c4d;
  --accent-2: #f783ac;
  --accent-3: #4fd1c5;
  --accent-4: #f0b44c;
  --glow-1: transparent; --glow-2: transparent; --glow-3: transparent;
  --form: #4cc38a;
  --form-soft: #16362a;
  --break: #f06595;
  --break-soft: #3b1a28;
  --warn: #f0b44c;
  --warn-soft: #3a2e14;
  --mol-bg: #f4f6fb;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background:
    radial-gradient(900px 500px at 8% -10%, var(--glow-1), transparent 70%),
    radial-gradient(800px 480px at 95% 0%, var(--glow-2), transparent 70%),
    radial-gradient(900px 600px at 50% 110%, var(--glow-3), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; width: 100%; max-width: 1680px; margin: 0 auto; padding: 20px clamp(12px, 2vw, 28px) 64px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -.02em; }
h2 { font-size: 1.4rem; letter-spacing: -.01em; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
code, .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9em; }

/* top bar */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 20px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--text); font-size: 1.1rem; }
.brand:hover { text-decoration: none; }
.brand .logo { width: 34px; height: 34px; border-radius: 50%; display: block; object-fit: cover; }
.topbar nav { display: flex; gap: 4px; flex-wrap: wrap; }
.topbar nav a { color: var(--muted); padding: 6px 12px; border-radius: 999px; font-weight: 500; }
.topbar nav a:hover { text-decoration: none; background: var(--surface-2); color: var(--text); }
.topbar nav a.active { background: var(--accent-soft); color: var(--accent); }
.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 16px 20px; color: var(--muted); font-size: .85rem; border-top: 1px solid var(--border); }

/* building blocks */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
.grid { display: grid; gap: 16px; }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.section { margin-top: 36px; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; font-weight: 700; color: var(--accent); margin-bottom: 6px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  padding: 9px 16px; border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.small { padding: 5px 10px; font-size: .85rem; border-radius: 8px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.ghost { background: transparent; }

input[type=text], textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px;
}
input[type=text]:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
textarea { resize: vertical; min-height: 64px; }
label.field { display: block; margin-bottom: 12px; }
label.field > span { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 4px; }
.hint { font-size: .82rem; color: var(--muted); margin-top: 3px; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: .82rem; font-weight: 600; background: var(--surface-2); color: var(--muted); }
.chip.form { background: var(--form-soft); color: var(--form); }
.chip.break { background: var(--break-soft); color: var(--break); }
.chip.tag { background: var(--accent-soft); color: var(--accent); }

.badge { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.badge.dft { background: var(--form-soft); color: var(--form); }
.badge.xtb { background: var(--accent-soft); color: var(--accent); }
.badge.none { background: var(--warn-soft); color: var(--warn); }

.notice { border-radius: 10px; padding: 10px 14px; font-size: .9rem; margin: 8px 0; }
.notice.ok { background: var(--form-soft); color: var(--form); }
.notice.err { background: var(--break-soft); color: var(--break); }
.notice.warn { background: var(--warn-soft); color: var(--warn); }
.notice.info { background: var(--accent-soft); color: var(--accent); }

/* hero */
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: center; padding: 24px 0 8px; }
.hero p.lead { font-size: 1.15rem; color: var(--muted); max-width: 34em; }
.hero-visual { height: 320px; border-radius: var(--radius); overflow: hidden; background: var(--mol-bg); border: 1px solid var(--border); box-shadow: var(--shadow); position: relative; }
.hero-visual .cap { position: absolute; left: 12px; bottom: 10px; font-size: .8rem; color: #5b6478; background: rgba(255,255,255,.85); padding: 3px 9px; border-radius: 999px; }
@media (max-width: 800px) { .hero { grid-template-columns: 1fr; } .hero-visual { height: 260px; } }

.ladder { counter-reset: s; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.ladder .card { position: relative; padding-top: 44px; }
.ladder .card::before { counter-increment: s; content: counter(s); position: absolute; top: 14px; left: 20px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: .85rem; display: grid; place-items: center; }

/* molecules */
.mol { background: var(--mol-bg); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px; min-width: 120px; position: relative; }
.mol svg { max-width: 100%; height: auto; }
.equation .mol svg { width: 170px; height: auto; }
.mol.eqsvg svg { width: 100%; max-width: 540px; height: auto; }
.mol .name { font-size: .8rem; color: #5b6478; font-weight: 600; text-align: center; padding: 0 4px 4px; }
.mol .x { position: absolute; top: 4px; right: 6px; border: 0; background: transparent; color: #8a93a8; cursor: pointer; font-size: 1rem; }
.equation { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.equation .plus, .equation .arrow { font-size: 1.6rem; color: var(--muted); font-weight: 300; }
.equation.compact .mol { min-width: 0; padding: 2px; }
.equation.compact .mol svg { width: 96px; height: 66px; }

/* gallery */
.gcard { display: flex; flex-direction: column; gap: 10px; color: var(--text); transition: transform .12s ease, box-shadow .12s ease; }
.gcard:hover { text-decoration: none; transform: translateY(-2px); }
.gcard h3 { margin: 0; }
/* Gallery card animation: crop the video's caption line off the top. */
.gvideo { aspect-ratio: 16 / 8.4; overflow: hidden; border-radius: 10px; background: #0b0f1e; }
.gvideo video { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; display: block; }
.gvideo { position: relative; }
.g3d-hint { position: absolute; right: 8px; bottom: 8px; font-size: 12px; color: #c9d1f0; background: rgba(11,14,26,.7);
  padding: 3px 8px; border-radius: 999px; pointer-events: none; }
/* Big 3D model at the top of a reaction page */
.bigview { position: relative; margin: 8px 0 18px; border-radius: 14px; overflow: hidden; background: #0b0e1a; }
.bigview-3d { position: relative; height: min(62vh, 620px); cursor: grab; }
.bigview-3d:active { cursor: grabbing; }
.bigview-hint { position: absolute; left: 12px; top: 10px; font-size: 13px; color: #c9d1f0; background: rgba(11,14,26,.7);
  padding: 4px 10px; border-radius: 999px; pointer-events: none; }
.bigview-gear { position: absolute; right: 10px; top: 8px; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid #2a3360; background: rgba(18,23,51,.85); color: #c9d1f0; font-size: 20px; line-height: 1;
  cursor: pointer; display: grid; place-items: center; transition: transform .2s, background .2s; }
.bigview-gear:hover, .bigview-gear.on { background: #222b5c; transform: rotate(40deg); }
.bigview-knobs { position: absolute; right: 10px; top: 52px; width: 270px; padding: 12px 14px; border-radius: 12px;
  background: rgba(18,23,51,.95); border: 1px solid #2a3360; box-shadow: 0 8px 24px rgba(0,0,0,.35);
  display: flex; flex-direction: column; gap: 12px; }
.bigview-knobs[hidden] { display: none; }
.bigview-knobs label { display: flex; flex-direction: column; gap: 6px; color: #c9d1f0; font-size: 13px; }
.bigview-knobs label[hidden] { display: none; }
.bigview-ctrl { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #121733; }
.bigview-ctrl input[type=range] { flex: 1; }
.bigview-ctrl .muted { color: #9aa5cc; min-width: 3em; }
/* reaction page */
.steps { display: grid; gap: 20px; }
.step-head { display: flex; gap: 12px; align-items: baseline; }
.step-num { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; display: grid; place-items: center; }
.sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin: 12px 0; }
.sides .arrow { font-size: 2rem; color: var(--muted); }
@media (max-width: 700px) { .sides { grid-template-columns: 1fr; } .sides .arrow { transform: rotate(90deg); justify-self: center; } }
.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 12px; }
.check { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface-2); }
.check .t { font-weight: 700; font-size: .9rem; display: flex; align-items: center; gap: 6px; }
.check .v { font-size: .85rem; color: var(--muted); margin-top: 4px; }
.check .big { font-size: 1.3rem; font-weight: 700; color: var(--text); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); display: inline-block; }
.dot.pass { background: var(--form); } .dot.fail { background: var(--break); } .dot.run { background: var(--warn); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .3; } }

.viewer-wrap { margin-top: 12px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--mol-bg); }
.viewer3d { width: 100%; height: 360px; position: relative; }
.viewer-ctrl { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface); border-top: 1px solid var(--border); flex-wrap: wrap; }
.viewer-ctrl input[type=range] { flex: 1; min-width: 140px; accent-color: var(--accent); }
.viewer-ctrl .stage { font-size: .85rem; font-weight: 600; min-width: 130px; color: var(--muted); }

.energy svg { width: 100%; height: auto; display: block; }
.energy text { fill: var(--muted); font-size: 12px; }
.energy .lvl { stroke: var(--text); stroke-width: 3; }
.energy .curve { stroke: var(--accent); stroke-width: 2; fill: none; }
.energy .ts { fill: var(--break); }
.energy .axis { stroke: var(--border); }

video { width: 100%; border-radius: 12px; background: #000; }

/* builder */
.builder-step { border-left: 4px solid var(--accent); }
.side-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .side-inputs { grid-template-columns: 1fr; } }
.check-preview .sides { margin: 8px 0 0; }
.spin { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rot .7s linear infinite; vertical-align: -2px; }
@keyframes rot { to { transform: rotate(360deg); } }
.empty { text-align: center; padding: 40px 20px; color: var(--muted); }

/* AI assistant */
select { width: 100%; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; }
.ai-card { border-top: 4px solid var(--accent); }
.chat-log { display: flex; flex-direction: column; gap: 10px; max-height: 560px; overflow-y: auto; padding: 4px 2px 10px; }
.msg { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: .95rem; }
.msg.user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.msg.ai { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: 4px; }
.msg.err { background: var(--break-soft); color: var(--break); }
.msg.card-q { max-width: 100%; width: 100%; background: var(--surface); border: 2px solid var(--accent-soft); }
.msg .qtitle { font-weight: 700; font-size: 1.05rem; margin-bottom: 8px; }
.trace { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.trace .chip { font-size: .72rem; font-weight: 500; }
.chip.warnc { background: var(--warn-soft); color: var(--warn); }
.chip.cond { background: var(--surface-2); color: var(--text); font-weight: 500; }
.chat-input { align-items: stretch; flex-wrap: nowrap; }
.chat-input textarea { min-height: 48px; }
.settings { background: var(--surface-2); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.formula { font-weight: 500; color: #8a93a8; }

/* describe page */
.describe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: start; margin-top: 8px; }
@media (max-width: 900px) { .describe { grid-template-columns: 1fr; } }
.chat-pane { display: flex; flex-direction: column; gap: 8px; }
.chat-pane .chat-log { min-height: 320px; max-height: 62vh; }
.problem-pane { position: sticky; top: 76px; }
.ai-slim { padding: 14px 20px; border-left: 4px solid var(--accent); }
.scheme { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 18px 0 10px; }
.scheme .plus { font-size: 1.6rem; color: var(--muted); font-weight: 300; }
.scheme .mol svg { width: 150px; height: auto; }
.rxn-arrow { display: flex; flex-direction: column; align-items: center; min-width: 120px; flex: 0 1 170px; text-align: center; }
.rxn-arrow svg { width: 100%; height: 14px; stroke: var(--text); stroke-width: 2; fill: none; }
.rxn-arrow .above, .rxn-arrow .below { font-size: .82rem; color: var(--text); line-height: 1.3; }
.rxn-arrow .medium { display: inline-block; margin-top: 3px; font-size: .72rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.rxn-arrow .medium.acidic { background: var(--break-soft); color: var(--break); }
.rxn-arrow .medium.basic { background: var(--accent-soft); color: var(--accent); }
.empty-problem { text-align: center; color: var(--muted); padding: 30px 10px; }
.empty-problem svg { width: 220px; fill: none; stroke: var(--border); stroke-width: 3; }

.describe.stacked { grid-template-columns: 1fr; }
.describe.stacked .problem-pane { position: static; }
.describe.stacked .chat-pane .chat-log { min-height: 220px; max-height: 48vh; }
.mol.editable { padding-bottom: 4px; }
.tile-actions { display: flex; gap: 2px; opacity: .55; transition: opacity .15s; }
.mol.editable:hover .tile-actions, .mol.editable:focus-within .tile-actions { opacity: 1; }
.tile-actions .btn { color: #3b5bdb; padding: 2px 8px; font-size: .78rem; }
.add-tile { border: 2px dashed var(--border); background: transparent; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; min-height: 120px; min-width: 110px; }
.add-tile:hover { border-color: var(--accent); color: var(--accent); }
.tile-edit { display: flex; flex-direction: column; gap: 6px; padding: 8px; width: 230px; }
.tile-edit input { font-size: .9rem; color: #182033; background: #fff; }
.tile-edit .hint { color: #5b6478; }
.cond-edit { background: transparent; border: 1px dashed transparent; border-radius: 10px; padding: 6px; cursor: pointer; font: inherit; color: inherit; }
.cond-edit:hover { border-color: var(--accent); }
.cond-edit .hint { font-size: .7rem; color: var(--accent); margin-top: 2px; }
.title-edit { font-size: 1.3rem; font-weight: 700; border: 1px solid transparent !important; background: transparent !important; padding: 4px 6px !important; margin: 4px 0 0 -6px; }
.title-edit:hover, .title-edit:focus { border-color: var(--border) !important; background: var(--surface) !important; }

/* molecule editor modal */
.modal-back { position: fixed; inset: 0; background: rgba(10, 15, 30, .45); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal { width: min(640px, 100%); max-height: 92vh; overflow: auto; }
.jsme-host { background: #fff; border: 1px solid var(--border); border-radius: 10px; min-height: 340px; display: grid; place-items: center; overflow: hidden; }
.jsme-host > div { place-self: stretch; }

.modal.wide { width: min(960px, 100%); }
.jsme-host.big { min-height: 430px; }

.tabs { display: flex; gap: 4px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.tab { border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--muted); padding: 8px 14px; cursor: pointer; border-bottom: 3px solid transparent; }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
canvas.sketch { width: 100%; aspect-ratio: 1120 / 680; background: #fff; border: 1px solid var(--border); border-radius: 10px; touch-action: none; cursor: crosshair; display: block; }

canvas.sketch.big { aspect-ratio: 1600 / 760; }

.mini-chat { display: flex; flex-direction: column; gap: 6px; max-height: 150px; overflow-y: auto; margin-top: 10px; }
.mini-chat .msg { font-size: .88rem; padding: 7px 11px; max-width: 92%; }

/* center the reaction everywhere it's drawn */
.equation { justify-content: center; }
.problem-pane .title-edit { text-align: center; width: 100%; margin-left: 0; }

/* The drawing tool (JSME) builds its own popups on <body>; keep the site's input styles off them
   (a full-width input stretched its "nonstandard atom" box off the screen). */
.gwt-PopupPanel input, .gwt-DialogBox input, .jsme-host input,
.gwt-PopupPanel textarea, .gwt-DialogBox textarea {
  width: auto !important; min-width: 0 !important; max-width: 260px !important;
  background: #fff !important; color: #111 !important; border: 1px solid #999 !important;
  border-radius: 3px !important; padding: 3px 6px !important; font-size: 14px !important; outline: none !important;
}
.gwt-PopupPanel, .gwt-DialogBox { max-width: 92vw !important; z-index: 100 !important; color: #111; }
.gwt-PopupPanel *, .gwt-DialogBox * { box-sizing: content-box; }
input.gwt-TextBox, textarea.gwt-TextArea {
  width: 200px !important; max-width: 200px !important; background: #fff !important; color: #111 !important;
  border: 1px solid #999 !important; border-radius: 3px !important; padding: 3px 6px !important; font-size: 14px !important;
}
.popupContent, .popupContent * { color: #111; }
.mosaic-popupLayoutPanel, .mosaic-popupLayoutPanel .mosaic-CaptionLayoutPanel, .mosaic-popupLayoutPanel .mosaic-LayoutPanel,
.mosaic-popupLayoutPanel table, .mosaic-popupLayoutPanel table > tbody > tr > td > div { width: 320px !important; max-width: 320px !important; }
.mosaic-popupLayoutPanel .mosaic-LayoutPanel { position: relative !important; }

/* Drawing tool: a normal pointer on its buttons and a crosshair on the canvas, never the text I-beam */
.jsme-host, .jsme-host * { cursor: default !important; user-select: none; -moz-user-select: none; }
.jsme-host canvas, .jsme-host svg, .jsme-host [class*="anvas"] { cursor: crosshair !important; }

.atom-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.atom-bar .lbl { font-size: .85rem; font-weight: 600; color: var(--muted); }
.atom-bar .atom-btn { min-width: 38px; justify-content: center; font-weight: 700; }
.atom-bar .atom-btn.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.atom-bar input[data-sym] { width: 80px !important; padding: 5px 8px; }
.atom-mode { background: var(--accent-soft); color: var(--text); border-radius: 10px; padding: 8px 12px; font-size: .88rem; margin-bottom: 8px; }
.atom-mode .btn { margin-left: 6px; }

.draw-note { min-height: 4.2em; font-size: .85rem; color: var(--muted); margin-top: 6px; padding: 6px 10px; border-radius: 10px; }
.draw-note.active { background: var(--accent-soft); color: var(--text); }
.draw-note .btn { margin-left: 6px; padding: 2px 10px; }

/* Ketcher editor */
.modal.ketcher-modal { width: min(1100px, 100%); }
.editor-switch { gap: 4px; margin: 4px 0 8px; }
.editor-switch .btn.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.ketcher-wrap { position: relative; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; }
.ketcher-frame { width: 100%; height: min(560px, 62vh); border: 0; display: block; }
.ketcher-loading { position: absolute; inset: 0; display: grid; place-items: center; background: #fff; color: #5b6478; }

/* problem tiles: give drawings room (Ketcher pictures carry their own size) */
.scheme .mol .mol-svg svg { width: 180px; height: auto; max-height: 150px; }

/* assistant as a slide-out drawer; the problem is the main focus */
.chat-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); z-index: 30; background: var(--surface);
  border-left: 1px solid var(--border); box-shadow: -8px 0 30px rgba(10, 15, 30, .18); display: flex; flex-direction: column;
  transform: translateX(105%); transition: transform .22s ease; }
body.drawer-open .chat-drawer { transform: none; }
.drawer-head { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.chat-drawer #aiSettings { padding: 0 14px; }
.chat-drawer .chat-log { flex: 1; min-height: 0; max-height: none; padding: 12px 14px; }
.chat-input-wrap { border-top: 1px solid var(--border); padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.chat-fab { position: fixed; right: 22px; bottom: 22px; z-index: 25; border: 0; border-radius: 999px; padding: 12px 18px;
  background: var(--accent); color: #fff; font: inherit; font-weight: 700; box-shadow: var(--shadow); cursor: pointer; }
.chat-fab:hover { filter: brightness(1.08); }
body.drawer-open .chat-fab { opacity: 0; pointer-events: none; }
.fab-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--break); margin-left: 8px; vertical-align: 1px; }
.fab-dot[hidden] { display: none; }
/* leave room for the drawer on wide screens so the problem stays visible beside it */
@media (min-width: 1100px) { body.drawer-open main { padding-right: 460px; } }
.chat-drawer { top: 62px; }

.cterm.known { text-decoration: underline dotted var(--accent); text-underline-offset: 3px; cursor: help; }
.rxn-arrow sub, .rxn-arrow sup { font-size: .72em; }

/* each side of the reaction: molecules in a row, a small "+ add" button underneath */
.side-group { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.side-mols { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.side-empty { min-width: 160px; min-height: 110px; display: grid; place-items: center; border: 2px dashed var(--border);
  border-radius: 10px; color: var(--muted); font-size: .85rem; padding: 0 12px; }
.add-small { font-size: .8rem; padding: 3px 10px; border-style: dashed; color: var(--accent); }

.step2 { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border); }
.mol.small-mol { position: relative; }
.mol.small-mol .mol-svg svg { width: 120px !important; max-height: 100px; }
.mol .count { position: absolute; left: 6px; top: 4px; font-weight: 800; font-size: 1.2rem; color: #182033; }
.explain { background: var(--surface-2); border-radius: 10px; padding: 10px 14px; margin-top: 10px; font-size: .92rem; }

/* Step 3: mechanism */
.mech-pane .steps { display: grid; gap: 14px; }
.step-card { padding: 16px; box-shadow: none; background: var(--surface-2); }
.step-card .sides .mol svg { width: 300px; max-width: 100%; height: auto; }
.empty-steps { text-align: center; padding: 18px; border: 2px dashed var(--border); border-radius: 12px; }
.step-side { justify-content: flex-start; min-height: 120px; padding: 8px; border: 1px dashed var(--border); border-radius: 10px; margin-top: 6px; }
.problem-pane { position: static !important; }
.step-side .mol .mol-svg svg { width: 140px !important; height: auto; max-height: 110px; }

.step-card .sides .mol.arrows-pic svg { width: 460px; }

.mech-canvas .ketcher-frame { height: min(620px, 70vh); }
.canvas-bar { margin-bottom: 8px; }
details.step-list { margin-top: 14px; }
details.step-list > summary { cursor: pointer; font-weight: 600; color: var(--accent); margin-bottom: 10px; }

.step-nav { gap: 6px; margin-bottom: 8px; }
.step-nav b { min-width: 110px; text-align: center; }
.step-title { margin-bottom: 8px; font-weight: 600; }
.mech-canvas .ketcher-frame { height: min(520px, 62vh); }

.step-card .step-head { align-items: center; }
.step-card .step-title { flex: 1; margin: 0; }
.step-pic { background: #fff; border-radius: 10px; margin-top: 10px; padding: 8px; display: flex; justify-content: center; min-height: 120px; align-items: center; }
.step-pic svg { max-width: 100%; height: auto; max-height: 340px; }

/* breathing room around each mechanism step */
.mech-pane .steps { gap: 28px; margin: 8px 0; }
.mech-pane .step-card { padding: 22px 20px; }
.mech-pane .step-pic { margin: 16px 0 12px; padding: 22px 12px; }

.cite { margin-top: 8px; font-size: .85rem; color: var(--muted); }
.sources { margin-top: 14px; padding: 14px 18px; box-shadow: none; background: var(--surface-2); }
.sources ol { margin: 4px 0 0; padding-left: 20px; font-size: .9rem; }

/* Reaction page: the problem statement card */
.problem-card .scheme { margin-top: 6px; }
.cond-why { text-align: center; margin: 4px 0 0; font-size: .9rem; color: var(--muted); }

/* Frontier-orbital (MO) diagram */
.mo-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 860px) { .mo-grid { grid-template-columns: 1fr; } }
.mo-svg { width: 100%; height: auto; display: block; }
.mo-axis { stroke: var(--muted); stroke-width: 1.5; }
.mo-axhead { fill: var(--muted); }
.mo-axlabel { fill: var(--muted); font-size: 13px; text-anchor: middle; }
.mo-level line { stroke: var(--text); stroke-width: 3; stroke-linecap: round; }
.mo-level.virt line { stroke-dasharray: 0; opacity: .75; }
.mo-level .e { stroke: var(--text); stroke-width: 1.6; fill: none; }
.mo-level .mo-hit { fill: transparent; }
.mo-level { cursor: pointer; outline: none; }
.mo-level:hover .mo-hit, .mo-level:focus .mo-hit { fill: var(--surface-2); }
.mo-level .e path { stroke: var(--text); stroke-width: 1.6; fill: none; }
.mo-level.donor line { stroke: #e8590c; stroke-width: 4.5; opacity: 1; }
.mo-level.acceptor line { stroke: #1c7ed6; stroke-width: 4.5; opacity: 1; }
.mo-level.sel .mo-hit { fill: var(--accent-soft); }
.mo-tag { fill: var(--muted); font-size: 12px; font-weight: 700; }
.mo-name { fill: var(--text); font-size: 14px; font-weight: 700; }
.mo-role { fill: var(--muted); font-size: 12px; }
.mo-flow { stroke: #7048e8; stroke-width: 2; fill: none; stroke-dasharray: 6 5; }
.mo-flowhead { fill: #7048e8; }
.mo-flowlabel { fill: #7048e8; font-size: 13px; font-weight: 700; }
.mo-gap { fill: var(--muted); font-size: 12px; }
.mo-quick { margin-top: 6px; gap: 8px; flex-wrap: wrap; }
.mo-3dwrap { border-radius: 12px; overflow: hidden; background: #0b0e1a; }
.mo-3d { position: relative; height: 360px; cursor: grab; }
.mo-caption { padding: 10px 12px; background: #121733; color: #e4e8f7; font-size: 13px; }
.mo-caption .muted { color: #9aa5cc; }
.mo-keytag { font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.mo-keytag.donor { background: #e8590c; color: #fff; }
.mo-keytag.acceptor { background: #1c7ed6; color: #fff; }

/* Orbital-interaction (Clayden-style) diagram */
.mo-card { margin-bottom: 16px; }
.mo-card h3 { margin: 0 0 8px; }
.ix-svg { width: 100%; height: auto; display: block; }
.ix-axis { stroke: var(--muted); stroke-width: 1.5; }
.ix-axhead { fill: var(--muted); }
.ix-axlabel { fill: var(--muted); font-size: 13px; text-anchor: middle; }
.ix-corr { stroke: var(--muted); stroke-width: 1.3; stroke-dasharray: 4 4; fill: none; opacity: .7; }
.ix-level line { stroke: var(--text); stroke-width: 3.5; stroke-linecap: round; }
.ix-level .ix-hit { fill: transparent; }
.ix-level[data-mol] { cursor: pointer; outline: none; }
.ix-level[data-mol]:hover .ix-hit, .ix-level[data-mol]:focus .ix-hit { fill: var(--surface-2); }
.ix-level.sel .ix-hit { fill: var(--accent-soft); }
.ix-level.donor line { stroke: #e8590c; stroke-width: 5; }
.ix-level.acceptor line { stroke: #1c7ed6; stroke-width: 5; }
.ix-level.bond line { stroke: #2f9e44; stroke-width: 5; }
.ix-level.anti line { stroke: var(--muted); stroke-dasharray: 6 4; }
.ix-svg .e path { stroke: var(--text); stroke-width: 1.7; fill: none; }
.ix-svg .e.faded path { opacity: .3; }
.ix-svg .e.bond path { stroke: #2f9e44; stroke-width: 2; }
.ix-big { fill: var(--text); font-size: 14px; font-weight: 700; }
.ix-big.donor { fill: #e8590c; } .ix-big.acceptor { fill: #1c7ed6; } .ix-big.bond { fill: #2f9e44; }
.ix-small { fill: var(--muted); font-size: 11.5px; }
.ix-guide { stroke: #2f9e44; stroke-width: 1.2; stroke-dasharray: 2 3; }
.ix-rel { stroke: #2f9e44; stroke-width: 2.2; }
.ix-relhead { fill: #2f9e44; }
.ix-reltext { fill: #2f9e44; font-size: 12.5px; font-weight: 700; }
.mo-all { margin-top: 6px; }
.mo-all summary { cursor: pointer; color: var(--accent); font-size: .92rem; }
.mo-all .mo-svg { max-width: 580px; }
.ix-col { fill: var(--text); font-size: 13px; font-weight: 600; }
.mo-skip { fill: var(--muted); font-size: 12px; font-style: italic; }
.mo-block { margin: 16px 0 4px; padding-top: 14px; border-top: 1px solid var(--border, #e3e6ef); }
.mo-block h4 { margin: 0 0 6px; font-size: 1.02rem; }
.bigview-knobs .knob-check { flex-direction: row; align-items: center; gap: 8px; cursor: pointer; }
.bigview-knobs .knob-check[hidden] { display: none; }
.bigview-legend { position: absolute; left: 12px; bottom: 62px; font-size: 13px; color: #c9d1f0; background: rgba(11,14,26,.75);
  padding: 4px 10px; border-radius: 999px; pointer-events: none; }
.bigview-legend[hidden], .bigview-note[hidden] { display: none; }
.bigview-legend .lg-e { color: #ffd43b; letter-spacing: -2px; margin-right: 4px; }
.bigview-legend .lg-a { color: #ff4d8d; margin: 0 4px 0 10px; font-weight: 700; }
.bigview-note { position: absolute; left: 12px; top: 44px; max-width: 60%; font-size: 12.5px; color: #c9d1f0;
  background: rgba(11,14,26,.8); padding: 6px 10px; border-radius: 8px; pointer-events: none; }
.bigview-3d .bv-layer { position: absolute; inset: 0; }
.bigview-3d .bv-solvent { pointer-events: none; mix-blend-mode: lighten; }
/* full-screen button sits left of the gear; full-screen layout fills the screen */
.bigview-fs { right: 54px; font-size: 18px; }
.bigview:fullscreen { display: flex; flex-direction: column; margin: 0; border-radius: 0; width: 100vw; height: 100vh; }
.bigview:fullscreen .bigview-3d { flex: 1; height: auto; }
.bigview-rec { color: #e03131; display: none; }
.bigview:fullscreen .bigview-rec { display: inline-flex; }   /* Record = full-screen only */
.bigview-rec.on { background: #e03131; color: #fff; border-color: #e03131; }
/* camera director (full screen only) */
.bigview-cam { display: none; align-items: center; gap: 6px; margin-left: 6px; }
.bigview:fullscreen .bigview-cam { display: inline-flex; }
.bigview-cam .cam-rec { color: #e03131; }
.bigview-cam .cam-rec.on { background: #e03131; color: #fff; border-color: #e03131; }
.bigview-cam .cam-render { font-weight: 700; }
.bigview-cam .cam-status { color: #9aa5cc; font-size: 12.5px; margin-left: 6px; white-space: nowrap; }
.bigview-hint[data-pad="1"]::after { content: " · 🎮 controller active"; color: #8ce99a; }
.bigview-knobs .knob-ends { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #9aa5cc; }
.bigview-knobs .knob-ends input { flex: 1; }
.bigview-cam .cam-zoom { display: inline-flex; align-items: center; gap: 4px; color: #9aa5cc; font-size: 11.5px; }
.bigview-cam .cam-zoom input { width: 90px; }
.bigview-cam .cam-variants { max-width: 210px; font-size: 12px; padding: 3px 6px; border-radius: 8px; background: #1a2045; color: #e4e8f7; border: 1px solid #2a3360; }
/* phones: the camera bar (🎞 variant menu) shows without full screen too — old phones can't go full screen */
@media (max-width: 900px), (pointer: coarse) { .bigview-cam { display: inline-flex; flex-wrap: wrap; } }
.bigview-ctrl .cam-show.on { background: #2f4ab8; color: #fff; border-color: #2f4ab8; }

/* YouTube-hosted videos: thumbnail + play badge until pressed (no player code on the gallery) */
.gvideo img.ytthumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.ytplay { position: absolute; left: 50%; top: 50%; width: 64px; height: 44px; transform: translate(-50%, -50%);
  border-radius: 12px; background: rgba(0, 0, 0, .65); pointer-events: none; transition: background .15s; }
.ytplay::after { content: ""; position: absolute; left: 26px; top: 12px; border-style: solid;
  border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.gcard:hover .ytplay, .ytlite:hover .ytplay { background: #e62117; }
.ytlite { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0;
  border-radius: 10px; overflow: hidden; background: #000; cursor: pointer; }
.ytlite img { width: 100%; height: 100%; object-fit: cover; display: block; }
iframe.ytlite { cursor: auto; }
.ytlite.short { aspect-ratio: 9 / 16; max-height: 70vh; width: auto; margin: 0 auto; }

/* colour accents: each tag / ladder rung gets its own hue */
.chip.tag:nth-of-type(4n+2) { background: color-mix(in srgb, var(--accent-2) 13%, var(--surface)); color: var(--accent-2); }
.chip.tag:nth-of-type(4n+3) { background: color-mix(in srgb, var(--accent-3) 13%, var(--surface)); color: var(--accent-3); }
.chip.tag:nth-of-type(4n+4) { background: color-mix(in srgb, var(--accent-4) 14%, var(--surface)); color: var(--accent-4); }
.ladder .card:nth-child(2)::before { background: var(--accent-2); }
.ladder .card:nth-child(3)::before { background: var(--accent-3); }
.ladder .card:nth-child(4)::before { background: var(--accent-4); }
.ladder .card { border-top: 3px solid var(--accent); }
.ladder .card:nth-child(2) { border-top-color: var(--accent-2); }
.ladder .card:nth-child(3) { border-top-color: var(--accent-3); }
.ladder .card:nth-child(4) { border-top-color: var(--accent-4); }
.hero h1 { background: linear-gradient(100deg, var(--text) 30%, var(--accent) 70%, var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="dark"] .hero h1 { background: none; color: var(--text); }
.gcard:hover { box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 12px 32px color-mix(in srgb, var(--accent) 22%, transparent); }

/* theme toggle + temporary palette picker */
.theme-toggle { border: 1px solid var(--border); background: var(--surface); color: var(--text); width: 36px; height: 36px;
  border-radius: 50%; cursor: pointer; font-size: 17px; display: grid; place-items: center; margin-left: 6px; }
.theme-toggle:hover { background: var(--surface-2); }
.palette-pick { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: flex; gap: 6px; align-items: center;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: 999px; padding: 6px 10px; font-size: .8rem; color: var(--muted); }
.palette-pick button { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--surface); outline: 1px solid var(--border); cursor: pointer; padding: 0; }
.palette-pick button.on { outline: 2px solid var(--text); }
:root[data-theme="dark"] .palette-pick { display: none; }

/* "lab" palette: brand colours from the channel avatar (hydrogen steel-blue, oxygen red, chlorine
   green), a blue-grey page so white cards stand out, and a navy header + hero band that tie in
   with the dark 3D viewers. */
:root[data-palette="lab"]:not([data-theme="dark"]) {
  --bg: #ccd7e5; --surface: #f7f9fc; --surface-2: #e6ecf4; --text: #142233; --muted: #43546a; --border: #b9c7d9;
  --accent: #1d6fb8; --accent-soft: #d6e6f6; --accent-2: #d9363e; --accent-3: #2b8a3e; --accent-4: #e67700;
  --glow-1: rgba(29, 111, 184, .22); --glow-2: rgba(217, 54, 62, .16); --glow-3: rgba(29, 111, 184, .16);
  --shadow: 0 1px 2px rgba(20, 40, 70, .08), 0 8px 24px rgba(20, 40, 70, .10);
}
:root[data-palette^="lab"] {
  --top-bg: #13233a;
  --hero-bg: radial-gradient(600px 300px at 85% 20%, rgba(217,54,62,.28), transparent 70%),
             linear-gradient(120deg, #13233a 0%, #1b3f6b 55%, #1d6fb8 100%);
}
:root[data-palette^="lab"]:not([data-theme="dark"]) .topbar { background: var(--top-bg); border-bottom-color: rgba(0,0,0,.25); }
:root[data-palette^="lab"]:not([data-theme="dark"]) .brand { color: #fff; }
:root[data-palette^="lab"]:not([data-theme="dark"]) .topbar nav a { color: #b9c8dc; }
:root[data-palette^="lab"]:not([data-theme="dark"]) .topbar nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
:root[data-palette^="lab"]:not([data-theme="dark"]) .topbar nav a.active { background: rgba(255,255,255,.14); color: #fff; }
:root[data-palette^="lab"]:not([data-theme="dark"]) .theme-toggle { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
:root[data-palette^="lab"]:not([data-theme="dark"]) .hero {
  background: var(--hero-bg);
  color: #fff; border-radius: 20px; padding: 36px 36px 36px 40px; box-shadow: var(--shadow); }
:root[data-palette^="lab"]:not([data-theme="dark"]) .hero h1 { background: none; color: #fff; }
:root[data-palette^="lab"]:not([data-theme="dark"]) .hero .eyebrow { color: #8cc4f5; }
:root[data-palette^="lab"]:not([data-theme="dark"]) .hero p.lead { color: #c9d7e8; }
:root[data-palette^="lab"]:not([data-theme="dark"]) .hero .btn:not(.primary) { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.25); }
:root[data-palette^="lab"]:not([data-theme="dark"]) .hero .btn.primary { background: #fff; color: var(--top-bg); border-color: #fff; }
:root[data-palette^="lab"]:not([data-theme="dark"]) .hero-visual { border-color: rgba(255,255,255,.2); }

/* lab variants — same layout, different page colour / accents */
:root[data-palette="lab-rose"]:not([data-theme="dark"]) {          /* light reddish page */
  --bg: #ebd5d8; --surface: #fcf8f8; --surface-2: #f4e8ea; --text: #241820; --muted: #5e4a54; --border: #dcc0c6;
  --accent: #1d6fb8; --accent-soft: #dfe9f5; --accent-2: #d9363e; --accent-3: #2b8a3e; --accent-4: #e67700;
  --glow-1: rgba(217, 54, 62, .16); --glow-2: rgba(29, 111, 184, .14); --glow-3: rgba(217, 54, 62, .12);
  --shadow: 0 1px 2px rgba(70, 20, 30, .08), 0 8px 24px rgba(70, 20, 30, .10);
}
:root[data-palette="lab-split"]:not([data-theme="dark"]) {         /* blue on the left fading to red on the right */
  --bg: #dcdbe6; --surface: #f9f9fc; --surface-2: #eceaf2; --text: #1a1d30; --muted: #4f5168; --border: #c8c7d8;
  --accent: #1d6fb8; --accent-soft: #dce8f6; --accent-2: #d9363e; --accent-3: #2b8a3e; --accent-4: #e67700;
  --glow-1: rgba(29, 111, 184, .30); --glow-2: rgba(217, 54, 62, .26); --glow-3: rgba(140, 80, 160, .12);
}
:root[data-palette="lab-crimson"]:not([data-theme="dark"]) {       /* red-led: crimson header + red→navy banner */
  --bg: #e8d9dc; --surface: #fcf9f9; --surface-2: #f3e9eb; --text: #23161b; --muted: #5c4850; --border: #d9c3c9;
  --accent: #b42332; --accent-soft: #f6dde0; --accent-2: #1d6fb8; --accent-3: #2b8a3e; --accent-4: #e67700;
  --glow-1: rgba(180, 35, 50, .14); --glow-2: rgba(29, 111, 184, .12); --glow-3: rgba(180, 35, 50, .10);
  --top-bg: #4a1019;
  --hero-bg: radial-gradient(600px 300px at 85% 20%, rgba(29,111,184,.35), transparent 70%),
             linear-gradient(120deg, #4a1019 0%, #7a1a28 50%, #13233a 100%);
}
:root[data-palette="lab-slate"]:not([data-theme="dark"]) {         /* darker, medium slate-blue page */
  --bg: #aebccf; --surface: #f4f6fa; --surface-2: #e2e8f0; --text: #111d2c; --muted: #3a4a5e; --border: #9fb0c6;
  --accent: #175d9c; --accent-soft: #d3e2f2; --accent-2: #c92a35; --accent-3: #237a35; --accent-4: #d46a00;
  --glow-1: rgba(29, 111, 184, .25); --glow-2: rgba(217, 54, 62, .18); --glow-3: rgba(19, 35, 58, .15);
}
:root[data-palette="lab-sand"]:not([data-theme="dark"]) {          /* warm white page, blue + red accents */
  --bg: #e6ddd0; --surface: #fdfbf7; --surface-2: #f3ede4; --text: #221c16; --muted: #5d5246; --border: #d6cab9;
  --accent: #1d6fb8; --accent-soft: #e0eaf4; --accent-2: #d9363e; --accent-3: #2b8a3e; --accent-4: #e67700;
  --glow-1: rgba(29, 111, 184, .14); --glow-2: rgba(217, 54, 62, .14); --glow-3: rgba(230, 119, 0, .10);
}
:root[data-palette="lab-split"]:not([data-theme="dark"]) body {
  background: linear-gradient(115deg, #c9d8ea 0%, #e4e2ea 50%, #ecd1d5 100%) fixed; }

/* lab-rose2: rose page, shading flipped — red pools in the TOP-LEFT corner, fading to blue bottom-right */
:root[data-palette="lab-rose2"]:not([data-theme="dark"]) {
  --bg: #e6d6dc; --surface: #fcf8f9; --surface-2: #f2e8ec; --text: #22182a; --muted: #594a5c; --border: #d8c3cc;
  --accent: #1d6fb8; --accent-soft: #dfe9f5; --accent-2: #d9363e; --accent-3: #2b8a3e; --accent-4: #e67700;
  --shadow: 0 1px 2px rgba(70, 20, 30, .08), 0 8px 24px rgba(70, 20, 30, .10);
}
:root[data-palette="lab-rose2"]:not([data-theme="dark"]) body {
  background:
    radial-gradient(1100px 700px at 0% 0%, rgba(217, 54, 62, .30), transparent 70%),
    radial-gradient(1100px 800px at 100% 100%, rgba(29, 111, 184, .26), transparent 70%),
    #e6d6dc;
  background-attachment: fixed; }
/* lab: page shading mirrored left↔right (red glow top-left, blue top-right) */
:root[data-palette="lab"]:not([data-theme="dark"]) body {
  background:
    radial-gradient(900px 500px at 92% -10%, var(--glow-1), transparent 70%),
    radial-gradient(800px 480px at 5% 0%, var(--glow-2), transparent 70%),
    radial-gradient(900px 600px at 50% 110%, var(--glow-3), transparent 70%),
    var(--bg);
  background-attachment: fixed; }

/* box (card) styles to try — only the ladder + gallery cards, light mode only */
:root:not([data-theme="dark"])[data-cards] :is(.ladder .card, .gcard) { transition: background .3s, border-color .3s; }
:root[data-cards="frost"]:not([data-theme="dark"]) :is(.ladder .card, .gcard) {        /* frosted glass: background shows through */
  background: rgba(255, 255, 255, .45); backdrop-filter: blur(14px); border-color: rgba(255, 255, 255, .6); }
:root[data-cards="blue"]:not([data-theme="dark"]) :is(.ladder .card, .gcard) {         /* pale steel blue */
  background: #e8eff8; border-color: #cbd9ea; }
:root[data-cards="rose"]:not([data-theme="dark"]) :is(.ladder .card, .gcard) {         /* pale rose */
  background: #f5eaee; border-color: #e3ccd4; }
:root[data-cards="blend"]:not([data-theme="dark"]) :is(.ladder .card, .gcard) {        /* rose → blue, same direction as the page */
  background: linear-gradient(135deg, #f6eaee 0%, #eef0f6 50%, #e5eef8 100%); border-color: #d6d3e0; }
:root[data-cards="tint"]:not([data-theme="dark"]) .ladder .card {                       /* each box tinted by its own colour */
  background: color-mix(in srgb, var(--accent) 9%, #fbfcfe); }
:root[data-cards="tint"]:not([data-theme="dark"]) .ladder .card:nth-child(2) { background: color-mix(in srgb, var(--accent-2) 9%, #fbfcfe); }
:root[data-cards="tint"]:not([data-theme="dark"]) .ladder .card:nth-child(3) { background: color-mix(in srgb, var(--accent-3) 9%, #fbfcfe); }
:root[data-cards="tint"]:not([data-theme="dark"]) .ladder .card:nth-child(4) { background: color-mix(in srgb, var(--accent-4) 10%, #fbfcfe); }
:root[data-cards="tint"]:not([data-theme="dark"]) .gcard { background: color-mix(in srgb, var(--accent) 8%, #fbfcfe); }
:root[data-cards="tint"]:not([data-theme="dark"]) .gcard:nth-child(even) { background: color-mix(in srgb, var(--accent-2) 8%, #fbfcfe); }
:root[data-cards="navy"]:not([data-theme="dark"]) :is(.ladder .card, .gcard) {         /* navy like the header, white text */
  background: linear-gradient(160deg, #1a2d47, #13233a); border-color: #0f1d30; color: #fff; }
:root[data-cards="navy"]:not([data-theme="dark"]) :is(.ladder .card, .gcard) :is(h3, .gcard h3) { color: #fff; }
:root[data-cards="navy"]:not([data-theme="dark"]) :is(.ladder .card, .gcard) .muted { color: #a9bad0; }
:root[data-cards="navy"]:not([data-theme="dark"]) .gcard .chip.tag { background: rgba(255,255,255,.1); }
:root[data-cards="navy"]:not([data-theme="dark"]) .gcard .badge.dft { background: rgba(76,195,138,.18); color: #7be0a8; }
:root[data-cards="navy"]:not([data-theme="dark"]) .gcard .chip.tag:nth-of-type(n) { color: #cfe0f5; }
.palette-pick .rowlabel { margin-left: 4px; }

/* work in progress: hidden from the public, shown in dev mode (?dev=1) */
:root:not([data-dev]) .wip { display: none !important; }
.dev-badge { display: none; }
:root[data-dev] .dev-badge { display: inline-flex; font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: #e67700; color: #fff; margin-left: 4px; }

/* orbital movie inside "Why it happens" */
.mo-title { padding: 10px 14px; background: #121733; color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .01em; border-bottom: 1px solid #2a3360; }
.mo-mctrl { display: flex; gap: 10px; align-items: center; padding: 6px 12px; background: #121733; }
.mo-mctrl input[type=range] { flex: 1; }
.mo-mctrl .btn { background: #1a2045; color: #e4e8f7; border-color: #2a3360; min-width: 34px; justify-content: center; }
.mo-mkey { display: flex; gap: 8px; align-items: flex-start; margin: 3px 0; cursor: pointer; }
.mo-sw { flex: none; width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; }
.mo-sw.attack { background: #ff9f1c; } .mo-sw.leaving { background: #3bb2ff; } .mo-sw.pi { background: #c77dff; }
.mo-sw.repi { background: #ff5fa2; } .mo-sw.grab { background: #38d996; } .mo-sw.oh { background: #ffd43b; }
.step-player { margin-top: 14px; min-height: 120px; }

/* gallery search */
.gsearch { width: 100%; max-width: 480px; margin: 16px 0 4px; padding: 10px 14px; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.gsearch:focus { outline: 2px solid var(--accent, #3b82f6); outline-offset: 1px; }
a.gcard[hidden] { display: none; }

/* measured (real-world) values */
.energy .measured { stroke: var(--accent-2); stroke-width: 2; stroke-dasharray: 7 5; }
.energy .measured-t { fill: var(--accent-2); font-weight: 700; }
.measured-card .measured-big { font-size: 1.25rem; margin-bottom: 6px; }
.measured-card .v { margin-top: 4px; }
.ix-pushed .ix-pline { stroke: var(--muted); stroke-width: 3; opacity: .55; }
.ix-pushed .ix-pline.end { opacity: .9; }
.ix-pushed .ix-pmove { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 3; }

/* Public view: the orbital movie alone, full width (the interaction diagram is dev-only) */
:root:not([data-dev]) .mo-grid.has-movie { grid-template-columns: 1fr; }
:root:not([data-dev]) .mo-grid.has-movie .mo-3d { height: 460px; }
@media (max-width: 860px) { :root:not([data-dev]) .mo-grid.has-movie .mo-3d { height: 340px; } }

/* orbital movie: full screen */
.mo-3dwrap:fullscreen { display: flex; flex-direction: column; width: 100vw; height: 100vh; border-radius: 0; }
.mo-3dwrap:fullscreen .mo-3dstage { flex: 1; display: flex; flex-direction: column; }
.mo-3dwrap:fullscreen .mo-3d { flex: 1; height: auto !important; }
.mo-3dstage { position: relative; }
.mo-fs { right: 10px; z-index: 5; }   /* same button and spot as the main 3D viewer's */

/* atom colour key under the 3D views */
.atom-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 2px 2px; font-size: 13px; color: var(--muted); }
.atom-key { display: inline-flex; align-items: center; gap: 5px; }
.atom-key b { color: var(--text); }
.atom-dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); box-shadow: inset -2px -2px 3px rgba(0,0,0,.25); }
.mo-caption .atom-legend { margin: 0 0 6px; color: #9aa5cc; }
.mo-caption .atom-key b { color: #e4e8f7; }

/* links from Step 4 to each step's orbital panel */
.orb-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.orb-link { padding: 5px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-weight: 600; }
.orb-link:hover { text-decoration: none; border-color: var(--accent); }
.mo-block.flash .mo-3dwrap { box-shadow: 0 0 0 3px var(--accent); transition: box-shadow .3s; }

/* video mode (website/tools/make_short.py): nothing but the 3D view, edge to edge */
.bigview.video-mode .bigview-ctrl, .bigview.video-mode .bigview-hint, .bigview.video-mode .bigview-gear,
.bigview.video-mode .bigview-knobs, .bigview.video-mode .bigview-note { display: none !important; }
.bigview.video-mode .bigview-3d { flex: 1; height: auto; }

/* 🎬 video studio */
.studio-fmt { margin-top: 16px; }
.studio-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.studio-grid.long { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.studio-item { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 8px; }
.studio-item video { width: 100%; border-radius: 8px; background: #0b0e1a; }
.studio-grid.short .studio-item video { aspect-ratio: 9 / 16; }