/* Internal page composition. The optical renderers remain in app-glass.js. */
body.app-liquid #app-main { --interior-line: rgb(var(--section-tint) / .18); --interior-soft: rgb(var(--section-tint) / .065); }
body.app-liquid .app-section-hero { min-height: 0; grid-template-columns: minmax(0, 1fr) 140px; gap: 18px; padding: 18px 22px; margin-bottom: 16px; border-radius: 24px; }
body.app-liquid .app-section-copy nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.app-liquid .app-section-eyebrow { margin-top: 8px; font-size: 11px; font-weight: 650; }
body.app-liquid .app-section-copy > h1 { margin-block: 6px 8px; font-size: clamp(28px, 2.7vw, 38px); font-weight: 700; }
body.app-liquid .app-section-copy > p { max-width: 65ch; font-size: 15px; line-height: 1.6; }
body.app-liquid .app-section-art { height: 140px; }
body.app-liquid .app-return-footer { padding-top: 20px; }
body.app-liquid .app-back { min-height: 44px; padding: 8px 14px; font-size: 13px; }
body.app-liquid #play-library-open { padding: 8px 14px; min-height: 44px; font-size: 13px; }
body.app-liquid .story-kicker { display: block; color: rgb(var(--section-tint)); font-size: 11px; font-weight: 650; line-height: 1.6; letter-spacing: .12em; text-transform: uppercase; }
body.app-liquid .play-workspace { display: block; }
body.app-liquid .play-editor { padding: 0; margin: 0 0 22px; overflow: visible; }
body.app-liquid summary.play-setup-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; cursor: pointer; list-style: none; }
body.app-liquid .play-setup-summary > span:first-child { display: grid; gap: 4px; min-width: 0; }
body.app-liquid .play-setup-summary strong { font-size: 14px; font-weight: 650; }
body.app-liquid .play-setup-summary small { color: #c5bdd4; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
body.app-liquid .play-setup-edit { display: flex; align-items: center; gap: 12px; color: #dbcaef; font-size: 13px; flex-shrink: 0; }
body.app-liquid .play-setup-edit i { font-size: 22px; font-style: normal; transition: rotate 200ms ease; }
body.app-liquid .play-editor[open] .play-setup-edit i { rotate: 45deg; }
body.app-liquid .play-editor #play-form { padding: 4px 18px 18px; }
body.app-liquid .play-form-footer { gap: 20px; padding-top: 18px; }
body.app-liquid .play-form-footer > p { max-width: 60ch; line-height: 1.6; font-size: 13px; }
body.app-liquid .play-stage { min-width: 0; }
body.app-liquid .empty-state { min-height: 0; padding: 20px; }
body.app-liquid .empty-state .app-empty-character { width: 140px; height: 140px; margin-bottom: 8px; }
body.app-liquid .empty-state > h2 { margin: 12px auto 16px; max-width: 24ch; font-size: 30px; line-height: 1.3; font-weight: 700; letter-spacing: -.025em; color: #f2eafa; }
body.app-liquid .empty-state > p { max-width: 60ch; margin-inline: auto; font-size: 15px; line-height: 1.7; }
body.app-liquid #play-result { scroll-margin-top: calc(var(--header-h, 80px) + 20px); }
body.app-liquid .play-result-head { margin: 0 0 22px; max-width: 900px; }
body.app-liquid .play-result-head .play-edit-input { font-size: clamp(27px, 3vw, 42px); font-weight: 700; line-height: 1.2; letter-spacing: -.035em; padding: 9px 0; min-height: 0; }
body.app-liquid .play-result-head .play-edit-input.subtitle { max-width: 74ch; font-size: 16px; font-weight: 400; line-height: 1.65; letter-spacing: 0; min-height: 0; padding: 5px 0; color: #cfc5df; }
body.app-liquid .play-edit-input:hover { border-color: var(--interior-line); }
body.app-liquid .play-edit-input:focus-visible { outline: 2px solid #d9befe; outline-offset: 4px; }
body.app-liquid .play-passport { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 12px 22px; padding: 24px; border-radius: 24px; overflow: hidden; margin-bottom: 18px; }
body.app-liquid .play-passport::before { display: none; }
body.app-liquid .story-passport-heading { align-self: center; }
body.app-liquid .play-passport-name { margin-top: 16px; margin-bottom: 15px; font-size: 14px; font-weight: 600; letter-spacing: .06em; }
body.app-liquid .play-passport-type { max-width: 19ch; font-size: clamp(28px, 3vw, 42px); line-height: 1.16; font-weight: 700; margin: 0 0 16px; }
body.app-liquid .story-illustration { position: relative; width: 100%; height: 260px; pointer-events: none; user-select: none; }
body.app-liquid .story-illustration img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; mask-image: linear-gradient(#000 79%, transparent); transform: translate3d(var(--section-parallax-x, 0px), var(--section-parallax-y, 0px), 0); }
body.app-liquid .story-orbit { position: absolute; inset: 10% 1%; border: 1px solid rgb(var(--section-tint) / .4); border-radius: 50%; rotate: -22deg; transform: translate3d(calc(var(--section-parallax-x, 0px) * -.3), calc(var(--section-parallax-y, 0px) * -.3), 0); }
body.app-liquid .story-orbit-inner { inset: 19% 12%; rotate: 16deg; border-color: rgb(var(--section-tint) / .23); }
body.app-liquid .story-illustration i { position: absolute; color: rgb(var(--section-tint)); font-style: normal; font-size: 25px; top: 16%; left: 8%; }
body.app-liquid .story-illustration i:last-child { left: auto; top: auto; right: 5%; bottom: 23%; }
body.app-liquid .story-passport-traits { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
body.app-liquid .play-passport-row { padding: 12px 0; border-top-color: var(--interior-line); }
body.app-liquid .play-passport-row small { margin-bottom: 8px; font-size: 11px; font-weight: 600; letter-spacing: .08em; color: #c5b5df; }
body.app-liquid .play-passport-row p { max-width: 54ch; font-size: 16px; line-height: 1.65; color: #f0eafa; }
body.app-liquid .play-passport-brand { grid-column: 1 / -1; margin-top: 6px; font-size: 10px; letter-spacing: .1em; opacity: .75; }
body.app-liquid .play-passport.style-paper :is(.play-passport-type, .play-passport-row p, .play-passport-name, .play-passport-brand) { color: #352f35; }
body.app-liquid .play-passport.style-paper :is(.story-kicker, .play-passport-row small) { color: #6d4e75; }
body.app-liquid .play-passport.style-paper .play-passport-row { border-top-color: #6d4e7533; }
body.app-liquid .play-cards { gap: 16px; margin: 22px 0; }
body.app-liquid .play-card { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border-radius: 22px; background: var(--interior-soft); }
body.app-liquid .play-card h3 { font-size: 17px; line-height: 1.45; font-weight: 650; margin: 0 0 10px; color: #f1e7fc; }
body.app-liquid .play-card p { font-size: 15px; line-height: 1.75; max-width: 65ch; color: #d4cbdf; }
body.app-liquid .story-card-index { display: inline-grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border: 1px solid var(--interior-line); border-radius: 10px; color: rgb(var(--section-tint)); font-size: 12px; font-weight: 650; }
body.app-liquid .story-cards-roast > .story-punchline { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: 36px minmax(0, 1fr) 220px; align-items: center; gap: 22px; padding: 28px; }
body.app-liquid .story-punchline h3 { color: rgb(var(--section-tint)); font-size: 13px; text-transform: uppercase; letter-spacing: .1em; }
body.app-liquid .story-punchline p { font-size: clamp(19px, 2.05vw, 27px); font-weight: 600; line-height: 1.5; letter-spacing: -.015em; color: #f6edf6; max-width: 50ch; }
body.app-liquid .story-punchline .story-illustration { height: 245px; }
body.app-liquid .story-cards-roast[data-card-count="6"] > .play-card:last-child { grid-column: 1 / -1; }
body.app-liquid .story-cast { display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); align-items: center; padding: 22px 28px; gap: 26px; margin: 24px 0; border: 1px solid var(--interior-line); border-radius: 24px; }
body.app-liquid .story-cast-person { display: flex; align-items: center; gap: 18px; min-width: 0; }
body.app-liquid .story-cast-person:last-child { --avatar-hue: 80; }
body.app-liquid .story-cast-person h3 { font-size: 25px; font-weight: 700; margin: 3px 0 0; overflow-wrap: anywhere; }
body.app-liquid .story-cast-person small { font-size: 11px; color: #c6c0d2; letter-spacing: .1em; }
body.app-liquid .story-cast-join { text-align: center; font-size: 30px; color: rgb(var(--section-tint)); }
body.app-liquid .story-avatar { display: inline-grid; place-items: center; width: 52px; height: 52px; flex-shrink: 0; border: 1px solid rgb(var(--section-tint) / .4); background: linear-gradient(145deg, rgb(var(--section-tint) / .18), rgb(var(--section-tint) / .035)); border-radius: 17px; color: #f0e5ff; font-size: 19px; font-weight: 700; line-height: 1; font-family: inherit; font-style: normal; }
body.app-liquid .story-cards-sitcom { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
body.app-liquid .play-card.story-role { display: block; padding: 22px; }
body.app-liquid .story-role > summary { display: grid; grid-template-columns: 46px minmax(0, 1fr) 24px; gap: 12px; align-items: center; padding: 0; cursor: pointer; list-style: none; }
body.app-liquid .story-role > summary .story-avatar { width: 46px; height: 46px; font-size: 17px; }
body.app-liquid .story-role > summary h3 { margin: 0; font-size: 15px; }
body.app-liquid .story-role > p { margin: 18px 0 0; }
body.app-liquid .story-sections { display: grid; gap: 14px; margin-block: 24px; }
body.app-liquid .play-story-section { padding: 0; margin: 0; border: 1px solid var(--interior-line); border-radius: 22px; background: rgb(8 12 25 / .08); }
body.app-liquid .story-scene > summary { display: flex; align-items: center; gap: 14px; padding: 16px 20px; cursor: pointer; list-style: none; }
body.app-liquid .story-scene > summary > span:nth-child(2) { flex: 1; min-width: 0; }
body.app-liquid .story-scene h3 { font-size: 18px; margin: 4px 0 0; line-height: 1.4; color: #f1e9fc; }
body.app-liquid .story-scene summary small { color: #c5b7d9; font-size: 10px; font-weight: 650; letter-spacing: .1em; }
body.app-liquid .story-scene-number { display: inline-grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 13px; border: 1px solid var(--interior-line); background: var(--interior-soft); color: rgb(var(--section-tint)); font-size: 14px; font-weight: 650; }
body.app-liquid .story-scene-copy { padding: 0 24px 24px 84px; }
body.app-liquid .story-scene-copy p { max-width: 74ch; font-size: 16px; line-height: 1.8; color: #d4cbdf; }
body.app-liquid .story-scene-toggle { font-size: 24px; line-height: 1; font-weight: 400; color: #cfbde7; flex-shrink: 0; transition: transform 200ms ease; }
body.app-liquid .story-voice { border-left: 3px solid hsl(calc(250 + var(--voice-index) * 28) 60% 72% / .6); }
body.app-liquid .story-voice .story-scene-number { color: hsl(calc(250 + var(--voice-index) * 28) 60% 78%); font-size: 22px; }
body.app-liquid .story-perspectives { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.app-liquid .story-perspective { position: relative; padding: 26px; }
body.app-liquid .story-perspective .story-card-index { margin-bottom: 18px; }
body.app-liquid .story-perspective h3 { font-size: 21px; line-height: 1.35; max-width: 25ch; margin: 0 0 14px; }
body.app-liquid .story-perspective p { max-width: 62ch; font-size: 16px; line-height: 1.8; color: #d4cbdf; }
body.app-liquid .play-gift-dedication { position: relative; padding: 30px 38px; border-radius: 24px; overflow: hidden; }
body.app-liquid .play-gift-dedication h3 { margin: 12px 0 16px; font-size: 27px; color: #f8eafa; }
body.app-liquid .play-gift-dedication p { max-width: 65ch; font-size: 18px; line-height: 1.8; color: #e7daec; position: relative; z-index: 1; }
body.app-liquid .story-letter-mark { position: absolute; right: 22px; bottom: -48px; font-size: 240px; color: rgb(var(--section-tint) / .075); line-height: 1; pointer-events: none; }
body.app-liquid .story-sequence-heading { margin: 26px 0 18px; }
body.app-liquid .story-sequence-heading h3 { margin: 6px 0 8px; font-size: 27px; line-height: 1.3; font-weight: 650; }
body.app-liquid .story-sequence-heading p { font-size: 14px; line-height: 1.65; color: #c8bfd9; margin: 0; }
body.app-liquid .play-panel-grid { gap: 18px; }
body.app-liquid .play-comic-panel { border: 1px solid var(--interior-line); border-radius: 22px; overflow: hidden; background: rgb(8 12 25 / .08); }
body.app-liquid .play-comic-panel.is-script .play-panel-image { display: flex; justify-content: space-between; align-items: center; height: 60px; min-height: 0; aspect-ratio: auto; padding: 14px 20px; background: var(--interior-soft); border-bottom: 1px solid var(--interior-line); }
body.app-liquid .play-comic-panel.is-script .play-panel-no { position: static; font-size: 25px; color: rgb(var(--section-tint)); font-weight: 650; }
body.app-liquid .play-comic-panel.is-script .play-panel-status { position: static; inset: auto; padding: 0; background: none; border: 0; font-size: 10px; font-weight: 600; letter-spacing: .1em; color: #c6b7dc; }
body.app-liquid .play-panel-copy { padding: 16px; }
body.app-liquid .play-panel-copy label { display: block; margin: 0 0 6px; color: #c6b8dd; font-size: 11px; font-weight: 600; letter-spacing: .04em; }
body.app-liquid .play-panel-copy textarea { min-height: 0; width: 100%; font-size: 15px; line-height: 1.75; padding: 10px 0; background: transparent !important; border-color: transparent; border-radius: 8px; resize: none; overflow: hidden; color: #ede6f4; }
body.app-liquid .play-panel-copy textarea[data-panel-field="dialogue"] { color: #e0c7fc; padding-left: 14px; border-left: 2px solid rgb(var(--section-tint) / .55); margin-top: 2px; }
body.app-liquid .play-panel-copy textarea:focus-visible { border-color: rgb(var(--section-tint) / .65); outline: 2px solid #d1b6f8; outline-offset: 3px; }
body.app-liquid .play-cover-preview { max-width: 480px; margin: 24px auto; }
body.app-liquid :is(.story-character-details, .story-export-settings, .story-library-transfer) { margin: 18px 0; border: 1px solid var(--interior-line); border-radius: 16px; padding: 0 20px; color: #c9bfd9; }
body.app-liquid :is(.story-character-details, .story-export-settings, .story-library-transfer) > summary { display: flex; justify-content: space-between; gap: 16px; min-height: 50px; align-items: center; padding: 0; list-style: none; cursor: pointer; font-size: 13px; }
body.app-liquid .story-character-details > .play-passport { margin: 8px 0 20px; }
body.app-liquid .story-export-settings .play-render-box { padding: 20px 0; border: 0; background: transparent !important; backdrop-filter: none; }
body.app-liquid .play-public-fields { gap: 8px; margin-block: 14px 22px; }
body.app-liquid .play-result-actions { gap: 12px; margin-top: 24px; padding: 20px 0 0; }
body.app-liquid .play-result-actions .play-button { min-height: 48px; padding: 11px 20px; font-size: 14px; }
body.app-liquid .play-result-print-note { max-width: 70ch; font-size: 12px; line-height: 1.7; color: #bfb3d1; margin-block: 10px 18px; }
body.app-liquid .play-disclosure { margin: 16px 0; }
body.app-liquid .play-disclosure summary { font-size: 13px; }
body.app-liquid .play-page-footer { padding-block: 10px; margin: 0; font-size: 12px; }
body.app-liquid .play-library { padding: 26px; margin-top: 0; }
body.app-liquid .play-library .play-section-title h2 { font-size: 22px; margin: 0; }
body.app-liquid .story-library-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 22px 0; border-bottom: 1px solid var(--interior-line); padding-bottom: 12px; }
body.app-liquid .story-library-tabs button { display: flex; gap: 8px; align-items: center; padding: 10px 18px; min-height: 44px; font-size: 14px; border-radius: 12px; }
body.app-liquid .story-library-tabs [aria-selected="true"] { color: #f5edff; border-color: rgb(var(--section-tint) / .5); background: rgb(var(--section-tint) / .12) !important; }
body.app-liquid .play-library-grid { gap: 16px; align-items: stretch; }
body.app-liquid .play-history-card { position: relative; display: flex; flex-direction: column; padding: 22px; border-radius: 20px; min-width: 0; }
body.app-liquid .story-history-icon { display: inline-grid; place-items: center; width: 42px; height: 42px; font-size: 23px; background: var(--interior-soft); color: rgb(var(--section-tint)); border-radius: 13px; border: 1px solid var(--interior-line); margin-bottom: 18px; }
body.app-liquid .play-history-card > p:first-of-type { font-size: 11px; line-height: 1.6; color: #c1b1d6; margin: 0 0 9px; }
body.app-liquid .play-history-card h4 { font-size: 20px; line-height: 1.35; margin: 0 0 12px; font-weight: 650; }
body.app-liquid .play-history-card > p:nth-of-type(2) { font-size: 13px; line-height: 1.7; color: #c9c1d5; margin-bottom: 18px; flex: 1; }
body.app-liquid .play-history-card > .play-button { width: fit-content; }
body.app-liquid .play-history-card > .play-button-danger { margin-top: 10px; min-height: 36px; border-color: transparent; background: transparent !important; font-size: 12px; padding-inline: 0; }
body.app-liquid .play-hero-card .story-avatar { margin-bottom: 14px; }
body.app-liquid .play-hero-card h4, body.app-liquid .play-profile-card h3 { font-size: 19px; margin: 0 0 10px; }
body.app-liquid .play-library .play-muted { max-width: 70ch; font-size: 13px; line-height: 1.7; }
body.app-liquid .story-library-transfer { margin-top: 24px; }
body.play-app.app-liquid .story-library-transfer > summary { border: 0 !important; border-radius: 0; background: transparent !important; padding: 12px 0; }
body.app-liquid summary::-webkit-details-marker { display: none; }
body.app-liquid :is(.play-setup-summary, .story-scene > summary, .story-role > summary, .story-character-details > summary, .story-export-settings > summary, .relation-block > summary, .relation-editor > summary) { border: 0 !important; background: transparent !important; }
body.app-liquid :is(.play-setup-summary, .story-scene > summary, .story-role > summary, .story-character-details > summary, .story-export-settings > summary, .relation-block > summary, .relation-editor > summary)::after { display: none; }
body.app-liquid :is(.story-scene, .story-role, .story-character-details, .story-export-settings, .play-editor, .story-library-transfer) > summary:focus-visible { outline: 2px solid #d3b4fa; outline-offset: 5px; border-radius: 12px; }
@media (hover: hover) and (pointer: fine) {
  body.app-liquid :is(.story-scene, .story-role, .story-character-details, .story-export-settings) > summary:hover { color: #fff6ff; background: rgb(var(--section-tint) / .045); }
  body.app-liquid .play-history-card:hover { border-color: rgb(var(--section-tint) / .42) !important; }
  body.app-liquid .play-panel-copy textarea:hover { border-color: var(--interior-line); }
}

/* Analytical views use the same surfaces, with more space for their data. */
body.app-liquid :is(.relation-intro, .advanced-page-heading) { display: none; }
body.app-liquid .relationship-comparison { max-width: none; padding-top: 0; padding-bottom: 18px; }
body.app-liquid .relation-editor { padding: 0; margin-bottom: 20px; }
body.app-liquid .relation-editor > summary { border: 0; background: transparent; padding: 18px 22px; border-radius: 22px; }
body.app-liquid .relation-editor form { padding: 0 22px 22px; }
body.app-liquid .relation-saved-people { gap: 20px; }
body.app-liquid .relation-saved-people > span { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 3px 12px; align-items: center; }
body.app-liquid .relation-saved-people .story-avatar { width: 44px; height: 44px; grid-row: 1 / 3; border-radius: 14px; font-size: 17px; }
body.app-liquid .relation-saved-people > span:last-child .story-avatar { background: rgb(99 212 207 / .12); border-color: #63d4cf66; }
body.app-liquid .relation-saved-people strong { font-size: 17px; }
body.app-liquid .relation-saved-people small { color: #c0b9d0; font-size: 11px; line-height: 1.6; }
body.app-liquid .relation-edit-label { display: flex; align-items: center; gap: 10px; min-height: 36px; }
body.app-liquid .relation-status { font-size: 13px; padding-block: 0; margin-block: 8px; color: #c0b7d3; }
body.app-liquid .relation-status:not(.is-error) { display: none; }
body.app-liquid .relation-result-heading { text-align: left; margin: 24px 0 18px; }
body.app-liquid .relation-result-heading h2 { font-size: clamp(25px, 3vw, 38px); font-weight: 700; line-height: 1.2; margin: 8px 0; }
body.app-liquid .relation-result-heading h2 span { color: rgb(var(--section-tint)); }
body.app-liquid .relation-block { border: 1px solid var(--interior-line); background: rgb(8 12 25 / .08); border-radius: 22px; padding: 22px; backdrop-filter: blur(12px); }
body.app-liquid .relation-block h3 { font-size: 18px; font-weight: 650; line-height: 1.4; margin: 0; }
body.app-liquid .relation-block > summary { display: flex; align-items: center; gap: 14px; list-style: none; cursor: pointer; min-height: 42px; }
body.app-liquid .relation-block summary h3 { flex: 1; }
body.app-liquid .relation-block > p { margin-top: 18px; max-width: 72ch; font-size: 16px; line-height: 1.8; color: #d7cde5; }
body.app-liquid .relation-summary { margin-bottom: 20px; padding: 28px; border-left: 1px solid var(--interior-line); }
body.app-liquid .relation-summary h3 { margin-top: 10px; font-size: 27px; }
body.app-liquid .relation-summary > p { font-size: 17px; max-width: 78ch; }
body.app-liquid .relation-summary ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; padding: 0; counter-reset: relation-advice; list-style: none; }
body.app-liquid .relation-summary li { counter-increment: relation-advice; border-top: 1px solid var(--interior-line); padding: 14px 0 0; font-size: 15px; line-height: 1.7; color: #ddd2ea; margin: 0; }
body.app-liquid .relation-summary li::before { content: '0' counter(relation-advice); display: block; font-size: 12px; font-weight: 650; margin-bottom: 8px; color: rgb(var(--section-tint)); }
body.app-liquid .relation-report-grid { gap: 16px; }
body.app-liquid .relation-footnote { font-size: 12px; line-height: 1.7; color: #bfb3d1; text-align: left; margin-left: 0; max-width: 75ch; }
body.app-liquid .af-section-navigation { margin-bottom: 18px; }
body.app-liquid .af-section-tabs { border-radius: 14px; padding: 4px; }
body.app-liquid .af-section-tabs a { min-height: 40px; font-size: 13px; }
body.app-liquid .planet-ranking-card, body.app-liquid .formula-ranking-card { padding: 20px !important; background: rgb(8 12 25 / .08) !important; border: 1px solid var(--interior-line) !important; border-radius: 24px !important; box-shadow: none !important; backdrop-filter: blur(12px); }
body.app-liquid .planet-ranking-card :is(.ranking-item, .ranking-row, .planet-ranking-item) { background: rgb(var(--section-tint) / .035) !important; border-color: var(--interior-line); }
body.app-liquid :is(.panel-header, .cosmogram-panel-header) { padding-block: 18px; }
body.app-liquid :is(.panel-header, .cosmogram-panel-header) h2 { font-size: 21px; font-weight: 650; line-height: 1.35; }
body.app-liquid .cosmogram-main-card { grid-template-rows: auto auto minmax(420px, 1fr) auto auto !important; }
body.app-liquid .cosmogram-header-tools { gap: 10px; flex-wrap: wrap; }
body.app-liquid .af-cosmo-mode { font-size: 13px; margin-block: 10px; line-height: 1.6; }
body.app-liquid .table-metric-ribbon { min-height: 0; margin-bottom: 18px; border-radius: 18px; gap: 0; }
body.app-liquid .table-metric-ribbon > article { display: flex; align-items: center; gap: 12px; min-height: 0; padding: 16px 20px; }
body.app-liquid .table-metric-ribbon > article > span { max-width: none; font-size: 12px; line-height: 1.5; overflow-wrap: normal; word-break: normal; }
body.app-liquid .table-metric-ribbon strong { font-size: 26px; line-height: 1.2; margin-left: auto; }
body.app-liquid .table-metric-ribbon small { display: none; }
body.app-liquid .table-page-toolbar { padding-block: 16px; gap: 12px; }
body.app-liquid .table-page-toolbar > div:first-child { display: none; }
body.app-liquid .table-filter-bar { padding-block: 10px; gap: 8px; }
body.app-liquid .table-filter-bar button { font-size: 12px; min-height: 40px; }
body.app-liquid .af-table-options { padding-top: 0; padding-bottom: 10px; }
body.app-liquid .af-table-options summary { font-size: 12px; }
body.app-liquid .interior-table-filters { border-top: 1px solid var(--interior-line); }
body.app-liquid .interior-table-filters > summary { display: none; }
body.app-liquid .table-result-meta { padding-block: 10px; }
body.app-liquid .full-planet-table :is(th, td) { font-size: 13px; line-height: 1.6; }
body.app-liquid .table-planet strong { font-size: 15px; }
body.app-liquid .af-phase-overview { gap: 16px; }
body.app-liquid .af-phase-overview .dynamics-card { padding: 22px; }
body.app-liquid .af-phase-overview :is(h2, h3) { font-size: 19px; line-height: 1.4; }
body.app-liquid .af-phase-overview p { font-size: 15px; line-height: 1.75; color: #d2c8df; max-width: 66ch; }
body.app-liquid .transition-phase-caption { font-size: 13px; }
body.app-liquid .transit-control-card:not(form):not(:has(form:not([hidden]))) { padding: 0; }
body.app-liquid .transit-section-nav { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
body.app-liquid .transit-section-nav::before { display: none; }
body.app-liquid .transit-section-nav a { min-height: 40px; padding: 8px 14px; font-size: 13px; border-radius: 12px; }
body.app-liquid .transit-view .af-key-points { padding: 24px; border-radius: 24px; }
body.app-liquid .af-key-points h2 { font-size: 23px; font-weight: 650; }
body.app-liquid .af-key-points :is(p, .af-reading-hint) { font-size: 15px; line-height: 1.75; max-width: 74ch; color: #d3c8df; }
body.app-liquid .report-profile { padding: 16px 22px; min-height: 0; gap: 20px; }
body.app-liquid .report-profile-meta { gap: 10px; }
body.app-liquid .report-profile-actions button { min-height: 44px; font-size: 13px; }
body.app-liquid .report-section { padding: 28px; margin-block: 18px; border-radius: 26px; }
body.app-liquid .report-section-header { margin-bottom: 20px; }
body.app-liquid .report-section-header h2 { font-family: inherit; font-weight: 700; font-size: 27px; line-height: 1.3; letter-spacing: -.025em; }
body.app-liquid .report-section-header > div > p { font-size: 14px; line-height: 1.6; }
body.app-liquid .report-paragraph { grid-template-columns: 230px minmax(0, 1fr); gap: 12px 28px; padding-block: 20px; }
body.app-liquid .report-paragraph h3 { font-size: 15px; line-height: 1.55; font-weight: 600; color: rgb(var(--section-tint)); }
body.app-liquid .report-paragraph p { max-width: 74ch; font-size: 16px; line-height: 1.8; color: #d2c9de; }
body.app-liquid .report-section--closing h2 { font-family: inherit; font-size: 27px; font-weight: 650; line-height: 1.5; }
body.app-liquid .af-report-navigation:has(.report-map) { display: none; }
body.app-liquid .interior-report-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
body.app-liquid .interior-report-toc a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; color: #d9c7f1; font-size: 12px; border: 1px solid var(--interior-line); border-radius: 12px; text-decoration: none; }
body.app-liquid .interior-report-outline { margin: 12px 0 18px; border: 1px solid var(--interior-line); border-radius: 16px; }
body.app-liquid .interior-report-outline > summary { padding: 12px 18px; font-size: 13px; list-style: none; cursor: pointer; border: 0; background: transparent; }
body.app-liquid .interior-report-outline > :not(summary) { margin: 12px 18px 18px; }
body.app-liquid .interior-report-outline .report-profile-meta { padding-top: 18px; border-top: 1px solid var(--interior-line); }
body.app-liquid .report-profile-actions { margin: 0; }
body.app-liquid .report-section[id] { scroll-margin-top: calc(var(--header-h, 80px) + 18px); }
body.app-liquid .advanced-error { min-height: 0; padding: 24px; }
body.app-liquid .advanced-error :is(h2, h3) { font-size: 20px; line-height: 1.4; }
body.app-liquid .advanced-error p { max-width: 55ch; font-size: 15px; line-height: 1.7; }
body.app-liquid .af-birth-sheet .sheet-header h1 { font-family: inherit; font-weight: 700; font-size: 30px; letter-spacing: -.025em; }
body.app-liquid .af-birth-sheet .sheet-header { gap: 16px; }
body.app-liquid .af-birth-sheet .form-field > :is(label, span) { font-size: 13px; }
body.app-liquid .af-birth-sheet .sheet-actions { padding-bottom: 8px; }
body.app-liquid.admin-page main { padding-top: 24px; }
body.app-liquid.admin-page .admin-login { margin-block: 24px; padding: 30px; border-radius: 26px; }
body.app-liquid.admin-page .admin-login h2 { margin-top: 12px; font-size: 27px; line-height: 1.3; }
body.app-liquid.admin-page .admin-login > p { font-size: 15px; line-height: 1.7; }
body.app-liquid.admin-page .app-return-footer { display: none; }

/* The conversation owns the available height, rather than a nested short card. */
body.app-liquid:not(.af-home-menu-open) #app-main[data-app-section="agent"] { display: flex !important; flex-direction: column; height: 100dvh; min-height: 0; padding-top: calc(var(--header-h, 80px) + 16px) !important; padding-bottom: 20px !important; overflow: hidden; }
body.app-liquid #app-main[data-app-section="agent"] > :is(.app-section-hero, .af-section-navigation, #view-root) { width: 100%; }
body.app-liquid #app-main[data-app-section="agent"] .app-section-hero { flex: none; padding: 14px 20px; margin-bottom: 12px; display: block; }
body.app-liquid #app-main[data-app-section="agent"] .app-section-copy { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; }
body.app-liquid #app-main[data-app-section="agent"] .app-section-copy h1 { margin: 0; font-size: 26px; }
body.app-liquid #app-main[data-app-section="agent"] .app-section-copy > :is(.app-section-eyebrow, p) { display: none; }
body.app-liquid #app-main[data-app-section="agent"] .app-section-art { position: absolute; right: 14px; top: -8px; width: 100px; height: 90px; opacity: .24; }
body.app-liquid #app-main[data-app-section="agent"] .app-section-copy h1 { padding-right: 78px; }
body.app-liquid #app-main[data-app-section="agent"] .af-section-navigation { flex: none; margin-bottom: 12px; }
body.app-liquid #app-main[data-app-section="agent"] #view-root { flex: 1; min-height: 0; height: auto !important; display: flex; flex-direction: column; }
body.app-liquid #app-main[data-app-section="agent"] :is(.agent-view, .agent-shell, .agent-conversation) { flex: 1; min-height: 0 !important; height: 100% !important; max-height: none !important; }
body.app-liquid #app-main[data-app-section="agent"] .agent-view { display: flex; flex-direction: column; }
body.app-liquid #app-main[data-app-section="agent"] .agent-page-heading { display: none; }
body.app-liquid #app-main[data-app-section="agent"] .agent-shell { grid-template-columns: 260px minmax(0, 1fr); }
body.app-liquid #app-main[data-app-section="agent"] .agent-history { padding: 18px; }
body.app-liquid #app-main[data-app-section="agent"] .agent-conversation { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; border-radius: 24px; }
body.app-liquid #app-main[data-app-section="agent"] .agent-conversation-header { flex: none; min-height: 56px; padding: 10px 16px; }
body.app-liquid #app-main[data-app-section="agent"] .agent-context-warning { grid-column: 1; grid-row: 2; }
body.app-liquid #app-main[data-app-section="agent"] .agent-messages { grid-column: 1; grid-row: 3; min-height: 0 !important; height: auto !important; max-height: none !important; overflow-y: auto; padding: 20px; }
body.app-liquid #app-main[data-app-section="agent"] .agent-jump-bottom { grid-column: 1; grid-row: 3; align-self: end; justify-self: end; margin: 0 14px 6px; z-index: 2; }
body.app-liquid #app-main[data-app-section="agent"] .agent-composer { grid-column: 1; grid-row: 4; padding: 12px 16px; }
body.app-liquid #app-main[data-app-section="agent"] .agent-composer textarea { font-size: 16px; line-height: 1.6; max-height: 160px; }
body.app-liquid #app-main[data-app-section="agent"] .agent-message-body { max-width: 76ch; font-size: 16px; line-height: 1.8; }
body.app-liquid #app-main[data-app-section="agent"] .app-return-footer { display: none; }

@media (max-width: 1100px) {
  body.app-liquid .story-cards-sitcom { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.app-liquid .story-role > summary { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; }
  body.app-liquid .story-role .story-scene-toggle { display: none; }
  body.app-liquid .story-role > summary .story-avatar { width: 40px; height: 40px; }
}
@media (max-width: 980px) {
  body.app-liquid #app-main { padding-top: calc(var(--header-h, 58px) + 20px) !important; }
  body.app-liquid .app-section-hero { grid-template-columns: minmax(0, 1fr) 150px; padding: 22px; }
  body.app-liquid .app-section-art { height: 155px; }
  body.app-liquid .play-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.app-liquid .story-cards-sitcom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.app-liquid .story-cards-sitcom[data-card-count="3"] > :last-child { grid-column: 1 / -1; }
  body.app-liquid .story-role > summary { grid-template-columns: 46px minmax(0, 1fr) 24px; }
  body.app-liquid .story-role .story-scene-toggle { display: block; }
  body.app-liquid .relation-summary ol { grid-template-columns: 1fr; gap: 14px; }
  body.app-liquid:not(.af-home-menu-open) #app-main[data-app-section="agent"] { padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important; }
  body.app-liquid #app-main[data-app-section="agent"] .agent-shell { grid-template-columns: minmax(0, 1fr); }
  body.app-liquid #app-main[data-app-section="agent"] .agent-messages { padding: 16px; }
  body.app-liquid .report-paragraph { grid-template-columns: 180px minmax(0, 1fr); gap: 10px 20px; }
}
@media (max-width: 600px) {
  body.app-liquid .app-section-hero { display: block; padding: 16px 20px; border-radius: 22px; margin-bottom: 16px; }
  body.app-liquid .app-section-art { width: 130px; height: 160px; top: 8px; right: 4px; opacity: .19; }
  body.app-liquid .app-section-eyebrow { margin-top: 12px; font-size: 10px; }
  body.app-liquid .app-section-copy > h1 { font-size: 27px; margin-block: 5px 6px; }
  body.app-liquid .app-section-copy > p { font-size: 13px; line-height: 1.65; }
  body.app-liquid #app-main:has(.has-story) .app-section-copy > p { display: none; }
  body.app-liquid #app-main:not([data-app-section="agent"]):not(:has(.play-view)) .app-section-copy > :is(.app-section-eyebrow, p) { display: none; }
  body.app-liquid #app-main:not([data-app-section="agent"]):not(:has(.play-view)) .app-section-copy > h1 { margin-top: 12px; }
  body.app-liquid #play-library-open { font-size: 12px; padding-inline: 10px; }
  body.app-liquid #play-library-open .play-count { display: none; }
  body.app-liquid .play-editor { padding: 0; margin-bottom: 18px; }
  body.app-liquid .play-setup-summary { padding: 13px 16px; gap: 10px; }
  body.app-liquid .play-setup-summary strong { font-size: 13px; }
  body.app-liquid .play-setup-summary small { font-size: 11px; }
  body.app-liquid .play-setup-edit { font-size: 12px; gap: 8px; }
  body.app-liquid .play-editor #play-form { padding: 2px 16px 18px; }
  body.app-liquid .play-result-head { margin-bottom: 18px; }
  body.app-liquid .empty-state { padding: 24px; }
  body.app-liquid .empty-state .app-empty-character { width: 140px; height: 140px; }
  body.app-liquid .empty-state > h2 { font-size: 26px; }
  body.app-liquid .play-result-head .play-edit-input { font-size: 28px; line-height: 1.25; padding: 8px 0; }
  body.app-liquid .play-result-head .play-edit-input.subtitle { font-size: 15px; line-height: 1.7; }
  body.app-liquid .play-passport { grid-template-columns: minmax(0, 1fr) 108px; gap: 8px 8px; padding: 22px; }
  body.app-liquid .story-passport-heading .story-kicker { font-size: 9px; }
  body.app-liquid .play-passport-name { font-size: 12px; margin-block: 12px; }
  body.app-liquid .play-passport-type { font-size: 25px; line-height: 1.2; }
  body.app-liquid .play-passport .story-illustration { height: 180px; align-self: center; }
  body.app-liquid .story-passport-traits { grid-template-columns: 1fr; }
  body.app-liquid .play-passport-row { padding-block: 15px; }
  body.app-liquid .play-passport-row p { font-size: 15px; line-height: 1.7; }
  body.app-liquid .play-passport-brand { font-size: 8px; letter-spacing: .07em; gap: 10px; }
  body.app-liquid .play-cards { grid-template-columns: 1fr; gap: 12px; }
  body.app-liquid .play-card { padding: 20px; gap: 12px; }
  body.app-liquid .play-card h3 { font-size: 16px; }
  body.app-liquid .play-card p { font-size: 15px; }
  body.app-liquid .story-cards-roast > .story-punchline { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 20px; }
  body.app-liquid .story-punchline > .story-card-index { grid-column: 1 / -1; }
  body.app-liquid .story-punchline p { font-size: 18px; line-height: 1.65; }
  body.app-liquid .story-punchline h3 { min-height: 50px; padding-right: 106px; display: flex; align-items: flex-end; }
  body.app-liquid .story-punchline .story-illustration { position: absolute; top: 20px; right: 16px; width: 96px; height: 105px; }
  body.app-liquid .story-cast { gap: 10px; padding: 18px 16px; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); }
  body.app-liquid .story-cast-person { display: grid; justify-items: center; gap: 10px; text-align: center; }
  body.app-liquid .story-cast-person h3 { font-size: 20px; }
  body.app-liquid .story-cast-person small { font-size: 9px; }
  body.app-liquid .story-cast-join { font-size: 24px; }
  body.app-liquid .story-cards-sitcom { grid-template-columns: 1fr; }
  body.app-liquid .story-cards-sitcom[data-card-count="3"] > :last-child { grid-column: auto; }
  body.app-liquid .play-card.story-role { padding: 18px; }
  body.app-liquid .story-role > summary { grid-template-columns: 44px minmax(0, 1fr) 24px; gap: 12px; }
  body.app-liquid .story-scene > summary { padding: 17px 18px; gap: 12px; }
  body.app-liquid .story-scene-number { width: 36px; height: 36px; border-radius: 11px; }
  body.app-liquid .story-scene h3 { font-size: 17px; }
  body.app-liquid .story-scene-copy { padding: 0 18px 20px; }
  body.app-liquid .story-scene-copy p { font-size: 15px; line-height: 1.8; }
  body.app-liquid .story-perspectives { grid-template-columns: 1fr; }
  body.app-liquid .story-perspective { padding: 22px; }
  body.app-liquid .story-perspective h3 { font-size: 22px; }
  body.app-liquid .story-perspective p { font-size: 15px; }
  body.app-liquid .play-panel-grid { grid-template-columns: 1fr; gap: 14px; }
  body.app-liquid .play-panel-copy { padding: 18px; }
  body.app-liquid .play-panel-copy textarea { font-size: 16px; line-height: 1.75; }
  body.app-liquid .play-gift-dedication { padding: 24px; }
  body.app-liquid .play-gift-dedication p { font-size: 16px; }
  body.app-liquid .story-sequence-heading h3 { font-size: 24px; }
  body.app-liquid .play-result-actions .play-button { flex: 1; padding-inline: 14px; min-width: 0; }
  body.app-liquid :is(.story-character-details, .story-export-settings, .story-library-transfer) { padding-inline: 16px; }
  body.app-liquid .story-character-details > .play-passport { padding: 18px; grid-template-columns: 1fr; }
  body.app-liquid .story-character-details .story-illustration { display: none; }
  body.app-liquid .play-library { padding: 18px; }
  body.app-liquid .play-library-grid { grid-template-columns: 1fr; }
  body.app-liquid .play-history-card { padding: 22px; }
  body.app-liquid .story-library-tabs { gap: 4px; margin-block: 18px; }
  body.app-liquid .story-library-tabs button { flex: 1; padding-inline: 10px; font-size: 13px; }
  body.app-liquid .table-metric-ribbon > article { padding: 12px 10px; gap: 8px; }
  body.app-liquid .table-metric-ribbon > article > span { font-size: 11px; }
  body.app-liquid .table-metric-ribbon strong { font-size: 23px; }
  body.app-liquid .table-page-toolbar { padding: 14px; }
  body.app-liquid .table-filter-bar { flex-wrap: wrap; overflow: visible; }
  body.app-liquid .table-filter-bar button { padding: 7px 10px; font-size: 11px; flex: 1 1 auto; white-space: normal; }
  body.app-liquid .interior-table-filters > summary { display: flex; min-height: 44px; padding: 10px 14px; font-size: 12px; list-style: none; cursor: pointer; border: 0; background: transparent; }
  body.app-liquid .af-section-tabs a { min-height: 40px; font-size: 12px; padding-inline: 10px; }
  body.app-liquid .relation-editor > summary { padding: 16px; gap: 12px; }
  body.app-liquid .relation-saved-people { gap: 12px; }
  body.app-liquid .relation-saved-people > span { grid-template-columns: 34px minmax(0, 1fr); gap: 4px 8px; }
  body.app-liquid .relation-saved-people .story-avatar { width: 34px; height: 34px; grid-row: 1; font-size: 15px; border-radius: 11px; }
  body.app-liquid .relation-saved-people small { grid-column: 1 / -1; }
  body.app-liquid .relation-saved-people strong { font-size: 15px; }
  body.app-liquid .relation-editor form { padding-inline: 16px; }
  body.app-liquid .relation-block { padding: 20px; }
  body.app-liquid .relation-summary h3 { font-size: 24px; }
  body.app-liquid .relation-block > p { font-size: 15px; }
  body.app-liquid .relation-report-grid { grid-template-columns: 1fr; }
  body.app-liquid .transit-section-nav { flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding: 8px 0 12px; }
  body.app-liquid .transit-section-nav a { flex: none; white-space: nowrap; font-size: 12px; padding-inline: 12px; }
  body.app-liquid .transit-view .af-key-points { padding: 20px; }
  body.app-liquid .report-profile { padding: 16px; }
  body.app-liquid .report-profile-actions { gap: 8px; }
  body.app-liquid .report-section { padding: 22px; }
  body.app-liquid .report-section-header h2 { font-size: 25px; }
  body.app-liquid .report-section-header { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; margin-bottom: 0; padding-bottom: 18px; }
  body.app-liquid .report-section-header > div > p { display: none; }
  body.app-liquid .report-section-header > :first-child { width: 36px; height: 36px; }
  body.app-liquid .report-paragraph { grid-template-columns: 1fr; padding-block: 18px; gap: 8px; }
  body.app-liquid .report-paragraph p { font-size: 15px; }
  body.app-liquid .af-birth-sheet .sheet-header h1 { font-size: 27px; }
  body.app-liquid .af-birth-sheet .sheet-actions { padding-bottom: 16px; }
  body.app-liquid.admin-page .admin-login { padding: 24px; margin-block: 18px; }
  body.app-liquid #app-main[data-app-section="agent"] .app-section-hero { padding: 10px 14px; }
  body.app-liquid #app-main[data-app-section="agent"] .app-section-copy { gap: 14px; }
  body.app-liquid #app-main[data-app-section="agent"] .app-section-copy h1 { font-size: 22px; padding-right: 0; }
  body.app-liquid #app-main[data-app-section="agent"] .app-section-art { display: none; }
  body.app-liquid #app-main[data-app-section="agent"] .agent-messages { padding: 14px; }
  body.app-liquid #app-main[data-app-section="agent"] .agent-composer { padding: 10px 12px; }}
@media (max-width: 360px) {
  body.app-liquid .play-passport { grid-template-columns: 1fr; }
  body.app-liquid .play-passport > .story-illustration { display: none; }
  body.app-liquid .story-cards-roast > .story-punchline { grid-template-columns: 1fr; }
  body.app-liquid .story-punchline > .story-illustration { display: none; }
  body.app-liquid #app-main[data-app-section="agent"] .app-section-copy h1 { font-size: 20px; }
}
@media (max-width: 980px) and (max-height: 500px) {
  body.app-liquid:not(.af-home-menu-open) #app-main[data-app-section="agent"] { padding-top: calc(var(--header-h, 58px) + 8px) !important; padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important; }
  body.app-liquid #app-main[data-app-section="agent"] .af-section-navigation { display: none; }
  body.app-liquid #app-main[data-app-section="agent"] .app-section-hero { margin-bottom: 8px; }
  body.app-liquid #app-main[data-app-section="agent"] .agent-conversation-header { padding-block: 4px; min-height: 44px; }
  body.app-liquid #app-main[data-app-section="agent"] .agent-composer { padding-block: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  body.app-liquid :is(.story-scene-toggle, .play-setup-edit i) { transition: none; }
  body.app-liquid .story-illustration :is(img, .story-orbit) { transform: none; }
}