@font-face {
      font-display: swap;
      font-family: "Anna Didone";
      font-style: normal;
      font-weight: 400;
      src: local("Bodoni 72 Book"), local("Bodoni 72");
    }

    :root {
      --paper: #fffefe;
      --ink: #16130f;
      --soft-ink: #5f5a54;
      --faint: #d8d0c7;
      --line: #c8beb3;
      --gold: #d9a514;
      --blue: #a9c5cf;
      --violet: #b7abd3;
      --red: #8e2d26;
      --olive: #85836a;
      --rust: #a25324;
      --focus: #76551c;
      --focus-halo: rgba(255, 254, 252, 0.96);
      --muted: #625a53;
      --hairline: #d6cec5;
      --shadow: 0 18px 54px rgba(42, 32, 24, 0.12);
      --serif: Georgia, "Times New Roman", serif;
      --mono: "Courier New", Courier, monospace;
    }

    * {
      box-sizing: border-box;
    }

    html {
      background: var(--paper);
      color: var(--ink);
      font-family: var(--mono);
    }

    body {
      margin: 0;
      min-height: 100vh;
      background: var(--paper);
    }

    button {
      font: inherit;
    }

    .page {
      min-height: 100vh;
      padding: 38px 40px 24px;
      position: relative;
    }

    .identity,
    .directions {
      position: fixed;
      top: 40px;
      z-index: 5;
      font-family: var(--mono);
      color: var(--ink);
      letter-spacing: 0;
    }

    .identity {
      left: 40px;
    }

    .identity-name {
      align-items: center;
      background: transparent;
      border: 0;
      color: inherit;
      cursor: pointer;
      display: flex;
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 9px;
      padding: 0 0 3px;
      position: relative;
      text-align: left;
    }

    .identity-name::after {
      background: currentColor;
      bottom: 0;
      content: "";
      height: 1px;
      left: 0;
      position: absolute;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 180ms ease;
      width: 100%;
    }

    .identity-name:hover::after,
    .identity-name:focus-visible::after {
      transform: scaleX(1);
    }

    .identity span {
      display: block;
      color: var(--soft-ink);
      font-size: 14px;
      line-height: 1.45;
    }

    .directions {
      right: 40px;
      font-size: 13px;
      font-style: italic;
      color: #2f2b27;
    }

    .gallery {
      align-items: center;
      display: grid;
      gap: clamp(22px, 3vw, 52px);
      grid-template-columns: minmax(260px, 0.64fr) minmax(520px, 1.35fr) minmax(260px, 0.64fr);
      min-height: calc(100vh - 180px);
      padding-top: 72px;
    }

    .hand-panel {
      align-self: stretch;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      min-height: 650px;
      position: relative;
    }

    .hand-study-art {
      aspect-ratio: 405 / 578;
      margin-left: -56px;
      max-width: 460px;
      position: relative;
      pointer-events: none;
      -webkit-mask-image: linear-gradient(to right, #000 0 72%, rgba(0, 0, 0, 0.9) 84%, transparent 100%);
      mask-image: linear-gradient(to right, #000 0 72%, rgba(0, 0, 0, 0.9) 84%, transparent 100%);
      width: calc(100% + 88px);
    }

    .hand-study-art img {
      display: block;
      height: 100%;
      inset: 0;
      margin: 0;
      max-width: none;
      object-fit: contain;
      position: absolute;
      width: 100%;
    }

    .hand-study-base {
      opacity: .42;
      position: relative;
    }

    .hand-study-motion {
      opacity: .27;
      will-change: transform;
    }

    .hand-study-motion--upper {
      animation: hand-study-upper 12s cubic-bezier(.45, 0, .55, 1) infinite;
      clip-path: polygon(0 0, 100% 0, 100% 30%, 0 33%);
      transform-origin: 15% 19%;
    }

    .hand-study-motion--middle {
      animation: hand-study-middle 14s cubic-bezier(.45, 0, .55, 1) -4s infinite;
      clip-path: polygon(0 24%, 100% 20%, 100% 51%, 0 54%);
      transform-origin: 13% 39%;
    }

    .hand-study-motion--lower {
      animation: hand-study-lower 16s cubic-bezier(.45, 0, .55, 1) -9s infinite;
      clip-path: polygon(0 46%, 100% 43%, 100% 75%, 0 78%);
      transform-origin: 17% 58%;
    }

    .hand-study-motion--foot {
      animation: hand-study-foot 18s cubic-bezier(.45, 0, .55, 1) -6s infinite;
      clip-path: polygon(0 69%, 100% 66%, 100% 100%, 0 100%);
      transform-origin: 16% 85%;
    }

    @keyframes hand-study-upper {
      0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
      48% { transform: translate3d(6px, -3px, 0) rotate(.42deg); }
      72% { transform: translate3d(3px, -1px, 0) rotate(.16deg); }
    }

    @keyframes hand-study-middle {
      0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
      44% { transform: translate3d(5px, 3px, 0) rotate(-.36deg); }
      76% { transform: translate3d(3px, 1px, 0) rotate(-.14deg); }
    }

    @keyframes hand-study-lower {
      0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
      52% { transform: translate3d(-4px, 5px, 0) rotate(.34deg); }
      78% { transform: translate3d(-1px, 2px, 0) rotate(.12deg); }
    }

    @keyframes hand-study-foot {
      0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
      46% { transform: translate3d(4px, -6px, 0) rotate(-.48deg); }
      74% { transform: translate3d(2px, -3px, 0) rotate(-.18deg); }
    }

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

    .caption {
      color: #26211c;
      font-family: Baskerville, "Iowan Old Style", Georgia, "Times New Roman", serif;
      font-size: 17px;
      font-style: italic;
      line-height: 1.3;
      margin: clamp(30px, 4vh, 48px) 0 0;
      max-width: 405px;
      position: static;
      text-transform: lowercase;
    }

    .map-wrap {
      --astrolabe-x: 0px;
      --astrolabe-y: 0px;
      aspect-ratio: 800 / 719;
      isolation: isolate;
      margin: 0 auto;
      max-width: 800px;
      min-width: 0;
      position: relative;
      width: 100%;
    }

    .vitruvian-map {
      display: block;
      filter: contrast(1.01);
      height: 100%;
      mix-blend-mode: multiply;
      -webkit-mask-image: radial-gradient(circle at 50% 51%, #000 0 68%, rgba(0, 0, 0, 0.86) 78%, transparent 98%);
      mask-image: radial-gradient(circle at 50% 51%, #000 0 68%, rgba(0, 0, 0, 0.86) 78%, transparent 98%);
      object-fit: contain;
      opacity: 0.96;
      user-select: none;
      width: 100%;
      z-index: 1;
    }

    .living-astrolabe {
      height: 100%;
      inset: 0;
      overflow: visible;
      pointer-events: none;
      position: absolute;
      transform: translate3d(var(--astrolabe-x), var(--astrolabe-y), 0);
      transition: transform 700ms cubic-bezier(.2, .7, .2, 1);
      width: 100%;
      z-index: 2;
    }

    .astrolabe-axis,
    .astrolabe-heart-path {
      fill: none;
      vector-effect: non-scaling-stroke;
    }

    .astrolabe-axis {
      stroke: rgba(111, 96, 80, .15);
      stroke-dasharray: 2.5 7;
      stroke-width: .68;
    }

    .astrolabe-pointer {
      fill: none;
      stroke: rgba(161, 119, 38, .46);
      stroke-linecap: round;
      stroke-width: .86;
      vector-effect: non-scaling-stroke;
    }

    .astrolabe-pointer-tip {
      fill: rgba(177, 130, 36, .72);
      stroke: rgba(255, 253, 247, .94);
      stroke-width: .8;
      vector-effect: non-scaling-stroke;
    }

    .astrolabe-comet {
      fill: rgba(184, 137, 41, .9);
      filter: drop-shadow(0 0 4px rgba(184, 137, 41, .35));
      stroke: rgba(255, 253, 247, .94);
      stroke-width: .8;
      vector-effect: non-scaling-stroke;
    }

    .astrolabe-ring--outer {
      animation: astrolabe-turn 38s linear infinite;
      transform-box: view-box;
      transform-origin: 398px 366px;
    }

    .astrolabe-ring--middle {
      animation: astrolabe-turn-reverse 52s linear infinite;
      transform-box: view-box;
      transform-origin: 398px 366px;
    }

    .astrolabe-ring--inner {
      animation: astrolabe-turn 29s linear infinite;
      transform-box: view-box;
      transform-origin: 398px 366px;
    }

    .astrolabe-heart-path {
      animation: astrolabe-heart-travel 5.8s ease-out infinite;
      stroke: rgba(184, 137, 41, .5);
      stroke-dasharray: 1 34;
      stroke-linecap: round;
      stroke-width: 1.5;
    }

    .astrolabe-heart-core {
      animation: astrolabe-core 4.2s ease-in-out infinite;
      fill: rgba(188, 140, 42, .18);
      stroke: rgba(188, 140, 42, .42);
      stroke-width: .7;
      transform-box: fill-box;
      transform-origin: center;
    }

    .map-wrap.is-astrolabe-awake .astrolabe-axis { stroke: rgba(145, 110, 43, .23); }
    .map-wrap.is-astrolabe-awake .astrolabe-pointer { stroke: rgba(161, 119, 38, .52); }

    @keyframes astrolabe-turn {
      to { transform: rotate(360deg); }
    }

    @keyframes astrolabe-turn-reverse {
      to { transform: rotate(-360deg); }
    }

    @keyframes astrolabe-heart-travel {
      0% { opacity: 0; stroke-dashoffset: 42; }
      16% { opacity: .65; }
      72% { opacity: .18; }
      100% { opacity: 0; stroke-dashoffset: -72; }
    }

    @keyframes astrolabe-core {
      0%, 100% { opacity: .32; transform: scale(.76); }
      50% { opacity: .86; transform: scale(1.18); }
    }

    .line-layer {
      inset: 0;
      pointer-events: none;
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 3;
    }

    .active-line {
      opacity: 0;
      stroke: rgba(201, 152, 48, 0.42);
      stroke-width: 1.4;
      stroke-dasharray: 5 6;
      transition: all 240ms ease;
    }

    .active-orbit {
      fill: rgba(217, 165, 20, 0.16);
      opacity: 0;
      stroke: rgba(217, 165, 20, 0.5);
      stroke-width: 1;
      transition: all 240ms ease;
    }

    .line-layer.is-awake .active-line,
    .line-layer.is-awake .active-orbit {
      opacity: 1;
    }

    .hotspot {
      --dot: #222;
      align-items: center;
      background: transparent;
      border: 0;
      border-radius: 999px;
      cursor: pointer;
      display: flex;
      height: 34px;
      justify-content: center;
      left: calc(var(--x) * 1%);
      padding: 0;
      position: absolute;
      top: calc(var(--y) * 1%);
      transform: translate(-50%, -50%);
      width: 34px;
      z-index: 5;
    }

    .hotspot::before {
      background: var(--dot);
      border-radius: 999px;
      box-shadow: 0 0 0 0 rgba(217, 165, 20, 0);
      content: "";
      display: block;
      height: 9px;
      transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
      width: 9px;
    }

    .hotspot:hover::before,
    .hotspot:focus-visible::before,
    .hotspot.is-active::before {
      background: var(--gold);
      box-shadow: 0 0 0 9px rgba(217, 165, 20, 0.12);
      transform: scale(1.22);
    }

    .hotspot span {
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      height: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
      width: 1px;
    }

    .center-hotspot {
      align-items: center;
      background: transparent;
      border: 0;
      border-radius: 999px;
      cursor: pointer;
      display: flex;
      height: 42px;
      justify-content: center;
      left: 49.75%;
      padding: 0;
      position: absolute;
      top: 50.9%;
      transform: translate(-50%, -50%);
      width: 42px;
      z-index: 6;
    }

    .center-hotspot::before {
      background: var(--gold);
      border-radius: 999px;
      box-shadow: 0 0 0 0 rgba(217, 165, 20, 0);
      content: "";
      display: block;
      height: 11px;
      opacity: 0;
      transform: scale(0.74);
      transition: opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease;
      width: 11px;
    }

    .center-hotspot:hover::before,
    .center-hotspot:focus-visible::before {
      box-shadow: 0 0 0 10px rgba(217, 165, 20, 0.12);
      opacity: 1;
      transform: scale(1);
    }

    .center-hotspot span {
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      height: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
      width: 1px;
    }

    .label-hotspot {
      background: transparent;
      border: 0;
      border-radius: 12px;
      cursor: pointer;
      left: var(--left);
      padding: 0;
      position: absolute;
      top: var(--top);
      transform: translate(-50%, -50%);
      transition: box-shadow 180ms ease, background 180ms ease;
      width: var(--w, 150px);
      height: var(--h, 58px);
      z-index: 7;
    }

    .label-hotspot:hover,
    .label-hotspot:focus-visible {
      background: rgba(255, 254, 251, 0.22);
      box-shadow: 0 0 0 1px rgba(217, 165, 20, 0.18), 0 14px 34px rgba(88, 69, 43, 0.06);
      outline: none;
    }

    .label-hotspot span {
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      height: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
      width: 1px;
    }

    .hotspot[data-entry="atlas"],
    .hotspot[data-entry="archive"],
    .hotspot[data-entry="signals"],
    .hotspot[data-entry="experiments"] {
      --dot: var(--blue);
    }

    .hotspot[data-entry="values"] {
      --dot: var(--violet);
    }

    .hotspot[data-entry="seed"] {
      --dot: var(--red);
    }

    .hotspot[data-entry="portrait"] {
      --dot: #9b762c;
    }

    .portrait-heart-hotspot {
      height: 42px;
      width: 42px;
      z-index: 4;
    }

    .portrait-heart-hotspot::before {
      box-shadow: 0 0 0 5px rgba(155, 118, 44, .08);
      height: 8px;
      position: relative;
      width: 8px;
      z-index: 2;
    }

    .portrait-heart-light {
      animation: portrait-heart-breathe 4.2s ease-in-out infinite;
      border: 1px solid rgba(178, 136, 51, .32);
      border-radius: 50%;
      box-shadow: 0 0 15px rgba(190, 143, 42, .16), inset 0 0 10px rgba(190, 143, 42, .08);
      height: 28px;
      opacity: .68;
      pointer-events: none;
      position: absolute;
      width: 28px;
    }

    .portrait-heart-hotspot:hover .portrait-heart-light,
    .portrait-heart-hotspot:focus-visible .portrait-heart-light,
    .portrait-heart-hotspot.is-active .portrait-heart-light {
      animation-play-state: paused;
      border-color: rgba(190, 143, 42, .58);
      box-shadow: 0 0 22px rgba(190, 143, 42, .28), inset 0 0 12px rgba(190, 143, 42, .12);
      opacity: 1;
      transform: scale(1.12);
    }

    @keyframes portrait-heart-breathe {
      0%, 100% { opacity: .48; transform: scale(.86); }
      50% { opacity: .82; transform: scale(1.08); }
    }

    .portrait-heart-hotspot::after {
      background: rgba(253, 252, 249, .88);
      color: #6c5a38;
      content: "portrait";
      font-family: var(--mono);
      font-size: 8px;
      left: 50%;
      opacity: 0;
      padding: 4px 6px;
      pointer-events: none;
      position: absolute;
      top: -4px;
      transform: translate(-50%, -100%);
      transition: opacity 160ms ease, transform 160ms ease;
      white-space: nowrap;
    }

    .portrait-heart-hotspot:hover::after,
    .portrait-heart-hotspot:focus-visible::after,
    .portrait-heart-hotspot.is-active::after {
      opacity: 1;
      transform: translate(-50%, calc(-100% - 3px));
    }

    @media (prefers-reduced-motion: reduce) {
      .portrait-heart-light { animation: none; opacity: .68; }
      .astrolabe-ring--outer,
      .astrolabe-ring--middle,
      .astrolabe-ring--inner,
      .astrolabe-heart-path,
      .astrolabe-heart-core { animation: none; }
      .astrolabe-comet { display: none; }
      .living-astrolabe { transform: none; transition: none; }
    }

    .preview-card {
      align-self: center;
      background: rgba(255, 254, 253, 0.76);
      border: 1px solid rgba(201, 188, 172, 0.58);
      border-radius: 6px;
      box-shadow: 0 12px 34px rgba(42, 32, 24, 0.075);
      justify-self: center;
      max-width: 286px;
      padding: 18px 15px 15px;
      transition: transform 220ms ease, border-color 220ms ease;
      width: 100%;
    }

    .preview-card.is-awake {
      border-color: rgba(188, 151, 94, 0.48);
      transform: translateY(-2px);
    }

    .preview-card.is-dialogue-preview {
      background: rgba(255, 255, 255, .74);
      border-color: rgba(150, 124, 92, .27);
      box-shadow: 0 18px 52px rgba(45, 35, 27, .055);
      max-width: 318px;
      padding: 19px 17px 15px;
    }

    .preview-card.is-dialogue-preview.is-awake {
      border-color: rgba(159, 124, 76, .36);
    }

    .preview-head {
      align-items: start;
      display: flex;
      gap: 12px;
      justify-content: space-between;
      margin-bottom: 11px;
    }

    .preview-title {
      font-family: var(--serif);
      font-size: 20px;
      font-weight: 400;
      line-height: 1.1;
      margin: 0;
    }

    .preview-close {
      background: transparent;
      border: 0;
      color: #8a8178;
      cursor: pointer;
      font-size: 15px;
      line-height: 1;
      padding: 0;
    }

    .preview-kicker,
    .preview-note {
      color: #302a25;
      font-size: 10.5px;
      line-height: 1.4;
      margin: 0;
    }

    .preview-note {
      color: #6c6259;
      display: -webkit-box;
      margin-top: 5px;
      min-height: 28px;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .preview-card.is-dialogue-preview .preview-note {
      color: #514a44;
      display: block;
      margin-top: 7px;
      min-height: 0;
      overflow: visible;
      -webkit-line-clamp: unset;
    }

    .preview-art {
      aspect-ratio: 278 / 290;
      background: #fff;
      border: 0;
      border-radius: 4px;
      cursor: crosshair;
      display: block;
      margin: 14px 0 13px;
      overflow: hidden;
      padding: 0;
      position: relative;
      width: 100%;
    }

    .preview-art img {
      display: block;
      height: 100%;
      object-fit: cover;
      object-position: 50% 45%;
      transition: filter 220ms ease, transform 420ms cubic-bezier(.2,.8,.2,1);
      width: 100%;
    }

    .preview-geometry[hidden],
    .preview-phi[hidden],
    .preview-reticle[hidden],
    .studio-preview-geometry[hidden] {
      display: none;
    }

    .preview-art:hover img,
    .preview-art:focus-visible img {
      filter: saturate(.92) contrast(1.02);
      transform: scale(1.035);
    }

    .preview-art.is-portrait-preview img {
      object-fit: cover;
      object-position: 50% 39%;
      filter: saturate(.72) contrast(.94) brightness(1.08);
      transform: scale(1.018);
    }

    .preview-art.is-portrait-preview:hover img,
    .preview-art.is-portrait-preview:focus-visible img {
      filter: saturate(.9) contrast(.98) brightness(1.035);
      transform: scale(1.05);
    }

    .preview-art.is-dialogue-preview {
      aspect-ratio: 1.16 / 1;
      background: #fff;
      border-radius: 0;
      cursor: pointer;
      margin: 16px 0 10px;
      overflow: hidden;
    }

    .preview-art.is-dialogue-preview img {
      filter: grayscale(.88) sepia(.04) contrast(1.28) brightness(1.18);
      height: 100%;
      mix-blend-mode: normal;
      object-fit: cover;
      object-position: 50% 45%;
      opacity: .9;
      transform: scale(1.025);
    }

    .preview-art.is-dialogue-preview:hover img,
    .preview-art.is-dialogue-preview:focus-visible img {
      filter: grayscale(.8) sepia(.04) contrast(1.3) brightness(1.16);
      opacity: .96;
      transform: scale(1.045);
    }

    .studio-preview-geometry {
      height: 100%;
      inset: 0;
      overflow: visible;
      pointer-events: none;
      position: absolute;
      width: 100%;
      z-index: 3;
    }

    .studio-preview-guide {
      fill: none;
      opacity: .34;
      stroke: #6f665c;
      stroke-dasharray: 1.2 4.5;
      stroke-width: .38;
      vector-effect: non-scaling-stroke;
    }

    .studio-preview-sightline {
      fill: none;
      stroke: #c66c28;
      stroke-linecap: round;
      stroke-width: 1.15;
      transition: d 260ms ease, opacity 180ms ease;
      vector-effect: non-scaling-stroke;
    }

    .studio-preview-signal {
      fill: #c66c28;
      filter: drop-shadow(0 0 3px rgba(198,108,40,.32));
      transition: cx 260ms ease, cy 260ms ease;
    }

    .preview-studio-controls {
      display: none;
    }

    .preview-card.is-dialogue-preview .swatches {
      display: none;
    }

    .preview-card.is-dialogue-preview .preview-studio-controls {
      display: block;
    }

    .preview-studio-modes {
      border-bottom: 1px solid rgba(141, 129, 118, .22);
      border-top: 1px solid rgba(141, 129, 118, .22);
      display: none;
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .preview-card[data-preview-entry="studio"] .preview-studio-modes {
      display: grid;
    }

    .preview-card[data-preview-entry="proportion"] .swatches {
      display: flex;
    }

    .preview-card:not([data-preview-entry="studio"]) .preview-studio-footer {
      border-top: 1px solid rgba(141, 129, 118, .22);
    }

    .preview-studio-mode {
      background: transparent;
      border: 0;
      color: #665e57;
      cursor: pointer;
      font-family: var(--mono);
      font-size: 12px;
      min-height: 30px;
      padding: 0 3px;
      position: relative;
    }

    .preview-studio-mode::after {
      background: #bd6425;
      bottom: -1px;
      content: "";
      height: 1px;
      left: 50%;
      position: absolute;
      transform: translateX(-50%) scaleX(0);
      transition: transform 180ms ease;
      width: 18px;
    }

    .preview-studio-mode:hover,
    .preview-studio-mode:focus-visible,
    .preview-studio-mode.is-active {
      color: #302923;
    }

    .preview-studio-mode.is-active::after {
      transform: translateX(-50%) scaleX(1);
    }

    .preview-studio-footer {
      align-items: end;
      display: grid;
      gap: 12px;
      grid-template-columns: minmax(0, 1fr) auto;
      padding-top: 10px;
    }

    .preview-studio-reading {
      color: #6b625b;
      font-family: var(--mono);
      font-size: 11px;
      line-height: 1.45;
      margin: 0;
      min-height: 23px;
    }

    .preview-enter-studio {
      background: transparent;
      border: 0;
      color: #4b423a;
      cursor: pointer;
      font-family: var(--mono);
      font-size: 12px;
      padding: 0 0 2px;
      white-space: nowrap;
    }

    .preview-enter-studio span {
      color: #8d491b;
      display: inline-block;
      margin-left: 3px;
      transition: transform 180ms ease;
    }

    .preview-enter-studio:hover span,
    .preview-enter-studio:focus-visible span {
      transform: translateX(3px);
    }

    .preview-geometry {
      height: 100%;
      inset: 0;
      pointer-events: none;
      position: absolute;
      width: 100%;
      z-index: 2;
    }

    .preview-geometry line,
    .preview-geometry circle,
    .preview-geometry path {
      fill: none;
      stroke: rgba(255, 255, 255, 0.82);
      stroke-width: 1;
      vector-effect: non-scaling-stroke;
    }

    .preview-geometry .preview-gold {
      stroke: rgba(191, 139, 35, .82);
    }

    .preview-reticle {
      border: 1px solid rgba(255,255,255,.9);
      border-radius: 50%;
      height: 34px;
      left: 50%;
      opacity: 0;
      pointer-events: none;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      transition: opacity 120ms ease;
      width: 34px;
      z-index: 4;
    }

    .preview-reticle::before,
    .preview-reticle::after {
      background: rgba(255,255,255,.9);
      content: "";
      left: 50%;
      position: absolute;
      top: 50%;
    }

    .preview-reticle::before {
      height: 1px;
      transform: translate(-50%, -50%);
      width: 50px;
    }

    .preview-reticle::after {
      height: 50px;
      transform: translate(-50%, -50%);
      width: 1px;
    }

    .preview-art:hover .preview-reticle,
    .preview-art:focus-visible .preview-reticle {
      opacity: 1;
    }

    .preview-phi {
      background: rgba(255,255,255,.88);
      color: #544a42;
      font-family: var(--mono);
      font-size: 8.5px;
      padding: 5px 8px;
      pointer-events: none;
      position: absolute;
      right: 9px;
      top: 9px;
      z-index: 4;
    }

    .swatches {
      display: flex;
      gap: 16px;
      padding-left: 4px;
    }

    .swatch {
      background: var(--swatch);
      border: 1px solid transparent;
      border-radius: 999px;
      cursor: pointer;
      height: 22px;
      padding: 0;
      position: relative;
      width: 22px;
    }

    .swatch.is-active,
    .swatch:hover,
    .swatch:focus-visible {
      border-color: #fff;
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--swatch), #18130d 48%);
    }

    .shelf {
      border-top: 1px solid var(--line);
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(4, minmax(210px, 1fr));
      margin-top: 4px;
      padding-top: 16px;
    }

    .artifact {
      align-items: center;
      background: transparent;
      border: 0;
      color: var(--ink);
      cursor: pointer;
      display: grid;
      gap: 14px;
      grid-template-columns: 92px minmax(0, 1fr);
      min-height: 94px;
      padding: 0 18px;
      position: relative;
      text-align: left;
    }

    .artifact + .artifact::before {
      border-left: 1px dotted #d7d0c9;
      content: "";
      height: 45px;
      left: 0;
      position: absolute;
      top: 24px;
    }

    .artifact-object {
      align-items: center;
      display: flex;
      filter: drop-shadow(0 11px 9px rgba(51, 37, 28, 0.12));
      height: 86px;
      justify-content: center;
      transition: transform 180ms ease, filter 180ms ease;
      width: 92px;
    }

    .artifact:hover .artifact-object,
    .artifact:focus-visible .artifact-object,
    .artifact.is-active .artifact-object {
      filter: drop-shadow(0 14px 12px rgba(51, 37, 28, 0.16));
      transform: translateY(-3px);
    }

    .artifact-object img {
      display: block;
      max-height: 86px;
      max-width: 92px;
      object-fit: contain;
    }

    .artifact-object .machine {
      border-radius: 0;
      clip-path: none;
      height: 86px;
      max-height: none;
      max-width: none;
      mix-blend-mode: normal;
      object-fit: contain;
      object-position: center;
      width: 92px;
    }

    .artifact[data-entry="machine"] .artifact-object {
      border-radius: 0;
      filter: none;
      overflow: visible;
    }

    .artifact[data-entry="machine"]:hover .artifact-object,
    .artifact[data-entry="machine"]:focus-visible .artifact-object,
    .artifact[data-entry="machine"].is-active .artifact-object {
      filter: none;
    }

    .artifact-object .feather {
      max-height: 84px;
      max-width: 62px;
    }

    .artifact-object .shell {
      max-height: 82px;
      max-width: 82px;
    }

    .artifact-object .sacred {
      filter: drop-shadow(0 8px 8px rgba(62, 43, 18, 0.18));
      height: 76px;
      object-fit: contain;
      width: 76px;
    }

    .artifact-text {
      color: #3a3630;
      font-family: var(--mono);
      font-size: 11px;
      line-height: 2;
      min-width: 0;
      transition: color 180ms ease;
    }

    .artifact:hover .artifact-text,
    .artifact:focus-visible .artifact-text,
    .artifact.is-active .artifact-text {
      color: #18140f;
    }

    .artifact-text span {
      display: block;
    }

    body.room-open {
      overflow: hidden;
    }

    body.attention-open { overflow: hidden; }
    body.attention-open .attention-toggle { opacity: 0; pointer-events: none; }

    .room {
      --room-accent: #b58b2c;
      --room-origin-x: 50vw;
      --room-origin-y: 50vh;
      background: #fff;
      clip-path: circle(0 at var(--room-origin-x) var(--room-origin-y));
      inset: 0;
      opacity: 0;
      overflow: auto;
      pointer-events: none;
      position: fixed;
      transform: none;
      transition: clip-path 520ms cubic-bezier(.2,.78,.2,1), opacity 220ms ease, visibility 0s linear 520ms;
      visibility: hidden;
      z-index: 20;
    }

    .room.is-open {
      clip-path: circle(160vmax at var(--room-origin-x) var(--room-origin-y));
      opacity: 1;
      pointer-events: auto;
      transition-delay: 0s;
      visibility: visible;
    }

    .room-panel {
      background: #fff;
      display: grid;
      gap: clamp(18px, 2.2vw, 34px);
      grid-template-rows: auto minmax(0, 1fr) auto;
      min-height: 100dvh;
      padding: clamp(22px, 3vw, 42px);
      width: 100%;
    }

    .room-header {
      align-items: start;
      display: flex;
      justify-content: space-between;
    }

    .room-heading {
      display: grid;
      gap: 7px;
    }

    .room-kicker {
      color: var(--room-accent);
      font-family: var(--mono);
      font-size: 11px;
      margin: 0;
      text-transform: lowercase;
    }

    .room-title {
      font-family: Baskerville, "Iowan Old Style", Georgia, "Times New Roman", serif;
      font-size: clamp(34px, 4.4vw, 64px);
      font-weight: 400;
      letter-spacing: 0;
      line-height: 0.95;
      margin: 0;
    }

    .return {
      align-items: center;
      background: transparent;
      border: 0;
      color: #70675f;
      cursor: pointer;
      display: inline-flex;
      font-family: var(--serif);
      font-size: 31px;
      height: 44px;
      justify-content: center;
      line-height: 1;
      padding: 0;
      transition: color 160ms ease, transform 160ms ease;
      width: 44px;
    }

    .return:hover,
    .return:focus-visible {
      color: var(--ink);
      transform: rotate(4deg);
    }

    .return:focus-visible {
      outline: 1px solid var(--room-accent);
      outline-offset: 2px;
    }

    .room-main {
      display: grid;
      gap: clamp(24px, 4vw, 72px);
      grid-template-columns: minmax(210px, 0.36fr) minmax(0, 1.64fr);
      min-height: 0;
    }

    .room-intro {
      align-content: start;
      border-top: 1px solid #d8d0c7;
      display: grid;
      gap: 24px;
      padding-top: 17px;
    }

    .room-copy {
      color: #302a25;
      font-family: Baskerville, "Iowan Old Style", Georgia, "Times New Roman", serif;
      font-size: clamp(17px, 1.55vw, 22px);
      line-height: 1.48;
      margin: 0;
      max-width: 340px;
    }

    .room-reflection {
      color: #6b625a;
      font-family: var(--mono);
      font-size: 11px;
      line-height: 1.65;
      margin: 0;
      max-width: 310px;
      min-height: 54px;
      transition: color 180ms ease;
    }

    .room-reflection.is-awake {
      color: var(--room-accent);
    }

    .room-stage {
      background: #fff;
      border-bottom: 1px solid #ded7cf;
      border-top: 1px solid #ded7cf;
      min-height: clamp(420px, 59vh, 680px);
      overflow: hidden;
      position: relative;
      touch-action: none;
    }

    .room-stage::before,
    .room-stage::after {
      background: #eee9e3;
      content: "";
      pointer-events: none;
      position: absolute;
      z-index: 0;
    }

    .room-stage::before {
      height: 1px;
      left: 0;
      right: 0;
      top: 50%;
    }

    .room-stage::after {
      bottom: 0;
      left: 50%;
      top: 0;
      width: 1px;
    }

    .room-list {
      color: var(--soft-ink);
      display: grid;
      font-family: var(--mono);
      font-size: 11px;
      gap: 18px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      list-style: none;
      margin: 0 0 0 calc(36% + clamp(24px, 4vw, 72px));
      padding: 0;
    }

    .room-list li {
      border-top: 1px solid rgba(200, 190, 179, 0.72);
      min-height: 68px;
      padding-top: 10px;
    }

    .room-list strong {
      color: var(--ink);
      display: block;
      font-weight: 500;
      margin-bottom: 6px;
    }

    .room-list span {
      color: var(--soft-ink);
      display: block;
      line-height: 1.45;
    }

    .room[data-room="portrait"] .room-title {
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: clamp(23px, 2vw, 28px);
      font-weight: 400;
      line-height: 1.12;
    }

    .room[data-room="portrait"] .room-stage {
      background: #fdfcf9;
      border: 0;
      box-shadow: none;
      min-height: 680px;
      overflow: visible;
      touch-action: pan-y;
    }

    .room[data-room="portrait"] .room-panel { gap: 18px; }

    .room[data-room="portrait"] .room-main { display: block; }

    .room[data-room="portrait"] .room-intro,
    .room[data-room="portrait"] .room-list {
      display: none;
    }

    .room[data-room="portrait"] .room-copy {
      color: #48413b;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 15px;
      line-height: 1.58;
      max-width: 300px;
    }

    .room[data-room="portrait"] .room-kicker,
    .room[data-room="portrait"] .room-reflection {
      font-family: var(--mono);
      font-size: 10px;
      line-height: 1.45;
    }

    .room[data-room="portrait"] .room-kicker { font-style: normal; }

    .room[data-room="portrait"] .room-stage::before,
    .room[data-room="portrait"] .room-stage::after {
      display: none;
    }

    .room[data-room="portrait"] .room-reflection:empty { display: none; }

    .portrait-study {
      color: #29241f;
      display: grid;
      gap: clamp(24px, 3.4vw, 48px);
      min-height: 100%;
      padding: clamp(20px, 3.2vw, 44px);
    }

    .portrait-opening {
      align-items: end;
      display: grid;
      gap: 22px;
      grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr);
    }

    .portrait-opening h3 {
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: clamp(34px, 3.6vw, 58px);
      font-weight: 400;
      line-height: .98;
      margin: 0;
      max-width: 860px;
    }

    .portrait-opening p {
      color: #655c54;
      font-family: var(--mono);
      font-size: 10px;
      line-height: 1.65;
      margin: 0;
      max-width: 330px;
    }

    .portrait-lenses {
      border-bottom: 1px solid #d9d1c8;
      border-top: 1px solid #d9d1c8;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .portrait-lens {
      background: transparent;
      border: 0;
      border-left: 1px solid #e2dbd4;
      color: #766d65;
      cursor: pointer;
      display: grid;
      gap: 7px;
      min-height: 76px;
      padding: 12px 14px;
      position: relative;
      text-align: left;
    }

    .portrait-lens:first-child { border-left: 0; }

    .portrait-lens::after {
      background: var(--room-accent);
      bottom: -1px;
      content: "";
      height: 1px;
      left: 14px;
      position: absolute;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 180ms ease;
      width: calc(100% - 28px);
    }

    .portrait-lens:hover::after,
    .portrait-lens:focus-visible::after,
    .portrait-lens.is-active::after { transform: scaleX(1); }

    .portrait-lens.is-active { color: #201c18; }

    .portrait-lens-index {
      color: #9a8f83;
      font-family: var(--mono);
      font-size: 8px;
    }

    .portrait-lens-name {
      font-family: Baskerville, "Iowan Old Style", Georgia, serif;
      font-size: 15px;
    }

    .portrait-hero {
      align-items: start;
      display: grid;
      gap: clamp(28px, 4vw, 64px);
      grid-template-columns: minmax(410px, 1.3fr) minmax(280px, .7fr);
    }

    .portrait-figure {
      display: grid;
      gap: 10px;
      margin: 0;
      min-width: 0;
    }

    .portrait-image-shell {
      --portrait-x: 14%;
      aspect-ratio: 3 / 2;
      background: #f7f5ef;
      overflow: hidden;
      position: relative;
    }

    .portrait-image {
      display: block;
      filter: saturate(.84) contrast(.98) brightness(1.015);
      height: 100%;
      object-fit: cover;
      object-position: center;
      transition: filter 260ms ease, object-position 420ms ease;
      width: 100%;
    }

    .portrait-marker {
      align-items: center;
      background: rgba(255,255,255,.86);
      border: 1px solid rgba(78,68,59,.46);
      border-radius: 50%;
      color: #403831;
      cursor: pointer;
      display: inline-flex;
      font-family: var(--mono);
      font-size: 8px;
      height: 27px;
      justify-content: center;
      left: var(--marker-x);
      padding: 0;
      position: absolute;
      top: var(--marker-y);
      transform: translate(-50%, -50%);
      transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
      width: 27px;
    }

    .portrait-marker::after {
      border: 1px solid transparent;
      border-radius: 50%;
      content: "";
      inset: -6px;
      position: absolute;
      transition: border-color 180ms ease;
    }

    .portrait-marker:hover,
    .portrait-marker:focus-visible,
    .portrait-marker.is-active {
      background: #fff;
      border-color: var(--room-accent);
      color: #1f1a16;
      transform: translate(-50%, -50%) scale(1.06);
    }

    .portrait-marker.is-active::after { border-color: color-mix(in srgb, var(--room-accent) 58%, transparent); }

    .portrait-caption {
      color: #776e66;
      display: flex;
      font-family: var(--mono);
      font-size: 8px;
      gap: 18px;
      justify-content: space-between;
      line-height: 1.5;
    }

    .portrait-caption strong {
      color: #322c27;
      font-weight: 400;
    }

    .portrait-reading {
      align-content: start;
      border-top: 1px solid #d9d1c8;
      display: grid;
      gap: 18px;
      padding-top: 14px;
    }

    .portrait-reading-label,
    .portrait-belief-label,
    .portrait-fact-label,
    .portrait-principle-label {
      color: var(--room-accent);
      font-family: var(--mono);
      font-size: 8px;
      text-transform: lowercase;
    }

    .portrait-reading h4 {
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: clamp(30px, 3vw, 46px);
      font-weight: 400;
      line-height: 1.02;
      margin: 0;
    }

    .portrait-reading-copy {
      color: #544b44;
      font-family: Baskerville, "Iowan Old Style", Georgia, serif;
      font-size: 16px;
      line-height: 1.58;
      margin: 0;
    }

    .portrait-belief {
      border-left: 1px solid var(--room-accent);
      display: grid;
      gap: 8px;
      margin-top: 4px;
      padding: 3px 0 3px 14px;
    }

    .portrait-belief p {
      color: #3f3731;
      font-family: Baskerville, "Iowan Old Style", Georgia, serif;
      font-size: 16px;
      font-style: italic;
      line-height: 1.5;
      margin: 0;
    }

    .portrait-proof {
      border-bottom: 1px solid #ddd6cf;
      border-top: 1px solid #ddd6cf;
      display: grid;
      gap: 6px;
      padding: 12px 0;
    }

    .portrait-proof strong {
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 400;
      line-height: 1.5;
    }

    .portrait-source {
      color: #3d3731;
      display: inline-flex;
      font-family: var(--mono);
      font-size: 9px;
      text-decoration-color: var(--room-accent);
      text-underline-offset: 4px;
      width: fit-content;
    }

    .portrait-source[hidden] { display: none; }

    .portrait-facts {
      border-bottom: 1px solid #d9d1c8;
      border-top: 1px solid #d9d1c8;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .portrait-fact {
      border-left: 1px solid #e2dbd4;
      display: grid;
      gap: 7px;
      min-height: 92px;
      padding: 13px 15px;
    }

    .portrait-fact:first-child { border-left: 0; }

    .portrait-fact strong,
    .portrait-fact a {
      color: #322c27;
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 400;
      line-height: 1.5;
    }

    .portrait-fact a {
      text-decoration-color: var(--room-accent);
      text-underline-offset: 4px;
    }

    .portrait-principle {
      align-items: start;
      display: grid;
      gap: 20px;
      grid-template-columns: minmax(160px, .35fr) minmax(0, 1.65fr);
    }

    .portrait-principle p {
      color: #403831;
      font-family: Baskerville, "Iowan Old Style", Georgia, serif;
      font-size: clamp(18px, 1.8vw, 25px);
      line-height: 1.45;
      margin: 0;
      max-width: 900px;
    }

    @media (max-width: 960px) {
      .portrait-opening,
      .portrait-hero { grid-template-columns: 1fr; }
      .portrait-opening p { max-width: 650px; }
      .portrait-reading { max-width: 720px; }
    }

    @media (max-width: 640px) {
      .identity-name { font-size: 15px; }
      .portrait-study { padding: 16px 12px 24px; }
      .portrait-opening h3 { font-size: 38px; }
      .portrait-lenses { overflow-x: auto; }
      .portrait-lens { flex: 0 0 118px; min-width: 118px; }
      .portrait-image-shell { aspect-ratio: auto; height: 390px; }
      .portrait-image { object-position: var(--portrait-x) 50%; }
      .portrait-marker { display: none; }
      .portrait-caption { display: grid; gap: 3px; }
      .portrait-facts { grid-template-columns: 1fr 1fr; }
      .portrait-fact:nth-child(3) { border-left: 0; border-top: 1px solid #e2dbd4; }
      .portrait-fact:nth-child(4) { border-top: 1px solid #e2dbd4; }
      .portrait-principle { grid-template-columns: 1fr; gap: 8px; }
    }

    .room[data-room="portrait"] .study-room.portrait-study {
      gap: clamp(24px, 3vw, 38px);
      padding: clamp(20px, 2.7vw, 38px);
    }

    .room[data-room="portrait"] .portrait-lenses {
      border-bottom: 1px solid #ded7cf;
      border-top: 1px solid #ded7cf;
      display: grid;
      grid-template-columns: repeat(5, minmax(92px, 1fr));
      padding-top: 11px;
    }

    .room[data-room="portrait"] .portrait-lens {
      border-left: 0;
      gap: 5px;
      min-height: 0;
      padding: 0 12px 12px 0;
    }

    .room[data-room="portrait"] .portrait-lens::after {
      left: 0;
      width: min(70px, 74%);
    }

    .room[data-room="portrait"] .portrait-lens-index {
      color: var(--room-accent);
      font-size: 9px;
      line-height: 1;
    }

    .room[data-room="portrait"] .portrait-lens-name {
      font-family: var(--mono);
      font-size: 11px;
      line-height: 1.2;
      text-transform: lowercase;
    }

    .portrait-fragments {
      border-bottom: 1px solid #ded7cf;
      display: grid;
      gap: clamp(12px, 1.7vw, 24px);
      grid-template-columns: repeat(5, minmax(0, 1fr));
      padding-bottom: 15px;
    }

    .portrait-fragment {
      background: transparent;
      border: 0;
      color: #6f665e;
      cursor: pointer;
      display: grid;
      gap: 7px;
      min-width: 0;
      opacity: .55;
      padding: 0 0 9px;
      position: relative;
      text-align: left;
      transition: color 180ms ease, opacity 180ms ease;
    }

    .portrait-fragment::after {
      background: var(--room-accent);
      bottom: -16px;
      content: "";
      height: 1px;
      left: 0;
      position: absolute;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 180ms ease;
      width: 54px;
    }

    .portrait-fragment:hover,
    .portrait-fragment:focus-visible,
    .portrait-fragment.is-active {
      color: #241f1b;
      opacity: 1;
    }

    .portrait-fragment.is-active::after { transform: scaleX(1); }

    .portrait-fragment-image {
      aspect-ratio: 4 / 3;
      background: #eeeae4;
      overflow: hidden;
      width: 100%;
    }

    .portrait-fragment-image img {
      display: block;
      filter: grayscale(.34) saturate(.66) brightness(1.06);
      height: 100%;
      object-fit: cover;
      object-position: var(--fragment-position, center);
      transition: filter 220ms ease, transform 400ms ease;
      width: 100%;
    }

    .portrait-fragment:hover img,
    .portrait-fragment:focus-visible img,
    .portrait-fragment.is-active img {
      filter: none;
      transform: scale(1.015);
    }

    .portrait-fragment-meta {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .portrait-fragment-meta strong,
    .portrait-fragment-meta span {
      display: block;
      font-family: var(--mono);
      font-size: var(--type-meta-size, 11px);
      font-weight: 400;
      line-height: 1.35;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .portrait-fragment-meta span { color: #665e57; }

    .room[data-room="portrait"] .portrait-article {
      align-items: start;
      display: grid;
      gap: clamp(30px, 5vw, 78px);
      grid-template-columns: minmax(0, 1.55fr) minmax(260px, .72fr);
    }

    .room[data-room="portrait"] .portrait-figure {
      display: grid;
      gap: 0;
      margin: 0;
      min-width: 0;
    }

    .room[data-room="portrait"] .portrait-image-shell {
      --portrait-x: 14%;
      --portrait-fit: cover;
      --portrait-position: center;
      aspect-ratio: 8 / 5;
      background: #f1ede5;
      min-height: 0;
      overflow: hidden;
      position: relative;
    }

    .room[data-room="portrait"] .portrait-image {
      display: block;
      filter: saturate(.8) contrast(.985) brightness(1.015);
      height: 100%;
      object-fit: var(--portrait-fit);
      object-position: var(--portrait-position);
      transition: filter 260ms ease, object-position 420ms ease, opacity 220ms ease;
      width: 100%;
    }

    @media (min-width: 821px) {
      .room[data-room="portrait"] .portrait-study[data-lens="child"] .portrait-article,
      .room[data-room="portrait"] .portrait-study[data-lens="builder"] .portrait-article {
        grid-template-columns: minmax(300px, .82fr) minmax(290px, .72fr);
        justify-content: center;
      }

      .room[data-room="portrait"] .portrait-study[data-lens="child"] .portrait-image-shell {
        aspect-ratio: 2 / 3;
        justify-self: center;
        max-height: 690px;
        width: min(100%, 460px);
      }
    }

    .portrait-focus-tick {
      background: var(--room-accent);
      bottom: 14px;
      height: 1px;
      left: var(--portrait-x);
      opacity: .8;
      pointer-events: none;
      position: absolute;
      transform: translateX(-50%);
      transition: left 420ms ease;
      width: 28px;
    }

    .portrait-image-label {
      background: rgba(253,252,249,.9);
      color: #6d645c;
      font-family: var(--mono);
      font-size: var(--type-annotation-size, 11px);
      left: 12px;
      line-height: 1.4;
      max-width: calc(100% - 24px);
      overflow-wrap: break-word;
      padding: 7px 9px;
      position: absolute;
      top: 12px;
    }

    .room[data-room="portrait"] .portrait-caption {
      color: #7a7169;
      display: grid;
      font-family: var(--mono);
      font-size: 9px;
      gap: clamp(12px, 2vw, 28px);
      grid-template-columns: minmax(180px, .72fr) minmax(0, 1.28fr);
      line-height: 1.55;
      padding-top: 10px;
    }

    .room[data-room="portrait"] .portrait-caption span:first-child {
      color: #403831;
    }

    .room[data-room="portrait"] .portrait-reading {
      align-content: start;
      align-self: stretch;
      border-top: 1px solid #d8d0c7;
      display: grid;
      gap: 14px;
      padding: 15px 0 0;
    }

    .room[data-room="portrait"] .portrait-reading h3 {
      color: #29241f;
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: clamp(27px, 2.5vw, 36px);
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.08;
      margin: 0;
      max-width: 440px;
    }

    .room[data-room="portrait"] .portrait-reading-copy {
      color: #403933;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 16px;
      line-height: 1.5;
      margin: 0;
      max-width: 430px;
    }

    .room[data-room="portrait"] .portrait-belief {
      border-left: 1px solid var(--room-accent);
      display: grid;
      gap: 7px;
      margin: 2px 0 0;
      padding: 2px 0 2px 12px;
    }

    .room[data-room="portrait"] .portrait-belief p {
      color: #615950;
      font-family: var(--mono);
      font-size: 10px;
      font-style: normal;
      line-height: 1.55;
      margin: 0;
      max-width: 430px;
    }

    .room[data-room="portrait"] .portrait-proof {
      border-bottom: 0;
      border-top: 1px solid #ded7cf;
      gap: 7px;
      margin-top: 4px;
      padding: 13px 0 0;
    }

    .room[data-room="portrait"] .portrait-source { margin-top: -4px; }

    .room[data-room="portrait"] .portrait-principle {
      align-items: start;
      border-top: 1px solid #ded7cf;
      display: grid;
      gap: 18px;
      grid-template-columns: 120px minmax(0, 1fr);
      padding-top: 12px;
    }

    .room[data-room="portrait"] .portrait-principle p {
      color: #514942;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 14px;
      font-style: italic;
      line-height: 1.58;
      margin: 0;
      max-width: 760px;
    }

    .portrait-poem {
      border-bottom: 1px solid #ded7cf;
      border-top: 1px solid #ded7cf;
    }

    .portrait-poem summary {
      align-items: center;
      cursor: pointer;
      display: grid;
      gap: 18px;
      grid-template-columns: 110px minmax(0, 1fr) auto 22px;
      list-style: none;
      padding: 17px 0;
    }

    .portrait-poem summary::-webkit-details-marker { display: none; }

    .portrait-poem-kicker,
    .portrait-poem-source {
      color: #847a71;
      font-family: var(--mono);
      font-size: 9px;
      font-weight: 400;
      line-height: 1.4;
    }

    .portrait-poem summary strong {
      color: #302a25;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: clamp(15px, 1.18vw, 18px);
      font-style: italic;
      font-weight: 400;
      line-height: 1.5;
    }

    .portrait-poem-sign {
      color: var(--room-accent);
      font-family: var(--mono);
      font-size: 16px;
      line-height: 1;
      text-align: right;
    }

    .portrait-poem[open] .portrait-poem-sign { transform: rotate(45deg); }

    .portrait-poem-body {
      border-top: 1px solid #ece7e1;
      display: grid;
      gap: clamp(34px, 6vw, 96px);
      grid-template-columns: 128px minmax(0, 560px);
      padding: clamp(34px, 5vw, 68px) 0 clamp(48px, 7vw, 92px);
    }

    .portrait-poem-meta {
      align-content: start;
      display: grid;
      gap: 7px;
    }

    .portrait-poem-meta span,
    .portrait-poem-meta a {
      color: #766d65;
      font-family: var(--mono);
      font-size: 9px;
      line-height: 1.5;
    }

    .portrait-poem-meta a {
      text-decoration-color: var(--room-accent);
      text-underline-offset: 4px;
    }

    .portrait-poem blockquote {
      color: #312b26;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: clamp(15px, 1.08vw, 18px);
      line-height: 1.78;
      margin: 0;
      max-width: 42ch;
    }

    .portrait-poem blockquote p {
      margin: 0 0 1.8em;
      transition: margin-left 360ms ease;
    }
    .portrait-poem blockquote p:nth-child(2) { margin-left: clamp(8px, 1.8vw, 28px); }
    .portrait-poem blockquote p:nth-child(3) { margin-left: clamp(16px, 3.4vw, 52px); }
    .portrait-poem blockquote p:nth-child(4) { margin-left: clamp(28px, 5.2vw, 78px); }
    .portrait-poem blockquote p:last-child { margin-bottom: 0; }

    @media (max-width: 820px) {
      .room[data-room="portrait"] .portrait-article { grid-template-columns: 1fr; }
      .room[data-room="portrait"] .portrait-reading { min-height: 0; }
      .portrait-poem summary { grid-template-columns: 86px minmax(0, 1fr) 22px; }
      .portrait-poem-source { display: none; }
      .portrait-poem-body { grid-template-columns: 1fr; }
      .portrait-poem blockquote { max-width: 46ch; }
    }

    @media (max-width: 640px) {
      .room[data-room="portrait"] .study-room.portrait-study { padding: 18px 12px; }
      .room[data-room="portrait"] .portrait-lenses {
        grid-auto-columns: minmax(112px, 1fr);
        grid-auto-flow: column;
        grid-template-columns: none;
        overflow-x: auto;
      }
      .room[data-room="portrait"] .portrait-lens { min-width: 112px; }
      .portrait-fragments {
        grid-auto-columns: minmax(145px, 44vw);
        grid-auto-flow: column;
        grid-template-columns: none;
        overflow-x: auto;
      }
      .room[data-room="portrait"] .portrait-image-shell { aspect-ratio: 1 / 1; }
      .room[data-room="portrait"] .portrait-image { object-position: var(--portrait-position); }
      .room[data-room="portrait"] .portrait-caption { grid-template-columns: 1fr; }
      .room[data-room="portrait"] .portrait-reading h3 { font-size: 23px; }
      .room[data-room="portrait"] .portrait-principle { grid-template-columns: 1fr; gap: 8px; }
      .portrait-poem blockquote p:nth-child(n) { margin-left: 0; }
    }

    .room[data-room="studio"] .room-stage {
      background: #fbfaf8;
      box-shadow: none;
      min-height: 760px;
      overflow: auto;
      touch-action: pan-y;
    }

    .room[data-room="studio"] .room-stage::before,
    .room[data-room="studio"] .room-stage::after { display: none; }

    .critique-lab {
      color: #2e2925;
      display: grid;
      gap: 18px;
      min-height: 100%;
      padding: clamp(18px, 3vw, 36px);
      position: relative;
      z-index: 2;
    }

    .critique-header {
      align-items: end;
      display: flex;
      gap: 28px;
      justify-content: space-between;
    }

    .critique-header-copy { max-width: 650px; }

    .critique-eyebrow,
    .critique-status,
    .critique-domain-note,
    .brief-label,
    .criterion-label,
    .criterion-value,
    .critique-section-label,
    .specimen-kicker,
    .critique-principle-label {
      font-family: var(--mono);
      font-size: 9px;
    }

    .critique-eyebrow {
      color: var(--room-accent);
      display: block;
      margin-bottom: 7px;
    }

    .critique-header h3 {
      font-family: var(--serif);
      font-size: clamp(25px, 3vw, 38px);
      font-weight: 400;
      line-height: 1.06;
      margin: 0;
    }

    .critique-status {
      color: #7a7067;
      line-height: 1.5;
      max-width: 260px;
      text-align: right;
    }

    .critique-domains {
      border-bottom: 1px solid #d8d0c7;
      border-top: 1px solid #d8d0c7;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .critique-domain {
      background: transparent;
      border: 0;
      border-left: 1px solid #e1dad3;
      color: #6e645c;
      cursor: pointer;
      font-family: var(--serif);
      font-size: 14px;
      min-height: 52px;
      padding: 10px 12px;
      position: relative;
    }

    .critique-domain:first-child { border-left: 0; }

    .critique-domain::after {
      background: transparent;
      bottom: -1px;
      content: "";
      height: 2px;
      left: 14px;
      position: absolute;
      right: 14px;
    }

    .critique-domain:hover::after,
    .critique-domain:focus-visible::after,
    .critique-domain.is-active::after { background: var(--room-accent); }

    .critique-domain.is-active { color: #2e2925; }

    .critique-domain-note {
      color: #6d635b;
      line-height: 1.55;
      margin: -8px 0 0;
      max-width: 880px;
    }

    .critique-brief {
      align-items: center;
      background: #f1ede7;
      display: grid;
      gap: 5px 14px;
      grid-template-columns: minmax(0, 1fr) auto;
      padding: 13px 15px;
    }

    .brief-label { color: var(--room-accent); }

    .critique-brief strong {
      font-family: var(--serif);
      font-size: 17px;
      font-weight: 400;
      line-height: 1.3;
    }

    .brief-context {
      color: #736961;
      font-family: var(--mono);
      font-size: 9px;
      grid-column: 1;
      line-height: 1.45;
    }

    .brief-next {
      align-items: center;
      background: #fff;
      border: 0;
      color: #332d28;
      cursor: pointer;
      display: inline-flex;
      font-size: 17px;
      grid-column: 2;
      grid-row: 1 / 4;
      height: 34px;
      justify-content: center;
      padding: 0;
      width: 34px;
    }

    .brief-next:hover,
    .brief-next:focus-visible { color: var(--room-accent); }

    .critique-workspace {
      display: grid;
      gap: clamp(18px, 2.4vw, 32px);
      grid-template-columns: minmax(210px, .72fr) minmax(290px, 1.2fr) minmax(210px, .78fr);
    }

    .critique-controls,
    .critique-reading {
      align-content: start;
      display: grid;
      gap: 12px;
    }

    .critique-controls-header {
      align-items: center;
      display: flex;
      justify-content: space-between;
    }

    .critique-section-label,
    .critique-principle-label { color: var(--room-accent); }

    .critique-compare {
      background: transparent;
      border: 0;
      border-bottom: 1px solid #afa49a;
      color: #544b44;
      cursor: pointer;
      font-family: var(--mono);
      font-size: 9px;
      padding: 3px 0;
    }

    .critique-compare:hover,
    .critique-compare:focus-visible { border-color: var(--room-accent); color: var(--room-accent); }

    .criterion {
      border-top: 1px solid #ded7cf;
      padding-top: 9px;
    }

    .criterion-head {
      align-items: baseline;
      display: flex;
      justify-content: space-between;
      margin-bottom: 7px;
    }

    .criterion-label { color: #4f4740; }
    .criterion-value { color: #81766d; }

    .criterion-range {
      height: 18px;
      position: relative;
    }

    .criterion-range input {
      accent-color: var(--room-accent);
      cursor: pointer;
      margin: 0;
      width: 100%;
    }

    .criterion-target {
      background: var(--room-accent);
      height: 8px;
      left: calc(var(--target) * 1%);
      opacity: 0;
      pointer-events: none;
      position: absolute;
      top: 5px;
      transform: translateX(-50%);
      transition: opacity 160ms ease;
      width: 1px;
    }

    .critique-lab.is-comparing .criterion-target { opacity: .78; }

    .criterion-note {
      color: #8a8077;
      font-family: var(--mono);
      font-size: 8px;
      line-height: 1.4;
      margin: 3px 0 0;
    }

    .critique-specimen {
      align-self: start;
      background: #ede7de;
      min-width: 0;
      position: relative;
    }

    .critique-canvas-wrap {
      aspect-ratio: 4 / 5;
      min-height: 430px;
      overflow: hidden;
      position: relative;
    }

    .critique-canvas {
      cursor: crosshair;
      display: block;
      height: 100%;
      width: 100%;
    }

    .specimen-caption {
      background: rgba(255,255,255,.9);
      bottom: 10px;
      left: 10px;
      max-width: calc(100% - 20px);
      padding: 8px 10px;
      position: absolute;
    }

    .specimen-kicker { color: var(--room-accent); display: block; margin-bottom: 3px; }

    .specimen-title {
      color: #332d28;
      display: block;
      font-family: var(--serif);
      font-size: 14px;
      font-weight: 400;
    }

    .critique-reading-section {
      border-top: 1px solid #ded7cf;
      padding-top: 10px;
    }

    .critique-reading-section p {
      color: #5e554d;
      font-family: var(--serif);
      font-size: 14px;
      line-height: 1.48;
      margin: 5px 0 0;
    }

    .critique-comparison {
      background: #f1ede7;
      display: none;
      padding: 11px 12px;
    }

    .critique-lab.is-comparing .critique-comparison { display: block; }

    .critique-comparison strong {
      display: block;
      font-family: var(--serif);
      font-size: 15px;
      font-weight: 400;
      margin-bottom: 4px;
    }

    .critique-comparison span {
      color: #746a61;
      font-family: var(--mono);
      font-size: 8px;
      line-height: 1.45;
    }

    .critique-principle {
      align-items: baseline;
      border-top: 1px solid #d8d0c7;
      display: grid;
      gap: 14px;
      grid-template-columns: 110px 1fr;
      padding-top: 12px;
    }

    .critique-principle p {
      color: #433b35;
      font-family: var(--serif);
      font-size: 15px;
      font-style: italic;
      line-height: 1.4;
      margin: 0;
    }

    .room[data-room="atlas"] .room-stage {
      background: #fbfaf7;
      box-shadow: none;
      min-height: 790px;
      overflow: auto;
      touch-action: pan-y;
    }

    .room[data-room="atlas"] .room-stage::before,
    .room[data-room="atlas"] .room-stage::after { display: none; }

    .curator-lab {
      color: #2e2925;
      display: grid;
      gap: 22px;
      min-height: 100%;
      padding: clamp(18px, 3vw, 38px);
      position: relative;
      z-index: 2;
    }

    .curator-heading {
      align-items: end;
      display: flex;
      gap: 28px;
      justify-content: space-between;
    }

    .curator-heading-copy { max-width: 660px; }

    .curator-eyebrow,
    .artist-dates,
    .artist-period,
    .artist-work-meta,
    .curator-field label,
    .palette-title,
    .generator-reading-label,
    .generator-badge,
    .artist-source,
    .curator-status {
      font-family: var(--mono);
      font-size: 9px;
    }

    .curator-eyebrow {
      color: var(--room-accent);
      display: block;
      margin-bottom: 7px;
    }

    .curator-heading h3 {
      font-family: var(--serif);
      font-size: clamp(25px, 3vw, 38px);
      font-weight: 400;
      line-height: 1.05;
      margin: 0;
    }

    .curator-status {
      color: #7b7168;
      line-height: 1.5;
      max-width: 260px;
      text-align: right;
    }

    .curator-timeline {
      border-bottom: 1px solid #d8d0c7;
      border-top: 1px solid #d8d0c7;
      display: grid;
      grid-template-columns: repeat(6, minmax(132px, 1fr));
      overflow-x: auto;
    }

    .curator-artist {
      background: transparent;
      border: 0;
      border-left: 1px solid #e1dad3;
      color: #5e554e;
      cursor: pointer;
      min-height: 78px;
      padding: 13px 14px;
      position: relative;
      text-align: left;
    }

    .critique-domains .critique-domain { border: 0; }

    .curator-artist:first-child { border-left: 0; }

    .curator-artist::after {
      background: transparent;
      bottom: -1px;
      content: "";
      height: 2px;
      left: 14px;
      position: absolute;
      right: 14px;
    }

    .curator-artist:hover::after,
    .curator-artist:focus-visible::after,
    .curator-artist.is-active::after { background: var(--room-accent); }

    .curator-artist.is-active { color: #2e2925; }

    .artist-dates { color: #9a8f85; display: block; margin-bottom: 8px; }

    .curator-artist strong {
      display: block;
      font-family: var(--serif);
      font-size: 15px;
      font-weight: 400;
      line-height: 1.1;
    }

    .curator-workspace {
      display: grid;
      gap: clamp(22px, 3vw, 42px);
      grid-template-columns: minmax(220px, .72fr) minmax(0, 1.65fr);
    }

    .artist-reference {
      align-self: start;
      margin: 0;
      min-width: 0;
    }

    .artist-reference-image {
      aspect-ratio: 4 / 5;
      background: #ece6dc;
      overflow: hidden;
      position: relative;
    }

    .artist-reference-image img {
      filter: saturate(.86) contrast(.98);
      height: 100%;
      object-fit: contain;
      transition: opacity 180ms ease, transform 500ms ease;
      width: 100%;
    }

    .artist-reference-image:hover img { transform: scale(1.025); }

    .artist-reference figcaption { padding-top: 14px; }

    .artist-period {
      color: var(--room-accent);
      display: block;
      margin-bottom: 7px;
    }

    .artist-reference h4 {
      font-family: var(--serif);
      font-size: 23px;
      font-weight: 400;
      line-height: 1.08;
      margin: 0 0 6px;
    }

    .artist-work-title {
      color: #5f564e;
      display: block;
      font-family: var(--serif);
      font-size: 14px;
      font-style: italic;
      margin-bottom: 8px;
    }

    .artist-work-meta { color: #7e746b; line-height: 1.55; }

    .artist-question {
      border-top: 1px solid #ddd5cd;
      color: #4c443e;
      font-family: var(--serif);
      font-size: 15px;
      font-style: italic;
      line-height: 1.45;
      margin: 13px 0 10px;
      padding-top: 12px;
    }

    .artist-source {
      color: #766c63;
      text-decoration-color: #b7ada3;
      text-underline-offset: 3px;
    }

    .curator-generator {
      display: grid;
      gap: 14px;
      min-width: 0;
    }

    .generator-intro {
      align-items: baseline;
      border-top: 1px solid #ded7cf;
      display: flex;
      gap: 18px;
      justify-content: space-between;
      padding-top: 9px;
    }

    .generator-intro span {
      color: var(--room-accent);
      font-family: var(--mono);
      font-size: 8px;
    }

    .generator-intro p {
      color: #675e56;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 13px;
      font-style: italic;
      margin: 0;
    }

    .generator-canvas-wrap {
      aspect-ratio: 16 / 9;
      background: #f4f1eb;
      min-height: 320px;
      overflow: hidden;
      position: relative;
    }

    .generator-canvas {
      display: block;
      height: 100%;
      width: 100%;
    }

    .generator-badge {
      background: rgba(255,255,255,.88);
      color: #5e554e;
      left: 12px;
      padding: 6px 8px;
      position: absolute;
      top: 12px;
    }

    .generator-method {
      background: rgba(255,255,255,.82);
      bottom: 12px;
      color: #675e56;
      font-family: var(--mono);
      font-size: 8px;
      left: 12px;
      line-height: 1.4;
      max-width: calc(100% - 112px);
      padding: 6px 8px;
      position: absolute;
    }

    .generator-actions {
      bottom: 12px;
      display: flex;
      gap: 7px;
      position: absolute;
      right: 12px;
    }

    .generator-action {
      align-items: center;
      backdrop-filter: blur(10px);
      background: rgba(255,255,255,.9);
      border: 0;
      color: #342e29;
      cursor: pointer;
      display: inline-flex;
      font-size: 17px;
      height: 34px;
      justify-content: center;
      padding: 0;
      width: 34px;
    }

    .generator-action:hover,
    .generator-action:focus-visible { color: var(--room-accent); }

    .curator-controls {
      border-bottom: 1px solid #ddd5cd;
      border-top: 1px solid #ddd5cd;
      display: grid;
      gap: 12px 14px;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      padding: 13px 0;
    }

    .curator-field { min-width: 0; }

    .curator-field label,
    .palette-title {
      color: #81766d;
      display: block;
      margin-bottom: 6px;
    }

    .curator-field select {
      background: #fff;
      border: 1px solid #d5cdc4;
      border-radius: 0;
      color: #342e29;
      cursor: pointer;
      font-family: var(--mono);
      font-size: 10px;
      height: 34px;
      padding: 0 28px 0 8px;
      width: 100%;
    }

    .palette-field { grid-column: 1 / -1; }

    .curator-palettes {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
    }

    .curator-palette {
      background: transparent;
      border: 1px solid transparent;
      cursor: pointer;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      height: 30px;
      padding: 3px;
      width: 68px;
    }

    .curator-palette span { background: var(--color); }

    .curator-palette:hover,
    .curator-palette:focus-visible,
    .curator-palette.is-active { border-color: #473e36; }

    .generator-reading {
      display: grid;
      gap: 12px;
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .generator-reading-item {
      border-top: 1px solid #ddd5cd;
      min-width: 0;
      padding-top: 10px;
    }

    .generator-reading-label {
      color: var(--room-accent);
      display: block;
      margin-bottom: 5px;
    }

    .generator-reading-item p {
      color: #615850;
      font-family: var(--serif);
      font-size: 13px;
      line-height: 1.45;
      margin: 0;
    }

    .values-field {
      align-items: center;
      display: grid;
      height: 100%;
      justify-items: center;
      padding: 28px;
      position: relative;
      z-index: 2;
    }

    .value-tokens {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      position: absolute;
      top: 28px;
    }

    .value-token {
      background: #fff;
      border: 1px solid #d6cec5;
      border-radius: 999px;
      color: #302a25;
      cursor: pointer;
      font-family: var(--mono);
      font-size: 10px;
      padding: 9px 13px;
    }

    .value-token.is-selected {
      background: var(--room-accent);
      border-color: var(--room-accent);
      color: #fff;
    }

    .balance {
      height: 270px;
      margin-top: 54px;
      position: relative;
      width: min(620px, 90%);
    }

    .balance-post {
      background: #9b9187;
      bottom: 20px;
      height: 188px;
      left: 50%;
      position: absolute;
      transform: translateX(-50%);
      width: 1px;
    }

    .balance-post::after {
      border-bottom: 1px solid #9b9187;
      border-left: 72px solid transparent;
      border-right: 72px solid transparent;
      bottom: -1px;
      content: "";
      left: 50%;
      position: absolute;
      transform: translateX(-50%);
    }

    .balance-arm {
      background: #635b54;
      height: 1px;
      left: 8%;
      position: absolute;
      right: 8%;
      top: 74px;
      transform: rotate(var(--tilt, 0deg));
      transition: transform 420ms cubic-bezier(.2,.8,.2,1);
    }

    .balance-pan {
      border-bottom: 1px solid #8e857c;
      bottom: -104px;
      color: var(--room-accent);
      font-family: var(--serif);
      font-size: 17px;
      height: 84px;
      padding-top: 52px;
      position: absolute;
      text-align: center;
      width: 150px;
    }

    .balance-pan::before,
    .balance-pan::after {
      background: #aaa097;
      content: "";
      height: 84px;
      position: absolute;
      top: -30px;
      width: 1px;
    }

    .balance-pan::before { left: 26px; transform: rotate(20deg); }
    .balance-pan::after { right: 26px; transform: rotate(-20deg); }
    .balance-pan.left { left: -28px; }
    .balance-pan.right { right: -28px; }

    .signal-canvas,
    .experiment-canvas {
      height: 100%;
      inset: 0;
      position: absolute;
      width: 100%;
      z-index: 2;
    }

    .signal-modes,
    .experiment-tools {
      display: flex;
      gap: 8px;
      left: 22px;
      position: absolute;
      top: 22px;
      z-index: 4;
    }

    .signal-mode,
    .experiment-tool {
      background: rgba(255,255,255,.9);
      border: 1px solid #d7cfc6;
      color: #514a44;
      cursor: pointer;
      font-family: var(--mono);
      font-size: 10px;
      padding: 8px 10px;
    }

    .signal-mode.is-active,
    .experiment-tool:hover,
    .experiment-tool:focus-visible {
      border-color: var(--room-accent);
      color: var(--room-accent);
    }

    .seed-garden {
      align-items: center;
      display: flex;
      height: 100%;
      justify-content: center;
      position: relative;
      z-index: 2;
    }

    .seed-core {
      background: #8e2d26;
      border: 0;
      border-radius: 50%;
      box-shadow: 0 0 0 0 rgba(142,45,38,.16);
      cursor: pointer;
      height: 22px;
      padding: 0;
      position: absolute;
      top: 69%;
      transition: box-shadow 200ms ease, transform 200ms ease;
      width: 22px;
      z-index: 4;
    }

    .seed-core:hover,
    .seed-core:focus-visible {
      box-shadow: 0 0 0 14px rgba(142,45,38,.12);
      transform: scale(1.08);
    }

    .seed-stem {
      background: #7d8061;
      bottom: 31%;
      height: calc(var(--growth, 0) * 38%);
      left: 50%;
      position: absolute;
      transform: translateX(-50%);
      transition: height 80ms linear;
      width: 1px;
    }

    .seed-leaf,
    .seed-bloom {
      border: 1px solid #7d8061;
      opacity: var(--growth, 0);
      position: absolute;
      transform: scale(var(--growth, 0));
      transition: transform 140ms ease, opacity 140ms ease;
    }

    .seed-leaf {
      border-radius: 70% 10% 70% 10%;
      height: 38px;
      top: 47%;
      width: 72px;
    }

    .seed-leaf.left { left: calc(50% - 72px); transform-origin: right bottom; }
    .seed-leaf.right { right: calc(50% - 72px); transform: rotate(90deg) scale(var(--growth, 0)); transform-origin: left bottom; }

    .seed-bloom {
      border-color: var(--room-accent);
      border-radius: 50%;
      height: 86px;
      left: calc(50% - 43px);
      top: 20%;
      width: 86px;
    }

    .seed-garden.is-grown .seed-bloom {
      box-shadow: 34px 0 0 -19px color-mix(in srgb, var(--room-accent), transparent 62%), -34px 0 0 -19px color-mix(in srgb, var(--room-accent), transparent 62%), 0 34px 0 -19px color-mix(in srgb, var(--room-accent), transparent 62%), 0 -34px 0 -19px color-mix(in srgb, var(--room-accent), transparent 62%);
    }

    .cabinet-field {
      display: grid;
      gap: 0;
      grid-template-columns: repeat(3, 1fr);
      height: 100%;
      position: relative;
      z-index: 2;
    }

    .cabinet-drawer {
      align-items: center;
      background: #fff;
      border: 0;
      border-bottom: 1px solid #ded7cf;
      border-right: 1px solid #ded7cf;
      color: #403a34;
      cursor: pointer;
      display: grid;
      font-family: var(--mono);
      font-size: 10px;
      gap: 14px;
      justify-items: center;
      padding: 22px;
      position: relative;
      transition: background 180ms ease, color 180ms ease;
    }

    .cabinet-drawer:nth-child(3n) { border-right: 0; }
    .cabinet-drawer:nth-child(n+4) { border-bottom: 0; }

    .cabinet-drawer:hover,
    .cabinet-drawer:focus-visible,
    .cabinet-drawer.is-open {
      background: color-mix(in srgb, var(--room-accent), white 94%);
      color: var(--room-accent);
    }

    .drawer-object {
      align-items: center;
      display: flex;
      height: 82px;
      justify-content: center;
      transition: transform 220ms ease;
      width: 100%;
    }

    .cabinet-drawer.is-open .drawer-object { transform: translateY(-8px) scale(1.08); }
    .drawer-object img { max-height: 78px; max-width: 90px; object-fit: contain; }
    .drawer-swatch { background: var(--object-color); border-radius: 50%; height: 52px; width: 52px; }

    .archive-field {
      align-content: center;
      display: grid;
      gap: 0;
      height: 100%;
      padding: clamp(20px, 5vw, 70px);
      position: relative;
      z-index: 2;
    }

    .archive-fragment {
      align-items: center;
      background: transparent;
      border: 0;
      border-top: 1px solid #d5cdc4;
      color: #403933;
      cursor: pointer;
      display: grid;
      font-family: var(--mono);
      font-size: 11px;
      gap: 20px;
      grid-template-columns: 34px 120px 1fr;
      padding: 18px 8px;
      text-align: left;
    }

    .archive-fragment:last-child { border-bottom: 1px solid #d5cdc4; }
    .archive-fragment .archive-mark { color: #a59b91; }
    .archive-fragment .archive-answer { color: #8b8178; opacity: 0; transform: translateX(-10px); transition: opacity 200ms ease, transform 200ms ease; }
    .archive-fragment.is-open .archive-mark { color: var(--room-accent); }
    .archive-fragment.is-open .archive-answer { opacity: 1; transform: translateX(0); }

    .proportion-lab,
    .artifact-lab {
      height: 100%;
      position: relative;
      z-index: 2;
    }

    .proportion-lab {
      background: #f3efe8;
      overflow: hidden;
      isolation: isolate;
    }

    .proportion-art {
      display: block;
      height: 100%;
      inset: 0;
      position: absolute;
      touch-action: none;
      width: 100%;
    }

    .proportion-toolbar,
    .proportion-structure,
    .proportion-readout,
    .proportion-panel {
      backdrop-filter: blur(14px);
      background: rgba(255,255,255,.9);
      box-shadow: 0 10px 30px rgba(54,43,34,.08);
      position: absolute;
      z-index: 4;
    }

    .proportion-toolbar {
      display: inline-flex;
      left: 18px;
      padding: 4px;
      top: 18px;
    }

    .proportion-tool,
    .proportion-overlay-button {
      background: transparent;
      border: 0;
      color: #675f58;
      cursor: pointer;
      font-family: var(--mono);
      font-size: 10px;
      padding: 8px 10px;
    }

    .proportion-tool.is-active,
    .proportion-overlay-button.is-active {
      background: var(--room-accent);
      color: #fff;
    }

    .proportion-structure {
      align-items: center;
      display: flex;
      padding: 4px;
      right: 18px;
      top: 18px;
    }

    .proportion-structure-label {
      color: #8b8178;
      font-family: var(--mono);
      font-size: 9px;
      margin: 0 7px 0 5px;
    }

    .proportion-readout {
      bottom: 18px;
      color: #39332e;
      left: 18px;
      max-width: min(430px, calc(100% - 36px));
      padding: 13px 15px 14px;
      width: 390px;
    }

    .proportion-readout-kicker,
    .proportion-readout-detail,
    .proportion-panel-label,
    .color-meta,
    .palette-empty {
      display: block;
      font-family: var(--mono);
      font-size: 9px;
    }

    .proportion-readout-kicker,
    .proportion-panel-label {
      color: var(--room-accent);
      margin-bottom: 5px;
      text-transform: lowercase;
    }

    .proportion-readout strong {
      display: block;
      font-family: var(--serif);
      font-size: 17px;
      font-weight: 400;
      line-height: 1.2;
    }

    .proportion-readout-detail {
      color: #746b63;
      line-height: 1.45;
      margin-top: 5px;
    }

    .proportion-panel {
      bottom: 18px;
      min-height: 74px;
      padding: 11px 13px;
      right: 18px;
      width: min(360px, calc(100% - 36px));
    }

    .proportion-panel-section { display: none; }
    .proportion-lab[data-tool="explore"] [data-panel="explore"],
    .proportion-lab[data-tool="measure"] [data-panel="measure"],
    .proportion-lab[data-tool="color"] [data-panel="color"] { display: block; }

    .proportion-zoom,
    .measure-options,
    .color-current,
    .color-values,
    .pinned-palette {
      align-items: center;
      display: flex;
    }

    .proportion-zoom { gap: 6px; }

    .proportion-icon-button {
      align-items: center;
      background: transparent;
      border: 1px solid rgba(69,59,51,.22);
      color: #332d28;
      cursor: pointer;
      display: inline-flex;
      font-size: 17px;
      height: 30px;
      justify-content: center;
      padding: 0;
      width: 30px;
    }

    .zoom-value {
      color: #5f574f;
      font-family: var(--mono);
      font-size: 10px;
      min-width: 54px;
      text-align: center;
    }

    .measure-options { gap: 14px; }

    .measure-compare {
      align-items: center;
      color: #5d554e;
      cursor: pointer;
      display: inline-flex;
      font-family: var(--mono);
      font-size: 9px;
      gap: 6px;
    }

    .measure-compare input { accent-color: var(--room-accent); }

    .color-current { gap: 10px; }

    .color-live-swatch {
      background: var(--live-color, #d7c9b5);
      border: 1px solid rgba(65,54,45,.2);
      flex: 0 0 auto;
      height: 38px;
      width: 38px;
    }

    .color-values {
      align-items: baseline;
      flex-wrap: wrap;
      gap: 3px 9px;
    }

    .color-name {
      color: #403832;
      font-family: var(--serif);
      font-size: 16px;
      font-weight: 400;
      min-width: 100%;
    }

    .color-meta { color: #746b63; }

    .pinned-palette {
      border-top: 1px solid rgba(76,65,56,.15);
      gap: 7px;
      margin-top: 10px;
      min-height: 25px;
      padding-top: 9px;
    }

    .pinned-swatch {
      background: var(--sample);
      border: 1px solid rgba(65,54,45,.2);
      cursor: pointer;
      height: 24px;
      padding: 0;
      width: 24px;
    }

    .palette-empty { color: #8d837a; }

    .proportion-color-probe {
      align-items: center;
      background: rgba(255,255,255,.94);
      box-shadow: 0 5px 18px rgba(47,37,28,.16);
      display: none;
      gap: 6px;
      padding: 4px 7px 4px 4px;
      pointer-events: none;
      position: absolute;
      transform: translate(14px, 14px);
      z-index: 3;
    }

    .proportion-lab[data-tool="color"] .proportion-color-probe.is-visible { display: flex; }

    .probe-swatch {
      background: var(--probe-color, #d7c9b5);
      border: 1px solid rgba(65,54,45,.2);
      height: 18px;
      width: 18px;
    }

    .probe-hex {
      color: #403832;
      font-family: var(--mono);
      font-size: 9px;
    }

    .artifact-lab {
      align-items: center;
      display: flex;
      justify-content: center;
    }

    .artifact-focus {
      filter: drop-shadow(0 24px 26px rgba(45,34,25,.14));
      max-height: 56%;
      max-width: 42%;
      object-fit: contain;
      transition: transform 260ms ease, filter 260ms ease;
    }

    .artifact-focus:hover { filter: drop-shadow(0 34px 32px rgba(45,34,25,.2)); transform: scale(1.08) rotate(var(--artifact-rotation, 0deg)); }

    .room[data-room="lightness"] .room-stage {
      border: 0;
      box-shadow: none;
      min-height: 680px;
      overflow: visible;
      touch-action: pan-y;
    }

    .room[data-room="lightness"] .room-panel { gap: 18px; }

    .room[data-room="lightness"] .room-main { display: block; }

    .room[data-room="lightness"] .room-intro,
    .room[data-room="lightness"] .room-list {
      display: none;
    }

    .room[data-room="lightness"] .room-stage::before,
    .room[data-room="lightness"] .room-stage::after {
      display: none;
    }

    .room[data-room="lightness"] .room-title {
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: clamp(23px, 2vw, 28px);
      font-weight: 400;
      line-height: 1.12;
    }

    .room[data-room="lightness"] .room-copy {
      color: #48413b;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 15px;
      line-height: 1.58;
      max-width: 300px;
    }

    .room[data-room="lightness"] .room-kicker,
    .room[data-room="lightness"] .room-reflection {
      font-family: var(--mono);
      font-size: 10px;
      line-height: 1.45;
    }

    .room[data-room="lightness"] .room-kicker { font-style: normal; }

    .room[data-room="lightness"] .room-list {
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 12px;
    }

    .room[data-room="lightness"] .room-list strong {
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-weight: 400;
    }

    .light-study {
      --light-accent: #647d70;
      display: grid;
      font-family: var(--mono);
      gap: clamp(24px, 3vw, 38px);
      min-height: 100%;
      padding: clamp(20px, 2.7vw, 38px);
    }

    .light-chapters {
      border-top: 1px solid #ded7cf;
      border-bottom: 1px solid #ded7cf;
      display: grid;
      grid-template-columns: repeat(5, minmax(92px, 1fr));
      padding-top: 11px;
    }

    .light-chapter {
      background: transparent;
      border: 0;
      color: #847b73;
      cursor: pointer;
      display: grid;
      gap: 5px;
      justify-items: start;
      padding: 0 12px 12px 0;
      position: relative;
      text-align: left;
    }

    .light-chapter::after {
      background: var(--light-accent);
      bottom: -1px;
      content: "";
      height: 1px;
      left: 0;
      position: absolute;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 170ms ease;
      width: min(70px, 74%);
    }

    .light-chapter.is-active { color: #201b17; }
    .light-chapter.is-active::after { transform: scaleX(1); }

    .light-chapter-index {
      color: var(--light-accent);
      font-family: var(--mono);
      font-size: 9px;
      font-style: normal;
    }

    .light-chapter-name {
      font-family: var(--mono);
      font-size: 11px;
      text-transform: lowercase;
    }

    .light-gallery {
      border-bottom: 1px solid #ded7cf;
      display: grid;
      gap: clamp(12px, 1.7vw, 24px);
      grid-template-columns: repeat(6, minmax(0, 1fr));
      padding-bottom: 15px;
    }

    .light-work {
      background: transparent;
      border: 0;
      color: #6f665e;
      cursor: pointer;
      display: grid;
      gap: 7px;
      min-width: 0;
      opacity: .55;
      padding: 0 0 9px;
      position: relative;
      text-align: left;
      transition: color 180ms ease, opacity 180ms ease;
    }

    .light-work::after {
      background: var(--light-accent);
      bottom: -16px;
      content: "";
      height: 1px;
      left: 0;
      position: absolute;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 180ms ease;
      width: 54px;
    }

    .light-work:hover,
    .light-work:focus-visible,
    .light-work.is-active {
      color: #241f1b;
      opacity: 1;
    }

    .light-work:focus-visible {
      outline: 1px solid #8f857b;
      outline-offset: 3px;
    }

    .light-work.is-active::after { transform: scaleX(1); }

    .light-work-image {
      aspect-ratio: 4 / 3;
      background: #eeeae4;
      overflow: hidden;
      width: 100%;
    }

    .light-work-image img {
      display: block;
      filter: grayscale(.34) saturate(.66) brightness(1.06);
      height: 100%;
      object-fit: cover;
      transition: filter 220ms ease, transform 400ms ease;
      width: 100%;
    }

    .light-work:hover img,
    .light-work:focus-visible img,
    .light-work.is-active img {
      filter: none;
      transform: scale(1.015);
    }

    .light-work-meta {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .light-work-meta strong,
    .light-work-meta span {
      display: block;
      font-family: var(--mono);
      font-size: 8px;
      font-weight: 400;
      line-height: 1.35;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .light-work-meta span { color: #938a82; }

    .light-article {
      align-items: stretch;
      display: grid;
      gap: clamp(28px, 4vw, 62px);
      grid-template-columns: minmax(340px, 1.34fr) minmax(270px, .66fr);
      min-height: 610px;
    }

    .light-figure {
      align-items: center;
      display: grid;
      gap: 11px;
      grid-template-rows: minmax(0, 1fr) auto;
      justify-items: center;
      margin: 0;
      min-width: 0;
    }

    .light-canvas-shell {
      aspect-ratio: var(--light-work-ratio, 2692 / 4150);
      cursor: crosshair;
      height: auto;
      max-width: min(100%, var(--light-work-width, 480px));
      overflow: hidden;
      position: relative;
      transition: aspect-ratio 220ms ease, max-width 220ms ease;
      width: 100%;
    }

    .light-canvas {
      display: block;
      height: 100%;
      width: 100%;
    }

    .afterlight-canvas {
      display: block;
      height: 100%;
      inset: 0;
      opacity: 0;
      pointer-events: none;
      position: absolute;
      transition: opacity 260ms ease;
      width: 100%;
      z-index: 2;
    }

    .light-canvas-shell[data-afterlight="true"] .afterlight-canvas { opacity: 1; }

    .afterlight-switch {
      align-items: center;
      backdrop-filter: blur(10px);
      background: rgba(252, 251, 248, .9);
      border: 1px solid rgba(231, 225, 218, .92);
      display: flex;
      gap: 11px;
      padding: 8px 10px 7px;
      position: absolute;
      right: 10px;
      top: 10px;
      z-index: 6;
    }

    .afterlight-mode {
      background: transparent;
      border: 0;
      border-bottom: 1px solid transparent;
      color: #817970;
      cursor: pointer;
      font-family: var(--mono);
      font-size: 8px;
      padding: 0 0 3px;
    }

    .afterlight-mode.is-active {
      border-bottom-color: #79818a;
      color: #282522;
    }

    .afterlight-mode-mark {
      color: #8e969f;
      display: inline-block;
      font-size: 10px;
      margin-right: 3px;
      transform: translateY(1px);
    }

    .afterlight-meta {
      backdrop-filter: blur(9px);
      background: rgba(252, 251, 248, .84);
      bottom: 10px;
      color: #5e5a56;
      font-family: var(--mono);
      font-size: 8px;
      left: 10px;
      line-height: 1.45;
      max-width: calc(100% - 20px);
      opacity: 0;
      padding: 7px 9px;
      pointer-events: none;
      position: absolute;
      transform: translateY(4px);
      transition: opacity 220ms ease, transform 220ms ease;
      z-index: 6;
    }

    .light-canvas-shell[data-afterlight="true"] .afterlight-meta {
      opacity: 1;
      transform: translateY(0);
    }

    .light-annotations {
      inset: 0;
      pointer-events: none;
      position: absolute;
      transition: opacity 180ms ease;
      z-index: 4;
    }

    .light-annotations .light-annotation { pointer-events: auto; }

    .light-canvas-shell[data-afterlight="true"][data-chapter] .light-reticle,
    .light-canvas-shell[data-afterlight="true"][data-chapter] .light-vector,
    .light-canvas-shell[data-afterlight="true"][data-chapter] .light-annotations {
      opacity: 0;
      pointer-events: none;
    }

    .light-canvas-shell[data-chapter="edge"] { cursor: default; }

    .light-reticle {
      border: 1px solid rgba(255,255,255,.8);
      border-radius: 50%;
      height: clamp(54px, 8vw, 106px);
      left: var(--light-x, 58%);
      mix-blend-mode: difference;
      opacity: 0;
      pointer-events: none;
      position: absolute;
      top: var(--light-y, 33%);
      transform: translate(-50%, -50%);
      transition: opacity 160ms ease;
      width: clamp(54px, 8vw, 106px);
    }

    .light-canvas-shell[data-chapter="source"] .light-reticle,
    .light-canvas-shell[data-chapter="form"] .light-reticle {
      opacity: .7;
    }

    .light-vector {
      border-top: 1px solid rgba(255,255,255,.82);
      filter: drop-shadow(0 1px 1px rgba(25,18,12,.35));
      left: var(--light-x, 58%);
      opacity: 0;
      pointer-events: none;
      position: absolute;
      top: var(--light-y, 33%);
      transform: rotate(var(--light-angle, 0deg));
      transform-origin: left;
      width: 100px;
    }

    .light-canvas-shell[data-chapter="form"] .light-vector { opacity: .85; }

    .light-annotation {
      align-items: center;
      background: rgba(255,255,255,.88);
      border: 1px solid rgba(74,64,55,.5);
      border-radius: 50%;
      color: transparent;
      cursor: pointer;
      display: flex;
      height: 13px;
      justify-content: center;
      left: var(--point-x);
      padding: 0;
      position: absolute;
      top: var(--point-y);
      transform: translate(-50%, -50%);
      transition: background 160ms ease, transform 160ms ease;
      width: 13px;
      z-index: 4;
    }

    @media (max-width: 520px) {
      .afterlight-switch { gap: 8px; padding: 7px 8px 6px; right: 7px; top: 7px; }
      .afterlight-meta { bottom: 7px; left: 7px; }
    }

    .light-annotation:hover,
    .light-annotation:focus-visible,
    .light-annotation.is-active {
      background: var(--light-accent);
      border-color: #fff;
      transform: translate(-50%, -50%) scale(1.35);
    }

    .light-figure figcaption {
      color: #7a7169;
      font-family: var(--mono);
      font-size: 9px;
      line-height: 1.45;
      justify-self: stretch;
      max-width: 540px;
      text-align: left;
    }

    .light-figure figcaption a { color: inherit; text-underline-offset: 2px; }

    .light-reading {
      align-content: start;
      border-top: 1px solid #d8d0c7;
      display: grid;
      gap: 14px;
      padding-top: 15px;
    }

    .light-reading-kicker {
      color: var(--light-accent);
      font-family: var(--mono);
      font-size: 10px;
      font-style: normal;
    }

    .light-reading h3 {
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: clamp(27px, 2.5vw, 36px);
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.08;
      margin: 0;
      max-width: 440px;
    }

    .light-reading-copy {
      color: #403933;
      display: grid;
      gap: 10px;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 16px;
      line-height: 1.5;
      max-width: 430px;
    }

    .light-reading-copy p { margin: 0; }

    .leonardo-note {
      border-left: 1px solid var(--light-accent);
      color: #615950;
      font-family: var(--mono);
      font-size: 10px;
      line-height: 1.55;
      margin: 2px 0 0;
      max-width: 430px;
      padding-left: 12px;
    }

    .leonardo-note::before {
      color: var(--light-accent);
      content: attr(data-label);
      display: block;
      font-size: 8px;
      margin-bottom: 6px;
    }

    .light-controls {
      border-bottom: 1px solid #e2dcd5;
      border-top: 1px solid #e2dcd5;
      display: grid;
      gap: 13px;
      margin-top: 3px;
      padding: 13px 0;
    }

    .light-control-row {
      align-items: center;
      display: grid;
      gap: 13px;
      grid-template-columns: 82px minmax(100px, 1fr) auto;
    }

    .light-control-row label,
    .light-control-label,
    .light-readout {
      color: #756d65;
      font-family: var(--mono);
      font-size: 10px;
      text-transform: lowercase;
    }

    .light-control-row input {
      accent-color: var(--light-accent);
      cursor: pointer;
      min-width: 0;
      width: 100%;
    }

    .light-readout {
      color: #2f2924;
      min-width: 58px;
      text-align: right;
    }

    .light-segments {
      display: flex;
      flex-wrap: wrap;
      gap: 7px 17px;
    }

    .light-segment {
      background: transparent;
      border: 0;
      border-bottom: 1px solid transparent;
      color: #756d65;
      cursor: pointer;
      font-family: var(--mono);
      font-size: 10px;
      padding: 0 0 4px;
      text-transform: lowercase;
    }

    .light-segment.is-active {
      border-bottom-color: var(--light-accent);
      color: #1f1a16;
    }

    .light-observation {
      color: var(--light-accent);
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 13px;
      font-style: italic;
      line-height: 1.45;
      margin: 0;
      min-height: 44px;
    }

    .light-source-notes {
      border-top: 1px solid #ded7cf;
      display: grid;
      gap: 13px;
      grid-template-columns: auto 1fr;
      padding-top: 13px;
    }

    .light-source-toggle {
      align-items: center;
      background: transparent;
      border: 1px solid #cfc6bd;
      color: #5d554d;
      cursor: pointer;
      display: inline-flex;
      font-family: var(--mono);
      height: 24px;
      justify-content: center;
      padding: 0;
      width: 24px;
    }

    .light-source-links {
      display: none;
      flex-wrap: wrap;
      gap: 7px 20px;
    }

    .light-source-notes.is-open .light-source-links { display: flex; }

    .light-source-links a {
      color: #6d655d;
      font-family: var(--mono);
      font-size: 9px;
      text-underline-offset: 3px;
    }

    .room[data-room="machine"] .room-stage {
      border: 0;
      box-shadow: none;
      min-height: 680px;
      overflow: visible;
      touch-action: pan-y;
    }

    .room[data-room="machine"] .room-stage::before,
    .room[data-room="machine"] .room-stage::after { display: none; }

    .room[data-room="machine"] .room-panel { gap: 18px; }
    .room[data-room="machine"] .room-main { display: block; }

    .room[data-room="machine"] .room-intro,
    .room[data-room="machine"] .room-list { display: none; }

    .room[data-room="machine"] .room-title {
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: clamp(23px, 2vw, 28px);
      font-weight: 400;
      line-height: 1.12;
    }

    .room[data-room="machine"] .room-kicker {
      font-family: var(--mono);
      font-size: 10px;
      font-style: normal;
    }

    .machine-study {
      --machine-accent: #9b7448;
      display: grid;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      gap: clamp(22px, 2.5vw, 34px);
      min-height: 100%;
      padding: clamp(20px, 2.7vw, 40px);
    }

    .machine-opening {
      align-items: start;
      gap: clamp(18px, 3vw, 50px);
      grid-template-columns: minmax(220px, .8fr) minmax(300px, 1.2fr);
    }

    .machine-opening p {
      color: #675f58;
      font-size: 14px;
      line-height: 1.5;
      max-width: 520px;
    }

    .machine-chapters {
      border-bottom: 1px solid #ded7cf;
      display: grid;
      grid-template-columns: repeat(5, minmax(92px, 1fr));
    }

    .machine-chapter {
      background: transparent;
      border: 0;
      color: #847b73;
      cursor: pointer;
      display: grid;
      gap: 6px;
      justify-items: start;
      padding: 9px 12px 12px 0;
      position: relative;
      text-align: left;
    }

    .machine-chapter::after {
      background: var(--machine-accent);
      bottom: -1px;
      content: "";
      height: 1px;
      left: 0;
      position: absolute;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 170ms ease;
      width: min(70px, 74%);
    }

    .machine-chapter.is-active { color: #201b17; }
    .machine-chapter.is-active::after { transform: scaleX(1); }

    .machine-chapter-index {
      color: var(--machine-accent);
      font-family: var(--mono);
      font-size: 8px;
    }

    .machine-chapter-name {
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 13px;
      text-transform: lowercase;
    }

    .machine-article {
      align-items: start;
      display: grid;
      gap: clamp(34px, 5vw, 76px);
      grid-template-columns: minmax(390px, 1.5fr) minmax(260px, .5fr);
      min-height: 610px;
    }

    .machine-figure {
      align-content: start;
      display: grid;
      gap: 12px;
      margin: 0;
      min-width: 0;
    }

    .machine-image-shell {
      --machine-x: 68%;
      --machine-y: 38%;
      aspect-ratio: 16 / 10.6;
      background: #fff;
      cursor: crosshair;
      isolation: isolate;
      overflow: hidden;
      position: relative;
      width: 100%;
    }

    .machine-artwork {
      display: block;
      filter: contrast(.96) brightness(1.045) saturate(.72) sepia(.04);
      height: 100%;
      mix-blend-mode: multiply;
      object-fit: contain;
      transform-origin: var(--machine-x) var(--machine-y);
      transition: filter 260ms ease, opacity 200ms ease, transform 320ms ease;
      user-select: none;
      width: 100%;
    }

    .machine-artwork.is-changing { opacity: 0; }

    .machine-folio-meta {
      align-items: center;
      background: rgba(255,255,255,.9);
      color: #625950;
      display: flex;
      font-family: var(--mono);
      font-size: 8px;
      gap: 16px;
      justify-content: space-between;
      left: 12px;
      padding: 7px 9px;
      pointer-events: none;
      position: absolute;
      right: 12px;
      top: 12px;
      z-index: 3;
    }

    .machine-folio-meta span:first-child { color: var(--machine-accent); }

    .machine-overlay {
      inset: 0;
      pointer-events: none;
      position: absolute;
    }

    .machine-focus-ring {
      border: 1px solid rgba(91,65,40,.72);
      border-radius: 50%;
      height: clamp(72px, 10vw, 136px);
      left: var(--machine-x);
      position: absolute;
      top: var(--machine-y);
      transform: translate(-50%, -50%);
      width: clamp(72px, 10vw, 136px);
    }

    .machine-focus-ring::before,
    .machine-focus-ring::after {
      background: rgba(91,65,40,.55);
      content: "";
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .machine-focus-ring::before { height: 1px; width: 118%; }
    .machine-focus-ring::after { height: 118%; width: 1px; }

    .machine-motion-map {
      height: 100%;
      inset: 0;
      position: absolute;
      width: 100%;
    }

    .machine-motion-map path,
    .machine-motion-map circle {
      fill: none;
      stroke: rgba(116,69,35,.82);
      stroke-dasharray: 5 7;
      stroke-width: .8;
      vector-effect: non-scaling-stroke;
    }

    .machine-motion-map path {
      animation: machine-flow var(--machine-flow-speed, 2s) linear infinite;
    }

    .machine-motion-map circle {
      animation: machine-turn var(--machine-flow-speed, 2s) linear infinite;
      transform-box: fill-box;
      transform-origin: center;
    }

    @keyframes machine-flow { to { stroke-dashoffset: -24; } }
    @keyframes machine-turn { to { transform: rotate(360deg); } }

    .machine-overlay:has(.machine-point) { pointer-events: auto; }

    .machine-point {
      align-items: center;
      background: rgba(255,254,250,.9);
      border: 1px solid rgba(91,65,40,.55);
      border-radius: 50%;
      color: #49382a;
      cursor: pointer;
      display: flex;
      font-family: var(--mono);
      font-size: 9px;
      height: 22px;
      justify-content: center;
      left: var(--left);
      padding: 0;
      position: absolute;
      top: var(--top);
      transform: translate(-50%, -50%);
      transition: background 160ms ease, color 160ms ease, transform 160ms ease;
      width: 22px;
    }

    .machine-point:hover,
    .machine-point:focus-visible,
    .machine-point.is-active {
      background: var(--machine-accent);
      color: #fff;
      transform: translate(-50%, -50%) scale(1.12);
    }

    .machine-system-mask {
      border: 1px solid rgba(255,255,255,.9);
      box-shadow: 0 0 0 999px rgba(42,28,18,.35);
      inset: var(--zone-inset, 7%);
      pointer-events: none;
      position: absolute;
      transition: inset 320ms ease;
    }

    .machine-system-window {
      border: 1px solid rgba(255,255,255,.92);
      box-shadow: 0 0 0 999px rgba(42,28,18,.35);
      height: 28%;
      left: var(--zone-x);
      pointer-events: none;
      position: absolute;
      top: var(--zone-y);
      transform: translate(-50%, -50%);
      transition: left 280ms ease, top 280ms ease;
      width: 28%;
    }

    .machine-prototype-map {
      height: 100%;
      inset: 0;
      position: absolute;
      width: 100%;
    }

    .machine-prototype-map path,
    .machine-prototype-map circle,
    .machine-prototype-map line {
      fill: none;
      stroke: rgba(255,252,242,.88);
      stroke-width: .7;
      vector-effect: non-scaling-stroke;
    }

    .machine-caption {
      color: #7a7169;
      display: flex;
      font-family: var(--mono);
      font-size: 8px;
      gap: 18px;
      justify-content: space-between;
      line-height: 1.45;
    }

    .machine-caption a { color: inherit; text-underline-offset: 2px; }

    .machine-gallery {
      border-top: 1px solid #ded7cf;
      display: flex;
      gap: 14px;
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      padding-top: 11px;
      scrollbar-width: thin;
      width: 100%;
    }

    .machine-gallery-item {
      background: transparent;
      border: 0;
      color: #756d65;
      cursor: pointer;
      display: grid;
      flex: 0 0 clamp(116px, 13vw, 156px);
      gap: 5px;
      padding: 0 0 12px;
      position: relative;
      text-align: left;
    }

    .machine-gallery-item::after {
      background: var(--machine-accent);
      bottom: -1px;
      content: "";
      height: 1px;
      left: 0;
      position: absolute;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 180ms ease;
      width: 100%;
    }

    .machine-gallery-item:hover::after,
    .machine-gallery-item:focus-visible::after,
    .machine-gallery-item.is-active::after { transform: scaleX(1); }

    .machine-gallery-image {
      aspect-ratio: 3 / 2;
      background: #fff;
      display: block;
      overflow: hidden;
      width: 100%;
    }

    .machine-gallery-image img {
      display: block;
      filter: grayscale(.32) saturate(.52) contrast(.94) brightness(1.04);
      height: 100%;
      mix-blend-mode: multiply;
      object-fit: contain;
      opacity: .56;
      transition: filter 180ms ease, opacity 180ms ease, transform 260ms ease;
      width: 100%;
    }

    .machine-gallery-item:hover img,
    .machine-gallery-item:focus-visible img,
    .machine-gallery-item.is-active img {
      filter: none;
      opacity: 1;
      transform: scale(1.025);
    }

    .machine-gallery-index {
      color: var(--machine-accent);
      font-family: var(--mono);
      font-size: 8px;
    }

    .machine-gallery-title {
      color: #332d28;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 12px;
      line-height: 1.35;
    }

    .machine-gallery-date {
      color: #918981;
      font-family: var(--mono);
      font-size: 8px;
      line-height: 1.25;
    }

    .machine-reading {
      align-content: start;
      border-left: 1px solid #d8d0c7;
      border-top: 0;
      display: grid;
      gap: 13px;
      padding: 2px 0 0 clamp(18px, 2vw, 30px);
    }

    .machine-reading-kicker {
      color: var(--machine-accent);
      font-family: var(--mono);
      font-size: 9px;
      margin: 0;
    }

    .machine-reading h3 {
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: clamp(22px, 1.75vw, 27px);
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.08;
      margin: 0;
      max-width: 360px;
    }

    .machine-reading-copy {
      color: #403933;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 15px;
      line-height: 1.52;
      max-width: 380px;
    }

    .machine-reading-copy p { margin: 0; }

    .machine-note {
      border-left: 1px solid var(--machine-accent);
      color: #615950;
      font-family: var(--mono);
      font-size: 10px;
      line-height: 1.55;
      margin: 2px 0 0;
      max-width: 430px;
      padding-left: 12px;
    }

    .machine-note::before {
      color: var(--machine-accent);
      content: "LEONARDO / FIELD NOTE";
      display: block;
      font-size: 8px;
      margin-bottom: 6px;
    }

    .machine-controls {
      border-bottom: 1px solid #e2dcd5;
      border-top: 1px solid #e2dcd5;
      display: grid;
      gap: 11px;
      padding: 11px 0;
    }

    .machine-teaching-map {
      height: 100%;
      inset: 0;
      opacity: .58;
      pointer-events: none;
      position: absolute;
      transition: opacity 220ms ease;
      width: 100%;
    }

    .machine-teaching-map path,
    .machine-teaching-map line,
    .machine-teaching-map circle,
    .machine-teaching-map polyline,
    .machine-teaching-map rect {
      fill: none;
      stroke: rgba(132, 75, 36, .86);
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: .8;
      vector-effect: non-scaling-stroke;
    }

    .machine-teaching-map .machine-flow {
      animation: machine-flow var(--machine-behavior-speed, 2.2s) linear infinite;
      stroke-dasharray: 4 7;
    }

    .machine-teaching-map .machine-cycle {
      animation: machine-turn var(--machine-behavior-speed, 2.2s) linear infinite;
      stroke-dasharray: 2 4;
      transform-box: fill-box;
      transform-origin: center;
    }

    .machine-teaching-map .machine-secondary { stroke: rgba(105, 136, 145, .82); }
    .machine-teaching-map .machine-hypothesis { stroke-dasharray: 2 7; }

    .machine-image-shell[data-evidence="drawing"] .machine-teaching-map { opacity: .08; }
    .machine-image-shell[data-evidence="reconstruction"] .machine-teaching-map { opacity: .9; }
    .machine-image-shell[data-evidence="feasibility"] .machine-teaching-map { opacity: .62; }
    .machine-image-shell[data-evidence="speculation"] .machine-teaching-map { opacity: .42; }
    .machine-image-shell[data-evidence="speculation"] .machine-teaching-map * { stroke-dasharray: 2 8; }

    .machine-scale-human,
    .machine-scale-machine { opacity: .22; transition: opacity 180ms ease; }
    .machine-image-shell[data-scale="human"] .machine-scale-human,
    .machine-image-shell[data-scale="machine"] .machine-scale-machine { opacity: 1; }

    .machine-proof {
      border-top: 1px solid #ded7cf;
      display: grid;
      gap: 11px;
      padding-top: 13px;
    }

    .machine-proof-heading {
      align-items: baseline;
      display: flex;
      gap: 12px;
      justify-content: space-between;
    }

    .machine-proof-heading strong {
      color: #332d28;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 13px;
      font-weight: 400;
    }

    .machine-proof-heading span,
    .machine-proof-state {
      color: var(--machine-accent);
      font-family: var(--mono);
      font-size: 8px;
      text-transform: uppercase;
    }

    .machine-proof-tabs {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      position: relative;
    }

    .machine-proof-tabs::before {
      background: #d9d1c8;
      content: "";
      height: 1px;
      left: 8px;
      position: absolute;
      right: 8px;
      top: 8px;
    }

    .machine-proof-tab {
      background: transparent;
      border: 0;
      color: #756d65;
      cursor: pointer;
      font-family: var(--mono);
      font-size: 8px;
      line-height: 1.25;
      min-height: 39px;
      padding: 18px 3px 3px;
      position: relative;
    }

    .machine-proof-tab::before {
      background: #fff;
      border: 1px solid #aaa096;
      border-radius: 50%;
      content: "";
      height: 7px;
      left: 50%;
      position: absolute;
      top: 4px;
      transform: translateX(-50%);
      transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
      width: 7px;
    }

    .machine-proof-tab:hover,
    .machine-proof-tab:focus-visible,
    .machine-proof-tab.is-active {
      color: #231e1a;
    }

    .machine-proof-tab:hover::before,
    .machine-proof-tab:focus-visible::before,
    .machine-proof-tab.is-active::before {
      background: var(--machine-accent);
      border-color: var(--machine-accent);
      transform: translateX(-50%) scale(1.2);
    }

    .machine-proof-copy {
      color: #665d55;
      font-family: var(--mono);
      font-size: 8.5px;
      line-height: 1.55;
      margin: 0;
      min-height: 48px;
    }

    .machine-control-row {
      align-items: center;
      display: grid;
      gap: 13px;
      grid-template-columns: 74px minmax(100px, 1fr) auto;
    }

    .machine-control-row label,
    .machine-control-label,
    .machine-readout {
      color: #756d65;
      font-family: var(--mono);
      font-size: 10px;
    }

    .machine-control-row input {
      accent-color: var(--machine-accent);
      cursor: pointer;
      min-width: 0;
      width: 100%;
    }

    .machine-readout { color: #2f2924; text-align: right; }

    .machine-segments { display: flex; flex-wrap: wrap; gap: 7px 16px; }

    .machine-segment {
      background: transparent;
      border: 0;
      border-bottom: 1px solid transparent;
      color: #756d65;
      cursor: pointer;
      font-family: var(--mono);
      font-size: 10px;
      padding: 0 0 4px;
    }

    .machine-segment.is-active {
      border-bottom-color: var(--machine-accent);
      color: #1f1a16;
    }

    .machine-observation {
      color: var(--machine-accent);
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 12px;
      font-style: italic;
      line-height: 1.45;
      margin: 0;
      min-height: 44px;
    }

    .machine-sources {
      border-top: 1px solid #ded7cf;
      display: grid;
      gap: 13px;
      grid-template-columns: auto 1fr;
      padding-top: 13px;
    }

    .machine-source-toggle {
      align-items: center;
      background: transparent;
      border: 1px solid #cfc6bd;
      color: #5d554d;
      cursor: pointer;
      display: inline-flex;
      font-family: var(--mono);
      height: 24px;
      justify-content: center;
      padding: 0;
      width: 24px;
    }

    .machine-source-links { display: none; flex-wrap: wrap; gap: 7px 20px; }
    .machine-sources.is-open .machine-source-links { display: flex; }

    .machine-source-links a {
      color: #6d655d;
      font-family: var(--mono);
      font-size: 9px;
      text-underline-offset: 3px;
    }

    @media (max-width: 820px) {
      .machine-article { grid-template-columns: 1fr; }
      .machine-opening { grid-template-columns: 1fr; }
      .machine-chapters { gap: 14px; grid-template-columns: repeat(5, minmax(62px, 1fr)); overflow-x: auto; }
      .machine-chapter-name { font-size: 10px; }
      .machine-caption { display: grid; gap: 4px; }
      .machine-gallery-item { flex-basis: 124px; }
      .machine-reading { border-left: 0; border-top: 1px solid #d8d0c7; padding: 15px 0 0; }
    }

    @media (max-width: 520px) {
      .machine-study { padding: 18px 12px; }
      .machine-control-row { grid-template-columns: 60px minmax(90px, 1fr) auto; }
      .machine-proof-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    .room[data-room="fibonacci"] .room-stage {
      border: 0;
      box-shadow: none;
      min-height: 680px;
      overflow: visible;
      touch-action: pan-y;
    }

    body:is(.room-open, .music-open, .attention-open, .is-page-hidden) :is(
      .hand-study-motion,
      .astrolabe-ring--outer,
      .astrolabe-ring--middle,
      .astrolabe-ring--inner,
      .astrolabe-heart-path,
      .portrait-heart-light
    ) {
      animation-play-state: paused !important;
    }

    .room[data-room="fibonacci"] .room-panel { gap: 18px; }
    .room[data-room="fibonacci"] .room-main { display: block; }

    .room[data-room="fibonacci"] .room-intro,
    .room[data-room="fibonacci"] .room-list { display: none; }

    .room[data-room="fibonacci"] .room-title {
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: clamp(23px, 2vw, 28px);
      font-weight: 400;
      line-height: 1.12;
    }

    .room[data-room="fibonacci"] .room-kicker {
      font-family: var(--mono);
      font-size: 10px;
      font-style: normal;
    }

    .room[data-room="fibonacci"] .room-stage::before,
    .room[data-room="fibonacci"] .room-stage::after {
      display: none;
    }

    .fibonacci-study {
      --fib-accent: #705b49;
      --fib-blue: #879da0;
      --fib-gold: #ad8746;
      display: grid;
      font-family: var(--mono);
      gap: clamp(24px, 3vw, 38px);
      min-height: 100%;
      padding: clamp(20px, 2.7vw, 38px);
    }

    .fib-chapters {
      border-bottom: 1px solid #ded7cf;
      border-top: 1px solid #ded7cf;
      display: grid;
      grid-template-columns: repeat(5, minmax(92px, 1fr));
      padding-top: 11px;
    }

    .fib-chapter {
      background: transparent;
      border: 0;
      color: #817870;
      cursor: pointer;
      display: grid;
      gap: 5px;
      justify-items: start;
      padding: 0 12px 12px 0;
      position: relative;
      text-align: left;
    }

    .fib-chapter::after {
      background: var(--fib-accent);
      bottom: -1px;
      content: "";
      height: 1px;
      left: 0;
      position: absolute;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 170ms ease;
      width: min(70px, 74%);
    }

    .fib-chapter.is-active { color: #211c18; }
    .fib-chapter.is-active::after { transform: scaleX(1); }

    .fib-chapter-index { color: var(--fib-accent); font-family: var(--mono); font-size: 9px; }
    .fib-chapter-name { font-family: var(--mono); font-size: 11px; }

    .fib-article {
      align-items: stretch;
      display: grid;
      gap: clamp(28px, 4vw, 62px);
      grid-template-columns: minmax(340px, 1.34fr) minmax(270px, .66fr);
      min-height: 610px;
    }

    .fib-field-wrap {
      align-items: center;
      display: grid;
      gap: 11px;
      grid-template-rows: minmax(0, 1fr) auto;
      justify-items: center;
      margin: 0;
      min-width: 0;
    }

    .fib-canvas-shell {
      --fib-focus-x: 64%;
      --fib-focus-y: 37%;
      --fib-lens-radius: 118px;
      --fib-pointer-x: 50%;
      --fib-pointer-y: 50%;
      --fib-growth-scale: .9;
      aspect-ratio: 1.26 / 1;
      background: #fdfcf9;
      cursor: crosshair;
      max-height: 680px;
      min-height: 430px;
      overflow: hidden;
      position: relative;
      touch-action: none;
      width: 100%;
    }

    .fib-canvas-shell::before,
    .fib-canvas-shell::after {
      background: rgba(112,91,73,.22);
      content: "";
      pointer-events: none;
      position: absolute;
      z-index: 2;
    }

    .fib-canvas-shell::before {
      height: 1px;
      left: 0;
      right: 0;
      top: 0;
    }

    .fib-canvas-shell::after {
      bottom: 0;
      height: 1px;
      left: 0;
      right: 0;
    }

    .fib-shell-specimen {
      filter: saturate(.48) contrast(.88) brightness(1.045);
      height: 92%;
      object-fit: contain;
      opacity: 0;
      pointer-events: none;
      position: absolute;
      right: -2%;
      top: 5%;
      transform: rotate(-3deg) scale(.96);
      transition: opacity 260ms ease, transform 500ms ease;
      width: 76%;
      z-index: 1;
    }

    .fib-canvas-shell[data-chapter="sequence"] .fib-shell-specimen {
      opacity: .52;
      transform: rotate(-3deg) scale(1);
    }

    .fib-canvas-shell[data-chapter="ratio"] .fib-shell-specimen {
      height: 84%;
      opacity: .28;
      right: -1%;
      top: 9%;
      transform: rotate(-4deg) scale(.96);
      width: 72%;
    }

    .fib-canvas-shell[data-chapter="growth"] .fib-shell-specimen {
      height: 48%;
      left: 1%;
      opacity: .36;
      right: auto;
      top: 47%;
      transform: rotate(-8deg) scale(var(--fib-growth-scale));
      transform-origin: 50% 50%;
      width: 34%;
    }

    .fib-canvas-shell[data-chapter="compose"] .fib-shell-specimen {
      clip-path: circle(43% at 50% 50%);
      filter: saturate(.34) contrast(.92) brightness(1.08) drop-shadow(0 8px 22px rgba(35, 28, 23, .08));
      height: 58%;
      left: var(--fib-focus-x);
      opacity: .58;
      right: auto;
      top: var(--fib-focus-y);
      transform: translate(-50%, -50%) rotate(-6deg) scale(.82);
      transform-origin: 50% 50%;
      width: 44%;
    }

    .fib-canvas-shell[data-chapter="wonder"] .fib-shell-specimen {
      height: 100%;
      inset: 0;
      opacity: 0;
      transform: rotate(-3deg) scale(.9);
      width: 100%;
    }

    .fib-shell-revelation {
      filter: saturate(.52) contrast(.92) brightness(1.04) drop-shadow(0 10px 28px rgba(173, 135, 70, .13));
      height: 100%;
      inset: 0;
      object-fit: contain;
      opacity: 0;
      pointer-events: none;
      position: absolute;
      transform: rotate(-3deg) scale(.9);
      transition: opacity 220ms ease;
      width: 100%;
      z-index: 2;
    }

    .fib-canvas-shell[data-chapter="wonder"] .fib-shell-revelation {
      opacity: 0;
    }

    .fib-canvas-shell[data-chapter="wonder"][data-wonder-specimen="shell"] .fib-shell-revelation {
      opacity: 0;
    }

    .fib-composition-artwork {
      filter: saturate(.72) contrast(.94) brightness(.97);
      height: 100%;
      inset: 0;
      object-fit: cover;
      opacity: 0;
      pointer-events: none;
      position: absolute;
      transition: filter 260ms ease, opacity 260ms ease, transform 500ms ease;
      width: 100%;
      z-index: 0;
    }

    .fib-composition-lens {
      border-radius: 50%;
      contain: strict;
      height: 180px;
      left: 0;
      opacity: 0;
      overflow: hidden;
      pointer-events: none;
      position: absolute;
      top: 0;
      transform: translate3d(-300px, -300px, 0);
      transition: opacity 180ms ease;
      width: 180px;
      will-change: transform;
      z-index: 1;
    }

    .fib-composition-detail {
      filter: saturate(1.04) contrast(1.025) brightness(1.02);
      left: 0;
      max-width: none;
      object-fit: cover;
      opacity: 1;
      pointer-events: none;
      position: absolute;
      top: 0;
      transform: translate3d(0, 0, 0);
      transform-origin: 0 0;
      will-change: transform;
    }

    .fib-canvas-shell[data-chapter="compose"] .fib-composition-artwork {
      transform: none;
    }

    .fib-canvas-shell[data-chapter="compose"] .fib-composition-base { opacity: .56; }
    .fib-canvas-shell[data-chapter="compose"] .fib-composition-lens { opacity: .98; }

    .fib-canvas-shell[data-chapter="sequence"],
    .fib-canvas-shell[data-chapter="ratio"],
    .fib-canvas-shell[data-chapter="wonder"] { cursor: pointer; }

    .fib-canvas-shell[data-chapter="growth"] { cursor: ew-resize; }
    .fib-canvas-shell[data-chapter="compose"] { cursor: move; }

    .fib-canvas {
      display: block;
      height: 100%;
      inset: 0;
      position: absolute;
      z-index: 3;
      width: 100%;
    }

    .fib-field-caption {
      align-items: baseline;
      color: #817870;
      display: flex;
      font-family: var(--mono);
      font-size: 8px;
      gap: 18px;
      justify-self: stretch;
      justify-content: space-between;
      letter-spacing: 0;
      line-height: 1.5;
      min-height: 14px;
      text-transform: uppercase;
    }

    .fib-live-value { color: var(--fib-accent); }

    .fib-reading {
      align-content: start;
      border-top: 1px solid #d8d0c7;
      display: grid;
      gap: 14px;
      padding-top: 15px;
    }

    .fib-reading h3 {
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: clamp(27px, 2.5vw, 36px);
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.08;
      margin: 0;
      max-width: 440px;
    }

    .fib-reading-copy {
      color: #403933;
      display: grid;
      gap: 10px;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 16px;
      line-height: 1.5;
      max-width: 430px;
    }

    .fib-reading-copy p { margin: 0; }

    .fib-note {
      border-left: 1px solid var(--fib-accent);
      color: #615950;
      font-family: var(--mono);
      font-size: 10px;
      line-height: 1.55;
      margin: 2px 0 0;
      max-width: 430px;
      padding-left: 12px;
    }

    .fib-note::before {
      color: var(--fib-accent);
      content: "FIELD NOTE / EVIDENCE";
      display: block;
      font-size: 8px;
      margin-bottom: 6px;
    }

    .fib-controls {
      border-bottom: 1px solid #e2dcd5;
      border-top: 1px solid #e2dcd5;
      display: grid;
      gap: 13px;
      margin-top: 3px;
      padding: 13px 0;
    }

    .fib-control-row {
      align-items: center;
      display: grid;
      gap: 13px;
      grid-template-columns: 82px minmax(100px, 1fr) auto;
    }

    .fib-control-row label,
    .fib-control-label,
    .fib-readout {
      color: #756d65;
      font-family: var(--mono);
      font-size: 10px;
      text-transform: lowercase;
    }

    .fib-control-row input {
      accent-color: var(--fib-accent);
      cursor: pointer;
      min-width: 0;
      width: 100%;
    }

    .fib-readout {
      color: #2f2924;
      min-width: 62px;
      text-align: right;
    }

    .fib-segments,
    .fib-term-row {
      display: flex;
      flex-wrap: wrap;
      gap: 7px 15px;
    }

    .fib-segment,
    .fib-term {
      background: transparent;
      border: 0;
      border-bottom: 1px solid transparent;
      color: #756d65;
      cursor: pointer;
      font-family: var(--mono);
      font-size: 9px;
      padding: 0 0 4px;
    }

    .fib-segment.is-active,
    .fib-term.is-active {
      border-bottom-color: var(--fib-accent);
      color: #1f1a16;
    }

    .fib-action-row {
      align-items: center;
      display: flex;
      flex-wrap: wrap;
      gap: 9px 18px;
    }

    .fib-action {
      background: transparent;
      border: 0;
      border-bottom: 1px solid #c5bab0;
      color: #554c45;
      cursor: pointer;
      font-family: var(--mono);
      font-size: 9px;
      padding: 0 0 5px;
    }

    .fib-action:hover,
    .fib-action:focus-visible,
    .fib-action.is-active {
      border-bottom-color: var(--fib-accent);
      color: #201b17;
    }

    .fib-claim {
      border-left: 1px solid var(--fib-accent);
      display: grid;
      gap: 8px;
      padding: 2px 0 2px 12px;
    }

    .fib-claim-index {
      color: var(--fib-accent);
      font-family: var(--mono);
      font-size: 8px;
    }

    .fib-claim strong {
      color: #302a25;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 15px;
      font-weight: 400;
      line-height: 1.42;
    }

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

    .fib-verdict {
      background: transparent;
      border: 0;
      border-bottom: 1px solid #d8d0c8;
      color: #746b63;
      cursor: pointer;
      font-family: var(--mono);
      font-size: 8px;
      min-height: 34px;
      padding: 6px 4px;
    }

    .fib-verdict:hover,
    .fib-verdict:focus-visible,
    .fib-verdict.is-answer {
      border-bottom-color: var(--fib-accent);
      color: #241f1b;
    }

    .fib-claim-response {
      color: #655c54;
      font-family: var(--mono);
      font-size: 9px;
      line-height: 1.5;
      margin: 0;
      min-height: 42px;
    }

    .fib-claim-progress {
      color: #8a8179;
      font-family: var(--mono);
      font-size: 8px;
      margin-left: auto;
    }

    .fib-observation {
      color: var(--fib-accent);
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 13px;
      font-style: italic;
      line-height: 1.45;
      margin: 0;
      min-height: 44px;
    }

    .fib-source-notes {
      border-top: 1px solid #ded7cf;
      display: grid;
      gap: 13px;
      grid-template-columns: auto 1fr;
      padding-top: 13px;
    }

    .fib-source-toggle {
      align-items: center;
      background: transparent;
      border: 1px solid #cfc6bd;
      color: #5d554d;
      cursor: pointer;
      display: inline-flex;
      font-family: var(--mono);
      height: 24px;
      justify-content: center;
      padding: 0;
      width: 24px;
    }

    .fib-source-links {
      display: none;
      flex-wrap: wrap;
      gap: 7px 20px;
    }

    .fib-source-notes.is-open .fib-source-links { display: flex; }

    .fib-source-links a {
      color: #6d655d;
      font-family: var(--mono);
      font-size: 9px;
      text-underline-offset: 3px;
    }

    .room[data-room="sacred"] .room-stage {
      box-shadow: none;
      min-height: 720px;
      overflow: auto;
      touch-action: pan-y;
    }

    .room[data-room="sacred"] .room-stage::before,
    .room[data-room="sacred"] .room-stage::after {
      display: none;
    }

    .sacred-study {
      --sacred-accent: #8a6e35;
      display: grid;
      gap: 24px;
      min-height: 100%;
      padding: clamp(22px, 3vw, 42px);
    }

    .sacred-path {
      border-bottom: 1px solid #ded7cf;
      display: grid;
      grid-template-columns: repeat(6, minmax(92px, 1fr));
    }

    .sacred-station {
      background: transparent;
      border: 0;
      color: #817870;
      cursor: pointer;
      display: grid;
      gap: 5px;
      justify-items: start;
      padding: 0 10px 12px 0;
      position: relative;
      text-align: left;
    }

    .sacred-station::after {
      background: var(--sacred-accent);
      bottom: -1px;
      content: "";
      height: 1px;
      left: 0;
      position: absolute;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 170ms ease;
      width: min(78px, 76%);
    }

    .sacred-station.is-active { color: #211c18; }
    .sacred-station.is-active::after { transform: scaleX(1); }

    .sacred-station-index {
      align-items: center;
      color: var(--sacred-accent);
      display: flex;
      font-size: 8px;
      gap: 7px;
    }

    .sacred-station.is-visited .sacred-station-index::after {
      background: var(--sacred-accent);
      border-radius: 50%;
      content: "";
      height: 4px;
      width: 4px;
    }

    .sacred-station-name { font-family: var(--serif); font-size: 14px; }

    .sacred-article {
      align-items: stretch;
      display: grid;
      gap: clamp(30px, 4vw, 64px);
      grid-template-columns: minmax(360px, 1.12fr) minmax(280px, .88fr);
      min-height: 590px;
    }

    .sacred-figure {
      align-content: start;
      display: grid;
      gap: 12px;
      margin: 0;
      min-width: 0;
    }

    .sacred-image-shell {
      --sacred-x: 50%;
      --sacred-y: 46%;
      background: #f3f0eb;
      cursor: crosshair;
      height: min(67vh, 680px);
      min-height: 520px;
      overflow: hidden;
      position: relative;
      width: 100%;
    }

    .sacred-artwork {
      display: block;
      height: 100%;
      object-fit: contain;
      transform-origin: center;
      transition: filter 260ms ease, opacity 260ms ease, transform 400ms ease;
      user-select: none;
      width: 100%;
    }

    .sacred-image-shell[data-mode="presence"] .sacred-artwork {
      filter: saturate(.88) contrast(.96) brightness(.88);
    }

    .sacred-presence-veil {
      background: radial-gradient(circle at var(--sacred-x) var(--sacred-y), transparent 0 var(--aperture, 18%), rgba(24, 19, 15, .16) calc(var(--aperture, 18%) + 8%), rgba(24, 19, 15, .72) 76%);
      inset: 0;
      pointer-events: none;
      position: absolute;
      transition: background 100ms linear;
    }

    .sacred-move-note {
      background: rgba(255,255,255,.86);
      bottom: 12px;
      color: #655b52;
      font-size: 8px;
      left: 12px;
      padding: 7px 9px;
      pointer-events: none;
      position: absolute;
    }

    .sacred-focus-frame {
      border: 1px solid rgba(255,255,255,.92);
      box-shadow: 0 0 0 999px rgba(24, 18, 13, .28);
      opacity: 0;
      pointer-events: none;
      position: absolute;
      transition: inset 320ms ease, opacity 180ms ease;
    }

    .sacred-image-shell[data-focus="calligraphy"] .sacred-focus-frame {
      inset: 33% 18% 14% 17%;
      opacity: 1;
    }

    .sacred-image-shell[data-focus="illumination"] .sacred-focus-frame {
      inset: 8% 19% 63% 14%;
      opacity: 1;
    }

    .sacred-hotspot,
    .sacred-ring-point {
      align-items: center;
      background: rgba(255,255,255,.88);
      border: 1px solid rgba(255,255,255,.95);
      border-radius: 50%;
      color: #3a2f26;
      cursor: pointer;
      display: flex;
      font-size: 8px;
      height: 22px;
      justify-content: center;
      left: var(--left);
      padding: 0;
      position: absolute;
      top: var(--top);
      transform: translate(-50%, -50%);
      transition: background 160ms ease, color 160ms ease, transform 160ms ease;
      width: 22px;
    }

    .sacred-hotspot:hover,
    .sacred-hotspot:focus-visible,
    .sacred-hotspot.is-active,
    .sacred-ring-point:hover,
    .sacred-ring-point:focus-visible,
    .sacred-ring-point.is-active {
      background: var(--sacred-accent);
      color: #fff;
      transform: translate(-50%, -50%) scale(1.12);
    }

    .sacred-distance-guide {
      border: 1px solid rgba(255,255,255,.82);
      inset: 7%;
      pointer-events: none;
      position: absolute;
      transition: inset 350ms ease;
    }

    .sacred-mystery-overlay {
      inset: 0;
      opacity: 0;
      pointer-events: none;
      position: absolute;
      transition: opacity 200ms ease;
    }

    .sacred-image-shell[data-lens="geometry"] .sacred-mystery-overlay.is-geometry,
    .sacred-image-shell[data-lens="color"] .sacred-mystery-overlay.is-color,
    .sacred-image-shell[data-lens="symbol"] .sacred-mystery-overlay.is-symbol {
      opacity: 1;
    }

    .sacred-mystery-overlay.is-geometry {
      background:
        linear-gradient(90deg, transparent calc(50% - .5px), rgba(255,255,255,.86) 50%, transparent calc(50% + .5px)),
        linear-gradient(transparent calc(52% - .5px), rgba(255,255,255,.86) 52%, transparent calc(52% + .5px));
    }

    .sacred-mystery-overlay.is-geometry::before,
    .sacred-mystery-overlay.is-symbol::before {
      border: 1px solid rgba(255,255,255,.9);
      border-radius: 50%;
      content: "";
      height: 37%;
      left: 50%;
      position: absolute;
      top: 42%;
      transform: translate(-50%, -50%);
      width: 48%;
    }

    .sacred-mystery-overlay.is-color {
      background: linear-gradient(90deg, rgba(45,83,72,.16), transparent 34%, rgba(210,169,34,.17) 62%, rgba(154,69,60,.16));
      mix-blend-mode: color;
    }

    .sacred-mystery-overlay.is-symbol::after {
      border: 1px solid rgba(255,255,255,.9);
      border-radius: 50%;
      content: "";
      height: 26%;
      left: 26%;
      position: absolute;
      top: 28%;
      width: 26%;
    }

    .sacred-caption {
      align-items: start;
      color: #71675f;
      display: flex;
      font-size: 8px;
      gap: 18px;
      justify-content: space-between;
      line-height: 1.5;
    }

    .sacred-caption strong { color: #2e2924; font-weight: 400; }
    .sacred-caption span:last-child { max-width: 48%; text-align: right; }

    .sacred-reading {
      align-content: start;
      border-top: 1px solid #d8d0c7;
      display: grid;
      gap: 15px;
      padding-top: 15px;
    }

    .sacred-reading-kicker,
    .sacred-progress,
    .sacred-interaction-note {
      color: var(--sacred-accent);
      font-size: 8px;
    }

    .sacred-reading h3 {
      font-family: Baskerville, "Iowan Old Style", Georgia, "Times New Roman", serif;
      font-size: clamp(25px, 2.4vw, 34px);
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.08;
      margin: 0;
      max-width: 520px;
    }

    .sacred-copy {
      color: #39322d;
      display: grid;
      gap: 10px;
      font-family: var(--serif);
      font-size: clamp(14px, 1vw, 16px);
      line-height: 1.58;
      max-width: 550px;
    }

    .sacred-copy p { margin: 0; }

    .sacred-context {
      border-left: 1px solid var(--sacred-accent);
      color: #615950;
      font-size: 9px;
      line-height: 1.6;
      margin: 0;
      max-width: 520px;
      padding-left: 13px;
    }

    .sacred-controls {
      border-bottom: 1px solid #e2dcd5;
      border-top: 1px solid #e2dcd5;
      display: grid;
      gap: 11px;
      padding: 12px 0;
    }

    .sacred-control-row {
      align-items: center;
      display: grid;
      gap: 12px;
      grid-template-columns: 78px minmax(110px, 1fr) auto;
    }

    .sacred-control-row label,
    .sacred-control-label,
    .sacred-control-readout { color: #756d65; font-size: 8px; }

    .sacred-control-row input {
      accent-color: var(--sacred-accent);
      cursor: pointer;
      min-width: 0;
      width: 100%;
    }

    .sacred-segments { display: flex; flex-wrap: wrap; gap: 7px 15px; }

    .sacred-segment {
      background: transparent;
      border: 0;
      border-bottom: 1px solid transparent;
      color: #756d65;
      cursor: pointer;
      font-size: 8px;
      padding: 0 0 4px;
    }

    .sacred-segment.is-active { border-bottom-color: var(--sacred-accent); color: #1f1a16; }

    .sacred-question {
      color: #453c34;
      font-family: var(--serif);
      font-size: 15px;
      font-style: italic;
      line-height: 1.48;
      margin: 0;
    }

    .sacred-next {
      align-items: center;
      background: transparent;
      border: 0;
      color: #3e3731;
      cursor: pointer;
      display: inline-flex;
      font-size: 9px;
      gap: 10px;
      justify-self: start;
      padding: 3px 0;
    }

    .sacred-next span { color: var(--sacred-accent); font-family: var(--serif); font-size: 18px; }

    .sacred-sources {
      align-items: start;
      border-top: 1px solid #ded7cf;
      display: grid;
      gap: 16px;
      grid-template-columns: minmax(220px, .75fr) minmax(320px, 1.25fr);
      padding-top: 13px;
    }

    .sacred-scope {
      color: #736b63;
      font-size: 8px;
      line-height: 1.55;
      margin: 0;
    }

    .sacred-source-links { display: flex; flex-wrap: wrap; gap: 7px 18px; }

    .sacred-source-links a {
      color: #6d655d;
      font-size: 8px;
      text-underline-offset: 3px;
    }

    .room[data-room="sacred"] .room-panel { gap: 18px; }

    .room[data-room="sacred"] .room-main {
      display: block;
    }

    .room[data-room="sacred"] .room-stage {
      border: 0;
      overflow: visible;
      touch-action: pan-y;
    }

    .room[data-room="sacred"] .room-stage::before,
    .room[data-room="sacred"] .room-stage::after {
      display: none;
    }

    .room[data-room="sacred"] .room-intro,
    .room[data-room="sacred"] .room-list {
      display: none;
    }

    .room[data-room="sacred"] .room-title {
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: clamp(23px, 2vw, 29px);
      font-weight: 400;
      line-height: 1.12;
    }

    .room[data-room="sacred"] .room-kicker {
      font-family: var(--mono);
      font-size: 10px;
      font-style: normal;
      text-transform: none;
    }

    .sacred-chapel {
      --chapel-accent: #9a7431;
      color: #211d19;
      display: grid;
      font-family: var(--mono);
      gap: clamp(24px, 3vw, 38px);
      min-height: 100%;
      padding: clamp(20px, 2.7vw, 38px);
    }

    .sacred-chapel-prologue {
      display: none;
    }

    .sacred-chapel-eyebrow {
      color: var(--chapel-accent);
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 10px;
      font-style: italic;
      margin: 0;
    }

    .sacred-chapel-thesis {
      color: #4c443d;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 14px;
      line-height: 1.48;
      margin: 0;
      max-width: 850px;
    }

    .sacred-chapel-grid {
      align-items: start;
      display: grid;
      gap: clamp(28px, 4vw, 62px);
      grid-template-columns: minmax(340px, 1.34fr) minmax(270px, .66fr);
      min-height: 610px;
    }

    .sacred-chapel-index {
      border-bottom: 1px solid #d8d0c7;
      border-top: 1px solid #d8d0c7;
      display: grid;
      gap: 12px;
      grid-column: 1 / -1;
      grid-template-columns: repeat(6, minmax(82px, 1fr));
      padding-top: 11px;
      position: static;
    }

    .sacred-movement-button {
      background: transparent;
      border: 0;
      color: #8a8179;
      cursor: pointer;
      display: grid;
      gap: 5px;
      justify-items: start;
      min-height: 0;
      padding: 0 10px 12px 0;
      position: relative;
      text-align: left;
    }

    .sacred-movement-button::before {
      display: none;
    }

    .sacred-movement-button.is-visited::before {
      background: #c6bcae;
    }

    .sacred-movement-button.is-active {
      color: #211d19;
    }

    .sacred-movement-button.is-active::before {
      background: var(--chapel-accent);
    }

    .sacred-movement-number {
      color: var(--chapel-accent);
      font-family: var(--mono);
      font-size: 9px;
      font-style: normal;
    }

    .sacred-movement-name {
      font-family: var(--mono);
      font-size: 11px;
      line-height: 1.2;
    }

    .sacred-chapel-figure {
      display: grid;
      gap: 10px;
      margin: 0;
      min-width: 0;
    }

    .sacred-chapel-image {
      --chapel-x: 52%;
      --chapel-y: 47%;
      aspect-ratio: var(--art-aspect, 1148 / 1596);
      background: #f4f1eb;
      cursor: crosshair;
      height: min(74vh, 780px);
      justify-self: center;
      max-width: 100%;
      min-height: 0;
      overflow: hidden;
      position: relative;
      width: auto;
    }

    .sacred-chapel-image[data-tone="dark"] { background: #0c0b0a; }

    .sacred-chapel-artwork {
      display: block;
      height: 100%;
      object-fit: contain;
      transform-origin: center;
      transition: filter 260ms ease, opacity 220ms ease, transform 420ms ease;
      user-select: none;
      width: 100%;
    }

    .sacred-chapel-overlay {
      inset: 0;
      pointer-events: none;
      position: absolute;
    }

    .caravaggio-veil {
      background: radial-gradient(circle at var(--chapel-x) var(--chapel-y), transparent 0 16%, rgba(7,6,5,.12) 27%, rgba(7,6,5,.7) 80%);
      inset: 0;
      pointer-events: none;
      position: absolute;
    }

    .sacred-chapel-cue {
      background: rgba(255,255,255,.88);
      bottom: 12px;
      color: #655c54;
      font-family: var(--mono);
      font-size: 10px;
      font-style: normal;
      left: 12px;
      padding: 6px 8px;
      position: absolute;
    }

    .sacred-chapel-overlay:has(.sacred-painting-point),
    .sacred-chapel-overlay:has(.sacred-cosmos-point) {
      pointer-events: auto;
    }

    .sacred-painting-point,
    .sacred-cosmos-point {
      align-items: center;
      background: rgba(248,244,237,.91);
      border: 1px solid rgba(255,255,255,.92);
      border-radius: 50%;
      color: #332b24;
      cursor: pointer;
      display: flex;
      font-family: var(--mono);
      font-size: 9px;
      height: 22px;
      justify-content: center;
      left: var(--left);
      padding: 0;
      position: absolute;
      top: var(--top);
      transform: translate(-50%, -50%);
      transition: background 160ms ease, color 160ms ease, transform 160ms ease;
      width: 22px;
    }

    .sacred-painting-point:hover,
    .sacred-painting-point:focus-visible,
    .sacred-painting-point.is-active,
    .sacred-cosmos-point:hover,
    .sacred-cosmos-point:focus-visible,
    .sacred-cosmos-point.is-active {
      background: var(--chapel-accent);
      color: #fff;
      transform: translate(-50%, -50%) scale(1.12);
    }

    .sacred-composition-map {
      height: 100%;
      inset: 0;
      pointer-events: none;
      position: absolute;
      width: 100%;
    }

    .sacred-composition-map path,
    .sacred-composition-map line {
      fill: none;
      stroke: rgba(245,237,218,.72);
      stroke-dasharray: 2 2;
      stroke-width: .22;
      vector-effect: non-scaling-stroke;
    }

    .sacred-focus-frame {
      border: 1px solid rgba(255,255,255,.9);
      box-shadow: 0 0 0 999px rgba(20,15,11,.28);
      opacity: 0;
      pointer-events: none;
      position: absolute;
      transition: inset 320ms ease, opacity 180ms ease;
    }

    .sacred-chapel-image[data-focus="calligraphy"] .sacred-focus-frame {
      inset: 34% 17% 13% 17%;
      opacity: 1;
    }

    .sacred-chapel-image[data-focus="illumination"] .sacred-focus-frame {
      inset: 8% 18% 64% 14%;
      opacity: 1;
    }

    .sacred-comparison-guide {
      border: 1px solid rgba(255,255,255,.78);
      inset: 7%;
      pointer-events: none;
      position: absolute;
      transition: inset 400ms ease;
    }

    .sacred-invisible-overlay {
      inset: 0;
      opacity: 0;
      pointer-events: none;
      position: absolute;
      transition: opacity 180ms ease;
    }

    .sacred-chapel-image[data-lens="symbol"] .sacred-invisible-overlay.is-symbol,
    .sacred-chapel-image[data-lens="geometry"] .sacred-invisible-overlay.is-geometry,
    .sacred-chapel-image[data-lens="color"] .sacred-invisible-overlay.is-color {
      opacity: 1;
    }

    .sacred-invisible-overlay.is-geometry {
      background:
        linear-gradient(90deg, transparent calc(50% - .5px), rgba(255,255,255,.86) 50%, transparent calc(50% + .5px)),
        linear-gradient(transparent calc(52% - .5px), rgba(255,255,255,.86) 52%, transparent calc(52% + .5px));
    }

    .sacred-invisible-overlay.is-symbol::before,
    .sacred-invisible-overlay.is-geometry::before {
      border: 1px solid rgba(255,255,255,.9);
      border-radius: 50%;
      content: "";
      height: 37%;
      left: 50%;
      position: absolute;
      top: 42%;
      transform: translate(-50%, -50%);
      width: 48%;
    }

    .sacred-invisible-overlay.is-color {
      background: linear-gradient(90deg, rgba(45,83,72,.16), transparent 34%, rgba(210,169,34,.17) 62%, rgba(154,69,60,.16));
      mix-blend-mode: color;
    }

    .sacred-chapel-caption {
      align-items: start;
      color: #756c64;
      display: flex;
      font-family: var(--mono);
      font-size: 9px;
      gap: 20px;
      justify-content: space-between;
      line-height: 1.42;
    }

    .sacred-chapel-caption strong {
      color: #2f2924;
      font-family: var(--mono);
      font-weight: 400;
    }

    .sacred-chapel-caption span:last-child {
      max-width: 48%;
      text-align: right;
    }

    .sacred-chapel-reading {
      align-content: start;
      border-top: 1px solid #d8d0c7;
      display: grid;
      gap: 14px;
      padding-top: 14px;
    }

    .sacred-chapel-progress,
    .sacred-chapel-kicker {
      color: var(--chapel-accent);
      font-family: var(--mono);
      font-size: 10px;
      font-style: normal;
    }

    .sacred-chapel-reading h3 {
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: clamp(24px, 2.4vw, 34px);
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.08;
      margin: 0;
    }

    .sacred-chapel-copy {
      color: #3f3832;
      display: grid;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 16px;
      gap: 9px;
      line-height: 1.5;
      max-width: 430px;
    }

    .sacred-chapel-copy p { margin: 0; }

    .sacred-chapel-context {
      border-left: 1px solid var(--chapel-accent);
      color: #655c54;
      font-family: var(--mono);
      font-size: 10px;
      line-height: 1.55;
      margin: 0;
      padding-left: 12px;
    }

    .sacred-chapel-controls {
      border-bottom: 1px solid #dfd8d1;
      border-top: 1px solid #dfd8d1;
      display: grid;
      gap: 10px;
      padding: 11px 0;
    }

    .sacred-chapel-control-row {
      align-items: center;
      display: grid;
      gap: 10px;
      grid-template-columns: 62px minmax(120px, 1fr) auto;
    }

    .sacred-chapel-control-label,
    .sacred-chapel-readout,
    .sacred-chapel-control-row label {
      color: #756d65;
      font-family: var(--mono);
      font-size: 10px;
    }

    .sacred-chapel-control-row input {
      accent-color: var(--chapel-accent);
      cursor: pointer;
      min-width: 0;
      width: 100%;
    }

    .sacred-chapel-segments {
      display: flex;
      flex-wrap: wrap;
      gap: 7px 14px;
    }

    .sacred-chapel-segment {
      background: transparent;
      border: 0;
      border-bottom: 1px solid transparent;
      color: #756d65;
      cursor: pointer;
      font-family: var(--mono);
      font-size: 10px;
      padding: 0 0 3px;
    }

    .sacred-chapel-segment.is-active {
      border-bottom-color: var(--chapel-accent);
      color: #201b17;
    }

    .sacred-chapel-note {
      color: var(--chapel-accent);
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 13px;
      font-style: italic;
      line-height: 1.45;
      margin: 0;
      min-height: 48px;
    }

    .sacred-chapel-question {
      color: #3f3731;
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: 15px;
      font-style: italic;
      line-height: 1.42;
      margin: 0;
    }

    .sacred-chapel-navigation {
      display: flex;
      gap: 18px;
      justify-content: space-between;
      padding-top: 3px;
    }

    .sacred-chapel-nav-button {
      background: transparent;
      border: 0;
      color: #514943;
      cursor: pointer;
      font-family: var(--mono);
      font-size: 11px;
      padding: 2px 0;
    }

    .sacred-chapel-nav-button:hover,
    .sacred-chapel-nav-button:focus-visible { color: var(--chapel-accent); }

    .sacred-chapel-sources {
      align-items: start;
      border-top: 1px solid #d8d0c7;
      display: grid;
      gap: 20px;
      grid-template-columns: minmax(220px, .65fr) minmax(360px, 1.35fr);
      padding-top: 12px;
    }

    .sacred-chapel-scope {
      color: #766d65;
      font-family: var(--mono);
      font-size: 9px;
      line-height: 1.48;
      margin: 0;
    }

    .sacred-chapel-source-links {
      display: flex;
      flex-wrap: wrap;
      gap: 7px 18px;
    }

    .sacred-chapel-source-links a {
      color: #6d655d;
      font-family: var(--mono);
      font-size: 9px;
      text-underline-offset: 3px;
    }

    .sacred-atlas {
      border-top: 1px solid #d8d0c7;
      display: grid;
      gap: clamp(22px, 3vw, 38px);
      padding-top: clamp(20px, 2.5vw, 32px);
    }

    .sacred-atlas-header {
      align-items: end;
      display: grid;
      gap: 20px;
      grid-template-columns: minmax(180px, .45fr) minmax(320px, 1.55fr);
    }

    .sacred-atlas-title {
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: clamp(27px, 3vw, 42px);
      font-weight: 400;
      line-height: 1;
      margin: 0;
    }

    .sacred-atlas-intro {
      color: #5f5650;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 15px;
      line-height: 1.48;
      margin: 0;
      max-width: 760px;
    }

    .sacred-atlas-filters {
      align-items: center;
      border-bottom: 1px solid #ddd5cd;
      border-top: 1px solid #ddd5cd;
      display: flex;
      gap: 10px 22px;
      overflow-x: auto;
      padding: 10px 0;
      scrollbar-width: thin;
    }

    .sacred-atlas-filter {
      background: transparent;
      border: 0;
      border-bottom: 1px solid transparent;
      color: #817870;
      cursor: pointer;
      flex: 0 0 auto;
      font-family: var(--mono);
      font-size: 10px;
      padding: 0 0 3px;
    }

    .sacred-atlas-filter:hover,
    .sacred-atlas-filter:focus-visible,
    .sacred-atlas-filter.is-active {
      border-bottom-color: var(--chapel-accent);
      color: #211d19;
    }

    .sacred-atlas-focus {
      align-items: start;
      display: grid;
      gap: clamp(28px, 4vw, 60px);
      grid-template-columns: minmax(360px, 1.28fr) minmax(280px, .72fr);
    }

    .sacred-atlas-figure {
      display: grid;
      gap: 10px;
      margin: 0;
      min-width: 0;
    }

    .sacred-atlas-canvas {
      --atlas-origin-x: 50%;
      --atlas-origin-y: 50%;
      background: #f1eee8;
      cursor: crosshair;
      height: min(66vh, 690px);
      overflow: hidden;
      position: relative;
    }

    .sacred-atlas-image {
      display: block;
      height: 100%;
      object-fit: contain;
      transform: scale(var(--atlas-zoom, 1));
      transform-origin: var(--atlas-origin-x) var(--atlas-origin-y);
      transition: filter 240ms ease, transform 340ms ease;
      user-select: none;
      width: 100%;
    }

    .sacred-atlas-overlay {
      inset: 0;
      pointer-events: none;
      position: absolute;
    }

    .sacred-atlas-focus[data-lens="form"] .sacred-atlas-image {
      filter: grayscale(.58) contrast(1.04);
    }

    .sacred-atlas-focus[data-lens="form"] .sacred-atlas-overlay {
      background:
        linear-gradient(90deg, transparent calc(33.333% - .5px), rgba(255,255,255,.7) 33.333%, transparent calc(33.333% + .5px), transparent calc(66.666% - .5px), rgba(255,255,255,.7) 66.666%, transparent calc(66.666% + .5px)),
        linear-gradient(transparent calc(33.333% - .5px), rgba(255,255,255,.7) 33.333%, transparent calc(33.333% + .5px), transparent calc(66.666% - .5px), rgba(255,255,255,.7) 66.666%, transparent calc(66.666% + .5px));
    }

    .sacred-atlas-focus[data-lens="symbol"] .sacred-atlas-overlay::before {
      border: 1px solid rgba(255,255,255,.9);
      border-radius: 50%;
      box-shadow: 0 0 0 999px rgba(20,15,10,.14);
      content: "";
      height: min(34vw, 250px);
      left: 50%;
      position: absolute;
      top: 47%;
      transform: translate(-50%, -50%);
      width: min(34vw, 250px);
    }

    .sacred-atlas-symbol {
      background: rgba(255,255,255,.91);
      bottom: 12px;
      color: #4f463f;
      display: none;
      font-family: var(--mono);
      font-size: 9px;
      left: 12px;
      padding: 6px 8px;
      position: absolute;
    }

    .sacred-atlas-focus[data-lens="symbol"] .sacred-atlas-symbol { display: block; }

    .sacred-atlas-caption {
      color: #746b63;
      display: flex;
      font-family: var(--mono);
      font-size: 9px;
      gap: 20px;
      justify-content: space-between;
      line-height: 1.45;
    }

    .sacred-atlas-caption strong {
      color: #2d2823;
      font-weight: 400;
    }

    .sacred-atlas-study {
      align-content: start;
      border-top: 1px solid #d8d0c7;
      display: grid;
      gap: 13px;
      padding-top: 13px;
    }

    .sacred-atlas-date,
    .sacred-atlas-tradition {
      color: var(--chapel-accent);
      font-family: var(--mono);
      font-size: 10px;
    }

    .sacred-atlas-study h4 {
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: clamp(25px, 2.6vw, 36px);
      font-weight: 400;
      line-height: 1.06;
      margin: 0;
    }

    .sacred-atlas-byline {
      color: #70675f;
      font-family: var(--mono);
      font-size: 10px;
      line-height: 1.5;
      margin: 0;
    }

    .sacred-atlas-thesis {
      color: #3f3832;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 16px;
      line-height: 1.5;
      margin: 0;
    }

    .sacred-atlas-lenses {
      border-bottom: 1px solid #dfd8d1;
      border-top: 1px solid #dfd8d1;
      display: flex;
      gap: 20px;
      padding: 10px 0;
    }

    .sacred-atlas-lens {
      background: transparent;
      border: 0;
      border-bottom: 1px solid transparent;
      color: #776e66;
      cursor: pointer;
      font-family: var(--mono);
      font-size: 10px;
      padding: 0 0 3px;
    }

    .sacred-atlas-lens.is-active {
      border-bottom-color: var(--chapel-accent);
      color: #211d19;
    }

    .sacred-atlas-lens-copy {
      color: #635a52;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 14px;
      font-style: italic;
      line-height: 1.48;
      margin: 0;
      min-height: 64px;
    }

    .sacred-atlas-zoom {
      align-items: center;
      display: grid;
      gap: 10px;
      grid-template-columns: 46px 1fr auto;
    }

    .sacred-atlas-zoom label,
    .sacred-atlas-zoom output {
      color: #756d65;
      font-family: var(--mono);
      font-size: 9px;
    }

    .sacred-atlas-zoom input {
      accent-color: var(--chapel-accent);
      cursor: pointer;
      min-width: 0;
      width: 100%;
    }

    .sacred-atlas-source {
      color: #6d655d;
      font-family: var(--mono);
      font-size: 9px;
      text-underline-offset: 3px;
      width: fit-content;
    }

    .sacred-atlas-timeline-label {
      align-items: baseline;
      display: flex;
      justify-content: space-between;
    }

    .sacred-atlas-timeline-label span:first-child {
      color: #302923;
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: 18px;
    }

    .sacred-atlas-timeline-label span:last-child {
      color: #80766e;
      font-family: var(--mono);
      font-size: 9px;
    }

    .sacred-atlas-timeline {
      border-bottom: 1px solid #d8d0c7;
      display: flex;
      gap: 0;
      overflow-x: auto;
      padding-bottom: 14px;
      scroll-snap-type: x proximity;
      scrollbar-color: #b8aea4 transparent;
      scrollbar-width: thin;
    }

    .sacred-atlas-card {
      background: transparent;
      border: 0;
      border-left: 1px solid #ddd5cd;
      color: #726961;
      cursor: pointer;
      display: grid;
      flex: 0 0 166px;
      gap: 8px;
      padding: 0 14px 0 12px;
      scroll-snap-align: start;
      text-align: left;
    }

    .sacred-atlas-card:first-child { border-left: 0; padding-left: 0; }

    .sacred-atlas-card[hidden] { display: none; }

    .sacred-atlas-card.is-active { color: #211d19; }

    .sacred-atlas-thumb {
      align-items: center;
      aspect-ratio: 4 / 5;
      background: #f1eee8;
      display: flex;
      overflow: hidden;
      position: relative;
    }

    .sacred-atlas-card.is-active .sacred-atlas-thumb::after {
      border: 1px solid var(--chapel-accent);
      content: "";
      inset: 0;
      pointer-events: none;
      position: absolute;
    }

    .sacred-atlas-thumb img {
      display: block;
      height: 100%;
      object-fit: contain;
      transition: transform 280ms ease;
      width: 100%;
    }

    .sacred-atlas-card:hover .sacred-atlas-thumb img,
    .sacred-atlas-card:focus-visible .sacred-atlas-thumb img { transform: scale(1.025); }

    .sacred-atlas-card-date,
    .sacred-atlas-card-meta {
      color: var(--chapel-accent);
      font-family: var(--mono);
      font-size: 8px;
      line-height: 1.3;
    }

    .sacred-atlas-card-title {
      color: currentColor;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 13px;
      line-height: 1.2;
    }

    .sacred-atlas-note {
      border-left: 1px solid var(--chapel-accent);
      color: #71675f;
      font-family: var(--mono);
      font-size: 9px;
      line-height: 1.5;
      margin: 0;
      max-width: 760px;
      padding-left: 12px;
    }

    .sacred-first {
      --first-accent: #786b4d;
      border-top: 1px solid #d8d0c7;
      display: grid;
      gap: clamp(22px, 3vw, 38px);
      padding-top: clamp(20px, 2.5vw, 32px);
    }

    .sacred-first-header {
      align-items: end;
      display: grid;
      gap: 20px;
      grid-template-columns: minmax(180px, .45fr) minmax(320px, 1.55fr);
    }

    .sacred-first-title,
    .sacred-first-reading h4 {
      color: #3d3732;
      font-family: "Anna Didone", "Bodoni 72", Didot, "Bodoni MT", Georgia, serif;
      font-size: clamp(21px, 1.7vw, 26px);
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.18;
      margin: 0;
      text-wrap: balance;
    }

    .sacred-first-intro {
      color: #5f5650;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 15px;
      line-height: 1.48;
      margin: 0;
      max-width: 760px;
    }

    .sacred-first-nav {
      border-bottom: 1px solid #ddd5cd;
      border-top: 1px solid #ddd5cd;
      display: grid;
      grid-template-columns: repeat(3, minmax(180px, 1fr));
      overflow-x: auto;
      scrollbar-width: thin;
    }

    .sacred-first-button {
      background: transparent;
      border: 0;
      border-left: 1px solid #e1dad3;
      color: #81776f;
      cursor: pointer;
      display: grid;
      gap: 5px;
      min-height: 70px;
      padding: 11px 14px;
      position: relative;
      text-align: left;
    }

    .sacred-first-button:first-child { border-left: 0; }

    .sacred-first-button::after {
      background: transparent;
      bottom: -1px;
      content: "";
      height: 1px;
      left: 14px;
      position: absolute;
      right: 14px;
    }

    .sacred-first-button.is-active { color: #211d19; }
    .sacred-first-button.is-active::after { background: var(--first-accent); }

    .sacred-first-index,
    .sacred-first-kicker,
    .sacred-first-point-label,
    .sacred-first-instruction,
    .sacred-first-source {
      color: var(--first-accent);
      font-family: var(--mono);
      font-size: 9px;
      line-height: 1.45;
    }

    .sacred-first-label {
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 14px;
      line-height: 1.25;
    }

    .sacred-first-stage {
      align-items: start;
      display: grid;
      gap: clamp(28px, 4vw, 60px);
      grid-template-columns: minmax(420px, 1.35fr) minmax(300px, .65fr);
    }

    .sacred-first-figure {
      margin: 0;
      min-width: 0;
    }

    .sacred-first-canvas {
      background: #f3efe9;
      border-bottom: 1px solid #d8d0c7;
      border-top: 1px solid #d8d0c7;
      height: clamp(390px, 45vw, 650px);
      overflow: hidden;
      position: relative;
    }

    .sacred-first-artwork {
      display: block;
      height: 100%;
      object-fit: cover;
      transition: filter 250ms ease, transform 500ms cubic-bezier(.2,.8,.2,1);
      width: 100%;
    }

    .sacred-first-canvas[data-fit="contain"] .sacred-first-artwork {
      object-fit: contain;
      padding: clamp(14px, 2vw, 26px);
    }

    .sacred-first-canvas:hover .sacred-first-artwork,
    .sacred-first-canvas:focus-within .sacred-first-artwork {
      filter: contrast(1.02) saturate(.96);
      transform: scale(1.012);
    }

    .sacred-first-overlay {
      inset: 0;
      position: absolute;
    }

    .sacred-first-point {
      align-items: center;
      background: rgba(255,255,255,.9);
      border: 1px solid var(--first-accent);
      border-radius: 50%;
      color: #4c4034;
      cursor: pointer;
      display: flex;
      font-family: var(--mono);
      font-size: 8px;
      height: 24px;
      justify-content: center;
      left: var(--left);
      padding: 0;
      position: absolute;
      top: var(--top);
      transform: translate(-50%, -50%);
      width: 24px;
    }

    .sacred-first-point::after {
      border: 1px solid rgba(134,104,60,.38);
      border-radius: 50%;
      content: "";
      inset: -7px;
      opacity: 0;
      position: absolute;
      transform: scale(.7);
      transition: opacity 180ms ease, transform 180ms ease;
    }

    .sacred-first-point:hover::after,
    .sacred-first-point:focus-visible::after,
    .sacred-first-point.is-active::after {
      opacity: 1;
      transform: scale(1);
    }

    .sacred-first-point.is-active {
      background: var(--first-accent);
      color: #fff;
    }

    .sacred-first-caption {
      align-items: start;
      border-bottom: 1px solid #d8d0c7;
      display: flex;
      gap: 20px;
      justify-content: space-between;
      padding: 10px 0 0;
    }

    .sacred-first-caption strong,
    .sacred-first-caption span {
      color: #70675f;
      font-family: var(--mono);
      font-size: 8px;
      font-style: normal;
      font-weight: 400;
      line-height: 1.45;
    }

    .sacred-first-caption strong { color: #302a26; }
    .sacred-first-caption span { text-align: right; }

    .sacred-first-reading {
      align-content: start;
      border-top: 1px solid #d8d0c7;
      display: grid;
      gap: 13px;
      padding-top: 13px;
    }

    .sacred-first-copy,
    .sacred-first-point-copy,
    .sacred-first-prompt {
      color: #5e554e;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 14px;
      line-height: 1.5;
      margin: 0;
      max-width: 540px;
    }

    .sacred-first-point-reading {
      border-top: 1px solid #e0d9d2;
      display: grid;
      gap: 8px;
      padding-top: 12px;
    }

    .sacred-first-point-title {
      color: #39322d;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 17px;
      line-height: 1.35;
      margin: 0;
    }

    .sacred-first-instruction { color: #827970; margin: 0; }

    .sacred-first-prompt {
      border-left: 1px solid var(--first-accent);
      color: #37302b;
      font-style: italic;
      padding-left: 12px;
    }

    .sacred-first-source {
      color: #6d655d;
      text-underline-offset: 3px;
      width: fit-content;
    }

    .sacred-voices {
      --voice-color: #9a753d;
      border-top: 1px solid #d8d0c7;
      display: grid;
      gap: clamp(22px, 3vw, 38px);
      padding-top: clamp(20px, 2.5vw, 32px);
    }

    .sacred-voices-header {
      align-items: end;
      display: grid;
      gap: 20px;
      grid-template-columns: minmax(180px, .45fr) minmax(320px, 1.55fr);
    }

    .sacred-voices-title,
    .sacred-voice-reading h4 {
      color: #3d3732;
      font-family: "Anna Didone", "Bodoni 72", Didot, "Bodoni MT", Georgia, serif;
      font-size: clamp(21px, 1.7vw, 26px);
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.18;
      margin: 0;
      text-wrap: balance;
    }

    .sacred-voices-intro {
      color: #5f5650;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 15px;
      line-height: 1.48;
      margin: 0;
      max-width: 760px;
    }

    .sacred-voice-index {
      border-bottom: 1px solid #ddd5cd;
      border-top: 1px solid #ddd5cd;
      display: grid;
      grid-template-columns: repeat(6, minmax(100px, 1fr));
      overflow-x: auto;
      scrollbar-width: thin;
    }

    .sacred-voice-button {
      background: transparent;
      border: 0;
      border-left: 1px solid #e1dad3;
      color: #827970;
      cursor: pointer;
      display: grid;
      gap: 4px;
      min-height: 62px;
      padding: 10px 12px;
      position: relative;
      text-align: left;
    }

    .sacred-voice-button:first-child { border-left: 0; }

    .sacred-voice-button::after {
      background: transparent;
      bottom: -1px;
      content: "";
      height: 1px;
      left: 12px;
      position: absolute;
      right: 12px;
    }

    .sacred-voice-button.is-active { color: #211d19; }
    .sacred-voice-button.is-active::after { background: var(--voice-color); }

    .sacred-voice-date,
    .sacred-voice-culture {
      font-family: var(--mono);
      line-height: 1.3;
    }

    .sacred-voice-date { color: var(--voice-color); font-size: 8px; }
    .sacred-voice-culture { font-size: 10px; }

    .sacred-voice-stage {
      align-items: start;
      display: grid;
      gap: clamp(28px, 4vw, 60px);
      grid-template-columns: minmax(320px, .92fr) minmax(300px, 1.08fr);
    }

    .sacred-voice-object-figure {
      margin: 0;
      min-width: 0;
    }

    .sacred-voice-field {
      --voice-x: 50%;
      --voice-y: 46%;
      background: #f6f4f1;
      border-bottom: 1px solid #d8d0c7;
      border-top: 1px solid #d8d0c7;
      cursor: zoom-in;
      height: clamp(360px, 43vw, 560px);
      overflow: hidden;
      position: relative;
    }

    .sacred-voice-object {
      display: block;
      height: 100%;
      object-fit: cover;
      object-position: center;
      position: absolute;
      transform: scale(1);
      transform-origin: var(--voice-x) var(--voice-y);
      transition: filter 240ms ease, transform 600ms cubic-bezier(.2,.8,.2,1);
      width: 100%;
    }

    .sacred-voice-field[data-fit="contain"] .sacred-voice-object {
      object-fit: contain;
      padding: clamp(18px, 3vw, 42px);
    }

    .sacred-voice-field:hover .sacred-voice-object,
    .sacred-voice-field:focus-visible .sacred-voice-object,
    .sacred-voice-field[data-view="material"] .sacred-voice-object {
      filter: contrast(1.03) saturate(.94);
      transform: scale(1.09);
    }

    .sacred-voice-field-meta {
      background: rgba(255,255,255,.82);
      backdrop-filter: blur(8px);
      bottom: 12px;
      color: #514942;
      display: flex;
      font-family: var(--mono);
      font-size: 8px;
      justify-content: space-between;
      left: 12px;
      padding: 6px 8px;
      position: absolute;
      right: 12px;
      text-transform: uppercase;
    }

    .sacred-voice-object-caption {
      align-items: start;
      border-bottom: 1px solid #d8d0c7;
      display: flex;
      gap: 20px;
      justify-content: space-between;
      padding: 10px 0 0;
    }

    .sacred-voice-object-caption > span {
      display: grid;
      gap: 3px;
    }

    .sacred-voice-object-caption strong,
    .sacred-voice-object-caption small,
    .sacred-voice-object-caption a {
      color: #70675f;
      font-family: var(--mono);
      font-size: 8px;
      font-style: normal;
      font-weight: 400;
      line-height: 1.45;
    }

    .sacred-voice-object-caption strong { color: #302a26; }
    .sacred-voice-object-caption a { flex: 0 0 auto; text-underline-offset: 3px; }

    .sacred-voice-reading {
      align-content: start;
      border-top: 1px solid #d8d0c7;
      display: grid;
      gap: 13px;
      padding-top: 13px;
    }

    .sacred-voice-kind,
    .sacred-voice-origin,
    .sacred-voice-translation {
      color: var(--voice-color);
      font-family: var(--mono);
      font-size: 9px;
      line-height: 1.45;
    }

    .sacred-voice-reading blockquote {
      border-left: 1px solid var(--voice-color);
      color: #342e29;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: clamp(19px, 2.1vw, 29px);
      font-style: italic;
      line-height: 1.32;
      margin: 2px 0;
      max-width: 27ch;
      padding: 3px 0 3px 16px;
      text-wrap: balance;
    }

    .sacred-voice-reflection,
    .sacred-voice-witness,
    .sacred-voice-material,
    .sacred-voice-question {
      color: #5e554e;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 14px;
      line-height: 1.5;
      margin: 0;
      max-width: 540px;
    }

    .sacred-voice-material {
      border-top: 1px solid #e0d9d2;
      padding-top: 11px;
    }

    .sacred-voice-witness {
      border-left: 1px solid var(--voice-color);
      color: #665d56;
      font-size: 12px;
      padding-left: 12px;
    }

    .sacred-voice-question { color: #37302b; font-style: italic; }

    .sacred-voice-tools {
      align-items: center;
      border-bottom: 1px solid #e0d9d2;
      border-top: 1px solid #e0d9d2;
      display: flex;
      gap: 18px;
      padding: 9px 0;
    }

    .sacred-voice-view {
      background: transparent;
      border: 0;
      border-bottom: 1px solid transparent;
      color: #776e66;
      cursor: pointer;
      font-family: var(--mono);
      font-size: 9px;
      padding: 0 0 3px;
    }

    .sacred-voice-view.is-active {
      border-bottom-color: var(--voice-color);
      color: #211d19;
    }

    .sacred-voice-source {
      color: #6d655d;
      font-family: var(--mono);
      font-size: 9px;
      text-underline-offset: 3px;
      width: fit-content;
    }

    .sacred-voices-note {
      border-left: 1px solid var(--chapel-accent);
      color: #71675f;
      font-family: var(--mono);
      font-size: 9px;
      line-height: 1.5;
      margin: 0;
      max-width: 820px;
      padding-left: 12px;
    }

    @media (max-width: 1080px) {
      .sacred-chapel-grid {
        grid-template-columns: minmax(330px, 1.2fr) minmax(260px, .8fr);
      }
    }

    @media (max-width: 820px) {
      .sacred-chapel-prologue { grid-template-columns: 1fr; gap: 8px; }

      .sacred-chapel-grid { grid-template-columns: 1fr; min-height: 0; }

      .sacred-chapel-index {
        border-bottom: 1px solid #d8d0c7;
        border-left: 0;
        display: flex;
        gap: 18px;
        overflow-x: auto;
        padding: 0 0 10px;
        position: static;
      }

      .sacred-movement-button { min-height: 0; min-width: 80px; padding: 0; }
      .sacred-movement-button::before { display: none; }
      .sacred-chapel-image { height: min(72vh, 700px); min-height: 0; }
      .sacred-chapel-reading h3 { font-size: 27px; }
      .sacred-chapel-sources { grid-template-columns: 1fr; }
      .sacred-atlas-header,
      .sacred-atlas-focus,
      .sacred-first-header,
      .sacred-first-stage,
      .sacred-voices-header,
      .sacred-voice-stage { grid-template-columns: 1fr; }
      .sacred-atlas-canvas { height: min(66vh, 620px); }
      .sacred-first-nav { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
      .sacred-first-canvas { height: min(66vh, 620px); }
      .sacred-voice-index { grid-template-columns: repeat(6, minmax(128px, 1fr)); }
      .sacred-voice-field { min-height: 330px; }
    }

    @media (max-width: 520px) {
      .sacred-chapel { padding: 12px 4px; }
      .sacred-chapel-image { height: auto; min-height: 0; width: 100%; }
      .sacred-chapel-control-row { grid-template-columns: 54px minmax(100px, 1fr) auto; }
      .sacred-chapel-caption { display: grid; gap: 4px; }
      .sacred-chapel-caption span:last-child { max-width: none; text-align: left; }
      .sacred-atlas-canvas { height: 58vh; min-height: 380px; }
      .sacred-atlas-caption { display: grid; gap: 4px; }
      .sacred-atlas-card { flex-basis: 148px; }
      .sacred-first-canvas { height: 58vh; min-height: 380px; }
      .sacred-first-caption { display: grid; gap: 4px; }
      .sacred-first-caption span { text-align: left; }
      .sacred-voice-field { min-height: 290px; }
      .sacred-voice-object-caption { display: grid; gap: 6px; }
      .sacred-voice-reading blockquote { font-size: 20px; }
    }

    .global-player {
      --music-accent: #6f7257;
      background: rgba(255, 254, 254, 0.72);
      border-bottom: 1px solid #cbc4bd;
      display: grid;
      gap: 3px;
      padding: 7px 0 6px;
      position: fixed;
      right: 24px;
      top: 30px;
      width: min(328px, calc(100vw - 48px));
      z-index: 10;
    }

    .player-header,
    .player-main,
    .player-scrub,
    .player-controls,
    .listening-transport,
    .listening-now {
      align-items: center;
      display: flex;
      min-width: 0;
    }

    .player-room-link {
      align-items: center;
      background: transparent;
      border: 0;
      color: #4d4640;
      cursor: pointer;
      display: inline-flex;
      flex: 0 0 auto;
      font-size: 7px;
      gap: 0;
      margin-left: auto;
      height: 23px;
      justify-content: center;
      padding: 0;
      text-transform: uppercase;
      width: 23px;
    }

    .global-player .player-room-link > span:first-child { display: none; }

    .player-room-arrow {
      color: var(--music-accent);
      font-family: Didot, "Bodoni 72", Georgia, serif;
      font-size: 12px;
      line-height: 1;
      transition: transform 160ms ease;
    }

    .player-room-link:hover .player-room-arrow,
    .player-room-link:focus-visible .player-room-arrow {
      transform: translate(1px, -1px);
    }

    .player-index {
      color: #8b827a;
      flex: 0 0 auto;
      font-size: 7px;
    }

    .player-main {
      gap: 6px;
    }

    .player-copy {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .player-copy span,
    .player-copy strong {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .player-copy span {
      color: #766e66;
      font-size: 9px;
      text-transform: uppercase;
    }

    .player-copy strong {
      color: #25201c;
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 400;
    }

    .global-player .player-copy {
      align-items: baseline;
      display: flex;
      flex: 1 1 auto;
      gap: 5px;
      overflow: hidden;
    }

    .global-player .player-copy span {
      color: var(--music-accent);
      flex: 0 0 auto;
      font-size: 7px;
      text-transform: uppercase;
    }

    .global-player .player-copy strong {
      color: #1f1b17;
      font-family: Baskerville, "Iowan Old Style", Georgia, "Times New Roman", serif;
      flex: 1 1 auto;
      font-size: 13px;
      line-height: 1.1;
    }

    .transport-button {
      align-items: center;
      background: transparent;
      border: 0;
      color: #413a34;
      cursor: pointer;
      display: inline-flex;
      flex: 0 0 auto;
      height: 28px;
      justify-content: center;
      line-height: 1;
      padding: 0;
      transition: color 150ms ease, transform 150ms ease;
      width: 28px;
    }

    .player-play {
      align-items: center;
      background: transparent;
      border: 1px solid #b8b0a8;
      border-radius: 50%;
      color: var(--music-accent);
      cursor: pointer;
      display: inline-flex;
      flex: 0 0 auto;
      font-size: 8px;
      height: 26px;
      justify-content: center;
      padding: 0 0 0 1px;
      transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
      width: 26px;
    }

    .transport-button { font-size: 13px; }
    .transport-button.is-primary { color: var(--music-accent); font-size: 15px; }

    .player-play:hover,
    .player-play:focus-visible {
      border-color: var(--music-accent);
      color: #27211c;
      transform: scale(1.04);
    }

    .transport-button:hover,
    .transport-button:focus-visible {
      color: var(--music-accent);
      transform: translateY(-1px);
    }

    .player-scrub { gap: 6px; }

    .player-scrub .transport-button {
      color: #6f665f;
      font-size: 10px;
      height: 17px;
      width: 17px;
    }

    .player-volume-group {
      align-items: center;
      display: flex;
      flex: 0 0 auto;
      gap: 2px;
      margin-left: 2px;
    }

    .player-time,
    .listening-time {
      color: #786f67;
      flex: 0 0 auto;
      font-size: 9px;
      margin-left: 5px;
    }

    .global-player .player-time { display: none; }

    .global-player .player-scrub > .transport-button,
    .global-player .player-volume-group { display: none; }

    .music-progress,
    .music-volume {
      -webkit-appearance: none;
      appearance: none;
      background: transparent;
      cursor: pointer;
    }

    .music-progress {
      flex: 1 1 auto;
      height: 9px;
      min-width: 70px;
    }

    .global-player .music-volume {
      height: 12px;
      opacity: 0;
      overflow: hidden;
      pointer-events: none;
      transition: opacity 160ms ease, width 180ms ease;
      width: 0;
    }

    .listening-transport .music-volume { height: 18px; width: 54px; }

    .player-volume-group:hover .music-volume,
    .player-volume-group:focus-within .music-volume {
      opacity: 1;
      pointer-events: auto;
      width: 38px;
    }

    .music-progress::-webkit-slider-runnable-track,
    .music-volume::-webkit-slider-runnable-track {
      background: #cfc8c1;
      height: 1px;
    }

    .music-progress::-webkit-slider-runnable-track {
      background: linear-gradient(to right, var(--music-accent) 0 var(--music-progress, 0%), #cfc8c1 var(--music-progress, 0%) 100%);
    }

    .music-progress::-webkit-slider-thumb,
    .music-volume::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      background: var(--music-accent);
      border: 0;
      border-radius: 50%;
      height: 6px;
      margin-top: -2.5px;
      width: 6px;
    }

    .music-progress::-moz-range-track,
    .music-volume::-moz-range-track {
      background: #cfc8c1;
      border: 0;
      height: 1px;
    }

    .music-progress::-moz-range-track {
      background: linear-gradient(to right, var(--music-accent) 0 var(--music-progress, 0%), #cfc8c1 var(--music-progress, 0%) 100%);
    }

    .music-progress::-moz-range-thumb,
    .music-volume::-moz-range-thumb {
      background: var(--music-accent);
      border: 0;
      border-radius: 50%;
      height: 6px;
      width: 6px;
    }

    body.music-open { overflow: hidden; }

    .listening-room {
      --music-accent: #6f7257;
      background: #fff;
      inset: 0;
      opacity: 0;
      overflow: auto;
      pointer-events: none;
      position: fixed;
      transform: translateY(12px);
      transition: opacity 240ms ease, transform 240ms ease;
      visibility: hidden;
      z-index: 40;
    }

    .listening-room.is-open {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
      visibility: visible;
    }

    .listening-panel {
      display: grid;
      gap: clamp(18px, 2.3vw, 36px);
      grid-template-rows: auto auto minmax(0, 1fr) auto;
      min-height: 100dvh;
      padding: clamp(22px, 3vw, 42px);
    }

    .listening-header {
      align-items: start;
      display: flex;
      justify-content: space-between;
    }

    .listening-heading {
      display: grid;
      gap: 7px;
    }

    .listening-kicker,
    .music-eyebrow {
      color: var(--music-accent);
      font-size: 10px;
      margin: 0;
      text-transform: lowercase;
    }

    .listening-title {
      font-family: Baskerville, "Iowan Old Style", Georgia, "Times New Roman", serif;
      font-size: clamp(31px, 4vw, 58px);
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1;
      margin: 0;
    }

    .listening-modes {
      border-bottom: 1px solid #d8d0c7;
      display: flex;
      gap: 27px;
    }

    .listening-mode,
    .music-lens {
      background: transparent;
      border: 0;
      color: #7d746c;
      cursor: pointer;
      font-size: 10px;
      padding: 0 0 9px;
      position: relative;
      text-transform: lowercase;
    }

    .listening-mode::after {
      background: var(--music-accent);
      bottom: -1px;
      content: "";
      height: 1px;
      left: 0;
      position: absolute;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 180ms ease;
      width: 100%;
    }

    .listening-mode.is-active,
    .music-lens.is-active { color: #1f1b17; }
    .listening-mode.is-active::after { transform: scaleX(1); }

    .listening-view {
      min-height: clamp(470px, 63vh, 720px);
      position: relative;
    }

    .wander-view,
    .study-view,
    .feel-view {
      height: 100%;
      min-height: inherit;
    }

    .wander-view {
      display: grid;
      gap: clamp(28px, 5vh, 58px);
      grid-template-rows: auto minmax(250px, 1fr) auto;
    }

    .music-lenses {
      display: flex;
      flex-wrap: wrap;
      gap: 9px 23px;
    }

    .music-lens {
      border-bottom: 1px solid transparent;
      padding-bottom: 4px;
    }

    .music-lens.is-active { border-bottom-color: var(--music-accent); }

    .music-timeline {
      align-items: stretch;
      display: grid;
      gap: 0;
      grid-template-columns: repeat(4, minmax(150px, 1fr));
      position: relative;
    }

    .music-timeline::before {
      background: #d8d0c7;
      content: "";
      height: 1px;
      left: 0;
      position: absolute;
      right: 0;
      top: 56%;
    }

    .timeline-work {
      align-content: space-between;
      background: transparent;
      border: 0;
      color: #231f1b;
      cursor: pointer;
      display: grid;
      gap: 16px;
      padding: 0 clamp(10px, 2vw, 30px);
      position: relative;
      text-align: left;
    }

    .timeline-work::after {
      background: #fff;
      border: 1px solid #958b82;
      content: "";
      height: 11px;
      left: 50%;
      position: absolute;
      top: 56%;
      transform: translate(-50%, -50%) rotate(45deg);
      transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
      width: 11px;
    }

    .timeline-work:hover::after,
    .timeline-work:focus-visible::after,
    .timeline-work.is-active::after {
      background: var(--track-accent);
      border-color: var(--track-accent);
      transform: translate(-50%, -50%) rotate(45deg) scale(1.25);
    }

    .timeline-work.is-active .timeline-title { color: var(--track-accent); }

    .timeline-top,
    .timeline-bottom { display: grid; gap: 5px; }
    .timeline-bottom { align-self: end; }

    .timeline-composer,
    .timeline-year,
    .timeline-lens-value {
      color: #6f675f;
      font-size: 9px;
      text-transform: uppercase;
    }

    .timeline-title {
      font-family: var(--serif);
      font-size: clamp(16px, 1.5vw, 21px);
      font-weight: 400;
      line-height: 1.15;
    }

    .timeline-lens-value {
      color: #302a25;
      line-height: 1.4;
      text-transform: none;
    }

    .visual-bridge {
      align-items: end;
      border-top: 1px solid #e0d9d1;
      display: grid;
      gap: 16px;
      grid-template-columns: minmax(150px, .45fr) 1fr;
      padding-top: 17px;
    }

    .visual-bridge p { margin: 0; }

    .bridge-copy {
      color: #2b2621;
      font-family: var(--serif);
      font-size: clamp(17px, 1.45vw, 21px);
      line-height: 1.45;
      max-width: 760px;
    }

    .study-view {
      display: grid;
      gap: clamp(26px, 5vh, 60px);
      grid-template-columns: minmax(220px, .48fr) minmax(0, 1.52fr);
    }

    .study-context {
      align-content: start;
      border-top: 1px solid #d8d0c7;
      display: grid;
      gap: 19px;
      padding-top: 16px;
    }

    .study-context h3,
    .feel-copy h3 {
      font-family: var(--serif);
      font-size: clamp(24px, 2.5vw, 38px);
      font-weight: 400;
      line-height: 1.08;
      margin: 0;
    }

    .study-context p,
    .feel-copy p {
      color: #625a53;
      font-family: var(--serif);
      font-size: 16px;
      line-height: 1.55;
      margin: 0;
      max-width: 420px;
    }

    .study-facts {
      display: grid;
      gap: 8px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin: 0;
    }

    .study-facts div {
      border-top: 1px solid #e0d9d1;
      display: grid;
      gap: 4px;
      padding-top: 8px;
    }

    .study-facts dt { color: #887f76; font-size: 8px; text-transform: uppercase; }
    .study-facts dd { color: #2d2823; font-size: 10px; margin: 0; }

    .score-study {
      align-content: center;
      display: grid;
      gap: 26px;
      min-width: 0;
    }

    .score-line {
      height: 220px;
      position: relative;
    }

    .score-line::before {
      background: #cfc6bd;
      content: "";
      height: 1px;
      left: 0;
      position: absolute;
      right: 0;
      top: 50%;
    }

    .score-progress {
      background: var(--music-accent);
      height: 1px;
      left: 0;
      position: absolute;
      top: 50%;
      width: var(--score-progress, 0%);
    }

    .score-cue {
      background: transparent;
      border: 0;
      color: #746b63;
      cursor: pointer;
      display: grid;
      gap: 9px;
      justify-items: center;
      left: var(--cue-left);
      padding: 0;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 120px;
    }

    .score-cue:nth-child(even) { margin-top: -58px; }
    .score-cue:nth-child(odd) { margin-top: 58px; }

    .score-cue::before {
      background: #fff;
      border: 1px solid #92877d;
      content: "";
      height: 9px;
      order: 2;
      transform: rotate(45deg);
      transition: background 150ms ease, border-color 150ms ease;
      width: 9px;
    }

    .score-cue span { font-size: 8px; line-height: 1.35; }
    .score-cue time { color: #968c83; font-size: 8px; order: 3; }
    .score-cue.is-past::before,
    .score-cue.is-active::before { background: var(--music-accent); border-color: var(--music-accent); }
    .score-cue.is-active { color: #17130f; }

    .active-listening-note {
      border-left: 1px solid var(--music-accent);
      color: #2e2823;
      font-family: var(--serif);
      font-size: clamp(18px, 1.7vw, 24px);
      line-height: 1.45;
      margin: 0;
      min-height: 56px;
      padding-left: 18px;
    }

    .feel-view {
      align-items: start;
      display: grid;
      gap: clamp(28px, 4vw, 64px);
      grid-template-columns: minmax(220px, .42fr) minmax(0, 1.58fr);
    }

    .feel-copy {
      align-content: start;
      display: grid;
      gap: 16px;
      padding-top: 14px;
      padding-right: clamp(22px, 5vw, 76px);
    }

    .resonance-registers {
      border-bottom: 1px solid #ddd6cf;
      border-top: 1px solid #ddd6cf;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-top: 8px;
    }

    .resonance-register {
      background: transparent;
      border: 0;
      color: #827970;
      cursor: pointer;
      display: grid;
      font-family: var(--mono);
      font-size: 8px;
      gap: 4px;
      justify-items: start;
      min-height: 58px;
      padding: 10px 8px 9px 0;
      text-align: left;
    }

    .resonance-register + .resonance-register {
      border-left: 1px solid #e4ddd6;
      padding-left: 10px;
    }

    .resonance-register strong {
      color: #3f3933;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 13px;
      font-weight: 400;
    }

    .resonance-register.is-active strong { color: var(--music-accent); }

    .resonance-memory {
      align-items: center;
      display: flex;
      justify-content: space-between;
      min-height: 32px;
    }

    .resonance-count {
      color: #756d66;
      font-family: var(--mono);
      font-size: 8px;
    }

    .resonance-clear {
      background: transparent;
      border: 0;
      color: #756d66;
      cursor: pointer;
      font-family: var(--mono);
      font-size: 8px;
      padding: 5px 0 5px 8px;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .resonance-carry {
      border-top: 1px solid #ddd6cf;
      display: grid;
      gap: 13px;
      grid-column: 1 / -1;
      grid-template-columns: minmax(150px, .42fr) minmax(0, 1.58fr);
      margin-top: 3px;
      padding-top: 17px;
    }

    .resonance-carry-kicker,
    .resonance-carry-gate,
    .resonance-quality-note {
      color: #81786f;
      font-family: var(--mono);
      font-size: 8px;
      line-height: 1.5;
      margin: 0;
    }

    .resonance-carry-content {
      display: grid;
      gap: 13px;
      max-width: 900px;
      opacity: .18;
      pointer-events: none;
      transition: opacity 420ms ease;
    }

    .resonance-carry.is-ready .resonance-carry-content {
      opacity: 1;
      pointer-events: auto;
    }

    .resonance-carry.is-ready .resonance-carry-gate { display: none; }

    .resonance-carry h3 {
      color: #2c2722;
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: clamp(18px, 1.65vw, 24px);
      font-weight: 400;
      line-height: 1.26;
      margin: 0;
      max-width: 780px;
    }

    .resonance-qualities {
      border-bottom: 1px solid #e2dcd5;
      border-top: 1px solid #e2dcd5;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .resonance-quality {
      background: transparent;
      border: 0;
      color: #6f675f;
      cursor: pointer;
      font-family: var(--mono);
      font-size: 9px;
      min-height: 42px;
      padding: 9px 8px;
      position: relative;
      text-align: left;
    }

    .resonance-quality + .resonance-quality { border-left: 1px solid #e8e2dc; }

    .resonance-quality::after {
      background: var(--music-accent);
      bottom: -1px;
      content: "";
      height: 1px;
      left: 8px;
      position: absolute;
      right: 8px;
      transform: scaleX(0);
      transition: transform 180ms ease;
    }

    .resonance-quality:hover,
    .resonance-quality:focus-visible,
    .resonance-quality.is-active { color: #201c18; }

    .resonance-quality.is-active::after { transform: scaleX(1); }

    .resonance-quality-note {
      color: #625a53;
      min-height: 12px;
    }

    .feel-canvas-wrap {
      background: #fcfbf9;
      border-bottom: 1px solid #ddd6cf;
      border-top: 1px solid #ddd6cf;
      height: clamp(470px, 58vh, 640px);
      min-height: 0;
      overflow: hidden;
      position: relative;
    }

    .feel-canvas {
      cursor: crosshair;
      display: block;
      height: 100%;
      min-height: 0;
      touch-action: none;
      width: 100%;
    }

    .feel-canvas:focus-visible { outline: 1px solid var(--music-accent); outline-offset: -1px; }

    .resonance-axis {
      bottom: 46px;
      color: #6f675f;
      display: flex;
      flex-direction: column;
      font-family: var(--mono);
      font-size: 8px;
      justify-content: space-between;
      left: 14px;
      pointer-events: none;
      position: absolute;
      text-align: left;
      top: 46px;
    }

    .resonance-readout {
      background: rgba(255, 255, 255, .9);
      color: #5d554e;
      font-family: var(--mono);
      font-size: 8px;
      left: 50%;
      opacity: 0;
      padding: 5px 7px;
      pointer-events: none;
      position: absolute;
      top: 50%;
      transform: translate(12px, -50%);
      transition: opacity 140ms ease;
      white-space: nowrap;
    }

    .feel-canvas-wrap.is-reading .resonance-readout { opacity: 1; }

    .feel-pulse {
      color: var(--music-accent);
      font-family: var(--mono);
      font-size: 8px;
      left: 18px;
      position: absolute;
      top: 15px;
    }

    .listening-footer {
      align-items: end;
      border-top: 1px solid #d8d0c7;
      display: grid;
      gap: 20px;
      grid-template-columns: minmax(220px, .8fr) minmax(320px, 1.2fr) minmax(220px, .8fr);
      padding-top: 14px;
    }

    .listening-now { gap: 11px; }

    .listening-now-mark {
      background: var(--music-accent);
      height: 8px;
      transform: rotate(45deg);
      width: 8px;
    }

    .listening-transport { gap: 5px; }
    .listening-transport .music-progress { min-width: 120px; }

    .music-credit {
      color: #756c64;
      font-size: 8px;
      line-height: 1.45;
      margin: 0;
      text-align: right;
    }

    .music-credit a { color: inherit; text-underline-offset: 2px; }

    /* Listening Room follows the same editorial grammar as On Lightness. */
    .listening-panel {
      gap: clamp(24px, 3vw, 38px);
      padding: clamp(20px, 2.7vw, 38px);
    }

    .listening-heading { gap: 5px; }

    .listening-kicker {
      color: #6f675f;
      font-family: var(--mono);
      font-size: 10px;
      font-style: normal;
      line-height: 1.45;
      text-transform: lowercase;
    }

    .listening-title {
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: clamp(23px, 2vw, 28px);
      font-weight: 400;
      line-height: 1.12;
    }

    .listening-modes {
      border-bottom: 1px solid #ded7cf;
      border-top: 1px solid #ded7cf;
      display: grid;
      gap: 0;
      grid-template-columns: repeat(3, minmax(92px, 1fr));
      padding-top: 11px;
    }

    .listening-mode {
      display: grid;
      gap: 5px;
      justify-items: start;
      padding: 0 12px 12px 0;
      text-align: left;
    }

    .listening-mode-index {
      color: #a19890;
      font-family: var(--mono);
      font-size: 8px;
    }

    .listening-mode-name {
      color: #6f675f;
      font-family: var(--mono);
      font-size: 10px;
    }

    .listening-mode.is-active .listening-mode-name { color: #1f1b17; }

    .listening-view { min-height: clamp(510px, 62vh, 700px); }

    .wander-view {
      gap: clamp(24px, 3vw, 38px);
      grid-template-rows: auto minmax(360px, 1fr) auto;
    }

    .music-lenses {
      gap: 9px 23px;
      min-height: 20px;
    }

    .listening-collection-grid {
      display: grid;
      gap: clamp(28px, 4vw, 62px);
      grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr);
      min-height: 100%;
    }

    .music-timeline {
      align-items: stretch;
      border-bottom: 1px solid #ded7cf;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .music-timeline::before { display: none; }

    .timeline-work {
      border-top: 1px solid #ded7cf;
      min-height: 184px;
      padding: 20px 36px 20px 0;
      transition: background-color 180ms ease;
    }

    .timeline-work:nth-child(odd) {
      border-right: 1px solid #ded7cf;
      padding-right: 28px;
    }

    .timeline-work:nth-child(even) { padding-left: 28px; }

    .timeline-work::after {
      left: auto;
      right: 18px;
      top: 22px;
      transform: rotate(45deg);
    }

    .timeline-work:hover::after,
    .timeline-work:focus-visible::after,
    .timeline-work.is-active::after {
      transform: rotate(45deg) scale(1.2);
    }

    .timeline-work.is-active {
      background: linear-gradient(135deg, color-mix(in srgb, var(--track-accent) 7%, white), transparent 70%);
    }

    .timeline-title {
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: clamp(18px, 1.55vw, 23px);
      font-weight: 400;
    }

    .collection-reading {
      align-content: start;
      border-top: 1px solid #ded7cf;
      display: grid;
      gap: 16px;
      padding-top: 16px;
    }

    .collection-reading h3 {
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: clamp(23px, 2vw, 28px);
      font-weight: 400;
      line-height: 1.12;
      margin: 0;
    }

    .collection-work-title {
      color: var(--music-accent);
      font-family: var(--mono);
      font-size: 10px;
      margin: -6px 0 0;
    }

    .collection-context {
      color: #48413b;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 15px;
      line-height: 1.58;
      margin: 2px 0 0;
      max-width: 320px;
    }

    .collection-facts {
      display: grid;
      gap: 10px;
      margin: 8px 0 0;
    }

    .collection-facts div {
      border-top: 1px solid #e5dfd8;
      display: grid;
      gap: 5px;
      padding-top: 9px;
    }

    .collection-facts dt {
      color: #8a8179;
      font-family: var(--mono);
      font-size: 8px;
      text-transform: uppercase;
    }

    .collection-facts dd {
      color: #332d28;
      font-family: var(--mono);
      font-size: 9px;
      line-height: 1.45;
      margin: 0;
    }

    .visual-bridge { align-items: start; }

    .bridge-copy {
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 15px;
      line-height: 1.58;
    }

    .study-context h3,
    .feel-copy h3 {
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: clamp(23px, 2vw, 28px);
      font-weight: 400;
      line-height: 1.12;
    }

    .study-context p,
    .feel-copy p {
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 15px;
      line-height: 1.58;
    }

    .study-recording { grid-column: 1 / -1; }

    .active-listening-note {
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: clamp(17px, 1.5vw, 21px);
    }

    .listening-footer {
      background: rgba(255, 255, 255, .96);
      padding-bottom: 4px;
    }

    .music-credit { line-height: 1.55; }

    @media (prefers-reduced-motion: reduce) {
      .room,
      .room *,
      .listening-room,
      .listening-room * {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
      }
    }

    @media (hover: none) {
      .proportion-lab {
        cursor: default;
      }

      .proportion-cursor,
      .preview-reticle {
        display: none;
      }
    }

    @media (max-width: 1120px) {
      .page {
        padding: 28px 24px 24px;
      }

      .identity,
      .directions {
        position: static;
      }

      .global-player {
        margin-left: auto;
        margin-top: -37px;
        position: relative;
        right: auto;
        top: auto;
      }

      .directions {
        margin-top: 18px;
        text-align: left;
      }

      .gallery {
        grid-template-columns: 1fr;
        padding-top: 28px;
      }

      .hand-panel {
        min-height: auto;
        order: 2;
      }

      .hand-study-art {
        margin-left: 0;
        max-width: 266px;
        width: min(100%, 266px);
      }

      .caption {
        margin-top: 24px;
      }

      .preview-card {
        order: 3;
      }

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

      .artifact + .artifact::before {
        display: none;
      }
    }

    @media (max-width: 820px) {
      .room-panel {
        gap: 20px;
        padding: 20px;
      }

      .room-main {
        gap: 20px;
        grid-template-columns: 1fr;
      }

      .room-intro {
        gap: 12px;
      }

      .room-copy,
      .room-reflection {
        max-width: 680px;
      }

      .room-stage {
        min-height: 470px;
      }

      .room-list {
        margin-left: 0;
      }

      .study-view,
      .feel-view {
        grid-template-columns: 1fr;
      }

      .listening-collection-grid { grid-template-columns: 1fr; }

      .room[data-room="lightness"] .room-stage { min-height: 760px; }

      .room[data-room="fibonacci"] .room-stage { min-height: 760px; }

      .room[data-room="sacred"] .room-stage { min-height: 760px; }

      .curator-workspace {
        gap: 22px;
        grid-template-columns: minmax(190px, .64fr) minmax(0, 1.36fr);
      }

      .curator-controls,
      .generator-reading { grid-template-columns: repeat(2, minmax(0, 1fr)); }

      .palette-field { grid-column: 1 / -1; }

      .critique-workspace {
        grid-template-columns: minmax(210px, .72fr) minmax(300px, 1.28fr);
      }

      .critique-reading {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .critique-comparison { align-self: start; }

      .light-article {
        grid-template-columns: minmax(270px, .9fr) minmax(260px, 1.1fr);
      }

      .light-canvas-shell { height: auto; max-height: none; }

      .fib-article {
        grid-template-columns: minmax(270px, .9fr) minmax(260px, 1.1fr);
      }

      .fib-canvas-shell { min-height: 390px; }

      .sacred-article {
        grid-template-columns: minmax(320px, 1fr) minmax(270px, .9fr);
      }

      .sacred-image-shell { min-height: 480px; }

      .feel-copy { align-content: start; padding-right: 0; }

      .resonance-carry {
        grid-template-columns: 1fr;
      }

      .listening-footer {
        grid-template-columns: 1fr 1.2fr;
      }

      .music-credit { grid-column: 1 / -1; text-align: left; }

      .cabinet-field {
        grid-template-columns: repeat(2, 1fr);
      }

      .cabinet-drawer,
      .cabinet-drawer:nth-child(3n) {
        border-bottom: 1px solid #ded7cf;
        border-right: 1px solid #ded7cf;
      }

      .cabinet-drawer:nth-child(2n) {
        border-right: 0;
      }

      .cabinet-drawer:nth-child(n+5) {
        border-bottom: 0;
      }

      .archive-fragment {
        grid-template-columns: 30px 94px 1fr;
      }
    }

    @media (max-width: 640px) {
      .page {
        padding-inline: 18px;
      }

      .identity-name {
        font-size: 15px;
      }

      .identity span,
      .directions {
        font-size: 12px;
      }

      .global-player {
        margin-top: 14px;
        width: min(306px, 100%);
      }

      .music-volume { display: none; }

      .map-wrap {
        width: calc(100vw - 36px);
      }

      .preview-card {
        justify-self: center;
        max-width: 286px;
      }

      .artifact {
        gap: 15px;
        grid-template-columns: 84px 1fr;
        padding: 0;
      }

      .room-list {
        grid-template-columns: 1fr;
      }

      .room-stage {
        min-height: 430px;
      }

      .room-list li {
        min-height: auto;
      }

      .value-tokens {
        padding-inline: 8px;
      }

      .balance-pan {
        width: 112px;
      }

      .archive-fragment {
        gap: 9px;
        grid-template-columns: 26px 82px 1fr;
        padding-inline: 0;
      }

      .room[data-room="proportion"] .room-stage { min-height: 620px; }

      .room[data-room="atlas"] .room-stage { min-height: 0; }

      .room[data-room="studio"] .room-stage { min-height: 0; }

      .curator-lab { gap: 18px; padding: 16px 10px; }

      .curator-heading {
        align-items: start;
        display: grid;
        gap: 9px;
      }

      .curator-status { max-width: none; text-align: left; }

      .curator-workspace { grid-template-columns: 1fr; }

      .artist-reference {
        display: grid;
        gap: 14px;
        grid-template-columns: minmax(105px, .62fr) minmax(0, 1fr);
      }

      .artist-reference-image { aspect-ratio: 4 / 5; }

      .artist-reference figcaption { padding-top: 0; }

      .generator-canvas-wrap { min-height: 300px; }

      .curator-controls,
      .generator-reading { grid-template-columns: repeat(2, minmax(0, 1fr)); }

      .critique-lab { gap: 15px; padding: 16px 10px; }

      .critique-header {
        align-items: start;
        display: grid;
        gap: 8px;
      }

      .critique-status { max-width: none; text-align: left; }

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

      .critique-domain:nth-child(3) { border-left: 0; border-top: 1px solid #e1dad3; }
      .critique-domain:nth-child(4) { border-top: 1px solid #e1dad3; }

      .critique-workspace { grid-template-columns: 1fr; }

      .critique-canvas-wrap { aspect-ratio: 4 / 3; min-height: 320px; }

      .critique-reading {
        grid-column: auto;
        grid-template-columns: 1fr;
      }

      .critique-principle { grid-template-columns: 1fr; }

      .proportion-toolbar {
        left: 8px;
        top: 8px;
      }

      .proportion-tool,
      .proportion-overlay-button {
        font-size: 9px;
        padding: 7px 6px;
      }

      .proportion-structure {
        left: 8px;
        right: auto;
        top: 52px;
      }

      .proportion-readout {
        bottom: 124px;
        left: 8px;
        max-width: calc(100% - 16px);
        width: calc(100% - 16px);
      }

      .proportion-readout strong { font-size: 15px; }

      .proportion-panel {
        bottom: 8px;
        left: 8px;
        right: auto;
        width: calc(100% - 16px);
      }

      .proportion-color-probe { display: none !important; }

      .listening-panel { gap: 22px; padding: 18px 12px; }

      .listening-title { font-size: 25px; }

      .listening-modes {
        gap: 14px;
        grid-template-columns: repeat(3, minmax(72px, 1fr));
      }

      .listening-mode { padding-right: 0; }

      .music-timeline {
        border-bottom: 0;
        gap: 0;
        grid-template-columns: 1fr;
      }

      .music-timeline::before { display: none; }

      .timeline-work {
        border-bottom: 0;
        border-right: 0 !important;
        gap: 12px;
        grid-template-columns: 1fr;
        min-height: 154px;
        padding: 18px 34px 18px 0 !important;
      }

      .timeline-work::after { left: auto; right: 10px; top: 22px; }

      .timeline-bottom { align-self: auto; }

      .collection-reading { padding-bottom: 12px; }

      .visual-bridge { grid-template-columns: 1fr; }

      .score-line { height: 330px; }

      .score-line::before,
      .score-progress { left: 24px; top: 0; width: 1px; }

      .score-progress { height: var(--score-progress, 0%); }

      .score-cue {
        grid-template-columns: 10px 1fr auto;
        justify-items: start;
        left: 24px;
        margin-top: 0 !important;
        top: var(--cue-left);
        transform: translateY(-50%);
        width: calc(100% - 24px);
      }

      .score-cue::before { order: 0; }
      .score-cue time { order: 0; }

      .feel-canvas-wrap { height: 420px; min-height: 420px; }
      .feel-canvas { min-height: 420px; }

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

      .resonance-quality:nth-child(odd) { border-left: 0; }
      .resonance-quality:nth-child(n+3) { border-top: 1px solid #e8e2dc; }

      .listening-footer { grid-template-columns: 1fr; }

      .listening-transport { order: -1; }

      .room[data-room="lightness"] .room-stage { min-height: 0; }

      .room[data-room="fibonacci"] .room-stage { min-height: 0; }

      .room[data-room="sacred"] .room-stage { min-height: 0; }

      .light-study { gap: 22px; padding: 18px 12px; }

      .light-chapters {
        gap: 8px;
        grid-template-columns: repeat(5, minmax(0, 1fr));
      }

      .light-chapter { padding-right: 0; }

      .light-chapter-name { font-size: 10px; }

      .light-gallery {
        grid-template-columns: repeat(6, minmax(112px, 1fr));
        overflow-x: auto;
        padding-bottom: 15px;
      }

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

      .light-canvas-shell { height: auto; max-height: none; }

      .light-reading h3 { font-size: 23px; }

      .light-control-row { grid-template-columns: 70px minmax(90px, 1fr) auto; }

      .fibonacci-study { gap: 22px; padding: 18px 12px; }

      .fib-chapters {
        gap: 14px;
        grid-template-columns: repeat(5, minmax(58px, 1fr));
        overflow-x: auto;
      }

      .fib-chapter-name { font-size: 10px; }

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

      .fib-canvas-shell { min-height: 330px; }

      .fib-reading h3 { font-size: 23px; }

      .fib-control-row { grid-template-columns: 70px minmax(90px, 1fr) auto; }

      .sacred-study { gap: 22px; padding: 18px 12px; }

      .sacred-path {
        gap: 14px;
        grid-template-columns: repeat(6, minmax(74px, 1fr));
        overflow-x: auto;
      }

      .sacred-station-name { font-size: 11px; }

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

      .sacred-image-shell { height: min(68vh, 620px); min-height: 390px; }

      .sacred-reading h3 { font-size: 25px; }

      .sacred-sources { grid-template-columns: 1fr; }

      .sacred-control-row { grid-template-columns: 70px minmax(90px, 1fr) auto; }
    }

    /* Proportions shares the editorial system established by On Lightness. */
    .room[data-room="proportion"] .room-stage {
      border: 0;
      box-shadow: none;
      min-height: 680px;
      overflow: visible;
      touch-action: pan-y;
    }

    .room[data-room="proportion"] .room-stage::before,
    .room[data-room="proportion"] .room-stage::after { display: none; }

    .room[data-room="proportion"] .room-panel { gap: 18px; }
    .room[data-room="proportion"] .room-main { display: block; }

    .room[data-room="proportion"] .room-intro,
    .room[data-room="proportion"] .room-list { display: none; }

    .room[data-room="proportion"] .room-title {
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: clamp(23px, 2vw, 28px);
      font-weight: 400;
      line-height: 1.12;
    }

    .room[data-room="proportion"] .room-kicker,
    .room[data-room="proportion"] .room-reflection {
      font-family: var(--mono);
      font-size: 10px;
      font-style: normal;
      line-height: 1.45;
    }

    .proportion-study {
      --proportion-accent: #8b6a49;
      display: grid;
      font-family: var(--mono);
      gap: clamp(24px, 3vw, 38px);
      min-height: 100%;
      padding: clamp(20px, 2.7vw, 38px);
    }

    .proportion-work-selector {
      border-bottom: 1px solid #ded7cf;
      border-top: 1px solid #ded7cf;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .proportion-work-button {
      background: transparent;
      border: 0;
      border-left: 1px solid #e4ddd6;
      color: #81776e;
      cursor: pointer;
      display: grid;
      gap: 5px;
      min-height: 58px;
      padding: 10px 13px;
      position: relative;
      text-align: left;
    }

    .proportion-work-button:first-child { border-left: 0; }

    .proportion-work-button span {
      color: #a1978e;
      font-family: var(--mono);
      font-size: 8px;
    }

    .proportion-work-button strong {
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 13px;
      font-weight: 400;
    }

    .proportion-work-button::after {
      background: var(--proportion-accent);
      bottom: -1px;
      content: "";
      height: 1px;
      left: 13px;
      position: absolute;
      right: 13px;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 180ms ease;
    }

    .proportion-work-button:hover::after,
    .proportion-work-button:focus-visible::after,
    .proportion-work-button.is-active::after { transform: scaleX(1); }

    .proportion-work-button.is-active { color: #211d19; }

    .proportion-toolbar {
      backdrop-filter: none;
      background: transparent;
      border-bottom: 1px solid #ded7cf;
      border-top: 1px solid #ded7cf;
      box-shadow: none;
      display: grid;
      gap: 0;
      grid-template-columns: repeat(3, minmax(92px, 1fr));
      inset: auto;
      padding: 11px 0 0;
      position: relative;
      width: 100%;
    }

    .proportion-tool {
      background: transparent;
      color: #847b73;
      display: grid;
      gap: 5px;
      justify-items: start;
      padding: 0 12px 12px 0;
      position: relative;
      text-align: left;
    }

    .proportion-tool::after {
      background: var(--proportion-accent);
      bottom: -1px;
      content: "";
      height: 1px;
      left: 0;
      position: absolute;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 180ms ease;
      width: min(76px, 72%);
    }

    .proportion-tool.is-active {
      background: transparent;
      color: #1f1b17;
    }

    .proportion-tool.is-active::after { transform: scaleX(1); }

    .proportion-tool-index {
      color: var(--proportion-accent);
      font-size: 9px;
    }

    .proportion-tool-name {
      font-size: 11px;
      text-transform: lowercase;
    }

    .proportion-article {
      align-items: stretch;
      display: grid;
      gap: clamp(28px, 4vw, 62px);
      grid-template-columns: minmax(380px, 1.35fr) minmax(270px, .65fr);
      min-height: 610px;
    }

    .proportion-figure {
      align-content: start;
      align-self: start;
      display: grid;
      gap: 11px;
      margin: 0;
      min-width: 0;
    }

    .proportion-lab {
      background: #d7c9b5;
      height: clamp(520px, 67vh, 700px);
      isolation: isolate;
      overflow: hidden;
      position: relative;
      width: 100%;
    }

    .proportion-figure figcaption {
      color: #746b63;
      display: flex;
      font-family: var(--mono);
      font-size: 8px;
      justify-content: space-between;
      line-height: 1.45;
    }

    .proportion-reading {
      align-content: start;
      border-top: 1px solid #ded7cf;
      display: grid;
      gap: 22px;
      padding-top: 16px;
    }

    .proportion-definition {
      display: grid;
      gap: 8px;
    }

    .proportion-definition h3 {
      color: #2b2621;
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: clamp(23px, 2vw, 28px);
      font-weight: 400;
      line-height: 1.08;
      margin: 0;
    }

    .proportion-definition p {
      color: #4f4740;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 14px;
      line-height: 1.55;
      margin: 0;
      max-width: 350px;
    }

    .proportion-readout,
    .proportion-panel,
    .proportion-structure {
      backdrop-filter: none;
      background: transparent;
      box-shadow: none;
      inset: auto;
      max-width: none;
      position: relative;
      width: auto;
    }

    .proportion-readout {
      color: #39332e;
      padding: 0;
    }

    .proportion-readout-kicker,
    .proportion-panel-label,
    .proportion-structure-label {
      color: var(--proportion-accent);
      font-family: var(--mono);
      font-size: 10px;
      line-height: 1.45;
      margin: 0 0 8px;
      text-transform: lowercase;
    }

    .proportion-readout strong {
      display: block;
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: clamp(23px, 2vw, 28px);
      font-weight: 400;
      line-height: 1.12;
    }

    .proportion-readout-detail {
      color: #48413b;
      display: block;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 15px;
      line-height: 1.58;
      margin-top: 13px;
      max-width: 330px;
    }

    .proportion-panel {
      border-bottom: 1px solid #e3ddd6;
      border-top: 1px solid #e3ddd6;
      min-height: 0;
      padding: 15px 0;
    }

    .proportion-panel-section { display: none; }
    .proportion-study[data-tool="explore"] [data-panel="explore"],
    .proportion-study[data-tool="measure"] [data-panel="measure"],
    .proportion-study[data-tool="color"] [data-panel="color"] { display: block; }

    .proportion-guided-study {
      display: grid;
      gap: 13px;
    }

    .proportion-lesson-head,
    .proportion-ratio-head,
    .proportion-view-tools {
      align-items: center;
      display: flex;
      justify-content: space-between;
    }

    .proportion-lesson-count,
    .proportion-ratio-head span,
    .proportion-making-note span,
    .proportion-view-tools > span {
      color: var(--proportion-accent);
      font-family: var(--mono);
      font-size: 8px;
      line-height: 1.45;
      text-transform: lowercase;
    }

    .proportion-lesson-nav { display: inline-flex; gap: 5px; }

    .proportion-lesson-button {
      align-items: center;
      background: transparent;
      border: 1px solid #cfc6bd;
      color: #4f4740;
      cursor: pointer;
      display: inline-flex;
      font-size: 13px;
      height: 25px;
      justify-content: center;
      padding: 0;
      width: 25px;
    }

    .proportion-lesson-button:hover,
    .proportion-lesson-button:focus-visible {
      border-color: var(--proportion-accent);
      color: var(--proportion-accent);
    }

    .proportion-guide-options {
      display: flex;
      flex-wrap: wrap;
      gap: 7px 15px;
    }

    .proportion-guide-button {
      background: transparent;
      border: 0;
      border-bottom: 1px solid transparent;
      color: #766d65;
      cursor: pointer;
      font-family: var(--mono);
      font-size: 9px;
      padding: 0 0 3px;
    }

    .proportion-guide-button.is-active {
      border-bottom-color: var(--proportion-accent);
      color: #211d19;
    }

    .proportion-ratio-lab,
    .proportion-making-note,
    .proportion-view-tools {
      border-top: 1px solid #e5ded7;
      padding-top: 12px;
    }

    .proportion-ratio-lab {
      display: none;
      gap: 9px;
    }

    .proportion-ratio-lab.is-visible { display: grid; }

    .proportion-ratio-head strong {
      color: #302a25;
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 400;
    }

    .proportion-ratio-bars {
      display: grid;
      gap: 5px;
    }

    .proportion-ratio-bar {
      align-items: center;
      display: grid;
      gap: 8px;
      grid-template-columns: 42px minmax(0, 1fr);
    }

    .proportion-ratio-bar span {
      color: #827870;
      font-family: var(--mono);
      font-size: 8px;
    }

    .proportion-ratio-track {
      background: #e7e1da;
      height: 5px;
      overflow: hidden;
    }

    .proportion-ratio-fill {
      background: var(--proportion-accent);
      height: 100%;
      transform-origin: left;
      width: var(--ratio-width, 50%);
    }

    .proportion-ratio-input {
      accent-color: var(--proportion-accent);
      cursor: ew-resize;
      margin: 0;
      width: 100%;
    }

    .proportion-ratio-feedback {
      color: #6f665e;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 12px;
      line-height: 1.45;
      margin: 0;
    }

    .proportion-making-note {
      display: grid;
      gap: 5px;
    }

    .proportion-making-note p {
      color: #4f4740;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 13px;
      font-style: italic;
      line-height: 1.5;
      margin: 0;
    }

    .proportion-view-tools { gap: 12px; }

    .proportion-icon-button {
      border-color: #cfc6bd;
      height: 28px;
      transition: border-color 150ms ease, color 150ms ease;
      width: 28px;
    }

    .proportion-icon-button:hover,
    .proportion-icon-button:focus-visible {
      border-color: var(--proportion-accent);
      color: var(--proportion-accent);
    }

    .proportion-structure {
      align-items: stretch;
      border-top: 1px solid #e3ddd6;
      display: grid;
      padding: 15px 0 0;
    }

    .proportion-overlay-options {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 16px;
    }

    .proportion-overlay-button {
      border-bottom: 1px solid transparent;
      color: #756c64;
      padding: 0 0 4px;
    }

    .proportion-overlay-button.is-active {
      background: transparent;
      border-bottom-color: var(--proportion-accent);
      color: #1f1b17;
    }

    .proportion-observation {
      border-left: 1px solid var(--proportion-accent);
      color: #4f4740;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 14px;
      font-style: italic;
      line-height: 1.55;
      margin: 0;
      max-width: 330px;
      padding-left: 14px;
    }

    .proportion-evidence-note {
      border-top: 1px solid #e3ddd6;
      color: #655d56;
      display: grid;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 12px;
      gap: 7px;
      line-height: 1.5;
      padding-top: 13px;
    }

    .proportion-evidence-note span {
      color: var(--proportion-accent);
      font-family: var(--mono);
      font-size: 8px;
    }

    .proportion-evidence-note p { margin: 0; }

    .color-name {
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: 19px;
      font-weight: 400;
    }

    .proportion-source-notes {
      align-items: center;
      border-top: 1px solid #ded7cf;
      color: #817870;
      display: flex;
      font-family: var(--mono);
      font-size: 8px;
      gap: 18px;
      justify-content: space-between;
      padding-top: 12px;
    }

    .proportion-source-notes a {
      color: inherit;
      text-underline-offset: 3px;
    }

    .proportion-source-links { display: flex; flex-wrap: wrap; gap: 12px; }

    @media (max-width: 980px) {
      .proportion-article {
        grid-template-columns: minmax(310px, .95fr) minmax(260px, 1.05fr);
      }
    }

    @media (max-width: 820px) {
      .room[data-room="proportion"] .room-stage { min-height: 0; }

      .proportion-study { gap: 22px; padding: 18px 12px; }

      .proportion-toolbar {
        gap: 14px;
        grid-template-columns: repeat(3, minmax(76px, 1fr));
        overflow-x: auto;
      }

      .proportion-tool { padding-right: 0; }

      .proportion-article { grid-template-columns: 1fr; min-height: 0; }

      .proportion-lab { height: min(69vh, 620px); }

      .proportion-reading { padding-bottom: 8px; }
    }

    @media (max-width: 520px) {
      .proportion-work-selector { grid-template-columns: 1fr; }
      .proportion-work-button { border-left: 0; border-top: 1px solid #e4ddd6; }
      .proportion-work-button:first-child { border-top: 0; }
      .proportion-lab { height: min(62vh, 520px); min-height: 410px; }

      .proportion-readout strong { font-size: 23px; }

      .proportion-figure figcaption {
        display: grid;
        gap: 3px;
      }

      .measure-options { align-items: flex-start; gap: 9px; }

      .proportion-source-notes {
        align-items: start;
        display: grid;
        gap: 5px;
      }
    }

    /* Studio becomes an editorial critique exercise, not a dashboard. */
    .room[data-room="studio"] .room-stage {
      background: #fff;
      border: 0;
      box-shadow: none;
      min-height: 680px;
      overflow: visible;
      touch-action: pan-y;
    }

    .room[data-room="studio"] .room-panel { gap: 18px; }
    .room[data-room="studio"] .room-main { display: block; }

    .room[data-room="studio"] .room-intro,
    .room[data-room="studio"] .room-list { display: none; }

    .room[data-room="studio"] .room-title {
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: clamp(23px, 2vw, 28px);
      font-weight: 400;
      line-height: 1.12;
    }

    .room[data-room="studio"] .room-kicker,
    .room[data-room="studio"] .room-reflection {
      font-family: var(--mono);
      font-size: 10px;
      font-style: normal;
      line-height: 1.45;
    }

    .transformation-studio {
      color: #29241f;
      display: grid;
      gap: clamp(24px, 3vw, 38px);
      min-height: 100%;
      padding: clamp(20px, 2.7vw, 38px);
    }

    .transformation-opening {
      align-items: end;
      display: grid;
      gap: 26px;
      grid-template-columns: minmax(360px, 1.3fr) minmax(260px, .7fr);
    }

    .transformation-opening h3 {
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: clamp(34px, 3.8vw, 58px);
      font-weight: 400;
      line-height: 1;
      margin: 0;
      max-width: 820px;
    }

    .transformation-opening p {
      color: #665d55;
      font-family: var(--mono);
      font-size: 9px;
      line-height: 1.65;
      margin: 0;
      max-width: 390px;
    }

    .impulse-rail {
      align-items: stretch;
      border-bottom: 1px solid #ddd6cf;
      border-top: 1px solid #ddd6cf;
      display: grid;
      grid-template-columns: 130px repeat(4, minmax(100px, 1fr));
    }

    .impulse-rail-label {
      align-items: center;
      color: #8f857b;
      display: flex;
      font-family: var(--mono);
      font-size: 8px;
      padding: 11px 12px 11px 0;
    }

    .impulse-choice {
      background: transparent;
      border: 0;
      border-left: 1px solid #e4ddd6;
      color: #716860;
      cursor: pointer;
      font-family: Baskerville, "Iowan Old Style", Georgia, serif;
      font-size: 14px;
      min-height: 54px;
      padding: 10px 13px;
      position: relative;
      text-align: left;
    }

    .impulse-choice::after {
      background: var(--room-accent);
      bottom: -1px;
      content: "";
      height: 1px;
      left: 13px;
      position: absolute;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 180ms ease;
      width: calc(100% - 26px);
    }

    .impulse-choice:hover::after,
    .impulse-choice:focus-visible::after,
    .impulse-choice.is-active::after { transform: scaleX(1); }

    .impulse-choice.is-active { color: #211d19; }

    .transformation-modes {
      border-bottom: 1px solid #d8d1ca;
      border-top: 1px solid #d8d1ca;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .transformation-mode {
      background: transparent;
      border: 0;
      border-left: 1px solid #e2dbd4;
      color: #786f67;
      cursor: pointer;
      display: grid;
      gap: 5px;
      min-height: 88px;
      padding: 12px 14px 13px;
      position: relative;
      text-align: left;
    }

    .transformation-mode:first-child { border-left: 0; }

    .transformation-mode::after {
      background: var(--mode-color, var(--room-accent));
      bottom: -1px;
      content: "";
      height: 1px;
      left: 14px;
      position: absolute;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 180ms ease;
      width: calc(100% - 28px);
    }

    .transformation-mode:hover::after,
    .transformation-mode:focus-visible::after,
    .transformation-mode.is-active::after { transform: scaleX(1); }

    .transformation-mode.is-active { color: #201b17; }

    .transformation-mode-index,
    .transformation-mode-field {
      color: #9a9087;
      font-family: var(--mono);
      font-size: 8px;
    }

    .transformation-mode-action {
      color: currentColor;
      font-family: Baskerville, "Iowan Old Style", Georgia, serif;
      font-size: 17px;
      font-weight: 400;
      line-height: 1.1;
    }

    .transformation-workbench {
      align-items: start;
      display: grid;
      gap: clamp(28px, 4vw, 62px);
      grid-template-columns: minmax(420px, 1.25fr) minmax(290px, .75fr);
    }

    .transformation-figure {
      display: grid;
      gap: 9px;
      margin: 0;
      min-width: 0;
    }

    .transformation-canvas-shell {
      background: #f5f2ec;
      height: clamp(480px, 58vh, 630px);
      overflow: hidden;
      position: relative;
    }

    .transformation-image {
      display: block;
      filter: saturate(.86) contrast(.98) brightness(1.01);
      height: 100%;
      object-fit: contain;
      object-position: center;
      position: absolute;
      transition: filter 260ms ease, opacity 180ms ease, object-position 320ms ease;
      width: 100%;
    }

    .transformation-studio[data-impulse="remember"] .transformation-image { object-position: 50% 48%; }
    .transformation-studio[data-impulse="understand"] .transformation-image { object-position: 50% 48%; }
    .transformation-studio[data-impulse="belong"] .transformation-image { object-position: 50% 72%; }
    .transformation-studio[data-impulse="heal"] .transformation-image { object-position: 50% 50%; }

    .transformation-studio[data-mode="art"] .transformation-image { filter: saturate(.9) contrast(.99) brightness(1.01); }
    .transformation-studio[data-mode="design"] .transformation-image { filter: grayscale(.62) sepia(.08) contrast(.92) brightness(1.08); }
    .transformation-studio[data-mode="digital"] .transformation-image { filter: saturate(.54) contrast(.98) brightness(1.04); }
    .transformation-studio[data-mode="tech"] .transformation-image { filter: grayscale(.78) sepia(.16) contrast(.94) brightness(1.07); }

    .transformation-canvas {
      cursor: crosshair;
      height: 100%;
      inset: 0;
      position: absolute;
      touch-action: pan-y;
      width: 100%;
      z-index: 1;
    }

    .transformation-caption {
      color: #756c64;
      display: flex;
      font-family: var(--mono);
      font-size: 8px;
      gap: 20px;
      justify-content: space-between;
      line-height: 1.5;
    }

    .transformation-caption strong {
      color: #332d28;
      font-weight: 400;
    }

    .transformation-reading {
      align-content: start;
      border-top: 1px solid #d9d2cb;
      display: grid;
      gap: 18px;
      padding-top: 14px;
    }

    .transformation-equation,
    .transformation-section-label,
    .transformation-result-label,
    .distinction-index,
    .distinction-field {
      color: var(--mode-color, var(--room-accent));
      font-family: var(--mono);
      font-size: 8px;
      line-height: 1.45;
    }

    .transformation-reading h4 {
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: clamp(32px, 3.2vw, 48px);
      font-weight: 400;
      line-height: 1;
      margin: 0;
    }

    .transformation-brief {
      color: #4d453e;
      font-family: Baskerville, "Iowan Old Style", Georgia, serif;
      font-size: 17px;
      line-height: 1.55;
      margin: 0;
    }

    .transformation-test {
      border-left: 1px solid var(--mode-color, var(--room-accent));
      display: grid;
      gap: 7px;
      padding: 2px 0 2px 14px;
    }

    .transformation-test p {
      color: #403831;
      font-family: Baskerville, "Iowan Old Style", Georgia, serif;
      font-size: 15px;
      font-style: italic;
      line-height: 1.5;
      margin: 0;
    }

    .transformation-control {
      border-bottom: 1px solid #ddd6cf;
      border-top: 1px solid #ddd6cf;
      display: grid;
      gap: 10px;
      padding: 13px 0 15px;
    }

    .transformation-control-head,
    .transformation-control-ends {
      align-items: center;
      display: flex;
      gap: 16px;
      justify-content: space-between;
    }

    .transformation-control-head label,
    .transformation-control-output,
    .transformation-control-ends {
      color: #6f665f;
      font-family: var(--mono);
      font-size: 8px;
      line-height: 1.4;
    }

    .transformation-control-output { color: #2d2722; }

    .transformation-range {
      accent-color: var(--mode-color, var(--room-accent));
      cursor: ew-resize;
      margin: 0;
      width: 100%;
    }

    .transformation-result {
      display: grid;
      gap: 7px;
      min-height: 70px;
    }

    .transformation-result p {
      color: #5a5149;
      font-family: var(--mono);
      font-size: 9px;
      line-height: 1.6;
      margin: 0;
    }

    .transformation-version {
      align-items: center;
      background: transparent;
      border: 1px solid #cfc7bf;
      color: #413a34;
      cursor: pointer;
      display: inline-flex;
      font-family: var(--mono);
      font-size: 16px;
      height: 34px;
      justify-content: center;
      justify-self: start;
      padding: 0;
      transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
      width: 34px;
    }

    .transformation-version:hover,
    .transformation-version:focus-visible {
      border-color: var(--mode-color, var(--room-accent));
      color: #1f1a16;
      transform: rotate(12deg);
    }

    .transformation-distinctions {
      border-bottom: 1px solid #d9d2cb;
      border-top: 1px solid #d9d2cb;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .transformation-distinction {
      border-left: 1px solid #e2dbd4;
      display: grid;
      gap: 7px;
      min-height: 108px;
      padding: 13px 15px;
    }

    .transformation-distinction:first-child { border-left: 0; }

    .transformation-distinction strong {
      color: #2f2924;
      font-family: Baskerville, "Iowan Old Style", Georgia, serif;
      font-size: 15px;
      font-weight: 400;
      line-height: 1.35;
    }

    @media (max-width: 900px) {
      .transformation-opening,
      .transformation-workbench { grid-template-columns: 1fr; }
      .transformation-opening p { max-width: 680px; }
      .transformation-reading { max-width: 720px; }
    }

    @media (max-width: 640px) {
      .transformation-studio { gap: 22px; padding: 16px 12px 24px; }
      .transformation-opening h3 { font-size: 38px; }
      .impulse-rail { display: flex; overflow-x: auto; }
      .impulse-rail-label { flex: 0 0 98px; }
      .impulse-choice { flex: 0 0 104px; }
      .transformation-modes { overflow-x: auto; }
      .transformation-mode { min-width: 132px; }
      .transformation-canvas-shell { height: min(64vh, 520px); min-height: 420px; }
      .transformation-caption { display: grid; gap: 4px; }
      .transformation-distinctions { grid-template-columns: 1fr 1fr; }
      .transformation-distinction:nth-child(3) { border-left: 0; border-top: 1px solid #e2dbd4; }
      .transformation-distinction:nth-child(4) { border-top: 1px solid #e2dbd4; }
    }

    /* Studio II: four distinct instruments carried across one evolving image. */
    .studio-instrument .transformation-opening { align-items: start; }

    .studio-instrument .transformation-opening p {
      font-family: Baskerville, "Iowan Old Style", Georgia, serif;
      font-size: 16px;
      line-height: 1.55;
    }

    .studio-instrument .transformation-mode { min-height: 78px; }

    .studio-instrument .transformation-mode-field {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .studio-instrument .transformation-canvas-shell {
      background: #f7f5f0;
      box-shadow: inset 0 0 0 1px rgba(76, 66, 58, .08);
      cursor: crosshair;
    }

    .studio-instrument .transformation-image {
      opacity: 0;
      pointer-events: none;
    }

    .studio-instrument .transformation-canvas { touch-action: none; }

    .studio-instrument[data-stage="notice"] .transformation-canvas { cursor: zoom-in; }
    .studio-instrument[data-stage="trace"] .transformation-canvas { cursor: crosshair; }
    .studio-instrument[data-stage="translate"] .transformation-canvas { cursor: ew-resize; }
    .studio-instrument[data-stage="edit"] .transformation-canvas { cursor: move; }
    .studio-instrument[data-stage="edit"][data-compare="true"] .transformation-canvas { cursor: default; }

    .studio-tool-intro {
      color: #766d65;
      font-family: var(--mono);
      font-size: 8px;
      line-height: 1.55;
      margin: -8px 0 0;
    }

    .studio-tool-controls {
      border-bottom: 1px solid #ddd6cf;
      border-top: 1px solid #ddd6cf;
      display: grid;
      gap: 13px;
      padding: 14px 0 15px;
    }

    .studio-tool-control {
      display: grid;
      gap: 7px;
    }

    .studio-tool-control header,
    .studio-tool-scale,
    .studio-measure-ledger header {
      align-items: center;
      display: flex;
      gap: 12px;
      justify-content: space-between;
    }

    .studio-tool-control label,
    .studio-tool-control output,
    .studio-tool-scale,
    .studio-measure-ledger header,
    .studio-ledger-cell span,
    .studio-tool-actions button {
      color: #736a62;
      font-family: var(--mono);
      font-size: 8px;
      line-height: 1.4;
    }

    .studio-tool-control output { color: #2d2722; }

    .studio-tool-control input[type="range"] {
      accent-color: var(--mode-color, var(--room-accent));
      cursor: ew-resize;
      margin: 0;
      width: 100%;
    }

    .studio-tool-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: -3px;
    }

    .studio-tool-actions button {
      background: transparent;
      border: 1px solid #d4ccc4;
      color: #3e3731;
      cursor: pointer;
      min-height: 31px;
      padding: 6px 10px;
      transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
    }

    .studio-tool-actions button:hover,
    .studio-tool-actions button:focus-visible,
    .studio-tool-actions button.is-active {
      background: color-mix(in srgb, var(--mode-color, var(--room-accent)) 7%, white);
      border-color: var(--mode-color, var(--room-accent));
      color: #211c18;
    }

    .studio-tool-actions--modes {
      border-top: 1px solid #e8e2dc;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-top: 1px;
      padding-top: 10px;
    }

    .studio-tool-actions--modes::before {
      color: #91877e;
      content: attr(data-label);
      grid-column: 1 / -1;
      font-family: var(--mono);
      font-size: 8px;
      line-height: 1.4;
    }

    .studio-tool-actions--modes button {
      border: 0;
      border-bottom: 1px solid #d4ccc4;
      min-width: 0;
      text-align: center;
    }

    .studio-tool-actions--modes button:hover,
    .studio-tool-actions--modes button:focus-visible,
    .studio-tool-actions--modes button.is-active {
      background: transparent;
      border-bottom-color: var(--mode-color, var(--room-accent));
    }

    .studio-instrument[data-stage="edit"][data-compare="true"] .studio-tool-hint {
      background: rgba(255, 255, 255, .86);
      padding: 4px 6px;
    }

    .studio-instrument[data-source="line"] .transformation-figure {
      justify-self: center;
      max-width: 600px;
      width: 100%;
    }

    .studio-instrument[data-source="line"] .transformation-canvas-shell {
      aspect-ratio: 600 / 722;
      background: #eee8dc;
      height: auto;
    }

    .studio-instrument[data-source="line"] .transformation-canvas-shell::after {
      border: 1px solid rgba(114, 91, 69, .1);
      content: "";
      inset: 10px;
      pointer-events: none;
      position: absolute;
      z-index: 2;
    }

    .studio-measure-ledger {
      border-bottom: 1px solid #ddd6cf;
      display: grid;
      gap: 9px;
      padding: 0 0 14px;
    }

    .studio-measure-ledger header span:last-child { color: var(--mode-color, var(--room-accent)); }

    .studio-ledger-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .studio-ledger-cell {
      border-left: 1px solid #e1dad3;
      display: grid;
      gap: 5px;
      min-height: 55px;
      padding: 7px 10px;
    }

    .studio-ledger-cell:first-child { border-left: 0; padding-left: 0; }

    .studio-ledger-cell strong {
      color: #302a25;
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 400;
      line-height: 1.4;
    }

    .studio-tool-hint {
      bottom: 13px;
      color: rgba(48, 42, 37, .72);
      font-family: var(--mono);
      font-size: 8px;
      left: 14px;
      line-height: 1.4;
      pointer-events: none;
      position: absolute;
      z-index: 2;
    }

    .studio-next-stage {
      align-items: center;
      background: transparent;
      border: 0;
      border-bottom: 1px solid var(--mode-color, var(--room-accent));
      color: #332d28;
      cursor: pointer;
      display: inline-flex;
      font-family: var(--mono);
      font-size: 9px;
      gap: 12px;
      justify-self: start;
      padding: 7px 0;
    }

    .studio-next-stage span { color: var(--mode-color, var(--room-accent)); }

    .studio-instrument .transformation-result { min-height: 54px; }

    @media (max-width: 640px) {
      .studio-instrument .transformation-opening p { font-size: 15px; }
      .studio-instrument[data-source="line"] .transformation-canvas-shell {
        aspect-ratio: 600 / 722;
        height: auto;
        min-height: 0;
      }
      .studio-ledger-grid { grid-template-columns: 1fr; }
      .studio-ledger-cell { border-left: 0; border-top: 1px solid #e1dad3; padding-left: 0; }
      .studio-ledger-cell:first-child { border-top: 0; }
    }

    .critique-lab {
      color: #2e2925;
      display: grid;
      gap: clamp(24px, 3vw, 38px);
      min-height: 100%;
      padding: clamp(20px, 2.7vw, 38px);
    }

    .critique-domains {
      border-bottom: 1px solid #ded7cf;
      border-top: 1px solid #ded7cf;
      display: grid;
      gap: 0;
      grid-template-columns: repeat(4, minmax(92px, 1fr));
      padding-top: 11px;
    }

    .critique-domain {
      background: transparent;
      border: 0;
      color: #847b73;
      display: grid;
      font-family: var(--mono);
      gap: 5px;
      justify-items: start;
      min-height: 0;
      padding: 0 12px 12px 0;
      text-align: left;
    }

    .critique-domain::after {
      background: var(--room-accent);
      bottom: -1px;
      height: 1px;
      left: 0;
      right: auto;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 180ms ease;
      width: min(82px, 72%);
    }

    .critique-domain:hover::after,
    .critique-domain:focus-visible::after,
    .critique-domain.is-active::after {
      background: var(--room-accent);
      transform: scaleX(1);
    }

    .critique-domain:focus-visible {
      outline: 1px solid #918980;
      outline-offset: -1px;
    }

    .critique-domain-index {
      color: var(--room-accent);
      font-size: 9px;
    }

    .critique-domain-name {
      color: #716961;
      font-size: 11px;
      text-transform: lowercase;
    }

    .critique-domain.is-active .critique-domain-name { color: #1f1b17; }

    .critique-article {
      align-items: stretch;
      display: grid;
      gap: clamp(28px, 4vw, 62px);
      grid-template-columns: minmax(380px, 1.35fr) minmax(290px, .65fr);
      min-height: 610px;
    }

    .critique-specimen {
      align-content: start;
      align-self: start;
      background: transparent;
      display: grid;
      gap: 11px;
      margin: 0;
      min-width: 0;
    }

    .critique-canvas-wrap {
      aspect-ratio: auto;
      background: #f7f6f2;
      height: clamp(470px, 58vh, 620px);
      min-height: 0;
      overflow: hidden;
      position: relative;
    }

    .critique-masterwork {
      display: block;
      filter: saturate(.82) contrast(.96) brightness(1.04);
      height: 100%;
      inset: 0;
      object-fit: cover;
      object-position: center;
      position: absolute;
      transform: scale(1.015);
      transition: filter 260ms ease, opacity 220ms ease;
      width: 100%;
    }

    .critique-lab[data-domain="art"] .critique-masterwork { object-position: 50% 76%; }
    .critique-lab[data-domain="design"] .critique-masterwork { object-position: 50% 52%; }
    .critique-lab[data-domain="digital"] .critique-masterwork { object-position: 50% 50%; }
    .critique-lab[data-domain="tech"] .critique-masterwork { object-position: 50% 48%; }
    .critique-lab:not([data-domain="art"]) .critique-masterwork { filter: saturate(.86) contrast(.98) brightness(1.01); }

    .critique-canvas {
      position: relative;
      z-index: 1;
    }

    .specimen-caption {
      align-items: start;
      background: transparent;
      bottom: auto;
      display: flex;
      justify-content: space-between;
      left: auto;
      max-width: none;
      padding: 0;
      position: relative;
    }

    .specimen-caption > span:first-child { display: grid; gap: 3px; }

    .specimen-kicker,
    .critique-status {
      color: #817870;
      font-family: var(--mono);
      font-size: 8px;
      line-height: 1.45;
    }

    .specimen-title {
      color: #403832;
      font-family: var(--mono);
      font-size: 8px;
      font-weight: 400;
      line-height: 1.45;
    }

    .critique-status {
      max-width: 230px;
      text-align: right;
    }

    .critique-editorial {
      align-content: start;
      border-top: 1px solid #ded7cf;
      display: grid;
      gap: 20px;
      padding-top: 16px;
    }

    .critique-eyebrow,
    .brief-label,
    .critique-section-label,
    .critique-principle-label {
      color: var(--room-accent);
      font-family: var(--mono);
      font-size: 10px;
      line-height: 1.45;
      margin: 0;
    }

    .critique-domain-question {
      color: #29241f;
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: clamp(25px, 2.4vw, 33px);
      font-weight: 400;
      line-height: 1.06;
      margin: -7px 0 -8px;
    }

    .critique-domain-note {
      color: #48413b;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 15px;
      line-height: 1.58;
      margin: -8px 0 0;
      max-width: 340px;
    }

    .critique-greatness {
      border-left: 1px solid var(--room-accent);
      display: grid;
      gap: 7px;
      padding: 1px 0 1px 14px;
    }

    .critique-greatness p {
      color: #4f4740;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 14px;
      font-style: italic;
      line-height: 1.54;
      margin: 0;
      max-width: 350px;
    }

    .critique-brief {
      align-items: start;
      background: transparent;
      border-top: 1px solid #e3ddd6;
      display: grid;
      gap: 8px;
      grid-template-columns: minmax(0, 1fr) 30px;
      padding: 15px 0 0;
    }

    .brief-label { grid-column: 1; }

    .critique-brief strong {
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: clamp(23px, 2vw, 28px);
      font-weight: 400;
      grid-column: 1;
      line-height: 1.12;
    }

    .brief-context {
      color: #6a6159;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 14px;
      grid-column: 1;
      line-height: 1.5;
    }

    .brief-next {
      background: transparent;
      border: 1px solid #cfc6bd;
      grid-column: 2;
      grid-row: 1 / 4;
      height: 28px;
      width: 28px;
    }

    .critique-controls {
      border-bottom: 1px solid #e3ddd6;
      border-top: 1px solid #e3ddd6;
      gap: 12px;
      padding: 14px 0;
    }

    .critique-compare {
      border-bottom-color: #c8beb5;
      color: #71675f;
    }

    .criteria-list {
      display: grid;
      gap: 9px 16px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .criterion {
      border-top: 1px solid #e5dfd8;
      min-width: 0;
      padding-top: 8px;
    }

    .criterion-head { gap: 6px; margin-bottom: 5px; }

    .criterion-label,
    .criterion-value {
      font-family: var(--mono);
      font-size: 8px;
    }

    .criterion-note {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height 180ms ease, opacity 180ms ease;
    }

    .criterion:hover .criterion-note,
    .criterion:focus-within .criterion-note {
      max-height: 62px;
      opacity: 1;
    }

    .critique-reading {
      display: grid;
      gap: 0;
      grid-column: auto;
      grid-template-columns: 1fr;
    }

    .critique-reading-section {
      border-top: 1px solid #e3ddd6;
      padding: 11px 0;
    }

    .critique-reading-section p {
      color: #514942;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 14px;
      line-height: 1.5;
      margin: 6px 0 0;
    }

    .critique-comparison {
      background: transparent;
      border-left: 1px solid var(--room-accent);
      margin-top: 8px;
      padding: 2px 0 2px 14px;
    }

    .critique-comparison strong {
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: 19px;
      font-weight: 400;
    }

    .critique-principle {
      align-items: start;
      border-top: 1px solid #ded7cf;
      gap: 18px;
      grid-template-columns: 120px minmax(0, 1fr);
      padding-top: 12px;
    }

    .critique-principle p {
      color: #4f4740;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 14px;
      font-style: italic;
      line-height: 1.55;
      max-width: 760px;
    }

    @media (max-width: 980px) {
      .critique-article {
        grid-template-columns: minmax(310px, .95fr) minmax(290px, 1.05fr);
      }
    }

    @media (max-width: 820px) {
      .room[data-room="studio"] .room-stage { min-height: 0; }

      .critique-lab { gap: 22px; padding: 18px 12px; }

      .critique-domains {
        gap: 8px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .critique-domain { padding-right: 0; }

      .critique-article { grid-template-columns: 1fr; min-height: 0; }

      .critique-canvas-wrap { height: min(69vh, 620px); }
    }

    @media (max-width: 520px) {
      .critique-canvas-wrap { height: min(62vh, 520px); min-height: 410px; }

      .specimen-caption { display: grid; gap: 5px; }

      .critique-status { max-width: none; text-align: left; }

      .criteria-list { grid-template-columns: 1fr; }

      .critique-principle { grid-template-columns: 1fr; }
    }

    /* Editorial room family: the eight map rooms read as chapters of one gallery. */
    .room[data-room="atlas"] .room-stage,
    .room[data-room="values"] .room-stage,
    .room[data-room="signals"] .room-stage,
    .room[data-room="seed"] .room-stage,
    .room[data-room="experiments"] .room-stage,
    .room[data-room="cabinet"] .room-stage,
    .room[data-room="archive"] .room-stage {
      background: #fff;
      border: 0;
      box-shadow: none;
      min-height: 0;
      overflow: visible;
      touch-action: pan-y;
    }

    .room[data-room="atlas"] .room-stage::before,
    .room[data-room="atlas"] .room-stage::after,
    .room[data-room="values"] .room-stage::before,
    .room[data-room="values"] .room-stage::after,
    .room[data-room="signals"] .room-stage::before,
    .room[data-room="signals"] .room-stage::after,
    .room[data-room="seed"] .room-stage::before,
    .room[data-room="seed"] .room-stage::after,
    .room[data-room="experiments"] .room-stage::before,
    .room[data-room="experiments"] .room-stage::after,
    .room[data-room="cabinet"] .room-stage::before,
    .room[data-room="cabinet"] .room-stage::after,
    .room[data-room="archive"] .room-stage::before,
    .room[data-room="archive"] .room-stage::after {
      display: none;
    }

    .room[data-room="atlas"] .room-panel,
    .room[data-room="values"] .room-panel,
    .room[data-room="signals"] .room-panel,
    .room[data-room="seed"] .room-panel,
    .room[data-room="experiments"] .room-panel,
    .room[data-room="cabinet"] .room-panel,
    .room[data-room="archive"] .room-panel {
      gap: 18px;
    }

    .room[data-room="atlas"] .room-main,
    .room[data-room="values"] .room-main,
    .room[data-room="signals"] .room-main,
    .room[data-room="seed"] .room-main,
    .room[data-room="experiments"] .room-main,
    .room[data-room="cabinet"] .room-main,
    .room[data-room="archive"] .room-main {
      display: block;
    }

    .room[data-room="atlas"] .room-intro,
    .room[data-room="atlas"] .room-list,
    .room[data-room="values"] .room-intro,
    .room[data-room="values"] .room-list,
    .room[data-room="signals"] .room-intro,
    .room[data-room="signals"] .room-list,
    .room[data-room="seed"] .room-intro,
    .room[data-room="seed"] .room-list,
    .room[data-room="experiments"] .room-intro,
    .room[data-room="experiments"] .room-list,
    .room[data-room="cabinet"] .room-intro,
    .room[data-room="cabinet"] .room-list,
    .room[data-room="archive"] .room-intro,
    .room[data-room="archive"] .room-list {
      display: none;
    }

    .room[data-room="atlas"] .room-title,
    .room[data-room="values"] .room-title,
    .room[data-room="signals"] .room-title,
    .room[data-room="seed"] .room-title,
    .room[data-room="experiments"] .room-title,
    .room[data-room="cabinet"] .room-title,
    .room[data-room="archive"] .room-title {
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: clamp(23px, 2.15vw, 28px);
      line-height: 1;
    }

    .room[data-room="atlas"] .room-kicker,
    .room[data-room="values"] .room-kicker,
    .room[data-room="signals"] .room-kicker,
    .room[data-room="seed"] .room-kicker,
    .room[data-room="experiments"] .room-kicker,
    .room[data-room="cabinet"] .room-kicker,
    .room[data-room="archive"] .room-kicker {
      color: #71685f;
      font-family: var(--mono);
      font-size: 10px;
      font-style: normal;
    }

    .study-room {
      color: #2e2925;
      display: grid;
      gap: clamp(22px, 3vw, 38px);
      min-height: 100%;
    }

    .study-chapters {
      border-bottom: 1px solid #ded7cf;
      border-top: 1px solid #ded7cf;
      display: grid;
      grid-auto-columns: minmax(112px, 1fr);
      grid-auto-flow: column;
      overflow-x: auto;
      position: static;
    }

    .study-chapter,
    .value-token,
    .signal-mode,
    .experiment-tool {
      background: transparent;
      border: 0;
      border-left: 1px solid #e7e1da;
      border-radius: 0;
      color: #6a625b;
      cursor: pointer;
      display: grid;
      font-family: var(--mono);
      gap: 9px;
      justify-items: start;
      min-height: 67px;
      padding: 11px 14px 13px;
      position: relative;
      text-align: left;
    }

    .study-chapter:first-child { border-left: 0; }

    .study-chapter::after {
      background: transparent;
      bottom: -1px;
      content: "";
      height: 2px;
      left: 14px;
      position: absolute;
      right: 14px;
    }

    .study-chapter:hover,
    .study-chapter:focus-visible,
    .study-chapter.is-active,
    .study-chapter.is-selected {
      background: transparent;
      color: #2e2925;
    }

    .study-chapter:hover::after,
    .study-chapter:focus-visible::after,
    .study-chapter.is-active::after,
    .study-chapter.is-selected::after {
      background: var(--room-accent);
    }

    .study-chapter-index,
    .study-label,
    .curator-chapter-index {
      color: #9b9188;
      font-family: var(--mono);
      font-size: 9px;
      font-weight: 400;
      line-height: 1;
    }

    .study-chapter-name {
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 14px;
      font-weight: 400;
      line-height: 1;
    }

    .study-article {
      align-items: start;
      display: grid;
      gap: clamp(30px, 5vw, 78px);
      grid-template-columns: minmax(0, 1.55fr) minmax(260px, .72fr);
    }

    .study-figure { margin: 0; min-width: 0; }

    .study-field {
      background: #fbfaf7;
      min-height: clamp(440px, 57vh, 620px);
      overflow: hidden;
      position: relative;
    }

    .study-figure figcaption {
      color: #7a7169;
      font-family: var(--mono);
      font-size: 9px;
      line-height: 1.55;
      padding-top: 10px;
    }

    .study-reading {
      align-self: stretch;
      display: flex;
      flex-direction: column;
      padding: clamp(4px, 1.5vw, 22px) 0 0;
    }

    .study-label {
      color: var(--room-accent);
      display: block;
      margin-bottom: 10px;
    }

    .study-reading h3 {
      color: #29241f;
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: clamp(24px, 2.5vw, 34px);
      font-weight: 400;
      line-height: 1.08;
      margin: 0 0 16px;
    }

    .study-reading > p,
    .study-reading-note p,
    .study-principle p,
    .curator-principle p {
      color: #514942;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 15px;
      line-height: 1.58;
      margin: 0;
    }

    .study-reading-note {
      border-top: 1px solid #ded7cf;
      margin-top: auto;
      padding-top: 14px;
    }

    .study-reading-note .study-label { margin-bottom: 7px; }
    .study-reading-note p { font-size: 14px; font-style: italic; }

    .study-principle,
    .curator-principle {
      align-items: start;
      border-top: 1px solid #ded7cf;
      display: grid;
      gap: 18px;
      grid-template-columns: 120px minmax(0, 1fr);
      padding-top: 12px;
    }

    .study-principle .study-label,
    .curator-principle .study-label { margin: 3px 0 0; }

    .study-principle p,
    .curator-principle p {
      font-size: 14px;
      font-style: italic;
      max-width: 760px;
    }

    .study-field.values-field {
      align-items: center;
      display: grid;
      height: auto;
      justify-items: center;
      padding: 0;
      z-index: 0;
    }

    .values-field .balance {
      margin: 0;
      width: min(620px, 88%);
    }

    .signal-modes,
    .experiment-tools {
      gap: 0;
      left: auto;
      position: static;
      top: auto;
      z-index: auto;
    }

    .signal-field,
    .experiment-field {
      background-image: linear-gradient(#eee8e0 1px, transparent 1px), linear-gradient(90deg, #eee8e0 1px, transparent 1px);
      background-size: 25% 25%;
    }

    .signal-canvas,
    .experiment-canvas {
      cursor: crosshair;
      display: block;
      height: 100%;
      inset: 0;
      position: absolute;
      touch-action: none;
      width: 100%;
    }

    .signals-study .study-article {
      grid-template-columns: minmax(0, 1.62fr) minmax(270px, .68fr);
    }

    .signals-study .signal-field {
      background: #fbfaf7;
      background-image: none;
      border-bottom: 1px solid #ded7cf;
      border-top: 1px solid #ded7cf;
      min-height: clamp(470px, 60vh, 640px);
    }

    .signal-toolbar {
      align-items: center;
      background: rgba(251, 250, 247, .9);
      display: flex;
      gap: 2px;
      padding: 5px;
      position: absolute;
      right: 12px;
      top: 12px;
      z-index: 4;
    }

    .signal-filter {
      background: transparent;
      border: 0;
      color: #817870;
      cursor: pointer;
      font-family: var(--mono);
      font-size: 8px;
      min-height: 26px;
      padding: 0 9px;
      position: relative;
    }

    .signal-filter::after {
      background: transparent;
      bottom: 2px;
      content: "";
      height: 1px;
      left: 9px;
      position: absolute;
      right: 9px;
    }

    .signal-filter:hover,
    .signal-filter:focus-visible,
    .signal-filter.is-active { color: #29241f; }

    .signal-filter.is-active::after { background: var(--room-accent); }

    .signal-inspector {
      border-top: 1px solid #ded7cf;
      display: grid;
      gap: 0;
      margin-top: 24px;
      padding-top: 13px;
    }

    .signal-inspection-row {
      align-items: baseline;
      border-bottom: 1px solid #ece7e1;
      display: grid;
      gap: 10px;
      grid-template-columns: minmax(0, 1fr) auto;
      padding: 8px 0;
    }

    .signal-inspection-row span {
      color: #686059;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 13px;
    }

    .signal-inspection-row strong {
      color: #2d2824;
      font-family: var(--mono);
      font-size: 9px;
      font-weight: 400;
    }

    .signal-context-block {
      border-top: 1px solid #ded7cf;
      display: grid;
      gap: 10px;
      margin-top: 20px;
      padding-top: 13px;
    }

    .signal-contexts {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .signal-context {
      background: transparent;
      border: 0;
      border-bottom: 1px solid #d9d2cb;
      color: #817870;
      cursor: pointer;
      font-family: var(--mono);
      font-size: 8px;
      min-height: 30px;
      padding: 0 4px;
      position: relative;
    }

    .signal-context.is-active {
      border-bottom-color: var(--room-accent);
      color: #29241f;
    }

    .signal-context-note {
      color: #655d56;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 13px;
      font-style: italic;
      line-height: 1.48;
      margin: 0;
      min-height: 58px;
    }

    .signal-sensitivity {
      align-items: center;
      display: grid;
      gap: 11px;
      grid-template-columns: auto minmax(70px, 1fr) auto;
      margin-top: 2px;
    }

    .signal-sensitivity label,
    .signal-sensitivity output {
      color: #817870;
      font-family: var(--mono);
      font-size: 8px;
    }

    .signal-sensitivity input {
      -webkit-appearance: none;
      appearance: none;
      background: transparent;
      cursor: pointer;
      height: 16px;
      width: 100%;
    }

    .signal-sensitivity input::-webkit-slider-runnable-track {
      background: #d4cdc5;
      height: 1px;
    }

    .signal-sensitivity input::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      background: var(--room-accent);
      border: 0;
      border-radius: 50%;
      height: 8px;
      margin-top: -3px;
      width: 8px;
    }

    .signal-reading-state {
      color: var(--room-accent);
      margin-left: 4px;
    }

    @media (max-width: 820px) {
      .signals-study .study-article { grid-template-columns: 1fr; }
      .signals-study .signal-field { min-height: 480px; }
    }

    @media (max-width: 520px) {
      .signals-study .signal-field { min-height: 420px; }
      .signal-toolbar { left: 8px; right: auto; top: 8px; }
    }

    .visual-signals-study {
      color: #2e2925;
      display: grid;
      gap: 24px;
      min-height: 100%;
    }

    .visual-signal-opening {
      align-items: end;
      border-top: 1px solid #ded7cf;
      display: grid;
      gap: 28px;
      grid-template-columns: minmax(220px, .64fr) minmax(340px, 1.36fr);
      padding-top: 14px;
    }

    .visual-signal-opening h3 {
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: 31px;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.04;
      margin: 0;
    }

    .visual-signal-opening p {
      color: #574f48;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 15px;
      line-height: 1.52;
      margin: 0;
      max-width: 760px;
    }

    .visual-signal-chapters {
      grid-auto-columns: minmax(104px, 1fr);
    }

    .visual-signals-study .study-article {
      grid-template-columns: minmax(430px, 1.4fr) minmax(285px, .6fr);
    }

    .visual-signal-field {
      --signal-strength: .68;
      --signal-trace-opacity: .68;
      background: #f4f1eb;
      border-bottom: 1px solid #ded7cf;
      border-top: 1px solid #ded7cf;
      min-height: clamp(510px, 64vh, 680px);
      position: relative;
    }

    .visual-signal-toolbar {
      background: rgba(251,250,247,.91);
      display: flex;
      gap: 2px;
      padding: 5px;
      position: absolute;
      right: 12px;
      top: 12px;
      z-index: 8;
    }

    .visual-signal-lens {
      background: transparent;
      border: 0;
      color: #817870;
      cursor: pointer;
      font-family: var(--mono);
      font-size: 8px;
      min-height: 28px;
      padding: 0 10px;
      position: relative;
    }

    .visual-signal-lens::after {
      background: transparent;
      bottom: 2px;
      content: "";
      height: 1px;
      left: 10px;
      position: absolute;
      right: 10px;
    }

    .visual-signal-lens.is-active { color: #29241f; }
    .visual-signal-lens.is-active::after { background: var(--room-accent); }

    .visual-signal-art-plane {
      cursor: crosshair;
      left: 50%;
      max-height: 100%;
      max-width: 100%;
      overflow: hidden;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      transition: opacity 180ms ease;
    }

    .visual-signal-image {
      display: block;
      height: 100%;
      object-fit: contain;
      user-select: none;
      width: 100%;
    }

    .visual-signal-trace {
      height: 100%;
      inset: 0;
      opacity: 0;
      pointer-events: none;
      position: absolute;
      transition: opacity 220ms ease;
      width: 100%;
    }

    .visual-signal-field[data-revealed="true"] .visual-signal-trace { opacity: var(--signal-trace-opacity); }

    .visual-signal-trace path,
    .visual-signal-trace line,
    .visual-signal-trace circle,
    .visual-signal-trace rect {
      fill: none;
      stroke: rgba(255,255,255,.94);
      stroke-dasharray: 3 3.5;
      stroke-width: .55;
      vector-effect: non-scaling-stroke;
    }

    .visual-signal-target,
    .visual-signal-choice {
      border-radius: 50%;
      height: 25px;
      left: var(--point-x);
      pointer-events: none;
      position: absolute;
      top: var(--point-y);
      transform: translate(-50%, -50%);
      width: 25px;
    }

    .visual-signal-target {
      border: 1px solid rgba(255,255,255,.95);
      opacity: 0;
      transition: opacity 180ms ease;
    }

    .visual-signal-target::after {
      background: rgba(255,255,255,.95);
      border-radius: 50%;
      content: "";
      height: 3px;
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 3px;
    }

    .visual-signal-choice {
      border: 1px solid var(--room-accent);
      display: none;
    }

    .visual-signal-field[data-revealed="true"] .visual-signal-target { opacity: 1; }
    .visual-signal-field[data-has-choice="true"] .visual-signal-choice { display: block; }

    .visual-signal-prompt {
      background: rgba(251,250,247,.9);
      bottom: 12px;
      color: #5f5750;
      font-family: var(--mono);
      font-size: 8px;
      left: 12px;
      line-height: 1.45;
      padding: 8px 10px;
      pointer-events: none;
      position: absolute;
      z-index: 5;
    }

    .visual-signal-field[data-revealed="true"] .visual-signal-prompt { color: var(--room-accent); }

    .visual-design-demo {
      --signal-heading-size: 36px;
      --signal-gap: 24px;
      --signal-emphasis: .68;
      --signal-offset: 22px;
      background: #fbfaf7;
      display: none;
      grid-template-columns: minmax(0, 1fr) 92px;
      inset: 0;
      overflow: hidden;
      padding: 56px;
      position: absolute;
    }

    .visual-signal-field[data-lens="design"] .visual-signal-art-plane { opacity: 0; pointer-events: none; }
    .visual-signal-field[data-lens="design"] .visual-design-demo { display: grid; }
    .visual-signal-field[data-lens="design"] .visual-signal-prompt { display: none; }

    .visual-design-copy {
      align-content: center;
      display: grid;
      gap: var(--signal-gap);
      max-width: 520px;
      position: relative;
      z-index: 2;
    }

    .visual-design-kicker,
    .visual-design-index span,
    .visual-design-footer {
      color: #7e756d;
      font-family: var(--mono);
      font-size: 8px;
      line-height: 1.45;
    }

    .visual-design-copy h4 {
      color: #29241f;
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: var(--signal-heading-size);
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.02;
      margin: 0;
      max-width: 470px;
    }

    .visual-design-copy p {
      color: #5e554e;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 15px;
      line-height: 1.5;
      margin: 0;
      max-width: 390px;
    }

    .visual-design-index {
      align-content: center;
      border-left: 1px solid #ded7cf;
      display: grid;
      gap: var(--signal-gap);
      justify-items: center;
    }

    .visual-design-index i {
      background: var(--room-accent);
      display: block;
      height: 1px;
      opacity: var(--signal-emphasis);
      transform: translateX(var(--signal-index-offset, 0));
      transition: opacity 180ms ease, transform 220ms ease, width 220ms ease;
      width: var(--signal-index-width, 42px);
    }

    .visual-design-emphasis {
      background: var(--room-accent);
      height: 82px;
      left: calc(10% + var(--signal-offset));
      opacity: calc(var(--signal-emphasis) * .13);
      position: absolute;
      top: 35%;
      transform: translateY(-50%);
      transition: left 220ms ease, opacity 180ms ease, width 220ms ease;
      width: var(--signal-emphasis-width, 210px);
      z-index: 1;
    }

    .visual-design-footer {
      bottom: 20px;
      left: 56px;
      position: absolute;
    }

    .visual-signal-field[data-signal="gaze"] .visual-design-index i:nth-of-type(1) { --signal-index-offset: -14px; }
    .visual-signal-field[data-signal="gaze"] .visual-design-index i:nth-of-type(2) { --signal-index-offset: 8px; }
    .visual-signal-field[data-signal="gaze"] .visual-design-index i:nth-of-type(3) { --signal-index-offset: -5px; }
    .visual-signal-field[data-signal="direction"] .visual-design-copy { transform: translate(var(--signal-offset), calc(var(--signal-offset) * -.42)); }
    .visual-signal-field[data-signal="rhythm"] .visual-design-index i:nth-of-type(2) { width: calc(var(--signal-index-width) * .62); }
    .visual-signal-field[data-signal="rhythm"] .visual-design-index i:nth-of-type(4) { width: calc(var(--signal-index-width) * .78); }
    .visual-signal-field[data-signal="space"] .visual-design-copy { max-width: 420px; }

    .visual-signal-reading {
      align-self: stretch;
      display: flex;
      flex-direction: column;
      padding-top: 4px;
    }

    .visual-signal-reading h3 {
      color: #29241f;
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: 33px;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.05;
      margin: 0 0 14px;
    }

    .visual-signal-copy {
      color: #514942;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 15px;
      line-height: 1.55;
      margin: 0;
    }

    .visual-signal-lessons {
      border-top: 1px solid #ded7cf;
      display: grid;
      gap: 0;
      margin-top: 22px;
    }

    .visual-signal-lesson {
      border-bottom: 1px solid #e8e2dc;
      display: grid;
      gap: 6px;
      padding: 11px 0;
    }

    .visual-signal-lesson span,
    .visual-signal-control label,
    .visual-signal-control output,
    .visual-signal-result span {
      color: #817870;
      font-family: var(--mono);
      font-size: 8px;
    }

    .visual-signal-lesson p,
    .visual-signal-result p {
      color: #554c45;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 13px;
      line-height: 1.48;
      margin: 0;
    }

    .visual-signal-control {
      border-top: 1px solid #ded7cf;
      display: grid;
      gap: 9px;
      grid-template-columns: minmax(0, 1fr) auto;
      margin-top: 19px;
      padding-top: 12px;
    }

    .visual-signal-control input {
      -webkit-appearance: none;
      appearance: none;
      background: transparent;
      cursor: pointer;
      grid-column: 1 / -1;
      height: 17px;
      width: 100%;
    }

    .visual-signal-control input::-webkit-slider-runnable-track { background: #d4cdc5; height: 1px; }
    .visual-signal-control input::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      background: var(--room-accent);
      border: 0;
      border-radius: 50%;
      height: 8px;
      margin-top: -3px;
      width: 8px;
    }

    .visual-signal-result {
      border-top: 1px solid #ded7cf;
      display: grid;
      gap: 6px;
      margin-top: 18px;
      padding-top: 12px;
    }

    .visual-signal-again {
      background: transparent;
      border: 0;
      border-bottom: 1px solid #beb5ac;
      color: #514942;
      cursor: pointer;
      font-family: var(--mono);
      font-size: 8px;
      justify-self: start;
      margin-top: 8px;
      padding: 3px 0;
    }

    .visual-signal-again[hidden] { display: none; }

    @media (max-width: 820px) {
      .visual-signal-opening,
      .visual-signals-study .study-article { grid-template-columns: 1fr; }
      .visual-signal-field { min-height: 560px; }
    }

    @media (max-width: 520px) {
      .visual-signal-opening h3 { font-size: 27px; }
      .visual-signal-field { min-height: 460px; }
      .visual-design-demo { grid-template-columns: minmax(0, 1fr) 54px; padding: 42px 26px; }
      .visual-design-footer { left: 26px; }
      .visual-signal-toolbar { left: 8px; right: auto; top: 8px; }
    }

    .experiment-field {
      isolation: isolate;
    }

    .experiment-actions {
      display: flex;
      gap: 7px;
      position: absolute;
      right: 12px;
      top: 12px;
      z-index: 3;
    }

    .experiment-reset,
    .experiment-save {
      align-items: center;
      backdrop-filter: blur(8px);
      background: rgba(255, 255, 255, .82);
      border: 1px solid #ddd5cd;
      border-radius: 50%;
      color: #635b54;
      cursor: pointer;
      display: inline-flex;
      font-family: var(--mono);
      font-size: 15px;
      height: 32px;
      justify-content: center;
      padding: 0 0 2px;
      transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
      width: 32px;
    }

    .experiment-reset:hover,
    .experiment-reset:focus-visible,
    .experiment-save:hover,
    .experiment-save:focus-visible {
      border-color: var(--room-accent);
      color: var(--room-accent);
    }

    .experiment-reset:hover,
    .experiment-reset:focus-visible {
      transform: rotate(-18deg);
    }

    .experiment-save {
      font-size: 14px;
      padding: 0 0 1px;
    }

    .experiments-study .study-article {
      grid-template-columns: minmax(0, 1.62fr) minmax(275px, .68fr);
    }

    .experiments-study .experiment-field {
      background: #fdfcf9;
      background-image: none;
      border-bottom: 1px solid #ded7cf;
      border-top: 1px solid #ded7cf;
      min-height: clamp(500px, 63vh, 660px);
    }

    .experiments-study .experiment-canvas {
      cursor: crosshair;
      outline: none;
      transition: filter 240ms ease;
    }

    .experiments-study .experiment-canvas:focus-visible {
      box-shadow: inset 0 0 0 1px var(--room-accent);
    }

    .experiments-study .experiment-canvas[data-mode="attraction"] { cursor: grab; }
    .experiments-study .experiment-canvas[data-mode="attraction"]:active { cursor: grabbing; }
    .experiments-study .experiment-canvas[data-mode="chance"] { cursor: pointer; }

    .experiment-observation {
      border-top: 1px solid #ded7cf;
      display: grid;
      gap: 0;
      margin-top: 24px;
      padding-top: 13px;
    }

    .experiment-stat {
      align-items: baseline;
      border-bottom: 1px solid #ece7e1;
      display: grid;
      gap: 10px;
      grid-template-columns: minmax(0, 1fr) auto;
      padding: 8px 0;
    }

    .experiment-stat span {
      color: #686059;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 13px;
    }

    .experiment-stat strong {
      color: #2d2824;
      font-family: var(--mono);
      font-size: 9px;
      font-weight: 400;
    }

    .experiment-rule {
      border-top: 1px solid #ded7cf;
      display: grid;
      gap: 9px;
      margin-top: 20px;
      padding-top: 13px;
    }

    .experiment-rule-control {
      align-items: center;
      display: grid;
      gap: 10px;
      grid-template-columns: minmax(70px, 1fr) auto;
    }

    .experiment-rule-control input {
      -webkit-appearance: none;
      appearance: none;
      background: transparent;
      cursor: pointer;
      grid-column: 1 / -1;
      height: 17px;
      width: 100%;
    }

    .experiment-rule-control input::-webkit-slider-runnable-track {
      background: #d4cdc5;
      height: 1px;
    }

    .experiment-rule-control input::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      background: var(--room-accent);
      border: 0;
      border-radius: 50%;
      height: 8px;
      margin-top: -3px;
      width: 8px;
    }

    .experiment-rule-name,
    .experiment-rule-value {
      color: #817870;
      font-family: var(--mono);
      font-size: 8px;
    }

    .experiment-offer {
      background: transparent;
      border: 0;
      border-bottom: 1px solid #bfb6ad;
      color: #514a44;
      cursor: pointer;
      font-family: var(--mono);
      font-size: 9px;
      justify-self: start;
      margin-top: 3px;
      padding: 6px 0 5px;
    }

    .experiment-offer:hover,
    .experiment-offer:focus-visible {
      border-bottom-color: var(--room-accent);
      color: var(--room-accent);
    }

    .experiment-reveal {
      color: #776f68;
      margin-top: -2px;
    }

    .experiment-quest {
      backdrop-filter: blur(10px);
      background: rgba(251, 250, 247, .9);
      border-left: 1px solid color-mix(in srgb, var(--room-accent), transparent 35%);
      bottom: 13px;
      display: grid;
      gap: 6px;
      left: 13px;
      max-width: min(290px, calc(100% - 26px));
      padding: 10px 12px 11px;
      position: absolute;
      transition: background 180ms ease;
      z-index: 3;
    }

    .experiment-quest[data-complete="true"] { background: rgba(246, 242, 232, .94); }

    .experiment-field:has(.experiment-canvas[data-mode="chance"]) .experiment-quest {
      align-items: center;
      grid-template-columns: auto minmax(180px, 1fr) minmax(90px, .45fr) auto;
      max-width: none;
      right: 13px;
    }

    .experiment-field:has(.experiment-canvas[data-mode="chance"]) .experiment-quest strong {
      font-size: 12px;
    }

    .experiment-quest-kicker,
    .experiment-quest-status,
    .experiment-passport-label,
    .experiment-coda {
      color: #817870;
      font-family: var(--mono);
      font-size: 8px;
      line-height: 1.45;
    }

    .experiment-quest strong {
      color: #403933;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 13px;
      font-weight: 400;
      line-height: 1.35;
    }

    .experiment-quest-progress {
      background: #ded7cf;
      height: 1px;
      overflow: hidden;
      width: 100%;
    }

    .experiment-quest-progress span {
      background: var(--room-accent);
      display: block;
      height: 100%;
      transform: scaleX(var(--quest-progress, 0));
      transform-origin: left;
      transition: transform 220ms ease;
      width: 100%;
    }

    .experiment-quest[data-complete="true"] .experiment-quest-status { color: var(--room-accent); }

    .experiment-principle {
      align-items: center;
      grid-template-columns: 120px minmax(0, 1fr) auto;
    }

    .experiment-passport {
      align-items: center;
      display: flex;
      gap: 7px;
    }

    .experiment-passport-label { margin-right: 3px; }

    .experiment-stamp {
      align-items: center;
      border: 1px solid #cfc6bd;
      border-radius: 50%;
      color: #968c83;
      display: flex;
      font-family: var(--mono);
      font-size: 7px;
      height: 23px;
      justify-content: center;
      transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
      width: 23px;
    }

    .experiment-stamp.is-complete {
      background: var(--room-accent);
      border-color: var(--room-accent);
      color: #fff;
      transform: rotate(-7deg);
    }

    .experiment-coda {
      color: var(--room-accent);
      display: none;
      grid-column: 2 / -1;
    }

    .experiment-principle.is-complete .experiment-coda { display: block; }

    @media (max-width: 820px) {
      .experiments-study .study-article { grid-template-columns: 1fr; }
      .experiments-study .experiment-field { min-height: 520px; }
      .experiment-principle { grid-template-columns: 1fr; }
      .experiment-coda { grid-column: 1; }
    }

    @media (max-width: 520px) {
      .experiments-study .experiment-field { min-height: 440px; }
      .experiment-field:has(.experiment-canvas[data-mode="chance"]) .experiment-quest {
        grid-template-columns: 1fr;
        max-width: min(290px, calc(100% - 26px));
        right: auto;
      }
    }

    .value-constellation {
      aspect-ratio: 1;
      max-height: 540px;
      position: relative;
      width: min(540px, 90%);
    }

    .value-geometry {
      height: 100%;
      inset: 0;
      overflow: visible;
      position: absolute;
      width: 100%;
    }

    .value-perimeter,
    .value-spoke,
    .value-bridge {
      fill: none;
      vector-effect: non-scaling-stroke;
    }

    .value-perimeter {
      stroke: rgba(108, 98, 89, .22);
      stroke-width: .8;
    }

    .value-spoke {
      stroke: rgba(108, 98, 89, .14);
      stroke-width: .75;
      transition: stroke 180ms ease, stroke-width 180ms ease;
    }

    .value-spoke.is-selected {
      stroke: var(--room-accent);
      stroke-width: 1.15;
    }

    .value-bridge {
      opacity: 0;
      stroke: var(--room-accent);
      stroke-dasharray: 2 3;
      stroke-width: 1.2;
      transition: opacity 180ms ease;
    }

    .value-bridge.is-visible { opacity: .82; }

    .value-node {
      align-items: center;
      background: transparent;
      border: 0;
      color: #655d56;
      cursor: pointer;
      display: grid;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 14px;
      gap: 7px;
      justify-items: center;
      left: var(--value-x);
      line-height: 1;
      min-height: 52px;
      min-width: 104px;
      padding: 8px;
      position: absolute;
      top: var(--value-y);
      transform: translate(-50%, -50%);
    }

    .value-node::before {
      background: #fcfbf8;
      border: 1px solid #9d9389;
      border-radius: 50%;
      content: "";
      height: 7px;
      transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
      width: 7px;
    }

    .value-node:hover,
    .value-node:focus-visible,
    .value-node.is-selected {
      color: #2e2925;
    }

    .value-node:hover::before,
    .value-node:focus-visible::before,
    .value-node.is-selected::before {
      background: var(--room-accent);
      border-color: var(--room-accent);
      box-shadow: 0 0 0 7px color-mix(in srgb, var(--room-accent), transparent 88%);
      transform: scale(1.08);
    }

    .value-center {
      align-items: center;
      color: #91877e;
      display: flex;
      flex-direction: column;
      font-family: var(--mono);
      font-size: 8px;
      gap: 8px;
      left: 50%;
      pointer-events: none;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .value-center::before {
      background: var(--room-accent);
      border-radius: 50%;
      box-shadow: 0 0 0 9px color-mix(in srgb, var(--room-accent), transparent 91%);
      content: "";
      height: 7px;
      width: 7px;
    }

    .seed-study .study-article {
      grid-template-columns: minmax(0, 1.58fr) minmax(275px, .7fr);
    }

    .seed-field {
      background: #fdfcf9;
      border-bottom: 1px solid #ded7cf;
      border-top: 1px solid #ded7cf;
      min-height: clamp(500px, 63vh, 660px);
      overflow: hidden;
    }

    .seed-field .seed-garden {
      height: auto;
      inset: 0;
      position: absolute;
    }

    .seed-canvas {
      cursor: crosshair;
      display: block;
      height: 100%;
      inset: 0;
      outline: none;
      position: absolute;
      touch-action: none;
      transition: filter 260ms ease;
      width: 100%;
      z-index: 2;
    }

    .seed-canvas:focus-visible {
      box-shadow: inset 0 0 0 1px var(--seed-color, #8e2d26);
    }

    .seed-atelier .seed-garden[data-seed-mode="health"] .seed-canvas,
    .seed-atelier .seed-garden[data-seed-mode="eir"] .seed-canvas,
    .seed-atelier .seed-garden[data-seed-mode="synthesis"] .seed-canvas { cursor: zoom-in; }

    .seed-atelier .seed-instruction {
      backdrop-filter: blur(10px);
      background: rgba(255, 255, 255, .82);
      bottom: 26px;
      left: 18px;
      max-width: calc(100% - 70px);
      padding: 6px 8px 7px;
      right: auto;
      text-align: left;
      top: auto;
      transform: none;
    }

    .seed-atelier .seed-field-note {
      backdrop-filter: blur(8px);
      background: rgba(255, 255, 255, .76);
      letter-spacing: 0;
      max-width: calc(100% - 64px);
      padding: 5px 7px 6px;
    }

    .seed-atelier .seed-garden[data-seed-mode="design"] .seed-field-note,
    .seed-atelier .seed-garden[data-seed-mode="design"] .seed-instruction { color: #426f77; }

    .seed-atelier .seed-garden[data-seed-mode="health"] .seed-field-note,
    .seed-atelier .seed-garden[data-seed-mode="health"] .seed-instruction { color: #68704f; }

    .seed-atelier .seed-garden[data-seed-mode="eir"] .seed-field-note,
    .seed-atelier .seed-garden[data-seed-mode="eir"] .seed-instruction { color: #8d463a; }

    .seed-atelier .seed-garden[data-seed-mode="synthesis"] .seed-field-note,
    .seed-atelier .seed-garden[data-seed-mode="synthesis"] .seed-instruction { color: #8d6b30; }

    .seed-atelier .seed-progress {
      bottom: 15px;
    }

    .seed-study .seed-core {
      background: var(--seed-color, #8e2d26);
      border: 1px solid color-mix(in srgb, var(--seed-color, #8e2d26), #28231f 24%);
      border-radius: 64% 36% 58% 42%;
      box-shadow: 0 0 0 9px rgba(255, 255, 255, .86), 0 0 0 10px color-mix(in srgb, var(--seed-color, #8e2d26), transparent 68%), 0 8px 18px rgba(44, 37, 31, .08);
      height: 27px;
      left: 50%;
      top: 72%;
      transform: translate(-50%, -50%) rotate(-18deg);
      width: 42px;
    }

    .seed-study .seed-core::before {
      border-top: 1px solid rgba(255, 255, 255, .6);
      content: "";
      left: 7px;
      position: absolute;
      right: 7px;
      top: 13px;
      transform: rotate(-7deg);
    }

    .seed-study .seed-core::after {
      border: 1px solid color-mix(in srgb, var(--seed-color, #8e2d26), transparent 68%);
      border-radius: 50%;
      content: "";
      inset: -20px;
      position: absolute;
      transition: inset 180ms ease, opacity 180ms ease;
    }

    .seed-study .seed-core:hover,
    .seed-study .seed-core:focus-visible {
      box-shadow: 0 0 0 10px rgba(255, 255, 255, .9), 0 0 0 11px var(--seed-color, #8e2d26), 0 0 0 24px color-mix(in srgb, var(--seed-color, #8e2d26), transparent 88%);
      transform: translate(-50%, -50%) rotate(-18deg) scale(1.06);
    }

    .seed-study .seed-core:hover::after,
    .seed-study .seed-core:focus-visible::after { inset: -24px; opacity: .55; }

    .seed-instruction {
      color: #675f57;
      font-family: var(--mono);
      font-size: 8px;
      left: 50%;
      position: absolute;
      text-align: center;
      top: calc(72% + 36px);
      transform: translateX(-50%);
      white-space: nowrap;
      z-index: 3;
    }

    .seed-field-note {
      color: #776f67;
      font-family: var(--mono);
      font-size: 8px;
      left: 14px;
      position: absolute;
      top: 14px;
      z-index: 3;
    }

    .seed-reset {
      align-items: center;
      background: rgba(251, 250, 247, .9);
      border: 1px solid #d8d0c8;
      border-radius: 50%;
      color: #6d645c;
      cursor: pointer;
      display: inline-flex;
      font-family: var(--mono);
      font-size: 13px;
      height: 30px;
      justify-content: center;
      padding: 0 0 2px;
      position: absolute;
      right: 12px;
      top: 12px;
      width: 30px;
      z-index: 4;
    }

    .seed-reset:hover,
    .seed-reset:focus-visible {
      border-color: var(--seed-color, #8e2d26);
      color: var(--seed-color, #8e2d26);
    }

    .seed-progress {
      background: rgba(70, 63, 57, .12);
      bottom: 15px;
      height: 1px;
      left: 14px;
      position: absolute;
      right: 14px;
      z-index: 3;
    }

    .seed-progress::after {
      background: var(--seed-color, #8e2d26);
      content: "";
      height: 1px;
      left: 0;
      position: absolute;
      top: 0;
      transform: scaleX(var(--growth, 0));
      transform-origin: left;
      transition: transform 80ms linear;
      width: 100%;
    }

    .seed-garden[data-seed-mode="design"] .seed-progress::after {
      background: linear-gradient(90deg, #467985, #b08a46, #8d4a40);
    }

    .seed-garden[data-seed-mode="health"] .seed-progress::after { background: #737c53; }
    .seed-garden[data-seed-mode="eir"] .seed-progress::after { background: #99483d; }
    .seed-garden[data-seed-mode="synthesis"] .seed-progress::after { background: #a47c32; }

    .seed-stage {
      border-top: 1px solid #ded7cf;
      display: grid;
      gap: 6px;
      margin-top: 24px;
      padding-top: 13px;
    }

    .seed-stage strong {
      color: #302a26;
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: 21px;
      font-weight: 400;
    }

    .seed-stage p,
    .seed-condition-note {
      color: #655d56;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 13px;
      line-height: 1.5;
      margin: 0;
    }

    .seed-conditions {
      border-top: 1px solid #ded7cf;
      display: grid;
      gap: 10px;
      margin-top: 20px;
      padding-top: 13px;
    }

    .seed-condition-list {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .seed-condition {
      background: transparent;
      border: 0;
      border-bottom: 1px solid #d9d2cb;
      color: #847b73;
      cursor: pointer;
      font-family: var(--mono);
      font-size: 8px;
      min-height: 31px;
      padding: 0 4px;
    }

    .seed-condition.is-active {
      border-bottom-color: var(--seed-color, #8e2d26);
      color: #2f2925;
    }

    .seed-condition-note {
      font-style: italic;
      min-height: 40px;
    }

    @media (max-width: 820px) {
      .seed-study .study-article { grid-template-columns: 1fr; }
      .seed-field { min-height: 520px; }
    }

    @media (max-width: 520px) {
      .seed-field { min-height: 440px; }
    }

    .study-field.cabinet-field {
      height: auto;
      min-height: clamp(540px, 64vh, 700px);
    }

    .cabinet-study .study-article {
      grid-template-columns: minmax(0, 1.52fr) minmax(290px, .72fr);
    }

    .cabinet-drawer {
      --tilt-x: 0deg;
      --tilt-y: 0deg;
      background: #fff;
      gap: 7px;
      overflow: hidden;
      padding: clamp(14px, 1.65vw, 24px);
    }

    .cabinet-drawer .drawer-object {
      height: clamp(150px, 13.5vw, 182px);
      margin-bottom: 9px;
      overflow: hidden;
      perspective: 700px;
      position: relative;
    }

    .cabinet-drawer .drawer-object .cabinet-art {
      display: block;
      filter: saturate(.82) contrast(1.025) brightness(1.015);
      height: 100%;
      object-fit: cover;
      opacity: .92;
      transform: rotateX(var(--tilt-y)) rotateY(var(--tilt-x)) scale(1.015);
      transition: filter 260ms ease, opacity 260ms ease, transform 300ms cubic-bezier(.2,.8,.2,1);
      width: 100%;
    }

    .cabinet-drawer[data-object="gita"] { --object-rotate: -.35deg; --object-scale: .86; --object-accent: #aa8143; }
    .cabinet-drawer[data-object="wings"] { --object-rotate: .2deg; --object-scale: 1.04; --object-accent: #7f9298; }
    .cabinet-drawer[data-object="libra"] { --object-rotate: .15deg; --object-scale: 1.08; --object-accent: #9b7b42; }
    .cabinet-drawer[data-object="diamond"] { --object-rotate: -.25deg; --object-scale: .87; --object-accent: #748991; }
    .cabinet-drawer[data-object="heart"] { --object-rotate: .25deg; --object-scale: .85; --object-accent: #9b4439; }
    .cabinet-drawer[data-object="orchid"] { --object-rotate: -.2deg; --object-scale: .9; --object-accent: #9b6575; }

    .cabinet-study .cabinet-drawer.is-open .drawer-object {
      transform: translateY(-3px) scale(1.02);
    }

    .cabinet-diagram {
      border: 1px solid color-mix(in srgb, var(--object-accent), transparent 48%);
      border-radius: 50%;
      height: min(76%, 142px);
      left: 50%;
      opacity: 0;
      pointer-events: none;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%) scale(.88);
      transition: opacity 240ms ease, transform 320ms ease;
      width: min(76%, 142px);
    }

    .cabinet-diagram::before,
    .cabinet-diagram::after {
      background: color-mix(in srgb, var(--object-accent), transparent 46%);
      content: "";
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .cabinet-diagram::before { height: 1px; width: 122%; }
    .cabinet-diagram::after { height: 122%; width: 1px; }

    .cabinet-diagram-ring {
      border: 1px dashed color-mix(in srgb, var(--object-accent), transparent 42%);
      border-radius: 50%;
      height: 42%;
      left: 29%;
      position: absolute;
      top: 29%;
      width: 42%;
    }

    .cabinet-memory-mark {
      background: var(--object-accent);
      bottom: 4px;
      height: 1px;
      left: 50%;
      opacity: 0;
      position: absolute;
      transform: translateX(-50%) scaleX(.3);
      transition: opacity 220ms ease, transform 280ms ease;
      width: 34px;
    }

    .cabinet-object-name {
      color: #3f3832;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 14px;
      line-height: 1.1;
    }

    .cabinet-object-kind {
      color: #9a9087;
      font-family: var(--mono);
      font-size: 8px;
      line-height: 1.2;
    }

    .cabinet-drawer:hover,
    .cabinet-drawer:focus-visible,
    .cabinet-drawer.is-open {
      background: #fff;
    }

    .cabinet-drawer:focus-visible {
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--object-accent), transparent 32%);
      outline: 0;
    }

    .cabinet-drawer:hover .cabinet-art,
    .cabinet-drawer:focus-visible .cabinet-art,
    .cabinet-drawer.is-open .cabinet-art {
      filter: saturate(.96) contrast(1.04) brightness(1.01);
      opacity: 1;
      transform: rotateX(var(--tilt-y)) rotateY(var(--tilt-x)) scale(1.035);
    }

    .cabinet-study[data-cabinet-lens="form"] .cabinet-art {
      filter: grayscale(.36) sepia(.2) saturate(.58) contrast(1.01) brightness(1.07);
      opacity: .78;
    }

    .cabinet-study[data-cabinet-lens="anatomy"] .cabinet-art {
      filter: grayscale(.26) sepia(.28) saturate(.68) contrast(1.1) brightness(1);
      opacity: .9;
      transform: rotate(0deg) rotateX(var(--tilt-y)) rotateY(var(--tilt-x)) scale(var(--object-scale, 1)) scale(1.035);
    }

    .cabinet-study[data-cabinet-lens="anatomy"] .cabinet-diagram {
      animation: cabinet-measure 16s linear infinite;
      opacity: .82;
      transform: translate(-50%, -50%) scale(1);
    }

    .cabinet-study[data-cabinet-lens="meaning"] .cabinet-art {
      filter: saturate(.82) contrast(1.025) brightness(1.015);
      opacity: .92;
    }

    .cabinet-study .cabinet-drawer[data-object="libra"] .cabinet-art,
    .cabinet-study[data-cabinet-lens="meaning"] .cabinet-drawer[data-object="libra"] .cabinet-art {
      filter: saturate(.84) contrast(1.04) brightness(1.01);
      opacity: .94;
    }

    .cabinet-study[data-cabinet-lens="meaning"] .cabinet-memory-mark {
      opacity: .72;
      transform: translateX(-50%) scaleX(1);
    }

    .cabinet-study .cabinet-drawer.is-open .cabinet-art {
      filter: saturate(1) contrast(1.045) brightness(1.01);
      opacity: 1;
      transform: rotateX(var(--tilt-y)) rotateY(var(--tilt-x)) scale(1.045);
    }

    @keyframes cabinet-measure {
      to { transform: translate(-50%, -50%) scale(1) rotate(360deg); }
    }

    @media (prefers-reduced-motion: reduce) {
      .cabinet-study[data-cabinet-lens="anatomy"] .cabinet-diagram { animation: none; }
    }

    .cabinet-meaning {
      border-top: 1px solid #ded7cf;
      display: grid;
      margin-top: 24px;
    }

    .cabinet-meaning-row {
      border-bottom: 1px solid #e4ddd6;
      display: grid;
      gap: 14px;
      grid-template-columns: 76px minmax(0, 1fr);
      padding: 13px 0;
    }

    .cabinet-meaning-row span {
      color: #988e85;
      font-family: var(--mono);
      font-size: 8px;
      line-height: 1.45;
    }

    .cabinet-meaning-row p {
      color: #5b534c;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 13px;
      line-height: 1.48;
      margin: 0;
    }

    .cabinet-selected-artwork {
      border-bottom: 1px solid #ded7cf;
      color: #887d73;
      font-family: var(--mono);
      font-size: 8px;
      line-height: 1.5;
      margin: 12px 0 19px;
      padding: 0 0 11px;
    }

    .study-field.archive-field {
      height: auto;
      min-height: clamp(440px, 57vh, 620px);
      padding: clamp(24px, 5vw, 70px);
    }

    .archive-fragment {
      font-size: 10px;
      grid-template-columns: 34px 104px 1fr;
    }

    .archive-article {
      grid-template-columns: minmax(430px, 1.32fr) minmax(270px, .68fr);
    }

    .archive-publications {
      background: #fff;
      min-height: clamp(510px, 65vh, 680px);
      overflow: visible;
    }

    .archive-index-header {
      align-items: center;
      border-bottom: 1px solid #d8d0c7;
      border-top: 1px solid #d8d0c7;
      color: #8b8178;
      display: flex;
      font-family: var(--mono);
      font-size: 9px;
      justify-content: space-between;
      min-height: 42px;
      padding: 0 3px;
    }

    .archive-index-header a {
      color: #6e655e;
      text-decoration: none;
      text-underline-offset: 4px;
    }

    .archive-scholar-record {
      align-items: baseline;
      display: flex;
      gap: 14px;
    }

    .archive-citation-count {
      color: #81776f;
      white-space: nowrap;
    }

    .archive-citation-count strong {
      color: #302923;
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: 14px;
      font-weight: 400;
    }

    .archive-index-header a:hover,
    .archive-index-header a:focus-visible {
      color: var(--room-accent);
      text-decoration: underline;
    }

    .archive-publication-list { display: grid; }

    .archive-publication {
      align-items: start;
      background: transparent;
      border: 0;
      border-bottom: 1px solid #e1dad3;
      color: #302a25;
      cursor: pointer;
      display: grid;
      gap: 7px 14px;
      grid-template-columns: 28px minmax(0, 1fr);
      min-height: 91px;
      padding: 16px 3px;
      position: relative;
      text-align: left;
      transition: padding-left 180ms ease;
    }

    .archive-publication::after {
      color: transparent;
      content: "→";
      font-family: var(--mono);
      font-size: 11px;
      position: absolute;
      right: 3px;
      top: 18px;
      transition: color 160ms ease;
    }

    .archive-publication:hover,
    .archive-publication:focus-visible,
    .archive-publication.is-active {
      padding-left: 9px;
    }

    .archive-publication:hover::after,
    .archive-publication:focus-visible::after,
    .archive-publication.is-active::after {
      color: var(--room-accent);
    }

    .archive-publication-number,
    .archive-publication-meta,
    .archive-reading-meta,
    .archive-authors {
      font-family: var(--mono);
      font-size: 8px;
      font-weight: 400;
      line-height: 1.5;
    }

    .archive-publication-number {
      color: var(--room-accent);
      grid-row: 1 / 3;
    }

    .archive-publication-meta {
      color: #91877e;
      padding-right: 26px;
    }

    .archive-publication strong {
      color: #403832;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 15px;
      font-weight: 400;
      line-height: 1.28;
      max-width: 610px;
      padding-right: 28px;
    }

    .archive-publication.is-active strong { color: #181410; }

    .archive-reading { padding-top: clamp(8px, 1.8vw, 25px); }

    .archive-reading-meta {
      color: #8d837a;
      display: block;
      margin: -2px 0 13px;
    }

    .archive-reading h3 { font-size: clamp(25px, 2.55vw, 35px); }

    .archive-reading > .archive-authors {
      color: #756c64;
      font-family: var(--mono);
      font-size: 9px;
      line-height: 1.55;
      margin: -5px 0 20px;
    }

    .archive-publication-link {
      align-self: start;
      border-bottom: 1px solid #cfc5bc;
      color: #675e57;
      font-family: var(--mono);
      font-size: 9px;
      margin-top: 22px;
      padding-bottom: 4px;
      text-decoration: none;
    }

    .archive-publication-link:hover,
    .archive-publication-link:focus-visible {
      border-bottom-color: var(--room-accent);
      color: var(--room-accent);
    }

    /* Atlas keeps its deep generator, but adopts the same editorial restraint. */
    .room[data-room="atlas"] .curator-lab {
      background: #fff;
      gap: clamp(22px, 3vw, 38px);
      padding: 0;
    }

    .room[data-room="atlas"] .curator-heading {
      align-items: end;
      border-top: 1px solid #ded7cf;
      padding-top: 14px;
    }

    .room[data-room="atlas"] .curator-heading h3 {
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: clamp(20px, 2vw, 25px);
      line-height: 1.08;
    }

    .room[data-room="atlas"] .curator-eyebrow { color: #71685f; }

    .room[data-room="atlas"] .curator-timeline {
      grid-template-columns: repeat(6, minmax(128px, 1fr));
    }

    .curator-artist {
      display: grid;
      gap: 6px;
      min-height: 82px;
      padding: 10px 14px 12px;
    }

    .curator-chapter-index { display: block; }

    .curator-artist .artist-dates {
      margin: 0;
      order: 2;
    }

    .curator-artist strong {
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 14px;
      order: 3;
    }

    .room[data-room="atlas"] .curator-workspace {
      gap: clamp(28px, 4vw, 58px);
      grid-template-columns: minmax(210px, .66fr) minmax(0, 1.65fr);
    }

    .room[data-room="atlas"] .artist-reference h4 {
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: 22px;
    }

    .room[data-room="atlas"] .artist-question,
    .room[data-room="atlas"] .generator-reading-item p {
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    }

    .room[data-room="atlas"] .generator-canvas-wrap,
    .room[data-room="atlas"] .artist-reference-image {
      background: #f4f0e9;
    }

    .room[data-room="atlas"] .curator-controls {
      background: transparent;
      padding: 14px 0;
    }

    .atlas-gallery {
      color: #28231f;
      display: grid;
      gap: clamp(24px, 3vw, 38px);
      min-height: 100%;
      padding: clamp(20px, 2.7vw, 38px);
    }

    .atlas-gallery-intro {
      align-items: end;
      border-top: 1px solid #d9d1c9;
      display: grid;
      gap: 24px;
      grid-template-columns: minmax(190px, .45fr) minmax(320px, 1.55fr);
      padding-top: 14px;
    }

    .atlas-gallery-intro span {
      color: var(--room-accent);
      font-family: var(--mono);
      font-size: 9px;
    }

    .atlas-gallery-intro p {
      color: #5a514a;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 15px;
      line-height: 1.5;
      margin: 0;
      max-width: 780px;
    }

    .atlas-chronology {
      border-bottom: 1px solid #d9d1c9;
      border-top: 1px solid #d9d1c9;
      display: flex;
      overflow-x: auto;
      scrollbar-color: #b9afa6 transparent;
      scrollbar-width: thin;
    }

    .atlas-era {
      background: transparent;
      border: 0;
      border-left: 1px solid #e2dbd4;
      color: #756c64;
      cursor: pointer;
      display: grid;
      flex: 1 0 132px;
      gap: 6px;
      min-height: 84px;
      padding: 11px 13px 12px;
      position: relative;
      text-align: left;
    }

    .atlas-era:first-child { border-left: 0; }

    .atlas-era::after {
      background: var(--room-accent);
      bottom: -1px;
      content: "";
      height: 1px;
      left: 13px;
      position: absolute;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 180ms ease;
      width: calc(100% - 26px);
    }

    .atlas-era:hover::after,
    .atlas-era:focus-visible::after,
    .atlas-era.is-active::after { transform: scaleX(1); }

    .atlas-era-index,
    .atlas-era-dates {
      color: #978c82;
      font-family: var(--mono);
      font-size: 8px;
    }

    .atlas-era strong {
      color: currentColor;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 13px;
      font-weight: 400;
      line-height: 1.15;
    }

    .atlas-era.is-active { color: #211d19; }

    .atlas-gallery-main {
      align-items: start;
      display: grid;
      gap: clamp(30px, 4vw, 62px);
      grid-template-columns: minmax(390px, 1.34fr) minmax(280px, .66fr);
    }

    .atlas-masterwork-figure {
      display: grid;
      gap: 10px;
      margin: 0;
      min-width: 0;
    }

    .atlas-masterwork-stage {
      --atlas-view-x: 50%;
      --atlas-view-y: 50%;
      --atlas-view-zoom: 1;
      background: #f2eee8;
      cursor: crosshair;
      height: min(70vh, 720px);
      overflow: hidden;
      position: relative;
    }

    .atlas-masterwork-image {
      display: block;
      height: 100%;
      object-fit: contain;
      transform: scale(var(--atlas-view-zoom));
      transform-origin: var(--atlas-view-x) var(--atlas-view-y);
      transition: filter 240ms ease, transform 320ms ease;
      user-select: none;
      width: 100%;
    }

    .atlas-masterwork-stage[data-lens="palette"] .atlas-masterwork-image {
      filter: saturate(.72) contrast(.96);
    }

    .atlas-composition-overlay {
      height: 100%;
      inset: 0;
      opacity: 0;
      pointer-events: none;
      position: absolute;
      transition: opacity 180ms ease;
      width: 100%;
    }

    .atlas-masterwork-stage[data-lens="composition"] .atlas-composition-overlay { opacity: 1; }

    .atlas-composition-overlay path,
    .atlas-composition-overlay line,
    .atlas-composition-overlay circle,
    .atlas-composition-overlay rect {
      fill: none;
      stroke: rgba(255,255,255,.84);
      stroke-dasharray: 2.5 3.5;
      stroke-width: .32;
      vector-effect: non-scaling-stroke;
    }

    .atlas-palette-overlay {
      align-items: end;
      bottom: 14px;
      display: none;
      gap: 7px;
      left: 14px;
      position: absolute;
    }

    .atlas-masterwork-stage[data-lens="palette"] .atlas-palette-overlay { display: flex; }

    .atlas-palette-chip {
      background: var(--chip);
      border: 1px solid rgba(255,255,255,.84);
      height: 28px;
      width: 28px;
    }

    .atlas-masterwork-caption {
      color: #766d65;
      display: flex;
      font-family: var(--mono);
      font-size: 9px;
      gap: 20px;
      justify-content: space-between;
      line-height: 1.45;
    }

    .atlas-masterwork-caption strong {
      color: #312a25;
      font-weight: 400;
    }

    .atlas-gallery-reading {
      align-content: start;
      border-top: 1px solid #d9d1c9;
      display: grid;
      gap: 13px;
      padding-top: 13px;
    }

    .atlas-reading-period,
    .atlas-reading-dates {
      color: var(--room-accent);
      font-family: var(--mono);
      font-size: 9px;
    }

    .atlas-gallery-reading h3 {
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: clamp(27px, 2.8vw, 38px);
      font-weight: 400;
      line-height: 1.04;
      margin: 0;
    }

    .atlas-reading-work {
      color: #675e56;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 15px;
      font-style: italic;
      line-height: 1.42;
      margin: 0;
    }

    .atlas-reading-meta {
      border-left: 1px solid var(--room-accent);
      color: #6f665e;
      font-family: var(--mono);
      font-size: 9px;
      line-height: 1.55;
      margin: 0;
      padding-left: 11px;
    }

    .atlas-lenses {
      border-bottom: 1px solid #dfd8d1;
      border-top: 1px solid #dfd8d1;
      display: flex;
      flex-wrap: wrap;
      gap: 9px 20px;
      padding: 10px 0;
    }

    .atlas-lens {
      background: transparent;
      border: 0;
      border-bottom: 1px solid transparent;
      color: #786f67;
      cursor: pointer;
      font-family: var(--mono);
      font-size: 9px;
      padding: 0 0 3px;
    }

    .atlas-lens.is-active {
      border-bottom-color: var(--room-accent);
      color: #211d19;
    }

    .atlas-lens-copy {
      color: #4c443d;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 15px;
      line-height: 1.52;
      margin: 0;
      min-height: 92px;
    }

    .atlas-detail-control {
      align-items: center;
      display: grid;
      gap: 10px;
      grid-template-columns: 46px 1fr auto;
    }

    .atlas-detail-control label,
    .atlas-detail-control output {
      color: #776e66;
      font-family: var(--mono);
      font-size: 9px;
    }

    .atlas-detail-control input {
      accent-color: var(--room-accent);
      cursor: pointer;
      min-width: 0;
      width: 100%;
    }

    .atlas-source-link {
      color: #6c635b;
      font-family: var(--mono);
      font-size: 9px;
      text-underline-offset: 3px;
      width: fit-content;
    }

    .atlas-gallery-principle {
      border-top: 1px solid #d9d1c9;
      color: #71675f;
      display: grid;
      font-family: var(--mono);
      font-size: 9px;
      gap: 20px;
      grid-template-columns: 120px minmax(0, 1fr);
      line-height: 1.5;
      padding-top: 12px;
    }

    .atlas-gallery-principle p { margin: 0; max-width: 850px; }

    .atlas-expedition {
      --atlas-idea: #9b643f;
      color: #28231f;
      display: grid;
      gap: 26px;
      min-height: 100%;
      padding: clamp(18px, 2.7vw, 38px);
    }

    .atlas-expedition-opening {
      align-items: end;
      border-top: 1px solid #d8d0c8;
      display: grid;
      gap: 28px;
      grid-template-columns: minmax(220px, .64fr) minmax(340px, 1.36fr);
      padding-top: 14px;
    }

    .atlas-expedition-kicker,
    .atlas-route-label,
    .atlas-map-scale,
    .atlas-stop-period,
    .atlas-stop-dates,
    .atlas-stop-medium,
    .atlas-mode-note,
    .atlas-compare-label,
    .atlas-field-count,
    .atlas-field-note,
    .atlas-map-node-date,
    .atlas-map-node-index {
      color: #82776e;
      font-family: var(--mono);
      font-size: 9px;
      line-height: 1.45;
    }

    .atlas-expedition-opening h3 {
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: 31px;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.05;
      margin: 4px 0 0;
    }

    .atlas-expedition-opening p {
      color: #595049;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 15px;
      line-height: 1.52;
      margin: 0;
      max-width: 770px;
    }

    .atlas-routes {
      border-bottom: 1px solid #ddd6cf;
      border-top: 1px solid #ddd6cf;
      display: grid;
      grid-template-columns: 126px repeat(5, minmax(104px, 1fr));
    }

    .atlas-route-label {
      align-items: center;
      display: flex;
      padding: 12px 12px 12px 0;
    }

    .atlas-route {
      background: transparent;
      border: 0;
      border-left: 1px solid #e3ddd7;
      color: #756c64;
      cursor: pointer;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 13px;
      min-height: 46px;
      padding: 10px 11px;
      position: relative;
      text-align: left;
    }

    .atlas-route::after {
      background: var(--route-color, var(--atlas-idea));
      bottom: -1px;
      content: "";
      height: 2px;
      left: 11px;
      position: absolute;
      right: 11px;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 180ms ease;
    }

    .atlas-route:hover::after,
    .atlas-route:focus-visible::after,
    .atlas-route.is-active::after { transform: scaleX(1); }
    .atlas-route.is-active { color: #221e1a; }

    .atlas-time-map {
      display: grid;
      gap: 8px;
    }

    .atlas-map-scale {
      display: flex;
      justify-content: space-between;
      padding: 0 4px;
    }

    .atlas-map-track {
      display: grid;
      grid-template-columns: repeat(8, minmax(96px, 1fr));
      min-width: 780px;
      position: relative;
    }

    .atlas-map-scroll {
      overflow-x: auto;
      padding-bottom: 4px;
      scrollbar-color: #b9afa6 transparent;
      scrollbar-width: thin;
    }

    .atlas-map-track::before {
      background: #d5cec7;
      content: "";
      height: 1px;
      left: 5%;
      position: absolute;
      right: 5%;
      top: 54px;
    }

    .atlas-map-node {
      align-content: start;
      background: transparent;
      border: 0;
      color: #756d66;
      cursor: pointer;
      display: grid;
      gap: 4px;
      min-height: 104px;
      padding: 0 8px 10px;
      position: relative;
      text-align: left;
      transition: color 180ms ease, opacity 180ms ease;
    }

    .atlas-map-node::after {
      background: #fff;
      border: 1px solid #a99f96;
      border-radius: 50%;
      content: "";
      height: 9px;
      left: 10px;
      position: absolute;
      top: 50px;
      transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
      width: 9px;
    }

    .atlas-map-node strong {
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 12px;
      font-weight: 400;
      line-height: 1.12;
      margin-top: 29px;
    }

    .atlas-map-node.is-off-route { opacity: .25; }
    .atlas-map-node.is-route { color: #38312c; }
    .atlas-map-node.is-route::after { border-color: var(--atlas-idea); }
    .atlas-map-node.is-active { color: #211d19; }
    .atlas-map-node.is-active::after {
      background: var(--atlas-idea);
      border-color: var(--atlas-idea);
      transform: scale(1.35);
    }

    .atlas-expedition-question {
      align-items: baseline;
      border-left: 1px solid var(--atlas-idea);
      color: #5f564e;
      display: flex;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 14px;
      gap: 16px;
      line-height: 1.45;
      margin: 0;
      padding-left: 12px;
    }

    .atlas-expedition-question span {
      color: var(--atlas-idea);
      flex: 0 0 auto;
      font-family: var(--mono);
      font-size: 8px;
    }

    .atlas-stop {
      align-items: start;
      display: grid;
      gap: clamp(30px, 4vw, 62px);
      grid-template-columns: minmax(430px, 1.35fr) minmax(290px, .65fr);
    }

    .atlas-voyage-figure {
      display: grid;
      gap: 10px;
      margin: 0;
      min-width: 0;
    }

    .atlas-voyage-stage {
      --atlas-compare: 54%;
      background: #f2eee8;
      height: min(69vh, 710px);
      min-height: 480px;
      overflow: hidden;
      position: relative;
    }

    .atlas-voyage-image {
      display: block;
      height: 100%;
      inset: 0;
      object-fit: contain;
      position: absolute;
      transition: filter 220ms ease, opacity 180ms ease;
      user-select: none;
      width: 100%;
    }

    .atlas-voyage-current { z-index: 1; }
    .atlas-voyage-compare { opacity: 0; z-index: 0; }

    .atlas-voyage-stage[data-mode="compare"] .atlas-voyage-compare { opacity: 1; }
    .atlas-voyage-stage[data-mode="compare"] .atlas-voyage-current {
      clip-path: inset(0 calc(100% - var(--atlas-compare)) 0 0);
    }

    .atlas-voyage-stage[data-mode="palette"] .atlas-voyage-current {
      filter: saturate(.66) contrast(.96) brightness(1.02);
    }

    .atlas-voyage-composition {
      height: 100%;
      inset: 0;
      opacity: 0;
      pointer-events: none;
      position: absolute;
      transition: opacity 180ms ease;
      width: 100%;
      z-index: 2;
    }

    .atlas-voyage-stage[data-mode="decode"] .atlas-voyage-composition { opacity: .62; }
    .atlas-voyage-composition path,
    .atlas-voyage-composition line,
    .atlas-voyage-composition circle,
    .atlas-voyage-composition rect {
      fill: none;
      stroke: rgba(255,255,255,.92);
      stroke-dasharray: 3 4;
      stroke-width: .65;
      vector-effect: non-scaling-stroke;
    }

    .atlas-hotspots {
      inset: 0;
      opacity: 0;
      pointer-events: none;
      position: absolute;
      transition: opacity 180ms ease;
      z-index: 4;
    }

    .atlas-voyage-stage[data-mode="decode"] .atlas-hotspots {
      opacity: 1;
      pointer-events: auto;
    }

    .atlas-hotspot {
      align-items: center;
      background: rgba(255,255,255,.87);
      border: 1px solid var(--atlas-idea);
      border-radius: 50%;
      color: #322a24;
      cursor: pointer;
      display: flex;
      font-family: var(--mono);
      font-size: 8px;
      height: 27px;
      justify-content: center;
      left: var(--hotspot-x);
      padding: 0;
      position: absolute;
      top: var(--hotspot-y);
      transform: translate(-50%, -50%);
      transition: background 160ms ease, color 160ms ease, transform 160ms ease;
      width: 27px;
    }

    .atlas-hotspot:hover,
    .atlas-hotspot:focus-visible,
    .atlas-hotspot.is-active {
      background: var(--atlas-idea);
      color: #fff;
      transform: translate(-50%, -50%) scale(1.12);
    }

    .atlas-compare-divider {
      background: rgba(255,255,255,.9);
      bottom: 0;
      display: none;
      left: var(--atlas-compare);
      pointer-events: none;
      position: absolute;
      top: 0;
      width: 1px;
      z-index: 5;
    }

    .atlas-voyage-stage[data-mode="compare"] .atlas-compare-divider { display: block; }

    .atlas-compare-tag {
      background: rgba(255,255,255,.9);
      color: #50473f;
      display: none;
      font-family: var(--mono);
      font-size: 8px;
      padding: 7px 9px;
      position: absolute;
      top: 12px;
      z-index: 6;
    }

    .atlas-voyage-stage[data-mode="compare"] .atlas-compare-tag { display: block; }
    .atlas-compare-tag.is-left { left: 12px; }
    .atlas-compare-tag.is-right { right: 12px; }

    .atlas-palette-instrument {
      align-items: end;
      bottom: 14px;
      display: none;
      gap: 8px;
      left: 14px;
      position: absolute;
      z-index: 5;
    }

    .atlas-voyage-stage[data-mode="palette"] .atlas-palette-instrument { display: flex; }

    .atlas-route-instrument {
      inset: 0;
      pointer-events: none;
      position: absolute;
      z-index: 3;
    }

    .atlas-route-instrument[hidden] { display: none; }

    .atlas-voyage-stage[data-instrument="body"] { cursor: ns-resize; }
    .atlas-voyage-stage[data-instrument="motion"] { cursor: ew-resize; }

    .atlas-instrument-note {
      align-items: center;
      background: rgba(255, 255, 255, .9);
      bottom: 14px;
      color: #514840;
      display: flex;
      font-family: var(--mono);
      font-size: 8px;
      gap: 8px;
      left: 14px;
      line-height: 1.4;
      padding: 7px 9px;
      position: absolute;
    }

    .atlas-instrument-note::before {
      background: var(--atlas-idea);
      border-radius: 50%;
      content: "";
      height: 5px;
      width: 5px;
    }

    .atlas-body-axis {
      background: linear-gradient(to bottom, transparent, rgba(255,255,255,.92) 8%, rgba(255,255,255,.92) 92%, transparent);
      bottom: 6%;
      left: 50%;
      position: absolute;
      top: 6%;
      width: 1px;
    }

    .atlas-body-axis::before {
      background: repeating-linear-gradient(to bottom, rgba(255,255,255,.92) 0 1px, transparent 1px 11px);
      content: "";
      inset: 0 -8px;
      position: absolute;
    }

    .atlas-body-measure {
      left: 25%;
      position: absolute;
      right: 25%;
      top: var(--atlas-measure-y, 50%);
      transform: translateY(-50%);
    }

    .atlas-body-measure::before {
      background: rgba(255,255,255,.95);
      box-shadow: 0 0 14px rgba(87,64,43,.24);
      content: "";
      height: 1px;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
    }

    .atlas-body-measure::after {
      background: #fff;
      border: 1px solid var(--atlas-idea);
      border-radius: 50%;
      box-shadow: 0 0 0 4px rgba(255,255,255,.34);
      content: "";
      height: 8px;
      left: 50%;
      position: absolute;
      top: 0;
      transform: translate(-50%, -50%);
      width: 8px;
    }

    .atlas-body-reading {
      background: rgba(255,255,255,.92);
      color: #443c35;
      font-family: var(--mono);
      font-size: 8px;
      left: calc(50% + 12px);
      padding: 5px 7px;
      position: absolute;
      top: var(--atlas-measure-y, 50%);
      transform: translateY(-50%);
      white-space: nowrap;
    }

    .atlas-body-canon {
      color: rgba(255,255,255,.96);
      display: grid;
      font-family: var(--mono);
      font-size: 7px;
      gap: 0;
      grid-template-rows: repeat(8, 1fr);
      left: calc(50% - 116px);
      position: absolute;
      top: 10%;
      height: 80%;
    }

    .atlas-body-canon span {
      align-items: start;
      border-top: 1px solid rgba(255,255,255,.8);
      display: flex;
      padding-top: 3px;
      width: 18px;
    }

    .atlas-motion-field {
      height: 100%;
      inset: 0;
      overflow: visible;
      position: absolute;
      width: 100%;
    }

    .atlas-motion-airflow {
      fill: none;
      opacity: var(--atlas-flow-opacity, .55);
      stroke: rgba(255,255,255,.94);
      stroke-dasharray: 5 7;
      stroke-width: .55;
      vector-effect: non-scaling-stroke;
      animation: atlasAirflow var(--atlas-flow-speed, 1.8s) linear infinite;
    }

    .atlas-motion-vector {
      fill: none;
      opacity: .9;
      stroke: var(--atlas-idea);
      stroke-width: .9;
      transform: rotate(var(--atlas-storm-turn, 0deg)) scale(var(--atlas-storm-scale, .55));
      transform-origin: 61px 52px;
      vector-effect: non-scaling-stroke;
    }

    .atlas-motion-vector-head { fill: var(--atlas-idea); opacity: .92; }

    .atlas-motion-scrub {
      border-top: 1px solid rgba(255,255,255,.82);
      bottom: 51px;
      left: 18%;
      position: absolute;
      right: 18%;
    }

    .atlas-motion-scrub::before,
    .atlas-motion-scrub::after {
      color: rgba(255,255,255,.9);
      font-family: var(--mono);
      font-size: 7px;
      position: absolute;
      top: 6px;
    }

    .atlas-motion-scrub::before { content: "calm"; left: 0; }
    .atlas-motion-scrub::after { content: "turbulence"; right: 0; }

    .atlas-motion-handle {
      background: #fff;
      border: 1px solid var(--atlas-idea);
      border-radius: 50%;
      height: 10px;
      left: var(--atlas-storm-position, 48%);
      position: absolute;
      top: 0;
      transform: translate(-50%, -50%);
      width: 10px;
    }

    @keyframes atlasAirflow { to { stroke-dashoffset: -24; } }

    .atlas-palette-key {
      background: var(--palette-color);
      border: 1px solid rgba(255,255,255,.9);
      cursor: pointer;
      height: 30px;
      padding: 0;
      transition: height 160ms ease, width 160ms ease;
      width: 30px;
    }

    .atlas-palette-key:hover,
    .atlas-palette-key:focus-visible,
    .atlas-palette-key.is-active { height: 38px; width: 38px; }

    .atlas-voyage-caption {
      color: #756c64;
      display: flex;
      font-family: var(--mono);
      font-size: 9px;
      gap: 18px;
      justify-content: space-between;
      line-height: 1.45;
    }

    .atlas-voyage-caption strong { color: #312a25; font-weight: 400; }

    .atlas-stop-reading {
      align-content: start;
      border-top: 1px solid #d9d1c9;
      display: grid;
      gap: 12px;
      padding-top: 12px;
    }

    .atlas-stop-context {
      display: flex;
      gap: 12px;
      justify-content: space-between;
    }

    .atlas-stop-reading h4 {
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: 34px;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.02;
      margin: 0;
    }

    .atlas-stop-work {
      color: #625950;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 15px;
      font-style: italic;
      line-height: 1.4;
      margin: 0;
    }

    .atlas-stop-medium {
      border-left: 1px solid var(--atlas-idea);
      margin: 0;
      padding-left: 10px;
    }

    .atlas-study-modes {
      border-bottom: 1px solid #ddd6cf;
      border-top: 1px solid #ddd6cf;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    }

    .atlas-study-mode {
      background: transparent;
      border: 0;
      border-left: 1px solid #e4ded8;
      color: #7a7169;
      cursor: pointer;
      font-family: var(--mono);
      font-size: 8px;
      min-height: 38px;
      padding: 8px 6px;
      position: relative;
    }

    .atlas-study-mode:first-child { border-left: 0; }
    .atlas-study-mode.is-active { color: #211d19; }
    .atlas-study-mode.is-active::after {
      background: var(--atlas-idea);
      bottom: -1px;
      content: "";
      height: 2px;
      left: 8px;
      position: absolute;
      right: 8px;
    }

    .atlas-mode-reading {
      color: #4e463f;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 15px;
      line-height: 1.53;
      margin: 0;
      min-height: 94px;
    }

    .atlas-mode-note { color: var(--atlas-idea); margin-top: -5px; }

    .atlas-compare-tools {
      align-items: center;
      display: none;
      gap: 10px;
      grid-template-columns: 28px minmax(0, 1fr) 28px;
    }

    .atlas-expedition[data-mode="compare"] .atlas-compare-tools { display: grid; }

    .atlas-compare-step {
      background: transparent;
      border: 1px solid #d0c7bf;
      border-radius: 50%;
      color: #544b44;
      cursor: pointer;
      font-family: Georgia, serif;
      font-size: 17px;
      height: 28px;
      line-height: 1;
      padding: 0;
      width: 28px;
    }

    .atlas-compare-tools input {
      accent-color: var(--atlas-idea);
      cursor: ew-resize;
      min-width: 0;
      width: 100%;
    }

    .atlas-field-tools {
      align-items: center;
      border-top: 1px solid #ded7d0;
      display: grid;
      gap: 12px;
      grid-template-columns: minmax(0, 1fr) auto;
      padding-top: 11px;
    }

    .atlas-field-note { margin: 0; }

    .atlas-keep {
      background: transparent;
      border: 0;
      border-bottom: 1px solid #bcb1a7;
      color: #514840;
      cursor: pointer;
      font-family: var(--mono);
      font-size: 8px;
      padding: 3px 0;
    }

    .atlas-keep.is-kept { border-bottom-color: var(--atlas-idea); color: var(--atlas-idea); }

    .atlas-expedition-footer {
      align-items: start;
      border-top: 1px solid #d9d1c9;
      display: grid;
      gap: 20px;
      grid-template-columns: 120px minmax(0, 1fr) auto;
      padding-top: 12px;
    }

    .atlas-expedition-footer p {
      color: #6f665e;
      font-family: var(--mono);
      font-size: 9px;
      line-height: 1.5;
      margin: 0;
      max-width: 770px;
    }

    .atlas-field-count {
      background: transparent;
      border: 0;
      color: var(--atlas-idea);
      cursor: pointer;
      padding: 0;
      text-align: left;
      white-space: nowrap;
    }

    .atlas-notebook {
      border-bottom: 1px solid #d9d1c9;
      border-top: 1px solid #d9d1c9;
      display: grid;
      gap: 0;
    }

    .atlas-notebook[hidden] { display: none; }

    .atlas-notebook-empty,
    .atlas-notebook-entry {
      color: #625950;
      font-family: var(--mono);
      font-size: 9px;
      line-height: 1.5;
      margin: 0;
      padding: 12px 0;
    }

    .atlas-notebook-entry {
      align-items: baseline;
      border-bottom: 1px solid #e4ded8;
      display: grid;
      gap: 14px;
      grid-template-columns: 100px 120px minmax(0, 1fr);
    }

    .atlas-notebook-entry:last-child { border-bottom: 0; }
    .atlas-notebook-entry strong { color: #302923; font-weight: 400; }
    .atlas-notebook-entry span:first-child { color: var(--atlas-idea); }

    @media (max-width: 900px) {
      .study-article {
        gap: 30px;
        grid-template-columns: minmax(0, 1.15fr) minmax(250px, .85fr);
      }

      .archive-article {
        grid-template-columns: minmax(390px, 1.1fr) minmax(250px, .9fr);
      }

      .room[data-room="atlas"] .curator-workspace {
        grid-template-columns: minmax(190px, .58fr) minmax(0, 1.42fr);
      }

      .atlas-gallery-main {
        grid-template-columns: minmax(330px, 1.05fr) minmax(270px, .95fr);
      }

      .atlas-stop {
        grid-template-columns: minmax(350px, 1.08fr) minmax(270px, .92fr);
      }
    }

    @media (max-width: 760px) {
      .study-room { gap: 22px; }
      .study-article { grid-template-columns: 1fr; }
      .cabinet-study .study-article { grid-template-columns: 1fr; }
      .archive-article { grid-template-columns: 1fr; }
      .study-field { min-height: min(62vh, 540px); }
      .archive-publications { min-height: 0; }
      .study-reading { min-height: 330px; padding-top: 0; }
      .study-chapters { grid-auto-columns: minmax(105px, 1fr); }
      .study-principle { grid-template-columns: 1fr; }

      .room[data-room="atlas"] .curator-heading {
        align-items: start;
        display: grid;
      }

      .room[data-room="atlas"] .curator-status {
        max-width: none;
        text-align: left;
      }

      .room[data-room="atlas"] .curator-workspace { grid-template-columns: 1fr; }
      .room[data-room="atlas"] .artist-reference { display: grid; gap: 18px; grid-template-columns: minmax(150px, .55fr) minmax(0, 1fr); }
      .room[data-room="atlas"] .artist-reference figcaption { padding-top: 0; }
      .room[data-room="atlas"] .curator-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .room[data-room="atlas"] .generator-reading { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .curator-principle { grid-template-columns: 1fr; }
      .atlas-gallery-intro,
      .atlas-gallery-main { grid-template-columns: 1fr; }
      .atlas-masterwork-stage { height: min(68vh, 650px); }
      .atlas-expedition-opening,
      .atlas-stop { grid-template-columns: 1fr; }
      .atlas-routes {
        grid-template-columns: repeat(5, minmax(118px, 1fr));
        overflow-x: auto;
      }
      .atlas-route-label { display: none; }
      .atlas-voyage-stage { height: min(66vh, 650px); }
    }

    @media (max-width: 520px) {
      .study-field { min-height: 430px; }
      .study-reading { min-height: 300px; }
      .study-reading h3 { font-size: 26px; }
      .study-field.cabinet-field { grid-template-columns: repeat(2, 1fr); }
      .cabinet-drawer { padding: 10px 7px; }
      .cabinet-drawer .drawer-object { height: 146px; }
      .cabinet-drawer .drawer-object .cabinet-art {
        height: clamp(132px, 39vw, 154px);
        width: clamp(132px, 39vw, 154px);
      }
      .cabinet-meaning-row { grid-template-columns: 1fr; gap: 5px; }
      .cabinet-drawer:nth-child(3n) { border-right: 1px solid #ded7cf; }
      .cabinet-drawer:nth-child(2n) { border-right: 0; }
      .cabinet-drawer:nth-child(n+4) { border-bottom: 1px solid #ded7cf; }
      .cabinet-drawer:nth-child(n+5) { border-bottom: 0; }
      .archive-fragment { gap: 9px; grid-template-columns: 28px 84px 1fr; padding: 15px 0; }
      .archive-publication { min-height: 104px; }
      .archive-index-header { align-items: start; flex-direction: column; gap: 5px; justify-content: center; padding: 10px 3px; }
      .archive-scholar-record { flex-wrap: wrap; gap: 5px 12px; }
      .room[data-room="atlas"] .artist-reference { display: block; }
      .room[data-room="atlas"] .artist-reference figcaption { padding-top: 12px; }
      .room[data-room="atlas"] .curator-controls,
      .room[data-room="atlas"] .generator-reading { grid-template-columns: 1fr; }
      .room[data-room="atlas"] .generator-canvas-wrap { min-height: 300px; }
      .atlas-gallery { padding: 12px 4px; }
      .atlas-masterwork-stage { height: 58vh; min-height: 370px; }
      .atlas-masterwork-caption { display: grid; gap: 4px; }
      .atlas-gallery-principle { grid-template-columns: 1fr; }
      .atlas-expedition { padding: 12px 4px; }
      .atlas-expedition-opening h3 { font-size: 27px; }
      .atlas-voyage-stage { height: 57vh; min-height: 390px; }
      .atlas-body-measure { left: 14%; right: 14%; }
      .atlas-body-canon { left: calc(50% - 88px); }
      .atlas-voyage-caption { display: grid; gap: 4px; }
      .atlas-expedition-footer { grid-template-columns: 1fr; }
      .atlas-notebook-entry { grid-template-columns: 1fr; gap: 3px; }
      .atlas-stop-reading h4 { font-size: 30px; }
    }

    /* Landing typography follows the established On Lightness hierarchy. */
    .page {
      --landing-display: "Anna Didone", "Bodoni 72", Didot, "Bodoni MT", Georgia, serif;
      --landing-humanist: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      --landing-record: var(--mono);
      font-family: var(--landing-record);
      font-synthesis: none;
    }

    .page .identity {
      font-family: var(--landing-record);
    }

    .page .identity-heading {
      font: inherit;
      margin: 0;
    }

    .page .identity-name {
      font-family: var(--landing-display);
      font-size: 17px;
      font-weight: 400;
      font-kerning: normal;
      font-feature-settings: "kern" 1, "liga" 1;
      letter-spacing: 0;
      line-height: 1.15;
      margin-bottom: 8px;
      text-rendering: geometricPrecision;
    }

    .page .identity span {
      color: #59534d;
      font-family: var(--landing-record);
      font-size: 12px;
      line-height: 1.55;
    }

    .page .caption {
      color: #28231f;
      font-family: var(--landing-record);
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 1.55;
    }

    .page .label-hotspot {
      align-items: center;
      color: #2d2824;
      display: flex;
      justify-content: center;
    }

    .page .label-hotspot:hover,
    .page .label-hotspot:focus-visible {
      background: transparent;
      box-shadow: none;
    }

    /* Keep every room marker visible above the label's white blending field. */
    .page .hotspot:not(.portrait-heart-hotspot) {
      z-index: 9;
    }

    .page .hotspot:not(.portrait-heart-hotspot)::before {
      box-shadow: 0 0 0 2px rgba(255, 254, 251, .9);
    }

    .page .hotspot:not(.portrait-heart-hotspot):is(:hover, :focus-visible, .is-active)::before {
      box-shadow: 0 0 0 9px rgba(217, 165, 20, .12), 0 0 0 2px rgba(255, 254, 251, .95);
    }

    .page .label-hotspot .map-label {
      align-items: center;
      background: #fffefe;
      box-shadow: 0 0 10px 9px #fffefe;
      clip: auto;
      clip-path: none;
      display: inline-flex;
      flex-direction: column;
      gap: 3px;
      height: auto;
      overflow: visible;
      padding: 6px 14px;
      pointer-events: none;
      position: relative;
      white-space: nowrap;
      width: auto;
    }

    .page .map-label strong {
      color: inherit;
      font-family: var(--landing-display);
      font-size: 15px;
      font-weight: 400;
      font-kerning: normal;
      font-feature-settings: "kern" 1, "liga" 1;
      letter-spacing: 0;
      line-height: 1;
      text-rendering: geometricPrecision;
      transition: color 160ms ease;
    }

    .page .map-label em {
      color: #5c544d;
      font-family: var(--landing-record);
      font-size: 11px;
      font-style: normal;
      font-weight: 400;
      line-height: 1.25;
    }

    .page .label-hotspot:hover .map-label strong,
    .page .label-hotspot:focus-visible .map-label strong {
      color: #8a6723;
    }

    .page .portrait-heart-hotspot::after,
    .page .preview-phi {
      font-family: var(--landing-record);
      font-variant-numeric: tabular-nums;
    }

    @keyframes gentle-suggestion-point {
      0%, 100% {
        box-shadow: 0 0 0 2px rgba(255, 254, 251, .94), 0 0 0 5px rgba(174, 129, 35, .04);
        transform: scale(1);
      }
      50% {
        box-shadow: 0 0 0 2px rgba(255, 254, 251, .98), 0 0 0 11px rgba(174, 129, 35, .16);
        transform: scale(1.1);
      }
    }

    @keyframes gentle-suggestion-object {
      0%, 100% { opacity: .28; transform: translate(-50%, -50%) scale(.9); }
      50% { opacity: .72; transform: translate(-50%, -50%) scale(1.08); }
    }

    .page .hotspot.is-gentle-suggestion::before {
      animation: gentle-suggestion-point 4.8s ease-in-out infinite;
      background: #a97d25;
    }

    .page .portrait-heart-hotspot.is-gentle-suggestion .portrait-heart-light {
      border-color: rgba(174, 129, 35, .48);
      box-shadow: 0 0 20px rgba(174, 129, 35, .2), inset 0 0 11px rgba(174, 129, 35, .1);
      opacity: .9;
    }

    .page .artifact.is-gentle-suggestion .artifact-object {
      position: relative;
    }

    .page .artifact.is-gentle-suggestion .artifact-object::after {
      animation: gentle-suggestion-object 5.2s ease-in-out infinite;
      border: 1px solid rgba(174, 129, 35, .48);
      border-radius: 50%;
      content: "";
      height: 58px;
      left: 50%;
      pointer-events: none;
      position: absolute;
      top: 50%;
      width: 58px;
    }

    .page .artifact.is-gentle-suggestion .artifact-text span:first-child {
      color: #78591e;
    }

    @media (prefers-reduced-motion: reduce) {
      .page .hotspot.is-gentle-suggestion::before { animation: none; box-shadow: 0 0 0 2px rgba(255, 254, 251, .96), 0 0 0 8px rgba(174, 129, 35, .12); }
      .page .artifact.is-gentle-suggestion .artifact-object::after { animation: none; opacity: .5; transform: translate(-50%, -50%); }
    }

    .page .preview-title {
      color: #1c1815;
      font-family: var(--landing-display);
      font-size: 23px;
      font-weight: 400;
      font-kerning: normal;
      font-feature-settings: "kern" 1, "liga" 1;
      letter-spacing: 0;
      line-height: 1.05;
      text-rendering: geometricPrecision;
    }

    .page .preview-kicker {
      color: #5c554f;
      font-family: var(--landing-record);
      font-size: 11px;
      font-weight: 400;
      line-height: 1.45;
    }

    .page .preview-note {
      color: #524b45;
      font-family: var(--landing-humanist);
      font-size: 12.5px;
      line-height: 1.45;
    }

    .page .preview-close {
      font-family: var(--landing-record);
      font-weight: 400;
    }

    .page .artifact-text {
      color: #3a3630;
      font-family: var(--landing-record);
      font-size: 12px;
      line-height: 1.72;
    }

    .page .artifact-text span:first-child {
      color: #211c18;
      font-family: var(--landing-record);
      font-size: 12px;
      line-height: inherit;
      margin-bottom: 0;
    }

    .page .artifact-text span:not(:first-child) {
      color: #68615a;
      font-variant-numeric: tabular-nums;
    }

    .page .global-player {
      font-family: var(--landing-record);
    }

    .page .global-player .player-copy span,
    .page .player-index,
    .page .player-time {
      font-family: var(--landing-record);
      font-size: 11px;
      font-variant-numeric: tabular-nums;
    }

    .page .global-player .player-copy strong {
      font-family: var(--landing-display);
      font-size: 13.5px;
      font-kerning: normal;
      font-feature-settings: "kern" 1, "liga" 1;
      letter-spacing: 0;
      line-height: 1.08;
      text-rendering: geometricPrecision;
    }

    .page .player-room-arrow {
      font-family: var(--landing-display);
    }

    @media (max-width: 680px) {
      .page .identity-name { font-size: 16px; }
      .page .identity span { font-size: 12px; }
      .page .caption { font-size: 12px; }
      .page .label-hotspot .map-label { padding: 4px 9px; }
      .page .map-label strong { font-size: 12px; }
      .page .map-label em { font-size: 11px; }
      .page .preview-title { font-size: 21px; }
      .page .artifact-text,
      .page .artifact-text span:first-child { font-size: 12px; }
    }

    .professional-path {
      display: flex;
      gap: 13px;
      margin-top: 9px;
    }

    .professional-path button,
    .professional-path a,
    .collect-room,
    .attention-footer button {
      background: transparent;
      border: 0;
      border-bottom: 1px solid transparent;
      color: #665e57;
      cursor: pointer;
      font-family: var(--landing-record, var(--mono));
      font-size: 12px;
      padding: 0 0 3px;
      text-decoration: none;
      text-transform: lowercase;
    }

    .professional-path button:hover,
    .professional-path button:focus-visible,
    .professional-path a:hover,
    .professional-path a:focus-visible,
    .collect-room:hover,
    .collect-room:focus-visible,
    .collect-room.is-kept,
    .attention-footer button:hover,
    .attention-footer button:focus-visible {
      border-bottom-color: currentColor;
      color: #2c2723;
    }

    .credits-room {
      background: rgba(255, 255, 255, .985);
      inset: 0;
      opacity: 0;
      overflow: auto;
      pointer-events: none;
      position: fixed;
      transform: translateY(8px);
      transition: opacity 220ms ease, transform 260ms ease;
      visibility: hidden;
      z-index: 130;
    }

    .credits-room.is-open {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
      visibility: visible;
    }

    body.credits-open { overflow: hidden; }

    .credits-panel {
      margin: 0 auto;
      max-width: 1480px;
      min-height: 100%;
      padding: clamp(24px, 4vw, 64px);
    }

    .credits-header {
      align-items: flex-start;
      border-bottom: 1px solid var(--hairline);
      display: flex;
      justify-content: space-between;
      padding-bottom: clamp(28px, 4vw, 58px);
    }

    .credits-heading p,
    .credits-meta,
    .credits-type,
    .credits-filter,
    .credits-search,
    .credits-source {
      font-family: var(--landing-record, var(--mono));
    }

    .credits-heading p {
      color: #8b7654;
      font-size: 9px;
      margin: 0 0 11px;
      text-transform: lowercase;
    }

    .credits-heading h2 {
      color: var(--ink);
      font-family: var(--landing-display, Georgia, serif);
      font-size: clamp(29px, 3vw, 44px);
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1;
      margin: 0;
    }

    .credits-intro {
      align-items: end;
      border-bottom: 1px solid var(--hairline);
      display: grid;
      gap: 30px;
      grid-template-columns: minmax(240px, 1fr) minmax(280px, 520px);
      padding: clamp(28px, 4vw, 55px) 0;
    }

    .credits-intro p {
      color: #554d46;
      font-family: var(--landing-text, Georgia, serif);
      font-size: clamp(17px, 1.45vw, 23px);
      line-height: 1.55;
      margin: 0;
      max-width: 690px;
    }

    .credits-search {
      background: transparent;
      border: 0;
      border-bottom: 1px solid #9b8c7e;
      border-radius: 0;
      color: #2d2824;
      font-size: 10px;
      min-height: 42px;
      outline: 0;
      padding: 10px 1px;
      width: 100%;
    }

    .credits-search:focus { border-bottom-color: #8a6723; }

    .credits-filters {
      border-bottom: 1px solid var(--hairline);
      display: flex;
      gap: 28px;
      overflow-x: auto;
      padding: 19px 0;
      scrollbar-width: none;
    }

    .credits-filter {
      background: transparent;
      border: 0;
      border-bottom: 1px solid transparent;
      color: #8a8178;
      cursor: pointer;
      flex: 0 0 auto;
      font-size: 8px;
      min-height: 32px;
      padding: 5px 0;
      text-transform: lowercase;
    }

    .credits-filter.is-active,
    .credits-filter:hover,
    .credits-filter:focus-visible {
      border-bottom-color: #8a6723;
      color: #352f2a;
    }

    .credits-count {
      color: #9b928a;
      font-family: var(--landing-record, var(--mono));
      font-size: 8px;
      margin: 24px 0 8px;
    }

    .credits-list { border-top: 1px solid var(--hairline); }

    .credits-entry {
      align-items: start;
      border-bottom: 1px solid var(--hairline);
      display: grid;
      gap: clamp(16px, 3vw, 48px);
      grid-template-columns: minmax(120px, .55fr) minmax(240px, 1.15fr) minmax(260px, 1.4fr);
      padding: clamp(23px, 3vw, 38px) 0;
      scroll-margin-top: 24px;
    }

    .credits-entry.is-targeted { animation: credits-arrive 1500ms ease; }

    @keyframes credits-arrive {
      0%, 35% { background: rgba(181, 143, 72, .08); }
      100% { background: transparent; }
    }

    .credits-type {
      color: #9a7440;
      font-size: 8px;
      line-height: 1.6;
      text-transform: lowercase;
    }

    .credits-entry h3 {
      color: #302b27;
      font-family: var(--landing-display, Georgia, serif);
      font-size: clamp(18px, 1.65vw, 25px);
      font-style: italic;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.22;
      margin: 0 0 9px;
    }

    .credits-entry-creator {
      color: #5d554e;
      font-family: var(--landing-text, Georgia, serif);
      font-size: 13px;
      line-height: 1.5;
      margin: 0;
    }

    .credits-meta {
      color: #716960;
      display: grid;
      font-size: 8.5px;
      gap: 8px;
      line-height: 1.65;
    }

    .credits-source {
      border-bottom: 1px solid currentColor;
      color: #7f632d;
      font-size: 8px;
      justify-self: start;
      margin-top: 4px;
      padding-bottom: 2px;
      text-decoration: none;
    }

    .credits-note { color: #8b8178; }

    .artwork-credit-link {
      background: transparent;
      border: 0;
      border-bottom: 1px solid transparent;
      color: #887866;
      cursor: pointer;
      font-family: var(--landing-record, var(--mono));
      font-size: 7px;
      margin-left: 10px;
      padding: 0 0 2px;
      text-transform: lowercase;
    }

    .artwork-credit-link:hover,
    .artwork-credit-link:focus-visible {
      border-bottom-color: currentColor;
      color: #5b4621;
    }

    @media (max-width: 760px) {
      .credits-panel { padding: 22px 18px 50px; }
      .credits-intro { grid-template-columns: 1fr; }
      .credits-entry { grid-template-columns: 1fr; gap: 10px; }
      .credits-type { margin-bottom: 3px; }
      .credits-filters { gap: 22px; }
    }

    .memory-trace {
      fill: none;
      opacity: .44;
      stroke: #a78952;
      stroke-dasharray: 2 7;
      stroke-linecap: round;
      stroke-width: .8;
      vector-effect: non-scaling-stroke;
    }

    .memory-trace.is-new {
      animation: memory-trace-arrive 900ms ease both;
      stroke-dasharray: 520;
      stroke-dashoffset: 520;
    }

    .memory-trace-node {
      fill: #fff;
      opacity: .82;
      stroke: #a78952;
      stroke-width: .8;
      vector-effect: non-scaling-stroke;
    }

    @keyframes memory-trace-arrive {
      to { stroke-dashoffset: 0; }
    }

    .hotspot.is-visited::before {
      box-shadow: 0 0 0 5px rgba(167,137,82,.08);
    }

    .label-hotspot.is-visited .map-label strong::after {
      color: #a78952;
      content: " ·";
    }

    .attention-toggle {
      align-items: center;
      background: rgba(255,254,253,.92);
      border: 1px solid rgba(145,132,119,.45);
      border-radius: 50%;
      color: #8a6723;
      cursor: pointer;
      display: inline-flex;
      height: 36px;
      justify-content: center;
      position: fixed;
      right: 40px;
      top: 112px;
      transition: border-color 160ms ease, transform 180ms ease, opacity 180ms ease;
      width: 36px;
      z-index: 52;
    }

    .attention-toggle:hover,
    .attention-toggle:focus-visible {
      border-color: #8a6723;
      transform: rotate(7deg);
    }

    .attention-toggle-mark {
      font-family: Georgia, serif;
      font-size: 13px;
      line-height: 1;
    }

    .attention-toggle-count {
      background: #9a7834;
      border-radius: 50%;
      bottom: 1px;
      display: none;
      height: 5px;
      position: absolute;
      right: 2px;
      width: 5px;
    }

    .attention-toggle.has-memory .attention-toggle-count { display: block; }

    .room-actions {
      align-items: center;
      display: flex;
      gap: 18px;
    }

    .collect-room {
      color: var(--room-accent);
      font-size: 9px;
    }

    .attention-room {
      --attention-accent: #9a7834;
      background: #fff;
      inset: 0;
      opacity: 0;
      overflow: auto;
      pointer-events: none;
      position: fixed;
      transform: translateY(12px);
      transition: opacity 260ms ease, transform 320ms cubic-bezier(.2,.75,.2,1), visibility 0s linear 320ms;
      visibility: hidden;
      z-index: 70;
    }

    .attention-room.is-open {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
      transition-delay: 0s;
      visibility: visible;
    }

    .attention-panel {
      display: grid;
      gap: clamp(26px, 4vw, 58px);
      margin: 0 auto;
      max-width: 1520px;
      min-height: 100dvh;
      padding: clamp(24px, 4vw, 58px);
      width: 100%;
    }

    .attention-header {
      align-items: start;
      display: flex;
      justify-content: space-between;
    }

    .attention-header > div {
      display: grid;
      gap: 8px;
    }

    .attention-header p,
    .attention-label,
    .attention-keepsakes header,
    .attention-footer,
    .attention-figure figcaption {
      color: #746c65;
      font-family: var(--mono);
      font-size: 9px;
      line-height: 1.5;
      margin: 0;
    }

    .attention-header p,
    .attention-label {
      color: var(--attention-accent);
      font-size: 10px;
      text-transform: lowercase;
    }

    .attention-header h2 {
      font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
      font-size: clamp(23px, 2vw, 28px);
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.12;
      margin: 0;
    }

    .attention-main {
      align-items: stretch;
      display: grid;
      gap: clamp(34px, 6vw, 92px);
      grid-template-columns: minmax(460px, 1.55fr) minmax(260px, .45fr);
    }

    .attention-figure {
      display: grid;
      gap: 10px;
      margin: 0;
      min-width: 0;
    }

    .attention-map {
      background: transparent;
      border-bottom: 1px solid #ded7cf;
      border-top: 1px solid #ded7cf;
      display: block;
      min-height: 500px;
      width: 100%;
    }

    .attention-map-line {
      fill: none;
      stroke: rgba(143,111,52,.38);
      stroke-linecap: round;
      stroke-width: .82;
      vector-effect: non-scaling-stroke;
    }

    .attention-map-line.is-returned {
      stroke: rgba(143,111,52,.7);
      stroke-width: 1.35;
    }

    .attention-map-line.is-quiet {
      opacity: .14;
      stroke-dasharray: 1 9;
    }

    .attention-map-node {
      cursor: pointer;
      outline: none;
    }

    .attention-map-node .attention-map-star {
      fill: #fff;
      stroke: #9a9188;
      stroke-width: 1;
      transition: fill 180ms ease, r 220ms ease, stroke 180ms ease;
    }

    .attention-map-node.is-visited .attention-map-star {
      fill: #fff;
      stroke: var(--node-color, #9a7834);
    }

    .attention-map-node.is-kept .attention-map-star {
      fill: var(--node-color, #9a7834);
    }

    .attention-map-node:hover .attention-map-star,
    .attention-map-node:focus-visible .attention-map-star,
    .attention-map-node.is-selected .attention-map-star {
      filter: drop-shadow(0 0 5px color-mix(in srgb, var(--node-color, #9a7834) 48%, transparent));
      stroke-width: 1.35;
    }

    .attention-map-node.is-selected .attention-map-halo { opacity: .58; }

    .attention-map-halo,
    .attention-map-return,
    .attention-map-action {
      fill: none;
      pointer-events: none;
      vector-effect: non-scaling-stroke;
    }

    .attention-map-hit {
      fill: transparent;
      pointer-events: all;
    }

    .attention-map-halo {
      opacity: var(--halo-opacity, 0);
      stroke: color-mix(in srgb, var(--node-color, #9a7834) 36%, transparent);
      stroke-width: .75;
    }

    .attention-map-return {
      opacity: var(--return-opacity, 0);
      stroke: color-mix(in srgb, var(--node-color, #9a7834) 68%, transparent);
      stroke-dasharray: 1.5 4.5;
      stroke-linecap: round;
      stroke-width: .9;
    }

    .attention-map-action {
      opacity: var(--action-opacity, 0);
      stroke: color-mix(in srgb, var(--node-color, #9a7834) 72%, transparent);
      stroke-dasharray: 5 7;
      stroke-width: .7;
    }

    .attention-map-node text {
      fill: #615a53;
      font-family: var(--landing-record, var(--mono));
      font-size: 8.5px;
      pointer-events: none;
      text-anchor: middle;
    }

    .attention-map-node .attention-map-detail {
      fill: #8a8178;
      font-size: 6.8px;
      opacity: 0;
      transition: opacity 160ms ease;
    }

    .attention-map-node:hover .attention-map-detail,
    .attention-map-node:focus-visible .attention-map-detail {
      opacity: 1;
    }

    .attention-figure figcaption {
      display: flex;
      gap: 18px;
      justify-content: space-between;
    }

    .attention-reading {
      align-content: start;
      border-top: 1px solid #d8d0c7;
      display: grid;
      gap: 16px;
      padding-top: 15px;
    }

    .attention-reading h3 {
      color: #3d3732;
      font-family: "Anna Didone", "Bodoni 72", Didot, "Bodoni MT", Georgia, serif;
      font-feature-settings: "kern" 1, "liga" 1;
      font-kerning: normal;
      font-size: clamp(21px, 1.7vw, 26px);
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.18;
      margin: 0;
      max-width: 36ch;
      text-rendering: geometricPrecision;
      text-wrap: balance;
    }

    .attention-reading > p {
      color: #403933;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 16px;
      line-height: 1.5;
      margin: 0;
      max-width: 430px;
    }

    .attention-tags {
      border-top: 1px solid #ddd6cf;
      display: flex;
      flex-wrap: wrap;
      gap: 9px 18px;
      padding-top: 13px;
    }

    .attention-tags span {
      color: var(--attention-accent);
      font-family: var(--landing-record, var(--mono));
      font-size: 8px;
    }

    .attention-tags button {
      background: transparent;
      border: 0;
      border-bottom: 1px solid #bfae93;
      color: #67583f;
      cursor: pointer;
      font-family: var(--landing-record, var(--mono));
      font-size: 8px;
      min-height: 32px;
      padding: 0 0 2px;
    }

    .attention-observations {
      border-top: 1px solid #ddd6cf;
      color: #817870;
      display: block;
      font-family: var(--landing-record, var(--mono));
      font-size: 8px;
      line-height: 1.65;
      padding-top: 13px;
    }

    .attention-observation {
      border-left: 1px solid #e3ddd6;
      display: grid;
      gap: 4px;
      min-height: 55px;
      padding: 11px 14px;
    }

    .attention-observation:nth-child(2n + 1) {
      border-left: 0;
      padding-left: 0;
    }

    .attention-observation span {
      color: #8a8178;
      font-family: var(--mono);
      font-size: 7px;
      text-transform: lowercase;
    }

    .attention-observation strong {
      color: #403933;
      font-family: Baskerville, "Iowan Old Style", Georgia, serif;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.28;
    }

    .attention-portrait {
      border-bottom: 1px solid #d8d0c7;
      border-top: 1px solid #d8d0c7;
      display: grid;
      gap: 18px;
      grid-template-columns: minmax(220px, .65fr) minmax(320px, 1.35fr);
      padding: clamp(22px, 3vw, 38px) 0;
    }

    .attention-portrait[hidden] { display: none; }

    .attention-portrait-heading {
      display: grid;
      gap: 9px;
    }

    .attention-portrait-heading span,
    .attention-portrait-question span {
      color: var(--attention-accent);
      font-family: var(--mono);
      font-size: 8px;
    }

    .attention-portrait-heading h3,
    .attention-portrait-question strong {
      color: #3d3732;
      font-family: "Anna Didone", "Bodoni 72", Didot, "Bodoni MT", Georgia, serif;
      font-size: clamp(20px, 1.6vw, 25px);
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.18;
      margin: 0;
    }

    .attention-portrait-body {
      display: grid;
      gap: 18px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .attention-portrait-fact,
    .attention-portrait-question {
      border-left: 1px solid #e1dad3;
      display: grid;
      gap: 7px;
      padding-left: 18px;
    }

    .attention-portrait-fact span {
      color: #8a8178;
      font-family: var(--mono);
      font-size: 7px;
    }

    .attention-portrait-fact strong {
      color: #403933;
      font-family: Baskerville, "Iowan Old Style", Georgia, serif;
      font-size: 15px;
      font-weight: 400;
      line-height: 1.35;
    }

    .attention-portrait-question {
      grid-column: 1 / -1;
    }

    .attention-keepsakes {
      border-top: 1px solid #d8d0c7;
      display: grid;
      gap: 14px;
      padding-top: 13px;
    }

    .attention-keepsakes header {
      display: flex;
      justify-content: space-between;
    }

    .attention-keepsakes-list {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .attention-keepsake {
      background: transparent;
      border: 0;
      border-left: 1px solid #e1dad3;
      cursor: pointer;
      display: grid;
      gap: 7px;
      min-height: 94px;
      padding: 5px 18px 10px;
      position: relative;
      text-align: left;
    }

    .attention-keepsake:nth-child(4n + 1) { border-left: 0; padding-left: 0; }

    .attention-keepsake span,
    .attention-keepsake small {
      color: #817870;
      font-family: var(--landing-record, var(--mono));
      font-size: 8px;
      padding: 0;
      text-align: left;
    }

    .attention-keepsake strong {
      color: #302923;
      font-family: Baskerville, "Iowan Old Style", Georgia, serif;
      font-size: 15px;
      font-weight: 400;
      line-height: 1.35;
    }

    .attention-keepsake:hover strong,
    .attention-keepsake:focus-visible strong {
      color: #7b5a1c;
    }

    .attention-empty {
      color: #817870;
      font-family: Baskerville, "Iowan Old Style", Georgia, serif;
      font-size: 16px;
      font-style: italic;
      grid-column: 1 / -1;
      margin: 0;
    }

    .attention-footer {
      align-items: baseline;
      border-top: 1px solid #ded7cf;
      display: flex;
      justify-content: space-between;
      padding-top: 12px;
    }

    @media (max-width: 850px) {
      .attention-main { grid-template-columns: 1fr; }
      .attention-map { min-height: 380px; }
      .attention-portrait { grid-template-columns: 1fr; }
      .attention-keepsakes-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .attention-keepsake:nth-child(4n + 1) { border-left: 1px solid #e1dad3; padding-left: 18px; }
      .attention-keepsake:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
    }

    @media (max-width: 680px) {
      .professional-path { gap: 10px; }
      .attention-toggle { right: 16px; top: 104px; }
      .attention-panel { padding: 20px 16px 28px; }
      .attention-main { gap: 28px; }
      .attention-map { min-height: 320px; }
      .attention-observations,
      .attention-portrait-body { grid-template-columns: 1fr; }
      .attention-observation,
      .attention-observation:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
      .attention-portrait-fact,
      .attention-portrait-question { border-left: 0; padding-left: 0; }
      .attention-keepsakes-list { grid-template-columns: 1fr; }
      .attention-keepsake,
      .attention-keepsake:nth-child(2n + 1),
      .attention-keepsake:nth-child(4n + 1) {
        border-left: 0;
        border-top: 1px solid #e1dad3;
        min-height: 0;
        padding: 12px 0;
      }
      .attention-footer { align-items: start; flex-direction: column; gap: 12px; }
    }

    /* Quiet opening hierarchy across every room reached from the wheel. */
    .room:is(
      [data-room="studio"],
      [data-room="atlas"],
      [data-room="values"],
      [data-room="signals"],
      [data-room="seed"],
      [data-room="experiments"],
      [data-room="cabinet"],
      [data-room="archive"],
      [data-room="portrait"]
    ) .room-title {
      color: #29241f;
      font-family: "Anna Didone", "Bodoni 72", Didot, "Bodoni MT", Georgia, serif;
      font-size: clamp(21px, 1.8vw, 27px);
      font-weight: 400;
      line-height: 1.15;
    }

    .room:is(
      [data-room="studio"],
      [data-room="atlas"],
      [data-room="signals"],
      [data-room="experiments"],
      [data-room="cabinet"],
      [data-room="portrait"]
    ) :is(
      .transformation-opening,
      .atlas-expedition-opening,
      .visual-signal-opening,
      .portrait-opening
    ) h3 {
      color: #3d3732;
      font-family: "Anna Didone", "Bodoni 72", Didot, "Bodoni MT", Georgia, serif;
      font-size: clamp(22px, 2vw, 30px);
      font-weight: 400;
      line-height: 1.16;
      max-width: 34ch;
      text-wrap: balance;
    }

    .room:is(
      [data-room="values"],
      [data-room="signals"],
      [data-room="seed"],
      [data-room="experiments"],
      [data-room="cabinet"],
      [data-room="archive"]
    ) .study-reading h3 {
      color: #3d3732;
      font-family: "Anna Didone", "Bodoni 72", Didot, "Bodoni MT", Georgia, serif;
      font-size: clamp(21px, 1.8vw, 27px);
      font-weight: 400;
      line-height: 1.18;
      max-width: 35ch;
      text-wrap: balance;
    }

    .room[data-room="atlas"] .curator-heading h3 {
      color: #3d3732;
      font-family: "Anna Didone", "Bodoni 72", Didot, "Bodoni MT", Georgia, serif;
      font-size: clamp(20px, 1.7vw, 25px);
      font-weight: 400;
      line-height: 1.18;
      text-wrap: balance;
    }

    @media (max-width: 640px) {
      .room:is(
        [data-room="studio"],
        [data-room="atlas"],
        [data-room="signals"],
        [data-room="experiments"],
        [data-room="cabinet"],
        [data-room="portrait"]
      ) :is(
        .transformation-opening,
        .atlas-expedition-opening,
        .visual-signal-opening,
        .portrait-opening
      ) h3,
      .room:is(
        [data-room="values"],
        [data-room="signals"],
        [data-room="seed"],
        [data-room="experiments"],
        [data-room="cabinet"],
        [data-room="archive"]
      ) .study-reading h3 {
        font-size: 22px;
        line-height: 1.2;
      }
    }

    /* One quiet title voice for every primary heading inside the wheel rooms. */
    .room:is(
      [data-room="studio"],
      [data-room="atlas"],
      [data-room="values"],
      [data-room="signals"],
      [data-room="seed"],
      [data-room="experiments"],
      [data-room="cabinet"],
      [data-room="archive"],
      [data-room="portrait"]
    ) {
      --quiet-title-color: #3d3732;
      --quiet-title-font: "Anna Didone", "Bodoni 72", Didot, "Bodoni MT", Georgia, serif;
      --quiet-title-size: clamp(21px, 1.7vw, 26px);
    }

    .room:is(
      [data-room="studio"],
      [data-room="atlas"],
      [data-room="values"],
      [data-room="signals"],
      [data-room="seed"],
      [data-room="experiments"],
      [data-room="cabinet"],
      [data-room="archive"],
      [data-room="portrait"]
    ) :is(
      .room-title,
      .transformation-opening h3,
      .transformation-reading h4,
      .critique-header h3,
      .critique-domain-question,
      .curator-heading h3,
      .atlas-expedition-opening h3,
      .atlas-gallery-reading h3,
      .atlas-stop-reading h4,
      .visual-signal-opening h3,
      .visual-signal-reading h3,
      .visual-design-copy h4,
      .study-reading h3,
      .seed-stage strong,
      .portrait-opening h3,
      .portrait-reading h4
    ) {
      color: var(--quiet-title-color);
      font-family: var(--quiet-title-font);
      font-feature-settings: "kern" 1, "liga" 1;
      font-kerning: normal;
      font-size: var(--quiet-title-size);
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.18;
      max-width: 36ch;
      text-rendering: geometricPrecision;
      text-wrap: balance;
    }

    .room[data-room="studio"] .transformation-opening {
      align-items: start;
      gap: 9px;
      grid-template-columns: minmax(0, 650px);
    }

    .room[data-room="studio"] .transformation-opening p,
    .room[data-room="studio"] .studio-instrument .transformation-opening p,
    .room[data-room="studio"] .transformation-brief {
      color: #625a53;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 16px;
      line-height: 1.55;
      max-width: 620px;
    }

    .room[data-room="studio"] .transformation-studio {
      gap: clamp(20px, 2.25vw, 30px);
    }

    .room[data-room="signals"] .visual-signal-opening {
      align-items: start;
      gap: 9px;
      grid-template-columns: minmax(0, 650px);
    }

    .room[data-room="signals"] .visual-signal-opening p {
      color: #625a53;
      font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      font-size: 14px;
      line-height: 1.55;
      max-width: 620px;
    }

    .room[data-room="signals"] .visual-signal-reading h3,
    .room[data-room="signals"] .visual-design-copy h4 {
      margin-bottom: 10px;
    }

    .room[data-room="seed"] :is([data-seed-heading], [data-seed-stage]) {
      display: block;
      margin: 0 0 12px;
    }

    /* The four shelf studies share the same restrained editorial title voice. */
    :is(
      .lightness-opening h3,
      .machine-opening h3,
      .fibonacci-opening h3,
      .light-reading h3,
      .machine-reading h3,
      .fib-reading h3,
      .sacred-reading h3,
      .sacred-chapel-reading h3,
      .sacred-atlas-title,
      .sacred-atlas-study h4
    ) {
      color: #3d3732;
      font-family: "Anna Didone", "Bodoni 72", Didot, "Bodoni MT", Georgia, serif;
      font-feature-settings: "kern" 1, "liga" 1;
      font-kerning: normal;
      font-size: clamp(21px, 1.7vw, 26px);
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.18;
      max-width: 36ch;
      text-rendering: geometricPrecision;
      text-wrap: balance;
    }

    :is(
      .light-reading h3,
      .machine-reading h3,
      .fib-reading h3,
      .sacred-reading h3,
      .sacred-chapel-reading h3,
      .sacred-atlas-study h4
    ) {
      margin-bottom: 10px;
    }

    @media (max-width: 640px) {
      .room:is(
        [data-room="studio"],
        [data-room="atlas"],
        [data-room="values"],
        [data-room="signals"],
        [data-room="seed"],
        [data-room="experiments"],
        [data-room="cabinet"],
        [data-room="archive"],
        [data-room="portrait"]
      ) {
        --quiet-title-size: 21px;
      }

      .room[data-room="studio"] .transformation-opening {
        grid-template-columns: 1fr;
      }

      .room[data-room="studio"] .transformation-opening p,
      .room[data-room="studio"] .studio-instrument .transformation-opening p,
      .room[data-room="studio"] .transformation-brief {
        font-size: 15px;
      }

      :is(
        .lightness-opening h3,
        .machine-opening h3,
        .fibonacci-opening h3,
        .light-reading h3,
        .machine-reading h3,
        .fib-reading h3,
        .sacred-reading h3,
        .sacred-chapel-reading h3,
        .sacred-atlas-title,
        .sacred-atlas-study h4
      ) {
        font-size: 21px;
      }
    }

    /* Editorial reduction: keep the idea, the evidence, and the interaction. */
    .room[data-room="studio"] :is(
      .studio-tool-intro,
      .transformation-result,
      .transformation-distinctions
    ),
    .room[data-room="atlas"] .atlas-field-note,
    .room[data-room="signals"] .visual-signal-copy,
    .room[data-room="seed"] :is(.seed-stage, .seed-condition-note),
    .room[data-room="experiments"] .study-reading-note,
    .room[data-room="machine"] .machine-note,
    .room[data-room="proportion"] .proportion-observation,
    .room[data-room="sacred"] .sacred-chapel:not([data-movement="love"]) .sacred-chapel-note {
      display: none;
    }

    .room[data-room="studio"] .transformation-reading,
    .room[data-room="seed"] .study-reading,
    .room[data-room="signals"] .visual-signal-reading {
      align-content: start;
    }

    @media (prefers-reduced-motion: reduce) {
      .room { clip-path: none; transition: none; }
      .memory-trace.is-new { animation: none; stroke-dasharray: 2 7; stroke-dashoffset: 0; }
      .attention-room { transition: none; }
    }
    /* Distinct room instruments: comparison, time/place, and future folios. */
    .signals-compare-room .study-article,
    .seed-futures-room .study-article { align-items: stretch; }
    .signals-pair-field {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      min-height: clamp(440px, 62vh, 760px);
      padding: 12px;
      background: #f8f6f1;
    }
    .signals-work {
      position: relative;
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      min-width: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      color: inherit;
      background: transparent;
      text-align: left;
      cursor: crosshair;
      overflow: hidden;
    }
    .signals-work-image {
      position: relative;
      min-height: 0;
      overflow: hidden;
      background: #eeece7;
    }
    .signals-work-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      filter: saturate(.86) contrast(.98);
      transition: filter 350ms ease, transform 600ms cubic-bezier(.2,.7,.2,1);
    }
    .signals-work:hover img { transform: scale(1.012); }
    .signals-work-caption {
      display: grid;
      gap: 3px;
      padding: 10px 2px 2px;
      font: 11px/1.45 var(--mono);
      color: var(--muted);
    }
    .signals-work-caption strong { color: var(--ink); font-weight: 400; }
    .signal-gaze-mark,
    .signal-composition-mark {
      position: absolute;
      left: var(--mark-x, 50%);
      top: var(--mark-y, 50%);
      width: 18px;
      aspect-ratio: 1;
      border: 1px solid rgba(255,255,255,.95);
      border-radius: 50%;
      transform: translate(-50%, -50%) scale(.4);
      opacity: 0;
      box-shadow: 0 0 0 1px rgba(53,47,42,.4), 0 0 20px rgba(255,255,255,.42);
      transition: opacity 250ms ease, transform 350ms ease;
      pointer-events: none;
    }
    .signals-work[data-marked="true"] .signal-gaze-mark,
    .signals-compare-room[data-revealed="true"] .signal-composition-mark {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
    .signal-composition-mark { width: 34px; border-color: var(--room-accent); box-shadow: 0 0 0 7px rgba(166,122,45,.08); }
    .signals-comparison-result { min-height: 72px; }
    .signals-comparison-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
    .signals-comparison-actions button,
    .seed-time-button {
      border: 0;
      border-bottom: 1px solid var(--hairline);
      border-radius: 0;
      padding: 8px 0;
      background: transparent;
      color: var(--muted);
      font: 11px/1 var(--mono);
      cursor: pointer;
    }
    .signals-comparison-actions button:hover,
    .signals-comparison-actions button:focus-visible,
    .seed-time-button:hover,
    .seed-time-button:focus-visible,
    .seed-time-button.is-active { color: var(--ink); border-color: var(--room-accent); }
    .signals-compare-room[data-revealed="true"] .signals-work-image img { filter: saturate(.68) contrast(1.03); }

    .seed-folio {
      position: relative;
      min-height: clamp(460px, 64vh, 760px);
      background: #f7f4ee;
      overflow: hidden;
    }
    .seed-folio img {
      width: 100%;
      height: 100%;
      min-height: clamp(460px, 64vh, 760px);
      display: block;
      object-fit: cover;
      object-position: var(--seed-focus, 50% 50%);
      filter: saturate(.82) contrast(.98) brightness(1.02);
      transition: opacity 280ms ease, filter 500ms ease, transform 800ms cubic-bezier(.2,.7,.2,1);
    }
    .seed-folio:hover img { transform: scale(1.008); filter: saturate(.9) contrast(1); }
    .seed-folio-note {
      position: absolute;
      left: 18px;
      bottom: 18px;
      max-width: min(440px, calc(100% - 36px));
      padding: 12px 14px;
      background: rgba(255,255,255,.9);
      backdrop-filter: blur(10px);
      color: var(--ink);
      font: 11px/1.55 var(--mono);
    }
    .seed-time {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-top: 20px;
      border-top: 1px solid var(--hairline);
    }
    .seed-time-button { text-align: left; }
    .seed-personal-note { min-height: 82px; margin-top: 16px; }
    .seed-personal-note p { margin: 5px 0 0; }

    .atlas-map-node-place {
      display: block;
      margin-top: 5px;
      color: var(--muted);
      font: 9px/1.3 var(--mono);
      white-space: normal;
    }
    .atlas-expedition .atlas-study-modes { grid-template-columns: repeat(5, 1fr); }
    .atlas-expedition[data-mode="place"] .atlas-voyage-composition { opacity: .2; }
    .atlas-expedition[data-mode="place"] .atlas-voyage-stage::after {
      content: attr(data-place);
      position: absolute;
      left: 18px;
      bottom: 18px;
      padding: 9px 12px;
      background: rgba(255,255,255,.9);
      color: var(--ink);
      font: 10px/1.3 var(--mono);
      z-index: 8;
    }
    .cabinet-selected-artwork { line-height: 1.5; }
    .transformation-studio .transformation-modes,
    .transformation-studio .transformation-distinctions { grid-template-columns: repeat(6, minmax(0, 1fr)); }

    @media (max-width: 780px) {
      .signals-pair-field { grid-template-columns: 1fr; min-height: auto; }
      .signals-work-image { min-height: 44vh; }
      .seed-folio,
      .seed-folio img { min-height: 54vh; }
      .transformation-studio .transformation-modes,
      .transformation-studio .transformation-distinctions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    /* Site typography system: editorial, reading, and archival voices. */
    :root {
      --type-editorial: "Anna Didone", "Bodoni 72", Didot, "Bodoni MT", Georgia, serif;
      --type-reading: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
      --type-interface: var(--mono);
      --type-room-size: 1.1875rem;
      --type-editorial-size: 1.1875rem;
      --type-section-size: 1.1875rem;
      --type-intro-size: 1.0625rem;
      --type-body-size: 1rem;
      --type-question-size: 1.125rem;
      --type-caption-size: .75rem;
      --type-interface-size: .8125rem;
      --type-meta-size: .6875rem;
      --type-annotation-size: .6875rem;
      --measure-title: 32ch;
      --measure-intro: 48ch;
      --measure-body: 64ch;
    }

    /* Room names */
    .room[data-room] .room-title,
    .listening-room .listening-title,
    .attention-room .attention-header h2 {
      color: #302b26;
      font-family: var(--type-editorial);
      font-size: var(--type-room-size);
      font-style: normal;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.16;
      margin-block: 0;
      max-width: 22ch;
      overflow-wrap: break-word;
      text-rendering: geometricPrecision;
      text-wrap: balance;
    }

    /* Section headings establish the default quiet level. */
    .room[data-room] .room-stage :is(h3, h4, h5, h6),
    .listening-room .listening-view :is(h3, h4, h5, h6),
    .attention-room :is(h3, h4, h5, h6),
    .timeline-title,
    .seed-stage strong {
      color: #3d3732;
      font-family: var(--type-reading);
      font-size: var(--type-section-size);
      font-style: normal;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.3;
      max-width: 38ch;
      overflow-wrap: break-word;
      text-wrap: balance;
    }

    /* Editorial titles: one calm scale across every room. */
    .room[data-room] .room-stage :is(
      .portrait-opening,
      .transformation-opening,
      .critique-header,
      .curator-heading,
      .atlas-expedition-opening,
      .visual-signal-opening,
      .lightness-opening,
      .machine-opening,
      .fibonacci-opening
    ) h3,
    .room[data-room] .room-stage :is(
      .portrait-reading,
      .transformation-reading,
      .atlas-gallery-reading,
      .atlas-stop-reading,
      .study-reading,
      .visual-signal-reading,
      .light-reading,
      .machine-reading,
      .fib-reading,
      .sacred-reading,
      .sacred-chapel-reading,
      .proportion-reading
    ) :is(h3, h4),
    .room[data-room] .room-stage :is(
      .critique-domain-question,
      .sacred-atlas-title,
      .sacred-first-title,
      .sacred-voices-title
    ),
    .listening-room .listening-view :is(
      .collection-reading,
      .study-context,
      .feel-copy
    ) > h3,
    .attention-room .attention-reading h3 {
      color: #3d3732;
      font-family: var(--type-editorial);
      font-size: var(--type-editorial-size);
      font-style: normal;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.2;
      margin-top: 0;
      max-width: var(--measure-title);
      overflow-wrap: break-word;
      text-rendering: geometricPrecision;
      text-wrap: balance;
    }

    /* Introductory paragraphs */
    .room[data-room] .room-copy,
    .room[data-room] .room-stage :is(
      .portrait-opening,
      .transformation-opening,
      .atlas-expedition-opening,
      .visual-signal-opening,
      .lightness-opening,
      .machine-opening,
      .fibonacci-opening
    ) > p,
    .room[data-room] .room-stage :is(
      .portrait-reading-copy,
      .light-reading-copy,
      .machine-reading-copy,
      .fib-reading-copy,
      .sacred-copy,
      .sacred-first-intro,
      .sacred-voices-intro,
      .sacred-atlas-intro
    ),
    .listening-room .listening-view :is(.collection-context, .bridge-copy),
    .attention-room .attention-reading > p {
      color: #514a44;
      font-family: var(--type-reading);
      font-size: var(--type-intro-size);
      font-style: normal;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.58;
      max-width: var(--measure-intro);
      overflow-wrap: break-word;
      text-wrap: pretty;
    }

    /* Body copy */
    .room[data-room] .room-stage p,
    .room[data-room] .room-stage li,
    .room[data-room] .room-stage dd,
    .listening-room .listening-view p,
    .listening-room .listening-view dd,
    .attention-room p {
      font-family: var(--type-reading);
      font-size: var(--type-body-size);
      letter-spacing: 0;
      line-height: 1.62;
      max-width: var(--measure-body);
      orphans: 2;
      overflow-wrap: break-word;
      text-wrap: pretty;
      widows: 2;
    }

    /* Artwork captions */
    .room[data-room] .room-stage figcaption,
    .room[data-room] .room-stage :is(
      .portrait-caption,
      .specimen-caption,
      .transformation-caption,
      .atlas-voyage-caption,
      .signals-work-caption,
      .light-caption,
      .machine-caption,
      .fib-field-caption,
      .sacred-caption,
      .sacred-chapel-caption,
      .sacred-first-caption,
      .sacred-atlas-caption,
      .sacred-voice-object-caption
    ) {
      color: #665e57;
      font-family: var(--type-interface);
      font-size: var(--type-caption-size);
      font-style: normal;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.55;
      max-width: 78ch;
      overflow-wrap: break-word;
      text-transform: none;
    }

    /* Dates, provenance, and artwork records */
    .room[data-room] .room-stage :is(
      .artist-dates,
      .artist-work-meta,
      .portrait-fragment-meta,
      .portrait-poem-meta,
      .archive-publication-meta,
      .archive-reading-meta,
      .light-work-meta,
      .machine-folio-meta,
      .machine-gallery-date,
      .afterlight-meta,
      .sacred-atlas-card-meta,
      .sacred-voice-field-meta,
      .atlas-stop-context,
      .atlas-stop-dates,
      .atlas-stop-medium,
      .cabinet-selected-artwork,
      .color-meta
    ),
    .listening-room .listening-panel :is(
      .timeline-year,
      .timeline-composer,
      .timeline-lens-value,
      .collection-facts,
      .study-facts,
      .music-credit,
      .listening-time
    ) {
      color: #665e57;
      font-family: var(--type-interface);
      font-size: var(--type-meta-size);
      font-style: normal;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.5;
      overflow-wrap: break-word;
      text-transform: none;
    }

    /* Interface labels and controls */
    .room[data-room] .room-stage :is(
      .study-chapter,
      .portrait-lens,
      .transformation-mode,
      .impulse-choice,
      .atlas-route,
      .atlas-map-node,
      .atlas-study-mode,
      .light-chapter,
      .light-segment,
      .machine-chapter,
      .machine-gallery-item,
      .machine-segment,
      .fib-chapter,
      .fib-segment,
      .fib-term,
      .fib-action,
      .sacred-station,
      .sacred-segment,
      .experiment-mode,
      .experiment-action,
      .proportion-tool,
      .proportion-overlay-button,
      .seed-time-button
    ),
    .room[data-room] .room-stage .signals-comparison-actions button,
    .listening-room .listening-panel :is(
      .listening-mode,
      .music-lens,
      .timeline-work,
      .score-cue,
      .resonance-register,
      .resonance-quality
    ) {
      font-family: var(--type-interface);
      font-size: var(--type-interface-size);
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.4;
      min-width: 0;
      overflow-wrap: break-word;
      text-transform: none;
      white-space: normal;
    }

    .room[data-room] .room-stage :is(
      .study-chapter-name,
      .portrait-lens-name,
      .critique-domain-name,
      .experiment-rule-name,
      .transformation-mode-name,
      .light-chapter-name,
      .machine-chapter-name,
      .fib-chapter-name,
      .sacred-station-name,
      .sacred-movement-name,
      .proportion-tool-name
    ),
    .listening-room .listening-panel .listening-mode-name {
      font-family: var(--type-interface);
      font-size: var(--type-interface-size);
      font-style: normal;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.4;
      overflow-wrap: break-word;
      text-transform: none;
    }

    .room[data-room] .room-stage :is(
      .study-chapter-index,
      .portrait-lens-index,
      .critique-domain-index,
      .curator-chapter-index,
      .atlas-map-node-index,
      .atlas-map-node-date,
      .transformation-mode-index,
      .light-chapter-index,
      .machine-chapter-index,
      .machine-gallery-index,
      .fib-chapter-index,
      .fib-claim-index,
      .sacred-station-index,
      .sacred-chapel-index,
      .sacred-first-index,
      .sacred-voice-index,
      .proportion-tool-index
    ),
    .listening-room .listening-panel .listening-mode-index {
      font-family: var(--type-interface);
      font-size: var(--type-annotation-size);
      font-style: normal;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.4;
    }

    /* Questions retain feeling without becoming oversized. */
    .room[data-room] .room-stage :is(
      .artist-question,
      .atlas-expedition-question strong,
      .study-reading-note p,
      .transformation-test p,
      .portrait-belief p,
      .sacred-question,
      .sacred-chapel-question,
      .sacred-voice-question,
      .fib-note
    ),
    .attention-room .attention-portrait-question strong,
    .listening-room .listening-panel :is(.active-listening-note, .resonance-carry h3) {
      color: #49423c;
      font-family: var(--type-reading);
      font-size: var(--type-question-size);
      font-style: italic;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.5;
      max-width: 52ch;
      overflow-wrap: break-word;
      text-wrap: pretty;
    }

    /* Quiet annotations */
    .room[data-room] .room-panel :is(
      .room-kicker,
      .room-reflection,
      .study-label,
      .brief-label,
      .critique-section-label,
      .critique-principle-label,
      .criterion-label,
      .generator-reading-label,
      .impulse-rail-label,
      .transformation-section-label,
      .transformation-result-label,
      .atlas-route-label,
      .atlas-field-note,
      .atlas-mode-note,
      .atlas-instrument-note,
      .visual-design-kicker,
      .experiment-quest-kicker,
      .experiment-passport-label,
      .light-reading-kicker,
      .light-control-label,
      .light-annotation,
      .machine-reading-kicker,
      .machine-control-label,
      .machine-note,
      .fib-reading-kicker,
      .fib-control-label,
      .sacred-reading-kicker,
      .sacred-control-label,
      .sacred-chapel-kicker,
      .sacred-first-kicker,
      .sacred-first-label,
      .sacred-first-point-label,
      .sacred-atlas-timeline-label,
      .proportion-panel-label,
      .proportion-readout-kicker,
      .proportion-structure-label
    ),
    .listening-room .listening-panel :is(
      .listening-kicker,
      .music-eyebrow,
      .resonance-carry-kicker,
      .resonance-carry-gate,
      .resonance-quality-note,
      .resonance-count,
      .feel-pulse,
      .resonance-axis
    ),
    .attention-room :is(
      .attention-label,
      .attention-header p,
      .attention-footer,
      .attention-keepsakes header,
      .attention-portrait-heading span,
      .attention-portrait-question span
    ) {
      color: #665e57;
      font-family: var(--type-interface);
      font-size: var(--type-annotation-size);
      font-style: normal;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.55;
      overflow-wrap: break-word;
      text-transform: none;
    }

    /* Keep labels inside their tracks and prevent typographic collisions. */
    .room[data-room] .room-stage :is(button, label, output, figcaption),
    .listening-room :is(button, label, output),
    .attention-room :is(button, label) {
      max-width: 100%;
    }

    .room[data-room] .room-stage :is(.study-reading, .portrait-reading, .light-reading, .machine-reading, .fib-reading, .sacred-reading),
    .listening-room :is(.collection-reading, .study-context, .feel-copy),
    .attention-room .attention-reading {
      min-width: 0;
    }

    @media (max-width: 640px) {
      :root {
        --type-room-size: 1.125rem;
        --type-editorial-size: 1.125rem;
        --type-section-size: 1.125rem;
        --type-intro-size: 1rem;
        --type-body-size: .9375rem;
        --type-question-size: 1.0625rem;
      }

      .room[data-room] .room-title,
      .listening-room .listening-title,
      .attention-room .attention-header h2,
      .room[data-room] .room-stage :is(h3, h4, h5, h6),
      .listening-room .listening-view :is(h3, h4, h5, h6) {
        max-width: 100%;
      }
    }

    /* Responsive composition system: four layouts, not one scaled canvas. */
    .room,
    .listening-room,
    .attention-room {
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-y: contain;
      overflow-x: hidden;
      overflow-y: auto;
      scroll-padding-block: 24px;
    }

    .room-panel,
    .listening-panel,
    .attention-panel {
      padding-bottom: max(clamp(24px, 4vw, 58px), env(safe-area-inset-bottom));
    }

    .room-header,
    .listening-header,
    .attention-header,
    .room-actions,
    .player-main,
    .player-scrub {
      min-width: 0;
    }

    .room-heading,
    .listening-heading,
    .attention-header > div {
      min-width: 0;
    }

    .room[data-room] :is(h1, h2, h3, h4, h5, h6, p, figcaption),
    .listening-room :is(h1, h2, h3, h4, h5, h6, p, figcaption),
    .attention-room :is(h1, h2, h3, h4, h5, h6, p, figcaption) {
      overflow-wrap: break-word;
    }

    body.room-open .attention-toggle,
    body.music-open .attention-toggle {
      opacity: 0;
      pointer-events: none;
    }

    /* A composed tablet-landscape landing page at approximately 1024px. */
    @media (min-width: 901px) and (max-width: 1180px) {
      .page {
        padding: 28px 28px 24px;
      }

      .gallery {
        align-items: center;
        display: grid;
        gap: 26px;
        grid-template-columns: minmax(500px, 1fr) minmax(250px, .42fr);
        min-height: auto;
        padding-top: 42px;
      }

      .map-wrap {
        grid-column: 1;
        grid-row: 1 / span 2;
        max-width: 700px;
      }

      .preview-card {
        align-self: end;
        grid-column: 2;
        grid-row: 1;
        justify-self: stretch;
      }

      .hand-panel {
        align-items: start;
        align-self: start;
        grid-column: 2;
        grid-row: 2;
        min-height: 0;
      }

      .hand-study-art {
        max-width: 230px;
        width: min(100%, 230px);
      }

      .caption {
        font-size: 14px;
        margin-top: 18px;
      }

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

    /* Tablet portrait and smaller rooms become deliberate reading sequences. */
    @media (max-width: 860px) {
      .page {
        padding: 22px 20px 28px;
      }

      .identity,
      .directions,
      .global-player {
        position: relative;
        inset: auto;
      }

      .global-player {
        margin: 18px 0 0 auto;
        width: min(350px, 100%);
      }

      .gallery {
        display: flex;
        flex-direction: column;
        gap: 34px;
        min-height: auto;
        padding-top: 34px;
      }

      .map-wrap {
        max-width: 720px;
        order: 1;
      }

      .preview-card {
        max-width: 340px;
        order: 2;
      }

      .hand-panel {
        align-items: flex-start;
        min-height: 0;
        order: 3;
        width: 100%;
      }

      .hand-study-art {
        max-width: 280px;
        width: min(72%, 280px);
      }

      .caption {
        margin-top: 18px;
        max-width: 34ch;
      }

      .shelf {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 28px;
      }

      .room-panel,
      .listening-panel,
      .attention-panel {
        gap: 24px;
        grid-template-rows: auto auto auto;
        height: auto;
        min-height: 100dvh;
        padding: 22px 20px max(32px, env(safe-area-inset-bottom));
      }

      .room-header,
      .listening-header,
      .attention-header {
        align-items: flex-start;
        gap: 18px;
      }

      .room-actions {
        flex: 0 0 auto;
        gap: 10px;
      }

      .room-main,
      .attention-main,
      .study-view,
      .feel-view,
      .transformation-opening,
      .transformation-workbench,
      .study-article,
      .archive-article,
      .portrait-article,
      .proportion-article,
      .light-article,
      .machine-article,
      .fib-article,
      .sacred-article,
      .atlas-gallery-intro,
      .atlas-gallery-main,
      .atlas-expedition-opening,
      .atlas-stop,
      .curator-workspace,
      .critique-workspace,
      .visual-signal-opening,
      .signals-pair-field,
      .seed-futures-room .study-article {
        grid-template-columns: minmax(0, 1fr) !important;
      }

      .room-main {
        gap: 24px;
      }

      .room-intro {
        gap: 10px;
      }

      .room-stage {
        min-height: 0;
        overflow: visible;
        touch-action: pan-y;
      }

      .room:is(
        [data-room="portrait"],
        [data-room="studio"],
        [data-room="atlas"],
        [data-room="values"],
        [data-room="signals"],
        [data-room="seed"],
        [data-room="experiments"],
        [data-room="cabinet"],
        [data-room="archive"],
        [data-room="proportion"],
        [data-room="machine"],
        [data-room="lightness"],
        [data-room="fibonacci"],
        [data-room="sacred"]
      ) .room-stage {
        min-height: 0;
      }

      .room-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-left: 0;
      }

      .study-figure,
      .portrait-figure,
      .proportion-figure,
      .light-figure,
      .machine-figure,
      .fib-field-wrap,
      .sacred-figure,
      .transformation-figure,
      .atlas-masterwork-figure,
      .atlas-voyage-figure {
        order: 1;
      }

      .study-reading,
      .portrait-reading,
      .proportion-reading,
      .light-reading,
      .machine-reading,
      .fib-reading,
      .sacred-reading,
      .transformation-reading,
      .atlas-gallery-reading,
      .atlas-stop-reading {
        min-height: 0;
        order: 2;
        padding-top: 0;
      }

      .study-field,
      .signals-work-image,
      .seed-folio,
      .seed-folio img {
        min-height: min(64svh, 560px);
      }

      .transformation-canvas-shell,
      .proportion-lab,
      .sacred-image-shell,
      .atlas-masterwork-stage,
      .atlas-voyage-stage,
      .feel-canvas-wrap,
      .feel-canvas {
        height: min(68svh, 620px);
        min-height: 420px;
      }

      .fib-canvas-shell {
        min-height: 390px;
      }

      .light-canvas-shell {
        max-height: none;
      }

      .listening-view {
        min-height: 0;
      }

      .attention-toggle {
        bottom: max(16px, env(safe-area-inset-bottom));
        right: 16px;
        top: auto;
      }

      .page {
        padding-bottom: max(84px, calc(48px + env(safe-area-inset-bottom)));
      }
    }

    /* Touch-sized controls and navigable horizontal chapter rails. */
    @media (pointer: coarse), (max-width: 860px) {
      .page button,
      .room button,
      .listening-room button,
      .attention-room button {
        min-height: 44px;
        min-width: 44px;
        touch-action: manipulation;
      }

      .return,
      .attention-toggle {
        height: 48px;
        width: 48px;
      }

      .room :is(input[type="range"], input[type="color"]),
      .listening-room input[type="range"],
      .global-player input[type="range"] {
        min-height: 44px;
        touch-action: manipulation;
      }

      .room :is(a.atlas-source-link, a.proportion-source-link, a.sacred-source-link, a.archive-scholar-link),
      .listening-room a {
        align-items: center;
        display: inline-flex;
        min-height: 44px;
      }

      :is(
        .study-chapters,
        .light-chapters,
        .light-gallery,
        .machine-chapters,
        .fib-chapters,
        .sacred-path,
        .proportion-work-selector,
        .proportion-toolbar,
        .transformation-modes,
        .impulse-rail,
        .atlas-routes,
        .atlas-study-modes,
        .atlas-chronology,
        .listening-modes
      ) {
        -webkit-overflow-scrolling: touch;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(112px, max-content);
        grid-template-columns: none;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-padding-inline: 1px;
        scroll-snap-type: inline proximity;
        scrollbar-width: thin;
      }

      :is(
        .study-chapter,
        .light-chapter,
        .light-work,
        .machine-chapter,
        .fib-chapter,
        .sacred-station,
        .proportion-work-button,
        .proportion-tool,
        .transformation-mode,
        .impulse-choice,
        .atlas-route,
        .atlas-study-mode,
        .atlas-era,
        .listening-mode
      ) {
        scroll-snap-align: start;
      }
    }

    /* Mobile: artwork first, controls beside it in sequence, never on top of it. */
    @media (max-width: 600px) {
      .page {
        padding-inline: 16px;
      }

      .identity {
        width: calc(100% - 68px);
      }

      .professional-path {
        flex-wrap: wrap;
        gap: 2px 12px;
      }

      .global-player {
        margin: 20px 0 0;
        width: 100%;
      }

      .global-player .player-main {
        gap: 10px;
      }

      .global-player .player-play {
        height: 44px;
        width: 44px;
      }

      .global-player .player-room-link {
        height: 44px;
        width: 44px;
      }

      .gallery {
        gap: 28px;
        padding-top: 26px;
      }

      .map-wrap {
        aspect-ratio: auto;
        display: grid;
        gap: 1px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-inline: auto;
        max-width: 560px;
        width: 100%;
      }

      .vitruvian-map {
        aspect-ratio: 800 / 719;
        grid-column: 1 / -1;
        height: auto;
        margin-bottom: 14px;
        width: 100%;
      }

      .living-astrolabe,
      .line-layer {
        aspect-ratio: 800 / 719;
        bottom: auto;
        height: auto;
        width: 100%;
      }

      .map-wrap > .hotspot:not(.portrait-heart-hotspot) {
        display: none;
      }

      .center-hotspot,
      .portrait-heart-hotspot,
      .label-hotspot {
        align-items: center;
        background: rgba(255, 254, 251, .74);
        border: 0;
        border-bottom: 1px solid #ded7cf;
        border-radius: 0;
        display: flex;
        height: auto;
        justify-content: flex-start;
        left: auto;
        min-height: 54px;
        padding: 9px 8px;
        position: relative;
        text-align: left;
        top: auto;
        transform: none;
        width: auto;
      }

      .center-hotspot,
      .portrait-heart-hotspot {
        gap: 9px;
      }

      .center-hotspot::before,
      .portrait-heart-hotspot::before {
        box-shadow: none;
        flex: 0 0 auto;
        height: 7px;
        opacity: 1;
        position: static;
        transform: none;
        width: 7px;
      }

      .portrait-heart-hotspot::after,
      .portrait-heart-light {
        display: none;
      }

      .page .label-hotspot .map-label,
      .page .center-hotspot span,
      .page .portrait-heart-hotspot span {
        clip: auto;
        clip-path: none;
        display: grid;
        gap: 2px;
        height: auto;
        inset: auto;
        overflow: visible;
        padding: 0;
        position: static;
        min-width: 0;
        transform: none;
        white-space: normal;
        width: auto;
      }

      .page .center-hotspot span,
      .page .portrait-heart-hotspot span {
        color: #29241f;
        font-family: var(--landing-record);
        font-size: 12px;
      }

      .page .label-hotspot .map-label strong {
        font-size: 12px;
      }

      .page .label-hotspot .map-label em {
        font-size: 11px;
      }

      .preview-card {
        max-width: 100%;
      }

      .hand-study-art {
        width: min(78%, 270px);
      }

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

      .artifact {
        min-height: 104px;
        padding-inline: 4px;
      }

      .room-panel,
      .listening-panel,
      .attention-panel {
        padding: 16px 14px max(28px, env(safe-area-inset-bottom));
      }

      .room-header,
      .listening-header,
      .attention-header {
        border-bottom: 1px solid #e3ddd6;
        padding-bottom: 14px;
      }

      .room-kicker,
      .listening-kicker,
      .attention-header p {
        max-width: 34ch;
      }

      .room-list {
        grid-template-columns: minmax(0, 1fr);
      }

      .room-stage::before,
      .room-stage::after {
        display: none;
      }

      :is(
        .transformation-studio,
        .proportion-study,
        .light-study,
        .machine-study,
        .fibonacci-study,
        .sacred-study,
        .study-room,
        .atlas-gallery,
        .atlas-expedition
      ) {
        padding-inline: 0;
      }

      .study-field,
      .signals-work-image,
      .seed-folio,
      .seed-folio img {
        min-height: min(60svh, 500px);
      }

      .transformation-canvas-shell,
      .proportion-lab,
      .sacred-image-shell,
      .atlas-masterwork-stage,
      .atlas-voyage-stage,
      .feel-canvas-wrap,
      .feel-canvas {
        height: min(62svh, 540px);
        min-height: 370px;
      }

      .machine-image-shell {
        min-height: 300px;
      }

      .fib-canvas-shell {
        min-height: 340px;
      }

      .seed-folio {
        display: grid;
        grid-template-rows: minmax(360px, 58svh) auto;
      }

      .seed-folio img {
        min-height: 0;
      }

      .seed-folio-note {
        backdrop-filter: none;
        background: #fff;
        bottom: auto;
        left: auto;
        max-width: none;
        padding: 12px 2px 0;
        position: static;
      }

      .signal-field {
        padding-top: 52px;
      }

      .signal-toolbar {
        align-items: center;
        inset: 0 0 auto;
        justify-content: flex-end;
        min-height: 52px;
        overflow-x: auto;
        position: absolute;
      }

      .signal-canvas {
        height: calc(100% - 52px);
        top: 52px;
      }

      .experiment-field {
        min-height: 540px !important;
        padding-bottom: 126px;
      }

      .experiments-study .experiment-canvas {
        height: calc(100% - 126px);
      }

      .experiment-quest,
      .experiment-field:has(.experiment-canvas[data-mode="chance"]) .experiment-quest {
        background: #fff;
        bottom: 0;
        grid-template-columns: minmax(0, 1fr) !important;
        left: 0;
        max-width: none;
        min-height: 112px;
        padding: 14px 2px 8px;
        right: 0;
      }

      .resonance-qualities,
      .curator-controls,
      .generator-reading,
      .critique-domains,
      .critique-reading,
      .sacred-sources,
      .seed-time,
      .seed-condition-list {
        grid-template-columns: minmax(0, 1fr);
      }

      .proportion-figure figcaption,
      .light-figure figcaption,
      .machine-figure figcaption,
      .fib-field-wrap figcaption,
      .sacred-figure figcaption,
      .atlas-masterwork-caption,
      .atlas-voyage-caption {
        align-items: flex-start;
        display: grid;
        gap: 4px;
      }
    }

    @media (max-width: 420px) {
      .page {
        padding-inline: 14px;
      }

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

      .center-hotspot,
      .portrait-heart-hotspot,
      .label-hotspot {
        padding-inline: 7px;
      }

      .page .label-hotspot .map-label strong,
      .page .center-hotspot span,
      .page .portrait-heart-hotspot span {
        font-size: 12px;
      }

      .room-panel,
      .listening-panel,
      .attention-panel {
        padding-inline: 12px;
      }

      :is(
        .study-chapters,
        .light-chapters,
        .light-gallery,
        .machine-chapters,
        .fib-chapters,
        .sacred-path,
        .proportion-work-selector,
        .proportion-toolbar,
        .transformation-modes,
        .impulse-rail,
        .atlas-routes,
        .atlas-study-modes,
        .atlas-chronology,
        .listening-modes
      ) {
        grid-auto-columns: minmax(108px, 42vw);
      }
    }

    /* One quiet, legible interaction language across the complete gallery. */
    :where(
      button,
      a[href],
      input,
      select,
      textarea,
      canvas[tabindex],
      [role="button"],
      [role="tab"],
      [role="slider"],
      [tabindex]:not([tabindex="-1"])
    ):focus-visible {
      outline: 1px solid var(--focus) !important;
      outline-offset: 4px;
      box-shadow: 0 0 0 3px var(--focus-halo), 0 0 0 5px rgba(118, 85, 28, .2);
    }

    :where(canvas, .proportion-lab, .light-canvas-shell, .fib-canvas-shell, .machine-image-shell, .sacred-image-shell, .sacred-chapel-image, .sacred-atlas-canvas, .sacred-first-canvas, .sacred-voice-field):focus-visible {
      outline-offset: -5px !important;
      box-shadow: inset 0 0 0 2px rgba(255, 254, 252, .88), inset 0 0 0 4px rgba(118, 85, 28, .72);
    }

    [role="tab"][aria-selected="true"],
    button[aria-pressed="true"] {
      color: #2b251f;
    }

    [role="tab"][aria-selected="true"] {
      border-bottom-color: var(--room-accent, var(--focus));
    }

    :is(
      figcaption,
      .specimen-caption,
      .room-list,
      .credits-count,
      .credits-type,
      .credits-meta,
      .credits-note,
      .player-index,
      .player-time,
      .listening-time,
      .study-chapter-index,
      .cabinet-object-kind,
      .archive-fragment,
      .quiet-annotation
    ) {
      color: #665e57;
    }

    .credits-search:focus-visible {
      border-bottom-color: var(--focus);
    }

    input[type="range"]:focus-visible::-webkit-slider-thumb {
      box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--focus);
    }

    input[type="range"]:focus-visible::-moz-range-thumb {
      box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--focus);
    }

    @media (pointer: coarse) {
      :where(.return, .transport-button, .player-play, .player-room-link, .attention-toggle) {
        min-height: 44px;
        min-width: 44px;
      }

      :where(.study-chapter, .listening-mode, .credits-filter, .professional-path button, .collect-room) {
        min-height: 44px;
      }

      :where(button, [role="button"], input, select) {
        touch-action: manipulation;
      }

      :where(.preview-reticle, .proportion-cursor) {
        display: none;
      }
    }

    @media (prefers-contrast: more) {
      :root {
        --soft-ink: #49433d;
        --muted: #4f4842;
        --line: #8d8379;
        --hairline: #9c9288;
      }

      :where(figcaption, [class*="caption"], [class*="meta"], [class*="annotation"], [class*="kicker"]) {
        color: #49433d;
      }

      :where(.hand-study-base, .cabinet-art, .vitruvian-map) {
        filter: contrast(1.18);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto !important; }

      *, *::before, *::after {
        animation-delay: 0s !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-delay: 0s !important;
        transition-duration: .01ms !important;
      }

      :where(.hand-study-motion, .living-astrolabe, .memory-trace.is-new) {
        animation: none !important;
      }

      .living-astrolabe { transform: none !important; }

      .room {
        clip-path: none !important;
        transform: none !important;
      }

      .page .hotspot.is-gentle-suggestion::before {
        animation: none !important;
        box-shadow: 0 0 0 2px rgba(255, 254, 251, .96), 0 0 0 8px rgba(174, 129, 35, .15);
      }
    }

    /* Every room name and active editorial title share one understated scale. */
    .room[data-room] .room-title,
    .room[data-room] .room-stage :is(
      .portrait-opening h3,
      .portrait-reading h4,
      .transformation-opening h3,
      .transformation-reading h3,
      .transformation-reading h4,
      .critique-header h3,
      .critique-domain-question,
      .curator-heading h3,
      .atlas-expedition-opening h3,
      .atlas-gallery-reading h3,
      .atlas-stop-reading h4,
      .visual-signal-opening h3,
      .visual-signal-reading h3,
      .visual-design-copy h4,
      .study-reading h3,
      [data-seed-heading],
      .lightness-opening h3,
      .light-reading h3,
      .machine-opening h3,
      .machine-reading h3,
      .fibonacci-opening h3,
      .fib-reading h3,
      .sacred-reading h3,
      .sacred-chapel-reading h3,
      .sacred-atlas-title,
      .sacred-atlas-study h4,
      .sacred-first-title,
      .sacred-voices-title,
      .proportion-reading h3,
      .proportion-reading h4
    ),
    .listening-room :is(.listening-title, .collection-reading > h3, .study-context > h3, .feel-copy > h3),
    .attention-room :is(.attention-header h2, .attention-reading h3) {
      font-size: var(--type-room-size);
      line-height: 1.16;
    }

    /* Final mobile hardening: safe areas, contained rails, and touch-first rooms. */
    @media (max-width: 860px) {
      html,
      body {
        max-width: 100%;
        overflow-x: hidden;
      }

      .page,
      .room-panel,
      .listening-panel,
      .attention-panel,
      .credits-panel {
        box-sizing: border-box;
        max-width: 100%;
      }

      .page {
        padding-top: max(22px, env(safe-area-inset-top));
      }

      .room,
      .listening-room,
      .attention-room,
      .credits-room {
        height: 100dvh;
        max-width: 100vw;
        min-height: 100svh;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        width: 100vw;
      }

      .room-panel,
      .listening-panel,
      .attention-panel,
      .credits-panel {
        min-height: 100dvh;
        overflow-x: clip;
        padding-top: max(22px, env(safe-area-inset-top));
        width: 100%;
      }

      .room-header,
      .listening-header,
      .attention-header,
      .credits-header {
        padding-right: 58px;
      }

      .room.is-open .room-header .return,
      .listening-room.is-open .listening-header .return,
      .attention-room.is-open .attention-header .return,
      .credits-room.is-open .credits-header .return {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, .9);
        position: fixed;
        right: max(12px, env(safe-area-inset-right));
        top: max(12px, env(safe-area-inset-top));
        z-index: 90;
      }

      .room-main,
      .room-stage,
      .study-room,
      .study-article,
      .study-figure,
      .study-reading,
      .portrait-study,
      .portrait-article,
      .portrait-figure,
      .listening-view,
      .listening-footer,
      .listening-transport {
        max-width: 100%;
        min-width: 0;
      }

      :is(
        .study-chapters,
        .portrait-lenses,
        .portrait-fragments,
        .light-chapters,
        .light-gallery,
        .machine-chapters,
        .machine-gallery,
        .fib-chapters,
        .sacred-path,
        .proportion-work-selector,
        .proportion-toolbar,
        .transformation-modes,
        .impulse-rail,
        .atlas-routes,
        .atlas-study-modes,
        .atlas-chronology,
        .listening-modes
      ) {
        max-width: 100%;
        min-width: 0;
        width: 100%;
      }
    }

    @media (max-width: 600px) {
      .room[data-room="portrait"] .portrait-image-shell {
        aspect-ratio: auto;
        height: min(62svh, 480px);
        min-height: 360px;
        width: 100%;
      }

      .listening-footer {
        overflow: hidden;
      }

      .listening-transport {
        align-items: center;
        display: grid;
        gap: 4px 7px;
        grid-template-columns: 44px 44px 44px minmax(0, 1fr) 44px;
        overflow: hidden;
        width: 100%;
      }

      #listening-previous { grid-column: 1; grid-row: 1; }
      #listening-play { grid-column: 2; grid-row: 1; }
      #listening-next { grid-column: 3; grid-row: 1; }
      #listening-time {
        grid-column: 4;
        grid-row: 1;
        min-width: 0;
        text-align: right;
        white-space: nowrap;
      }
      #listening-mute { grid-column: 5; grid-row: 1; }
      #listening-progress {
        grid-column: 1 / -1;
        grid-row: 2;
        min-width: 0;
        width: 100%;
      }
      #listening-volume { display: none; }

      .global-player,
      .global-player .player-main,
      .global-player .player-scrub {
        max-width: 100%;
        min-width: 0;
      }

      .attention-toggle {
        bottom: max(14px, env(safe-area-inset-bottom));
        right: max(14px, env(safe-area-inset-right));
      }
    }
    .skip-link {
      position: fixed;
      left: 16px;
      top: 12px;
      z-index: 1000;
      padding: 12px 16px;
      background: var(--paper);
      color: var(--ink);
      border: 1px solid currentColor;
      transform: translateY(-180%);
    }
    .skip-link:focus { transform: none; }
    .gallery-guide {
      color: #665e57;
      font: 14px/1.6 var(--type-reading);
      max-width: 32ch;
      margin: 10px 0 0;
    }
    .gallery-guide a { color: #55432d; text-underline-offset: 3px; }
    .fallback-overview { max-width: 64ch; padding: 24px; font: 17px/1.65 var(--type-reading); }
    .fallback-overview a { color: #55432d; }
    .room-loading { color: #665e57; font: 16px/1.6 var(--type-reading); padding: 24px 0; }
    .room-retry { min-height: 44px; padding: 10px 18px; color: var(--ink); background: var(--paper); border: 1px solid #665e57; cursor: pointer; }