/* ============================================================================
   Diffusion Studio: Mission 05
   Self-contained stylesheet. Imports ONLY the root design tokens; everything
   else this module needs is defined below. Accent identity: clay/sage
   "noise -> structure art-restorer" motif (Sage Biophilic palette). The
   --violet* token names are retained as accent aliases but hold CLAY values.
   ========================================================================== */
@import url("../styles.css");

:root {
  --violet: #a85a3c;       /* clay accent (alias kept for legacy selectors) */
  --violet-deep: #84402a;  /* deep clay */
  --violet-soft: #f4e7df;  /* clay tint */
  --violet-line: #ecd8cb;  /* clay line */
  --static: #1f2a22;       /* ink */
  --restore: #2f7d5b;      /* sage green (restore accent) */
}

/* ---- Base / topbar overrides for this room ---- */
body { background: var(--paper); }

.topbar { position: sticky; top: 0; z-index: 30; }

.mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 7px;
  color: white;
  font-weight: 900;
  background: linear-gradient(135deg, var(--violet) 0%, var(--violet-deep) 100%);
  box-shadow: 0 4px 14px rgba(168, 90, 60, .45);
}

nav a { transition: color .18s ease; }
nav a:hover { color: var(--violet); }

/* ---- Layout primitives ---- */
main { position: relative; }

.section {
  padding: clamp(40px, 6vw, 84px) clamp(18px, 4vw, 56px);
  border-top: 1px solid var(--line);
}

.section-head { max-width: 820px; margin: 0 auto clamp(22px, 3vw, 40px); }
.section-head.center { text-align: center; }

h1 {
  margin: 0;
  font-size: clamp(2.3rem, 5.6vw, 4.6rem);
  line-height: 1.03;
  letter-spacing: -0.01em;
}
h2 { margin: 0 0 10px; font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.08; }
h3 { margin: 0; font-size: clamp(1.15rem, 2vw, 1.5rem); }

.eyebrow { margin: 0 0 12px; }
.lead { color: var(--muted); line-height: 1.72; font-size: clamp(1rem, 1.7vw, 1.18rem); max-width: 760px; }

/* ---- Hero ---- */
.hero {
  display: grid;
  grid-template-columns: minmax(280px, .92fr) minmax(320px, 1.08fr);
  gap: clamp(26px, 5vw, 64px);
  align-items: center;
  min-height: 560px;
  padding: clamp(44px, 6vw, 90px) clamp(18px, 4vw, 56px);
  background:
    radial-gradient(900px 520px at 88% -12%, rgba(168, 90, 60, .16), transparent 60%),
    radial-gradient(700px 520px at -8% 120%, rgba(47, 125, 91, .12), transparent 60%),
    var(--paper);
}

.hero h1 .grad {
  background: linear-gradient(110deg, var(--violet) 0%, var(--restore) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.outcomes { display: grid; gap: 9px; margin-top: 26px; max-width: 560px; }
.outcomes strong { font-size: .95rem; }
.outcomes span {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--violet-line);
  border-radius: 9px;
  padding: 11px 14px;
  background: white;
  color: var(--ink);
  font-weight: 650;
  box-shadow: 0 6px 18px rgba(168, 90, 60, .07);
}
.outcomes span::before {
  content: "";
  width: 9px; height: 9px; border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), var(--restore));
  flex: none;
}

.hero-stage { position: relative; }
.hero-cap {
  margin: 12px 2px 0;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 700;
}

/* ---- Buttons ---- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid var(--violet-line);
  border-radius: 8px;
  padding: 0 18px;
  background: white;
  color: var(--ink);
  font-weight: 800;
  font-size: .95rem;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.button:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(168, 90, 60, .18); }
.button:active { transform: translateY(0); }
.button.primary {
  border-color: transparent;
  color: white;
  background: linear-gradient(135deg, var(--violet) 0%, var(--violet-deep) 100%);
}
.button.small { min-height: 36px; padding: 0 13px; font-size: .86rem; }
.button:focus-visible { outline: 3px solid rgba(168, 90, 60, .45); outline-offset: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ---- Panels / cards ---- */
.panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(18px, 3vw, 26px);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.panel-head h3 { display: flex; align-items: center; gap: 9px; }

.note {
  border: 1px solid var(--violet-line);
  border-radius: 9px;
  padding: 11px 14px;
  background: var(--violet-soft);
  color: var(--violet-deep);
  font-weight: 650;
  line-height: 1.55;
}

.example-box {
  border: 1px dashed var(--violet-line);
  border-left: 4px solid var(--violet);
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 16px;
  background: #faf7f2;
}
.example-box strong { color: var(--violet-deep); }
.example-box p { margin: 6px 0 0; color: var(--muted); line-height: 1.6; }
.example-box.green { border-left-color: var(--restore); }
.example-box.green strong { color: #157a5b; }

/* ---- Canvas ---- */
canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  box-shadow: 0 14px 38px rgba(24, 22, 38, .12);
}

/* ---- Controls ---- */
label.field { display: grid; gap: 8px; font-weight: 800; font-size: .92rem; }
.control-grid { display: grid; gap: 16px; margin: 4px 0 16px; }
@media (min-width: 620px) { .control-grid.two { grid-template-columns: 1fr 1fr; } }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 7px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--violet-soft), var(--violet-line));
  outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), var(--violet-deep));
  border: 3px solid white;
  box-shadow: 0 3px 9px rgba(168, 90, 60, .5);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--violet);
  border: 3px solid white;
  box-shadow: 0 3px 9px rgba(168, 90, 60, .5);
  cursor: pointer;
}
.range-value {
  display: inline-block;
  min-width: 3.2em;
  padding: 1px 8px;
  border-radius: 6px;
  background: var(--violet-soft);
  color: var(--violet-deep);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.seg {
  display: inline-flex;
  border: 1px solid var(--violet-line);
  border-radius: 9px;
  overflow: hidden;
}
.seg button {
  border: none;
  background: white;
  padding: 9px 14px;
  font-weight: 800;
  font-size: .86rem;
  color: var(--muted);
  cursor: pointer;
  transition: background .16s, color .16s;
}
.seg button + button { border-left: 1px solid var(--violet-line); }
.seg button.on { background: var(--violet); color: white; }

.check { display: inline-flex; align-items: center; gap: 8px; font-weight: 750; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--violet); }

/* ---- Level sections + sticky rail ---- */
.level { scroll-margin-top: 96px; }
.level-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 99px;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.level-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.level-tag.b1 { color: #2f7d62; background: #dff5ec; }
.level-tag.b2 { color: var(--violet-deep); background: var(--violet-soft); }
.level-tag.b3 { color: #466f96; background: #e6eef4; }
.level-tag.b4 { color: var(--violet-deep); background: var(--violet-soft); }

/* New-concept tag: a small "new idea" chip above each added concept block */
.step-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 99px;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: var(--violet-deep);
  background: var(--violet-soft);
  border: 1px solid var(--violet-line);
}
.step-tag::before { content: "✦"; font-size: .8em; color: var(--violet); }

/* New-concept section heads sit inside a level section (full width, not the
   narrow 820px intro head) so widgets below them get the full split grid. */
.level > .section-head[style*="margin-top"] { max-width: 1100px; }

#lvl-beginner { background: linear-gradient(180deg, #f3fbf8, var(--paper)); }
#lvl-intermediate { background: var(--paper); }
#lvl-advanced { background: linear-gradient(180deg, #eef4f8, var(--paper)); }
#lvl-expert { background: linear-gradient(180deg, #faf1ec, var(--paper)); }

.level-rail {
  position: fixed;
  top: 50%;
  right: clamp(8px, 1.6vw, 22px);
  transform: translateY(-50%);
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--violet-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}
.level-rail a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px 8px 10px;
  border-radius: 9px;
  font-size: .82rem;
  font-weight: 800;
  color: var(--muted);
  white-space: nowrap;
  transition: background .18s, color .18s;
}
.level-rail a .dot {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid var(--violet-line);
  font-size: .74rem;
  background: white;
  transition: all .2s;
}
.level-rail a:hover { background: var(--violet-soft); color: var(--violet-deep); }
.level-rail a.active { background: var(--violet); color: white; }
.level-rail a.active .dot { border-color: white; background: rgba(255,255,255,.22); color: white; }
.rail-line {
  position: absolute;
  left: 21px; top: 14px; bottom: 14px;
  width: 2px;
  background: var(--violet-line);
  z-index: -1;
}
@media (max-width: 1100px) {
  .level-rail { flex-direction: row; top: auto; bottom: 14px; right: 50%; transform: translateX(50%); }
  .level-rail a .label { display: none; }
  .rail-line { display: none; }
}

/* ---- Split / grid sections ---- */
.split {
  display: grid;
  grid-template-columns: minmax(280px, .85fr) minmax(320px, 1.15fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}
.split.rev { grid-template-columns: minmax(320px, 1.15fr) minmax(280px, .85fr); }
.stack { display: grid; gap: 18px; }

.cards { display: grid; gap: 16px; max-width: 1200px; margin: 22px auto 0; }
@media (min-width: 720px) { .cards.three { grid-template-columns: repeat(3, 1fr); } .cards.two { grid-template-columns: 1fr 1fr; } }

.dual {
  display: grid;
  gap: 18px;
}
@media (min-width: 720px) { .dual { grid-template-columns: 1fr 1fr; } }
.dual figure { margin: 0; }
.dual figcaption { margin-top: 9px; font-weight: 800; font-size: .9rem; color: var(--muted); text-align: center; }
.dual figcaption b.fwd { color: var(--rose); }
.dual figcaption b.rev { color: var(--restore); }

/* ---- Math cards (KaTeX) ---- */
.math-card {
  margin: 18px 0 0;
  border: 1px solid var(--violet-line);
  border-radius: 14px;
  overflow: hidden;
  background: white;
  box-shadow: 0 12px 30px rgba(168, 90, 60, .08);
}
.math-render {
  padding: 20px clamp(14px, 3vw, 26px);
  background: linear-gradient(180deg, var(--violet-soft), #fff);
  border-bottom: 1px solid var(--violet-line);
  overflow-x: auto;
  text-align: center;
  font-size: 1.06rem;
}
.math-card figcaption { padding: 16px clamp(14px, 3vw, 22px); }
.math-card figcaption p { margin: 0 0 10px; color: var(--ink); line-height: 1.6; }
.math-card .in-words { color: var(--muted); }
.math-card .in-words strong { color: var(--violet-deep); }
.legend { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 7px; }
.legend li { color: var(--muted); line-height: 1.5; padding-left: 16px; position: relative; }
.legend li::before { content: "•"; position: absolute; left: 2px; color: var(--violet); font-weight: 900; }
.legend li strong { color: var(--ink); }

/* ---- Code ---- */
pre {
  margin: 0;
  background: #1f2a22;
  color: #e6edda;
  padding: 16px;
  border-radius: 11px;
  overflow-x: auto;
  font-size: .86rem;
  line-height: 1.55;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
pre .cmt { color: #9fb39a; }
.code-explanation { margin-top: 14px; display: grid; gap: 8px; }
.code-explanation p { margin: 0; color: var(--muted); line-height: 1.55; }
.code-explanation strong { color: var(--ink); font-family: ui-monospace, Consolas, monospace; }

/* ---- SVG concept diagrams ---- */
.svg-wrap {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  background: white;
  box-shadow: 0 10px 26px rgba(24,22,38,.07);
}
.svg-wrap svg { width: 100%; height: auto; display: block; }
.diagram-cap { margin: 10px 2px 0; color: var(--muted); font-size: .88rem; line-height: 1.5; }

/* ---- Quiz ---- */
.quiz { display: grid; gap: 16px; }
.quiz-q { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: white; }
.quiz-q p.q { margin: 0 0 12px; font-weight: 800; }
.quiz-opts { display: grid; gap: 8px; }
.quiz-opts button {
  text-align: left;
  border: 1px solid var(--violet-line);
  border-radius: 9px;
  padding: 11px 13px;
  background: white;
  font-weight: 650;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.quiz-opts button:hover { background: var(--violet-soft); }
.quiz-opts button.correct { border-color: var(--restore); background: #e4f7ef; color: #11614a; font-weight: 800; }
.quiz-opts button.wrong { border-color: var(--rose); background: #fbe6ee; color: #97274f; }
.quiz-fb { margin: 10px 0 0; font-weight: 700; min-height: 1.2em; }
.quiz-fb.ok { color: #157a5b; }
.quiz-fb.no { color: var(--rose); }
.quiz-score { font-weight: 900; color: var(--violet-deep); }

/* ---- Schedule mini-bars (used in intermediate) ---- */
.mini-canvas { max-width: 100%; }

/* ---- Footer ---- */
footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 30px clamp(18px, 4vw, 56px);
  border-top: 1px solid var(--line);
  color: var(--muted);
}
footer a { font-weight: 800; color: var(--violet-deep); }
footer a:hover { color: var(--violet); }
footer .next a { color: var(--violet); }

/* ---- Reveal-on-scroll ---- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---- Pill badges ---- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 99px;
  font-size: .76rem; font-weight: 800;
  background: var(--violet-soft); color: var(--violet-deep);
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .hero, .split, .split.rev { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .topbar { flex-direction: column; align-items: flex-start; }
}

/* ============================================================================
   Responsive hardening (adapt-downward only; desktop unchanged)
   Builds on the root "Universal responsive hardening" layer.
   ========================================================================== */

/* Guard against any overflow from long unbreakable strings on phones */
@media (max-width: 860px) {
  body { overflow-x: hidden; }
}

/* --- Tablet / small-laptop: keep the bottom rail clear of content --- */
@media (max-width: 1100px) {
  /* The level-rail becomes a fixed bottom bar; reserve room so the last
     section's content isn't permanently covered by it. */
  footer { padding-bottom: 78px; }
  /* Compact the bottom rail so it never spans edge-to-edge / overflows */
  .level-rail {
    gap: 4px;
    padding: 7px;
    max-width: calc(100vw - 24px);
  }
  .level-rail a { padding: 7px 10px; }
}

/* --- ≤860px: single column already set above; tidy spacing/media --- */
@media (max-width: 860px) {
  .topbar { gap: 10px; }
  /* SVG Markov-chain diagram: it has an inline max-width:1100px, so let it
     shrink fully and stay centered. */
  .svg-wrap { max-width: 100% !important; }
  /* Worked-example panels with inline max-width:1100px shrink to fit. */
  .panel[style*="max-width"] { max-width: 100% !important; }
  .split[style*="max-width"] { max-width: 100% !important; }
}

/* --- ≤640px (phones): tighten padding, scale type, stack everything --- */
@media (max-width: 640px) {
  .section { padding: clamp(30px, 7vw, 48px) clamp(14px, 5vw, 22px); }
  .hero { padding: clamp(34px, 8vw, 52px) clamp(14px, 5vw, 22px); }

  /* The forward/reverse pair: force a single column below the dual's own
     720px breakpoint so the two 380px canvases stack and scale full width. */
  .dual { grid-template-columns: 1fr; }

  /* Segmented controls can be wider than the viewport with three buttons;
     let them wrap and shrink instead of forcing horizontal scroll. */
  .seg { display: flex; flex-wrap: wrap; }
  .seg button { flex: 1 1 auto; }
  .seg button + button { border-left: none; }

  /* Actions / button rows wrap cleanly and buttons can grow to tap size */
  .actions { gap: 10px; }

  /* Panels: trim inner padding a touch on the smallest tablets/phones */
  .panel { padding: clamp(14px, 4vw, 20px); }

  /* Math display can be wide; it already scrolls via root .katex-display;
     reduce its font so it more often fits without scrolling. */
  .math-render { font-size: 1rem; padding: 16px 12px; }
}

/* --- ≤480px: smallest phones, type + control fine-tuning --- */
@media (max-width: 480px) {
  .section { padding: 28px 13px; }
  .hero { padding: 30px 13px; }
  h1 { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
  h2 { font-size: clamp(1.45rem, 6vw, 1.9rem); }

  /* Panel-head: title + pill/button can be tight on one line; allow wrap
     (already flex-wrap) and let the action button stretch for tappability. */
  .panel-head .button.small { flex: 1 1 auto; }

  /* Quiz option buttons already full-width; keep comfortable tap padding. */
  .quiz-opts button { padding: 12px; }

  /* The "Inspect timestep" + schedule controls sit in a control-grid that is
     single-column by default below 620px, so nothing to do, just confirm
     range inputs stay capped (root caps max-width:100%). */
  .range-value { min-width: 2.8em; }

  /* Footer: stack the two links and keep the reserved bottom-bar gap. */
  footer { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* --- ≤360px: ultra-narrow, last safety net against overflow --- */
@media (max-width: 360px) {
  .section { padding: 24px 11px; }
  .hero { padding: 26px 11px; }
  .level-rail { max-width: calc(100vw - 16px); }
  .level-rail a { padding: 6px 8px; font-size: .78rem; }
  .level-rail a .dot { width: 20px; height: 20px; }
  /* Segmented-control labels can be long ("Prompt: ★ star"); shrink font. */
  .seg button { font-size: .8rem; padding: 8px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
  .reveal { transition: none; opacity: 1; transform: none; }
  .button:hover { transform: none; }
}

/* ============================================================================
   Beautiful-math callout: a lightweight highlight for the room's most
   elegant identities. Sage Biophilic: soft clay tint panel, clay accent
   left border, sage-green label. Sits inline among .math-card figures.
   ========================================================================== */
.beauty-note {
  margin: 14px 0 0;
  padding: 16px 18px 14px;
  background: var(--violet-soft);
  border: 1px solid var(--violet-line);
  border-left: 4px solid var(--violet);
  border-radius: 12px;
  color: var(--ink);
}
.beauty-note .beauty-label {
  display: inline-block;
  margin: 0 0 8px;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--restore);
}
.beauty-note .beauty-label::before { content: "\2726\00a0"; color: var(--violet); }
.beauty-note .math-render { margin: 4px 0 10px; }
.beauty-note p {
  margin: 0;
  color: var(--muted);
  line-height: 1.66;
  font-size: .98rem;
}
.beauty-note p strong { color: var(--ink); }

/* --- DDPM vs DDIM sampler widget: in-panel legend swatches (Sage palette) --- */
.samp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 4px 0 12px;
  font-size: .9rem;
  color: var(--muted);
}
.samp-legend span { display: inline-flex; align-items: center; gap: 7px; }
.samp-legend .sw {
  width: 18px; height: 0; border-top-width: 3px; border-top-style: solid;
  display: inline-block; border-radius: 2px;
}
.samp-legend .sw-ddpm { border-top-style: dashed; border-top-color: var(--violet-deep); }
.samp-legend .sw-ddim { border-top-color: var(--restore); }
.samp-legend .sw-mode {
  width: 12px; height: 12px; border-top: 0; border-radius: 50%;
  background: var(--restore);
}

/* ============================================================================
   POLISH LAYER: additive micro-interactions & refinement (CSS-only)
   Reuses existing classes/vars only. No geometry changes to interactive
   widgets. All motion is disabled in the prefers-reduced-motion block below.
   ========================================================================== */

/* --- Card hover lift: example-box & math-card gain a gentle raise + warmer
       shadow on hover. These are static content cards (not widgets), so a
       transform here cannot disturb any canvas/control logic. --- */
.example-box {
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.example-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(168, 90, 60, .12);
}
.example-box.green:hover {
  box-shadow: 0 12px 26px rgba(47, 125, 91, .14);
}

.math-card {
  transition: transform .2s ease, box-shadow .22s ease, border-color .2s ease;
}
.math-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(168, 90, 60, .14);
  border-color: var(--violet);
}

/* --- Outcome chips on the hero: subtle slide + shadow on hover --- */
.outcomes span {
  transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
.outcomes span:hover {
  transform: translateX(2px);
  border-color: var(--violet);
  box-shadow: 0 10px 22px rgba(168, 90, 60, .12);
}

/* --- Note / pill / step-tag: soft tint deepen on hover for tactility --- */
.note { transition: border-color .2s ease, box-shadow .2s ease; }
.note:hover { box-shadow: 0 8px 20px rgba(168, 90, 60, .08); }
.pill, .step-tag { transition: background .18s ease, border-color .18s ease; }

/* --- Panel (widget container): warm the shadow on hover WITHOUT moving it,
       so the canvas inside never shifts. --- */
.panel { transition: box-shadow .22s ease, border-color .2s ease; }
.panel:hover { border-color: var(--violet-line); }

/* --- Sharper, consistent keyboard focus rings using the clay accent.
       Mouse users are unaffected (:focus-visible only). --- */
.seg button:focus-visible,
.quiz-opts button:focus-visible,
.level-rail a:focus-visible,
nav a:focus-visible,
footer a:focus-visible {
  outline: 3px solid rgba(168, 90, 60, .42);
  outline-offset: 2px;
  border-radius: 8px;
}
input[type="range"]:focus-visible {
  outline: 3px solid rgba(168, 90, 60, .35);
  outline-offset: 3px;
}

/* --- Quiz option press feedback (purely visual; logic untouched) --- */
.quiz-opts button:active { transform: translateY(1px); }

/* --- Reveal-on-scroll: smoother spring-ish easing + slightly longer travel
       fade. Applies to the SAME .reveal class the app.js observer toggles. --- */
.reveal {
  transition: opacity .65s cubic-bezier(.22, .61, .36, 1),
              transform .65s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
.reveal.in { will-change: auto; }

/* --- Smoother momentum scrolling for wide KaTeX displays on touch --- */
.math-render { -webkit-overflow-scrolling: touch; scrollbar-width: thin; }

/* --- Typography refinement: tighten legend line-height rhythm and let long
       in-words paragraphs breathe slightly more. Non-structural. --- */
.math-card figcaption p { letter-spacing: .002em; }

/* --- Responsive hardening: belt-and-braces against wide media overflow on
       phones. Caps any oversized media at viewport width; never enlarges. --- */
@media (max-width: 640px) {
  pre { font-size: .82rem; }
  .math-render, pre, .svg-wrap { max-width: 100%; }
  /* Ensure code blocks scroll rather than push the page wide */
  pre { overflow-x: auto; }
}

/* --- Honor reduced-motion: neutralize every transition/transform added above.
       (Extends the room's existing reduced-motion rules; does not replace.) --- */
@media (prefers-reduced-motion: reduce) {
  .example-box,
  .example-box:hover,
  .math-card,
  .math-card:hover,
  .outcomes span,
  .outcomes span:hover,
  .quiz-opts button:active {
    transition: none;
    transform: none;
  }
  .reveal { transition: none; will-change: auto; }
}