/* The body-apart lab page: its grounds, its controls, and their layout. */
:root{ --font-sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; --font-mono:"Geist Mono",ui-monospace,monospace; }
html[data-theme="night"]{ --bg:#1F1815; --fg:#EAE0D6; --mutfg:#AE9E8E; --primary:#FF8A33; --line:rgba(255,255,255,.12); --chip:rgba(255,255,255,.05); --vig:rgba(8,6,5,.6); }
html[data-theme="day"]{ --bg:#FCF8F3; --fg:#3B302A; --mutfg:#7A6A62; --primary:#EA580C; --line:rgba(59,48,42,.14); --chip:rgba(255,255,255,.7); --vig:rgba(59,48,42,.08); }
*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{font-family:var(--font-sans);background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;overflow:hidden;}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block;}
.vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(110% 90% at 50% 48%,transparent 55%,var(--vig) 100%);}
.chrome{position:fixed;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:22px 26px;}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px 20px;flex-wrap:wrap;}
/* The version is the first choice, so it stands at the top, beside the title. */
.version{pointer-events:auto;display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mutfg);}
.home{pointer-events:auto;color:var(--fg);text-decoration:none;font-weight:600;font-size:14px;display:flex;gap:8px;align-items:center;}
.home span{color:var(--mutfg);}
.tag{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);
  border:1px solid color-mix(in srgb,var(--primary) 45%,transparent);border-radius:999px;padding:2px 8px;margin-left:10px;}
.caption{max-width:34ch;text-align:right;font-size:12.5px;line-height:1.5;color:var(--mutfg);}
.caption b{color:var(--fg);font-weight:600;}
.bottom{display:flex;flex-direction:column;align-items:center;gap:12px;}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center;pointer-events:auto;}
.pills{display:flex;gap:4px;background:var(--chip);border:1px solid var(--line);border-radius:999px;padding:4px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.pills button{border:none;background:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--mutfg);padding:6px 13px;border-radius:999px;cursor:pointer;}
.pills button[aria-pressed="true"]{background:var(--primary);color:#1A0E04;}
.scrub{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11px;color:var(--mutfg);
  background:var(--chip);border:1px solid var(--line);border-radius:999px;padding:7px 14px;}
.scrub input{width:min(46vw,300px);accent-color:var(--primary);}
.labels{font-size:12px;color:var(--mutfg);display:flex;gap:6px;align-items:center;}
.act{font-size:13px;font-weight:600;color:var(--fg);min-height:18px;letter-spacing:.01em;}
.play{border:1px solid var(--line);background:var(--chip);color:var(--fg);font:inherit;font-size:12.5px;font-weight:600;
  padding:7px 14px;border-radius:999px;cursor:pointer;}
.play[aria-pressed="true"]{background:var(--primary);color:#1A0E04;border-color:transparent;}
.note{font-size:10.5px;color:var(--mutfg);opacity:.7;text-align:center;max-width:70ch;}
.err{position:fixed;inset:auto 0 50% 0;text-align:center;color:var(--mutfg);font-size:13px;}
@media (max-width:640px){ .caption{display:none;} .chrome{padding:14px;} .version span{display:none;} }