:root {
  color-scheme: light;
  --paper: #faf6fc;
  --ink: #2e193b;
  --muted: #695574;
  --violet: #653897;
  --lavender: #eee3fc;
  --pink: #f9dcea;
  --peach: #fae4d6;
  --line: #e4d7ec;
  --display: Georgia, "Times New Roman", serif;
  --ui: "Trebuchet MS", system-ui, sans-serif;
  --shadow: 0 12px 34px #492a6710;
  font-family: var(--ui);
  color: var(--ink);
  background: var(--paper);
  scroll-behavior: smooth;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: radial-gradient(ellipse 70% 38rem at 82% 9%, #f3e6fb, transparent);
  line-height: 1.5;
}
body.ultra-sleep {
  --paper: #ece2f7;
  --lavender: #e2d3f6;
  background: radial-gradient(ellipse 70% 38rem at 82% 9%, #e5d5f4, transparent), var(--paper);
}
body:has(dialog[open]) { overflow: hidden; }
h1, h2, p, figure, dl, dd { margin: 0; }
h1, h2 { font-family: var(--display); font-weight: 500; }
h1 { max-width: 7.5em; font-size: clamp(3.1rem, 11.6vw, 7.3rem); line-height: .96; letter-spacing: -.072em; }
h2 { font-size: clamp(2rem, 5vw, 3.15rem); line-height: 1.05; letter-spacing: -.045em; }
button { font: inherit; }
button { cursor: pointer; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid #834cc5; outline-offset: 4px; }
.wrap { width: min(100% - clamp(2rem, 9vw, 7rem), 73rem); margin-inline: auto; }
.svg-library, .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.icon { width: 1.35em; height: 1.35em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.skip-link { position: fixed; top: calc(env(safe-area-inset-top) + .5rem); left: 1rem; z-index: 2; background: white; padding: .75rem; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-block: .85rem; border-bottom: 1px solid var(--line); }
.wordmark { display: flex; align-items: center; gap: .65rem; font-size: .81rem; font-weight: 800; line-height: 1.1; text-decoration: none; min-height: 44px; }
.brand-icon { display: grid; place-items: center; width: 2.5rem; aspect-ratio: 1; border-radius: .85rem; background: var(--lavender); color: var(--violet); border: 1px solid #decbed; font-size: 1rem; }
.case-file { display: flex; align-items: center; gap: .45rem; padding: .36rem .65rem; border: 1px solid #e0d0ec; border-radius: 999px; color: var(--muted); font-size: .72rem; white-space: nowrap; }
.case-file span, .record-dot { flex: none; width: .46rem; height: .46rem; border-radius: 50%; background: #8c59b7; }
.lead { display: grid; gap: clamp(1.6rem, 4vw, 3rem); padding-top: clamp(1rem, 3vw, 2rem); }
.opening { text-align: center; animation: entrance .45s ease-out both; }
.opening h1, .opening .intro { margin-inline: auto; }
.opening:focus-within { animation: none; }
.file-label { font-size: .71rem; font-weight: 800; letter-spacing: .09em; color: var(--violet); text-transform: uppercase; margin-bottom: .75rem; }
.intro { max-width: 33ch; color: var(--muted); font-size: clamp(1rem, 2vw, 1.24rem); margin-block: .9rem 1.2rem; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65em;
  min-height: 46px;
  max-width: 100%;
  padding: .65rem 1.05rem;
  border: 1px solid transparent;
  border-radius: .78rem;
  font-size: .93rem;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  touch-action: manipulation;
  transition: transform .15s, background-color .15s, box-shadow .15s;
}
.button:active, .moon-button:active, .pillow-button:active { transform: scale(.96); }
.button:active, .answer:active { filter: brightness(.91); transition: none; }
.primary { color: #fff; background: var(--violet); box-shadow: 0 4px 0 #462366; }
.light { color: #3c2052; background: #fae9f7; }
.outline { border-color: #cbb4db; color: var(--violet); background: #fff9ff; }
.disclaimer { margin-top: .75rem; color: var(--muted); font-size: .77rem; }
.specimen { border: 1px solid #d8c5e8; border-radius: 1.4rem; background: #fffaff; box-shadow: var(--shadow); min-width: 0; }
.specimen figcaption, .specimen-foot { display: flex; align-items: center; gap: .48rem; padding: .68rem .85rem; font-size: .73rem; }
.specimen figcaption { font-weight: 800; }
.specimen-id { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.brain-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: clamp(.75rem, 2.5vw, 2rem) 0;
  background:
    radial-gradient(ellipse at center, #fff5fb 0%, #f3dff6 36%, transparent 78%),
    radial-gradient(#9b76b84a 1px, transparent 1px) center / 18px 18px,
    #e8d9f6;
  border-block: 1px solid #dcc9ed;
}
.orbit { position: absolute; width: min(85%, 54rem); height: 77%; border: 1px dashed #a97fc5; border-radius: 50%; transform: rotate(-12deg); pointer-events: none; }
.brain-model {
  position: relative;
  width: min(100%, 43rem);
  aspect-ratio: 4 / 3;
  animation: arrive .55s ease-out both;
}
.brain-model:focus-within { animation: none; }
.brain-render { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 1rem 1rem #55256936); }
.brain-regions {
  position: absolute;
  inset: 10% 9% 8%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 61% 39%;
}
.hotspot {
  display: grid;
  place-items: center;
  min-height: 44px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 2rem;
  background: transparent;
  color: #321741;
  text-decoration: none;
  touch-action: manipulation;
}
.hotspot > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.2rem, 1vw, .45rem);
  max-width: 100%;
  min-height: 34px;
  padding: .3rem clamp(.25rem, 1vw, .6rem);
  border: 1px solid #50326455;
  border-radius: 999px;
  background: #fff9ff;
  box-shadow: 0 3px 10px #3c164837;
  font-size: clamp(.66rem, 2.55vw, .96rem);
  font-weight: 800;
  white-space: nowrap;
  transition: transform .15s, box-shadow .15s;
}
.hotspot strong { font-weight: 800; color: #603883; }
.hotspot:active > span { transform: scale(.94); }
.spot-sleep > span { background: #f5eaff; }
.spot-medicine > span { background: #fff0f5; }
.spot-food > span { background: #fff0e2; }
.moon-button {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #a276b5;
  border-radius: 50%;
  background: #fff9ff;
  color: #663588;
  box-shadow: 0 3px 0 #673d8f37;
  touch-action: manipulation;
  transition: transform .15s, background-color .15s;
}
.moon-button { right: 3%; top: 4%; background: #fff1c8; border-color: #ad8a81; color: #70486b; transform: rotate(-12deg); }
.moon-button[aria-pressed="true"] { background: #583375; color: #fff1c8; }
.zzz { position: absolute; display: none; bottom: 10%; left: 34%; color: #70428f; font-family: var(--display); font-size: 1.4rem; letter-spacing: .25em; pointer-events: none; }
.ultra-sleep .zzz { display: block; animation: drift 2.5s ease-in-out 3; }
.specimen-foot { justify-content: space-between; flex-wrap: wrap; color: var(--muted); }
.specimen-foot span:first-child { font-weight: 800; }
.section { margin-top: clamp(2.8rem, 7vw, 5.6rem); }
.map, #more, .arena { scroll-margin-top: calc(1.2rem + env(safe-area-inset-top)); }
.section-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1.5rem; margin-bottom: 1rem; }
.section-heading p { color: var(--muted); }
.distribution { height: .85rem; display: grid; grid-template-columns: 80fr 15fr 4fr 1fr; overflow: hidden; border-radius: 999px; margin-bottom: .85rem; }
.distribution span:nth-child(1) { background: #8858ba; }
.distribution span:nth-child(2) { background: #df83ad; }
.distribution span:nth-child(3) { background: #f2a97e; }
.distribution span:nth-child(4) { background: #68466f; }
.zones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin: 0; padding: 0; list-style: none; }
.zone {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .2rem .35rem;
  align-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  padding: .7rem .8rem;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: .95rem;
  background: #fff9ff;
  font-size: .83rem;
  font-weight: 800;
  touch-action: manipulation;
}
.zone > .icon:first-child { color: var(--violet); }
.zone .percent { font: 1.85rem/1 var(--display); letter-spacing: -.06em; }
.zone-arrow { opacity: .75; width: 1rem; }
.zone-sleep { background: var(--lavender); }
.zone-medicine { background: var(--pink); }
.zone-food { background: var(--peach); }
.zone:active { box-shadow: inset 0 0 0 2px #8858ba; }
.lab-grid { display: grid; gap: 1rem; }
.report, .scan-panel, .game, .arena { padding: clamp(1rem, 3.6vw, 2.65rem); border-radius: 1.35rem; }
.report { border: 1px solid var(--line); background: #fffaff; box-shadow: var(--shadow); }
.report dl { margin-top: 1rem; }
.report dl div { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; align-items: baseline; padding-block: .65rem; border-bottom: 1px dashed #dccce5; font-size: .9rem; }
.report dd { text-align: right; font-weight: 800; color: var(--violet); }
.metric-meter { grid-column: 1 / -1; display: block; overflow: hidden; height: .26rem; border-radius: 999px; background: #eee1f4; }
.metric-meter::before { display: block; content: ""; height: 100%; border-radius: inherit; background: #a776c8; transform-origin: left; transform: scaleX(var(--fill)); }
.report.in-view .metric-meter::before { animation: fill-meter .5s ease-out both; }
.report p { color: var(--muted); font-size: .78rem; margin-top: .8rem; }
.scan-panel {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: .8rem;
  background: radial-gradient(ellipse at 100% 0%, #5d397e, transparent 75%), #342045;
  color: #fff7ff;
}
.scan-panel p { max-width: 28ch; color: #ebd9f8; }
.scan-emblem { width: 3rem; height: 3rem; stroke-width: 1.05; color: #f1b8e0; }
.scan-panel .button { margin-top: .2rem; }
.game { display: grid; gap: 1.2rem; border: 1px solid #e8cfe3; background: #fbeaf3; }
.game-art { display: grid; justify-items: center; align-content: center; min-width: 0; padding: .35rem .5rem; border-radius: 1rem; background: radial-gradient(ellipse, #fff5fb, #f0dbf6); }
.game-brain { width: min(87%, 16rem); }
.pillow-button { position: relative; margin-top: -1.25rem; width: clamp(4rem, 16vw, 5rem); min-height: 44px; padding: 0; background: none; border: 0; border-radius: 1rem; touch-action: manipulation; user-select: none; -webkit-touch-callout: none; transition: transform .15s; }
.pillow-button svg { display: block; width: 100%; }
#pillow-hint { padding: .25rem .65rem .7rem; text-align: center; font-size: .77rem; color: var(--muted); }
.game-content > p { margin-block: .65rem; }
.attempts { display: flex; gap: .32rem; margin-top: 1.05rem; }
.attempts span { width: 1.6rem; height: .37rem; border-radius: 99px; background: #dfc5e6; }
.attempts .used { background: #8750aa; }
.game-status { min-height: 3em; color: #573666; }
.game-finished .game-status { font-weight: 800; }
.game .pillow-secret { margin-top: 1rem; padding: .65rem .8rem; border-radius: .65rem; background: #eaddfb; }
.pillow-secret strong { display: block; }
.arena {
  color: #fff7ff;
  display: grid;
  justify-items: center;
  gap: .8rem;
  border: 1px solid #624075;
  background: radial-gradient(ellipse at 50% 0%, #653d80, transparent 68%), #2e193b;
  text-align: center;
}
.arena-invite .arena-heading p { margin-top: .55rem; color: #ecddf6; }
.battle-page {
  min-height: 100dvh;
  color: #fff7ff;
  background: radial-gradient(ellipse at 78% 0%, #4b2c64, transparent 70%), #24132e;
}
.battle-page .masthead { border-color: #bd90d440; }
.battle-back { display: inline-flex; align-items: center; gap: .65rem; min-height: 44px; text-decoration: none; font-weight: 700; }
.battle-back:hover { text-decoration: underline; }
.battle-term { color: #e7c8f5; white-space: nowrap; font-size: .8rem; }
.battle-main { width: min(100% - clamp(1.4rem, 6vw, 4rem), 50rem); padding-block: clamp(1.2rem, 4vw, 2.6rem); }
.battle-main .arena-heading { margin-bottom: 1rem; }
.battle-main h1 { max-width: none; font-size: clamp(2.15rem, 8vw, 4.4rem); line-height: 1; letter-spacing: -.055em; }
.battle-main .arena-heading p { color: #ebd8f4; margin-top: .6rem; }
.battle-board { --boss-color: #d4b1ff; justify-items: stretch; text-align: left; padding: clamp(.75rem, 2.8vw, 1.5rem); }
.battle-hud { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .25rem 1rem; color: #f7d6f0; font-size: .85rem; font-weight: 800; }
.battle-scene {
  display: grid;
  gap: .8rem;
  padding: clamp(.65rem, 2.4vw, 1.15rem);
  border: 1px solid #bd90d45c;
  border-radius: 1rem;
  background: radial-gradient(#dcb6ef30 1px, transparent 1px) center / 15px 15px, #25142d;
}
.speech {
  position: relative;
  min-width: 0;
  border: 2px solid var(--boss-color);
  border-radius: .95rem;
  background: #fff6ff;
  color: #311a40;
  padding: clamp(.75rem, 2.6vw, 1.15rem);
}
.speech::after {
  content: "";
  position: absolute;
  bottom: -.4rem;
  right: 24%;
  width: .7rem;
  aspect-ratio: 1;
  transform: rotate(45deg);
  background: #fff6ff;
  border-right: 2px solid var(--boss-color);
  border-bottom: 2px solid var(--boss-color);
}
.speech-speaker { margin-bottom: .32rem; color: #6b3a90; font-size: .8rem; font-weight: 800; }
.speech-text { scroll-margin-block: 1.4rem; }
.speech-question { margin-top: .45rem; font-weight: 800; }
.fact-source { display: inline-flex; align-items: center; min-height: 44px; color: #69358e; font-size: .8rem; }
.battle-cast { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: center; align-items: start; gap: .45rem; }
.battle-cast figure { display: grid; justify-items: center; align-content: start; gap: .25rem; }
.battle-cast figcaption { line-height: 1.2; font-size: .84rem; }
.battle-cast figcaption span { display: block; margin-top: .2rem; color: #ebcbe7; font-size: .72rem; }
.battle-player img { width: clamp(4.6rem, 20vw, 7.2rem); height: clamp(3.5rem, 15vw, 5.4rem); object-fit: contain; filter: drop-shadow(0 4px 9px #ec90c073); }
.boss-avatar {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .25rem;
  width: clamp(3.5rem, 15vw, 5.4rem);
  aspect-ratio: 1;
  border-radius: 35% 35% 29% 29%;
  background: var(--boss-color);
  color: #351f41;
  box-shadow: inset 0 -5px #32184724, 0 0 15px #b77ce458;
  font: 800 clamp(1rem, 4.6vw, 1.65rem) var(--ui);
}
.boss-face { display: block; width: .3rem; height: .3rem; border-radius: 50%; transform: translateX(-.3rem); background: currentColor; box-shadow: .6rem 0 currentColor; }
.battle-board[data-phase="victory"] .boss-avatar { opacity: .45; }
.battle-controls { display: grid; justify-items: start; }
.answer-list { display: grid; gap: .4rem; width: 100%; }
.answer {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .65rem;
  min-height: 46px;
  padding: .45rem .65rem;
  border: 1px solid #bf9ad2;
  border-radius: .65rem;
  background: #f8ebff;
  color: #3d2050;
  text-align: left;
  touch-action: manipulation;
}
.answer:hover { background: #eed7fb; }
.answer > span { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: .35rem; background: #e6c8f8; color: #51276d; font-size: .8rem; font-weight: 800; }
.battle-page :focus-visible { outline-color: #ffda9b; }
.speech :focus-visible { outline-color: #834cc5; }
.footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .25rem .75rem; padding-block: .8rem 1rem; color: var(--muted); font-size: .75rem; }
.footer a { display: inline-grid; place-items: center; min-height: 44px; text-underline-offset: .2em; }

.sheet {
  --sheet-margin: 1rem;
  inset: auto 0 0;
  width: min(100% - max(2rem, calc(env(safe-area-inset-left) + env(safe-area-inset-right) + 1rem)), 29rem);
  max-width: none;
  max-height: calc(100vh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  max-height: calc(100dvh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  margin: auto auto calc(var(--sheet-margin) + env(safe-area-inset-bottom));
  padding: 1.35rem;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #d9c3e9;
  border-radius: 1.3rem;
  background: #fff9ff;
  color: var(--ink);
  box-shadow: 0 18px 70px #1f0b4052;
}
.sheet[open] { animation: entrance .2s ease-out both; }
.sheet::backdrop { background: #2a143f86; }
.sheet h2 { padding-right: 2rem; margin-bottom: .55rem; }
.sheet p + p { margin-top: .55rem; }
.sheet .file-label { margin-block: .75rem .35rem; }
.close-button {
  position: absolute;
  top: .65rem;
  right: .65rem;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #e2d2ed;
  border-radius: 50%;
  background: #f3e8fb;
  font-size: 1.55rem;
  line-height: 1;
}
.zone-emblem { display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border-radius: .9rem; color: var(--violet); background: var(--zone-tint, var(--lavender)); font-size: 1.25rem; }
.note { padding: .7rem .8rem; border-left: 3px solid #b388d2; background: #f2e9fa; border-radius: .3rem .6rem .6rem .3rem; }
.sheet .sheet-action { display: flex; width: 100%; margin-top: .85rem; }
.module-card { margin-top: .85rem; padding: .8rem .9rem; border: 1px solid #ead4e4; border-radius: .85rem; background: #fff1f6; }
.module-card h3 { margin: 0; font-size: 1rem; line-height: 1.3; }
.module-card ul { margin-block: .45rem; padding-inline-start: 1.2rem; font-size: .92rem; }
.module-card li + li { margin-top: .25rem; }
.module-source { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; color: var(--violet); font-size: .8rem; text-underline-offset: .18em; }
#battle-link { display: flex; width: fit-content; font-weight: 800; }
.scanner-art { position: relative; display: grid; place-items: center; overflow: hidden; margin: .65rem 0; border: 1px solid #e0ceed; border-radius: .85rem; background: repeating-linear-gradient(0deg, #eee2fa, #eee2fa 19px, #e2d0f2 20px); }
.scanner-art svg { width: min(70%, 15rem); max-height: 31vh; }
.beam { display: none; position: absolute; width: 100%; top: 0; height: 100%; pointer-events: none; background: linear-gradient(transparent 86%, #ad62e855 97%, #9e49d7 100%); }
.scanning .beam { display: block; animation: sweep 2.65s linear both; }
progress { display: block; width: 100%; height: .62rem; accent-color: var(--violet); }
#scan-status { margin-block: .65rem; min-height: 3rem; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
@media (max-width: 46.999rem) {
  :root { --ui: system-ui, sans-serif; }
  .wrap { width: min(100% - clamp(1.5rem, 7vw, 2.75rem), 50rem); }
  .masthead { padding-block: .6rem; }
  h1 { font-size: clamp(2.7rem, 11.6vw, 4.9rem); letter-spacing: -.055em; }
  .specimen figcaption, .specimen-foot { font-size: .76rem; }
  .brain-stage { overflow: hidden; }
  .brain-model { aspect-ratio: 1.14; }
  .brain-render { position: absolute; inset: 0 -12%; width: 124%; }
  .brain-regions { inset-inline: 3%; }
  .spot-medicine > span { margin-right: 10%; }
  .game { gap: .85rem; }
  .game-brain { width: min(75%, 11.75rem); }
  #game-action, #battle-next { width: 100%; }
  .button, .answer { min-height: 48px; }
  .answer { font-size: .95rem; }
}
@media (min-width: 47rem) {
  h1 { max-width: none; font-size: clamp(3.5rem, 6.3vw, 6rem); }
  .specimen figcaption, .specimen-foot { padding: .8rem 1.15rem; font-size: .83rem; }
  .zones { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .zone { padding: .95rem 1rem; font-size: .94rem; }
  .zone .percent { font-size: 2.2rem; }
  .lab-grid { grid-template-columns: 1.2fr 1fr; }
  .game { grid-template-columns: .8fr 1fr; gap: 2rem; align-items: center; }
}
@media (min-width: 47rem), (orientation: landscape) {
  .sheet { inset: 0; margin: auto; }
}
@media (max-width: 22rem) {
  h1 { font-size: clamp(2.55rem, 13vw, 3.15rem); }
  .zone { padding-inline: .55rem; }
  .sheet { padding: 1rem; }
}
@media (hover: hover) {
  .primary:hover { background: #7546a7; }
  .light:hover, .outline:hover, .close-button:hover { background: #ecdcf7; }
  .zone:hover, .moon-button:hover { box-shadow: inset 0 0 0 1px #986ab8; }
  .hotspot:hover > span { transform: translateY(-3px); box-shadow: 0 7px 15px #3c164845; }
}
@keyframes entrance { from { opacity: .75; transform: translateY(8px); } }
@keyframes arrive { from { opacity: .7; transform: scale(.95) translateY(4px); } }
@keyframes drift { 50% { transform: translateY(-7px); } }
@keyframes sweep { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes fill-meter { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .scanning .beam { display: none; }
  .button:active, .pillow-button:active, .hotspot:active > span { transform: none; }
  .moon-button:active { transform: rotate(-12deg); }
}