/* Graphic reader follows the universe panel palette and typography. */
.graphic-reader{margin:18px 0 0;min-width:0;overflow:hidden;border:1px solid #365768;border-radius:12px;background:#0a1a24;scroll-margin-top:24px}
.graphic-reader .graphic-reader-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid #365768;background:linear-gradient(120deg,#102c39,#0b1721)}
.graphic-reader-heading span{color:#78dce9;font:10px/1.5 monospace;letter-spacing:1.5px}
.graphic-reader-heading small{color:#9bb7c7;font:10px/1.5 monospace;letter-spacing:.5px}
#creator-comic #comic-page img{display:block;width:100%;height:auto;margin:0;border:0;border-radius:0}
.graphic-reader figcaption{display:grid;gap:16px;padding:18px 16px;background:linear-gradient(120deg,#102632,#0b1721);border-top:1px solid #365768;color:#f3e8cd}
#comic-status{font-size:14px;font-weight:700;line-height:1.5;color:#f3e8cd}
.graphic-reader .comic-navigation{display:flex;align-items:center;justify-content:space-between;gap:12px}
.graphic-reader .comic-navigation button{min-height:44px;padding:10px 14px;font:700 12px/1.4 Arial,Helvetica,sans-serif;letter-spacing:.3px;border:1px solid #4b6878;border-radius:6px;background:#142735;color:#d4e6ec;box-shadow:none;transition:background .15s,border-color .15s}
.graphic-reader .comic-navigation #comic-next{margin-left:auto;color:#ffda59;border-color:#8c7b3d;background:#283329}
.graphic-reader .comic-navigation button:hover:not(:disabled){background:#203b4c;border-color:#78dce9}
.graphic-reader .comic-navigation #comic-next:hover{background:#344330;border-color:#ffda59}
.graphic-reader .comic-navigation button:disabled{opacity:.35;cursor:default}
.graphic-reader .comic-navigation button:focus-visible{outline:2px solid #78dce9;outline-offset:3px}
#comic-ending{aspect-ratio:4/5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:32px 20px;text-align:center;background:radial-gradient(ellipse at 50% 40%,#153d4c 0%,#0b1c29 65%)}
#comic-ending .comic-ending-icon{width:64px;height:64px;border:0;margin:0;border-radius:0}
#comic-ending .comic-ending-kicker{font:10px/1.5 monospace;letter-spacing:2px;color:#78dce9}
#comic-ending h3{font-size:clamp(26px,4vw,38px);line-height:1.15;letter-spacing:-.5px;margin:0;color:#ffda59}
#comic-ending p{max-width:240px;margin:0;color:#afc6d3;font-size:14px;line-height:1.7}
#comic-page[hidden],#comic-ending[hidden],#comic-next[hidden]{display:none!important}
@media(max-width:480px){.graphic-reader .graphic-reader-heading{padding:12px}.graphic-reader figcaption{padding:16px 12px}.graphic-reader .comic-navigation{gap:8px}.graphic-reader .comic-navigation button{padding:10px 12px}.graphic-reader-heading span{font-size:9px;letter-spacing:1px}}
@media(prefers-reduced-motion:reduce){.graphic-reader .comic-navigation button{transition:none}}

.comic-reactions{padding-bottom:16px;border-bottom:1px solid #365768}.comic-reactions-label{display:block;margin-bottom:12px;font:9px/1.5 monospace;letter-spacing:1px;color:#8bc8d8}.comic-reactions-options{display:flex;flex-wrap:wrap;gap:8px}.comic-reactions-options button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 10px;border:1px solid #365768;border-radius:20px;background:#0b1c29;color:#bcd1dc;font:12px/1.4 Arial,sans-serif}.comic-reactions-options button>span{font-size:18px}.comic-reactions-options button b{font-size:11px;font-weight:400;color:#8bc8d8;font-variant-numeric:tabular-nums}.comic-reactions-options button[aria-pressed=true]{border-color:#bda449;background:#283329;color:#ffdf78}.comic-reactions-options button:hover:not(:disabled){border-color:#78dce9}.comic-reactions-options button:disabled{opacity:.45}#comic-reaction-status{display:block;font-size:11px;color:#9bb7c7;margin-top:10px}#comic-reaction-status:empty{display:none}

.comic-share-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.comic-share-row button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 14px;border:1px solid #365768;border-radius:20px;background:#0b1c29;color:#bcd1dc;font:12px/1.4 Arial,sans-serif}.comic-share-row button:hover{border-color:#78dce9;color:#78dce9}.comic-share-row button:focus-visible{outline:2px solid #78dce9;outline-offset:3px}#comic-share-status{color:#9bb7c7;font-size:11px;line-height:1.5}#comic-share-link{flex-basis:100%;min-width:0;overflow-wrap:anywhere;font-size:12px;color:#78dce9}