/* ── Formula Lab · additions ───────────────────────────────────────────
   [Claude] This page loads /chem-review-2.css first and adds only what is
   new. The shell — the cream background with its gold and blue blooms, the
   warm lines, the pink handwriting, the stacked deck, the red and blue
   arrows — is Atom Lab's, unchanged, on purpose: one shell, and the accent
   varies per concept. */

/* the live box: type a number, watch the answer move */
.livebox{
  margin:16px 0 4px;padding:18px 16px 14px;border-radius:22px;background:#fff;
  border:2px dashed color-mix(in srgb,var(--accent) 42%,#d7cec4);position:relative;z-index:1;text-align:center
}
.lb-formula{
  font-size:26px;font-weight:900;letter-spacing:.02em;color:var(--accent);margin-bottom:12px
}
.lb-row{display:flex;align-items:flex-start;justify-content:center;gap:14px;flex-wrap:wrap}
.lb{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:116px}
.lb-let{font-size:20px;font-weight:900;color:var(--accent)}
.lb-in{
  width:116px;font:inherit;font-size:30px;font-weight:900;text-align:center;padding:9px 6px;
  border-radius:14px;border:2px solid color-mix(in srgb,var(--accent) 34%,#d5c9bc);
  background:#fffdf9;color:#202430;outline:none;-moz-appearance:textfield
}
.lb-in:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.lb-in::-webkit-outer-spin-button,.lb-in::-webkit-inner-spin-button{opacity:.35;height:34px}
.lb-unit{font-size:15px;font-weight:900;color:#4a5262}
.lb-lab{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.09em;font-weight:800}
.lb-op{font-size:34px;font-weight:900;color:#707786;padding-top:26px}
.lb-out{
  margin-top:16px;padding:12px 10px;border-radius:16px;
  background:color-mix(in srgb,var(--accent) 11%,white);
  border:2px solid color-mix(in srgb,var(--accent) 26%,#d7cec4)
}
.lb-out-let{font-size:24px;font-weight:900;color:#202430}
.lb-out-val{font-size:42px;font-weight:1000;color:var(--accent);letter-spacing:.01em}
.lb-out-unit{font-size:22px;font-weight:900;color:#4a5262}
.lb-prev{margin-top:9px;font-size:17px;font-weight:800;color:#557062}
.lb-prev.lb-faint{font-size:13px;font-weight:600;color:var(--muted)}
.lb-hint{margin-top:4px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:var(--muted)}

@media(max-width:860px){
  .lb-in{width:96px;font-size:25px}
  .lb{min-width:96px}
  .lb-op{padding-top:22px;font-size:28px}
  .lb-out-val{font-size:34px}
  .lb-formula{font-size:22px}
}

/* ── the record button (the shaoyin layer) ─────────────────────────────
   The heart's switch: it says when the class is actually running. Off it
   is a quiet reminder; on it is unmistakable from across the room. */
button.record-bar{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;padding:8px 16px;
  border:2px solid #f3c9c9;border-radius:999px;background:#fff1f1;color:#b42318;
  font-weight:900;font-size:13px;cursor:pointer;transition:.14s ease
}
button.record-bar:hover{border-color:#e5484d;background:#ffe4e4}
.rec-dot{width:12px;height:12px;border-radius:50%;background:#e5484d;flex:none}
button.record-bar.on{
  background:#e5484d;border-color:#b42318;color:#fff;
  box-shadow:0 0 0 4px rgba(229,72,77,.16)
}
button.record-bar.on .rec-dot{background:#fff}
.rec-dot.live{animation:recpulse 1.6s ease-in-out infinite}
@keyframes recpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
.rec-time{font-variant-numeric:tabular-nums;min-width:40px;display:inline-block}
.rec-stop{
  margin-left:4px;padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.22);
  font-size:11px;text-transform:uppercase;letter-spacing:.08em
}
@media(prefers-reduced-motion:reduce){.rec-dot.live{animation:none}}

/* ── the part chip ─────────────────────────────────────────────────────
   Which of the five kinds of difficulty this question tests: Words,
   Symbols, Pictures, Moves, Ideas. Small, above the question, so a miss
   is filed as a kind of miss and not only as a wrong answer. */
.part-chip{
  display:inline-flex;align-items:center;gap:7px;margin:0 0 10px;padding:4px 12px 4px 9px;
  border-radius:999px;background:color-mix(in srgb,var(--accent) 13%,white);
  border:1px solid color-mix(in srgb,var(--accent) 30%,#d7cec4);
  font-size:11px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;color:#4a5262;
  cursor:help
}
.part-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}