/* Web Worlds v0.25 — lab page CSS bundle. Generated from the consolidated v0.20 stylesheet while preserving rule order. */
:root {
  color-scheme: dark;
  --bg: #070a10;
  --bg-2: #0b1018;
  --surface: rgba(15, 21, 31, .78);
  --surface-strong: #111925;
  --surface-soft: rgba(124, 156, 255, .07);
  --text: #f6f8fc;
  --muted: #91a0b5;
  --muted-2: #68778d;
  --primary: #7c9cff;
  --primary-2: #9b8cff;
  --accent: #68e8f6;
  --accent-2: #58d6a6;
  --border: rgba(255, 255, 255, .105);
  --border-strong: rgba(124, 156, 255, .28);
  --glow: rgba(124, 156, 255, .18);
  --glow-2: rgba(104, 232, 246, .13);
  --shadow: 0 24px 70px rgba(0, 0, 0, .34);
  --shadow-soft: 0 16px 44px rgba(0, 0, 0, .24);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 30px;
  --button-radius: 13px;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --section-space: clamp(5.5rem, 9vw, 9rem);
  --pointer-x: 50vw;
  --pointer-y: 20vh;
  --grid-opacity: .26;
  --decor-opacity: .72;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

html[data-theme="cute"] {
  color-scheme: light;
  --bg: #f7e8f1;
  --bg-2: #efd9e8;
  --surface: rgba(255, 242, 249, .88);
  --surface-strong: #fff1f8;
  --surface-soft: rgba(215, 107, 166, .16);
  --text: #4b2c49;
  --muted: #76586f;
  --muted-2: #97778f;
  --primary: #d86aa7;
  --primary-2: #9d78d6;
  --accent: #ef8fb8;
  --accent-2: #72bfae;
  --border: rgba(105, 57, 91, .22);
  --border-strong: rgba(202, 91, 151, .46);
  --glow: rgba(208, 89, 153, .20);
  --glow-2: rgba(157, 120, 214, .17);
  --shadow: 0 24px 60px rgba(91, 48, 82, .17);
  --shadow-soft: 0 14px 34px rgba(91, 48, 82, .13);
  --radius-sm: 18px;
  --radius-md: 28px;
  --radius-lg: 42px;
  --button-radius: 999px;
  --grid-opacity: .13;
  --decor-opacity: 1;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  font-family: var(--font-body);
  color: var(--text);
  line-height: 1.6;
  background:
    radial-gradient(700px 500px at 84% -10%, var(--glow), transparent 64%),
    radial-gradient(600px 440px at -10% 28%, var(--glow-2), transparent 67%),
    var(--bg);
  transition: background-color .38s var(--ease), color .28s ease;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -3;
  opacity: var(--grid-opacity);
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000 0 55%, transparent 94%);
}
html[data-theme="cute"] body::before {
  background-image:
    radial-gradient(circle, rgba(223,121,181,.22) 1.4px, transparent 1.5px),
    radial-gradient(circle, rgba(168,137,239,.18) 1.1px, transparent 1.2px);
  background-size: 30px 30px, 46px 46px;
  background-position: 0 0, 11px 13px;
}

body::after {
  content: "";
  position: fixed;
  width: 360px;
  height: 360px;
  left: calc(var(--pointer-x) - 180px);
  top: calc(var(--pointer-y) - 180px);
  pointer-events: none;
  z-index: -2;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow), transparent 66%);
  opacity: .65;
  transition: opacity .2s ease;
}

html[data-theme="cute"] body::after { opacity: .48; }

a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--primary); color: #fff; }

.skip-link {
  position: fixed;
  top: .7rem;
  left: .7rem;
  z-index: 1000;
  transform: translateY(-170%);
  padding: .7rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--text);
  color: var(--bg);
  text-decoration: none;
  font-weight: 800;
}
.skip-link:focus { transform: translateY(0); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

.container {
  width: min(calc(100% - 2.5rem), 1180px);
  margin-inline: auto;
}
.section { padding: var(--section-space) 0; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.site-header.scrolled {
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--border);
}
.nav-wrap {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .78rem;
  min-width: 0;
  text-decoration: none;
}
.brand-mark {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(135deg, var(--surface-strong), var(--surface-soft));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), var(--shadow-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 800;
  transition: transform .25s var(--ease), border-radius .28s var(--ease), background .28s ease;
}
.brand:hover .brand-mark { transform: rotate(-4deg) scale(1.04); }
html[data-theme="cute"] .brand-mark {
  color: #fff;
  background: linear-gradient(145deg, var(--primary), var(--primary-2));
  border-radius: 17px 17px 17px 6px;
}
.brand-copy strong,
.brand-copy small { display: block; }
.brand-copy strong { font-size: .92rem; letter-spacing: -.02em; }
.brand-copy small { color: var(--muted); font-family: var(--font-mono); font-size: .67rem; }
.site-nav {
  display: flex;
  align-items: center;
  gap: .22rem;
  padding: .3rem;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
}
html[data-theme="cute"] .site-nav { border-radius: 999px; }
.site-nav a {
  padding: .58rem .72rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 750;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
html[data-theme="cute"] .site-nav a { border-radius: 999px; }
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--text); background: var(--surface-soft); }
.site-nav a[aria-current="page"] { box-shadow: inset 0 0 0 1px var(--border); }
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: .24rem;
  padding: .25rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
html[data-theme="cute"] .theme-switch { border-radius: 999px; }
.theme-switch button {
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  padding: .54rem .64rem;
  cursor: pointer;
  font: inherit;
  font-size: .76rem;
  font-weight: 850;
  transition: background .18s ease, color .18s ease, transform .18s var(--ease);
}
html[data-theme="cute"] .theme-switch button { border-radius: 999px; }
.theme-switch button:hover { transform: translateY(-1px); color: var(--text); }
.theme-switch button.is-active {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  box-shadow: 0 6px 18px var(--glow);
}
.menu-button {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.menu-button span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 4px auto;
  border-radius: 99px;
  background: currentColor;
}

.eyebrow {
  margin: 0 0 .9rem;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.02; letter-spacing: -.045em; }
h1 { font-size: clamp(3.8rem, 8.7vw, 8rem); margin-bottom: 1.4rem; }
h2 { font-size: clamp(2.7rem, 5.3vw, 5rem); margin-bottom: 1.2rem; }
h3 { font-size: clamp(1.45rem, 2.4vw, 2rem); }
.lede { color: var(--muted); font-size: clamp(1.03rem, 1.8vw, 1.28rem); }

.button,
.text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 48px;
  padding: .78rem 1.08rem;
  border-radius: var(--button-radius);
  text-decoration: none;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s ease, background .2s ease;
}
.button {
  border: 1px solid var(--border-strong);
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 12px 28px var(--glow);
}
.button:hover { transform: translateY(-2px); box-shadow: 0 18px 38px var(--glow); }
.text-button {
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--surface);
}
.text-button:hover { background: var(--surface-soft); transform: translateY(-2px); }
.button.small, .text-button.small { min-height: 40px; padding: .58rem .82rem; font-size: .83rem; }

.hero {
  position: relative;
  min-height: calc(100svh - 78px);
  display: grid;
  align-items: center;
  overflow: clip;
  padding: clamp(4rem, 7vw, 7rem) 0 3rem;
}
.hero-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.hero-copy h1 { max-width: 8.4ch; }
.hero-copy .lede { max-width: 650px; margin-bottom: 1.9rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1rem;
  margin-top: 1.45rem;
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: .72rem;
}
.hero-meta span::before { content: "•"; color: var(--accent); margin-right: .45rem; }
.hero-meta span:first-child::before { content: ""; margin: 0; }

.world-window {
  position: relative;
  min-height: 530px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface-strong) 92%, transparent), color-mix(in srgb, var(--surface-soft) 78%, transparent));
  box-shadow: var(--shadow);
  overflow: hidden;
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: border-radius .32s var(--ease), background .3s ease, transform .15s ease;
}
.world-window::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), var(--glow), transparent 72%);
  opacity: .9;
  pointer-events: none;
}
.world-topbar {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .72rem;
}
.window-dots { display: flex; gap: .4rem; }
.window-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); opacity: .7; }
.world-scene { position: absolute; inset: 52px 0 0; }






















.particle-field { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ambient-particle {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--s); height: var(--s);
  border-radius: 50%;
  background: var(--accent);
  opacity: .4;
  box-shadow: 0 0 12px var(--accent);
  animation: particle-float var(--d) ease-in-out var(--delay) infinite alternate;
}
html[data-theme="cute"] .ambient-particle {
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--primary);
  box-shadow: 0 0 8px rgba(223,121,181,.25);
}

.proof-strip {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(3rem, 6vw, 5rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}
.proof-strip > div { padding: 1.15rem 1rem; }
.proof-strip > div + div { border-left: 1px solid var(--border); }
.proof-strip strong, .proof-strip span { display: block; }
.proof-strip strong { font-size: .9rem; }
.proof-strip span { color: var(--muted); font-size: .76rem; }

.intro-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(3rem, 8vw, 8rem);
  align-items: start;
}
.intro-grid h2 { max-width: 8ch; }
.intro-copy { padding-top: 2.5rem; }
.intro-copy .lede { max-width: 650px; }
.signal-line {
  margin-top: 2rem;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), var(--primary), transparent);
  position: relative;
}
.signal-line::after {
  content: "";
  position: absolute;
  left: 0; top: -3px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 16px var(--accent);
  animation: signal-run 5s linear infinite;
}

.section-heading {
  display: grid;
  grid-template-columns: 1fr .72fr;
  gap: 3rem;
  align-items: end;
  margin-bottom: 2.8rem;
}
.section-heading h2 { max-width: 10ch; margin-bottom: 0; }
.section-heading > p { margin-bottom: .25rem; color: var(--muted); }

.capability-layout {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: 1.2rem;
}
.capability-menu {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.capability-chip {
  width: 100%;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: .75rem;
  padding: .95rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: transform .2s var(--ease), border-color .2s ease, background .2s ease;
}
.capability-chip:hover, .capability-chip:focus-visible {
  transform: translateX(4px);
  border-color: var(--border-strong);
  background: var(--surface-soft);
}
.capability-chip b { font-family: var(--font-mono); color: var(--accent); font-size: .73rem; }
.capability-chip span { font-weight: 820; }
.capability-chip i { color: var(--muted-2); font-style: normal; }
.capability-board {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.capability-proof {
  position: relative;
  min-height: 170px;
  padding: 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface-soft) 65%, transparent));
  overflow: hidden;
  transition: transform .22s var(--ease), border-color .22s ease, box-shadow .22s ease;
}
.capability-proof::after {
  content: "";
  position: absolute;
  width: 110px; height: 110px;
  right: -34px; bottom: -34px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  opacity: .6;
}
.capability-proof.is-linked {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 14px 34px var(--glow-2);
}
.capability-proof small { color: var(--accent); font-family: var(--font-mono); }
.capability-proof h3 { margin: .7rem 0 .55rem; }
.capability-proof p { margin: 0; color: var(--muted); font-size: .92rem; }

.demo-zone {
  position: relative;
  background: color-mix(in srgb, var(--bg-2) 88%, transparent);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.demo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.demo-card {
  min-height: 330px;
  padding: 1.15rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.demo-card h3 { margin-bottom: .5rem; }
.demo-card > p { color: var(--muted); font-size: .9rem; }
.tilt-demo {
  position: relative;
  height: 190px;
  margin-top: 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background:
    radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%), var(--glow), transparent 70%),
    linear-gradient(145deg, var(--surface-strong), var(--surface-soft));
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .12s ease, border-radius .25s var(--ease);
  display: grid;
  place-items: center;
}
.tilt-demo .mini-core {
  width: 82px; height: 82px;
  display: grid; place-items: center;
  border-radius: 24px 8px 24px 8px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white;
  font-family: var(--font-mono);
  font-weight: 900;
  box-shadow: 0 14px 30px var(--glow);
}
html[data-theme="cute"] .tilt-demo .mini-core { border-radius: 34px; }
.drag-stage {
  position: relative;
  height: 190px;
  margin-top: 1.2rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-soft) 55%, transparent);
  overflow: hidden;
}
.drag-item {
  position: absolute;
  left: 24px; top: 54px;
  width: 76px; height: 76px;
  display: grid; place-items: center;
  touch-action: none;
  user-select: none;
  cursor: grab;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: white;
  box-shadow: 0 12px 28px var(--glow);
  font-weight: 900;
  transition: border-radius .25s var(--ease), transform .15s ease;
}
html[data-theme="cute"] .drag-item { border-radius: 50%; }
.drag-item.is-dragging { cursor: grabbing; transform: scale(1.08); }
.signal-demo {
  position: relative;
  height: 190px;
  margin-top: 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, var(--surface-strong), var(--surface-soft));
  overflow: hidden;
}
.signal-demo svg { width: 100%; height: 100%; }
.signal-demo path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 7 9;
  animation: dash-run 7s linear infinite;
}
.signal-demo circle { fill: var(--primary); }

.portal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.15rem; }
.portal-card {
  position: relative;
  min-height: 320px;
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface-soft) 74%, transparent));
  text-decoration: none;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform .25s var(--ease), border-color .25s ease, box-shadow .25s ease, border-radius .25s var(--ease);
}
.portal-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}
.portal-card::before {
  content: "";
  position: absolute;
  width: 220px; height: 220px;
  right: -80px; top: -80px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  transition: transform .5s var(--ease), border-radius .3s var(--ease);
}
.portal-card:hover::before { transform: scale(1.12) rotate(18deg); }
html[data-theme="cute"] .portal-card::before { border-radius: 42% 58% 62% 38% / 52% 45% 55% 48%; background: var(--surface-soft); }
.portal-card .portal-symbol {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 1.2rem;
  margin-bottom: 3.2rem;
}
html[data-theme="cute"] .portal-symbol { border-radius: 50%; color: var(--primary); }
.portal-card h3 { margin-bottom: .65rem; }
.portal-card p { max-width: 520px; margin-bottom: 1.2rem; color: var(--muted); }
.portal-card footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: .72rem;
}
.portal-card footer strong { color: var(--accent); font-weight: 700; }

.theme-stage {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface-soft) 65%, transparent));
  box-shadow: var(--shadow-soft);
}
.theme-stage h2 { max-width: 8ch; }
.theme-stage .lede { max-width: 560px; }
.component-stack { display: grid; gap: .8rem; }
.component-sample {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .9rem;
  align-items: center;
  padding: .9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-strong);
  transition: border-radius .28s var(--ease), background .28s ease, transform .2s var(--ease);
}
.component-sample:hover { transform: translateX(4px); }
.component-icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  font-weight: 900;
}
.component-sample strong, .component-sample small { display: block; }
.component-sample small { color: var(--muted); }
.component-pill { padding: .4rem .62rem; border-radius: 999px; background: var(--surface-soft); color: var(--accent); font-size: .72rem; font-weight: 850; }

.final-cta { padding-top: 0; }
.cta-shell {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(380px 220px at 100% 0%, var(--glow-2), transparent 75%),
    linear-gradient(135deg, var(--surface-strong), var(--surface));
}
.cta-shell h2 { max-width: 10ch; margin-bottom: .8rem; }
.cta-shell p { max-width: 620px; margin-bottom: 0; color: var(--muted); }
.cta-actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: flex-end; }

.site-footer {
  padding: 3rem 0 2rem;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-2) 88%, transparent);
}
.footer-grid, .footer-bottom { display: flex; justify-content: space-between; gap: 2rem; }
.footer-brand p { margin: .2rem 0 0; color: var(--muted); font-size: .86rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.footer-links a { color: var(--muted); text-decoration: none; font-size: .85rem; }
.footer-links a:hover { color: var(--text); }
.footer-bottom {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: .7rem;
}

/* Room shell pages */
.room-page { min-height: 100vh; }
.room-hero {
  min-height: calc(100svh - 78px);
  display: grid;
  align-items: center;
  padding: clamp(4rem, 8vw, 7rem) 0;
}
.room-shell-grid {
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.room-copy h1 { max-width: 8ch; }
.room-copy .lede { max-width: 620px; }


.room-preview {
  position: relative;
  min-height: 520px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, var(--surface), var(--surface-soft));
  box-shadow: var(--shadow);
  overflow: hidden;
}
.room-preview .preview-grid {
  position: absolute; inset: 0;
  opacity: .38;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 38px 38px;
}
html[data-theme="cute"] .room-preview .preview-grid {
  background-image: radial-gradient(circle, rgba(223,121,181,.24) 1.3px, transparent 1.5px);
  background-size: 28px 28px;
}
.preview-message {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(82%, 420px);
  padding: 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
  text-align: center;
  box-shadow: var(--shadow-soft);
}
.preview-message .big-symbol {
  width: 72px; height: 72px;
  margin: 0 auto 1rem;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  font-size: 1.65rem;
  box-shadow: 0 12px 32px var(--glow);
}
.preview-message h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.preview-message p { margin-bottom: 0; color: var(--muted); }
.room-orb {
  position: absolute;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  animation: orbit-spin 20s linear infinite;
}
.room-orb.one { width: 240px; height: 240px; right: -80px; top: -70px; }
.room-orb.two { width: 140px; height: 140px; left: -44px; bottom: -28px; animation-direction: reverse; }
html[data-theme="cute"] .room-orb { border-radius: 44% 56% 62% 38% / 48% 41% 59% 52%; background: var(--surface-soft); }

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
.secret-toast {
  position: fixed;
  left: 50%; bottom: 1.4rem;
  z-index: 300;
  transform: translate(-50%, 160%);
  padding: .75rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-strong);
  box-shadow: var(--shadow);
  color: var(--text);
  font-weight: 850;
  transition: transform .35s var(--ease);
}
.secret-found .secret-toast { transform: translate(-50%, 0); }

@keyframes orbit-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes core-float { 50% { transform: translate(-50%, -55%) rotate(52deg); } }
@keyframes cute-float { 50% { transform: translate(-50%, -55%) rotate(38deg) scale(1.04); } }
@keyframes node-drift { 50% { transform: translateY(-10px) rotate(3deg); } }
@keyframes particle-float { to { transform: translate(18px, -28px) scale(1.25); opacity: .75; } }
@keyframes signal-run { to { left: calc(100% - 7px); } }
@keyframes dash-run { to { stroke-dashoffset: -128; } }

@media (max-width: 980px) {
  .hero-grid, .intro-grid, .theme-stage, .room-shell-grid { grid-template-columns: 1fr; }
  .hero-copy h1 { max-width: 10ch; }
  .world-window { min-height: 470px; }
  .intro-copy { padding-top: 0; }
  .capability-layout { grid-template-columns: 1fr; }
  .capability-menu { display: grid; grid-template-columns: repeat(2, 1fr); }
  .demo-grid { grid-template-columns: 1fr 1fr; }
  .demo-card:last-child { grid-column: 1 / -1; }
  .cta-shell { grid-template-columns: 1fr; }
  .cta-actions { justify-content: flex-start; }
}

@media (max-width: 760px) {
  .container { width: min(calc(100% - 1.4rem), 1180px); }
  .nav-wrap { min-height: 70px; position: relative; }
  .brand-copy small { display: none; }
  .theme-switch.desktop-theme { display: none; }
  .menu-button { display: block; position: relative; z-index: 202; }
  .site-nav {
    position: absolute;
    top: calc(100% + .55rem);
    right: 0;
    width: min(330px, calc(100vw - 1.4rem));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: .65rem;
    border-radius: var(--radius-md);
    background: var(--surface-strong);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-7px) scale(.985);
    transform-origin: top right;
    transition: opacity .18s ease, transform .18s var(--ease), visibility 0s linear .18s;
    z-index: 201;
  }
  .site-nav.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s;
  }
  .site-nav a { padding: .82rem .9rem; font-size: .98rem; }
  .site-nav .mobile-theme { display: flex; margin-top: .45rem; }
  .hero { min-height: auto; padding-top: 3rem; }
  h1 { font-size: clamp(3.3rem, 16vw, 5.2rem); }
  .world-window { min-height: 410px; }
  
  
  .proof-strip { grid-template-columns: 1fr 1fr; }
  .proof-strip > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); }
  .proof-strip > div:nth-child(4) { border-top: 1px solid var(--border); }
  .section-heading { grid-template-columns: 1fr; gap: 1rem; }
  .capability-menu, .capability-board, .demo-grid, .portal-grid { grid-template-columns: 1fr; }
  .demo-card:last-child { grid-column: auto; }
  .theme-stage { padding: 1.4rem; }
  .component-sample { grid-template-columns: auto 1fr; }
  .component-pill { grid-column: 2; justify-self: start; }
  .footer-grid, .footer-bottom { flex-direction: column; }
  .room-preview { min-height: 430px; }
  body::after { display: none; }
}

@media (min-width: 761px) {
  .mobile-theme { display: none; }
}

@media (max-width: 480px) {
  .brand-mark { width: 40px; height: 40px; flex-basis: 40px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .button, .hero-actions .text-button { width: 100%; }
  .world-window { min-height: 360px; }
  
  
  
  
  .proof-strip { grid-template-columns: 1fr; }
  .proof-strip > div + div { border-left: 0; border-top: 1px solid var(--border); }
  .portal-card { min-height: 300px; }
  .cta-actions { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  body::after { display: none; }
}

/* =========================================================
   V1.1 — Homepage refinement + playable Playground baseline
   ========================================================= */

/* Cleaner homepage hero: keep the visual energy, remove the duplicate demo panel. */
.hero-clean {
  min-height: auto;
  padding: clamp(4.25rem, 7vw, 6.5rem) 0 2.5rem;
}
.hero-clean-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.hero-clean .hero-copy h1 { max-width: 9.3ch; }
.hero-clean .hero-copy .lede { max-width: 660px; }
.hero-schematic {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  border-left: 1px solid var(--border);
  opacity: .88;
}
.hero-schematic::before,
.hero-schematic::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.hero-schematic::before {
  inset: 8% 0 8% 12%;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 55% 50%, #000 15%, transparent 76%);
  opacity: .62;
}
.hero-schematic::after {
  width: 190px;
  height: 190px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow), transparent 67%);
}
.schematic-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.schematic-ring.r1 { width: 110px; height: 110px; }
.schematic-ring.r2 { width: 205px; height: 205px; opacity: .7; }
.schematic-ring.r3 { width: 300px; height: 300px; opacity: .4; }
.schematic-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 18px var(--accent);
}
.schematic-dot.d1 { left: 48%; top: 31%; }
.schematic-dot.d2 { left: 70%; top: 55%; background: var(--primary); box-shadow: 0 0 18px var(--primary); }
.schematic-dot.d3 { left: 34%; top: 69%; background: var(--accent-2); box-shadow: 0 0 18px var(--accent-2); }
.schematic-label {
  position: absolute;
  left: 22%;
  top: 24%;
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
}
.schematic-label.two { left: auto; right: 10%; top: 47%; }
.schematic-label.three { left: 28%; top: auto; bottom: 14%; }
html[data-theme="cute"] .hero-schematic {
  border-left-style: dashed;
}
html[data-theme="cute"] .schematic-ring {
  border-radius: 44% 56% 62% 38% / 48% 41% 59% 52%;
}
html[data-theme="cute"] .schematic-dot { border-radius: 4px 50% 50% 50%; transform: rotate(45deg); }

/* Larger capability matrix. Decorative lines imply system wiring without graph simulation. */
.capability-network {
  position: relative;
  display: grid;
  grid-template-columns: minmax(250px, .62fr) minmax(0, 1.38fr);
  gap: clamp(1.2rem, 3vw, 2rem);
  min-height: 620px;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(500px 280px at 68% 26%, var(--glow-2), transparent 72%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 80%, transparent), color-mix(in srgb, var(--surface-soft) 54%, transparent));
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.capability-network::after {
  content: "SYSTEM / PROOF MAP";
  position: absolute;
  right: 1rem;
  top: .7rem;
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .14em;
}
.capability-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .42;
}
.capability-wires path {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1.15;
  stroke-dasharray: 6 8;
  vector-effect: non-scaling-stroke;
}
.capability-menu-expanded {
  position: relative;
  z-index: 2;
  justify-content: center;
  padding: .6rem 0;
}
.capability-menu-expanded .capability-chip {
  min-height: 58px;
  background: color-mix(in srgb, var(--surface-strong) 93%, transparent);
}
.capability-menu-expanded .capability-chip:hover,
.capability-menu-expanded .capability-chip:focus-visible {
  transform: translateX(7px);
  box-shadow: 0 10px 26px var(--glow);
}
.capability-board-expanded {
  position: relative;
  z-index: 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: .9rem;
  padding: 1.7rem 0;
}
.capability-board-expanded .capability-proof {
  min-height: 176px;
  display: flex;
  flex-direction: column;
}
.capability-proof.is-linked {
  transform: translateY(-4px) scale(1.012);
}
.proof-code {
  display: inline-flex;
  align-self: flex-start;
  margin-top: auto;
  padding-top: .9rem;
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: .67rem;
}

/* ---------------------------
   Playground room
   --------------------------- */
.playground-page {
  --pg-wall: color-mix(in srgb, var(--primary) 20%, var(--surface-strong));
  --pg-wall-edge: color-mix(in srgb, var(--accent) 42%, var(--border-strong));
  --pg-level-h: 2860px;
}
html[data-theme="cute"] .playground-page {
  --pg-wall: color-mix(in srgb, var(--primary) 13%, #fff);
  --pg-wall-edge: color-mix(in srgb, var(--primary) 45%, var(--border-strong));
}









.mobile-fallback-card {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 7vw, 4rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, var(--surface), var(--surface-soft));
  box-shadow: var(--shadow);
}
.mobile-fallback-card h2 { max-width: 11ch; }
.mobile-fallback-card p { max-width: 680px; color: var(--muted); }
.mobile-fallback-orbit {
  position: absolute;
  right: -30px;
  top: -45px;
  width: 180px;
  height: 180px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--accent);
  font-size: 2.5rem;
  opacity: .45;
}
html[data-theme="cute"] .mobile-fallback-orbit { border-radius: 44% 56% 62% 38% / 48% 41% 59% 52%; background: var(--surface-soft); }





.hud-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 14px var(--accent-2); }
.hud-divider { width: 1px; height: 16px; background: var(--border); }



.level-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .36;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 38px 38px;
}
html[data-theme="cute"] .level-grid {
  opacity: .62;
  background-image:
    radial-gradient(circle, rgba(223,121,181,.25) 1.3px, transparent 1.5px),
    radial-gradient(circle, rgba(168,137,239,.17) 1px, transparent 1.2px);
  background-size: 29px 29px, 47px 47px;
  background-position: 0 0, 12px 14px;
}





























.player-glyph { font-size: 1.1rem; font-family: var(--font-mono); transition: transform .18s var(--ease); }




























html[data-theme="cool"] .cute-clue,
html[data-theme="cute"] .cool-clue { opacity: .16; filter: blur(3px); transform: scale(.98); user-select: none; }








.dark-message {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255,255,255,.12);
  font-family: var(--font-mono);
  font-size: clamp(.8rem, 1.5vw, 1rem);
  letter-spacing: .2em;
  white-space: nowrap;
}






.finish-ring {
  width: 48px;
  height: 48px;
  margin-bottom: .4rem;
  border: 2px solid var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 24px var(--accent);
  animation: pg-finish-pulse 2.2s ease-in-out infinite;
}

html[data-theme="cute"] .finish-ring { border-radius: 14px 50% 50% 50%; transform: rotate(45deg); }









@keyframes secret-nudge {
  0%, 100% { box-shadow: 0 0 18px var(--glow-2); transform: scale(1); }
  50% { box-shadow: 0 0 34px var(--accent); transform: scale(1.08); }
}
@keyframes pg-finish-pulse {
  50% { transform: scale(1.08); opacity: .72; }
}

@media (max-width: 980px) {
  .hero-clean-grid { grid-template-columns: 1fr; }
  .hero-schematic { min-height: 230px; border-left: 0; border-top: 1px solid var(--border); }
  .capability-network { grid-template-columns: 1fr; min-height: 0; }
  .capability-wires { display: none; }
  .capability-menu-expanded { display: grid; grid-template-columns: repeat(2, 1fr); }
  .capability-board-expanded { padding-top: 0; }
  
}



@media (max-width: 760px) {
  .hero-schematic { display: none; }
  .hero-clean { padding-top: 3rem; }
  .capability-menu-expanded,
  .capability-board-expanded { grid-template-columns: 1fr; }
  .capability-network { padding: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .finish-ring { animation: none; }
  
  
}


/* =========================================================
   V0.4 — Playground refinement + orbiting room navigator
   ========================================================= */

/* ---------- Homepage orbiting room navigator ---------- */









.orbit-playground { --orbit-size: 145px; --orbit-speed: 5.8s; }
.orbit-lab { --orbit-size: 220px; --orbit-speed: 8.2s; opacity: .94; }
.orbit-3d { --orbit-size: 295px; --orbit-speed: 10.8s; opacity: .78; }
.orbit-room { --orbit-size: 365px; --orbit-speed: 13.2s; opacity: .62; }

























@keyframes world-orbit {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes world-unspin {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

/* ---------- Playground geometry + readability ---------- */
.playground-page { --pg-level-h: 2400px; }















html[data-theme="cute"] .playground-page {
  --pg-wall: #ebc6db;
  --pg-wall-edge: #cf6ca5;
}




html[data-theme="cute"] .level-grid {
  opacity: .40;
}









/* Hide the removed lighting experiment even if an older cached fragment survives. */


@media (max-width: 920px) {
  
  .orbit-room { --orbit-size: 310px; }
  .orbit-3d { --orbit-size: 250px; }
  .orbit-lab { --orbit-size: 190px; }
  .orbit-playground { --orbit-size: 125px; }
}
@media (max-width: 760px) {
  
  
  .orbit-room { --orbit-size: 255px; }
  .orbit-3d { --orbit-size: 205px; }
  .orbit-lab { --orbit-size: 155px; }
  .orbit-playground { --orbit-size: 105px; }
  
}



/* =========================================================
   V0.5 — 3D Space
   ========================================================= */





















































































/* Cute mode reinterprets the entire scene shell, not only its colors. */
































@keyframes three-cute-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-6deg); }
  50% { transform: translate3d(0, -12px, 0) rotate(7deg); }
}








/* =========================================================
   V0.6 — Experimental Lab + Living Physics Room
   ========================================================= */

/* ---------- Lab ---------- */
.lab-hero {
  position: relative;
  padding: clamp(4.5rem, 8vw, 8rem) 0 2rem;
}

.lab-hero-grid {
  display: grid;
  grid-template-columns: 1fr .78fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

.lab-hero h1 {
  max-width: 11ch;
  font-size: clamp(3.5rem, 7vw, 6.8rem);
}

.lab-rack {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 48%, var(--glow), transparent 36%),
    var(--surface);
  box-shadow: var(--shadow);
}

.lab-rack-grid,
.lab-gridlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .38;
}

.rack-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 1px solid var(--border-strong);
  border-radius: 24px;
  background: linear-gradient(145deg, var(--primary), var(--primary-2));
  color: #fff;
  box-shadow: 0 0 50px var(--glow);
  font-size: 2rem;
}

.rack-node {
  position: absolute;
  padding: .45rem .58rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-strong);
  color: var(--accent);
  font: 800 .67rem var(--font-mono);
  box-shadow: var(--shadow-soft);
}
.rack-node.n1 { left: 11%; top: 17%; }
.rack-node.n2 { right: 10%; top: 26%; }
.rack-node.n3 { left: 16%; bottom: 18%; }
.rack-node.n4 { right: 12%; bottom: 15%; }

.rack-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58%;
  height: 1px;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: .32;
}
.rack-line.l1 { transform: rotate(29deg); }
.rack-line.l2 { transform: rotate(151deg); }

html[data-theme="cute"] .lab-rack {
  border-radius: 44px;
  background:
    radial-gradient(circle at 50% 48%, rgba(216,106,167,.22), transparent 36%),
    linear-gradient(145deg, #f2ddea, #e7d1e3);
}
html[data-theme="cute"] .rack-core {
  border-radius: 50%;
  background: linear-gradient(145deg, #e577b1, #a67ed6);
}
html[data-theme="cute"] .rack-core::after {
  content: "♡";
  position: absolute;
  right: -16px;
  top: -18px;
  color: #c35b95;
  font-size: 1.2rem;
}

.lab-section {
  padding-top: clamp(4rem, 7vw, 7rem);
}

.lab-grid {
  display: grid;
  gap: 1rem;
}

.lab-grid.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lab-module {
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

html[data-theme="cute"] .lab-module {
  border-color: rgba(151,72,121,.24);
  border-radius: 32px;
  background: rgba(248,231,241,.90);
}

.lab-module-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
}

.lab-module-head span {
  color: var(--accent);
  font: 800 .66rem var(--font-mono);
  letter-spacing: .09em;
}

.lab-module-head h3 {
  margin: .25rem 0 0;
  font-size: clamp(1.45rem, 2.1vw, 2rem);
}

.lab-module > p {
  margin: 0 0 1rem;
  color: var(--muted);
}

.lab-reset {
  min-height: 38px;
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-strong);
  color: var(--text);
  font: 700 .72rem var(--font-ui);
  cursor: pointer;
}

html[data-theme="cute"] .lab-reset { border-radius: 999px; }

.lab-diagnostics {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .8rem;
}

.lab-diagnostics span {
  padding: .34rem .48rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  font: 700 .62rem var(--font-mono);
}

.lab-diagnostics b { color: var(--accent); }

.lab-stage {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 40%, var(--glow), transparent 55%),
    color-mix(in srgb, var(--bg-2) 72%, var(--surface) 28%);
  touch-action: none;
}

html[data-theme="cute"] .lab-stage {
  border-color: rgba(171,76,132,.30);
  border-radius: 25px;
  background:
    radial-gradient(circle at 50% 40%, rgba(216,106,167,.12), transparent 55%),
    #eedbe8;
}

.lab-entity {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: linear-gradient(145deg, var(--primary), var(--primary-2));
  color: #fff;
  box-shadow: 0 14px 35px rgba(0,0,0,.20), 0 0 24px var(--glow);
  font: 900 .65rem var(--font-mono);
  cursor: grab;
  user-select: none;
  touch-action: none;
  will-change: transform;
}

.lab-entity.player {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  font-size: 1rem;
}

.lab-entity.player.mini {
  width: 44px;
  height: 44px;
}

.lab-entity.block,
.lab-entity.cover {
  width: 86px;
  height: 86px;
  background: var(--surface-strong);
  color: var(--muted);
}

.lab-entity.is-dragging,
.lab-light.is-dragging {
  cursor: grabbing;
  filter: brightness(1.12);
  box-shadow: 0 18px 44px rgba(0,0,0,.25), 0 0 34px var(--accent);
}

html[data-theme="cute"] .lab-entity {
  border-radius: 50%;
  background: linear-gradient(145deg, #e67fb7, #a67ed7);
}

html[data-theme="cute"] .lab-entity.block,
html[data-theme="cute"] .lab-entity.cover {
  border-radius: 28px;
  background: linear-gradient(145deg, #f7e5ef, #e5cce0);
  color: #76586f;
}

.lab-wall {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-strong) 82%, var(--primary) 18%);
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
}

.pointer-stage {
  display: grid;
  place-items: center;
  perspective: 800px;
}

.pointer-test-card {
  --px: 50%;
  --py: 50%;
  width: min(310px, 72%);
  min-height: 180px;
  padding: 1.4rem;
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  background:
    radial-gradient(circle at var(--px) var(--py), var(--glow), transparent 45%),
    var(--surface-strong);
  box-shadow: var(--shadow-soft);
  transition: transform .08s linear;
  cursor: pointer;
}

.pointer-test-card span {
  color: var(--accent);
  font: 800 .68rem var(--font-mono);
}

.pointer-test-card strong,
.pointer-test-card small {
  display: block;
}

.pointer-test-card strong {
  margin-top: 2.4rem;
  font-size: 1.4rem;
}

.pointer-test-card small { margin-top: .3rem; color: var(--muted); }

.pointer-test-card.pulse {
  animation: lab-pulse .38s ease;
}

.parking-pad {
  position: absolute;
  right: 8%;
  top: 52%;
  width: 24%;
  height: 32%;
  display: grid;
  place-items: center;
  border: 1px dashed var(--border-strong);
  border-radius: 18px;
  color: var(--muted-2);
  font: 800 .62rem var(--font-mono);
}

.lab-secret {
  position: absolute;
  left: calc(39% + 21px);
  top: calc(32% + 21px);
  z-index: 4;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-strong);
  color: var(--accent);
  box-shadow: 0 0 25px var(--glow);
  cursor: pointer;
  transition: transform .2s ease, opacity .2s ease;
}

.lab-secret.is-collected {
  transform: scale(.1) rotate(50deg);
  opacity: 0;
  pointer-events: none;
}

.collectible-stage .cover { z-index: 8; }

.collectible-note {
  position: absolute;
  right: 7%;
  bottom: 9%;
  max-width: 150px;
  color: var(--muted);
  font: 700 .66rem var(--font-mono);
}

.theme-state-display {
  display: grid;
  gap: .8rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-2) 72%, var(--surface) 28%);
}

.lab-theme-clue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-strong);
}

.lab-theme-clue span {
  color: var(--muted);
  font: 800 .66rem var(--font-mono);
}

.lab-theme-clue strong {
  color: var(--accent);
  font-size: 1.7rem;
}

html[data-theme="cool"] .cute-only { display: none !important; }
html[data-theme="cute"] .cool-only { display: none !important; }

.lab-code-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .6rem;
}

.lab-code-row input {
  min-width: 0;
  padding: .75rem .85rem;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
}

.theme-state-display > p {
  margin: 0;
  color: var(--muted);
}

.theme-state-module.is-solved .theme-state-display {
  box-shadow: inset 0 0 0 1px var(--accent-2), 0 0 28px color-mix(in srgb, var(--accent-2) 22%, transparent);
}

.lighting-stage {
  --light-x: 25%;
  --light-y: 55%;
  min-height: 340px;
  background: #06080d;
}

.light-secret {
  position: absolute;
  color: #d9f9ff;
  font: 900 1.1rem var(--font-mono);
  letter-spacing: .18em;
  text-shadow: 0 0 18px rgba(99,230,255,.42);
}
.light-secret.s1 { left: 18%; top: 22%; }
.light-secret.s2 { right: 20%; top: 42%; }
.light-secret.s3 { left: 43%; bottom: 18%; }

.lab-light {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 12;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-strong);
  color: var(--accent);
  box-shadow: 0 0 30px var(--accent);
  cursor: grab;
  touch-action: none;
}

.light-mask {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background:
    radial-gradient(circle 105px at var(--light-x) var(--light-y),
      transparent 0 52px,
      rgba(2,4,8,.25) 76px,
      rgba(2,4,8,.96) 126px);
}

html[data-theme="cute"] .lighting-stage {
  background: #442b43;
}

html[data-theme="cute"] .lab-light {
  color: #d45f9c;
  box-shadow: 0 0 30px rgba(224,100,163,.55);
}

.maze-target {
  position: absolute;
  right: 6%;
  bottom: 7%;
  padding: .4rem .55rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--accent);
  font: 800 .62rem var(--font-mono);
}

.queued-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .9rem;
}

.queued-card {
  min-height: 210px;
  padding: 1.15rem;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.queued-card > span {
  color: var(--accent);
  font: 800 .62rem var(--font-mono);
  letter-spacing: .08em;
}

.queued-card h3 {
  margin: 1.5rem 0 .45rem;
  font-size: 1.25rem;
}

.queued-card p {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
}

.queued-card small {
  display: inline-block;
  margin-top: 1rem;
  color: var(--muted-2);
  font: 700 .62rem var(--font-mono);
}

html[data-theme="cute"] .queued-card {
  border-radius: 27px;
  background: rgba(248,231,241,.85);
}

@keyframes lab-pulse {
  0% { transform: scale(1); }
  45% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ---------- Living Physics Room ---------- */



























.world-scenery { z-index: 2; pointer-events: none; }

.world-message {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 12;
  max-width: 330px;
  padding: .8rem .9rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(6,10,12,.68);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-soft);
  pointer-events: none;
}

.world-message strong,
.world-message span {
  display: block;
}
.world-message span {
  margin-top: .2rem;
  color: var(--muted);
  font-size: .82rem;
}




































.scenery {
  position: absolute;
  display: block;
}

.scenery.moon {
  right: 8%;
  top: 10%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 12px solid rgba(153,193,175,.11);
  border-left-color: transparent;
  transform: rotate(-22deg);
}

.scenery.fern {
  bottom: 13%;
  width: 70px;
  height: 145px;
  opacity: .44;
}
.scenery.fern::before {
  content: "❧";
  color: #437c55;
  font-size: 6rem;
}
.scenery.f1 { left: 8%; transform: rotate(-10deg); }
.scenery.f2 { right: 8%; transform: rotate(11deg) scale(.8); }
.scenery.f3 { left: 43%; transform: rotate(3deg) scale(.65); }

.scenery.bone {
  left: 70%;
  bottom: 12%;
  width: 90px;
  height: 12px;
  border-radius: 999px;
  background: rgba(216,211,187,.24);
  transform: rotate(-16deg);
}
.scenery.bone::before,
.scenery.bone::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: -4px;
  border-radius: 50%;
  background: inherit;
}
.scenery.bone::before { left: -7px; }
.scenery.bone::after { right: -7px; }

.scenery.cloud,
.scenery.flower,
.scenery.pond,
.scenery.sparkle { display: none; }








/* Cute garden transformation */




html[data-theme="cute"] .world-message {
  border-color: rgba(156,73,126,.24);
  background: rgba(255,240,248,.82);
  color: #4b2c49;
}























html[data-theme="cute"] .scenery.fern,
html[data-theme="cute"] .scenery.bone,
html[data-theme="cute"] .scenery.moon { display: none; }

html[data-theme="cute"] .scenery.cloud,
html[data-theme="cute"] .scenery.flower,
html[data-theme="cute"] .scenery.pond,
html[data-theme="cute"] .scenery.sparkle { display: block; }

html[data-theme="cute"] .scenery.cloud {
  width: 95px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255,246,252,.65);
  box-shadow: 30px -14px 0 rgba(255,246,252,.62), 62px 0 0 rgba(255,246,252,.58);
}
html[data-theme="cute"] .scenery.cloud.c1 { left: 8%; top: 13%; }
html[data-theme="cute"] .scenery.cloud.c2 { right: 15%; top: 18%; transform: scale(.72); }

html[data-theme="cute"] .scenery.flower {
  bottom: 13%;
  width: 14px;
  height: 55px;
  background: #7faf75;
  border-radius: 999px;
}
html[data-theme="cute"] .scenery.flower::before {
  content: "✿";
  position: absolute;
  left: 50%;
  top: -20px;
  transform: translateX(-50%);
  color: #df6ca7;
  font-size: 2rem;
}
html[data-theme="cute"] .scenery.fl1 { left: 12%; }
html[data-theme="cute"] .scenery.fl2 { left: 48%; transform: scale(.8); }
html[data-theme="cute"] .scenery.fl3 { right: 13%; transform: scale(1.1); }

html[data-theme="cute"] .scenery.pond {
  right: 24%;
  bottom: 9%;
  width: 160px;
  height: 42px;
  border-radius: 50%;
  background: rgba(119,195,202,.34);
  border: 1px solid rgba(78,148,158,.24);
}

html[data-theme="cute"] .scenery.sparkle {
  color: rgba(191,78,138,.38);
  font-size: 1.25rem;
}
html[data-theme="cute"] .scenery.sp1 { left: 6%; top: 32%; }
html[data-theme="cute"] .scenery.sp2 { right: 8%; top: 38%; }
html[data-theme="cute"] .scenery.sp3 { left: 62%; top: 11%; }

@media (max-width: 1050px) {
  .lab-hero-grid,
  .physics-room-copy {
    grid-template-columns: 1fr;
  }

  .queued-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .lab-grid.two-col {
    grid-template-columns: 1fr;
  }

  

  

  
}

@media (max-width: 600px) {
  .lab-hero h1,
  .physics-room-copy h1 {
    font-size: clamp(3rem, 13vw, 4.5rem);
  }

  .lab-rack {
    min-height: 330px;
  }

  .lab-stage {
    min-height: 270px;
  }

  .queued-grid {
    grid-template-columns: 1fr;
  }

  

  

  

  

  .world-message {
    max-width: calc(100% - 2rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pointer-test-card,
  .lab-secret {
    transition: none !important;
  }
}


/* =========================================================
   V0.7 — Orbit interaction fix
   ========================================================= */

/* The decorative orbit rings never steal input from their planets. */




/* Scatter the initial phases so the planets never look like racers
   leaving the same starting line. */
.orbit-playground { --orbit-delay: -3.9s; }
.orbit-lab        { --orbit-delay: -1.7s; }
.orbit-3d         { --orbit-delay: -7.4s; }
.orbit-room       { --orbit-delay: -10.8s; }

/* Only an actual planet pauses its orbit. */






/* =========================================================
   V0.7 — Lab expansion + living agents
   ========================================================= */

.lab-jumpbar {
  position: sticky;
  top: 84px;
  z-index: 40;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 1rem;
  padding: .55rem .7rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-soft);
}
.lab-jumpbar > span {
  margin-right: .25rem;
  color: var(--muted-2);
  font: 800 .58rem var(--font-mono);
  letter-spacing: .08em;
}
.lab-jumpbar a {
  padding: .35rem .55rem;
  border-radius: 9px;
  color: var(--muted);
  font: 700 .68rem var(--font-ui);
  text-decoration: none;
}
.lab-jumpbar a:hover,
.lab-jumpbar a:focus-visible {
  background: var(--surface-soft);
  color: var(--text);
}
html[data-theme="cute"] .lab-jumpbar a { border-radius: 999px; }

.lab-grid-followup { margin-top: 1rem; }

.obstacle-stage { min-height: 340px; }
.lab-obstacle-label {
  position: absolute;
  left: 47%;
  top: 76%;
  transform: translateX(-50%);
  color: var(--muted-2);
  font: 800 .56rem var(--font-mono);
  letter-spacing: .08em;
}
.compact-block {
  width: 62px !important;
  height: 62px !important;
  border-radius: 16px !important;
}
.lab-parking-bay {
  right: 4%;
  top: 49%;
  width: 17%;
  height: 37%;
  display: grid;
  align-content: center;
  gap: .1rem;
  border-width: 2px;
  background: color-mix(in srgb, var(--surface-soft) 54%, transparent);
}
.lab-parking-bay span,
.lab-parking-bay small {
  display: block;
  text-align: center;
}
.lab-parking-bay small {
  color: var(--muted-2);
  font: 600 .55rem var(--font-mono);
}

/* Pressure plate */
.pressure-stage { min-height: 340px; }
.pressure-plate {
  position: absolute;
  left: 15%;
  bottom: 13%;
  width: 112px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--surface-strong);
  color: var(--muted);
  font: 800 .58rem var(--font-mono);
  box-shadow: inset 0 -7px 0 rgba(0,0,0,.12);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.pressure-plate.is-active {
  transform: translateY(5px);
  background: color-mix(in srgb, var(--accent-2) 28%, var(--surface-strong));
  color: var(--text);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.10), 0 0 24px color-mix(in srgb, var(--accent-2) 25%, transparent);
}
.pressure-door {
  z-index: 6;
  transition: opacity .2s ease, transform .25s ease;
}
.pressure-door.is-open {
  opacity: .18;
  transform: translateY(-82%);
}
.pressure-exit {
  position: absolute;
  right: 10%;
  top: 45%;
  color: var(--muted-2);
  font: 900 .65rem var(--font-mono);
}
html[data-theme="cute"] .pressure-plate::before {
  content: "♡";
  margin-right: .3rem;
  color: #c85896;
}

/* Surface comparison */
.surface-actions { display: flex; gap: .35rem; }
.surface-bench {
  display: grid;
  gap: .55rem;
  margin-top: 1rem;
}
.surface-lane {
  position: relative;
  height: 65px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: color-mix(in srgb, var(--bg-2) 70%, var(--surface) 30%);
}
.surface-lane > span {
  position: absolute;
  left: .7rem;
  top: .45rem;
  z-index: 2;
  color: var(--muted);
  font: 800 .56rem var(--font-mono);
}
.surface-lane i {
  position: absolute;
  left: 0;
  top: 50%;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: linear-gradient(145deg, var(--primary), var(--primary-2));
  box-shadow: 0 5px 18px var(--glow);
  will-change: transform;
}
.surface-lane.ice {
  background:
    linear-gradient(90deg, rgba(93,217,255,.06), rgba(93,217,255,.15)),
    color-mix(in srgb, var(--bg-2) 74%, var(--surface) 26%);
}
.surface-lane.sticky {
  background:
    radial-gradient(circle at 20% 50%, rgba(121,83,51,.12), transparent 30%),
    color-mix(in srgb, var(--bg-2) 74%, var(--surface) 26%);
}
.surface-lane.conveyor {
  background:
    repeating-linear-gradient(90deg, transparent 0 30px, rgba(115,231,255,.08) 30px 45px),
    color-mix(in srgb, var(--bg-2) 74%, var(--surface) 26%);
}
.surface-lane.conveyor b {
  position: absolute;
  right: .8rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font: 900 .85rem var(--font-mono);
}
html[data-theme="cute"] .surface-lane.ice { background: linear-gradient(90deg, #e3d8f7, #d3e9ee); }
html[data-theme="cute"] .surface-lane.sticky { background: linear-gradient(90deg, #efd4df, #e5c0d4); }
html[data-theme="cute"] .surface-lane.conveyor { background: repeating-linear-gradient(90deg, #ead2e2 0 30px, #dfb9d1 30px 45px); }

/* Magnet */
.magnet-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-bottom: .8rem;
}
.magnet-controls .is-active {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 18px var(--glow);
}
.magnet-controls > span {
  margin-left: auto;
  color: var(--muted);
  font: 700 .62rem var(--font-mono);
}
.magnet-stage { min-height: 340px; }
.magnet-source {
  position: absolute;
  left: 20%;
  top: 50%;
  z-index: 5;
  width: 86px;
  height: 110px;
  transform: translate(-50%, -50%);
  border: 12px solid var(--primary);
  border-right-color: var(--accent);
  border-radius: 50px 50px 18px 18px;
  background: transparent;
  box-shadow: 0 0 28px var(--glow);
}
.magnet-source span {
  position: absolute;
  bottom: -31px;
  color: var(--muted);
  font: 900 .62rem var(--font-mono);
}
.magnet-source span:first-child { left: 4px; }
.magnet-source span:last-child { right: 2px; }
.field-ring {
  position: absolute;
  left: 20%;
  top: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.field-ring.r1 { width: 150px; height: 150px; opacity: .55; }
.field-ring.r2 { width: 220px; height: 220px; opacity: .34; }
.field-ring.r3 { width: 290px; height: 290px; opacity: .18; }
.metal-orb {
  width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #9eb4c4, #4d6574) !important;
}
html[data-theme="cute"] .magnet-source {
  border-color: #e47daf;
  border-right-color: #a984d8;
}
html[data-theme="cute"] .magnet-source::after {
  content: "♡";
  position: absolute;
  left: 50%;
  top: 47%;
  transform: translate(-50%, -50%);
  color: #bf5b91;
  font-size: 1.5rem;
}

/* Teleporter */
.teleport-stage { min-height: 340px; }
.portal {
  position: absolute;
  top: 50%;
  width: 96px;
  height: 150px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 3px solid var(--accent);
  border-radius: 50%;
  box-shadow:
    inset 0 0 25px color-mix(in srgb, var(--accent) 24%, transparent),
    0 0 32px color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--accent);
  font: 900 .82rem var(--font-mono);
}
.portal-a { left: 11%; }
.portal-b { right: 11%; border-color: var(--primary-2); color: var(--primary-2); }
.portal::before,
.portal::after {
  content: "";
  position: absolute;
  inset: 10%;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .5;
}
.portal::after { inset: 25%; opacity: .25; }
.portal.portal-flash { animation: portal-flash .48s ease; }
.teleport-object {
  width: 54px !important;
  height: 54px !important;
  border-radius: 16px !important;
}
.teleport-status {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  color: var(--muted);
  font: 700 .62rem var(--font-mono);
  white-space: nowrap;
}
html[data-theme="cute"] .portal {
  border-radius: 45% 55% 48% 52%;
  border-color: #d968a4;
  color: #d968a4;
}
html[data-theme="cute"] .portal::before { content: "♡"; display: grid; place-items: center; font-size: 1.4rem; border: 0; }
html[data-theme="cute"] .portal-b { border-color: #a17bd4; color: #a17bd4; }

@keyframes portal-flash {
  0% { filter: brightness(1); transform: translateY(-50%) scale(1); }
  45% { filter: brightness(1.8); transform: translateY(-50%) scale(1.09); }
  100% { filter: brightness(1); transform: translateY(-50%) scale(1); }
}

/* ---------- Room creature locomotion ---------- */

/* Make the visible ground line match the Matter.js ground body. */










@keyframes creature-step {
  from { transform: scaleX(.88); opacity: .72; }
  to { transform: scaleX(1.05); opacity: .9; }
}
@keyframes creature-bob {
  from { translate: 0 1px; }
  to { translate: 0 -2px; }
}
@keyframes creature-idle {
  0%,100% { translate: 0 0; }
  50% { translate: 0 -1.5px; }
}

@media (max-width: 820px) {
  .lab-jumpbar {
    position: static;
  }
  .magnet-controls > span {
    width: 100%;
    margin-left: 0;
  }
}
@media (max-width: 600px) {
  .lab-parking-bay {
    width: 20%;
    right: 2%;
  }
  .portal {
    width: 70px;
    height: 112px;
  }
  .portal-a { left: 7%; }
  .portal-b { right: 7%; }
}



/* =========================================================
   V0.8 — World Hub + Lab interaction polish
   ========================================================= */

/* ---------- Homepage: world hub ---------- */















































.route-index {
  align-self: start;
  color: var(--muted-2);
  font: 800 .62rem var(--font-mono);
}

.route-symbol {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: var(--surface-strong);
  color: var(--accent);
  font-size: 1.35rem;
  box-shadow: 0 0 26px var(--glow);
}

.route-copy small,
.route-copy strong,
.route-copy em {
  display: block;
}

.route-copy small {
  color: var(--accent);
  font: 800 .61rem var(--font-mono);
  letter-spacing: .08em;
}

.route-copy strong {
  margin-top: .38rem;
  font-size: clamp(1.65rem, 2.5vw, 2.35rem);
}

.route-copy em {
  margin-top: .28rem;
  color: var(--muted);
  font-style: normal;
}

.route-enter {
  align-self: end;
  color: var(--muted);
  font: 800 .65rem var(--font-mono);
}










html[data-theme="cute"] .route-symbol {
  border-radius: 50%;
  background: linear-gradient(145deg, #f8e6f1, #e6cfeb);
}






























@keyframes omen-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ---------- Lab obstacle: one block, one goal ---------- */

.obstacle-simple-stage {
  min-height: 360px;
}

.obstacle-start-label {
  position: absolute;
  left: 50%;
  top: 6%;
  transform: translateX(-50%);
  color: var(--muted-2);
  font: 800 .57rem var(--font-mono);
  letter-spacing: .08em;
}

.obstacle-block {
  width: 66px !important;
  height: 66px !important;
}

.lab-goal {
  position: absolute;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .12rem;
  border: 1px dashed var(--border-strong);
  border-radius: 18px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-soft) 55%, transparent);
}

.lab-goal span {
  font: 900 .72rem var(--font-mono);
}
.lab-goal small {
  color: var(--muted-2);
  font: 600 .54rem var(--font-mono);
}

.obstacle-goal {
  left: 41%;
  bottom: 6%;
  width: 18%;
  height: 21%;
}

.lab-goal.is-complete {
  border-color: var(--accent-2);
  color: var(--accent-2);
  box-shadow: 0 0 26px color-mix(in srgb, var(--accent-2) 25%, transparent);
}

.module-success {
  position: absolute;
  left: 50%;
  top: 78%;
  z-index: 20;
  transform: translate(-50%, 12px) scale(.94);
  padding: .6rem .8rem;
  border: 1px solid var(--accent-2);
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--accent-2);
  font: 900 .66rem var(--font-mono);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.module-success.is-visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

/* ---------- Pressure plate: actually unavoidable ---------- */

.pressure-maze-stage {
  min-height: 360px;
}

.pressure-divider {
  border-radius: 0;
}

.pressure-maze-stage .pressure-door {
  z-index: 9;
  border-radius: 7px;
  transition: opacity .18s ease, transform .22s ease;
}

.pressure-maze-stage .pressure-door.is-open {
  opacity: .13;
  transform: translateX(90%);
  pointer-events: none;
}

.pressure-side-label {
  position: absolute;
  top: 5%;
  color: var(--muted-2);
  font: 800 .55rem var(--font-mono);
  letter-spacing: .07em;
}
.pressure-side-label.left { left: 6%; }
.pressure-side-label.right { right: 6%; }

.pressure-maze-stage .pressure-plate {
  left: 12%;
  bottom: 10%;
  width: 122px;
}

.pressure-maze-stage .pressure-exit {
  right: 7%;
  top: 37%;
  width: 24%;
  height: 27%;
}

html[data-theme="cute"] .pressure-maze-stage .pressure-door {
  background: linear-gradient(180deg, #e3afd0, #c88fbe);
}

/* ---------- Surface toy: drag + flick ---------- */

.surface-play-stage {
  position: relative;
  min-height: 400px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-2);
  touch-action: none;
}

.surface-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 25%;
  display: grid;
  align-content: end;
  padding: .7rem;
  border-right: 1px solid var(--border);
}

.surface-zone > span {
  color: var(--text);
  font: 900 .62rem var(--font-mono);
}
.surface-zone > small {
  margin-top: .15rem;
  color: var(--muted-2);
  font: 600 .54rem var(--font-mono);
}

.surface-zone.normal { left: 0; background: linear-gradient(180deg, transparent, rgba(111,143,182,.06)); }
.surface-zone.ice { left: 25%; background: linear-gradient(180deg, rgba(91,218,255,.05), rgba(91,218,255,.18)); }
.surface-zone.sticky { left: 50%; background: linear-gradient(180deg, rgba(127,79,63,.05), rgba(127,79,63,.19)); }
.surface-zone.conveyor {
  left: 75%;
  border-right: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(91,218,255,.08) 34px 50px),
    linear-gradient(180deg, rgba(91,218,255,.02), rgba(91,218,255,.10));
}

.surface-puck {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: linear-gradient(145deg, var(--primary), var(--primary-2));
  color: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.20), 0 0 24px var(--glow);
  cursor: grab;
  touch-action: none;
  user-select: none;
  will-change: transform;
}

.surface-puck.is-dragging {
  cursor: grabbing;
  box-shadow: 0 14px 36px rgba(0,0,0,.26), 0 0 34px var(--accent);
}

html[data-theme="cute"] .surface-play-stage {
  border-color: rgba(153,73,124,.26);
  border-radius: 28px;
  background: #edd9e7;
}
html[data-theme="cute"] .surface-zone.normal { background: linear-gradient(180deg, #f0dce8, #e8cfdf); }
html[data-theme="cute"] .surface-zone.ice { background: linear-gradient(180deg, #e3dcf5, #cedfe9); }
html[data-theme="cute"] .surface-zone.sticky { background: linear-gradient(180deg, #efcfdf, #ddaac7); }
html[data-theme="cute"] .surface-zone.conveyor {
  background:
    repeating-linear-gradient(90deg, #ead1e1 0 34px, #dcaecb 34px 50px);
}
html[data-theme="cute"] .surface-zone.sticky::after {
  content: "jam ♡";
  position: absolute;
  right: .6rem;
  top: .6rem;
  color: rgba(164,74,128,.45);
  font: 700 .55rem var(--font-mono);
}

/* ---------- Multi-magnet field ---------- */

.magnet-bank {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .45rem;
  margin-bottom: .8rem;
}

.magnet-control-group {
  display: grid;
  grid-template-columns: auto repeat(3, 1fr);
  gap: .28rem;
  align-items: center;
  padding: .4rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
}

.magnet-control-group > span {
  width: 24px;
  color: var(--accent);
  font: 900 .64rem var(--font-mono);
}

.magnet-control-group button {
  min-height: 34px;
  padding: .35rem .4rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-strong);
  color: var(--muted);
  font: 700 .57rem var(--font-ui);
  cursor: pointer;
}

.magnet-control-group button.is-active {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 18px var(--glow);
}

.multi-magnet-stage {
  position: relative;
  min-height: 440px;
  overflow: hidden;
}

.magnet-node {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 8;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .1rem;
  border: 8px solid var(--primary);
  border-right-color: var(--accent);
  border-radius: 50%;
  background: var(--bg);
  color: var(--text);
  box-shadow:
    0 0 0 42px rgba(91,218,255,.028),
    0 0 0 84px rgba(91,218,255,.016),
    0 0 28px var(--glow);
  cursor: grab;
  touch-action: none;
  user-select: none;
  will-change: transform;
}

.magnet-node::before,
.magnet-node::after {
  content: "";
  position: absolute;
  inset: -28px;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
  border-radius: 50%;
  pointer-events: none;
}
.magnet-node::after {
  inset: -52px;
  opacity: .45;
}

.magnet-node[data-mode="repel"] {
  border-color: #8e76ff;
  border-right-color: #d37cff;
}
.magnet-node[data-mode="repel"]::before,
.magnet-node[data-mode="repel"]::after {
  border-style: dashed;
  border-color: rgba(174,119,255,.34);
}
.magnet-node[data-mode="off"] {
  opacity: .5;
  box-shadow: none;
}
.magnet-node[data-mode="off"]::before,
.magnet-node[data-mode="off"]::after {
  opacity: .08;
}

.magnet-node.is-dragging {
  cursor: grabbing;
  filter: brightness(1.16);
}

.magnet-node span {
  color: var(--accent);
  font: 900 .8rem var(--font-mono);
}
.magnet-node small {
  color: var(--muted);
  font: 800 .48rem var(--font-mono);
}

.multi-metal-orb {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 12;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid #94aaba;
  border-radius: 50%;
  background: linear-gradient(145deg, #b4c5d1, #526b7a);
  color: white;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
  cursor: grab;
  touch-action: none;
  user-select: none;
  will-change: transform;
}

.multi-metal-orb.is-dragging {
  cursor: grabbing;
  box-shadow: 0 14px 34px rgba(0,0,0,.30), 0 0 25px rgba(118,222,255,.26);
}

.magnet-field-caption {
  position: absolute;
  left: 50%;
  bottom: .7rem;
  transform: translateX(-50%);
  color: var(--muted-2);
  font: 700 .57rem var(--font-mono);
}

html[data-theme="cute"] .magnet-control-group {
  border-color: rgba(153,73,124,.22);
  border-radius: 18px;
  background: rgba(244,220,236,.76);
}
html[data-theme="cute"] .magnet-control-group button {
  border-radius: 999px;
}
html[data-theme="cute"] .magnet-node {
  border: 7px solid #df72aa;
  border-right-color: #aa7bd8;
  background: #f4deec;
  box-shadow:
    0 0 0 42px rgba(219,104,166,.035),
    0 0 0 84px rgba(168,123,216,.022),
    0 0 28px rgba(211,91,153,.20);
}
html[data-theme="cute"] .magnet-node::before {
  content: "♡";
  inset: -22px;
  display: grid;
  place-items: start end;
  border: 0;
  color: rgba(192,76,137,.32);
  font-size: 1.1rem;
}
html[data-theme="cute"] .magnet-node::after {
  inset: -48px;
  border-color: rgba(190,84,142,.23);
}
html[data-theme="cute"] .multi-metal-orb {
  background: linear-gradient(145deg, #f2a8cb, #b993df);
  border-color: rgba(154,74,125,.28);
}

/* ---------- Responsive ---------- */

@media (max-width: 1050px) {
  

  

  .magnet-bank {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  

  

  

  

  .route-enter {
    grid-column: 2 / -1;
  }

  .surface-play-stage {
    min-height: 360px;
  }

  .surface-zone {
    width: 50%;
    height: 50%;
    bottom: auto;
  }
  .surface-zone.normal { left: 0; top: 0; }
  .surface-zone.ice { left: 50%; top: 0; }
  .surface-zone.sticky { left: 0; top: 50%; }
  .surface-zone.conveyor { left: 50%; top: 50%; }

  .pressure-maze-stage .pressure-plate {
    width: 105px;
  }
}




/* =========================================================
   V0.9 — Worlds Come Alive
   ========================================================= */

/* ---------- homepage trace toy ---------- */
.trace-card { overflow: hidden; }
.trace-card h3 { margin-bottom: .75rem; }
.trace-toy {
  position: relative;
  min-height: 250px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 22px;
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,50%), color-mix(in srgb,var(--glow) 90%,transparent), transparent 10rem),
    linear-gradient(145deg, color-mix(in srgb,var(--surface-strong) 95%,transparent), var(--bg-2));
  cursor: crosshair;
  touch-action: manipulation;
  isolation: isolate;
}
.trace-toy::before {
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(to bottom,#000,transparent 92%);
}
.trace-toy svg { position:absolute; inset:10% 4% 12%; width:92%; height:78%; overflow:visible; }
.trace-line { fill:none; stroke:var(--accent); stroke-width:2.2; stroke-linecap:round; filter:url(#traceGlow); }
.trace-echo { fill:none; stroke:var(--primary); stroke-width:10; opacity:.07; stroke-linecap:round; }
.trace-traveler circle { fill:var(--primary); stroke:var(--accent); stroke-width:2; filter:url(#traceGlow); }
.trace-traveler text { fill:#fff; font:900 9px var(--font-mono); pointer-events:none; }
.cute-trace-symbol { display:none; }
.trace-toy-hint { position:absolute; left:.8rem; bottom:.65rem; color:var(--muted-2); font:700 .54rem var(--font-mono); letter-spacing:.08em; }
.trace-click-ring { fill:none; stroke:var(--accent); stroke-width:2; transform-box:fill-box; transform-origin:center; animation:trace-ring .85s ease-out forwards; }
.trace-click-sparkle { fill:#c35190; font:900 17px var(--font-body); animation:trace-sparkle .85s ease-out forwards; }
.trace-toy.is-pulsing { animation:trace-shell-pulse .44s ease; }
html[data-theme="cute"] .trace-toy {
  border-color:rgba(161,71,126,.23);
  border-radius:32px;
  background:
    radial-gradient(circle at 73% 32%,rgba(255,255,255,.7),transparent 8rem),
    radial-gradient(circle at 35% 58%,rgba(219,102,163,.14),transparent 10rem),
    linear-gradient(145deg,#f6deec,#ead2e8);
}
html[data-theme="cute"] .trace-line { stroke:#d65e9e; stroke-width:3; }
html[data-theme="cute"] .trace-echo { stroke:#ae7fd8; opacity:.12; }
html[data-theme="cute"] .trace-traveler circle { fill:#e98cbd; stroke:#fff2f9; stroke-width:3; }
html[data-theme="cute"] .cool-trace-symbol { display:none; }
html[data-theme="cute"] .cute-trace-symbol { display:inline; }
@keyframes trace-ring { to { r:34; opacity:0; stroke-width:.5; } }
@keyframes trace-sparkle { from{opacity:1;transform:translateY(0) scale(.8)} to{opacity:0;transform:translateY(-24px) scale(1.35)} }
@keyframes trace-shell-pulse { 50%{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 25%,transparent),0 0 35px var(--glow)} }

/* ---------- Playground v0.9 cleanup ---------- */




/* ---------- shared loading states ---------- */








@keyframes v09-loader-spin{to{transform:rotate(360deg)}}

/* =========================================================
   ROOM v0.9 — illustrated living world
   ========================================================= */



.room-backdrop,.room-midground,.room-terrain,.room-ambient,.room-foreground { position:absolute; inset:0; pointer-events:none; }
.room-backdrop{z-index:1;overflow:hidden}.room-midground{z-index:2}.room-terrain{z-index:5}.room-ambient{z-index:6}.room-foreground{z-index:25;overflow:hidden}



.v09-sky-orb { position:absolute; right:9%; top:9%; width:110px; height:110px; border-radius:50%; background:radial-gradient(circle at 34% 32%,rgba(167,217,194,.15),rgba(39,79,67,.07) 58%,transparent 61%); box-shadow:0 0 70px rgba(111,174,154,.06); }
.v09-mountain { position:absolute; bottom:20%; width:42%; height:34%; background:linear-gradient(145deg,rgba(17,45,37,.65),rgba(8,24,25,.18)); clip-path:polygon(0 100%,18% 54%,34% 76%,52% 24%,72% 69%,86% 47%,100% 100%); opacity:.58; }
.v09-mountain.m1{left:-4%}.v09-mountain.m2{left:31%;height:29%;opacity:.42;transform:scaleX(1.2)}.v09-mountain.m3{right:-8%;height:38%;opacity:.35}
.v09-hill,.v09-cloud,.v09-distant-tree { display:none; }
.v09-fern { position:absolute; bottom:18%; width:90px; height:190px; opacity:.50; transform-origin:bottom center; animation:room-sway 6s ease-in-out infinite alternate; }
.v09-fern::before { content:"❧"; position:absolute; left:0; bottom:-15px; color:#4b7a53; font-size:8rem; line-height:1; }
.v09-fern.fern-a{left:5%;transform:rotate(-12deg)}.v09-fern.fern-b{left:42%;transform:scale(.72) rotate(7deg);animation-delay:-2s}.v09-fern.fern-c{right:4%;transform:scale(.88) rotate(12deg);animation-delay:-4s}
.v09-bush,.v09-flower,.v09-mushroom,.v09-pond { display:none; }
.v09-fossil { position:absolute; bottom:21%; color:rgba(174,190,160,.19); font:700 2rem var(--font-mono); transform:rotate(-12deg); }
.v09-fossil.fossil-a{left:18%}.v09-fossil.fossil-b{right:18%;font-size:2.8rem;transform:rotate(18deg)}
.terrain-piece { position:absolute; bottom:20%; transform:translateX(-50%); filter:drop-shadow(0 9px 10px rgba(0,0,0,.22)); transition:background .5s ease,border-color .5s ease; }
.terrain-log { left:28%; width:118px; height:24px; border:1px solid rgba(117,143,93,.24); border-radius:999px; background:linear-gradient(90deg,#263f2b,#395533 55%,#233827); }
.terrain-log::before,.terrain-log::after{content:"";position:absolute;width:24px;height:24px;border-radius:50%;top:-1px;background:#304532}.terrain-log::before{left:-5px}.terrain-log::after{right:-5px}
.terrain-rock { left:71%; width:66px; height:48px; border:1px solid rgba(112,138,128,.24); border-radius:46% 54% 40% 60%; background:linear-gradient(145deg,#3d5149,#20322c); }
.terrain-rock::after{content:"FOSSIL";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-12deg);color:rgba(214,224,212,.28);font:700 .40rem var(--font-mono)}
.terrain-mound { left:50%; width:108px; height:30px; border-radius:70% 70% 16% 16%; background:linear-gradient(180deg,#284735,#183324); }
.ambient-life { position:absolute; color:rgba(112,213,177,.45); font-size:1rem; animation:room-spore 8s ease-in-out infinite; }
.ambient-life.a1{left:11%;top:18%}.ambient-life.a2{left:34%;top:31%;animation-delay:-3s}.ambient-life.a3{right:11%;top:25%;display:none}.ambient-life.a4{right:28%;top:15%;animation-delay:-5s}.ambient-life.a5{left:57%;top:39%;animation-delay:-1s}
.v09-butterfly{display:none}.v09-flyer{position:absolute;left:72%;top:18%;width:28px;height:9px;border-radius:50% 10% 50% 10%;border-top:2px solid rgba(113,170,147,.24);transform:rotate(10deg);animation:room-fly 13s linear infinite}
.fg-leaf{position:absolute;bottom:-25px;width:130px;height:210px;background:linear-gradient(160deg,rgba(24,62,39,.85),rgba(18,45,31,.18));border-radius:100% 0 100% 0;opacity:.65}.fg-leaf.l1{left:-45px;transform:rotate(28deg)}.fg-leaf.l2{right:-60px;transform:rotate(-20deg) scaleX(-1)}
.fg-grass{display:none}

/* New room object art */

.object-shine { position:absolute; left:18%; top:14%; width:28%; height:18%; border-radius:50%; background:rgba(255,255,255,.15); transform:rotate(-25deg); pointer-events:none; }











/* New creature sprites override the old blob art completely. */












@keyframes creature-v09-walk{from{translate:0 1px;rotate:-1deg}to{translate:0 -3px;rotate:1deg}}
@keyframes creature-v09-idle{0%,100%{translate:0 0}50%{translate:0 -2px}}
@keyframes creature-v09-startle{0%{scale:1}50%{scale:1.08}100%{scale:1}}
@keyframes wing-twitch{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-10deg)}95%{transform:rotate(8deg)}}
@keyframes room-sway{from{translate:0 0}to{translate:5px 0}}
@keyframes room-spore{0%,100%{transform:translate(0,0);opacity:.15}50%{transform:translate(16px,-42px);opacity:.65}}
@keyframes room-fly{0%{translate:-40vw 8vh}50%{translate:12vw -4vh}100%{translate:44vw 6vh}}

/* Cute garden reinterpretation */


html[data-theme="cute"] .v09-sky-orb{right:10%;top:8%;width:100px;height:100px;background:radial-gradient(circle,#fff8d7 0 35%,rgba(255,239,184,.42) 36%,transparent 68%);box-shadow:0 0 80px rgba(255,226,164,.35)}
html[data-theme="cute"] .v09-mountain,html[data-theme="cute"] .v09-fern,html[data-theme="cute"] .v09-fossil,html[data-theme="cute"] .v09-flyer{display:none}
html[data-theme="cute"] .v09-hill{display:block;position:absolute;bottom:20%;width:60%;height:26%;border-radius:50% 50% 0 0;background:linear-gradient(180deg,rgba(181,211,169,.52),rgba(181,211,169,.12));filter:blur(.2px)}
html[data-theme="cute"] .v09-hill.h1{left:-9%;transform:scaleX(1.3)}html[data-theme="cute"] .v09-hill.h2{right:-16%;height:21%;background:linear-gradient(180deg,rgba(203,218,183,.48),rgba(203,218,183,.08))}
html[data-theme="cute"] .v09-cloud{display:block;position:absolute;width:95px;height:27px;border-radius:999px;background:rgba(255,248,252,.65);box-shadow:26px -13px 0 rgba(255,248,252,.62),55px 0 0 rgba(255,248,252,.58);animation:cloud-drift 18s ease-in-out infinite alternate}
html[data-theme="cute"] .v09-cloud.cloud-a{left:7%;top:17%}html[data-theme="cute"] .v09-cloud.cloud-b{right:17%;top:20%;transform:scale(.72);animation-delay:-7s}html[data-theme="cute"] .v09-cloud.cloud-c{left:48%;top:10%;transform:scale(.48);animation-delay:-11s}
html[data-theme="cute"] .v09-distant-tree{display:block;position:absolute;bottom:20%;width:15px;height:90px;border-radius:999px;background:rgba(106,150,95,.27)}html[data-theme="cute"] .v09-distant-tree::before{content:"";position:absolute;left:50%;bottom:55%;width:74px;height:56px;transform:translateX(-50%);border-radius:50%;background:rgba(143,181,127,.25)}html[data-theme="cute"] .v09-distant-tree.t1{left:15%;transform:scale(.7)}html[data-theme="cute"] .v09-distant-tree.t2{left:61%;transform:scale(.5)}html[data-theme="cute"] .v09-distant-tree.t3{right:11%;transform:scale(.85)}
html[data-theme="cute"] .v09-bush{display:block;position:absolute;bottom:18.5%;width:110px;height:50px;border-radius:55% 60% 18% 18%;background:linear-gradient(180deg,#95bd83,#76a86c);box-shadow:35px 7px 0 #86b174,-25px 9px 0 #9bc38a}html[data-theme="cute"] .v09-bush.bush-a{left:4%;transform:scale(.7)}html[data-theme="cute"] .v09-bush.bush-b{left:58%;transform:scale(.55)}html[data-theme="cute"] .v09-bush.bush-c{right:5%;transform:scale(.8)}
html[data-theme="cute"] .v09-flower{display:block;position:absolute;bottom:18.5%;width:9px;height:54px;border-radius:999px;background:#73a86b;transform-origin:bottom center;animation:flower-sway 4.5s ease-in-out infinite alternate}html[data-theme="cute"] .v09-flower::before{content:"✿";position:absolute;left:50%;top:-18px;transform:translateX(-50%);color:#dd66a1;font-size:1.8rem}html[data-theme="cute"] .v09-flower.flower-a{left:12%}html[data-theme="cute"] .v09-flower.flower-b{left:39%;transform:scale(.8);animation-delay:-2s}html[data-theme="cute"] .v09-flower.flower-c{right:29%;transform:scale(.9);animation-delay:-1s}html[data-theme="cute"] .v09-flower.flower-d{right:9%;transform:scale(1.08);animation-delay:-3s}
html[data-theme="cute"] .v09-mushroom{display:block;position:absolute;bottom:19%;width:16px;height:25px;border-radius:6px;background:#efe4cf}html[data-theme="cute"] .v09-mushroom::before{content:"";position:absolute;width:38px;height:20px;left:50%;top:-10px;transform:translateX(-50%);border-radius:60% 60% 30% 30%;background:#d792c0}html[data-theme="cute"] .v09-mushroom.mush-a{left:21%;transform:scale(.72)}html[data-theme="cute"] .v09-mushroom.mush-b{right:19%;transform:scale(.55)}
html[data-theme="cute"] .v09-pond{display:block;position:absolute;right:19%;bottom:16%;width:170px;height:42px;border-radius:50%;background:rgba(110,193,199,.32);border:1px solid rgba(78,148,158,.24);box-shadow:inset 0 6px 14px rgba(255,255,255,.18)}
html[data-theme="cute"] .terrain-log{background:linear-gradient(90deg,#9a684d,#c68a64 55%,#8a5a43);border-color:rgba(121,78,57,.22)}html[data-theme="cute"] .terrain-log::before,html[data-theme="cute"] .terrain-log::after{background:#a86f52}html[data-theme="cute"] .terrain-rock{background:linear-gradient(145deg,#e7bfd8,#cfa7c9);border-color:rgba(161,85,133,.25)}html[data-theme="cute"] .terrain-rock::after{content:"♡";color:rgba(146,68,119,.42);font-size:1rem}html[data-theme="cute"] .terrain-mound{background:linear-gradient(180deg,#a8c98f,#83b273)}
html[data-theme="cute"] .ambient-life{color:rgba(196,78,139,.42)}html[data-theme="cute"] .ambient-life.a3{display:block}html[data-theme="cute"] .v09-butterfly{display:block;position:absolute;left:15%;top:31%;color:#d35f9c;font-size:1.4rem;animation:butterfly-drift 10s ease-in-out infinite}
html[data-theme="cute"] .fg-leaf{display:none}html[data-theme="cute"] .fg-grass{display:block;position:absolute;bottom:-12px;width:80px;height:110px;background:linear-gradient(165deg,rgba(103,151,86,.58),rgba(103,151,86,0));clip-path:polygon(5% 100%,15% 25%,28% 100%,45% 4%,55% 100%,73% 31%,85% 100%)}html[data-theme="cute"] .fg-grass.g1{left:-10px}html[data-theme="cute"] .fg-grass.g2{left:47%;transform:scale(.7)}html[data-theme="cute"] .fg-grass.g3{right:-12px;transform:scaleX(-1)}






@keyframes cloud-drift{to{translate:18px 5px}}@keyframes flower-sway{to{rotate:4deg}}@keyframes butterfly-drift{0%,100%{transform:translate(0,0) rotate(-8deg)}50%{transform:translate(140px,-55px) rotate(10deg)}}@keyframes ear-twitch{0%,85%,100%{transform:rotate(0)}90%{transform:rotate(-9deg)}95%{transform:rotate(5deg)}}@keyframes tail-wag{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(10deg)}}
@keyframes world-shift-flash{0%{opacity:0}45%{opacity:1}100%{opacity:0}}


/* =========================================================
   3D v0.9 — full exhibit
   ========================================================= */

.hud-left{left:1.2rem;top:5.9rem}.hud-right{right:1.2rem;bottom:1.2rem;min-width:130px}@keyframes radar-spin{to{transform:rotate(360deg)}}


.artifact-tray{display:flex;gap:.7rem;margin-top:1rem}.artifact{position:relative;width:74px;height:74px;border:1px solid var(--border);border-radius:22px;background:linear-gradient(145deg,var(--surface-strong),var(--surface-soft));color:var(--accent);font:900 .68rem var(--font-mono);cursor:pointer;box-shadow:var(--shadow-soft);transition:transform .2s var(--ease),border-color .2s ease}.artifact:hover,.artifact:focus-visible{transform:translateY(-4px) rotate(-2deg)}.artifact.is-active{border-color:var(--accent);box-shadow:0 0 26px var(--glow)}.artifact i{position:absolute;inset:20%;border:1px solid currentColor;transform:rotate(45deg);opacity:.48}.artifact-b i{border-radius:50%}.artifact-c i{transform:rotate(0);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);background:currentColor;border:0;opacity:.28}

html[data-theme="cute"] .artifact{border-radius:50%;background:linear-gradient(145deg,#f5dbea,#ddc5ee);color:#c25792}html[data-theme="cute"] .artifact-a::after{content:"♡";position:absolute;right:7px;top:3px;color:rgba(190,78,137,.38)}


@media(max-width:760px){.terrain-log{width:82px;height:18px}.terrain-log::before,.terrain-log::after{width:18px;height:18px}.terrain-rock{width:48px;height:36px}.terrain-mound{width:74px;height:22px}.v09-fern{opacity:.32}.artifact{width:62px;height:62px}}



/* =========================================================
   V0.10 — Depth Playground + Lab Expansion
   ========================================================= */

/* Playground tutorial is one responsive unit now. */
.tutorial-group{position:absolute;left:68%;top:.8%;width:min(430px,30%);display:grid;grid-template-columns:62px minmax(0,1fr);gap:.75rem;align-items:center;z-index:35;pointer-events:none}




@media(max-width:1120px){.tutorial-group{left:64%;width:34%;grid-template-columns:54px minmax(0,1fr)}}

/* Theme geometry parity: skins may change, boxes do not. */
.pressure-maze-stage .pressure-plate,
html[data-theme="cute"] .pressure-maze-stage .pressure-plate{box-sizing:border-box;left:12%;bottom:10%;width:122px;height:50px;padding:0;margin:0;display:grid;place-items:center;align-content:center;line-height:1;transform:none}
.pressure-maze-stage .pressure-plate.is-active,
html[data-theme="cute"] .pressure-maze-stage .pressure-plate.is-active{transform:translateY(5px)}
.pressure-maze-stage .pressure-plate::before{position:static;margin:0 0 2px 0;line-height:1}

/* Magnet controls are contained even inside a half-width Lab card. */
.magnet-bank{grid-template-columns:1fr!important;min-width:0;width:100%}
.magnet-control-group{grid-template-columns:28px repeat(3,minmax(0,1fr))!important;min-width:0;width:100%;box-sizing:border-box}
.magnet-control-group button{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-lab-module="magnet"]{min-width:0;overflow:hidden}
@media(min-width:1700px){.magnet-bank{grid-template-columns:repeat(3,minmax(0,1fr))!important}.magnet-control-group{grid-template-columns:24px repeat(3,minmax(0,1fr))!important}}

/* Room flyer */



@keyframes flyer-float{to{translate:0 -2px}}
@keyframes flyer-wing{to{transform:scaleY(.55) rotate(-8deg)}}

/* 3D customizer */







/* CSS 3D shelf */
.artifact-3d{--rx:-8deg;--ry:0deg;--hover-rx:0deg;--hover-ry:0deg;position:relative;width:110px;height:110px;display:block;transform-style:preserve-3d;transform:rotateX(calc(var(--rx) + var(--hover-rx))) rotateY(calc(var(--ry) + var(--hover-ry)));transition:transform .18s ease}.artifact-3d .face{position:absolute;inset:0;display:grid;place-items:center;border:1px solid var(--border-strong);background:linear-gradient(145deg,#172637,#0e1520);backface-visibility:hidden}.face.front{transform:translateZ(28px)}.face.back{transform:rotateY(180deg) translateZ(28px)}.face.left{transform:rotateY(-90deg) translateZ(28px)}.face.right{transform:rotateY(90deg) translateZ(28px)}.face.top{transform:rotateX(90deg) translateZ(28px)}.face.bottom{transform:rotateX(-90deg) translateZ(28px)}
.artifact-crystal .crystal{width:110px;height:130px;clip-path:polygon(50% 0,90% 28%,72% 100%,28% 100%,10% 28%);background:linear-gradient(145deg,#69efff66,#787cffcc);box-shadow:0 0 40px var(--glow);display:grid;place-items:center}.crystal-core{font-style:normal;font-size:2rem;color:#dffcff}.flat-card{width:125px;height:90px}.flat-card i{position:absolute;inset:0;display:grid;place-items:center;border:1px solid var(--border-strong);border-radius:10px;backface-visibility:hidden;background:var(--surface-strong)}.card-front{transform:translateZ(4px)}.card-back{transform:rotateY(180deg) translateZ(4px)}.artifact-card.is-open .flat-card{transform:rotateY(calc(var(--ry) + 180deg)) rotateX(var(--rx))}.relic{width:125px;height:125px}.relic i,.relic b,.relic em{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg);border:2px solid var(--accent);width:80px;height:80px;box-shadow:0 0 28px var(--glow)}.relic b{width:52px;height:52px;transform:translate(-50%,-50%) rotateY(58deg) rotateZ(45deg)}.relic em{width:30px;height:30px;border-radius:50%;background:var(--accent)}
html[data-theme="cute"] .artifact-3d .face{background:linear-gradient(145deg,#f5ddeb,#ddc8ed);border-color:rgba(153,73,124,.22);color:#7a4f6d}

/* depth tunnel */
.depth-tunnel-section{height:210vh;position:relative}.depth-tunnel-spacer{height:100%}.depth-tunnel-view{position:sticky;top:0;height:100vh;overflow:hidden;background:radial-gradient(circle at 50% 52%,rgba(64,111,175,.12),transparent 24rem),var(--bg);perspective:900px}.depth-tunnel-copy{position:absolute;z-index:20;left:max(5vw,40px);top:12vh}.depth-tunnel-copy h2{max-width:8ch;font-size:clamp(2.5rem,6vw,6rem)}.depth-world{position:absolute;inset:0;transform-style:preserve-3d;perspective:900px}.depth-layer{position:absolute;inset:0;display:grid;place-items:center;transform-style:preserve-3d;pointer-events:none;will-change:transform,opacity}.text-layer{color:var(--accent);font:800 clamp(.8rem,2vw,1.4rem) var(--font-mono);letter-spacing:.2em}.shard-layer i{position:absolute;width:70px;height:120px;border:1px solid var(--border);background:var(--surface);transform:rotate(25deg)}.shard-layer i:nth-child(1){left:22%;top:34%}.shard-layer i:nth-child(2){right:21%;top:26%;transform:rotate(-35deg) scale(.7)}.shard-layer i:nth-child(3){left:52%;bottom:18%;transform:rotate(65deg) scale(.5)}.star-layer{font-size:clamp(2rem,5vw,5rem)}.star-layer i{position:absolute;font-style:normal;color:var(--accent)}.star-layer i:nth-child(1){left:18%;top:23%}.star-layer i:nth-child(2){right:17%;top:29%}.star-layer i:nth-child(3){left:34%;bottom:15%}.star-layer i:nth-child(4){right:31%;bottom:23%}.final-layer strong{font-size:clamp(2rem,5vw,5rem);letter-spacing:.08em}
html[data-theme="cute"] .depth-tunnel-view{background:radial-gradient(circle at 50% 52%,rgba(224,126,179,.19),transparent 25rem),linear-gradient(#f1dce9,#e8d8ef)}html[data-theme="cute"] .shard-layer i{border-radius:50%;background:rgba(255,238,248,.78);border-color:rgba(190,79,139,.2)}

/* model toy */
.model-button-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}.model-button-grid button,.model-actions button{min-height:42px;border:1px solid var(--border);border-radius:11px;background:var(--surface-strong);color:var(--muted);cursor:pointer}.model-button-grid button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);box-shadow:0 0 18px var(--glow)}.model-actions{display:flex;gap:.5rem}.model-actions button{flex:1}
html[data-theme="cute"] .model-button-grid button,html[data-theme="cute"] .model-actions button{border-radius:999px}

/* new lab force experiments */
.lab-mini-controls{display:flex;gap:.4rem;margin-bottom:.7rem;flex-wrap:wrap}.lab-mini-controls button{min-height:38px;padding:.4rem .65rem;border:1px solid var(--border);border-radius:10px;background:var(--surface-strong);color:var(--muted);cursor:pointer}.lab-mini-controls button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}.force-stage{position:relative;min-height:330px;overflow:hidden;border:1px solid var(--border);border-radius:18px;background:var(--bg-2);touch-action:none}.force-puck{position:absolute;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--border-strong);background:linear-gradient(145deg,var(--primary),var(--primary-2));color:white;box-shadow:0 8px 24px var(--glow);cursor:grab;touch-action:none}.wind-field{position:absolute;left:18%;right:18%;top:20%;bottom:20%;overflow:hidden;border:1px dashed var(--border);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 7%,transparent),transparent)}.wind-field i{position:absolute;left:-20%;width:55%;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:wind-line 1.5s linear infinite}.wind-field i:nth-child(1){top:20%}.wind-field i:nth-child(2){top:40%;animation-delay:-.35s}.wind-field i:nth-child(3){top:60%;animation-delay:-.75s}.wind-field i:nth-child(4){top:80%;animation-delay:-1.1s}.wind-stage[data-wind="left"] .wind-field i{animation-direction:reverse}.wind-stage[data-wind="off"] .wind-field i{animation-play-state:paused;opacity:.18}@keyframes wind-line{to{transform:translateX(240%)}}
.spring-meter{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.6rem;margin-bottom:.7rem;color:var(--muted);font:700 .58rem var(--font-mono)}.spring-meter::after{content:"";grid-column:2;height:7px;border:1px solid var(--border);border-radius:999px}.spring-meter i{grid-column:2;grid-row:1 / span 2;align-self:end;height:7px;width:0;border-radius:999px;background:var(--accent);box-shadow:0 0 15px var(--glow);z-index:2}.spring-track{position:absolute;left:50px;right:15%;top:62%;height:6px;border-radius:999px;background:var(--border)}.spring-handle{position:absolute;left:0;top:0;width:72px;height:76px;display:grid;place-items:center;cursor:ew-resize;touch-action:none}.spring-handle span{width:22px;height:70px;border:4px solid var(--accent);border-radius:10px;background:repeating-linear-gradient(180deg,transparent 0 8px,var(--accent) 8px 10px)}.spring-projectile{position:absolute;width:48px;height:48px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(145deg,var(--primary),var(--primary-2));color:white}.spring-target{position:absolute;right:6%;top:22%;width:100px;height:110px;display:grid;place-items:center;border:1px dashed var(--border-strong);border-radius:18px;color:var(--muted);font:800 .58rem var(--font-mono)}
.bridge-stage{min-height:350px}.bridge-bank{position:absolute;top:39%;width:28%;height:22%;display:grid;place-items:center;border:1px dashed var(--border);color:var(--muted);font:800 .58rem var(--font-mono)}.bridge-bank.left{left:3%}.bridge-bank.right{right:3%}.rotating-bridge{position:absolute;left:50%;top:50%;width:42%;height:36px;border:1px solid var(--border-strong);border-radius:18px;background:linear-gradient(90deg,var(--surface-strong),color-mix(in srgb,var(--accent) 18%,var(--surface-strong)));transform-origin:center}.bridge-handle{position:absolute;right:-20px;top:50%;width:40px;height:40px;transform:translateY(-50%);border:2px solid var(--accent);border-radius:50%;background:var(--surface);cursor:grab}.bridge-cargo{position:absolute;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,var(--primary),var(--primary-2));color:white;cursor:grab;touch-action:none}.linked-stage{position:relative;min-height:310px;display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;padding:1rem;border:1px solid var(--border);border-radius:18px;background:var(--bg-2)}.linked-control,.linked-remote{position:relative;z-index:2;padding:1rem;border:1px solid var(--border);border-radius:16px;background:var(--surface);display:grid;gap:.5rem}.linked-control label,.linked-remote span{color:var(--muted);font:800 .58rem var(--font-mono)}.linked-cable{position:absolute;inset:18% 10%;width:80%;height:64%;z-index:1}.linked-cable path{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:8 9;opacity:calc(.25 + var(--link-level,.2)*.65)}.linked-remote{height:130px}.linked-remote i{position:absolute;left:15px;bottom:20px;width:44%;height:24px;border-radius:10px;background:linear-gradient(90deg,var(--primary),var(--primary-2));box-shadow:0 0 20px var(--glow)}
html[data-theme="cute"] .force-stage,html[data-theme="cute"] .linked-stage{border-color:rgba(153,73,124,.22);border-radius:26px;background:#eedbe8}html[data-theme="cute"] .spring-handle span{border-color:#db72aa}html[data-theme="cute"] .rotating-bridge{border-radius:999px;background:linear-gradient(90deg,#e8b7d4,#c8a5e4)}


@media(max-width:700px){.depth-tunnel-section{height:170vh}.tutorial-group{left:60%;width:38%}.linked-stage{grid-template-columns:1fr}.model-button-grid{grid-template-columns:1fr}}


/* v0.10 parity refinements */
html[data-theme="cute"] .pressure-maze-stage .pressure-plate::before{position:absolute;left:50%;top:7px;transform:translateX(-50%);margin:0;line-height:1;pointer-events:none}
html[data-theme="cute"] .pressure-maze-stage .pressure-plate span{transform:translateY(7px)}



/* =========================================================
   V0.11 — Deepen + Repair
   ========================================================= */

/* 3D customizer: direct orbit lock + shape cycle */

.motion-group,.shape-group{display:grid;align-content:center}

/* CSS 3D collection: three stronger pieces */
.module-stack .face{box-shadow:inset 0 0 22px rgba(93,227,255,.04),0 0 18px rgba(83,225,255,.05)}.module-fin{position:absolute;left:50%;top:50%;width:150px;height:32px;border:1px solid var(--border-strong);background:linear-gradient(90deg,rgba(20,37,55,.92),rgba(9,18,29,.84));transform-style:preserve-3d;pointer-events:none}.fin-a{transform:translate(-50%,-50%) translateZ(4px) rotateY(90deg)}.fin-b{transform:translate(-50%,-50%) translateZ(-8px) rotateX(90deg)}.fin-c{width:95px;height:18px;transform:translate(-50%,-50%) translateZ(48px) rotateZ(45deg);opacity:.72}.module-scan{position:absolute;left:10%;right:10%;top:12%;height:2px;background:var(--accent);box-shadow:0 0 16px var(--accent);opacity:.72;animation:module-scan 3.4s ease-in-out infinite}.field-plate{width:160px;height:108px}.field-plate i{overflow:hidden;border-radius:16px!important;background:linear-gradient(145deg,color-mix(in srgb,var(--surface-strong) 86%,var(--accent) 14%),var(--surface-strong))!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent),0 0 24px var(--glow)}.field-glyph{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);font-size:2.1rem;color:var(--accent);opacity:.62}.field-edge{position:absolute;inset:8px;border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);border-radius:12px;transform:translateZ(8px);pointer-events:none}.relic-v11{width:150px!important;height:150px!important}.relic-v11 i{animation:relic-ring-a 7s linear infinite}.relic-v11 b{animation:relic-ring-b 5.5s linear infinite reverse}.relic-v11 em{animation:relic-core 1.8s ease-in-out infinite alternate}.relic-halo{position:absolute;left:50%;top:50%;width:128px;height:128px;transform:translate(-50%,-50%) translateZ(-12px);border-radius:50%;background:radial-gradient(circle,var(--glow),transparent 66%);filter:blur(5px);opacity:.8}@keyframes module-scan{0%,100%{top:12%;opacity:.2}50%{top:86%;opacity:.9}}@keyframes relic-ring-a{to{transform:translate(-50%,-50%) rotate(405deg)}}@keyframes relic-ring-b{to{transform:translate(-50%,-50%) rotateY(58deg) rotateZ(405deg)}}@keyframes relic-core{to{transform:translate(-50%,-50%) scale(1.22);box-shadow:0 0 36px var(--accent)}}html[data-theme="cute"] .module-fin{background:linear-gradient(90deg,#eed5e7,#dbc8ec);border-color:rgba(153,73,124,.24)}html[data-theme="cute"] .field-plate i{background:linear-gradient(145deg,#f7e5f0,#e7d5ef)!important}

/* The tunnel is now an actual journey rather than one panel. */
.depth-tunnel-v11{height:620vh}.depth-zone-meter{position:absolute;z-index:22;right:max(2vw,20px);top:50%;transform:translateY(-50%);display:grid;gap:.65rem}.depth-zone-meter i{width:7px;height:7px;border:1px solid var(--border-strong);border-radius:50%;background:transparent;transition:transform .2s ease,background .2s ease,box-shadow .2s ease}.depth-zone-meter i.is-active{transform:scale(1.7);background:var(--accent);box-shadow:0 0 15px var(--accent)}.flyby-layer i{position:absolute;width:clamp(90px,11vw,180px);height:clamp(18px,2vw,34px);border:1px solid var(--border-strong);background:linear-gradient(90deg,transparent,var(--surface-strong),transparent);box-shadow:0 0 30px var(--glow)}.flyby-layer i:nth-child(1){left:4%;top:28%;transform:rotate(18deg)}.flyby-layer i:nth-child(2){right:3%;top:58%;transform:rotate(-24deg) scale(1.35)}.flyby-layer i:nth-child(3){left:34%;bottom:7%;transform:rotate(55deg) scale(.72)}.gate-b i{width:min(27vw,330px)!important;transform:rotate(45deg) scale(.82)!important}.chamber-layer i,.chamber-layer b,.chamber-layer em{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid var(--border-strong);box-shadow:0 0 42px var(--glow)}.chamber-layer i{width:min(70vw,840px);height:min(58vh,620px);border-radius:42%}.chamber-layer b{width:min(44vw,530px);aspect-ratio:1;border-radius:50%;border-style:dashed}.chamber-layer em{width:min(18vw,220px);aspect-ratio:1;transform:translate(-50%,-50%) rotate(45deg);background:color-mix(in srgb,var(--surface) 55%,transparent)}.star-layer i:nth-child(5){left:9%;bottom:40%}.star-layer i:nth-child(6){right:8%;bottom:11%}.final-layer{align-content:center;gap:.6rem}.final-layer strong,.final-layer small{display:block;text-align:center}.final-layer small{color:var(--muted);font:800 .62rem var(--font-mono);letter-spacing:.12em}html[data-theme="cute"] .mid-ring-layer i,html[data-theme="cute"] .mid-ring-layer b,html[data-theme="cute"] .chamber-layer i,html[data-theme="cute"] .chamber-layer b,html[data-theme="cute"] .chamber-layer em{border-color:rgba(190,79,139,.30)}html[data-theme="cute"] .flyby-layer i{border-radius:999px;background:linear-gradient(90deg,transparent,rgba(255,238,248,.88),transparent)}

/* Lab theme parity: skin changes, geometry does not. */
.lab-module,.lab-stage,.force-stage,.lab-entity,.pressure-plate,.pressure-door,.spring-handle,.spring-projectile,.bridge-cargo,.rotating-bridge,.linked-control,.linked-remote{box-sizing:border-box}.pressure-maze-stage .pressure-plate,html[data-theme="cute"] .pressure-maze-stage .pressure-plate{left:12%;bottom:10%;width:122px;height:50px;padding:0;margin:0;transform:none;display:grid;place-items:center;line-height:1}.pressure-maze-stage .pressure-plate.is-active,html[data-theme="cute"] .pressure-maze-stage .pressure-plate.is-active{transform:translateY(5px)}html[data-theme="cute"] .pressure-maze-stage .pressure-plate::before{display:none!important}html[data-theme="cute"] .pressure-maze-stage .pressure-plate span{transform:none!important}

/* Spring: every launcher part shares the exact same centerline. */
.spring-stage-v11{--launcher-center:62%;min-height:350px}.spring-stage-v11 .spring-track{top:var(--launcher-center);transform:translateY(-50%);left:72px;right:15%;height:6px}.spring-stage-v11 .spring-handle,.spring-stage-v11 .spring-projectile{top:0;left:0}.spring-stage-v11 .spring-target{top:19%;right:6%;width:108px;height:116px}.spring-stage-v11::after{content:"LAUNCH LINE";position:absolute;left:76px;top:calc(var(--launcher-center) + 13px);color:var(--muted-2);font:700 .48rem var(--font-mono);letter-spacing:.08em;pointer-events:none}html[data-theme="cute"] .spring-stage-v11 .spring-track{background:rgba(178,96,145,.22)}

/* Rotating bridge: clear crossing corridor, same geometry both themes. */
.bridge-stage-v11{min-height:360px}.bridge-stage-v11 .bridge-bank{top:37%;height:26%;width:27%}.bridge-stage-v11 .bridge-bank.left{left:3%}.bridge-stage-v11 .bridge-bank.right{right:3%}.bridge-stage-v11 .rotating-bridge{left:50%;top:50%;width:40%;height:38px}.bridge-gap-label{position:absolute;left:50%;top:25%;transform:translateX(-50%);color:var(--muted-2);font:700 .5rem var(--font-mono);letter-spacing:.08em;pointer-events:none}.bridge-stage-v11::before,.bridge-stage-v11::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(transparent,var(--border-strong),transparent);opacity:.35}.bridge-stage-v11::before{left:31%}.bridge-stage-v11::after{left:69%}

/* Linked state: two aligned panels, no decorative cable. */
.linked-stage-v11{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;align-items:stretch;min-height:330px}.linked-stage-v11 .linked-control,.linked-stage-v11 .linked-remote{min-height:175px;padding:1.15rem;display:grid;align-content:center;gap:.85rem}.linked-panel-kicker{color:var(--muted);font:800 .58rem var(--font-mono);letter-spacing:.07em}.linked-slider-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.6rem}.linked-slider-row small{color:var(--muted-2);font:700 .55rem var(--font-mono)}.linked-slider-row input{width:100%;margin:0}.linked-readout{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}.linked-readout span{color:var(--muted-2);font:700 .55rem var(--font-mono)}.linked-readout strong{color:var(--accent);font:900 1.15rem var(--font-mono)}.linked-remote{height:auto!important}.linked-rail{position:relative;height:54px;margin-top:.25rem;border:1px solid var(--border);border-radius:14px;background:linear-gradient(180deg,var(--bg-2),var(--surface-soft));overflow:hidden}.linked-rail::before{content:"";position:absolute;left:18px;right:18px;top:50%;height:4px;transform:translateY(-50%);border-radius:999px;background:var(--border)}.linked-rail [data-linked-platform]{position:absolute;left:18px;top:50%;width:92px;height:28px;transform:translateY(-50%);border-radius:10px;background:linear-gradient(90deg,var(--primary),var(--primary-2));box-shadow:0 0 20px var(--glow);z-index:2;will-change:transform}.linked-end{position:absolute;top:50%;width:8px;height:24px;transform:translateY(-50%);border-radius:999px;background:var(--muted-2);opacity:.45}.linked-end.start{left:12px}.linked-end.finish{right:12px}.linked-remote-caption{color:var(--muted-2);font-size:.72rem}html[data-theme="cute"] .linked-stage-v11 .linked-control,html[data-theme="cute"] .linked-stage-v11 .linked-remote{border-radius:22px}html[data-theme="cute"] .linked-rail{border-color:rgba(153,73,124,.20);background:linear-gradient(180deg,#f8e8f2,#ead8e8)}

/* Room flyer reads as airborne even when left alone. */


@media(max-width:1200px){.object-group{grid-column:span 2}}
@media(max-width:760px){.object-group{grid-column:auto}.depth-tunnel-v11{height:480vh}.linked-stage-v11{grid-template-columns:1fr}.depth-zone-meter{right:12px}.bridge-stage-v11 .bridge-bank{width:26%}}
@media(prefers-reduced-motion:reduce){.module-scan,.relic-v11 i,.relic-v11 b,.relic-v11 em{animation:none!important}}


/* =========================================================
   V0.12 — Clear roles, bigger worlds, Room simulation overhaul
   ========================================================= */

/* ---------- 3D flagship customizer ---------- */








/* ---------- Lab: moved lightweight depth exhibits ---------- */
.lab-page .artifact-shelf-section {
  padding-top: clamp(4rem, 7vw, 7rem);
}
.lab-page .artifact-shelf-v11 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lab-page .artifact-shelf-v11 .css3d-artifact {
  min-height: 350px;
}
.lab-page .artifact-shelf-v11 .artifact-3d {
  width: 132px;
  height: 132px;
}

/* Simplify the box silhouette. One readable object beats a pile of planes. */
.artifact-module .module-fin.fin-b,
.artifact-module .module-fin.fin-c { display: none; }
.artifact-module .module-fin.fin-a {
  width: 112px;
  height: 24px;
  opacity: .72;
  transform: translate(-50%,-50%) translateZ(46px) rotateX(86deg);
}
html[data-theme="cute"] .artifact-module .module-fin { display: none; }
html[data-theme="cute"] .artifact-module .module-stack::after {
  content: "♡";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  transform: translate(-50%,-50%) translateZ(70px);
  border-radius: 50%;
  background: rgba(255,238,248,.9);
  color: #c65d98;
  box-shadow: 0 0 24px rgba(202,90,151,.22);
  font-size: 1.25rem;
}
.field-plate { width: 172px; height: 112px; }
.field-plate .card-front,
.field-plate .card-back {
  border-width: 2px !important;
}
.field-edge {
  inset: 5px;
  transform: translateZ(11px);
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 12%, transparent);
}

.depth-tunnel-v12 { height: 620vh; }
.lab-depth-tunnel { margin-top: clamp(3rem, 6vw, 6rem); }
.lab-depth-tunnel .depth-tunnel-view {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ---------- Wind must visibly initialize OFF ---------- */
.wind-stage:not([data-wind]) .wind-field,
.wind-stage[data-wind="off"] .wind-field {
  opacity: .12;
}
.wind-stage[data-wind="off"] .wind-field i {
  animation-play-state: paused;
  opacity: 0;
}
.wind-stage[data-wind="left"] .wind-field,
.wind-stage[data-wind="right"] .wind-field {
  opacity: 1;
}

/* ---------- Two-axis spring bench ---------- */
.spring-stage-v12 {
  min-height: 430px;
  --spring-x-pull: 0px;
  --spring-y-pull: 0px;
  background:
    linear-gradient(90deg, transparent 49.85%, color-mix(in srgb,var(--border) 45%,transparent) 50%, transparent 50.15%),
    linear-gradient(0deg, transparent 49.85%, color-mix(in srgb,var(--border) 45%,transparent) 50%, transparent 50.15%),
    var(--bg-2);
}
.spring-diagnostics { margin-bottom: .7rem; }
.spring-axis {
  position: absolute;
  z-index: 12;
  pointer-events: none;
}
.spring-axis-x {
  left: 25%;
  right: 25%;
  bottom: 8%;
  height: 58px;
}
.spring-axis-y {
  left: 3%;
  top: 25%;
  bottom: 25%;
  width: 58px;
}
.spring-axis::before {
  content: "";
  position: absolute;
  border: 1px solid var(--border);
  background: color-mix(in srgb,var(--surface) 72%,transparent);
  border-radius: 999px;
}
.spring-axis-x::before { left: 0; right: 0; top: 50%; height: 8px; transform: translateY(-50%); }
.spring-axis-y::before { top: 0; bottom: 0; left: 50%; width: 8px; transform: translateX(-50%); }

.spring-axis-label {
  position: absolute;
  color: var(--muted-2);
  font: 900 .58rem var(--font-mono);
  letter-spacing: .08em;
}
.spring-axis-x .spring-axis-label { left: 50%; top: -15px; transform: translateX(-50%); }
.spring-axis-y .spring-axis-label { top: 50%; left: -15px; transform: translateY(-50%); }

.spring-coil {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 84px;
  height: 18px;
  transform: translate(-50%,-50%);
  background:
    repeating-linear-gradient(90deg,
      transparent 0 6px,
      var(--accent) 6px 8px,
      transparent 8px 14px);
  opacity: .5;
  transition: width .08s linear, height .08s linear;
}
.spring-axis-y .spring-coil {
  width: 18px;
  height: 84px;
  background:
    repeating-linear-gradient(0deg,
      transparent 0 6px,
      var(--accent) 6px 8px,
      transparent 8px 14px);
}
.spring-axis-handle {
  position: absolute;
  left: 0;
  top: 0;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: linear-gradient(145deg,var(--surface-strong),var(--surface));
  color: var(--accent);
  box-shadow: 0 7px 22px var(--glow);
  font: 900 .72rem var(--font-mono);
  cursor: grab;
  touch-action: none;
  pointer-events: auto;
  user-select: none;
  will-change: transform;
}
.spring-axis-handle.is-dragging { cursor: grabbing; filter: brightness(1.12); }
html[data-theme="cute"] .spring-axis-handle { border-radius: 50%; }

.spring-projectile-v12 {
  position: absolute;
  left: 0;
  top: 0;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%,var(--accent),var(--primary));
  color: white;
  box-shadow: 0 10px 26px var(--glow);
  cursor: grab;
  touch-action: none;
  user-select: none;
  will-change: transform;
}
.spring-bounce-panel {
  position: absolute;
  z-index: 5;
  left: var(--cx);
  top: var(--cy);
  width: var(--len);
  height: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: linear-gradient(90deg,var(--surface-strong),var(--primary),var(--surface-strong));
  box-shadow: 0 0 18px var(--glow);
  transform: translate(-50%,-50%) rotate(var(--angle));
  transform-origin: center;
  pointer-events: none;
}

.spring-bouncy-wall {
  position: absolute;
  z-index: 4;
  right: 0;
  top: 7%;
  bottom: 7%;
  width: 16px;
  display: grid;
  place-items: center;
  border-left: 2px solid var(--accent-2);
  background: repeating-linear-gradient(0deg,
    color-mix(in srgb,var(--accent-2) 32%,transparent) 0 14px,
    transparent 14px 28px);
  box-shadow: -8px 0 22px color-mix(in srgb,var(--accent-2) 16%,transparent);
  pointer-events: none;
}
.spring-bouncy-wall span {
  writing-mode: vertical-rl;
  color: var(--accent-2);
  font: 900 .48rem var(--font-mono);
  letter-spacing: .12em;
}

/* ---------- Linked state: same visual center on both sides ---------- */
.linked-stage-v11 .linked-control,
.linked-stage-v11 .linked-remote {
  min-height: 205px;
  grid-template-rows: auto 1fr auto;
  align-content: stretch;
}
.linked-stage-v11 .linked-slider-row,
.linked-stage-v11 .linked-rail {
  align-self: center;
}
.linked-stage-v11 .linked-rail { margin: 0; }
.linked-stage-v11 .linked-readout { min-height: 30px; align-self: end; }
.linked-stage-v11 .linked-control,
.linked-stage-v11 .linked-remote { box-sizing: border-box; }

/* ---------- Room v0.12: clearer habitat + drop toolbar ---------- */













.room-ground-surface {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  top: 78%;
  height: 8px;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg,var(--accent-2) 0 18px,transparent 18px 31px);
  opacity: .5;
}
.room-ground-surface span {
  position: absolute;
  left: 1rem;
  top: .65rem;
  color: var(--muted-2);
  font: 800 .48rem var(--font-mono);
  letter-spacing: .08em;
  opacity: .65;
}
html[data-theme="cute"] .room-ground-surface {
  background:
    repeating-linear-gradient(90deg,#6caa67 0 14px,#8fc17b 14px 24px,transparent 24px 31px);
  opacity: .75;
}










@keyframes creature-reaction-pop {
  0% { opacity:0; transform:translate(-50%,8px) scale(.7); }
  18%,72% { opacity:1; transform:translate(-50%,0) scale(1); }
  100% { opacity:0; transform:translate(-50%,-10px) scale(.9); }
}



/* Cute flyer is purpose-built for the air now. */








@keyframes flyer-wing-left {
  from { transform: rotate(8deg); }
  to { transform: rotate(-16deg); }
}
@keyframes flyer-wing-right {
  from { transform: rotate(-8deg); }
  to { transform: rotate(16deg); }
}




@media (max-width: 760px) {
  
  .lab-page .artifact-shelf-v11 { grid-template-columns: 1fr; }
  .depth-tunnel-v12 { height: 500vh; }
  .spring-stage-v12 { min-height: 390px; }
  .spring-axis-x { left: 28%; right: 12%; }
  .spring-axis-y { top: 22%; bottom: 29%; }
  
}




/* =========================================================
   V0.13 — LIVING WORLDS
   Additive page-depth pass. Existing geometry stays intact.
   ========================================================= */

/* ---------- Home: living gateway previews ---------- */
















/* ---------- Lab v0.13: endpoint precision + artifact cleanup ---------- */
.linked-rail{--linked-inset:18px}.linked-rail [data-linked-platform]{left:var(--linked-inset)}
/* no foreground ornament is allowed to sit on the artifact face */
html[data-theme="cute"] .artifact-module .module-stack::after{display:none!important}.artifact-module .module-fin,.artifact-module .module-scan,.field-plate .field-glyph,.field-plate .field-edge{display:none!important}

/* ---------- Lab: new gravity well ---------- */
.gravity-controls label,.pendulum-controls label{display:flex;align-items:center;gap:.55rem;padding:.35rem .55rem;border:1px solid var(--border);border-radius:10px;color:var(--muted);font:700 .62rem var(--font-ui);background:var(--surface-strong)}.gravity-controls input,.pendulum-controls input{width:120px}.gravity-stage,.pendulum-stage{position:relative;min-height:390px;overflow:hidden;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--glow) 55%,transparent),transparent 13rem),linear-gradient(var(--surface-soft),var(--bg-2))}.gravity-grid{position:absolute;inset:0;opacity:.22;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(circle at 50% 50%,#000,transparent 78%)}.gravity-well,.gravity-orb{position:absolute;left:0;top:0;touch-action:none;user-select:none;will-change:transform;cursor:grab}.gravity-well{width:88px;height:88px;display:grid;place-items:center;align-content:center;border:1px solid var(--accent);border-radius:50%;background:radial-gradient(circle,var(--surface-strong) 0 35%,color-mix(in srgb,var(--accent) 32%,transparent) 36% 55%,transparent 57%);box-shadow:0 0 34px var(--glow),inset 0 0 30px var(--glow);color:var(--accent)}.gravity-well span{font-size:2rem;line-height:1}.gravity-well small{font:900 .48rem var(--font-mono);letter-spacing:.09em}.gravity-orb{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--border-strong);border-radius:50%;background:var(--surface-strong);color:var(--accent);box-shadow:0 0 18px var(--glow)}.gravity-well.is-dragging,.gravity-orb.is-dragging{cursor:grabbing}.gravity-stage[data-gravity-mode="repel"] .gravity-well{box-shadow:0 0 38px color-mix(in srgb,var(--primary-2) 42%,transparent),inset 0 0 32px color-mix(in srgb,var(--primary-2) 32%,transparent)}html[data-theme="cute"] .gravity-well{border-radius:46% 54% 51% 49%;background:radial-gradient(circle,#fff5fb 0 35%,rgba(225,143,188,.35) 36% 55%,transparent 57%)}html[data-theme="cute"] .gravity-orb{background:#fff1f8}

/* ---------- Lab: pendulum ---------- */
.pendulum-stage{background:linear-gradient(180deg,var(--surface-soft),var(--bg-2))}.pendulum-anchor,.pendulum-bob{position:absolute;left:0;top:0;z-index:4;touch-action:none;user-select:none;cursor:grab}.pendulum-anchor{width:32px;height:32px;border:1px solid var(--accent);border-radius:50%;background:var(--surface-strong);color:var(--accent);box-shadow:0 0 20px var(--glow)}.pendulum-bob{width:54px;height:54px;display:grid;place-items:center;border:1px solid var(--border-strong);border-radius:50%;background:linear-gradient(145deg,var(--surface-strong),var(--surface));color:var(--accent);box-shadow:0 14px 28px rgba(0,0,0,.18),0 0 20px var(--glow)}.pendulum-anchor:active,.pendulum-bob:active{cursor:grabbing}.pendulum-line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.pendulum-line line{stroke:var(--accent);stroke-width:2;filter:drop-shadow(0 0 7px var(--glow))}.pendulum-floor{position:absolute;left:1rem;right:1rem;bottom:1rem;padding-top:.5rem;border-top:1px dashed var(--border);color:var(--muted-2);font:800 .48rem var(--font-mono);letter-spacing:.09em;text-align:center}html[data-theme="cute"] .pendulum-bob{border-radius:48% 52% 50% 50%;background:#f4dbea;color:#bd5e96}

/* ---------- Lab: absurdly long spatial tunnel ---------- */
.depth-tunnel-v13{height:6200vh;min-height:6200vh}.depth-tunnel-v13 .depth-tunnel-view{background:radial-gradient(circle at 50% 50%,rgba(73,132,215,.16),transparent 21rem),linear-gradient(180deg,#060b12,#09111d 45%,#03060b);perspective:1050px}.depth-tunnel-v13 .depth-tunnel-copy{position:absolute;top:clamp(90px,12vh,150px);max-width:min(520px,52vw);pointer-events:auto}.depth-tunnel-v13 .depth-tunnel-copy>[data-tunnel-phase]{margin:.5rem 0 .8rem;color:var(--muted);font:800 .64rem var(--font-mono);letter-spacing:.1em}.tunnel-skip{pointer-events:auto;position:relative;z-index:30}.tunnel-exit-anchor{scroll-margin-top:110px}.depth-tunnel-v13 .depth-layer{filter:saturate(calc(.9 + var(--local,0)*.5));}.ribbon-layer i{position:absolute;left:50%;top:50%;width:min(76vw,920px);height:32px;border:1px solid color-mix(in srgb,var(--accent) 52%,transparent);border-radius:999px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 28%,transparent),transparent);box-shadow:0 0 34px var(--glow);transform-origin:center}.ribbon-layer i:nth-child(1){transform:translate(-50%,-50%) rotate(22deg)}.ribbon-layer i:nth-child(2){transform:translate(-50%,-50%) rotate(-31deg) scale(.78)}.ribbon-layer i:nth-child(3){transform:translate(-50%,-50%) rotate(67deg) scale(.55)}.ribbons-two i:nth-child(4){transform:translate(-50%,-50%) rotate(112deg) scale(.68)}.glyph-field{font:900 clamp(1rem,3vw,2rem) var(--font-mono);color:var(--accent)}.glyph-field i{position:absolute;font-style:normal;text-shadow:0 0 24px var(--accent)}.glyph-field i:nth-child(1){left:10%;top:16%}.glyph-field i:nth-child(2){right:12%;top:22%}.glyph-field i:nth-child(3){left:24%;bottom:18%}.glyph-field i:nth-child(4){right:23%;bottom:12%}.glyph-field i:nth-child(5){left:48%;top:8%}.glyph-field i:nth-child(6){right:43%;bottom:7%}.glyph-field i:nth-child(7){left:7%;top:55%}.glyph-field i:nth-child(8){right:8%;top:53%}.glyph-dense i{transform:scale(calc(.8 + var(--local,0)*1.4))}.rush-layer i{position:absolute;left:50%;top:50%;width:2px;height:min(75vh,720px);background:linear-gradient(transparent,var(--accent),transparent);box-shadow:0 0 18px var(--accent);transform-origin:center}.rush-layer i:nth-child(1){transform:translate(-50%,-50%) rotate(12deg) translateX(14vw)}.rush-layer i:nth-child(2){transform:translate(-50%,-50%) rotate(-18deg) translateX(-22vw)}.rush-layer i:nth-child(3){transform:translate(-50%,-50%) rotate(48deg) translateX(19vw)}.rush-layer i:nth-child(4){transform:translate(-50%,-50%) rotate(-62deg) translateX(-18vw)}.rush-layer i:nth-child(5){transform:translate(-50%,-50%) rotate(88deg) translateX(11vw)}.rush-layer i:nth-child(6){transform:translate(-50%,-50%) rotate(128deg) translateX(-12vw)}.portal-stack i,.portal-stack b,.portal-stack em,.final-chamber i,.final-chamber b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:2px solid color-mix(in srgb,var(--accent) 62%,transparent);border-radius:50%;box-shadow:0 0 60px var(--glow)}.portal-stack i{width:min(70vw,850px);aspect-ratio:1}.portal-stack b{width:min(47vw,560px);aspect-ratio:1;border-style:dashed}.portal-stack em{width:min(23vw,270px);aspect-ratio:1;border-width:5px}.portal-overload{filter:hue-rotate(calc(var(--local,0)*120deg)) saturate(1.55)}.final-chamber i{width:min(78vw,980px);height:min(68vh,700px);border-radius:42%;background:radial-gradient(circle,var(--glow),transparent 62%)}.final-chamber b{width:min(23vw,290px);aspect-ratio:1;border-width:5px;background:radial-gradient(circle,var(--accent),transparent 54%)}.overload-rush{filter:saturate(1.8) contrast(1.12)}html[data-theme="cute"] .depth-tunnel-v13 .depth-tunnel-view{background:radial-gradient(circle at 50% 48%,rgba(255,174,218,.28),transparent 22rem),linear-gradient(180deg,#f2ddea,#e3d4ef 42%,#d6cdf2 72%,#efd9ec)}html[data-theme="cute"] .ribbon-layer i{border-color:rgba(201,89,151,.42);background:linear-gradient(90deg,transparent,rgba(255,238,248,.8),transparent);box-shadow:0 0 36px rgba(216,106,167,.2)}html[data-theme="cute"] .glyph-field{color:#c85f9a}.depth-tunnel-v13 .final-layer{background:radial-gradient(circle at center,color-mix(in srgb,var(--glow) 70%,transparent),transparent 36%)}

/* ---------- 3D: selection + scene presets ---------- */


/* ---------- Playground: Chapter 02 ---------- */
.basket-assembly{position:absolute;right:18%;top:24%;width:110px;height:140px;z-index:4}.basket-board{position:absolute;right:0;top:0;width:72px;height:78px;border:3px solid var(--border-strong);border-radius:10px;background:color-mix(in srgb,var(--surface-strong) 68%,transparent)}.basket-rim{position:absolute;right:36px;top:70px;width:70px;height:16px;border:4px solid var(--accent);border-radius:50%;box-shadow:0 0 14px var(--glow)}.basket-net{position:absolute;right:45px;top:80px;width:50px;height:48px;border:1px dashed var(--muted);clip-path:polygon(0 0,100% 0,78% 100%,22% 100%)}@keyframes pg-score-pop{20%,65%{opacity:1;transform:scale(1.25)}100%{opacity:0;transform:translateY(-20px) scale(.9)}}

/* ---------- Room: editable living terrarium ---------- */
.habitat{position:absolute;display:block;color:var(--muted-2);font:800 .46rem var(--font-mono);letter-spacing:.06em}.habitat small{position:absolute;white-space:nowrap;opacity:.55}

@media(max-width:980px){.depth-tunnel-v13 .depth-tunnel-copy{max-width:70vw}}
@media(max-width:760px){.depth-tunnel-v13{height:4200vh;min-height:4200vh}.gravity-stage,.pendulum-stage{min-height:330px}.depth-tunnel-v13 .depth-tunnel-copy{left:20px;max-width:78vw}}
@media(prefers-reduced-motion:reduce){.depth-tunnel-v13{height:1800vh;min-height:1800vh}.depth-tunnel-v13 .rush-layer,.depth-tunnel-v13 .flyby-layer{opacity:.15!important}.depth-tunnel-v13 .ribbon-layer i{box-shadow:none}}


/* =========================================================
   V0.14 — PHYSICS, CONTROL & PSYCHEDELIC DEPTH
   ========================================================= */

/* 3D: stronger direct controls, no weak scene presets */

.range-group label{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.65rem}.range-group input{width:100%;accent-color:var(--accent)}.range-group output{min-width:2.6rem;text-align:right;color:var(--accent);font:900 .72rem var(--font-mono)}

/* Pendulum v0.14 */
.pendulum-controls{align-items:stretch}.pendulum-toggle-group{display:flex;align-items:center;gap:.35rem;padding:.35rem .45rem;border:1px solid var(--border);border-radius:11px;background:var(--surface-strong)}.pendulum-toggle-group span{margin-right:.2rem;color:var(--muted-2);font:800 .55rem var(--font-mono);letter-spacing:.06em}.pendulum-toggle-group button{min-height:34px}.pendulum-controls label{min-height:44px}.pendulum-controls output{min-width:2.1rem;color:var(--accent);font:900 .65rem var(--font-mono)}.pendulum-stage-v14{min-height:430px}.pendulum-stage-v14 .pendulum-bob{z-index:6}.pendulum-bob-two{width:48px;height:48px;border-radius:16px;background:linear-gradient(145deg,var(--primary-2),var(--accent))}.pendulum-bob-two[hidden]{display:none}.pendulum-rope-svg path{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;filter:drop-shadow(0 0 7px var(--glow))}.pendulum-stage-v14[data-constraint="rope"] .pendulum-rope-svg path{stroke-dasharray:5 3;stroke-width:3}.pendulum-stage-v14 .is-dragging{cursor:grabbing;filter:brightness(1.14) drop-shadow(0 0 12px var(--glow))}html[data-theme="cute"] .pendulum-toggle-group{border-radius:999px;background:#f7e7f1}

/* CSS 3D: restore actual depth and intentional impossible-card behavior */
.artifact-module-v14 .module-stack-v14{width:150px!important;height:104px!important;transform-style:preserve-3d}.artifact-module-v14 .module-stack-v14 .face{inset:auto!important;left:50%;top:50%;transform-origin:center;background:linear-gradient(145deg,#172b3c,#09111b)!important;border:1px solid rgba(104,232,255,.46)!important;box-shadow:inset 0 0 26px rgba(83,225,255,.06),0 0 15px rgba(83,225,255,.06)}.artifact-module-v14 .face.front,.artifact-module-v14 .face.back{width:150px;height:104px;margin-left:-75px;margin-top:-52px}.artifact-module-v14 .face.front{transform:translateZ(36px)}.artifact-module-v14 .face.back{transform:rotateY(180deg) translateZ(36px)}.artifact-module-v14 .face.left,.artifact-module-v14 .face.right{width:72px;height:104px;margin-left:-36px;margin-top:-52px}.artifact-module-v14 .face.left{transform:rotateY(-90deg) translateZ(75px)}.artifact-module-v14 .face.right{transform:rotateY(90deg) translateZ(75px)}.artifact-module-v14 .face.top,.artifact-module-v14 .face.bottom{width:150px;height:72px;margin-left:-75px;margin-top:-36px}.artifact-module-v14 .face.top{transform:rotateX(90deg) translateZ(52px)}.artifact-module-v14 .face.bottom{transform:rotateX(-90deg) translateZ(52px)}.module-core{position:absolute;left:50%;top:50%;width:74px;height:42px;transform:translate(-50%,-50%) translateZ(37px);border:1px solid rgba(104,232,255,.32);border-radius:8px;background:linear-gradient(90deg,rgba(104,232,255,.08),rgba(113,129,255,.16));box-shadow:0 0 24px rgba(104,232,255,.12);pointer-events:none}html[data-theme="cute"] .artifact-module-v14 .module-stack-v14 .face{background:linear-gradient(145deg,#f5ddeb,#dccbea)!important;border-color:rgba(187,92,145,.30)!important}.artifact-card-v14 .impossible-card{width:172px!important;height:112px!important;transition:transform .16s linear}.artifact-card-v14 .impossible-card.is-snapping{transition:transform .26s cubic-bezier(.2,.8,.2,1)}.artifact-card-v14 .card-face{position:absolute;inset:0;display:grid;place-items:center;border:2px solid var(--border-strong);border-radius:16px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface-strong) 86%,var(--accent) 14%),var(--surface-strong));backface-visibility:visible!important;transform:rotateY(var(--face-fix,0deg))!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent),0 0 24px var(--glow)}.artifact-card-v14 .card-face b{max-width:90%;text-align:center;color:var(--accent);font:900 .70rem var(--font-mono);letter-spacing:.06em;line-height:1.25}.artifact-relic-v14 .relic-v14{width:160px!important;height:160px!important;transform-style:preserve-3d}.relic-v14 .relic-frame{position:absolute;left:50%;top:50%;border:2px solid var(--accent);box-shadow:0 0 25px var(--glow);transform-style:preserve-3d;pointer-events:none}.relic-frame-a{width:122px;height:122px;transform:translate(-50%,-50%) translateZ(40px) rotate(45deg);animation:relic-v14-a 8s linear infinite}.relic-frame-b{width:96px;height:96px;border-style:dashed!important;transform:translate(-50%,-50%) translateZ(15px) rotateX(62deg) rotateZ(45deg);animation:relic-v14-b 6.3s linear infinite reverse}.relic-frame-c{width:72px;height:72px;transform:translate(-50%,-50%) translateZ(-18px) rotateY(66deg) rotateZ(45deg);animation:relic-v14-c 5.1s linear infinite}.relic-frame-d{width:52px;height:52px;border-radius:50%;transform:translate(-50%,-50%) translateZ(-42px);opacity:.7}.relic-v14 .relic-core{position:absolute;left:50%;top:50%;width:34px;height:34px;border:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--accent) 30%,color-mix(in srgb,var(--primary-2) 80%,transparent));box-shadow:0 0 35px var(--accent);transform:translate(-50%,-50%) translateZ(58px);animation:relic-v14-core 1.8s ease-in-out infinite alternate}.artifact-relic-v14 .relic-halo{transform:translate(-50%,-50%) translateZ(-55px)!important}@keyframes relic-v14-a{to{transform:translate(-50%,-50%) translateZ(40px) rotate(405deg)}}@keyframes relic-v14-b{to{transform:translate(-50%,-50%) translateZ(15px) rotateX(62deg) rotateZ(405deg)}}@keyframes relic-v14-c{to{transform:translate(-50%,-50%) translateZ(-18px) rotateY(66deg) rotateZ(405deg)}}@keyframes relic-v14-core{to{transform:translate(-50%,-50%) translateZ(66px) scale(1.22)}}html[data-theme="cute"] .relic-v14 .relic-frame{border-color:#d56da8;box-shadow:0 0 26px rgba(221,112,174,.22)}html[data-theme="cute"] .relic-v14 .relic-core{background:radial-gradient(circle at 35% 30%,#fff,#f08abd 34%,#b99bea);clip-path:polygon(50% 92%,8% 48%,16% 20%,38% 12%,50% 27%,62% 12%,84% 20%,92% 48%)}

/* Spatial tunnel v0.14: longer, denser, text-free through the middle */
.depth-tunnel-v13{height:12400vh;min-height:12400vh;--tunnel-hue:0deg;--tunnel-warp:.5;--tunnel-twist:0deg}.depth-tunnel-v13 .depth-tunnel-view{isolation:isolate;filter:hue-rotate(var(--tunnel-hue)) saturate(1.28)}.depth-tunnel-v13 .depth-tunnel-view::before,.depth-tunnel-v13 .depth-tunnel-view::after{content:"";position:absolute;inset:-28%;pointer-events:none;z-index:1;mix-blend-mode:screen;transform:rotate(var(--tunnel-twist)) scale(calc(1 + var(--tunnel-warp)*.18));will-change:transform,opacity}.depth-tunnel-v13 .depth-tunnel-view::before{background:repeating-conic-gradient(from 15deg at 50% 50%,transparent 0 8deg,color-mix(in srgb,var(--accent) 18%,transparent) 9deg 10deg,transparent 11deg 22deg);opacity:calc(.08 + var(--tunnel-warp)*.14);mask-image:radial-gradient(circle,transparent 0 11%,#000 18% 58%,transparent 78%)}.depth-tunnel-v13 .depth-tunnel-view::after{background:repeating-radial-gradient(circle at 50% 50%,transparent 0 26px,color-mix(in srgb,var(--primary-2) 18%,transparent) 27px 29px,transparent 30px 52px);opacity:calc(.06 + var(--tunnel-warp)*.13);transform:rotate(calc(var(--tunnel-twist) * -1)) scale(calc(1.1 + var(--tunnel-warp)*.22))}.depth-tunnel-v13 .depth-world{z-index:2}.depth-tunnel-v13 .depth-tunnel-copy{z-index:25}.depth-tunnel-v13 .text-layer{display:none!important}.psychedelic-field i,.psychedelic-field b,.psychedelic-field em,.kaleido-layer i,.kaleido-layer b,.kaleido-layer em,.spiral-layer i,.spiral-layer b,.spiral-layer em{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}.nebula-a i{width:min(92vw,1150px);height:min(82vh,820px);border-radius:50%;background:conic-gradient(from 0deg,transparent,var(--accent),transparent,var(--primary-2),transparent);filter:blur(28px);opacity:.22}.nebula-a b{width:min(58vw,720px);aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 18px,color-mix(in srgb,var(--accent) 32%,transparent) 20px 22px);opacity:.45}.prism-field i,.prism-field b,.prism-field em{width:min(68vw,820px);aspect-ratio:1;border:2px solid color-mix(in srgb,var(--accent) 50%,transparent);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);box-shadow:0 0 55px var(--glow)}.prism-field b{width:min(43vw,520px);transform:translate(-50%,-50%) rotate(33deg);border-color:color-mix(in srgb,var(--primary-2) 58%,transparent)}.prism-field em{width:min(22vw,270px);transform:translate(-50%,-50%) rotate(72deg);background:radial-gradient(circle,color-mix(in srgb,var(--accent) 24%,transparent),transparent 64%)}.kaleido-layer i,.kaleido-layer b,.kaleido-layer em{width:min(74vw,900px);aspect-ratio:1;background:repeating-conic-gradient(from 0deg,transparent 0 8deg,color-mix(in srgb,var(--accent) 24%,transparent) 9deg 12deg,transparent 13deg 22deg);clip-path:polygon(50% 0,61% 36%,100% 50%,61% 64%,50% 100%,39% 64%,0 50%,39% 36%);mix-blend-mode:screen}.kaleido-layer b{width:min(50vw,620px);transform:translate(-50%,-50%) rotate(22deg);filter:hue-rotate(100deg)}.kaleido-layer em{width:min(28vw,340px);transform:translate(-50%,-50%) rotate(-31deg);filter:hue-rotate(220deg)}.kaleido-heavy{filter:contrast(1.25) saturate(1.8)}.spiral-layer i,.spiral-layer b,.spiral-layer em{border-radius:50%;border:5px dotted color-mix(in srgb,var(--accent) 60%,transparent);box-shadow:0 0 55px var(--glow)}.spiral-layer i{width:min(80vw,960px);aspect-ratio:1}.spiral-layer b{width:min(55vw,660px);aspect-ratio:1;transform:translate(-50%,-50%) rotate(48deg);border-style:dashed}.spiral-layer em{width:min(27vw,330px);aspect-ratio:1;transform:translate(-50%,-50%) rotate(-33deg);border-width:9px}.chroma-field i,.chroma-field b{width:min(78vw,940px);height:16px;background:linear-gradient(90deg,transparent,#ff3d9a,#44e7ff,#a8ff4f,transparent);box-shadow:0 0 28px currentColor}.chroma-field i{transform:translate(-50%,-50%) rotate(28deg);filter:drop-shadow(var(--chroma) 0 0 #ff3d9a) drop-shadow(calc(0px - var(--chroma)) 0 0 #43e7ff)}.chroma-field b{transform:translate(-50%,-50%) rotate(-48deg);filter:hue-rotate(120deg)}html[data-theme="cute"] .depth-tunnel-v13 .depth-tunnel-view{filter:hue-rotate(var(--tunnel-hue)) saturate(1.42)}html[data-theme="cute"] .nebula-a i{background:conic-gradient(from 0deg,transparent,#ff8fc8,transparent,#8ee6ff,transparent,#ffe17d,transparent,#9aefbf,transparent)}

/* Playground: spring stays live while controls are pulled + readable field-transfer language */

/* Room: smooth ground + useful perch */



@media(max-width:760px){.depth-tunnel-v13{height:8400vh;min-height:8400vh}.pendulum-stage-v14{min-height:380px}.pendulum-toggle-group{width:100%;justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){.depth-tunnel-v13{height:3600vh;min-height:3600vh}.depth-tunnel-v13 .depth-tunnel-view{filter:none!important}.relic-v14 .relic-frame,.relic-v14 .relic-core{animation:none!important}}

/* ==========================================================
   v0.15 — smoother simulation, required game rooms, stronger artifacts
   ========================================================== */

/* Pendulum: centered composition, smaller bobs, triple mode, zoom-friendly breathing room. */
.pendulum-stage-v15{min-height:520px;background:radial-gradient(circle at 50% 42%,var(--glow),transparent 18rem),linear-gradient(180deg,var(--surface-soft),var(--bg-2))}
.pendulum-stage-v15 .pendulum-bob{width:46px;height:46px;z-index:6}
.pendulum-stage-v15 .pendulum-bob-two{width:43px;height:43px}
.pendulum-stage-v15 .pendulum-bob-three{width:40px;height:40px;border-radius:50%;background:linear-gradient(145deg,var(--accent),var(--primary-2));color:var(--bg)}
.pendulum-stage-v15 .pendulum-bob[hidden]{display:none}
.pendulum-stage-v15 .pendulum-rope-svg path{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;filter:drop-shadow(0 0 7px var(--glow))}
.pendulum-stage-v15[data-constraint="rope"] .pendulum-rope-svg path{stroke-dasharray:5 3;stroke-width:2.7}
.pendulum-stage-v15 .is-dragging{cursor:grabbing;filter:brightness(1.14) drop-shadow(0 0 12px var(--glow))}
.pendulum-controls{flex-wrap:wrap}.pendulum-controls label{min-width:245px}.pendulum-controls input[type="range"]{accent-color:var(--accent)}
html[data-theme="cute"] .pendulum-stage-v15 .pendulum-bob-three{background:linear-gradient(145deg,#f49bc6,#b997ec);color:white}

/* Artifact shelf: left/right are dimensional showpieces; middle stays the impossible text card. */
.artifact-module-v14,.artifact-relic-v14{perspective:1100px}
.artifact-module-v14 .module-stack-v14{filter:drop-shadow(0 22px 24px rgba(0,0,0,.20))}
.artifact-module-v14 .module-core{overflow:visible}
.artifact-module-v14 .module-core::before,.artifact-module-v14 .module-core::after{content:"";position:absolute;left:50%;top:50%;pointer-events:none;transform-style:preserve-3d}
.artifact-module-v14 .module-core::before{width:26px;height:26px;border:1px solid rgba(104,232,255,.7);transform:translate(-50%,-50%) translateZ(24px) rotate(45deg);box-shadow:0 0 24px rgba(104,232,255,.34)}
.artifact-module-v14 .module-core::after{width:9px;height:9px;border-radius:50%;background:#c9fbff;transform:translate(-50%,-50%) translateZ(42px);box-shadow:0 0 18px #68e8ff,0 0 42px rgba(104,232,255,.48)}
html[data-theme="cute"] .artifact-module-v14 .module-stack-v14 .face{background:linear-gradient(145deg,rgba(255,244,251,.42),rgba(215,185,238,.24))!important;border-color:rgba(210,102,164,.34)!important;box-shadow:inset 0 0 22px rgba(255,255,255,.34),0 0 18px rgba(224,112,174,.10);backdrop-filter:blur(2px)}
html[data-theme="cute"] .artifact-module-v14 .face.front{transform:translateZ(42px) rotateZ(2deg)}
html[data-theme="cute"] .artifact-module-v14 .face.back{transform:rotateY(180deg) translateZ(42px) rotateZ(-6deg)}
html[data-theme="cute"] .artifact-module-v14 .face.left{transform:rotateY(-74deg) translateZ(72px) rotateX(9deg)}
html[data-theme="cute"] .artifact-module-v14 .face.right{transform:rotateY(76deg) translateZ(72px) rotateX(-8deg)}
html[data-theme="cute"] .artifact-module-v14 .face.top{transform:rotateX(72deg) translateZ(55px) rotateZ(12deg)}
html[data-theme="cute"] .artifact-module-v14 .face.bottom{transform:rotateX(-74deg) translateZ(55px) rotateZ(-10deg)}
html[data-theme="cute"] .artifact-module-v14 .module-core{width:58px;height:58px;border-radius:18px;background:radial-gradient(circle at 38% 32%,#fff,#f2a5cd 34%,#b89ae9 72%);border-color:rgba(255,255,255,.62);transform:translate(-50%,-50%) translateZ(54px) rotate(12deg);box-shadow:0 0 34px rgba(228,107,173,.30)}
html[data-theme="cute"] .artifact-module-v14 .module-core::before{content:"♡";display:grid;place-items:center;width:34px;height:34px;border:0;color:white;font:900 1.4rem/1 sans-serif;transform:translate(-50%,-50%) translateZ(34px) rotate(-12deg);text-shadow:0 0 18px white}
html[data-theme="cute"] .artifact-module-v14 .module-core::after{width:10px;height:10px;background:#fff;box-shadow:28px -22px 0 -2px #f5a7d0,-31px 19px 0 -3px #b99bea,0 0 18px white;transform:translate(-50%,-50%) translateZ(56px)}
.artifact-relic-v14 .relic-v14{width:180px!important;height:180px!important;filter:drop-shadow(0 25px 28px rgba(0,0,0,.18))}
.relic-v14 .relic-frame{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 9%,transparent),transparent 58%);backdrop-filter:blur(1px)}
.relic-frame-a{width:138px!important;height:138px!important;border-width:3px!important}
.relic-frame-b{width:108px!important;height:108px!important;border-width:2px!important}
.relic-frame-c{width:82px!important;height:82px!important;border-width:2px!important}
.relic-frame-d{width:58px!important;height:58px!important;border-width:2px!important}
.relic-v14 .relic-core{width:42px!important;height:42px!important;box-shadow:0 0 34px var(--accent),0 0 78px color-mix(in srgb,var(--accent) 45%,transparent)!important}
.artifact-relic-v14 .relic-halo{width:150px!important;height:150px!important;border:1px solid color-mix(in srgb,var(--accent) 26%,transparent)!important;border-radius:50%!important;box-shadow:inset 0 0 44px color-mix(in srgb,var(--accent) 10%,transparent),0 0 44px var(--glow)!important}
html[data-theme="cute"] .relic-v14 .relic-core{width:48px!important;height:48px!important;box-shadow:0 0 38px rgba(236,117,180,.65),0 0 85px rgba(185,151,235,.35)!important}

/* 3D: use desktop side space for a sticky control dock while keeping the scene visible. */


/* Playground success language: catch -> green -> familiar bubble -> pop -> route open. */
.catch-bucket{right:18%;top:28%;width:126px;height:122px;z-index:5}
.catch-bucket .bucket-shell{position:absolute;left:10px;right:10px;top:4px;bottom:4px;border:4px solid var(--accent);border-top-width:8px;border-radius:14px 14px 32px 32px;background:linear-gradient(180deg,transparent 0 18%,color-mix(in srgb,var(--surface-strong) 76%,transparent) 19% 100%);box-shadow:0 0 20px var(--glow),inset 0 -18px 28px rgba(0,0,0,.08)}
.catch-bucket .bucket-inside{position:absolute;left:19px;right:19px;bottom:14px;height:48px;border-radius:8px 8px 22px 22px;background:color-mix(in srgb,var(--accent) 7%,var(--surface-strong));transition:background .25s ease,box-shadow .25s ease}
.catch-bucket small{position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);white-space:nowrap;color:var(--muted-2);font:900 .46rem var(--font-mono);letter-spacing:.08em}


html[data-theme="cute"] .catch-bucket .bucket-shell{border-color:#d76aa6;background:linear-gradient(180deg,transparent 0 18%,rgba(255,240,249,.76) 19% 100%)}













/* Field-transfer v0.15: three magnets, strong shared dial, mandatory divider wall. */


@media(max-width:760px){.pendulum-stage-v15{min-height:400px}.pendulum-controls label{min-width:100%}}



/* v0.16 small controlled update: scoped changes only. */
















.catch-bucket .bucket-shell{border-top:0!important;border-width:5px!important;border-radius:8px 8px 28px 28px!important;background:linear-gradient(180deg,transparent 0 18%,color-mix(in srgb,var(--surface-strong) 76%,transparent) 19% 100%)!important}
.tunnel-page .depth-tunnel-v13{height:6200vh;min-height:6200vh}
@media(max-width:760px){.tunnel-page .depth-tunnel-v13{height:4200vh;min-height:4200vh}}
@media(prefers-reduced-motion:reduce){.tunnel-page .depth-tunnel-v13{height:1800vh;min-height:1800vh}}


/* v0.17 — small cleanup + consolidation */
.lab-module-wide { grid-column: 1 / -1; }
.collision-combined-stage { min-height: 430px; }
.collision-combined-stage .collision-target { right: 3%; bottom: 5%; }

/* Pressure exit gets the same clear success language as other goals. */
.pressure-exit.is-complete {
  border-color: #55d99a !important;
  color: #55d99a !important;
  background: color-mix(in srgb, #55d99a 12%, var(--surface-soft));
  box-shadow: 0 0 26px rgba(85,217,154,.38), inset 0 0 18px rgba(85,217,154,.08);
}

/* One shared Wind + Spring chamber. */
.force-combo-toolbar { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:.7rem; }
.force-combo-toolbar .lab-mini-controls, .force-combo-toolbar .spring-diagnostics { margin-bottom:0; }
.wind-spring-stage { min-height: 440px; }
.wind-spring-stage .wind-field { left: 12%; right: 12%; top: 12%; bottom: 18%; z-index: 1; }
.wind-spring-stage .spring-axis, .wind-spring-stage .spring-projectile { z-index: 12; }
.wind-spring-stage[data-wind="off"] .wind-field { opacity:.12; }
.wind-spring-stage[data-wind="off"] .wind-field i { animation-play-state:paused; opacity:0; }
.wind-spring-stage[data-wind="left"] .wind-field i { animation-direction:reverse; }

/* Linked State becomes a tiny remote pong blocker. */
.linked-pong-room { position:relative; min-height:150px; overflow:hidden; border:1px solid var(--border); border-radius:14px; background:linear-gradient(180deg,var(--bg-2),var(--surface-soft)); }
.linked-pong-room::before { content:""; position:absolute; left:0; right:0; top:56%; height:1px; background:color-mix(in srgb,var(--border) 72%,transparent); opacity:.45; }
.linked-pong-room [data-linked-platform] { position:absolute; left:0; top:calc(56% - 10px); width:92px; height:20px; border-radius:10px; background:linear-gradient(90deg,var(--primary),var(--primary-2)); box-shadow:0 0 20px var(--glow); will-change:transform; }
.linked-pong-room [data-linked-ball] { position:absolute; left:50%; top:0; width:18px; height:18px; border-radius:50%; background:var(--accent); box-shadow:0 0 18px var(--accent); will-change:transform; }
html[data-theme="cute"] .linked-pong-room { border-color:rgba(153,73,124,.20); background:linear-gradient(180deg,#f8e8f2,#ead8e8); }

/* Pendulum controls: smaller useful range, shorter tracks. */
.pendulum-controls label { min-width: 205px; }
.pendulum-controls label input[type="range"] { width: 150px; max-width: 45vw; }

/* Flyers are airborne; only ground creatures keep contact shadows. */


@media(max-width:760px){
  .lab-module-wide { grid-column:auto; }
  .force-combo-toolbar { display:grid; }
  .pendulum-controls label { min-width:100%; }
  .pendulum-controls label input[type="range"] { width:min(160px,50vw); }
}

.playground-page { --pg-level-h: 1850px; }








/* =========================================================
   v0.18 — Royal theme + small controlled cleanup
   ========================================================= */
html[data-theme="royal"] {
  color-scheme: dark;
  --bg: #0b0710;
  --bg-2: #150d1a;
  --surface: rgba(31, 19, 36, .84);
  --surface-strong: #211329;
  --surface-soft: rgba(216, 181, 91, .11);
  --text: #fff7e7;
  --muted: #c8b995;
  --muted-2: #94836d;
  --primary: #7c3f8f;
  --primary-2: #a8445c;
  --accent: #d8b45a;
  --accent-2: #6f9d75;
  --border: rgba(232, 207, 139, .16);
  --border-strong: rgba(216, 180, 90, .42);
  --glow: rgba(216, 180, 90, .20);
  --glow-2: rgba(124, 63, 143, .19);
  --shadow: 0 24px 70px rgba(0, 0, 0, .42);
  --shadow-soft: 0 16px 44px rgba(0, 0, 0, .30);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --button-radius: 10px;
  --grid-opacity: .18;
  --decor-opacity: .84;
}
html[data-theme="royal"] body {
  background:
    radial-gradient(760px 520px at 86% -8%, rgba(151, 76, 110, .18), transparent 64%),
    radial-gradient(620px 460px at -8% 30%, rgba(216, 180, 90, .12), transparent 68%),
    var(--bg);
}
html[data-theme="royal"] body::before {
  background-image:
    linear-gradient(45deg, rgba(216,180,90,.055) 1px, transparent 1px),
    linear-gradient(-45deg, rgba(124,63,143,.05) 1px, transparent 1px);
  background-size: 46px 46px;
}
html[data-theme="royal"] body::after { opacity: .52; }
html[data-theme="royal"] .brand-mark {
  color: #ffe6a0;
  border-color: rgba(216,180,90,.48);
  background: linear-gradient(145deg, #351b3d, #6d2d46 58%, #8b6331);
  box-shadow: inset 0 0 0 1px rgba(255,244,214,.08), 0 10px 28px rgba(0,0,0,.30);
}
html[data-theme="royal"] .site-nav,
html[data-theme="royal"] .theme-switch {
  border-color: rgba(216,180,90,.22);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}
html[data-theme="royal"] .theme-switch button.is-active {
  color: #170d18;
  background: linear-gradient(135deg, #e5c66f, #b98642 52%, #7e466d);
  box-shadow: 0 6px 20px rgba(216,180,90,.22);
}
html[data-theme="royal"] .button {
  border-color: rgba(216,180,90,.48);
}
html[data-theme="royal"] .lab-module,
html[data-theme="royal"] .pg-chamber,
html[data-theme="royal"] .world-route {
  border-color: rgba(216,180,90,.20);
  background: linear-gradient(145deg, rgba(42,24,48,.91), rgba(25,15,31,.92));
}

/* Royal uses the existing Cool copy as a safe fallback, with selective Royal text swaps in markup. */
.royal-only { display:none !important; }
html[data-theme="royal"] .cute-only { display:none !important; }
html[data-theme="royal"] .royal-only { display:revert !important; }
html[data-theme="royal"] .theme-state-module .cool-only { display:none !important; }

/* Royal Room flavor remains a skin only: Cute silhouettes, court palette, same physics/AI. */


html[data-theme="royal"] .v09-sky-orb {
  background:radial-gradient(circle,#efd58c 0 30%,rgba(216,180,90,.17) 32%,transparent 68%);
  box-shadow:0 0 74px rgba(216,180,90,.18);
}















/* Royal Playground keeps the Cool/Cute code mechanic unchanged; Royal reveals neither digit. */


/* Linked State: larger exhibit so missing or catching the paddle is meaningful. */
[data-lab-module="linked"].lab-module-wide .linked-stage-v11 {
  grid-template-columns:minmax(230px,.72fr) minmax(420px,1.28fr);
  min-height:430px;
  align-items:stretch;
}
[data-lab-module="linked"] .linked-control { min-height:300px; }
[data-lab-module="linked"] .linked-remote { min-height:330px; }
[data-lab-module="linked"] .linked-pong-room { min-height:260px; height:260px; }
[data-lab-module="linked"] .linked-pong-room [data-linked-platform] { width:108px; height:20px; }
[data-lab-module="linked"] .linked-pong-room [data-linked-ball] { width:20px; height:20px; }
[data-lab-module="linked"] .linked-pong-room [data-linked-ball] { left:0; }
html[data-theme="royal"] .linked-pong-room { border-color:rgba(216,180,90,.24); background:linear-gradient(180deg,#1b1020,#271629); }

/* Tunnel: another ~50% reduction from v0.17, with fewer repeated layers. */
.tunnel-page .depth-tunnel-v13 { height:3100vh; min-height:3100vh; }
@media(max-width:760px){
  .tunnel-page .depth-tunnel-v13 { height:2100vh; min-height:2100vh; }
  .tunnel-page .depth-tunnel-view::after { display:none; }
  [data-lab-module="linked"].lab-module-wide .linked-stage-v11 { grid-template-columns:1fr; min-height:auto; }
  [data-lab-module="linked"] .linked-control { min-height:190px; }
  [data-lab-module="linked"] .linked-remote { min-height:300px; }
  [data-lab-module="linked"] .linked-pong-room { min-height:230px; height:230px; }
}
@media(prefers-reduced-motion:reduce){
  .tunnel-page .depth-tunnel-v13 { height:900vh; min-height:900vh; }
}

html[data-theme="royal"] .lab-theme-clue.royal-only { display:flex !important; }


/* =========================================================
   v0.19 — Four-world theme identity, orbit parity, small fixes
   ========================================================= */
html[data-theme="scary"] {
  color-scheme: dark;
  --bg:#070609; --bg-2:#100a12; --surface:rgba(24,15,27,.88); --surface-strong:#1a101e;
  --surface-soft:rgba(115,58,89,.15); --text:#eee8df; --muted:#aa9ba8; --muted-2:#786b78;
  --primary:#5f355f; --primary-2:#8b334b; --accent:#9dbf73; --accent-2:#8ba8c7;
  --border:rgba(210,195,204,.13); --border-strong:rgba(142,88,120,.38);
  --glow:rgba(111,67,106,.22); --glow-2:rgba(118,146,88,.13); --shadow:0 24px 70px rgba(0,0,0,.55); --shadow-soft:0 16px 44px rgba(0,0,0,.38);
  --radius-sm:10px; --radius-md:18px; --radius-lg:28px; --button-radius:10px; --grid-opacity:.15; --decor-opacity:.82;
}
html[data-theme="scary"] body{background:radial-gradient(760px 520px at 85% -8%,rgba(100,42,76,.19),transparent 64%),radial-gradient(600px 460px at -8% 28%,rgba(107,132,76,.11),transparent 68%),var(--bg)}
html[data-theme="scary"] body::before{background-image:linear-gradient(rgba(164,126,151,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(164,126,151,.04) 1px,transparent 1px);background-size:46px 46px}
html[data-theme="scary"] .brand-mark{color:#d7e6bd;border-color:rgba(157,191,115,.38);background:linear-gradient(145deg,#19101d,#3b1b2b 62%,#273421);box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),0 10px 28px rgba(0,0,0,.4)}
html[data-theme="scary"] .site-nav,html[data-theme="scary"] .theme-switch{border-color:rgba(139,77,112,.25);background:color-mix(in srgb,var(--surface) 90%,transparent)}
html[data-theme="scary"] .theme-switch button.is-active{color:#10100d;background:linear-gradient(135deg,#9dbf73,#718457 54%,#6f344e);box-shadow:0 6px 20px rgba(94,123,72,.2)}
html[data-theme="scary"] .lab-module,html[data-theme="scary"] .pg-chamber,html[data-theme="scary"] .world-route{border-color:rgba(142,88,120,.22);background:linear-gradient(145deg,rgba(31,18,34,.94),rgba(14,9,17,.94))}
.scary-only{display:none!important}
html[data-theme="scary"] .cute-only,html[data-theme="scary"] .royal-only{display:none!important}
html[data-theme="scary"] .scary-only{display:revert!important}
html[data-theme="scary"] .theme-state-module .cool-only{display:none!important}
html[data-theme="scary"] .lab-theme-clue.scary-only{display:flex!important}

/* Six orbit destinations, using two opposite phase partners rather than expanding the hub. */
.orbit-tunnel{--orbit-size:220px;--orbit-speed:8.2s;animation-delay:-4.1s;opacity:.94}
.orbit-about{--orbit-size:365px;--orbit-speed:13.2s;animation-delay:-6.6s;opacity:.62}


@media(max-width:920px){.orbit-tunnel{--orbit-size:190px}.orbit-about{--orbit-size:310px}}
@media(max-width:760px){.orbit-tunnel{--orbit-size:155px}.orbit-about{--orbit-size:255px}}




/* Four-theme clue panels show only the active world's clue clearly. */



/* Royal and Scary Room are true skins using the same bodies/AI. */





.royal-eagle .eagle-body,.royal-eagle .eagle-wing{fill:#6d4c2f}.royal-eagle .eagle-head{fill:#e8e0c3}.royal-eagle .eagle-beak{fill:#d5a944}.royal-eagle .eagle-tail{fill:#4a3428}.royal-eagle .eagle-eye{fill:#17100d}






html[data-theme="scary"] .v09-sky-orb{background:radial-gradient(circle,#c8d5b0 0 24%,rgba(132,157,101,.10) 26%,transparent 68%);box-shadow:0 0 70px rgba(146,166,119,.10)}






/* Theme-authored illumination light, identical hitbox. */
.lab-light [data-light-symbol]{display:grid;place-items:center;width:100%;height:100%}
html[data-theme="royal"] .lab-light{color:#f0cf6f;border-color:#e0bd58;box-shadow:0 0 28px rgba(224,189,88,.32)}
html[data-theme="scary"] .lab-light{color:#b7cf8a;border-color:#76905d;box-shadow:0 0 28px rgba(111,145,82,.27);background:#17121a}

/* Scary/Royal tunnel use existing geometry, only a different costume. */
html[data-theme="royal"] .tunnel-page .depth-tunnel-view{background:radial-gradient(circle at 50% 48%,rgba(216,180,90,.18),transparent 22rem),linear-gradient(180deg,#120b17,#24132a 42%,#39263b 72%,#1a101e)}
html[data-theme="royal"] .tunnel-page .ribbon-layer i{border-color:rgba(224,190,92,.48);background:linear-gradient(90deg,transparent,rgba(218,181,85,.25),transparent)}
html[data-theme="royal"] .tunnel-page .glyph-field{color:#e0bd58}
html[data-theme="scary"] .tunnel-page .depth-tunnel-view{background:radial-gradient(circle at 50% 48%,rgba(109,63,95,.24),transparent 21rem),linear-gradient(180deg,#050408,#100910 42%,#17101c 72%,#070609);filter:hue-rotate(var(--tunnel-hue)) saturate(1.06) contrast(1.08)}
html[data-theme="scary"] .tunnel-page .ribbon-layer i{border-color:rgba(120,153,88,.34);background:linear-gradient(90deg,transparent,rgba(107,132,76,.17),transparent);box-shadow:0 0 28px rgba(99,70,98,.22)}
html[data-theme="scary"] .tunnel-page .spiral-layer i,html[data-theme="scary"] .tunnel-page .spiral-layer b,html[data-theme="scary"] .tunnel-page .spiral-layer em{border-color:rgba(121,77,110,.48)}
html[data-theme="scary"] .tunnel-page .glyph-field{color:#9dbf73;text-shadow:0 0 24px rgba(157,191,115,.25)}
html.is-tunnel-auto-scrolling{scroll-behavior:auto!important}


/* =========================================================
   v0.20 — optimization, stronger theme identity, small polish
   ========================================================= */
/* Orbit phase and counter-rotation must share the same delay so labels never turn upside down. */


.orbit-tunnel{--orbit-delay:-4.1s}
.orbit-about{--orbit-delay:-6.6s}

/* Slightly roomier final target without changing its horizontal footprint. */



/* One semantic Tunnel H1, styled exactly like the former visual H2. */
.depth-tunnel-copy h1{max-width:9ch;font-size:clamp(2.5rem,6vw,6rem);line-height:.95;margin:.2rem 0 1rem}

/* Theme identity: same component footprints, more distinct silhouettes and ornament. */



html[data-theme="royal"] .button,html[data-theme="royal"] .text-button{border-radius:4px 16px 4px 16px}
html[data-theme="royal"] .world-route,html[data-theme="royal"] .cta-shell,html[data-theme="royal"] .lab-module{border-radius:6px 24px 6px 24px}


html[data-theme="scary"] .button,html[data-theme="scary"] .text-button{border-radius:2px 15px 3px 10px}
html[data-theme="scary"] .world-route,html[data-theme="scary"] .cta-shell,html[data-theme="scary"] .lab-module{border-radius:3px 20px 4px 11px}



/* Royal and Scary get their own Playground geometry language without touching collision boxes. */



html[data-theme="royal"] .finish-ring{border-radius:6px 50% 6px 50%;transform:rotate(45deg)}



html[data-theme="scary"] .finish-ring{border-radius:50% 42% 52% 46%;box-shadow:0 0 24px var(--accent),inset 0 0 0 7px color-mix(in srgb,var(--surface-strong) 75%,transparent)}
html[data-theme="scary"] .finish-ring::after{content:"";display:block;width:11px;height:11px;margin:17px auto;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}

/* Theme clue cards use theme-specific silhouettes, dimensions unchanged. */





/* Scary carnivore is a vampire, retaining the exact same physics body and AI role. */








/* About is intentionally voice-forward, but its visual footprint stays aligned between themes. */




/* Slight animation-personality differences only; mechanics and hitboxes are untouched. */
@media (prefers-reduced-motion:no-preference){
  html[data-theme="cute"] .ambient-particle{animation-timing-function:ease-in-out}
  html[data-theme="royal"] .ambient-particle{animation-duration:calc(var(--d) * 1.12)}
  html[data-theme="scary"] .ambient-particle:nth-child(3n){animation-duration:calc(var(--d) * .83)}
}


/* v0.20 Lab artifact shelf shared base restored after route-bundle split */
.lab-page .artifact-shelf {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  perspective: 1100px;
}
.lab-page .css3d-artifact {
  min-height: 390px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2rem;
  border: 1px solid var(--border);
  border-radius: 26px;
  background: radial-gradient(circle at 50% 35%, var(--glow), transparent 9rem), var(--surface);
  color: var(--text);
  cursor: grab;
  perspective: 850px;
  overflow: hidden;
}
.lab-page .css3d-artifact.is-dragging { cursor: grabbing; }
.lab-page .css3d-artifact small {
  color: var(--muted);
  font: 800 .58rem var(--font-mono);
  letter-spacing: .08em;
}
.lab-page .artifact-shelf-single {
  grid-template-columns: 1fr !important;
  max-width: 760px;
  margin-inline: auto;
}
.lab-page .artifact-shelf-single .css3d-artifact { min-height: 390px; }
.lab-page .artifact-shelf-single .impossible-card {
  width: 190px !important;
  height: 124px !important;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.18));
  transition: transform .11s linear, filter .2s ease;
}
.lab-page .artifact-shelf-single .impossible-card.is-snapping {
  transition: transform .34s cubic-bezier(.16,.82,.22,1);
}
.lab-page .artifact-shelf-single .card-face {
  box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent),
              inset 0 0 30px color-mix(in srgb,var(--accent) 7%,transparent),
              0 0 30px var(--glow);
}
html[data-theme="cute"] .lab-page .css3d-artifact { border-radius: 38px; }
html[data-theme="royal"] .lab-page .css3d-artifact { border-radius: 5px 24px 5px 24px; }
html[data-theme="scary"] .lab-page .css3d-artifact { border-radius: 3px 18px 5px 11px; }

/* =========================================================
   v0.21 — lightweight world atmosphere
   ========================================================= */
html[data-theme="cool"] body{
  background:
    radial-gradient(900px 540px at 88% -8%,rgba(79,116,210,.15),transparent 64%),
    radial-gradient(700px 520px at -8% 34%,rgba(62,205,220,.08),transparent 68%),
    linear-gradient(180deg,#070a10 0%,var(--bg) 42%,#06090f 100%);
}
html[data-theme="cool"] body::before{
  opacity:.34;
  background-image:
    linear-gradient(rgba(113,145,209,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(113,145,209,.055) 1px,transparent 1px),
    repeating-linear-gradient(135deg,transparent 0 84px,rgba(104,232,246,.026) 85px 86px,transparent 87px 170px);
  background-size:42px 42px,42px 42px,240px 240px;
}
html[data-theme="cute"] body{
  background:
    radial-gradient(700px 520px at 86% -4%,rgba(234,145,194,.24),transparent 65%),
    radial-gradient(620px 460px at -4% 34%,rgba(169,133,226,.15),transparent 68%),
    linear-gradient(180deg,#f8eaf3 0%,var(--bg) 52%,#f4e4ef 100%);
}
html[data-theme="cute"] body::before{
  opacity:.58;
  background-image:
    radial-gradient(circle,rgba(214,104,164,.19) 0 2px,transparent 2.4px),
    radial-gradient(circle,rgba(157,120,214,.14) 0 1.4px,transparent 1.8px),
    radial-gradient(circle at 50% 50%,transparent 0 17px,rgba(239,143,184,.055) 18px 19px,transparent 20px);
  background-size:38px 38px,62px 62px,180px 180px;
  background-position:0 0,17px 23px,30px 44px;
}
html[data-theme="royal"] body{
  background:
    radial-gradient(760px 520px at 50% -10%,rgba(216,180,90,.15),transparent 64%),
    radial-gradient(620px 500px at 92% 35%,rgba(126,70,109,.13),transparent 68%),
    linear-gradient(180deg,#130c16 0%,var(--bg) 52%,#100a13 100%);
}
html[data-theme="royal"] body::before{
  opacity:.34;
  background-image:
    repeating-linear-gradient(45deg,transparent 0 58px,rgba(216,180,90,.045) 59px 60px,transparent 61px 118px),
    repeating-linear-gradient(-45deg,transparent 0 58px,rgba(216,180,90,.032) 59px 60px,transparent 61px 118px),
    radial-gradient(circle at center,transparent 0 24px,rgba(216,180,90,.05) 25px 26px,transparent 27px);
  background-size:168px 168px,168px 168px,220px 220px;
}
html[data-theme="scary"] body{
  background:
    radial-gradient(720px 500px at 84% -5%,rgba(95,53,95,.23),transparent 65%),
    radial-gradient(620px 460px at -5% 40%,rgba(90,118,63,.10),transparent 68%),
    linear-gradient(180deg,#060508 0%,var(--bg) 50%,#050407 100%);
}
html[data-theme="scary"] body::before{
  opacity:.35;
  background-image:
    radial-gradient(ellipse at 50% 50%,rgba(157,191,115,.07) 0 3px,transparent 4px 15px,rgba(121,77,110,.055) 16px 17px,transparent 18px),
    repeating-linear-gradient(104deg,transparent 0 96px,rgba(142,88,120,.035) 97px 98px,transparent 99px 190px);
  background-size:190px 120px,280px 280px;
  background-position:15px 22px,0 0;
}
@media(prefers-reduced-motion:reduce){body::before{animation:none!important}}

/* =========================================================
   v0.21 — responsive Lab polish + two-bridge layout + Brick Breaker
   ========================================================= */
.bridge-stage-v21{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;min-height:390px;padding:1rem;background:linear-gradient(180deg,var(--bg-2),var(--surface-soft))}
.bridge-stage-v21 .bridge-lane{position:relative;min-width:0;min-height:340px;border:1px solid var(--border);border-radius:18px;background:color-mix(in srgb,var(--surface) 78%,transparent);overflow:hidden}
.bridge-stage-v21 .bridge-bank{top:43%;height:25%;width:27%}.bridge-stage-v21 .bridge-bank.left{left:3%}.bridge-stage-v21 .bridge-bank.right{right:3%}
.bridge-stage-v21 .rotating-bridge{left:50%;top:56%;width:41%;height:34px}
.bridge-stage-v21 .bridge-gap-label{top:18%}
.bridge-stage-v21 .bridge-cargo{width:44px;height:44px}
html[data-theme="cute"] .bridge-stage-v21 .bridge-lane{border-radius:28px}
html[data-theme="royal"] .bridge-stage-v21 .bridge-lane{border-radius:4px 22px 4px 22px}
html[data-theme="scary"] .bridge-stage-v21 .bridge-lane{border-radius:3px 18px 5px 12px}

.linked-breaker-room{position:relative!important;min-height:300px!important;height:300px!important;overflow:hidden!important;padding:0!important}
.linked-bricks{position:absolute;inset:0;pointer-events:none;z-index:1}
.linked-brick{position:absolute;display:block;border:1px solid var(--border-strong);border-radius:6px;background:linear-gradient(135deg,var(--primary),var(--primary-2));box-shadow:0 4px 13px var(--glow);transition:opacity .16s ease,transform .16s ease}
.linked-brick.is-hit{opacity:0;transform:scale(.72)}
.linked-breaker-room [data-linked-platform]{top:auto!important;bottom:18px!important;left:0!important;width:108px!important;height:20px!important;z-index:3}
.linked-breaker-room [data-linked-ball]{left:0!important;top:0!important;z-index:4;width:20px!important;height:20px!important}
.linked-breaker-room::before{display:none!important}
html[data-theme="cute"] .linked-brick{border-radius:999px;background:linear-gradient(135deg,#ef8fbd,#b895e4)}
html[data-theme="royal"] .linked-brick{border-radius:3px;background:linear-gradient(135deg,#d8b45a,#8f5b3f);clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%)}
html[data-theme="scary"] .linked-brick{border-radius:11px 11px 3px 3px;background:linear-gradient(180deg,#714a6c,#3c243f);border-color:rgba(157,191,115,.28)}
html[data-theme="scary"] .linked-breaker-room [data-linked-ball]{background:#9dbf73;box-shadow:0 0 18px rgba(157,191,115,.5)}

@media(max-width:760px){
  .lab-section{padding:clamp(2.8rem,10vw,4.5rem) 0}
  .lab-module{padding:1rem!important;border-radius:20px}
  .lab-module-head{align-items:center;gap:.7rem}
  .lab-module-head h3{font-size:clamp(1.55rem,7vw,2rem);line-height:1.05}
  .lab-module-head .lab-reset,.lab-module-head button{flex:0 0 auto}
  .lab-diagnostics{display:flex;flex-wrap:wrap;gap:.45rem}
  .lab-diagnostics span{padding:.45rem .6rem;min-height:38px}
  .collision-combined-stage{min-height:360px!important;height:360px}
  .collision-combined-stage .lab-entity.player{width:44px;height:44px}
  .collision-combined-stage .collision-target{right:3%;bottom:4%}
  .magnet-bank{gap:.5rem;margin-bottom:.7rem}
  .magnet-control-group{grid-template-columns:26px repeat(3,minmax(0,1fr))!important;gap:.3rem;padding:.35rem}
  .magnet-control-group>span{width:auto;text-align:center}
  .magnet-control-group button{min-height:44px;padding:.35rem .18rem;font-size:clamp(.66rem,3.4vw,.82rem);white-space:nowrap}
  .multi-magnet-stage{min-height:350px!important;height:350px}
  .multi-magnet-stage .magnet-node{width:66px;height:66px;border-width:6px;box-shadow:0 0 0 28px rgba(91,218,255,.025),0 0 0 54px rgba(91,218,255,.013),0 0 22px var(--glow)}
  .multi-magnet-stage .multi-metal-orb{width:48px;height:48px}
  .bridge-stage-v21{grid-template-columns:1fr;min-height:350px;padding:.6rem}
  .bridge-stage-v21 .bridge-lane{min-height:330px;border:0;background:transparent}
  .bridge-stage-v21 .bridge-lane-secondary{display:none}
  .bridge-stage-v21 .rotating-bridge{width:42%;top:56%}
  [data-lab-module="linked"].lab-module-wide .linked-stage-v11{grid-template-columns:1fr;gap:.8rem;min-height:auto}
  [data-lab-module="linked"] .linked-control{min-height:170px;padding:1rem}
  [data-lab-module="linked"] .linked-remote{min-height:320px;padding:1rem}
  .linked-breaker-room{height:260px!important;min-height:260px!important}
}
@media(max-width:520px){
  .collision-combined-stage{min-height:330px!important;height:330px}
  .multi-magnet-stage{min-height:320px!important;height:320px}
  .magnet-control-group button{font-size:.72rem}
}
@media(prefers-reduced-motion:reduce){.linked-brick{transition:none}}


/* =========================================================
   v0.22 — stronger world wallpaper + mobile nav polish
   ========================================================= */
html[data-theme="cool"] body{
  background-image:url("../assets/wallpapers/cool.svg"),radial-gradient(900px 540px at 88% -8%,rgba(79,116,210,.16),transparent 64%),linear-gradient(180deg,#070a10 0%,var(--bg) 48%,#06090f 100%)!important;
  background-size:360px 360px,auto,auto!important;background-attachment:fixed,fixed,fixed!important;
}
html[data-theme="cute"] body{
  background-image:url("../assets/wallpapers/cute.svg"),radial-gradient(760px 560px at 86% -4%,rgba(234,145,194,.28),transparent 66%),linear-gradient(180deg,#f8eaf3 0%,var(--bg) 52%,#f4e4ef 100%)!important;
  background-size:320px 320px,auto,auto!important;background-attachment:fixed,fixed,fixed!important;
}
html[data-theme="royal"] body{
  background-image:url("../assets/wallpapers/royal.svg"),radial-gradient(820px 560px at 50% -8%,rgba(216,180,90,.19),transparent 66%),linear-gradient(180deg,#130c16 0%,var(--bg) 52%,#100a13 100%)!important;
  background-size:340px 340px,auto,auto!important;background-attachment:fixed,fixed,fixed!important;
}
html[data-theme="scary"] body{
  background-image:url("../assets/wallpapers/scary.svg"),radial-gradient(760px 540px at 84% -5%,rgba(95,53,95,.27),transparent 66%),linear-gradient(180deg,#060508 0%,var(--bg) 50%,#050407 100%)!important;
  background-size:330px 330px,auto,auto!important;background-attachment:fixed,fixed,fixed!important;
}
@media(max-width:760px){
  html[data-theme="cute"] .site-nav,html[data-theme="cute"] .site-nav.open{border-radius:22px!important;clip-path:none!important;}
  html[data-theme="cute"] .site-nav{overflow:hidden!important;}
}
@media(max-width:760px){
  html[data-theme] body{background-attachment:scroll,scroll,scroll!important;}
}

/* =========================================================
   v0.22 — Lab responsive cleanup + continuous bridge
   ========================================================= */
.mobile-magnet-copy{display:none;}
.bridge-stage-v22{position:relative;display:block!important;min-height:390px;padding:1rem;background:linear-gradient(180deg,var(--bg-2),var(--surface-soft));overflow:hidden;}
.bridge-stage-v22::before{content:"";position:absolute;left:3%;right:3%;top:56%;height:1px;background:color-mix(in srgb,var(--border-strong) 60%,transparent);opacity:.45;}
.bridge-stage-v22 .bridge-bank{position:absolute;top:43%;height:26%;display:grid;place-items:center;border:1px dashed var(--border);color:var(--muted);font:800 .56rem var(--font-mono);background:color-mix(in srgb,var(--surface) 78%,transparent);}
.bridge-stage-v22 .bridge-start{left:3%;width:18%;}
.bridge-stage-v22 .bridge-middle{left:45%;width:10%;}
.bridge-stage-v22 .bridge-goal{right:3%;width:18%;}
.bridge-stage-v22 .rotating-bridge{position:absolute;top:56%;width:24%;height:34px;transform:translate(-50%,-50%);transform-origin:center;}
.bridge-stage-v22 .bridge-a{left:33%;}
.bridge-stage-v22 .bridge-b{left:67%;}
.bridge-stage-v22 .bridge-label-a{left:33%;top:23%;transform:translateX(-50%);}
.bridge-stage-v22 .bridge-label-b{left:67%;top:23%;transform:translateX(-50%);}
.bridge-stage-v22 .bridge-cargo-v22{position:absolute;left:0;top:0;width:46px;height:46px;z-index:8;will-change:transform;}
html[data-theme="cute"] .bridge-stage-v22{border-radius:30px;}
html[data-theme="royal"] .bridge-stage-v22{border-radius:6px 28px 6px 28px;}
html[data-theme="scary"] .bridge-stage-v22{border-radius:4px 24px 7px 13px;}

@media(max-width:760px){
  .desktop-magnet-copy{display:none!important;}.mobile-magnet-copy{display:inline!important;}
  [data-lab-module="magnet"] .magnet-control-group[data-magnet-controls="b"],
  [data-lab-module="magnet"] .magnet-control-group[data-magnet-controls="c"],
  [data-lab-module="magnet"] [data-magnet-id="b"],
  [data-lab-module="magnet"] [data-magnet-id="c"]{display:none!important;}
  [data-lab-module="magnet"] .magnet-bank{display:block;margin-bottom:.7rem;}
  [data-lab-module="magnet"] .magnet-control-group[data-magnet-controls="a"]{grid-template-columns:52px repeat(3,minmax(0,1fr))!important;max-width:none;}
  [data-lab-module="magnet"] .multi-magnet-stage{height:245px!important;min-height:245px!important;}
  [data-lab-module="magnet"] [data-magnet-id="a"]{width:64px;height:64px;border-width:6px;box-shadow:0 0 0 26px rgba(91,218,255,.025),0 0 20px var(--glow);}
  [data-lab-module="magnet"] .multi-metal-orb{width:46px;height:46px;}

  .bridge-stage-v22{min-height:330px;padding:.65rem;}
  .bridge-stage-v22 .bridge-start{left:4%;width:25%;}
  .bridge-stage-v22 .bridge-goal{right:4%;width:25%;}
  .bridge-stage-v22 .bridge-middle,.bridge-stage-v22 .bridge-b,.bridge-stage-v22 .bridge-label-b{display:none!important;}
  .bridge-stage-v22 .bridge-a{left:50%;width:42%;}
  .bridge-stage-v22 .bridge-label-a{left:50%;top:22%;}
  .bridge-stage-v22 .bridge-cargo-v22{width:44px;height:44px;}
}


/* =========================================================
   v0.23 — calm main-body panel + mobile nav readability
   ========================================================= */
#main{
  width:min(calc(100% - clamp(1.5rem,5vw,8rem)),1680px);
  margin:clamp(1rem,2vw,1.75rem) auto clamp(2.5rem,5vw,5rem);
  border:1px solid var(--border);
  border-radius:clamp(24px,2.6vw,42px);
  box-shadow:0 28px 80px rgba(0,0,0,.18);
  position:relative;
  isolation:isolate;
}
html[data-theme="cool"] #main{background:rgba(7,11,18,.89);border-color:rgba(103,230,244,.12);}
html[data-theme="cute"] #main{background:rgba(255,246,251,.90);border-color:rgba(217,102,166,.20);box-shadow:0 26px 70px rgba(119,70,113,.10);}
html[data-theme="royal"] #main{background:rgba(20,12,24,.91);border-color:rgba(216,180,90,.20);box-shadow:0 28px 78px rgba(0,0,0,.28),0 0 34px rgba(216,180,90,.045);}
html[data-theme="scary"] #main{background:rgba(7,6,9,.92);border-color:rgba(157,191,115,.13);box-shadow:0 30px 86px rgba(0,0,0,.36);}
@media(max-width:760px){
  #main{width:calc(100% - 1rem);margin:.6rem auto 2.25rem;border-radius:24px;}
  html[data-theme="royal"] .site-nav,html[data-theme="royal"] .site-nav.open{background:#211329!important;background-color:#211329!important;}
  html[data-theme="scary"] .site-nav,html[data-theme="scary"] .site-nav.open{background:#1a101e!important;background-color:#1a101e!important;}
  html[data-theme="royal"] .site-nav .mobile-theme{background:#211329!important;}
  html[data-theme="scary"] .site-nav .mobile-theme{background:#1a101e!important;}
}

html[data-theme="royal"] body{background-size:420px 420px,auto,auto!important;}
@media(max-width:760px){html[data-theme="royal"] body{background-size:300px 300px,auto,auto!important;}}


/* =========================================================
   v0.24 — readability panel breathing room
   ========================================================= */
#main{
  width:min(calc(100% - clamp(3rem,8vw,10rem)),1580px);
  margin:clamp(2rem,3.5vw,3.25rem) auto clamp(2.75rem,5vw,5rem);
}
@media(max-width:1100px){
  #main{width:calc(100% - clamp(2rem,5vw,4rem));margin-top:clamp(1.5rem,3vw,2.5rem);}
}
@media(max-width:760px){
  #main{width:calc(100% - 1rem);margin:.85rem auto 2.25rem;}
}

/* =========================================================
   v0.25 — tighter Lab readability shell
   ========================================================= */
#main{
  width:min(calc(100% - clamp(2rem,6vw,7rem)),1320px);
  margin:clamp(1.35rem,2.2vw,2.2rem) auto clamp(2.5rem,5vw,4.5rem);
}
.lab-hero{padding-top:clamp(2.05rem,3.5vw,3.7rem)!important;}
@media(max-width:1100px){#main{width:calc(100% - clamp(1.5rem,4vw,3rem));}}
@media(max-width:760px){#main{width:calc(100% - 1rem);margin:.85rem auto 2.25rem;}}