:root{--ink:#292037;--paper:#fff7e7;--accent:#edbd64}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#e9dece;color:var(--ink);font:16px/1.6 'Segoe UI',sans-serif}button{cursor:pointer;font:inherit}a{color:#65416e}button:focus-visible,a:focus-visible,summary:focus-visible{outline:4px solid #ce5a3c;outline-offset:4px}header,footer{display:flex;justify-content:space-between;gap:15px;background:#292235;color:#f9e7c7;padding:20px 5%;font:10px Consolas,monospace;letter-spacing:1px}.intro{padding:35px 20px 10px;max-width:1000px;margin:auto;text-align:center}.kicker{font:10px/1.7 Consolas,monospace;letter-spacing:1.4px;color:#835d49}h1{font:46px/1.1 Georgia,serif;margin:12px 0 25px;letter-spacing:-1px}h1 em{color:#a2523e}.instruction{background:#fff8e9;border:2px solid #49364c;box-shadow:4px 4px 0 #c2aa9c;border-radius:12px;padding:16px;font-size:15px}.instruction>span{font-size:24px;margin-right:8px}.fine{font-size:11px;color:#6d5b6a}.pager{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:25px auto;max-width:1080px;padding-inline:15px}.pager button{background:#292235;border:0;color:#fff0d4;padding:10px 16px;border-radius:5px;font-size:12px}.pager button:disabled{opacity:.35;cursor:default}#page-label{font:11px Consolas,monospace}.comic{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:18px;background:var(--paper);max-width:1080px;margin:auto;box-shadow:0 15px 50px #49332d25;border:1px solid #c0a990}.frame{position:relative;min-width:0;overflow:hidden;border:3px solid #2b2132;aspect-ratio:.8;background:#17141c}.frame.wide{grid-column:1/-1;aspect-ratio:1.6}.frame .art{position:absolute;inset:0;background-image:url('assets/graphic-novel.png');background-size:200% 300%;background-repeat:no-repeat}.frame .caption{position:absolute;top:13px;left:13px;max-width:78%;background:#fff0cceF;border:1.5px solid #312437;padding:8px 12px;font:12px/1.45 Georgia,serif;box-shadow:2px 2px 0 #2922354d}.frame .bubble{position:absolute;top:26%;right:5%;width:57%;background:#fffdf3;border:2px solid #292235;border-radius:48%;padding:20px 23px;font:italic 17px/1.35 Georgia,serif;text-align:center;box-shadow:3px 3px 0 #29223535}.bubble:after{content:'';position:absolute;bottom:-14px;left:30%;width:16px;height:16px;border:2px solid #292235;border-radius:50%;background:#fffdf3}.bubble:before{content:'';position:absolute;bottom:-27px;left:24%;width:8px;height:8px;border:1.5px solid #292235;border-radius:50%;background:#fffdf3}.frame .bottom-caption{position:absolute;bottom:66px;left:13px;right:13px;background:#2b2235e8;color:#fff1d7;padding:9px 12px;font:12px/1.5 Georgia,serif}.loupe{position:absolute;bottom:12px;left:13px;max-width:calc(100% - 26px);padding:10px 14px;border:2px solid #312437;border-radius:30px;background:#ffcc68;color:#2a2133;box-shadow:3px 3px 0 #292235;display:flex;align-items:center;gap:10px;font-size:12px;font-weight:750;min-height:44px}.loupe span{font-size:19px}.loupe:hover{background:#ffe2a2;transform:translateY(-2px)}.loupe.opened{background:#b9ddc8}.loupe.opened:after{content:'✓';margin-left:4px}.silent .bubble{top:17%;left:5%;right:auto;background:#e8e3f4}.silent .caption{max-width:85%}.wide .bubble{width:42%;top:30%;font-size:22px}.wide .bottom-caption{right:auto;max-width:58%}.under{font:10px/1.6 Consolas,monospace;text-align:center;color:#6c596a;padding:12px}#ending{max-width:1000px;margin:30px auto;background:#e0ebdc;padding:40px;text-align:center;border-radius:15px}h2{font:32px/1.2 Georgia,serif}#ending blockquote{font:italic 24px/1.6 Georgia,serif;color:#6c4b69}.credits{max-width:1050px;margin:30px auto;padding:20px;font-size:12px;color:#685869}.credits summary{cursor:pointer;font-weight:700}.credits li{margin:10px 0}dialog{background:#fff8e9;color:#302337;width:min(820px,94vw);max-height:90vh;overflow:auto;border:3px solid #403049;border-radius:15px;padding:30px}dialog::backdrop{background:#15111bd9;backdrop-filter:blur(4px)}#close{position:absolute;right:12px;top:6px;font-size:30px;border:0;background:transparent;color:#312437}#content img{width:100%;max-height:55vh;object-fit:contain;background:#19151d}#content p{font-size:15px}#content .bar{display:grid;grid-template-columns:140px 1fr 25px;gap:10px;align-items:center;font-size:12px;margin:20px 0}.track{background:#e4d9eb;height:28px;border-radius:5px;overflow:hidden}.track i{display:block;height:100%;background:#80618d}#content table{width:100%;border-collapse:collapse;font-size:13px}#content td,#content th{padding:10px;border-bottom:1px solid #c9b6be;text-align:left}#content .toggle{border:1px solid #56415f;background:#eee3f4;color:#302337;padding:8px 13px;border-radius:6px}.data-note{font-size:11px!important;color:#756276}.video-link{display:block;padding:30px;border:2px dashed #86668a;background:#ede4f2;text-align:center;font-size:20px}#source-link{font-size:12px}[hidden]{display:none!important}@media(max-width:700px){header{font-size:8px;padding:15px 4%}header>span:last-child{display:none}h1{font-size:36px}.intro{padding-top:22px}.instruction{font-size:13px;text-align:left}.comic{grid-template-columns:1fr;padding:10px;gap:12px;margin:0 10px}.frame,.frame.wide{grid-column:auto;aspect-ratio:.82}.wide .bubble,.frame .bubble{font-size:18px;width:59%;top:26%;padding:17px}.wide .bottom-caption{max-width:none;right:13px}.caption{font-size:12px!important}.pager{margin:18px auto}.pager button{font-size:10px;padding:10px}.frame .bottom-caption{font-size:13px}.loupe{font-size:12px}#ending{margin:25px 10px;padding:25px}dialog{padding:25px 18px}#content .bar{grid-template-columns:115px 1fr 20px}footer{font-size:8px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.loupe:hover{transform:none}}

/* Text occupies its own space; the entire illustration stays unobstructed. */
.frame,.frame.wide{display:flex;flex-direction:column;aspect-ratio:auto;background:#fff5df;overflow:hidden}
.frame .caption,.silent .caption{position:relative;inset:auto;order:0;max-width:none;margin:0;padding:13px 16px;border:0;border-bottom:1px solid #bda693;background:#f5dfb8;box-shadow:none;min-height:64px;font:13px/1.5 Georgia,serif}
.frame .bubble,.silent .bubble,.wide .bubble{position:relative;inset:auto;order:1;align-self:center;width:calc(100% - 38px);max-width:430px;margin:18px 19px 28px;padding:17px 22px;border-radius:28px;font:italic 18px/1.45 Georgia,serif;min-height:110px;display:flex;align-items:center;justify-content:center}
.frame .art{position:relative;inset:auto;order:2;width:100%;aspect-ratio:1;background-size:200% 300%;flex-shrink:0;border-block:1px solid #bda693}
.frame .bottom-caption,.wide .bottom-caption{position:relative;inset:auto;order:3;max-width:none;margin:0;padding:15px 16px;background:#2b2235;color:#fff1d7;font:14px/1.6 Georgia,serif;flex:1}
.frame .loupe{position:relative;inset:auto;order:4;align-self:flex-start;max-width:calc(100% - 30px);margin:15px;font-size:12px}
@media(max-width:700px){.frame .caption{min-height:0}.frame .bubble,.silent .bubble,.wide .bubble{min-height:0;width:calc(100% - 36px);margin:16px 18px 28px;font-size:18px}.frame .bottom-caption{font-size:14px}.comic{gap:24px}}