.audio-locked {
  display: grid;
  gap: 0.35rem;
  margin: 1rem 0;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(208, 160, 40, 0.35);
  border-radius: 1rem;
  background: rgba(208, 160, 40, 0.08);
  color: var(--text, #f4f0e8);
}

.audio-locked span {
  color: var(--muted, #aaa59a);
  font-size: 0.9rem;
}

/* Public demo visual pass: more light, depth and reliable contrast. */
:root {
  --bg: #080a10;
  --surface: #11151d;
  --surface-2: #171d28;
  --text: #f5f7fb;
  --muted: #aeb8c8;
  --gold: #e2ad35;
  --gold-2: #ffe7a6;
  --line: #2b3444;
  --blue: #80d8ff;
  --nav: rgba(8, 10, 16, 0.88);
}

body {
  background:
    radial-gradient(circle at 78% 8%, rgba(73, 132, 255, 0.13), transparent 32rem),
    radial-gradient(circle at 15% 36%, rgba(131, 76, 255, 0.09), transparent 30rem),
    var(--bg);
}

.ambient {
  inset: 0;
  height: 75vh;
  background:
    radial-gradient(circle at 68% 18%, rgba(128, 216, 255, 0.12), transparent 30%),
    radial-gradient(circle at 48% 8%, rgba(226, 173, 53, 0.11), transparent 24%);
}

.feature-card,
.content-card,
.atlas-card {
  background: linear-gradient(145deg, rgba(24, 30, 42, 0.96), rgba(12, 15, 22, 0.96));
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.22), inset 0 1px rgba(255, 255, 255, 0.025);
}

.mini-card,
.library-card,
.message.beam,
.composer {
  background: rgba(17, 21, 29, 0.9);
}

.mini-card:hover,
.library-card:hover {
  border-color: rgba(128, 216, 255, 0.38);
  transform: translateY(-2px);
}

.mini-card,
.library-card {
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.line-art.glow {
  border-color: rgba(128, 216, 255, 0.58);
  box-shadow: 0 0 34px rgba(128, 216, 255, 0.18), inset 16px 0 30px rgba(226, 173, 53, 0.12);
}

.line-art.vector {
  border-radius: 48% 52% 44% 56%;
  transform: rotate(24deg);
  box-shadow: 18px -10px 35px rgba(128, 216, 255, 0.14);
}

.line-art.breath {
  border-radius: 50% 50% 44% 44%;
  box-shadow: -20px 4px 30px rgba(128, 216, 255, 0.12), 20px 4px 30px rgba(128, 216, 255, 0.12);
}

.line-art.orbit-art {
  border-radius: 48%;
  border-style: dashed;
  box-shadow: 0 0 0 10px rgba(226, 173, 53, 0.04), 0 0 32px rgba(128, 216, 255, 0.12);
}

audio {
  accent-color: var(--gold);
}

.atlas-space {
  overflow: hidden;
  isolation: isolate;
  border-radius: 1.15rem;
  margin: 1rem 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(128, 216, 255, 0.08), transparent 26%),
    radial-gradient(circle at 50% 50%, rgba(226, 173, 53, 0.06), transparent 56%),
    #080b12;
  transition: background 0.45s ease;
}

.stage-viz {
  position: absolute;
  left: 50%;
  top: 47%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.78);
  transition: opacity 0.4s ease, transform 0.55s cubic-bezier(.2,.8,.2,1);
}

.atlas-space[data-level="cosmos"] .viz-cosmos,
.atlas-space[data-level="planet"] .viz-planet,
.atlas-space[data-level="space"] .viz-space,
.atlas-space[data-level="field"] .viz-field,
.atlas-space[data-level="body"] .viz-body,
.atlas-space[data-level="systems"] .viz-systems,
.atlas-space[data-level="organs"] .viz-organs,
.atlas-space[data-level="tissues"] .viz-tissues,
.atlas-space[data-level="cell"] .viz-cell,
.atlas-space[data-level="organelles"] .viz-organelles,
.atlas-space[data-level="molecules"] .viz-molecules {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.viz-cosmos {
  width: 310px;
  height: 310px;
  border-radius: 50%;
  border: 1px solid rgba(128, 216, 255, 0.2);
  background: radial-gradient(circle at 56% 46%, rgba(255,255,255,.95) 0 2px, rgba(128,216,255,.33) 3px, transparent 18%), radial-gradient(ellipse at center, rgba(76,48,150,.35), transparent 62%);
  box-shadow: 0 0 90px rgba(101, 88, 220, 0.18), inset 0 0 70px rgba(128, 216, 255, 0.08);
}
.viz-cosmos span { position:absolute; inset:48px; border:1px solid rgba(226,173,53,.28); border-radius:50%; transform:rotate(-18deg) scaleY(.44); }
.viz-cosmos i { position:absolute; width:4px; height:4px; border-radius:50%; background:#fff3c4; box-shadow:0 0 14px #80d8ff; }
.viz-cosmos i:nth-child(1){left:18%;top:24%}.viz-cosmos i:nth-child(2){right:18%;top:34%}.viz-cosmos i:nth-child(3){left:32%;bottom:19%}.viz-cosmos i:nth-child(4){right:30%;bottom:28%}

.viz-planet {
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 26%, #d9f5ff 0 2%, #58a9d2 3% 18%, #17537e 36%, #0c2138 70%);
  box-shadow: -22px 28px 80px rgba(35, 133, 190, 0.3), inset -32px -20px 50px rgba(0,0,0,.46);
}
.viz-planet:after { content:""; position:absolute; inset:-45px; border:1px solid rgba(226,173,53,.28); border-radius:50%; transform:rotate(18deg) scaleY(.34); }
.viz-planet span { position:absolute; inset:38% 17% 35% 9%; border-radius:50%; background:rgba(124,206,171,.48); transform:rotate(-24deg); filter:blur(1px); }
.viz-planet i { position:absolute; width:7px; height:7px; right:-43px; top:49%; border-radius:50%; background:var(--gold-2); box-shadow:0 0 16px var(--gold); }

.viz-space { width:280px; height:280px; border:1px solid rgba(128,216,255,.2); border-radius:50%; box-shadow:0 0 0 36px rgba(128,216,255,.025), 0 0 0 72px rgba(226,173,53,.018); }
.viz-space span { position:absolute; inset:78px; border:1px solid rgba(226,173,53,.55); border-radius:50%; background:radial-gradient(circle,rgba(226,173,53,.15),transparent 65%); }
.viz-space i { position:absolute; left:50%; top:50%; width:1px; height:128px; background:linear-gradient(transparent,rgba(128,216,255,.5),transparent); transform-origin:50% 0; }
.viz-space i:nth-child(2){transform:rotate(0deg)}.viz-space i:nth-child(3){transform:rotate(120deg)}.viz-space i:nth-child(4){transform:rotate(240deg)}

.viz-field { width:230px; height:300px; border:1px solid rgba(174,117,204,.42); border-radius:50%; box-shadow:0 0 0 24px rgba(174,117,204,.05), 0 0 65px rgba(128,216,255,.2), inset 0 0 60px rgba(226,173,53,.08); }
.viz-field span { position:absolute; left:50%; top:22%; width:52px; height:52px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle,#fff7d4 0 4%,#e2ad35 6%,rgba(226,173,53,.08) 56%,transparent 58%); }
.viz-field i { position:absolute; left:50%; top:39%; width:74px; height:135px; transform:translateX(-50%); border:1px solid rgba(128,216,255,.35); border-radius:46% 46% 35% 35%; }
.viz-field i:last-child { inset:18px; width:auto; height:auto; transform:none; border-radius:50%; border-color:rgba(226,173,53,.14); }

.atlas-space .viz-body { position:absolute; left:50%; top:47%; transform:translate(-50%,-50%) scale(.78); }
.atlas-space[data-level="body"] .viz-body { transform:translate(-50%,-50%) scale(1); pointer-events:auto; }

.viz-systems,.viz-organs { width:150px; height:290px; border:1px solid rgba(128,216,255,.22); border-radius:48% 48% 38% 38%; background:linear-gradient(90deg,transparent 49.5%,rgba(128,216,255,.35) 50%,transparent 50.5%); }
.viz-systems span { position:absolute; left:50%; top:12px; width:52px; height:52px; transform:translateX(-50%); border-radius:50%; border:2px solid rgba(226,173,53,.65); }
.viz-systems i { position:absolute; left:50%; top:80px; width:82px; height:1px; background:linear-gradient(90deg,transparent,#80d8ff,transparent); transform-origin:center; }
.viz-systems i:nth-child(2){transform:translateX(-50%) rotate(24deg)}.viz-systems i:nth-child(3){transform:translateX(-50%) rotate(-24deg)}.viz-systems i:nth-child(4){top:150px;transform:translateX(-50%) rotate(90deg);width:120px}
.viz-organs span { position:absolute; left:48%; top:73px; width:27px; height:35px; border-radius:60% 40% 58% 42%; background:#e2ad35; box-shadow:0 0 20px rgba(226,173,53,.3); transform:rotate(-12deg); }
.viz-organs i { position:absolute; border:1px solid rgba(128,216,255,.65); background:rgba(128,216,255,.09); }
.viz-organs i:nth-child(2){left:30px;top:66px;width:38px;height:68px;border-radius:50% 38% 55% 45%}.viz-organs i:nth-child(3){right:30px;top:66px;width:38px;height:68px;border-radius:38% 50% 45% 55%}.viz-organs i:nth-child(4){left:42px;top:150px;width:66px;height:82px;border-radius:42% 58% 50% 50%}

.viz-tissues { width:240px; height:240px; display:grid; grid-template-columns:repeat(3,1fr); gap:7px; transform:translate(-50%,-50%) rotate(4deg) scale(.78); }
.atlas-space[data-level="tissues"] .viz-tissues { transform:translate(-50%,-50%) rotate(4deg) scale(1); }
.viz-tissues i { border:1px solid rgba(128,216,255,.35); border-radius:45% 55% 48% 52%; background:radial-gradient(circle at 44% 45%,rgba(226,173,53,.55) 0 6%,rgba(128,216,255,.08) 8% 55%,transparent 57%); box-shadow:inset 0 0 22px rgba(128,216,255,.08); }

.viz-cell { width:260px; height:245px; border:2px solid rgba(128,216,255,.45); border-radius:51% 49% 46% 54%; background:radial-gradient(circle at 50% 50%,rgba(128,216,255,.1),rgba(58,75,135,.12)); box-shadow:0 0 55px rgba(128,216,255,.12), inset 0 0 50px rgba(128,216,255,.1); }
.viz-cell span { position:absolute; left:50%; top:50%; width:82px; height:76px; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle,#fff3c4 0 5%,#b777d1 8% 28%,rgba(183,119,209,.12) 55%); border:1px solid rgba(226,173,53,.45); }
.viz-cell i { position:absolute; width:45px; height:18px; border:1px solid rgba(226,173,53,.55); border-radius:50%; }.viz-cell i:nth-child(2){left:31px;top:58px;transform:rotate(28deg)}.viz-cell i:nth-child(3){right:35px;bottom:50px;transform:rotate(-22deg)}

.viz-organelles { width:270px; height:230px; border-radius:48%; border:1px solid rgba(128,216,255,.2); }
.viz-organelles span,.viz-organelles i { position:absolute; border-radius:50%; border:1px solid rgba(226,173,53,.55); background:rgba(226,173,53,.07); box-shadow:0 0 24px rgba(128,216,255,.12); }
.viz-organelles span{width:90px;height:90px;left:90px;top:70px}.viz-organelles i:nth-child(2){width:70px;height:27px;left:16px;top:36px;transform:rotate(22deg)}.viz-organelles i:nth-child(3){width:62px;height:24px;right:16px;top:48px;transform:rotate(-26deg)}.viz-organelles i:nth-child(4){width:74px;height:30px;right:24px;bottom:32px;transform:rotate(16deg)}

.viz-molecules { width:290px; height:220px; }
.viz-molecules:before,.viz-molecules:after { content:""; position:absolute; left:45px; top:108px; width:205px; height:2px; background:linear-gradient(90deg,#80d8ff,#e2ad35,#b777d1); transform:rotate(-18deg); box-shadow:0 0 12px rgba(128,216,255,.45); }
.viz-molecules:after { transform:rotate(28deg); }
.viz-molecules span,.viz-molecules i,.viz-molecules b,.viz-molecules em { position:absolute; z-index:2; width:42px; height:42px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,#80d8ff 15%,#16577a 58%); box-shadow:0 0 24px rgba(128,216,255,.4); }
.viz-molecules span{left:22px;top:78px}.viz-molecules i{left:120px;top:30px}.viz-molecules b{right:18px;top:70px;background:radial-gradient(circle at 35% 30%,#fff,#e2ad35 15%,#765207 58%)}.viz-molecules em{left:130px;bottom:18px;background:radial-gradient(circle at 35% 30%,#fff,#b777d1 15%,#5d2f73 58%)}

.atlas-space.energy .stage-viz { filter: drop-shadow(0 0 20px rgba(174,117,204,.38)); }
.atlas-space.energy { background:radial-gradient(circle at 50% 42%,rgba(174,117,204,.2),transparent 36%),radial-gradient(circle at 50% 50%,rgba(226,173,53,.1),transparent 64%),#090812; }

.beam-demo-note {
  display: grid;
  gap: 0.4rem;
  margin: 1.25rem auto 0;
  max-width: 760px;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(128, 216, 255, 0.24);
  border-radius: 1rem;
  background: rgba(128, 216, 255, 0.055);
}

.messages {
  padding-bottom: 9rem;
}

.beam-demo-note span {
  color: var(--muted);
  line-height: 1.5;
  font-size: 0.88rem;
}

.prompt-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  max-width: 760px;
  margin: 1rem auto 0;
}

.prompt-grid button {
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--surface);
  color: var(--text);
  padding: 0.65rem 0.9rem;
  cursor: pointer;
}

.prompt-grid button:hover {
  border-color: var(--gold);
  color: var(--gold-2);
}

.message.typing {
  color: var(--muted);
  animation: beam-pulse 1.25s ease-in-out infinite;
}

@keyframes beam-pulse {
  50% { opacity: 0.55; }
}

.chat-practice {
  align-self: flex-start;
  display: grid;
  gap: 0.75rem;
  width: min(100%, 520px);
  padding: 1rem;
  border: 1px solid rgba(226,173,53,.32);
  border-radius: 1.1rem;
  background: linear-gradient(145deg,rgba(226,173,53,.09),rgba(128,216,255,.045));
  box-shadow: inset 0 1px rgba(255,255,255,.08);
}

.chat-practice small { color: var(--muted); }
.chat-practice b { font-family: Georgia,serif; font-size: 1.12rem; font-weight: 400; }
.chat-practice audio { width: 100%; }
.chat-practice .secondary { justify-self: start; padding: .65rem .9rem; }
.composer button:disabled { opacity: .45; cursor: wait; }

/* Official MiroLight identity. The supplied square logo is cropped with CSS so
   the original ML monogram remains clear in the compact application header. */
.brand-logo {
  position: relative;
  display: block;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(226, 173, 53, 0.12);
}

.brand-logo img {
  position: absolute;
  left: 50%;
  top: -9px;
  width: 88px;
  height: 88px;
  max-width: none;
  transform: translateX(-50%);
}

.brand-logo-light {
  display: none;
}

/* Beam is a calm living light, not an eye. */
.beam-mark,
.beam-avatar,
.beam-large,
.bottom-nav .beam-nav i {
  overflow: visible;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 48%, #fffdf0 0 5%, #ffe49a 7%, #e2ad35 14%, rgba(226, 173, 53, 0.34) 28%, rgba(226, 173, 53, 0.08) 48%, transparent 70%);
  box-shadow:
    0 0 18px rgba(255, 228, 154, 0.24),
    0 0 52px rgba(226, 173, 53, 0.15);
  animation: beam-breathe 4.8s ease-in-out infinite;
}

.beam-mark::before,
.beam-avatar::before,
.beam-large::before,
.bottom-nav .beam-nav i::before {
  content: "";
  position: absolute;
  inset: -9%;
  border: 1px solid rgba(226, 173, 53, 0.22);
  border-radius: 48% 52% 50% 50%;
  transform: rotate(-12deg);
}

.beam-mark::after,
.beam-avatar::after,
.beam-large::after,
.bottom-nav .beam-nav i::after {
  content: "";
  position: absolute;
  inset: 17%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.42), transparent 66%);
  filter: blur(3px);
}

.beam-mark span,
.beam-avatar span,
.beam-large span {
  position: relative;
  z-index: 2;
  width: 12%;
  height: 12%;
  border-radius: 50%;
  background: #fffdf2;
  box-shadow: 0 0 10px #fff2bd, 0 0 24px rgba(226, 173, 53, 0.8);
  transform: none;
}

.beam-large {
  width: 98px;
  height: 98px;
}

.beam-avatar {
  width: 52px;
  height: 52px;
}

.bottom-nav .beam-nav i {
  width: 50px;
  height: 50px;
}

@keyframes beam-breathe {
  0%, 100% { transform: scale(0.97); filter: brightness(0.95); }
  50% { transform: scale(1.035); filter: brightness(1.08); }
}

/* Mirror and glass language: reflection without distortion. */
.hero {
  position: relative;
  isolation: isolate;
}

.mirror-scene {
  position: absolute;
  z-index: -1;
  left: calc(100% + 70px);
  top: 20px;
  width: 250px;
  height: 300px;
  opacity: 0.74;
  pointer-events: none;
}

.mirror-source,
.mirror-echo {
  position: absolute;
  left: 50%;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, #fffdf0 0 4%, #f6e3a8 6%, #c89820 13%, rgba(200, 152, 32, 0.16) 34%, transparent 68%);
}

.mirror-source {
  top: 62px;
  box-shadow: 0 0 52px rgba(200, 152, 32, 0.17);
}

.mirror-echo {
  top: 168px;
  opacity: 0.2;
  transform: translateX(-50%) scaleY(-0.72);
  filter: blur(3px);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.82), transparent 82%);
}

.mirror-horizon {
  position: absolute;
  left: 0;
  right: 0;
  top: 151px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(246, 227, 168, 0.54), transparent);
  box-shadow: 0 0 18px rgba(200, 152, 32, 0.14);
}

.feature-card,
.content-card,
.atlas-card,
.mini-card,
.library-card,
.beam-demo-note,
.composer,
.bottom-nav {
  backdrop-filter: blur(24px) saturate(112%);
  -webkit-backdrop-filter: blur(24px) saturate(112%);
}

.feature-card,
.content-card,
.atlas-card,
.mini-card,
.library-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(213, 225, 242, 0.16);
  background:
    linear-gradient(118deg, rgba(255,255,255,.055), transparent 24%, transparent 74%, rgba(128,216,255,.025)),
    linear-gradient(145deg, rgba(24,30,42,.84), rgba(10,13,20,.78));
  box-shadow:
    0 28px 90px rgba(0,0,0,.22),
    inset 0 1px rgba(255,255,255,.11),
    inset 0 -1px rgba(255,255,255,.025);
}

.feature-card::before,
.content-card::before,
.atlas-card::before,
.mini-card::before,
.library-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 8%;
  right: 8%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), rgba(246,227,168,.25), transparent);
  pointer-events: none;
}

.feature-card > *,
.content-card > *,
.atlas-card > *,
.mini-card > *,
.library-card > * {
  position: relative;
  z-index: 1;
}

.bottom-nav,
.composer {
  background:
    linear-gradient(110deg, rgba(255,255,255,.045), transparent 30%),
    rgba(8, 11, 17, 0.76);
  box-shadow:
    0 18px 50px rgba(0,0,0,.34),
    inset 0 1px rgba(255,255,255,.1);
}

.atlas-mirror-axis {
  position: absolute;
  z-index: 0;
  left: 12%;
  right: 12%;
  top: 52%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(246,227,168,.34), rgba(128,216,255,.2), transparent);
  box-shadow: 0 0 16px rgba(200,152,32,.11);
  opacity: .72;
}

.atlas-mirror-axis::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  top: 8px;
  height: 70px;
  background: linear-gradient(to bottom, rgba(128,216,255,.045), transparent);
  filter: blur(7px);
}

[data-theme="light"] {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #eaf0f8;
  --text: #121824;
  --muted: #536174;
  --line: #cdd7e5;
  --gold: #9b6a00;
  --gold-2: #6f4d00;
  --blue: #006b9b;
  --nav: rgba(255, 255, 255, 0.94);
}

[data-theme="light"] .brand-logo-dark {
  display: none;
}

[data-theme="light"] .brand-logo-light {
  display: block;
}

[data-theme="light"] .beam-mark,
[data-theme="light"] .beam-avatar,
[data-theme="light"] .beam-large,
[data-theme="light"] .bottom-nav .beam-nav i {
  background:
    radial-gradient(circle at 50% 48%, #ffffff 0 6%, #fff0b9 8%, #d49b1d 16%, rgba(212, 155, 29, 0.24) 30%, rgba(212, 155, 29, 0.06) 52%, transparent 72%);
  box-shadow: 0 0 18px rgba(212, 155, 29, 0.18), 0 0 42px rgba(212, 155, 29, 0.11);
}

[data-theme="light"] .feature-card,
[data-theme="light"] .content-card,
[data-theme="light"] .atlas-card,
[data-theme="light"] .mini-card,
[data-theme="light"] .library-card {
  border-color: rgba(95, 116, 145, 0.2);
  background:
    linear-gradient(118deg, rgba(255,255,255,.82), rgba(255,255,255,.52) 26%, rgba(233,241,250,.42) 76%, rgba(255,255,255,.74)),
    rgba(255,255,255,.68);
  box-shadow:
    0 24px 70px rgba(45,64,92,.1),
    inset 0 1px rgba(255,255,255,.98),
    inset 0 -1px rgba(112,137,170,.08);
}

[data-theme="light"] .bottom-nav,
[data-theme="light"] .composer {
  background:
    linear-gradient(110deg, rgba(255,255,255,.8), transparent 34%),
    rgba(255,255,255,.72);
}

[data-theme="light"] .mirror-source,
[data-theme="light"] .mirror-echo {
  background: radial-gradient(circle, #ffffff 0 4%, #f7dfa0 7%, #b98212 14%, rgba(185,130,18,.14) 34%, transparent 68%);
}

@media (max-width: 1040px) {
  .mirror-scene {
    left: auto;
    right: -36px;
    opacity: .34;
  }
}

@media (max-width: 820px) {
  .mirror-scene {
    right: -82px;
    top: 8px;
    transform: scale(.72);
    opacity: .24;
  }
}

[data-theme="light"] body {
  background:
    radial-gradient(circle at 78% 8%, rgba(50, 128, 210, 0.12), transparent 32rem),
    radial-gradient(circle at 15% 36%, rgba(125, 88, 196, 0.08), transparent 30rem),
    var(--bg);
}

[data-theme="light"] .topbar {
  background: linear-gradient(var(--bg) 62%, transparent);
}

[data-theme="light"] .feature-card,
[data-theme="light"] .content-card,
[data-theme="light"] .atlas-card,
[data-theme="light"] .mini-card,
[data-theme="light"] .library-card,
[data-theme="light"] .message.beam,
[data-theme="light"] .composer {
  background: rgba(255, 255, 255, 0.94);
  color: var(--text);
  box-shadow: 0 20px 60px rgba(45, 64, 92, 0.1);
}

[data-theme="light"] .reading p {
  color: #364459;
}

[data-theme="light"] .reading .lead,
[data-theme="light"] .feature-card h2,
[data-theme="light"] .library-card h3,
[data-theme="light"] .content-card h2 {
  color: var(--text);
}

[data-theme="light"] .message.user {
  background: #fff0c9;
  color: #533900;
}

[data-theme="light"] .segmented button.active,
[data-theme="light"] .atlas-controls button.active {
  background: #e4ebf5;
  color: #4d3500;
}

[data-theme="light"] .audio-locked,
[data-theme="light"] .beam-demo-note {
  background: #eef7fb;
  border-color: #b8d7e6;
}

[data-theme="light"] .atlas-space {
  background: radial-gradient(circle at 50% 45%, rgba(48, 137, 182, 0.14), transparent 30%), #e8f1fa;
  box-shadow: inset 0 0 50px rgba(49, 87, 130, 0.08);
}

[data-theme="light"] .atlas-space.energy {
  background: radial-gradient(circle at 50% 42%, rgba(151, 88, 184, 0.18), transparent 36%), #f2ecf8;
}

[data-theme="light"] .bottom-nav {
  border-color: #cbd5e2;
  box-shadow: 0 18px 48px rgba(52, 70, 96, 0.16);
}

.site-credit {
  width: min(1120px, calc(100% - 44px));
  margin: -92px auto 116px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  opacity: 0.82;
}

.site-credit::before,
.site-credit::after {
  content: "";
  width: min(72px, 14vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(226, 173, 53, 0.45));
}

.site-credit::after {
  transform: scaleX(-1);
}

.site-credit strong {
  color: var(--gold-2);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.19em;
  white-space: nowrap;
}

[data-theme="light"] .site-credit {
  color: #6d675c;
}

[data-theme="light"] .site-credit strong {
  color: #76550b;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* Living Atlas v2: one continuous canvas from molecular scale to space. */
.atlas-space {
  height: clamp(440px, 62vh, 620px);
  min-height: 440px;
  touch-action: none;
  cursor: ns-resize;
  box-shadow:
    inset 0 0 0 1px rgba(215, 232, 246, 0.08),
    inset 0 -80px 100px rgba(0, 0, 0, 0.24),
    0 24px 70px rgba(0, 0, 0, 0.18);
}

#atlas-canvas {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.atlas-stage-title,
.atlas-depth,
.atlas-caption,
.atlas-gesture {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.atlas-stage-title {
  left: 22px;
  top: 20px;
  display: grid;
  gap: 5px;
  padding: 10px 13px;
  border: 1px solid rgba(217, 232, 246, 0.13);
  border-radius: 12px;
  background: rgba(7, 11, 18, 0.42);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.atlas-stage-title span {
  color: var(--gold);
  font-size: 9px;
  letter-spacing: .18em;
}

.atlas-stage-title b {
  max-width: 240px;
  font-family: Georgia, serif;
  font-size: clamp(17px, 2.5vw, 23px);
  font-weight: 400;
}

.atlas-depth {
  top: 24px;
  right: 24px;
  display: grid;
  grid-template-columns: auto 44px auto;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.atlas-depth > span:first-child {
  color: var(--gold-2);
  font-size: 13px;
  font-weight: 700;
}

.atlas-depth i {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), rgba(128, 216, 255, .5));
  box-shadow: 0 0 10px rgba(226, 173, 53, .3);
}

.atlas-caption {
  left: 50%;
  bottom: 43px;
  width: max-content;
  max-width: calc(100% - 42px);
  transform: translateX(-50%);
  padding: 7px 11px;
  border: 1px solid rgba(218, 232, 246, .13);
  border-radius: 999px;
  background: rgba(7, 11, 18, .43);
  color: rgba(232, 241, 249, .8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: center;
}

.atlas-gesture {
  left: 50%;
  bottom: 15px;
  width: max-content;
  max-width: calc(100% - 30px);
  transform: translateX(-50%);
  color: rgba(189, 204, 219, .65);
  font-size: 9px;
  letter-spacing: .035em;
  text-align: center;
}

.atlas-mirror-axis {
  z-index: 2;
  opacity: .34;
  mix-blend-mode: screen;
}

#scale {
  height: 28px;
  margin-top: 2px;
  cursor: ew-resize;
}

.scale-labels {
  align-items: baseline;
}

.scale-labels b {
  font-family: Georgia, serif;
  font-size: 14px;
  font-weight: 400;
}

.atlas-space.energy .atlas-stage-title {
  border-color: rgba(190, 128, 211, .24);
}

[data-theme="light"] .atlas-stage-title,
[data-theme="light"] .atlas-caption {
  border-color: rgba(37, 75, 105, .16);
  background: rgba(250, 253, 255, .67);
  color: #27384a;
}

[data-theme="light"] .atlas-gesture {
  color: rgba(45, 65, 85, .62);
}

[data-theme="light"] .atlas-mirror-axis {
  mix-blend-mode: multiply;
  opacity: .24;
}

@media (max-width: 620px) {
  .atlas-card { padding: 12px; }
  .atlas-space { height: 500px; min-height: 500px; margin-top: .75rem; }
  .atlas-stage-title { left: 13px; top: 13px; padding: 8px 10px; }
  .atlas-stage-title b { max-width: 170px; font-size: 17px; }
  .atlas-depth { top: 17px; right: 13px; grid-template-columns: auto 24px auto; gap: 5px; font-size: 8px; }
  .atlas-caption { bottom: 48px; font-size: 10px; }
  .atlas-gesture { bottom: 16px; font-size: 8px; line-height: 1.35; }
}

/* Practitioner-first iteration */
.atlas-page-head { padding-bottom: 16px; }
.atlas-page-head h1 { max-width: 920px; }
.atlas-experience {
  max-width: none;
  padding: 18px;
  border-color: rgba(155,126,229,.22);
  background:
    radial-gradient(circle at 78% 28%,rgba(98,57,181,.18),transparent 34%),
    linear-gradient(145deg,rgba(17,24,43,.96),rgba(7,11,22,.98));
}
.atlas-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:44px; margin-bottom:14px; }
.atlas-toolbar-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }
.atlas-tool-button { border:1px solid rgba(205,216,238,.15); border-radius:999px; background:rgba(5,9,18,.58); color:var(--text); padding:10px 15px; cursor:pointer; transition:background .22s ease,border-color .22s ease,transform .22s ease; }
.atlas-tool-button:hover { border-color:rgba(226,173,53,.42); transform:translateY(-1px); }
.atlas-path-button { border-color:rgba(226,173,53,.42); background:rgba(226,173,53,.1); color:var(--gold-2); }
.atlas-map-button { color:var(--gold-2); }
.atlas-controls[hidden],.atlas-tool-button[hidden] { display:none!important; }
.atlas-mode-panel { position:relative; min-height:520px; border:1px solid rgba(197,214,239,.1); border-radius:20px; overflow:hidden; background:#070b16; box-shadow:inset 0 1px rgba(255,255,255,.04),0 24px 70px rgba(0,0,0,.28); }
.atlas-mode-panel.active { animation:atlas-panel-in .46s cubic-bezier(.2,.8,.2,1) both; }
@keyframes atlas-panel-in { from{opacity:0;transform:scale(.992) translateY(6px)} to{opacity:1;transform:none} }

.atlas-scene-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; user-select:none; pointer-events:none; }
.atlas-overview-map { position:relative; min-height:560px; overflow:hidden; background:#030712; isolation:isolate; }
.atlas-overview-art { z-index:0; object-position:center; filter:saturate(.96) contrast(1.04); animation:atlas-art-breathe 12s ease-in-out infinite alternate; }
.atlas-overview-map::after,.atlas-journey-stage::after { content:""; position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(2,5,13,.2),transparent 18%,transparent 77%,rgba(2,5,13,.52)); }
@keyframes atlas-art-breathe { from{transform:scale(1);filter:saturate(.94) contrast(1.04)} to{transform:scale(1.018);filter:saturate(1.06) contrast(1.08)} }
.overview-haze { position:absolute; z-index:1; inset:5% 8%; background:radial-gradient(ellipse at center,rgba(115,77,213,.12),transparent 58%); filter:blur(28px); }
.overview-orbit { position:absolute; left:50%; bottom:-33%; transform:translateX(-50%); border:1px solid rgba(120,91,220,.28); border-radius:50%; box-shadow:inset 0 0 34px rgba(110,73,214,.04),0 0 26px rgba(88,61,177,.05); }
.orbit-one { width:36%; aspect-ratio:1; }
.orbit-two { width:58%; aspect-ratio:1; }
.orbit-three { width:82%; aspect-ratio:1; }
.orbit-four { width:108%; aspect-ratio:1; }
.overview-axis { position:absolute; z-index:2; left:50%; top:7%; bottom:7%; width:1px; background:linear-gradient(transparent,rgba(231,178,57,.72) 18%,rgba(124,87,232,.72) 54%,rgba(170,121,255,.42),transparent); box-shadow:0 0 16px rgba(217,165,45,.26); opacity:.58; }
.overview-node { position:absolute; z-index:3; display:grid; justify-items:center; gap:6px; width:110px; padding:0; border:0; background:transparent; color:#dce5f4; cursor:pointer; transform:translate(-50%,-50%); }
.overview-node i { display:block; width:16px; height:16px; border:1px solid rgba(240,205,105,.75); border-radius:50%; background:radial-gradient(circle,#fff8cc 0 8%,#e2ad35 12%,rgba(226,173,53,.28) 36%,rgba(105,72,177,.2) 62%,transparent 70%); box-shadow:0 0 18px rgba(226,173,53,.34),0 0 36px rgba(117,77,207,.22); transition:.25s ease; }
.overview-node b { padding:4px 7px; border-radius:999px; background:rgba(5,9,18,.56); font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:500; }
.overview-node:hover i,.overview-node.active i { transform:scale(1.35); box-shadow:0 0 24px rgba(255,211,84,.58),0 0 52px rgba(127,84,228,.34); }
.node-cosmos { left:50%; top:10%; }.node-planet { left:50%; top:42%; }.node-body { left:50%; top:59%; }.node-cell { left:50%; top:77%; }.node-molecule { left:50%; top:88%; }
.node-molecule b { order:-1; }
.node-cosmos i { width:13px;height:13px;background:radial-gradient(circle,#dfe9ff,#676cd5 34%,transparent 70%);border-color:#7e85e8; }
.node-planet i { width:30px;height:30px;background:radial-gradient(circle at 33% 28%,#c6f2ff,#3776a4 42%,#101a36 69%);border-color:#88b8da; }
.node-body i { width:24px;height:24px;border-radius:46% 54% 48% 52%;background:radial-gradient(circle,#fff6c4,#e2ad35 22%,#6750ba 58%,transparent 72%); }
.node-cell i { width:46px;height:46px;background:radial-gradient(circle at 43% 42%,#efd8ff 0 9%,#8e5dde 18%,rgba(117,74,203,.46) 46%,rgba(90,58,167,.12) 66%,transparent 70%);border-color:#9c77dd; }
.node-molecule i { width:70px;height:70px;background:radial-gradient(circle at 40% 40%,#f6e4ff 0 6%,#8b5bd5 15%,rgba(114,76,194,.38) 42%,transparent 70%);border-color:#825ac6; }

.atlas-glass-note { z-index:5; display:grid; gap:8px; padding:18px; border:1px solid rgba(221,228,246,.2); border-radius:16px; background:linear-gradient(135deg,rgba(36,42,62,.78),rgba(13,18,32,.7)); box-shadow:inset 0 1px rgba(255,255,255,.08),0 18px 50px rgba(0,0,0,.28); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.atlas-glass-note span { color:var(--muted); font-size:9px; letter-spacing:.17em; text-transform:uppercase; }
.atlas-glass-note b { font-family:Georgia,serif; font-size:22px; font-weight:400; }
.atlas-glass-note p { margin:0; color:var(--muted); font-size:12px; line-height:1.55; }
.overview-note { position:absolute; right:22px; top:22px; width:230px; }
.focus-note { position:absolute; right:62px; bottom:54px; width:300px; }
.focus-note small { color:rgba(214,224,241,.62); font-size:9px; line-height:1.45; }
.focus-note button { display:flex; justify-content:space-between; align-items:center; border:1px solid rgba(226,173,53,.32); border-radius:999px; background:rgba(226,173,53,.08); color:var(--gold-2); padding:9px 11px; cursor:pointer; }
.focus-note button i { font-style:normal; }
.focus-note .atlas-controls { display:grid; grid-template-columns:1fr 1fr; width:100%; margin:2px 0; padding:3px; border:1px solid rgba(205,216,238,.12); border-radius:999px; background:rgba(5,9,18,.46); }
.focus-note .atlas-controls button { justify-content:center; border:0; padding:8px; background:transparent; color:var(--muted); }
.focus-note .atlas-controls button.active { background:rgba(226,173,53,.16); color:var(--gold-2); }
.atlas-step-actions { display:grid; grid-template-columns:1fr 1.28fr; gap:7px; margin-top:4px; }
.atlas-step-actions button:last-child { background:linear-gradient(135deg,rgba(235,183,52,.24),rgba(128,84,211,.18)); }
.atlas-step-actions button:disabled { opacity:.36; cursor:default; }
.atlas-level-rail { position:absolute; z-index:7; right:12px; top:72px; bottom:150px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; width:38px; padding:6px 0; }
.atlas-level-rail::before { content:""; position:absolute; top:13px; bottom:13px; left:50%; width:1px; transform:translateX(-50%); background:linear-gradient(rgba(226,173,53,.5),rgba(128,84,211,.62)); opacity:.52; }
.atlas-level-rail button { position:relative; z-index:1; display:grid; place-items:center; width:34px; height:34px; padding:0; border:0; background:transparent; color:var(--text); cursor:pointer; }
.atlas-level-rail button i { display:block; width:7px; height:7px; border:1px solid rgba(217,226,242,.58); border-radius:50%; background:#141a2b; box-shadow:0 0 0 4px rgba(5,9,18,.7); transition:.24s ease; }
.atlas-level-rail button span { position:absolute; right:32px; width:max-content; max-width:150px; padding:5px 8px; border:1px solid rgba(205,216,238,.13); border-radius:999px; background:rgba(5,9,18,.78); color:rgba(221,230,244,.72); font-size:9px; opacity:0; transform:translateX(5px); pointer-events:none; transition:.22s ease; }
.atlas-level-rail button:hover span,.atlas-level-rail button:focus-visible span,.atlas-level-rail button.active span { opacity:1; transform:none; }
.atlas-level-rail button.active i { width:13px; height:13px; border-color:#f4cd69; background:radial-gradient(circle,#fff4b7,#dfa92f 35%,#6949b6 70%); box-shadow:0 0 16px rgba(226,173,53,.58),0 0 0 5px rgba(5,9,18,.68); }
.atlas-mode-panel[data-atlas-panel="focus"] { border:0; background:transparent; min-height:0; }
.atlas-mode-panel[data-atlas-panel="focus"] .atlas-space { margin:0; }
.atlas-focus-scenes { position:absolute; inset:0; z-index:0; overflow:hidden; background:#030712; }
.atlas-focus-scenes::after { content:""; position:absolute; z-index:2; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent 48%,rgba(2,5,13,.18) 65%,rgba(2,5,13,.58)); }
.atlas-focus-scene { position:absolute; inset:-1%; width:102%; height:102%; object-fit:cover; object-position:center; opacity:0; transform:scale(1.025); transition:opacity .46s ease,transform 8s ease; filter:saturate(.98) contrast(1.035); }
.atlas-space[data-level="cosmos"] .scene-cosmos,
.atlas-space[data-level="planet"] .scene-planet,
.atlas-space[data-level="space"] .scene-space,
.atlas-space[data-level="field"] .scene-field,
.atlas-space[data-level="body"] .scene-body,
.atlas-space[data-level="systems"] .scene-systems,
.atlas-space[data-level="organs"] .scene-organs,
.atlas-space[data-level="tissues"] .scene-tissues,
.atlas-space[data-level="cell"] .scene-cell,
.atlas-space[data-level="organelles"] .scene-organelles,
.atlas-space[data-level="molecules"] .scene-molecules { opacity:1; transform:scale(1); }
.atlas-space[data-level="organelles"] .scene-organelles { transform:scale(1.48); transform-origin:34% 51%; }
.atlas-space.energy .atlas-focus-scene { filter:saturate(1.08) hue-rotate(3deg) brightness(.92); }
#atlas-canvas { z-index:3; opacity:0; transition:opacity .35s ease; }
.atlas-mode-panel[data-atlas-panel="focus"] .atlas-space::after { content:""; position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent 50%,rgba(2,5,13,.22) 67%,rgba(2,5,13,.55)); }
.atlas-scrubber { margin-top:14px; }
.atlas-experience.guided .atlas-path-button { border-color:rgba(245,202,92,.7); box-shadow:0 0 22px rgba(226,173,53,.12); }

.atlas-journey-stage { position:relative; min-height:560px; display:grid; align-content:space-between; gap:30px; padding:22px 30px 24px; background:#030712; isolation:isolate; }
.atlas-journey-art { z-index:0; object-position:center; filter:saturate(.94) contrast(1.04); animation:atlas-art-breathe 14s ease-in-out infinite alternate-reverse; }
.atlas-journey-stage::before { content:""; position:absolute; z-index:2; top:16%; bottom:16%; width:20%; border-radius:50%; pointer-events:none; opacity:.64; transform:translateX(-50%); transition:left .42s cubic-bezier(.2,.8,.2,1),width .42s ease; background:radial-gradient(ellipse,rgba(235,193,76,.13),rgba(126,80,220,.08) 48%,transparent 72%); filter:blur(8px); }
.atlas-journey-stage[data-level="body"]::before { left:10%; }
.atlas-journey-stage[data-level="systems"]::before { left:30%; }
.atlas-journey-stage[data-level="organs"]::before { left:50%; }
.atlas-journey-stage[data-level="tissues"]::before { left:68%; }
.atlas-journey-stage[data-level="cell"]::before,.atlas-journey-stage[data-level="organelles"]::before,.atlas-journey-stage[data-level="molecules"]::before { left:87%; width:28%; }
.journey-breadcrumbs { position:relative; z-index:4; display:flex; justify-content:center; align-items:center; gap:12px; color:var(--muted); font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
.journey-breadcrumbs b { color:var(--gold-2); }
.journey-breadcrumbs i { color:rgba(226,173,53,.48); font-style:normal; }
.journey-flow { position:relative; z-index:4; display:grid; grid-template-columns:1.05fr 0 1.1fr 0 .95fr 0 .72fr 0 1.75fr; align-items:center; gap:0; width:100%; min-height:390px; margin:auto; }
.journey-thread { width:0;height:0; }
.journey-portal { display:grid; align-content:end; justify-items:center; gap:10px; min-width:70px; height:330px; padding:0 4px 12px; border:0; background:transparent; color:rgba(220,229,243,.72); cursor:pointer; }
.journey-portal i { display:block; width:72%; height:84%; border:1px solid transparent; border-radius:50%; background:transparent; box-shadow:none; transition:.3s ease; }
.journey-portal b { font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:500; }
.journey-portal.active { color:var(--gold-2); }
.journey-portal.active i,.journey-portal:hover i { transform:scale(1.035); border-color:rgba(242,196,73,.68); box-shadow:0 0 32px rgba(226,173,53,.18),inset 0 0 32px rgba(154,104,235,.13); }
.portal-body i { width:78%; }.portal-systems i { width:78%; }.portal-organs i { width:80%; }.portal-tissues i { width:82%; }.portal-cell i { width:88%; }
.journey-progress { position:relative; z-index:4; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; color:var(--muted); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.journey-progress div { height:5px; overflow:hidden; border-radius:999px; background:rgba(215,224,241,.15); }
.journey-progress div i { display:block; width:40%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#f1bd42,#ffe08a); box-shadow:0 0 15px rgba(226,173,53,.45); transition:width .35s ease; }
.journey-progress output { color:var(--text); }
.atlas-level-info { max-width:820px; margin-top:16px; }

[data-theme="light"] .atlas-experience { background:radial-gradient(circle at 78% 28%,rgba(111,74,194,.12),transparent 35%),rgba(255,255,255,.92); }
[data-theme="light"] .atlas-mode-panel,[data-theme="light"] .atlas-overview-map,[data-theme="light"] .atlas-journey-stage { background:#07101f; }
[data-theme="light"] .atlas-tool-button,[data-theme="light"] .focus-note .atlas-controls { background:rgba(237,242,250,.92); }
[data-theme="light"] .overview-node { color:#253246; }
[data-theme="light"] .overview-node b { background:rgba(255,255,255,.7); }
[data-theme="light"] .atlas-glass-note { background:rgba(255,255,255,.74); color:#172132; border-color:rgba(75,93,125,.18); }

@media(max-width:820px){
  .atlas-experience { padding:10px; }
  .atlas-toolbar { align-items:center; flex-direction:row; gap:6px; overflow-x:auto; }
  .atlas-toolbar-actions { gap:6px; }
  .atlas-tool-button { flex:0 0 auto; padding:9px 12px; font-size:11px; }
  .atlas-body-path-button { display:none; }
  .atlas-mode-panel,.atlas-overview-map,.atlas-journey-stage { min-height:520px; }
  .overview-note { left:14px; right:14px; top:auto; bottom:14px; width:auto; }
  .atlas-overview-art { object-fit:cover; object-position:center; }
  .node-cosmos { top:8%; }.node-planet { top:35%; }.node-body { top:51%; }.node-cell { top:66%; }.node-molecule { top:78%; }
  .overview-orbit { bottom:-10%; }.orbit-four { width:170%; }.orbit-three { width:135%; }.orbit-two { width:98%; }.orbit-one { width:62%; }
  .focus-note { left:13px; right:52px; top:auto; bottom:54px; width:auto; transform:none; padding:12px; gap:6px; }
  .focus-note p { display:none; }
  .focus-note b { font-size:18px; }
  .focus-note small { display:none; }
  .atlas-step-actions { margin-top:0; }
  .atlas-level-rail { right:4px; top:64px; bottom:166px; width:38px; }
  .atlas-level-rail button { width:30px; height:30px; }
  .atlas-level-rail button span { display:none; }
  .atlas-mode-panel[data-atlas-panel="focus"] .atlas-caption { display:none; }
  .atlas-mode-panel[data-atlas-panel="focus"] .atlas-gesture { bottom:12px; }
  /* The Atlas artwork is composed around the left third so the desktop note can
     live on the right. Keep that focal point on narrow screens instead of
     shifting an oversized image left and cutting the subject out entirely. */
  .atlas-focus-scene { inset:-1%; width:102%; height:102%; object-position:33% center; }
  .atlas-space[data-level="cosmos"] .scene-cosmos,
  .atlas-space[data-level="planet"] .scene-planet,
  .atlas-space[data-level="space"] .scene-space,
  .atlas-space[data-level="field"] .scene-field,
  .atlas-space[data-level="body"] .scene-body,
  .atlas-space[data-level="systems"] .scene-systems,
  .atlas-space[data-level="organs"] .scene-organs,
  .atlas-space[data-level="tissues"] .scene-tissues,
  .atlas-space[data-level="cell"] .scene-cell,
  .atlas-space[data-level="molecules"] .scene-molecules { transform:scale(1); }
  .atlas-space[data-level="organelles"] .scene-organelles { transform:scale(1.12); transform-origin:33% 50%; }
  .atlas-journey-stage { padding:16px 12px 20px; overflow:hidden; }
  .atlas-journey-art { object-fit:cover; width:100%; left:0; object-position:center; }
  .journey-breadcrumbs { overflow:auto; justify-content:flex-start; white-space:nowrap; }
  .journey-flow { grid-template-columns:repeat(5,minmax(92px,1fr)); gap:4px; overflow-x:auto; padding:24px 6px; scroll-snap-type:x mandatory; }
  .journey-thread { display:none; }
  .journey-portal { scroll-snap-align:center; }
  .journey-portal { height:290px; }
  .journey-portal i,.portal-systems i,.portal-organs i,.portal-tissues i,.portal-cell i { width:78%;height:82%;background:transparent; }
  .journey-progress { grid-template-columns:1fr auto; }
  .journey-progress span { grid-column:1/-1; }
}

@media(prefers-reduced-motion:reduce){
  .atlas-focus-scene,.atlas-mode-panel.active,.atlas-tool-button,.atlas-level-rail button i { transition:none!important; animation:none!important; }
}

.start-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  margin: 1.25rem 0;
}
.start-actions button {
  display: grid;
  gap: .3rem;
  min-height: 82px;
  padding: .9rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgba(17,21,29,.72);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.start-actions button:first-child { border-color: rgba(226,173,53,.42); background: rgba(226,173,53,.07); }
.start-actions small { color: var(--muted); line-height: 1.35; }

.reflection-box {
  display: grid;
  gap: .8rem;
  margin-top: 1.15rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1.15rem;
  background: rgba(17, 21, 29, .72);
}

.reflection-box > label,
.library-tools label,
.ab-grid label {
  color: var(--muted);
  font-size: .82rem;
}

.reflection-box textarea,
.library-tools input,
.ab-grid textarea {
  width: 100%;
  margin-top: .5rem;
  border: 1px solid var(--line);
  border-radius: .8rem;
  background: rgba(8, 10, 16, .72);
  color: var(--text);
  padding: .85rem;
}

.reflection-box textarea { min-height: 78px; resize: vertical; }
.reflection-box .secondary { justify-self: start; }
.reflection-scales { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.reflection-scales label { display: grid; grid-template-columns: 1fr auto; gap: .35rem; color: var(--muted); font-size: .78rem; }
.reflection-scales input { grid-column: 1 / -1; width: 100%; accent-color: var(--gold); }
.reflection-scales output { color: var(--gold-2); }
.optional-fields { margin: .8rem 0; border: 1px solid var(--line); border-radius: 1rem; background: rgba(8,10,16,.28); }
.optional-fields summary { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; color: var(--text); cursor: pointer; list-style: none; }
.optional-fields summary::-webkit-details-marker { display: none; }
.optional-fields summary::after { content: '＋'; color: var(--gold-2); }
.optional-fields[open] summary::after { content: '−'; }
.optional-fields summary span { margin-left: auto; color: var(--muted); font-size: .72rem; }
.optional-fields > .reflection-scales,
.optional-fields > .form-grid { padding: .2rem 1rem 1rem; }

.rhythm-card { max-width: none; margin-bottom: 1rem; }
.compact-title { margin: 0 0 1.25rem; }
.compact-title h2 { margin: .35rem 0 0; }
.compact-title > span { color: var(--muted); font-size: .78rem; }
.rhythm-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: .55rem; }
.rhythm-day { min-height: 94px; display: grid; align-content: space-between; justify-items: center; gap: .45rem; padding: .65rem .3rem; border: 1px solid var(--line); border-radius: .85rem; color: var(--muted); background: rgba(8,10,16,.36); }
.rhythm-day.active { border-color: rgba(226,173,53,.3); color: var(--text); }
.rhythm-day > span { text-transform: uppercase; font-size: .58rem; letter-spacing: .08em; }
.rhythm-day > small { font-size: .72rem; }
.activity-dots { min-height: 30px; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 4px; }
.activity-dots i,.rhythm-legend i { width: 8px; height: 8px; border-radius: 50%; position: relative; display: inline-block; }
.activity-dots i[data-count]:not([data-count=""])::after { content: attr(data-count); position: absolute; inset: -8px -7px auto auto; color: var(--text); font: 7px/1 sans-serif; }
.visit { background: var(--muted); }.practice { background: var(--gold); }.beam { background: var(--blue); }.material { background: #b777d1; }
.rhythm-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .9rem; color: var(--muted); font-size: .7rem; }
.rhythm-legend span { display: inline-flex; align-items: center; gap: .35rem; }

.status-explainer { display: block; max-width: 760px; color: var(--muted); line-height: 1.55; }
.status-explainer b { color: var(--text); font-weight: 600; }
.library-tools { display: flex; align-items: end; gap: 1rem; margin-bottom: .9rem; }
.search-field { flex: 1; }
.search-field span { display: block; }
.library-tools input[type="search"] { min-height: 46px; }
.status-filter { display: inline-flex; align-items: center; gap: .55rem; min-height: 46px; padding: 0 .85rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--surface); white-space: nowrap; }
.status-filter input { accent-color: var(--gold); }
.library-card { position: relative; padding-bottom: 68px; }
.library-card.is-read { border-color: rgba(127,185,155,.35); }
.library-card.is-favorite { box-shadow: inset 0 0 0 1px rgba(226,173,53,.16); }
.library-empty { padding: 2rem; border: 1px dashed var(--line); border-radius: 1rem; color: var(--muted); text-align: center; }
.library-actions { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; display: flex; justify-content: space-between; align-items: center; }
.library-actions button { border: 1px solid var(--line); border-radius: 999px; background: rgba(8,10,16,.52); color: var(--muted); padding: .42rem .7rem; cursor: pointer; }
.library-actions button:first-child { width: 34px; height: 34px; padding: 0; color: var(--gold-2); font-size: 1.15rem; }

.practice-actions,.draft-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.ghost-action { border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); padding: .75rem 1rem; cursor: pointer; }
.ghost-action.active { border-color: var(--gold); color: var(--gold-2); }

.journey-card > p,.creator-card > p { color: var(--muted); line-height: 1.6; }
.body-zone-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .65rem; margin: 1.25rem 0; }
.body-zone-grid button { min-height: 70px; display: grid; place-content: center; gap: .25rem; border: 1px solid var(--line); border-radius: 1rem; background: rgba(8,10,16,.48); color: var(--text); cursor: pointer; }
.body-zone-grid button small { color: var(--muted); }
.body-zone-grid button.visited { border-color: rgba(226,173,53,.44); background: radial-gradient(circle at 50% 30%,rgba(226,173,53,.13),transparent 72%); }
.body-zone-grid button.visited small { color: var(--gold-2); }
.ab-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin-bottom: 1rem; }
.ab-grid textarea { min-height: 110px; resize: vertical; }

.profile-card,.creator-card { max-width: 920px; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 1rem; }
.form-grid .full { grid-column: 1 / -1; }
.creator-card .form-grid textarea { min-height: 90px; }
.privacy-choices { display: grid; gap: .7rem; margin: .6rem 0 1.2rem; padding: 1rem; border: 1px solid var(--line); border-radius: 1rem; }
.privacy-choices legend { color: var(--gold-2); padding: 0 .4rem; }
.privacy-choices label { display: flex; align-items: center; gap: .65rem; margin: 0; }
.privacy-choices input { width: auto; min-height: auto; margin: 0; accent-color: var(--gold); }
.draft-review { display: none; margin-top: 1rem; padding: 1rem; border-left: 2px solid var(--blue); background: rgba(128,216,255,.055); }
.draft-review:not(:empty) { display: block; }
.draft-review p { color: var(--muted); line-height: 1.55; margin-bottom: 0; }

.beam-fab { position: fixed; z-index: 45; right: max(18px,calc((100vw - 1120px)/2)); bottom: 104px; display: flex; align-items: center; gap: .55rem; border: 1px solid rgba(226,173,53,.32); border-radius: 999px; background: var(--nav); color: var(--gold-2); padding: .55rem .85rem .55rem .55rem; box-shadow: 0 14px 42px rgba(0,0,0,.3); backdrop-filter: blur(14px); cursor: pointer; }
.beam-fab i { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle,#fffdf0 0 7%,#e2ad35 17%,rgba(226,173,53,.18) 52%,transparent 72%); box-shadow: 0 0 18px rgba(226,173,53,.24); }
.beam-fab span { font-size: .72rem; }

[data-theme="light"] .reflection-box textarea,
[data-theme="light"] .library-tools input,
[data-theme="light"] .ab-grid textarea,
[data-theme="light"] .library-actions button,
[data-theme="light"] .body-zone-grid button { background: rgba(255,255,255,.76); color: var(--text); }

@media (max-width: 720px) {
  .start-actions { grid-template-columns: 1fr; }
  .start-actions button { min-height: 68px; }
  .reflection-scales,.form-grid,.ab-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .body-zone-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .library-tools { align-items: stretch; flex-direction: column; }
  .status-filter { justify-content: center; }
  .rhythm-card { padding: 18px; }
  .rhythm-week { gap: .3rem; }
  .rhythm-day { min-height: 82px; padding: .5rem .15rem; }
  .beam-fab { right: 14px; bottom: 91px; }
  .beam-fab span { display: none; }
  .beam-fab { padding: .55rem; }
}

/* Practitioner workspace */
.library-select {
  min-width: 165px;
}

.library-select span {
  display: block;
}

.library-select select {
  width: 100%;
  min-height: 46px;
  margin-top: .5rem;
  padding: 0 2.2rem 0 .8rem;
  border: 1px solid var(--line);
  border-radius: .8rem;
  background: rgba(8, 10, 16, .72);
  color: var(--text);
}

.practice-console {
  display: grid;
  gap: 1rem;
  padding: 1.1rem;
}

.practice-mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
  padding: .35rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgba(8, 10, 16, .46);
}

.practice-mode-tabs button {
  min-height: 44px;
  border: 0;
  border-radius: .75rem;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.practice-mode-tabs button.active {
  background: linear-gradient(135deg, rgba(226, 173, 53, .2), rgba(128, 216, 255, .08));
  color: var(--gold-2);
  box-shadow: inset 0 0 0 1px rgba(226, 173, 53, .25);
}

.practice-script-panel {
  min-height: 190px;
  padding: clamp(1.2rem, 4vw, 2.2rem);
  border: 1px solid rgba(128, 216, 255, .18);
  border-radius: 1rem;
  background: radial-gradient(circle at 100% 0, rgba(128, 216, 255, .08), transparent 38%), rgba(8, 10, 16, .5);
}

.practice-script-panel p {
  margin: .9rem 0 0;
  color: var(--text);
  font: 400 clamp(1.18rem, 2.5vw, 1.55rem)/1.7 Georgia, serif;
}

.practice-live-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
}

#view-practitioner {
  max-width: 1120px;
}

.practitioner-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
  margin: 1rem 0 1.5rem;
}

.practitioner-summary article {
  display: grid;
  gap: .3rem;
  min-height: 130px;
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-radius: 1.15rem;
  background:
    radial-gradient(circle at 90% 10%, rgba(226, 173, 53, .1), transparent 45%),
    rgba(17, 21, 29, .78);
}

.practitioner-summary span {
  color: var(--gold);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.practitioner-summary b {
  align-self: end;
  font: 400 1.6rem/1.1 Georgia, serif;
}

.practitioner-summary small {
  color: var(--muted);
}

.client-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
}

.client-card {
  display: grid;
  align-content: start;
  gap: .85rem;
  min-height: 290px;
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-radius: 1.15rem;
  background: linear-gradient(145deg, rgba(22, 28, 39, .94), rgba(10, 13, 20, .94));
  box-shadow: 0 18px 48px rgba(0, 0, 0, .14);
}

.client-card-top {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: .75rem;
}

.client-card-top > span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(226, 173, 53, .36);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 173, 53, .14), transparent 70%);
  color: var(--gold-2);
  font-family: Georgia, serif;
  font-size: 1.15rem;
}

.client-card-top div {
  min-width: 0;
}

.client-card-top b,
.client-card-top small {
  display: block;
}

.client-card-top b {
  font: 400 1.2rem/1.2 Georgia, serif;
}

.client-card-top small,
.client-card > small {
  color: var(--muted);
  line-height: 1.45;
}

.client-card p {
  margin: 0;
  color: var(--gold-2);
  font-size: .82rem;
}

.client-card strong {
  margin-top: auto;
  font-size: .88rem;
}

.client-card .secondary {
  justify-self: start;
  margin-top: .2rem;
}

.session-builder,
.session-history-card {
  max-width: none;
  margin-top: 1rem;
}

.session-builder > p {
  color: var(--muted);
  line-height: 1.55;
}

.session-step-preview {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .4rem;
  margin: .25rem 0 1.2rem;
}

.session-step-preview span {
  display: grid;
  justify-items: center;
  gap: .42rem;
  min-width: 0;
  color: var(--muted);
  font-size: .68rem;
  text-align: center;
}

.session-step-preview i,
.session-progress button i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(8, 10, 16, .7);
  color: var(--gold-2);
  font-style: normal;
}

.session-history {
  display: grid;
  gap: .6rem;
}

.session-history article {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: .25rem 1rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--line);
}

.session-history article:last-child {
  border-bottom: 0;
}

.session-history small,
.empty-note {
  color: var(--muted);
}

.session-history p {
  grid-column: 2;
  margin: 0;
}

#view-session {
  max-width: 1120px;
}

.session-live-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 0 1rem;
}

.session-live-head h1 {
  margin: .5rem 0;
  font: 400 clamp(2.3rem, 6vw, 4.5rem)/1 Georgia, serif;
}

.session-live-head p {
  margin: 0;
  color: var(--muted);
}

.session-timer {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(17, 21, 29, .78);
}

.session-timer output {
  min-width: 86px;
  padding-left: .7rem;
  color: var(--gold-2);
  font: 400 1.35rem/1 monospace;
}

.session-timer .secondary {
  padding: .7rem 1rem;
}

.session-progress {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .35rem;
  margin: 1rem 0;
}

.session-progress::before {
  content: '';
  position: absolute;
  top: 17px;
  left: 7%;
  right: 7%;
  height: 1px;
  background: var(--line);
}

.session-progress button {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .4rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: .7rem;
}

.session-progress button.active,
.session-progress button.done {
  color: var(--gold-2);
}

.session-progress button.active i,
.session-progress button.done i {
  border-color: rgba(226, 173, 53, .6);
  background: #2b2414;
}

.session-live-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 1rem;
}

.session-live-grid .content-card,
.session-outcome {
  max-width: none;
  margin: 0;
}

.session-guide {
  display: flex;
  flex-direction: column;
}

.session-guide > p {
  min-height: 74px;
  color: var(--muted);
  line-height: 1.6;
}

.session-stage-actions {
  display: flex;
  justify-content: space-between;
  gap: .65rem;
  margin-top: auto;
}

.live-practice-card audio {
  width: 100%;
  margin: .5rem 0 1rem;
}

.live-reading {
  min-height: 165px;
  margin-bottom: 1rem;
  padding: 1rem;
  border-left: 2px solid var(--gold);
  background: rgba(226, 173, 53, .045);
  color: var(--text);
  font: 400 1.05rem/1.7 Georgia, serif;
}

.session-outcome {
  margin-top: 1rem;
}

.session-zone-picker {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: .4rem 0 1.2rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
}

.session-zone-picker legend {
  padding: 0 .45rem;
  color: var(--gold-2);
}

.session-zone-picker label {
  margin: 0;
  padding: .55rem .75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
}

.session-zone-picker input {
  width: auto;
  min-height: 0;
  margin: 0 .35rem 0 0;
  accent-color: var(--gold);
}

[data-theme="light"] .library-select select,
[data-theme="light"] .practice-mode-tabs,
[data-theme="light"] .client-card,
[data-theme="light"] .session-timer,
[data-theme="light"] .practice-script-panel {
  background-color: rgba(255, 255, 255, .8);
  color: var(--text);
}

@media (max-width: 820px) {
  .practitioner-summary,
  .client-grid {
    grid-template-columns: 1fr;
  }

  .practitioner-summary {
    gap: .55rem;
  }

  .practitioner-summary article {
    min-height: 98px;
  }

  .client-card {
    min-height: 0;
  }

  .session-live-grid {
    grid-template-columns: 1fr;
  }

  .session-live-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .session-timer {
    position: sticky;
    top: 76px;
    z-index: 12;
    align-self: stretch;
    justify-content: space-between;
  }

  .session-step-preview,
  .session-progress {
    grid-template-columns: repeat(6, 86px);
    justify-content: start;
    overflow-x: auto;
    padding-bottom: .5rem;
  }

  .session-progress::before {
    display: none;
  }

  .session-history article {
    grid-template-columns: 1fr;
  }

  .session-history p {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  .practice-mode-tabs {
    grid-template-columns: 1fr;
  }

  .library-select {
    min-width: 0;
  }

  .session-zone-picker {
    display: grid;
  }
}

/* Beam ↔ Atlas: linked practice prototype */
.status.atlas-linked {
  background: rgba(128, 216, 255, .12);
  color: #a9e8ff;
}

.linked-practice-card {
  background:
    radial-gradient(circle at 82% 18%, rgba(128, 216, 255, .11), transparent 34%),
    linear-gradient(145deg, rgba(226, 173, 53, .08), var(--surface));
  border-color: rgba(226, 173, 53, .38);
}

/* Non-destructive user/practitioner mode switch. */
.role-switch {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0 .8rem;
  border: 1px solid var(--line) !important;
  border-radius: 999px;
  background: rgba(17, 21, 29, .82) !important;
  color: var(--text) !important;
  cursor: pointer;
}

.role-switch > span:first-child {
  color: var(--gold-2);
  font-size: 1rem;
}

.role-switch > span:last-child {
  font-size: .76rem;
}

.beam-clear {
  margin-left: auto;
  padding: 8px 13px;
  font-size: 11px;
}

.role-dialog {
  width: min(650px, calc(100% - 28px));
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
}

.role-dialog::backdrop {
  background: rgba(2, 5, 10, .76);
  backdrop-filter: blur(10px);
}

.role-dialog-panel {
  position: relative;
  padding: 2rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(24, 30, 42, .99), rgba(9, 12, 18, .99));
  box-shadow: 0 32px 100px rgba(0, 0, 0, .55);
}

.role-dialog-panel h2 {
  margin: .7rem 3rem .55rem 0;
  font-family: Georgia, serif;
  font-size: 2rem;
  font-weight: 400;
}

.role-dialog-panel > p {
  max-width: 540px;
  margin: 0 0 1.4rem;
  color: var(--muted);
  line-height: 1.55;
}

.role-dialog-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.35rem;
  cursor: pointer;
}

.role-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.role-option {
  min-height: 116px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .85rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(8, 10, 16, .55);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.role-option:hover,
.role-option:focus-visible,
.role-option.active {
  border-color: rgba(226, 173, 53, .58);
  background: rgba(226, 173, 53, .08);
  outline: 0;
}

.role-option-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(226, 173, 53, .35);
  border-radius: 50%;
  color: var(--gold-2);
  font-size: 1.15rem;
}

.role-option b,
.role-option small {
  display: block;
}

.role-option b {
  margin-bottom: .35rem;
  font-size: .92rem;
}

.role-option small {
  color: var(--muted);
  line-height: 1.4;
}

.role-option i {
  opacity: 0;
  color: var(--gold-2);
  font-style: normal;
}

.role-option.active i {
  opacity: 1;
}

body[data-app-role="user"] .bottom-nav {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#practitioner-nav[hidden] {
  display: none;
}

[data-theme="light"] .role-switch {
  background: rgba(255, 255, 255, .82) !important;
}

[data-theme="light"] .role-dialog-panel {
  background: linear-gradient(145deg, rgba(255, 253, 248, .99), rgba(238, 232, 220, .99));
}

[data-theme="light"] .role-option {
  background: rgba(255, 255, 255, .7);
}

@media (max-width: 560px) {
  .top-actions {
    gap: .45rem;
  }

  .role-switch {
    width: 38px;
    padding: 0;
    justify-content: center;
  }

  .role-switch > span:last-child {
    display: none;
  }

  .role-dialog-panel {
    padding: 1.4rem;
  }

  .role-dialog-panel h2 {
    font-size: 1.65rem;
  }

  .role-options {
    grid-template-columns: 1fr;
  }

  .role-option {
    min-height: 92px;
  }
}

.pancreas-art {
  position: relative;
  width: 92px;
  border: 0;
  border-radius: 42% 58% 46% 54%;
  background: linear-gradient(145deg, #ad6d32, #e9b55d);
  box-shadow: 0 0 34px rgba(226, 173, 53, .2);
  transform: rotate(-8deg);
}

.pancreas-art::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  top: 50%;
  height: 3px;
  border-radius: 99px;
  background: #fff0b2;
  box-shadow: 0 0 11px rgba(255, 240, 178, .8);
}

.audio-awaiting {
  display: grid;
  gap: .35rem;
  width: min(100%, 520px);
  margin: 1.6rem auto 0;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(128, 216, 255, .22);
  border-radius: 1rem;
  background: rgba(128, 216, 255, .055);
  color: var(--text);
}

.audio-awaiting[hidden] { display: none; }
#practice-audio[hidden], #continue-audio[hidden] { display: none !important; }
.audio-awaiting span { color: var(--muted); font-size: .82rem; }

.practice-visual-card {
  max-width: 900px;
  padding: clamp(18px, 4vw, 34px);
  background:
    radial-gradient(circle at 50% 38%, rgba(128, 216, 255, .1), transparent 36%),
    radial-gradient(circle at 73% 62%, rgba(226, 173, 53, .11), transparent 34%),
    linear-gradient(145deg, #111817, #0b0c0b);
}

.practice-visual-card[hidden] { display: none; }

.visual-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.visual-card-head h2 { margin: .45rem 0 0; }

.body-orientation {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem .5rem .2rem;
  color: var(--muted);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.anatomy-focus {
  position: relative;
  display: block;
  width: 100%;
  min-height: 430px;
  overflow: hidden;
  border: 1px solid rgba(128, 216, 255, .17);
  border-radius: 1.25rem;
  background: rgba(2, 8, 12, .56);
  color: #9ecbe2;
  cursor: pointer;
}

.anatomy-focus::before {
  content: "";
  position: absolute;
  inset: 9% 16%;
  border: 1px solid rgba(226, 173, 53, .08);
  border-radius: 50%;
  box-shadow: 0 0 0 55px rgba(128, 216, 255, .025), 0 0 70px rgba(128, 216, 255, .06);
}

.anatomy-focus svg {
  position: relative;
  display: block;
  width: min(100%, 670px);
  height: 390px;
  margin: 14px auto 0;
}

.pancreas-shape {
  fill: #d99045;
  stroke: #f6e3a8;
  stroke-width: 3;
  filter: url(#miro-organ-glow);
  animation: organ-breathe 3.6s ease-in-out infinite;
}

.pancreas-duct {
  fill: none;
  stroke: #fff1b0;
  stroke-width: 6;
  stroke-linecap: round;
  filter: url(#miro-organ-glow);
}

.duct-point { fill: #fff8d5; filter: url(#miro-organ-glow); }

.attention-route {
  fill: none;
  stroke: #80d8ff;
  stroke-width: 2;
  stroke-dasharray: 9 11;
  animation: route-move 5s linear infinite;
}

@keyframes route-move { to { stroke-dashoffset: -80; } }
@keyframes organ-breathe { 50% { opacity: .72; transform: scale(.99); transform-origin: center; } }

.focus-callout {
  position: absolute;
  z-index: 3;
  top: 1rem;
  left: 50%;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .65rem;
  padding: .7rem .9rem;
  border: 1px solid rgba(226, 173, 53, .32);
  border-radius: .9rem;
  background: rgba(8, 10, 9, .88);
  color: var(--text);
  text-align: left;
  transform: translateX(-50%);
  backdrop-filter: blur(12px);
}

.focus-callout i {
  grid-row: 1 / 3;
  align-self: center;
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 18px var(--gold);
}

.focus-callout b { font-family: Georgia, serif; font-weight: 400; }
.focus-callout small { color: var(--muted); white-space: nowrap; }

.atlas-entry {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  padding: .7rem .85rem;
  border-radius: 99px;
  background: rgba(8, 10, 9, .86);
  color: var(--gold-2);
  font-size: .75rem;
  backdrop-filter: blur(12px);
}

.atlas-entry b { margin-left: .4rem; color: #a9e8ff; }

.visual-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: .85rem .2rem 0;
  color: var(--muted);
  font-size: .72rem;
}

.visual-legend span { display: inline-flex; align-items: center; gap: .45rem; }
.visual-legend i { width: .55rem; height: .55rem; border-radius: 50%; }
.anatomy-dot { background: var(--gold); box-shadow: 0 0 10px rgba(226, 173, 53, .5); }
.attention-dot { border: 1px solid #80d8ff; }

.practice-visual-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  margin-top: 1.25rem;
}

.practice-visual-steps::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 17px;
  height: 1px;
  background: var(--line);
}

.practice-visual-steps button {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.practice-visual-steps i {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  margin: 0 auto .45rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #10110f;
  font-style: normal;
}

.practice-visual-steps span { font-size: .68rem; }
.practice-visual-steps button.active { color: #a9e8ff; }
.practice-visual-steps button.active i { border-color: #80d8ff; box-shadow: 0 0 18px rgba(128, 216, 255, .2); }
.visual-step-status { margin: .8rem 0 0; color: var(--muted); text-align: center; font-size: .75rem; }
.visual-step-status b { color: var(--text); }

.organ-focus-card {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(260px, .95fr);
  gap: 1.5rem;
  max-width: 100%;
  margin-top: 1.2rem;
  background:
    radial-gradient(circle at 78% 50%, rgba(226, 173, 53, .13), transparent 32%),
    linear-gradient(145deg, rgba(128, 216, 255, .04), rgba(13, 13, 11, .97));
}

.organ-focus-copy h2 { margin: .55rem 0; font-size: clamp(2rem, 4vw, 3.4rem); }
.organ-focus-copy > p { color: var(--muted); line-height: 1.65; }
.organ-focus-copy .primary { margin-top: 1rem; }
.organ-focus-visual { display: grid; place-items: center; min-height: 260px; }
.organ-focus-visual svg { width: 100%; filter: drop-shadow(0 0 25px rgba(226, 173, 53, .12)); }
.knowledge-split { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; margin: 1.1rem 0; }
.knowledge-split span { display: grid; gap: .25rem; padding: .8rem; border: 1px solid var(--line); border-radius: .9rem; color: var(--muted); font-size: .72rem; }
.knowledge-split b { color: var(--text); font-size: .78rem; }

[data-theme="light"] .practice-visual-card,
[data-theme="light"] .anatomy-focus,
[data-theme="light"] .focus-callout,
[data-theme="light"] .atlas-entry {
  background-color: rgba(255, 253, 248, .94);
}

[data-theme="light"] .practice-visual-steps i { background: #fffdf8; }

@media (max-width: 700px) {
  .anatomy-focus { min-height: 365px; }
  .anatomy-focus svg { height: 330px; transform: scale(1.08); }
  .focus-callout { max-width: calc(100% - 1.5rem); }
  .focus-callout small { white-space: normal; }
  .atlas-entry { left: 50%; right: auto; width: max-content; max-width: calc(100% - 1.5rem); transform: translateX(-50%); }
  .organ-focus-card { grid-template-columns: 1fr; }
  .organ-focus-visual { order: -1; min-height: 190px; }
  .knowledge-split { grid-template-columns: 1fr; }
}

/* Practitioner calendar, client cards and marketplace moderation. */
.practitioner-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.client-calendar-shell,
.marketplace-review,
.client-detail {
  margin: 1rem 0;
  border: 1px solid var(--line);
  border-radius: 1.35rem;
  background:
    radial-gradient(circle at 88% 7%, rgba(226, 173, 53, .085), transparent 34%),
    linear-gradient(145deg, rgba(18, 23, 32, .96), rgba(9, 12, 18, .96));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .18);
}

.client-calendar-shell { padding: clamp(1rem, 2.5vw, 1.55rem); }

.calendar-toolbar,
.marketplace-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.calendar-toolbar h2,
.marketplace-head h2,
.client-detail h2 {
  margin: .35rem 0 0;
  font: 400 clamp(1.65rem, 3.5vw, 2.35rem)/1.1 Georgia, serif;
}

.calendar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .45rem;
}

.calendar-actions button,
.moderation-filters button,
.moderation-reject {
  min-height: 38px;
  padding: .5rem .75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(8, 10, 16, .58);
  color: var(--muted);
  cursor: pointer;
}

.calendar-actions button:hover,
.calendar-actions button:focus-visible,
.moderation-filters button:hover,
.moderation-filters button:focus-visible,
.moderation-filters button.active {
  border-color: rgba(226, 173, 53, .54);
  color: var(--gold-2);
  outline: 0;
}

.calendar-actions .calendar-add {
  border-color: rgba(226, 173, 53, .5);
  color: var(--gold-2);
}

.calendar-month {
  margin: 1.35rem 0 .65rem;
  color: var(--gold-2);
  font: 400 1.15rem/1.2 Georgia, serif;
  text-transform: capitalize;
}

.calendar-grid-scroll { overflow-x: auto; padding-bottom: .2rem; }
.calendar-weekdays,
.client-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-width: 730px; }
.calendar-weekdays { color: var(--muted); font-size: .66rem; letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.calendar-weekdays span { padding: .45rem; border-bottom: 1px solid var(--line); }

.calendar-day {
  min-height: 112px;
  padding: .45rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(6, 8, 13, .28);
}

.calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day.outside { opacity: .34; }
.calendar-day.today { background: rgba(226, 173, 53, .055); box-shadow: inset 0 0 0 1px rgba(226, 173, 53, .26); }
.calendar-day-number { display: block; margin-bottom: .35rem; color: var(--muted); font-size: .7rem; }
.calendar-day.today .calendar-day-number { color: var(--gold-2); font-weight: 800; }

.calendar-event {
  display: grid;
  width: 100%;
  gap: .12rem;
  margin-top: .3rem;
  padding: .48rem;
  overflow: hidden;
  border: 1px solid rgba(128, 216, 255, .18);
  border-radius: .65rem;
  background: linear-gradient(145deg, rgba(128, 216, 255, .09), rgba(226, 173, 53, .06));
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.calendar-event:hover,
.calendar-event:focus-visible { border-color: rgba(226, 173, 53, .55); outline: 0; transform: translateY(-1px); }
.calendar-event time { color: #a9e8ff; font-size: .62rem; }
.calendar-event b { overflow: hidden; font: 400 .82rem/1.2 Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event small { overflow: hidden; color: var(--muted); font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }

.client-detail {
  position: relative;
  padding: clamp(1.1rem, 3vw, 1.8rem);
  border-color: rgba(226, 173, 53, .32);
}

.client-detail[hidden] { display: none; }
.client-detail-close { position: absolute; top: .8rem; right: .8rem; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--muted); font-size: 1.35rem; cursor: pointer; }
.client-detail-person { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 1rem; padding-right: 3rem; }
.client-detail-person > span { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid rgba(226, 173, 53, .45); border-radius: 50%; background: rgba(226, 173, 53, .08); color: var(--gold-2); font: 400 1.45rem/1 Georgia, serif; }
.client-detail-person small { color: var(--gold); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; }
.client-detail-person p { margin: .35rem 0 0; color: var(--muted); }
.client-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin: 1.25rem 0; }
.client-detail-grid article { min-height: 105px; padding: .9rem; border: 1px solid var(--line); border-radius: .9rem; background: rgba(8, 10, 16, .42); }
.client-detail-grid span { display: block; margin-bottom: .55rem; color: var(--muted); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; }
.client-detail-grid b { color: var(--gold-2); font-size: .9rem; }
.client-detail-grid p { margin: 0; color: var(--text); line-height: 1.45; }
.client-detail-actions,
.moderation-actions { display: flex; flex-wrap: wrap; gap: .55rem; }

.marketplace-review { padding: clamp(1rem, 3vw, 1.8rem); }
.marketplace-head p { max-width: 570px; margin: .65rem 0 0; color: var(--muted); line-height: 1.5; }
.moderation-stat { display: grid; min-width: 116px; justify-items: center; padding: .8rem; border: 1px solid rgba(226, 173, 53, .28); border-radius: 1rem; background: rgba(226, 173, 53, .05); }
.moderation-stat b { color: var(--gold-2); font: 400 2rem/1 Georgia, serif; }
.moderation-stat span { margin-top: .35rem; color: var(--muted); font-size: .62rem; }
.moderation-filters { display: flex; gap: .45rem; margin: 1.2rem 0 .8rem; overflow-x: auto; }
.moderation-filters button { white-space: nowrap; }
.moderation-queue { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }

.moderation-card {
  display: grid;
  align-content: start;
  gap: .75rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgba(8, 10, 16, .5);
}

.moderation-card.status-pending { border-color: rgba(128, 216, 255, .22); }
.moderation-card.status-approved { border-color: rgba(127, 185, 155, .28); }
.moderation-card.status-changes { border-color: rgba(211, 155, 88, .28); }
.moderation-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .65rem; }
.moderation-card-head small { color: var(--muted); font-size: .64rem; }
.moderation-card h3 { margin: .3rem 0 0; font: 400 1.35rem/1.15 Georgia, serif; }
.moderation-badge { flex: 0 0 auto; padding: .35rem .5rem; border-radius: 999px; font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.moderation-badge.pending { background: rgba(128, 216, 255, .1); color: #a9e8ff; }
.moderation-badge.changes { background: rgba(211, 155, 88, .12); color: #e8b87d; }
.moderation-badge.approved { background: rgba(127, 185, 155, .12); color: #a3d2b9; }
.moderation-badge.rejected { background: rgba(210, 100, 100, .12); color: #e7a5a5; }
.moderation-marketplace { margin: 0; color: var(--gold-2); font-size: .72rem; }
.moderation-checks { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.moderation-checks li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid rgba(80, 74, 62, .42); font-size: .7rem; }
.moderation-checks span { color: var(--muted); }
.moderation-checks b { text-align: right; font-weight: 500; }
.moderation-reject { margin-left: auto; border-color: rgba(210, 100, 100, .2); color: #c99292; }
.moderation-empty,
.moderation-status { color: var(--muted); font-size: .78rem; }
.moderation-status { min-height: 1.2rem; margin-top: .75rem; color: var(--green); }

[data-theme="light"] .client-calendar-shell,
[data-theme="light"] .client-detail,
[data-theme="light"] .marketplace-review,
[data-theme="light"] .calendar-day,
[data-theme="light"] .moderation-card,
[data-theme="light"] .client-detail-grid article { background-color: rgba(255, 253, 248, .88); }

@media (max-width: 820px) {
  .practitioner-summary,
  .client-detail-grid,
  .moderation-queue { grid-template-columns: 1fr; }
  .calendar-toolbar,
  .marketplace-head { align-items: stretch; flex-direction: column; }
  .calendar-actions { justify-content: flex-start; }
  .moderation-stat { min-width: 0; align-self: flex-start; }
}

@media (max-width: 560px) {
  .client-calendar-shell { margin-inline: -.35rem; }
  .calendar-actions .calendar-add { width: 100%; }
  .client-detail-person { grid-template-columns: 46px 1fr; }
  .client-detail-person > span { width: 46px; height: 46px; }
  .client-detail-actions > *,
  .moderation-actions > * { flex: 1 1 auto; }
  .moderation-reject { margin-left: 0; }
}