:root{
  --bg:#FDF4E3; --ink:#33261D; --paper:#FFFDF8; --orange:#FF8A3D; --orange-d:#D96A1E;
  --green:#3AA76D; --green-l:#E4F5EB; --red:#E5484D; --red-l:#FDEBEA;
  --yellow:#FFC53D; --yellow-l:#FFF6DE; --blue:#4B9EFA; --muted:#8A776A;
  --radius:18px; --bd:3px solid var(--ink); --shadow:6px 6px 0 rgba(51,38,29,.9);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  background:var(--bg) radial-gradient(rgba(51,38,29,.055) 1.6px, transparent 1.6px);
  background-size:22px 22px; color:var(--ink); line-height:1.75;
}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;height:auto}
.wrap{max-width:860px;margin:0 auto;padding:0 16px}
.narrow{max-width:720px}

/* header */
header.site{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:var(--bd)}
header.site .bar{display:flex;align-items:center;gap:10px;padding:10px 16px;max-width:860px;margin:0 auto}
.logo{display:flex;align-items:center;gap:8px;font-weight:900;font-size:1.15rem;letter-spacing:.02em}
.logo .mark{font-size:1.5rem}
.logo .dom{font-size:.72rem;font-weight:700;color:var(--muted);letter-spacing:.06em}
header.site nav{margin-left:auto;display:flex;gap:6px}
header.site nav a{font-weight:800;font-size:.92rem;padding:6px 14px;border:var(--bd);border-radius:999px;background:#fff}
header.site nav a:hover,header.site nav a.on{background:var(--yellow)}

/* hero */
.hero{padding:44px 0 30px;text-align:center}
.hero .stage{display:flex;justify-content:center;align-items:flex-end;gap:6px;margin-bottom:10px}
.hero h1{font-size:clamp(1.7rem,5.5vw,2.6rem);font-weight:900;letter-spacing:.04em}
.hero h1 .hl{background:linear-gradient(transparent 62%,var(--yellow) 62%)}
.hero p.tag{margin-top:8px;font-weight:700;color:var(--muted)}
.hero .badges{margin-top:14px;display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.hero .badges span{font-size:.82rem;font-weight:800;background:#fff;border:var(--bd);border-radius:999px;padding:4px 12px;box-shadow:3px 3px 0 rgba(51,38,29,.85)}

/* category section */
.cat-sec{margin:34px 0}
.cat-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.cat-head .ce{font-size:1.6rem}
.cat-head h2{font-size:1.3rem;font-weight:900}
.cat-head small{color:var(--muted);font-weight:700}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.card{background:var(--paper);border:var(--bd);border-radius:var(--radius);box-shadow:var(--shadow);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .12s ease}
.card:hover{transform:translate(-2px,-2px)}
.card .cover{position:relative;display:flex;align-items:center;justify-content:center;height:110px;
  border-bottom:var(--bd);background:radial-gradient(rgba(51,38,29,.12) 2px,transparent 2px) 0 0/14px 14px,#FFE9C8}
.card .cover .fe{font-size:3.2rem;filter:drop-shadow(3px 3px 0 rgba(51,38,29,.25))}
.card .cover .no{position:absolute;top:8px;left:8px;background:var(--ink);color:#fff;font-weight:900;
  font-size:.72rem;border-radius:999px;padding:2px 10px;letter-spacing:.08em}
.card .body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.card h3{font-size:1.02rem;font-weight:900;line-height:1.45}
.card p{font-size:.84rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .go{margin-top:auto;font-size:.82rem;font-weight:900;color:var(--orange-d)}

/* episode page */
.ep-head{padding:30px 0 6px}
.crumb{font-size:.8rem;font-weight:800;color:var(--muted);margin-bottom:10px}
.crumb a:hover{color:var(--orange-d)}
.ep-title-box{background:var(--paper);border:var(--bd);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:20px 22px;display:flex;gap:16px;align-items:center}
.ep-title-box .fe{font-size:3rem;flex:none}
.ep-title-box h1{font-size:clamp(1.25rem,4.2vw,1.7rem);font-weight:900;line-height:1.5}
.ep-title-box .meta{margin-top:4px;font-size:.8rem;font-weight:800;color:var(--muted)}
.ep-title-box .meta .chip{display:inline-block;background:var(--green-l);border:2px solid var(--green);
  color:var(--green);border-radius:999px;padding:0 10px;margin-right:8px}

.comic{padding:24px 0 8px;display:flex;flex-direction:column;gap:22px}
.panel{background:var(--paper);border:var(--bd);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.panel .ph{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:var(--bd);
  background:repeating-linear-gradient(-45deg,var(--yellow-l),var(--yellow-l) 10px,#fff 10px,#fff 20px)}
.panel .ph .no{background:var(--ink);color:#fff;font-weight:900;font-size:.72rem;border-radius:999px;padding:2px 10px}
.panel .ph .pt{font-weight:900;font-size:.95rem}
.scene{display:flex;align-items:flex-end;gap:10px;padding:18px 16px 14px;position:relative}
.scene .prop{position:absolute;top:10px;right:14px;font-size:2.6rem;transform:rotate(8deg);
  filter:drop-shadow(2px 3px 0 rgba(51,38,29,.2));user-select:none}
.scene .chara{flex:none}
.bubble{position:relative;background:#fff;border:var(--bd);border-radius:16px;padding:12px 16px;
  font-weight:800;font-size:.98rem;line-height:1.8;box-shadow:4px 4px 0 rgba(51,38,29,.85);flex:1;min-width:0}
.bubble.left::before{content:"";position:absolute;left:-14px;bottom:26px;width:18px;height:18px;background:#fff;
  border-left:var(--bd);border-bottom:var(--bd);transform:rotate(45deg)}
.bubble.right::before{content:"";position:absolute;right:-14px;bottom:26px;width:18px;height:18px;background:#fff;
  border-right:var(--bd);border-top:var(--bd);transform:rotate(45deg)}
.bubble.green{background:var(--green-l)}
.bubble.green::before{background:var(--green-l)}
.scene.flip{flex-direction:row-reverse}
.who{font-size:.72rem;font-weight:900;color:var(--muted);text-align:center;margin-top:2px}

.myth{margin:0 16px 16px;background:var(--red-l);border:3px dashed var(--red);border-radius:14px;
  padding:12px 16px;display:flex;align-items:center;gap:12px}
.myth .stamp{flex:none;background:var(--red);color:#fff;font-weight:900;font-size:.8rem;border-radius:8px;
  padding:4px 10px;transform:rotate(-6deg);box-shadow:2px 2px 0 rgba(51,38,29,.6)}
.myth p{font-weight:900;color:var(--red)}
.myth p s{opacity:.95}

.cap{margin:0 16px 16px;background:#FBF3E4;border-left:6px solid var(--orange);border-radius:0 12px 12px 0;
  padding:10px 14px;font-size:.9rem;color:#5A4638}
.warn{margin:0 16px 16px;background:var(--yellow-l);border:3px solid var(--yellow);border-radius:14px;
  padding:10px 14px;font-size:.9rem;font-weight:700;display:flex;gap:10px;align-items:flex-start}
.warn .ic{flex:none;font-size:1.2rem;line-height:1.5}

/* full text */
.fulltext{margin:26px 0}
.fulltext details{background:var(--paper);border:var(--bd);border-radius:var(--radius);box-shadow:var(--shadow)}
.fulltext summary{cursor:pointer;font-weight:900;padding:14px 18px;list-style:none;display:flex;align-items:center;gap:8px}
.fulltext summary::-webkit-details-marker{display:none}
.fulltext summary::after{content:"▾";margin-left:auto;transition:transform .15s}
.fulltext details[open] summary::after{transform:rotate(180deg)}
.fulltext .ft-body{padding:0 20px 18px;border-top:2px dashed rgba(51,38,29,.25)}
.fulltext .ft-body h2{font-size:1.05rem;font-weight:900;margin:18px 0 8px;padding-left:10px;border-left:5px solid var(--green)}
.fulltext .ft-body p{margin:10px 0;font-size:.95rem}
.fulltext .ft-body ol{padding-left:1.4em;font-size:.88rem;color:var(--muted)}

/* prev/next */
.pn{display:flex;gap:14px;margin:26px 0}
.pn a{flex:1;background:var(--paper);border:var(--bd);border-radius:14px;box-shadow:4px 4px 0 rgba(51,38,29,.85);
  padding:12px 14px;font-size:.86rem;font-weight:800;min-width:0}
.pn a:hover{background:var(--yellow-l)}
.pn a small{display:block;color:var(--muted);font-size:.72rem;font-weight:900;margin-bottom:2px}
.pn a.next{text-align:right}
.pn a span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* about */
.prose{background:var(--paper);border:var(--bd);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:24px 26px;margin:30px 0}
.prose h1{font-size:1.5rem;font-weight:900;margin-bottom:14px}
.prose h2{font-size:1.1rem;font-weight:900;margin:20px 0 8px;padding-left:10px;border-left:5px solid var(--orange)}
.prose p{margin:8px 0;font-size:.95rem}
.prose ul{padding-left:1.3em;font-size:.95rem}

/* footer */
footer.site{margin-top:44px;border-top:var(--bd);background:var(--paper)}
footer.site .inner{max-width:860px;margin:0 auto;padding:22px 16px;font-size:.8rem;color:var(--muted)}
footer.site .disc{background:var(--yellow-l);border:2px solid var(--yellow);border-radius:12px;
  padding:10px 14px;font-weight:700;margin-bottom:12px;color:#6B5320}
footer.site .cols{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
footer.site a{font-weight:800}
footer.site a:hover{color:var(--orange-d)}

/* svg shared */
.ln{fill:none;stroke:#33261D;stroke-width:5;stroke-linecap:round}
.armo{fill:none;stroke:#33261D;stroke-width:17;stroke-linecap:round}
.armi{fill:none;stroke-width:9;stroke-linecap:round}
.arm-kid{stroke:#FF8A3D}
.arm-anan{stroke:#FFFFFF}
.hand{fill:#FFE0BD;stroke:#33261D;stroke-width:4}

@media (max-width:560px){
  .scene{flex-wrap:wrap;justify-content:center}
  .scene .chara{width:112px}
  .scene .prop{font-size:2rem}
  .bubble{flex-basis:100%;order:-1}
  .bubble.left::before,.bubble.right::before{left:40px;right:auto;bottom:-14px;
    border:none;border-right:var(--bd);border-bottom:var(--bd);transform:rotate(45deg)}
  .ep-title-box{flex-direction:column;text-align:center}
  .pn{flex-direction:column}
  .pn a.next{text-align:left}
}