:root {
  --ink: #172b2a;
  --ink-soft: #36504c;
  --paper: #f4efe4;
  --paper-deep: #e8dfcf;
  --line: rgba(23, 43, 42, 0.18);
  --accent: #b44e32;
  --accent-deep: #823a29;
  --gold: #c5974b;
  --white: #fffdf8;
  --shadow: 0 24px 60px rgba(20, 35, 31, 0.16);
  font-family: "Noto Serif SC", "Songti SC", "STSong", Georgia, serif;
  color: var(--ink);
  background: var(--ink);
  line-height: 1.6;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--ink); }
body { margin: 0; min-width: 320px; background: var(--ink); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }

.app-shell { min-height: 100vh; overflow: hidden; }
.topbar {
  align-items: center;
  color: rgba(255, 253, 248, 0.78);
  display: flex;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  font-size: 0.72rem;
  justify-content: space-between;
  left: 0;
  letter-spacing: 0.12em;
  padding: 1.2rem 4.2vw;
  position: fixed;
  right: 0;
  text-transform: uppercase;
  top: 0;
  z-index: 10;
}
.brand { align-items: center; color: inherit; display: flex; gap: 0.65rem; text-decoration: none; }
.brand-mark { align-items: center; border: 1px solid rgba(255, 253, 248, 0.42); display: inline-flex; font-family: "Songti SC", serif; font-size: 0.86rem; height: 1.55rem; justify-content: center; width: 1.55rem; }
.topbar-status { opacity: 0.58; }
.app-shell:has(#screen-identity.active) .topbar,
.app-shell:has(#screen-result.active) .topbar { color: rgba(23, 43, 42, 0.82); }
.app-shell:has(#screen-story.is-ended) .topbar { opacity: 0; pointer-events: none; }
.app-shell:has(#screen-identity.active) .brand-mark,
.app-shell:has(#screen-result.active) .brand-mark { border-color: rgba(23, 43, 42, 0.34); }

.screen { min-height: 100vh; position: relative; }
.screen[hidden] { display: none; }
.screen-home { align-items: center; background: #16312c; color: var(--white); display: flex; isolation: isolate; min-height: 100vh; }
.home-backdrop, .generation-backdrop, .result-backdrop { background-position: center; background-size: cover; inset: 0; position: absolute; z-index: -2; }
.home-backdrop { background-image: url("./assets/scenes/gate.jpg"); }
.home-backdrop::after { background: linear-gradient(90deg, rgba(12, 32, 29, 0.86) 0%, rgba(12, 32, 29, 0.62) 42%, rgba(12, 32, 29, 0.18) 100%), linear-gradient(0deg, rgba(12, 32, 29, 0.34), transparent 40%); content: ""; inset: 0; position: absolute; }
.home-content { margin-left: 12vw; max-width: 35rem; padding: 8rem 2rem 5rem 0; position: relative; z-index: 1; }
.eyebrow { color: var(--gold); font-family: "Avenir Next", "Segoe UI", sans-serif; font-size: 0.69rem; letter-spacing: 0.2em; margin: 0 0 1.2rem; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(4.2rem, 10vw, 8.6rem); font-weight: 400; letter-spacing: 0.04em; line-height: 1.03; margin: 0 0 1.1rem; }
h2 { font-size: clamp(2.4rem, 5vw, 4.8rem); font-weight: 400; letter-spacing: 0.02em; line-height: 1.18; margin-bottom: 1.2rem; }
h2 em { color: var(--accent); font-style: normal; }
.home-lede { color: rgba(255, 253, 248, 0.92); font-size: clamp(1.05rem, 2vw, 1.4rem); letter-spacing: 0.08em; margin-bottom: 1.35rem; }
.home-copy { color: rgba(255, 253, 248, 0.72); font-size: 0.96rem; line-height: 2; max-width: 30rem; }
.primary-button { align-items: center; background: var(--accent); border: 0; color: var(--white); display: inline-flex; gap: 2rem; justify-content: space-between; min-height: 3.45rem; padding: 0.85rem 1.15rem 0.85rem 1.4rem; transition: background 180ms ease, transform 180ms ease; }
.primary-button:hover { background: var(--accent-deep); transform: translateY(-2px); }
.primary-button:focus-visible, .text-button:focus-visible, .identity-option:has(input:focus-visible), .answer-option:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 4px; }
.button-arrow { font-family: "Segoe UI", sans-serif; font-size: 1.15rem; }
.enter-button { margin-top: 1.45rem; min-width: 10.2rem; }
.home-footnote { align-items: center; color: rgba(255, 253, 248, 0.56); display: flex; font-family: "Avenir Next", "Segoe UI", sans-serif; font-size: 0.68rem; gap: 0.65rem; letter-spacing: 0.12em; margin-top: 5.5rem; }
.rule-line { background: var(--gold); display: inline-block; height: 1px; width: 2.8rem; }
.seal { align-items: center; border: 1px solid rgba(229, 191, 113, 0.55); bottom: 12vh; color: rgba(229, 191, 113, 0.9); display: flex; flex-direction: column; font-size: 1.05rem; gap: 0.25rem; letter-spacing: 0.25em; padding: 0.8rem 0.6rem; position: absolute; right: 9vw; writing-mode: vertical-rl; }
.seal span:last-child { border-top: 1px solid rgba(229, 191, 113, 0.45); padding-top: 0.55rem; }
.home-scroll { align-items: center; bottom: 2rem; color: rgba(255, 253, 248, 0.56); display: flex; font-family: "Avenir Next", "Segoe UI", sans-serif; font-size: 0.62rem; gap: 0.8rem; letter-spacing: 0.16em; position: absolute; right: 4.2vw; text-transform: uppercase; writing-mode: vertical-rl; }
.scroll-line { background: rgba(255, 253, 248, 0.42); height: 4rem; width: 1px; }

.form-screen { background: var(--paper); }
.form-shell { margin: 0 auto; max-width: 1000px; padding: 9rem 5vw 5rem; }
.section-intro { border-bottom: 1px solid var(--line); margin-bottom: 2rem; max-width: 45rem; padding-bottom: 2rem; }
.section-intro h2 { margin-bottom: 0.9rem; }
.section-intro p:last-child { color: var(--ink-soft); max-width: 37rem; }
.identity-grid { border: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; }
.identity-option { background: rgba(255, 253, 248, 0.52); border: 1px solid var(--line); min-height: 10.5rem; position: relative; transition: background 180ms ease, border 180ms ease, transform 180ms ease; }
.identity-option:hover { background: var(--white); transform: translateY(-2px); }
.identity-option input { opacity: 0; position: absolute; }
.identity-option-inner { cursor: pointer; display: flex; flex-direction: column; height: 100%; justify-content: space-between; padding: 1.2rem; }
.identity-option input:checked + .identity-option-inner { background: var(--ink); color: var(--white); }
.identity-option input:checked + .identity-option-inner .option-index { color: var(--gold); }
.option-index { color: var(--accent); font-family: "Avenir Next", "Segoe UI", sans-serif; font-size: 0.68rem; letter-spacing: 0.12em; }
.identity-option strong { font-size: 1.18rem; font-weight: 400; }
.identity-option small { color: var(--ink-soft); font-size: 0.76rem; }
.identity-option input:checked + .identity-option-inner small { color: rgba(255, 253, 248, 0.66); }
.custom-identity-wrap { border-bottom: 1px solid var(--line); display: grid; gap: 0.6rem; margin-top: 1rem; padding-bottom: 1.2rem; }
.custom-identity-wrap label, .free-answer span { color: var(--ink-soft); font-family: "Avenir Next", "Segoe UI", sans-serif; font-size: 0.72rem; letter-spacing: 0.05em; }
textarea { background: rgba(255, 253, 248, 0.72); border: 1px solid var(--line); border-radius: 0; color: var(--ink); min-height: 5.5rem; padding: 0.8rem 0.9rem; resize: vertical; width: 100%; }
textarea:focus { border-color: var(--accent); outline: 0; }
textarea::placeholder { color: rgba(54, 80, 76, 0.55); }
.question-stack { margin-top: 3rem; }
.question-heading { align-items: center; color: var(--ink-soft); display: flex; font-family: "Avenir Next", "Segoe UI", sans-serif; font-size: 0.68rem; gap: 0.8rem; letter-spacing: 0.13em; margin-bottom: 1.25rem; text-transform: uppercase; }
.question-heading-line { background: var(--line); flex: 1; height: 1px; }
.question-card { border: 1px solid var(--line); margin: 0 0 1rem; padding: 1.35rem 1.5rem 1.5rem; }
.question-card legend { align-items: center; display: flex; font-size: 1.22rem; gap: 0.85rem; padding: 0; }
.question-number { color: var(--accent); font-family: "Avenir Next", "Segoe UI", sans-serif; font-size: 0.72rem; letter-spacing: 0.12em; }
.axis-label { color: var(--ink-soft); font-family: "Avenir Next", "Segoe UI", sans-serif; font-size: 0.7rem; letter-spacing: 0.08em; margin: 0.55rem 0 1.1rem 2.1rem; }
.axis-label span { color: var(--accent); padding: 0 0.35rem; }
.answer-options { display: grid; gap: 0.55rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.answer-option { border: 1px solid var(--line); cursor: pointer; min-height: 3.5rem; position: relative; transition: border 180ms ease, background 180ms ease; }
.answer-option:hover { background: rgba(255, 253, 248, 0.74); border-color: rgba(180, 78, 50, 0.55); }
.answer-option input { opacity: 0; position: absolute; }
.answer-option span { align-items: center; display: flex; font-size: 0.86rem; gap: 0.55rem; height: 100%; padding: 0.72rem 0.8rem; }
.answer-option b { color: var(--accent); font-family: "Avenir Next", "Segoe UI", sans-serif; font-size: 0.7rem; }
.answer-option input:checked + span { background: var(--accent); color: var(--white); }
.answer-option input:checked + span b { color: var(--white); }
.free-answer { display: grid; gap: 0.55rem; margin-top: 1rem; }
.free-answer textarea { min-height: 4.1rem; }
.form-actions { align-items: center; display: flex; justify-content: space-between; margin-top: 2rem; }
.text-button { align-items: center; background: transparent; border: 0; color: var(--ink-soft); display: inline-flex; font-size: 0.86rem; gap: 0.55rem; padding: 0.5rem 0; }
.text-button:hover { color: var(--accent); }
.form-error { background: rgba(180, 78, 50, 0.1); border-left: 3px solid var(--accent); color: var(--accent-deep); margin: 1rem 0 0; padding: 0.65rem 0.8rem; }

.generation-screen { align-items: center; background: var(--ink); color: var(--white); display: flex; justify-content: center; text-align: center; }
.generation-backdrop { background-image: url("./assets/scenes/second-hall.jpg"); filter: saturate(0.7); }
.generation-backdrop::after { background: rgba(14, 34, 31, 0.7); content: ""; inset: 0; position: absolute; }
.generation-content { max-width: 32rem; padding: 8rem 2rem 4rem; position: relative; }
.generation-content h2 { font-size: clamp(2.2rem, 5vw, 4.2rem); }
.generation-content p:last-child { color: rgba(255, 253, 248, 0.66); }
.loader-ring { animation: spin 1.4s linear infinite; border: 1px solid rgba(255, 253, 248, 0.3); border-top-color: var(--gold); border-radius: 50%; display: inline-block; height: 3rem; margin-bottom: 2rem; width: 3rem; }
@keyframes spin { to { transform: rotate(360deg); } }

.result-screen { background: var(--paper); overflow: hidden; }
.result-backdrop { background-image: url("./assets/scenes/hall.jpg"); opacity: 0.12; }
.result-shell { margin: 0 auto; max-width: 1160px; padding: 8.5rem 5vw 5rem; position: relative; }
.result-kicker { align-items: center; border-bottom: 1px solid var(--line); color: var(--ink-soft); display: flex; font-family: "Avenir Next", "Segoe UI", sans-serif; font-size: 0.68rem; justify-content: space-between; letter-spacing: 0.15em; padding-bottom: 1rem; text-transform: uppercase; }
.result-status { color: var(--accent); }
.result-grid { align-items: start; display: grid; gap: clamp(2.5rem, 7vw, 7rem); grid-template-columns: minmax(250px, 0.78fr) minmax(0, 1.22fr); padding-top: 2.5rem; }
.portrait-frame { align-self: stretch; background: var(--ink); min-height: 39rem; overflow: hidden; position: relative; }
.portrait-frame::after { background: linear-gradient(0deg, rgba(12, 29, 27, 0.65), transparent 45%); content: ""; inset: 0; pointer-events: none; position: absolute; }
.portrait-frame img { display: block; height: 100%; object-fit: cover; object-position: center top; width: 100%; }
.portrait-caption { bottom: 1rem; color: rgba(255, 253, 248, 0.9); display: flex; font-family: "Avenir Next", "Segoe UI", sans-serif; font-size: 0.68rem; justify-content: space-between; left: 1rem; letter-spacing: 0.12em; position: absolute; right: 1rem; text-transform: uppercase; z-index: 1; }
.result-copy { padding: 1rem 0 2rem; }
.result-copy h2 { align-items: baseline; display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 0.6rem; }
.result-copy h2 small { color: var(--ink-soft); font-family: "Avenir Next", "Segoe UI", sans-serif; font-size: 0.8rem; letter-spacing: 0.08em; }
.opening-line { color: var(--accent-deep); font-size: 1.08rem; line-height: 1.8; max-width: 34rem; }
.result-rule { background: var(--gold); height: 2px; margin: 1.7rem 0 1.8rem; width: 3.5rem; }
.result-section { border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; padding-bottom: 1.35rem; }
.result-section h3 { color: var(--ink-soft); font-family: "Avenir Next", "Segoe UI", sans-serif; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.13em; margin-bottom: 0.6rem; text-transform: uppercase; }
.result-section p { font-size: 1rem; line-height: 2; margin-bottom: 0; }
.answer-trace { display: grid; gap: 0.7rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trace-item { border-left: 2px solid var(--gold); padding-left: 0.75rem; }
.trace-item > span { color: var(--accent); font-family: "Avenir Next", "Segoe UI", sans-serif; font-size: 0.67rem; letter-spacing: 0.12em; }
.trace-item p { color: var(--ink-soft); font-size: 0.86rem; line-height: 1.7; margin-top: 0.25rem; }
.result-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 2rem; }
.coming-soon { color: rgba(54, 80, 76, 0.6); font-family: "Avenir Next", "Segoe UI", sans-serif; font-size: 0.62rem; letter-spacing: 0.05em; }
.result-actions .text-button:disabled { color: rgba(54, 80, 76, 0.55); }
.sr-only { height: 1px; margin: -1px; overflow: hidden; position: absolute; width: 1px; clip: rect(0, 0, 0, 0); }

.story-screen { background: #111918; color: var(--white); height: 100vh; height: 100svh; overflow: hidden; }
.story-stage { height: 100%; isolation: isolate; overflow: hidden; position: relative; }
.story-intro { align-items: flex-end; background: #0b1211; display: flex; inset: 0; justify-content: flex-start; position: absolute; z-index: 30; }
.story-intro-video { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.story-intro-scrim { background: linear-gradient(0deg, rgba(7, 16, 15, 0.86), rgba(7, 16, 15, 0.08) 64%, rgba(7, 16, 15, 0.32)); inset: 0; pointer-events: none; position: absolute; }
.story-intro-ui { bottom: 2rem; left: 4.2vw; max-width: 32rem; position: absolute; right: 4.2vw; z-index: 1; }
.story-intro-meta { align-items: center; display: flex; justify-content: space-between; }
.story-intro-meta .eyebrow { margin-bottom: 0; }
.story-intro-time { color: rgba(255, 253, 248, 0.78); font-family: "Avenir Next", "Segoe UI", sans-serif; font-size: 0.72rem; letter-spacing: 0.08em; }
.story-intro-progress { background: rgba(255, 253, 248, 0.28); height: 2px; margin: 0.7rem 0 0.9rem; overflow: hidden; }
.story-intro-progress span { background: var(--gold); display: block; height: 100%; transition: width 120ms linear; width: 0; }
.story-intro-skip { align-items: center; background: transparent; border: 1px solid rgba(255, 253, 248, 0.62); color: var(--white); display: inline-flex; gap: 1.5rem; justify-content: space-between; min-height: 44px; padding: 0.65rem 0.9rem; transition: background 160ms ease, border-color 160ms ease; }
.story-intro-skip:hover { background: rgba(255, 253, 248, 0.14); border-color: var(--gold); }
.story-scene-image { --scene-scale-start: 1.04; --scene-scale-end: 1.1; --scene-x-start: 0%; --scene-x-end: 0%; --scene-y-start: 0%; --scene-y-end: 0%; height: 100%; inset: 0; object-fit: cover; position: absolute; transition: opacity 360ms ease; width: 100%; will-change: transform, opacity; z-index: -3; }
.story-scene-image.is-motion-active { animation: story-scene-drift 18s ease-out both; }
.story-scene-image.is-changing { opacity: 0.35; }
.story-scene-image[data-motion="left"] { --scene-x-start: 1.2%; --scene-x-end: -1.2%; --scene-y-start: 0.3%; --scene-y-end: -0.3%; }
.story-scene-image[data-motion="right"] { --scene-x-start: -1.2%; --scene-x-end: 1.2%; --scene-y-start: -0.3%; --scene-y-end: 0.3%; }
.story-scene-image[data-motion="up"] { --scene-x-start: 0.5%; --scene-x-end: -0.5%; --scene-y-start: 1.1%; --scene-y-end: -1.1%; }
.story-scene-image[data-motion="down"] { --scene-x-start: -0.5%; --scene-x-end: 1%; --scene-y-start: -1.1%; --scene-y-end: 1.1%; }
@keyframes story-scene-drift { from { transform: translate3d(var(--scene-x-start), var(--scene-y-start), 0) scale(var(--scene-scale-start)); } to { transform: translate3d(var(--scene-x-end), var(--scene-y-end), 0) scale(var(--scene-scale-end)); } }
.story-scrim { background: linear-gradient(90deg, rgba(8, 18, 17, 0.78) 0, rgba(8, 18, 17, 0.25) 47%, rgba(8, 18, 17, 0.18) 70%, rgba(8, 18, 17, 0.64) 100%), linear-gradient(0deg, rgba(8, 18, 17, 0.9) 0, transparent 38%, rgba(8, 18, 17, 0.46) 100%); inset: 0; pointer-events: none; position: absolute; z-index: -2; }
.story-heading { left: 4.2vw; max-width: 37rem; position: absolute; top: 5.6rem; z-index: 2; }
.story-heading .eyebrow { margin-bottom: 0.7rem; }
.story-heading h2 { font-size: 3.25rem; line-height: 1.14; margin-bottom: 0.65rem; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4); }
.story-heading > p:not(.eyebrow) { color: rgba(255, 253, 248, 0.84); font-size: 1.08rem; line-height: 1.9; margin: 0; max-width: 35rem; }
.story-view-label { border: 1px solid rgba(255, 253, 248, 0.42); color: rgba(255, 253, 248, 0.9); display: inline-flex; font-family: "Avenir Next", "Segoe UI", sans-serif; font-size: 0.8rem; margin-top: 0.95rem; min-height: 2rem; padding: 0.35rem 0.8rem; }
.story-hotspots { inset: 0 22rem 6.5rem 0; pointer-events: none; position: absolute; z-index: 3; }
.story-hotspot { align-items: center; background: rgba(255, 253, 248, 0.13); border: 1px solid rgba(255, 253, 248, 0.75); border-radius: 50%; display: flex; height: 44px; justify-content: center; pointer-events: auto; position: absolute; transform: translate(-50%, -50%); transition: background 160ms ease, transform 160ms ease; width: 44px; }
.story-hotspot::before { animation: story-hotspot-pulse 2.8s ease-out infinite; border: 1px solid rgba(229, 191, 113, 0.72); border-radius: 50%; content: ""; inset: -7px; opacity: 0; position: absolute; }
.story-hotspot::after { border: 1px solid rgba(229, 191, 113, 0.7); border-radius: 50%; content: ""; inset: 5px; position: absolute; }
.story-hotspot-dot { background: var(--gold); border-radius: 50%; height: 7px; width: 7px; }
.story-hotspot:hover { background: rgba(180, 78, 50, 0.7); transform: translate(-50%, -50%) scale(1.08); }
.story-hotspot:nth-child(2)::before { animation-delay: -0.9s; }
.story-hotspot:nth-child(3)::before { animation-delay: -1.8s; }
@keyframes story-hotspot-pulse { 0%, 12% { opacity: 0; transform: scale(0.82); } 42% { opacity: 0.7; } 100% { opacity: 0; transform: scale(1.16); } }
.story-hotspot:focus-visible, .story-action:focus-visible, .story-dossier-toggle:focus-visible, .story-panel-close:focus-visible, .story-image-error button:focus-visible, .story-suggestions button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.story-dossier { background: rgba(244, 239, 228, 0.96); bottom: 1.5rem; box-shadow: 0 20px 54px rgba(0, 0, 0, 0.28); color: var(--ink); overflow: hidden; position: absolute; right: 1.5rem; top: 5.1rem; width: 20rem; z-index: 5; }
.story-dossier-toggle { display: none; }
.story-dossier-body { display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 1rem; }
.story-player { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 0.8rem; padding-bottom: 0.85rem; }
.story-player img { background: var(--paper-deep); height: 5.1rem; object-fit: cover; object-position: center top; width: 4rem; }
.story-player div { display: grid; gap: 0.15rem; min-width: 0; }
.story-player strong { font-size: 1.08rem; font-weight: 500; overflow-wrap: anywhere; }
.story-player span { color: var(--accent); font-family: "Avenir Next", "Segoe UI", sans-serif; font-size: 0.72rem; }
.story-objective { border-bottom: 1px solid var(--line); padding: 0.8rem 0; }
.story-objective > span, .story-progress > span:first-child, .story-clues > div > span { color: var(--ink-soft); font-family: "Avenir Next", "Segoe UI", sans-serif; font-size: 0.74rem; }
.story-objective p { font-size: 0.98rem; line-height: 1.7; margin: 0.25rem 0 0; }
.story-meta { border-bottom: 1px solid var(--line); color: var(--ink-soft); display: grid; font-family: "Avenir Next", "Segoe UI", sans-serif; font-size: 0.78rem; gap: 0.25rem; padding: 0.65rem 0; }
.story-meta b { color: var(--accent); font-weight: 600; }
.story-progress { display: grid; grid-template-columns: 1fr auto; padding: 0.7rem 0 0.55rem; }
.story-progress > span:nth-child(2) { color: var(--ink-soft); font-family: "Avenir Next", "Segoe UI", sans-serif; font-size: 0.68rem; }
.story-progress i { background: rgba(23, 43, 42, 0.12); grid-column: 1 / -1; height: 3px; margin-top: 0.45rem; overflow: hidden; }
.story-progress i b { background: var(--accent); display: block; height: 100%; transition: width 260ms ease; width: 0; }
.story-clues { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.story-clues > div { align-items: center; display: flex; justify-content: space-between; padding: 0.45rem 0; }
.story-clues > div b { align-items: center; background: var(--accent); border-radius: 50%; color: var(--white); display: inline-flex; font-family: "Avenir Next", "Segoe UI", sans-serif; font-size: 0.66rem; height: 1.5rem; justify-content: center; width: 1.5rem; }
.story-clues ul { list-style: none; margin: 0; overflow: auto; padding: 0; scrollbar-width: thin; }
.story-clues li { border-top: 1px solid var(--line); display: grid; gap: 0.2rem; padding: 0.55rem 0; }
.story-clues li strong { font-size: 0.9rem; font-weight: 600; }
.story-clues li span { color: var(--ink-soft); font-size: 0.78rem; line-height: 1.6; }
.story-clues li.is-empty { color: rgba(54, 80, 76, 0.68); font-size: 0.76rem; }

.story-actions { align-items: flex-end; bottom: 1.5rem; display: flex; gap: 0.6rem; left: 4.2vw; max-width: calc(100vw - 27rem); position: absolute; z-index: 4; }
.story-action { align-items: center; background: rgba(255, 253, 248, 0.93); border: 1px solid transparent; color: var(--ink); display: inline-flex; font-family: "Avenir Next", "Segoe UI", sans-serif; font-size: 0.9rem; gap: 0.7rem; justify-content: space-between; line-height: 1.4; min-height: 48px; padding: 0.75rem 1rem; text-align: left; transition: background 160ms ease, border-color 160ms ease, color 160ms ease; }
.story-action:hover:not(:disabled) { background: var(--white); border-color: var(--gold); color: var(--accent-deep); }
.story-action.is-primary { background: var(--accent); color: var(--white); }
.story-action.is-primary:hover:not(:disabled) { background: var(--accent-deep); color: var(--white); }
.story-action.is-danger { background: #702c29; color: var(--white); }
.story-action.is-quiet { background: rgba(255, 253, 248, 0.14); border-color: rgba(255, 253, 248, 0.36); color: var(--white); }
.story-action:disabled { background: rgba(244, 239, 228, 0.72); color: rgba(23, 43, 42, 0.62); }
.story-action small { display: block; font-family: "Noto Serif SC", "Songti SC", serif; font-size: 0.76rem; margin-top: 0.15rem; max-width: 15rem; }
.story-action > span:first-child { min-width: 0; }
.story-notice { background: rgba(19, 35, 32, 0.92); border-left: 3px solid var(--gold); bottom: 6.4rem; color: rgba(255, 253, 248, 0.92); font-size: 0.92rem; left: 4.2vw; line-height: 1.65; margin: 0; max-width: min(38rem, calc(100vw - 27rem)); padding: 0.7rem 0.85rem; position: absolute; z-index: 4; }
.story-notice.is-error { border-color: #e36a54; color: #ffe0d9; }

.story-panel { background: rgba(18, 31, 29, 0.97); border-top: 2px solid var(--gold); bottom: 6.4rem; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.42); left: 4.2vw; max-height: 66vh; max-width: 60rem; overflow: auto; position: absolute; right: 22.8rem; z-index: 7; }
.story-panel-close { align-items: center; background: transparent; border: 0; color: rgba(255, 253, 248, 0.75); display: flex; font-family: "Segoe UI", sans-serif; font-size: 1.35rem; height: 44px; justify-content: center; position: absolute; right: 0.3rem; top: 0.3rem; width: 44px; z-index: 1; }
.story-panel-content { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); min-height: 13rem; }
.story-panel-portrait { min-height: 13rem; overflow: hidden; }
.story-panel-portrait img { display: block; height: 100%; object-fit: cover; object-position: center top; width: 100%; }
.story-panel-copy { min-width: 0; padding: 1.3rem 3.4rem 1.3rem 1.4rem; }
.story-panel-content > .story-panel-copy:first-child { grid-column: 1 / -1; padding-left: 1.5rem; }
.story-panel-speaker { color: var(--gold); font-family: "Avenir Next", "Segoe UI", sans-serif; font-size: 0.78rem; margin-bottom: 0.5rem; }
.story-panel-copy h3 { font-size: 1.7rem; font-weight: 400; line-height: 1.35; margin-bottom: 0.8rem; }
.story-panel-copy > p:not(.story-panel-speaker) { color: rgba(255, 253, 248, 0.88); font-size: 1.04rem; line-height: 1.9; margin-bottom: 0.9rem; }
.story-panel-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.8rem; }
.story-panel-action { max-width: 20rem; }
.story-input-form, .story-chat-form { display: grid; gap: 0.65rem; }
.story-input-form textarea, .story-chat-form textarea { background: rgba(255, 253, 248, 0.96); min-height: 5rem; }
.story-suggestions { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.story-suggestions button { background: transparent; border: 1px solid rgba(229, 191, 113, 0.55); color: rgba(255, 253, 248, 0.86); font-size: 0.84rem; min-height: 44px; padding: 0.5rem 0.7rem; text-align: left; }
.story-chat-copy { display: flex; flex-direction: column; max-height: 56vh; }
.story-chat-log { display: grid; flex: 1; gap: 0.6rem; min-height: 5rem; overflow: auto; padding-right: 0.25rem; }
.story-message { border-left: 2px solid rgba(255, 253, 248, 0.28); padding: 0.25rem 0 0.25rem 0.7rem; }
.story-message.is-assistant { border-color: var(--gold); }
.story-message span, .story-chat-form label { color: var(--gold); font-family: "Avenir Next", "Segoe UI", sans-serif; font-size: 0.66rem; }
.story-message p { color: rgba(255, 253, 248, 0.88); font-size: 0.92rem; line-height: 1.75; margin: 0.1rem 0 0; }
.story-chat-empty { color: rgba(255, 253, 248, 0.62); font-size: 0.82rem; }
.story-chat-form { border-top: 1px solid rgba(255, 253, 248, 0.15); margin-top: 0.75rem; padding-top: 0.75rem; }
.story-chat-finish { background: transparent; border-color: rgba(255, 253, 248, 0.38); color: var(--white); }

.story-ending { align-items: center; background: rgba(9, 23, 21, 0.95); display: flex; flex-direction: column; inset: 0; justify-content: flex-start; overflow: auto; padding: 7rem 2rem 4rem; position: absolute; text-align: left; z-index: 9; }
.archive-book { aspect-ratio: 16 / 9; display: grid; flex: 0 0 auto; grid-template-columns: 1fr 1fr; margin: 0 auto; max-width: 1600px; width: min(1600px, 100%); }
.archive-book-page { background-image: url("./assets/scenes/story/archive-book-template.jpg?v=20260915"); background-repeat: no-repeat; background-size: 200% 100%; color: #3f2c1e; overflow: hidden; position: relative; }
.archive-book-page.is-left { background-position: left center; }
.archive-book-page.is-right { background-position: right center; }
.archive-book-title { align-items: center; display: flex; left: 24%; position: absolute; right: 11%; top: 29.1%; }
.archive-book-title strong { color: #542f20; font-size: clamp(0.92rem, 1.45vw, 1.35rem); line-height: 1.3; }
.archive-book-personality, .archive-book-history, .archive-book-official, .archive-book-closing { font-size: clamp(0.68rem, 0.95vw, 0.91rem); line-height: 1.55; overflow: hidden; padding: 0.3rem 0.4rem; position: absolute; }
.archive-book-personality { bottom: 39.6%; left: 9.3%; right: 10.5%; top: 43.1%; }
.archive-book-personality p { margin: 0; }
.archive-book-personality p + p { border-top: 1px solid rgba(105, 75, 40, 0.2); margin-top: 0.55rem; padding-top: 0.45rem; }
.archive-book-review { bottom: 7.5%; display: grid; font-size: clamp(0.66rem, 0.9vw, 0.86rem); gap: 0; grid-template-rows: repeat(4, minmax(0, 1fr)); left: 11.5%; line-height: 1.25; margin: 0; overflow: hidden; padding: 0.2rem 0.35rem; position: absolute; right: 10.5%; top: 72.5%; }
.archive-book-review div { align-items: center; display: flex; min-height: 0; padding-left: 27%; }
.archive-book-review dd { margin: 0; }
.archive-book-history { bottom: 61.7%; left: 9%; right: 9.5%; top: 15.5%; }
.archive-book-history > p { margin: 0 0 0.45rem; }
.archive-attitude { color: #78301f; font-weight: 700; }
.archive-dialogue { border-top: 1px solid rgba(105, 75, 40, 0.24); display: grid; gap: 0.35rem; padding-top: 0.4rem; }
.archive-dialogue-line { border-left: 2px solid #9f7135; padding-left: 0.45rem; }
.archive-dialogue-line.is-governor { border-color: #8c2d1e; }
.archive-dialogue-line span { color: #762719; font-size: 0.75em; font-weight: 700; }
.archive-dialogue-line p { margin: 0; }
.archive-empty { color: #72543b; margin: 0; }
.archive-book-official { bottom: 30.4%; left: 10%; right: 10.5%; top: 51.1%; }
.archive-book-official p { margin: 0 0 0.55rem; }
.archive-book-closing { align-items: center; bottom: 7.1%; display: flex; justify-content: center; left: 10%; right: 10.5%; text-align: center; top: 84.3%; }
.archive-book-closing p { margin: 0; }
.story-ending-actions { align-items: center; display: flex; gap: 1.4rem; justify-content: center; margin-top: 2rem; }
.story-ending .primary-button { background: #7a2a18; border-color: #7a2a18; }
.story-ending .text-button { color: rgba(255, 253, 248, 0.82); }
.story-loading { align-items: center; background: rgba(10, 20, 19, 0.82); display: flex; flex-direction: column; gap: 0.2rem; inset: 0; justify-content: center; position: absolute; z-index: 20; }
.story-loading .loader-ring { margin-bottom: 0.7rem; }
.story-image-error { align-items: center; background: #6f2f29; bottom: 1.5rem; display: flex; gap: 0.8rem; left: 50%; min-height: 44px; padding: 0.45rem 0.65rem 0.45rem 0.9rem; position: absolute; transform: translateX(-50%); z-index: 21; }
.story-image-error button { background: var(--white); border: 0; color: var(--accent-deep); min-height: 34px; padding: 0.3rem 0.75rem; }
.story-screen.is-busy { cursor: progress; }

@media (max-width: 980px) {
  .story-heading { max-width: calc(100vw - 24rem); }
  .story-heading h2 { font-size: 2.7rem; }
  .story-dossier { width: 18.5rem; }
  .story-hotspots { right: 20.5rem; }
  .story-actions, .story-notice { max-width: calc(100vw - 24rem); }
  .story-panel { right: 21.2rem; }
}

@media (max-width: 700px) {
  .story-screen { min-height: 100svh; }
  .story-intro-ui { bottom: 1.25rem; left: 1rem; right: 1rem; }
  .story-intro-skip { width: 100%; }
  .story-scrim { background: linear-gradient(0deg, rgba(8, 18, 17, 0.94) 0, rgba(8, 18, 17, 0.18) 52%, rgba(8, 18, 17, 0.7) 100%); }
  .story-heading { left: 1.15rem; max-width: none; right: 1.15rem; top: 4.7rem; }
  .story-heading .eyebrow { font-size: 0.7rem; margin-bottom: 0.35rem; }
  .story-heading h2 { font-size: 2rem; margin-bottom: 0.35rem; }
  .story-heading > p:not(.eyebrow) { display: -webkit-box; font-size: 0.92rem; line-height: 1.7; max-width: none; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
  .story-view-label { font-size: 0.72rem; margin-top: 0.5rem; }
  .story-hotspots { bottom: 8.1rem; right: 0; }
  .story-actions { bottom: 4.1rem; gap: 0.45rem; left: 0; max-width: none; overflow-x: auto; padding: 0 1rem 0.35rem; right: 0; scrollbar-width: none; }
  .story-actions::-webkit-scrollbar { display: none; }
  .story-actions .story-action { flex: 0 0 auto; max-width: 15rem; }
  .story-notice { bottom: 7.7rem; left: 1rem; max-width: none; right: 1rem; }
  .story-dossier { bottom: 0; left: 0; max-height: 54svh; right: 0; top: auto; transform: translateY(calc(100% - 3.45rem)); transition: transform 220ms ease; width: auto; z-index: 6; }
  .story-dossier.is-expanded { transform: translateY(0); }
  .story-dossier-toggle { align-items: center; background: var(--paper); border: 0; border-bottom: 1px solid var(--line); color: var(--ink); display: flex; height: 3.45rem; justify-content: space-between; min-height: 44px; padding: 0 1rem; width: 100%; }
  .story-dossier.is-expanded .story-dossier-toggle span:last-child { transform: rotate(180deg); }
  .story-dossier-body { max-height: calc(54svh - 3.45rem); overflow: auto; padding: 0.8rem 1rem 1rem; }
  .story-player img { height: 4.4rem; width: 3.5rem; }
  .story-objective { padding: 0.6rem 0; }
  .story-clues { min-height: 7rem; }
  .story-panel { border-top-width: 1px; bottom: 0; left: 0; max-height: 74svh; max-width: none; right: 0; z-index: 8; }
  .story-panel-content { grid-template-columns: 6.5rem minmax(0, 1fr); min-height: 10.5rem; }
  .story-panel-portrait { min-height: 10.5rem; }
  .story-panel-copy { padding: 1rem 2.9rem 1rem 1rem; }
  .story-panel-content > .story-panel-copy:first-child { padding-left: 1rem; }
  .story-panel-copy h3 { font-size: 1.45rem; }
  .story-panel-copy > p:not(.story-panel-speaker) { font-size: 0.98rem; line-height: 1.8; }
  .story-panel-actions { flex-direction: column; }
  .story-panel-action { justify-content: space-between; max-width: none; width: 100%; }
  .story-suggestions { display: grid; }
  .story-suggestions button { width: 100%; }
  .story-chat-copy { grid-column: 2; max-height: 74svh; }
  .story-chat-log { max-height: 25svh; }
  .story-ending { padding: 5rem 0.7rem 2rem; }
  .archive-book { aspect-ratio: auto; display: block; width: calc(100vw - 1.4rem); }
  .archive-book-page { aspect-ratio: 8 / 9; }
  .archive-book-title strong { font-size: clamp(0.82rem, 3.8vw, 1rem); }
  .archive-book-personality, .archive-book-history, .archive-book-official, .archive-book-closing { font-size: clamp(0.63rem, 2.8vw, 0.78rem); line-height: 1.42; padding: 0.15rem 0.25rem; }
  .archive-book-personality p + p { margin-top: 0.25rem; padding-top: 0.2rem; }
  .archive-book-review { font-size: clamp(0.6rem, 2.65vw, 0.74rem); }
  .archive-book-review div { padding-left: 27%; }
  .story-ending-actions { align-items: stretch; flex-direction: column; gap: 0.7rem; }
  .story-ending-actions .primary-button { width: 100%; }
  .story-ending-actions .text-button { justify-content: center; }
  .story-image-error { bottom: 4.2rem; white-space: nowrap; }
}

@media (max-width: 420px) {
  .story-heading h2 { font-size: 1.78rem; }
  .story-heading > p:not(.eyebrow) { -webkit-line-clamp: 2; }
  .story-panel-content { grid-template-columns: 5.4rem minmax(0, 1fr); }
  .story-panel-copy { padding-left: 0.8rem; }
  .story-action { font-size: 0.84rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .loader-ring { animation-duration: 3s; }
  .story-intro-video, .story-scene-image, .story-hotspot::before { animation: none !important; }
  .story-scene-image, .story-hotspot, .story-dossier, .story-progress i b { transition: none; }
}

@media (max-width: 820px) {
  .topbar { padding: 1rem 1.2rem; }
  .home-content { margin-left: 7vw; padding-right: 1.5rem; }
  .home-copy { max-width: 26rem; }
  .seal { bottom: 8rem; right: 7vw; }
  .identity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .answer-options { grid-template-columns: 1fr; }
  .result-grid { gap: 2rem; grid-template-columns: 1fr; }
  .portrait-frame { justify-self: center; max-height: 35rem; max-width: 24rem; min-height: 24rem; width: 100%; }
  .result-copy { padding-top: 0; }
}

@media (max-width: 520px) {
  .topbar-status { display: none; }
  .home-content { margin-left: 1.3rem; max-width: calc(100% - 1.3rem); padding: 7rem 1.3rem 5rem 0; width: calc(100% - 1.3rem); }
  h1 { font-size: 3.6rem; }
  .home-lede { font-size: 1rem; letter-spacing: 0.04em; }
  .home-footnote { margin-top: 3.5rem; }
  .home-scroll { display: none; }
  .seal { bottom: 2rem; font-size: 0.82rem; right: 1.3rem; }
  .form-shell, .result-shell { padding-left: 1.2rem; padding-right: 1.2rem; }
  .form-shell { padding-top: 6.5rem; }
  .section-intro h2 { font-size: 2.45rem; }
  .identity-grid { gap: 0.55rem; }
  .identity-option { min-height: 9.2rem; }
  .identity-option-inner { padding: 0.85rem; }
  .identity-option strong { font-size: 1rem; }
  .question-card { padding: 1rem; }
  .question-card legend { align-items: flex-start; font-size: 1.05rem; }
  .axis-label { margin-left: 0; }
  .form-actions { align-items: stretch; flex-direction: column-reverse; gap: 1rem; }
  .form-actions .primary-button { justify-content: space-between; width: 100%; }
  .generation-content { padding-left: 1.3rem; padding-right: 1.3rem; }
  .result-shell { padding-top: 6.5rem; }
  .result-grid { padding-top: 1.6rem; }
  .portrait-frame { max-height: 28rem; }
  .result-copy h2 { font-size: 2.4rem; }
  .answer-trace { grid-template-columns: 1fr; }
  .result-actions { align-items: stretch; flex-direction: column; }
  .result-actions .primary-button { justify-content: space-between; width: 100%; }
}

@media (max-width: 360px) {
  h1 { font-size: 3.2rem; }
}