/* Light mode and the Lab. Loaded after galaxies.css. */
:root,html[data-theme="dark"]{--sky:#02030a;--sky-ink:#f5f5f7}
html[data-theme="light"]{--bg:#f5f5f7;--panel:#ffffff;--panel2:#e8e8ed;--ink:#1d1d1f;--mute:#5b5b63;--line:rgba(0,0,0,.16);--accent:#0066cc;--accent-ink:#fff;--warm:#a85a00;--pink:#c2185b;--violet:#6d4acf;--warn:#d70015;--good:#1a7f37;--glass:rgba(255,255,255,.74);--glass-hi:rgba(255,255,255,.95);--shadow:0 24px 50px -26px rgba(20,30,60,.3),0 2px 6px rgba(20,30,60,.08);--glow2:rgba(142,63,196,.08);--glow3:rgba(199,106,0,.05);--sky:#f1f3f8;--sky-ink:#1d1d1f}
html[data-theme="light"] body{background:radial-gradient(70rem 40rem at 50% -14%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%),radial-gradient(46rem 32rem at 100% 100%,var(--glow2),transparent 70%),var(--bg)}
html[data-theme="light"] .seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
html[data-theme="light"] .btn.primary{color:#fff}
html[data-theme="light"] .chartbox{background:rgba(0,0,0,.04)}
html[data-theme="light"] dialog::backdrop{background:rgba(30,35,50,.4)}
html[data-theme="light"] .halo{mix-blend-mode:multiply;background:radial-gradient(circle at 50% 50%,rgba(109,74,207,.42),rgba(109,74,207,.18) 34%,rgba(109,74,207,.07) 56%,transparent 70%)}

/* header: the mode switch and the theme button */
.modes{justify-self:center;display:inline-flex;padding:4px;border-radius:999px;border:1px solid var(--line);background:var(--glass);gap:2px}
.modes button{border:0;background:transparent;min-height:40px;padding:0 18px;border-radius:999px;font-weight:650;font-size:.88rem;color:var(--mute);cursor:pointer;white-space:nowrap}.modes button:hover{color:var(--ink)}
.modes button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
html[data-theme="light"] .modes button[aria-pressed="true"]{color:#fff}
.modes[hidden],.prog[hidden]{display:none}
#themeBtn[aria-pressed="true"] svg{transform:rotate(25deg)}

/* the Lab */
.lab{position:fixed;inset:56px 0 0 0;z-index:1}
.lab[hidden]{display:none}
.lab__tabs{position:absolute;left:12px;right:12px;top:6px;height:40px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;z-index:6}
.lab__tabs::-webkit-scrollbar{display:none}
.lab__tab{flex:0 0 auto;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;min-height:38px;padding:4px 16px;border-radius:99px;border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--ink);cursor:pointer;position:relative}
.lab__tab b{font-size:.95rem;font-weight:700;line-height:1.15}
.lab__tab{display:inline-flex;align-items:center;justify-content:center}
.lab__tab small{grid-column:1;font-size:.7rem;color:var(--mute);line-height:1.1}
.lab__tab kbd{grid-row:1/3;grid-column:2;font:600 .68rem/1 inherit;padding:3px 6px;border-radius:5px;border:1px solid var(--line);color:var(--mute)}
.lab__tab:hover{border-color:var(--mute)}
.lab__tab[aria-selected="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--glass))}
.lab__stage{position:absolute;left:12px;top:54px;right:372px;bottom:12px;border-radius:22px;background:var(--sky)}
.lab__stage.paper{background:#f1f3f8;box-shadow:0 0 0 1px var(--line),var(--shadow)}
.lab__stage.paper .stage__hud .num,.lab__stage.paper .stage__hud .dim{background:rgba(255,255,255,.85);color:#1d1d1f}
.lab__stage.paper .stage__hud .btn{background:rgba(255,255,255,.85);color:#1d1d1f;border-color:rgba(0,0,0,.18)}
.lab__stage .stage__hud{z-index:4}
.lab__stage .stage__hud .num{font-size:.82rem;color:var(--sky-ink)}
.lab__stage:not(.paper) .stage__hud .btn{color:#f5f5f7}
.lab__stage .halo{inset:0;background:radial-gradient(circle at 50% 50%,rgba(169,139,255,.5),rgba(169,139,255,.22) calc(18% * var(--hs,1.6)),rgba(169,139,255,.08) calc(30% * var(--hs,1.6)),transparent calc(42% * var(--hs,1.6)))}
.lab__inset{position:absolute;left:12px;bottom:12px;width:min(240px,34%);aspect-ratio:4/3;margin:0;border-radius:16px;z-index:3;box-shadow:0 8px 28px -8px rgba(0,0,0,.6)}
.lab__inset img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lab__inset figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 10px 8px;font-size:.7rem;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.75))}
.lab__chart{position:absolute;inset:0;padding:14px 14px 8px;background:var(--panel);border-radius:inherit}
.lab__chart canvas{width:100%;height:100%;display:block;outline:0}
.lab__chart canvas:focus-visible{box-shadow:inset 0 0 0 3px var(--accent);border-radius:12px}
.lab__stage[data-model="expand"]{background:var(--panel);box-shadow:0 0 0 1px var(--line),var(--shadow)}
.lab__panel{position:absolute;top:54px;right:12px;bottom:12px;width:348px;padding:0;gap:0;overflow:hidden;z-index:5}
.lab__grip{display:none}
.lab__body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 18px 20px;display:flex;flex-direction:column;gap:6px}
.lab__h{font-size:1.2rem;font-weight:700;letter-spacing:-.02em}
.lab__sub{font-size:.88rem;color:var(--mute);line-height:1.45;margin-bottom:6px}
.lsec{border-top:1px solid var(--line);padding:6px 0}
.lsec>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:44px;cursor:pointer;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.lsec>summary::-webkit-details-marker{display:none}
.lsec>summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-right:4px;transition:transform .2s}
.lsec[open]>summary::after{transform:rotate(-135deg)}
.lsec__b{display:flex;flex-direction:column;gap:8px;padding-bottom:8px}
.lab__panel .ctl{grid-template-columns:92px minmax(0,1fr) 78px}
.lab__panel .ctl .seg{grid-column:2/4}
.lab__panel .ctl>span:first-child{font-size:.84rem}
.lab__panel .ctl output{white-space:nowrap}
.lab__panel .ctl[hidden],.lab__panel label[hidden]{display:none}
.lab__panel .chips{justify-content:flex-start;max-width:none;gap:6px}
.chip.sm{min-height:38px;padding:6px 12px;font-size:.82rem;border-radius:12px}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.checks .sw{font-size:.82rem}
.lab__panel .row.left{justify-content:flex-start;gap:10px}
.seed{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;color:var(--mute)}
.seed input{width:92px;min-height:38px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink)}
.rd{display:grid;gap:4px;margin:0;font-size:.84rem}
.rd>div{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--line)}
.rd dt{color:var(--mute)}.rd dd{margin:0;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.lab__panel .chartbox{height:170px}
.specbox{height:56px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}.specbox canvas{width:100%;height:100%;display:block}

@media (max-width:1100px){.lab__stage{right:12px;bottom:calc(var(--ph,50vh) + 8px)}.lab__panel{left:10px;right:10px;top:auto;bottom:0;width:auto;height:var(--ph,50vh);max-height:calc(100% - 120px);border-radius:16px 16px 0 0;border-bottom-width:0}
  .lab__grip{display:block;position:relative;flex:none;height:28px;border:0;background:none;cursor:pointer}
  .lab__grip::before{content:"";position:absolute;left:50%;top:10px;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--mute);opacity:.6}
  .lab.pcol{--ph:34px}.lab.pcol .lab__body{display:none}
  .lab__tab small,.lab__tab kbd{display:none}.lab__tab{min-height:44px}
  .lab__inset{width:min(150px,38%)}}
@media (max-width:640px){.lab{--ph:52vh}.lab__stage{left:0;right:0;top:56px;border-radius:0}.lab__tabs{left:8px;right:8px}.checks{grid-template-columns:1fr}.top .modes button{padding:0 12px}}
@media (max-height:600px) and (min-width:1101px){.lab__body{padding:10px 14px}}
@media (prefers-reduced-motion:reduce){.lsec>summary::after{transition:none}}
@media (max-width:420px){.top .modes button{padding:0 9px;font-size:.8rem}.top .ibtn{min-width:40px}}
.try{margin:0;padding-left:1.1rem;display:grid;gap:8px;font-size:.86rem;line-height:1.45}
.try li::marker{color:var(--accent);font-weight:700}