/* Shared by the live samples (data/prompts.json media.kind "live"), shown in an iframe on each term's page.
   Same paper and ink as app/globals.css. Motion is written only inside prefers-reduced-motion: no-preference,
   so with "reduce" the end state shows from the start. Only transform and opacity move; no will-change. */
:root { --paper: oklch(0.978 0.006 85); --sheet: oklch(0.993 0.004 85); --ink: oklch(0.23 0.012 60); --muted: oklch(0.44 0.012 60); --accent: oklch(0.46 0.12 35); --rule: oklch(0.86 0.01 80); --panel: oklch(0.945 0.008 85); }
* { box-sizing: border-box; margin: 0; }
html { color-scheme: light; }
body { padding: 16px; background: var(--paper); color: var(--ink); font: 15px/1.7 "IBM Plex Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic UI", Meiryo, sans-serif; overflow-wrap: anywhere; }
.note { color: var(--muted); font-size: 13px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 12px; }
.card { padding: 12px 14px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 2px; }
.card b { display: block; font-weight: 600; }
.box { height: 190px; overflow-y: auto; background: var(--sheet); border: 1px solid var(--rule); }
.box:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.box p { padding: 0 14px 12px; }
button { font: inherit; font-size: 14px; color: var(--ink); background: var(--sheet); border: 1px solid var(--ink); border-radius: 6px; padding: 7px 14px; cursor: pointer; }
.controls { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Replaying only makes sense when things move. */
@media (prefers-reduced-motion: reduce) { [data-replay] { display: none; } }