/* The companion is a quiet black-ink space, separate from the reading layout. */
.comic-room,.comic-dialog,.companion-launcher,.companion-portal {--comic-paper:#fff;color:#191919;}
.dumpling {display:block;width:100%;height:100%;overflow:visible;}
.dumpling-body {transform-origin:130px 180px;animation:ink-breathe 3.8s ease-in-out infinite;}
.dumpling-eyes {transform-origin:126px 120px;animation:ink-blink 5.7s linear infinite;}
@keyframes ink-breathe {0%,100%{transform:translateY(2px) rotate(-2deg)}50%{transform:translateY(-5px) rotate(1.5deg)}}
@keyframes ink-blink {0%,44%,48%,100%{transform:scaleY(1)}46%{transform:scaleY(.08)}}
@keyframes ink-roll {0%,100%{transform:none}30%{transform:rotate(-8deg)}70%{transform:rotate(8deg) translateY(-5px)}}
.is-rolling .dumpling-body,.is-poked .dumpling-body {animation:ink-roll .46s ease-in-out;}
.home-page {background:#fff;}
.home-page .site-header {position:absolute;top:0;left:0;right:0;z-index:2;}
.home-page .site-header nav {font-size:12px;}
.home-page .site-header nav a {color:#777;}
.hero.comic-home {position:relative;min-height:100svh;padding:100px 24px 80px;display:flex;align-items:center;justify-content:center;background:#fff;}
.companion-portal {display:flex;flex-direction:column;align-items:center;text-decoration:none!important;gap:28px;margin-top:-12px;}
.portal-character {width:190px;height:168px;display:block;}
.portal-speech {display:flex;gap:22px;align-items:center;justify-content:center;position:relative;width:340px;max-width:calc(100vw - 48px);min-height:66px;padding:15px 22px;border:1.7px solid currentColor;border-radius:27px 24px 29px 20px;font:21px/1.5 var(--font-sans);letter-spacing:.025em;}
.portal-words {display:grid;flex:1;min-width:0;min-height:1.5em;}
/* The hidden full sentence reserves its responsive wrapping during typing. */
.portal-words::before {content:attr(data-full-text);visibility:hidden;grid-area:1 / 1;}
.portal-words [data-typewriter] {grid-area:1 / 1;}
.portal-speech::before {content:"";position:absolute;top:-9px;left:45%;width:13px;height:13px;background:#fff;border-top:1.7px solid currentColor;border-left:1.7px solid currentColor;transform:rotate(38deg) skewY(10deg);}
.portal-enter {width:24px;height:24px;flex-shrink:0;opacity:.45;transition:transform .2s,opacity .2s;}
.companion-portal:hover .portal-enter {transform:translateX(4px);opacity:1;}
.companion-portal:focus-visible {outline:2px dashed #191919;outline-offset:16px;border-radius:20px;}
.comic-leave {position:absolute;bottom:30px;left:50%;transform:translateX(-50%);color:#999!important;text-decoration:none;font-size:20px;padding:8px 16px;}
/* Full-screen conversation: greeting -> one invitation -> one response. */
.chat-page {background:#fff;height:100dvh;overflow:hidden;}
.chat-page>.site-header,.chat-page>.site-footer {display:none;}
.chat-page main {width:100%;padding:0;height:100dvh;min-height:0;flex:none;}
.comic-page {height:100%;position:relative;}
.comic-back {position:absolute;left:32px;top:24px;color:#777;font-size:12px;z-index:2;text-decoration:none;}
.comic-room {height:100%;max-width:740px;margin:auto;padding:65px 28px 20px;display:flex;flex-direction:column;position:relative;background:#fff;}
.comic-room button,.comic-room textarea {font:inherit;color:inherit;}
.comic-room button {cursor:pointer;}
.comic-room button:disabled {cursor:wait;opacity:.5;}
.comic-room:not(.has-conversation) .comic-reset {display:none;}
.comic-reset {position:absolute;right:28px;top:24px;background:none;border:0;padding:0;color:#888!important;font-size:11px!important;}
.comic-welcome {text-align:center;margin:auto 0 0;padding:0 0 18px;flex-shrink:0;}
.comic-character {width:136px;height:120px;margin:0 auto 20px;}
.comic-mascot {height:100%;width:100%;}
.comic-hello {font:26px/1.5 var(--font-sans);margin:0 0 15px;}
.comic-invitation {font-size:13px;color:#555;line-height:1.8;margin:0;}
.comic-play {display:flex;justify-content:center;margin:8px 0 auto;padding-bottom:45px;flex-shrink:0;}
.comic-dice-action {display:flex;gap:12px;align-items:center;border:1.3px solid #333;background:#fff;border-radius:6px 9px 7px 5px;padding:10px 17px;font-size:12px!important;}
.comic-dice-action:hover {background:#f7f7f5;}
.comic-die {width:25px;height:25px;transform:rotate(-6deg);}
.comic-composer {display:flex;gap:10px;align-items:center;flex-shrink:0;border:1.5px solid #333;border-radius:24px 21px 25px 20px;padding:10px 12px 10px 20px;position:relative;background:white;}
.comic-composer::before {content:"";position:absolute;bottom:-6px;left:23px;width:10px;height:10px;border-left:1.5px solid #333;border-bottom:1.5px solid #333;transform:skewY(-35deg);background:#fff;}
.comic-composer textarea {border:0;resize:none;min-width:0;width:100%;height:34px;padding:5px 0;line-height:24px;background:transparent;outline:none;font-size:14px;}
.comic-composer:focus-within {outline:1px solid #333;outline-offset:4px;}
.comic-composer button {border:0;background:none;padding:3px;width:36px;height:36px;flex:none;}
.comic-composer svg {width:28px;height:28px;}
.comic-status {flex-shrink:0;font-size:10px;line-height:1.6;color:#888;text-align:center;margin:15px 0 0;}
.comic-conversation:empty {display:none;}
.comic-conversation {flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:6px 6px 20px;margin-bottom:16px;}
.has-conversation .comic-welcome {margin:0;display:flex;gap:12px;align-items:center;text-align:left;padding:0 0 18px;}
.has-conversation .comic-character {width:53px;height:47px;margin:0;flex-shrink:0;}
.has-conversation .comic-hello {font-size:20px;margin:0;}
.has-conversation .comic-invitation {display:none;}
.has-conversation .comic-play {display:none;}
.comic-message {margin:0 0 28px;}
.comic-reply {white-space:pre-line;line-height:1.9;font-size:14px;margin:14px 0;overflow-wrap:anywhere;}
.comic-visitor {margin:8px 0 24px auto;width:fit-content;max-width:85%;padding:8px 14px;border:1px solid #444;border-radius:15px 14px 2px 12px;font-size:13px;overflow-wrap:anywhere;}
.comic-story-card {position:relative;border:1.4px solid #333;border-radius:4px 8px 5px 9px;padding:24px;margin:20px 0;}
.comic-card-number {font:10px ui-monospace,monospace;letter-spacing:.1em;color:#777;}
.comic-result-die {float:right;font-size:32px;line-height:1;transform:rotate(5deg);}
.comic-story-card h2 {font:24px/1.5 var(--font-sans);margin:20px 0 12px;}
.comic-story-card p {font-size:14px;line-height:1.9;}
.comic-follow {background:none;border:0;border-bottom:1px dashed #888;margin-top:17px;padding:6px 0;font-size:12px!important;text-align:left;}
.comic-evidence {margin:15px 0 0;font-size:11px;}
.comic-evidence summary {cursor:pointer;color:#777;}
.comic-room a {color:inherit;text-decoration:underline;text-underline-offset:4px;}
.comic-evidence a {display:block;margin:10px 0;}
.comic-progress {font-size:11px;color:#777;margin:12px 0 20px;}
.comic-progress.is-active::before {content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;margin-right:8px;}
.comic-work-record summary,.comic-more-reading summary {cursor:pointer;font-size:11px;color:#777;}
.comic-work-record ol {padding-left:17px;line-height:1.9;margin-top:8px;}
.comic-reading-card h3 {font:23px/1.5 var(--font-sans);margin:12px 0;}
.comic-visual-label {font:22px/1.5 var(--font-sans);margin:20px 0;}
.comic-visual-note {font-size:10px;color:#777;line-height:1.7;}
.comic-life-line a {font-size:11px;}
.is-incomplete .comic-progress {border-left:2px solid currentColor;padding-left:10px;}
.comic-life-line {list-style:none;padding:0 0 0 21px;border-left:1px dashed currentColor;margin:24px 0 24px 5px;}
.comic-life-line li {position:relative;margin-bottom:25px;}
.comic-life-line li::before {content:"";width:7px;height:7px;border:1px solid currentColor;background:white;border-radius:45%;position:absolute;left:-26px;top:6px;}
.comic-life-line span {font-size:11px;}
.comic-life-line h3 {font-size:16px;font-weight:500;margin:5px 0;}
.comic-life-line p {font-size:12px;line-height:1.8;margin:7px 0;}
.comic-dialog {border:0;padding:0;background:#fff;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;}
.comic-dialog::backdrop {background:#fff;}
.comic-close {position:absolute;top:24px;left:28px;display:flex;align-items:center;gap:7px;border:0;background:none;cursor:pointer;color:#777;font-size:20px;z-index:2;}
.comic-close span {font-size:11px;}
.comic-open {overflow:hidden;}
.companion-launcher {position:fixed;right:24px;bottom:20px;z-index:20;width:68px;height:68px;border:0;background:transparent;cursor:pointer;padding:0;}
.companion-launcher span {display:none;}
.companion-launcher .dumpling {filter:drop-shadow(0 1px 1px #fff);}
.comic-room :focus-visible,.companion-launcher:focus-visible,.comic-close:focus-visible {outline:2px dashed currentColor;outline-offset:5px;}
.comic-room textarea:focus-visible {outline:none;}
@media(max-width:600px){.hero.comic-home {padding:95px 20px 80px;}.home-page .site-header nav {font-size:11px;}.portal-character {width:166px;height:147px;}.portal-speech {min-width:260px;font-size:20px;gap:18px;padding:14px 18px;}.companion-portal {gap:26px;}.comic-room {padding:68px 20px 18px;}.comic-back {left:22px;}.comic-room:not(.has-conversation) .comic-reset {display:none;}
.comic-reset {right:22px;}.comic-close {left:18px;}.comic-story-card {padding:20px;}.comic-story-card h2 {font-size:22px;}.comic-play {padding-bottom:25px;}.comic-character {width:118px;height:105px;}.comic-hello {font-size:24px;}.companion-launcher {right:12px;bottom:14px;width:58px;height:58px;}}
@media(prefers-reduced-motion:reduce){.comic-room *,.companion-launcher *,.companion-portal * {animation:none!important;transition:none!important;scroll-behavior:auto!important;}}
@media print {.companion-launcher,.comic-dialog {display:none!important;}}
/* A source outline, drawn as one continuous reading path. */
.comic-reading-map {margin:24px 0;padding:20px 0;}
.comic-reading-map>.comic-visual-label {margin:0 0 5px;font-size:14px;color:#666;}
.comic-reading-map>h3 {font:24px/1.5 var(--font-sans);margin:0 0 24px;}
.comic-reading-map>ol {list-style:none;margin:0;padding:0;}
.comic-reading-map li {display:flex;gap:17px;position:relative;padding-bottom:24px;}
.comic-reading-map li:not(:last-child)::before {content:'';position:absolute;left:16px;top:34px;bottom:0;border-left:1px dashed #aaa;}
.comic-map-number {display:grid;place-items:center;flex:none;width:34px;height:34px;border:1px solid #555;border-radius:48% 43% 46% 42%;font:11px ui-monospace,monospace;}
.comic-reading-map details {flex:1;min-width:0;padding-top:4px;}
.comic-reading-map summary {font-size:14px;line-height:1.8;cursor:pointer;}
.comic-reading-map blockquote {margin:14px 0;padding:0;border:0;font-size:12px;line-height:1.9;color:#555;overflow-wrap:anywhere;}
.comic-reading-map a {font-size:11px;}

.comic-timeline-expand {border-top:1px solid #ddd;border-bottom:1px solid #ddd;padding:14px 0;margin:12px 0;}
.comic-timeline-expand summary {cursor:pointer;font-size:14px;line-height:1.6;}
.comic-timeline-expand summary:focus-visible {outline:2px solid currentColor;outline-offset:5px;}
.comic-timeline-expand[open] summary {margin-bottom:18px;}

@media(max-width:600px) {
  .comic-composer textarea {font-size:16px;min-height:44px;}
  .comic-composer button {width:44px;height:44px;}
  .comic-room {padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));}
  .companion-launcher {bottom:calc(14px + env(safe-area-inset-bottom,0px));}
}

.comic-concept-flow {padding:22px 24px;border:1.3px solid #333;border-radius:7px 11px 8px 6px;}
.comic-concept-flow>h3 {font:23px/1.5 var(--font-sans);margin:0 0 8px;overflow-wrap:anywhere;}
.comic-concept-flow>ol {list-style:none;padding:0;margin:14px 0 0;}
.comic-concept-flow li+li {border-top:1px dashed #ccc;}
.comic-concept-flow summary {display:flex;gap:16px;align-items:baseline;cursor:pointer;padding:11px 0;font-size:15px;line-height:1.6;}
.comic-concept-flow summary::after {content:'+';margin-left:auto;font-family:ui-monospace,monospace;}
.comic-concept-flow details[open] summary::after {content:'−';}
.comic-concept-number {font:11px ui-monospace,monospace;color:#666;flex:none;}
.comic-concept-flow details>p {margin:0 0 12px 32px;font-size:14px;line-height:1.9;overflow-wrap:anywhere;}
.comic-concept-flow details>a {display:inline-block;margin:0 0 18px 32px;font-size:12px;}
@media(max-width:600px){.comic-concept-flow {padding:18px;}.comic-concept-flow>h3 {font-size:21px;}}

.comic-concept-flow>.comic-visual-note {font-size:12px;margin:0;line-height:1.7;}

/* One session-level explanation, outside the scrollable conversation. */
.comic-session-note {flex-shrink:0;font-size:11px;line-height:1.6;color:#636761;margin:0 0 16px;}

/* Keep the composer available when landscape or a keyboard leaves little height. */
@media(max-height:550px) {
  .comic-room {padding-top:56px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));}
  .comic-room:not(.has-conversation) .comic-welcome {display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:14px;text-align:left;align-items:center;padding-bottom:8px;}
  .comic-room:not(.has-conversation) .comic-character {width:56px;height:50px;grid-row:1 / 3;margin:0;}
  .comic-room:not(.has-conversation) .comic-hello {font-size:20px;margin:0 0 4px;}
  .comic-room:not(.has-conversation) .comic-invitation {font-size:12px;}
  .comic-play {padding-bottom:12px;}
  .has-conversation .comic-welcome {padding-bottom:8px;}
  .comic-session-note {margin-bottom:8px;}
  .comic-status {margin-top:10px;}
}

.comic-reading-position {flex-shrink:0;font-size:11px;line-height:1.6;color:#636761;margin:0 0 9px;overflow-wrap:anywhere;}
.comic-room:not(.has-conversation) .comic-reading-position {display:none;}

.comic-progress .comic-recovery-link {display:table;margin-top:6px;padding:8px 0;min-height:44px;box-sizing:border-box;font-size:14px;color:#191919;text-underline-offset:5px;}

.comic-biography-chapter .comic-chapter-position {font:11px/1.6 ui-monospace,monospace;color:#666;margin:0;}
.comic-biography-chapter .comic-follow {min-height:44px;margin-top:10px;font-size:14px!important;}