/* Theme and shared components. Desktop pages use one viewport; long results have tabs or pages. */
:root {
  --paper:#f5f3eb; --ink:#2d3d36; --muted:#626e64; --line:#dcded3;
  --green:#31645b; --orange:#c77b55; --blue:#e7edf0; --white:#fbfaf5;
  --serif:Georgia,"Songti SC","Noto Serif CJK SC","SimSun",serif;
  --sans:Inter,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --mono:"SFMono-Regular",Consolas,monospace;
  color-scheme:light; font-family:var(--sans); color:var(--ink); background:var(--paper); font-synthesis:none;
}
* { box-sizing:border-box; }
body { margin:0; font-size:14px; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; color:inherit; }
button,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button { cursor:pointer; }
button:disabled { cursor:default; opacity:.5; }
button,a,input,select,canvas { outline-offset:3px; }
:focus-visible { outline:2px solid var(--green); }
[hidden] { display:none!important; }
p { margin:0 0 12px; }
h1,h2,h3 { margin:0; }
.mono { font-family:var(--mono); overflow-wrap:anywhere; }
.shell { width:calc(100% - 64px); max-width:1380px; margin:0 auto; }
.site-header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:24px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; font:700 30px var(--serif); letter-spacing:-1.4px; white-space:nowrap; }
.brand-dot { color:var(--orange); }
.brand-icon { position:relative; display:inline-flex; justify-content:center; align-items:center; gap:5px; width:27px; height:33px; margin-right:12px; border:2px solid var(--green); border-radius:7px; transform:rotate(-8deg); }
.brand-icon:before { content:""; position:absolute; top:-6px; left:6px; right:6px; height:8px; border:2px solid var(--paper); background:#d9bd93; border-radius:2px; }
.brand-icon:after { content:""; position:absolute; bottom:6px; width:10px; height:4px; border-bottom:2px solid var(--green); border-radius:50%; }
.brand-icon i { width:3px; height:3px; margin-bottom:3px; background:var(--green); border-radius:50%; }
.tool-tabs { display:flex; justify-content:center; gap:5px; min-width:0; }
.tool-tabs a { display:flex; align-items:center; justify-content:center; padding:10px 13px; border-radius:5px; white-space:nowrap; font-size:13px; }
.tool-tabs a[aria-current="page"] { background:#e4e9dd; color:var(--green); }
.tool-tabs a:hover { background:#e9eade; }
.header-actions { display:flex; align-items:center; gap:14px; }
.danmaku-toggle { display:inline-flex; align-items:center; gap:6px; padding:6px 9px; border:1px solid var(--line); border-radius:5px; background:transparent; font-size:11px; white-space:nowrap; }
.danmaku-toggle:before { content:""; width:5px; height:5px; border-radius:50%; background:#a2a999; }
.danmaku-toggle[aria-pressed="true"]:before { background:var(--green); }
.text-button { padding:5px 0; border:0; background:none; color:var(--muted); font-size:12px; white-space:nowrap; }
#about-button { width:28px; height:28px; border:1px solid var(--line); border-radius:50%; }
.lang-switch { display:flex; align-items:center; gap:3px; padding-left:12px; border-left:1px solid var(--line); font-size:12px; }
.lang-switch a { padding:7px; border-radius:5px; }
.lang-switch a[aria-current="page"] { background:#e4e9dd; color:var(--green); }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }
.site-footer p { margin:0; line-height:1.6; }
.site-footer p span { font-size:9px; }
.site-footer .text-button { font-size:11px; }
.eyebrow,.tool-eyebrow { color:var(--orange); font:10px var(--mono); letter-spacing:1px; }
.primary-button,.secondary-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:10px 16px; border:1px solid var(--green); border-radius:6px; font-size:13px; line-height:1.4; }
.primary-button { color:var(--white); background:var(--green); }
.primary-button:hover { background:#254f47; }
.secondary-button { background:transparent; color:var(--green); border-color:#becabb; }
.secondary-button:hover { background:#e9eade; }
.button-row,.roast-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.text-link { border:0; padding:0; background:none; color:var(--green); text-decoration:underline; text-underline-offset:4px; font-size:12px; }
.back-button { display:inline-block; width:fit-content; padding:4px 0; border:0; background:none; color:var(--muted); font-size:12px; }
.body-copy { color:var(--muted); font-size:14px; line-height:1.8; }
.small-disclaimer,.share-hint,.roast-fiction { margin:0; color:var(--muted); font-size:11px; line-height:1.7; }
.result-stamp { display:inline-block; padding:4px 7px; border:1px solid #c8a783; color:#a16d4a; font-size:10px; letter-spacing:.6px; }
.status-dot { display:inline-block; flex:none; width:6px; height:6px; border-radius:50%; background:#7d9c6a; box-shadow:0 0 0 3px #e6e9db; }
.tool-content { min-width:0; min-height:0; }
.tool-content h2 { margin-bottom:12px; font-size:22px; font-weight:500; line-height:1.45; }
.intro { margin:0; color:#657163; font-size:14px; line-height:1.7; }
.page-heading { display:flex; align-items:center; min-width:0; }
.page-heading h1 { font:500 26px/1.2 var(--serif); margin-bottom:4px; }
.page-heading .intro { font-size:12px; }

/* Home and the single elastic head. Overscan keeps stretched edges visible. */
.hero-heading h1 { margin:0 0 20px; font:500 clamp(42px,5vw,74px)/1.18 var(--serif); letter-spacing:-2px; }
.lang-en .hero-heading h1 { font-size:clamp(39px,4.3vw,64px); }
.title-last { position:relative; z-index:0; }
.title-last:after { content:""; position:absolute; z-index:-1; bottom:6px; left:1px; width:85%; height:8px; border-radius:50%; background:#e2c69d; transform:rotate(-1deg); }
.title-period { color:var(--orange); }
.public-record { padding-top:16px; border-top:1px solid var(--line); }
.tool-content .public-record h2 { margin:0 0 10px; font:500 22px/1.5 var(--serif); }
.record-period { color:var(--muted); font-size:10px; line-height:1.5; letter-spacing:.5px; }
.record-numbers { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:8px 0 12px; }
.record-numbers>div { display:flex; flex-direction:column; min-width:0; }
.record-numbers>div+div { border-left:1px solid var(--line); padding-left:24px; }
.record-numbers dd { margin:0 0 4px; font:400 40px/1 var(--serif); font-variant-numeric:tabular-nums; letter-spacing:-1px; }
.record-numbers dd span { margin-left:5px; color:var(--muted); font:14px var(--sans); letter-spacing:0; }
.record-numbers dt { order:1; color:var(--muted); font-size:11px; line-height:1.5; }
.record-revenue { margin:0 0 5px; font-size:13px; line-height:1.75; }
.record-revenue strong { font-weight:600; }
.record-question { margin:10px 0 8px; font:500 18px/1.6 var(--serif); }
.record-question p { margin:0; }
.record-question p:first-child { margin-bottom:3px; color:var(--muted); font:12px/1.6 var(--sans); }
.record-question em { color:#a45f3d; font-style:normal; }
.record-sources { display:flex; flex-wrap:wrap; gap:8px; color:var(--muted); font-size:10px; line-height:1.5; }
.record-sources a { text-decoration:underline; text-underline-offset:3px; }
.record-sources a:hover { color:var(--green); }
.portrait-room { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; min-height:0; }
.portrait-stage { position:relative; aspect-ratio:1; width:100%; overflow:clip; overflow-clip-margin:32px; cursor:grab; touch-action:none; user-select:none; }
.portrait-stage.is-grabbing { cursor:grabbing; }
.portrait-canvas-wrap { position:absolute; inset:-30%; width:160%; height:160%; pointer-events:none; }
.portrait-canvas-wrap canvas { display:block; width:100%; height:100%; }
.portrait-canvas-wrap img { position:absolute; top:17.5%; left:17.5%; width:65%; height:65%; object-fit:contain; }
.play-hint { margin:0; padding:12px 0 0; text-align:center; color:var(--muted); font-size:12px; line-height:1.7; }
.lesson-count { max-width:34em; margin:1.7em 0 0; padding:0 16px; text-align:center; color:var(--muted); font-size:12px; line-height:1.7; }
.danmaku { position:absolute; left:100%; display:block; max-width:none; padding:1px 4px; border:0; background:none; color:var(--danmaku-ink,#557263); opacity:.72; white-space:nowrap; font:600 16px/1.5 var(--sans); letter-spacing:.2px; text-shadow:0 1px 2px #fff,0 0 5px #fbfaf5; pointer-events:none; will-change:transform; animation:danmaku-flight 20s linear forwards; }
.danmaku.just-published { color:#a66036; opacity:1; font-weight:700; }
.roast-danmaku.is-paused .danmaku { animation-play-state:paused; }
.danmaku.is-still { left:12px; max-width:calc(100% - 24px); overflow:hidden; text-overflow:ellipsis; animation:none; }

/* Shared result tabs and pagination: contents stay reachable without page scrolling. */
.screen-tabs { display:grid; grid-template-rows:auto minmax(0,1fr); gap:14px; min-width:0; min-height:0; }
.screen-tab-list { display:flex; flex-wrap:wrap; align-items:center; gap:5px; border-bottom:1px solid var(--line); padding-bottom:8px; }
.screen-tab-list button { min-height:32px; padding:6px 12px; border:0; border-radius:5px; background:transparent; color:var(--muted); font-size:12px; }
.screen-tab-list button[aria-selected="true"] { background:#e4e9dd; color:var(--green); }
.screen-panels,.screen-panel,.paged-screen-list,.paged-screen { min-width:0; min-height:0; }
.screen-pages { display:grid; grid-template-rows:minmax(0,1fr) auto; gap:10px; min-height:0; }
.page-controls { display:flex; justify-content:center; align-items:center; gap:18px; padding-top:6px; font-size:11px; color:var(--muted); }
.page-controls button { min-height:30px; padding:5px 10px; background:transparent; border:1px solid var(--line); border-radius:5px; font-size:11px; }

/* Scene composer */
#roast-composer { width:100%; max-width:1280px; margin-inline:auto; }
.tool-page .desk:has(#roast-composer)>.page-heading { display:flex; width:100%; max-width:1280px; margin-inline:auto; justify-content:space-between; align-items:flex-start; gap:16px; }
.page-heading>#roast-danmaku-toggle { flex-shrink:0; margin-top:2px; }
.composer-layout { display:grid; grid-template-columns:300px minmax(0,1fr); grid-template-rows:minmax(0,1fr); gap:24px; height:100%; min-height:0; }
.composer-side { display:flex; flex-direction:column; gap:16px; min-width:0; min-height:0; }
.composer-settings { align-self:start; flex:none; max-height:100%; overflow-y:auto; min-width:0; padding:22px; border:1px solid #d4ddcb; border-radius:8px; background:#edf0e5; }
.composer-portrait { flex:1; min-height:0; margin:0; border-radius:8px; overflow:hidden; }
.composer-portrait img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 18%; }
.roast-fields { display:grid; grid-template-columns:minmax(0,1fr); gap:18px; margin-bottom:14px; }
.roast-fields label { display:grid; gap:6px; font-size:12px; color:#546750; }
.roast-fields select { width:100%; min-width:0; height:40px; padding:0 11px; border:1px solid #c4cfbb; border-radius:5px; background:var(--white); font-size:13px; }
.composer-setting-note { display:grid; gap:14px; }
.scene-hint { margin:0; color:var(--muted); font-size:11px; line-height:1.6; }
.generate-main { width:100%; }
.story-random-note { margin:0; color:var(--muted); font-size:10px; line-height:1.6; }
.composer-footer-links { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:10px; }
.composer-footer-links .text-link { font-size:11px; }
.composer-result { display:grid; min-width:0; min-height:0; }
.roast-draft { display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:14px; padding:22px 28px; min-height:0; border:1px solid #d5ddcf; border-radius:8px; background:#fbfaf4; }
.roast-preview { display:grid; min-height:0; height:100%; }
.roast-preview .screen-tabs { grid-template-rows:41px minmax(0,1fr); gap:14px; }
.roast-danmaku { position:fixed; z-index:3; inset:0; overflow:hidden; pointer-events:none; }
.roast-draft.mythic { border-color:#c6bfa1; background:linear-gradient(135deg,#fbfaf4,#f4efdf); }
.draft-heading { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; color:var(--muted); font-size:10px; letter-spacing:.3px; }
.draft-heading>span:last-child { margin-left:auto; }
.draft-empty { align-self:center; margin:0; color:var(--muted); }
.roast-lines p { margin:0; font:500 26px/1.65 var(--serif); overflow-wrap:anywhere; }
.spoken-cue { display:flex; justify-content:space-between; gap:10px; margin:0; color:#8b7e60; font-size:10px; letter-spacing:.7px; }
.roast-draft .screen-panel:has(>.spoken-cue) { display:grid; grid-template-rows:auto minmax(0,1fr); gap:14px; }
.spoken-line { display:flex; align-items:center; min-height:0; padding:12px 16px; }
.spoken-line p { width:100%; max-width:30em; margin:0 auto; font-size:clamp(18px,min(2.1vw,8cqh),28px); line-height:1.75; }
.scene-story { max-width:76ch; margin-inline:auto; }
.scene-story p { margin:0; font-size:16px; line-height:1.95; }
.scene-story p+p { margin-top:1em; }
.short-cast { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; }
.rank-label { flex:none; padding:4px 6px; background:#e5eadb; border-radius:3px; color:var(--green); font-size:10px; }
.rank-label.tier-mythic { background:#eae0bf; color:#8c6c2c; }
.roast-send-note { margin:0; color:var(--green); font-size:12px; line-height:1.6; }
.roast-publish { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:4px 20px; padding-top:14px; border-top:1px solid var(--line); }
.roast-publish .roast-actions { grid-column:2; grid-row:1/3; justify-content:flex-end; gap:8px; }
.roast-publish .roast-send-note,.roast-publish .roast-fiction { grid-column:1; font-size:10px; }
.roast-publish .roast-fiction { overflow-wrap:anywhere; }

/* Quiz and archive */
.progress-head { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.progress-head p { margin:0; }
.progress-head span { color:var(--muted); font:11px var(--mono); }
.steps { display:flex; gap:8px; margin:14px 0 20px; }
.steps i { height:3px; flex:1; background:#dce1d5; }
.steps i.done { background:var(--green); }
.question-title { line-height:1.5; }
.simulation-tag { display:inline-block; vertical-align:middle; padding:4px 6px; margin-left:12px; border:1px solid #c7cfbe; color:var(--muted); font:10px var(--sans); }
.answer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:8px 0 12px; }
.answer-button { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:60px; padding:14px 18px; text-align:left; border:1px solid #cbd4c2; border-radius:6px; background:#fbfaf5; font-size:14px; line-height:1.5; }
.answer-button:hover { background:#e9eade; border-color:#8fa487; }
.answer-button span:last-child { flex:none; color:var(--muted); }
.archive-card { display:flex; align-items:center; gap:24px; padding:16px 22px; margin:12px 0; border:1px solid #d4ddcb; border-radius:8px; background:#edf0e5; }
.animal-art { width:150px; flex:none; }
.animal-art svg { display:block; width:100%; max-height:140px; }
.archive-name { margin-bottom:8px; font:26px var(--serif); }
.archive-state { margin:0; color:var(--muted); font-size:13px; line-height:1.8; }
.animal-picker { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.animal-picker button { padding:7px 10px; border:1px solid var(--line); border-radius:5px; background:transparent; font-size:12px; }
.animal-picker button[aria-pressed="true"] { background:#e4e9dd; border-color:#a6b89e; }
/* One continuous fictional identity review. */
.kyc-station { display:grid; grid-template-rows:auto minmax(0,1fr) auto; height:100%; min-height:0; max-width:1180px; margin:0 auto; border:1px solid #cdd4c8; border-radius:10px; background:#fbfaf5; overflow:hidden; }
.kyc-station-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; padding:15px 22px; border-bottom:1px solid #d5dbcf; color:var(--green); font-size:13px; }
.kyc-station-head small { margin-left:10px; color:var(--muted); font-size:9px; letter-spacing:1px; }
.kyc-session { color:var(--muted); font:10px var(--mono); letter-spacing:.7px; }
.kyc-station-body { display:grid; grid-template-columns:minmax(260px,.82fr) minmax(0,1.18fr); min-height:0; }
.kyc-dossier { display:flex; flex-direction:column; min-width:0; min-height:0; background:linear-gradient(155deg,#e5ebdf,#f0efe6); border-right:1px solid #d5dbcf; }
.kyc-dossier-head { display:flex; justify-content:space-between; gap:12px; padding:15px 20px; color:#647261; font-size:10px; letter-spacing:.8px; }
.kyc-state { color:var(--green); letter-spacing:0; }
.kyc-identity-preview { display:flex; align-items:center; justify-content:center; flex:1; position:relative; min-height:150px; overflow:hidden; color:#577266; }
.kyc-silhouette { display:block; width:100%; height:100%; max-width:310px; max-height:360px; padding:0 12px 30px; }
.kyc-case-face { position:absolute; top:0; left:0; width:100%; height:calc(100% - 27px); object-fit:contain; }
.kyc-identity-caption { position:absolute; bottom:8px; left:12px; right:12px; color:#667262; text-align:center; font-size:10px; line-height:1.5; }
.kyc-creature-name { padding:0 18px 12px; margin:0; text-align:center; font:500 21px/1.4 var(--serif); }
.kyc-file { margin:0 20px 14px; border-top:1px solid #cbd3c4; }
.kyc-file>div { display:grid; grid-template-columns:90px minmax(0,1fr); gap:10px; padding:9px 0; border-bottom:1px solid #d3dacd; font-size:11px; line-height:1.5; }
.kyc-file dt { color:#73806d; }
.kyc-file dd { margin:0; color:#3c5144; }
.kyc-workflow { display:flex; flex-direction:column; padding:clamp(20px,2.3vw,34px); min-width:0; min-height:0; overflow-y:auto; }
.kyc-kicker { display:block; margin:0 0 14px; color:var(--green); font:10px var(--mono); letter-spacing:1.6px; }
.tool-content .kyc-title { margin:0; color:var(--ink); font:500 clamp(24px,2.2vw,33px)/1.35 var(--serif); }
.kyc-lead { margin:12px 0 24px; color:var(--muted); font-size:13px; line-height:1.8; }
.kyc-purpose-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:24px; }
.kyc-purpose { display:grid; grid-template-columns:20px minmax(0,1fr) 15px; align-items:center; gap:9px; min-height:96px; padding:16px 14px; text-align:left; background:#f4f4ec; border:1px solid #ccd6c6; border-radius:5px; font:17px/1.5 var(--serif); }
.kyc-purpose:hover { border-color:var(--green); background:#e9eee3; }
.kyc-purpose-number { align-self:start; margin-top:3px; font:10px var(--mono); color:#8b9985; }
.kyc-purpose>span:last-child { color:var(--green); font:16px var(--sans); }
.kyc-promise { margin:24px 0 0; color:#8c7b65; font:12px/1.8 var(--serif); }
.kyc-checks { display:grid; gap:0; list-style:none; margin:0; padding:0; }
.kyc-checks li { display:flex; align-items:start; gap:15px; padding:18px 0; border-bottom:1px solid var(--line); }
.kyc-check-mark { display:grid; place-items:center; width:29px; height:29px; flex:none; border:1px solid #cbd3c4; border-radius:50%; font:10px var(--mono); color:#909b87; }
.kyc-checks strong { font-size:14px; font-weight:500; }
.kyc-checks p { margin:5px 0 0; font-size:12px; line-height:1.7; color:var(--muted); }
.kyc-checks .complete .kyc-check-mark { background:#dce7d5; color:var(--green); border-color:#adc3a5; }
.kyc-checks .current .kyc-check-mark { color:var(--green); border-color:var(--green); box-shadow:0 0 0 4px #e7ebdf; }
.kyc-checks .waiting { opacity:.5; }
.kyc-review-progress { margin-top:24px; height:3px; background:#e1e6d8; }
.kyc-review-progress i { display:block; height:100%; background:var(--green); transition:width .35s ease; }
.kyc-scanline { position:absolute; left:12%; width:76%; height:1px; background:#658a70; box-shadow:0 0 14px #77916c; animation:1.1s ease-in-out infinite alternate mirror-scan; }
.kyc-decision-line { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:18px; color:#9a8878; font-size:10px; letter-spacing:.6px; }
.kyc-rejected { display:inline-block; padding:5px 8px; color:#8f4e3f; background:#f0e2d9; border:1px solid #e1c9bb; font-size:10px; letter-spacing:.6px; }
.tool-content .kyc-verdict-title { color:#633f35; }
.kyc-authority { margin:22px 0 16px; padding:15px 18px; border-left:3px solid #9d6b52; background:#f0eade; }
.kyc-authority>span { color:#9b8770; font-size:9px; letter-spacing:.8px; }
.kyc-authority p { margin:9px 0 0; font:500 17px/1.75 var(--serif); color:#443b30; }
.kyc-disposition { margin:0 0 18px; color:#69675b; font-size:12px; line-height:1.8; }
.kyc-applicant-plea { padding-left:15px; border-left:1px solid #c6d1bd; }
.kyc-applicant-plea>span { color:#909582; font-size:9px; letter-spacing:.7px; }
.kyc-applicant-plea p { margin:6px 0 0; color:#7d8270; font:14px/1.8 var(--serif); }
.kyc-notice-details { margin:16px 0 0; color:var(--muted); font-size:11px; line-height:1.8; }
.kyc-notice-details summary { cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.kyc-notice-details>div { margin-top:12px; padding:12px; background:#f3f2e9; }
.kyc-actions { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:auto; padding-top:20px; }
.kyc-actions .primary-button,.kyc-actions .secondary-button { padding:10px 13px; font-size:12px; }
.kyc-actions .text-link { margin-left:auto; font-size:11px; }
.kyc-station-foot { padding:10px 20px; border-top:1px solid #d5dbcf; color:#8b9081; font-size:9px; line-height:1.6; }
@media (min-width:800px) and (max-height:760px) {
  .kyc-station-head { padding:10px 18px; }
  .kyc-workflow { padding:18px 22px; }
  .tool-content .kyc-title { font-size:25px; }
  .kyc-lead { margin:10px 0 18px; }
  .kyc-purpose { min-height:80px; font-size:16px; }
  .kyc-authority { margin:15px 0 12px; padding:12px 15px; }
  .kyc-authority p { font-size:15px; line-height:1.65; }
  .kyc-disposition { margin-bottom:12px; }
  .kyc-file>div { padding:6px 0; }
  .kyc-actions { padding-top:14px; }
}
@media (max-width:799px) {
  .kyc-station { height:auto; }
  .kyc-station-head { padding:12px 16px; }
  .kyc-station-head small { font-size:8px; margin-left:5px; }
  .kyc-station-body { grid-template-columns:1fr; }
  .kyc-dossier { border-right:0; border-bottom:1px solid #d5dbcf; }
  .kyc-dossier-head { padding:12px 16px; }
  .kyc-identity-preview { flex:none; height:270px; }
  .kyc-station:has(.kyc-purpose-options) .kyc-identity-preview { height:155px; }
  .kyc-station:has(.kyc-purpose-options) .kyc-file { display:none; }
  .kyc-workflow { padding:22px 18px; overflow:visible; }
  .kyc-purpose { min-height:78px; font-size:15px; padding:12px 10px; gap:6px; }
  .kyc-actions .text-link { margin-left:0; }
  .kyc-station-foot { padding:10px 16px; }
}

/* All network observations share one dashboard. */
.ip-page-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 24px; align-items:center; }
.ip-page-heading>div:first-child { display:contents; }
.ip-page-heading h1 { grid-area:1/1; margin:0; }
.ip-page-heading .intro { grid-area:2/1; }
.ip-toolbar { grid-area:1/2/3/3; display:grid; grid-template-rows:subgrid; justify-items:end; gap:4px; }
.ip-scan-buttons { display:flex; align-items:center; gap:8px; }
.ip-toolbar .primary-button,.ip-toolbar .secondary-button { min-height:34px; padding:6px 14px; }
.ip-dashboard { display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:10px; height:100%; min-height:0; }
.ip-detail-link { flex:none; padding:3px 0; background:none; border:0; color:var(--green); font-size:12px; text-underline-offset:3px; }
.ip-detail-link:hover { text-decoration:underline; }
.ip-service-notice,.ip-dashboard-note { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
.ip-dashboard-note { min-height:18px; }
.ip-dashboard-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:12px; min-height:0; }
.ip-panel { display:flex; flex-direction:column; gap:10px; min-width:0; min-height:0; padding:16px 18px; border:1px solid #d4ddcb; border-radius:8px; background:#fbfaf4; }
.ip-panel-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ip-panel-head h3 { margin:0; font:500 17px/1.3 var(--serif); }
.ip-readings { margin:0; }
.ip-readings>div { display:grid; grid-template-columns:125px minmax(0,1fr); gap:12px; padding:6px 0; border-bottom:1px solid var(--line); font-size:14px; line-height:1.4; }
.ip-readings dt { color:var(--muted); }
.ip-readings dd { margin:0; overflow-wrap:anywhere; }
.ip-panel .ip-readings dd { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ip-panel-foot { display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; margin-top:auto; color:var(--muted); font-size:11px; line-height:1.4; }
.ip-panel-note { margin:auto 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.ip-observation { display:flex; flex:1; flex-direction:column; justify-content:center; min-width:0; }
.ip-observation+.ip-observation { padding-top:8px; border-top:1px solid var(--line); }
.ip-observation-head { display:flex; align-items:center; gap:10px; }
.ip-observation h4 { flex:1; margin:0; font-size:14px; font-weight:500; }
.ip-observation-summary { margin:5px 0 0; color:var(--muted); font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
.result-pill { display:inline-block; padding:4px 7px; border-radius:4px; color:var(--green); background:#e0e8d8; font-size:10px; line-height:1.3; }
.result-pill.unknown { color:#857b60; background:#eee8d9; }
.result-pill.difference { color:#a06b45; background:#eee0cf; }
.error-copy { color:#a45f3d; }

/* Community experiences and illustrated submissions. */
.story-editorial { display:grid; gap:18px; max-width:1000px; margin:0 auto; }
.story-editorial h2 { margin:0; font-size:22px; line-height:1.5; }
.story-artwork { display:block; }
.story-artwork img { display:block; width:100%; height:auto; border-radius:8px; }
.comic-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); gap:10px; min-height:0; }
.comic-panel { position:relative; display:grid; grid-template-columns:minmax(60px,.7fr) minmax(0,1.3fr); align-items:center; gap:8px; min-height:0; padding:12px; border:1px solid #d4ddcb; border-radius:6px; background:#fbfaf4; }
.comic-number { position:absolute; top:5px; left:8px; color:#94a18a; font:9px var(--mono); }
.comic-panel svg { width:100%; height:100%; max-height:90px; min-height:0; }
.comic-panel p { margin:0; font:14px/1.7 var(--serif); }
.story-status { display:flex; align-items:flex-start; gap:14px; max-width:1000px; margin:28px auto 0; padding:24px 0 8px; border-top:1px solid var(--line); }
.story-status .status-dot { margin-top:9px; }
.story-status h3 { margin:0 0 10px; font-size:18px; font-weight:500; }
.story-status p { margin:8px 0 0; font-size:14px; line-height:1.8; color:var(--muted); }
.story-contact a { color:var(--green); text-decoration:underline; text-underline-offset:4px; overflow-wrap:anywhere; }

/* Individual speech reader. */
.speech-paper { display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; gap:14px; min-height:0; padding:24px 30px; border:1px solid #d6ddce; border-radius:8px; background:var(--white); }
.speech-paper>.result-stamp { justify-self:start; }
.speech-paper h2 { margin:0; font:26px/1.4 var(--serif); }
.speech-paper .roast-lines,.speech-paper .screen-pages { height:100%; min-height:0; }
.speech-paper .roast-lines p { font-size:22px; line-height:1.7; }

/* Information dialogs and feedback */
.toast { position:fixed; z-index:10; left:50%; bottom:22px; transform:translateX(-50%); max-width:90%; padding:12px 18px; border-radius:7px; background:#304c40; color:#f6f5e9; font-size:12px; line-height:1.7; box-shadow:0 5px 25px #22392c26; }
.copy-fallback { width:100%; padding:8px; border:1px solid var(--line); background:var(--white); color:var(--green); font:12px var(--mono); }
dialog { width:800px; max-width:calc(100% - 48px); max-height:calc(100dvh - 60px); padding:24px; border:1px solid #c8d0c0; border-radius:12px; background:var(--paper); color:var(--ink); box-shadow:0 20px 80px #26362626; }
dialog::backdrop { background:#263b334f; backdrop-filter:blur(4px); }
.dialog-head { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:16px; }
.dialog-head .eyebrow { font-size:9px; }
.dialog-head button { min-height:32px; padding:0 4px; border:0; background:none; color:var(--muted); font-size:26px; line-height:32px; }
dialog h2 { margin:0 0 14px; font:26px var(--serif); }
dialog h3 { margin:0 0 12px; font-size:16px; }
dialog p,dialog li { color:var(--muted); font-size:14px; line-height:1.8; }
dialog p:last-child { margin-bottom:0; }
dialog a { color:var(--green); text-decoration:underline; text-underline-offset:3px; }

/* The desktop frame sizes the content, rather than hiding a page scrollbar. */
@media (min-width:800px) {
  body { height:100dvh; display:grid; grid-template-rows:64px minmax(0,1fr); }
  main.shell { display:grid; grid-template-rows:minmax(0,1fr) 48px; min-height:0; }
  .workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:stretch; gap:clamp(30px,5vw,75px); min-height:0; padding:20px 0; }
  .desk { display:flex; flex-direction:column; justify-content:center; gap:28px; min-width:0; min-height:0; }
  .portrait-stage { width:min(100%,calc(100dvh - 198px)); max-width:calc(100% - 32px); }
  .tool-page .workspace { display:block; padding:12px 0; }
  .tool-page .desk { display:grid; grid-template-rows:52px minmax(0,1fr); justify-content:stretch; gap:12px; height:100%; }
  .tool-page .desk:has(>.ip-page-heading) { grid-template-rows:auto minmax(0,1fr); }
  .tool-page .tool-content { height:100%; }
  #roast-composer { height:100%; min-height:0; }
  .tool-content:has(>.progress-head) { display:flex; flex-direction:column; justify-content:center; max-width:1040px; }
  .tool-content:has(>.progress-head)>.back-button { margin:6px 0; }
  .tool-content:has(>.progress-head)>.small-disclaimer,.tool-content:has(>.progress-head)>.share-hint { margin-top:12px; }
  .tool-content:has(>.story-editorial) { display:grid; grid-template-rows:minmax(0,1fr) auto; gap:12px; }
  .story-editorial { width:100%; max-width:none; min-height:0; grid-template-rows:auto minmax(0,1fr); gap:8px; }
  .story-editorial h2 { font-size:20px; }
  .story-artwork { display:flex; justify-content:center; min-height:0; }
  .story-artwork img { width:100%; height:100%; min-height:0; object-fit:contain; }
  .story-status { width:100%; max-width:none; margin:0; padding:10px 0 0; }
  .story-status h3 { margin:0 0 5px; font-size:15px; }
  .story-status p { margin:3px 0 0; font-size:12px; line-height:1.6; }
  .screen-panels>.screen-panel:not([hidden]) { height:100%; }
  .roast-draft .screen-panel { overflow-y:auto; }
  .roast-draft .screen-panels { container-type:size; }
}
@media (min-width:800px) and (max-height:700px) {
  body { grid-template-rows:58px minmax(0,1fr); }
  main.shell { grid-template-rows:minmax(0,1fr) 42px; }
  .workspace { padding:12px 0; }
  .desk { gap:20px; }
  body:not(.tool-page) .desk { gap:14px; }
  .hero-heading h1 { font-size:clamp(28px,3.4vw,44px); margin-bottom:8px; }
  .lang-en .hero-heading h1 { font-size:clamp(28px,3vw,40px); }
  .hero-heading h1 br { display:none; }
  .hero-heading .intro { font-size:12px; line-height:1.65; }
  .public-record { padding-top:12px; }
  .tool-content .public-record h2 { margin-bottom:8px; font-size:18px; line-height:1.4; }
  .record-period { font-size:9px; }
  .record-numbers { gap:16px; margin:7px 0 10px; }
  .record-numbers dd { font-size:30px; }
  .record-numbers dt { font-size:10px; }
  .record-revenue { font-size:12px; line-height:1.6; }
  .record-question { margin:9px 0; font-size:16px; line-height:1.45; }
  .record-question p:first-child { font-size:11px; }
  .record-sources { font-size:9px; }
  .portrait-stage { width:min(100%,calc(100dvh - 166px)); }
  .ip-dashboard { gap:7px; }
  .ip-toolbar .primary-button,.ip-toolbar .secondary-button { min-height:34px; padding:7px 12px; font-size:12px; }
  .ip-service-notice,.ip-dashboard-note { font-size:11px; line-height:1.4; }
  .ip-dashboard-grid { gap:9px; }
  .ip-panel { padding:9px 12px; gap:5px; }
  .ip-panel-head h3 { font-size:14px; }
  .ip-readings>div { grid-template-columns:100px minmax(0,1fr); gap:9px; padding:2px 0; font-size:12px; }
  .ip-panel-note { font-size:11px; line-height:1.4; }
  .ip-observation-summary { font-size:12px; line-height:1.4; }
  .ip-observation+.ip-observation { padding-top:5px; }
  .ip-observation h4 { font-size:12px; }
  .result-pill { padding:3px 5px; font-size:9px; }
  .tool-page .desk { gap:8px; }
  .page-heading h1 { font-size:23px; }
  .composer-settings { padding:16px; }
  .roast-fields { gap:9px; }
  .scene-hint { font-size:11px; }
  .composer-setting-note { gap:11px; }
  .roast-draft { padding:16px 20px; gap:9px; }
  .scene-story p { font-size:14px; line-height:1.75; }
  .comic-grid { gap:7px; }
  .comic-panel { padding:9px; }
  .comic-panel p { font-size:12px; line-height:1.55; }
  .story-editorial h2 { font-size:18px; }
  .speech-paper { padding:18px 24px; gap:10px; }
  .speech-paper .roast-lines p { font-size:17px; line-height:1.65; }
}
@media (min-width:800px) and (max-width:1100px) {
  .shell { width:calc(100% - 40px); }
  .site-header { gap:12px; }
  .brand { font-size:27px; }
  .brand-icon { margin-right:9px; }
  .tool-tabs { gap:2px; }
  .tool-tabs a { padding:9px; font-size:12px; }
  .header-actions { gap:8px; }
  .lang-switch { padding-left:8px; }
  .lang-switch a { padding:6px; }
  .site-footer { gap:16px; }
  .site-footer>div { display:none; }
  .comic-panel { grid-template-columns:minmax(50px,.6fr) minmax(0,1.4fr); }
}
@media (min-width:800px) and (max-height:620px) {
  /* Supporting explanations remain available in About & scoring. */
  .ip-panel-note { display:none; }
  .ip-panel { padding:8px 10px; gap:5px; }
  .ip-dashboard-grid { gap:8px; }
  .ip-observation-head { gap:6px; }
  .ip-panel-foot { gap:2px 6px; font-size:10px; }
}
@media (min-width:800px) and (max-height:560px) {
  .ip-dashboard-grid { grid-template-rows:minmax(0,1.2fr) minmax(0,.8fr); }
  .ip-readings>div { padding:1px 0; font-size:11px; }
  .ip-observation-summary { margin-top:3px; font-size:11px; line-height:1.35; }
  .ip-panel-head h3 { font-size:13px; }
  .ip-observation h4 { font-size:11px; }
  .ip-detail-link { font-size:11px; }
  .ip-service-notice,.ip-dashboard-note { font-size:10px; }
  body:has(.ip-page-heading) #info-dialog { padding:16px; }
  body:has(.ip-page-heading) #info-dialog h2 { font-size:22px; margin-bottom:8px; }
  body:has(.ip-page-heading) #info-dialog p,body:has(.ip-page-heading) #info-dialog li { font-size:12px; line-height:1.5; }
}

@media (min-width:800px) and (max-width:1000px) {
  .composer-layout { grid-template-columns:240px minmax(0,1fr); gap:18px; }
  .composer-settings { padding:16px; }
  .roast-draft { padding:18px; }
  .roast-publish { grid-template-columns:minmax(0,1fr); gap:7px; }
  .roast-publish .roast-actions { grid-column:1; grid-row:auto; justify-content:flex-start; }
}

/* Narrow screens retain the same controls in a natural reading layout. */
@media (max-width:799px) {
  .shell { width:calc(100% - 32px); }
  .site-header { grid-template-columns:1fr auto; gap:14px; padding:18px 0 12px; }
  .brand { font-size:29px; }
  .site-header>.tool-tabs { grid-area:2/1/auto/-1; justify-content:space-between; }
  .tool-tabs a { padding:8px 6px; font-size:11px; }
  .header-actions { grid-area:1/2; }
  .workspace { padding:24px 0; }
  .desk { min-width:0; }
  .hero-heading h1 { margin-bottom:18px; font-size:52px; }
  .lang-en .hero-heading h1 { font-size:44px; }
  .public-record { margin-top:22px; }
  .portrait-room { margin-top:24px; }
  .portrait-stage { max-width:500px; overflow-clip-margin:16px; }
  .site-footer { flex-wrap:wrap; gap:12px; padding:18px 0; }
  .site-footer>div { display:none; }
  .page-heading { display:block; margin-bottom:24px; }
  .page-heading h1 { font-size:29px; }
  .page-heading .intro { font-size:13px; }
  .ip-page-heading { display:grid; gap:10px; }
  .ip-page-heading .intro { grid-area:2/1; }
  .ip-dashboard { height:auto; }
  .ip-dashboard-grid { grid-template-columns:1fr; grid-template-rows:none; }
  .ip-panel { min-height:185px; }
  .composer-layout { height:auto; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; gap:18px; }
  .composer-side { height:auto; }
  .composer-portrait { flex:none; height:280px; }
  .composer-settings { max-height:none; overflow:visible; padding:18px; }
  .roast-fields { grid-template-columns:1fr; }
  .generate-main { width:100%; }
  .composer-setting-note { gap:12px; }
  .composer-footer-links { justify-content:flex-start; }
  .roast-draft { min-height:300px; }
  .roast-publish { display:flex; flex-direction:column; align-items:stretch; gap:8px; }
  .roast-publish .roast-actions { justify-content:flex-start; }
  .scene-story p { font-size:14px; }
  .spoken-line { min-height:180px; padding:10px 0; }
  .spoken-line p { font-size:23px; }
  .header-actions { gap:8px; }
  .danmaku-toggle { padding:6px; font-size:10px; }
  .lang-switch { padding-left:6px; }
  .question-title { font-size:21px; }
  .answer-grid { grid-template-columns:1fr; }
  .archive-card { gap:14px; padding:14px; }
  .animal-art { width:110px; }
  .archive-name { font-size:23px; }
  .tool-content>.screen-tabs { margin-top:12px; }
  .comic-grid { grid-template-rows:repeat(3,150px); gap:6px; }
  .comic-panel { display:flex; flex-direction:column; justify-content:center; gap:3px; padding:10px 5px; }
  .comic-panel svg { height:65px; }
  .comic-panel p { font-size:11px; line-height:1.5; }
  .story-status { margin:16px 0; }
  .speech-paper { padding:20px; }
  .speech-paper .roast-lines p { font-size:20px; }
  .speech-paper .screen-pages { min-height:260px; }
  dialog { max-width:calc(100% - 28px); padding:18px; }
  dialog p { font-size:12px; }
}
@media (max-width:360px) {
  .brand { font-size:26px; }
  .tool-tabs a { padding:7px 4px; font-size:10px; }
  .tool-tabs { gap:2px; }
}
@keyframes pulse { 50% { opacity:.3; } }
@keyframes danmaku-flight { to { transform:translateX(var(--travel)); } }
@keyframes mirror-scan { from { top:8%; } to { top:83%; } }
@media (prefers-reduced-motion:reduce) {
  *,::before,::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}

/* Story directory and reading desk. The directory and the call for stories share the right column. */
.stories-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:24px; height:100%; min-height:0; }
.stories-sidebar { display:grid; grid-column:2; grid-row:1; grid-template-rows:minmax(0,1fr) auto; gap:22px; min-height:0; padding-left:22px; border-left:1px solid var(--line); }
.story-library { display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:14px; min-height:0; }
.story-library-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.stories-layout .story-library-head h2 { margin:0; font:500 16px/1.5 var(--sans); }
.story-library-head>span { color:var(--muted); font-size:11px; }
.story-catalog-items { display:flex; flex-direction:column; gap:8px; min-height:0; }
.story-catalog-card { display:grid; grid-template-columns:22px minmax(0,1fr) 12px; align-items:center; gap:8px; flex:none; width:100%; height:68px; padding:10px; text-align:left; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--ink); }
.story-catalog-card:hover { background:#eceee4; }
.story-catalog-card[aria-pressed="true"] { border-color:#bccbbb; background:#e5eadf; color:var(--green); }
.story-catalog-number { align-self:start; padding-top:2px; color:var(--muted); font:11px/1.5 var(--mono); }
.story-catalog-card>span:nth-child(2) { min-width:0; }
.story-catalog-card strong { display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; font:500 14px/1.4 var(--sans); }
.story-catalog-arrow { font-size:13px; }
.story-catalog-pages { display:flex; align-items:center; justify-content:space-between; font:11px var(--mono); color:var(--muted); }
.story-catalog-pages button,.story-reader-nav button { min-width:32px; min-height:30px; padding:4px 8px; border:1px solid var(--line); border-radius:4px; background:transparent; color:var(--green); font-size:12px; }
.story-catalog-pages button:disabled,.story-reader-nav button:disabled { cursor:default; opacity:.35; }
.story-submit { min-height:0; padding-top:18px; border-top:1px solid var(--line); }
.story-submit-label { display:block; margin-bottom:8px; color:var(--orange); font-size:11px; }
.story-submit h3 { margin:0; font:500 18px/1.5 var(--serif); }
.story-submit p { margin:10px 0 14px; color:var(--muted); font:12px/1.8 var(--sans); }
.story-contacts { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.story-mail { color:var(--green); font:12px/1.6 var(--sans); text-decoration:underline; text-underline-offset:4px; overflow-wrap:anywhere; }
.stories-layout .story-editorial { display:grid; grid-column:1; grid-row:1; grid-template-rows:auto minmax(0,1fr); gap:12px; width:100%; height:100%; max-width:none; min-width:0; min-height:0; margin:0; }
.story-reader-head { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.stories-layout .story-reader-head h2 { margin:0; font:500 20px/1.5 var(--serif); }
.story-original { flex:none; color:var(--green); font-size:12px; }
.stories-layout .story-artwork { display:flex; justify-content:center; min-width:0; min-height:0; padding:12px; border:1px solid var(--line); border-radius:8px; background:#eeeee5; }
.stories-layout .story-artwork img { display:block; width:100%; height:100%; min-height:0; border-radius:3px; object-fit:contain; }
.story-reader-nav { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--muted); font:11px var(--mono); }
@media(min-width:800px) {
  .tool-content:has(>.stories-layout) { display:block; height:100%; min-height:0; }
  body:has(.stories-layout) .workspace { width:100%; }
}
@media(min-width:800px) and (max-width:1100px) {
  .stories-layout { grid-template-columns:minmax(0,1fr) 240px; gap:16px; }
  .stories-sidebar { gap:16px; padding-left:14px; }
}
@media(min-width:800px) and (max-height:650px) {
  .stories-sidebar { gap:12px; }
  .story-library { gap:8px; }
  .story-submit { padding-top:12px; }

  .story-submit-label { margin-bottom:5px; font-size:10px; }
  .story-submit h3 { font-size:15px; }
  .story-submit p { margin:6px 0 8px; font-size:11px; line-height:1.65; }
  .stories-layout .story-artwork { padding:6px; }
  .stories-layout .story-editorial { gap:8px; }
}
@media(max-width:799px) {
  .stories-layout { display:flex; flex-direction:column; height:auto; gap:22px; }
  .stories-sidebar { display:contents; }
  .story-library { order:0; height:148px; gap:8px; padding:0; border:0; }
  .story-catalog-items { height:76px; }
  .stories-layout .story-editorial { order:1; height:auto; }
  .story-submit { order:2; padding:18px 0 0; border:0; border-top:1px solid var(--line); }
  .story-reader-head { align-items:flex-start; gap:12px; }
  .stories-layout .story-reader-head h2 { font-size:18px; }
  .story-original { padding-top:3px; font-size:11px; }
  .stories-layout .story-artwork { display:block; padding:6px; }
  .stories-layout .story-artwork img { height:auto; }
}