:root {
      color-scheme: dark;
      --paper: #171a24;
      --paper-deep: #10131b;
      --paper-pale: #f1eadf;
      --ink: #f4eee6;
      --ink-soft: #b9b4ae;
      --walnut: #3a2118;
      --walnut-deep: #1c0e0a;
      --rule: rgba(244, 238, 230, 0.24);
      --accent: #c87046;
      --serif: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
      --mono: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
      --ease-out: cubic-bezier(0.2, 0.72, 0.24, 1);
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      width: 100%;
      min-height: 100%;
      margin: 0;
      overflow: hidden;
      background: var(--paper);
      color: var(--ink);
    }

    body {
      font-family: var(--serif);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    button {
      color: inherit;
      font: inherit;
    }

    button:focus-visible {
      outline: 1px solid var(--ink);
      outline-offset: 4px;
    }

    [hidden] {
      display: none !important;
    }

    .experience {
      position: fixed;
      inset: 0;
      isolation: isolate;
      overflow: hidden;
      background: var(--paper);
      transition: background-color 720ms var(--ease-out), color 520ms var(--ease-out);
    }

    .frame {
      position: absolute;
      inset: 18px;
      z-index: 8;
      border: 1px solid var(--rule);
      pointer-events: none;
    }

    .frame::before,
    .frame::after {
      position: absolute;
      width: 18px;
      height: 18px;
      border-color: rgba(42, 34, 27, 0.48);
      content: "";
    }

    .frame::before {
      top: -1px;
      left: -1px;
      border-top: 1px solid;
      border-left: 1px solid;
    }

    .frame::after {
      right: -1px;
      bottom: -1px;
      border-right: 1px solid;
      border-bottom: 1px solid;
    }

    .masthead {
      position: absolute;
      top: 40px;
      right: 42px;
      left: 42px;
      z-index: 7;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 32px;
      transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-out);
      pointer-events: none;
    }

    .identity {
      display: grid;
      grid-template-columns: auto auto;
      align-items: baseline;
      gap: 12px;
    }

    .identity__name {
      margin: 0;
      font-size: clamp(1.02rem, 1.55vw, 1.36rem);
      font-weight: 500;
      letter-spacing: -0.025em;
    }

    .identity__edition,
    .issue,
    .eyebrow,
    .microcopy,
    .counter,
    .meta-list dt,
    .folio,
    .fallback__kicker {
      font-family: var(--mono);
      font-size: 0.66rem;
      font-weight: 500;
      letter-spacing: 0.15em;
      line-height: 1.45;
      text-transform: uppercase;
    }

    .identity__edition {
      color: var(--ink-soft);
    }

    .issue {
      max-width: 260px;
      margin: 1px 0 0;
      color: var(--ink-soft);
      text-align: right;
    }

    .hero-word {
      position: absolute;
      top: 12.5%;
      left: 50%;
      z-index: 1;
      margin: 0;
      color: rgba(68, 50, 34, 0.075);
      font-size: clamp(7rem, 20vw, 20rem);
      font-weight: 400;
      letter-spacing: -0.085em;
      line-height: 0.75;
      text-transform: uppercase;
      transform: translateX(-51%);
      white-space: nowrap;
      pointer-events: none;
      transition: opacity 600ms var(--ease-out), transform 900ms var(--ease-out);
    }

    .scene-shell {
      position: absolute;
      inset: 0;
      z-index: 3;
    }

    #scene {
      display: block;
      width: 100%;
      height: 100%;
      cursor: default;
      opacity: 0;
      touch-action: none;
      transition: opacity 900ms var(--ease-out);
    }

    .webgl-ready #scene {
      opacity: 1;
    }

    .pointer-label {
      position: fixed;
      z-index: 12;
      display: grid;
      min-width: 128px;
      padding: 9px 12px 8px;
      border: 1px solid rgba(39, 30, 22, 0.24);
      background: rgba(244, 236, 219, 0.92);
      box-shadow: 0 8px 24px rgba(59, 38, 22, 0.08);
      font-family: var(--mono);
      font-size: 0.61rem;
      letter-spacing: 0.12em;
      line-height: 1.45;
      text-transform: uppercase;
      transform: translate(16px, 18px);
      transition: opacity 120ms ease;
      pointer-events: none;
      backdrop-filter: blur(8px);
    }

    .pointer-label[aria-hidden="true"] {
      opacity: 0;
    }

    .browse-ui {
      position: absolute;
      right: 42px;
      bottom: 38px;
      left: 42px;
      z-index: 7;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: end;
      gap: 28px;
      transition: opacity 400ms var(--ease-out), transform 650ms var(--ease-out);
    }

    .selection {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: end;
      gap: 16px;
      min-width: 0;
    }

    .counter {
      padding-bottom: 5px;
      color: var(--ink-soft);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .selection__copy {
      min-width: 0;
    }

    .selection__title {
      margin: 0;
      overflow: hidden;
      font-size: clamp(1.7rem, 3vw, 3.1rem);
      font-weight: 400;
      letter-spacing: -0.055em;
      line-height: 0.98;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .selection__note {
      max-width: 480px;
      margin: 7px 0 0;
      color: var(--ink-soft);
      font-size: 0.86rem;
      line-height: 1.45;
    }

    .browse-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .round-button,
    .text-button,
    .close-button {
      border: 1px solid rgba(43, 34, 27, 0.28);
      background: rgba(244, 236, 219, 0.72);
      cursor: pointer;
      transition:
        color 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        transform 180ms var(--ease-out);
      backdrop-filter: blur(8px);
    }

    .round-button {
      display: grid;
      width: 42px;
      height: 42px;
      padding: 0;
      border-radius: 50%;
      place-items: center;
    }

    .round-button:hover,
    .text-button:hover,
    .close-button:hover {
      border-color: var(--ink);
      background: var(--paper-pale);
      transform: translateY(-2px);
    }

    .round-button svg,
    .close-button svg {
      width: 15px;
      height: 15px;
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 1.25;
    }

    .text-button {
      min-height: 42px;
      padding: 0 19px;
      border-radius: 999px;
      font-family: var(--mono);
      font-size: 0.65rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .index-nav {
      display: grid;
      justify-items: end;
      gap: 12px;
    }

    .markers {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 9px;
    }

    .marker {
      position: relative;
      width: 24px;
      height: 24px;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
    }

    .marker::before {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: rgba(48, 39, 31, 0.34);
      content: "";
      transform: translate(-50%, -50%);
      transition: width 260ms var(--ease-out), background 220ms ease;
    }

    .marker:hover::before {
      background: var(--ink);
    }

    .marker[aria-current="true"]::before {
      width: 19px;
      border-radius: 4px;
      background: var(--accent);
    }

    .microcopy {
      margin: 0;
      color: var(--ink-soft);
      text-align: right;
    }

    .detail-panel {
      position: absolute;
      top: 20%;
      right: clamp(42px, 7vw, 116px);
      z-index: 9;
      width: min(38vw, 470px);
      max-height: 68vh;
      padding: clamp(24px, 3vw, 42px);
      overflow: auto;
      border: 1px solid rgba(49, 38, 28, 0.22);
      background:
        linear-gradient(90deg, rgba(84, 58, 37, 0.055), transparent 6%, transparent 94%, rgba(84, 58, 37, 0.045)),
        rgba(244, 237, 220, 0.91);
      box-shadow:
        0 28px 80px rgba(56, 36, 21, 0.12),
        inset 0 0 36px rgba(113, 79, 46, 0.055);
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
      pointer-events: none;
      backdrop-filter: blur(14px);
    }

    .detail-panel::before {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 1px;
      background: linear-gradient(180deg, transparent, rgba(74, 52, 35, 0.08), transparent);
      content: "";
      pointer-events: none;
    }

    .mode-detail .detail-panel {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0ms, 300ms, 300ms;
      pointer-events: auto;
    }

    .mode-detail.is-opening .detail-panel {
      pointer-events: none;
    }

    .mode-detail .browse-ui {
      opacity: 0;
      transform: translateY(28px);
      pointer-events: none;
    }

    .mode-detail .hero-word {
      opacity: 0.22;
      transform: translateX(-51%) scale(0.96);
    }

    .mode-detail .masthead {
      opacity: 0.34;
      transform: translateY(-8px);
    }

    .close-button {
      position: absolute;
      top: 18px;
      right: 18px;
      display: grid;
      width: 38px;
      height: 38px;
      padding: 0;
      border-radius: 50%;
      place-items: center;
    }

    .eyebrow {
      margin: 0 46px 18px 0;
      color: var(--ink);
    }

    .detail-title {
      max-width: 90%;
      margin: 0;
      font-size: clamp(2.4rem, 5vw, 5.2rem);
      font-weight: 500;
      letter-spacing: -0.05em;
      line-height: 0.92;
    }

    .detail-deck {
      margin: 22px 0 0;
      font-size: clamp(1rem, 1.35vw, 1.22rem);
      line-height: 1.55;
    }

    .detail-deck::first-letter {
      float: left;
      margin: 5px 7px 0 0;
      color: var(--accent);
      font-size: 3.25em;
      line-height: 0.72;
    }

    .meta-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px 24px;
      margin: 30px 0 0;
      padding: 22px 0 0;
      border-top: 1px solid var(--rule);
    }

    .meta-list div {
      min-width: 0;
    }

    .meta-list dt {
      margin: 0 0 6px;
      color: var(--ink-soft);
    }

    .meta-list dd {
      margin: 0;
      font-size: 0.86rem;
      line-height: 1.45;
    }

    .detail-controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-top: 28px;
      padding-top: 18px;
      border-top: 1px solid var(--rule);
    }

    .detail-controls .microcopy {
      text-align: left;
    }

    .reset-button {
      flex: 0 0 auto;
      min-height: 36px;
      padding: 0 14px;
    }

    .folio {
      position: absolute;
      right: 40px;
      bottom: 31px;
      z-index: 6;
      color: rgba(43, 35, 28, 0.55);
      writing-mode: vertical-rl;
      transition: opacity 300ms ease;
      pointer-events: none;
    }

    .mode-detail .folio {
      opacity: 0;
    }

    .static-fallback {
      position: absolute;
      inset: 0;
      z-index: 14;
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 28px;
      padding: 48px;
      overflow: auto;
      background:
        radial-gradient(circle at 50% 0%, rgba(255, 251, 238, 0.75), transparent 38%),
        var(--paper);
    }

    .webgl-ready .static-fallback {
      display: none;
    }

    .fallback__header {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 28px;
      padding-bottom: 20px;
      border-bottom: 1px solid var(--rule);
    }

    .fallback__header h2 {
      max-width: 760px;
      margin: 6px 0 0;
      font-size: clamp(2.5rem, 7vw, 6.2rem);
      font-weight: 400;
      letter-spacing: -0.07em;
      line-height: 0.86;
    }

    .fallback__status {
      max-width: 360px;
      margin: 0;
      color: var(--ink-soft);
      line-height: 1.5;
      text-align: right;
    }

    .fallback__grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(140px, 1fr));
      align-items: end;
      gap: 12px;
      min-width: 1050px;
      padding: 28px 0;
    }

    .fallback-book {
      position: relative;
      display: grid;
      align-content: end;
      min-height: var(--book-height, 360px);
      padding: 18px;
      overflow: hidden;
      border: 1px solid rgba(247, 235, 205, 0.38);
      background: var(--book-color);
      color: #f2e5c8;
      box-shadow: 0 18px 34px rgba(49, 31, 18, 0.13);
    }

    .fallback-book::before {
      position: absolute;
      inset: 10px;
      border: 1px solid color-mix(in srgb, var(--book-foil), transparent 35%);
      content: "";
    }

    .fallback-book::after {
      position: absolute;
      top: 12%;
      left: 50%;
      width: 44%;
      aspect-ratio: 1;
      border: 1px solid var(--book-foil);
      border-radius: 50%;
      content: "";
      opacity: 0.75;
      transform: translateX(-50%);
    }

    .fallback-book span,
    .fallback-book strong {
      position: relative;
      z-index: 1;
    }

    .fallback-book span {
      font-family: var(--mono);
      font-size: 0.58rem;
      letter-spacing: 0.13em;
      text-transform: uppercase;
    }

    .fallback-book strong {
      margin-top: 8px;
      font-size: clamp(1.25rem, 2vw, 2rem);
      font-weight: 400;
      letter-spacing: -0.035em;
      line-height: 0.95;
    }

    .fallback__footer {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      padding-top: 16px;
      border-top: 1px solid var(--rule);
      color: var(--ink-soft);
      font-size: 0.78rem;
      line-height: 1.5;
    }

    .loading {
      position: absolute;
      inset: 0;
      z-index: 20;
      display: grid;
      background: var(--paper);
      place-items: center;
    }

    .loading__inner {
      display: grid;
      justify-items: center;
      gap: 16px;
    }

    .loading__mark {
      position: relative;
      width: 46px;
      height: 58px;
      border: 1px solid var(--ink);
      border-radius: 2px 5px 5px 2px;
      animation: bind 1.6s var(--ease-out) infinite alternate;
    }

    .loading__mark::before {
      position: absolute;
      top: -1px;
      bottom: -1px;
      left: 7px;
      width: 1px;
      background: var(--ink);
      content: "";
      opacity: 0.45;
    }

    .loading p {
      margin: 0;
      font-family: var(--mono);
      font-size: 0.63rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .sr-only {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }

    @keyframes bind {
      from {
        transform: rotateY(-8deg) translateY(2px);
      }
      to {
        transform: rotateY(14deg) translateY(-2px);
      }
    }

    @media (max-width: 900px) {
      .masthead {
        top: 34px;
        right: 32px;
        left: 32px;
      }

      .issue {
        max-width: 170px;
      }

      .browse-ui {
        right: 32px;
        bottom: 30px;
        left: 32px;
        grid-template-columns: 1fr auto;
      }

      .selection {
        grid-column: 1 / -1;
      }

      .browse-actions {
        justify-content: flex-start;
      }

      .index-nav {
        align-self: center;
      }

      .microcopy {
        display: none;
      }

      .detail-panel {
        top: auto;
        right: 24px;
        bottom: 24px;
        left: 24px;
        width: auto;
        max-height: 42vh;
        padding: 24px;
      }

      .detail-title {
        font-size: clamp(2.5rem, 10vw, 4.5rem);
      }

      .detail-deck {
        margin-top: 14px;
        font-size: 0.98rem;
      }

      .meta-list {
        margin-top: 20px;
      }

      .fallback__grid {
        grid-template-columns: repeat(7, minmax(132px, 1fr));
      }
    }

    @media (max-width: 620px) {
      .frame {
        inset: 10px;
      }

      .masthead {
        top: 24px;
        right: 22px;
        left: 22px;
      }

      .identity {
        grid-template-columns: 1fr;
        gap: 2px;
      }

      .issue {
        font-size: 0.56rem;
      }

      .hero-word {
        top: 17%;
        font-size: 35vw;
      }

      .browse-ui {
        right: 22px;
        bottom: 20px;
        left: 22px;
        gap: 14px;
      }

      .selection {
        grid-template-columns: auto 1fr;
        gap: 10px;
      }

      .selection__title {
        font-size: 1.7rem;
      }

      .selection__note {
        display: -webkit-box;
        overflow: hidden;
        font-size: 0.78rem;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .text-button {
        padding: 0 14px;
      }

      .markers {
        gap: 2px;
      }

      .marker {
        width: 20px;
      }

      .detail-panel {
        right: 12px;
        bottom: 12px;
        left: 12px;
        max-height: 44vh;
      }

      .meta-list {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
      }

      .folio {
        display: none;
      }

      .static-fallback {
        padding: 28px 22px;
      }

      .fallback__header {
        display: grid;
      }

      .fallback__status {
        text-align: left;
      }
    }

    @media (pointer: coarse) {
      .pointer-label {
        display: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    /* Minimal presentation: the books carry the visual identity. */
    .experience {
      background: var(--paper);
    }

    .frame,
    .masthead,
    .hero-word,
    .pointer-label,
    .folio {
      display: none !important;
    }

    #scene {
      cursor: default;
    }

    #scene.has-book-hover {
      cursor: pointer;
    }

    .mode-detail #scene {
      cursor: grab;
    }

    .mode-detail #scene.has-page-hover {
      cursor: grab;
    }

    .mode-detail #scene.has-closed-book-hover {
      cursor: pointer;
    }

    .mode-detail #scene.is-page-dragging,
    .mode-detail #scene:active {
      cursor: grabbing;
    }

    .browse-ui {
      right: auto;
      bottom: 22px;
      left: 50%;
      width: min(760px, calc(100vw - 40px));
      grid-template-columns: minmax(140px, 1fr) auto minmax(140px, 1fr);
      align-items: center;
      gap: 16px;
      transform: translateX(-50%);
      color: var(--ink);
      transition: color 520ms var(--ease-out), opacity 500ms var(--ease-out), transform 700ms var(--ease-out);
    }

    .selection {
      display: flex;
      align-items: baseline;
      gap: 10px;
    }

    .selection__title {
      font-size: 1rem;
      font-weight: 500;
      letter-spacing: -0.025em;
      line-height: 1;
    }

    .selection__note,
    .microcopy {
      display: none;
    }

    .counter {
      padding: 0;
      font-size: 0.58rem;
    }

    .browse-actions {
      gap: 2px;
    }

    .round-button,
    .text-button,
    .close-button {
      border: 0;
      background: transparent;
      backdrop-filter: none;
      transition: color 420ms var(--ease-out), border-color 420ms var(--ease-out);
    }

    .round-button {
      width: 38px;
      height: 38px;
    }

    .text-button {
      min-height: 38px;
      padding: 0 13px;
      border-bottom: 1px solid rgba(38, 35, 30, 0.42);
      border-radius: 0;
    }

    .round-button:hover,
    .text-button:hover,
    .close-button:hover {
      border-color: var(--ink);
      background: transparent;
      transform: none;
    }

    .index-nav {
      gap: 0;
    }

    .marker {
      width: 20px;
      height: 28px;
    }

    .marker[aria-current="true"]::before {
      width: 14px;
    }

    .detail-panel {
      top: 50%;
      right: clamp(34px, 5vw, 72px);
      bottom: auto;
      left: auto;
      width: min(32vw, 390px);
      max-height: 76vh;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      transform: translateY(calc(-50% + 18px));
      backdrop-filter: none;
      color: var(--ink);
      transition:
        color 520ms var(--ease-out),
        opacity 620ms var(--ease-out),
        transform 620ms var(--ease-out);
    }

    .detail-panel::before {
      display: none;
    }

    .mode-detail .detail-panel {
      transform: translateY(-50%);
    }

    .mode-detail .browse-ui {
      transform: translate(-50%, 22px);
    }

    .close-button {
      top: -10px;
      right: -10px;
    }

    .eyebrow {
      margin-bottom: 12px;
      color: var(--ink-soft);
      transition: color 520ms var(--ease-out);
    }

    .detail-title {
      font-size: clamp(2.8rem, 5vw, 4.5rem);
    }

    .detail-deck {
      margin-top: 18px;
      font-size: clamp(0.98rem, 1.2vw, 1.1rem);
      line-height: 1.5;
      color: var(--ink);
      transition: color 520ms var(--ease-out);
    }

    .meta-list,
    .meta-list dt,
    .meta-list dd {
      transition: color 520ms var(--ease-out), border-color 520ms var(--ease-out);
    }

    .detail-deck::first-letter {
      float: none;
      margin: 0;
      color: inherit;
      font-size: inherit;
      line-height: inherit;
    }

    .meta-list {
      gap: 14px 22px;
      margin-top: 22px;
      padding-top: 18px;
    }

    .detail-controls {
      margin-top: 18px;
      padding-top: 0;
      border: 0;
    }

    .reset-button {
      margin-left: auto;
    }

    @media (max-width: 820px) {
      .browse-ui {
        bottom: 16px;
        width: calc(100vw - 28px);
        grid-template-columns: 1fr auto;
        gap: 8px 14px;
      }

      .selection {
        grid-column: 1 / -1;
        justify-content: center;
      }

      .browse-actions {
        justify-content: flex-start;
      }

      .detail-panel {
        top: auto;
        right: 24px;
        bottom: 24px;
        left: 24px;
        width: auto;
        max-height: 42vh;
        transform: translateY(18px);
      }

      .mode-detail .detail-panel {
        transform: translateY(0);
      }

      .detail-title {
        font-size: clamp(2.5rem, 12vw, 4.5rem);
      }

      .detail-deck {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
      }

      .meta-list {
        display: none;
      }
    }

    /* V2 — an original editorial system built around the books, not a framed interface. */
    body {
      font-family: var(--mono);
    }

    .experience::after {
      position: absolute;
      inset: 0;
      z-index: 4;
      background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.08), transparent 22%),
        linear-gradient(0deg, rgba(0, 0, 0, 0.12), transparent 22%);
      content: "";
      opacity: 0.52;
      pointer-events: none;
      transition: opacity 600ms var(--ease-out);
    }

    .editorial-header {
      position: absolute;
      top: 30px;
      right: 34px;
      left: 34px;
      z-index: 8;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 24px;
      color: var(--ink);
      pointer-events: none;
      transition:
        color 520ms var(--ease-out),
        opacity 520ms var(--ease-out),
        transform 680ms var(--ease-out);
    }

    .editorial-identity,
    .editorial-index {
      display: grid;
      gap: 3px;
    }

    .editorial-index {
      justify-items: end;
      text-align: right;
    }

    .editorial-identity strong {
      font-family: var(--serif);
      font-size: clamp(1.2rem, 1.8vw, 1.7rem);
      font-weight: 400;
      letter-spacing: -0.03em;
      line-height: 1;
    }

    .editorial-identity span,
    .editorial-index span {
      color: var(--ink-soft);
      font-size: 0.58rem;
      font-weight: 500;
      letter-spacing: 0.15em;
      line-height: 1.5;
      text-transform: uppercase;
      transition: color 520ms var(--ease-out);
    }

    .browse-ui {
      right: 34px;
      bottom: 26px;
      left: 34px;
      width: auto;
      grid-template-columns: minmax(240px, 1fr) auto minmax(240px, 1fr);
      gap: 26px;
      transform: none;
    }

    .selection {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      align-items: start;
      gap: 13px;
    }

    .counter {
      padding-top: 7px;
      color: var(--ink-soft);
      font-variant-numeric: tabular-nums;
      transition: color 520ms var(--ease-out);
    }

    .selection__title,
    .detail-title,
    .fallback__header h2,
    .fallback-book strong {
      font-family: var(--serif);
    }

    .selection__title {
      font-size: clamp(2rem, 3.4vw, 3.75rem);
      font-weight: 400;
      letter-spacing: -0.055em;
      line-height: 0.9;
    }

    .selection__note {
      display: block;
      max-width: 420px;
      margin-top: 10px;
      color: var(--ink-soft);
      font-size: 0.75rem;
      letter-spacing: 0.01em;
      line-height: 1.45;
      transition: color 520ms var(--ease-out);
    }

    .browse-actions {
      align-self: end;
      padding-bottom: 4px;
      gap: 4px;
    }

    .round-button,
    .text-button,
    .close-button {
      color: var(--ink);
    }

    .round-button {
      width: 40px;
      height: 40px;
    }

    .text-button {
      min-height: 40px;
      padding: 0 18px;
      border: 1px solid color-mix(in srgb, var(--ink) 42%, transparent);
      border-radius: 999px;
    }

    .text-button:hover {
      color: var(--paper);
      border-color: var(--ink);
      background: var(--ink);
    }

    .index-nav {
      align-self: end;
      gap: 10px;
      padding-bottom: 7px;
    }

    .markers {
      gap: 5px;
    }

    .marker {
      width: 27px;
      height: 24px;
    }

    .marker::before {
      width: 17px;
      height: 1px;
      border-radius: 0;
      background: color-mix(in srgb, var(--ink) 35%, transparent);
    }

    .marker[aria-current="true"]::before {
      width: 27px;
      height: 2px;
      border-radius: 0;
      background: var(--ink);
    }

    .microcopy {
      display: block;
      font-size: 0.53rem;
      letter-spacing: 0.14em;
      transition: color 520ms var(--ease-out);
    }

    .detail-panel {
      top: 50%;
      right: clamp(34px, 5vw, 78px);
      width: min(34vw, 460px);
      max-height: 74vh;
      color: var(--ink);
    }

    .mode-detail .browse-ui {
      transform: translateY(26px);
    }

    .mode-detail .editorial-header {
      opacity: 0.58;
      transform: translateY(-6px);
    }

    .detail-title {
      max-width: calc(100% - 28px);
      font-size: clamp(3.5rem, 6.3vw, 6.7rem);
      font-weight: 400;
      letter-spacing: -0.065em;
      line-height: 0.82;
    }

    .detail-deck {
      max-width: 38em;
      margin-top: 24px;
      font-family: var(--serif);
      font-size: clamp(1.05rem, 1.35vw, 1.3rem);
      line-height: 1.5;
    }

    .meta-list {
      margin-top: 28px;
      border-top-color: color-mix(in srgb, var(--ink) 26%, transparent);
    }

    .meta-list dd {
      font-size: 0.75rem;
      line-height: 1.45;
    }

    .detail-controls {
      align-items: end;
      margin-top: 24px;
    }

    .reset-button {
      min-height: 32px;
      padding: 0;
      border: 0;
      border-bottom: 1px solid color-mix(in srgb, var(--ink) 52%, transparent);
      border-radius: 0;
    }

    .detail-buttons {
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      gap: 18px;
      margin-left: auto;
    }

    .detail-buttons .reset-button {
      margin-left: 0;
    }

    .page-navigation {
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr) 40px;
      align-items: center;
      gap: 12px;
      margin-top: 22px;
      padding-top: 18px;
      border-top: 1px solid color-mix(in srgb, var(--ink) 26%, transparent);
    }

    .page-button {
      display: grid;
      width: 40px;
      height: 40px;
      padding: 0;
      border: 1px solid color-mix(in srgb, var(--ink) 42%, transparent);
      border-radius: 50%;
      color: var(--ink);
      background: transparent;
      place-items: center;
      transition:
        color 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        opacity 180ms ease,
        transform 180ms ease;
    }

    .page-button svg {
      width: 15px;
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 1.35;
    }

    .page-button:not(:disabled):hover {
      color: var(--paper);
      background: var(--ink);
      transform: translateY(-1px);
    }

    .page-button:disabled {
      opacity: 0.28;
      cursor: default;
    }

    .page-button:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
    }

    .page-status {
      display: grid;
      min-width: 0;
      gap: 3px;
      text-align: center;
    }

    .page-status strong {
      overflow: hidden;
      font-family: var(--serif);
      font-size: 0.92rem;
      font-weight: 400;
      line-height: 1.2;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .page-status span {
      color: var(--ink-soft);
      font-size: 0.53rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .close-button {
      top: 7px;
      right: 7px;
      width: 42px;
      height: 42px;
      border: 1px solid color-mix(in srgb, var(--ink) 38%, transparent);
    }

    .close-button:focus-visible {
      outline-offset: 3px;
    }

    .close-button:hover {
      color: var(--paper);
      background: var(--ink);
    }

    .static-fallback,
    .loading {
      background: var(--paper);
      color: var(--ink);
    }

    @media (max-width: 880px) {
      .editorial-header {
        top: 22px;
        right: 22px;
        left: 22px;
      }

      .browse-ui {
        right: 20px;
        bottom: 18px;
        left: 20px;
        width: auto;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px 16px;
      }

      .selection {
        grid-column: 1 / -1;
        justify-content: start;
      }

      .selection__title {
        font-size: clamp(2rem, 9vw, 3.5rem);
      }

      .selection__note {
        max-width: min(72vw, 430px);
      }

      .browse-actions {
        justify-content: flex-start;
      }

      .index-nav {
        align-self: center;
      }

      .detail-panel {
        top: auto;
        right: 22px;
        bottom: 22px;
        left: 22px;
        width: auto;
        max-height: 40vh;
      }

      .detail-title {
        font-size: clamp(3rem, 14vw, 5rem);
      }

      .detail-deck {
        font-size: 1rem;
      }
    }

    @media (max-width: 560px) {
      .editorial-index span:last-child,
      .selection__note,
      .microcopy {
        display: none;
      }

      .editorial-identity strong {
        font-size: 1.1rem;
      }

      .browse-ui {
        bottom: 14px;
      }

      .selection {
        grid-template-columns: 34px 1fr;
      }

      .counter {
        padding-top: 4px;
      }

      .selection__title {
        font-size: 2rem;
      }

      .marker {
        width: 19px;
      }

      .marker::before {
        width: 12px;
      }

      .marker[aria-current="true"]::before {
        width: 19px;
      }
    }

    .audio-controls {
      position: fixed;
      top: 82px;
      right: 40px;
      z-index: 15;
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--ink);
      opacity: 0.72;
      transition: opacity 180ms ease, color 500ms ease;
    }

    .audio-controls:hover,
    .audio-controls:focus-within {
      opacity: 1;
    }

    .audio-toggle {
      display: inline-flex;
      height: 30px;
      padding: 0 10px 0 8px;
      align-items: center;
      gap: 5px;
      border: 1.5px solid color-mix(in srgb, currentColor 38%, transparent);
      border-radius: 999px;
      color: inherit;
      background: color-mix(in srgb, var(--paper) 55%, transparent);
      font-family: var(--mono);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      cursor: pointer;
      transition: background-color 160ms ease, border-color 160ms ease, opacity 160ms ease;
    }

    .audio-toggle:hover {
      border-color: currentColor;
    }

    .audio-toggle[aria-pressed="false"] {
      opacity: 0.55;
      border-style: dashed;
    }

    .audio-toggle svg {
      width: 16px;
      height: 16px;
      flex: 0 0 auto;
      overflow: visible;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.35;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .audio-toggle .audio-icon__off,
    .audio-toggle[aria-pressed="false"] .audio-icon__on {
      display: none;
    }

    .audio-toggle[aria-pressed="false"] .audio-icon__off {
      display: block;
    }

    .audio-volume-wrap {
      display: flex;
      align-items: center;
    }

    .audio-volume:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }

    .audio-toggle:focus-visible,
    .audio-volume:focus-visible {
      outline: 1px solid currentColor;
      outline-offset: 4px;
    }

    .audio-volume {
      width: 58px;
      height: 30px;
      margin: 0;
      appearance: none;
      color: inherit;
      background: transparent;
      cursor: pointer;
    }

    .audio-volume::-webkit-slider-runnable-track {
      height: 1px;
      background: color-mix(in srgb, currentColor 42%, transparent);
    }

    .audio-volume::-webkit-slider-thumb {
      width: 7px;
      height: 7px;
      margin-top: -3px;
      appearance: none;
      border: 0;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--paper) 80%, transparent);
    }

    .audio-volume::-moz-range-track {
      height: 1px;
      border: 0;
      background: color-mix(in srgb, currentColor 42%, transparent);
    }

    .audio-volume::-moz-range-thumb {
      width: 7px;
      height: 7px;
      border: 0;
      border-radius: 50%;
      background: currentColor;
    }

    @media (max-width: 880px) {
      .audio-controls {
        top: 76px;
        right: 20px;
      }
    }

    @media (max-width: 560px) {
      .audio-controls {
        top: 68px;
        right: 16px;
      }

      .audio-volume {
        width: 46px;
      }

      .audio-toggle {
        padding: 0 7px;
      }

      .audio-toggle__label {
        display: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .audio-controls {
        transition: none;
      }
    }
    /* 原创手作游戏 HUD：厚边、错位阴影、纸片幕布和场景色彩。 */
    .text-button, .round-button {
      border: 2px solid rgba(255, 244, 208, 0.88);
      border-radius: 16px;
      box-shadow: 0 5px 0 rgba(35, 20, 16, 0.5), inset 0 1px 0 rgba(255,255,255,.35);
      transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
    }
    /* 悬停只改颜色/阴影，不移动按钮：位移会让按钮离开光标，:hover 反复切换造成闪烁。 */
    .text-button:hover, .round-button:hover { filter: saturate(1.18) brightness(1.06); box-shadow: 0 6px 0 rgba(35, 20, 16, 0.5), 0 0 0 3px rgba(255, 244, 208, 0.28), inset 0 1px 0 rgba(255,255,255,.35); }
    .text-button:active, .round-button:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(35,20,16,.5); }
    /* 详情面板是滚动容器，任何按下位移都会撑出滚动条：面板内按钮只用阴影反馈。 */
    .detail-panel .text-button:active, .detail-panel .round-button:active { transform: none; }
    .detail-panel { overflow-x: hidden; scrollbar-width: thin; }
    /* 书架拖拽：空白处显示张开的手，按住变成抓握；悬停书本仍是可点击的手指。 */
    .experience:not(.mode-detail) #scene { cursor: grab; }
    .experience:not(.mode-detail) #scene.has-book-hover { cursor: pointer; }
    .experience:not(.mode-detail) #scene.is-shelf-dragging { cursor: grabbing; }
    .browse-actions .text-button { white-space: nowrap; }

    /* 手机竖屏 / 窄屏：详情改为底部抽屉，书本由脚本放在抽屉上方。与 getLayoutKind() 的 "sheet" 保持一致。 */
    @media (max-width: 879px) and (min-height: 560px), (max-width: 879px) and (orientation: portrait) {
      .detail-panel {
        top: auto;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        left: 12px;
        width: auto;
        max-height: 46vh;
        padding: 16px 16px 14px;
        border: 0;
        border-radius: 22px;
        background: color-mix(in srgb, var(--paper) 88%, transparent);
        box-shadow: 0 -4px 30px rgba(40, 24, 14, 0.14);
        backdrop-filter: blur(10px);
        transform: translateY(24px);
      }

      .mode-detail .detail-panel {
        transform: none;
      }

      .close-button {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
      }

      .eyebrow {
        margin: 0 50px 6px 0;
        font-size: 0.7rem;
      }

      .detail-title {
        max-width: calc(100% - 52px);
        font-size: clamp(1.9rem, 8.5vw, 2.6rem);
        line-height: 1;
      }

      .detail-deck {
        display: -webkit-box;
        margin-top: 8px;
        overflow: hidden;
        font-size: 0.92rem;
        line-height: 1.45;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .meta-list,
      .detail-controls .microcopy {
        display: none;
      }

      .page-navigation {
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        margin-top: 10px;
        padding-top: 10px;
      }

      .page-button {
        width: 44px;
        height: 44px;
      }

      .detail-controls {
        margin-top: 10px;
      }

      .detail-buttons {
        width: 100%;
        gap: 10px;
      }

      .detail-buttons .text-button {
        flex: 1 1 0;
        min-height: 44px;
      }
    }

    /* 手机横屏（矮屏）：保留左右布局，面板紧凑并可滚动。与 getLayoutKind() 的 "side-compact" 保持一致。 */
    @media (max-height: 559px) and (orientation: landscape) {
      .editorial-header {
        top: 12px;
        right: 16px;
        left: 16px;
      }

      /* 横屏高度有限，书名会压在书架木板上；保留编号，书名在书本封面上已可见。 */
      .editorial-index,
      .selection__copy {
        display: none;
      }

      .audio-controls {
        top: 10px;
        right: 16px;
      }

      .browse-ui {
        bottom: 10px;
      }

      .selection__title {
        font-size: 1.6rem;
      }

      .detail-panel {
        top: 50%;
        right: 14px;
        bottom: auto;
        left: auto;
        width: min(42vw, 360px);
        max-height: calc(100% - 64px);
        margin-top: 20px;
        padding: 14px 16px 12px;
        border: 0;
        border-radius: 20px;
        background: color-mix(in srgb, var(--paper) 86%, transparent);
        box-shadow: 0 10px 34px rgba(40, 24, 14, 0.16);
        backdrop-filter: blur(10px);
        transform: translateY(calc(-50% + 18px));
      }

      .mode-detail .detail-panel {
        transform: translateY(-50%);
      }

      .close-button {
        top: 8px;
        right: 8px;
        width: 36px;
        height: 36px;
      }

      .eyebrow {
        margin: 0 44px 4px 0;
        font-size: 0.68rem;
      }

      .detail-title {
        max-width: calc(100% - 44px);
        font-size: clamp(1.5rem, 4.6vw, 2.2rem);
        line-height: 1;
      }

      .detail-deck {
        display: -webkit-box;
        margin-top: 6px;
        overflow: hidden;
        font-size: 0.82rem;
        line-height: 1.4;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .meta-list,
      .detail-controls .microcopy {
        display: none;
      }

      .page-navigation {
        grid-template-columns: 38px minmax(0, 1fr) 38px;
        gap: 8px;
        margin-top: 8px;
        padding-top: 8px;
      }

      .page-button {
        width: 38px;
        height: 38px;
      }

      .detail-controls {
        margin-top: 8px;
      }

      .detail-buttons {
        width: 100%;
        gap: 8px;
      }

      .detail-buttons .text-button {
        flex: 1 1 0;
        min-height: 38px;
        font-size: 0.85rem;
      }
    }
    .experience[data-world="space"] .editorial-header { text-shadow: 0 0 18px rgba(202,220,255,.6); }
    .experience[data-world="garden"] .editorial-header { text-shadow: 0 0 18px rgba(255,232,131,.55); }
    .experience[data-world="ocean"] .editorial-header { text-shadow: 0 0 18px rgba(154,247,232,.58); }
    .detail-title { white-space: nowrap; letter-spacing: -.06em; }
    .detail-buttons .text-button { min-height: 42px; padding-inline: 13px; white-space: nowrap; }

    /* cursor sparkle layer */
    .pointer-fx {
      position: fixed;
      inset: 0;
      z-index: 60;
      pointer-events: none;
    }

    /* ── dark walnut "campus library" controls ─────────────────────────────── */
    :root {
      --walnut: #6a4630;
      --walnut-deep: #2c1a10;
      --brass: #c39a52;
      --brass-hi: #ecc982;
      --engrave: #f6e7c8;
      --wood-grain:
        repeating-linear-gradient(93deg, rgba(255, 222, 170, 0.06) 0 2px, transparent 2px 8px),
        repeating-linear-gradient(87deg, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 13px),
        radial-gradient(ellipse 60% 40% at 30% 20%, rgba(255, 214, 160, 0.16), transparent 70%),
        linear-gradient(180deg, #74503a 0%, #4a2d1c 52%, #2c1a10 100%);
    }

    .experience .round-button,
    .experience .text-button,
    .experience .close-button,
    .experience .page-button,
    .experience .audio-toggle {
      background: var(--wood-grain);
      color: var(--engrave);
      border: 1.5px solid var(--brass);
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55), 0 -1px 0 rgba(255, 230, 190, 0.12);
      box-shadow:
        inset 0 1px 0 rgba(255, 228, 186, 0.28),
        inset 0 -2px 0 rgba(0, 0, 0, 0.35),
        0 3px 0 #1a0e08,
        0 7px 16px rgba(20, 10, 5, 0.38);
      filter: none;
      transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), border-color 180ms var(--ease-out);
    }

    .experience .round-button svg,
    .experience .close-button svg,
    .experience .page-button svg,
    .experience .audio-toggle svg {
      stroke: var(--brass-hi);
      color: var(--brass-hi);
    }

    .experience .round-button:hover,
    .experience .text-button:hover,
    .experience .close-button:hover,
    .experience .page-button:not(:disabled):hover,
    .experience .audio-toggle:hover {
      border-color: var(--brass-hi);
      transform: translateY(-1px);
      filter: none;
      box-shadow:
        inset 0 1px 0 rgba(255, 228, 186, 0.36),
        inset 0 -2px 0 rgba(0, 0, 0, 0.3),
        0 4px 0 #1a0e08,
        0 10px 20px rgba(20, 10, 5, 0.42),
        0 0 0 3px rgba(236, 201, 130, 0.22);
    }

    .experience .round-button:active,
    .experience .text-button:active,
    .experience .close-button:active,
    .experience .page-button:not(:disabled):active,
    .experience .audio-toggle:active {
      transform: translateY(2px);
      box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45), 0 1px 0 #1a0e08;
    }

    .experience .page-button:disabled {
      opacity: 0.45;
    }

    .experience .audio-toggle[aria-pressed="false"] {
      color: rgba(246, 231, 200, 0.55);
      border-color: rgba(195, 154, 82, 0.5);
    }

    .experience .text-button.is-primary {
      padding-inline: 26px;
      font-weight: 700;
      letter-spacing: 0.06em;
      border-width: 2px;
      background:
        repeating-linear-gradient(93deg, rgba(255, 222, 170, 0.07) 0 2px, transparent 2px 8px),
        linear-gradient(180deg, #8a5a36 0%, #5a3520 55%, #3a2214 100%);
    }

    .experience .marker::before {
      background: rgba(195, 154, 82, 0.45);
    }

    .experience .marker[aria-current="true"]::before {
      background: var(--brass-hi);
      box-shadow: 0 0 8px rgba(236, 201, 130, 0.6);
    }

    .experience .audio-volume {
      accent-color: var(--brass);
    }

    /* ── reading mode ──────────────────────────────────────────────────────── */
    .experience .detail-panel {
      transition: transform 620ms var(--ease-out), opacity 420ms var(--ease-out);
    }

    .experience.is-reading .detail-panel {
      transform: translateX(calc(100% + 64px));
      opacity: 0;
      pointer-events: none;
    }

    .reader {
      position: absolute;
      left: 50%;
      bottom: 22px;
      z-index: 9;
      width: min(880px, calc(100vw - 32px));
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      animation: reader-rise 620ms var(--ease-out) both;
    }

    @keyframes reader-rise {
      from { opacity: 0; transform: translate(-50%, 24px); }
      to { opacity: 1; transform: translate(-50%, 0); }
    }

    .reader__caption {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
      gap: 14px;
      width: 100%;
    }

    .reader__page {
      padding: 14px 20px 12px;
      border-radius: 14px;
      color: #3b2a1d;
      background:
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.6), transparent 42%),
        linear-gradient(180deg, #fbf3df, #f1e2c0);
      border: 1.5px solid var(--brass);
      box-shadow: 0 0 0 4px rgba(44, 26, 16, 0.85), 0 14px 30px rgba(20, 10, 5, 0.35);
      animation: reader-page-in 480ms var(--ease-out) both;
    }

    @keyframes reader-page-in {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: none; }
    }

    .reader__label {
      font: 600 12px/1.4 var(--mono);
      letter-spacing: 0.12em;
      color: #9a6a3a;
    }

    .reader__title {
      margin: 2px 0 4px;
      font: 700 22px/1.25 "Microsoft YaHei", "PingFang SC", sans-serif;
      color: #5a3520;
    }

    .reader__text {
      margin: 0;
      font: 500 18px/1.65 "Microsoft YaHei", "PingFang SC", sans-serif;
    }

    .reader__prompt {
      margin: 8px 0 0;
      padding-top: 8px;
      border-top: 1px dashed rgba(154, 106, 58, 0.45);
      font: 500 14px/1.5 "Microsoft YaHei", "PingFang SC", sans-serif;
      color: #8a5a2e;
    }

    .reader__bar {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border-radius: 999px;
      background: var(--wood-grain);
      border: 1.5px solid var(--brass);
      box-shadow: 0 3px 0 #1a0e08, 0 12px 26px rgba(20, 10, 5, 0.4);
    }

    .reader__count {
      min-width: 72px;
      text-align: center;
      font: 600 14px var(--mono);
      letter-spacing: 0.1em;
      color: var(--engrave);
    }

    .reader__hint {
      margin: 0;
      font: 500 12px var(--mono);
      letter-spacing: 0.08em;
      color: var(--ink);
      opacity: 0.75;
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    }

    @media (max-width: 760px) {
      .reader { bottom: 12px; gap: 8px; }
      .reader__caption { grid-auto-flow: row; }
      .reader__page { padding: 10px 14px; }
      .reader__title { font-size: 18px; }
      .reader__text { font-size: 15px; }
      .reader__bar { gap: 6px; padding: 6px 8px; }
      .reader__hint { display: none; }
    }

    /* detail panel sits on a parchment card so it stays legible over the cartoon backdrops */
    .experience .detail-panel {
      padding: clamp(22px, 2.4vw, 34px);
      border: 1.5px solid var(--brass);
      border-radius: 18px;
      color: #3b2a1d;
      background:
        radial-gradient(circle at 14% 8%, rgba(255, 255, 255, 0.55), transparent 40%),
        linear-gradient(180deg, rgba(251, 243, 223, 0.94), rgba(241, 226, 192, 0.92));
      box-shadow:
        0 0 0 5px rgba(44, 26, 16, 0.82),
        0 24px 60px rgba(20, 10, 5, 0.32);
      backdrop-filter: blur(12px);
    }

    .experience .detail-panel .eyebrow,
    .experience .detail-panel .microcopy,
    .experience .detail-panel dt {
      color: #9a6a3a;
    }

    .experience .detail-panel .detail-title,
    .experience .detail-panel .detail-deck,
    .experience .detail-panel dd,
    .experience .detail-panel .page-status {
      color: #3b2a1d;
    }

    .experience .detail-panel .detail-buttons {
      flex-wrap: wrap;
      gap: 8px;
    }

    /* ── cartoon type ──────────────────────────────────────────────────────── */
    :root {
      --cartoon: "ZCOOL KuaiLe", "Baloo 2", "PingFang SC", "Microsoft YaHei", sans-serif;
    }

    /* ── brand: the doorbell house ─────────────────────────────────────────── */
    .experience .editorial-identity {
      display: flex;
      align-items: center;
      gap: 16px;
      pointer-events: auto;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0;
      border: 0;
      background: none;
      cursor: pointer;
      text-align: left;
    }

    .brand__house {
      width: 64px;
      height: 64px;
      flex: none;
      filter: drop-shadow(0 4px 6px rgba(40, 20, 10, 0.35));
      transition: transform 260ms var(--ease-out);
    }

    .brand:hover .brand__house { transform: translateY(-2px) rotate(-3deg); }
    .brand__roof { fill: #e2574c; stroke: #8f2f26; stroke-width: 1.4; stroke-linejoin: round; }
    .brand__chimney { fill: #b8483d; }
    .brand__wall { fill: #fff3d6; stroke: #8f5a2e; stroke-width: 1.4; stroke-linejoin: round; }
    .brand__door { fill: #8a5a36; stroke: #5a3520; stroke-width: 1.2; }
    .brand__knob { fill: #ecc982; }
    .brand__window { fill: #ffd76a; stroke: #8f5a2e; stroke-width: 1; }
    .brand__bell { transform-origin: 32px 18px; }
    .brand__bell path:first-child { stroke: #8f5a2e; stroke-width: 1.4; fill: none; }
    .brand__bell-body { fill: #f4c242; stroke: #a8692c; stroke-width: 1.2; }
    .brand__clapper { fill: #a8692c; }
    .brand:hover .brand__bell { animation: bell-swing 1.2s ease-in-out infinite; }
    .brand.is-ringing .brand__bell { animation: bell-ring 900ms ease-out; }

    @keyframes bell-swing {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(9deg); }
      75% { transform: rotate(-9deg); }
    }

    @keyframes bell-ring {
      0% { transform: rotate(0); }
      15% { transform: rotate(22deg); }
      35% { transform: rotate(-18deg); }
      55% { transform: rotate(12deg); }
      75% { transform: rotate(-6deg); }
      100% { transform: rotate(0); }
    }

    .brand__text { display: grid; gap: 2px; }

    .brand__title {
      display: flex;
      font-family: var(--cartoon);
      font-weight: 400;
      font-size: clamp(30px, 2.6vw, 40px);
      line-height: 1;
      letter-spacing: 0.02em;
    }

    .brand__title span {
      display: inline-block;
      -webkit-text-stroke: 6px #fff8e8;
      paint-order: stroke fill;
      text-shadow: 0 4px 0 rgba(60, 30, 15, 0.28);
      transition: transform 220ms var(--ease-out);
    }

    .brand__title span:nth-child(1) { color: #e2574c; transform: rotate(-6deg); }
    .brand__title span:nth-child(2) { color: #f0a020; transform: translateY(-3px) rotate(4deg); }
    .brand__title span:nth-child(3) { color: #3e9b5f; transform: rotate(-3deg); }
    .brand__title span:nth-child(4) { color: #3f78c8; transform: translateY(2px) rotate(5deg); }
    .brand__title span:nth-child(5) { color: #9b5cc4; transform: rotate(-4deg); }
    .brand:hover .brand__title span { transform: translateY(-4px) rotate(0deg); }
    .brand:hover .brand__title span:nth-child(2n) { transform: translateY(2px) rotate(0deg); }

    .brand__tag {
      justify-self: start;
      padding: 3px 10px 2px;
      border-radius: 999px;
      font-family: var(--cartoon);
      font-size: 14px;
      letter-spacing: 0.08em;
      color: #fff8e8;
      background: linear-gradient(180deg, #74503a, #3d2517);
      border: 1px solid var(--brass);
      box-shadow: 0 2px 0 #1a0e08;
    }

    /* ── souvenir chip (pages / finished / opened) ─────────────────────────── */
    .souvenir-chip {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      height: 34px;
      padding: 0 14px 0 10px;
      border-radius: 999px;
      border: 1.5px solid var(--brass);
      background: var(--wood-grain);
      color: var(--engrave);
      font: 400 18px/1 var(--cartoon);
      box-shadow: 0 3px 0 #1a0e08, 0 8px 18px rgba(20, 10, 5, 0.35);
      cursor: pointer;
      transition: transform 180ms var(--ease-out);
    }

    .souvenir-chip:hover { transform: translateY(-1px) scale(1.03); }
    .souvenir-chip__item { display: inline-flex; align-items: center; gap: 4px; }
    .souvenir-chip__item small { font-size: 12px; opacity: 0.7; }
    .souvenir-chip__item i { font-style: normal; display: inline-grid; place-items: center; }
    .chip-star { color: #f6c453; font-size: 16px; }
    .chip-check { width: 18px; height: 18px; border-radius: 50%; font-size: 11px; color: #fff; background: linear-gradient(135deg, #8fdc7a, #3ea24a); }
    .chip-pin { width: 15px; height: 15px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: linear-gradient(135deg, #ff8b6b, #e2493d); }

    /* ── HUD buttons next to sound/music ───────────────────────────────────── */
    .account-button__avatar {
      display: inline-grid;
      place-items: center;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      font: 400 12px/1 var(--cartoon);
      color: #3b2a1d;
      background: radial-gradient(circle at 35% 30%, #ffe8b8, #e9b56b 70%, #c98a44);
    }

    .account-button[data-signed-in="true"] .account-button__avatar {
      background: radial-gradient(circle at 35% 30%, #c9f2c2, #6cc05a 70%, #3e8e3a);
      color: #fff;
    }

    /* ── bottom-left selection in a rounder, bolder face ───────────────────── */
    .experience .selection__title {
      font-family: var(--cartoon);
      font-weight: 400;
      letter-spacing: 0.02em;
      color: #5a3520;
      -webkit-text-stroke: 7px #fff8e8;
      paint-order: stroke fill;
      text-shadow: 0 5px 0 rgba(60, 30, 15, 0.25);
    }

    .experience .selection__note {
      font-family: var(--cartoon);
      font-size: clamp(16px, 1.25vw, 20px);
      letter-spacing: 0.04em;
      color: #5a3520;
      opacity: 1;
      text-shadow: 0 0 6px rgba(255, 248, 232, 0.95), 0 0 2px rgba(255, 248, 232, 1);
    }

    .experience .counter {
      font-family: var(--cartoon);
      font-size: 18px;
      color: #5a3520;
      text-shadow: 0 0 6px rgba(255, 248, 232, 0.9);
    }

    .selection__progress {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 8px;
      font: 400 15px/1 var(--cartoon);
      color: #5a3520;
    }

    .selection__bar {
      width: 120px;
      height: 10px;
      border-radius: 99px;
      background: rgba(90, 53, 32, 0.18);
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
      overflow: hidden;
    }

    .selection__bar span {
      display: block;
      height: 100%;
      width: 0;
      background: linear-gradient(90deg, #f6c453, #e2574c);
      transition: width 500ms var(--ease-out);
    }

    .selection__ticks { display: inline-flex; gap: 3px; }
    .selection__ticks i { width: 8px; height: 8px; border-radius: 50%; background: rgba(90, 53, 32, 0.22); }
    .selection__ticks i.is-on { background: #6cc05a; }
    .selection__status { text-shadow: 0 0 6px rgba(255, 248, 232, 0.95); }

    .experience .marker[data-progress="started"]::before { background: linear-gradient(90deg, #f6c453 50%, rgba(195, 154, 82, 0.45) 50%); }
    .experience .marker[data-progress="done"]::before { background: #6cc05a; }

    /* ── shared dialog ─────────────────────────────────────────────────────── */
    .sh-dialog-wrap {
      position: fixed;
      inset: 0;
      z-index: 70;
      display: grid;
      place-items: center;
      padding: 16px;
      background: rgba(20, 12, 6, 0.5);
      backdrop-filter: blur(3px);
      animation: sh-fade 220ms ease both;
    }

    @keyframes sh-fade { from { opacity: 0; } to { opacity: 1; } }

    .sh-dialog {
      position: relative;
      width: min(560px, 100%);
      max-height: calc(100vh - 32px);
      overflow: auto;
      padding: 30px 32px 26px;
      border-radius: 18px;
      color: #3b2a1d;
      background:
        radial-gradient(circle at 14% 8%, rgba(255, 255, 255, 0.6), transparent 40%),
        linear-gradient(180deg, #fbf3df, #f1e2c0);
      border: 1.5px solid var(--brass);
      box-shadow: 0 0 0 6px rgba(44, 26, 16, 0.9), 0 30px 70px rgba(10, 5, 2, 0.5);
      animation: sh-pop 360ms var(--ease-out) both;
    }

    @keyframes sh-pop { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }

    .sh-dialog__close { position: absolute; top: 14px; right: 14px; }
    .sh-dialog__head { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; padding-right: 40px; }
    .sh-medal {
      flex: none;
      display: grid;
      place-items: center;
      width: 64px;
      height: 64px;
      border-radius: 50%;
      font-size: 28px;
      background: radial-gradient(circle, #fff9ec 0 55%, transparent 56%), radial-gradient(circle at 35% 30%, #ffe2a6, #d99a4f 60%, #a8692c);
      box-shadow: 0 6px 12px rgba(40, 20, 10, 0.25);
    }
    .sh-kicker { margin: 0; font: 600 11px var(--mono); letter-spacing: 0.24em; color: #9a6a3a; }
    .sh-dialog h2 { margin: 2px 0 4px; font: 400 30px/1.1 var(--cartoon); color: #5a3520; }
    .sh-desc { margin: 0; font: 400 14px/1.6 var(--mono); color: #6b5440; }

    .sh-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
    .sh-tabs button {
      flex: 1;
      padding: 8px;
      border-radius: 10px;
      border: 1.5px solid rgba(195, 154, 82, 0.6);
      background: transparent;
      font: 400 17px var(--cartoon);
      color: #8a5a2e;
      cursor: pointer;
    }
    .sh-tabs button[aria-selected="true"] { background: var(--wood-grain); color: var(--engrave); border-color: var(--brass); }

    .sh-form { display: grid; gap: 12px; }
    .sh-form label { display: grid; gap: 6px; font: 600 14px var(--mono); color: #5a3520; }
    .sh-form input:not([type="range"]):not([type="checkbox"]),
    .sh-form select {
      padding: 10px 12px;
      border-radius: 10px;
      border: 1.5px solid rgba(195, 154, 82, 0.7);
      background: #fffaf0;
      font: 500 15px var(--mono);
      color: #3b2a1d;
    }
    .sh-form input:focus-visible, .sh-form select:focus-visible { outline: 2px solid #e2574c; outline-offset: 1px; }
    .sh-form input[type="range"] { accent-color: #c98a44; }
    .sh-switch-row { grid-template-columns: 1fr auto; align-items: center; }
    .sh-switch-row input { width: 22px; height: 22px; accent-color: #e2574c; }
    .sh-error { min-height: 1em; margin: 0; font: 600 13px var(--mono); color: #c0392b; }
    .sh-note { margin: 4px 0 0; font: 400 12px/1.5 var(--mono); color: #8a6a4a; }

    .sh-rows { display: grid; gap: 8px; margin-bottom: 16px; }
    .sh-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed rgba(154, 106, 58, 0.4); font: 400 14px var(--mono); }
    .sh-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 16px; }
    .sh-actions a.text-button { text-decoration: none; display: inline-flex; align-items: center; }

    .sh-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
    .sh-stats span { display: grid; place-items: center; padding: 10px 6px; border-radius: 12px; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(195, 154, 82, 0.5); }
    .sh-stats b { font: 400 28px/1 var(--cartoon); color: #e2574c; }
    .sh-stats small { font: 500 12px var(--mono); color: #8a6a4a; }

    .sh-books { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
    .sh-book { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(195, 154, 82, 0.4); }
    .sh-book__spine {
      flex: none;
      display: grid;
      place-items: center;
      width: 30px;
      height: 44px;
      border-radius: 3px 6px 6px 3px;
      font: 600 11px var(--mono);
      color: var(--foil);
      background: var(--book);
      box-shadow: inset 4px 0 0 rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    .sh-book__info { flex: 1; display: grid; gap: 4px; min-width: 0; }
    .sh-book__info b { font: 400 18px var(--cartoon); color: #5a3520; }
    .sh-book__info small { font: 400 12px var(--mono); color: #8a6a4a; }
    .sh-book__bar { height: 8px; border-radius: 99px; background: rgba(90, 53, 32, 0.15); overflow: hidden; }
    .sh-book__bar span { display: block; height: 100%; background: linear-gradient(90deg, #f6c453, #e2574c); }

    /* ── reading extras: stars per spread, karaoke, mode switch ─────────────── */
    .reader__dots { display: inline-flex; gap: 4px; padding: 0 4px; }
    .reader__dots i { font-style: normal; font-size: 15px; color: rgba(246, 231, 200, 0.3); transition: color 300ms, transform 300ms var(--ease-out); }
    .reader__dots i.is-done { color: #f6c453; }
    .reader__dots i.is-current { transform: scale(1.35); color: #fff3d6; }
    .reader__dots i.is-current.is-done { color: #ffd76a; }
    .reader__title, .reader__text { font-family: var(--cartoon); font-weight: 400; letter-spacing: 0.03em; }
    .reader__text { font-size: 20px; }
    .reader__text .ch { border-radius: 4px; transition: background-color 120ms, color 120ms; }
    .reader__text .ch.is-past { color: #a0602c; }
    .reader__text .ch.is-said { background: #ffe08a; color: #5a3520; }
    #reader-mode[aria-pressed="true"] { background: linear-gradient(180deg, #ff8a73, #c84a3a); border-color: var(--brass-hi); }

    /* ── end-of-book celebration ───────────────────────────────────────────── */
    .celebration {
      position: fixed;
      inset: 0;
      z-index: 65;
      display: grid;
      place-items: center;
      background: rgba(20, 12, 6, 0.35);
      animation: sh-fade 260ms ease both;
    }
    .celebration__card {
      padding: 26px 34px 24px;
      border-radius: 20px;
      text-align: center;
      background: linear-gradient(180deg, #fbf3df, #f1e2c0);
      border: 1.5px solid var(--brass);
      box-shadow: 0 0 0 6px rgba(44, 26, 16, 0.9), 0 30px 70px rgba(10, 5, 2, 0.45);
      animation: sh-pop 480ms var(--ease-out) both;
    }
    .celebration__stars { display: block; font-size: 34px; letter-spacing: 0.2em; color: #f6c453; text-shadow: 0 3px 0 #a8692c; animation: bell-swing 1.6s ease-in-out infinite; }
    .celebration h3 { margin: 8px 0 6px; font: 400 32px var(--cartoon); color: #e2574c; }
    .celebration p { margin: 0 0 16px; font: 400 17px var(--cartoon); color: #5a3520; }
    .celebration__actions { display: flex; gap: 10px; justify-content: center; }

    @media (max-width: 760px) {
      .brand__house { width: 46px; height: 46px; }
      .brand__title { font-size: 26px; }
      .brand__tag { font-size: 12px; }
      .souvenir-chip { height: 30px; font-size: 15px; gap: 8px; }
      .experience .editorial-identity { flex-wrap: wrap; gap: 8px; }
      .hud-button .audio-toggle__label { display: none; }
      .selection__bar { width: 80px; }
      .reader__dots { display: none; }
      .sh-dialog { padding: 24px 18px 20px; }
    }

    /* undo the editorial "small caps" span rule inside the new brand + chip */
    .experience .editorial-identity .brand span,
    .experience .editorial-identity .souvenir-chip span {
      color: inherit;
      font-weight: inherit;
      line-height: inherit;
      text-transform: none;
    }

    .experience .editorial-identity .brand__title span {
      font-size: 1em;
      letter-spacing: 0.02em;
    }

    .experience .editorial-identity .brand__title span:nth-child(1) { color: #e2574c; }
    .experience .editorial-identity .brand__title span:nth-child(2) { color: #f0a020; }
    .experience .editorial-identity .brand__title span:nth-child(3) { color: #3e9b5f; }
    .experience .editorial-identity .brand__title span:nth-child(4) { color: #3f78c8; }
    .experience .editorial-identity .brand__title span:nth-child(5) { color: #9b5cc4; }

    .experience .editorial-identity .brand__tag {
      font-size: 14px;
      letter-spacing: 0.08em;
      color: #fff8e8;
    }

    .experience .editorial-identity .souvenir-chip span {
      font-size: 18px;
      letter-spacing: 0;
      color: var(--engrave);
    }

    .experience .editorial-identity .souvenir-chip small {
      font-size: 12px;
    }

    /* keep the counter clear of the stroked title */
    .experience .counter {
      font-size: 16px;
      margin-right: 18px;
      align-self: flex-start;
      padding-top: 10px;
    }

    @media (max-width: 760px) {
      .experience .editorial-identity .brand__tag { font-size: 12px; }
      .experience .editorial-identity .souvenir-chip span { font-size: 15px; }
      .experience .counter { font-size: 13px; margin-right: 10px; }
    }

    /* the counter column was a fixed 44px; let it size to its content */
    .experience .selection {
      grid-template-columns: auto minmax(0, 1fr);
      column-gap: 18px;
    }

    .experience .counter {
      margin-right: 0;
      white-space: nowrap;
      font-family: Inter, "Helvetica Neue", Arial, sans-serif;
      font-weight: 700;
      font-size: 15px;
      letter-spacing: 0.06em;
    }

    /* the subtitle pill must win over the generic brand span reset */
    .experience .editorial-identity .brand .brand__tag {
      font-size: 14px;
      color: #fff8e8;
      letter-spacing: 0.08em;
    }

    /* digits read better in a plain bold face than in the cartoon face */
    .experience .editorial-identity .souvenir-chip b,
    .experience .selection__status,
    .reader__count {
      font-family: Inter, "Helvetica Neue", Arial, sans-serif;
      font-weight: 700;
    }

    .experience .editorial-identity .souvenir-chip b {
      font-size: 16px;
    }

    .experience .selection__title {
      overflow: visible;
      padding-left: 4px;
    }

    @media (max-width: 760px) {
      .experience .editorial-identity .brand .brand__tag { font-size: 12px; }
      .experience .editorial-identity .souvenir-chip b { font-size: 14px; }
      .experience .counter { font-size: 12px; }
    }

    /* ── cloud-roof cottage logo ───────────────────────────────────────────── */
    .experience .brand__house {
      width: 78px;
      height: 78px;
      overflow: visible;
    }
    .brand__shadow { fill: rgba(60, 35, 20, 0.18); }
    .experience .brand__wall { fill: #ffd9e2; stroke: #c9707f; stroke-width: 2; }
    .experience .brand__door { fill: #b98353; stroke: #7a4c2a; stroke-width: 1.6; }
    .experience .brand__knob { fill: #ff7a8f; }
    .experience .brand__window { fill: #fff3a8; stroke: #c9707f; stroke-width: 2; }
    .brand__frame { stroke: #c9707f; stroke-width: 1.4; stroke-linecap: round; fill: none; }
    .brand__cloud circle,
    .brand__cloud rect { fill: #ffffff; }
    .brand__cloud { filter: drop-shadow(0 2px 0 #b9d8f2) drop-shadow(0 4px 6px rgba(80, 120, 170, 0.25)); }
    .brand__cloud-shine { stroke: #dff0ff; stroke-width: 2.6; stroke-linecap: round; fill: none; }
    .experience .brand__bell { transform-origin: 48px 50px; }
    .brand__bell-rope { stroke: #a8692c; stroke-width: 1.6; stroke-linecap: round; fill: none; }
    .experience .brand__bell-body { fill: #ffd166; stroke: #c98a2c; stroke-width: 1.4; }
    .experience .brand__clapper { fill: #c98a2c; }
    .brand__sparkle { fill: #ffd76a; transform-origin: 84px 21px; animation: sparkle-twinkle 2.4s ease-in-out infinite; }
    @keyframes sparkle-twinkle { 0%, 100% { opacity: 0.4; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }
    .experience .brand:hover .brand__house { transform: translateY(-3px) rotate(-2deg); }

    /* bubble-letter title drawn as SVG text: round joins make every stroke chubby */
    .experience .brand__title {
      display: block;
      width: clamp(190px, 17vw, 250px);
      height: auto;
      overflow: visible;
    }
    .brand__title text {
      font-family: var(--cartoon);
      font-size: 54px;
      letter-spacing: 2px;
      stroke-linejoin: round;
      stroke-linecap: round;
      paint-order: stroke fill;
    }
    .brand__title-shadow { fill: rgba(70, 40, 25, 0.28); stroke: rgba(70, 40, 25, 0.28); stroke-width: 16px; }
    .brand__title-outline { fill: #fff; stroke: #7a4c2a; stroke-width: 15px; }
    .brand__title-fill { stroke: #fffaf0; stroke-width: 9px; }
    .brand__title-fill tspan:nth-child(1) { fill: #ff6b6b; }
    .brand__title-fill tspan:nth-child(2) { fill: #ffa630; }
    .brand__title-fill tspan:nth-child(3) { fill: #4fbf73; }
    .brand__title-fill tspan:nth-child(4) { fill: #4a9cf0; }
    .brand__title-fill tspan:nth-child(5) { fill: #b072e0; }

    .experience .editorial-identity .brand .brand__tag {
      margin-top: -2px;
      border-radius: 999px 999px 999px 999px;
      background: #ffffff;
      color: #c9707f;
      border: 2px solid #ffd9e2;
      box-shadow: 0 2px 0 #b9d8f2;
    }

    /* top-right: with the palette label gone, the controls sit on the top line */
    .experience .audio-controls {
      top: 34px;
      opacity: 1;
    }

    /* ── bottom "pick a book" strip, modelled on the reference site ─────────── */
    .experience .browse-ui.shelf-strip {
      left: 0;
      right: 0;
      bottom: 14px;
      width: auto;
      transform: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      grid-template-columns: none;
    }

    .strip-head {
      display: flex;
      align-items: baseline;
      gap: 10px;
      max-width: min(900px, calc(100vw - 32px));
      padding: 4px 18px 6px;
      border-radius: 999px;
      background: rgba(255, 248, 232, 0.82);
      border: 1.5px solid rgba(195, 154, 82, 0.7);
      box-shadow: 0 3px 0 rgba(44, 26, 16, 0.35);
      backdrop-filter: blur(6px);
    }

    .strip-kicker {
      font: 400 15px var(--cartoon);
      color: #fff8e8;
      padding: 2px 10px;
      border-radius: 999px;
      background: linear-gradient(180deg, #74503a, #3d2517);
      align-self: center;
    }

    .experience .strip-head .counter {
      margin: 0;
      padding: 0;
      font-size: 13px;
      color: #9a6a3a;
      text-shadow: none;
      align-self: center;
    }

    .experience .strip-head .selection__title {
      margin: 0;
      padding: 0;
      font-size: 28px;
      line-height: 1.1;
      -webkit-text-stroke: 0;
      text-shadow: none;
      color: #5a3520;
      white-space: nowrap;
    }

    .experience .strip-head .selection__note {
      margin: 0;
      font-size: 15px;
      color: #8a5a2e;
      text-shadow: none;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .strip-row { display: flex; align-items: center; gap: 14px; }
    .strip-cards { display: flex; gap: 12px; }

    .strip-nav {
      width: 52px;
      height: 52px;
      display: grid;
      place-items: center;
      padding: 0;
      border: 0;
      border-radius: 50%;
      cursor: pointer;
      background: radial-gradient(circle at 35% 30%, #ffe8b8, #e9b56b 70%, #c98a44);
      box-shadow: 0 0 0 3px #2c1a10, 0 8px 18px rgba(20, 10, 5, 0.45), inset 0 -3px 0 #a86a2c;
      transition: transform 220ms cubic-bezier(0.2, 1.35, 0.3, 1);
    }
    .strip-nav svg { width: 22px; height: 22px; fill: none; stroke: #3a2410; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
    .strip-nav:hover { transform: scale(1.1); }
    .strip-nav:active { transform: scale(0.94); }

    .strip-card {
      width: 214px;
      height: 112px;
      display: flex;
      gap: 10px;
      align-items: center;
      padding: 10px 12px;
      border: 0;
      border-radius: 14px;
      text-align: left;
      cursor: pointer;
      color: #3b2a1d;
      background:
        radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.6), transparent 42%),
        linear-gradient(180deg, #fbf3df, #f1e2c0);
      box-shadow: 0 0 0 1px #d4b982, 0 0 0 4px #2c1a10, 0 10px 24px rgba(20, 10, 5, 0.4);
      opacity: 0.88;
      transform: scale(0.94);
      transition: transform 240ms cubic-bezier(0.2, 1.35, 0.3, 1), box-shadow 220ms, opacity 220ms;
    }
    .strip-card:hover { opacity: 1; transform: translateY(-4px) scale(0.97); }
    .strip-card.is-current { opacity: 1; transform: translateY(-6px) scale(1); box-shadow: 0 0 0 1px #d4b982, 0 0 0 4px #f6c453, 0 16px 28px rgba(20, 10, 5, 0.45); }
    .strip-card__cover { width: 48px; height: 72px; flex: none; border-radius: 4px 7px 7px 4px; box-shadow: inset 3px 0 0 rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.25); }
    .strip-card__body { flex: 1; min-width: 0; display: grid; gap: 5px; }
    .strip-card__title { font: 400 19px/1.1 var(--cartoon); color: #5a3520; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .strip-card__bar { height: 7px; border-radius: 99px; background: rgba(140, 106, 60, 0.2); overflow: hidden; }
    .strip-card__bar span { display: block; height: 100%; background: linear-gradient(90deg, #f6c453, #e2574c); }
    .strip-card__ticks { display: flex; gap: 3px; }
    .strip-card__ticks i { width: 9px; height: 9px; border-radius: 50%; background: rgba(140, 106, 60, 0.25); }
    .strip-card__ticks i.is-on { background: #6cc05a; }
    .strip-card__foot { display: flex; justify-content: space-between; font: 600 11px Inter, Arial, sans-serif; color: #8c6a3c; }

    /* position markers become the reference site's little dots */
    .experience .shelf-strip .index-nav { display: flex; justify-content: center; }
    .experience .shelf-strip .markers { display: flex; gap: 6px; }
    .experience .shelf-strip .marker { width: 14px; height: 14px; padding: 0; }
    .experience .shelf-strip .marker::before {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 2px solid #e9b56b;
      background: #fbf3df;
      inset: 2px;
    }
    .experience .shelf-strip .marker[aria-current="true"]::before { background: #f6c453; box-shadow: 0 0 6px rgba(246, 196, 83, 0.8); }
    .experience .shelf-strip .marker[data-progress="done"]::before { border-color: #6cc05a; }

    @media (max-width: 760px) {
      .experience .brand__house { width: 56px; height: 56px; }
      .experience .brand__title { width: 160px; }
      .strip-head { flex-wrap: wrap; justify-content: center; border-radius: 16px; }
      .experience .strip-head .selection__title { font-size: 22px; }
      .experience .strip-head .selection__note { display: none; }
      .strip-cards { gap: 6px; }
      .strip-card { width: 112px; height: 132px; flex-direction: column; align-items: stretch; gap: 4px; padding: 8px; }
      .strip-card:not(.is-current) { display: none; }
      .strip-card.is-current { width: 220px; height: 108px; flex-direction: row; align-items: center; }
      .strip-nav { width: 44px; height: 44px; }
    }

    .sh-details { margin: 4px 0 8px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(195, 154, 82, 0.45); }
    .sh-details summary { cursor: pointer; font: 400 17px var(--cartoon); color: #8a5a2e; }
    .sh-details[open] summary { margin-bottom: 10px; }

    /* dots sit centred under the cards, not in the old bottom-right corner */
    .experience .shelf-strip .index-nav {
      position: static;
      inset: auto;
      transform: none;
      margin: 0;
    }

    .experience .brand__house { width: 92px; height: 92px; margin: -8px -4px -6px -6px; }

    .experience .shelf-strip .index-nav {
      align-self: center;
      justify-self: center;
      margin: 0 auto;
      width: auto;
    }

    @media (max-width: 760px) {
      /* phones: controls on the very top row, logo + chip underneath */
      .experience .audio-controls { top: 10px; right: 10px; gap: 6px; }
      .experience .audio-volume-wrap { display: none; }
      .experience .editorial-header { top: 58px; left: 12px; right: 12px; }
      .experience .brand__house { width: 64px; height: 64px; }
    }

    /* "选一本书" title block back in the bottom-left corner; the centre keeps only the cards */
    @media (min-width: 1240px) {
      .experience .shelf-strip .strip-head {
        position: fixed;
        left: 34px;
        bottom: 30px;
        width: min(300px, calc((100vw - 840px) / 2 - 40px));
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 6px 10px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        backdrop-filter: none;
      }

      .experience .shelf-strip .strip-head .selection__title {
        grid-column: 1 / -1;
        font-size: clamp(32px, 2.8vw, 44px);
        line-height: 1.05;
        white-space: normal;
        -webkit-text-stroke: 7px #fff8e8;
        paint-order: stroke fill;
        text-shadow: 0 5px 0 rgba(60, 30, 15, 0.25);
      }

      .experience .shelf-strip .strip-head .selection__note {
        grid-column: 1 / -1;
        white-space: normal;
        font-size: 16px;
        line-height: 1.5;
        color: #5a3520;
        text-shadow: 0 0 6px rgba(255, 248, 232, 0.95), 0 0 2px rgba(255, 248, 232, 1);
      }

      .experience .shelf-strip .strip-head .counter {
        justify-self: start;
        font-size: 15px;
        color: #5a3520;
        text-shadow: 0 0 6px rgba(255, 248, 232, 0.9);
      }
    }


    /* bottom-left book title as puffy cloud lettering, matching the logo */
    .experience .shelf-strip .strip-head .selection__title {
      -webkit-text-stroke: 0;
      color: #ff8aa8;
      letter-spacing: 0.04em;
      text-shadow:
        5px 0px 0 #ffffff, -5px 0px 0 #ffffff, 0px 5px 0 #ffffff, 0px -5px 0 #ffffff, 4px 4px 0 #ffffff, -4px 4px 0 #ffffff, 4px -4px 0 #ffffff, -4px -4px 0 #ffffff, 3px 5px 0 #ffffff, -3px 5px 0 #ffffff, 5px 3px 0 #ffffff, -5px 3px 0 #ffffff, 3px -5px 0 #ffffff, -3px -5px 0 #ffffff, 5px -3px 0 #ffffff, -5px -3px 0 #ffffff,
        0 7px 0 #b9d8f2,
        6px 6px 0 #b9d8f2,
        -6px 6px 0 #b9d8f2,
        0 10px 14px rgba(80, 120, 170, 0.35);
    }

    /* ── language picker ───────────────────────────────────────────────────── */
    .lang-picker { position: relative; }
    .lang-button__flag { font-size: 15px; line-height: 1; }
    .lang-menu {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      z-index: 80;
      min-width: 170px;
      padding: 6px;
      border-radius: 14px;
      background: linear-gradient(180deg, #fbf3df, #f1e2c0);
      border: 1.5px solid var(--brass);
      box-shadow: 0 0 0 4px rgba(44, 26, 16, 0.85), 0 14px 30px rgba(20, 10, 5, 0.35);
      animation: sh-pop 220ms var(--ease-out) both;
    }
    .lang-menu__item {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 8px 10px;
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: #3b2a1d;
      font: 600 14px Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
      text-align: left;
      cursor: pointer;
    }
    .lang-menu__item span { font-size: 18px; }
    .lang-menu__item:hover, .lang-menu__item:focus-visible { background: rgba(212, 185, 130, 0.3); outline: none; }
    .lang-menu__item[aria-checked="true"] { background: #f9d98a; }

    .lang-badge {
      display: inline-grid;
      place-items: center;
      min-width: 22px;
      height: 20px;
      padding: 0 4px;
      border-radius: 999px;
      font: 700 11px/1 Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
      color: #3b2a1d;
      background: radial-gradient(circle at 35% 30%, #ffe8b8, #e9b56b 70%, #c98a44);
    }
    .lang-menu__item .lang-badge { min-width: 28px; height: 22px; font-size: 12px; }

    /* ══ cloud theme: replaces the dark-walnut controls with soft, puffy clouds ══ */
    :root {
      --cloud-top: #ffffff;
      --cloud-bottom: #eef6ff;
      --cloud-edge: #cfe3f6;
      --cloud-ink: #5a6fae;
      --cloud-ink-strong: #3f5592;
      --cloud-pink: #ffd6e4;
      --cloud-shadow: 0 3px 0 #cfe3f6, 0 8px 16px rgba(90, 130, 190, 0.22);
      /* re-point the old walnut variables so every remaining reference turns cloudy */
      --wood-grain: linear-gradient(180deg, var(--cloud-top), var(--cloud-bottom));
      --brass: #cfe3f6;
      --brass-hi: #a9cdf0;
      --engrave: #5a6fae;
    }

    .experience .round-button,
    .experience .text-button,
    .experience .close-button,
    .experience .page-button,
    .experience .audio-toggle,
    .experience .strip-nav,
    .experience .souvenir-chip {
      position: relative;
      overflow: visible;
      border: 0;
      color: var(--cloud-ink);
      text-shadow: none;
      background:
        radial-gradient(ellipse 60% 55% at 30% 20%, rgba(255, 255, 255, 0.95), transparent 70%),
        linear-gradient(180deg, var(--cloud-top), var(--cloud-bottom));
      box-shadow: var(--cloud-shadow), inset 0 -3px 0 rgba(180, 210, 240, 0.45);
    }

    /* three little puffs on top make every button read as a cloud */
    .experience .round-button::before,
    .experience .text-button::before,
    .experience .page-button::before,
    .experience .audio-toggle::before,
    .experience .souvenir-chip::before {
      content: "";
      position: absolute;
      left: 10%;
      right: 10%;
      top: -7px;
      height: 14px;
      pointer-events: none;
      background:
        radial-gradient(circle at 18% 100%, #fff 0 7px, transparent 7.5px),
        radial-gradient(circle at 50% 100%, #fff 0 10px, transparent 10.5px),
        radial-gradient(circle at 82% 100%, #fff 0 7px, transparent 7.5px);
      filter: drop-shadow(0 -1px 0 rgba(207, 227, 246, 0.9));
    }

    .experience .round-button svg,
    .experience .close-button svg,
    .experience .page-button svg,
    .experience .audio-toggle svg,
    .experience .strip-nav svg {
      stroke: var(--cloud-ink);
      color: var(--cloud-ink);
    }

    .experience .round-button:hover,
    .experience .text-button:hover,
    .experience .close-button:hover,
    .experience .page-button:not(:disabled):hover,
    .experience .audio-toggle:hover,
    .experience .strip-nav:hover,
    .experience .souvenir-chip:hover {
      color: var(--cloud-ink-strong);
      transform: translateY(-2px) scale(1.03);
      box-shadow: 0 5px 0 #cfe3f6, 0 12px 22px rgba(90, 130, 190, 0.28), inset 0 -3px 0 rgba(180, 210, 240, 0.45), 0 0 0 4px rgba(255, 255, 255, 0.5);
    }

    .experience .round-button:active,
    .experience .text-button:active,
    .experience .close-button:active,
    .experience .page-button:not(:disabled):active,
    .experience .audio-toggle:active,
    .experience .strip-nav:active {
      transform: translateY(2px) scale(0.98);
      box-shadow: 0 1px 0 #cfe3f6, inset 0 2px 6px rgba(120, 160, 210, 0.3);
    }

    .experience .text-button.is-primary,
    #reader-mode[aria-pressed="true"] {
      color: #fff;
      background:
        radial-gradient(ellipse 60% 55% at 30% 20%, rgba(255, 255, 255, 0.55), transparent 70%),
        linear-gradient(180deg, #ffb3c8, #ff8fae);
      box-shadow: 0 3px 0 #f2a3bb, 0 8px 16px rgba(230, 110, 150, 0.3), inset 0 -3px 0 rgba(220, 100, 140, 0.35);
    }
    .experience .text-button.is-primary::before,
    #reader-mode[aria-pressed="true"]::before {
      background:
        radial-gradient(circle at 18% 100%, #ffc2d3 0 7px, transparent 7.5px),
        radial-gradient(circle at 50% 100%, #ffc2d3 0 10px, transparent 10.5px),
        radial-gradient(circle at 82% 100%, #ffc2d3 0 7px, transparent 7.5px);
      filter: none;
    }

    .experience .audio-toggle[aria-pressed="false"] { color: rgba(90, 111, 174, 0.5); }
    .experience .souvenir-chip { color: var(--cloud-ink); }
    .experience .editorial-identity .souvenir-chip span,
    .experience .editorial-identity .souvenir-chip b { color: var(--cloud-ink-strong); }

    .experience .strip-nav {
      box-shadow: 0 3px 0 #cfe3f6, 0 8px 18px rgba(90, 130, 190, 0.3), inset 0 -3px 0 rgba(180, 210, 240, 0.45);
    }

    /* reader bar, strip cards, dialogs: white cloud frames instead of dark wood rings */
    .reader__bar {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(238, 246, 255, 0.92));
      border: 0;
      box-shadow: 0 4px 0 #cfe3f6, 0 12px 26px rgba(90, 130, 190, 0.25);
    }
    .reader__count { color: var(--cloud-ink); }
    .reader__dots i { color: rgba(90, 111, 174, 0.25); }
    .reader__dots i.is-current { color: #ffd166; }

    .strip-kicker,
    .experience .editorial-identity .brand .brand__tag {
      background: #fff;
      color: #ff7fa0;
      border: 2px solid var(--cloud-pink);
      box-shadow: 0 2px 0 #cfe3f6;
    }

    .experience .strip-card {
      background:
        radial-gradient(circle at 20% 15%, #fff, transparent 45%),
        linear-gradient(180deg, #ffffff, #f2f8ff);
      box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--cloud-edge), 0 10px 22px rgba(90, 130, 190, 0.25);
    }
    .experience .strip-card.is-current {
      box-shadow: 0 0 0 3px #fff, 0 0 0 6px #ffc2d3, 0 16px 28px rgba(90, 130, 190, 0.3);
    }

    .experience .detail-panel,
    .sh-dialog,
    .celebration__card,
    .lang-menu,
    .reader__page {
      border: 0;
      background:
        radial-gradient(circle at 14% 8%, #fff, transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 247, 255, 0.95));
      box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--cloud-edge), 0 22px 50px rgba(90, 130, 190, 0.28);
    }

    .sh-tabs button { border-color: var(--cloud-edge); color: var(--cloud-ink); }
    .sh-tabs button[aria-selected="true"] { background: linear-gradient(180deg, #ffb3c8, #ff8fae); color: #fff; border-color: #ffb3c8; }
    .sh-form input:not([type="range"]):not([type="checkbox"]),
    .sh-form select { border-color: var(--cloud-edge); }
    .sh-medal { background: radial-gradient(circle, #fff 0 55%, transparent 56%), radial-gradient(circle at 35% 30%, #fff, #d8ebff 60%, #a9cdf0); }
    .lang-menu__item[aria-checked="true"] { background: #ffe1ea; }
    .lang-badge,
    .account-button__avatar { background: radial-gradient(circle at 35% 30%, #fff, #ffd6e4 70%, #ffb3c8); color: #c2577a; }

    .experience .shelf-strip .marker::before { border-color: var(--cloud-edge); background: #fff; }
    .experience .shelf-strip .marker[aria-current="true"]::before { background: #ffb3c8; border-color: #ff8fae; box-shadow: 0 0 6px rgba(255, 143, 174, 0.7); }

    /* close buttons keep their absolute top-right spot (the cloud rule made them relative) */
    .experience .close-button { position: absolute; }
    .experience .sh-dialog__close { position: absolute; top: 14px; right: 14px; }

    /* ── little bell cursors (hotspot = the tip at the top-left) ──────────────── */
    :root {
      --cursor-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E %3Cpath d='M2 2l7.5 3-4.5 4.5z' fill='%23f0a020' stroke='%23ffffff' stroke-width='1' stroke-linejoin='round'/%3E %3Cpath d='M18 6.5v2.2' stroke='%23b8742a' stroke-width='1.8' stroke-linecap='round'/%3E %3Cpath d='M10.5 22c0-7.5 3.2-12.8 7.5-12.8s7.5 5.3 7.5 12.8l1.8 2.4H8.7z' fill='%23ffd166' stroke='%23b8742a' stroke-width='1.8' stroke-linejoin='round'/%3E %3Cpath d='M13.2 19.5c.2-3.6 1.6-6.4 3.6-7.4' fill='none' stroke='%23fff6c8' stroke-width='1.6' stroke-linecap='round'/%3E %3Ccircle cx='18' cy='27' r='2.2' fill='%23e2574c' stroke='%23b8742a' stroke-width='1.2'/%3E %3C/svg%3E") 2 2, auto;
      --cursor-cloud-pink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E %3Cpath d='M2 2l7.5 3-4.5 4.5z' fill='%23ff8fae' stroke='%23ffffff' stroke-width='1' stroke-linejoin='round'/%3E %3Cg transform='rotate(-16 18 9)'%3E %3Cpath d='M18 6.5v2.2' stroke='%23b8742a' stroke-width='1.8' stroke-linecap='round'/%3E %3Cpath d='M10.5 22c0-7.5 3.2-12.8 7.5-12.8s7.5 5.3 7.5 12.8l1.8 2.4H8.7z' fill='%23ffe08a' stroke='%23b8742a' stroke-width='1.8' stroke-linejoin='round'/%3E %3Cpath d='M13.2 19.5c.2-3.6 1.6-6.4 3.6-7.4' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round'/%3E %3Ccircle cx='20.5' cy='26.6' r='2.2' fill='%23e2574c' stroke='%23b8742a' stroke-width='1.2'/%3E %3C/g%3E %3Cpath d='M27.5 11.5q2 2.5 0 5M29.6 9.6q3.2 4.4 0 8.8' fill='none' stroke='%23ff8fae' stroke-width='1.6' stroke-linecap='round'/%3E %3C/svg%3E") 2 2, pointer;
    }

    html,
    body,
    .experience,
    .experience *,
    .experience:not(.mode-detail) #scene,
    .mode-detail #scene {
      cursor: var(--cursor-cloud);
    }

    .experience button:not(:disabled),
    .experience a,
    .experience summary,
    .experience label,
    .experience select,
    .experience [role="tab"],
    .experience [role="menuitemradio"],
    .experience input[type="range"],
    .experience input[type="checkbox"],
    .experience:not(.mode-detail) #scene.has-book-hover,
    .experience:not(.mode-detail) #scene.is-shelf-dragging,
    .mode-detail #scene.has-page-hover,
    .mode-detail #scene.has-closed-book-hover,
    .mode-detail #scene.is-page-dragging,
    #scene.has-book-hover {
      cursor: var(--cursor-cloud-pink);
    }

    .experience input[type="text"],
    .experience input[type="email"],
    .experience input[type="password"],
    .experience textarea {
      cursor: text;
    }

    /* ══ full-screen story reader ═════════════════════════════════════════════ */
    .sr {
      position: fixed;
      inset: 0;
      z-index: 55;
      display: grid;
      grid-template-rows: 1fr auto auto;
      justify-items: center;
      align-items: center;
      padding: 18px 16px 18px;
      animation: sr-in 420ms cubic-bezier(0.2, 0.72, 0.24, 1) both;
      touch-action: none;
      user-select: none;
    }
    .sr[hidden] { display: none; }
    .sr.is-leaving { animation: sr-out 300ms ease both; }
    @keyframes sr-in { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: none; } }
    @keyframes sr-out { to { opacity: 0; transform: scale(0.98); } }

    .sr-backdrop {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 70% 60% at 50% 45%, rgba(255, 255, 255, 0.35), transparent 70%),
        rgba(60, 70, 110, 0.38);
      backdrop-filter: blur(10px) saturate(1.1);
    }

    .sr-stage {
      position: relative;
      perspective: 2200px;
      perspective-origin: 50% 40%;
    }

    .sr-book {
      position: relative;
      width: calc(var(--pw) * 2);
      height: var(--ph);
      transform-style: preserve-3d;
      transition: transform 60ms linear;
      /* no filter here: a filter flattens the 3D context and the turning leaf would lose its curl */
    }

    .sr-page {
      position: absolute;
      top: 0;
      width: var(--pw);
      height: var(--ph);
      overflow: hidden;
      background-size: 100% 100%;
      background-color: #fffaf0;
    }
    .sr-left { left: 0; border-radius: 14px 0 0 14px; box-shadow: -10px 26px 40px rgba(40, 50, 90, 0.3), 0 6px 10px rgba(40, 50, 90, 0.18); }
    .sr-right { left: var(--pw); border-radius: 0 14px 14px 0; box-shadow: 10px 26px 40px rgba(40, 50, 90, 0.3), 0 6px 10px rgba(40, 50, 90, 0.18); }
    .sr-page.is-empty { background: transparent; box-shadow: none; }

    /* the shadow a lifted sheet casts on the page underneath it */
    .sr-cast {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 34%;
      opacity: 0;
      pointer-events: none;
    }
    .sr-right .sr-cast { background: linear-gradient(90deg, rgba(40, 30, 50, 0.32), rgba(40, 30, 50, 0)); }
    .sr-left .sr-cast { left: auto; background: linear-gradient(270deg, rgba(40, 30, 50, 0.32), rgba(40, 30, 50, 0)); }

    .sr-leaf {
      position: absolute;
      top: 0;
      left: var(--pw);
      width: var(--pw);
      height: var(--ph);
      transform-style: preserve-3d;
      transform-origin: 0 50%;
      pointer-events: none;
    }
    .sr-leaf[hidden] { display: none; }

    .sr-strip {
      position: absolute;
      top: 0;
      height: var(--ph);
      transform-style: preserve-3d;
      transform-origin: 0 50%;
    }

    .sr-face {
      position: absolute;
      inset: 0;
      background-repeat: no-repeat;
      background-color: #fffaf0;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      overflow: hidden;
    }
    .sr-back { transform: rotateY(180deg); }
    .sr-shade,
    .sr-gloss {
      position: absolute;
      inset: 0;
      opacity: 0;
      pointer-events: none;
    }
    /* flat colours: neighbouring strips vary only in opacity, so the shading reads as one smooth sheet */
    .sr-shade { background: rgba(50, 35, 60, 0.72); }
    .sr-gloss { background: rgba(255, 255, 255, 0.75); }

    .sr.is-riffling .sr-face { filter: blur(0.8px); }

    /* karaoke subtitle while reading aloud */
    .sr-subtitle {
      position: relative;
      max-width: min(820px, 92vw);
      margin: 12px 0 0;
      padding: 8px 18px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.92);
      box-shadow: 0 3px 0 #cfe3f6, 0 10px 22px rgba(90, 130, 190, 0.22);
      font: 400 20px/1.5 var(--cartoon);
      color: #3b2a1d;
      text-align: center;
    }
    .sr-subtitle[hidden] { display: none; }
    .sr-subtitle span { border-radius: 4px; transition: background-color 120ms, color 120ms; }
    .sr-subtitle span.is-past { color: #a0602c; }
    .sr-subtitle span.is-said { background: #ffe08a; color: #5a3520; }

    /* cloud control bar */
    .sr-bar {
      position: relative;
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 14px;
      padding: 8px 14px;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(238, 246, 255, 0.96));
      box-shadow: 0 4px 0 #cfe3f6, 0 12px 26px rgba(90, 130, 190, 0.28);
    }
    .sr-btn {
      position: relative;
      display: inline-grid;
      place-items: center;
      min-width: 42px;
      height: 42px;
      padding: 0 14px;
      border: 0;
      border-radius: 999px;
      color: var(--cloud-ink, #5a6fae);
      font: 400 15px var(--cartoon);
      background: linear-gradient(180deg, #ffffff, #eef6ff);
      box-shadow: 0 3px 0 #cfe3f6, inset 0 -2px 0 rgba(180, 210, 240, 0.45);
      transition: transform 160ms ease, box-shadow 160ms ease;
    }
    .sr-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
    .sr-btn:hover:not(:disabled) { transform: translateY(-2px); }
    .sr-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(120, 160, 210, 0.3); }
    .sr-btn:disabled { opacity: 0.4; }
    .sr-mode[aria-pressed="true"] { color: #fff; background: linear-gradient(180deg, #ffb3c8, #ff8fae); box-shadow: 0 3px 0 #f2a3bb; }
    .sr-close { color: #c2577a; }
    .sr-count {
      min-width: 70px;
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
      font: 700 15px Inter, var(--cartoon);
      color: var(--cloud-ink-strong, #3f5592);
    }
    .sr-dots { display: inline-flex; gap: 3px; }
    .sr-dots i { font-style: normal; font-size: 15px; color: rgba(90, 111, 174, 0.22); transition: color 300ms, transform 300ms; }
    .sr-dots i.is-done { color: #ffd166; }
    .sr-dots i.is-current { transform: scale(1.3); color: #ff8fae; }
    .sr-dots i.is-current.is-done { color: #ffb84d; }

    @media (max-width: 760px) {
      .sr { padding: 12px 8px; }
      .sr-bar { gap: 6px; padding: 6px 8px; flex-wrap: wrap; justify-content: center; border-radius: 22px; }
      .sr-dots { display: none; }
      .sr-btn { height: 38px; padding: 0 10px; font-size: 13px; }
      .sr-subtitle { font-size: 16px; border-radius: 16px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .sr, .sr.is-leaving { animation: none; }
    }

    /* ══ reader as a starry desk scene ════════════════════════════════════════ */
    .sr { animation: sr-fade 520ms ease both; grid-template-rows: 1fr auto; }
    .sr.is-leaving { animation: sr-fade-out 600ms ease both; }
    @keyframes sr-fade { from { opacity: 0; } to { opacity: 1; } }
    @keyframes sr-fade-out { 0%, 40% { opacity: 1; } to { opacity: 0; } }
    /* while the book glides in, the scene fades in behind it but the book stays solid */
    .sr.is-arriving .sr-backdrop,
    .sr.is-arriving .sr-desk,
    .sr.is-arriving .sr-toys,
    .sr.is-arriving .sr-bar { animation: sr-fade 700ms ease both; }

    .sr-backdrop {
      background:
        radial-gradient(ellipse 60% 45% at 50% 30%, rgba(160, 140, 255, 0.28), transparent 70%),
        radial-gradient(ellipse 40% 30% at 85% 15%, rgba(255, 180, 220, 0.18), transparent 70%),
        linear-gradient(180deg, #151a46 0%, #252a68 55%, #33307a 100%);
      backdrop-filter: none;
      overflow: hidden;
    }
    .sr-stars {
      position: absolute;
      inset: -10%;
      background-image:
        radial-gradient(1.6px 1.6px at 20px 30px, #fff, transparent),
        radial-gradient(1.2px 1.2px at 90px 120px, #fff8d0, transparent),
        radial-gradient(2px 2px at 160px 60px, #fff, transparent),
        radial-gradient(1.4px 1.4px at 230px 170px, #d8e4ff, transparent),
        radial-gradient(1.8px 1.8px at 300px 90px, #ffe9f2, transparent),
        radial-gradient(1.2px 1.2px at 60px 210px, #fff, transparent);
      background-size: 320px 240px;
      animation: sr-twinkle 4s ease-in-out infinite;
    }
    .sr-stars--b { background-size: 470px 330px; background-position: 120px 80px; animation-delay: -2s; opacity: 0.7; }
    @keyframes sr-twinkle { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

    /* the starry tabletop the book rests on */
    .sr-desk {
      position: absolute;
      left: -5%;
      right: -5%;
      bottom: 0;
      height: 34%;
      border-radius: 50% 50% 0 0 / 22% 22% 0 0;
      background:
        radial-gradient(1.6px 1.6px at 30px 20px, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1.2px 1.2px at 110px 70px, rgba(255, 240, 200, 0.8), transparent),
        radial-gradient(2px 2px at 190px 40px, rgba(255, 220, 240, 0.85), transparent),
        radial-gradient(1.3px 1.3px at 250px 90px, rgba(220, 230, 255, 0.8), transparent),
        linear-gradient(180deg, #6a5fd0 0%, #4a43a8 35%, #2c2a72 100%);
      background-size: 280px 110px, 280px 110px, 280px 110px, 280px 110px, auto;
      box-shadow: inset 0 6px 0 rgba(255, 255, 255, 0.18), 0 -12px 40px rgba(140, 120, 255, 0.25);
    }

    .sr-stage { z-index: 1; margin-top: -2vh; }
    .sr-bar { z-index: 2; }

    /* cartoon toys around the book */
    .sr-toys { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
    .sr-toy {
      position: absolute;
      height: auto;
      filter: drop-shadow(0 6px 10px rgba(10, 10, 40, 0.35));
      animation: sr-bob 3.6s ease-in-out infinite;
      transform-origin: 50% 100%;
    }
    .sr-toy--rocket { left: 5vw; bottom: 22vh; width: clamp(54px, 6vw, 96px); }
    .sr-toy--blocks { left: 9vw; bottom: 9vh; width: clamp(80px, 9vw, 150px); animation-delay: -1.2s; }
    .sr-toy--moon { right: 6vw; bottom: 24vh; width: clamp(64px, 7vw, 110px); animation-delay: -0.6s; }
    .sr-toy--crayons { right: 13vw; bottom: 8vh; width: clamp(56px, 6vw, 96px); animation-delay: -2s; }
    .sr-toy--star { right: 3vw; bottom: 6vh; width: clamp(64px, 7vw, 110px); animation-delay: -2.8s; }
    @keyframes sr-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(-2deg); } }

    /* words lit up on the page while reading aloud */
    .sr-hl {
      position: absolute;
      left: 0;
      top: 0;
      width: 800px;
      height: 1200px;
      transform-origin: 0 0;
      pointer-events: none;
      mix-blend-mode: multiply;
    }
    .sr-hl i { position: absolute; border-radius: 10px; transition: left 120ms, width 120ms; }
    .sr-hl i.is-said { background: rgba(255, 214, 80, 0.75); }
    .sr-hl i.is-past { background: rgba(255, 228, 150, 0.32); }

    .sr-subtitle { display: none !important; }

    @media (max-width: 760px) {
      .sr-toy--rocket, .sr-toy--moon { display: none; }
      .sr-toy--blocks { left: 2vw; bottom: 3vh; width: 70px; }
      .sr-toy--crayons { right: 22vw; bottom: 2vh; width: 50px; }
      .sr-toy--star { right: 2vw; bottom: 3vh; width: 60px; }
      .sr-desk { height: 28%; }
    }

    @media (prefers-reduced-motion: reduce) {
      .sr-toy, .sr-stars { animation: none; }
    }

    /* reading on the 3D desk: the words live on the page, so no caption cards */
    .reader__caption { display: none !important; }


    /* ── loading screen: the logo house with a ringing bell ─────────────────── */
    .experience .loading {
      background:
        radial-gradient(ellipse 70% 60% at 50% 40%, rgba(255, 255, 255, 0.55), transparent 70%),
        linear-gradient(180deg, #ffe3c4, #ffc6a3);
      transition: opacity 560ms ease;
    }
    .experience .loading.is-done { opacity: 0; pointer-events: none; }
    .loading__inner { gap: 10px; }
    .loading__house {
      width: 150px;
      height: 150px;
      overflow: visible;
      filter: drop-shadow(0 8px 12px rgba(120, 70, 40, 0.25));
      animation: loading-hop 1.8s ease-in-out infinite;
    }
    .loading__house .brand__wall { fill: #ffd9e2; stroke: #c9707f; stroke-width: 2; }
    .loading__house .brand__door { fill: #b98353; stroke: #7a4c2a; stroke-width: 1.6; }
    .loading__house .brand__knob { fill: #ff7a8f; }
    .loading__house .brand__window { fill: #fff3a8; stroke: #c9707f; stroke-width: 2; }
    .loading__house .brand__bell-body { fill: #ffd166; stroke: #c98a2c; stroke-width: 1.4; }
    .loading__house .brand__clapper { fill: #c98a2c; }
    .loading__bell {
      transform-origin: 48px 50px;
      animation: loading-ring 0.9s ease-in-out infinite;
    }
    .loading__wave {
      fill: none;
      stroke: #ff8fae;
      stroke-width: 2.2;
      stroke-linecap: round;
      opacity: 0;
      animation: loading-wave 0.9s ease-in-out infinite;
    }
    .loading__wave--r { animation-delay: 0.45s; }
    .loading__title { width: 230px; height: auto; overflow: visible; }
    .loading__title text {
      font-family: var(--cartoon);
      font-size: 54px;
      letter-spacing: 2px;
      stroke-linejoin: round;
      paint-order: stroke fill;
    }
    .loading__title .brand__title-fill tspan:nth-child(1) { fill: #ff6b6b; }
    .loading__title .brand__title-fill tspan:nth-child(2) { fill: #ffa630; }
    .loading__title .brand__title-fill tspan:nth-child(3) { fill: #4fbf73; }
    .loading__title .brand__title-fill tspan:nth-child(4) { fill: #4a9cf0; }
    .loading__title .brand__title-fill tspan:nth-child(5) { fill: #b072e0; }
    .experience .loading p.loading__text {
      font: 400 18px var(--cartoon);
      letter-spacing: 0.06em;
      text-transform: none;
      color: #a0603a;
    }

    /* the bell swings left and right, the waves pulse on each side in turn */
    @keyframes loading-ring {
      0%, 100% { transform: rotate(-20deg); }
      50% { transform: rotate(20deg); }
    }
    @keyframes loading-wave {
      0%, 100% { opacity: 0; }
      40% { opacity: 1; }
    }
    @keyframes loading-hop {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-6px); }
    }

    @media (prefers-reduced-motion: reduce) {
      .loading__bell, .loading__wave, .loading__house { animation: none; }
      .loading__wave { opacity: 1; }
    }

    .loading__house { width: 190px; height: 190px; }
    .loading__title { width: 280px; }

    /* the bell must visibly ring: bigger swing, explicit pivot, and it keeps swinging
       (more gently) even when the system asks for reduced motion */
    .loading__bell {
      transform-box: view-box;
      transform-origin: 48px 50px;
      animation: loading-ring-strong 0.8s ease-in-out infinite;
    }
    @keyframes loading-ring-strong {
      0%, 100% { transform: rotate(-28deg); }
      50% { transform: rotate(28deg); }
    }
    @keyframes loading-ring-soft {
      0%, 100% { transform: rotate(-14deg); }
      50% { transform: rotate(14deg); }
    }
    @media (prefers-reduced-motion: reduce) {
      .loading__bell { animation: loading-ring-soft 1.2s ease-in-out infinite; }
      .loading__wave { opacity: 0; animation: loading-wave 1.2s ease-in-out infinite; }
    }


    /* ══ loading logo v3: bell + waves are HTML layers with compositor animations ══ */
    .loading__logo {
      position: relative;
      width: 190px;
      height: 190px;
      will-change: transform;
      animation: loading-hop 1.8s ease-in-out infinite;
    }
    .loading__logo .loading__house {
      width: 100%;
      height: 100%;
      animation: none;
    }
    .loading__logo .loading__bell {
      position: absolute;
      left: calc(36 / 96 * 100%);
      top: calc(48 / 96 * 100%);
      width: calc(24 / 96 * 100%);
      height: calc(26 / 96 * 100%);
      transform-origin: 50% calc(2 / 26 * 100%);
      will-change: transform;
      animation: loading-ring-strong 0.8s ease-in-out infinite;
    }
    .loading__logo .loading__wave {
      position: absolute;
      top: calc(54 / 96 * 100%);
      width: calc(13 / 96 * 100%);
      height: calc(16 / 96 * 100%);
      opacity: 0;
      will-change: opacity;
      animation: loading-wave 0.8s ease-in-out infinite;
    }
    .loading__logo .loading__wave--l { left: calc(22 / 96 * 100%); }
    .loading__logo .loading__wave--r { left: calc(61 / 96 * 100%); animation-delay: 0.4s; }
    .loading__logo svg { display: block; width: 100%; height: 100%; overflow: visible; }

    @media (prefers-reduced-motion: reduce) {
      .loading__logo { animation: none; }
      .loading__logo .loading__bell { animation: loading-ring-soft 1.2s ease-in-out infinite; }
      .loading__logo .loading__wave { animation: loading-wave 1.2s ease-in-out infinite; }
    }


    /* ── reading stats chip sits at the top centre ───────────────────────────── */
    .experience .souvenir-chip {
      position: fixed;
      top: 26px;
      left: 50%;
      z-index: 6;
      transform: translateX(-50%);
    }
    .experience .souvenir-chip:hover {
      transform: translateX(-50%) translateY(-2px) scale(1.03);
    }
    .experience .souvenir-chip:active {
      transform: translateX(-50%) translateY(1px) scale(0.98);
    }
    @media (max-width: 760px) {
      /* phones: buttons take the first row and the logo the second, so the chip sits below both */
      .experience .souvenir-chip { top: 138px; }
    }

    /* the stats chip stays a plain pill — the cloud puffs on top read as clutter there */
    .experience .souvenir-chip::before { content: none; }

    /* ── collapsible HUD: one cloud toggle on tablet portrait and phones ── */
    .hud-toggle { display: none; }

    @media (max-width: 1000px) {
      .experience .audio-controls {
        top: 12px;
        right: 12px;
        bottom: auto;
        left: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        opacity: 1;
      }
      /* collapsed: only the menu toggle shows */
      .experience .audio-controls > .audio-toggle:not(.hud-toggle),
      .experience .audio-controls > .lang-picker,
      .experience .audio-controls > .audio-volume-wrap { display: none; }
      .experience .audio-controls > .hud-toggle { display: inline-flex; justify-content: center; }
      /* open: a cloud panel with every control (volume stays out on small screens) */
      .experience .audio-controls.is-open {
        padding: 14px 12px;
        border-radius: 20px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(236, 246, 255, 0.94));
        box-shadow: 0 10px 30px rgba(90, 130, 190, 0.25), inset 0 0 0 1.5px rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(8px);
      }
      .experience .audio-controls.is-open > .audio-toggle:not(.hud-toggle) { display: inline-flex; }
      .experience .audio-controls.is-open > .lang-picker { display: block; }
      .experience .audio-controls.is-open > .audio-volume-wrap { display: none; }
      .experience .audio-controls.is-open .lang-menu {
        position: static;
        margin-top: 8px;
        box-shadow: none;
      }
    }

    /* phones: the "pick a book" title strip repeats the cards below it — keep it for screen readers only */
    @media (max-width: 760px) {
      .experience .shelf-strip .strip-head {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
      }
    }

    /* tablet portrait: the centred stats chip would clip the brand title — drop it below the logo block */
    @media (max-width: 820px) and (min-width: 761px) {
      .experience .souvenir-chip { top: 118px; }
      .experience .souvenir-chip:hover { transform: translateX(-50%) translateY(-2px) scale(1.03); }
    }

    /* brand block hugs the top-left corner (the collapsed HUD freed the first row) */
    .experience .editorial-header { top: 12px; left: 16px; }
    @media (max-width: 880px) {
      .experience .editorial-header { top: 10px; left: 12px; }
    }
    @media (max-width: 760px) {
      .experience .editorial-header { top: 10px; left: 12px; }
      .experience .souvenir-chip { top: 128px; }
    }