@font-face {
  font-family: "Fraunces";
  src: url("../public/fonts/fraunces-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("../public/fonts/dm-sans-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../public/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../public/fonts/ibm-plex-mono-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../public/fonts/ibm-plex-mono-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #efe7d3;
  --paper-light: #fffaf0;
  --paper-deep: #d8cdae;
  --ink: #172326;
  --ink-soft: #425052;
  --coral: #f06449;
  --coral-deep: #c54234;
  --coral-ink: #992b24;
  --moss: #46776a;
  --moss-deep: #1f4c45;
  --acid: #d9ee72;
  --gold: #e5b845;
  --violet: #8c79ff;
  --blue: #8dd9e2;
  --night: #111722;
  --night-blue: #17233b;
  --header-h: 78px;
  --map-h: 96px;
  --room-index: 0;
  --world-offset: 0vw;
  --visitor-left: 5vw;
  --map-progress: 16.6667%;
  --transition-time: 880ms;
  --ease-walk: cubic-bezier(.77, 0, .18, 1);
  --look-x: 0px;
  --look-y: 0px;
  --guide-tilt-x: 0deg;
  --guide-tilt-y: 0deg;
  --frame-surface: #f4ead4;
  --frame-ink: #172326;
  --frame-accent: #f06449;
  --frame-secondary: #e5b845;
  --frame-pattern: repeating-linear-gradient(112deg, transparent 0 28px, rgba(23,35,38,.045) 29px 30px);
  --frame-rim: color-mix(in srgb, var(--frame-surface) 68%, var(--frame-ink));
  --frame-shadow: color-mix(in srgb, var(--frame-ink) 16%, #070a0c);
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}

html { background: var(--paper); }

body {
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 32%, rgba(255,255,255,.65) 0 1px, transparent 1.7px) 0 0 / 27px 25px,
    radial-gradient(circle at 72% 81%, rgba(23,35,38,.08) 0 .8px, transparent 1.5px) 0 0 / 31px 29px,
    var(--paper);
  font-family: "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
a { font: inherit; }

button { color: inherit; }

a,
button,
[tabindex] { -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: 3px solid var(--paper-light);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--ink);
}

/* Room headings receive programmatic focus so screen readers announce arrivals;
   unlike controls, they should not look like clickable violet boxes. */
h1[tabindex="-1"]:focus,
h2[tabindex="-1"]:focus { outline: none; box-shadow: none; }

::selection { color: var(--paper-light); background: var(--coral-deep); }

.skip-link {
  position: fixed;
  top: 8px;
  left: 50%;
  z-index: 1000;
  padding: 10px 15px;
  color: var(--paper-light);
  background: var(--ink);
  border: 2px solid var(--paper-light);
  transform: translate(-50%, -180%);
  transition: transform 180ms ease;
}

.skip-link:focus { transform: translate(-50%, 0); }

.museum-shell {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}

.museum-shell::before,
.museum-shell::after {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  content: "";
}

.museum-shell::before {
  background:
    linear-gradient(90deg, rgba(12,22,24,.12), transparent 2.2%, transparent 97.8%, rgba(12,22,24,.12)),
    repeating-linear-gradient(2deg, transparent 0 7px, rgba(60,44,23,.016) 8px 9px);
  mix-blend-mode: multiply;
}

.museum-shell::after {
  box-shadow: inset 0 0 80px rgba(23,35,38,.08);
}

/* Top identity rail */

.museum-masthead {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(250px, .85fr) minmax(300px, 1.25fr) minmax(190px, .7fr);
  align-items: center;
  min-height: var(--header-h);
  padding: 10px clamp(15px, 2.2vw, 38px);
  background: rgba(239, 231, 211, .91);
  background: color-mix(in srgb, var(--paper) 91%, transparent);
  border-bottom: 2px solid var(--ink);
  box-shadow: 0 6px 0 rgba(23,35,38,.06);
  backdrop-filter: blur(17px) saturate(1.1);
}

.museum-masthead::after {
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  height: 2px;
  content: "";
  background: repeating-linear-gradient(90deg, transparent 0 32px, var(--ink) 33px 35px, transparent 36px 52px);
  opacity: .24;
}

.maker-mark {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
}

.maker-mark__portrait {
  position: relative;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  margin-right: 12px;
  padding: 3px;
  background: var(--paper-light);
  border: 2px solid var(--ink);
  border-radius: 51% 49% 45% 55% / 47% 56% 44% 53%;
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-3deg);
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease;
}

.maker-mark:hover .maker-mark__portrait { transform: translate(-1px,-2px) rotate(2deg); box-shadow: 5px 6px 0 var(--coral); }

.maker-mark__avatar {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  filter: saturate(.72) contrast(1.04);
}

.maker-mark__portrait i {
  position: absolute;
  right: -7px;
  bottom: -5px;
  width: 15px;
  height: 15px;
  background: var(--acid);
  border: 2px solid var(--ink);
  border-radius: 50%;
}

.maker-mark__words b,
.maker-mark__words small { display: block; }

.maker-mark__words b {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.08rem;
  font-variation-settings: "SOFT" 35, "WONK" 1;
  line-height: .95;
  letter-spacing: -.025em;
}

.maker-mark__words small {
  margin-top: 6px;
  color: var(--coral-ink);
  font-family: "IBM Plex Mono", monospace;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.masthead-exhibit {
  position: relative;
  justify-self: center;
  width: min(100%, 520px);
  min-height: 49px;
  overflow: hidden;
  text-align: center;
}

.masthead-exhibit > span,
.masthead-exhibit > b { position: relative; z-index: 2; display: block; }

.masthead-exhibit > span {
  font-family: "IBM Plex Mono", monospace;
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.masthead-exhibit > b {
  margin-top: 4px;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -.025em;
}

.masthead-links {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 7px;
}

.masthead-links a,
.all-work-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  color: var(--ink);
  background: var(--paper-light);
  border: 1.5px solid var(--ink);
  border-radius: 3px 7px 3px 6px;
  box-shadow: 2px 2px 0 var(--ink);
  font-family: "IBM Plex Mono", monospace;
  font-size: .57rem;
  font-weight: 700;
  letter-spacing: .055em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 160ms ease, color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.masthead-links a:hover,
.all-work-link:hover { color: var(--paper-light); background: var(--ink); box-shadow: 4px 4px 0 var(--coral); transform: translate(-1px,-1px) rotate(-1deg); }

/* Spatial stage */

.museum-stage {
  position: absolute;
  inset: var(--header-h) 0 var(--map-h);
  z-index: 2;
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.museum-world {
  display: flex;
  width: max-content;
  height: 100%;
  transform: translate3d(var(--world-offset), 0, 0);
  transition: transform var(--transition-time) var(--ease-walk);
  will-change: transform;
}

.room {
  position: relative;
  flex: 0 0 100vw;
  width: 100vw;
  height: 100%;
  overflow: hidden;
  overflow: clip;
  contain: layout paint;
  isolation: isolate;
}

.room::after {
  position: absolute;
  right: 4%;
  bottom: 4%;
  left: 4%;
  z-index: 1;
  height: 2px;
  content: "";
  background: var(--ink);
  opacity: .42;
}

.room-canvas {
  position: relative;
  z-index: 4;
  width: min(100%, 1840px);
  height: 100%;
  margin-inline: auto;
  padding: clamp(28px, 4.5vh, 55px) clamp(76px, 7vw, 130px) clamp(36px, 5vh, 62px);
}

.room-texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.room-texture::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    repeating-linear-gradient(92deg, transparent 0 8.3vw, rgba(23,35,38,.055) 8.35vw 8.45vw),
    linear-gradient(180deg, rgba(255,255,255,.24), transparent 33%, rgba(23,35,38,.045));
}

.eyebrow {
  margin: 0 0 clamp(12px, 1.8vh, 20px);
  color: var(--ink-soft);
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(.55rem, .62vw, .68rem);
  font-weight: 600;
  letter-spacing: .09em;
  line-height: 1.5;
  text-transform: uppercase;
}

.eyebrow span {
  display: inline-block;
  padding: 3px 6px;
  color: var(--paper-light);
  background: var(--ink);
  border-radius: 2px 5px 2px 4px;
  transform: rotate(-.7deg);
}

.exhibit-copy h2,
.foyer-copy h1 {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 780;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  letter-spacing: -.072em;
}

.exhibit-copy h2 {
  font-size: clamp(3.4rem, 6.3vw, 7.5rem);
  line-height: .8;
}

.exhibit-copy > p:not(.eyebrow):not(.curator-note) {
  max-width: 42ch;
  margin: clamp(17px, 2.2vh, 25px) 0 0;
  color: var(--ink-soft);
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(.68rem, .8vw, .86rem);
  line-height: 1.58;
}

.project-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 18px 0 0;
  list-style: none;
}

.project-facts li {
  padding: 5px 7px;
  color: var(--moss-deep);
  background: rgba(255,250,240,.6);
  border: 1.5px solid currentColor;
  border-radius: 50% 44% 49% 45%;
  font: 600 .55rem "IBM Plex Mono", monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.repo-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 5px;
  color: var(--ink);
  background: var(--paper-light);
  border: 1.5px solid var(--ink);
  border-radius: 3px 6px 3px 5px;
  box-shadow: 2px 3px 0 var(--gold);
  font: 700 .56rem "IBM Plex Mono", monospace;
  letter-spacing: .04em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 170ms ease, color 170ms ease, background 170ms ease, box-shadow 170ms ease;
}

.repo-link:hover { color: var(--paper-light); background: var(--ink); box-shadow: 4px 5px 0 var(--coral); transform: translate(-1px,-2px) rotate(-.5deg); }
.repo-link--night { color: var(--paper-light); background: var(--night-blue); border-color: var(--paper-light); box-shadow: 2px 3px 0 var(--violet); }
.repo-link--night:hover { color: var(--night); background: var(--acid); box-shadow: 4px 5px 0 var(--violet); }

.media-exhibit { min-width: 0; margin: 0; }

.museum-window {
  position: relative;
  padding: clamp(7px, .85vw, 13px);
  background: rgba(255,250,240,.76);
  border: 2.5px solid var(--ink);
  border-radius: 5px 2px 8px 3px;
  box-shadow: 8px 10px 0 rgba(23,35,38,.92);
}

.museum-window img,
.museum-window video {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(57vh, 660px);
  object-fit: contain;
  object-position: center;
  background: #0d1416;
  border: 1px solid rgba(23,35,38,.65);
}

.window-label {
  position: absolute;
  right: 16px;
  bottom: -14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  color: var(--paper-light);
  background: var(--ink);
  border: 1.5px solid var(--paper-light);
  box-shadow: 2px 2px 0 var(--ink);
  font: 600 .5rem "IBM Plex Mono", monospace;
  letter-spacing: .075em;
  text-transform: uppercase;
  transform: rotate(-.8deg);
}

.window-label i {
  width: 7px;
  height: 7px;
  background: var(--acid);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(217,238,114,.2);
  animation: live-pulse 1.8s ease-in-out infinite;
}

@keyframes live-pulse { 50% { transform: scale(.65); opacity: .55; } }

.media-exhibit figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  width: 94%;
  margin: 25px auto 0;
  color: var(--ink-soft);
  font: .61rem/1.45 "IBM Plex Mono", monospace;
  letter-spacing: .025em;
}

.media-exhibit figcaption b { color: var(--coral-ink); }

.interactive-action { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; }

.exhibit-button,
.ticket-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 13px;
  color: var(--ink);
  background: var(--acid);
  border: 2px solid var(--ink);
  border-radius: 3px 8px 4px 6px;
  box-shadow: 4px 5px 0 var(--ink);
  cursor: pointer;
  font: 700 .6rem "IBM Plex Mono", monospace;
  letter-spacing: .055em;
  text-transform: uppercase;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.exhibit-button:hover,
.ticket-button:hover { color: var(--paper-light); background: var(--coral-deep); box-shadow: 7px 8px 0 var(--ink); transform: translate(-2px,-2px) rotate(-1deg); }
.exhibit-button:active,
.ticket-button:active { box-shadow: 1px 2px 0 var(--ink); transform: translate(2px,2px); }
.exhibit-button--dark { color: var(--paper-light); background: var(--ink); box-shadow: 4px 5px 0 var(--coral); }

.interaction-cue {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--ink-soft);
  font: 600 .55rem "IBM Plex Mono", monospace;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.interaction-cue > i,
.first-visit-note > i {
  position: relative;
  width: 20px;
  height: 20px;
  border: 1.5px dashed var(--coral-deep);
  border-radius: 50%;
  animation: cue-spin 4s linear infinite;
}

.interaction-cue > i::after,
.first-visit-note > i::after {
  position: absolute;
  inset: 5px;
  content: "";
  background: var(--coral);
  border: 1px solid var(--ink);
  border-radius: 50%;
  animation: cue-pop 1.4s ease-in-out infinite;
}

.interaction-cue--night { color: rgba(255,250,240,.72); }
.interaction-cue--night > i { border-color: var(--acid); }
.interaction-cue--night > i::after { background: var(--violet); border-color: var(--paper-light); }

@keyframes cue-spin { to { transform: rotate(360deg); } }
@keyframes cue-pop { 50% { transform: scale(.55); } }

/* Foyer */

.room--foyer { background: #efe7d3; }

.room-texture--foyer {
  background:
    radial-gradient(circle at 78% 40%, rgba(229,184,69,.23), transparent 24%),
    linear-gradient(115deg, rgba(255,255,255,.5), transparent 36%);
}

.room-canvas--foyer {
  display: grid;
  grid-template-columns: minmax(420px, 1.12fr) minmax(320px, .88fr);
  align-items: center;
  gap: clamp(40px, 6vw, 110px);
}

.foyer-motion-field {
  position:absolute;
  inset:clamp(12px,2vh,30px) clamp(22px,3vw,56px) clamp(14px,2vh,30px);
  z-index:2;
  overflow:hidden;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0 25%,#000 46% 100%);
  mask-image:linear-gradient(90deg,transparent 0 25%,#000 46% 100%);
}

.foyer-motion-field svg { display:block;width:100%;height:100%;overflow:visible; }
.foyer-motion-field__path { fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke; }
.foyer-motion-field__path--ink { stroke:rgba(23,35,38,.24);stroke-width:2;stroke-dasharray:1 7; }
.foyer-motion-field__path--violet { stroke:rgba(140,121,255,.42);stroke-width:2.2;stroke-dasharray:100; }
.foyer-motion-field__path--coral { stroke:rgba(197,66,52,.3);stroke-width:1.6;stroke-dasharray:10 8; }
.foyer-motion-field__note { position:absolute;padding:5px 8px;color:rgba(23,35,38,.58);background:rgba(255,250,240,.58);border:1px solid rgba(23,35,38,.24);font:600 .45rem/1 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase; }
.foyer-motion-field__note--one { top:14%;left:46%;transform:rotate(-2deg); }
.foyer-motion-field__note--two { right:4%;bottom:17%;transform:rotate(1.5deg); }

.foyer-copy { position: relative; z-index: 8; max-width: 860px; }

.foyer-copy h1 {
  max-width: 9.2em;
  font-size: clamp(3rem, 5vw, 6.8rem);
  line-height: .82;
  letter-spacing: -.035em;
  word-spacing: .075em;
}

.foyer-copy h1 > em { color: var(--coral-deep); font-style: normal; }

.moving-word {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: .02em .13em .09em .1em;
  color: var(--paper-light);
  font-style: italic;
  transform: rotate(-1.5deg);
}

.moving-word::before {
  position: absolute;
  inset: -.03em -.07em -.06em -.05em;
  z-index: -1;
  content: "";
  background: var(--coral-deep);
  border: .025em solid var(--ink);
  border-radius: 3% 8% 3% 7% / 12% 5% 10% 6%;
  box-shadow: .04em .05em 0 var(--ink);
}

.moving-word > i {
  position: absolute;
  top: -.08em;
  left: .16em;
  z-index: -2;
  color: transparent;
  font-style: italic;
  -webkit-text-stroke: .016em rgba(197,66,52,.45);
  animation: moving-echo 2.8s ease-in-out infinite;
}

@keyframes moving-echo { 50% { transform: translate(.14em,-.05em) rotate(1.5deg); opacity: .75; } }

.foyer-copy__intro {
  max-width: 650px;
  margin: clamp(22px, 3.2vh, 36px) 0 0;
  color: var(--ink-soft);
  font: clamp(.75rem, .9vw, .96rem)/1.64 "IBM Plex Mono", monospace;
}

.foyer-copy__intro em { color: var(--coral-ink); font-style: normal; font-weight: 700; }
.foyer-copy__intro strong{display:block;margin-bottom:7px;color:var(--ink);font:750 clamp(1.02rem,1.35vw,1.36rem)/1.12 "Fraunces",Georgia,serif;letter-spacing:-.015em}
.foyer-actions { display: flex; align-items: center; gap: 20px; margin-top: clamp(22px, 4vh, 42px); }

.ticket-button {
  padding: 13px 17px 13px 19px;
  color: var(--paper-light);
  background: var(--ink);
  box-shadow: 5px 6px 0 var(--coral);
  transform: rotate(-.5deg);
}

.ticket-button:hover { color: var(--ink); background: var(--acid); box-shadow: 8px 9px 0 var(--coral); }
.ticket-button b { font-size: 1.12rem; }

.ceiling-lights {
  position: absolute;
  top: 0;
  right: 4%;
  left: 45%;
  z-index: 2;
  height: 4px;
  background: var(--ink);
}

.ceiling-lights > i { position: absolute; top: 0; width: 2px; height: clamp(36px, 7vh, 70px); background: var(--ink); }
.ceiling-lights > i::after { position: absolute; bottom: -12px; left: -12px; width: 27px; height: 15px; content: ""; background: var(--gold); border: 2px solid var(--ink); border-radius: 50% 50% 4px 4px; box-shadow: 0 8px 20px rgba(229,184,69,.32); }
.ceiling-lights > i:nth-child(1) { left: 4%; }
.ceiling-lights > i:nth-child(2) { left: 52%; height: clamp(48px, 9vh, 88px); }
.ceiling-lights > i:nth-child(3) { right: 5%; }

.guide-plinth {
  position: relative;
  z-index: 7;
  align-self: center;
  justify-self: center;
  width: min(100%, 480px);
  aspect-ratio: 1;
}

.guide-plinth::after {
  position: absolute;
  right: 11%;
  bottom: 7%;
  left: 11%;
  height: 12%;
  content: "";
  background: rgba(23,35,38,.14);
  border-radius: 50%;
  filter: blur(8px);
}

.guide-signal {
  position: absolute;
  inset:-1% -3% -4%;
  z-index: 0;
  display:block;
  width:106%;
  height:105%;
  overflow:visible;
  filter:drop-shadow(0 12px 14px rgba(23,35,38,.08));
}

.guide-signal__path { fill:none;stroke-linecap:round;stroke-linejoin:round; }
.guide-signal__path--ink { stroke:rgba(23,35,38,.3);stroke-width:2;stroke-dasharray:2 8; }
.guide-signal__path--violet { stroke:rgba(140,121,255,.42);stroke-width:2.2;stroke-dasharray:100; }
.guide-signal__path--coral { stroke:rgba(197,66,52,.38);stroke-width:1.7;stroke-dasharray:13 9; }

.kinetic-guide {
  position: absolute;
  inset: 13% 8% 11%;
  z-index: 3;
  width: 84%;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  filter: drop-shadow(0 14px 9px rgba(23,35,38,.18));
  transform: translate3d(calc(var(--look-x) * .15), calc(var(--look-y) * .1), 0) rotateX(var(--guide-tilt-y)) rotateY(var(--guide-tilt-x));
  transform-origin: 50% 72%;
  transition: transform 280ms cubic-bezier(.2,.8,.2,1), filter 200ms ease;
}

.kinetic-guide svg { display:block; width:100%; height:100%; overflow:visible; }
.guide-character { transform-box:view-box; transform-origin:50% 72%; animation:guide-idle 2.9s ease-in-out infinite; }
.kinetic-guide:hover .guide-character,
.kinetic-guide:focus-visible .guide-character,
.guide-plinth.is-greeting .guide-character { animation:guide-excited .58s ease-in-out infinite alternate; }
.guide-shadow { fill:rgba(23,35,38,.18); transform-box:fill-box; transform-origin:center; animation:guide-shadow 2.9s ease-in-out infinite; }
.guide-tail { transform-box: fill-box; transform-origin: 12% 78%; animation: guide-tail 1.55s ease-in-out infinite; }
.guide-ear { transform-box: fill-box; transform-origin: 50% 100%; }
.guide-ear--left { animation: guide-ear-left 1.9s ease-in-out infinite; }
.guide-ear--right { animation:guide-ear-right 2.35s .62s ease-in-out infinite; }
.guide-paw { transform-box:fill-box; transform-origin:50% 85%; }
.guide-plinth.is-greeting .guide-paw--left { animation:guide-paw-wave .58s ease-in-out infinite alternate; }
.guide-kerchief{transform-box:fill-box;transform-origin:50% 0;animation:guide-kerchief 1.8s ease-in-out infinite alternate}
.guide-pupil,
.guide-glint { transform: translate(var(--look-x), var(--look-y)); transform-box: fill-box; transform-origin: center; transition: transform 80ms linear; }
.guide-glint--small { opacity: .82; }
.guide-sparks > * { transform-box:fill-box; transform-origin:center; animation:guide-spark 1.7s ease-in-out infinite alternate; }
.guide-sparks > :nth-child(2) { animation-duration:2.15s; animation-delay:-.7s; }
.guide-sparks > :nth-child(3) { animation-duration:1.35s; animation-delay:-1.1s; }
@keyframes guide-idle { 50% { transform: translateY(-7px) rotate(1.6deg); } }
@keyframes guide-excited { to { transform: translateY(-10px) rotate(2deg) scale(1.025); } }
@keyframes guide-shadow { 50% { opacity:.72; transform:scaleX(.9); } }
@keyframes guide-tail { 0%,100% { transform: rotate(5deg); } 50% { transform: rotate(-5deg); } }
@keyframes guide-ear-left { 50% { transform: rotate(7deg); } }
@keyframes guide-ear-right { 50% { transform: rotate(-7deg); } }
@keyframes guide-paw-wave { to { transform:translate(-2px,-5px) rotate(8deg); } }
@keyframes guide-kerchief { to { transform: rotate(2.5deg) translateY(1px); } }
@keyframes guide-spark { to { transform: scale(.83) rotate(6deg); opacity: .5; } }

.guide-speech {
  position: absolute;
  top: -34px;
  right: -1%;
  z-index: 8;
  width: clamp(210px,22vw,280px);
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 16px 18px 15px;
  color: var(--ink);
  background: var(--paper-light);
  border: 2px solid var(--ink);
  border-radius: 20px 20px 20px 6px;
  box-shadow: 3px 4px 0 var(--ink);
  cursor: pointer;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(.86rem, 1.15vw, 1.1rem);
  line-height: 1.18;
  text-align: left;
  transform: rotate(1deg);
  transition: transform 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.guide-speech:hover { background: color-mix(in srgb, var(--acid) 62%, var(--paper-light)); box-shadow: 5px 6px 0 var(--ink); transform: translateY(-3px) rotate(-.5deg); }

.guide-speech-trail { position:absolute; top:58px; right:calc(clamp(210px,22vw,280px) - 14px); z-index:7; width:42px; height:48px; pointer-events:none; }
.guide-speech-trail i { position:absolute; display:block; background:var(--paper-light); border:2px solid var(--ink); border-radius:50%; box-shadow:1px 2px 0 rgba(23,35,38,.18); transition:background 220ms ease,transform 220ms ease; }
.guide-speech-trail i:nth-child(1) { top:0; right:0; width:11px; height:11px; }
.guide-speech-trail i:nth-child(2) { top:17px; right:14px; width:8px; height:8px; }
.guide-speech-trail i:nth-child(3) { top:32px; right:27px; width:6px; height:6px; }
.guide-speech span { display: block; margin-bottom: 7px; color: var(--coral-ink); font: 700 .5rem "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.guide-plinth.is-greeting .guide-speech { background: var(--acid); transform: translateY(-4px) rotate(-2deg); }
.guide-plinth.is-greeting .guide-speech-trail i { background:var(--acid); transform:translateY(-3px); }
.guide-label { position: absolute; right: 6%; bottom: 0; z-index: 5; margin: 0; color:var(--ink-soft);font: 600 .62rem/1.4 "IBM Plex Mono", monospace; letter-spacing: .07em; text-align: right; text-transform: uppercase; transform: rotate(2deg); }

.museum-shell.is-intro .guide-plinth { animation: guide-arrive 1.15s .18s cubic-bezier(.17,.9,.24,1.18) both; }
.museum-shell.is-intro .ticket-button { animation: ticket-nudge .68s 1.55s ease-in-out 2; }
@keyframes guide-arrive { from { opacity: 0; transform: translate(42%, 24%) rotate(12deg) scale(.62); } }
@keyframes ticket-nudge { 50% { transform: translate(7px,0) rotate(.6deg); box-shadow: 8px 6px 0 var(--coral); } }

/* Alcove */

.room--alcove { background: #ece0c2; }
.room--alcove::before { position: absolute; top: 8%; right: 3.5%; bottom: 13%; z-index: 1; width: 57%; content: ""; border: 1.5px solid rgba(67,41,26,.17); border-bottom: 0; border-radius: 47% 47% 0 0 / 24% 24% 0 0; pointer-events: none; }
.room-texture--alcove { background: radial-gradient(circle at 68% 7%, rgba(255,250,236,.82), transparent 30%), repeating-linear-gradient(90deg, rgba(67,41,26,.045) 0 1px, transparent 1px 46px), linear-gradient(100deg, rgba(67,41,26,.12), transparent 14%, transparent 86%, rgba(67,41,26,.14)); }
.room-texture--alcove::after { position: absolute; top: 11.5%; right: 6%; bottom: 15.5%; width: 50.5%; content: ""; border: 1.5px solid rgba(67,41,26,.1); border-bottom: 0; border-radius: 47% 47% 0 0 / 24% 24% 0 0; }
.room-canvas--alcove { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(520px, 1.42fr); grid-template-rows: auto 1fr; align-items: center; column-gap: clamp(45px, 5vw, 90px); row-gap: 24px; }
.exhibit-copy--alcove { grid-column: 1; grid-row: 1; align-self: end; }
.exhibit-copy--alcove h2 { color: #712531; text-shadow: 4px 5px 0 rgba(255,248,232,.72); }
.exhibit-copy--alcove .project-facts li { color: #4f3120; }
.alcove-specimen { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 100%; }
.museum-window--alcove { position: relative; padding: clamp(10px, 1.1vw, 17px); background: linear-gradient(118deg, rgba(255,246,224,.16), transparent 42%), repeating-linear-gradient(93deg, rgba(20,10,4,.06) 0 3px, transparent 3px 9px), linear-gradient(135deg, #5a3a22, #43291a 58%, #37200f); border: 2.5px solid #2e1a0e; border-radius: 7px 4px 9px 4px; box-shadow: 9px 11px 0 rgba(67,41,26,.38), 14px 16px 0 rgba(46,26,14,.88); transform: rotate(.45deg); }
.museum-window--alcove::before,
.museum-window--alcove::after { position: absolute; z-index: 3; width: 24px; height: 24px; content: ""; border: 2.5px solid #b8863b; pointer-events: none; }
.museum-window--alcove::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; border-radius: 4px 0 0 0; }
.museum-window--alcove::after { right: 6px; bottom: 6px; border-top: 0; border-left: 0; border-radius: 0 0 4px 0; }
.museum-window--alcove img,
.museum-window--alcove video { aspect-ratio: 8 / 5; object-fit: contain; background: #f4ebd4; border: clamp(5px, .7vw, 9px) solid #f4ebd4; box-shadow: 0 0 0 1.5px #b8863b; }

.alcove-notes { grid-column: 1; grid-row: 2; align-self: start; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.agent-card { position: relative; padding: 15px 17px 16px; background: repeating-linear-gradient(180deg, transparent 0 21px, rgba(127,45,56,.13) 21px 22px), linear-gradient(180deg, #f9f2de, #f0e5c9); border: 2px solid #43291a; border-radius: 4px 10px 5px 9px; box-shadow: 4px 5px 0 rgba(67,41,26,.5); transform: rotate(-.6deg); }
.agent-card__label { margin: 0 0 7px; color: #7f2d38; font: 700 .5rem "IBM Plex Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.agent-card__body { margin: 0; max-width: 46ch; color: #3d2817; font: .6rem/1.62 "IBM Plex Mono", monospace; }
.agent-card__body b { color: #7f2d38; }
.agent-card__stamp { position: absolute; top: 9px; right: 11px; padding: 3px 7px; color: #7f2d38; border: 2px solid currentColor; border-radius: 3px; font: 700 .48rem "IBM Plex Mono", monospace; letter-spacing: .18em; text-transform: uppercase; transform: rotate(6deg); opacity: .82; }

.alcove-shelf-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 18px; }
.alcove-shelf { position: relative; flex: 0 0 auto; display: flex; align-items: flex-end; gap: 6px; min-height: 138px; padding: 0 13px; }
.alcove-shelf-row .interaction-cue { flex: 1 1 auto; min-width: 90px; }
.alcove-shelf__plank { position: absolute; right: -5px; bottom: 0; left: -5px; height: 9px; background: linear-gradient(180deg, #5a3a22, #37200f); border: 2px solid #2e1a0e; border-radius: 3px 5px 4px 3px; box-shadow: 3px 4px 0 rgba(46,26,14,.45); }
.alcove-shelf__spines { display: flex; align-items: flex-end; gap: 5px; padding-bottom: 9px; }
.alcove-shelf__spines i { width: 17px; height: 72px; background: #2f4f3e; border: 2px solid #2e1a0e; border-radius: 3px 3px 1px 1px; box-shadow: inset -3px 0 rgba(20,10,4,.22); }
.alcove-shelf__spines i:nth-child(2) { height: 87px; background: #7f2d38; }
.alcove-shelf__spines i:nth-child(3) { height: 66px; background: #b8863b; transform: rotate(2.5deg); }
.alcove-shelf__spines i:nth-child(4) { height: 79px; background: #5f7d8c; }
.alcove-book { --book-rule: 9px; position: relative; z-index: 2; align-self: flex-end; width: 54px; height: calc(var(--book-rule) * 11); margin: 0 0 9px; padding: 0; background: none; border: 0; cursor: pointer; perspective: 900px; }
.alcove-book:focus-visible { outline: 2.5px dashed #b8863b; outline-offset: 5px; }
.alcove-book__block { position: absolute; inset: 0; transform: translateY(0); transform-origin: 0 100%; transform-style: preserve-3d; transition: transform 680ms cubic-bezier(.22,1.15,.3,1); }
.alcove-book:hover .alcove-book__block,
.alcove-book:focus-visible .alcove-book__block { transform: translateY(-7px) rotate(-1.5deg); }
.alcove-book.is-open { z-index: 6; }
.alcove-book.is-open .alcove-book__block,
.alcove-book.is-open:hover .alcove-book__block,
.alcove-book.is-open:focus-visible .alcove-book__block { transform: translate(24px, -64px) scale(2.15) rotate(-2.5deg); transform-origin: 0 100%; }
.alcove-book__page { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; background-color: #f8f0dc; background-image: linear-gradient(90deg, transparent 0 11px, rgba(194,64,64,.42) 11px 12px, transparent 12px), repeating-linear-gradient(180deg, rgba(63,86,110,.3) 0 1px, transparent 1px var(--book-rule)); border: 2px solid #2e1a0e; border-radius: 2px 5px 5px 2px; box-shadow: 9px 11px 0 rgba(46,26,14,.34); transform: translateZ(0.01px); }
.alcove-book__page b { flex: 0 0 var(--book-rule); margin: 0 0 0 9px; max-width: calc(100% - 12px); overflow: hidden; color: #43291a; font: italic 700 calc(var(--book-rule) * .72)/var(--book-rule) "Fraunces", Georgia, serif; letter-spacing: -.01em; }
.alcove-book__page i { flex: 0 0 var(--book-rule); width: 22px; height: 3px; margin: calc((var(--book-rule) - 3px) / 2) 0 calc((var(--book-rule) - 3px) / 2) 10px; background: repeating-linear-gradient(90deg, #b8863b 0 3px, transparent 3px 5px); }
.alcove-book__page em { flex: 0 0 calc(var(--book-rule) * 2); margin: auto 4px 0 10px; max-width: calc(100% - 12px); overflow: hidden; color: #7f2d38; font: calc(var(--book-rule) * .44)/var(--book-rule) "IBM Plex Mono", monospace; text-align: left; }
.alcove-book__leaf { position: absolute; inset: 0; z-index: 2; overflow: hidden; transform-origin: left center; transform-style: preserve-3d; transition: transform 820ms cubic-bezier(.32,.9,.25,1); }
.alcove-book.is-open .alcove-book__leaf { z-index: 0; transform: rotateY(-180deg); }
.alcove-book__cover,
.alcove-book__endpaper { position: absolute; inset: 0; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; border: 2px solid #2e1a0e; transform-style: preserve-3d; }
.alcove-book__cover { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0 4px; background: linear-gradient(150deg, #8a3540, #712531 58%, #5d1d28); border-radius: 2px 5px 5px 2px; box-shadow: inset 0 0 0 2px rgba(217,179,108,.42), inset -4px 0 rgba(20,10,4,.28); transform: rotateY(0deg); transition: opacity 160ms ease, visibility 0s linear 160ms; }
.alcove-book__cover b { max-width: 100%; overflow: hidden; color: #d9b36c; font: 700 .46rem/1.05 "Fraunces", Georgia, serif; letter-spacing: .03em; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.alcove-book__cover i { max-width: 100%; overflow: hidden; color: rgba(244,235,212,.82); font: .22rem/1.2 "IBM Plex Mono", monospace; letter-spacing: .06em; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.alcove-book.is-open .alcove-book__cover { opacity: 0; visibility: hidden; pointer-events: none; transition-delay: 0s, 0s; }
.alcove-book__endpaper { background: repeating-linear-gradient(45deg, rgba(127,45,56,.09) 0 4px, transparent 4px 8px), #f1e7cc; border-radius: 5px 2px 2px 5px; transform: rotateY(180deg); }

/* Desktop pet: a desk against a cool daylight wall. The demo is a monitor
   standing on a drawn slab; the copy is a field note propped beside it, and the
   called creature runs the slab's top edge like a sill. */

.room--pet { background: #cfd9e0; }
.room-texture--pet { background: linear-gradient(118deg, rgba(255,255,255,.72), transparent 42%), radial-gradient(circle at 84% 10%, rgba(255,255,255,.5), transparent 28%), linear-gradient(90deg, rgba(29,44,49,.04) 1px, transparent 1px) 0 0 / 46px 46px, linear-gradient(rgba(29,44,49,.04) 1px, transparent 1px) 0 0 / 46px 46px; }
.room-canvas--pet { display: grid; grid-template-columns: minmax(300px,.78fr) minmax(520px,1.5fr); grid-template-rows: auto minmax(0,1fr) auto; gap: clamp(16px,2.4vh,28px) clamp(40px,4.6vw,84px); }
.exhibit-copy--pet { grid-column: 1; grid-row: 1; align-self: start; }
.exhibit-copy--pet h2 { font-size: clamp(3.1rem, 5.4vw, 6.4rem); line-height: .82; }

.pet-note { position: relative; z-index: 5; grid-column: 1; grid-row: 2; align-self: end; padding: 16px 18px 17px; background: linear-gradient(180deg, #fffdf4, #f7f1dd); border: 2px solid var(--ink); border-radius: 4px 9px 5px 8px; box-shadow: 6px 7px 0 rgba(23,35,38,.34); transform: rotate(-.9deg); }
.pet-note::before { position: absolute; top: -11px; left: 34px; width: 58px; height: 16px; content: ""; background: rgba(216,228,234,.85); border: 1.5px solid rgba(23,35,38,.4); border-radius: 2px; transform: rotate(-2.5deg); }
.pet-note__label { margin: 0 0 8px; color: #2c6e7c; font: 700 .5rem "IBM Plex Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.pet-note__story { margin: 0; color: var(--ink-soft); font: clamp(.6rem,.72vw,.74rem)/1.62 "IBM Plex Mono", monospace; }
.pet-note__facts { margin-top: 12px; }
.pet-note__facts li { color: #28525c; background: rgba(255,255,255,.66); border-radius: 4px 9px 4px 8px; }
.pet-note__summon { margin-top: 14px; padding-top: 12px; border-top: 2px dashed rgba(23,35,38,.3); }
.pet-note__summon-label { margin: 0 0 9px; color: #2c6e7c; font: 600 .5rem "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.pet-bell svg { width: 17px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 0; }
.room--pet.is-called .pet-bell svg { animation: pet-bell-ding .55s cubic-bezier(.3,1.6,.4,1); }
@keyframes pet-bell-ding { 25% { transform: rotate(9deg); } 55% { transform: rotate(-7deg); } 80% { transform: rotate(3deg); } }

.pet-specimen { position: relative; z-index: 4; grid-column: 2; grid-row: 1 / 3; align-self: end; width: 100%; }
.museum-window--pet { padding: clamp(9px,1vw,14px); background: linear-gradient(155deg, #24363d, #172326 60%, #101b1f); border: 2px solid #0c1417; border-radius: 9px 7px 10px 8px; box-shadow: 8px 9px 0 rgba(23,35,38,.34); transform: rotate(-.4deg); }
.museum-window--pet img,
.museum-window--pet video { aspect-ratio: 16 / 9; object-fit: cover; background: #0d1416; border: 1px solid rgba(255,250,240,.16); border-radius: 3px; }
.pet-power { position: absolute; right: 15px; bottom: 7px; z-index: 3; width: 6px; height: 6px; background: var(--acid); border-radius: 50%; box-shadow: 0 0 4px rgba(217,238,114,.55); }
.pet-stand { display: flex; flex-direction: column; align-items: center; margin-top: -2px; }
.pet-stand::before { width: 30px; height: 26px; content: ""; background: #172326; clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); }
.pet-stand i { width: 116px; height: 13px; margin-top: -2px; background: #172326; border: 2px solid #0c1417; border-radius: 50% 50% 6px 6px / 72% 72% 6px 6px; box-shadow: 4px 5px 0 rgba(23,35,38,.3); }
.pet-sticky { position: absolute; top: -17px; left: -38px; z-index: 6; width: 182px; margin: 0; padding: 15px 15px 16px; background: linear-gradient(180deg, #f3e69b, #edda82); border: 2px solid var(--ink); border-radius: 3px 4px 5px 3px; box-shadow: 4px 5px 0 rgba(23,35,38,.4); font: italic 700 clamp(.78rem,.92vw,.96rem)/1.32 "Fraunces", Georgia, serif; transform: rotate(-2.6deg); }
.pet-sticky::before { position: absolute; top: -10px; left: 50%; width: 52px; height: 15px; content: ""; background: rgba(255,250,240,.72); border: 1.5px solid rgba(23,35,38,.35); border-radius: 2px; transform: translateX(-50%) rotate(-1.5deg); }
.pet-stars { position: absolute; top: -12px; right: 28px; z-index: 6; padding: 5px 8px; color: var(--ink-soft); background: var(--paper-light); border: 1.5px solid var(--ink); border-radius: 3px 6px 3px 5px; box-shadow: 2px 3px 0 rgba(23,35,38,.5); font: 700 .5rem "IBM Plex Mono", monospace; letter-spacing: .06em; transform: rotate(1.6deg); }
.pet-specimen figcaption { position: absolute; right: 2%; bottom: -6px; left: 2%; z-index: 4; width: auto; margin: 0; color: #2e3f45; font-size: .55rem; }
.pet-specimen figcaption > span { max-width: 46%; }
.pet-specimen figcaption b { color: #1d5a66; }

.pet-slab { position: relative; z-index: 6; grid-column: 1 / -1; grid-row: 3; height: clamp(72px, 11.5vh, 118px); margin-top: calc(-1 * clamp(16px, 2.4vh, 28px) - 4px); overflow: visible; background: linear-gradient(180deg, #bccad3, #a7b9c3 72%, #9badb7); border: 2.5px solid var(--ink); border-radius: 7px 5px 9px 6px; box-shadow: 8px 9px 0 rgba(23,35,38,.26); transform: rotate(-.12deg); }
.pet-slab::before { position: absolute; inset: 8px 12px auto; height: 2px; content: ""; background: rgba(23,35,38,.2); border-radius: 2px; }

.glass-glint { position:absolute;top:-30%;left:-25%;z-index:3;width:12%;height:180%;pointer-events:none;background:rgba(255,255,255,.38);opacity:0;transform:translateX(0) rotate(18deg); }
.room--pet.is-current .glass-glint { animation:glass-glint-arrive 1.35s .5s cubic-bezier(.22,.72,.22,1) both; }
@keyframes glass-glint-arrive { 0%{opacity:0;transform:translateX(0) rotate(18deg)} 24%{opacity:.46} 100%{opacity:0;transform:translateX(1150%) rotate(18deg)} }

/* The called creature: runs in from off-frame, settles by the monitor, watches
   the cursor while it visits, then wanders off. One prop, one honest trick. */
.pet-creature { position: absolute; bottom: 10px; left: 0; z-index: 8; width: clamp(56px, 5.2vw, 76px); opacity: 0; pointer-events: none; transform: translateX(-50vw); transition: opacity .16s ease; }
.pet-creature svg { display: block; width: 100%; height: auto; overflow: visible; }
.room--pet:is(.is-called, .is-visiting, .is-leaving) .pet-creature { opacity: 1; }
.room--pet.is-called .pet-creature { animation: pet-run-in 1.12s cubic-bezier(.25,.7,.25,1) both; }
.room--pet.is-visiting .pet-creature { transform: translateX(var(--pet-stop-x, 30vw)); }
.room--pet.is-leaving .pet-creature { animation: pet-run-out .95s cubic-bezier(.5,.05,.7,.4) both; }
@keyframes pet-run-in { from { transform: translateX(-50vw); } to { transform: translateX(var(--pet-stop-x, 30vw)); } }
@keyframes pet-run-out { from { transform: translateX(var(--pet-stop-x, 30vw)); } to { transform: translateX(100vw); } }

.pet-creature__shadow { fill: rgba(23,35,38,.18); }
.pet-creature__body, .pet-creature__face, .pet-creature__ear { fill: #23343c; stroke: #101b1f; stroke-width: 2.2; stroke-linejoin: round; }
.pet-creature__leg { fill: #1c2b32; stroke: #101b1f; stroke-width: 1.8; transform-box: fill-box; transform-origin: 50% 0; }
.pet-creature__tail-outline, .pet-creature__tail-fill { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pet-creature__tail-outline { stroke: #101b1f; stroke-width: 6.6; }
.pet-creature__tail-fill { stroke: #23343c; stroke-width: 3.4; }
.pet-creature__tail { transform-box: fill-box; transform-origin: 92% 88%; transition: transform .3s ease; }
.pet-creature__eye { fill: #fffaf0; stroke: #101b1f; stroke-width: 1.5; }
.pet-creature__pupil { fill: #101b1f; transform-box: fill-box; transform: translate(var(--pet-look-x, 0px), var(--pet-look-y, 0px)); transition: transform .16s ease-out; }
.pet-creature__nose { fill: #d9ee72; stroke: #101b1f; stroke-width: .8; }
.pet-creature__collar { fill: #d9ee72; stroke: #101b1f; stroke-width: 1.4; stroke-linejoin: round; }
.pet-creature__pose { transform-box: fill-box; transform-origin: 50% 92%; transition: transform .28s ease; }
.pet-creature__head-turn { transform-box: fill-box; transform-origin: 50% 88%; }
.pet-creature__head { transform-box: fill-box; transform-origin: 50% 85%; transform: rotate(var(--pet-look-r, 0deg)) translate(var(--pet-look-hx, 0px), var(--pet-look-hy, 0px)); transition: transform .16s ease-out; }
.pet-creature__eyes { transform-box: fill-box; transform-origin: center; }

.room--pet:is(.is-called, .is-leaving) .pet-creature__pose { animation: pet-run-bob .22s ease-in-out infinite alternate; }
.room--pet:is(.is-called, .is-leaving) .pet-creature__leg--a { animation: pet-step .22s ease-in-out infinite alternate; }
.room--pet:is(.is-called, .is-leaving) .pet-creature__leg--b { animation: pet-step .22s ease-in-out infinite alternate-reverse; }
.room--pet:is(.is-called, .is-leaving) .pet-creature__tail { transform: rotate(-13deg) translateY(-1px); }
@keyframes pet-run-bob { to { transform: translateY(-1.7px); } }
@keyframes pet-step { to { transform: translateY(-2.6px) rotate(7deg); } }

.room--pet.is-visiting .pet-creature__pose { transform: rotate(-3deg) translateY(-1px); animation: pet-settle .5s cubic-bezier(.3,1.4,.4,1) 1; }
.room--pet.is-visiting .pet-creature__head-turn { animation: pet-look-around 1.5s cubic-bezier(.3,.6,.3,1) .05s 1; }
.room--pet.is-visiting .pet-creature__eyes { animation: pet-blink 5.6s step-end 1.8s infinite; }
.room--pet.is-visiting .pet-creature__tail { animation: pet-tail-curl 2.6s ease-in-out infinite alternate; }
.room--pet.is-delighted .pet-creature__pose { animation: pet-delight .6s cubic-bezier(.3,1.5,.4,1); }
@keyframes pet-settle { 0% { transform: rotate(-3deg) translateY(-4px) scaleY(1.02); } 60% { transform: rotate(-2.2deg) translateY(.8px) scaleY(.985); } 100% { transform: rotate(-3deg) translateY(-1px) scaleY(1); } }
@keyframes pet-look-around { 0% { transform: rotate(0deg); } 25% { transform: rotate(-7deg) translateY(-1px); } 55% { transform: rotate(4deg); } 80% { transform: rotate(-2deg); } 100% { transform: rotate(0deg); } }
@keyframes pet-blink { 0%, 46%, 50%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.1); } }
@keyframes pet-tail-curl { to { transform: rotate(7deg); } }
@keyframes pet-delight { 30% { transform: translateY(-7px) rotate(-2deg); } 60% { transform: translateY(1px) rotate(1deg); } }

.room .pet-note, .room .pet-slab { opacity: .22; transition: opacity 480ms ease, transform 640ms var(--ease-walk); }
.room.is-current .pet-note, .room.is-current .pet-slab { opacity: 1; }

@media (max-width: 900px) and (min-width: 761px) {
  .exhibit-copy--pet { grid-column: 1 / -1; grid-row: 1; }
  .pet-note { grid-column: 1; grid-row: 2; }
  .pet-specimen { grid-column: 2; grid-row: 2; }
  .pet-sticky { top: -15px; left: 20px; width: 164px; transform: rotate(-2.2deg); }
  .pet-note__story { font-size: .58rem; }
  .pet-slab { margin-top: -20px; }
}

@media (max-height: 780px) and (min-width: 761px) {
  .room-canvas--pet { min-height: 700px; }
  .pet-slab { height: 64px; }
}

@media (max-width: 760px) {
  .pet-note { margin-top: 24px; }
  .pet-specimen { z-index: 2; margin-top: 26px; }
  .museum-window--pet { box-shadow: 6px 7px 0 rgba(23,35,38,.3); }
  .pet-sticky { position: static; width: auto; max-width: 250px; margin-top: 16px; transform: rotate(1.6deg); }
  .pet-stars { top: -11px; right: 14px; }
  .pet-specimen figcaption { position: static; width: 96%; margin-top: 16px; }
  .pet-specimen figcaption > span { max-width: none; }
  .pet-slab { height: 52px; margin-top: -14px; }
  .pet-creature { width: 54px; }
}

/* Keyscape */

.room--keyscape { color: var(--paper-light); background: radial-gradient(circle at 66% 49%,rgba(88,100,208,.24),transparent 35%),radial-gradient(circle at 23% 18%,rgba(141,217,226,.11),transparent 25%),linear-gradient(130deg,#111722,#17203a 62%,#141827); }
.room--keyscape::after { background: var(--paper-light); opacity: .3; }
.room-canvas--keyscape { display:grid;grid-template-columns:minmax(300px,.68fr) minmax(520px,1.42fr);align-items:center;gap:clamp(50px,5vw,95px); }
.exhibit-copy--keyscape .eyebrow,#keyscape .exhibit-copy--keyscape>p:not(.eyebrow){color:rgba(255,250,240,.9)}.exhibit-copy--keyscape .eyebrow span{color:var(--night);background:var(--acid)}.exhibit-copy--keyscape h2{color:var(--paper-light);text-shadow:5px 6px 0 var(--violet)}
.museum-window--keyscape { padding:clamp(8px,1vw,14px);background:rgba(17,23,34,.78);border-color:var(--paper-light);box-shadow:8px 9px 0 var(--violet),13px 14px 0 rgba(216,238,114,.7);transform:perspective(1100px) rotateY(-2deg) rotateZ(.5deg) }
.museum-window--keyscape img,.museum-window--keyscape video{aspect-ratio:1040/651;object-fit:contain;border-color:rgba(255,250,240,.65)}
.keyscape-specimen figcaption{color:rgba(255,250,240,.82)}
.keyscape-stars{position:absolute;inset:0;z-index:1;overflow:hidden}.keyscape-stars i{position:absolute;width:4px;height:4px;background:var(--paper-light);border-radius:50%;opacity:.55;box-shadow:0 0 8px rgba(141,217,226,.5)}.keyscape-stars i:nth-child(1){top:14%;left:9%}.keyscape-stars i:nth-child(2){top:23%;left:32%;width:2px;height:2px}.keyscape-stars i:nth-child(3){top:10%;left:67%;width:6px;height:6px}.keyscape-stars i:nth-child(4){top:35%;left:86%}.keyscape-stars i:nth-child(5){top:72%;left:93%;width:3px;height:3px}.keyscape-stars i:nth-child(6){top:77%;left:57%}.keyscape-stars i:nth-child(7){top:62%;left:23%;width:2px;height:2px}.keyscape-stars i:nth-child(8){top:45%;left:4%}.keyscape-stars i:nth-child(9){top:8%;left:45%;width:3px;height:3px}.keyscape-stars i:nth-child(10){top:84%;left:14%}.keyscape-stars i:nth-child(11){top:56%;left:74%;width:2px;height:2px}.keyscape-stars i:nth-child(12){top:29%;left:54%}
.keyscape-beam{position:absolute;z-index:2;width:42vw;height:110vh;pointer-events:none;opacity:.16;filter:blur(14px);transform-origin:top}.keyscape-beam--a{top:-18%;left:42%;background:linear-gradient(180deg,var(--violet),transparent 78%);clip-path:polygon(47% 0,56% 0,100% 100%,0 100%);transform:rotate(-6deg)}.keyscape-beam--b{top:-20%;right:-10%;background:linear-gradient(180deg,var(--blue),transparent 78%);clip-path:polygon(43% 0,52% 0,100% 100%,0 100%);transform:rotate(10deg)}
.ripple-console{margin-top:clamp(24px,3vh,34px)}
.ripple-console__note{max-width:38ch;margin:12px 0 0;color:rgba(255,250,240,.66);font:.56rem/1.5 "IBM Plex Mono",monospace;letter-spacing:.03em}
.exhibit-button--night{color:var(--paper-light);background:var(--night-blue);border-color:var(--paper-light);box-shadow:4px 5px 0 var(--violet)}
.exhibit-button--night:hover{color:var(--night);background:var(--acid);border-color:var(--night);box-shadow:7px 8px 0 var(--violet)}
.ripple-trigger svg{width:19px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}

/* One keypress, propagated. JS measures each surface's distance from the demo
   window (the instrument) and stamps --wave-delay / --wave-amp on it; the
   wavefront ring and every keyflash below read those variables, so light
   arrives late and faint at the room's far edges instead of flashing flat. */

.room--keyscape::before{position:absolute;left:var(--wave-x,50%);top:var(--wave-y,50%);z-index:8;width:3600px;height:3600px;content:"";pointer-events:none;background:radial-gradient(circle,transparent 55%,rgba(166,152,255,0) 59%,rgba(186,174,255,.5) 63.5%,rgba(141,217,226,.24) 66.5%,transparent 71%);border-radius:50%;opacity:0;mix-blend-mode:screen;transform:translate(-50%,-50%) scale(0)}
.room--keyscape.is-rippling::before{animation:keyscape-wavefront 850ms linear forwards}
@keyframes keyscape-wavefront{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}7%{opacity:.85}55%{opacity:.5}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}

.room--keyscape.is-rippling .museum-window--keyscape{animation:keyflash-window 1.3s ease-out var(--wave-delay,0ms)}
@keyframes keyflash-window{0%,100%{filter:drop-shadow(0 0 0 rgba(150,136,255,0)) brightness(1)}14%{filter:drop-shadow(0 0 calc(38px * var(--wave-amp,1)) rgba(150,136,255,calc(.8 * var(--wave-amp,1)))) brightness(calc(1 + .16 * var(--wave-amp,1)))}}

.room--keyscape.is-rippling .exhibit-copy--keyscape h2{animation:keyflash-title 1.2s ease-out var(--wave-delay,0ms)}
@keyframes keyflash-title{0%,100%{color:var(--paper-light);text-shadow:5px 6px 0 var(--violet)}16%{color:#fff;text-shadow:5px 6px 0 var(--violet),0 0 calc(26px * var(--wave-amp,1)) rgba(178,166,255,calc(.85 * var(--wave-amp,1))),0 0 calc(80px * var(--wave-amp,1)) rgba(141,217,226,calc(.4 * var(--wave-amp,1)))}}

.room--keyscape.is-rippling .exhibit-copy--keyscape .eyebrow span,.room--keyscape.is-rippling .exhibit-copy--keyscape .project-facts li{animation:keyflash-chip 1.05s ease-out var(--wave-delay,0ms)}
@keyframes keyflash-chip{0%,100%{filter:brightness(1);box-shadow:0 0 0 rgba(160,146,255,0)}18%{filter:brightness(calc(1 + .5 * var(--wave-amp,1)));box-shadow:0 0 calc(22px * var(--wave-amp,1)) rgba(160,146,255,calc(.55 * var(--wave-amp,1)))}}

.room--keyscape.is-rippling .ripple-trigger{animation:keyflash-trigger 1.1s ease-out var(--wave-delay,0ms)}
@keyframes keyflash-trigger{0%,100%{filter:brightness(1)}15%{filter:brightness(calc(1 + .35 * var(--wave-amp,1))) drop-shadow(0 0 calc(18px * var(--wave-amp,1)) rgba(216,238,114,calc(.5 * var(--wave-amp,1))))}}

.room--keyscape.is-rippling .doorway--night{animation:keyflash-doorway 1.1s ease-out var(--wave-delay,0ms)}
@keyframes keyflash-doorway{0%,100%{filter:brightness(1)}18%{filter:brightness(calc(1 + .3 * var(--wave-amp,1))) drop-shadow(0 0 calc(20px * var(--wave-amp,1)) rgba(141,217,226,calc(.5 * var(--wave-amp,1))))}}

.room--keyscape.is-rippling .keyscape-stars i{animation:keyflash-star 1s ease-out var(--wave-delay,0ms)}
@keyframes keyflash-star{0%,100%{opacity:.55;transform:scale(1);box-shadow:0 0 8px rgba(141,217,226,.5)}20%{opacity:calc(.55 + .45 * var(--wave-amp,1));transform:scale(calc(1 + .9 * var(--wave-amp,1)));box-shadow:0 0 calc(16px * var(--wave-amp,1)) rgba(198,228,255,calc(.9 * var(--wave-amp,1)))}}

.room--keyscape.is-rippling .keyscape-beam{animation:keyflash-beam 1.25s ease-out var(--wave-delay,0ms)}
@keyframes keyflash-beam{0%,100%{opacity:.16}25%{opacity:calc(.16 + .34 * var(--wave-amp,1))}}

.museum-shell.is-rippling[data-frame="keyscape"] .museum-map{animation:keyflash-map 1.25s ease-out var(--wave-delay,0ms)}
@keyframes keyflash-map{0%,100%{box-shadow:0 -4px 0 color-mix(in srgb,var(--frame-shadow,var(--frame-ink)) 58%,transparent)}18%{box-shadow:0 -4px 0 color-mix(in srgb,var(--frame-shadow,var(--frame-ink)) 58%,transparent),0 -4px calc(36px * var(--wave-amp,1)) rgba(140,121,255,calc(.5 * var(--wave-amp,1)))}}

@media (prefers-reduced-motion: reduce){
  .room--keyscape.is-rippling::before{animation:none!important}
  .room--keyscape.is-rippling .museum-window--keyscape,.room--keyscape.is-rippling .exhibit-copy--keyscape h2,.room--keyscape.is-rippling .exhibit-copy--keyscape .eyebrow span,.room--keyscape.is-rippling .exhibit-copy--keyscape .project-facts li,.room--keyscape.is-rippling .ripple-trigger,.room--keyscape.is-rippling .doorway--night,.room--keyscape.is-rippling .keyscape-stars i,.room--keyscape.is-rippling .keyscape-beam,.museum-shell.is-rippling[data-frame="keyscape"] .museum-map{animation-delay:0ms!important;animation-duration:240ms!important}
}

/* Archive: three specimen tickets and a catalogued film stage */

.room--archive { --archive-accent:#8c79ff;--archive-accent-ink:var(--ink);--archive-surface:#d9d4ee;--archive-screen:#0d142a;--archive-kicker:color-mix(in srgb,var(--archive-accent) 48%,var(--ink));background-color:var(--archive-surface);background-image:linear-gradient(90deg,rgba(23,35,38,.04) 1px,transparent 1px),linear-gradient(rgba(23,35,38,.04) 1px,transparent 1px);background-size:34px 34px;transition:background-color 420ms ease; }
.room-texture--archive { background:radial-gradient(circle at 18% 14%,rgba(255,255,255,.68),transparent 25%); }
.room-canvas--archive{display:grid;grid-template-columns:minmax(255px,.52fr) minmax(650px,1.48fr);align-items:center;gap:clamp(45px,4vw,75px)}
.exhibit-copy--archive h2{font-size:clamp(3.5rem,5.6vw,6.7rem);line-height:.76}.exhibit-copy--archive>p:not(.eyebrow):not(.curator-note){max-width:36ch;font-size:.9rem;line-height:1.62}.curator-note{width:max-content;max-width:100%;margin:24px 0 0;padding:10px 12px;background:var(--acid);border:2px solid var(--ink);box-shadow:3px 4px 0 var(--ink);font:clamp(.7rem,.78vw,.82rem)/1.3 "Fraunces",Georgia,serif;transform:rotate(1.5deg)}.curator-note span{display:block;margin-bottom:3px;color:var(--coral-ink);font:700 .48rem "IBM Plex Mono",monospace;letter-spacing:.09em;text-transform:uppercase}
.room--archive .eyebrow{font-size:.75rem}
.room--archive .curator-note{font-size:.82rem}
.room--archive .curator-note span{font-size:.75rem}
.room--archive .repo-link{font-size:.78rem}
.room--archive .doorway>span,.room--archive .doorway>span>b{font-size:.75rem}

.archive-exhibit{display:grid;grid-template-columns:minmax(0,1fr) clamp(212px,16.5vw,252px);gap:14px;min-width:0;max-height:100%}
.archive-project-stage{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;min-width:0;min-height:0;background:color-mix(in srgb,var(--archive-accent) 8%,rgba(255,250,240,.93));border:3px solid var(--ink);box-shadow:9px 11px 0 var(--ink),14px 16px 0 var(--archive-accent);transform:rotate(.35deg);transition:box-shadow 360ms ease,background-color 360ms ease}
.archive-project-stage::before{position:absolute;top:-29px;right:12px;z-index:3;padding:7px 11px;color:var(--archive-accent-ink);background:var(--archive-accent);border:2px solid var(--ink);box-shadow:2px 3px 0 var(--ink);font:700 .75rem "IBM Plex Mono",monospace;letter-spacing:.09em;text-transform:uppercase;transform:rotate(1deg);transition:color 360ms ease,background-color 360ms ease}
.room--archive[data-archive-project="npc"] .archive-project-stage::before{content:"conversation habitat"}
.room--archive[data-archive-project="tutorial"] .archive-project-stage::before{content:"storyboard engine"}
.room--archive[data-archive-project="cupcake"] .archive-project-stage::before{content:"synthetic inner life"}
.archive-project-stage__screen{position:relative;display:grid;place-items:center;min-width:0;overflow:hidden;background:var(--archive-screen);border-bottom:2px solid var(--ink);transition:background-color 360ms ease}
.archive-project-stage__screen::before{position:absolute;top:0;right:0;left:0;z-index:2;height:6px;content:"";background:var(--archive-accent);transition:background-color 360ms ease}
.archive-project-stage__screen video{display:block;width:100%;height:auto;max-height:min(46vh,500px);aspect-ratio:16/9;object-fit:contain;background:var(--archive-screen);transition:background-color 360ms ease}
.media-play{position:absolute;right:13px;bottom:13px;z-index:4;display:grid;place-items:center;width:42px;height:42px;padding:0;color:var(--ink);background:var(--acid);border:2px solid var(--paper-light);border-radius:50%;box-shadow:3px 4px 0 var(--ink);cursor:pointer;transition:transform 160ms ease,background 160ms ease}.media-play:hover{background:var(--coral);transform:scale(1.08) rotate(-5deg)}.media-play span{padding-left:2px}.media-play.is-playing span{padding-left:0;font-size:0}.media-play.is-playing span::after{content:"Ⅱ";font-size:.9rem;font-weight:900}.media-play--feature{right:auto;left:13px}
.film-counter{position:absolute;top:11px;left:11px;padding:7px 9px;color:var(--paper-light);background:rgba(23,35,38,.86);border:1px solid rgba(255,250,240,.65);font:600 .75rem "IBM Plex Mono",monospace;letter-spacing:.07em}
.room--archive .film-counter{color:var(--archive-accent-ink);background:var(--archive-accent);border-color:var(--ink);box-shadow:2px 3px 0 var(--ink)}

.archive-stamp{position:absolute;bottom:12px;left:12px;z-index:3;display:grid;gap:2px;padding:7px 12px;text-align:center;color:var(--ink);background:#fffaf0;border:2.5px solid var(--archive-accent);border-radius:4px 7px 3px 6px;outline:1.5px solid var(--archive-accent);outline-offset:2px;box-shadow:2px 3px 0 rgba(23,35,38,.55);transform:rotate(-7deg);pointer-events:none;transition:border-color 360ms ease}
.archive-stamp b{font:800 .78rem "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase}
.archive-stamp i{font:700 .75rem "IBM Plex Mono",monospace;font-style:normal;letter-spacing:.06em}
.room--archive.is-stamping .archive-stamp{animation:archive-stamp-punch .5s cubic-bezier(.2,.9,.3,1.35)}
@keyframes archive-stamp-punch{0%{opacity:0;transform:rotate(-7deg) scale(1.9)}55%{opacity:1;transform:rotate(-7deg) scale(.93)}100%{transform:rotate(-7deg) scale(1)}}

.archive-project-stage__caption{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;padding:14px 16px 16px}
.archive-caption-main{min-width:0}
.archive-caption-main>p{margin:0 0 5px;color:var(--archive-kicker);font:700 .78rem "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;transition:color 360ms ease}
.archive-caption-main h3{margin:0 0 7px;font:700 clamp(1.25rem,1.7vw,1.7rem)/1 "Fraunces",Georgia,serif;letter-spacing:-.03em}
.archive-description{margin:0;color:var(--ink-soft);font:.9rem/1.5 "IBM Plex Mono",monospace}
.archive-caption-side{display:grid;justify-items:end;gap:9px}
.archive-motif{display:grid;place-items:center;width:44px;height:44px;color:var(--archive-kicker);transition:color 360ms ease}
.archive-motif svg{display:none;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.archive-motif svg .dot{fill:currentColor;stroke:none}
.room--archive[data-archive-project="npc"] .archive-motif .motif--npc{display:block}
.room--archive[data-archive-project="tutorial"] .archive-motif .motif--tutorial{display:block}
.room--archive[data-archive-project="cupcake"] .archive-motif .motif--cupcake{display:block}
.archive-ticket-rail{display:grid;min-width:0;min-height:0}
.archive-project-tabs{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:11px;min-height:0}{--ticket-accent:#5b4bd6;--ticket-chip:#8c79ff;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px 10px;min-width:0;padding:11px;text-align:left;color:var(--ink);background:rgba(255,250,240,.93);border:2px solid var(--ink);box-shadow:3px 4px 0 rgba(23,35,38,.72);cursor:pointer;transition:transform 180ms ease,color 180ms ease,background-color 180ms ease,box-shadow 180ms ease}
.archive-project-tab[data-archive-project="npc"]{--ticket-accent:#5b4bd6;--ticket-chip:#8c79ff;border-radius:6px 13px 5px 11px/7px 10px 6px 9px;transform:rotate(-.8deg)}
.archive-project-tab[data-archive-project="tutorial"]{--ticket-accent:#8a6d1f;--ticket-chip:#e5b845;border-radius:3px 6px 3px 5px;transform:rotate(.6deg)}
.archive-project-tab[data-archive-project="cupcake"]{--ticket-accent:#c2334f;--ticket-chip:#f06479;border-radius:5px 5px 15px 15px/5px 5px 19px 19px;transform:rotate(-1.2deg)}
.archive-project-tab[data-archive-project="npc"]::after{position:absolute;bottom:-6px;left:30px;width:11px;height:11px;content:"";background:inherit;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(55deg) skew(16deg)}
.archive-project-tab[data-archive-project="tutorial"]::before{position:absolute;top:4px;right:9px;left:9px;height:5px;content:"";background:radial-gradient(circle at 4px 50%,var(--ticket-accent) 0 1.8px,transparent 2.3px) 0 0/11px 100%;opacity:.75;pointer-events:none}
.archive-project-tab[data-archive-project="cupcake"]::before{position:absolute;right:8px;bottom:3px;left:8px;height:7px;content:"";background:repeating-linear-gradient(90deg,var(--ticket-accent) 0 2px,transparent 2px 8px);opacity:.5;pointer-events:none}
.archive-project-tab:hover{transform:translate(-3px,-2px) rotate(-.4deg);box-shadow:6px 7px 0 var(--ticket-accent)}
.archive-project-tab.is-active{color:var(--paper-light);background-color:var(--archive-screen);box-shadow:5px 6px 0 var(--ticket-chip);transform:translateX(-4px)}
.ticket-no{position:relative;display:grid;place-items:center;width:46px;height:44px}
.ticket-no svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--ticket-accent);stroke-width:2;stroke-linecap:round;transition:stroke 180ms ease}
.ticket-no b{font:750 1.05rem/1 "Fraunces",Georgia,serif;letter-spacing:-.02em}
.ticket-body{display:grid;gap:3px;min-width:0;justify-items:start}
.ticket-id{color:var(--ticket-accent);font:700 .75rem "IBM Plex Mono",monospace;letter-spacing:.07em;text-transform:uppercase;transition:color 180ms ease}
.ticket-title{display:block;font:730 clamp(1rem,1.15vw,1.2rem)/1.02 "Fraunces",Georgia,serif;letter-spacing:-.025em}
.ticket-stars{padding:4px 7px;color:var(--ink);background:var(--ticket-chip);border:1.5px solid var(--ink);border-radius:3px;font:normal 800 .82rem "IBM Plex Mono",monospace;letter-spacing:.04em;transition:background-color 180ms ease}
.archive-project-tab.is-active .ticket-id{color:var(--ticket-chip)}
.archive-project-tab.is-active .ticket-no svg{stroke:var(--ticket-chip)}
.archive-project-tab.is-active .ticket-motif{color:var(--ticket-chip)}
.ticket-motif{width:30px;height:30px;color:var(--ticket-accent);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:color 180ms ease}
.ticket-motif .dot{fill:currentColor;stroke:none}

.archive-cable{position:absolute;z-index:2;pointer-events:none;border:3px solid var(--ink);border-top:0;border-radius:0 0 50% 50%;opacity:.5}.archive-cable--one{top:0;right:27%;width:31%;height:13%;transform:rotate(2deg)}.archive-cable--two{right:1%;bottom:12%;width:21%;height:19%;transform:rotate(-8deg)}

.room--archive[data-archive-project="npc"]{--archive-accent:#8c79ff;--archive-accent-ink:var(--ink);--archive-surface:#d9d4ee;--archive-screen:#0d142a}
.room--archive[data-archive-project="tutorial"]{--archive-accent:#e5b845;--archive-accent-ink:var(--ink);--archive-surface:#eadbb0;--archive-screen:#231b0b}
.room--archive[data-archive-project="cupcake"]{--archive-accent:#f06479;--archive-accent-ink:var(--ink);--archive-surface:#edcfcd;--archive-screen:#2b101d}
.room--archive[data-archive-project="npc"] .room-texture--archive{background:radial-gradient(circle at 76% 28%,rgba(140,121,255,.38) 0 3px,transparent 4px),radial-gradient(circle at 84% 38%,rgba(141,217,226,.36) 0 2px,transparent 3px),linear-gradient(120deg,rgba(255,255,255,.58),transparent 36%);background-size:54px 54px,37px 37px,auto}
.room--archive[data-archive-project="tutorial"] .room-texture--archive{background:linear-gradient(90deg,transparent 0 74%,rgba(229,184,69,.24) 74% 75%,transparent 75%),linear-gradient(0deg,transparent 0 64%,rgba(23,35,38,.08) 64% 65%,transparent 65%),linear-gradient(120deg,rgba(255,255,255,.62),transparent 32%);background-size:116px 92px,116px 92px,auto}
.room--archive[data-archive-project="cupcake"] .room-texture--archive{background:radial-gradient(circle at 78% 25%,rgba(240,100,121,.28) 0 18px,transparent 19px),radial-gradient(circle at 84% 37%,rgba(217,238,114,.32) 0 8px,transparent 9px),radial-gradient(circle at 68% 44%,rgba(140,121,255,.24) 0 12px,transparent 13px),linear-gradient(120deg,rgba(255,255,255,.6),transparent 35%);background-size:140px 140px,86px 86px,110px 110px,auto}

/* Workbench: four tied-on instrument tags and a bench feature plate */

.room--workbench{--tool-accent:#8dd9e2;--tool-accent-ink:var(--ink);--tool-accent-hi:#8dd9e2;--tool-surface:#bad6d7;--tool-screen:#0c2024;--tool-desk:#688187;background-color:#d8e4df;background-image:linear-gradient(100deg,rgba(255,255,255,.7),transparent 27%),repeating-linear-gradient(0deg,transparent 0 46px,rgba(23,35,38,.045) 47px 48px);transition:background-color 420ms ease}
.room-texture--workbench{background:radial-gradient(circle,rgba(23,35,38,.1) 1.2px,transparent 1.4px) 0 0/20px 20px;opacity:.7}
.room-canvas--workbench{display:grid;grid-template-columns:minmax(255px,.5fr) minmax(650px,1.5fr);align-items:center;gap:clamp(45px,4vw,74px)}
.exhibit-copy--workbench h2{font-size:clamp(3.25rem,4.7vw,5.9rem);line-height:.78}.exhibit-copy--workbench>p:not(.eyebrow){max-width:36ch;font-size:.9rem;line-height:1.62}.all-work-link{width:max-content;max-width:100%;margin-top:24px;background:var(--acid)}
.room--workbench .eyebrow{font-size:.75rem}
.room--workbench .all-work-link{font-size:.78rem}
.room--workbench .repo-link{font-size:.78rem}
.room--workbench .doorway>span,.room--workbench .doorway>span>b{font-size:.75rem}

.workbench-gallery{position:relative;display:grid;grid-template-columns:clamp(225px,17vw,268px) minmax(0,1fr);gap:16px;min-width:0;padding:18px;background:radial-gradient(circle,rgba(23,35,38,.13) 1.4px,transparent 1.7px) 0 0/18px 18px,var(--tool-surface);border:3px solid var(--ink);box-shadow:10px 12px 0 var(--ink),15px 17px 0 var(--tool-accent);transform:perspective(1400px) rotateY(-1.2deg) rotateZ(.25deg);transition:background-color 360ms ease,box-shadow 360ms ease}
.workbench-gallery::before{position:absolute;top:-29px;right:10px;z-index:4;padding:7px 11px;color:var(--tool-accent-ink);background:var(--tool-accent);border:2px solid var(--ink);box-shadow:2px 3px 0 var(--ink);font:700 .75rem "IBM Plex Mono",monospace;letter-spacing:.09em;text-transform:uppercase;transform:rotate(-1deg);transition:color 360ms ease,background-color 360ms ease}
.room--workbench[data-tool="email"] .workbench-gallery::before{content:"inbox instrument"}.room--workbench[data-tool="gifsmith"] .workbench-gallery::before{content:"capture forge"}.room--workbench[data-tool="compendium"] .workbench-gallery::before{content:"knowledge index"}.room--workbench[data-tool="transparency"] .workbench-gallery::before{content:"desktop lens"}
.room--workbench.is-stamping .workbench-gallery::before{animation:workbench-label-punch .5s cubic-bezier(.2,.9,.3,1.35)}
@keyframes workbench-label-punch{0%{opacity:0;transform:rotate(-1deg) scale(1.7)}55%{opacity:1;transform:rotate(-1deg) scale(.94)}100%{transform:rotate(-1deg) scale(1)}}

.workbench-tags{display:grid;min-width:0;min-height:0}
.tool-drawers{display:grid;grid-template-rows:repeat(4,minmax(0,1fr));gap:12px;min-height:0}
.tool-selector{--tag-accent:#3d8a97;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 10px;min-width:0;min-height:52px;margin-top:9px;padding:11px 12px;text-align:left;color:var(--ink);background:rgba(255,250,240,.94);border:2px solid var(--ink);box-shadow:3px 4px 0 rgba(23,35,38,.72);cursor:pointer;transition:transform 170ms ease,color 170ms ease,background-color 170ms ease,box-shadow 170ms ease}
.tool-selector[data-tool="email"]{--tag-accent:#2f7d8c;border-radius:5px 10px 4px 9px;transform:rotate(-1deg)}
.tool-selector[data-tool="gifsmith"]{--tag-accent:#c2452e;border-radius:9px 4px 10px 5px;transform:rotate(.7deg)}
.tool-selector[data-tool="compendium"]{--tag-accent:#3a6156;border-radius:4px 8px 5px 10px;transform:rotate(-.5deg)}
.tool-selector[data-tool="transparency"]{--tag-accent:#5b4bd6;border-radius:10px 5px 9px 4px;transform:rotate(1deg)}
.tool-selector:hover{transform:translate(-2px,-2px);box-shadow:5px 6px 0 var(--tag-accent)}
.tool-selector.is-active{color:var(--paper-light);background-color:var(--tool-screen);box-shadow:5px 6px 0 var(--tag-accent);transform:translateX(4px)}
.tool-tag__string{position:absolute;top:-12px;left:14px;width:28px;height:26px;overflow:visible;fill:none;pointer-events:none}
.tool-tag__cord{stroke:var(--tag-accent);stroke-width:2;stroke-linecap:round;transition:stroke 170ms ease}
.tool-tag__hole{fill:var(--paper-light);stroke:var(--ink);stroke-width:1.5}
.tool-tag__mark{display:grid;place-items:center;width:34px;height:34px;background:color-mix(in srgb,var(--tag-accent) 12%,var(--paper-light));border:1.5px solid color-mix(in srgb,var(--tag-accent) 65%,var(--ink));border-radius:50% 46% 52% 48%/48% 52% 46% 54%;transition:border-color 170ms ease,background-color 170ms ease}
.tool-tag__mark svg{width:22px;height:22px;color:color-mix(in srgb,var(--tag-accent) 78%,var(--ink));fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:color 170ms ease}
.tool-tag__mark svg .dot{fill:currentColor;stroke:none}
.tool-tag__body{display:grid;gap:1px;min-width:0;justify-items:start;align-content:center}
.tool-tag__id{color:var(--tag-accent);font:700 .75rem "IBM Plex Mono",monospace;letter-spacing:.07em;text-transform:uppercase;transition:color 170ms ease}
.tool-tag__body>b{display:block;font:730 clamp(.98rem,1.1vw,1.15rem)/1.08 "Fraunces",Georgia,serif;letter-spacing:-.02em}
.tool-selector.is-active .tool-tag__id{color:var(--tool-accent-hi)}
.tool-selector.is-active .tool-tag__mark{border-color:var(--tool-accent-hi);background:color-mix(in srgb,var(--tool-accent-hi) 16%,transparent)}
.tool-selector.is-active .tool-tag__mark svg{color:var(--tool-accent-hi)}
.tool-selector.is-active .tool-tag__cord{stroke:var(--tool-accent-hi)}

.workbench-feature{display:grid;grid-template-rows:minmax(0,1fr) auto;min-width:0;min-height:0;background:var(--paper-light);border:2px solid var(--ink);box-shadow:4px 5px 0 var(--ink),8px 9px 0 var(--tool-accent);transition:box-shadow 360ms ease}
.workbench-feature__media{position:relative;display:grid;place-items:center;min-width:0;min-height:230px;overflow:hidden;padding:9px;background:var(--tool-screen);border-top:6px solid var(--tool-accent);transition:background-color 360ms ease,border-color 360ms ease}
.workbench-feature__media img,.workbench-feature__media video{display:block;width:100%;height:100%;max-height:min(46vh,480px);object-fit:contain;object-position:center;background:var(--tool-screen);transition:background-color 360ms ease,opacity 160ms ease,transform 420ms cubic-bezier(.2,.8,.2,1)}
.workbench-feature__media [hidden]{display:none}
.workbench-feature__media.is-changing img,.workbench-feature__media.is-changing video{opacity:.2;transform:scale(.98)}
.tool-tape{position:absolute;top:-8px;left:38%;width:23%;height:19px;background:color-mix(in srgb,var(--tool-accent) 72%,var(--acid));border:1px solid rgba(23,35,38,.5);transform:rotate(2deg);transition:background-color 360ms ease}
.room--workbench .workbench-feature__media .window-label{right:12px;bottom:12px;color:var(--tool-accent-ink);background:var(--tool-accent);border-color:var(--ink);box-shadow:2px 3px 0 var(--ink);font-size:.75rem;padding:6px 9px;transition:color 360ms ease,background-color 360ms ease}
.room--workbench .workbench-feature__media .window-label i{background:var(--tool-accent-ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--tool-accent-ink) 18%,transparent)}

.workbench-feature__copy{display:grid;gap:8px;padding:13px 15px 15px}
.workbench-feature__head{display:flex;align-items:center;gap:11px;min-width:0}
.workbench-feature__head>[data-tool-index]{flex:0 0 auto;padding:5px 8px;color:var(--tool-accent-ink);background:var(--tool-accent);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);font:700 .78rem "IBM Plex Mono",monospace;letter-spacing:.05em;transform:rotate(-1deg);transition:color 360ms ease,background-color 360ms ease}
.workbench-feature__head h3{margin:0;font:730 clamp(1.25rem,1.7vw,1.65rem)/1 "Fraunces",Georgia,serif;letter-spacing:-.035em}
.workbench-motif{display:grid;place-items:center;width:38px;height:38px;margin-left:auto;color:color-mix(in srgb,var(--tool-accent) 55%,var(--ink));transition:color 360ms ease}
.workbench-motif svg{display:none;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.workbench-motif svg .dot{fill:currentColor;stroke:none}
.room--workbench[data-tool="email"] .workbench-motif .mark--email{display:block}
.room--workbench[data-tool="gifsmith"] .workbench-motif .mark--gifsmith{display:block}
.room--workbench[data-tool="compendium"] .workbench-motif .mark--compendium{display:block}
.room--workbench[data-tool="transparency"] .workbench-motif .mark--transparency{display:block}
.workbench-feature__copy>p[data-tool-description]{margin:0;color:var(--ink-soft);font:.9rem/1.5 "IBM Plex Mono",monospace}
.workbench-feature__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px}{position:absolute;right:0;bottom:0;left:0;z-index:2;height:11%;background:repeating-linear-gradient(91deg,rgba(255,255,255,.08) 0 22px,rgba(23,35,38,.05) 23px 25px),var(--tool-desk);border-top:4px solid var(--ink);box-shadow:inset 0 8px rgba(255,255,255,.13);transition:background-color 360ms ease}.workbench-desk i{position:absolute;display:block}.workbench-desk i:nth-child(1){top:14%;left:48%;width:19%;height:19px;background:repeating-linear-gradient(90deg,transparent 0 8px,var(--ink) 9px 10px),var(--gold);border:2px solid var(--ink);transform:rotate(4deg)}.workbench-desk i:nth-child(2){top:34%;right:18%;width:90px;height:9px;background:var(--coral);border:2px solid var(--ink);border-radius:3px;transform:rotate(-9deg)}.workbench-desk i:nth-child(3){top:22%;left:18%;width:23px;height:23px;background:var(--ink-soft);border:2px solid var(--ink);border-radius:50%;box-shadow:inset 0 0 0 5px var(--paper-deep)}

.room--workbench[data-tool="email"]{--tool-accent:#8dd9e2;--tool-accent-ink:var(--ink);--tool-accent-hi:#8dd9e2;--tool-surface:#bad6d7;--tool-screen:#0c2024;--tool-desk:#688187;background-color:#d8e4df}
.room--workbench[data-tool="gifsmith"]{--tool-accent:#f06449;--tool-accent-ink:var(--ink);--tool-accent-hi:#ff8a66;--tool-surface:#d9b092;--tool-screen:#25120d;--tool-desk:#8f674b;background-color:#ead3bd}
.room--workbench[data-tool="compendium"]{--tool-accent:#46776a;--tool-accent-ink:var(--paper-light);--tool-accent-hi:#8fb5a6;--tool-surface:#b9c7a5;--tool-screen:#0d211c;--tool-desk:#64745f;background-color:#d9dec5}
.room--workbench[data-tool="transparency"]{--tool-accent:#8c79ff;--tool-accent-ink:var(--ink);--tool-accent-hi:#a496ff;--tool-surface:#c7c1e1;--tool-screen:#111528;--tool-desk:#605b82;background-color:#ded9ed}
.room--workbench[data-tool="email"] .room-texture--workbench{background:linear-gradient(35deg,transparent 47%,rgba(23,35,38,.08) 48% 50%,transparent 51%),linear-gradient(-35deg,transparent 47%,rgba(141,217,226,.24) 48% 50%,transparent 51%);background-size:86px 56px}
.room--workbench[data-tool="gifsmith"] .room-texture--workbench{background:radial-gradient(circle,rgba(240,100,73,.32) 0 3px,transparent 4px) 0 0/34px 34px,repeating-linear-gradient(90deg,transparent 0 42px,rgba(23,35,38,.07) 43px 46px)}
.room--workbench[data-tool="compendium"] .room-texture--workbench{background:repeating-linear-gradient(0deg,transparent 0 31px,rgba(70,119,106,.18) 32px 34px),linear-gradient(90deg,transparent 13%,rgba(229,184,69,.2) 13% 14%,transparent 14%)}
.room--workbench[data-tool="transparency"] .room-texture--workbench{background:radial-gradient(circle at 72% 35%,rgba(140,121,255,.3),transparent 24%),linear-gradient(120deg,rgba(255,255,255,.72),transparent 24% 57%,rgba(141,217,226,.2) 58% 59%,transparent 60%)}

/* Doors and map */

.doorway {
  position:absolute;
  top:50%;
  z-index:35;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:48px;
  padding:10px 12px;
  background:var(--paper-light);
  border:2px solid var(--ink);
  border-radius:4px 8px 4px 7px;
  box-shadow:4px 5px 0 var(--ink);
  cursor:pointer;
  font-family:"IBM Plex Mono",monospace;
  transform:translateY(-50%);
  transition:transform 170ms ease,color 170ms ease,background 170ms ease,box-shadow 170ms ease;
}
.doorway:hover{color:var(--paper-light);background:var(--coral-deep);box-shadow:7px 8px 0 var(--ink)}
.doorway--left{left:13px}.doorway--left:hover{transform:translate(3px,-50%)}.doorway--right{right:13px}.doorway--right:hover{transform:translate(-3px,-50%)}
.doorway>span{display:flex;align-items:center;gap:7px;font-size:.53rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.doorway>span>b{color:var(--coral-ink);font-size:.48rem}.doorway:hover>span>b{color:var(--acid)}.doorway>i{font-style:normal;font-weight:900}.doorway--night{color:var(--paper-light);background:var(--night-blue);border-color:var(--paper-light);box-shadow:4px 5px 0 var(--violet)}.doorway--night:hover{color:var(--night);background:var(--acid);border-color:var(--night);box-shadow:7px 8px 0 var(--violet)}.doorway--return{background:var(--coral)}
.room .doorway{top:auto;bottom:16px;transform:none}.room .doorway:hover{transform:translateY(-2px)}

.museum-map {
  position:fixed;
  right:0;
  bottom:0;
  left:0;
  z-index:110;
  display:grid;
  grid-template-columns:84px 1fr;
  gap:10px;
  align-items:center;
  min-height:var(--map-h);
  padding:9px clamp(12px,2vw,32px);
  border:0;
  border-top:2px solid var(--frame-rim, var(--frame-ink, var(--ink)));
  border-radius:10px 10px 0 0;
  box-shadow:0 -4px 0 color-mix(in srgb,var(--frame-shadow,var(--frame-ink,var(--ink))) 58%,transparent);
  backdrop-filter:none;
}
.museum-map__you{display:flex;align-items:center;gap:7px;font:600 .47rem/1.25 "IBM Plex Mono",monospace;letter-spacing:.07em;text-transform:uppercase}.museum-map__you i{width:12px;height:12px;background:var(--coral);border:2px solid var(--ink);border-radius:50%;animation:you-pulse 1.7s ease-in-out infinite}@keyframes you-pulse{50%{box-shadow:0 0 0 6px rgba(240,100,73,.18)}}
.museum-map ol{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;min-width:0;padding:0;margin:0;list-style:none}.museum-map li{min-width:0}.museum-map button{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:7px;width:100%;min-height:39px;padding:6px 8px;text-align:left;background:transparent;border:1.5px solid transparent;border-radius:3px 7px 3px 6px;cursor:pointer;transition:transform 160ms ease,color 160ms ease,background 160ms ease}.museum-map button>b{overflow:hidden;font:700 clamp(.56rem,.65vw,.68rem) "DM Sans",sans-serif;letter-spacing:.04em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.museum-map button>i{position:absolute;right:-4px;top:50%;width:8px;height:8px;background:var(--paper-light);border:1.5px solid var(--ink);border-radius:50%;transform:translate(50%,-50%)}.museum-map li:last-child button>i{display:none}.museum-map__progress{position:absolute;right:12px;bottom:3px;left:106px;height:2px;overflow:hidden;background:rgba(23,35,38,.15)}.museum-map__progress i{display:block;width:var(--map-progress);height:100%;background:var(--coral-deep);transition:width var(--transition-time) var(--ease-walk)}

/* Walking visitor */

.visitor {
  position: fixed;
  bottom: calc(var(--map-h) + 8px);
  left: var(--visitor-left);
  z-index: 62;
  width: 84px;
  height: 60px;
  aspect-ratio: 84 / 60;
  pointer-events: none;
  filter: drop-shadow(2px 3px 0 color-mix(in srgb,var(--frame-surface) 82%,transparent));
  transition: left var(--transition-time) var(--ease-walk), opacity 220ms ease;
}
.visitor__art { display:block; width:100%; height:100%; overflow:visible; shape-rendering:geometricPrecision; }
.visitor__shadow { fill:rgba(23,35,38,.18); }
.visitor__tail { transform-box:fill-box; transform-origin:88% 78%; }
.visitor__tail-outline,.visitor__tail-fill { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.visitor__tail-outline { stroke:#172326; stroke-width:6.4; }
.visitor__tail-fill { stroke:#f47b55; stroke-width:3.2; }
.visitor__fur { fill:#f47b55; stroke:#172326; stroke-width:2.8; stroke-linejoin:round; }
.visitor__chest { fill:#ffd7b6; opacity:.9; }
.visitor__stripes { fill:none; stroke:#172326; stroke-width:2.4; stroke-linecap:round; }
.visitor__paw { fill:#ff9f67; stroke:#172326; stroke-width:2.5; transform-box:fill-box; transform-origin:center; }
.visitor__bandana { fill:#d9ee72; stroke:#172326; stroke-width:2; stroke-linejoin:round; }
.visitor__ear { fill:#ffb083; stroke:#172326; stroke-width:1.7; stroke-linejoin:round; }
.visitor__eye { fill:#fffaf0; stroke:#172326; stroke-width:1.5; }
.visitor__pupil { fill:#172326; transform-box:fill-box; transform-origin:center; }
.visitor__muzzle { fill:#fff0dc; }
.visitor__nose { fill:#8c79ff; stroke:#172326; stroke-width:.8; }
.visitor__smile { fill:none; stroke:#172326; stroke-width:1; stroke-linecap:round; }
.visitor__pose { transform-box:view-box; transform-origin:50% 88%; }
.museum-shell[data-walk-direction=backward] .visitor { transform:scaleX(-1); }

@media (prefers-reduced-motion:no-preference) {
  .museum-shell.is-walking .visitor__pose { animation:visitor-bob .34s ease-in-out infinite alternate; }
  .museum-shell.is-walking .visitor__paw--a { animation:kitten-step-a .28s ease-in-out infinite alternate; }
  .museum-shell.is-walking .visitor__paw--b { animation:kitten-step-b .28s ease-in-out infinite alternate-reverse; }
  .museum-shell.is-walking .visitor__tail { animation:kitten-tail .46s ease-in-out infinite alternate; }
  .visitor__pupil { animation:visitor-blink 5.4s step-end infinite; }
}
@keyframes kitten-step-a { to { transform:translate(1.8px,-.7px) rotate(5deg); } }
@keyframes kitten-step-b { to { transform:translate(-1.5px,.4px) rotate(-4deg); } }
@keyframes kitten-tail { to { transform:rotate(7deg) translateY(-.5px); } }
@keyframes visitor-bob { to { transform:translateY(-1.4px) rotate(-.55deg); } }
@keyframes visitor-blink { 0%,45%,49%,100% { transform:scaleY(1); } 47% { transform:scaleY(.14); } }

.first-visit-note{position:fixed;right:calc(clamp(20px,5vw,90px) + 170px);bottom:calc(var(--map-h) + 24px);z-index:75;display:flex;align-items:center;gap:9px;padding:9px 12px;background:var(--paper-light);border:2px solid var(--ink);box-shadow:3px 4px 0 var(--ink);font:600 .55rem "IBM Plex Mono",monospace;letter-spacing:.04em;opacity:0;pointer-events:none;transform:translateY(12px) rotate(1deg);transition:opacity 300ms ease,transform 300ms ease}.museum-shell.is-intro .first-visit-note{opacity:1;transform:translateY(0) rotate(1deg);animation:first-note 4.2s .6s both}@keyframes first-note{0%{opacity:0;transform:translateY(12px)}15%,80%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(5px)}}
.mobile-scroll-hint{position:fixed;right:14px;bottom:calc(var(--map-h) + 15px);z-index:78;display:none;align-items:center;gap:8px;padding:7px 9px;color:var(--paper-light);background:var(--ink);border:1.5px solid var(--paper-light);box-shadow:3px 4px 0 var(--coral);font:700 .47rem "IBM Plex Mono",monospace;letter-spacing:.07em;text-transform:uppercase;opacity:0;pointer-events:none;transform:translateY(8px) rotate(1deg);transition:opacity 220ms ease,transform 220ms ease}.mobile-scroll-hint i{color:var(--acid);font:normal 800 .8rem/1 "IBM Plex Mono",monospace}.mobile-scroll-hint.is-visible{opacity:1;transform:translateY(0) rotate(1deg);animation:scroll-hint-bob 1.35s ease-in-out infinite}@keyframes scroll-hint-bob{50%{transform:translateY(4px) rotate(1deg)}}
.museum-shell.is-intro .mobile-scroll-hint.is-visible{opacity:0}
.room-announcer{position:fixed;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.no-script-note{position:fixed;right:15px;bottom:15px;z-index:1000;max-width:360px;padding:12px;color:var(--paper-light);background:var(--coral-deep);border:2px solid var(--ink);font:.72rem/1.4 "IBM Plex Mono",monospace}

/* Handwritten labels need enough paper around the type to read as objects, not cramped badges. */
.eyebrow span{padding:5px 8px}
.project-facts li{padding:6px 9px}
.window-label{padding:7px 10px}
.curator-note{padding:13px 16px;line-height:1.38;border-radius:16px 13px 17px 8px}
.first-visit-note{padding:11px 15px}
.museum-shell:not([data-current-room="0"]) .first-visit-note{display:none}
.mobile-scroll-hint{padding:9px 12px}
.film-counter{padding:7px 9px}
.ticket-stars{padding:6px 8px}
.workbench-feature__head>[data-tool-index]{padding:6px 9px}

/* The sentence itself refuses to sit still. Every glyph can flee a pointer without reflowing the line. */
.thesis-line{display:block;white-space:nowrap}
.restless-word{position:relative;display:inline-block}
.restless-word+.restless-word{margin-left:-.04em}
.restless-letter{display:inline-block;transform:translate3d(var(--restless-x,0),var(--restless-y,0),0) rotate(var(--restless-rotate,0deg));transform-origin:50% 80%;transition:transform 360ms cubic-bezier(.16,.78,.2,1);will-change:transform}
.restless-space{width:.27em}
[data-restless-thesis]{touch-action:pan-y}
[data-restless-thesis].is-restless .restless-letter{transition-duration:72ms}
[data-restless-thesis].is-pounced .restless-letter{animation:thesis-pounce 460ms cubic-bezier(.2,.85,.2,1)}
@keyframes thesis-pounce{45%{transform:translate3d(calc(var(--restless-x,0) * 1.8),calc(var(--restless-y,0) - 7px),0) rotate(calc(var(--restless-rotate,0deg) * 1.6))}}
.thesis-touch-note{display:inline-flex;align-items:center;gap:9px;margin:12px 0 0;color:var(--coral-ink);font:700 .5rem "IBM Plex Mono",monospace;letter-spacing:.075em;text-transform:uppercase;transform:rotate(-.4deg)}
.thesis-touch-note i{position:relative;width:25px;height:12px;border-bottom:1.5px solid currentColor}
.thesis-touch-note i::before,.thesis-touch-note i::after{position:absolute;content:""}
.thesis-touch-note i::before{right:0;bottom:-3px;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg)}
.thesis-touch-note i::after{left:1px;bottom:-2px;width:5px;height:5px;background:var(--coral);border:1px solid var(--ink);border-radius:50%;animation:thesis-cursor 1.8s ease-in-out infinite}
@keyframes thesis-cursor{50%{transform:translateX(17px)}}

/* The foyer is an index as well as an entrance: a quiet architectural grid with tactile route cards. */
.room-texture--foyer::after{position:absolute;right:3vw;bottom:10%;z-index:1;max-width:10ch;content:"MOVEMENT\A STUDIES";color:transparent;font:800 clamp(5rem,10vw,12rem)/.68 "Fraunces",Georgia,serif;letter-spacing:-.075em;text-align:right;white-space:pre;-webkit-text-stroke:1px rgba(23,35,38,.075);transform:rotate(-3deg)}
.room--foyer::before{position:absolute;inset:6% 2.8% 10%;z-index:1;content:"";border:1px solid rgba(23,35,38,.12);border-bottom:0;border-radius:48% 48% 0 0/11% 11% 0 0;pointer-events:none}
.foyer-index{display:grid;grid-template-columns:1.05fr .92fr .92fr;gap:8px;max-width:680px;margin-top:27px}
.foyer-index>button{position:relative;display:grid;grid-template-columns:auto 1fr;gap:2px 9px;min-height:58px;padding:10px 12px 9px 15px;overflow:hidden;color:inherit;text-align:left;background:rgba(255,250,240,.68);border:1.5px solid var(--ink);box-shadow:3px 4px 0 rgba(23,35,38,.75);cursor:pointer;transform:rotate(var(--index-tilt,-.45deg));transition:transform 160ms ease,box-shadow 160ms ease,background 160ms ease}
.foyer-index>button:hover{background:rgba(255,250,240,.92);box-shadow:5px 6px 0 rgba(23,35,38,.75);transform:rotate(var(--index-tilt,-.45deg)) translateY(-2px)}
.foyer-index>button:focus-visible{outline:2.5px dashed var(--coral);outline-offset:3px}
.foyer-index>button:nth-child(2){--index-tilt:.55deg;box-shadow:3px 4px 0 var(--gold)}
.foyer-index>button:nth-child(2):hover{box-shadow:5px 6px 0 var(--gold)}
.foyer-index>button:nth-child(3){--index-tilt:-.15deg;box-shadow:3px 4px 0 var(--moss)}
.foyer-index>button:nth-child(3):hover{box-shadow:5px 6px 0 var(--moss)}
.foyer-index>button::after{position:absolute;right:-11px;bottom:-12px;width:34px;height:34px;content:"";background:var(--coral);border:1.5px solid var(--ink);border-radius:50%;opacity:.74;pointer-events:none}
.foyer-index>button:nth-child(2)::after{background:var(--gold);border-radius:3px;transform:rotate(22deg)}
.foyer-index>button:nth-child(3)::after{background:var(--acid);clip-path:polygon(50% 0,62% 34%,100% 39%,70% 61%,80% 100%,50% 77%,20% 100%,30% 61%,0 39%,38% 34%)}
.foyer-index i{grid-row:1/3;color:var(--coral-ink);font:normal 700 .48rem "IBM Plex Mono",monospace;letter-spacing:.04em}
.foyer-index b{align-self:end;font:730 .76rem/.95 "Fraunces",Georgia,serif;letter-spacing:-.025em;text-transform:lowercase}
.foyer-index small{color:var(--ink-soft);font:600 .42rem/1.25 "IBM Plex Mono",monospace;letter-spacing:.02em}

/* Shared museum chrome takes on the material of the room—or the selected artifact. */
.museum-shell[data-frame="foyer"]{--frame-surface:#f4ead4;--frame-ink:#172326;--frame-accent:#f06449;--frame-secondary:#e5b845;--frame-pattern:repeating-linear-gradient(112deg,transparent 0 28px,rgba(23,35,38,.045) 29px 30px)}
.museum-shell[data-frame="alcove"]{--frame-surface:#ede1c6;--frame-ink:#33200f;--frame-accent:#7f2d38;--frame-secondary:#b8863b;--frame-pattern:repeating-linear-gradient(90deg,transparent 0 22px,rgba(67,41,26,.07) 23px 24px)}
.museum-shell[data-frame="pet"]{--frame-surface:#cfd9e0;--frame-ink:#1d2c31;--frame-accent:#2c6e7c;--frame-secondary:#d9ee72;--frame-pattern:linear-gradient(90deg,rgba(29,44,49,.07) 1px,transparent 1px),linear-gradient(rgba(29,44,49,.07) 1px,transparent 1px)}
.museum-shell[data-frame="keyscape"]{--frame-surface:#111722;--frame-ink:#fffaf0;--frame-accent:#8c79ff;--frame-secondary:#8dd9e2;--frame-pattern:radial-gradient(circle at 13px 10px,rgba(141,217,226,.18) 0 1.2px,transparent 1.8px)}
.museum-shell[data-frame="archive-npc"]{--frame-surface:#ded9ef;--frame-ink:#172326;--frame-accent:#8c79ff;--frame-secondary:#8dd9e2;--frame-pattern:radial-gradient(circle at 13px 13px,rgba(140,121,255,.19) 0 2px,transparent 2.5px)}
.museum-shell[data-frame="archive-tutorial"]{--frame-surface:#efe2bd;--frame-ink:#30291d;--frame-accent:#e5b845;--frame-secondary:#c54234;--frame-pattern:linear-gradient(90deg,transparent 0 27px,rgba(80,61,27,.08) 28px 29px)}
.museum-shell[data-frame="archive-cupcake"]{--frame-surface:#f0cfd8;--frame-ink:#341b27;--frame-accent:#ef607f;--frame-secondary:#8c79ff;--frame-pattern:radial-gradient(circle at 14px 14px,rgba(239,96,127,.19) 0 4px,transparent 4.5px)}
.museum-shell[data-frame="workbench-email"]{--frame-surface:#d3e6e3;--frame-ink:#172f32;--frame-accent:#5fbfce;--frame-secondary:#46776a;--frame-pattern:linear-gradient(35deg,transparent 47%,rgba(23,47,50,.08) 48% 50%,transparent 51%)}
.museum-shell[data-frame="workbench-gifsmith"]{--frame-surface:#ead3bd;--frame-ink:#301d17;--frame-accent:#f06449;--frame-secondary:#e5b845;--frame-pattern:radial-gradient(circle at 14px 14px,rgba(240,100,73,.18) 0 3px,transparent 3.5px)}
.museum-shell[data-frame="workbench-compendium"]{--frame-surface:#d9dec5;--frame-ink:#17362f;--frame-accent:#46776a;--frame-secondary:#e5b845;--frame-pattern:repeating-linear-gradient(0deg,transparent 0 15px,rgba(70,119,106,.11) 16px 17px)}
.museum-shell[data-frame="workbench-transparency"]{--frame-surface:#ded9ed;--frame-ink:#24213a;--frame-accent:#8c79ff;--frame-secondary:#8dd9e2;--frame-pattern:linear-gradient(120deg,transparent 0 45%,rgba(140,121,255,.11) 46% 47%,transparent 48%)}
.museum-masthead,.museum-map{color:var(--frame-ink);background-color:var(--frame-surface);background-image:var(--frame-pattern);background-size:36px 28px;border-color:var(--frame-rim,var(--frame-ink));transition:color 420ms ease,background-color 420ms ease,border-color 420ms ease,box-shadow 420ms ease}
.museum-masthead{box-shadow:0 6px 0 color-mix(in srgb,var(--frame-accent) 24%,transparent)}
.museum-masthead::after{background:repeating-linear-gradient(90deg,transparent 0 28px,var(--frame-accent) 29px 34px,transparent 35px 48px);opacity:.7}
.maker-mark__portrait{border-color:var(--frame-ink);box-shadow:3px 3px 0 var(--frame-ink)}
.maker-mark__words small{color:var(--frame-accent)}
.masthead-exhibit::before{position:absolute;inset:4px 23%;z-index:0;content:"";background:color-mix(in srgb,var(--frame-accent) 13%,transparent);border:1px solid color-mix(in srgb,var(--frame-accent) 56%,transparent);border-radius:50% 4px 50% 5px;transform:rotate(-1deg)}
.masthead-links a{color:var(--frame-ink);background:color-mix(in srgb,var(--frame-surface) 74%,var(--paper-light));border-color:var(--frame-ink);box-shadow:2px 2px 0 var(--frame-ink)}
.masthead-links a:hover{color:var(--frame-surface);background:var(--frame-ink);box-shadow:4px 4px 0 var(--frame-accent)}
.museum-map{isolation:isolate;overflow:hidden;box-shadow:0 -4px 0 color-mix(in srgb,var(--frame-shadow,var(--frame-ink)) 58%,transparent)}
.museum-map::before{position:absolute;inset:0;z-index:-1;content:"";background:linear-gradient(90deg,var(--frame-accent),var(--frame-secondary));clip-path:polygon(0 0,18% 0,14% 5%,64% 5%,61% 0,100% 0,100% 4%,0 4%);opacity:.95}
.museum-map::after{position:absolute;top:-2px;right:0;left:0;z-index:-2;height:4px;background:var(--frame-surface);content:"";pointer-events:none}
.museum-map__you i{background:var(--frame-accent);border-color:var(--frame-ink)}
.museum-map ol{gap:10px}
.museum-map button{color:var(--frame-ink)}
.museum-map button:hover{background:color-mix(in srgb,var(--frame-accent) 25%,transparent)}
.museum-map button[aria-current=step]{color:var(--frame-surface);background:var(--frame-ink);border-color:var(--frame-ink);box-shadow:3px 3px 0 var(--frame-accent)}
.museum-map button>span{color:color-mix(in srgb,var(--frame-accent) 82%,var(--frame-ink))}
.museum-map button[aria-current=step]>span{color:var(--frame-secondary)}
.museum-map button>i{right:-7px;width:7px;height:7px;background:var(--frame-surface);border-color:var(--frame-ink);pointer-events:none;transform:translateY(-50%)}
.museum-map__progress{background:color-mix(in srgb,var(--frame-ink) 16%,transparent)}
.museum-map__progress i{background:linear-gradient(90deg,var(--frame-accent),var(--frame-secondary))}

.visitor-rail{position:fixed;right:0;bottom:calc(var(--map-h) + 7px);left:0;z-index:60;height:8px;pointer-events:none;background:repeating-linear-gradient(90deg,var(--frame-accent) 0 3px,transparent 3px 14px);border-bottom:1.5px solid var(--frame-ink);opacity:.42;transition:background 420ms ease,border-color 420ms ease}

.foyer-copy h1 em{color:var(--coral-deep);font-style:normal}

@media (max-width:900px){
  .masthead-exhibit{position:absolute;bottom:-11px;left:50%;display:block;width:auto;min-height:0;overflow:visible;transform:translateX(-50%)}
  .masthead-exhibit>span{display:none}
  .masthead-exhibit>b{min-width:72px;margin:0;padding:4px 8px;color:var(--frame-surface);background:var(--frame-ink);border:1.5px solid var(--frame-accent);box-shadow:2px 2px 0 var(--frame-accent);font:.7rem/1 "Fraunces",Georgia,serif;white-space:nowrap;transform:rotate(-.5deg)}
  .masthead-exhibit::before{display:none}
  .foyer-index{display:none}
}

@media (max-width:760px){
  .museum-stage{bottom:calc(var(--map-h) + 50px)}
  .ceiling-lights--foyer{right:15%;left:auto;width:1px;background:transparent}
  .ceiling-lights--foyer>i:not(:first-child){display:none}
  .ceiling-lights--foyer>i:first-child{right:0;left:auto;height:42px}
  .room-texture--foyer::after{right:-3%;bottom:34%;font-size:6.2rem;-webkit-text-stroke-color:rgba(23,35,38,.055)}
  .archive-project-stage{margin-top:31px}
  .museum-map ol{gap:5px}
  .museum-map button>i{display:none}
  .visitor-rail{bottom:calc(var(--map-h) + 3px);height:50px;background-color:color-mix(in srgb,var(--frame-surface) 90%,transparent);border-top:1px solid color-mix(in srgb,var(--frame-ink) 30%,transparent);opacity:.9}
  .visitor{bottom:calc(var(--map-h) + 4px)}
  .mobile-scroll-hint{bottom:calc(var(--map-h) + 58px)}
}

/* Room arrival */

.room .exhibit-copy,.room .foyer-copy,.room .chapter-map,.room .foyer-motion-field,.room .guide-plinth,.room .media-exhibit,.room .archive-exhibit,.room .workbench-gallery{opacity:.22;transition:opacity 480ms ease,transform 640ms var(--ease-walk)}.room.is-current .exhibit-copy,.room.is-current .foyer-copy,.room.is-current .chapter-map,.room.is-current .foyer-motion-field,.room.is-current .guide-plinth,.room.is-current .media-exhibit,.room.is-current .archive-exhibit,.room.is-current .workbench-gallery{opacity:1}

/* Medium widths */

@media (max-width: 1180px) {
  :root{--header-h:74px;--map-h:90px}
  .museum-masthead{grid-template-columns:minmax(220px,.8fr) minmax(260px,1fr) auto;padding-inline:16px}.masthead-links a{padding:7px 8px}.room-canvas{padding-inline:72px}.room-canvas--foyer{grid-template-columns:minmax(380px,1.1fr) minmax(280px,.9fr);gap:30px}.foyer-copy h1{font-size:clamp(4.5rem,8vw,7.5rem)}.guide-speech{right:0}.room-canvas--alcove,.room-canvas--keyscape{grid-template-columns:minmax(255px,.66fr) minmax(420px,1.34fr);gap:36px}.room-canvas--pet{grid-template-columns:minmax(280px,.74fr) minmax(430px,1.26fr);gap:20px 36px}.room-canvas--archive,.room-canvas--workbench{grid-template-columns:minmax(220px,.48fr) minmax(560px,1.52fr);gap:34px}.archive-exhibit{grid-template-columns:minmax(0,1fr) 196px}.archive-project-stage__caption{gap:12px;padding:13px 14px 15px}.archive-caption-side{gap:7px}.archive-motif{width:36px;height:36px}.ticket-motif{display:none}.archive-project-tab{grid-template-columns:auto minmax(0,1fr)}.workbench-gallery{grid-template-columns:205px minmax(0,1fr);padding:14px}.workbench-feature__copy{padding:13px 14px 14px}.doorway>span{font-size:.48rem}
}

@media (max-width: 900px) {
  :root{--header-h:72px;--map-h:84px}
  .museum-masthead{grid-template-columns:1fr auto}.maker-mark__portrait{flex-basis:45px;width:45px;height:45px}.maker-mark__words b{font-size:.95rem}.maker-mark__words small{font-size:.5rem}.room-canvas{padding-inline:64px}.room-canvas--foyer{grid-template-columns:minmax(360px,1.15fr) minmax(230px,.75fr);gap:18px}.guide-speech{top:3%;right:-6%;font-size:.8rem}.guide-label{display:none}.foyer-actions{align-items:flex-start;flex-direction:column;gap:12px}.room-canvas--alcove,.room-canvas--keyscape{grid-template-columns:minmax(220px,.62fr) minmax(390px,1.38fr);gap:27px}.room-canvas--pet{grid-template-columns:minmax(200px,.62fr) minmax(360px,1.3fr);gap:16px 24px}.exhibit-copy h2{font-size:clamp(3.1rem,7vw,5.5rem)}.exhibit-copy>p:not(.eyebrow):not(.curator-note){font-size:.63rem}.room--archive .exhibit-copy>p:not(.eyebrow):not(.curator-note),.room--workbench .exhibit-copy>p:not(.eyebrow):not(.curator-note){font-size:.85rem;line-height:1.6}.agent-card__body{font-size:.56rem}.room-canvas--alcove{grid-template-columns:minmax(205px,.55fr) minmax(400px,1.45fr)}.room-canvas--archive,.room-canvas--workbench{grid-template-columns:210px minmax(0,1fr);gap:25px}.archive-exhibit{grid-template-columns:1fr}.archive-ticket-rail{grid-template-rows:auto}.archive-project-tabs{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto}.archive-project-tab{grid-template-columns:auto minmax(0,1fr);padding:9px;transform:none}.archive-project-tab[data-archive-project="npc"]::after{display:none}.ticket-no{width:38px;height:36px}.ticket-no b{font-size:.9rem}.ticket-motif{display:none}.archive-project-stage__caption{grid-template-columns:1fr;gap:12px}.archive-caption-side{grid-auto-flow:column;justify-items:start;align-items:center}.workbench-gallery{grid-template-columns:1fr;gap:12px;padding:12px}.tool-drawers{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto}.tool-selector{margin-top:0;padding:9px 8px;transform:none}.tool-tag__string{display:none}.tool-tag__mark{width:30px;height:30px}.tool-tag__mark svg{width:19px;height:19px}.museum-map{grid-template-columns:70px 1fr}.museum-map__progress{left:92px}.museum-map button{gap:4px;padding-inline:5px}
}

/* Phone and portrait tablet: each room becomes its own scrollable exhibit. */

@media (max-width: 760px) {
  :root{--header-h:72px;--map-h:74px;--transition-time:660ms}
  .museum-masthead{padding:7px 10px}.maker-mark__portrait{flex-basis:43px;width:43px;height:43px;margin-right:9px}.maker-mark__words small{margin-top:4px;font-size:.46rem}.masthead-links{gap:5px}.masthead-links a{padding:7px;font-size:.5rem}.masthead-links a:nth-child(2){display:none}
  .museum-stage{overflow:hidden}.room{overflow-x:clip;overflow-y:auto;overscroll-behavior:contain}.room::after{bottom:80px}.room-canvas{display:block;width:100%;height:auto;min-height:100%;padding:28px 18px 150px}.archive-cable{display:none}.room--alcove::before,.room-texture--alcove::after{display:none}
  .foyer-copy{max-width:none}.foyer-copy h1{font-size:clamp(3.75rem,18.5vw,6rem);line-height:.73}.foyer-copy__intro{max-width:48ch;margin-top:21px;font-size:.68rem}.foyer-actions{margin-top:23px}.guide-plinth{width:min(89vw,390px);margin:22px auto 0}.guide-speech{right:1%;font-size:.83rem}.room-canvas--foyer{padding-bottom:145px}
  .exhibit-copy{width:100%;max-width:620px}.exhibit-copy h2,.exhibit-copy--pet h2,.exhibit-copy--archive h2,.exhibit-copy--workbench h2{font-size:clamp(3.4rem,16vw,5.6rem);line-height:.78}.exhibit-copy>p:not(.eyebrow):not(.curator-note){max-width:50ch;margin-top:15px;font-size:.65rem}.room--archive .exhibit-copy>p:not(.eyebrow):not(.curator-note),.room--workbench .exhibit-copy>p:not(.eyebrow):not(.curator-note){font-size:.85rem;line-height:1.6}.project-facts{margin-top:13px}
  .media-exhibit{width:100%;margin:28px 0 0}.museum-window{padding:7px;box-shadow:6px 7px 0 rgba(23,35,38,.9)}.museum-window--alcove{box-shadow:6px 7px 0 rgba(67,41,26,.38),9px 10px 0 rgba(46,26,14,.88)}.museum-window--pet{box-shadow:6px 7px 0 rgba(23,35,38,.3)}.museum-window--keyscape{box-shadow:6px 7px 0 var(--violet),9px 10px 0 rgba(216,238,114,.7);transform:rotate(.4deg)}.museum-window img{max-height:none}.media-exhibit figcaption{align-items:flex-start;flex-direction:column;width:96%;margin-top:22px}.alcove-notes{margin-top:26px}.alcove-book.is-open .alcove-book__block,.alcove-book.is-open:hover .alcove-book__block,.alcove-book.is-open:focus-visible .alcove-book__block{transform:translate(16px,-52px) scale(1.95) rotate(-2.5deg);transform-origin:0 100%}.ripple-console{margin-top:21px}.keyscape-specimen{margin-bottom:0}
  .room-canvas--archive,.room-canvas--workbench{padding-bottom:165px}.curator-note{margin-top:17px}.archive-exhibit{display:grid;grid-template-columns:1fr;margin-top:27px}.archive-project-stage{order:1}.archive-ticket-rail{order:0}.archive-project-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:2px}.archive-project-tab{min-height:96px;padding:10px 9px;transform:none}.archive-project-tab[data-archive-project="npc"]::after{display:none}.ticket-no{width:36px;height:34px}.ticket-no b{font-size:.88rem}.ticket-id{font-size:.75rem}.ticket-year{display:none}.ticket-title{font-size:.88rem;line-height:1.05}.ticket-stars{font-size:.75rem}.ticket-motif{display:none}.archive-project-stage__screen video{max-height:none}.archive-project-stage__caption{grid-template-columns:1fr;gap:12px;padding:14px}.archive-caption-side{grid-auto-flow:column;justify-items:start;align-items:center}.archive-description{font-size:.85rem}.media-play{width:38px;height:38px}
  .workbench-gallery{display:grid;grid-template-columns:1fr;margin-top:27px;padding:12px;transform:rotate(.2deg)}.tool-drawers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,auto)}.tool-selector{min-height:52px;margin-top:0;padding:10px 9px;transform:none}.tool-tag__string{display:none}.workbench-feature__media{min-height:190px}.workbench-feature__media img,.workbench-feature__media video{height:auto;max-height:none;aspect-ratio:auto}.workbench-feature__copy{padding:13px}.workbench-feature__copy [data-tool-description]{font-size:.85rem}.workbench-feature__meta{justify-content:flex-start}.workbench-desk{height:8%}
  .room .doorway{display:none}
  .mobile-scroll-hint{display:flex}
  .museum-map{right:0;bottom:0;left:0;grid-template-columns:1fr;min-height:var(--map-h);padding:6px clamp(8px,2vw,16px);box-shadow:0 -3px 0 color-mix(in srgb,var(--frame-shadow,var(--frame-ink)) 58%,transparent)}.museum-map__you{display:none}.museum-map ol{grid-column:1}.museum-map button{display:grid;grid-template-columns:1fr;place-items:center;gap:1px;min-height:43px;padding:3px 2px;text-align:center}.museum-map button>b{font-size:.45rem}.museum-map button>i{width:6px;height:6px;right:-3px}.museum-map__progress{right:6px;bottom:2px;left:6px}.visitor{bottom:calc(var(--map-h) + 4px);transform:scale(.7);transform-origin:bottom}.museum-shell[data-walk-direction=backward] .visitor{transform:scale(-.7,.7)}.first-visit-note{right:15px;bottom:calc(var(--map-h) + 16px);font-size:.48rem}
}

@media (max-width: 430px) {
  .maker-mark__words b{font-size:.84rem}.maker-mark__words small{max-width:145px;overflow:hidden;font-size:.41rem;white-space:nowrap}.masthead-links a{padding:6px;font-size:.46rem}.room-canvas{padding-inline:15px}.eyebrow{font-size:.48rem}.foyer-copy h1{font-size:clamp(3.35rem,18vw,4.8rem)}.guide-plinth{width:min(96%,345px)}.guide-speech{max-width:145px;padding:8px 10px;font-size:.75rem}.agent-card__body{font-size:.54rem}.archive-project-tab{grid-template-columns:1fr;place-items:center;gap:3px;padding:9px 7px;text-align:center}.ticket-no{width:32px;height:30px}.ticket-body{justify-items:center}.ticket-title{font-size:.82rem}.archive-description{font-size:.8rem}.tool-selector{min-height:48px}.workbench-feature__copy [data-tool-description]{font-size:.8rem}.museum-map button>b{display:block;font-size:.38rem}.museum-map button>span{font-size:.5rem}
}

@media (max-width: 760px) {
  .maker-mark__words small{font-size:.5rem}
  .masthead-links a{font-size:.52rem}
  .museum-map button>b{font-size:.5rem}
}

@media (max-width: 430px) {
  .maker-mark__words b{font-size:.9rem}
  .maker-mark__words small{font-size:.48rem}
  .masthead-links a{font-size:.5rem}
  .ticket-stars{font-size:.75rem}
  .museum-map button>b{font-size:.48rem}
  .museum-map button>span{font-size:.52rem}
}

@media (min-width: 1900px) {
  .room-canvas{padding-inline:150px}.foyer-copy h1{font-size:9.8rem}.exhibit-copy h2{font-size:7rem}.archive-description,.workbench-feature__copy [data-tool-description]{font-size:.95rem}
}

@media (max-height: 700px) and (min-width: 761px) {
  :root{--header-h:64px;--map-h:76px}.museum-masthead{min-height:64px;padding-block:6px}.maker-mark__portrait{flex-basis:43px;width:43px;height:43px}.room-canvas{padding-top:18px;padding-bottom:25px}.foyer-copy h1{font-size:clamp(4rem,7.2vw,7rem)}.foyer-copy__intro{margin-top:16px}.foyer-actions{margin-top:17px}.guide-plinth{width:min(42vh,350px)}.exhibit-copy h2{font-size:clamp(3rem,5.5vw,5.7rem)}.exhibit-copy>p:not(.eyebrow):not(.curator-note){margin-top:13px;line-height:1.43}.museum-window img,.museum-window video,.archive-project-stage__screen video{max-height:48vh}.media-exhibit figcaption{margin-top:19px}.museum-map{bottom:0;min-height:var(--map-h)}.visitor{bottom:calc(var(--map-h) + 5px);transform:scale(.8);transform-origin:bottom}.museum-shell[data-walk-direction=backward] .visitor{transform:scale(-.8,.8)}.curator-note{display:none}.archive-project-stage__caption{padding-block:9px}.workbench-gallery{padding:10px}.workbench-feature__media{min-height:180px}
}

@media (max-height: 620px) and (min-width: 761px) {
  .room{overflow-x:hidden;overflow-x:clip;overflow-y:auto;overscroll-behavior:contain}
  .room-canvas{height:auto;min-height:620px;padding-bottom:105px}
  .room .doorway{display:none}
  .mobile-scroll-hint{display:flex}
  .museum-window img,.museum-window video{max-height:360px}
}

/* Final thesis and bubble scaling: preserve the authored three-line cadence at every width. */
@media (min-width: 901px) and (max-width: 1180px) {
  .foyer-copy h1{font-size:clamp(2.9rem,4.8vw,4.1rem);line-height:.84}
}

@media (min-width: 761px) and (max-width: 900px) {
  .foyer-copy h1{font-size:clamp(2.8rem,5.6vw,3.35rem);line-height:.84}
  .guide-speech{right:0;min-width:160px;max-width:190px;padding:15px 17px}
}

@media (max-width: 760px) {
  .foyer-copy h1{font-size:clamp(2.7rem,9vw,4.2rem);line-height:.85;letter-spacing:-.03em;word-spacing:.07em}
  .guide-speech{right:1%;min-width:160px;max-width:190px;padding:15px 17px;line-height:1.2}
  .ceiling-lights>i{height:38px}.ceiling-lights>i:nth-child(2){height:50px}
  .first-visit-note{display:none}
  .archive-project-tab{min-height:96px;padding:10px 9px}
  .tool-selector{min-height:52px;padding:10px 9px}
}

@media (max-width: 430px) {
  .foyer-copy h1{font-size:clamp(2.38rem,11.5vw,3.1rem);line-height:.86}
  .guide-speech{min-width:150px;max-width:170px;padding:14px 16px;font-size:.78rem}
  .archive-project-tab{padding:9px 8px}
}

@media (min-width: 1900px) {
  .foyer-copy h1{font-size:6.8rem}
}

@media (max-height: 700px) and (min-width: 761px) {
  .foyer-copy h1{font-size:clamp(2.7rem,4.6vw,4.8rem);line-height:.84}
}

@media (max-width:760px) {
  .guide-plinth{width:min(58vw,250px);margin:8px auto 0}
  .guide-speech{top:-3%;right:-34%}
  .keyscape-specimen figcaption{margin-top:14px}
  .mobile-scroll-hint{right:8px;bottom:calc(var(--map-h) + 11px);left:auto}
  .museum-shell:is([data-current-room="3"],[data-current-room="4"],[data-current-room="5"]) .mobile-scroll-hint{right:auto;left:8px}
  .museum-shell.is-intro .mobile-scroll-hint.is-visible{opacity:1}
}

@media (max-width:430px) {
  .guide-plinth{width:min(56vw,218px)}
}

@media (max-width:350px) {
  .foyer-actions .interaction-cue--entry{display:none}
  .guide-plinth{width:calc(100vw - 30px);height:132px;margin-top:4px;aspect-ratio:auto}
  .guide-signal{inset:auto auto -7px -3px;width:140px;height:140px}
  .kinetic-guide{inset:auto auto 0 1px;width:138px;height:120px}
  .guide-plinth::after{right:auto;bottom:0;left:7px;width:128px;height:14px}
  .guide-speech{top:11px;right:0;width:148px;min-width:0;max-width:148px;padding:12px 13px;font-size:.72rem}
  .guide-speech::before{bottom:20px;left:-22px;border-top:14px solid transparent;border-right:24px solid var(--ink);border-bottom:14px solid transparent;transform:none}
  .guide-speech::after{bottom:23px;left:-17px;border-top:11px solid transparent;border-right:20px solid var(--paper-light);border-bottom:11px solid transparent;transform:none}
  .guide-plinth.is-greeting .guide-speech::after{border-top-color:transparent;border-right-color:var(--acid)}
  .museum-map button>b{font-size:.5rem}
}

@media (prefers-reduced-motion: reduce) {
  :root{--transition-time:1ms}*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.kinetic-guide{transform:none!important}.first-visit-note{display:none}.mobile-scroll-hint.is-visible{animation:none}
}

@media (prefers-contrast: more) {
  :root{--ink:#080d0e;--ink-soft:#172123}.museum-masthead,.museum-map{background:var(--paper-light);backdrop-filter:none}
}

@media print {
  body{overflow:visible}.museum-shell{height:auto;overflow:visible}.museum-masthead,.museum-map,.visitor,.visitor-rail,.doorway,.first-visit-note,.mobile-scroll-hint{display:none!important}.museum-stage{position:static;overflow:visible}.museum-world{display:block;transform:none}.room{min-height:760px;overflow:hidden;break-after:page}.room-canvas{padding:50px}
}

/* 2026-08 refinement: steadier motion, generous rhythm, and a warmer Alcove. */
.masthead-exhibit {
  width: min(100%, 440px);
  min-height: 54px;
  padding: 7px 24px 6px;
  overflow: visible;
}

.masthead-exhibit::before {
  inset: 0 4px;
  background:
    linear-gradient(105deg, transparent 0 4%, color-mix(in srgb,var(--frame-accent) 21%,var(--frame-surface)) 4.5% 95%, transparent 95.5%),
    color-mix(in srgb,var(--frame-accent) 8%,transparent);
  border: 1.5px solid color-mix(in srgb,var(--frame-accent) 64%,var(--frame-ink));
  border-radius: 4px 13px 5px 11px;
  box-shadow: 3px 3px 0 color-mix(in srgb,var(--frame-accent) 30%,transparent);
  transform: rotate(-.55deg);
}

.masthead-exhibit > span { letter-spacing: .17em; }
.masthead-exhibit > b { margin-top: 6px; }

.room-canvas--foyer {
  grid-template-columns: minmax(460px, 1.14fr) minmax(228px, .5fr) minmax(270px, .58fr);
  gap: clamp(20px, 2.4vw, 44px);
}

.foyer-copy { max-width: 1040px; }
.foyer-copy h1 {
  max-width: 10.8em;
  font-size: clamp(3.3rem, 4.9vw, 5.9rem);
  line-height: .88;
  cursor: default;
}

.thesis-line { padding-block: .025em; }
.thesis-line--last { padding-top: .13em; }

.moving-word {
  padding: .08em .17em .15em .13em;
  transform: translate3d(var(--thesis-x, 0), var(--thesis-y, 0), 0) rotate(var(--thesis-r, -1.5deg));
  transform-origin: 50% 65%;
  transition: transform 190ms cubic-bezier(.2,.8,.2,1), filter 190ms ease;
  will-change: transform;
}

[data-restless-thesis].is-restless .moving-word { filter: saturate(1.12) brightness(1.03); }

.foyer-copy__intro {
  max-width: 68ch;
  margin-top: clamp(27px, 4vh, 44px);
  font-size: clamp(.79rem, .92vw, 1rem);
  line-height: 1.72;
}

.foyer-copy__intro strong { margin-bottom: 9px; font-size: clamp(1.08rem,1.45vw,1.48rem); }

.exhibit-copy h2 { margin-bottom: 0; }
.exhibit-copy > p:not(.eyebrow):not(.curator-note) {
  max-width: 47ch;
  margin-top: clamp(24px, 3vh, 34px);
  font-size: clamp(.72rem, .83vw, .9rem);
  line-height: 1.68;
}

.project-facts { gap: 8px; margin-top: 21px; }
.project-facts li { padding: 8px 11px; font-size: .57rem; }
.exhibit-copy--pet h2 { line-height: .82; text-transform: none; }
.exhibit-copy--keyscape h2 { padding-bottom: .06em; }
#keyscape .exhibit-copy--keyscape > p:not(.eyebrow) { margin-top: clamp(25px,3.3vh,38px); }

.archive-project-stage__caption {
  gap: 22px;
  padding: 17px 20px 19px;
}

.exhibit-copy--archive h2 { font-size: clamp(3.2rem,4.4vw,5.2rem); line-height: .8; }

.archive-caption-main > p { margin-bottom: 7px; }
.archive-caption-main h3 { line-height: 1.03; }
.archive-description {
  color: color-mix(in srgb,var(--ink-soft) 96%,transparent);
  line-height: 1.55;
}

.archive-project-tab { padding: 13px 12px; }
.ticket-title { line-height: 1.08; }
.workbench-feature__copy { gap: 10px; padding: 16px 18px 18px; }
.workbench-feature__head h3 { line-height: 1.04; }
.workbench-feature__copy [data-tool-description] { max-width: 68ch; line-height: 1.55; }
.tool-selector { padding: 12px 11px; }

@media (max-width: 1180px) and (min-width: 901px) {
  .room-canvas--foyer { grid-template-columns: minmax(480px,1.3fr) minmax(270px,.7fr); gap: 24px; }
  .foyer-copy h1 { font-size: clamp(3.6rem,5.7vw,5.3rem); line-height: .9; }
  .room-canvas--alcove,.room-canvas--keyscape { grid-template-columns: minmax(300px,.78fr) minmax(410px,1.22fr); }
}

@media (max-width: 900px) and (min-width: 761px) {
  .masthead-exhibit { width: auto; max-width: 190px; min-height: 0; }
  .masthead-exhibit > b { min-width: 120px; padding-inline: 14px; }
  .room-canvas--foyer { grid-template-columns: minmax(410px,1.22fr) minmax(240px,.78fr); gap: 16px; }
  .foyer-copy h1 { font-size: clamp(3.05rem,5.55vw,3.8rem); line-height: .91; }
  .foyer-copy__intro { font-size: .72rem; }
  .room-canvas--archive { grid-template-columns: 260px minmax(0,1fr); }
  .archive-project-stage__caption { grid-template-columns: 1fr; }
  .archive-caption-side { grid-auto-flow: column; justify-items: start; align-items: center; }
}

@media (max-width: 760px) {
  .masthead-exhibit { width: auto; max-width: 180px; min-height: 0; padding: 0 2px; }
  .masthead-exhibit > b { min-width: 118px; padding-inline: 13px; }
  .foyer-copy h1 { font-size: clamp(2.75rem,10.4vw,4.25rem); line-height: .93; }
  .thesis-line { padding-block: .035em; }
  .thesis-line--last { padding-top: .14em; }
  .moving-word { padding-block: .1em .17em; }
  .foyer-copy__intro { margin-top: 28px; font-size: .73rem; line-height: 1.68; }
  .exhibit-copy h2,.exhibit-copy--pet h2,.exhibit-copy--archive h2,.exhibit-copy--workbench h2 { line-height: .84; }
  .exhibit-copy > p:not(.eyebrow):not(.curator-note) { margin-top: 22px; font-size: .7rem; line-height: 1.65; }
  .project-facts { margin-top: 18px; }
  .project-facts li { padding: 7px 9px; }
  .archive-project-stage__caption { grid-template-columns: 1fr; padding: 17px 16px 19px; }
  .archive-caption-side { grid-auto-flow: column; justify-items: start; align-items: center; }
  .archive-description { font-size: .85rem; line-height: 1.55; }
  .workbench-feature__copy { padding: 16px; }
  .workbench-feature__copy [data-tool-description] { font-size: .85rem; line-height: 1.55; }
  .museum-map [data-room-target="2"] b { line-height: 1.05; text-align: center; white-space: normal; }
  .visitor { transform: scale(.68); }
  .museum-shell[data-walk-direction=backward] .visitor { transform: scale(-.68,.68); }
}

@media (max-width: 430px) {
  .foyer-copy h1 { font-size: clamp(2.45rem,11.8vw,3.25rem); }
  .foyer-copy__intro { font-size: .69rem; }
  .archive-project-tab { min-height: 94px; }
}

@media (max-width: 340px) {
  .maker-mark__words { display: none; }
  .ceiling-lights--foyer { display: none; }
  .guide-plinth { height: 108px; }
  .guide-signal { width: 118px; height: 118px; }
  .kinetic-guide { width: 116px; height: 102px; }
  .guide-plinth::after { width: 108px; }
}

@media (min-width: 1900px) {
  .room-canvas--foyer { grid-template-columns: minmax(640px,1.16fr) minmax(300px,.52fr) minmax(360px,.6fr); }
  .foyer-copy h1 { max-width: 10.5em; font-size: clamp(4.8rem, 5.2vw, 6.5rem); }
  .chapter-map { max-width: 340px; }
  .chapter-map__stop button { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 8px 10px; }
  .chapter-map__badge { width: 44px; height: 44px; }
  .chapter-map__badge svg { width: 27px; height: 27px; }
  .chapter-map__words i, .chapter-map__words small { font-size: .48rem; }
}

@media (max-height: 700px) and (min-width: 761px) {
  .foyer-copy h1 { font-size: clamp(3rem,4.8vw,5.05rem); line-height: .9; }
  .foyer-copy__intro { margin-top: 22px; }
  .foyer-index { display: none; }
  .exhibit-copy > p:not(.eyebrow):not(.curator-note) { margin-top: 19px; line-height: 1.52; }
  .project-facts { margin-top: 15px; }
}

/* Short and split-screen windows remain complete exhibits rather than clipped
   snapshots. The room itself scrolls while the masthead and map stay anchored. */
@media (max-height: 780px) and (min-width: 761px) {
  .room { overflow-x: clip; overflow-y: auto; overscroll-behavior: contain; }
  .room-canvas { height: auto; min-height: 680px; padding-bottom: 105px; }
  .room .doorway { display: none; }
  .mobile-scroll-hint { display: flex; }
  .museum-shell.is-intro .mobile-scroll-hint.is-visible { opacity: 1; }
}

/* Give the long archive title an honest column through the tablet and compact
   laptop range. It no longer paints underneath the project stage. */
@media (min-width: 901px) and (max-width: 1180px) {
  .room-canvas--archive { grid-template-columns: 275px minmax(0,1fr); }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .exhibit-copy--archive h2 { font-size: clamp(2.72rem,4.15vw,3.18rem); }
}

/* Component shadows are decorative; the keyboard ring must remain consistent
   over every palette and must not be replaced by those shadows in the cascade. */
:where(a,button,[role="tab"]):focus-visible {
  outline: 3px solid var(--paper-light);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--ink) !important;
}

@media (max-width: 760px) {
  .masthead-links a,
  .repo-link,
  .interactive-action,
  .media-play,
  .archive-project-tab,
  .tool-selector,
  .museum-map button { min-height: 44px; }
  .media-play { min-width: 44px; }
  .maker-mark,
  .exhibit-button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .moving-word { transform: rotate(-1.5deg) !important; filter: none !important; }
}

/* Studio companion layout: the speech object owns a separate connector and a
   reserved zone, so neither the bubble nor its voice cue can become anatomy. */
.room-canvas--foyer { width:min(100%,2240px); }

@media (min-width: 431px) and (max-width: 900px) {
  .guide-speech { top:-38px; right:-2%; width:clamp(200px,28vw,230px); min-width:0; max-width:none; }
  .guide-speech-trail { top:54px; right:calc(clamp(200px,28vw,230px) - 14px); }
}

@media (min-width: 431px) and (max-width: 760px) {
  .foyer-motion-field { display:none; }
  .guide-plinth { width:min(82vw,330px); margin:42px auto 0; }
  .guide-speech { top:-42px; right:-5%; width:clamp(190px,48vw,220px); }
  .guide-speech-trail { top:48px; right:calc(clamp(190px,48vw,220px) - 12px); }
}

@media (max-width: 430px) {
  .foyer-motion-field { display:none; }
  .guide-plinth { width:calc(100vw - 30px); height:158px; margin:18px auto 0; aspect-ratio:auto; }
  .guide-signal { inset:auto auto -5px -3px; width:164px; height:164px; }
  .kinetic-guide { inset:auto auto 5px 2px; width:170px; height:148px; }
  .guide-plinth::after { right:auto; bottom:0; left:8px; width:150px; height:14px; }
  .guide-speech { top:7px; right:0; width:166px; min-width:0; max-width:none; padding:14px; font-size:.74rem; line-height:1.22; }
  .guide-speech-trail { top:82px; right:154px; width:42px; height:20px; }
  .guide-speech-trail i:nth-child(1) { top:3px; right:0; }
  .guide-speech-trail i:nth-child(2) { top:7px; right:15px; }
  .guide-speech-trail i:nth-child(3) { top:10px; right:29px; }
}

@media (max-width: 340px) {
  .guide-plinth { height:112px; margin-top:-8px; }
  .guide-signal { width:122px; height:122px; }
  .kinetic-guide { width:120px; height:105px; }
  .guide-plinth::after { width:110px; height:12px; }
  .guide-speech { top:5px; width:146px; padding:14px; font-size:.66rem; line-height:1.2; }
  .guide-speech-trail { top:72px; right:130px; }
}

/* Chapter map: an annotated corridor diagram between the thesis and the guide.
   Every stop is a real navigation button tinted with its room's frame color;
   the spine and the room's bezier studies draw themselves once on arrival. */

.chapter-map {
  position: relative;
  z-index: 6;
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 300px;
  min-width: 0;
}

.chapter-map__title { margin: 0 0 clamp(12px, 2vh, 20px); }
.chapter-map__title span { display: inline-block; padding: 3px 6px; color: var(--paper-light); background: var(--ink); border-radius: 2px 5px 2px 4px; font: 600 .48rem "IBM Plex Mono", monospace; letter-spacing: .12em; text-transform: uppercase; transform: rotate(-.7deg); }
.chapter-map__title b { display: block; margin-top: 8px; font: 750 clamp(1.02rem,1.25vw,1.3rem)/1.08 "Fraunces", Georgia, serif; letter-spacing: -.02em; }

.chapter-map__track { position: relative; }
.chapter-map__spine { position: absolute; top: 4px; bottom: 4px; left: 0; width: 30px; height: calc(100% - 8px); overflow: visible; }
.chapter-map__spine path { fill: none; stroke: rgba(23,35,38,.5); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100; }

.chapter-map__list { position: relative; display: grid; gap: clamp(5px, 1.1vh, 11px); padding: 0; margin: 0 0 0 30px; list-style: none; }

.chapter-map__stop { position: relative; --stop-accent: var(--coral); }
.chapter-map__stop:nth-child(1) { --stop-accent: #d9ee72; }
.chapter-map__stop:nth-child(2) { --stop-accent: #d94668; }
.chapter-map__stop:nth-child(3) { --stop-accent: #f06449; }
.chapter-map__stop:nth-child(4) { --stop-accent: #8c79ff; }
.chapter-map__stop:nth-child(5) { --stop-accent: #e5b845; }
.chapter-map__stop:nth-child(6) { --stop-accent: #5fbfce; }

.chapter-map__stop::before { position: absolute; top: 50%; left: -19.5px; z-index: 2; width: 9px; height: 9px; margin-top: -4.5px; content: ""; background: var(--paper-light); border: 2px solid var(--ink); border-radius: 50%; transition: background 180ms ease; }
.chapter-map__stop::after { position: absolute; top: 50%; left: -10.5px; width: 10.5px; height: 2px; margin-top: -1px; content: ""; background: rgba(23,35,38,.32); transition: background 180ms ease; }
.chapter-map__stop--here::before { background: var(--acid); animation: live-pulse 1.8s ease-in-out infinite; }
.chapter-map__stop:hover::before, .chapter-map__stop:focus-within::before { background: var(--stop-accent); animation: none; }
.chapter-map__stop:hover::after, .chapter-map__stop:focus-within::after { background: var(--stop-accent); }

.chapter-map__stop button {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 6px 10px 7px 9px;
  cursor: pointer;
  text-align: left;
  transition: background 180ms ease, transform 180ms cubic-bezier(.2,.8,.2,1);
}

.chapter-map__stop button:hover, .chapter-map__stop button:focus-visible { background: rgba(255,250,240,.78); transform: translateX(3px); }

.chapter-map__badge { display: grid; place-items: center; width: 40px; height: 40px; color: var(--ink); background: rgba(255,250,240,.85); border: 2px solid var(--ink); border-radius: 47% 53% 52% 48% / 45% 49% 51% 55%; box-shadow: 2px 3px 0 rgba(23,35,38,.6); transition: transform 200ms cubic-bezier(.2,.8,.2,1), color 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 200ms ease; }
.chapter-map__stop:nth-child(2) .chapter-map__badge { border-radius: 6px 9px 5px 8px; transform: rotate(-2deg); }
.chapter-map__stop:nth-child(3) .chapter-map__badge { border-radius: 52% 48% 55% 45% / 48% 55% 45% 52%; }
.chapter-map__stop:nth-child(4) .chapter-map__badge { border-radius: 5px 8px 6px 9px; transform: rotate(2.5deg); }
.chapter-map__stop:nth-child(5) .chapter-map__badge { border-radius: 49% 51% 46% 54% / 54% 46% 53% 47%; }
.chapter-map__stop:nth-child(6) .chapter-map__badge { border-radius: 7px 5px 9px 6px; transform: rotate(-1.5deg); }
.chapter-map__badge svg { width: 25px; height: 25px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chapter-map__badge .chapter-map__dot { fill: currentColor; stroke: none; }
.chapter-map__stop button:hover .chapter-map__badge, .chapter-map__stop button:focus-visible .chapter-map__badge { color: color-mix(in srgb, var(--stop-accent) 82%, var(--ink)); background: color-mix(in srgb, var(--stop-accent) 16%, var(--paper-light)); border-color: color-mix(in srgb, var(--stop-accent) 70%, var(--ink)); box-shadow: 3px 5px 0 color-mix(in srgb, var(--stop-accent) 55%, var(--ink)); transform: translateY(-3px) rotate(-3deg); }
.chapter-map__stop--here .chapter-map__badge { background: color-mix(in srgb, var(--acid) 42%, var(--paper-light)); }

.chapter-map__words { display: grid; gap: 1px; min-width: 0; }
.chapter-map__words i { color: color-mix(in srgb, var(--stop-accent) 72%, var(--ink)); font: normal 700 .44rem "IBM Plex Mono", monospace; letter-spacing: .07em; text-transform: uppercase; }
.chapter-map__words b { font: 730 clamp(.86rem,1.05vw,1.06rem)/1.05 "Fraunces", Georgia, serif; letter-spacing: -.02em; }
.chapter-map__words small { color: var(--ink-soft); font: 600 .44rem/1.3 "IBM Plex Mono", monospace; letter-spacing: .02em; }

.chapter-map__loop { margin: clamp(10px, 1.8vh, 16px) 0 0 30px; color: var(--ink-soft); font: 600 .46rem "IBM Plex Mono", monospace; letter-spacing: .05em; text-transform: uppercase; }
.chapter-map__loop i { color: var(--coral-deep); font-style: normal; font-weight: 700; }

@keyframes chapter-spine-draw { from { stroke-dashoffset: 100; } }
@keyframes chapter-stop-in { from { opacity: 0; transform: translateX(-12px) rotate(-1.6deg); } }
@keyframes foyer-note-in { from { opacity: 0; translate: 0 7px; } }
@keyframes foyer-field-draw { from { stroke-dashoffset: 100; } }
@keyframes guide-signal-march { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -30; } }

.room--foyer.is-current .chapter-map__spine path { animation: chapter-spine-draw 1.15s cubic-bezier(.55,.04,.22,1) .05s backwards; }
.room--foyer.is-current .chapter-map__stop { animation: chapter-stop-in .52s cubic-bezier(.2,.9,.26,1.12) backwards; }
.room--foyer.is-current .chapter-map__stop:nth-child(1) { animation-delay: .18s; }
.room--foyer.is-current .chapter-map__stop:nth-child(2) { animation-delay: .27s; }
.room--foyer.is-current .chapter-map__stop:nth-child(3) { animation-delay: .36s; }
.room--foyer.is-current .chapter-map__stop:nth-child(4) { animation-delay: .45s; }
.room--foyer.is-current .chapter-map__stop:nth-child(5) { animation-delay: .54s; }
.room--foyer.is-current .chapter-map__stop:nth-child(6) { animation-delay: .63s; }
.room--foyer.is-current .chapter-map__loop { animation: foyer-note-in .5s ease .8s backwards; }

.room--foyer.is-current .foyer-motion-field__path { animation: foyer-field-draw 1.6s cubic-bezier(.5,.03,.2,1) backwards; }
.room--foyer.is-current .foyer-motion-field__path--violet { animation-delay: .16s; }
.room--foyer.is-current .foyer-motion-field__path--coral { animation-delay: .32s; }
.room--foyer.is-current .foyer-motion-field__note { animation: foyer-note-in .55s ease .95s backwards; }

.room--foyer.is-current .guide-signal__path { animation: foyer-field-draw 1.3s cubic-bezier(.5,.03,.2,1) .1s backwards; }
.guide-plinth.is-greeting .guide-signal__path { animation: guide-signal-march 1.15s linear; }

@media (max-width: 1180px) {
  .chapter-map { display: none; }
}

@media print {
  .chapter-map { display: none; }
}

/* Compact responsive flow: phone, tablet, ultrawide without redesigning rooms. */

@media (max-width: 900px) and (min-width: 761px) {
  .room-canvas { padding-block: clamp(20px, 3.5vh, 42px); }
  .exhibit-copy > p:not(.eyebrow):not(.curator-note) { margin-top: 14px; }
  .project-facts { margin-top: 11px; }
  .media-exhibit { margin-top: 20px; }
  .alcove-notes { gap: 16px; }
  .agent-card { padding: 13px 14px 14px; }
  .alcove-shelf { min-height: 122px; }
  .pet-note { padding: 14px 15px 15px; }
  .pet-note__story { line-height: 1.55; }
  .ripple-console { margin-top: 18px; }
  .ripple-console__note { margin-top: 9px; }
  .archive-exhibit { margin-top: 22px; }
  .archive-project-tab { min-height: 88px; padding: 9px 8px; }
  .workbench-gallery { margin-top: 22px; }
  .workbench-feature__media { min-height: 210px; }
}

@media (max-width: 760px) {
  .room-canvas { padding: 20px 16px 118px; }
  .exhibit-copy h2, .exhibit-copy--pet h2, .exhibit-copy--archive h2, .exhibit-copy--workbench h2 { font-size: clamp(2.95rem, 14.5vw, 4.8rem); }
  .exhibit-copy > p:not(.eyebrow):not(.curator-note) { margin-top: 18px; font-size: .64rem; line-height: 1.58; }
  .room--archive .exhibit-copy > p:not(.eyebrow):not(.curator-note), .room--workbench .exhibit-copy > p:not(.eyebrow):not(.curator-note) { font-size: .8rem; line-height: 1.55; }
  .project-facts { margin-top: 10px; gap: 6px; }
  .project-facts li { padding: 6px 8px; font-size: .5rem; }
  .media-exhibit { margin: 18px 0 0; }
  .media-exhibit figcaption { margin-top: 14px; font-size: .58rem; }
  .room-canvas--foyer { padding-bottom: 118px; }
  .foyer-copy__intro { margin-top: 16px; font-size: .66rem; line-height: 1.58; }
  .foyer-actions { margin-top: 16px; gap: 10px; }
  .guide-plinth { margin-top: 14px; }
  .alcove-notes { margin-top: 16px; gap: 14px; }
  .agent-card { padding: 12px 13px 13px; }
  .agent-card__label { margin-bottom: 5px; }
  .agent-card__body { font-size: .54rem; line-height: 1.55; }
  .alcove-shelf { min-height: 112px; padding-inline: 10px; }
  .alcove-book { width: 48px; height: calc(var(--book-rule) * 10); }
  .alcove-book.is-open .alcove-book__block, .alcove-book.is-open:hover .alcove-book__block, .alcove-book.is-open:focus-visible .alcove-book__block { transform: translate(14px, -46px) scale(1.82) rotate(-2.5deg); }
  .pet-note { margin-top: 16px; padding: 13px 14px 14px; }
  .pet-note__facts { margin-top: 9px; }
  .pet-note__summon { margin-top: 10px; padding-top: 9px; }
  .pet-specimen { margin-top: 18px; }
  .pet-sticky { margin-top: 12px; padding: 12px 13px 13px; font-size: .74rem; }
  .pet-slab { height: 48px; margin-top: -10px; }
  .ripple-console { margin-top: 16px; }
  .ripple-console__note { margin-top: 8px; font-size: .54rem; }
  .room-canvas--archive, .room-canvas--workbench { padding-bottom: 132px; }
  .curator-note { margin-top: 12px; padding: 8px 10px; font-size: .66rem; }
  .archive-exhibit { margin-top: 18px; }
  .archive-project-tabs { gap: 6px; }
  .archive-project-tab { min-height: 84px; padding: 8px 7px; }
  .archive-project-stage { margin-top: 22px; }
  .archive-project-stage__caption { padding: 12px; gap: 10px; }
  .archive-description { font-size: .8rem; }
  .workbench-gallery { margin-top: 18px; padding: 10px; gap: 10px; }
  .tool-selector { min-height: 46px; padding: 8px 7px; }
  .workbench-feature__media { min-height: 168px; }
  .workbench-feature__copy { padding: 12px; gap: 8px; }
  .workbench-feature__copy [data-tool-description] { font-size: .8rem; }
  .workbench-desk { height: 6%; }
}

@media (max-width: 430px) {
  .room-canvas { padding-inline: 14px; padding-bottom: 108px; }
  .exhibit-copy h2, .exhibit-copy--pet h2, .exhibit-copy--archive h2, .exhibit-copy--workbench h2 { font-size: clamp(2.65rem, 13.8vw, 3.8rem); }
  .alcove-book { width: 44px; height: calc(var(--book-rule) * 9); }
  .alcove-book.is-open .alcove-book__block, .alcove-book.is-open:hover .alcove-book__block, .alcove-book.is-open:focus-visible .alcove-book__block { transform: translate(12px, -40px) scale(1.68) rotate(-2.5deg); }
  .archive-project-tab { min-height: 78px; }
  .archive-project-tabs { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .archive-project-tabs::-webkit-scrollbar { display: none; }
  .tool-drawers { gap: 6px; }
}

@media (min-width: 2200px) {
  .room-canvas { width: min(100%, 2100px); padding-inline: clamp(130px, 8vw, 220px); }
  .room-canvas--foyer { grid-template-columns: minmax(560px, 1.08fr) minmax(320px, .52fr) minmax(380px, .62fr); gap: clamp(36px, 3vw, 72px); }
  .room-canvas--alcove, .room-canvas--keyscape { column-gap: clamp(56px, 4.5vw, 110px); }
  .room-canvas--pet { gap: clamp(20px, 2.2vh, 32px) clamp(48px, 4vw, 96px); }
  .room-canvas--archive, .room-canvas--workbench { gap: clamp(40px, 3.5vw, 88px); }
  .archive-exhibit { grid-template-columns: minmax(0, 1fr) 220px; }
  .workbench-gallery { grid-template-columns: 230px minmax(0, 1fr); }
}