:root{
  --paper:#f6f3ee;        /* top bar: rustic, almost white */
  --paper-2:#f0ebe3;      /* right-hand panel: one step warmer/darker */
  --paper-line:#e2dacc;
  --ink:#1b2328; --ink-2:#4d5b62; --ink-3:#7d8a90;
  --teal:#0f9f95; --teal-vp:#2fd3c4; --gold:#e6b850; --lilac:#b9a4f8;
  --glow:#f4e2a2;         /* light-yellow glow for borders */
  --glow-a:rgba(244,226,162,.55); --glow-b:rgba(244,226,162,.18);
  --glass:rgba(16,27,36,.55); --glass-light:rgba(255,255,255,.55);
  --radius:8px;           /* "slightly rounded", never pills */
  --brand-serif:"KaTeX_Main","Latin Modern Roman","CMU Serif",Georgia,serif;
  --brand-sans:"KaTeX_SansSerif","Latin Modern Sans","IBM Plex Sans",system-ui,sans-serif;
  --brand-mono:"KaTeX_Typewriter","Latin Modern Mono","IBM Plex Mono",monospace;
  --brand-math:"KaTeX_Math","Latin Modern Math",serif;
}
.glass{background:var(--glass);backdrop-filter:blur(14px) saturate(1.2);border:1px solid var(--glow-a);
  border-radius:var(--radius);box-shadow:0 0 0 1px rgba(255,255,255,.04),0 0 18px var(--glow-b),0 10px 30px rgba(0,0,0,.35)}
.glass.light{background:var(--glass-light);box-shadow:0 0 0 1px rgba(255,255,255,.4),0 0 14px var(--glow-b),0 6px 20px rgba(60,40,10,.08)}
.tabs{display:inline-flex;gap:2px;padding:3px}                 /* always combined with .glass */
.tabs>a,.tabs>button{border:0;background:transparent;color:inherit;padding:7px 12px;border-radius:calc(var(--radius) - 2px);
  font:500 13px var(--brand-serif);cursor:pointer;text-decoration:none;white-space:nowrap}
.tabs>[aria-current=page],.tabs>[aria-pressed=true],.tabs>.on{background:rgba(244,226,162,.22);box-shadow:inset 0 0 0 1px var(--glow-a)}
.card{padding:14px 16px;margin:10px 0}                          /* combined with .glass or .glass.light */
.card-title{display:flex;width:100%;align-items:center;gap:10px;text-align:left;padding:10px 14px;margin:14px 0 6px;
  font:600 17px var(--brand-serif);color:inherit;cursor:pointer}   /* a <button class="card-title glass light"> */
.card-title[aria-expanded=false]+*{display:none}
.eq{font-family:var(--brand-serif);overflow-x:auto}             /* KaTeX display goes inside .card.eq */
.brand-lockup{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.brand-lockup img,.brand-lockup svg{height:22px;width:auto;display:block}
.brand-lockup .by{font:italic 500 15px var(--brand-serif);margin:0 2px}
.brand-btn{display:inline-flex;align-items:center;padding:6px 12px;color:inherit;text-decoration:none} /* a wordmark on a glass button: <a class="brand-btn glass"> */
.brand-btn svg,.brand-btn img{height:22px;width:auto;display:block}
.overlay-note{position:absolute;max-width:min(380px,calc(100% - 44px));padding:12px 14px;opacity:0;transform:translateY(6px);
  transition:opacity .45s,transform .45s;pointer-events:none;color:#e6f0f2}
.overlay-note.show{opacity:1;transform:none;pointer-events:auto}
.overlay-note h4{margin:0 0 4px;font:600 16px var(--brand-serif)}
.overlay-note p{margin:0;font:13.5px/1.45 var(--brand-sans)}
@media (prefers-reduced-motion:reduce){.overlay-note{transition:none}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-color-scheme:dark){
  :root{--paper:#13191d;--paper-2:#0f1418;--paper-line:#243138;--ink:#e5ecec;--ink-2:#a6b4b8;--ink-3:#7d8a90;--glass-light:rgba(255,255,255,.06)}
  .glass.light{box-shadow:0 0 0 1px rgba(255,255,255,.06),0 0 14px var(--glow-b)}
}
/* Stage dock: caption and transport sit BELOW the scene as part of the layout (the canvas shrinks), so
   nothing is ever drawn over a lattice. Markup: .dock > .dock-row (caption, ket, Bloch) + .dock-row
   (.tabs.glass.transport, .progress, view controls, wordmark). */
.dock{display:flex;flex-direction:column;gap:8px;padding:10px 22px 12px;color:#dbe7e9;background:#0b1317;border-top:1px solid rgba(244,226,162,.12);flex:none}
.dock-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.caption{flex:1 1 320px;min-width:0;min-height:58px;padding:9px 14px;border-left:3px solid var(--teal-vp);transition:opacity .45s;color:#e6f0f2}
.caption h4{margin:0 0 3px;font:600 16px var(--brand-serif)}
.caption p{margin:0;font:14px/1.45 var(--brand-sans);color:#d3e0e3}
.caption[data-tone=gold]{border-left-color:var(--gold)}.caption[data-tone=lilac]{border-left-color:var(--lilac)}
.caption.swap{opacity:0}                                         /* toggled for one frame when the text changes */
.transport>button{display:inline-flex;align-items:center;gap:7px}  /* a .tabs.glass group of Replay, Play/Pause, Stop */
.transport>button:disabled{opacity:.4;cursor:default;box-shadow:none;background:transparent}
.transport .ico{font-size:10px;line-height:1;opacity:.9}
.progress{flex:1 1 120px;min-width:80px;height:4px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.progress>i{display:block;height:100%;width:0;background:var(--lab-accent,var(--teal-vp));transition:width .12s linear}
@media (prefers-reduced-motion:reduce){.caption,.progress>i{transition:none}}
@media(max-width:760px){.dock{padding:8px 14px 10px}.caption{flex-basis:100%}}