@import "https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@700&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%}body{color:#c8d6f0;-webkit-font-smoothing:antialiased;background:#080b12;font-family:JetBrains Mono,Fira Code,Courier New,monospace}.comic-section{z-index:2;background-color:#f5e8c8;background-image:repeating-linear-gradient(0deg,#0000,#0000 39px,#0000000a 39px 40px),repeating-linear-gradient(90deg,#0000,#0000 39px,#0000000a 39px 40px);background-position:0 0;background-repeat:repeat;background-size:auto;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;border-top:6px solid #000;width:100%;padding:0;font-family:Bangers,Impact,cursive;position:relative}.comic-cover{background:#e63946;border-bottom:6px solid #000;flex-direction:column;align-items:center;padding:12px 24px 0;display:flex;position:relative;overflow:hidden}.comic-cover:before{content:"";background-image:radial-gradient(circle,#ffffff2e 1px,#0000 1px);background-size:10px 10px;position:absolute;inset:0}.comic-publisher{letter-spacing:.3em;color:#fff;opacity:.9;z-index:1;font-family:Bangers,cursive;font-size:.75rem}.comic-title{color:#f5e642;text-shadow:4px 4px #000,-2px -2px #000,2px -2px #000,-2px 2px #000;text-align:center;letter-spacing:.05em;z-index:1;font-family:Bangers,cursive;font-size:clamp(3rem,10vw,6rem);line-height:.9}.comic-subtitle{color:#fff;letter-spacing:.15em;text-align:center;z-index:1;margin-bottom:4px;font-family:Bangers,cursive;font-size:clamp(1rem,3vw,1.6rem)}.comic-meta{color:#fff;letter-spacing:.1em;z-index:1;background:#000;gap:24px;margin-top:4px;padding:4px 16px;font-family:Comic Neue,Arial Black,sans-serif;font-size:.75rem;font-weight:700;display:flex}.comic-grid{background:#f5e8c8;border-bottom:6px solid #000;border-left:6px solid #000;border-right:6px solid #000;grid-template-rows:auto;grid-template-columns:1fr 1fr 1fr;align-items:start;gap:0;display:grid}.panel{min-height:0;aspect-ratio:var(--panel-ratio,260 / 280);background:#fff;border:4px solid #000;position:relative;overflow:hidden;container-type:inline-size}.panel>svg{width:100%;height:100%;display:block;position:absolute;inset:0}.panel-full{grid-column:1/-1}.panel-wide{grid-column:span 2}.panel-tall{grid-row:span 2}.caption{color:#000;text-transform:uppercase;letter-spacing:.05em;z-index:10;background:#f5e642;border:3px solid #000;padding:4px 8px;font-family:Comic Neue,Arial Black,sans-serif;font-size:.72rem;font-weight:700;line-height:1.3;position:absolute;top:10px;left:10px;right:10px}.caption-bottom{top:auto;bottom:10px}.caption-blue{color:#fff;background:#4a9eff}.bubble{font-family:Comic Neue,Arial Black,sans-serif;font-size:var(--bubble-font-size,clamp(.58rem, 2.5cqw, .76rem));color:#000;z-index:10;max-width:min(var(--bubble-max-width,58%), 20rem);background:#fff;border:3px solid #000;border-radius:16px;padding:clamp(6px,2.2cqw,10px) clamp(8px,2.8cqw,12px);font-weight:700;line-height:1.35;position:absolute;box-shadow:0 4px #0000001f}.bubble:after{content:"";border-top:14px solid #000;border-left:8px solid #0000;border-right:8px solid #0000;width:0;height:0;position:absolute;bottom:-14px;left:20px}.bubble:before{content:"";z-index:11;border-top:12px solid #fff;border-left:6px solid #0000;border-right:6px solid #0000;width:0;height:0;position:absolute;bottom:-10px;left:22px}.bubble-right:after{left:auto;right:20px}.bubble-right:before{left:auto;right:22px}.bubble-left:after{border:8px solid #0000;border-left:none;border-right:14px solid #000;top:62%;bottom:auto;left:-14px;transform:translateY(-50%)}.bubble-left:before{border:6px solid #0000;border-left:none;border-right:12px solid #fff;top:62%;bottom:auto;left:-10px;transform:translateY(-50%)}.bubble-top:after{border-top:none;border-bottom:14px solid #000;top:-14px;bottom:auto}.bubble-top:before{border-top:none;border-bottom:12px solid #fff;top:-10px;bottom:auto}.thought{border-style:dashed;border-radius:50%}.thought:after,.thought:before{display:none}.sfx{color:#f5e642;text-shadow:3px 3px #000,-2px -2px #000,2px -2px #000,-2px 2px #000;z-index:10;letter-spacing:.05em;font-family:Bangers,cursive;font-size:2.5rem;position:absolute;transform:rotate(-8deg)}.sfx-red{color:#e63946}.sfx-blue{color:#4a9eff}.sfx-green{color:#2dc653}.tbc-panel{background:#000;border:4px solid #000;flex-direction:column;grid-column:1/-1;justify-content:center;align-items:center;gap:8px;min-height:180px;display:flex;position:relative;overflow:hidden}.tbc-panel:before{content:"";background-image:radial-gradient(circle,#f5e6421f 1px,#0000 1px);background-size:12px 12px;position:absolute;inset:0}.tbc-panel:after{content:"";pointer-events:none;z-index:0;background:radial-gradient(circle,#000000d1 0%,#000000ad 46%,#0000 100%);position:absolute;inset:14% 7% 10%}.tbc-stars{opacity:.42}.tbc-title{color:#f5e642;text-shadow:4px 4px #e63946,8px 8px #0000004d;letter-spacing:.1em;z-index:1;text-align:center;font-family:Bangers,cursive;font-size:clamp(2.5rem,8vw,5rem)}.tbc-copy{color:#ddd;text-align:center;z-index:1;text-shadow:0 2px #000000d9;background:linear-gradient(#04060cbd,#04060c6b);border-radius:22px;max-width:620px;padding:14px 28px 16px;font-family:Comic Neue,Arial Black,sans-serif;font-size:clamp(.65rem,1.4vw,.85rem);font-weight:700;line-height:1.7;position:relative;box-shadow:inset 0 0 0 1px #f5e6421f}.tbc-quote{color:#f5e642}.tbc-note{color:#9aa1b5;font-size:.75em}.tbc-dots{color:#fff;letter-spacing:.5em;z-index:1;font-family:Bangers,cursive;font-size:clamp(1.5rem,5vw,3rem)}.tbc-thought{color:#aaa;text-align:center;z-index:1;max-width:600px;padding:0 24px;font-family:Comic Neue,Arial Black,sans-serif;font-size:clamp(.7rem,1.5vw,.9rem);font-style:italic;font-weight:700;line-height:1.5}@media (width<=1100px){.comic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.panel-wide,.panel-full{grid-column:1/-1}}@media (width<=720px){.comic-cover{padding-inline:14px}.comic-meta{text-align:center;flex-wrap:wrap;justify-content:center;gap:8px 12px;padding-inline:12px}.comic-grid{grid-template-columns:1fr}.panel-wide,.panel-full{grid-column:1/-1}.bubble{--bubble-max-width:66%}.tbc-panel:after{inset:10% 4% 7%}.tbc-copy{padding:12px 18px 14px}}