@font-face{font-family:Bangers;src:url('/assets/fonts/bangers-latin-400-normal.woff2')}
@font-face{font-family:Lexend;src:url('/assets/fonts/lexend-latin-400-normal.woff2');font-weight:400}
@font-face{font-family:Lexend;src:url('/assets/fonts/lexend-latin-600-normal.woff2');font-weight:600}
:root{--ink:#211e29;--paper:#fffaf0;--surround:#e7e2d8;--purple:#5934a3;--yellow:#ffd65b;--muted:#625d6b;color-scheme:light}
*{box-sizing:border-box}body{margin:0;background:var(--surround);color:var(--ink);font-family:Lexend,system-ui,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;touch-action:manipulation}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid var(--purple);outline-offset:3px}[hidden]{display:none!important}
#comic-reader{width:min(100%,1120px);margin:auto;background:var(--paper);min-height:100svh;display:flex;flex-direction:column}
.reader-bar{display:flex;align-items:center;gap:18px;padding:16px 24px;border-bottom:1px solid #d9d2c3}.logo{font:42px/1 Bangers,sans-serif;color:var(--ink);text-decoration:none}.episode{display:grid;gap:3px;font-size:12px;color:var(--muted)}.episode strong{font-size:15px;font-weight:600;color:var(--ink)}.icon-button{display:flex;align-items:center;justify-content:center;gap:8px;margin-left:auto;min-width:44px;min-height:44px;border:1px solid #c8c0b1;border-radius:8px;background:transparent;font-size:13px;padding:8px 12px}.icon-button>span:first-child{font-family:system-ui;font-size:24px;line-height:1}
.reader-options{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 24px}.mode-group{display:flex;border:1px solid #b7ad9b;border-radius:7px;overflow:hidden}.mode-group button{background:transparent;border:0;min-height:44px;padding:0 20px;font-size:14px}.mode-group button+button{border-left:1px solid #b7ad9b}.mode-group button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.text-button{background:none;border:0;text-decoration:underline;text-underline-offset:3px;font-size:13px;min-height:44px;padding:6px 4px}
.stage{padding:6px 24px 16px;outline:none;flex:1;min-width:0}.focus-wrap{margin:auto;max-width:1024px;display:grid;place-items:center;background:#211e29;border:2px solid var(--ink);overflow:hidden}.focus-wrap svg{display:block;width:100%;height:auto;aspect-ratio:var(--crop-ratio,2);max-height:calc(100svh - 285px);min-height:160px;user-select:none;touch-action:pan-y pinch-zoom}
[data-mode=guided] .focus-wrap{max-width:590px;background:var(--paper)}[data-mode=guided] .focus-wrap svg{max-height:calc(100svh - 355px);min-height:230px}
.context{max-width:590px;margin:12px auto 0;display:flex;align-items:center;gap:18px}.context-button{position:relative;display:block;padding:0;flex:0 0 154px;max-width:154px;border:1px solid var(--ink);background:var(--ink)}.context-button svg{display:block;width:100%;height:76px}.context-button span{display:block;color:var(--paper);font-size:11px;padding:4px}.context p{font-size:12px;line-height:1.5;color:var(--muted);max-width:200px;margin:0}#focus-marker{fill:#ffd65b;fill-opacity:.12;stroke:#ffd65b;vector-effect:non-scaling-stroke;stroke-width:2}
.page-panel{display:block;border:0;background:transparent;padding:0;width:100%;margin:0 0 8px}.page-panel svg{width:100%;height:auto;display:block}.page-panel:last-child{margin-bottom:0}
.reader-footer{padding:0 24px 14px}.paging{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:650px;margin:0 auto}.step-button{display:flex;align-items:center;gap:10px;background:transparent;border:1px solid #b7ad9b;border-radius:7px;min-height:48px;padding:0 20px;font-size:14px}.step-button--next{background:var(--ink);color:var(--paper);border-color:var(--ink)}.position{flex:1;max-width:250px;text-align:center;font-size:13px}.progress{display:flex;gap:4px;margin-top:8px;justify-content:center}.progress i{height:3px;flex:1;max-width:28px;background:#d7cfbf}.progress i.done{background:var(--purple)}.reader-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;max-width:650px;margin:7px auto 0;color:var(--muted);font-size:11px}#scroll-hint{text-align:center;font-size:14px;color:var(--muted)}#transcript{max-width:650px;margin:12px auto;padding:16px;border-top:1px solid #d9d2c3;font-size:18px;line-height:1.65}#transcript p{margin:0 0 16px}#transcript p:last-child{margin:0}.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip:focus{display:block;padding:12px;background:white}
body.expanded{overflow:hidden}#comic-reader.expanded{position:fixed;inset:0;z-index:1000;overflow:auto;width:100%;max-width:none;height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}#comic-reader:fullscreen{max-width:none;width:100%;height:100%;overflow:auto}
@media(max-width:600px){.reader-bar{padding:10px 12px;gap:12px}.logo{font-size:35px}.episode{font-size:11px}.episode strong{font-size:13px}.fs-label{display:none}.icon-button{padding:8px}.reader-options{padding:8px 12px;gap:6px}.mode-group button{padding:0 14px;font-size:13px}.stage{padding:4px 8px 12px}.focus-wrap svg{min-height:0;max-height:none}[data-mode=guided] .focus-wrap svg{height:auto;min-height:0;max-height:none}.context{gap:14px;margin-top:10px}.context-button{flex-basis:132px;max-width:132px}.context-button svg{height:65px}.context p{font-size:11px}.reader-footer{padding:0 12px 10px}.paging{gap:12px}.step-button{padding:0 13px}.reader-bottom{font-size:10px;gap:6px}.reader-bottom .text-button{font-size:12px}.position{font-size:12px}#transcript{font-size:18px;padding:14px 4px}}
@media(max-width:360px){.mode-group button{padding:0 10px}.reader-options>.text-button{font-size:12px}.reader-bottom #navigation-hint{max-width:160px;line-height:1.5}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* On phones keep the entire scene visible above the enlarged reading region. */
[data-mode=panels] .stage{display:grid;align-content:center}
[data-mode=panels] .focus-wrap{width:100%}
@media(max-width:600px){
  [data-mode=guided] .stage{display:flex;flex-direction:column;gap:10px}
  [data-mode=guided] .focus-wrap{width:100%;margin:0 auto}
  [data-mode=guided] .focus-wrap svg{max-height:calc(100svh - 425px);min-height:230px}
  [data-mode=guided] .context{order:-1;width:100%;margin:0 auto;display:block}
  [data-mode=guided] .context-button{width:100%;max-width:none}
  [data-mode=guided] .context-button svg{height:auto;aspect-ratio:2 / 1}
  [data-mode=guided] .context-button span{position:absolute;right:0;bottom:0;background:var(--ink);padding:3px 6px;font-size:10px}
  [data-mode=guided] .context p{display:none}
}