:root { --accent:#2563eb; --accent2:#fbbf24; --bg:#fffbeb; --card:#fff; --ink:#1e1b4b; --muted:#4b5563; --max:1100px; --header-h:64px; --comic-border:#000; }
*,*::before,*::after{box-sizing:border-box} body{margin:0;font-family:"Noto Sans SC",sans-serif;line-height:1.82;color:var(--ink);background:var(--bg);background-image:radial-gradient(circle,#fef3c7 1px,transparent 1px);background-size:20px 20px;min-height:100vh} img{max-width:100%;height:auto;display:block} a{color:var(--accent);font-weight:600;text-decoration:none} a:hover{text-decoration:underline}
.container{width:min(100% - 2rem,var(--max));margin-inline:auto} .site-header{position:sticky;top:0;z-index:500;background:var(--card);border-bottom:4px solid var(--comic-border);box-shadow:4px 4px 0 var(--comic-border)} .header-row{display:flex;align-items:center;justify-content:space-between;min-height:var(--header-h)} .brand{display:flex;align-items:center;gap:.65rem;font-weight:800;text-transform:uppercase} .brand b{color:var(--accent)} .site-nav ul{display:flex;gap:.25rem;list-style:none;margin:0;padding:0;flex-wrap:wrap} .site-nav a{padding:.45rem .85rem;font-weight:600;font-size:.9rem;border:2px solid transparent} .site-nav a.active{border-color:var(--comic-border);background:var(--accent2);color:var(--ink)} .nav-toggle{display:none;background:none;border:none;cursor:pointer} .nav-toggle span{display:block;width:22px;height:3px;background:var(--comic-border);margin:4px 0}
.ads-top-bar{background:#fff;border-bottom:3px solid var(--comic-border);padding:.75rem 0} #ads{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center} .applist-title{text-align:center;font-weight:800;color:var(--accent)}
.link-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;padding:1rem 0} .link-strip a{padding:.5rem 1rem;background:var(--accent2);border:3px solid var(--comic-border);box-shadow:3px 3px 0 var(--comic-border);font-weight:700;font-size:.88rem;color:var(--ink)} .link-strip a:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--comic-border);text-decoration:none}
.hero-comic{padding:2rem 0} .hero-comic-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center} .comic-title-box{position:relative} .hero-badge{background:var(--accent);color:#fff;padding:.25rem .75rem;font-weight:800;font-size:.78rem;border:2px solid var(--comic-border)} h1{font-size:clamp(1.4rem,3vw,1.95rem);margin:1rem 0;line-height:1.3;text-shadow:2px 2px 0 var(--accent2)} .lead{color:var(--muted)}
.speech-bubble{position:relative;background:#fff;border:3px solid var(--comic-border);border-radius:20px;padding:.75rem 1.25rem;font-weight:700;display:inline-block;margin:.75rem 0;box-shadow:4px 4px 0 var(--comic-border)} .speech-bubble::after{content:"";position:absolute;bottom:-12px;left:30px;border:10px solid transparent;border-top-color:var(--comic-border)} .hero-bubble{background:var(--accent2)}
.hero-visual img{border:4px solid var(--comic-border);box-shadow:8px 8px 0 var(--comic-border);border-radius:4px}
.comic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem;padding:2rem 0 3rem} .comic-panel{position:relative} .panel-border{background:var(--card);border:4px solid var(--comic-border);padding:1.25rem;box-shadow:6px 6px 0 var(--comic-border);position:relative} .panel-label{position:absolute;top:-12px;left:12px;background:var(--accent2);border:2px solid var(--comic-border);padding:.15rem .5rem;font-size:.7rem;font-weight:800} .comic-panel h2{font-size:1.05rem;margin:1rem 0 .75rem;border-bottom:3px solid var(--accent);padding-bottom:.35rem} .prose p{margin:0 0 .85rem;font-size:.95rem} .panel-img img{border:2px solid var(--comic-border);margin-top:.75rem} .panel-toggle{margin-top:.75rem;padding:.4rem .85rem;background:var(--accent);color:#fff;border:2px solid var(--comic-border);font-weight:700;cursor:pointer} .comic-panel:not(.expanded) .prose p:nth-child(n+3){display:none} .comic-related{grid-column:1/-1}
.related-read{padding:1.5rem;background:#fff;border:4px solid var(--comic-border);box-shadow:4px 4px 0 var(--comic-border)} .related-read h2{margin:0 0 .75rem}
.page-hero{padding:2rem 0} .breadcrumb{font-size:.88rem;color:var(--muted)} .prose-card{background:var(--card);border:4px solid var(--comic-border);padding:1.75rem;box-shadow:4px 4px 0 var(--comic-border);margin-bottom:1.5rem} .page-body{padding-bottom:3rem}
.error-wrap{text-align:center;padding:4rem} .error-wrap .code{font-size:4rem;font-weight:800;color:var(--accent)} .site-footer{background:var(--ink);color:#c7d2fe;padding:2rem 0;margin-top:2rem;border-top:4px solid var(--comic-border)} .footer-links{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:.75rem}
@media(max-width:768px){.nav-toggle{display:flex;flex-direction:column} .site-nav{display:none;position:absolute;top:var(--header-h);left:0;right:0;background:#fff;padding:1rem;border-bottom:4px solid #000} .site-nav.is-open{display:block} .site-nav ul{flex-direction:column} .hero-comic-grid{grid-template-columns:1fr}}