@import url("./conversation-composer.css?v=20261009-composer-1");
:root {
  color-scheme: light;
  --paper: #eef1f6;
  --paper-strong: #fbfcfe;
  --ink: #0b0d12;
  --ink-2: #464c57;
  --ink-3: #7f8794;
  --line: rgba(11, 13, 18, .16);
  --plum: #4b193d;
  --magenta: #bd2d72;
  --lilac: #b79cff;
  --sky: #86ccdf;
  --mint: #96ddc7;
  --teal: #2a9c97;
  --danger: #9f2d3c;
  --ok: #24705d;
  --glass: rgba(255, 255, 255, .66);
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Hoefler Text", Georgia, "Times New Roman", serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
img { max-width: 100%; }

.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; transform: translateY(-150%); padding: 10px 14px; background: var(--ink); color: white; }
.skip-link:focus { transform: none; }

.aurora { position: fixed; z-index: -2; inset: 0; overflow: hidden; pointer-events: none; }
.aurora::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 10%, rgba(255,255,255,.9), transparent 38%), radial-gradient(circle at 84% 72%, rgba(255,255,255,.65), transparent 34%); }
.aurora i { position: absolute; width: 38vw; height: 38vw; border: 1px solid rgba(11,13,18,.07); border-radius: 50%; opacity: .42; animation: breathe 14s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { left: -21vw; top: -20vw; }
.aurora i:nth-child(2) { right: -24vw; top: 22vh; animation-delay: -3s; }
.aurora i:nth-child(3) { left: 37vw; bottom: -34vw; animation-delay: -7s; }

.masthead { position: fixed; z-index: 40; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding: 12px clamp(16px, 6vw, 88px); border-bottom: 1px solid rgba(11,13,18,.1); background: rgba(238,241,246,.7); backdrop-filter: blur(22px) saturate(1.08); }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand img { width: 118px; height: auto; }
.brand span { padding-left: 11px; border-left: 1px solid var(--line); font: 600 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.topnav { display: flex; align-items: center; gap: 8px; }
.topnav > a, .wallet-button, .profile-button { min-height: 38px; border: 1px solid transparent; background: transparent; text-decoration: none; font-size: 12px; cursor: pointer; }
.topnav > a { display: flex; align-items: center; gap: 8px; padding: 0 10px; }
.topnav > a span { display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border: 1px solid var(--line); border-radius: 50%; font: 10px/1 var(--mono); }
.wallet-button { display: flex; align-items: center; gap: 12px; padding: 0 12px; border-color: var(--line); border-radius: 4px; background: rgba(255,255,255,.44); }
.wallet-button span { display: flex; gap: 5px; }
.wallet-button b { font-weight: 500; color: var(--ink-3); }
.wallet-button output { font-family: var(--mono); }
.profile-button { display: flex; align-items: center; gap: 8px; padding: 0 4px 0 10px; }
.presence-dot { width: 7px; height: 7px; border: 1px solid var(--ink-3); border-radius: 50%; background: transparent; }
.profile-button[data-authenticated="true"] .presence-dot { border-color: var(--ok); background: var(--ok); }

#app { min-height: 100vh; padding-top: 72px; }
.boot { display: grid; min-height: calc(100vh - 126px); place-content: center; text-align: center; }
.boot h1 { margin: 6px 0; font-size: clamp(42px, 8vw, 110px); font-weight: 300; letter-spacing: -.06em; }
.eyebrow { margin: 0; color: var(--ink-3); font: 600 10px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; }

.entrance { position: relative; display: grid; min-height: calc(100dvh - 126px); grid-template-rows: minmax(220px, 38vh) 1fr; }
.entrance-copy { display: grid; align-content: end; justify-items: center; padding: clamp(36px, 7vh, 82px) 20px 28px; text-align: center; }
.entrance-copy h1 { max-width: 950px; margin: 10px 0 13px; font-size: clamp(44px, 8vw, 108px); font-weight: 300; line-height: .88; letter-spacing: -.068em; }
.entrance-copy p:last-child { max-width: 600px; margin: 0; color: var(--ink-2); font-size: clamp(14px, 1.4vw, 18px); line-height: 1.5; }
.door-wall { display: grid; grid-template-columns: repeat(4, 1fr); min-height: 310px; padding: 0 clamp(10px, 2vw, 26px) 26px; perspective: 1200px; }
.door { --mx: 0; --my: 0; position: relative; isolation: isolate; display: grid; grid-template-rows: 1fr auto; min-width: 0; overflow: hidden; padding: 24px clamp(16px, 2vw, 30px); border: 1px solid rgba(21,18,24,.22); border-right: 0; background: rgba(255,255,255,.34); text-decoration: none; transform: rotateY(calc(var(--mx) * 1.5deg)) rotateX(calc(var(--my) * -1.2deg)); transition: background 120ms ease, color 120ms ease, transform 120ms ease; }
.door:first-child { border-radius: 18px 0 0 18px; }
.door:last-child { border-right: 1px solid rgba(21,18,24,.22); border-radius: 0 18px 18px 0; }
.door::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: 0; background: radial-gradient(circle at calc(50% + var(--mx) * 18%) calc(42% + var(--my) * 18%), rgba(255,255,255,.9), rgba(183,156,255,.25) 30%, rgba(75,25,61,.93) 70%); transition: opacity 120ms ease; }
.door::after { content: ""; position: absolute; z-index: -1; left: 12%; right: 12%; bottom: 16%; height: 18px; border-radius: 50%; background: rgba(21,18,24,.22); filter: blur(10px); transform: scaleX(.6); transition: transform 120ms ease; }
.door:hover, .door:focus-visible { color: white; background: var(--plum); outline: none; transform: translateY(-7px) rotateY(calc(var(--mx) * 1.5deg)) rotateX(calc(var(--my) * -1.2deg)); }
.door:hover::before, .door:focus-visible::before { opacity: 1; }
.door:hover::after, .door:focus-visible::after { transform: scaleX(.95); }
.door-number { align-self: start; font: 11px/1 var(--mono); letter-spacing: .14em; }
.door-copy { align-self: end; }
.door h2 { max-width: 9ch; margin: 0 0 10px; font-size: clamp(27px, 3.2vw, 54px); font-weight: 350; line-height: .94; letter-spacing: -.05em; }
.door p { max-width: 28ch; min-height: 3.9em; margin: 0; color: currentColor; font-size: 13px; line-height: 1.45; opacity: .72; }
.door-action { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; font: 600 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.door-action::after { content: "→"; font-size: 18px; transition: transform 120ms ease; }
.door:hover .door-action::after { transform: translateX(5px); }

.studio { display: grid; min-height: calc(100dvh - 126px); grid-template-columns: minmax(0, 1fr) minmax(330px, 430px); }
.cyc { position: sticky; top: 72px; display: grid; min-height: calc(100dvh - 126px); overflow: hidden; place-items: center; background: radial-gradient(ellipse at 50% 80%, rgba(11,13,18,.12), transparent 27%), linear-gradient(135deg, rgba(255,255,255,.84), rgba(229,234,241,.64)); }
.cyc::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 18%, rgba(255,255,255,.94), transparent 48%), linear-gradient(90deg, rgba(255,255,255,.5), transparent 28%, transparent 72%, rgba(255,255,255,.45)); pointer-events: none; }
.cyc::after { content: ""; position: absolute; inset: 16px; border: 1px solid rgba(11,13,18,.08); border-radius: 46% 54% 49% 51% / 58% 42% 58% 42%; transform: rotate(-1deg); pointer-events: none; }
.music-staff { position: absolute; z-index: 0; top: 31%; left: 0; right: 0; display: grid; gap: 28px; opacity: .1; pointer-events: none; }
.music-staff i { display: block; height: 1px; background: var(--ink); }
.ink-flourish { position: absolute; z-index: 0; top: 12%; width: min(19vw, 220px); height: 70%; fill: none; stroke: rgba(11,13,18,.18); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 8 10; animation: ink-drift 12s ease-in-out infinite alternate; pointer-events: none; }
.ink-flourish-left { left: -4%; }
.ink-flourish-right { right: -4%; animation-delay: -5s; }
.ink-motes { position: absolute; inset: 0; pointer-events: none; }
.ink-motes i { --angle: calc(var(--i) * 30deg); position: absolute; left: 50%; top: 49%; width: 3px; height: 3px; border-radius: 50%; background: var(--ink); opacity: .18; transform: rotate(var(--angle)) translateX(calc(160px + var(--i) * 8px)); animation: mote-float calc(7s + var(--i) * .37s) ease-in-out infinite alternate; }
.stage-number { position: absolute; top: 22px; left: 26px; color: var(--ink-3); font: 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.stage-body { position: relative; z-index: 1; display: grid; place-items: center; width: 100%; height: 76%; }
.ink-summon { --idea: 0; display: grid; width: min(36vw, 350px); place-items: center; color: var(--ink-3); text-align: center; }
.ink-summon svg { width: min(100%, 310px); overflow: visible; filter: drop-shadow(0 22px 18px rgba(11,13,18,.08)); }
.ink-summon path { fill: rgba(255,255,255,calc(.14 + var(--idea) * .38)); stroke: rgba(11,13,18,calc(.24 + var(--idea) * .64)); stroke-width: calc(1.2px + var(--idea) * .8px); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill .45s ease, stroke .45s ease, stroke-width .45s ease; }
.summon-orbit { fill: none !important; stroke-dasharray: 5 12; transform-origin: center; animation: orbit-ink 22s linear infinite; }
.summon-face { fill: none !important; stroke-dasharray: 80; stroke-dashoffset: calc(80 - var(--idea) * 80); }
.summon-wing { fill: rgba(255,255,255,.12) !important; transform-origin: center; }
.ink-summon.is-listening .summon-egg { animation: egg-breathe 2.4s ease-in-out infinite; }
.ink-summon.is-listening .summon-wing-left { animation: wing-left 1.8s ease-in-out infinite; }
.ink-summon.is-listening .summon-wing-right { animation: wing-right 1.8s ease-in-out infinite; }
.ink-summon.is-knocked svg { animation: egg-knock .58s cubic-bezier(.2,.8,.2,1); }
.ink-summon.is-hatching { color: var(--plum); }
.ink-summon.is-hatching .summon-orbit { animation: orbit-ink 1.8s linear infinite; stroke: var(--magenta); }
.ink-summon.is-hatching .summon-egg { fill: rgba(255,255,255,.86) !important; stroke: var(--plum); animation: first-look-hatch .9s cubic-bezier(.3,.8,.2,1) infinite; }
.ink-summon.is-hatching .summon-wing-left { animation: wing-left .48s ease-in-out infinite; }
.ink-summon.is-hatching .summon-wing-right { animation: wing-right .48s ease-in-out infinite; }
.ink-summon.is-hatching > span { color: var(--plum); font-weight: 700; }
.ink-summon:focus-visible { outline: 1px dashed var(--ink); outline-offset: 12px; border-radius: 48%; }
.ink-summon > span { max-width: 25ch; margin-top: -12px; font: 10px/1.55 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.concept-image { width: auto; height: min(68vh, 680px); object-fit: contain; filter: drop-shadow(0 22px 18px rgba(30,20,30,.2)); animation: enter-stage 620ms cubic-bezier(.2,.8,.2,1) both; }
.model-stage { position: relative; display: grid; width: 100%; height: 100%; min-height: 420px; place-items: center; isolation: isolate; }
.model-stage::before { content: ""; position: absolute; z-index: -1; inset: 13% 12%; border: 1px solid rgba(11,13,18,.08); border-radius: 49% 51% 45% 55% / 58% 43% 57% 42%; opacity: 0; transform: scale(.88) rotate(-2deg); transition: opacity .5s ease, transform 1.1s cubic-bezier(.2,.8,.2,1); }
.model-stage[data-render-state="loading"]::before { opacity: .7; transform: scale(1) rotate(1deg); animation: model-ink-breathe 2.8s ease-in-out infinite alternate; }
.model-fallback, #three-stage { position: absolute; inset: 0; margin: auto; transition: opacity .55s ease, filter .55s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.model-fallback { z-index: 1; max-width: min(82%, 720px); opacity: .92; filter: grayscale(.12) contrast(.96) drop-shadow(0 22px 18px rgba(30,20,30,.2)); }
.model-stage[data-render-state="loading"] .model-fallback { animation: model-picture-breathe 2.6s ease-in-out infinite alternate; }
.model-stage[data-render-state="ready"] .model-fallback { opacity: 0; filter: blur(8px) grayscale(.25); transform: scale(.96); pointer-events: none; }
#three-stage { z-index: 2; width: 100%; height: 100%; min-height: 420px; opacity: 0; cursor: grab; touch-action: none; }
.model-stage[data-render-state="ready"] #three-stage { opacity: 1; }
#three-stage:active { cursor: grabbing; }
.model-arrival { position: absolute; z-index: 4; bottom: 7%; left: 50%; display: grid; width: min(440px, calc(100% - 36px)); gap: 5px; padding: 15px 18px; border: 1px solid rgba(11,13,18,.16); background: rgba(250,251,253,.78); box-shadow: 0 18px 60px rgba(23,20,28,.1), inset 0 0 0 1px rgba(255,255,255,.65); backdrop-filter: blur(18px) saturate(1.04); text-align: center; transform: translateX(-50%); }
.model-arrival[hidden] { display: none; }
.model-arrival strong { font-family: var(--serif); font-size: 19px; font-weight: 400; }
.model-arrival span { color: var(--ink-3); font: 10px/1.5 var(--mono); letter-spacing: .04em; }
.model-arrival .quiet-button { justify-self: center; margin-top: 7px; background: rgba(255,255,255,.7); }
.model-stage[data-render-state="loading"] .model-arrival::before { content: ""; justify-self: center; width: 42px; height: 3px; margin-bottom: 3px; background: repeating-linear-gradient(90deg, var(--plum) 0 8px, var(--magenta) 8px 12px, transparent 12px 15px); background-size: 30px 100%; animation: model-arrival-line .9s linear infinite; }
.model-stage[data-render-state="error"] .model-arrival { border-color: rgba(189,45,114,.35); }
.hatch-ceremony { position: absolute; z-index: 12; inset: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle, rgba(255,255,255,.94) 0 18%, rgba(238,241,246,.88) 42%, rgba(238,241,246,.2) 72%, transparent); pointer-events: none; animation: ceremony-leave 4.3s ease both; }
.hatch-egg { width: min(42vw, 370px); overflow: visible; filter: drop-shadow(0 28px 30px rgba(11,13,18,.15)); }
.hatch-egg path { fill: #f8f9fb; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hatch-egg .shell-top { transform-origin: 150px 232px; animation: shell-top 4.3s cubic-bezier(.2,.85,.25,1) both; }
.hatch-egg .shell-bottom { transform-origin: 150px 280px; animation: shell-bottom 4.3s cubic-bezier(.2,.85,.25,1) both; }
.hatch-egg .crack { fill: none; stroke-dasharray: 100; animation: crack-draw 4.3s ease both; }
.hatch-yay { position: absolute; top: 18%; font-family: var(--serif); font-size: clamp(52px, 9vw, 110px); font-style: italic; letter-spacing: -.05em; transform: rotate(-7deg); opacity: 0; animation: yay-pop 4.3s cubic-bezier(.2,.9,.2,1) both; }
.hatch-caption { position: absolute; bottom: 13%; font: 600 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; opacity: 0; animation: caption-pop 4.3s ease both; }
.hatch-sparks { position: absolute; inset: 0; }
.hatch-sparks i { --angle: calc(var(--i) * 24deg); position: absolute; left: 50%; top: 51%; width: 7px; height: 7px; border: 1px solid var(--ink); border-radius: 50%; opacity: 0; animation: spark-burst 4.3s cubic-bezier(.15,.7,.2,1) both; animation-delay: calc(var(--i) * 13ms); }
.stage-body.hatch-jump { animation: character-hatch 2.7s .9s cubic-bezier(.16,.82,.24,1) both; }
.stage-slate { position: absolute; z-index: 2; right: 24px; bottom: 22px; max-width: min(360px, calc(100% - 48px)); padding: 13px 15px; border: 1px solid var(--line); background: rgba(255,255,255,.68); backdrop-filter: blur(12px); }
.stage-slate strong { display: block; font-size: 14px; font-weight: 500; }
.stage-slate span { display: block; margin-top: 5px; color: var(--ink-3); font: 10px/1.4 var(--mono); text-transform: uppercase; }
.tray { position: relative; z-index: 3; min-width: 0; padding: 34px clamp(22px, 3vw, 46px) 46px; border-left: 1px solid rgba(255,255,255,.72); background: rgba(247,249,252,.58); box-shadow: -22px 0 70px rgba(26,34,45,.08), inset 1px 0 rgba(11,13,18,.08); backdrop-filter: blur(26px) saturate(1.08); }
.step-meter { display: flex; align-items: center; gap: 4px; margin: 0 0 38px; }
.step-meter i { width: 18px; height: 3px; background: rgba(21,18,24,.15); }
.step-meter i.done { background: var(--ink); }
.step-meter i.current { width: 36px; background: var(--magenta); }
.step-meter span { margin-left: auto; color: var(--ink-3); font: 10px/1 var(--mono); }
.tray h1 { margin: 12px 0 15px; font-family: var(--serif); font-size: clamp(38px, 4.8vw, 65px); font-weight: 400; line-height: .96; letter-spacing: -.045em; }
.lede { margin: 0 0 24px; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.field { display: grid; gap: 7px; margin: 16px 0; }
.field > span { color: var(--ink-2); font-size: 12px; font-weight: 600; }
.field small { color: var(--ink-3); font-size: 11px; }
.field input, .field textarea, .field select { width: 100%; border: 0; border-bottom: 1px solid rgba(21,18,24,.28); border-radius: 0; background: rgba(255,255,255,.42); color: var(--ink); padding: 12px; outline: none; transition: border 120ms ease, background 120ms ease; }
.field textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--magenta); background: rgba(255,255,255,.82); }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.describe-field { position: relative; margin-top: 26px; }
.describe-field textarea { min-height: 210px; padding: 21px 20px 40px; border: 1px solid rgba(11,13,18,.2); border-radius: 2px 18px 2px 18px; background: rgba(255,255,255,.52); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 18px 55px rgba(26,34,45,.06); font-family: var(--serif); font-size: 19px; line-height: 1.55; }
.describe-field textarea:focus { border-color: rgba(11,13,18,.52); background: rgba(255,255,255,.76); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 22px 70px rgba(26,34,45,.1); }
.describe-field small { position: absolute; right: 14px; bottom: 11px; font: 9px/1 var(--mono); letter-spacing: .08em; }
.prompt-sparks { margin-top: 22px; }
.prompt-sparks > span { color: var(--ink-3); font: 600 9px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.suggestion-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.suggestion { padding: 8px 11px; border: 1px solid rgba(11,13,18,.14); border-radius: 50% 44% 50% 46% / 48% 52% 43% 57%; background: rgba(255,255,255,.3); color: var(--ink-2); cursor: pointer; font-size: 11px; transition: transform 150ms ease, background 150ms ease, color 150ms ease; }
.suggestion:nth-child(even) { transform: rotate(-1deg); }
.suggestion:nth-child(3n) { transform: rotate(1deg); }
.suggestion:hover, .suggestion:focus-visible { background: var(--ink); color: white; transform: translateY(-2px) rotate(0); }
.suggestion.used { opacity: .42; text-decoration: line-through; }
.call-stage-button { position: relative; overflow: hidden; min-height: 52px; padding-inline: 22px; border-radius: 99px; }
.call-stage-button::after { content: ""; position: absolute; inset: -2px; border: 1px solid rgba(255,255,255,.34); border-radius: inherit; transform: scale(.9); transition: transform 180ms ease; }
.call-stage-button:hover::after { transform: scale(.97); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 20px; }
.choice { border: 1px solid var(--line); border-radius: 3px; background: rgba(255,255,255,.42); padding: 9px 11px; font-size: 12px; cursor: pointer; }
.choice[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: white; }
.tray-actions, .dialog-actions { display: flex; align-items: center; gap: 9px; margin-top: 24px; }
.ink-button, .quiet-button, .danger-button { min-height: 43px; border: 1px solid var(--ink); border-radius: 3px; padding: 0 16px; cursor: pointer; font-size: 12px; font-weight: 600; }
.ink-button { background: var(--ink); color: white; }
.quiet-button { background: transparent; }
.danger-button { border-color: var(--danger); background: transparent; color: var(--danger); }
button:disabled { cursor: not-allowed; opacity: .42; }
button.is-working:disabled { display: inline-flex; align-items: center; justify-content: center; gap: 9px; opacity: 1; cursor: wait; box-shadow: 0 0 0 3px rgba(189,45,114,.15), inset 0 -3px var(--magenta); animation: working-button 1.1s ease-in-out infinite alternate; }
.button-working-mark { display: inline-grid; width: 19px; height: 19px; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: 700 10px/1 var(--mono); animation: working-mark .8s ease-in-out infinite alternate; }
.control-confirmation { position: fixed; z-index: 200; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--magenta); border-radius: 50%; background: rgba(251,252,254,.96); color: var(--magenta); box-shadow: 0 8px 24px rgba(75,25,61,.2); font: 700 12px/1 var(--mono); pointer-events: none; transform: translate(-50%, -50%); animation: control-confirmation .85s cubic-bezier(.2,.8,.2,1) both; }
.inline-error { margin: 12px 0; color: var(--danger); font-size: 12px; line-height: 1.45; }
.truth-note { margin: 20px 0 0; padding: 14px 0; border-top: 1px solid var(--line); color: var(--ink-3); font: 10px/1.55 var(--mono); }
.version-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 78px; gap: 8px; overflow-x: auto; padding: 7px 1px 11px; }
.version { position: relative; aspect-ratio: 3/4; overflow: hidden; border: 1px solid transparent; background: white; padding: 0; cursor: pointer; }
.version img { width: 100%; height: 100%; object-fit: cover; }
.version[aria-pressed="true"] { border-color: var(--magenta); }
.progress-line { height: 6px; overflow: hidden; background: rgba(21,18,24,.12); }
.progress-line span { display: block; height: 100%; width: var(--progress, 0%); background: repeating-linear-gradient(90deg, var(--plum) 0 16px, var(--magenta) 16px 22px); transition: width 260ms ease; }
.progress-copy { display: flex; justify-content: space-between; margin-top: 8px; font: 10px/1.4 var(--mono); }
.range-grid { display: grid; gap: 13px; }
.range-control { display: grid; grid-template-columns: 80px 1fr 32px; align-items: center; gap: 8px; font-size: 12px; }
.range-control output { font-family: var(--mono); text-align: right; }

.live-submission-dialog { width: min(720px, calc(100vw - 28px)); max-height: min(880px, calc(100dvh - 28px)); overflow: auto; }
.live-submission-dialog form { display: grid; gap: 16px; }
.live-submission-dialog h2 { margin: 0; font-size: clamp(30px, 5vw, 54px); font-weight: 350; line-height: .96; letter-spacing: -.045em; }
.live-submission-summary { margin: 0; padding: 16px; border-left: 3px solid var(--magenta); background: rgba(189,45,114,.07); color: var(--ink); font-size: 14px; line-height: 1.55; }
.live-signature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.live-consent-line { display: grid; grid-template-columns: 20px 1fr; align-items: start; gap: 10px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.55; }
.live-consent-line input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--magenta); }
.live-consent-line a, .live-submission-dialog .fineprint a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.live-marketing-line { color: var(--ink-2); }
@media (max-width: 640px) {
  .live-signature-grid { grid-template-columns: 1fr; }
  .live-submission-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 20px; }
  .live-submission-dialog .dialog-actions { align-items: stretch; flex-direction: column-reverse; }
}

.import-page, .cast-page { min-height: calc(100dvh - 126px); padding: clamp(34px, 7vw, 96px) clamp(18px, 7vw, 110px); }
.import-head, .cast-head { display: grid; grid-template-columns: 1fr minmax(280px, 470px); align-items: end; gap: 38px; }
.import-head h1, .cast-head h1 { margin: 10px 0 0; font-size: clamp(48px, 8vw, 100px); font-weight: 300; line-height: .9; letter-spacing: -.065em; }
.import-head > p, .cast-head > p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.import-workbench { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(310px, .85fr); gap: 22px; margin-top: 54px; }
.drop-zone { display: grid; min-height: 340px; place-content: center; padding: 32px; border: 1px dashed rgba(21,18,24,.36); background: rgba(255,255,255,.42); text-align: center; cursor: pointer; }
.drop-zone[data-file="true"] { border-style: solid; border-color: var(--teal); background: rgba(150,221,199,.12); }
.drop-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop-zone strong { font-size: clamp(24px, 4vw, 45px); font-weight: 350; letter-spacing: -.04em; }
.drop-zone span { margin-top: 10px; color: var(--ink-3); font: 11px/1.5 var(--mono); }
.inspection { padding: 28px; border: 1px solid var(--line); background: rgba(255,255,255,.54); }
.inspection h2 { margin: 0 0 18px; font-size: 20px; font-weight: 500; }
.checklist { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.checklist li { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid rgba(21,18,24,.09); font-size: 12px; }
.checklist li::before { content: ""; width: 8px; height: 8px; border: 1px solid var(--ink-3); border-radius: 50%; }
.checklist li[data-state="ready"]::before { border-color: var(--ok); background: var(--ok); }
.checklist small { color: var(--ink-3); font-family: var(--mono); }
.tutorial { margin-top: 48px; border-top: 1px solid var(--line); padding-top: 26px; }
.tutorial h2 { margin: 0 0 20px; font-size: 27px; font-weight: 400; }
.tutorial ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 0; list-style: none; counter-reset: tutorial; }
.tutorial li { min-height: 140px; padding: 18px; border-left: 1px solid var(--line); counter-increment: tutorial; }
.tutorial li::before { content: counter(tutorial, decimal-leading-zero); display: block; margin-bottom: 26px; color: var(--magenta); font: 10px/1 var(--mono); }
.tutorial strong { display: block; margin-bottom: 6px; font-size: 13px; }
.tutorial p { margin: 0; color: var(--ink-3); font-size: 12px; line-height: 1.5; }
/* MetaHuman data lane (2026-09-26): DNA + maps, many files, one set */
.mh-intake { display: grid; gap: 10px; align-content: start; }
.drop-zone[data-drag="true"] { border-style: solid; border-color: var(--magenta); background: rgba(189,45,114,.06); }
.mh-files { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); background: rgba(255,255,255,.54); max-height: 320px; overflow: auto; }
.mh-files[hidden] { display: none; }
.mh-files li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 14px; border-bottom: 1px solid rgba(21,18,24,.08); font-size: 12px; }
.mh-files li:last-child { border-bottom: 0; }
.mh-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.mh-role { grid-row: 2; color: var(--ink-3); font: 10px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.mh-files small { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--ink-3); font-family: var(--mono); text-align: right; }
.mh-files li[data-state="arrived"] small { color: var(--ok); }
.mh-files li[data-state="sending"] small { color: var(--teal); }
.mh-files li[data-state="problem"] small, .mh-files li[data-state="refused"] small { color: var(--magenta); }
.mh-files li[data-state="refused"] .mh-name { color: var(--ink-3); text-decoration: line-through; }
.mh-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.mh-meter { height: 3px; margin: 14px 0 10px; background: rgba(21,18,24,.1); overflow: hidden; }
.mh-meter[hidden] { display: none; }
.mh-meter span { display: block; width: 0; height: 100%; background: var(--teal); transition: width .2s ease; }
.tutorial-note { margin: 4px 0 0 !important; max-width: 760px; }
.tutorial-note a { color: var(--ink); }
.mh-done { max-width: 760px; padding: clamp(24px, 6vw, 70px) 0; }
.mh-done h1 { margin: 10px 0 18px; font-size: clamp(44px, 7vw, 88px); font-weight: 300; line-height: .95; letter-spacing: -.06em; }
.mh-done > p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.mh-done-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.mh-done-actions a { display: inline-grid; place-items: center; text-decoration: none; color: inherit; }
@media (max-width: 560px) { .mh-choices { grid-template-columns: 1fr; } }
/* After the files arrive: the builder's own story step and voice booth (2026-09-26, Composer PR 27) */
.mh-arrived { display: grid; gap: 6px; padding: 22px; border: 1px solid var(--teal); background: rgba(150,221,199,.12); }
.mh-arrived strong { font-size: clamp(22px, 3vw, 34px); font-weight: 350; letter-spacing: -.035em; }
.mh-arrived span { color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.mh-self h1 { margin: 12px 0 15px; font-family: var(--serif); font-size: clamp(30px, 3.4vw, 46px); font-weight: 400; line-height: 1; letter-spacing: -.04em; }
.readiness-questions { display: grid; }

.cast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1px; margin-top: 48px; background: var(--line); border: 1px solid var(--line); }
.cast-card { display: flex; flex-direction: column; min-height: 330px; padding: 0; border: 0; background: var(--paper-strong); text-align: left; }
.cast-open { flex: 1; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.cast-actions { padding: 0 16px 16px; }
.cast-actions .ink-button { width: 100%; }
.cast-live { display: block; color: var(--ink-3); font: 11px/1.4 var(--mono); text-transform: uppercase; }
.gallery-actions { margin-top: 24px; } .gallery-count { color: var(--ink-3); font: 11px/1.4 var(--mono); text-transform: uppercase; }
.cast-card figure { position: relative; height: 230px; margin: 0; overflow: hidden; background: linear-gradient(160deg, #fff, #e9e4e6); }
.cast-card img { width: 100%; height: 100%; object-fit: cover; }
.cast-card figcaption { padding: 16px; }
.cast-card h2 { margin: 0; font-size: 21px; font-weight: 400; }
.cast-card p { margin: 7px 0 0; color: var(--ink-3); font: 10px/1.4 var(--mono); text-transform: uppercase; }
.empty-cast { display: grid; min-height: 42vh; place-content: center; text-align: center; }
.empty-cast h2 { margin: 0 0 10px; font-size: 30px; font-weight: 350; }
.empty-cast p { max-width: 44ch; color: var(--ink-3); line-height: 1.5; }

.screen-test { animation: slate-flash 1.4s ease both; }
.screen-test .cyc { background: radial-gradient(ellipse at 50% 70%, rgba(189,45,114,.19), transparent 44%), #fff; }
.screen-title { position: absolute; z-index: 4; left: 6%; right: 6%; bottom: 8%; color: var(--ink); text-align: center; }
.screen-title h2 { margin: 0; font-size: clamp(48px, 9vw, 128px); font-weight: 300; line-height: .8; letter-spacing: -.075em; }
.screen-title p { margin: 18px 0 0; font: 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.screen-conversation { margin: 24px 0 10px; border-top: 1px solid var(--line); padding-top: 20px; }
.conversation-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.conversation-heading h2 { margin: 2px 0 0; font-size: 26px; font-weight: 400; }
.conversation-heading > span { color: var(--ink-3); font: 9px/1.35 var(--mono); letter-spacing: .08em; text-align: right; text-transform: uppercase; }
#conversation-log { display: grid; gap: 8px; max-height: 240px; overflow: auto; margin: 16px 0; padding: 0; list-style: none; }
#conversation-log li { max-width: 88%; padding: 11px 13px; border: 1px solid var(--line); background: rgba(255,255,255,.66); }
#conversation-log li[data-role="assistant"] { margin-left: auto; border-color: rgba(189,45,114,.28); background: rgba(189,45,114,.06); }
#conversation-log li span { display: block; margin-bottom: 4px; color: var(--ink-3); font: 8px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
#conversation-log li p { margin: 0; font-size: 13px; line-height: 1.45; }
#conversation-log .conversation-empty { max-width: none; color: var(--ink-3); }
#conversation-form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px; }
#conversation-form .field { margin: 0; }
#conversation-form textarea { min-height: 74px; }
#conversation-form button { min-height: 46px; }
.model-stage.is-speaking::after { opacity: .5; transform: scale(1.045); }
.model-stage.is-speaking canvas { filter: drop-shadow(0 14px 28px rgba(189,45,114,.22)); }

.glass-dialog { width: min(560px, calc(100% - 24px)); padding: 0; border: 1px solid rgba(255,255,255,.64); border-radius: 10px; background: rgba(248,246,245,.92); color: var(--ink); box-shadow: 0 24px 90px rgba(35,20,35,.27); backdrop-filter: blur(24px); }
.glass-dialog::backdrop { background: rgba(24,15,23,.54); backdrop-filter: blur(7px); }
.glass-dialog form { position: relative; padding: clamp(26px, 5vw, 46px); }
.glass-dialog h2 { margin: 10px 0 14px; font-size: clamp(30px, 5vw, 48px); font-weight: 350; line-height: .98; letter-spacing: -.05em; }
.glass-dialog p { color: var(--ink-2); line-height: 1.55; }
.dialog-close { position: absolute; top: 14px; right: 17px; border: 0; background: none; font-size: 28px; font-weight: 200; cursor: pointer; }
.fineprint { margin-top: 18px; color: var(--ink-3) !important; font: 10px/1.5 var(--mono); }
.wallet-large { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 24px 0; background: var(--line); border: 1px solid var(--line); }
.wallet-large span { padding: 18px; background: rgba(255,255,255,.58); font-size: 12px; }
.wallet-large b { display: block; margin-bottom: 4px; font: 400 30px/1 var(--mono); }
.ledger { max-height: 170px; overflow: auto; margin: 25px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.ledger li { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid rgba(21,18,24,.08); font-size: 11px; }
.waitlist-dialog { width:min(620px,calc(100% - 24px)); }
.waitlist-dialog h2 { max-width:12ch; }
.waitlist-email { margin:26px 0 14px; }
.waitlist-email input { font-size:16px; }
.waitlist-dialog .ink-button { width:100%;justify-content:center; }
.waitlist-status { min-height:24px;margin:14px 0 0!important;font-size:12px; }
.waitlist-status[data-kind="success"] { color:#38623f!important; }
.waitlist-status[data-kind="error"] { color:var(--danger)!important; }

.job-rail { position: fixed; z-index: 35; right: 18px; bottom: 68px; width: min(330px, calc(100% - 36px)); padding: 15px; border: 1px solid var(--line); background: rgba(255,255,255,.88); box-shadow: 0 16px 50px rgba(30,20,30,.15); backdrop-filter: blur(18px); }
.job-rail h2 { margin: 0 0 10px; font-size: 12px; }
.job-rail p { margin: 0; color: var(--ink-3); font: 10px/1.5 var(--mono); }
.toast-stack { position: fixed; z-index: 90; right: 18px; top: 86px; display: grid; gap: 8px; width: min(340px, calc(100% - 36px)); pointer-events: none; }
.toast { padding: 13px 15px; border: 1px solid var(--line); background: rgba(255,255,255,.94); box-shadow: 0 9px 35px rgba(30,20,30,.13); font-size: 12px; line-height: 1.45; animation: toast-in 260ms ease both; }
.toast[data-kind="error"] { border-color: rgba(159,45,60,.5); color: var(--danger); }
.production-footer { position: relative; z-index: 30; display: flex; align-items: center; gap: 17px; min-height: 54px; padding: 10px clamp(16px, 3vw, 42px); border-top: 1px solid var(--line); background: rgba(249,247,244,.9); color: var(--ink-3); font: 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.production-footer img { width: auto; max-width: 88px; max-height: 22px; filter: grayscale(1) contrast(1.25); }
.footer-state { margin-left: auto; }
.production-footer button { border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; }

:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; }
@keyframes breathe { to { transform: translate3d(5vw, 3vh, 0) rotate(12deg) scale(1.13); } }
@keyframes enter-stage { from { opacity: 0; transform: translateY(20px) scale(.98); filter: blur(8px); } }
@keyframes slate-flash { 0%, 8% { filter: brightness(1.35); } 55%, 100% { filter: none; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }
@keyframes orbit-ink { to { transform: rotate(360deg); } }
@keyframes ink-drift { to { transform: translateY(22px) rotate(2deg); stroke-dashoffset: 40; } }
@keyframes mote-float { to { translate: 0 -20px; opacity: .34; } }
@keyframes egg-breathe { 50% { transform: translateY(-8px) scale(1.018); } }
@keyframes wing-left { 50% { transform: rotate(-7deg) translateX(-4px); } }
@keyframes wing-right { 50% { transform: rotate(7deg) translateX(4px); } }
@keyframes egg-knock { 0%, 100% { transform: rotate(0); } 24% { transform: rotate(-4deg) translateY(-5px); } 48% { transform: rotate(4deg) translateY(0); } 72% { transform: rotate(-2deg) translateY(-2px); } }
@keyframes first-look-hatch { 0%, 100% { transform: translateY(0) rotate(-1deg) scale(1); filter: drop-shadow(0 12px 20px rgba(75,25,61,.08)); } 45% { transform: translateY(-12px) rotate(2deg) scale(1.035); filter: drop-shadow(0 22px 28px rgba(189,45,114,.22)); } 72% { transform: translateY(-5px) rotate(-2deg) scale(1.015); } }
@keyframes working-button { to { box-shadow: 0 0 0 5px rgba(189,45,114,.24), inset 0 -3px var(--magenta); } }
@keyframes working-mark { to { transform: scale(1.12); background: rgba(189,45,114,.16); } }
@keyframes control-confirmation { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.45); } 28% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 75% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -65%) scale(.92); } }
@keyframes crack-draw { 0%, 12% { stroke-dashoffset: 100; } 34%, 100% { stroke-dashoffset: 0; } }
@keyframes shell-top { 0%, 34% { transform: none; } 58%, 100% { transform: translate(-95px,-130px) rotate(-32deg); opacity: 0; } }
@keyframes shell-bottom { 0%, 34% { transform: none; } 64%, 100% { transform: translate(84px,105px) rotate(18deg); opacity: 0; } }
@keyframes spark-burst { 0%, 35% { opacity: 0; transform: rotate(var(--angle)) translateX(0) scale(.3); } 48% { opacity: .8; } 75%, 100% { opacity: 0; transform: rotate(var(--angle)) translateX(min(35vw, 310px)) scale(1.2); } }
@keyframes yay-pop { 0%, 45% { opacity: 0; transform: translateY(30px) rotate(-7deg) scale(.5); } 58%, 82% { opacity: 1; transform: translateY(0) rotate(-7deg) scale(1); } 100% { opacity: 0; transform: translateY(-24px) rotate(-4deg) scale(1.05); } }
@keyframes caption-pop { 0%, 56% { opacity: 0; transform: translateY(10px); } 69%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes character-hatch { 0%, 28% { opacity: 0; transform: translateY(38%) scale(.58) rotate(-7deg); } 50% { opacity: 1; transform: translateY(-13%) scale(1.08) rotate(8deg); } 68% { transform: translateY(0) scale(.96) rotate(360deg); } 82% { transform: translateY(-5%) scale(1.02) rotate(360deg); } 100% { transform: none; } }
@keyframes ceremony-leave { 0%, 80% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

@media (max-width: 980px) {
  .door-wall { grid-template-columns: 1fr 1fr; }
  .door { border-right: 1px solid rgba(21,18,24,.22); border-bottom: 0; min-height: 250px; }
  .door:first-child { border-radius: 14px 0 0 0; }
  .door:nth-child(2) { border-radius: 0 14px 0 0; }
  .door:nth-child(3) { border-bottom: 1px solid rgba(21,18,24,.22); border-radius: 0 0 0 14px; }
  .door:last-child { border-bottom: 1px solid rgba(21,18,24,.22); border-radius: 0 0 14px 0; }
  .studio { grid-template-columns: 1fr; }
  .cyc { position: relative; top: 0; min-height: 56dvh; }
  .tray { border-top: 1px solid var(--line); border-left: 0; }
  .import-head, .cast-head { grid-template-columns: 1fr; }
  .import-workbench { grid-template-columns: 1fr; }
  .tutorial ol { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  .masthead { min-height: 62px; padding: 10px 14px; }
  .brand img { width: 92px; }
  .brand span { display: none; }
  .topnav { gap: 1px; }
  .topnav > a { display: none; }
  .wallet-button { gap: 6px; padding: 0 7px; font-size: 10px; }
  .wallet-button b { display: none; }
  .wallet-button span::before { content: "E"; color: var(--ink-3); }
  .wallet-button span:last-child::before { content: "D"; }
  .profile-button { max-width: 104px; padding-left: 7px; font-size: 10px; }
  #app { padding-top: 62px; }
  .entrance { min-height: calc(100dvh - 112px); grid-template-rows: minmax(190px, 34vh) 1fr; }
  .entrance-copy { padding: 28px 18px 18px; }
  .entrance-copy h1 { font-size: clamp(44px, 16vw, 68px); }
  .entrance-copy p:last-child { font-size: 13px; }
  .door-wall { padding: 0 10px 14px; }
  .door { min-height: 210px; padding: 17px 14px; }
  .door h2 { font-size: clamp(24px, 8vw, 35px); }
  .door p { min-height: 0; font-size: 11px; }
  .door-action { margin-top: 17px; font-size: 8px; }
  .studio { min-height: calc(100dvh - 112px); }
  .cyc { min-height: 49dvh; }
  .stage-body { height: 86%; }
  .concept-image { max-width: 94%; height: 43dvh; }
  .stage-slate { right: 12px; bottom: 10px; left: 12px; max-width: none; }
  .stage-number { top: 14px; left: 16px; }
  .tray { padding: 24px 18px 34px; }
  .tray h1 { font-size: 39px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  /* Keep the final action scrollable above Safari's persistent bottom toolbar.
     safe-area-inset-bottom alone does not include the browser chrome (real iPhone, 2026-10-03). */
  .tray {
    padding-bottom: calc(132px + env(safe-area-inset-bottom));
    scroll-padding-bottom: calc(132px + env(safe-area-inset-bottom));
  }
  .tray input, .tray textarea, .tray select { scroll-margin-bottom: 120px; min-height: 44px; }
  .tray-actions {
    position: static;
    flex-wrap: wrap;
    padding: 0;
    margin: 24px 0 0;
    scroll-margin-bottom: calc(112px + env(safe-area-inset-bottom));
  }
  .tray-actions > * { flex: 1 1 calc(50% - 6px); min-width: 140px; }
  .conversation-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
  .conversation-heading > span { text-align: left; }
  #conversation-form { grid-template-columns: 1fr; }
  .import-page, .cast-page { padding: 35px 17px; }
  .import-head h1, .cast-head h1 { font-size: 54px; }
  .import-workbench { margin-top: 34px; }
  .drop-zone { min-height: 260px; }
  .tutorial ol { grid-template-columns: 1fr; }
  .tutorial li { min-height: 0; }
  .production-footer { min-height: 50px; gap: 10px; padding: 8px 12px; }
  .production-footer > span:first-child, .footer-state { display: none; }
  .production-footer img { max-width: 74px; max-height: 18px; }
  .production-footer button { margin-left: auto; }
}

@media (forced-colors: active) {
  .aurora { display: none; }
  .door::before, .door::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .aurora { display: none; }
  .door { transform: none !important; }
  .control-confirmation { animation: none !important; opacity: 1; }
}

@keyframes model-ink-breathe { to { opacity: .28; transform: scale(1.035) rotate(-1deg); } }
@keyframes model-picture-breathe { to { opacity: .72; transform: translateY(-4px) scale(.994); } }
@keyframes model-arrival-line { to { background-position: 30px 0; } }

/* ── Voice booth: "Use your own voice" (2026-09-26) ── */
.voice-paths { display: flex; gap: 7px; margin: 14px 0 18px; }
.voice-source-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.voice-source-tab { min-height:64px; display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 8px; border:1px solid rgba(25,20,18,.28); border-radius:999px; background:rgba(255,255,255,.52); color:var(--ink); font:600 12px/1.1 var(--sans); cursor:pointer; box-shadow:0 8px 26px rgba(40,25,20,.05); transition:transform .18s,background .18s,color .18s,border-color .18s; }
.voice-source-tab span { font:600 8px/1 var(--mono); letter-spacing:.08em; opacity:.48; }
.voice-source-tab[aria-checked="true"] { color:#fff; background:var(--ink); border-color:var(--ink); transform:translateY(-2px); }
.voice-direction-card,.voice-design-studio { padding:18px; border:1px solid rgba(25,20,18,.16); border-radius:18px; background:rgba(255,255,255,.68); box-shadow:0 18px 50px rgba(44,29,24,.07); }
.voice-direction-card { margin-bottom:14px; }
.voice-field { margin:0; }
.voice-field > span { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; font:600 10px/1.2 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }
.voice-field > span small { font:400 9px/1.2 var(--sans); letter-spacing:0; text-transform:none; opacity:.68; }
.voice-identity-hint { display:block; margin:-2px 0 10px; color:var(--ink-3); font:12px/1.45 var(--sans); }

.voice-field input,.voice-field textarea { border:1px solid rgba(25,20,18,.38)!important; border-radius:10px!important; padding:13px 14px!important; background:#fff!important; box-shadow:inset 0 1px 0 rgba(0,0,0,.02); }
.voice-field input:focus,.voice-field textarea:focus { border-color:var(--ink)!important; box-shadow:0 0 0 3px rgba(189,45,114,.11)!important; }
.voice-design-grid { display:grid; grid-template-columns:minmax(150px,.7fr) minmax(220px,1.3fr); gap:14px; }
.voice-line-preview { margin:16px 0; padding:14px 16px; border-left:2px solid var(--pink,#bd2d72); background:rgba(189,45,114,.045); }
.voice-line-preview>span { font:600 9px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }
.voice-line-preview ol { margin:10px 0 0; padding-left:20px; display:grid; gap:7px; font-size:13px; line-height:1.4; }
.voice-audition-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:18px 0; }
.voice-audition-card { display:flex; flex-direction:column; min-height:210px; padding:14px; border:1px solid rgba(25,20,18,.22); border-radius:14px; background:#fff; box-shadow:0 14px 34px rgba(35,24,20,.07); transition:border-color .18s,background .18s,box-shadow .18s; }
.voice-audition-card[data-kept="true"] { border:2px solid #173a30; background:#f3faf5; box-shadow:0 0 0 5px rgba(23,58,48,.12),0 18px 44px rgba(23,58,48,.16); }

.voice-audition-card>div:first-child { display:flex; align-items:center; gap:8px; }
.voice-audition-card>div:first-child span { color:var(--pink,#bd2d72); font:700 9px/1 var(--mono); }
.voice-audition-card>div:first-child strong { font-size:14px; }
.voice-kept-mark { display:none; margin-left:auto; width:34px; height:34px; place-items:center; border-radius:50%; color:#fff; background:#173a30; font:800 22px/1 var(--sans); font-style:normal; box-shadow:0 4px 12px rgba(23,58,48,.24); }
.voice-audition-card[data-kept="true"] .voice-kept-mark { display:grid; }
.voice-audition-card[data-kept="true"] .voice-choice { background:#173a30; border-color:#173a30; }

.voice-audition-card blockquote { flex:1; margin:14px 0; font:italic 15px/1.45 var(--serif); }
.voice-card-actions { display:grid; gap:7px; }
.voice-card-actions button { width:100%; }
.talk-gallery-action { position:relative; z-index:4; display:flex; align-items:center; justify-content:center; gap:9px; padding:4px 0 8px; }
.talk-send-backstage { display:inline-flex; align-items:center; justify-content:center; min-width:132px; min-height:38px; padding:9px 18px; border:1px solid rgba(10,10,10,.42); border-radius:12px; color:#171717; background:#fff; box-shadow:0 3px 12px rgba(0,0,0,.07); font:500 12px/1.1 var(--sans); letter-spacing:.01em; cursor:pointer; transition:border-color .2s,box-shadow .2s,transform .2s; }
.talk-send-backstage:hover { border-color:#111; box-shadow:0 5px 16px rgba(0,0,0,.1); transform:translateY(-1px); }
.talk-send-backstage span { position:static; width:auto; height:auto; overflow:visible; clip-path:none; }
.talk-send-backstage:disabled { opacity:.48; cursor:not-allowed; }
.talk-gallery-link { display:inline-flex; align-items:center; justify-content:center; min-width:106px; min-height:38px; padding:9px 16px; border:1px solid rgba(10,10,10,.2); border-radius:12px; color:#444; background:rgba(255,255,255,.8); font:500 12px/1.1 var(--sans); text-decoration:none; box-shadow:0 3px 12px rgba(0,0,0,.04); transition:border-color .2s,color .2s,transform .2s; }
.talk-gallery-link:hover { border-color:#111; color:#111; transform:translateY(-1px); }

.talk-backstage-status { padding:10px 17px; border:1px solid rgba(255,255,255,.35); border-radius:999px; color:#fff; font-size:12px; }
.voice-clone-check { margin:14px 0 2px; padding:14px 16px; border:1px solid rgba(25,20,18,.18); border-radius:16px; background:rgba(255,255,255,.58); }
.voice-clone-check p { margin:0 0 10px; font:13px/1.45 var(--sans); }
.backstage-confirm { width:min(460px,calc(100vw - 32px)); padding:28px; border:1px solid rgba(255,255,255,.5); border-radius:24px; color:var(--ink); background:rgba(248,241,233,.98); box-shadow:0 35px 100px rgba(20,10,20,.36); text-align:center; }
.backstage-confirm::backdrop { background:rgba(17,10,20,.64); backdrop-filter:blur(8px); }
.backstage-confirm h2 { margin:6px 0 10px; font:42px/.95 var(--serif); }
.backstage-confirm p:not(.eyebrow) { line-height:1.55; color:var(--ink-2); }
.backstage-confirm-actions { justify-content:center; }
.backstage-confirm-actions button { min-width:140px; }
.own-voice-script { margin: 0 0 18px; padding: 0; list-style: none; counter-reset: line; display: grid; gap: 10px; }
.own-voice-script li { counter-increment: line; position: relative; padding: 12px 14px 12px 42px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper-strong); font-size: 16px; line-height: 1.45; }
.own-voice-script li::before { content: counter(line, decimal-leading-zero); position: absolute; left: 14px; top: 14px; color: var(--ink-3); font: 600 10px/1.4 var(--mono); letter-spacing: .12em; }
.own-voice-deck { display: flex; align-items: center; gap: 16px; margin: 0 0 12px; }
.record-button { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid var(--ink); border-radius: 50%; background: var(--paper-strong); cursor: pointer; }
.record-button span { width: 22px; height: 22px; border-radius: 50%; background: var(--danger); transition: border-radius .18s, width .18s, height .18s; }
.record-button.is-recording { box-shadow: 0 0 0 6px rgba(159, 45, 60, .14); }
.record-button.is-recording span { width: 18px; height: 18px; border-radius: 3px; }
.record-button:focus-visible { outline: 1px dashed var(--ink); outline-offset: 4px; }
.own-voice-meter { flex: 1; min-width: 0; }
.own-voice-meter .level { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.own-voice-meter .level i { display: block; width: 0; height: 100%; background: var(--teal); transition: width 70ms linear; }
.own-voice-meter .level i[data-hot="true"] { background: var(--danger); }
.own-voice-review { display: flex; gap: 8px; margin: 0 0 12px; }
.own-voice-review[hidden] { display: none; }
.own-voice-consent { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 4px; color: var(--ink-2); font-size: 13px; line-height: 1.45; cursor: pointer; }
.own-voice-consent input { margin-top: 3px; accent-color: var(--ink); }
@media (max-width: 560px) {
  .voice-source-tabs { gap:5px; }
  .voice-source-tab { min-height:54px; padding:8px 5px; font-size:10px; }
  .voice-source-tab span { display:none; }
  .voice-design-grid,.voice-audition-grid { grid-template-columns:1fr; }
  .voice-audition-card { min-height:0; }
  .own-voice-script li { font-size: 15px; }
  .record-button { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) { .record-button span, .own-voice-meter .level i { transition: none; } }

/* ── Movement slide: LBLiving vocabulary (2026-09-29) ───────────────────── */
.field-label { margin: 18px 0 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2, #555); }
.field-label small { text-transform: none; letter-spacing: 0; margin-left: 6px; opacity: .75; }
#emotion-choices .choice, #behavior-choices .choice { transition: background .15s, color .15s, border-color .15s; }
/* A picture on the stage (the body is still hatching) performs the chosen mood too. */
.stage-body[data-living-emotion] > .concept-image { transform-origin: 50% 92%; animation: living-breathe calc(3.2s / (0.6 + var(--living-intensity, .8))) ease-in-out infinite; }
.stage-body[data-living-emotion="happy"] > .concept-image, .stage-body[data-living-emotion="delighted"] > .concept-image { animation-name: living-bounce; }
.stage-body[data-living-emotion="flirty"] > .concept-image, .stage-body[data-living-emotion="sassy"] > .concept-image { animation-name: living-sway; }
.stage-body[data-living-emotion="laughing"] > .concept-image { animation-name: living-shake; animation-duration: .9s; }
.stage-body[data-living-emotion="sad"] > .concept-image { animation-name: living-slump; animation-duration: 4.6s; }
.stage-body[data-living-emotion="angry"] > .concept-image, .stage-body[data-living-emotion="nervous"] > .concept-image { animation-name: living-tremble; animation-duration: .5s; }
.stage-body[data-living-emotion="surprised"] > .concept-image, .stage-body[data-living-emotion="smug"] > .concept-image { animation-name: living-lean-back; }
.stage-body[data-living-behavior] > .concept-image { animation: living-pop 1.2s ease-out 1; }
@keyframes living-breathe { 0%,100% { transform: scale(1) } 50% { transform: scale(1.012, 1.02) } }
@keyframes living-bounce { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-1.6%) scale(1.01) } }
@keyframes living-sway { 0%,100% { transform: rotate(-1.6deg) } 50% { transform: rotate(1.6deg) } }
@keyframes living-shake { 0%,100% { transform: rotate(0) translateY(0) } 25% { transform: rotate(1.2deg) translateY(-1%) } 75% { transform: rotate(-1.2deg) translateY(.5%) } }
@keyframes living-slump { 0%,100% { transform: translateY(1%) scale(.99) } 50% { transform: translateY(1.8%) scale(.985) } }
@keyframes living-tremble { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-.4%) } 75% { transform: translateX(.4%) } }
@keyframes living-lean-back { 0%,100% { transform: rotate(-1deg) } 50% { transform: rotate(-2deg) scale(1.01) } }
@keyframes living-pop { 0% { transform: scale(1) } 30% { transform: scale(1.04) translateY(-2%) } 100% { transform: scale(1) } }
@media (prefers-reduced-motion: reduce) { .stage-body[data-living-emotion] > .concept-image { animation: none; } }

/* ── Talk as you write (2026-09-29) ─────────────────────────────────────── */
.audition { margin: 26px 0 8px; border-top: 1px solid var(--line); padding-top: 20px; }
#audition-log { display: grid; gap: 8px; max-height: 260px; overflow: auto; margin: 16px 0; padding: 0; list-style: none; }
#audition-log li { max-width: 88%; padding: 11px 13px; border: 1px solid var(--line); background: rgba(255,255,255,.66); }
#audition-log li[data-role="assistant"] { margin-left: auto; border-color: rgba(189,45,114,.28); background: rgba(189,45,114,.06); }
#audition-log li span { display: block; margin-bottom: 4px; color: var(--ink-3); font: 8px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
#audition-log li p { margin: 0; font-size: 13px; line-height: 1.45; }
#audition-log .conversation-empty { max-width: none; color: var(--ink-3); }
#audition-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
@media (max-width: 560px) { #audition-form { grid-template-columns: 1fr; } }

/* ── TALK: full-screen voice conversation (2026-09-30) ─────────────────── */
.talk-open-button { width: 100%; justify-content: center; margin: 4px 0 18px; font-size: 15px; }
body.talk-open { overflow: hidden; }
.talk-stage {
  position: fixed; inset: 0; z-index: 90; display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  width: 100%; max-width: 100%; overflow-x: hidden;
  background: radial-gradient(120% 80% at 50% 30%, #fff 0%, var(--paper) 55%, #e6dde6 100%);
  color: var(--ink); padding: max(12px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom));
  animation: talk-in .35s cubic-bezier(.19, 1, .22, 1);
}
@keyframes talk-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
.talk-top { display: flex; align-items: center; gap: 14px; }
.talk-mark { height: 22px; width: auto; }
.talk-who { display: grid; line-height: 1.2; margin-right: auto; }
.talk-who strong { font: 400 20px/1.1 var(--serif); letter-spacing: -.01em; }
.talk-who span { font: 10px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #c2426f; }
.talk-close { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.7); font-size: 26px; line-height: 1; cursor: pointer; color: var(--ink); }
.talk-character { position: relative; min-height: 0; display: grid; place-items: center; }
.talk-character > .cyc { position: relative !important; inset: auto !important; width: min(100%, 720px) !important; height: 100% !important; min-height: 0 !important; margin: 0 auto; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.talk-character > .cyc .stage-number, .talk-character > .cyc .stage-slate, .talk-character > .cyc .screen-title, .talk-character > .cyc .model-arrival { display: none !important; }
.talk-character .concept-image { max-height: 100%; width: auto; object-fit: contain; }
.talk-subtitles { text-align: center; max-width: 760px; margin: 0 auto; padding: 6px 4px 0; min-height: 5.2em; }
.talk-them { margin: 0; font: 400 clamp(20px, 3.4vw, 30px)/1.28 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.talk-them.is-thinking { color: var(--ink-3); }
.talk-you { margin: 8px 0 0; font: 13px/1.4 var(--sans); color: var(--ink-2); min-height: 1.4em; }
.talk-wave { width: min(560px, 100%); height: 46px; margin: 8px auto 0; display: block; }
.talk-controls { display: grid; justify-items: center; gap: 8px; padding-top: 6px; }
.talk-mic { width: 84px; height: 84px; border-radius: 50%; border: 0; background: #0b0d12; display: grid; place-items: center; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; box-shadow: 0 10px 30px rgba(11,13,18,.22); transition: transform .15s, background .15s; }
.talk-mic-dot { width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: all .15s; }
.talk-mic.is-listening { background: #c2426f; transform: scale(1.08); box-shadow: 0 0 0 10px rgba(194,66,111,.18), 0 10px 30px rgba(194,66,111,.35); }
.talk-mic.is-listening .talk-mic-dot { border-radius: 6px; width: 22px; height: 22px; }
.talk-hint { margin: 0; font: 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); text-align: center; }
.talk-type { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; width: min(560px, 100%); min-width: 0; max-width: 100%; }
/* iOS Safari zooms the visual viewport when a focused field is below 16px, which pushed Send off-screen on the real phone. */
.talk-type input { width: 100%; min-width: 0; font: 16px var(--sans); padding: 11px 12px; border: 1px solid var(--line); background: rgba(255,255,255,.8); border-radius: 3px; }
.talk-latency { margin: 0; font: 10px/1 var(--mono); color: var(--ink-3); letter-spacing: .06em; min-height: 1em; }
@media (prefers-color-scheme: dark) { .talk-stage { color: var(--ink); } }
@media (prefers-reduced-motion: reduce) { .talk-stage { animation: none; } }

/* ── TALK v2: visual-first, big red button, Chat behind a toggle (2026-09-30) ── */
.talk-cta { width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; margin: 6px 0 10px; padding: 18px 20px; border: 0; border-radius: 999px; background: #d8323c; color: #fff; font: 600 17px/1 var(--sans); letter-spacing: .01em; cursor: pointer; box-shadow: 0 10px 26px rgba(216,50,60,.32); }
.talk-cta-dot { width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.28); }
.talk-cta:active { transform: scale(.98); }
.talk-stage { grid-template-rows: auto minmax(0, 1fr) auto auto auto auto; }
.talk-chat-toggle { border: 1px solid var(--line); background: rgba(255,255,255,.75); border-radius: 999px; padding: 9px 14px; font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; color: var(--ink); }
.talk-stage[data-view="talk"] .talk-log, .talk-stage[data-view="talk"] .talk-type { display: none; }
/* Chat never resizes the 3D stage (a WebGL canvas that is resized while collapsed stops drawing in WebKit):
   the stage keeps one layout size in both views and Chat only SCALES it (a transform, no resize). */
.talk-stage .talk-character { height: 46dvh; min-height: 46dvh; max-height: 46dvh; }
.talk-stage[data-view="chat"] .talk-character { transform: scale(.6); transform-origin: 50% 0; margin-bottom: calc(46dvh * -.4); }
.talk-stage[data-view="chat"] .talk-subtitles, .talk-stage[data-view="chat"] .talk-mic, .talk-stage[data-view="chat"] .talk-hint, .talk-stage[data-view="chat"] .talk-wave { display: none; }
.talk-log { list-style: none; margin: 0 auto; padding: 0; width: min(640px, 100%); overflow: auto; display: grid; gap: 8px; align-content: end; min-height: 0; max-height: 44vh; }
.talk-log li { max-width: 86%; padding: 10px 13px; border: 1px solid var(--line); background: rgba(255,255,255,.8); border-radius: 14px; }
.talk-log li[data-role="assistant"] { margin-left: auto; border-color: rgba(216,50,60,.25); background: rgba(216,50,60,.06); }
.talk-log li span { display: block; font: 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.talk-log li p { margin: 0; font-size: 14px; line-height: 1.4; }
.talk-mic { position: relative; width: 108px; height: 108px; background: #d8323c; box-shadow: 0 14px 34px rgba(216,50,60,.4); }
.talk-mic-ring { position: absolute; inset: -10px; border-radius: 50%; border: 3px solid rgba(216,50,60,.35); opacity: 0; }
.talk-mic-label { color: #fff; font: 700 12px/1.15 var(--sans); letter-spacing: .04em; text-transform: uppercase; max-width: 80px; text-align: center; }
.talk-mic.is-listening { background: #b8141f; }
.talk-stage[data-state="listening"] .talk-mic-ring { opacity: 1; animation: talk-pulse 1.1s ease-out infinite; }
.talk-stage[data-state="thinking"] .talk-mic { background: #0b0d12; }
.talk-stage[data-state="speaking"] .talk-mic { background: #d8323c; }
/* No CSS filter over the WebGL canvas: WebKit drops the canvas under a filtered ancestor. */
.talk-stage[data-state="speaking"] .talk-character::after { content: ""; position: absolute; inset: 20% 22% 6%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(216,50,60,.16), transparent); pointer-events: none; }

@keyframes talk-pulse { from { transform: scale(.92); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
.talk-subtitles { min-height: 4.6em; }
@media (max-width: 560px) {
  .talk-them { font-size: 21px; }
  .talk-mic { width: 96px; height: 96px; }
  .talk-hint { font-size: 10px; }
}

/* ── TALK v2.1: the live 3D character owns the stage ── */
.talk-character .model-stage { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; }
.talk-character #three-stage { min-height: 0 !important; }
.talk-character .model-fallback { width: auto; height: auto; max-width: 100%; }
.talk-character .model-stage::before { display: none; }
/* While the 3D body is still arriving, the picture is a soft vignette on the stage, never a grey card. */
.talk-character .model-fallback, .talk-character .cyc > .concept-image, .talk-character > .concept-image {
  max-height: 100%; background: transparent; border: 0; box-shadow: none;
  -webkit-mask-image: radial-gradient(ellipse 48% 50% at 50% 46%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 48% 50% at 50% 46%, #000 55%, transparent 100%);
}
.talk-them { max-height: 6.8em; overflow: auto; }
@media (max-width: 560px) { .talk-them { font-size: 19px; } }
.talk-stage[data-state="speaking"] .talk-mic-ring { opacity: 1; border-color: rgba(216,50,60,.55); animation: talk-pulse 1.5s ease-out infinite; }
.talk-stage[data-state="speaking"] .talk-mic { box-shadow: 0 0 0 8px rgba(216,50,60,.16), 0 14px 34px rgba(216,50,60,.45); }
.talk-send { border: 0; background: #d8323c; color: #fff; border-radius: 999px; padding: 10px 14px; font: 700 11px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; box-shadow: 0 6px 16px rgba(216,50,60,.3); }
@media (max-width: 560px) { .talk-top { flex-wrap: wrap; row-gap: 8px; } .talk-send { order: 5; width: 100%; padding: 12px; font-size: 12px; } }
/* Use a voice I made (2026-09-30) */
.made-voice .made-block { margin: 18px 0; padding: 14px 0 4px; border-top: 1px solid var(--line); }
.made-voice .made-block .eyebrow { margin-bottom: 8px; }
.made-voice select { width: 100%; font: 15px var(--sans); padding: 10px; border: 1px solid var(--line); border-radius: 3px; background: rgba(255,255,255,.8); }
.made-status { min-height: 1.4em; font: 13px/1.4 var(--sans); color: var(--ink-2); }
/* Talk screen fixes (WO-9b real-iPhone items 4): avatar never overlaps its own subtitle, stage fills the real screen, chat has no hard box. */
.talk-stage { height: 100lvh; bottom: auto; }
.talk-stage .talk-character { overflow: hidden; align-self: stretch; margin-bottom: 8px; }
.talk-stage .talk-subtitles { position: relative; z-index: 2; }
.talk-character > .cyc, .talk-character > .cyc canvas { -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 52%, #000 70%, transparent 100%); mask-image: radial-gradient(ellipse 62% 62% at 50% 52%, #000 70%, transparent 100%); }
.talk-character > .cyc::before, .talk-character > .cyc::after { display: none !important; }
.talk-stage[data-view="chat"] .talk-character { transform: scale(.78); margin-bottom: calc(46dvh * -.22); }
.talk-stage[data-view="chat"] .talk-log { max-height: none; }
.talk-stage .talk-character { height: 38dvh; min-height: 38dvh; max-height: 38dvh; }
.talk-stage[data-view="chat"] .talk-character { margin-bottom: calc(38dvh * -.22); }

/* Held props (component + socket attachment) */
.props-panel { margin-top: 22px; }
.prop-card { margin: 12px 0; padding: 14px 14px 6px; border: 1px solid var(--line); background: rgba(255,255,255,.55); }
.prop-card legend { padding: 0 6px; font: 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.prop-card legend small { margin-left: 8px; color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.prop-card select, .prop-card input[type="text"], .prop-card input:not([type]) { width: 100%; min-height: 44px; }
.prop-card .check { display: flex; gap: 8px; align-items: center; margin: 8px 0; font-size: 13px; color: var(--ink-2); }
.prop-card .prop-actions { margin-top: 12px; flex-wrap: wrap; position: static; padding: 0; background: none; }
.prop-empty { margin: 6px 0 12px; color: var(--ink-3); font-size: 13px; }
/* Real-iPhone pass 2 (WO-9b, 2026-09-30) */
/* Chat: bubbles above the avatar, and the avatar shrinks aside instead of sitting under them. */
.talk-stage[data-view="chat"] .talk-character { transform: scale(.5); margin-bottom: calc(38dvh * -.5); z-index: 1; }
.talk-stage[data-view="chat"] .talk-log { position: relative; z-index: 3; }
/* Nothing from the builder bleeds through while Talk is open. */
body.talk-open .tray-actions:not(.casting-victory .tray-actions), body.talk-open .masthead, body.talk-open .job-rail, body.talk-open .toast-stack { visibility: hidden !important; }
/* Tripo's only registered mark is the light-on-dark wordmark (fermata-marquee brand registry): the mark is never recolored, it sits on a dark chip. */
.production-footer img[alt="Tripo"] { filter: none; background: #0b0d12; padding: 6px 11px; border-radius: 3px; box-sizing: content-box; }
@media (max-width: 560px) {
  /* Reveal: the name overlay sits above the caption, and the caption is one line so feet stay visible. */
  .screen-title { bottom: 64px; }
  .screen-title h2 { font-size: clamp(34px, 11vw, 56px); }
  .screen-title p { margin-top: 10px; }
  .stage-slate { padding: 8px 12px; }
  .stage-slate span { display: none; }
}
/* One continuous stage. The preparation work stays behind the shell. */
.studio-menu { position:relative; font-size:.78rem; }
.studio-menu summary { cursor:pointer; list-style:none; padding:.65rem; }
.studio-menu-content { position:absolute; right:0; top:100%; z-index:50; min-width:220px; display:grid; gap:12px; padding:20px; color:#251d2d; background:rgba(247,243,250,.98); border:1px solid rgba(69,47,82,.2); border-radius:8px; box-shadow:0 18px 42px rgba(18,8,26,.24); }
.studio-menu-content a,.studio-menu-content button,.studio-menu-content span { color:#251d2d; }
.studio-menu-content a { text-decoration-color:rgba(37,29,45,.28); text-underline-offset:3px; }
.studio-menu-content a:hover,.studio-menu-content a:focus-visible { color:#713466; text-decoration-color:#713466; }
.studio-menu-content .wallet-button { display:none; }
.hatch-line { font-family:Georgia,serif; font-style:italic; font-size:1.16rem; line-height:1.65; }
.hatch-aside { max-width:32ch; margin:32px auto; color:#6b626b; text-align:center; font-family:Georgia,serif; font-style:italic; line-height:1.7; min-height:4em; }
.egg-stage { position:relative; width:100%; height:100%; min-height:330px; display:grid; place-items:center; isolation:isolate; }
#egg-canvas { position:absolute; width:100%; height:100%; inset:0; z-index:2; }
.egg-portrait { position:absolute; z-index:3; width:31%; height:39%; top:32%; object-fit:contain; border-radius:48% 48% 44% 44%; background:white; box-shadow:0 0 30px 8px #fff6; clip-path:ellipse(49% 49% at 50% 50%); }
.egg-fallback { width:155px; height:210px; border-radius:50% 50% 45% 45% / 65% 65% 35% 35%; color:transparent; background:radial-gradient(ellipse at 30% 25%,#fff,#b4d6e1 65%,#8b7292); box-shadow:inset -15px -12px 30px #61507933; }
.egg-rendered .egg-fallback { display:none; }
.ceremony-egg { position:absolute; inset:0; width:100%; height:100%; }
[hidden] { display:none !important; }
@media(max-width:600px) { .egg-stage { min-height:280px; } .topnav { gap:8px; } .hatch-aside { margin:20px auto; } }
@media(prefers-reduced-motion:reduce) { .hatch-jump { animation:none!important; } }

.topnav .studio-menu-content .menu-gallery { display:block; padding:8px 0; }

.egg-portrait { opacity:0; transition:opacity .3s; }
.egg-portrait.is-ready { opacity:1; }
.egg-portrait-status { position:absolute; z-index:4; top:73%; max-width:80%; text-align:center; font:italic 14px/1.5 var(--serif); }
.egg-portrait-retry { position:absolute; z-index:5; top:83%; }

/* The meeting: white portrait stage, living ink, and an expressive silhouette. */
.gallery-tabs { display:flex; flex-wrap:wrap; gap:24px; align-items:center; padding:22px 0; margin:20px 0 34px; border-block:1px solid var(--line); }
.gallery-tabs a { color:var(--ink-3); text-decoration:none; padding:10px 0; }
.gallery-tabs a[aria-current] { color:var(--ink); border-bottom:2px solid currentColor; }
.gallery-tabs span { margin-left:auto; font-size:11px; text-transform:uppercase; letter-spacing:.15em; }
.gallery-tabs .gallery-audience { display:flex; align-items:center; gap:8px; margin-left:4px; padding-left:18px; border-left:1px solid var(--line); }
.gallery-tabs .gallery-audience span { margin:0 2px 0 0; opacity:.58; }
.gallery-tabs .gallery-audience a { padding:7px 11px; border:1px solid transparent; border-radius:999px; font-size:12px; }
.gallery-tabs .gallery-audience a[aria-current] { border-color:currentColor; }
.gallery-tabs .gallery-audience-note { margin-left:4px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.public-cast .cast-head h1 { font-size:clamp(52px,8vw,112px); line-height:.94; letter-spacing:-.055em; }
.cast-card { transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.cast-card:hover { transform:translateY(-7px); }
.cast-card figure { background:#fff; }
.cast-card img { mix-blend-mode:multiply; }
.meet-invitation h2,.meet-invitation>p { display:none; }
.talk-stage { --emotion-color:#c96386; isolation:isolate; background:#fff; }
.talk-top { position:relative; z-index:8; }
.talk-top button { font-size:12px; border:0; background:transparent; padding:10px; }
.talk-who strong { font-size:clamp(20px,3vw,32px); letter-spacing:-.04em; }
.talk-who #talk-mood { color:var(--emotion-color); transition:color 1s; font-size:11px; letter-spacing:.1em; }
.talk-character { z-index:1; }
.emotion-atmosphere { position:absolute; inset:100px 0 230px; pointer-events:none; z-index:2; color:var(--emotion-color); transition:color 1.2s; overflow:hidden; }
.emotion-etching { position:absolute; width:clamp(80px,14vw,190px); height:auto; left:10%; top:30%; opacity:.26; transform:rotate(-9deg); }
.emotion-etching path { stroke-dasharray:280; stroke-dashoffset:0; animation:feeling-draw 5s ease-in-out infinite; }
#emotion-moment { position:absolute; right:9%; top:53%; max-width:130px; font-size:clamp(13px,1.5vw,20px); line-height:1.3; font-style:italic; opacity:.55; transform:rotate(6deg); }
.emotion-orbit { position:absolute; width:38vw; height:10vw; border-bottom:1px solid currentColor; border-radius:50%; bottom:1%; left:31%; opacity:.12; transform:rotate(-8deg); }
.talk-controls,.talk-subtitles { position:relative; z-index:3; }
.talk-mic { width:100px; height:100px; background:var(--ink); box-shadow:0 0 0 8px #fff,0 0 0 9px color-mix(in srgb,var(--emotion-color),transparent 55%); transition:box-shadow .4s,transform .3s; }
.talk-stage[data-state="listening"] .talk-mic { box-shadow:0 0 0 9px #fff,0 0 0 11px var(--emotion-color),0 0 0 24px color-mix(in srgb,var(--emotion-color),transparent 90%); }
.talk-stage[data-state="thinking"] .emotion-etching { animation:feeling-drift 2.8s ease-in-out infinite alternate; }
.talk-hint { font-size:11px; letter-spacing:.07em; }
.talk-refine { position:absolute; z-index:10; right:24px; top:86px; width:min(340px,calc(100vw - 40px)); max-height:calc(100dvh - 130px); overflow:auto; background:rgba(255,255,255,.97); backdrop-filter:blur(24px); border:1px solid var(--line); padding:24px; box-shadow:0 18px 70px #24192312; }
.talk-refine[hidden] { display:none; }
.talk-refine h2 { font-size:30px; letter-spacing:-.04em; margin:8px 0 24px; }
.talk-refine label { display:grid; gap:9px; font-size:12px; }
.talk-refine textarea { width:100%; min-height:120px; border:1px solid var(--line); padding:12px; font:inherit; resize:vertical; }
.talk-refine>p:not(.eyebrow),.talk-save-note { font-size:11px; line-height:1.5; color:var(--ink-3); }
.emotion-study { display:flex; flex-wrap:wrap; gap:6px; margin:18px 0; }
.emotion-study button { border:1px solid var(--line); background:white; border-radius:30px; padding:7px 10px; font-size:11px; cursor:pointer; }
.emotion-study button:hover { border-color:var(--emotion-color); color:var(--emotion-color); }
.talk-save-note { display:block; margin-top:12px; }
@keyframes feeling-draw { 0%,100%{stroke-dashoffset:0} 50%{stroke-dashoffset:55} }
@keyframes feeling-drift { from{transform:translateY(-8px) rotate(-9deg)} to{transform:translateY(8px) rotate(7deg)} }
@media(max-width:600px) { .talk-top {gap:5px;flex-wrap:wrap} .talk-top .talk-mark{width:58px} .talk-top button{font-size:10px;padding:7px} .talk-who{flex:1} .talk-refine-toggle{order:3} .emotion-atmosphere{inset:110px 0 220px} .emotion-etching{left:1%;top:24%;width:72px} #emotion-moment{right:3%;top:67%;max-width:70px;font-size:12px} .talk-mic{width:88px;height:88px} .gallery-tabs{gap:15px} .gallery-tabs span{display:none} }
@media(prefers-reduced-motion:reduce) { .emotion-etching,.emotion-etching path{animation:none!important} .cast-card{transition:none} }

/* Piatrice keeps the one Gallery Talk transcript. Her stage alone becomes the
   Unreal casting truck with the canonical live clock. */
.talk-stage[data-origin="gallery"][data-scene="piatrice-audition"] { --emotion-color:#ff3f9e; display:block; padding:0; overflow:hidden; background:#050408; color:#fff; }
.talk-stage[data-scene="piatrice-audition"] .talk-character { position:absolute; z-index:1; inset:0; width:100%; height:100%!important; min-height:100%!important; max-height:none!important; margin:0!important; isolation:isolate; overflow:hidden; }
.talk-stage[data-scene="piatrice-audition"] .conversation-performer { position:absolute; z-index:2; inset:0; width:100%!important; max-width:none!important; height:100%!important; overflow:hidden; animation:piatrice-arrival 1.1s cubic-bezier(.16,.8,.24,1) both; }
.talk-stage[data-scene="piatrice-audition"] .conversation-canvas { position:absolute; inset:0; width:100%!important; height:100%!important; filter:none; touch-action:none; }
.talk-stage[data-scene="piatrice-audition"] .talk-top { position:absolute; z-index:12; inset:0 0 auto; min-height:96px; padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 34px max(18px,env(safe-area-inset-left)); color:#fff; background:linear-gradient(#07060bd9 0%,#07060b80 48%,transparent 100%); }
.talk-stage[data-scene="piatrice-audition"] .talk-mark { filter:invert(1); }
.talk-stage[data-scene="piatrice-audition"] .talk-top button { color:#fff; border-color:rgba(255,255,255,.24); background:rgba(7,6,11,.22); }
.talk-stage[data-scene="piatrice-audition"] .talk-controls { position:absolute; z-index:12; inset:auto 0 0; padding:96px max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); background:linear-gradient(transparent,#07060b9c 42%,#07060bed 100%); pointer-events:none; }
.talk-stage[data-scene="piatrice-audition"] .talk-controls>* { pointer-events:auto; }
.talk-stage[data-scene="piatrice-audition"] .talk-gallery-action { position:absolute; left:50%; bottom:calc(136px + env(safe-area-inset-bottom)); translate:-50% 0; z-index:13; }
.talk-stage[data-scene="piatrice-audition"] .talk-wave { display:none; }
.talk-stage[data-scene="piatrice-audition"] .emotion-atmosphere { display:none; }
.audition-hud { position:absolute; z-index:8; top:12px; right:12px; display:flex; align-items:center; gap:13px; padding:9px 11px; color:#f8edf5; border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(7,6,9,.68); box-shadow:0 12px 34px rgba(0,0,0,.28); backdrop-filter:blur(14px); }
.audition-recording { display:flex; align-items:center; gap:7px; color:rgba(248,237,245,.65); font:650 9px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; }
.audition-recording i { width:8px; height:8px; border-radius:50%; background:#50474f; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.audition-hud>strong { min-width:58px; color:#fff; font:400 22px/1 var(--sans); font-variant-numeric:tabular-nums; letter-spacing:-.04em; }
.talk-stage[data-audition-live="true"] .audition-recording i { background:#ff273d; box-shadow:0 0 8px #ff273d,0 0 24px rgba(255,39,61,.62); animation:piatrice-rec 1.25s ease-in-out infinite; }
.audition-hud button { padding:6px 9px; border:1px solid rgba(255,255,255,.2); border-radius:999px; color:#fff; background:rgba(255,255,255,.06); font:600 9px/1 var(--sans); cursor:pointer; }
.casting-choice { display:grid; gap:7px; width:min(360px,92vw); padding:10px; border:1px solid rgba(255,255,255,.16); border-radius:18px; background:rgba(9,6,13,.86); backdrop-filter:blur(18px); }
.casting-choice>span { color:#ff8cc5; font:750 9px/1 var(--sans); letter-spacing:.16em; }
.casting-choice button { padding:9px 12px; border:1px solid rgba(255,255,255,.15); border-radius:999px; color:#fff; background:rgba(255,255,255,.05); font:600 11px/1 var(--sans); cursor:pointer; }
.casting-choice p,.casting-choice-note { margin:0; color:rgba(255,255,255,.68); font:11px/1.4 var(--sans); }
.talk-stage[data-scene="piatrice-audition"][data-casting-choice="true"] .talk-subtitles,
.talk-stage[data-scene="piatrice-audition"][data-casting-choice="true"] .talk-mic,
.talk-stage[data-scene="piatrice-audition"][data-casting-choice="true"] .talk-hint,
.talk-stage[data-scene="piatrice-audition"][data-casting-choice="true"] .talk-wave { display:none!important; pointer-events:none!important; }
.talk-stage[data-scene="piatrice-audition"][data-casting-choice="true"] .talk-gallery-action { position:relative; z-index:14; pointer-events:auto; }
@keyframes piatrice-rec { 50% { opacity:.58; transform:scale(.88); } }
@keyframes piatrice-arrival { from { opacity:0; transform:translateY(28px) scale(.965); filter:blur(8px); } to { opacity:1; transform:none; filter:none; } }
@media(max-width:899px) { .audition-hud { top:6px; right:6px; gap:8px; padding:7px 9px; } .audition-hud>strong { min-width:49px; font-size:18px; } }
@media(min-width:900px) {
  .talk-stage[data-scene="piatrice-audition"] { padding-inline:0; }
  .talk-stage[data-scene="piatrice-audition"] .talk-character { grid-column:auto; grid-row:auto; }
  .talk-stage[data-scene="piatrice-audition"] .talk-controls { grid-column:auto; grid-row:auto; padding-bottom:max(24px,env(safe-area-inset-bottom)); }
}
@media(prefers-reduced-motion:reduce) { .audition-recording i,.talk-stage[data-scene="piatrice-audition"] .conversation-performer { animation:none!important; } }
.talk-stage[data-view="chat"] .emotion-atmosphere { opacity:.25; }
.talk-stage[data-state="speaking"] .talk-mic { background:var(--ink); }

/* Give the performer the available frame; avoid clipping their body with a portrait mask. */
.talk-stage { height:100dvh; grid-template-rows:auto minmax(160px,1fr) auto 30px auto; }
.talk-stage .talk-character { height:auto; min-height:0; max-height:none; margin:0; }
.talk-character > .cyc,.talk-character > .cyc canvas { mask-image:none; -webkit-mask-image:none; }
.talk-stage .talk-wave { height:28px; margin:0 auto; }
.talk-subtitles { min-height:0; padding:8px 4px; }
/* Spoken lines remain available to assistive technology and Chat history without
   covering the living performer during the direct conversation. */
.talk-stage[data-view="talk"] .talk-subtitles {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.talk-stage[data-view="chat"] { grid-template-rows:auto minmax(100px,.55fr) minmax(0,1fr) auto; }
.talk-stage[data-view="chat"] .talk-character { transform:none; margin:0; }
.talk-stage[data-view="chat"] .talk-gallery-action { display:none; }
.talk-stage[data-view="chat"] .talk-log { min-height:0; overflow:auto; }
.cast-shell { display:grid; place-items:center; height:100%; background:radial-gradient(ellipse at 50% 60%,#f4e9e9,white 65%); }
.cast-shell svg { height:60%; width:50%; overflow:visible; stroke:#b1978b; stroke-width:1; fill:#fffaf6; filter:drop-shadow(0 18px 20px #8f797420); }
.cast-shell svg path+path { fill:none; stroke:#d5bdb2; stroke-dasharray:8 3; }
@media(max-height:650px) { .talk-mic{width:68px;height:68px} .talk-them{font-size:20px} .talk-hint{font-size:9px} }

/* On wide screens the performer keeps the full height while the conversation sits beside them. */
@media(min-width:900px) {
  .talk-stage { grid-template-columns:minmax(0,1.25fr) minmax(340px,1fr); grid-template-rows:auto minmax(0,1fr) 30px auto; column-gap:30px; padding-inline:32px; }
  .talk-stage .talk-top { grid-column:1/-1; }
  .talk-stage .talk-character { grid-column:1; grid-row:2/5; }
  /* Send backstage + Gallery live inside .talk-control-orbit beside the mic (conversation.css). A stage-grid placement here stacked them under the mic (Nina, HQ 6c236434). */
  .talk-stage .talk-subtitles { grid-column:2; grid-row:2; align-self:center; padding:24px; }
  .talk-stage .talk-wave { grid-column:2; grid-row:3; }
  .talk-stage .talk-controls { grid-column:2; grid-row:4; padding-bottom:22px; }
  .talk-stage[data-view="chat"] { grid-template-rows:auto minmax(0,1fr) 30px auto; }
  .talk-stage[data-view="chat"] .talk-log { grid-column:2; grid-row:2/4; align-self:stretch; }
  .talk-stage .emotion-etching { left:1%; width:100px; opacity:.45; }
  .talk-stage #emotion-moment { left:40%; right:auto; top:65%; max-width:100px; }
}
/* Living rooms — the browser-native 3D meeting place shared with the mobile shell. */
.living-rooms{--room-ink:#f7f0e9;--room-glow:#ff9d73;position:relative;min-height:100svh;margin-top:-84px;padding:clamp(108px,12vh,150px) clamp(18px,5vw,72px) 42px;overflow:hidden;color:var(--room-ink);background:radial-gradient(circle at 68% 24%,color-mix(in srgb,var(--room-glow) 24%,transparent),transparent 31%),linear-gradient(145deg,#130f17 0%,#241522 54%,#0b0a0f 100%)}
.living-rooms.room-terrace{--room-glow:#8edbd2;background:radial-gradient(circle at 72% 18%,rgba(109,225,215,.24),transparent 30%),linear-gradient(150deg,#071616,#123136 55%,#100d17)}
.living-rooms.room-confessional{--room-glow:#ed70ad;background:radial-gradient(circle at 67% 26%,rgba(255,93,169,.27),transparent 28%),linear-gradient(145deg,#190915,#3a1530 52%,#09070d)}
.rooms-title{position:relative;z-index:5;max-width:650px}.rooms-title .eyebrow{color:rgba(255,255,255,.62)}.rooms-title h1{margin:.3rem 0;font-size:clamp(3rem,7.4vw,7.8rem);line-height:.82;letter-spacing:-.065em}.rooms-title h1 em{color:var(--room-glow);font-family:Georgia,serif;font-weight:400}.rooms-title>p:last-child{max-width:560px;color:rgba(255,255,255,.7);font-size:clamp(1rem,1.35vw,1.25rem)}
.room-tabs{position:relative;z-index:7;display:flex;gap:8px;margin:26px 0;overflow:auto;scrollbar-width:none}.room-tabs button{white-space:nowrap;padding:10px 16px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(9,7,12,.25);color:#fff;backdrop-filter:blur(12px)}.room-tabs button[aria-current=true]{border-color:var(--room-glow);background:color-mix(in srgb,var(--room-glow) 18%,transparent)}
.room-empty{position:relative;z-index:2;min-height:44vh;display:grid;place-content:center;text-align:center;border:1px solid rgba(255,255,255,.13);border-radius:46% 46% 28px 28px/30% 30% 28px 28px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.015));box-shadow:inset 0 1px rgba(255,255,255,.16),0 50px 100px rgba(0,0,0,.25);overflow:hidden}.room-empty h2{font-size:clamp(1.8rem,3vw,3.2rem);margin:0}.room-empty p{max-width:530px;margin:12px auto;color:rgba(255,255,255,.68)}.room-light{position:absolute;inset:-50% 18% 25%;background:conic-gradient(from 210deg,transparent,var(--room-glow),transparent 38%);filter:blur(60px);opacity:.35;animation:room-breathe 7s ease-in-out infinite alternate}
.room-scene{position:relative;z-index:2;min-height:min(690px,72svh);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);align-items:end;border:1px solid rgba(255,255,255,.14);border-radius:38px;overflow:hidden;background:linear-gradient(140deg,rgba(255,255,255,.08),rgba(255,255,255,.015));box-shadow:0 40px 120px rgba(0,0,0,.35)}
.room-character-stage{position:relative;min-height:620px;background:radial-gradient(ellipse at 50% 78%,color-mix(in srgb,var(--room-glow) 19%,transparent),transparent 44%)}.room-character-stage .model-stage,.room-character-stage .stage-body{height:620px;min-height:620px}.room-character-stage .model-stage{background:transparent}.room-character-stage .stage-slate,.room-character-stage .model-arrival{display:none}.room-character-stage canvas{filter:drop-shadow(0 28px 38px rgba(0,0,0,.32))}
.room-architecture{position:absolute;inset:0;pointer-events:none}.room-architecture i{position:absolute;border:1px solid color-mix(in srgb,var(--room-glow) 38%,transparent);border-radius:50%;filter:drop-shadow(0 0 22px color-mix(in srgb,var(--room-glow) 28%,transparent))}.room-architecture i:nth-child(1){width:52vw;height:52vw;right:-12vw;top:-25vw}.room-architecture i:nth-child(2){width:32vw;height:32vw;left:4vw;bottom:-20vw}.room-architecture i:nth-child(3){inset:8% 5%;border-radius:38px;opacity:.35}
.room-presence{position:relative;z-index:5;padding:clamp(28px,4vw,58px);align-self:center}.room-presence>p{display:flex;gap:9px;align-items:center;color:rgba(255,255,255,.66);font-size:.78rem;text-transform:uppercase;letter-spacing:.16em}.room-presence h2{font:400 clamp(1.65rem,3vw,3.4rem)/1.04 Georgia,serif;letter-spacing:-.035em}.room-actions{display:grid;gap:10px;margin-top:26px}.room-talk,.room-card-door{border:0;border-radius:999px;background:var(--room-glow);color:#171017;padding:16px 22px;font-weight:750;text-align:center;box-shadow:0 16px 46px color-mix(in srgb,var(--room-glow) 25%,transparent)}
.room-cast-dock{position:relative;z-index:7;display:flex;gap:13px;overflow-x:auto;padding:22px 3px 4px;scroll-snap-type:x proximity}.room-cast-member{flex:0 0 112px;scroll-snap-align:start;border:0;background:transparent;color:#fff;text-align:left}.room-cast-member span{display:block;aspect-ratio:4/5;border-radius:54px 54px 18px 18px;overflow:hidden;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08)}.room-cast-member img{width:100%;height:100%;object-fit:cover}.room-cast-member b{display:block;padding:8px 5px;font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-card-door{padding:10px 14px;font-size:.76rem;box-shadow:none}
@keyframes room-breathe{to{transform:translate3d(3%,-2%,0) rotate(8deg);opacity:.62}}
@media(max-width:760px){.living-rooms{margin-top:-72px;padding:94px 14px 28px}.rooms-title h1{font-size:clamp(3rem,17vw,5.5rem)}.room-scene{grid-template-columns:1fr;min-height:75svh}.room-character-stage,.room-character-stage .model-stage,.room-character-stage .stage-body{min-height:54svh;height:54svh}.room-presence{margin-top:-10svh;padding:26px;background:linear-gradient(0deg,rgba(8,7,11,.94),rgba(8,7,11,.7),transparent);align-self:end}.room-presence h2{font-size:1.8rem}.room-empty{min-height:55svh;border-radius:42% 42% 24px 24px/18% 18% 24px 24px}.room-tabs{margin:18px 0}.room-cast-dock{margin-inline:-14px;padding-inline:14px}.room-cast-member{flex-basis:92px}}
@media(prefers-reduced-motion:reduce){.room-light{animation:none}}

/* ── Animation roles (custom import, 2026-10-05) ───────────────────────────────
   Mobile first: one column, the stage on top. From 980px the stage column sticks beside the role board. */
.roles-step { position: relative; isolation: isolate; margin-top: 56px; padding-top: 34px; border-top: 1px solid rgba(11,13,18,.1); }
.roles-step::before { content: ""; position: absolute; z-index: -1; top: 96px; right: -8vw; width: min(50vw, 620px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(183,156,255,.24), rgba(189,45,114,.08) 38%, transparent 70%); filter: blur(20px); pointer-events: none; }
.roles-head { display: grid; gap: 14px; }
.roles-head h2 { margin: 8px 0 0; font-size: clamp(34px, 6vw, 64px); font-weight: 300; line-height: .95; letter-spacing: -.05em; }
.roles-head > p { max-width: 560px; margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.help-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.55); color: var(--ink); font: 600 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.help-pill:hover, .help-pill:focus-visible { border-color: var(--magenta); color: var(--magenta); }
.board-actions .help-pill { justify-content: center; width: 34px; min-width: 34px; padding: 0; font-size: 13px; letter-spacing: 0; }
.roles-body { margin-top: 28px; padding: clamp(14px, 2.8vw, 30px); overflow: hidden; border: 1px solid rgba(255,255,255,.74); border-radius: 26px; background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(246,247,251,.46)); box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 28px 80px rgba(42,37,58,.12); backdrop-filter: blur(22px) saturate(1.2); }
.roles-wait { color: var(--ink-3); font: 12px/1.5 var(--mono); }
.roles-note { max-width: 640px; padding: 20px 22px; border: 1px solid var(--line); background: rgba(255,255,255,.54); }
.roles-note strong { font-size: 16px; font-weight: 500; }
.roles-note p { margin: 8px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.55; }
.roles-layout { display: grid; gap: 28px; }
.roles-stage-col, .roles-board-col { display: grid; gap: 0; align-content: start; min-width: 0; }
.roles-stage-col { overflow: hidden; border: 1px solid rgba(255,255,255,.72); border-radius: 22px; background: rgba(255,255,255,.34); box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 20px 55px rgba(33,27,48,.1); }
.roles-board-col { gap: 22px; }
.roles-stage { position: relative; overflow: hidden; margin: 0; border: 0; border-radius: 20px 20px 0 0; background: radial-gradient(circle at 52% 35%, rgba(183,156,255,.34), transparent 34%), radial-gradient(circle at 70% 12%, rgba(189,45,114,.18), transparent 32%), linear-gradient(155deg, #17151f, #090a0f 72%); }
#roles-canvas { display: block; width: 100%; height: clamp(300px, 62vw, 460px); touch-action: pan-y; cursor: grab; filter: drop-shadow(0 26px 24px rgba(0,0,0,.3)); }
#roles-canvas:active { cursor: grabbing; }
.roles-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.12); background: #0c0d12; color: white; font-size: 13px; }
.roles-now span { color: rgba(255,255,255,.48); font: 600 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.roles-now strong { font-weight: 500; }
.roles-now em { color: rgba(255,255,255,.5); font-style: normal; font-size: 12px; }
.rig-card, .clip-list, .coverage { padding: 22px 20px; border: 0; border-top: 1px solid rgba(11,13,18,.09); background: transparent; }
.custom-role, .manifest-download { padding: 20px; border: 1px solid rgba(11,13,18,.1); border-radius: 16px; background: rgba(255,255,255,.44); }
.rig-card h3 { margin: 7px 0 12px; font: 400 28px/1.05 var(--serif); letter-spacing: -.025em; }
.rig-confidence { margin: 0; color: var(--ink-3); font: 600 9px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.rig-counts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rig-counts li { padding: 4px 0; border-bottom: 1px solid rgba(11,13,18,.14); font-size: 12px; }
.rig-source { margin: 12px 0 0; color: var(--ink-3); font-size: 12px; }
.rig-notes { margin: 12px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.rig-notes li + li { margin-top: 6px; }
.facing-field { margin: 16px 0 0; }
.facing-field > summary { cursor: pointer; color: var(--ink-2); font-size: 12px; text-decoration: underline; text-decoration-color: rgba(11,13,18,.2); text-underline-offset: 3px; }
.facing-field > .field { margin-top: 12px; }
.facing-field small { line-height: 1.45; }
.clip-list h3, .coverage h3, .custom-role h3, .manifest-download h3 { margin: 0 0 12px; font-size: 16px; font-weight: 500; }
.clip-list h3 small { margin-left: 6px; color: var(--ink-3); font: 11px var(--mono); }
.clip-list ul { display: grid; margin: 0; padding: 0; list-style: none; }
.clip-list li { display: grid; grid-template-columns: 36px 1fr; column-gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid rgba(11,13,18,.08); }
.clip-list li > span { grid-column: 2; }
.play-clip, .preview-button { min-height: 36px; border: 1px solid var(--ink); border-radius: 3px; background: transparent; cursor: pointer; font-size: 12px; font-weight: 600; }
.play-clip { width: 36px; padding: 0; grid-row: span 3; align-self: start; font-size: 11px; }
.play-clip[aria-pressed="true"], .preview-button[aria-pressed="true"] { background: var(--ink); color: white; }
.clip-name { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
.clip-meta, .clip-use { color: var(--ink-3); font-size: 11px; }
.clip-use { color: var(--ink-2); }
.cov-bar { display: flex; height: 12px; overflow: hidden; border: 1px solid rgba(11,13,18,.2); border-radius: 999px; background: rgba(255,255,255,.7); }
.cov-bar i { display: block; height: 100%; }
.cov-bar i + i { border-left: 2px solid var(--paper-strong); }
.cov-clip { background: var(--ink); }
.cov-borrowed { background: var(--magenta); }
.cov-procedural { background: var(--lilac); }
.cov-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; }
.cov-legend div { display: grid; gap: 2px; }
.cov-legend dt { display: flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 11px; }
.cov-legend dt i { width: 9px; height: 9px; flex: none; border-radius: 50%; }
.cov-legend dd { margin: 0; font-size: 28px; font-weight: 300; letter-spacing: -.04em; }
.honest { margin: 16px 0 0; padding: 12px 14px 12px 30px; border-left: 2px solid var(--magenta); background: rgba(189,45,114,.05); font-size: 13px; line-height: 1.5; }
.honest li + li { margin-top: 6px; }
.board-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.board-actions .ink-button { min-height: 48px; padding: 0 22px; font-size: 13px; }
.board-hint { flex-basis: 100%; margin: 0; color: var(--ink-3); font-size: 12px; line-height: 1.5; }
.board-hint a, .roles-note a, .roles-head a:not(.help-pill) { color: var(--ink); }
.role-board { display: grid; gap: 26px; }
.role-group header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
.role-group h3 { margin: 0; font-size: 20px; font-weight: 400; letter-spacing: -.02em; }
.role-group header p { margin: 0; color: var(--ink-3); font-size: 12px; }
.role-group ol { margin: 0; padding: 0; list-style: none; }
.role-row { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid rgba(11,13,18,.09); }
.role-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.role-name strong { font-size: 15px; font-weight: 600; }
.role-name em { color: var(--teal); font: 600 9px/1 var(--mono); font-style: normal; letter-spacing: .14em; text-transform: uppercase; }
.role-name span { flex-basis: 100%; color: var(--ink-3); font-size: 12px; }
.role-pick select { width: 100%; min-height: 42px; border: 0; border-bottom: 1px solid rgba(21,18,24,.28); background: rgba(255,255,255,.6); color: var(--ink); padding: 0 10px; font-size: 13px; }
.role-pick select:focus { outline: 2px solid var(--magenta); outline-offset: 1px; }
.role-state { display: flex; align-items: center; gap: 8px; }
.role-state .preview-button { margin-left: auto; padding: 0 14px; }
.remove-custom { min-height: 36px; border: 0; background: transparent; color: var(--danger); cursor: pointer; font-size: 12px; text-decoration: underline; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.chip[data-kind="clip"] { background: rgba(11,13,18,.08); }
.chip[data-kind="clip"]::before { background: var(--ink); }
.chip[data-kind="borrowed"] { background: rgba(189,45,114,.09); color: var(--plum); }
.chip[data-kind="borrowed"]::before { background: var(--magenta); }
.chip[data-kind="procedural"] { background: rgba(183,156,255,.2); color: #3d2a73; }
.chip[data-kind="procedural"]::before { background: var(--lilac); }
.role-why { margin: 0; color: var(--ink-2); font-size: 12px; line-height: 1.5; }
.role-why b { font-weight: 600; }
.by-author { color: var(--teal); }
.by-suggested { color: var(--plum); }
.custom-fields { display: grid; gap: 0 12px; align-items: end; }
.custom-fields .field { margin: 10px 0; }
.custom-fields .quiet-button { margin: 10px 0; }
.manifest-download code { font-family: var(--mono); font-size: 11px; }
.manifest-download .ink-button { margin-top: 14px; min-height: 48px; }
.manifest-download .ink-button:disabled { opacity: .45; cursor: not-allowed; }
.manifest-errors, .manifest-warnings { margin: 14px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.5; }
.manifest-errors { color: var(--danger); }
.manifest-warnings { color: var(--ink-2); }
.performance-library { display: grid; gap: 20px; padding: clamp(18px, 2.4vw, 28px); border: 1px solid rgba(255,255,255,.78); border-radius: 22px; background: rgba(255,255,255,.52); box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 18px 50px rgba(33,27,48,.08); backdrop-filter: blur(18px) saturate(1.15); }
.performance-library > header h3, .special-behaviors h3 { margin: 0 0 8px; font: 400 24px/1.05 var(--serif); letter-spacing: -.02em; }
.performance-library > header > p:last-child, .special-behaviors > header > p { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.55; }
.performance-summary { display: flex; align-items: baseline; gap: 7px; padding: 7px 0 7px 14px; border-left: 2px solid var(--magenta); color: var(--ink-2); font: 10px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.performance-summary strong { font: 300 25px/1 var(--sans); letter-spacing: -.04em; }
.emotion-matrix { display: grid; gap: 2px; }
.emotion-row { border: 0; border-bottom: 1px solid rgba(11,13,18,.1); background: transparent; transition: background .2s ease, box-shadow .2s ease; }
.emotion-row[open] { margin: 3px -8px; border-bottom-color: transparent; border-radius: 15px; background: rgba(255,255,255,.66); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 12px 32px rgba(38,31,52,.07); }
.emotion-row summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 13px 14px; cursor: pointer; }
.emotion-row summary > span { display: grid; flex: 1 1 260px; gap: 4px; }
.emotion-row summary strong { font-size: 15px; }
.emotion-row summary small { color: var(--ink-3); font: 9px/1.2 var(--mono); overflow-wrap: anywhere; }
.emotion-remove { flex: 0 0 auto; opacity: .54; transition: opacity .2s ease, background .2s ease; }
.emotion-row:hover .emotion-remove, .emotion-remove:focus-visible { opacity: 1; }
.custom-emotion-form { position: relative; overflow: hidden; padding: 16px; border: 1px solid rgba(255,255,255,.82); border-radius: 18px; background: linear-gradient(125deg, rgba(255,255,255,.78), rgba(247,240,255,.54) 56%, rgba(224,247,246,.5)); box-shadow: inset 0 1px 0 #fff, 0 14px 36px rgba(40,29,61,.09); }
.custom-emotion-form::before { content: ''; position: absolute; inset: -70% 32% 45% -12%; border-radius: 50%; background: radial-gradient(circle, rgba(212,68,154,.14), transparent 66%); pointer-events: none; }
.custom-emotion-form > div { position: relative; display: grid; grid-template-columns: minmax(120px,.55fr) minmax(250px,1.45fr) auto; gap: 10px; align-items: end; }
.custom-emotion-form .field { margin: 0; }
.custom-emotion-form .quiet-button { min-height: 42px; margin: 0; white-space: nowrap; }
.custom-emotion-form .inline-error { position: relative; margin: 10px 0 0; }
.emotion-slots { display: grid; gap: 12px; padding: 0 14px 14px; }
.emotion-slots > section { min-width: 0; padding-top: 12px; border-top: 1px solid rgba(11,13,18,.12); }
.emotion-slots h4, .special-behavior h4 { margin: 0 0 9px; font-size: 13px; font-weight: 650; }
.performance-slot { display: grid; gap: 8px; }
.performance-slot > p { margin: 0; color: var(--ink-3); font-size: 11px; }
.performance-slot ol, .special-behavior ol { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.performance-asset { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 8px; align-items: center; padding: 9px 10px; border-radius: 9px; background: rgba(11,13,18,.045); }
.performance-asset > span { min-width: 0; }
.performance-asset strong, .performance-asset small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.performance-asset strong { font: 10px/1.35 var(--mono); }
.performance-asset small, .performance-asset em { color: var(--ink-3); font-size: 10px; font-style: normal; }
.performance-asset .preview-button, .performance-asset .remove-custom { min-height: 30px; padding: 0 8px; font-size: 10px; }
.performance-add { display: grid; gap: 6px; }
.performance-add .quiet-button, .special-behavior > .quiet-button { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; margin: 0; padding: 0 10px; cursor: pointer; font-size: 10px; }
.performance-add input[type=file], .special-behavior input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.performance-defaults { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px 0; border-block: 1px solid rgba(11,13,18,.1); background: transparent; }
.performance-defaults p { flex: 1 1 260px; margin: 0; color: var(--ink-2); font-size: 12px; line-height: 1.45; }
.performance-defaults label { display: inline-flex; align-items: center; min-height: 38px; margin: 0; cursor: pointer; }
.performance-defaults input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.performance-add select { width: 100%; min-height: 36px; border: 1px solid var(--line); background: white; padding: 0 8px; font-size: 11px; }
.is-disabled { opacity: .45; cursor: not-allowed !important; }
.special-behaviors { display: grid; gap: 12px; padding-top: 18px; border-top: 1px solid var(--ink); }
.special-behavior { display: grid; gap: 10px; padding: 14px; border: 0; border-radius: 14px; background: rgba(255,255,255,.58); box-shadow: inset 0 0 0 1px rgba(11,13,18,.08); }
.special-behavior > header { display: flex; justify-content: space-between; gap: 12px; }
.special-behavior header p, .special-behavior header small { display: block; margin: 3px 0 0; color: var(--ink-2); font-size: 11px; line-height: 1.45; }
.special-behavior header small { color: var(--ink-3); }
.add-behavior { overflow: hidden; border: 1px solid rgba(255,255,255,.8); border-radius: 15px; background: linear-gradient(125deg, rgba(255,255,255,.7), rgba(244,238,252,.48)); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.add-behavior > summary { padding: 14px 16px; cursor: pointer; font-size: 13px; font-weight: 650; list-style-position: inside; }
.add-behavior[open] > summary { border-bottom: 1px solid rgba(11,13,18,.08); }
.add-behavior .custom-role { margin: 0; border: 0; border-radius: 0; background: transparent; }
.add-behavior .behavior-file input { width: 100%; min-height: 42px; padding: 8px 0; font-size: 11px; }
.check-label { display: flex; align-items: center; gap: 7px; min-height: 42px; font-size: 12px; }
@media (max-width: 639px) {
  .custom-emotion-form > div { grid-template-columns: 1fr; }
  .custom-emotion-form .quiet-button { width: 100%; }
}
@media (min-width: 640px) {
  .role-row { grid-template-columns: minmax(0, 1fr) minmax(170px, 220px); align-items: center; column-gap: 16px; }
  .role-pick { grid-column: 2; grid-row: 1; }
  .role-state, .role-why { grid-column: 1 / -1; }
  .custom-fields { grid-template-columns: 1fr 1fr auto; }
  .emotion-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .performance-asset { grid-template-columns: minmax(0,1fr) auto auto; }
  .performance-add { grid-template-columns: auto minmax(0,1fr); }
  .special-behaviors .custom-fields { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 980px) {
  .roles-head { grid-template-columns: 1fr minmax(280px, 470px); align-items: end; gap: 38px; }
  .roles-layout { grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr); gap: 28px; align-items: start; }
  .roles-stage-col { position: sticky; top: 92px; }
  #roles-canvas { height: 420px; }
}

/* Custom character #3: one clear journey, with engine details available only
   where they help the author make a choice. */
.custom-progress { margin: 0 0 30px; border-bottom: 1px solid var(--line); }
.custom-progress ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0 0 14px; list-style: none; }
.custom-progress li { display: flex; gap: 8px; align-items: center; color: var(--ink-3); font-size: 12px; }
.custom-progress li span { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 10px; }
.custom-progress li[data-state="current"] { color: var(--ink); font-weight: 700; }
.custom-progress li[data-state="current"] span { color: white; border-color: var(--ink); background: var(--ink); }
.custom-progress li[data-state="done"] span { border-color: var(--ink); }
.eightfold-demo { position: relative; display: grid; gap: clamp(24px, 4vw, 52px); align-items: center; overflow: hidden; margin: 0 0 36px; padding: clamp(16px, 3vw, 30px); border: 1px solid rgba(255,255,255,.82); border-radius: 28px; background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(239,240,247,.48)); box-shadow: inset 0 1px 0 white, 0 30px 90px rgba(41,32,62,.14); backdrop-filter: blur(22px) saturate(1.2); }
.eightfold-demo::after { content: ""; position: absolute; z-index: -1; right: -18%; bottom: -70%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: rgba(183,156,255,.28); filter: blur(42px); }
.eightfold-portrait { position: relative; min-height: 330px; overflow: hidden; border-radius: 21px; background: radial-gradient(circle at 55% 38%, rgba(183,156,255,.35), transparent 32%), radial-gradient(circle at 70% 70%, rgba(189,45,114,.24), transparent 35%), #0d0c12; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 28px 60px rgba(16,12,25,.24); }
.eightfold-portrait img { width: 100%; height: 100%; min-height: 330px; max-height: 470px; object-fit: contain; filter: drop-shadow(0 28px 24px rgba(0,0,0,.42)); }
.eightfold-portrait span { position: absolute; z-index: 1; top: 16px; left: 18px; color: rgba(255,255,255,.62); font: 600 9px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.eightfold-demo h2 { margin: 4px 0 10px; font-size: clamp(28px, 4vw, 44px); }
.eightfold-demo > div > p:not(.eyebrow):not(.eightfold-status) { max-width: 62ch; color: var(--ink-2); line-height: 1.55; }
.eightfold-demo ul { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0; padding: 0; list-style: none; }
.eightfold-demo li { padding: 6px 0; border-bottom: 1px solid rgba(11,13,18,.16); font: 600 10px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.eightfold-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.eightfold-actions .quiet-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; }
.eightfold-status { min-height: 1.5em; margin: 10px 0 0; color: var(--teal); font-size: 12px; }
.rig-parts { margin-top: 14px; padding: 13px 0; border-block: 1px solid rgba(11,13,18,.1); background: transparent; }
.rig-parts > strong { display: block; margin-bottom: 8px; font-size: 12px; }
.rig-parts ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rig-parts li { padding: 4px 7px; border-radius: 6px; background: rgba(11,13,18,.045); font-size: 11px; }
.rig-parts b { margin-right: 2px; font-size: 14px; }
@media (min-width: 860px) { .eightfold-demo { grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr); } }
.custom-character-journey .tray > .custom-progress { margin: -6px 0 26px; }
.custom-static-stage { display: grid; width: min(72%, 440px); min-height: 260px; place-content: center; gap: 10px; margin: auto; padding: 34px; border: 1px solid rgba(11,13,18,.2); background: rgba(255,255,255,.68); text-align: center; }
.custom-static-stage strong { font: 500 clamp(28px, 5vw, 58px)/1 var(--serif); }
.custom-static-stage span { overflow-wrap: anywhere; color: var(--ink-2); font-size: 12px; }
.custom-static-stage p { max-width: 38ch; margin: 8px auto 0; color: var(--ink-3); font-size: 12px; line-height: 1.55; }
.manual-animation-board { display: grid; gap: 24px; }
.movement-next { display: grid; gap: 20px; align-items: center; margin: 30px 0 8px; padding: clamp(22px, 4vw, 38px); overflow: hidden; border: 1px solid rgba(255,255,255,.86); border-radius: 24px; background: radial-gradient(circle at 92% 0, rgba(211,155,255,.2), transparent 42%), linear-gradient(135deg, rgba(255,255,255,.86), rgba(246,239,250,.62)); box-shadow: inset 0 1px white, 0 24px 70px rgba(46,30,68,.12); backdrop-filter: blur(22px) saturate(1.18); }
.movement-next[hidden] { display: none; }
.movement-next h2 { margin: 3px 0 8px; font-size: clamp(24px, 3vw, 38px); }
.movement-next p:not(.eyebrow) { max-width: 62ch; margin: 0; color: var(--ink-2); line-height: 1.5; }
.movement-next .ink-button { min-width: min(100%, 260px); }
.movement-next-actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; }
.movement-next-actions .quiet-button, .movement-next-actions .ink-button { min-height: 48px; margin: 0; }
@media (min-width: 760px) { .movement-next { grid-template-columns: minmax(0, 1fr) auto; } }
@media (max-width: 720px) {
  .custom-progress ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  .custom-progress li { font-size: 11px; }
}

/* Custom character journey — one decision, one stage, one clear way forward. */
body:has([data-custom-scene]),body:has(.custom-flow){background:#fff}
.custom-intake,.custom-check,.custom-flow{min-height:calc(100dvh - 56px);margin-top:56px;color:#25322f;background:#fff}
.custom-intake{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr)}
.custom-intake-egg{position:relative;isolation:isolate;display:grid;min-height:calc(100dvh - 56px);place-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 72%,rgba(134,170,157,.22),transparent 42%),linear-gradient(135deg,#fff,#edf2ef 58%,#efe8f0);color:#25322f}
.custom-intake-egg canvas{position:relative;z-index:2;width:min(72%,640px);height:min(76dvh,720px);display:block}
.custom-intake-egg p{position:absolute;z-index:3;left:50%;bottom:7%;width:80%;margin:0;transform:translateX(-50%);color:#6d7f78;text-align:center;font:italic 16px/1.5 var(--serif)}
.custom-intake-action{align-self:center;width:min(460px,calc(100% - 64px));margin:auto;padding:64px 0}
.custom-intake-action h1,.custom-check-copy h1,.custom-flow-copy h1{margin:0;font-family:var(--serif);font-size:clamp(44px,5.2vw,76px);font-weight:400;line-height:.96;letter-spacing:-.045em}
.custom-intake-action>p,.custom-check-lede,.movement-question>p,.custom-review>p,.custom-screen-copy>p{max-width:43ch;margin:22px 0 34px;color:#606167;font-size:16px;line-height:1.58}
.custom-name{display:grid;gap:8px;margin-bottom:22px}
.custom-name span,.custom-step-name{color:#718079;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none}
.custom-name input{width:100%;padding:11px 0;border:0;border-bottom:1px solid #aaa9a6;border-radius:0;background:transparent;font-size:28px;outline:0}
.custom-name input:focus{border-bottom-color:#46675f}
.custom-file{display:grid;gap:4px;padding:18px 0;border-bottom:1px solid #d0ceca;cursor:pointer}
.custom-file input{position:absolute;inline-size:1px;block-size:1px;opacity:0}
.custom-file span{font-size:16px;font-weight:600}
.custom-file small{color:#77787d;font-size:12px;overflow-wrap:anywhere}
.custom-file[data-file="true"] span::after{content:'  ✓';color:#46675f}
.custom-rights{display:flex;gap:10px;align-items:flex-start;margin:22px 0;color:#67686d;font-size:12px;line-height:1.45}
.custom-rights input{margin-top:2px;accent-color:#46675f}
.custom-begin{width:100%;margin-top:8px}
.custom-intake .ink-button,.custom-check .ink-button,.custom-flow .ink-button{border:1px solid #142e29;border-radius:30px;background:#142e29;color:#fff;box-shadow:none}.custom-intake .ink-button:hover,.custom-check .ink-button:hover,.custom-flow .ink-button:hover{background:#294c42}.custom-intake .quiet-button,.custom-check .quiet-button,.custom-flow .quiet-button{border:0;border-bottom:1px solid #aabbb4;border-radius:0;background:transparent;color:#52665f;box-shadow:none}

.custom-check,.custom-flow{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(390px,.85fr)}
.custom-check-stage,.custom-flow-stage{position:sticky;isolation:isolate;top:56px;height:calc(100dvh - 56px);overflow:hidden;background:radial-gradient(ellipse at 50% 72%,rgba(134,170,157,.22),transparent 42%),linear-gradient(135deg,#fff,#edf2ef 58%,#efe8f0)}
.custom-intake-egg .music-staff,.custom-check-stage .music-staff,.custom-flow-stage>.music-staff{z-index:0;opacity:.1}.custom-intake-egg .ink-flourish,.custom-check-stage>.ink-flourish,.custom-flow-stage>.ink-flourish{z-index:0;opacity:.12}.custom-intake-egg .ink-motes,.custom-check-stage>.ink-motes,.custom-flow-stage>.ink-motes{z-index:0;opacity:.22}
.custom-check-stage .model-stage,.custom-flow-stage .model-stage,.custom-flow-stage .stage-body{width:100%;height:100%;min-height:0}
.custom-check-stage #three-stage,.custom-flow-stage #three-stage{width:100%;height:100%;filter:drop-shadow(0 24px 24px rgba(61,73,68,.18))}
.custom-turn-hint{position:absolute;z-index:4;left:50%;bottom:22px;margin:0;transform:translateX(-50%);color:#61746d;font-size:11px;letter-spacing:.01em;pointer-events:none}
.custom-check .model-arrival,.custom-flow .model-arrival{top:50%;bottom:auto;width:auto;max-width:70%;padding:0;transform:translate(-50%,-50%);border:0;border-radius:0;background:transparent;box-shadow:none;color:#29463e;text-align:center}
.custom-check .model-arrival strong,.custom-flow .model-arrival strong{font-family:var(--serif);font-size:18px;font-weight:400}.custom-check .model-arrival span,.custom-flow .model-arrival span{margin-top:7px;color:#7b8982;font-family:var(--sans);font-size:12px;letter-spacing:0}
.custom-check-copy,.custom-flow-copy{align-self:center;width:min(520px,calc(100% - 64px));margin:auto;padding:64px 0}
.custom-step-name{margin:0 0 14px}
.custom-check-lede{margin-bottom:24px;color:#2f3034;font-size:18px}
.custom-check-clear,.custom-check-notes{margin:0 0 28px;padding:15px 0;border-top:1px solid #d3d1cd;border-bottom:1px solid #d3d1cd;color:#5d5e63;font-size:13px;line-height:1.5}
.custom-check-notes p{margin:0}.custom-check-notes p+p{margin-top:10px}
.custom-advanced{margin:20px 0;border-top:1px solid #d3d1cd;border-bottom:1px solid #d3d1cd}
.custom-advanced summary{padding:16px 0;cursor:pointer;font-size:13px;font-weight:650;list-style:none}
.custom-advanced summary::after{content:'+';float:right;font-size:18px;font-weight:400}.custom-advanced[open] summary::after{content:'−'}
.custom-advanced dl{margin:0;padding:0 0 14px}.custom-advanced dl div{display:flex;justify-content:space-between;gap:20px;padding:7px 0;color:#65666b;font-size:12px}.custom-advanced dt{color:#909096}.custom-advanced dd{margin:0;text-align:right}
.custom-primary-actions,.custom-secondary-actions{display:flex;gap:10px;align-items:center;margin-top:30px}.custom-primary-actions .ink-button{margin-left:auto}
.custom-hatch-shell{position:absolute;z-index:5;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 72%,rgba(134,170,157,.22),transparent 42%),linear-gradient(135deg,#fff,#edf2ef 58%,#efe8f0);pointer-events:none}
.custom-hatch-shell canvas{width:min(64%,560px);height:min(72%,680px)}
.custom-check-stage.character-arriving .model-stage{animation:custom-character-arrive 1.25s cubic-bezier(.18,.82,.22,1) both}
@keyframes custom-character-arrive{0%{opacity:0;transform:translateY(28%) scale(.72)}55%{opacity:1;transform:translateY(-4%) scale(1.04)}100%{opacity:1;transform:none}}

.custom-flow-copy{align-self:start;min-height:calc(100dvh - 56px);padding-top:42px}
.custom-progress{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin:0 0 clamp(42px,8vh,88px);border:0;color:#6e6f75;font-size:11px}
.custom-progress>span{color:#29463e;font-weight:600}.custom-progress>i{height:1px;background:#d6dfda}.custom-progress>i b{display:block;height:1px;background:#507e6c}.custom-progress>small{font-variant-numeric:tabular-nums}
.custom-character-journey .eyebrow{display:none}
.custom-character-journey .lede{max-width:44ch;color:#67686d}
.custom-character-journey .story-heading h1,.custom-character-journey #step-title{font-family:var(--serif);font-size:clamp(40px,4.7vw,66px);font-weight:400;line-height:.98;letter-spacing:-.045em}
.custom-character-journey .tray-actions{margin-top:28px}
.custom-character-journey .voice-paths{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:24px 0;border-top:1px solid #d1cfcb;border-bottom:1px solid #d1cfcb}
.custom-character-journey .voice-source-tab{min-height:54px;border:0;border-right:1px solid #d1cfcb;border-radius:0;background:transparent;font-size:12px}.custom-character-journey .voice-source-tab:last-child{border-right:0}.custom-character-journey .voice-source-tab span{display:none}.custom-character-journey .voice-source-tab[aria-checked="true"]{background:#142e29;color:#fff}
.custom-character-journey .voice-direction-card,.custom-character-journey .own-voice,.custom-character-journey .voice-design-studio{padding:0;border:0;background:transparent;box-shadow:none}
.custom-face-mode>p,.custom-mouth-mode>p{margin:0 0 16px;color:#717278;font-size:13px;line-height:1.5}
.custom-shape-test{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding-bottom:18px}.custom-shape-test input{accent-color:#507e6c}
.mouth-map{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;padding-bottom:16px}.mouth-map label{display:grid;gap:5px;font-size:11px;color:#717278}

.movement-question{margin-top:9vh}.movement-question h1{max-width:9ch}.movement-choice{display:flex;gap:10px;align-items:center}.movement-reading{margin:16px 0 0!important;color:#929298!important;font-size:12px!important}
.movement-editor[hidden],.movement-question[hidden]{display:none}
.custom-movement-page[data-editor-open="true"] .custom-flow-copy{width:min(760px,calc(100% - 54px))}
.custom-movement-page .roles-step{margin:0;padding:0;border:0}.custom-movement-page .roles-step::before{display:none}
.custom-movement-page .roles-head{display:block}.custom-movement-page .roles-head h2{margin:0;font-size:clamp(38px,4.4vw,60px)}.custom-movement-page .roles-head>p{max-width:52ch;margin:14px 0 26px}
.custom-movement-page .roles-body{margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}
.custom-movement-page .roles-layout{display:block}.custom-movement-page .roles-stage-col{position:relative;top:auto;margin-bottom:32px;border:0;border-radius:0;background:#edf2ef;box-shadow:none}.custom-movement-page .roles-stage{border-radius:0;background:linear-gradient(135deg,#fff,#edf2ef 58%,#efe8f0)}.custom-movement-page #roles-canvas{height:360px}
.custom-movement-page .rig-card,.custom-movement-page .clip-list,.custom-movement-page .manifest-download{display:none}
.custom-movement-page .performance-library{display:block;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}.custom-movement-page .performance-library>header{margin:0 0 18px}.custom-movement-page .performance-library>header h3,.custom-movement-page .special-behaviors>header h3{font-family:var(--sans);font-size:24px;font-weight:500}.custom-movement-page .performance-library>header p{max-width:52ch}
.custom-movement-page .performance-defaults{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 28px;padding:0;border:0;background:transparent}.custom-movement-page .performance-defaults p{display:none}.custom-movement-page .performance-defaults .quiet-button{margin:0;text-align:center}
.feeling-library,.add-behavior{margin:0;border-top:1px solid #d2d0cc;border-bottom:1px solid #d2d0cc}.feeling-library>summary,.add-behavior>summary{padding:18px 0;cursor:pointer;list-style:none;font-size:14px;font-weight:650}.feeling-library>summary small{float:right;color:#8c8d92;font-weight:400}.feeling-library-inner{padding:2px 0 24px}
.custom-movement-page .custom-emotion-form{padding:0 0 22px;border:0;border-radius:0;background:transparent;box-shadow:none}.custom-movement-page .custom-emotion-form::before{display:none}
.custom-movement-page .emotion-row{border:0;border-top:1px solid #dedcd8;border-radius:0;background:transparent}.custom-movement-page .emotion-row>summary{padding:15px 0}.custom-movement-page .emotion-slots{padding:0 0 18px}
.custom-movement-page .performance-slot{border:0;background:transparent}.custom-movement-page .performance-add{display:grid;grid-template-columns:1fr 1fr;gap:8px}.custom-movement-page .performance-add label{min-width:0}.custom-movement-page .performance-add select{width:100%}
.custom-movement-page .special-behaviors{margin-top:34px}.essential-behaviors{display:grid;grid-template-columns:1fr 1fr;gap:14px}.custom-movement-page .special-behavior{padding:18px 0;border:0;border-top:1px solid #d2d0cc;border-radius:0;background:transparent}.custom-movement-page .special-behavior h4{font-size:18px}.custom-movement-page .movement-editor>.custom-primary-actions{position:sticky;bottom:0;padding:18px 0;background:#fff}

.custom-review>dl{margin:34px 0}.custom-review>dl button{display:grid;width:100%;grid-template-columns:120px 1fr;gap:18px;padding:17px 0;border:0;border-top:1px solid #d1cfcb;background:transparent;text-align:left;cursor:pointer}.custom-review>dl button:last-child{border-bottom:1px solid #d1cfcb}.custom-review dt{font-weight:650}.custom-review dd{margin:0;color:#6e6f74}.custom-review>dl button:hover dd{color:#111216}.custom-review-go{width:100%}.custom-review-note{padding:14px 0;border-bottom:1px solid #d1cfcb;color:#6f535f;font-size:13px}
.custom-screen-copy{margin-top:8vh}.custom-screen-copy .talk-cta{width:100%;min-height:64px;margin:4px 0 10px;border:0;border-top:1px solid #dce4de;border-radius:0;background:transparent;color:#173a30;font:italic 20px/1.4 var(--serif);text-align:left}.custom-screen-copy .custom-secondary-actions{flex-wrap:wrap}.custom-screen-copy .custom-secondary-actions .ink-button{margin-left:auto}

@media(max-width:900px){.custom-intake,.custom-check,.custom-flow{grid-template-columns:1fr}.custom-intake-egg,.custom-check-stage,.custom-flow-stage{position:relative;top:auto;height:44svh;min-height:300px}.custom-intake-egg{min-height:44svh}.custom-intake-egg canvas{height:36svh}.custom-intake-action,.custom-check-copy,.custom-flow-copy{width:min(620px,calc(100% - 36px));padding:38px 0 54px}.custom-progress{margin-bottom:42px}.custom-check-stage #three-stage,.custom-flow-stage #three-stage{height:44svh}.movement-question{margin-top:0}}
@media(max-width:560px){.custom-intake-action h1,.custom-check-copy h1,.custom-flow-copy h1{font-size:43px}.custom-primary-actions,.movement-choice{align-items:stretch;flex-direction:column}.custom-primary-actions .ink-button{width:100%;margin:0}.custom-character-journey .voice-paths{grid-template-columns:1fr}.custom-character-journey .voice-source-tab{border-right:0;border-bottom:1px solid #d1cfcb}.custom-movement-page .performance-defaults,.essential-behaviors,.mouth-map{grid-template-columns:1fr}.custom-movement-page .performance-add{grid-template-columns:1fr}.custom-review>dl button{grid-template-columns:1fr;gap:5px}.custom-screen-copy .custom-secondary-actions{align-items:stretch;flex-direction:column}.custom-screen-copy .custom-secondary-actions .ink-button{margin-left:0}}
/* Gallery and My Gallery share the midnight Love Bird cast wall. */
body.gallery-cinema { background:#090711; color:#fff; }
body.gallery-cinema .aurora { display:block; opacity:.82; background:
  radial-gradient(ellipse at 7% 3%,rgba(181,60,129,.24),transparent 31%),
  radial-gradient(ellipse at 78% 28%,rgba(108,70,184,.18),transparent 37%),
  radial-gradient(ellipse at 52% 92%,rgba(51,109,174,.13),transparent 42%),#090711; }
body.gallery-cinema .aurora::before { background:linear-gradient(115deg,rgba(255,126,199,.08),transparent 27%,rgba(112,93,203,.06) 65%,transparent); }
body.gallery-cinema .masthead { color:#fff; border-color:rgba(224,205,255,.12); background:rgba(9,7,17,.8); box-shadow:0 18px 45px rgba(0,0,0,.2); }
body.gallery-cinema .brand img { filter:invert(1) brightness(2); }
body.gallery-cinema .brand span, body.gallery-cinema .wallet-button, body.gallery-cinema .topnav>a span { border-color:rgba(232,216,255,.18); }
html.gallery-site .topnav > a,
html.gallery-site .topnav > .wallet-button,
html.gallery-site .topnav > .studio-menu { display:none; }
html.gallery-site .gallery-build-link {
  min-height:38px;
  padding:0 16px;
  border:1px solid rgba(235,215,255,.22);
  border-radius:999px;
  background:rgba(255,255,255,.055);
  color:inherit;
  font:560 12px/1 var(--sans);
  cursor:pointer;
  backdrop-filter:blur(16px);
}
html.gallery-site .profile-button { color:inherit; }
html.gallery-site body:not(.gallery-cinema) .gallery-build-link { border-color:var(--line); }
body.gallery-cinema .wallet-button { background:rgba(255,255,255,.04); }
.gallery-cast { position:relative; isolation:isolate; min-height:calc(100svh - 72px); overflow:hidden; color:#fff; background:
  radial-gradient(ellipse at 8% 7%,rgba(123,47,105,.18),transparent 31%),
  radial-gradient(ellipse at 88% 31%,rgba(91,63,157,.17),transparent 38%),
  linear-gradient(180deg,#0b0813 0%,#0a0812 45%,#08070f 100%); }
.gallery-cast::before { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(162,110,218,.035) 50%,transparent); }
.gallery-cast .cast-head { max-width:1320px; margin-inline:auto; }
.gallery-cast .cast-head .eyebrow { color:#f59bd0; }
.gallery-cast .cast-head>p { color:rgba(237,227,249,.62); }
.gallery-cast .cast-head h1 { color:#f7f0fb; font-family:var(--sans); font-weight:300; }
.gallery-cast .cast-head h1 em { color:#ef86c9; font-family:var(--serif); font-weight:400; }
.gallery-cast .gallery-tabs { max-width:1320px; margin-inline:auto; border-color:rgba(224,205,255,.13); }
.gallery-cast .gallery-tabs a { color:rgba(235,224,248,.58); }
.gallery-cast .gallery-tabs a[aria-current] { color:#fff; border-color:#ee8acb; }
.gallery-cast .gallery-tabs .gallery-audience { border-left-color:rgba(224,205,255,.16); }
.gallery-cast .gallery-tabs .gallery-audience a[aria-current] { background:rgba(238,138,203,.1); }
.gallery-cast .gallery-tabs .quiet-button { margin-left:auto; border-color:rgba(235,215,255,.2); background:rgba(255,255,255,.045); color:#fff; box-shadow:none; }
.gallery-cast .gallery-tabs>span { color:rgba(235,224,248,.5); }
.gallery-search { display:flex; align-items:center; gap:16px; width:min(100%,1320px); margin:-8px auto 40px; }
.gallery-search label { flex:1; }
.gallery-search input { width:100%; min-height:46px; padding:11px 16px; border:1px solid rgba(224,205,255,.2); border-radius:999px; outline:0; color:#fff; background:rgba(255,255,255,.055); font:14px/1.2 var(--sans); box-shadow:inset 0 1px 0 rgba(255,255,255,.035); }
.gallery-search input::placeholder { color:rgba(235,224,248,.48); }
.gallery-search input:focus { border-color:#ee8acb; box-shadow:0 0 0 3px rgba(238,138,203,.14); }
.gallery-search output { min-width:72px; color:rgba(235,224,248,.52); font:10px/1.2 var(--sans); letter-spacing:.12em; text-align:right; text-transform:uppercase; }
.gallery-search-empty { width:min(100%,1320px); margin:70px auto 0; color:rgba(239,225,249,.62); text-align:center; }
.gallery-cast .cast-card[hidden] { display:none; }
.gallery-cast .cast-grid { max-width:1320px; margin:48px auto 0; grid-template-columns:repeat(3,minmax(0,1fr)); gap:54px 34px; border:0; background:transparent; perspective:1400px; }
.gallery-cast .cast-card { display:grid; min-width:0; min-height:0; overflow:visible; border:0; border-radius:0; background:transparent; box-shadow:none; transform-style:preserve-3d; }
.gallery-cast .cast-card:hover { transform:translateY(-7px); box-shadow:none; }
.gallery-cast .cast-open { display:grid; min-width:0; grid-template-rows:430px 112px; color:inherit; border-radius:0; overflow:visible; }
.gallery-cast .cast-card figure { height:430px; overflow:visible; background:transparent; }
.pending-character { display:grid; place-items:center; }
.pending-character-mark { position:relative; z-index:4; display:grid; width:42%; aspect-ratio:1; place-items:center; border:1px solid rgba(245,185,225,.24); border-radius:50%; color:#f7d9ec; background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.18),transparent 30%),rgba(98,56,128,.28); box-shadow:0 24px 80px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.2); font:400 clamp(56px,8vw,112px)/1 var(--serif); }
.gallery-cast .cast-card.is-pending .gallery-arch { border-style:dashed; }
.character-window { position:relative; isolation:isolate; perspective:1000px; }
.gallery-arch { position:absolute; z-index:0; left:6%; right:6%; top:7%; bottom:2%; pointer-events:none; border:1px solid rgba(175,137,217,.18); border-bottom-color:rgba(211,174,246,.1); border-radius:49% 49% 5px 5px/34% 34% 5px 5px; background:
  radial-gradient(ellipse at 50% 72%,rgba(103,66,151,.3),rgba(44,28,69,.23) 48%,rgba(17,12,28,.06) 77%),
  linear-gradient(180deg,rgba(74,42,105,.08),rgba(107,69,153,.18)); box-shadow:inset 0 -42px 90px rgba(126,79,177,.12); transition:transform .62s cubic-bezier(.2,.75,.2,1),border-color .62s,opacity .5s; }
.gallery-arch::before { content:""; position:absolute; inset:11px; border:1px solid rgba(163,125,204,.07); border-radius:inherit; }
.gallery-arch i { position:absolute; left:12%; right:12%; bottom:6%; height:1px; background:linear-gradient(90deg,transparent,rgba(212,175,246,.13),transparent); }
.gallery-floor { position:absolute; z-index:1; left:18%; right:18%; bottom:-1%; height:9%; border-radius:50%; background:radial-gradient(ellipse,rgba(185,126,230,.2),transparent 70%); filter:blur(10px); pointer-events:none; }
.character-window canvas { position:absolute; z-index:5; left:-15%; top:-10%; width:130%; height:120%; background:transparent; overflow:visible; filter:drop-shadow(0 23px 18px rgba(0,0,0,.4)); transition:transform .72s cubic-bezier(.2,.75,.2,1),filter .55s; }
.character-window>img { position:absolute; z-index:5; inset:0; width:100%; height:100%; object-fit:contain; mix-blend-mode:normal; filter:drop-shadow(0 23px 18px rgba(0,0,0,.4)); transition:transform .72s cubic-bezier(.2,.75,.2,1),filter .55s; }
.mystery-open { cursor:default; }
.mystery-bird { position:absolute; z-index:5; inset:12% 15% 2%; display:grid; place-items:center; color:#07060b; filter:drop-shadow(0 24px 22px rgba(0,0,0,.48)); }
.mystery-bird svg { width:100%; height:100%; overflow:visible; }
.mystery-bird path { fill:currentColor; stroke:rgba(244,213,255,.14); stroke-width:1.2; }
.mystery-bird .mystery-wing { fill:#0d0a13; }
.mystery-bird text { fill:#efdaf8; font:400 72px/1 var(--serif); paint-order:stroke; stroke:rgba(123,72,154,.4); stroke-width:3px; }
.mystery-card .gallery-arch { border-color:rgba(221,177,245,.26); background:radial-gradient(ellipse at 50% 65%,rgba(134,73,174,.34),rgba(44,28,69,.26) 52%,rgba(17,12,28,.08) 78%),linear-gradient(180deg,rgba(100,49,130,.12),rgba(107,69,153,.2)); }
.mystery-card .cast-author { color:rgba(241,190,226,.62); letter-spacing:.12em; text-transform:uppercase; }
.mystery-card.is-unlocked .gallery-arch { border-color:rgba(255,207,91,.72); box-shadow:0 0 42px rgba(255,185,52,.28),inset 0 0 48px rgba(130,63,19,.22); }
.mystery-card.is-unlocked .mystery-bird { color:#1a0d08; filter:drop-shadow(0 0 22px rgba(255,190,70,.46)) drop-shadow(0 24px 22px rgba(0,0,0,.48)); }
.mystery-card.is-unlocked .mystery-bird text { fill:#ffd978; stroke:rgba(71,31,8,.68); }
.gallery-cast .cast-card:hover .gallery-arch { transform:scale(.992); border-color:rgba(238,162,220,.32); }
.gallery-cast .cast-card:hover .character-window canvas,
.gallery-cast .cast-card:hover .character-window>img { transform:translateY(-1.5%) scale(1.025); filter:drop-shadow(0 27px 22px rgba(0,0,0,.5)); }
.gallery-cast .cast-card.is-opening { pointer-events:none; }
.gallery-cast .cast-card.is-opening .gallery-arch { transform:scale(1.06); opacity:.2; }
.gallery-cast .cast-card.is-opening .character-window canvas,
.gallery-cast .cast-card.is-opening .character-window>img { transform:translateZ(75px) translateY(-2%) scale(1.08); }
.gallery-cast .cast-card figcaption { position:relative; z-index:8; display:grid; min-width:0; grid-template-rows:42px 20px; align-content:start; padding:8px 10px 0; background:transparent; text-align:center; }
.gallery-cast .cast-card h2 { display:flex; align-items:center; justify-content:center; min-width:0; height:42px; margin:0; overflow:hidden; color:#fff; font-family:var(--sans); font-size:clamp(22px,2.25vw,30px); font-weight:750; line-height:1; letter-spacing:.045em; text-transform:uppercase; text-overflow:ellipsis; white-space:nowrap; }
.gallery-cast .cast-card p { width:100%; margin:2px 0 0; overflow:hidden; color:rgba(239,225,249,.56); text-transform:none; font:11px/1.45 var(--sans); text-overflow:ellipsis; white-space:nowrap; }
.gallery-cast .cast-author { display:block; padding-top:5px; color:rgba(239,225,249,.4); font:10px/1.2 var(--sans); letter-spacing:.04em; text-transform:none; }
.gallery-cast .empty-cast { color:#fff; }
.gallery-cast .empty-cast p { color:rgba(239,225,249,.58); }

/* One conversation viewport: the established large performer with a permanent emotional transcript. */
.talk-stage { background:radial-gradient(ellipse at 24% 38%,color-mix(in srgb,var(--emotion-color) 13%,transparent),transparent 42%),linear-gradient(135deg,#fffdf9,#f2eee9); }
.talk-who { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.talk-who #talk-mood { color:var(--emotion-color); font:700 10px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.talk-who #talk-relationship { color:var(--ink-3); font:10px/1 var(--mono); letter-spacing:.08em; }
.talk-stage[data-view="talk"] .talk-log { display:grid; }
.talk-log { align-content:start; padding:10px 4px 18px; scrollbar-width:thin; }
.talk-log li { position:relative; border-radius:18px 18px 18px 5px; background:rgba(255,255,255,.74); box-shadow:0 8px 26px rgba(36,25,31,.05); }
.talk-log li[data-role="assistant"] { margin-left:0; border-color:color-mix(in srgb,var(--emotion-color) 35%,var(--line)); border-radius:18px 18px 5px 18px; background:color-mix(in srgb,var(--emotion-color) 7%,rgba(255,255,255,.8)); }
.talk-log li span { display:flex; align-items:center; gap:7px; }
.talk-log li span b { padding:4px 7px; border-radius:999px; font:700 8px/1 var(--mono); letter-spacing:.04em; text-transform:none; }
.talk-feeling { color:var(--emotion-color); background:color-mix(in srgb,var(--emotion-color) 11%,transparent); }
.talk-bond { color:#6a4b39; background:rgba(169,116,79,.1); }
@media(min-width:900px) {
  .talk-stage { grid-template-columns:minmax(0,1.4fr) minmax(360px,.78fr); grid-template-rows:auto minmax(0,1fr) auto; }
  .talk-stage .talk-character { grid-column:1; grid-row:2/4; height:auto; min-height:0; max-height:none; transform:none!important; margin:0!important; }
  .talk-stage .talk-log { grid-column:2; grid-row:2; width:100%; max-height:none; align-self:stretch; }
  .talk-stage .talk-controls { grid-column:2; grid-row:3; padding:12px 0 22px; }
  .talk-stage .talk-wave { display:none; }
}
@media(max-width:899px) {
  .gallery-cast { padding-inline:16px; }
  .gallery-cast .cast-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:38px 20px; }
  .gallery-cast .cast-open { grid-template-rows:360px 108px; }
  .gallery-cast .cast-card figure { height:360px; }
  .talk-stage .talk-character { height:42dvh; min-height:42dvh; max-height:42dvh; }
  .talk-stage .talk-log { max-height:24dvh; padding-inline:10px; }
}
@media(max-width:560px) {
  .gallery-search { margin-bottom:30px; }
  .gallery-search output { display:none; }
  .gallery-cast .cast-grid { grid-template-columns:1fr; max-width:430px; }
  .gallery-cast .cast-open { grid-template-rows:min(110vw,430px) 106px; }
  .gallery-cast .cast-card figure { height:min(110vw,430px); }
}
@media(prefers-reduced-motion:reduce) { .gallery-arch,.character-window canvas{transition:none} }

/* Piatrice's Talk view is the Unreal audition truck. The Gallery transcript
   remains the only transcript; these are camera/timer cues, not a second UI. */
.talk-stage[data-origin="gallery"][data-scene="piatrice-audition"] { --emotion-color:#ff3f9e; background:#08070a; }
.talk-stage[data-scene="piatrice-audition"] .talk-character { position:relative; z-index:2; isolation:isolate; }
.talk-stage[data-scene="piatrice-audition"] .conversation-performer { z-index:2; overflow:visible; animation:piatrice-arrival 1.05s cubic-bezier(.16,.8,.24,1) both; }
.talk-stage[data-scene="piatrice-audition"] .conversation-canvas { filter:none; }
.talk-stage[data-scene="piatrice-audition"] .talk-character::after { content:""; position:absolute; inset:0; z-index:5; pointer-events:none; background:radial-gradient(ellipse 78% 72% at 48% 44%,transparent 48%,rgba(2,2,5,.18) 72%,rgba(2,2,5,.62) 100%); box-shadow:inset 0 0 90px rgba(0,0,0,.34); mix-blend-mode:multiply; }
.audition-hud { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.audition-recording { display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.66); font:700 10px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; }
.audition-recording i { width:10px; height:10px; border:1px solid rgba(255,255,255,.35); border-radius:50%; background:#302b31; }
.audition-hud>strong { grid-row:1/3; grid-column:2; min-width:82px; font:650 34px/.9 var(--sans); font-variant-numeric:tabular-nums; letter-spacing:-.055em; }
.audition-hud button { grid-column:1/3; margin-top:10px; padding:7px 0; border:0; border-bottom:1px solid rgba(255,255,255,.55); color:#fff; background:transparent; font:600 10px/1 var(--sans); pointer-events:auto; cursor:pointer; }
.talk-stage[data-audition-live="true"] .audition-recording { color:#fff; }
.talk-stage[data-audition-live="true"] .audition-recording i { border-color:#ff273d; background:#ff273d; box-shadow:0 0 12px rgba(255,39,61,.9),0 0 35px rgba(255,39,61,.5); animation:piatrice-rec 1.2s ease-in-out infinite; }
.casting-choice { display:grid; gap:8px; width:min(350px,90vw); color:#fff; }
.casting-choice strong { font:650 22px/1.1 var(--sans); }
.casting-choice button { padding:10px 0; border:0; border-bottom:1px solid rgba(255,255,255,.34); color:#fff; background:transparent; font:600 12px/1.2 var(--sans); text-align:left; cursor:pointer; }
.casting-choice p,.casting-choice-note { margin:0; color:rgba(255,255,255,.68); font:12px/1.45 var(--sans); }
.talk-stage[data-scene="piatrice-audition"][data-casting-choice="true"] .talk-subtitles,.talk-stage[data-scene="piatrice-audition"][data-casting-choice="true"] .talk-mic,.talk-stage[data-scene="piatrice-audition"][data-casting-choice="true"] .talk-hint,.talk-stage[data-scene="piatrice-audition"][data-casting-choice="true"] .talk-wave { display:none!important; pointer-events:none!important; }
@keyframes piatrice-rec { 50% { opacity:.58; transform:scale(.88); } }
@keyframes piatrice-arrival { from { opacity:0; transform:translateY(26px) scale(.97); filter:blur(7px); } to { opacity:1; transform:none; filter:none; } }
@media(max-width:899px) { .audition-hud>strong { min-width:64px; font-size:25px; } }
@media(prefers-reduced-motion:reduce) { .audition-recording i,.talk-stage[data-scene="piatrice-audition"] .conversation-performer { animation:none!important; } }

/* Gallery conversation — one quiet room for every character. */
.talk-stage[data-origin="gallery"] {
  --room-paper:#eee5f2;
  --room-muted:rgba(238,229,242,.55);
  color:var(--room-paper);
  background:
    radial-gradient(ellipse at 24% 43%,color-mix(in srgb,var(--emotion-color) 25%,transparent),transparent 44%),
    radial-gradient(ellipse at 78% 18%,rgba(143,94,180,.19),transparent 37%),
    linear-gradient(145deg,#1a0d21 0%,#100817 52%,#08060d 100%);
}
.talk-stage[data-origin="gallery"]::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.14;
  background:repeating-linear-gradient(180deg,transparent 0 26px,rgba(229,205,244,.2) 27px,transparent 28px 54px);
  -webkit-mask-image:linear-gradient(90deg,transparent,black 18%,black 82%,transparent);
  mask-image:linear-gradient(90deg,transparent,black 18%,black 82%,transparent);
}
.talk-stage[data-origin="gallery"] .talk-top,
.talk-stage[data-origin="gallery"] .talk-character,
.talk-stage[data-origin="gallery"] .talk-log,
.talk-stage[data-origin="gallery"] .talk-controls { position:relative; z-index:3; }
.talk-stage[data-origin="gallery"] .talk-mark { filter:invert(1); opacity:.86; }
.talk-stage[data-origin="gallery"] .talk-who strong { color:var(--room-paper); font-family:var(--sans); font-weight:500; letter-spacing:-.025em; }
.talk-stage[data-origin="gallery"] .talk-who #talk-relationship { color:var(--room-muted); }
.talk-stage[data-origin="gallery"] .talk-top button { color:var(--room-paper); }
.talk-stage[data-origin="gallery"] .talk-close { border:1px solid rgba(238,229,242,.2); background:rgba(255,255,255,.035); }
.talk-stage[data-origin="gallery"] .talk-sound-toggle { margin-left:auto; color:var(--room-muted); font:600 10px/1 var(--sans); letter-spacing:.04em; }
.talk-stage[data-origin="gallery"] .talk-chat-toggle { width:40px; height:40px; display:grid; place-items:center; padding:0; border:1px solid rgba(238,229,242,.18); background:rgba(255,255,255,.035); border-radius:50%; font-size:17px; }
.talk-stage[data-origin="gallery"] .talk-subtitles,
.talk-stage[data-origin="gallery"] .talk-wave { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip-path:inset(50%)!important; }
.talk-stage[data-origin="gallery"] .talk-character { overflow:visible; }
.conversation-performer { position:absolute; inset:0; display:grid; place-items:center; isolation:isolate; }
.conversation-canvas { position:absolute; inset:-2%; width:104%; height:104%; z-index:2; filter:drop-shadow(0 34px 32px rgba(0,0,0,.5)); opacity:0; transition:opacity .55s ease; }
.conversation-performer[data-ready="true"] .conversation-canvas { opacity:1; }
.conversation-portrait { position:absolute; inset:3%; width:94%; height:94%; z-index:1; object-fit:contain; object-position:center; transition:opacity .55s ease,transform 1s cubic-bezier(.2,.75,.2,1); filter:drop-shadow(0 28px 34px rgba(0,0,0,.36)); -webkit-mask-image:radial-gradient(ellipse 50% 56% at 50% 48%,black 55%,transparent 100%); mask-image:radial-gradient(ellipse 50% 56% at 50% 48%,black 55%,transparent 100%); }
.conversation-performer[data-ready="true"] .conversation-portrait { opacity:0; transform:scale(1.025); }
.conversation-performer[data-error="true"] .conversation-portrait { opacity:1; }
.conversation-performer[data-performance-mode="living-portrait"] .conversation-portrait { animation:gallery-living-portrait 5.2s ease-in-out infinite; transform-origin:50% 74%; }
.conversation-performer[data-performance-mode="living-portrait"][data-conversation="thinking_start"] .conversation-portrait { animation-duration:2.8s; }
.conversation-performer[data-performance-mode="living-portrait"][data-conversation="talk_start"] .conversation-portrait { animation:gallery-living-portrait-talk .72s ease-in-out infinite alternate; }
@keyframes gallery-living-portrait { 0%,100% { transform:translate3d(0,0,0) rotate(-.35deg) scale(1); } 50% { transform:translate3d(0,-1.2%,0) rotate(.35deg) scale(1.012); } }
@keyframes gallery-living-portrait-talk { from { transform:translate3d(0,0,0) rotate(-.45deg) scale(1); } to { transform:translate3d(0,-1.6%,0) rotate(.45deg) scale(1.016); } }
@media(prefers-reduced-motion:reduce) { .conversation-performer[data-performance-mode="living-portrait"] .conversation-portrait { animation:none!important; } }
.conversation-loading { position:absolute; z-index:4; bottom:8%; color:var(--room-muted); font:500 10px/1 var(--sans); letter-spacing:.08em; }
.talk-stage[data-origin="gallery"] .talk-log { width:min(540px,100%); max-height:none; min-height:0; margin:0 auto; padding:34px 10px 22px; display:flex!important; flex-direction:column; justify-content:flex-end; gap:14px; overflow:auto; scrollbar-width:thin; scrollbar-color:rgba(238,229,242,.22) transparent; -webkit-mask-image:linear-gradient(transparent,black 13%,black 94%,transparent); mask-image:linear-gradient(transparent,black 13%,black 94%,transparent); }
.talk-stage[data-origin="gallery"] .talk-log li,
.talk-stage[data-origin="gallery"] .talk-log li[data-role="assistant"] { width:100%; max-width:none; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; color:rgba(238,229,242,.82); }
.talk-stage[data-origin="gallery"] .talk-log li[data-role="user"] { color:rgba(238,229,242,.48); }
.talk-stage[data-origin="gallery"] .talk-log li span { margin:0 0 4px; color:inherit; opacity:.52; font:600 8px/1 var(--sans); letter-spacing:.09em; }
.talk-stage[data-origin="gallery"] .talk-log li p { margin:0; font:400 14px/1.5 var(--sans); }
.talk-stage[data-origin="gallery"] .talk-log .conversation-empty { color:var(--room-muted); font-style:italic; }
.talk-stage[data-origin="gallery"] .talk-controls { align-self:end; padding:10px 0 max(16px,env(safe-area-inset-bottom)); }
.talk-stage[data-origin="gallery"] .talk-mic { width:104px; height:104px; background:rgba(10,7,14,.94); box-shadow:0 0 0 1px rgba(238,229,242,.28),0 0 0 9px rgba(255,255,255,.035),0 18px 50px rgba(0,0,0,.52); }
.talk-stage[data-origin="gallery"] .talk-mic-label { color:var(--room-paper); font-weight:600; text-transform:none; letter-spacing:.01em; }
.talk-stage[data-origin="gallery"][data-state="listening"] .talk-mic,
.talk-stage[data-origin="gallery"][data-state="speaking"] .talk-mic { background:color-mix(in srgb,var(--emotion-color) 34%,#09060d); box-shadow:0 0 0 1px var(--emotion-color),0 0 0 10px color-mix(in srgb,var(--emotion-color) 12%,transparent),0 18px 58px rgba(0,0,0,.54); }
.talk-stage[data-origin="gallery"] .talk-hint { min-height:1.2em; color:var(--room-muted); font-family:var(--sans); font-weight:500; letter-spacing:.02em; text-transform:none; }
.talk-stage[data-origin="gallery"] .talk-hint a { color:inherit; text-underline-offset:3px; }
.talk-guest-note { margin:0; color:var(--conversation-muted); font:500 9px/1.2 var(--sans); letter-spacing:.07em; text-transform:uppercase; }
.talk-stage[data-guest-ended="true"] .talk-mic { opacity:.62; cursor:default; box-shadow:0 0 0 1px rgba(238,229,242,.18); }
.talk-stage[data-guest-ended="true"] .talk-mic-ring { display:none; }
.talk-stage[data-origin="gallery"] .talk-type { width:100%; max-width:430px; margin-top:5px; }
.talk-stage[data-origin="gallery"][data-typing="true"] .talk-type { display:grid!important; }
.talk-stage[data-origin="gallery"] .talk-type input { color:var(--room-paper); border:1px solid rgba(238,229,242,.18); border-radius:999px; background:rgba(255,255,255,.055); padding-inline:18px; outline:none; }
.talk-stage[data-origin="gallery"] .talk-type input:focus { border-color:var(--emotion-color); box-shadow:0 0 0 3px color-mix(in srgb,var(--emotion-color) 12%,transparent); }
.talk-stage[data-origin="gallery"] .talk-type .ink-button { border-radius:999px; background:var(--room-paper); color:#130a18; }
@media(min-width:900px) {
  .talk-stage[data-origin="gallery"] { grid-template-columns:minmax(0,1.5fr) minmax(330px,.7fr); grid-template-rows:auto minmax(0,1fr) auto; column-gap:clamp(20px,4vw,72px); padding:22px clamp(24px,4vw,68px) 0; }
  .talk-stage[data-origin="gallery"] .talk-top { grid-column:1/-1; grid-row:1; }
  .talk-stage[data-origin="gallery"] .talk-character { grid-column:1; grid-row:2/4; height:auto; min-height:0; max-height:none; }
  .talk-stage[data-origin="gallery"] .talk-log { grid-column:2; grid-row:2; align-self:stretch; }
  .talk-stage[data-origin="gallery"] .talk-controls { grid-column:2; grid-row:3; }
}
@media(max-width:899px) {
  .talk-stage[data-origin="gallery"] { grid-template-rows:auto minmax(230px,45dvh) minmax(90px,1fr) auto; padding-inline:14px; }
  .talk-stage[data-origin="gallery"] .talk-character { grid-row:2; height:auto; min-height:0; max-height:none; }
  .talk-stage[data-origin="gallery"] .talk-log { grid-row:3; max-height:none; padding:14px 14px 10px; gap:9px; }
  .talk-stage[data-origin="gallery"] .talk-log li p { font-size:13px; line-height:1.42; }
  .talk-stage[data-origin="gallery"] .talk-controls { grid-row:4; padding-top:5px; }
  .talk-stage[data-origin="gallery"] .talk-mic { width:86px; height:86px; }
  .talk-stage[data-origin="gallery"] .talk-top { gap:5px; }
  .talk-stage[data-origin="gallery"] .talk-sound-toggle { margin-left:0; }
  .talk-stage[data-origin="gallery"][data-scene="piatrice-audition"] { grid-template-rows:auto minmax(300px,52dvh) minmax(72px,max-content) auto; row-gap:0; }
}

/* Face + body intake (fermata-blendshape-face/1), re-ported onto the body-first intake 2026-10-09. */
.face-step { margin: 28px 0 0; }
.face-step code { font-family: var(--mono); font-size: .86em; }
.face-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
@media (max-width: 960px) { .face-grid { grid-template-columns: 1fr; } }
.face-card { border: 1px solid var(--line); border-radius: 18px; padding: 18px; background: var(--paper-strong); min-width: 0; }
.face-card h3 { margin: 4px 0 10px; font-size: 18px; line-height: 1.25; }
.face-card p { margin: 8px 0; color: var(--ink-2); line-height: 1.45; }
.face-card code { display: inline-block; margin: 2px 3px 2px 0; padding: 1px 6px; border-radius: 6px; background: rgba(11,13,18,.06); color: var(--ink); }
.face-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; letter-spacing: .08em; background: var(--ink); color: white; vertical-align: 2px; }
.face-level[data-level="full"] .face-badge { background: var(--ok); }
.face-level[data-level="partial"] .face-badge { background: #b9771b; }
.face-level[data-ok="false"] .face-badge { background: var(--danger); }
.face-level[data-ok="false"] { border-color: rgba(159,45,60,.5); }
.face-errors { margin: 8px 0; padding-left: 18px; color: var(--danger); }
.face-typos code { background: rgba(159,45,60,.12); color: var(--danger); text-decoration: line-through; }
.face-warn summary { cursor: pointer; color: var(--ink-3); font-size: 13px; }
.face-warn ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 13px; }
.face-match { margin-top: 14px; }
.face-match h3 { color: var(--ink); }
.face-match h3 small { font-size: 13px; font-weight: 400; color: var(--ink-3); }
.face-match .match-group { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.face-match .match-group summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink); }
.face-match .match-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); }
.face-match .match-list li { line-height: 1.4; overflow-wrap: anywhere; }
.face-match .match-badge { display: inline-block; margin-right: 4px; padding: 0 7px; border-radius: 999px; font-size: 11px; background: rgba(11,13,18,.06); color: var(--ink-2); }
.face-match li[data-state="ignored"] .match-badge, .face-match li[data-state="none"] .match-badge, .face-match li[data-state="body-only"] .match-badge { background: rgba(176,58,46,.12); color: #8a2c22; }
.face-match li[data-state="kept"] .match-badge, .face-match li[data-state="nearest-shape"] .match-badge, .face-match li[data-state="built"] .match-badge { background: rgba(176,128,30,.14); color: #6d4f10; }
.face-match li[data-state="matched"] .match-badge { background: rgba(46,125,80,.12); color: #22603d; }
.face-meshes { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13px; }
.face-meshes li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid var(--line); }
.face-meshes li span { color: var(--ink-3); text-align: right; }
.face-path[data-ok="false"] { border-color: rgba(159,45,60,.5); }
.path-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.path-list li { display: grid; gap: 2px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); opacity: .55; font-size: 13px; }
.path-list li span { color: var(--ink-3); }
.path-list li[data-on="true"] { opacity: 1; border-color: var(--teal); background: rgba(42,156,151,.08); }
.face-advanced { margin-top: 16px; border: 1px dashed var(--line); border-radius: 18px; padding: 12px 16px; background: rgba(255,255,255,.5); }
.face-advanced > summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.face-advanced > summary::-webkit-details-marker { display: none; }
.face-advanced > summary .eyebrow { margin: 0; }
.face-adv-grid { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: 16px; margin-top: 14px; }
@media (max-width: 860px) { .face-adv-grid { grid-template-columns: 1fr; } }
.face-viewer { position: sticky; top: 12px; align-self: start; border-radius: 16px; overflow: hidden; background: radial-gradient(circle at 50% 35%, #fff, #dfe4ee); border: 1px solid var(--line); }
.face-viewer canvas { display: block; width: 100%; aspect-ratio: 1 / 1; }
.face-now { margin: 0; padding: 8px 12px; font-size: 13px; color: var(--ink-2); border-top: 1px solid var(--line); min-height: 2.6em; }
.face-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.face-tabs button { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 7px 14px; cursor: pointer; }
.face-tabs button[aria-selected="true"] { background: var(--ink); color: white; border-color: var(--ink); }
.expr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 460px; overflow: auto; }
.expr-list li { display: grid; grid-template-columns: minmax(150px, 1.3fr) 1fr 1.4fr auto; gap: 8px; align-items: center; font-size: 13px; padding: 3px 0; border-top: 1px solid var(--line); }
@media (max-width: 600px) { .expr-list li { grid-template-columns: 1fr 1fr; } }
.expr-list li[data-has="false"] { opacity: .5; }
.expr-btn { text-align: left; border: 1px solid var(--line); border-radius: 10px; padding: 5px 9px; background: white; cursor: pointer; }
.expr-btn[aria-pressed="true"] { background: var(--plum); color: white; border-color: var(--plum); }
.expr-btn:disabled { cursor: default; background: transparent; }
.expr-tag { color: var(--ink); }
.expr-live, .expr-state { color: var(--ink-3); }
.vis-play { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.vis-play select { flex: 1 1 240px; min-width: 0; padding: 8px; border-radius: 10px; border: 1px solid var(--line); }
.vis-voice { font-size: 13px; color: var(--ink-2); }
.vis-map { width: 100%; border-collapse: collapse; font-size: 13px; }
.vis-map td, .vis-map th { padding: 4px 6px; border-top: 1px solid var(--line); text-align: left; }
.vis-map small { color: var(--ink-3); }
.vis-map select { width: 100%; max-width: 220px; padding: 4px; border-radius: 8px; border: 1px solid var(--line); }
.vis-map tr[data-tier="optional"] { opacity: .75; }
.vis-meter { display: block; width: 46px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--magenta) calc(var(--level, 0) * 100%), rgba(11,13,18,.08) 0); }
/* On the Body check page the report lives in the narrow copy column: stack the cards and the advanced panels. */
.custom-check-copy .face-step { margin-top: 30px; }
.custom-check-copy .face-step .roles-head { display: grid; grid-template-columns: 1fr; gap: 6px; align-items: start; }
.custom-check-copy .face-step .roles-head h2 { margin: 0; font-family: var(--serif); font-size: 28px; font-weight: 400; }
.custom-check-copy .face-step .roles-head p { margin: 0; color: #52665f; font-size: 13px; line-height: 1.5; }
.custom-check-copy .face-grid, .custom-check-copy .face-adv-grid { grid-template-columns: 1fr; }
.custom-check-copy .face-card { border-radius: 14px; background: #fbfcfb; }
.custom-check-copy .face-viewer { position: relative; top: auto; max-width: 360px; }
.custom-check-copy .expr-list li { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.custom-check-copy .vis-map select { max-width: 100%; }
.custom-check-copy .face-advanced { padding: 12px; }
.custom-check-copy .vis-play select { flex: 1 1 100%; }
.custom-check-copy .vis-map { table-layout: fixed; }
.custom-check-copy .vis-map th:nth-child(1), .custom-check-copy .vis-map td:nth-child(1) { width: 46%; overflow-wrap: anywhere; }
.custom-check-copy .vis-map th:nth-child(3), .custom-check-copy .vis-map td:nth-child(3) { width: 42px; }
.custom-check-copy .vis-meter { width: 100%; }
.custom-check-copy .expr-list li > * { min-width: 0; overflow-wrap: anywhere; }
.custom-face-line { margin: 12px 0 0; padding: 10px 12px; border-left: 2px solid #aabbb4; color: #52665f; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.custom-face-line[data-state="full"] { border-color: #24705d; }
.custom-face-line[data-state="partial"] { border-color: #b9771b; }
.custom-face-line[data-state="rejected"] { border-color: #9f2d3c; color: #9f2d3c; background: rgba(159,45,60,.06); }
.custom-face-line a { color: inherit; }
/* Keep the long sample-line select and the channel table from widening the phone column (min-content of a 1fr track). */
.custom-check-copy, .custom-check-copy .face-step, .custom-check-copy .face-advanced, .custom-check-copy .face-adv-grid > *, .custom-check-copy .face-panel { min-width: 0; max-width: 100%; }
.custom-check-copy .vis-play select { width: 100%; max-width: 100%; }
@media (max-width: 900px) { .custom-check { grid-template-columns: minmax(0, 1fr); } }

/* Casting lands as a physical golden-feather reveal, echoing the trailer's
   opening image. The choices are portals, not chat bubbles or form cards. */
.casting-victory{position:absolute;z-index:24;inset:0;display:grid;grid-template-rows:minmax(210px,1fr) auto auto;align-items:center;justify-items:center;padding:28px 20px 36px;overflow:hidden;color:#fff;background:radial-gradient(circle at 50% 42%,#563612 0,#160f12 33%,#050507 72%);isolation:isolate;animation:cast-blackout .8s ease-out both}.casting-feather{position:relative;z-index:2;width:min(58vw,620px);height:min(56vh,560px);filter:drop-shadow(0 0 22px rgba(255,190,52,.74)) drop-shadow(0 0 70px rgba(255,139,16,.44));animation:cast-feather-in 1.8s cubic-bezier(.12,.78,.18,1) both}.casting-seal{position:relative;z-index:4;margin-top:-76px;text-align:center;text-shadow:0 2px 22px #000}.casting-seal span{display:block;color:#efc868;font:700 10px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase}.casting-seal h2{margin:8px 0 0;font:500 clamp(32px,5vw,58px)/1 var(--serif);letter-spacing:-.03em}.casting-bokeh{position:absolute;inset:0;overflow:hidden;pointer-events:none}.casting-bokeh i{position:absolute;left:calc((var(--i)*47)%100 * 1%);top:calc((var(--i)*29)%90 * 1%);width:calc(5px + (var(--i)%5)*4px);aspect-ratio:1;border-radius:50%;background:#ffd96f;box-shadow:0 0 18px #ffa51c;opacity:.18;animation:cast-bokeh calc(4s + (var(--i)%6)*.7s) ease-in-out calc(var(--i)*-.23s) infinite alternate}.casting-choice{position:relative;z-index:5;display:grid;grid-template-columns:repeat(2,minmax(112px,160px));gap:clamp(18px,4vw,54px);width:auto;margin-top:24px;color:#fff}.casting-choice button{display:grid;justify-items:center;gap:7px;padding:0;border:0;color:#fff;background:transparent;text-align:center;cursor:pointer}.casting-choice button>i{display:grid;place-items:center;width:88px;aspect-ratio:1;border:1px solid rgba(255,220,134,.7);border-radius:50%;color:#ffd878;background:radial-gradient(circle at 42% 34%,rgba(255,233,163,.22),rgba(133,77,9,.12) 45%,rgba(0,0,0,.44));box-shadow:inset 0 0 24px rgba(255,193,61,.15),0 0 0 7px rgba(255,209,105,.035),0 10px 28px rgba(0,0,0,.55);font:400 29px/1 var(--serif);transition:transform .22s ease,box-shadow .22s ease,background .22s ease}.casting-choice button:hover>i,.casting-choice button:focus-visible>i{transform:translateY(-7px) scale(1.06);background:radial-gradient(circle at 42% 34%,#fff3c7,#bf7916 55%,#251405);box-shadow:0 0 0 8px rgba(255,209,105,.09),0 0 42px rgba(255,178,35,.62)}.casting-choice button:focus-visible{outline:0}.casting-choice b{font:650 13px/1.1 var(--sans)}.casting-choice span,.casting-choice-note{color:rgba(255,255,255,.58);font:10px/1.25 var(--sans)}.casting-unlocked{position:relative;z-index:8;width:min(700px,90vw)}.casting-victory>p,.casting-unlocked>p,.casting-play-unlock>p,.casting-pick-banner>p{margin:0 0 8px;color:#ff4a9b;font:800 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}.casting-unlocked h2,.casting-play-unlock h1,.casting-pick-banner h1{margin:0 0 14px;font:850 clamp(46px,8vw,108px)/.86 var(--sans);letter-spacing:-.065em}.casting-unlocked>span,.casting-play-unlock>span,.casting-pick-banner>span{display:block;max-width:54ch;font:15px/1.5 var(--sans)}.casting-enter{display:inline-block;margin-top:24px;padding:15px 22px;color:#08070a;background:#ff4a9b;font:850 14px/1 var(--sans);text-decoration:none}.casting-pick-banner,.casting-play-unlock{margin:90px auto 0;width:min(1120px,calc(100% - 40px));padding:28px 0;border-top:5px solid #ff4a9b;border-bottom:1px solid currentColor}.casting-pick-banner h1,.casting-play-unlock h1{font-size:clamp(42px,7vw,92px)}.cast-card.is-casting-pick{outline:3px solid #ff4a9b;outline-offset:-3px}.talk-speaker{display:block;margin-bottom:5px;color:#ff4a9b;font:800 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
@keyframes cast-blackout{from{opacity:0}}@keyframes cast-feather-in{from{opacity:0;transform:translate3d(0,-28vh,0) rotate(-14deg) scale(.72)}55%{opacity:1}to{transform:translate3d(0,0,0) rotate(0) scale(1)}}@keyframes cast-bokeh{to{opacity:.72;transform:translate3d(16px,-28px,0) scale(1.8)}}
@media(max-width:680px){.casting-victory{grid-template-rows:minmax(200px,43vh) auto auto;padding-top:18px}.casting-feather{width:86vw;height:44vh}.casting-seal{margin-top:-42px}.casting-choice{gap:13px}.casting-choice button>i{width:68px}.casting-choice span{display:none}}
@media(prefers-reduced-motion:reduce){.casting-victory,.casting-feather,.casting-bokeh i{animation:none!important}}
.casting-victory{position:fixed;z-index:64;width:100vw;height:100dvh}
.casting-choice{grid-template-columns:repeat(3,minmax(88px,160px))}
.casting-victory.casting-outline{display:flex;flex-direction:column;justify-content:flex-start;gap:22px;overflow:auto;padding-top:max(32px,env(safe-area-inset-top));padding-bottom:max(36px,env(safe-area-inset-bottom))}
.casting-outline .casting-seal{margin:0}.temporary-outline-form{width:min(560px,100%);text-align:left}.temporary-outline-form>p{font:14px/1.5 var(--sans);color:#ded4e5}.temporary-outline-form fieldset{display:grid;gap:16px;margin:20px 0;padding:0;border:0}.temporary-outline-form .field{margin:0}.temporary-outline-form input,.temporary-outline-form select{color:#fff;background:rgba(255,255,255,.07);border-color:rgba(255,220,134,.3)}.temporary-outline-form option{color:#fff;background:#160f12}.temporary-outline-form .tray-actions{flex-wrap:wrap}
.casting-self-start{display:grid;grid-template-columns:minmax(220px,330px) minmax(220px,330px);gap:24px;width:min(760px,92vw);align-items:stretch}.casting-self-start>p,.casting-self-start>h1{grid-column:1/-1}.casting-self-start>h1{margin:0;font:650 clamp(42px,7vw,84px)/.88 var(--serif);letter-spacing:-.045em}.casting-self-start .lede{max-width:54ch;margin:0 0 12px}.casting-self-start form{display:grid;gap:12px}.casting-photo-pick,.casting-describe-start{display:grid;place-items:center;align-content:center;min-height:230px;padding:24px;border:1px solid rgba(72,42,85,.22);border-radius:50%;color:#24162b;background:#f4edf5;text-align:center;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.casting-photo-pick:hover,.casting-describe-start:hover,.casting-photo-pick:focus-within,.casting-describe-start:focus-visible{transform:translateY(-5px);box-shadow:0 18px 45px rgba(58,24,72,.18)}.casting-photo-pick input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.casting-photo-pick>span,.casting-describe-start>i{display:grid;place-items:center;width:54px;aspect-ratio:1;margin-bottom:12px;border:1px solid currentColor;border-radius:50%;font:28px/1 var(--serif)}.casting-photo-pick b,.casting-describe-start b{font:700 16px/1.2 var(--sans)}.casting-photo-pick small,.casting-describe-start small{display:block;margin-top:7px;color:#77637c;font:12px/1.3 var(--sans)}.casting-describe-start{border:1px solid rgba(72,42,85,.22);font:inherit}.casting-photo-preview{width:100%;max-height:220px;object-fit:cover;border-radius:999px}.casting-self-start #casting-photo-next{justify-self:center}.casting-self-start #step-error{grid-column:auto}
@media(max-width:650px){.casting-self-start{grid-template-columns:1fr}.casting-photo-pick,.casting-describe-start{min-height:170px;border-radius:90px}.casting-self-start>h1{font-size:46px}}

/* Final audition composition: Piatrice is a full-frame Unreal room, while the
   existing Gallery log and input remain the only conversation UI. This block
   intentionally follows the generic Gallery layout so it cannot be collapsed
   back into the old split panel at desktop or phone breakpoints. */
.talk-stage[data-origin="gallery"][data-scene="piatrice-audition"] {
  display:block;
  padding:0;
  overflow:hidden;
  background:#050408;
}
.talk-stage[data-origin="gallery"][data-scene="piatrice-audition"]::before,
.talk-stage[data-origin="gallery"][data-scene="piatrice-audition"] .talk-character::after { display:none; }
.talk-stage[data-origin="gallery"][data-scene="piatrice-audition"] .talk-top {
  position:absolute;
  z-index:20;
  inset:0 0 auto;
  min-height:96px;
  padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 34px max(18px,env(safe-area-inset-left));
  background:linear-gradient(#07060bd9 0%,#07060b80 48%,transparent 100%);
}
.talk-stage[data-origin="gallery"][data-scene="piatrice-audition"] .talk-character {
  position:absolute;
  z-index:1;
  inset:0;
  width:100%;
  height:100%!important;
  min-height:100%!important;
  max-height:none!important;
  margin:0!important;
  overflow:hidden;
  transform:none!important;
}
.talk-stage[data-origin="gallery"][data-scene="piatrice-audition"] .conversation-performer {
  position:absolute;
  inset:0;
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  overflow:hidden;
}
.talk-stage[data-origin="gallery"][data-scene="piatrice-audition"] .conversation-canvas {
  position:absolute;
  inset:0;
  width:100%!important;
  height:100%!important;
  filter:none;
  touch-action:none;
}
.talk-stage[data-origin="gallery"][data-scene="piatrice-audition"] .talk-log {
  position:absolute;
  z-index:12;
  left:50%;
  bottom:var(--audition-controls-height,calc(156px + env(safe-area-inset-bottom)));
  translate:-50% 0;
  width:min(760px,calc(100vw - 32px));
  max-height:min(26dvh,230px);
  padding:48px 12px 10px;
  pointer-events:auto;
  -webkit-mask-image:linear-gradient(transparent,black 28%,black 100%);
  mask-image:linear-gradient(transparent,black 28%,black 100%);
  text-shadow:0 2px 3px #000,0 0 16px #000d;
}
.talk-stage[data-origin="gallery"][data-scene="piatrice-audition"] .talk-log li { text-align:center; }
.talk-stage[data-origin="gallery"][data-scene="piatrice-audition"] .talk-log li:not(:last-child) { display:none; }
.talk-stage[data-origin="gallery"][data-scene="piatrice-audition"] .talk-controls {
  position:absolute;
  z-index:14;
  inset:auto 0 0;
  padding:70px max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  background:linear-gradient(transparent,#07060b8f 42%,#07060be8 100%);
  pointer-events:none;
}
.talk-stage[data-origin="gallery"][data-scene="piatrice-audition"] .talk-controls>* { pointer-events:auto; }
.talk-stage[data-origin="gallery"][data-scene="piatrice-audition"] .talk-gallery-action {
  position:absolute;
  z-index:15;
  left:50%;
  bottom:calc(134px + env(safe-area-inset-bottom));
  translate:-50% 0;
}
.talk-stage[data-origin="gallery"][data-scene="piatrice-audition"] .talk-wave,
.talk-stage[data-origin="gallery"][data-scene="piatrice-audition"] .emotion-atmosphere { display:none; }
@media(max-width:560px) {
  .talk-stage[data-origin="gallery"][data-scene="piatrice-audition"] .talk-top { min-height:84px; }
  .talk-stage[data-origin="gallery"][data-scene="piatrice-audition"] .talk-log { bottom:var(--audition-controls-height,calc(132px + env(safe-area-inset-bottom))); max-height:22dvh; }
  .talk-stage[data-origin="gallery"][data-scene="piatrice-audition"] .talk-gallery-action { bottom:calc(114px + env(safe-area-inset-bottom)); }
}

/* Video Village is a scene, not a card viewport. Keep Peave and Packo inside
   one edge-to-edge first-person frame using the same restrained controls as
   the audition truck. */
.talk-stage[data-origin="gallery"][data-scene="peave-packo-video-village"] {
  display:block;
  padding:0;
  overflow:hidden;
  color:#fff;
  background:#050408;
}
.talk-stage[data-origin="gallery"][data-scene="peave-packo-video-village"]::before,
.talk-stage[data-origin="gallery"][data-scene="peave-packo-video-village"] .talk-character::after { display:none; }
.talk-stage[data-origin="gallery"][data-scene="peave-packo-video-village"] .talk-top {
  position:absolute;
  z-index:20;
  inset:0 0 auto;
  min-height:96px;
  padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 34px max(18px,env(safe-area-inset-left));
  color:#fff;
  background:linear-gradient(#07060bd9 0%,#07060b80 48%,transparent 100%);
}
.talk-stage[data-origin="gallery"][data-scene="peave-packo-video-village"] .talk-mark { filter:invert(1); }
.talk-stage[data-origin="gallery"][data-scene="peave-packo-video-village"] .talk-top button { color:#fff; border-color:rgba(255,255,255,.24); background:rgba(7,6,11,.22); }
.talk-stage[data-origin="gallery"][data-scene="peave-packo-video-village"] .talk-character {
  position:absolute;
  z-index:1;
  inset:0;
  width:100%;
  height:100%!important;
  min-height:100%!important;
  max-height:none!important;
  margin:0!important;
  overflow:hidden;
  transform:none!important;
}
.talk-stage[data-origin="gallery"][data-scene="peave-packo-video-village"] .conversation-performer,
.talk-stage[data-origin="gallery"][data-scene="peave-packo-video-village"] .conversation-canvas {
  position:absolute;
  inset:0;
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  overflow:hidden;
}
.talk-stage[data-origin="gallery"][data-scene="peave-packo-video-village"] .conversation-canvas { filter:none; touch-action:none; }
.talk-stage[data-origin="gallery"][data-scene="peave-packo-video-village"] .talk-log {
  position:absolute;
  z-index:12;
  left:50%;
  bottom:calc(156px + env(safe-area-inset-bottom));
  translate:-50% 0;
  width:min(760px,calc(100vw - 32px));
  max-height:min(26dvh,230px);
  padding:48px 12px 10px;
  pointer-events:auto;
  -webkit-mask-image:linear-gradient(transparent,black 28%,black 100%);
  mask-image:linear-gradient(transparent,black 28%,black 100%);
  text-shadow:0 2px 3px #000,0 0 16px #000d;
}
.talk-stage[data-origin="gallery"][data-scene="peave-packo-video-village"] .talk-log li { text-align:center; }
.talk-stage[data-origin="gallery"][data-scene="peave-packo-video-village"] .talk-log li:not(:last-child) { display:none; }
.talk-stage[data-origin="gallery"][data-scene="peave-packo-video-village"] .talk-controls {
  position:absolute;
  z-index:14;
  inset:auto 0 0;
  padding:70px max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  background:linear-gradient(transparent,#07060b8f 42%,#07060be8 100%);
  pointer-events:none;
}
.talk-stage[data-origin="gallery"][data-scene="peave-packo-video-village"] .talk-controls>* { pointer-events:auto; }
.talk-stage[data-origin="gallery"][data-scene="peave-packo-video-village"] .talk-gallery-action {
  position:absolute;
  z-index:15;
  left:50%;
  bottom:calc(134px + env(safe-area-inset-bottom));
  translate:-50% 0;
}
.talk-stage[data-origin="gallery"][data-scene="peave-packo-video-village"] .talk-wave,
.talk-stage[data-origin="gallery"][data-scene="peave-packo-video-village"] .emotion-atmosphere { display:none; }
@media(max-width:560px) {
  .talk-stage[data-origin="gallery"][data-scene="peave-packo-video-village"] .talk-top { min-height:84px; }
  .talk-stage[data-origin="gallery"][data-scene="peave-packo-video-village"] .talk-log { bottom:calc(132px + env(safe-area-inset-bottom)); max-height:22dvh; }
  .talk-stage[data-origin="gallery"][data-scene="peave-packo-video-village"] .talk-gallery-action { bottom:calc(114px + env(safe-area-inset-bottom)); }
}
/* Nina HQ d019d7ff: Go Back on every import page */
.custom-door-actions{display:flex;gap:10px;align-items:center;margin-top:8px}.custom-door-actions .custom-begin{flex:1;width:auto;margin-top:0}
.custom-back-row{display:flex;margin-top:22px}
@media(max-width:560px){.custom-door-actions{flex-direction:column-reverse;align-items:stretch}.custom-door-actions .quiet-button{width:100%}}
/* Nina HQ de3a9302: a new import is the default; unfinished ones are one tap away. */
.custom-door-resume{margin:0 0 14px;padding:10px 12px;border-left:2px solid #aabbb4;color:#52665f;font-size:13px;line-height:1.5}.custom-door-resume p{margin:0 0 8px}.custom-door-resume div{display:flex;flex-wrap:wrap;gap:8px}.custom-door-resume .quiet-button{margin:0}
.custom-first-line{margin:18px 0 0;padding:12px 16px;border-left:3px solid currentColor;font-style:italic;opacity:.85}

/* Provide a Headshot (Nina, HQ 5c2728e2): the gallery card picture, chosen on the first upload step. */
.custom-headshot{margin:4px 0 0}
.custom-headshot-title{margin:14px 0 0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#77787d}
.custom-headshot-pick{display:flex;align-items:center;gap:14px;position:relative}
.custom-headshot-frame{flex:0 0 auto;inline-size:64px;block-size:64px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#ece7e1;border:1px solid #d0ceca}
.custom-headshot-frame img{inline-size:100%;block-size:100%;object-fit:cover}
.custom-headshot-frame i{font-style:normal;font-size:22px;color:#77787d}
.custom-headshot-copy{display:grid;gap:4px;min-inline-size:0}
.custom-headshot-copy b{font-size:16px;font-weight:600}
.custom-headshot-copy small{color:#77787d;font-size:12px;overflow-wrap:anywhere}
.custom-headshot[data-has-headshot="true"] .custom-headshot-copy b::after{content:'  ✓';color:#46675f}
.custom-review-headshot dd{display:flex;align-items:center;gap:10px}
.custom-review-headshot img{inline-size:44px;block-size:44px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.custom-headshot-page .custom-headshot{margin:18px 0}
.love-note-arrival{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:24px;background:rgba(13,5,25,.72);backdrop-filter:blur(20px);color:#fff}
.love-note-arrival>div{width:min(430px,100%);padding:clamp(2rem,7vw,4rem);border:1px solid rgba(255,255,255,.18);border-radius:50% 50% 44% 44%/42% 42% 58% 58%;background:radial-gradient(circle at 48% 18%,rgba(244,193,224,.22),rgba(50,15,72,.94) 58%,rgba(14,5,26,.98));box-shadow:0 40px 120px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.22);text-align:center}
.love-note-arrival h2{margin:.25rem 0 1.6rem;font-size:clamp(2.2rem,8vw,4.4rem);font-weight:400;line-height:.9;letter-spacing:-.055em}
.love-note-arrival .ink-button{margin-inline:auto}

/* P0 2026-10-13: a community character without a matte shows its saved portrait inside the arch, never an empty initial. */
.character-window img.gallery-portrait-fallback { position:absolute; z-index:3; left:9%; right:9%; top:9%; bottom:6%; width:82%; height:85%; object-fit:cover; object-position:50% 18%; border-radius:999px 999px 18px 18px; box-shadow:0 18px 60px rgba(0,0,0,.35); }

/* Blendshape roles + Emotion composer (Nina 57139533 stage 2) */
.face-tabs { flex-wrap: wrap; }
.roles-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 6px 0; }
.roles-tools input[type="search"] { flex: 1 1 160px; min-width: 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; font: inherit; }
.roles-scroll { max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.role-map { width: 100%; }
.role-map td { vertical-align: middle; overflow-wrap: anywhere; }
.role-map select { width: 100%; max-width: 100%; min-width: 0; }
.role-map tr[data-overridden="true"] td:first-child code { font-weight: 700; }
.role-pair, .role-unstorable { font-size: .72rem; opacity: .75; margin-left: 4px; }
.role-unstorable { color: #b0413e; opacity: 1; }
.compose-head, .compose-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.compose-head select, .compose-head input, .compose-add select { min-width: 0; max-width: 100%; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; font: inherit; background: transparent; }
.compose-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.compose-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 1.2fr) 3ch auto; gap: 8px; align-items: center; }
.compose-list li code { overflow-wrap: anywhere; font-size: .8rem; }
.compose-list output { font-variant-numeric: tabular-nums; font-size: .8rem; }
.compose-list .compose-empty { display: block; opacity: .7; }
.compose-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Animation editor: nothing clips (Nina 353868ab "clipped text in the animation editor") */
.performance-asset strong, .performance-asset small { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
.special-behavior > header > div, .performance-slot, .emotion-slots, .special-behavior { min-width: 0; overflow-wrap: anywhere; }
.special-behavior > header .remove-custom { flex: none; align-self: flex-start; }
.special-behaviors .custom-fields .field, .special-behaviors .custom-fields input { min-width: 0; max-width: 100%; }
/* The "preview unavailable" note took the auto column and squeezed the clip name to 0px; it now sits on its own row. */
.performance-asset { grid-template-columns: minmax(45%, 1fr) auto auto; }
.performance-asset > em, .performance-asset > .preview-unavailable { grid-column: 1 / -1; grid-row: 2; white-space: normal; overflow-wrap: anywhere; }

/* Wishlist (Cameron 2026-10-13: the wishlist IS the lovebird.show homepage). Text only, house style. */
html.gallery-site .topnav > a.wishlist-link { display:flex; }
.topnav > a.wishlist-link { white-space:nowrap; }
.topnav .studio-menu-content a[href^="https://lovebird.show"] { display:block; padding:8px 0; }
.production-footer .footer-wishlist { color:inherit; text-decoration:none; border-bottom:1px solid currentColor; white-space:nowrap; }
@media (max-width: 760px) { html.gallery-site .topnav > a.wishlist-link { display:flex; padding:0 8px; font-size:11px; } }

/* Bug 835a034e (show day): the custom-import door must be visible from the from-scratch builder. */
.describe-import{margin:14px 0 0;font-size:14px;line-height:1.4}
.describe-import a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* Hosted by Love Bird's official HUD (?hud=1, app.js JOURNEY_HUD): only the performer shows; the host game draws the mic,
   the speech bubbles, the cue and the way out. */
html[data-host-hud="1"] .talk-top, html[data-host-hud="1"] .talk-subtitles, html[data-host-hud="1"] .talk-log, html[data-host-hud="1"] .talk-wave, html[data-host-hud="1"] .talk-controls, html[data-host-hud="1"] .talk-refine, html[data-host-hud="1"] .talk-onboarding, html[data-host-hud="1"] .talk-guest-note, html[data-host-hud="1"] .audition-hud, html[data-host-hud="1"] #talk-latency { display:none !important; }