/* Layout: full-bleed 3D lab; a floating name tag top-left, hotspot pills on instruments, a side sheet (bottom sheet on phones) per section, and a particle mode that turns the lab into a point cloud. */
[hidden] { display: none !important; }   /* the site wrapper sets this too; keep it so the preview matches */
:root {
  --bg: #e9eef2;
  --bg-2: #d2dce3;
  --ink: #18232b;
  --ink-soft: #51616c;
  --sheet: #f8fafb;
  --line: #c4d0d8;
  --accent: #0a5fb4;
  --accent-ink: #ffffff;
  --glow: #3fd17a;
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f181e; --bg-2: #18242c; --ink: #e3ecf1; --ink-soft: #97a9b4;
    --sheet: #152028; --line: #283943; --accent: #6aa6f0; --accent-ink: #091a30; --glow: #5fe39a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f181e; --bg-2: #18242c; --ink: #e3ecf1; --ink-soft: #97a9b4;
  --sheet: #152028; --line: #283943; --accent: #6aa6f0; --accent-ink: #091a30; --glow: #5fe39a;
  color-scheme: dark;
}
html, body { height: 100%; }
body {
  background: radial-gradient(120% 90% at 50% 40%, var(--bg) 0%, var(--bg-2) 100%);
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  overflow: hidden;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
#stage { position: fixed; inset: 0; }
#stage canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }

.tag {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top, 0px));
  left: max(16px, env(safe-area-inset-left, 0px));
  display: grid; gap: 4px; pointer-events: none; z-index: 2;
}
.tag .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.tag h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(26px, 4.4vw, 44px); line-height: .95; letter-spacing: -.02em; text-wrap: balance; }
.tag p { margin: 2px 0 0; color: var(--ink-soft); max-width: 30ch; }
.tag { padding: 14px 16px 16px; border-radius: 16px; max-width: min(380px, calc(100% - 32px)); box-sizing: border-box;
  background: color-mix(in srgb, var(--sheet) 82%, transparent); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); box-shadow: 0 8px 28px rgba(0,0,0,.10); }
.hint { padding: 7px 14px; border-radius: 999px; color: var(--ink);
  background: color-mix(in srgb, var(--sheet) 82%, transparent); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tag, .tools, .hint { transition: opacity .3s; }
body.os-mode .tag, body.os-mode .tools, body.os-mode .hint { opacity: 0; pointer-events: none; }

.tools {
  position: fixed; z-index: 2;
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: max(50%, calc(100% - 430px));   /* everything beside the intro panel */
}
.btn {
  font: 500 12px/1 var(--mono); letter-spacing: .04em;
  background: var(--sheet); color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 13px; cursor: pointer;
}
.btn:hover { border-color: var(--accent); }
.tools .btn:not(.primary) { background: color-mix(in srgb, var(--sheet) 84%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
/* Sound button (js/ui/sound.js): a speaker crossed out while off, with waves while on */
.sound-btn { display: inline-flex; align-items: center; justify-content: center; padding-left: 11px; padding-right: 11px; }   /* icon only (its label is for screen readers) */
.sound-btn svg { width: 14px; height: 14px; }
.sound-btn .wave { display: none; }
.sound-btn.on .wave { display: inline; }
.sound-btn.on .mute { display: none; }
.tools .sound-btn.on { border-color: var(--accent); color: var(--accent); }
.btn:focus-visible, .hot:focus-visible, .close:focus-visible, .sheet a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.hint, .caption {
  position: fixed; z-index: 2; left: 50%; transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  font: 400 12px/1.4 var(--mono); color: var(--ink-soft); text-align: center;
  width: max-content; max-width: calc(100% - 32px); pointer-events: none;
}
.caption { color: var(--ink); background: var(--sheet); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.caption b { font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: -.01em; display: block; }

#labels { position: fixed; inset: 0; pointer-events: none; z-index: 3; }
.bot-tip { position: fixed; left: 0; top: 0; z-index: 3; pointer-events: none; padding: 8px 11px 9px; border-radius: 12px;
  background: var(--sheet); border: 1px solid var(--line); box-shadow: 0 6px 22px rgba(0,0,0,.14);
  font: 400 11px/1.5 var(--mono); color: var(--ink-soft); white-space: nowrap; opacity: 0; transition: opacity .2s; }
.bot-tip b { display: block; font: 700 13px/1.35 var(--display); color: var(--ink); }
.bot-tip span { display: block; margin-top: 3px; padding-top: 4px; border-top: 1px solid var(--line); font-size: 10.5px; }
.bot-tip.on { opacity: 1; }
body.os-mode .bot-tip { display: none; }
.btn:disabled { opacity: .5; cursor: default; }
.btn:disabled:hover { border-color: var(--line); }
/* SFC run panel (basement) */
.sfc { display: grid; gap: 14px; }
.sfc-about { display: grid; gap: 4px; font-size: 14px; color: var(--ink-soft); }
.sfc-about span { font: 400 11px/1.4 var(--mono); letter-spacing: .02em; }
.sfc-vials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sfc-vial { display: grid; justify-items: center; gap: 7px; padding: 10px 6px 9px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 600 12.5px/1.2 var(--display); text-align: center; cursor: pointer; }
.sfc-vial i { width: 14px; height: 24px; border-radius: 3px 3px 5px 5px; background: linear-gradient(var(--cap) 0 26%, color-mix(in srgb, var(--ink) 12%, transparent) 26% 100%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent); }
.sfc-vial[aria-checked="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); box-shadow: inset 0 0 0 1px var(--accent); }
.sfc-vial:disabled { opacity: .55; cursor: default; }
.lc-phrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lc-ph { padding: 9px 8px; font-weight: 600; font-size: 12px; }
.sfc-peaks small { font: 500 11px/1 var(--mono); color: var(--ink-soft); margin-left: 6px; }
.sfc-vial:focus-visible, .sfc-ctl input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sfc-ctl { display: grid; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.sfc-ctl label { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 10px; font: 600 13px/1.3 var(--display); }
.sfc-ctl output { font: 500 12px/1 var(--mono); }
.sfc-ctl input { grid-column: 1 / -1; width: 100%; margin: 4px 0 0; accent-color: var(--accent); }
.sfc-go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sfc-go .btn { justify-self: auto; }
.sfc-clock { font: 400 12px/1.3 var(--mono); color: var(--ink-soft); }
.sfc-chart { width: 100%; height: 170px; display: block; border: 1px solid var(--line); border-radius: 12px; }
.sfc-phase { display: grid; gap: 8px; }
.sfc-phase canvas { width: 100%; height: 180px; display: block; border: 1px solid var(--line); border-radius: 12px; }
.sfc-state { display: grid; gap: 4px; font-size: 14px; }
.sfc-state small { font-size: 12px; color: var(--ink-soft); }
.sfc-peaks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.sfc-peaks li { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 8px; }
.sfc-peaks i { width: 18px; height: 18px; border-radius: 50%; background: var(--c); color: #0f171c; font: 700 10px/18px var(--mono); text-align: center; font-style: normal; }
.sfc-peaks b { font: 500 12px/1 var(--mono); }
.sfc-callout { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--bg-2); }
.sfc-callout p { font-size: 13px; color: var(--ink-soft); }
.sfc-kv { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.sfc-kv b { font: 600 12px/1.3 var(--mono); white-space: nowrap; }
.sfc-note { font-size: 12px; color: var(--ink-soft); }
/* Campus drive mode */
.hud[hidden], .minimap[hidden], .joy[hidden], .boost[hidden] { display: none; }
body.world-mode .tag, body.world-mode #labels, body.world-mode .bot-tip { display: none; }
.hud { position: fixed; z-index: 4; top: calc(16px + env(safe-area-inset-top, 0px)); left: max(16px, env(safe-area-inset-left, 0px));
  display: grid; gap: 6px; width: min(260px, calc(100% - 32px)); padding: 14px 16px 16px; border-radius: 16px; box-sizing: border-box;
  background: color-mix(in srgb, var(--sheet) 86%, transparent); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 28px rgba(0,0,0,.12); }
.hud .eyebrow { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.hud-title { font: 800 24px/1 var(--display); letter-spacing: -.015em; margin-bottom: 4px; }
.hud-row { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.hud-row b { font: 600 13px/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.hud-finds { display: flex; flex-wrap: wrap; gap: 4px; }
.hud-finds span { font: 400 11px/1 var(--mono); padding: 5px 7px; border-radius: 6px; background: var(--bg-2); color: var(--ink-soft); }
.hud-finds span.got { background: color-mix(in srgb, #ffd36b 45%, var(--sheet)); color: var(--ink); }
.hud-near { margin: 0; font: 500 12px/1.3 var(--mono); color: #b07a00; }
.hud .btn { justify-self: start; margin-top: 6px; }
.minimap { position: fixed; z-index: 4; right: max(16px, env(safe-area-inset-right, 0px)); top: calc(64px + env(safe-area-inset-top, 0px));
  width: 172px; height: 172px; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.toast { position: fixed; z-index: 5; left: 50%; top: calc(18px + env(safe-area-inset-top, 0px)); transform: translate(-50%, -12px); opacity: 0; pointer-events: none;
  padding: 10px 16px; border-radius: 999px; background: var(--sheet); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0,0,0,.16);
  font: 600 14px/1.3 var(--display); color: var(--ink); max-width: calc(100% - 32px); text-align: center; transition: opacity .25s, transform .25s; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.joy { position: fixed; z-index: 4; left: max(20px, env(safe-area-inset-left, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); width: 132px; height: 132px; border-radius: 50%;
  background: color-mix(in srgb, var(--sheet) 55%, transparent); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); touch-action: none; }
.joy-knob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: var(--accent); box-shadow: 0 4px 14px rgba(0,0,0,.25); pointer-events: none; }
.boost { position: fixed; z-index: 4; right: max(20px, env(safe-area-inset-right, 0px)); bottom: calc(40px + env(safe-area-inset-bottom, 0px)); width: 92px; height: 92px; border-radius: 50%;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--sheet) 70%, transparent); color: var(--ink); font: 600 13px/1 var(--mono); touch-action: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.boost.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.boost.fly { width: 72px; height: 72px; bottom: calc(146px + env(safe-area-inset-bottom, 0px)); right: max(30px, env(safe-area-inset-right, 0px)); }
.hud-alt { margin: 0; font: 500 12px/1.3 var(--mono); color: var(--accent); }
body.world-mode::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 58%, rgba(8, 18, 28, 0.32) 100%); }
.fade { position: fixed; inset: 0; z-index: 9; pointer-events: none; opacity: 0; transition: opacity .4s; background: #f4fbff; }
.fade.on { opacity: 1; }
body.world-mode .hint { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 640px) {
  .hud { top: calc(60px + env(safe-area-inset-top, 0px)); width: auto; right: auto; padding: 10px 12px 12px; gap: 4px; }
  .hud-title { font-size: 18px; } .hud-finds { display: none; } .hud .btn { margin-top: 2px; }
  .minimap { top: calc(60px + env(safe-area-inset-top, 0px)); width: 112px; height: 112px; }
  body.world-mode .hint { display: none; }
}
@media (pointer: coarse) { body.world-mode .hint { display: none; } }

/* SFC workstation app on the basement PC. The live view is a hole in the window: the 3D column shows through it. */
.sfcw { position: fixed; inset: 0; z-index: 6; display: grid; place-items: center;
  padding-block: calc(16px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  opacity: 0; transition: opacity .3s; }
.sfcw.show { opacity: 1; }
.sfcw-win { width: min(1200px, 100%); height: min(800px, 100%); display: flex; flex-direction: column; overflow: hidden; color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35), 0 0 0 200vmax color-mix(in srgb, var(--bg) 55%, transparent); }
.sfcw-bar { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; background: var(--bg-2); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.sfcw-bar .ws-title::before { background: var(--accent); }
.sfcw-stat { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.sfcw-stat span { font: 500 11px/1 var(--mono); padding: 6px 8px; border-radius: 6px; background: var(--sheet); border: 1px solid var(--line); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sfcw-body { flex: 1; min-height: 0; overflow: auto; padding: 16px; display: grid; gap: 14px; align-content: start;
  grid-template-columns: minmax(270px, 310px) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "method live live" "method chrom chrom" "method res phase"; }
.sfcw-live { grid-area: live; position: relative; height: 250px; border-radius: 12px; border: 1px solid var(--line); background: transparent;
  box-shadow: 0 0 0 200vmax var(--sheet); }
.sfcw-live .live-tag { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 7px; font: 500 11px/1 var(--mono); padding: 6px 9px; border-radius: 999px; background: color-mix(in srgb, var(--sheet) 88%, transparent); border: 1px solid var(--line); }
.sfcw-live .live-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #e0413a; animation: livepulse 1.4s ease-in-out infinite; }
.sfcw-live .live-cap { position: absolute; right: 10px; bottom: 10px; font: 400 11px/1.3 var(--mono); padding: 6px 9px; border-radius: 8px; background: color-mix(in srgb, var(--sheet) 88%, transparent); border: 1px solid var(--line); color: var(--ink-soft); max-width: calc(100% - 20px); }
@keyframes livepulse { 50% { opacity: .35; } }
.sfcw-panel { position: relative; z-index: 1; display: grid; gap: 12px; align-content: start; padding: 14px; border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.sfcw-panel h3 { margin: 0; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.sfcw-panel p { margin: 0; }
.sfcw-method { grid-area: method; }
.sfcw-chrom { grid-area: chrom; } .sfcw-chrom .sfc-chart { height: 220px; }
.sfcw-res { grid-area: res; } .sfcw-phase { grid-area: phase; }
.sfcw-res .sfc-callout a { color: var(--accent); }
@media (max-width: 640px) {
  .ws-bar, .sfcw-bar { padding: 8px 8px 8px 14px; row-gap: 8px; }
  .ws-bar .ws-title, .sfcw-bar .ws-title { flex: 1; }
  .ws-bar .ws-tabs, .sfcw-bar .sfcw-stat { order: 3; flex: 1 1 100%; }
}
@media (max-width: 860px) {
  .sfcw { padding: 0; }
  .sfcw-win { height: 100%; border-radius: 0; border: 0; }
  .sfcw-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "live" "chrom" "method" "res" "phase"; padding: 12px; }
  .sfcw-chrom .sfc-chart { height: 170px; }
  .sfcw-win > .ws-status { display: none; }
  .sfcw-live { height: 200px; }
}
@media (prefers-reduced-motion: reduce) { .sfcw { transition: none; } .sfcw-live .live-tag::before { animation: none; } }
.hot {
  position: absolute; left: 0; top: 0; pointer-events: auto;
  display: inline-flex; align-items: center; gap: 7px;
  font: 500 12px/1 var(--mono); color: var(--ink);
  background: var(--sheet); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 10px 6px 7px; cursor: pointer; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  transition: border-color .15s;
}
.hot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 0 3px color-mix(in srgb, var(--glow) 35%, transparent); }
.hot:hover, .hot.on { border-color: var(--accent); }
.hot[hidden] { display: none; }
.hot { transition: border-color .15s, opacity .2s; }
.hot.tucked { opacity: 0; pointer-events: none; }
/* a tag crowded out by a nearer one shrinks to its dot (js/main.js); hovering or focusing it shows the name again */
.hot.dot { gap: 0; padding: 5px; }
.hot.dot .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hot.dot:hover, .hot.dot:focus-visible, .hot.dot.on { gap: 7px; padding: 6px 10px 6px 7px; z-index: 1; }
.hot.dot:hover .lbl, .hot.dot:focus-visible .lbl, .hot.dot.on .lbl { position: static; width: auto; height: auto; clip-path: none; }

.sheet {
  position: fixed; z-index: 3;
  top: calc(16px + env(safe-area-inset-top, 0px));
  max-height: calc(100% - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  width: min(400px, calc(100% - 32px));
  background: var(--sheet); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,.18);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateX(0); transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s;
}
.sheet.closed { transform: translateX(calc(100% + 40px)); opacity: 0; pointer-events: none; }
.sheet header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 12px; border-bottom: 1px solid var(--line); }
.sheet .kicker { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.sheet h2 { margin: 6px 0 0; font: 800 28px/1.05 var(--display); letter-spacing: -.015em; text-wrap: balance; }
.close { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 18px; cursor: pointer; }
.sheet .body { min-height: 0; padding: 16px 20px 22px; overflow-y: auto; display: grid; gap: 14px; align-content: start; line-height: 1.55; }
.sheet .body p { margin: 0; max-width: 62ch; }
.sheet a { color: var(--accent); }
.row { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.row .k { font: 400 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.row .v { font-weight: 600; overflow-wrap: anywhere; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: 400 12px/1 var(--mono); padding: 6px 9px; border-radius: 6px; background: var(--bg-2); color: var(--ink); }
.cta { display: inline-flex; align-self: start; justify-self: start; text-decoration: none; background: var(--accent); color: var(--accent-ink) !important; font: 600 15px/1.4 var(--body); padding: 10px 16px; border-radius: 10px; border: 0; cursor: pointer; }
.cta:hover { filter: brightness(1.08); }
.cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sheet .btn { justify-self: start; }

/* Desktop portfolio overlay: its own fixed look (wallpaper + light taskbar); windows use the theme tokens. */
.desk {
  position: fixed; inset: 0; z-index: 6; overflow: hidden;
  background:
    radial-gradient(40% 50% at 72% 35%, rgba(150,230,255,.35), transparent 70%),
    radial-gradient(35% 40% at 55% 78%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(30% 35% at 92% 82%, rgba(80,200,190,.35), transparent 70%),
    linear-gradient(135deg, #0b2d5c 0%, #1d6fa8 55%, #57c1c9 100%);
  opacity: 0; transition: opacity .35s;
  font-family: "Segoe UI", var(--body);
}
.desk.show { opacity: 1; }
.dicons {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  left: max(14px, env(safe-area-inset-left, 0px));
  display: grid; grid-auto-flow: row; gap: 6px;
}
.dicon {
  width: 86px; display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border-radius: 6px;
  background: transparent; border: 1px solid transparent; color: #fff; font: 400 12px/1.2 "Segoe UI", var(--body);
  text-shadow: 0 1px 3px rgba(0,0,0,.6); cursor: pointer;
}
.dicon:hover, .dicon:focus-visible { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); outline: none; }
.dicon svg { width: 44px; height: 40px; }
.win {
  position: absolute; width: min(540px, calc(100% - 32px)); max-height: calc(100% - 110px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--sheet); color: var(--ink); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.win .bar { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; background: var(--bg-2); cursor: move; user-select: none; touch-action: none; }
.win .bar span { flex: 1; min-width: 0; font: 600 13px/1.2 "Segoe UI", var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win .bar button { width: 30px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font-size: 16px; cursor: pointer; }
.win .bar button:hover { background: #c42b1c; color: #fff; }
.win .body { padding: 16px 20px 22px; overflow-y: auto; display: grid; gap: 14px; align-content: start; line-height: 1.55; }
.win .body p { margin: 0; max-width: 62ch; }
.win .body h3 { margin: 0; font: 800 24px/1.1 var(--display); letter-spacing: -.01em; }
.win a { color: var(--accent); }
.win .btn { justify-self: start; }
.taskbar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(50px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: rgba(240,244,248,.88); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid rgba(255,255,255,.6); color: #18232b;
}
.tb-left { justify-self: start; }
.tb-back { font: 500 12px/1 var(--mono); background: #ffffff; color: #18232b; border: 1px solid #c4d0d8; border-radius: 6px; padding: 8px 10px; cursor: pointer; }
.tb-apps { display: flex; gap: 4px; }
.tb-app { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.tb-app:hover, .tb-app:focus-visible { background: rgba(0,0,0,.07); outline: none; }
.tb-app svg { width: 24px; height: 22px; }
.tb-app.open::after { content: ""; position: absolute; bottom: 2px; width: 14px; height: 3px; border-radius: 2px; background: #0a5fb4; }
.launch { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); width: min(380px, calc(100% - 32px)); display: grid; gap: 10px; justify-items: start; padding: 24px; border-radius: 14px; background: var(--sheet); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.launch .k { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.launch b { font: 800 34px/1 var(--display); letter-spacing: -.02em; }
.launch p { margin: 0; color: var(--ink-soft); line-height: 1.5; }
.launch .addr { font: 400 12px/1 var(--mono); color: var(--ink-soft); user-select: all; }
.tb-clock { justify-self: end; text-align: right; font: 400 12px/1.35 "Segoe UI", var(--body); font-variant-numeric: tabular-nums; }

/* Intro actions: projects one click from the first screen */
.tag .intro-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; pointer-events: auto; }
.tag .intro-actions .btn { text-decoration: none; display: inline-flex; align-items: center; }
.tag .featured { margin-top: 8px; font: 400 12px/1.5 var(--mono); color: var(--ink-soft); pointer-events: auto; max-width: 42ch; }
.tag .featured a { white-space: nowrap; color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.tag .featured a:hover { border-bottom-color: var(--accent); }
.tag a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 900px) { .tag .featured { display: none; } }
.sheet .body .also { font-size: 14px; color: var(--ink-soft); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* IC Workstation: the usable computer on the Nexera IC bench */
.ws { position: fixed; inset: 0; z-index: 6; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 55%, transparent);
  padding-block: calc(16px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  opacity: 0; transition: opacity .3s; }
.ws.show { opacity: 1; }
.ws-win { width: min(1080px, 100%); height: min(720px, 100%); display: flex; flex-direction: column; overflow: hidden;
  background: var(--sheet); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.ws-bar { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; background: var(--bg-2); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ws-title { font: 800 15px/1 var(--display); letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 8px; }
.ws-title::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--glow); }
.ws-tabs { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; }
.ws-tabs button { font: 500 12px/1 var(--mono); padding: 8px 12px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.ws-tabs button[aria-selected="true"] { background: var(--sheet); color: var(--ink); border-color: var(--line); }
.ws-close { font: 500 12px/1 var(--mono); padding: 9px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--sheet); color: var(--ink); cursor: pointer; white-space: nowrap; }
.ws-close:hover, .ws-tabs button:hover { border-color: var(--accent); }
.ws-tabs button:focus-visible, .ws-close:focus-visible, .ws-topic:focus-visible, .ws input:focus-visible, .ws-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ws-body { flex: 1; min-height: 0; overflow: auto; padding: 18px; }
.ws-status { padding: 8px 16px; border-top: 1px solid var(--line); font: 400 11px/1.4 var(--mono); color: var(--ink-soft); background: var(--bg-2); }
.ws-cols { display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); gap: 18px; align-items: start; }
.ws-topics { display: grid; gap: 6px; }
.ws-topic { text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; font: 600 13px/1.3 var(--body); }
.ws-topic small { display: block; font: 400 11px/1.3 var(--mono); color: var(--ink-soft); margin-top: 3px; }
.ws-topic[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ws-detail { min-width: 0; display: grid; gap: 14px; }
.ws-detail h3 { margin: 0; font: 800 24px/1.1 var(--display); letter-spacing: -.015em; text-wrap: balance; }
.ws-detail .lede { margin: 0; color: var(--ink-soft); max-width: 62ch; line-height: 1.5; }
.ws-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.ws-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.ws-table th, .ws-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.ws-table tr:last-child td, .ws-table tr:last-child th { border-bottom: 0; }
.ws-table thead th { font: 600 12px/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); background: var(--bg-2); }
.ws-table tbody th { font: 500 12px/1.4 var(--mono); color: var(--ink-soft); width: 26%; }
.ws-choose { margin: 0; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--glow) 12%, transparent); border: 1px solid color-mix(in srgb, var(--glow) 40%, transparent); line-height: 1.5; }
.ws-choose b { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-right: 6px; }
.ws-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.ws-form label { display: grid; gap: 6px; font: 500 12px/1.2 var(--mono); color: var(--ink-soft); }
.ws-form input { font: 500 15px/1 var(--mono); padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); width: 100%; box-sizing: border-box; font-variant-numeric: tabular-nums; }
.ws-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 16px; }
.ws-res { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 4px; }
.ws-res span { font: 400 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.ws-res b { font: 700 22px/1.1 var(--mono); font-variant-numeric: tabular-nums; }
.ws-res small { color: var(--ink-soft); font-size: 12px; }
.ws-note { margin: 14px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.5; max-width: 70ch; }
.ws-seg { display: inline-flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); margin-bottom: 12px; }
.ws-seg button { font: 500 12px/1 var(--mono); padding: 8px 12px; border-radius: 7px; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; }
.ws-seg button[aria-pressed="true"] { background: var(--sheet); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.ws-chart { width: 100%; height: 300px; display: block; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.ws-run-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; font: 400 12px/1.4 var(--mono); color: var(--ink-soft); }
@media (max-width: 720px) {
  .ws-cols { grid-template-columns: minmax(0, 1fr); }
  .ws-topics { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .ws-chart { height: 220px; }
}

/* Background: a slow color drift behind the room */
#stage::before { content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(38% 34% at 18% 26%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%),
              radial-gradient(34% 30% at 82% 74%, color-mix(in srgb, var(--glow) 15%, transparent), transparent 70%),
              radial-gradient(30% 28% at 70% 18%, color-mix(in srgb, #b48cff 12%, transparent), transparent 70%);
  animation: bgdrift 46s ease-in-out infinite alternate; }
@keyframes bgdrift { from { transform: translate(-4%, -3%) scale(1); } to { transform: translate(4%, 3%) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { #stage::before { animation: none; } }
@media (max-width: 640px) {
  .tag p { display: none; }
  .tag .featured { display: none; }
  .sheet { top: auto; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); width: auto; max-height: 62%; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .sheet.closed { transform: translateY(calc(100% + 40px)); }
  .hot { font-size: 11px; }
}
@media (max-width: 640px) {
  .tools { left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); max-width: none; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tools::-webkit-scrollbar { display: none; }
  .tools .btn { flex: none; padding: 8px 11px; }
  /* phones: the toolbar's buttons show just their icons so they all fit across the screen (their names stay for screen
     readers, and Particles says "Back to lab" in words while it's on) */
  .tools { gap: 6px; }
  .tools .btn .ico { display: block; width: 14px; height: 14px; flex: none; }
  .tools .compact { display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; min-width: 36px; padding: 8px 10px; }
  .tools .compact .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tools #particleBtn[aria-pressed="true"] .lbl { position: static; width: auto; height: auto; clip-path: none; }
  .tools #particleBtn[aria-pressed="true"] ~ #levelBtn, .tools #particleBtn[aria-pressed="true"] ~ #lightsBtn { display: none; }   /* (no use to a cloud of points, and the words need their room) */
  .tools #levelBtn.going-up .ico { transform: rotate(180deg); }
  .tag { top: calc(60px + env(safe-area-inset-top, 0px)); }
}
body.sheet-open .tag { opacity: 0; pointer-events: none; transform: translateY(-8px); }
.tag { transition: opacity .3s, transform .3s; }
@media (max-width: 640px) { .hint { border-radius: 14px; } .bot-tip { white-space: normal; max-width: min(280px, calc(100vw - 16px)); } }
@media (prefers-reduced-motion: reduce) { .sheet, .hot { transition: none; } }

/* library: note cards in the side sheet, and the reader */
.lib-notes { display: grid; gap: 10px; }
.lib-note { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.lib-note > i { width: 34px; height: 46px; border-radius: 3px 6px 6px 3px; background: linear-gradient(90deg, rgba(0,0,0,.25) 0 4px, transparent 4px), var(--cover); box-shadow: inset 0 0 0 2px rgba(217,180,90,.55); }
.lib-note h4 { margin: 0; font: 700 15px/1.25 var(--display); }
.lib-note p { margin: 4px 0 0; font-size: 13px; color: var(--ink-soft); }
.lib-note .lib-sub { color: var(--ink); font-weight: 600; }
.lib-note .lib-src { font: 400 11px/1.4 var(--mono); }
.lib-note .btn { margin-top: 8px; justify-self: start; }
.lib-shelf { margin: 14px 0 6px; font: 600 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.lib-search { display: grid; gap: 4px; font: 600 12px/1 var(--mono); }
.lib-search input { font: 400 14px/1.3 var(--display); padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--sheet); color: var(--ink); }
.lib-reader .sfcw-win { width: min(1320px, 100%); height: min(860px, 100%); }
.lib-reader-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(240px, 300px) 1fr; }
.lib-card { overflow: auto; padding: 18px; display: grid; gap: 10px; align-content: start; border-right: 1px solid var(--line); background: var(--bg-2); }
.lib-card h3 { margin: 0; font: 700 16px/1.3 var(--display); }
.lib-card h4 { margin: 6px 0 0; font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.lib-card p, .lib-card li { font-size: 14px; color: var(--ink-soft); margin: 0; }
.lib-card ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font: 400 12px/1.4 var(--mono); }
.lib-cover { display: grid; place-items: center; height: 150px; border-radius: 6px 10px 10px 6px; background: linear-gradient(90deg, rgba(0,0,0,.25) 0 10px, transparent 10px), var(--cover); box-shadow: inset 0 0 0 4px rgba(217,180,90,.6); padding: 16px; text-align: center; font-style: normal; }
.lib-cover b { color: #f3e2b4; font: 700 20px/1.2 Georgia, serif; }
#libReaderFrame { width: 100%; height: 100%; border: 0; background: #fff; }
@media (max-width: 760px) { .lib-reader-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .lib-card { border-right: 0; border-bottom: 1px solid var(--line); max-height: 34vh; } .lib-cover { height: 90px; } }
.lib-reader a.btn, .lib-card a.btn { text-decoration: none; text-align: center; }
.lib-note[hidden], .lib-shelf[hidden], .lib-notes[hidden] { display: none; }

/* intro panel: folds down to the name after a few seconds (js/ui/intro.js) */
.tag-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tag-toggle { pointer-events: auto; flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin: -4px -6px -4px 0; padding: 0; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); background: transparent; color: var(--ink-soft); cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.tag-toggle:hover { color: var(--ink); border-color: var(--accent); }
.tag-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tag-toggle svg { width: 14px; height: 14px; transition: transform .3s; }
.tag-more { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .35s ease, opacity .25s; }
.tag-more > div { min-height: 0; overflow: hidden; display: grid; gap: 4px; }
.tag h1 { transition: font-size .3s ease; }
.tag.collapsed { pointer-events: auto; cursor: pointer; gap: 2px; padding-bottom: 12px; }
.tag.collapsed h1 { font-size: clamp(20px, 2.4vw, 24px); }
.tag.collapsed .tag-more { grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows .35s ease, opacity .2s, visibility 0s .35s; }
.tag.collapsed .tag-toggle svg { transform: rotate(180deg); }
.tag.collapsed:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
@media (prefers-reduced-motion: reduce) { .tag-more, .tag h1, .tag-toggle svg { transition: none; } }

/* campus HUD: shortcuts into the buildings */
.hud-go { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.hud-go > span { flex-basis: 100%; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.hud .hud-go .btn { margin-top: 0; padding: 7px 12px; }
@media (max-width: 640px) { .hud-go { margin-top: 2px; gap: 4px; } .hud-go > span { display: none; } .hud .hud-go .btn { padding: 6px 10px; } }

/* space: the HUD swaps its campus rows for space ones; the Space shortcut shows a lock until it's earned */
.hud:not(.space) .hud-space, .hud.space .hud-campus { display: none; }
.hud .go-space { display: inline-flex; align-items: center; gap: 5px; }
.hud .go-space .lock { width: 11px; height: 11px; display: none; }
.hud .go-space.locked { opacity: 0.62; border-style: dashed; }
.hud .go-space.locked .lock { display: block; }
.hud.space { background: color-mix(in srgb, #0b1020 70%, transparent); color: #e8eefc; border-color: rgba(140,170,255,.25); }
.hud.space .eyebrow, .hud.space .hud-row span { color: #a9b6d6; }
.hud.space .hud-alt { color: #7fe9da; }
.hud.space .btn { background: rgba(255,255,255,.08); color: #e8eefc; border-color: rgba(160,185,255,.3); }

/* phones: the campus panel stops short of the minimap instead of running under it */
@media (max-width: 640px) { .hud { width: auto; max-width: calc(100% - 152px - env(safe-area-inset-right, 0px)); } .hud-go { gap: 4px; } }

/* mathematics: problem statement, steps, the live lattice readouts, the glueball chart, the seven problems */
.m-state { margin: 10px 0; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.m-open { padding: 10px 12px; border-left: 3px solid #e0a43a; background: color-mix(in srgb, #e0a43a 10%, transparent); border-radius: 0 10px 10px 0; }
.m-h { margin: 14px 0 6px; font: 600 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.m-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.m-src { font: 400 11px/1.5 var(--mono); color: var(--ink-soft); }
.m-slider { display: grid; gap: 6px; margin: 10px 0; font: 600 12px/1 var(--mono); }
.m-slider span { display: flex; justify-content: space-between; }
.m-slider input { width: 100%; accent-color: var(--accent); }
.m-read { display: grid; gap: 6px; margin: 6px 0 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg-2); }
.m-read div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.m-read b { font: 600 13px/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.m-chart { display: block; width: 100%; height: auto; max-width: 100%; margin: 8px 0 2px; overflow: visible; }
.m-chart .m-gap { fill: color-mix(in srgb, #e0a43a 16%, transparent); }
.m-chart .m-gaplab { font: italic 600 11px var(--display); fill: #b07a00; }
.m-chart .m-grid { stroke: var(--line); stroke-width: 1; }
.m-chart .m-ax, .m-chart .m-v { font: 400 10px var(--mono); fill: var(--ink-soft); }
.m-chart .m-j { font: 600 11px var(--mono); fill: var(--ink); }
.m-chart .m-err { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; opacity: .45; }
.m-chart .m-dot { fill: var(--accent); stroke: var(--sheet); stroke-width: 2; }
.m-chart .m-row:hover .m-dot { r: 6; }
.m-chart .m-row:hover .m-err { opacity: .9; }
.m-cap { font-size: 12px; color: var(--ink-soft); }
.m-seven { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.m-seven li { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; color: var(--ink-soft); }
.m-seven li b { color: var(--ink); }
.m-seven .m-tag { float: right; font: 600 10px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .06em; padding: 1px 7px; border-radius: 999px; background: var(--bg-2); }
.m-seven li.solved { border-color: #d9b45a; } .m-seven li.solved .m-tag { background: color-mix(in srgb, #d9b45a 30%, transparent); }

/* the Places menu: every room in one list */
.tools .places-btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.tools .ico { display: none; }   /* toolbar icons are for phones (below); wider screens have room for the words */
.places-btn svg { width: 14px; height: 14px; }
.places-menu { position: fixed; z-index: 6; top: calc(58px + env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); width: min(300px, calc(100vw - 32px));
  display: grid; gap: 2px; padding: 6px; border-radius: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--sheet) 94%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 14px 40px rgba(0,0,0,.22); }
.places-menu button { display: grid; gap: 2px; text-align: left; padding: 9px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer; font: inherit; }
.places-menu button b { font: 600 14px/1.2 var(--display); }
.places-menu button span { font: 400 12px/1.3 var(--mono); color: var(--ink-soft); }
.places-menu button:hover, .places-menu button:focus-visible { background: color-mix(in srgb, var(--accent) 12%, transparent); outline: none; }
.places-menu button[aria-current] { cursor: default; background: var(--bg-2); }
.places-menu button[aria-current] span { color: var(--accent); }
@media (max-width: 640px) { .places-menu { top: calc(56px + env(safe-area-inset-top, 0px)); left: max(12px, env(safe-area-inset-left, 0px)); right: auto; } }

/* loading card on the fade (js/ui/loader.js); the bar moves with transforms so it keeps animating while the page is busy building */
.fade.dark { --ink: #e3ecf1; --accent: #6aa6f0; }
.loader { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(380px, calc(100% - 48px)); display: grid; gap: 10px; color: var(--ink); }
.loader-eyebrow { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .65; }
.loader-title { font: 800 clamp(30px, 7vw, 44px)/1 var(--display); letter-spacing: -.02em; }
.loader-bar { position: relative; height: 4px; margin-top: 6px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, currentColor 14%, transparent); }
.loader-bar i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 0)); background: var(--accent); border-radius: 4px; transition: transform .35s ease; }
.loader-bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); transform: translateX(-100%); animation: loader-shine 1.2s linear infinite; }
@keyframes loader-shine { to { transform: translateX(100%); } }
.loader-step { font: 400 12px/1.3 var(--mono); opacity: .7; min-height: 1.3em; }
.loader-tip { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent); font-size: 13.5px; line-height: 1.5; opacity: .85; }
kbd { display: inline-block; min-width: 1.4em; padding: 1px 6px; border-radius: 5px; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); border-bottom-width: 2px;
  font: 500 11px/1.5 var(--mono); text-align: center; background: color-mix(in srgb, currentColor 6%, transparent); }
.keys { white-space: nowrap; }
.keys > span { margin: 0 2px; opacity: .6; }
.tag .fresh-note { margin-top: 10px; font-size: 12px; }
@media (hover: none) { .tag .fresh-note { display: none; } }
/* "the lab has just been updated" card (js/ui/freshness.js) */
.fresh { position: fixed; z-index: 8; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(64px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 12px;
  max-width: calc(100% - 32px); box-sizing: border-box; padding: 12px 12px 12px 16px; border-radius: 16px; background: var(--sheet); border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(0,0,0,.18);
  opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s; }
.fresh.on { opacity: 1; transform: none; }
.fresh-text { display: grid; gap: 2px; font-size: 13px; color: var(--ink-soft); }
.fresh-text b { font: 600 14px/1.25 var(--display); color: var(--ink); }
.fresh .btn { white-space: nowrap; }
.fresh-x { border: 0; background: none; color: var(--ink-soft); font-size: 20px; line-height: 1; padding: 4px 6px; cursor: pointer; border-radius: 8px; }
.fresh-x:hover { color: var(--ink); }
.fresh-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 560px) { .fresh { left: 16px; right: 16px; flex-wrap: wrap; } .fresh-text { flex: 1 1 60%; } }
@media (prefers-reduced-motion: reduce) { .loader-bar::after { animation: none; } .fresh, .loader-bar i { transition: none; } }

/* graphics switch at the foot of the Places menu */
.places-menu .pm-quality { display: flex; align-items: center; gap: 6px; margin-top: 4px; padding: 10px 12px 4px; border-top: 1px solid var(--line); }
.places-menu .pm-quality span { flex: 1; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.places-menu .pm-quality button { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font: 500 12px/1 var(--mono); color: var(--ink); }
.places-menu .pm-quality button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* the 3D view was taken away by the device (js/core/scene.js) */
.gl-lost { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 40; width: min(360px, calc(100% - 32px)); box-sizing: border-box;
  display: grid; gap: 8px; justify-items: start; padding: 18px 20px; border-radius: 16px; background: var(--sheet); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(0,0,0,.18); }
.gl-lost b { font: 800 22px/1.1 var(--display); letter-spacing: -.01em; }
.gl-lost p { margin: 0; color: var(--ink-soft); }
.gl-lost .btn { margin-top: 4px; }
body.gl-off #labels, body.gl-off .hint { visibility: hidden; }