/* 声游 SoundWalk — visual system
   Dark gallery, warm paper text, one living accent taken from what you look at.
   Serif for names (exhibit labels), sans for UI, mono for music code. */

:root {
  --bg: #0b0a09;
  --bg-2: #13110f;
  --bg-3: #1b1815;
  --surface: rgba(18, 15, 13, 0.58);
  --surface-strong: rgba(22, 19, 16, 0.94);
  --line: rgba(255, 244, 230, 0.09);
  --line-2: rgba(255, 244, 230, 0.16);
  --text: #f5eee4;
  --text-2: rgba(245, 238, 228, 0.72);
  --text-3: rgba(245, 238, 228, 0.55);
  --accent-h: 36;
  --accent-s: 66%;
  --accent: hsl(var(--accent-h) var(--accent-s) 66%);
  --accent-soft: hsl(var(--accent-h) var(--accent-s) 66% / 0.16);
  --accent-glow: hsl(var(--accent-h) var(--accent-s) 60% / 0.38);
  --accent-ink: #1a130b;
  --sig: #e6b872;
  --danger: #e98b7b;
  --serif: "Noto Serif SC", "Source Han Serif SC", "Source Han Serif", "Songti SC", "STSong", "SimSun", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --r-s: 12px;
  --r-m: 18px;
  --r-l: 26px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { overflow: hidden; overscroll-behavior: none; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
img { -webkit-user-drag: none; user-select: none; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.icon { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: -0.25em; }

/* ---------- frame ---------- */

.backdrop { position: fixed; inset: -10%; background: var(--bg) center / cover no-repeat; background-image: var(--backdrop-img, none); filter: blur(60px) brightness(0.36) saturate(1.25); transform: scale(1.1); transition: background-image 1.2s var(--ease); z-index: 0; }
#app { position: relative; z-index: 1; width: 100%; max-width: 480px; height: 100vh; height: 100dvh; margin: 0 auto; overflow: hidden; overflow: clip; background: var(--bg); isolation: isolate; }
@media (min-width: 760px) {
  #app { height: min(calc(100vh - 48px), 940px); height: min(calc(100dvh - 48px), 940px); margin-top: max(24px, calc((100dvh - 940px) / 2)); border-radius: 36px; box-shadow: 0 50px 140px rgba(0, 0, 0, 0.62), 0 0 0 1px var(--line-2); }
}

/* Wide screens: an editorial panel beside the phone (judges, desktop visitors). */
.desk { display: none; }
@media (min-width: 1120px) {
  body { display: flex; align-items: center; justify-content: center; gap: clamp(48px, 7vw, 120px); }
  #app { margin: 0; flex: none; }
  .desk { display: block; position: relative; z-index: 1; width: min(440px, 36vw); color: var(--text); }
  .desk .wordmark { font-size: 26px; }
  .desk-epigraph { margin: 34px 0 0; font-family: var(--serif); font-size: 15px; letter-spacing: 0.12em; color: var(--text-2); }
  .desk-epigraph span { margin-left: 10px; font-size: 12px; color: var(--text-3); letter-spacing: 0.06em; }
  .desk-title { font-family: var(--serif); font-size: clamp(34px, 3vw, 44px); line-height: 1.25; font-weight: 600; letter-spacing: 0.04em; margin: 14px 0 30px; }
  .desk-phone { display: flex; gap: 18px; align-items: center; padding: 16px; border-radius: 22px; background: rgba(255, 248, 238, 0.04); }
  .desk-phone img { width: 132px; height: 132px; border-radius: 12px; background: rgba(0, 0, 0, 0.3); padding: 8px; flex: none; }
  .desk-phone b { display: block; font-size: 15px; }
  .desk-phone span { display: block; font-family: var(--mono); font-size: 12.5px; color: var(--accent); margin: 6px 0; word-break: break-all; }
  .desk-phone em { display: block; font-style: normal; font-size: 12px; color: var(--text-3); line-height: 1.6; }
}

.screen { position: absolute; inset: 0; overflow: hidden; overflow: clip; opacity: 0; visibility: hidden; transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s; }
#app[data-screen="start"] .start,
#app[data-screen="onboard"] .onboard,
#app[data-screen="journey"] .journey,
#app[data-screen="shared"] .shared { opacity: 1; visibility: visible; transition: opacity 0.5s var(--ease), visibility 0s; }

.topbar { position: absolute; top: calc(var(--safe-t) + 14px); left: 16px; right: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; z-index: 6; transition: opacity 0.25s var(--ease); }
.wordmark { font-family: var(--serif); font-size: 22px; font-weight: 600; letter-spacing: 0.22em; display: flex; align-items: baseline; gap: 10px; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4); }

/* ---------- buttons ---------- */

.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px; border: 0; font-size: 15px; font-weight: 600; letter-spacing: 0.04em; text-decoration: none; transition: transform 0.18s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease), opacity 0.2s; white-space: nowrap; }
.btn .icon { width: 19px; height: 19px; }
.btn.big { height: 56px; font-size: 16px; }
.btn.wide { width: 100%; }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; pointer-events: none; }
.btn.primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 12px 34px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.btn.glass { background: rgba(255, 248, 238, 0.09); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.btn.text { background: transparent; color: var(--text-2); font-weight: 500; height: 44px; }
.btn.danger { background: transparent; color: var(--danger); box-shadow: inset 0 0 0 1px rgba(233, 139, 123, 0.35); height: 44px; margin-top: 16px; font-weight: 500; }
.btn.danger-text { color: var(--danger); font-size: 14px; padding: 0; margin-top: 10px; opacity: 0.85; }

.icon-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 0; background: transparent; color: var(--text); transition: transform 0.18s var(--ease), background 0.2s; flex: none; }
.icon-btn .icon { width: 21px; height: 21px; }
.icon-btn.small { width: 34px; height: 34px; }
.icon-btn.small .icon { width: 18px; height: 18px; }
.icon-btn.big { width: 64px; height: 64px; }
.icon-btn.big .icon { width: 26px; height: 26px; }
.icon-btn:active { transform: scale(0.92); }
.glassy { background: rgba(14, 12, 10, 0.42); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- start ---------- */

.start { overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 1.6s var(--ease); filter: brightness(0.78) saturate(0.92); }
.hero-img.on { opacity: 1; animation: kenburns 16s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.06) translate3d(0, 0, 0); } to { transform: scale(1.16) translate3d(-1.5%, -1.2%, 0); } }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 7, 6, 0.78) 0%, rgba(8, 7, 6, 0.2) 24%, rgba(8, 7, 6, 0.12) 42%, rgba(8, 7, 6, 0.84) 64%, var(--bg) 90%); }
.hero-body { position: absolute; left: 24px; right: 24px; bottom: calc(var(--safe-b) + 18px); z-index: 2; }
.overline { margin: 0; font-size: 12px; letter-spacing: 0.18em; color: var(--text-3); font-weight: 500; display: flex; align-items: center; gap: 8px; }
.display { font-family: var(--serif); font-weight: 600; font-size: 50px; line-height: 1.12; letter-spacing: 0.03em; margin: 0 0 14px; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45); animation: risein 0.9s var(--ease-out) both; }
.lede { margin: 0 0 28px; color: var(--text-2); font-size: 16px; letter-spacing: 0.06em; line-height: 1.7; animation: risein 0.9s var(--ease-out) 0.08s both; }
.start .cta { animation: risein 0.9s var(--ease-out) 0.16s both; }
.start .btn.primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.start .hero-foot { animation: risein 0.9s var(--ease-out) 0.4s both; }
@keyframes risein { from { opacity: 0; transform: translateY(14px); } }
/* The hero's sound label floats on the exhibit like a second museum label. */
.cta { display: grid; gap: 10px; }
.fine { margin: 14px 0 0; font-size: 12.5px; color: var(--text-3); display: flex; align-items: center; justify-content: center; gap: 6px; line-height: 1.6; text-align: center; }
.fine .icon { width: 15px; height: 15px; }
.hero-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; font-size: 12.5px; color: var(--text-3); letter-spacing: 0.08em; }
.hero-foot span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.hero-foot .icon { width: 15px; height: 15px; }
.hero-foot .dot { width: 6px; height: 6px; border-radius: 50%; background: #7bd389; box-shadow: 0 0 8px #7bd389; flex: none; }
.hero-foot .dot.off { background: #c9a24e; box-shadow: none; }

.sigil { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none; font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--sig); background: color-mix(in srgb, var(--sig) 16%, transparent); box-shadow: inset 0 0 0 1.2px color-mix(in srgb, var(--sig) 70%, transparent); transition: color 0.6s, background 0.6s, box-shadow 0.6s; }
@supports not (color: color-mix(in srgb, red 50%, blue)) { .sigil { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1.2px var(--sig); } }
.sigil-dot { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-family: var(--serif); font-size: 12px; font-weight: 600; color: var(--sig); box-shadow: inset 0 0 0 1px var(--sig); }

/* ---------- onboarding ---------- */

.onboard { display: flex; flex-direction: column; justify-content: center; overflow-y: auto; padding: calc(var(--safe-t) + 66px) 28px calc(var(--safe-b) + 28px); background: radial-gradient(120% 60% at 50% 0%, #1d1915 0%, var(--bg) 60%); }
.onboard-art { display: grid; place-items: center; margin-bottom: 30px; }
.phone { width: 150px; height: 236px; border-radius: 30px; padding: 7px; background: linear-gradient(160deg, #2b2621, #15120f); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), inset 0 0 0 1px var(--line-2); }
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 24px; overflow: hidden; background: radial-gradient(90% 70% at 50% 40%, #3a2f25, #14110e); }
.vase { position: absolute; left: 50%; top: 26%; width: 46px; height: 74px; margin-left: -23px; border-radius: 40% 40% 34% 34% / 26% 26% 60% 60%; background: linear-gradient(90deg, #4f6fb0, #9fc0f0 45%, #3f5f9e); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5); }
.vase::before { content: ""; position: absolute; left: 12px; right: 12px; top: -10px; height: 14px; border-radius: 4px 4px 2px 2px; background: #6f92d0; }
/* The gesture itself: a finger lands on the vase, the ring closes, notes follow. */
.demo-tap { position: absolute; left: 50%; top: 42%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.95); opacity: 0; animation: demotap 3.2s var(--ease-out) infinite; }
.demo-tap::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; }
@keyframes demotap { 0%, 16% { opacity: 0; transform: scale(1.7); } 26% { opacity: 1; transform: scale(1); } 52% { opacity: 1; transform: scale(0.88); } 66%, 100% { opacity: 0; transform: scale(2.4); } }
.demo-notes { position: absolute; left: 14px; right: 14px; bottom: 26px; height: 36px; }
.demo-notes i { position: absolute; height: 3px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 8px var(--accent); opacity: 0; animation: notefly 3.2s linear infinite; }
.demo-notes i:nth-child(1) { top: 6px; width: 22px; animation-delay: 1.9s; }
.demo-notes i:nth-child(2) { top: 18px; width: 14px; animation-delay: 2.15s; }
.demo-notes i:nth-child(3) { top: 10px; width: 26px; animation-delay: 2.4s; }
.demo-notes i:nth-child(4) { top: 26px; width: 12px; animation-delay: 2.6s; }
.demo-notes i:nth-child(5) { top: 2px; width: 18px; animation-delay: 2.85s; }
@keyframes notefly { 0% { right: 0; opacity: 0; } 4% { opacity: 1; } 30% { right: 70%; opacity: 0.2; } 31%, 100% { opacity: 0; right: 0; } }
.title-serif { font-family: var(--serif); font-size: 34px; line-height: 1.3; font-weight: 600; letter-spacing: 0.06em; text-align: center; margin: 0 0 34px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 0; background: rgba(255, 248, 238, 0.06); box-shadow: inset 0 0 0 1px var(--line-2); border-radius: 999px; padding: 8px 14px; font-size: 14px; color: var(--text-2); transition: all 0.2s var(--ease); }
.chip[aria-pressed="true"] { background: var(--accent-soft); color: var(--text); box-shadow: inset 0 0 0 1.4px var(--accent); }
.chip.static { padding: 4px 11px; font-size: 13px; cursor: default; }
.chips.small .chip { padding: 7px 13px; font-size: 13.5px; }
.onboard-cta { display: grid; gap: 6px; }
.privacy { margin-top: 18px; }

/* ---------- journey ---------- */

.journey { background: #000; }
.stage { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(90% 60% at 50% 38%, #2a231d, #0c0a09 75%); touch-action: manipulation; }
/* Three views share the stage: the live camera, the still you tapped (it stays
   with you when you lower the phone), and photos shown whole (tour, album). */
.stage .viewport { position: absolute; inset: 0; overflow: hidden; }
.stage video, .stage .still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.45s var(--ease); }
.stage video { transform-origin: 50% 50%; }
.stage[data-view="live"] video { opacity: 1; }
.stage[data-view="still"] .still { opacity: 1; }
.stage .still { transform-origin: var(--ax, 50%) var(--ay, 50%); }
.stage[data-view="still"] .still.drift { animation: drift 18s ease-out forwards; }
.stage.resting .still { transform-origin: 50% 50%; filter: brightness(0.82) saturate(0.95); transition: filter 1.6s var(--ease), opacity 0.45s var(--ease); }
.stage.resting .still.drift { animation: none; }
.stage.resting::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 60% at 50% 45%, transparent 40%, rgba(0, 0, 0, 0.55) 100%); }
/* The picture takes every finger: taps focus, two fingers zoom. */
#app.camera .stage { touch-action: none; background: #000; }
/* The camera's photo mode: the whole 4:3 frame between the top bar and the
   controls, on black, so what you see is the photo you take (digital zoom
   enlarges it inside the viewport), and the controls never cover it. */
#app.camera .stage .viewport, #app.camera .stage .still { top: calc(var(--safe-t) + 62px); bottom: var(--bottom-h, 220px); height: auto; }
#app.camera .stage video, #app.camera .stage .still { object-fit: contain; }
#app.camera .stage .scrim { opacity: 0; }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.07); } }
.stage .stage-bg { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(36px) brightness(0.58) saturate(1.3); transform: scale(1.05); opacity: 0; transition: opacity 0.9s var(--ease); }
.stage[data-view="photo"] .stage-bg.on { opacity: 1; }
/* Leaving is quicker than arriving; the new photo is loaded before it shows. */
.stage .stage-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.02); transition: opacity 0.35s cubic-bezier(0.4, 0, 1, 1), transform 0.35s cubic-bezier(0.4, 0, 1, 1); }
.stage[data-view="photo"] .stage-photo.on { opacity: 1; transform: scale(1); transition: opacity 0.7s var(--ease-out) 0.12s, transform 1.4s var(--ease-out) 0.12s; animation: drift 24s ease-out 1.4s forwards; transform-origin: 50% 40%; }
/* The new soundscape's colour spreads from where you tapped: the white focus
   ring opens out and becomes a ring of the soundscape's colour. */
.wash { position: absolute; left: var(--ax, 50%); top: var(--ay, 42%); width: 160px; height: 160px; margin: -80px 0 0 -80px; border-radius: 50%; pointer-events: none; opacity: 0; z-index: 2; box-shadow: 0 0 0 2px color-mix(in srgb, var(--sig) 85%, #fff), 0 0 46px 10px color-mix(in srgb, var(--sig) 55%, transparent), inset 0 0 46px 6px color-mix(in srgb, var(--sig) 42%, transparent); }
.wash.on { animation: ripple 1.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes ripple { 0% { opacity: 1; transform: scale(0.45); } 70% { opacity: 0.35; } 100% { opacity: 0; transform: scale(9); } }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.flash.on { animation: flash 0.42s ease-out; }
@keyframes flash { 0% { opacity: 0.32; } 100% { opacity: 0; } }
.scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(6, 5, 4, 0.62) 0%, rgba(6, 5, 4, 0) 17%, rgba(6, 5, 4, 0) 48%, rgba(6, 5, 4, 0.6) 70%, rgba(6, 5, 4, 0.94) 100%); }

/* The camera's own focus square: closes in where you tapped, flickers while
   it focuses, fades; a long press locks it (it stays, with its label). */
.focus-box { position: absolute; left: var(--tx, 50%); top: var(--ty, 45%); width: 78px; height: 78px; margin: -39px 0 0 -39px; z-index: 3; pointer-events: none; opacity: 0; border: 1px solid #ffd60a; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.3), inset 0 0 0 0.5px rgba(0, 0, 0, 0.2); }
.focus-box::before, .focus-box::after { content: ""; position: absolute; background: #ffd60a; }
.focus-box::before { left: 50%; top: 0; width: 1px; height: 7px; margin-left: -0.5px; box-shadow: 0 69px 0 #ffd60a; }
.focus-box::after { top: 50%; left: 0; width: 7px; height: 1px; margin-top: -0.5px; box-shadow: 69px 0 0 #ffd60a; }
.focus-box.on { animation: focusin 1.9s ease-out forwards; }
@keyframes focusin { 0% { opacity: 1; transform: scale(1.4); } 16% { opacity: 1; transform: scale(1); } 26% { opacity: 0.45; } 36% { opacity: 1; } 46% { opacity: 0.6; } 56%, 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } }
.focus-box.locked { opacity: 1; animation: focuslock 0.7s ease-out; }
@keyframes focuslock { 0% { transform: scale(1.4); } 35% { transform: scale(0.9); } 65% { transform: scale(1.05); } 100% { transform: scale(1); } }
.lock-pill { position: absolute; left: 50%; top: calc(var(--safe-t) + 66px); translate: -50% 0; z-index: 6; margin: 0; padding: 3px 9px; border-radius: 5px; background: #ffd60a; color: #1c1600; font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; pointer-events: none; }
.lock-pill[hidden] { display: none; }
/* The exposure sun beside the focus square: a thin line through a sun icon,
   dragged up or down (a 40 px wide target, the line only drawn). */
.sun { position: absolute; left: var(--sx, 50%); top: var(--sy, 45%); width: 40px; height: 132px; margin-top: -66px; z-index: 4; display: grid; place-items: center; touch-action: none; cursor: ns-resize; }
.sun[hidden] { display: none; }
.sun-line { position: absolute; left: 50%; top: 4px; bottom: 4px; width: 1px; background: rgba(255, 214, 10, 0.75); opacity: 0; transition: opacity 0.2s; }
.sun.dragging .sun-line { opacity: 1; }
.sun-icon { position: relative; display: grid; place-items: center; width: 26px; height: 26px; color: #ffd60a; filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5)); }
.sun-icon .icon { width: 24px; height: 24px; stroke-width: 1.8; }
.sun-value { position: absolute; bottom: -8px; left: 50%; translate: -50% 0; font-size: 11px; font-weight: 600; color: #ffd60a; font-variant-numeric: tabular-nums; text-shadow: 0 0 4px rgba(0, 0, 0, 0.7); white-space: nowrap; opacity: 0; transition: opacity 0.2s; }
.sun.dragging .sun-value { opacity: 1; }
/* The shutter blinks the picture dark for an instant, as a camera does; the
   photo then shrinks into the thumbnail at the bottom left. */
.flash.blink { background: #000; animation: blink 0.26s ease-out; }
@keyframes blink { 0% { opacity: 0; } 22% { opacity: 0.88; } 100% { opacity: 0; } }
.shot-fly { position: fixed; z-index: 30; object-fit: cover; pointer-events: none; transform-origin: 0 0; transition: transform 0.46s cubic-bezier(0.2, 0.8, 0.2, 1), border-radius 0.46s, opacity 0.46s; }

.journey-top { align-items: center; }
.tourbar { flex: 1; display: flex; align-items: center; height: 42px; padding: 0 8px; }
.segments { flex: 1; display: flex; gap: 4px; }
.segments i { position: relative; flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255, 255, 255, 0.2); overflow: hidden; }
.segments i b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: rgba(255, 255, 255, 0.92); }
.segments i.done b { width: 100%; }
.hint { position: absolute; left: 50%; top: 44%; width: max-content; max-width: calc(100% - 48px); margin: 0; padding: 7px 16px; border-radius: 999px; background: rgba(8, 7, 6, 0.42); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); text-align: center; font-size: 15px; letter-spacing: 0.08em; color: var(--text); translate: -50% 0; opacity: 0; transform: translateY(4px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); pointer-events: none; z-index: 2; }
.hint.on { opacity: 1; transform: none; }


.bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 0 20px calc(var(--safe-b) + 8px); display: flex; flex-direction: column; }
.ribbon { display: block; width: calc(100% + 40px); height: 64px; margin: 0 -20px 6px; }
/* The sound label sits on the picture itself, like a museum label: no card. */
.label { position: relative; display: flex; align-items: center; gap: 14px; min-height: 70px; }
.label-hit { position: absolute; inset: -8px 52px -8px -8px; border: 0; background: transparent; border-radius: 16px; z-index: 1; }
.label-thumb { display: none; }
.label-text { flex: 1; min-width: 0; }
.label-sub { margin: 0 0 5px; display: flex; align-items: center; gap: 8px; min-height: 22px; font-size: 13.5px; color: var(--text-2); letter-spacing: 0.06em; white-space: nowrap; }
.label-sub span:last-child { overflow: hidden; text-overflow: ellipsis; }
.label.idle .label-sub .sigil-dot, .label.busy .label-sub .sigil-dot { display: none; }
.label-title { font-family: var(--serif); font-size: 28px; line-height: 1.22; font-weight: 600; letter-spacing: 0.05em; margin: 0; min-height: 1.22em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.55); }
.label-title .ch { display: inline-block; animation: chin 0.8s var(--ease-out) both; }
@keyframes chin { from { opacity: 0; transform: translateY(0.3em); filter: blur(6px); } }
.label.leaving .label-text { animation: textout 0.22s cubic-bezier(0.4, 0, 1, 1) forwards; }
@keyframes textout { to { opacity: 0; transform: translateY(-6px); } }
/* While the exhibit is read: a quiet line of light where the title will be. */

.label-why { display: grid; place-items: center; color: var(--text-3); }
.label-why .icon { width: 18px; height: 18px; }
.label.idle .label-why, .label.busy .label-why, .label.idle .play-btn, .label.busy .play-btn { visibility: hidden; }
.play-btn { position: relative; z-index: 2; width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255, 248, 238, 0.1); color: var(--text); transition: transform 0.18s var(--ease), background 0.3s; }
.play-btn .icon { width: 18px; height: 18px; }
.play-btn:active { transform: scale(0.9); }
.label.reveal .sigil-dot { animation: sigilpop 0.9s var(--ease-out); }
@keyframes sigilpop { 0% { transform: scale(0.6); } 55% { transform: scale(1.2); } 100% { transform: scale(1); } }

.dock { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 12px 6px 0; }
/* As on the phone's camera: the last photo bottom left (it opens 原声带),
   the shutter in the middle, the photo library on the right. */
.dock-thumb { justify-self: center; position: relative; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 10px; overflow: visible; display: grid; place-items: center; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); color: var(--text-2); cursor: pointer; transition: transform 0.18s var(--ease); }
.dock-thumb img { border-radius: 10px; }
.dock-thumb.pop { animation: thumbpop 0.42s var(--ease-out); }
@keyframes thumbpop { 0% { transform: scale(0.72); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
/* How many pieces 原声带 holds, on the thumbnail's corner. */
.dock-count { position: absolute; top: -6px; right: -6px; z-index: 1; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #1d1a17; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85); color: #fff; font-size: 10.5px; font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.dock-count:empty { display: none; }
.dock-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.dock-thumb::after { content: ""; position: absolute; inset: 0; border-radius: 10px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85); opacity: 0; transition: opacity 0.3s; }
.dock-thumb.has img, .dock-thumb.has::after { display: block; opacity: 1; }
.dock-thumb.has .icon { display: none; }
.dock-thumb .icon { width: 22px; height: 22px; }
.dock-thumb:active, .dock-pick:active { transform: scale(0.92); }
.dock-pick { justify-self: center; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.14); color: var(--text); cursor: pointer; transition: transform 0.18s var(--ease); }
.dock-pick .icon { width: 23px; height: 23px; }
.zoom { align-self: center; display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); }
.zoom[hidden] { display: none; }
.zoom button { width: 40px; height: 40px; border: 0; border-radius: 50%; padding: 0; background: rgba(40, 37, 34, 0.85); color: #fff; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; transition: transform 0.2s var(--ease), color 0.2s; }
.zoom button.on { color: #ffd60a; transform: scale(1.15); }
.dock-btn { border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; letter-spacing: 0.06em; color: var(--text-3); padding: 6px 0; }
.dock-btn .icon { width: 24px; height: 24px; color: var(--text-2); }
.shutter { position: relative; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; box-shadow: inset 0 0 0 2.5px rgba(255, 255, 255, 0.9); }
.shutter-core { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); box-shadow: 0 0 28px var(--accent-glow); transition: transform 0.18s var(--ease), background 0.4s; }
.shutter:active .shutter-core { transform: scale(0.88); }
.shutter.busy .shutter-core { animation: breathe 1.4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(0.82); opacity: 0.75; } }
.shutter-next { display: none; color: var(--accent-ink); }
.shutter-next .icon { width: 25px; height: 25px; stroke-width: 2; }
#app.tour .shutter-next { display: block; }
#app.tour .shutter { visibility: hidden; pointer-events: none; }
/* With the in-page camera the shutter is the phone camera's: white. */
#app.camera .shutter { width: 80px; height: 80px; box-shadow: inset 0 0 0 4px #fff; }
#app.camera .shutter-core { width: 66px; height: 66px; background: #fff; box-shadow: none; transition: transform 0.12s var(--ease), background 0.12s; }
#app.camera .shutter:active .shutter-core, #app.camera .shutter.pressed .shutter-core { transform: scale(0.88); background: #dcdcdc; }
/* Before the first photo the space under the picture says what to do. */
#app.camera .label.idle .label-title:empty::before { content: "对准展品，按下快门"; font-family: var(--sans); font-size: 15px; font-weight: 400; letter-spacing: 0.14em; color: var(--text-3); }
#app.camera .label.idle { justify-content: center; text-align: center; }
#app.camera .label.idle .play-btn { display: none; }
.next-btn { display: none; }
#app.tour .label:not(.busy) .next-btn { display: inline-flex; }
.dock-btn { position: relative; }
.ribbon { transition: opacity 0.6s var(--ease); }
.ribbon.quiet { opacity: 0; }
.link { border: 0; background: transparent; color: var(--text-3); font-size: 13px; padding: 8px 2px; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.link .icon { width: 15px; height: 15px; }

/* ---------- sheets ---------- */

.sheet { position: absolute; inset: 0; z-index: 20; display: flex; align-items: flex-end; background: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fadein 0.3s var(--ease); }
.sheet[hidden] { display: none; }
.sheet.closing { animation: fadeout 0.28s var(--ease) forwards; }
.sheet.closing .sheet-card { animation: sheetdown 0.28s var(--ease) forwards; }
@keyframes fadein { from { opacity: 0; } }
@keyframes fadeout { to { opacity: 0; } }
.sheet-card { position: relative; width: 100%; max-height: 90%; overflow-y: auto; overscroll-behavior: contain; background: var(--surface-strong); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); border-radius: 28px 28px 0 0; padding: 12px 20px calc(var(--safe-b) + 26px); box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 var(--line-2); animation: sheetup 0.45s var(--ease-out); }
.sheet-card.tall { min-height: 62%; }
@keyframes sheetup { from { transform: translateY(100%); } }
@keyframes sheetdown { to { transform: translateY(100%); } }
.grabber { width: 38px; height: 5px; border-radius: 5px; background: var(--line-2); margin: 0 auto 10px; }
.sheet-close { position: absolute; top: 10px; right: 10px; color: var(--text-2); }
.sheet-title { font-family: var(--serif); font-size: 24px; font-weight: 600; letter-spacing: 0.06em; margin: 8px 0 4px; }
.sheet-sub { margin: 0 0 14px; font-size: 13.5px; color: var(--text-3); line-height: 1.6; }
.sheet-note { color: var(--text-3); font-size: 12.5px; line-height: 1.7; margin: 16px 0 0; }
.empty { color: var(--text-3); text-align: center; font-size: 14px; padding: 36px 10px; line-height: 1.8; }
.empty .btn { margin-top: 14px; }

/* story */
.story-head { display: flex; gap: 14px; align-items: center; margin: 4px 40px 6px 0; }
.story-thumb { width: 68px; height: 68px; border-radius: 16px; object-fit: cover; flex: none; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); }
.story-titles { min-width: 0; }
.story-titles .overline { color: var(--sig); }
.story-title { font-family: var(--serif); font-size: 26px; font-weight: 600; letter-spacing: 0.05em; margin: 6px 0 2px; }
.story-line { margin: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.6; }
.story-sec { padding: 18px 0 4px; border-top: 1px solid var(--line); margin-top: 16px; }
.story-sec h3 { margin: 0 0 12px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.2em; color: var(--text-3); display: flex; align-items: center; gap: 8px; }
.step-no { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; letter-spacing: 0; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.story-big { font-family: var(--serif); font-size: 21px; font-weight: 600; margin: 0 0 4px; letter-spacing: 0.03em; }
.story-sub { margin: 0 0 8px; color: var(--text-2); font-size: 13.5px; }
.story-note { margin: 10px 0 0; color: var(--text-3); font-size: 13px; line-height: 1.7; }
.story-note .icon { width: 15px; height: 15px; margin-right: 4px; color: var(--text-2); }
.story-sec .chips { margin-top: 10px; }
.choice { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: var(--r-m); background: color-mix(in srgb, var(--sig) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sig) 30%, transparent); }
.choice-sigil { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--sig); box-shadow: inset 0 0 0 1.4px var(--sig); flex: none; }
.choice b { display: block; font-family: var(--serif); font-size: 17px; letter-spacing: 0.06em; }
.choice > div > span { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 3px; line-height: 1.55; }
.choice b .suits { font-family: var(--sans); font-style: normal; font-size: 11.5px; font-weight: 500; letter-spacing: 0.08em; color: var(--sig); margin-left: 10px; padding: 2px 8px; border-radius: 99px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sig) 45%, transparent); vertical-align: 2px; }
.lore { margin: 12px 2px 4px; font-size: 13.5px; line-height: 1.85; color: var(--text-2); }
.ensemble li { position: relative; }
.ensemble li.mark { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sig) 55%, transparent); background: color-mix(in srgb, var(--sig) 8%, transparent); }
.ensemble li.mark::after { content: "标志声"; position: absolute; top: -8px; right: 8px; font-size: 10px; letter-spacing: 0.08em; padding: 1px 6px; border-radius: 99px; color: var(--bg); background: var(--sig); }
.bayin { font-style: normal; font-family: var(--serif); font-size: 11px; line-height: 1; padding: 3px 4px; margin-left: auto; border-radius: 4px; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.scape { display: grid; gap: 8px; margin: 0; }
.scape div { display: grid; grid-template-columns: 56px 1fr; align-items: baseline; gap: 10px; padding: 10px 12px; border-radius: var(--r-s); background: rgba(255, 248, 238, 0.04); box-shadow: inset 0 0 0 1px var(--line); }
.scape dt { font-size: 12px; color: var(--sig); letter-spacing: 0.1em; }
.scape dd { margin: 0; font-size: 14.5px; font-weight: 600; }
.scape dd small { display: block; font-size: 11.5px; font-weight: 400; color: var(--text-3); margin-top: 3px; }
.body-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; }
.body-note .chip { flex: none; margin-top: 1px; }
.body-note p { margin: 0; font-size: 13px; line-height: 1.75; color: var(--text-2); }
.body-note.trad .chip { color: var(--text-3); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 6px; }
.facts.three { grid-template-columns: repeat(3, 1fr); margin-top: 10px; }
.facts.three b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story-more { margin-top: 6px; }
.story-more summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 16px 2px 8px; font-size: 13.5px; letter-spacing: 0.16em; color: var(--text-2); }
.story-more summary::-webkit-details-marker { display: none; }
.story-more summary::after { content: "+"; font-size: 18px; color: var(--text-3); transition: transform 0.25s var(--ease); }
.story-more[open] summary::after { content: "−"; }
.story-more .scape { margin-top: 12px; }
.facts div { padding: 10px 12px; border-radius: var(--r-s); background: rgba(255, 248, 238, 0.04); box-shadow: inset 0 0 0 1px var(--line); }
.facts em { display: block; font-style: normal; font-size: 11.5px; color: var(--text-3); letter-spacing: 0.12em; }
.facts b { display: block; font-size: 16px; margin: 4px 0 2px; font-weight: 600; }
.facts span { display: block; font-size: 12px; color: var(--text-3); }
.meter { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 4px 10px; margin-top: 10px; }
.meter-label { font-size: 12.5px; color: var(--text-2); grid-row: span 2; }
.meter-track { height: 5px; border-radius: 5px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.meter-fill { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 40%, transparent), var(--accent)); }
.meter-ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); }
.meter-ends em { font-style: normal; }
.ensemble { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ensemble li { display: flex; align-items: baseline; gap: 8px; padding: 10px 12px; border-radius: var(--r-s); background: rgba(255, 248, 238, 0.04); box-shadow: inset 0 0 0 1px var(--line); }
.ensemble em { font-style: normal; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.ensemble b { font-size: 14.5px; font-weight: 600; }
.code-body { font-family: var(--mono); font-size: 12px; line-height: 1.8; overflow-x: auto; white-space: nowrap; padding: 10px 6px; border-radius: var(--r-s); background: rgba(0, 0, 0, 0.32); box-shadow: inset 0 0 0 1px var(--line); }
.ln { padding: 0 8px; border-radius: 6px; transition: background 0.35s ease, color 0.35s ease; }
.ln .c { color: #e9dcc7; }
.ln .n { color: #8a7f71; margin-left: 10px; font-family: var(--sans); }
.ln.title .c { color: #8a7f71; }
.ln.hot { background: var(--accent-soft); }
.ln.hot .c { color: #fff; }
.story-actions { display: grid; grid-template-columns: 1fr 56px; gap: 10px; margin-top: 22px; }
.story-actions .btn.glass { padding: 0; }

/* soundtrack */
.recap { margin: 10px 0 16px; padding: 16px; border-radius: var(--r-l); background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 16%, transparent), rgba(255, 248, 238, 0.03)); box-shadow: inset 0 0 0 1px var(--line); }
.recap-mosaic { display: flex; margin-bottom: 14px; }
.recap-mosaic img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--bg-2); margin-right: -10px; }
.recap-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.recap-stats div { text-align: left; }
.recap-stats b { display: block; font-family: var(--serif); font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.recap-stats span { font-size: 11.5px; color: var(--text-3); letter-spacing: 0.06em; }
.recap-line { margin: 12px 0 0; font-size: 13px; color: var(--text-2); line-height: 1.65; }
.recap-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 14px; }
.recap-actions .btn { height: 44px; padding: 0 8px; font-size: 13px; gap: 6px; }
.day { font-size: 12.5px; color: var(--text-3); letter-spacing: 0.12em; margin: 18px 2px 8px; }
.album-list { display: flex; flex-direction: column; }
.album-item { display: flex; gap: 12px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.album-thumb { position: relative; flex: none; }
.album-thumb img { width: 58px; height: 58px; border-radius: 14px; object-fit: cover; display: block; }
.album-thumb .sigil { position: absolute; right: -6px; bottom: -6px; width: 24px; height: 24px; font-size: 12px; background: var(--bg-2); }
.album-meta { flex: 1; min-width: 0; }
.album-meta b { display: block; font-family: var(--serif); font-weight: 600; font-size: 16px; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.album-meta small { display: block; color: var(--text-3); font-size: 12.5px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.album-item.playing .album-meta b { color: var(--accent); }
.album-btns { display: flex; gap: 2px; }
.album-btns .icon-btn { width: 38px; height: 38px; color: var(--text-2); }
.album-btns .icon-btn .icon { width: 19px; height: 19px; }


/* samples */
.sample-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.sample { position: relative; border: 0; padding: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 1; background: var(--bg-3); }
.sample img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--ease); }
.sample:active img { transform: scale(1.05); }
.sample span { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 7px; font-size: 12px; text-align: left; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.75)); }

/* menu + settings */
.settings { margin-top: 6px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.row select { background: var(--bg-3); border: 0; border-radius: 10px; padding: 8px 10px; max-width: 60%; box-shadow: inset 0 0 0 1px var(--line-2); }
.row input[type="range"] { width: 55%; accent-color: var(--accent); }
.row.switch { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; }
.row.switch span { grid-column: 1; grid-row: 2; font-size: 12.5px; color: var(--text-3); margin-top: 3px; }
.row.switch input { grid-column: 2; grid-row: 1 / span 2; appearance: none; -webkit-appearance: none; width: 46px; height: 28px; border-radius: 99px; background: rgba(255, 255, 255, 0.16); position: relative; transition: background 0.25s; margin: 0; }
.row.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform 0.25s var(--ease); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }
.row.switch input:checked { background: var(--accent); }
.row.switch input:checked::after { transform: translateX(18px); }
.credits { margin-top: 14px; font-size: 12.5px; color: var(--text-3); line-height: 1.7; }
.credits summary { cursor: pointer; color: var(--text-2); padding: 6px 0; }
.credits p { margin: 6px 0; }


/* theater (replay) */
.theater { position: absolute; inset: 0; z-index: 25; background: #000; animation: fadein 0.5s var(--ease); }
.theater[hidden] { display: none; }
.theater-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s var(--ease); }
.theater-img.on { opacity: 1; animation: kenburns 20s ease-in-out infinite alternate; }
.theater-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 5, 4, 0.6) 0%, transparent 20%, transparent 46%, rgba(6, 5, 4, 0.9) 82%); }
.theater-top { position: absolute; top: calc(var(--safe-t) + 14px); left: 18px; right: 16px; display: flex; justify-content: space-between; align-items: center; }
.theater-body { position: absolute; left: 22px; right: 22px; bottom: calc(var(--safe-b) + 26px); }
.theater-body .overline { color: var(--text-2); }
.theater-title { font-family: var(--serif); font-size: 36px; line-height: 1.2; font-weight: 600; letter-spacing: 0.05em; margin: 10px 0 6px; }
.theater-sub { margin: 0 0 6px; color: var(--text-2); font-size: 14px; }

/* fatigue nudge */
.nudge { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; margin-bottom: 8px; border-radius: 999px; font-size: 12.5px; color: var(--text-2); animation: toastin 0.4s var(--ease-out); }
.nudge span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn.small { height: 32px; padding: 0 14px; font-size: 12.5px; box-shadow: none; }

/* 歇一会儿 */
.rest-overlay { position: absolute; inset: 0; z-index: 28; display: flex; flex-direction: column; background: radial-gradient(120% 80% at 50% 45%, color-mix(in srgb, var(--sig) 14%, #0b0a09) 0%, #070605 70%); animation: fadein 0.8s var(--ease); overflow: hidden; }
.rest-bg { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(40px) brightness(0.32) saturate(1.1); opacity: 0.85; }
.rest-top { position: relative; display: flex; justify-content: space-between; align-items: center; padding: calc(var(--safe-t) + 16px) 16px 0 22px; }
.rest-title { font-family: var(--serif); font-size: 22px; font-weight: 600; letter-spacing: 0.2em; margin: 0; }
.rest-stages { position: relative; list-style: none; display: flex; justify-content: space-between; gap: 6px; margin: 18px 22px 0; padding: 0; }
.rest-stages li { flex: 1; display: flex; flex-direction: column; gap: 7px; font-size: 11.5px; color: var(--text-3); letter-spacing: 0.06em; }
.rest-stages li i { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); transition: background 0.6s; }
.rest-stages li.done i { background: color-mix(in srgb, var(--sig) 70%, transparent); }
.rest-stages li.now { color: var(--text); }
.rest-stages li.now i { background: var(--sig); box-shadow: 0 0 10px var(--sig); }
.rest-center { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 28px; }
.breath { position: relative; width: min(64vw, 240px); height: min(64vw, 240px); margin-bottom: 26px; transition: width 0.5s var(--ease), height 0.5s var(--ease), margin 0.5s var(--ease); }
.rest-overlay:has(.rest-why[open]) .breath { width: 128px; height: 128px; margin-bottom: 14px; }
.rest-overlay:has(.rest-why[open]) .breath-word { font-size: 22px; margin-bottom: 6px; }
.breath-core, .breath-halo { position: absolute; inset: 0; border-radius: 50%; will-change: transform; }
.breath-core { background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--sig) 75%, #fff) 0%, color-mix(in srgb, var(--sig) 55%, transparent) 46%, color-mix(in srgb, var(--sig) 12%, transparent) 72%); box-shadow: 0 0 60px color-mix(in srgb, var(--sig) 40%, transparent); transform: scale(0.6); }
.breath-halo { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sig) 60%, transparent); opacity: 0.3; }
.breath-word { font-family: var(--serif); font-size: 30px; font-weight: 600; letter-spacing: 0.3em; margin: 0 0 10px; text-indent: 0.3em; }
.rest-guide { margin: 0; font-size: 13.5px; color: var(--text-2); line-height: 1.6; }
.rest-time { margin: 14px 0 0; font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; letter-spacing: 0.1em; }
.rest-bottom { position: relative; padding: 0 20px calc(var(--safe-b) + 20px); }
.rest-why { margin-bottom: 12px; border-radius: var(--r-m); background: rgba(14, 12, 10, 0.5); box-shadow: inset 0 0 0 1px var(--line); max-height: 46vh; overflow-y: auto; }
.rest-why summary { cursor: pointer; padding: 13px 16px; font-size: 13.5px; color: var(--text-2); list-style: none; }
.rest-why summary::-webkit-details-marker { display: none; }
.rest-why summary::after { content: "＋"; float: right; color: var(--text-3); }
.rest-why[open] summary::after { content: "－"; }
.rest-why section { padding: 0 16px 12px; }
.rest-why b { display: block; font-size: 13.5px; margin-bottom: 4px; }
.rest-why p { margin: 0; font-size: 12.5px; line-height: 1.75; color: var(--text-2); }
.rest-why small { display: block; margin-top: 4px; font-size: 11px; color: var(--text-3); }
.rest-disclaimer { padding: 8px 0 4px; font-size: 11.5px !important; color: var(--text-3) !important; }

/* toast */
.toast { position: absolute; left: 50%; top: calc(var(--safe-t) + 70px); transform: translateX(-50%); z-index: 40; width: max-content; max-width: 86%; padding: 11px 18px; border-radius: 999px; font-size: 13.5px; line-height: 1.5; text-align: center; background: var(--surface-strong); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 1px var(--line-2); animation: toastin 0.35s var(--ease-out); }
.toast[hidden] { display: none; }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, -8px); } }
#app.tour .toast { top: calc(var(--safe-t) + 122px); }
#app[data-screen="start"] .toast, #app[data-screen="onboard"] .toast { top: auto; bottom: calc(var(--safe-b) + 40px); }

@media (max-height: 700px) {
  .display { font-size: 38px; margin: 8px 0 10px; }
  .lede { font-size: 14px; margin-bottom: 16px; }
      .ribbon { height: 56px; }
  .label-title { font-size: 22px; margin-top: 6px; }
  .shutter { width: 66px; height: 66px; }
  .shutter-core { width: 50px; height: 50px; }
  .sub-actions { display: none; }
  .phone { width: 120px; height: 190px; }
}

/* 省电模式 / old phones: no live blur (the costliest effect on weak GPUs). */
#app.lite .glassy, #app.lite #app.lite #app.lite .glassy { background: rgba(14, 12, 10, 0.72); }
#app.lite .hero-img.on, #app.lite .still.drift { animation: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .hero-img.on, .still.drift, .theater-img.on { animation: none; transform: none; }
}

/* Liner notes: weight and space instead of boxes. */
.facts-line { margin: 6px 0 0; font-size: 13.5px; color: var(--text-3); letter-spacing: 0.04em; }
.story-sec { border-top: 0; margin-top: 18px; padding-top: 0; }
.recap-line { margin: 0; font-size: 14px; color: var(--text-2); letter-spacing: 0.06em; }
.hero-foot span:nth-child(2) { color: var(--text-3); }

/* Sheets on the dark gallery: weight and space instead of outlines. */
.recap { background: none; box-shadow: none; padding: 0; margin: 6px 0 10px; }
.recap-actions .btn { background: transparent; box-shadow: none; padding: 0; height: 40px; color: var(--text-2); justify-content: flex-start; }
.scape div { background: none; box-shadow: none; padding: 4px 0; grid-template-columns: 64px 1fr; }
.body-note .chip { box-shadow: none; background: none; padding: 0; color: var(--sig); }
.credits summary { list-style: none; display: flex; justify-content: space-between; align-items: center; }
.credits summary::-webkit-details-marker { display: none; }
.credits summary::after { content: "+"; font-size: 18px; color: var(--text-3); transition: transform 0.25s var(--ease); }
.credits[open] summary::after { content: "−"; }
.rest-why { background: none; box-shadow: none; text-align: center; }
.rest-why summary { display: inline-block; font-size: 13px; color: var(--text-3); padding: 8px 0; }
.rest-why summary::after { content: "  +"; white-space: pre; }
.rest-why[open] summary::after { content: "  −"; }
.rest-why[open] { text-align: left; }
.breath-core { background-size: cover; background-position: center; }
.nb { white-space: nowrap; }
.lore .src { margin-left: 4px; font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.lore b { color: var(--text); font-weight: 600; }
button.album-meta { border: 0; background: transparent; color: inherit; font: inherit; text-align: left; padding: 0; cursor: pointer; }

/* One order everywhere: title, then the exhibit. */
.label-title { margin: 0 0 4px; }
.label-sub { margin: 0; }
/* While the music is written, the label says so where the title will be. */
.label.busy .label-title:empty::before { content: "正在为它写一首"; font-size: 22px; letter-spacing: 0.1em; color: rgba(245, 238, 228, 0.88); animation: writing 1.8s ease-in-out infinite; }
@keyframes writing { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
/* The playing screen keeps the exhibit, the words and the pause button. */
.bottom .ribbon, .theater .ribbon { display: none; }
.label { margin-bottom: 6px; }
.hint.low { top: auto; bottom: calc(var(--bottom-h, 220px) + 18px); }
.story-actions { grid-template-columns: 1fr; }
.story-actions .btn.primary, .btn.primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.recap-actions { grid-template-columns: repeat(2, max-content); gap: 28px; }
.rest-stages { visibility: hidden; height: 0; margin: 0; }
.desk-phone { margin-top: 28px; }

/* ---------- the melody of a piece ---------- */
/* Its 简谱 in one line: the signature of every piece, on the label, in the
   soundtrack and the replay. Each glyph is one slot of the motif; the one
   whose note is sounding lights up in the piece's colour. */

/* ---------- 换一种演奏 ---------- */
/* The same melody by another ensemble: one row of performances under the
   score; a block slides to the chosen one and the line of instruments
   below changes with it. */
.perform .sec-title { margin: 0 0 10px; font-size: 13px; letter-spacing: 0.14em; color: var(--text-3); }
.versions { position: relative; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin: 0 -24px 12px; padding: 0 24px; }
.versions::-webkit-scrollbar { display: none; }
.ver { position: relative; z-index: 1; flex: none; border: 0; background: transparent; padding: 9px 15px; border-radius: 999px; font-size: 14.5px; letter-spacing: 0.04em; color: var(--text-2); transition: color 0.25s var(--ease), transform 0.15s var(--ease); }
.ver[aria-checked="true"] { color: var(--text); }
.ver:active { transform: scale(0.96); }
.ver-ind { position: absolute; z-index: 0; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: color-mix(in srgb, var(--sig) 20%, transparent); box-shadow: inset 0 0 0 1.2px color-mix(in srgb, var(--sig) 70%, transparent); transition: transform 0.42s var(--ease-out), width 0.42s var(--ease-out); pointer-events: none; }

/* ---------- menu ---------- */
/* A quiet list: what each thing does, in a line, under its name. */
.menu { margin: 20px 0 0; }
.menu.quiet { margin-top: 10px; border-top: 1px solid var(--line); }
.menu-row { position: relative; width: 100%; border: 0; background: transparent; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; column-gap: 16px; padding: 14px 2px; text-align: left; color: var(--text); cursor: pointer; border-radius: 14px; transition: background 0.2s var(--ease), transform 0.15s var(--ease); }
.menu-row:active { background: rgba(255, 248, 238, 0.05); transform: scale(0.99); }
.menu-row .icon { width: 22px; height: 22px; color: var(--accent); justify-self: center; }
.menu-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.menu-text b { font-size: 15.5px; font-weight: 500; letter-spacing: 0.04em; }
.menu-text small { font-size: 12.5px; color: var(--text-3); letter-spacing: 0.02em; }
.menu-row.switch input { appearance: none; -webkit-appearance: none; width: 46px; height: 28px; border-radius: 99px; background: rgba(255, 255, 255, 0.16); position: relative; transition: background 0.25s; margin: 0; }
.menu-row.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform 0.25s var(--ease); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }
.menu-row.switch input:checked { background: var(--accent); }
.menu-row.switch input:checked::after { transform: translateX(18px); }
#sheet-settings .credits { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
#sheet-settings .credits summary { font-size: 15.5px; color: var(--text); letter-spacing: 0.04em; padding: 4px 2px; }
#sheet-settings .danger-text { margin-top: 18px; font-size: 13px; opacity: 0.8; }
@media (prefers-reduced-motion: reduce) {
  .ver-ind { transition: none; }
}

/* ---------- 分享这首 ---------- */
/* The card is there at once; a long press saves it in WeChat. */
.share-card { position: relative; width: min(100%, 300px); aspect-ratio: 3 / 4; margin: 16px auto 0; border-radius: 18px; overflow: hidden; background: radial-gradient(120% 80% at 50% 30%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), var(--bg-3); box-shadow: 0 26px 64px rgba(0, 0, 0, 0.55), inset 0 0 0 1px var(--line); }
.share-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 248, 238, 0.06) 50%, transparent 70%); background-size: 220% 100%; animation: sheen 1.4s linear infinite; pointer-events: none; }
.share-card:has(img.on)::after { display: none; }
@keyframes sheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.share-card img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(0.985); transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out); -webkit-touch-callout: default; user-select: auto; -webkit-user-select: auto; }
.share-card img.on { opacity: 1; transform: none; }
.share-hint { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--text-3); letter-spacing: 0.06em; }
.share-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.share-actions:has(.btn[hidden]) { grid-template-columns: 1fr; }
.share-actions .btn { height: 48px; gap: 8px; }

/* ---------- a piece a friend shared ---------- */
.shared { overflow: hidden; }
.shared-glow { position: absolute; inset: 0; background: radial-gradient(110% 64% at 50% 26%, color-mix(in srgb, var(--sig) 36%, transparent), transparent 64%); transition: opacity 1.2s var(--ease); }
.shared .hero-img.on ~ .shared-glow { opacity: 0.3; }
.shared-body > * { animation: risein 0.9s var(--ease-out) both; }
.shared-body > :nth-child(2) { animation-delay: 0.08s; }
.shared-body > :nth-child(3) { animation-delay: 0.16s; }
.shared-body > :nth-child(4) { animation-delay: 0.24s; }
.shared-body > :nth-child(5) { animation-delay: 0.32s; }
.shared-for { margin: 0 0 14px; font-size: 13.5px; letter-spacing: 0.14em; color: var(--sig); }
.shared-title { margin: 0; }
.shared-title .ch { display: inline-block; animation: chin 0.8s var(--ease-out) both; }
.shared-line { margin: 14px 0 0; }
.motif-line.shared-motif { margin: 6px 0 26px; font-size: 19px; color: var(--text-2); }
.shared .cta { display: grid; gap: 8px; }
#btn-shared-play { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
#btn-shared-play .icon { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) {
  .shared-body > *, .share-card::after { animation: none; }
}

/* ---------- 简谱 ---------- */
/* One notation everywhere, sized by --jn: the underline sits right under the
   digits in their own colour, low octave dots go below it, beats are set
   apart by space alone (no bar line inside the one-bar motif). */
.jianpu { --jn: 26px; display: flex; flex-wrap: wrap; align-items: flex-end; --jgap: calc(var(--jn) * 0.62); gap: 4px var(--jgap); padding: 6px 2px calc(var(--jn) * 0.42); color: var(--text); font-family: var(--serif); line-height: 1; }
.jb { display: inline-flex; align-items: flex-end; gap: calc(var(--jn) * 0.3); padding-bottom: 2px; border-bottom: 1.5px solid currentColor; }
.jb.plain { border-bottom-color: transparent; }
.js { display: inline-flex; align-items: flex-end; }
.js.split { gap: calc(var(--jn) * 0.1); padding-bottom: 2px; border-bottom: 1.5px solid currentColor; margin-bottom: -3.5px; }
.jaug { align-self: flex-end; margin: 0 calc(var(--jn) * -0.18) calc(var(--jn) * 0.18) calc(var(--jn) * -0.38); font-size: calc(var(--jn) * 0.9); line-height: 1; }
.jn { position: relative; display: inline-flex; flex-direction: column; align-items: center; min-width: calc(var(--jn) * 0.62); line-height: 1; transform: translateY(var(--dy, 0)); transition: color 0.2s var(--ease), transform 0.2s var(--ease), text-shadow 0.2s var(--ease); }
.jn b { font-size: var(--jn); font-weight: 600; font-variant-numeric: tabular-nums; }
.jn.s b { font-size: var(--jn); }
.jn.hold b, .jn.rest b { opacity: 0.5; font-weight: 500; }
.jn i { display: block; font-style: normal; font-size: calc(var(--jn) * 0.62); line-height: calc(var(--jn) * 0.3); height: calc(var(--jn) * 0.3); letter-spacing: -2px; text-align: center; }
.jn i:last-child { position: absolute; left: 0; right: 0; top: calc(100% + 5px); height: auto; }

/* The signature line: the same notation, smaller, notes lifted by pitch. */
.motif-line { margin: 0; }
.jianpu.sig { --jn: 19px; display: inline-flex; flex-wrap: nowrap; padding: 4px 0 calc(var(--jn) * 0.42); --jgap: calc(var(--jn) * 0.55); gap: 0 var(--jgap); color: rgba(245, 238, 228, 0.6); }
.jianpu .mg.on .jn { color: var(--sig, var(--accent)); text-shadow: 0 0 18px color-mix(in srgb, var(--sig, var(--accent)) 80%, transparent); transform: scale(1.16); }
.jianpu .write { animation: jpwrite 0.55s var(--ease-out) backwards; }
@keyframes jpwrite { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } }
.label-motif { min-height: 36px; margin-top: 2px; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6); }
.label.idle .label-motif { visibility: hidden; }
.album-meta .jianpu.sig { --jn: 13px; margin-top: 4px; color: var(--text-3); }
.album-item.playing .album-meta .jianpu.sig { color: var(--accent); }
.theater-motif { margin-top: 8px; }
.theater-motif .jianpu.sig { --jn: 18px; }
.shared-motif .jianpu.sig { --jn: 22px; color: rgba(245, 238, 228, 0.6); }

/* While the piece is written: dots breathing where its melody will be. */
.writing-dots { display: inline-flex; align-items: center; gap: 11px; height: 30px; color: rgba(245, 238, 228, 0.75); }
.writing-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.2; animation: wdot 1.2s ease-in-out infinite; }
.writing-dots i:nth-child(2) { animation-delay: 0.1s; }
.writing-dots i:nth-child(3) { animation-delay: 0.2s; }
.writing-dots i:nth-child(4) { animation-delay: 0.3s; }
.writing-dots i:nth-child(5) { animation-delay: 0.4s; }
.writing-dots i:nth-child(6) { animation-delay: 0.5s; }
.writing-dots i:nth-child(7) { animation-delay: 0.6s; }
.writing-dots i:nth-child(8) { animation-delay: 0.7s; }
@keyframes wdot { 0%, 100% { opacity: 0.2; transform: none; } 40% { opacity: 0.95; transform: translateY(-3px); } }

/* 换一种演奏: only what changed comes in, and lights up once; the line keeps
   two lines of room so the panel never jumps. */

@keyframes enchange { from { opacity: 0; transform: translateY(5px); } }
@keyframes enflash { 0%, 45% { color: var(--sig); } }
.ver i { font-style: normal; font-size: 12px; color: var(--text-2); margin-left: 5px; letter-spacing: 0.04em; }

/* Review fixes: one accent per screen, quiet menu icons, the soundtrack on the
   same vertical as the next button, no fake drag handles. */
.menu-row .icon { color: var(--text-2); }
#sheet-settings .danger-text { color: var(--text-3); opacity: 1; }
.grabber { display: none; }
@media (prefers-reduced-motion: reduce) {
  .jianpu .write, .writing-dots i, .label.reveal .play-btn, .label.reveal .label-perform { animation: none; }
}

/* Who plays the melody, and the door to another performance (above the
   label's tap area, so it opens the notes at 换一种演奏). */
.label-perform { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; margin: 2px 0 0; padding: 4px 0; border: 0; background: transparent; font-size: 13px; letter-spacing: 0.05em; color: rgba(245, 238, 228, 0.72); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }
.label-perform span { color: rgba(245, 238, 228, 0.92); }
.label-perform:empty, .label.idle .label-perform, .label.busy .label-perform { display: none; }

/* The tour says what it is: a sample walk, and the next exhibit. */
.next-btn { width: auto; padding: 0 12px 0 15px; gap: 2px; border-radius: 22px; align-items: center; font-size: 13.5px; letter-spacing: 0.04em; }
.next-btn .icon { width: 17px; height: 17px; }

/* In WeChat the long press is the way, said first and plainly. */
.share-hint.lead { margin-top: 16px; font-size: 15px; color: rgba(245, 238, 228, 0.82); }
.share-actions .btn.text { height: 40px; color: var(--text-2); }
.share-link-icon { display: inline-flex; }
.share-link-icon .icon { width: 18px; height: 18px; }

/* 换一种演奏: the chosen instrument is outlined until it really comes in on
   the next bar, then the block fills. */
.ver.pending { color: var(--text); }
.versions.waiting .ver-ind { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sig) 85%, transparent); animation: verwait var(--beat, 0.8s) ease-in-out infinite; }
@keyframes verwait { 50% { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sig) 25%, transparent); } }
/* Who plays: the melody's instrument always in the accent. */
/* The words under the photo need a darker floor than the picture gives. */
.journey .scrim { background: linear-gradient(180deg, rgba(8, 7, 6, 0.5) 0%, rgba(8, 7, 6, 0) 18%, rgba(8, 7, 6, 0) 46%, rgba(8, 7, 6, 0.72) 70%, rgba(8, 7, 6, 0.94) 100%); }
.recap-actions .btn .icon { margin-left: -5px; }
.album-btns { margin-right: -6px; }

/* Third review: ties, the waiting chip, quieter chrome, one set of playback controls. */
.jg { display: inline-flex; align-items: flex-end; gap: calc(var(--jn) * 0.3); }
.js.tie { position: relative; }
.js.tie::before { content: ""; position: absolute; right: 50%; top: calc(var(--jn) * 0.02); width: calc(var(--jn) * 0.62 + var(--jgap)); height: calc(var(--jn) * 0.3); border: 1.5px solid currentColor; border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; opacity: 0.7; pointer-events: none; }
.js.tie.near::before { width: calc(var(--jn) * 0.92); }
.lore-src { margin: 10px 2px 4px; font-size: 11.5px; line-height: 1.6; color: var(--text-3); }
#app.sheet-open .topbar { opacity: 0; pointer-events: none; }
.label.reveal .play-btn, .label.reveal .label-perform { animation: ctlin 0.5s var(--ease-out) 0.55s backwards; }
@keyframes ctlin { from { opacity: 0; transform: translateY(4px); } }
.cta-more { display: flex; justify-content: center; gap: 26px; }
.btn.album-clear { display: block; margin: 26px auto 6px; font-size: 13px; color: var(--text-3); }
.recap-actions .btn.primary { background: transparent; box-shadow: none; color: var(--accent); }
.theater-top { justify-content: flex-end; }
.theater-body { display: flex; align-items: center; gap: 14px; }
.theater-text { flex: 1; min-width: 0; }
.theater .next-btn { display: inline-flex; }