:root  {
  
  color-scheme:dark;
  
  --bg:#080808;
  
  --panel:#101010;
  
  --line:#303030;
  
  --text:#f5f5f5;
  
  --muted:#a9a9a9;
  
  --yellow:#ffe044

}


*  {
  
  box-sizing:border-box

}


html  {
  
  scroll-behavior:smooth

}


body  {
  
  margin:0;
  
  background:var(--bg);
  
  color:var(--text);
  
  font-family:system-ui, -apple-system, "Noto Sans SC", "Microsoft YaHei", sans-serif

}


a  {
  
  color:inherit;
  
  text-decoration:none

}


button, input  {
  
  font:inherit

}


button  {
  
  cursor:pointer

}


a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible  {
  
  outline:3px solid var(--yellow);
  
  outline-offset:3px

}


.shell  {
  
  width:min(100% - 30px, 1040px);
  
  margin:auto

}


.header  {
  
  background:#0d0d0d;
  
  border-bottom:1px solid var(--line);
  
  position:sticky;
  
  top:0;
  
  z-index:10

}


.headrow  {
  
  min-height:66px;
  
  display:flex;
  
  justify-content:space-between;
  
  align-items:center;
  
  gap:10px

}


.brand  {
  
  font-size:24px;
  
  font-weight:900;
  
  letter-spacing:1px

}


.brand span  {
  
  background:var(--yellow);
  
  color:#141414;
  
  border-radius:7px;
  
  padding:2px 6px

}


.tagline  {
  
  margin:23px 0 18px;
  
  color:var(--muted);
  
  font-size:15px

}


.tabs  {
  
  display:flex;
  
  gap:10px;
  
  overflow-x:auto;
  
  padding-bottom:22px;
  
  scrollbar-width:none

}


.tab  {
  
  border-radius:30px;
  
  background:#242424;
  
  padding:12px 17px;
  
  white-space:nowrap

}


.tab.active  {
  
  background:var(--yellow);
  
  color:#111

}


.series  {
  
  border:1px solid var(--line);
  
  border-radius:19px;
  
  overflow:hidden;
  
  margin-bottom:15px

}


.series summary  {
  
  list-style:none;
  
  background:var(--yellow);
  
  color:#141414;
  
  padding:20px;
  
  display:flex;
  
  justify-content:space-between;
  
  align-items:center;
  
  font-weight:850;
  
  font-size:22px;
  
  cursor:pointer

}


.series summary::-webkit-details-marker  {
  
  display:none

}


.series details:not([open]) .arrow  {
  
  transform:rotate(-90deg)

}


.episode-list  {
  
  padding:0 18px;
  
  border:1px solid var(--line);
  
  border-radius:16px;
  
  overflow:hidden

}


.series .episode-list  {
  
  border:0;
  
  border-radius:0

}


.ep-row  {
  
  display:flex;
  
  align-items:center;
  
  gap:10px;
  
  min-height:75px;
  
  padding:18px 0;
  
  border-bottom:1px solid #272727;
  
  font-size:16px;
  
  line-height:1.5

}


.ep-row:last-child  {
  
  border:0

}


.ep-row:hover, .back:hover  {
  
  color:var(--yellow)

}


.ep-name  {
  
  flex:1

}


.ep-status  {
  
  color:var(--yellow);
  
  font-size:12px;
  
  white-space:nowrap

}


.tiles  {
  
  display:grid;
  
  grid-template-columns:repeat(2, minmax(0, 1fr));
  
  gap:12px;
  
  margin-top:20px

}


.tile  {
  
  display:block;
  
  border:1px solid var(--line);
  
  border-radius:18px;
  
  background:#101010;
  
  padding:20px;
  
  min-height:132px

}


.tile .line  {
  
  height:7px;
  
  border-radius:8px;
  
  background:var(--yellow);
  
  margin-bottom:18px

}


.tile strong  {
  
  display:block;
  
  font-size:17px

}


.tile small  {
  
  display:block;
  
  color:var(--muted);
  
  margin-top:14px

}


.tile:hover  {
  
  border-color:var(--yellow)

}


h1  {
  
  font-size:clamp(27px, 5vw, 42px);
  
  line-height:1.35;
  
  margin:15px 0

}


h2  {
  
  font-size:21px

}


.muted, .empty  {
  
  color:var(--muted);
  
  line-height:1.8

}


.empty  {
  
  padding:20px

}


.back  {
  
  display:inline-block;
  
  color:var(--muted);
  
  margin:24px 0 10px

}


.pill  {
  
  display:inline-block;
  
  background:var(--yellow);
  
  color:#161616;
  
  border-radius:8px;
  
  padding:7px 11px;
  
  font-size:13px;
  
  font-weight:800;
  
  margin-top:20px

}


.reader-actions  {
  
  display:flex;
  
  gap:10px;
  
  flex-wrap:wrap;
  
  margin:22px 0

}


.action  {
  
  border:1px solid #444;
  
  background:#222;
  
  color:white;
  
  border-radius:12px;
  
  padding:11px 15px;
  
  display:inline-block

}


.action.primary  {
  
  background:var(--yellow);
  
  color:#141414;
  
  border-color:var(--yellow);
  
  font-weight:800

}


.comic  {
  
  display:grid;
  
  grid-template-columns:repeat(2, minmax(0, 1fr));
  
  gap:15px;
  
  margin:24px 0

}


.panel  {
  
  background:#fffdf8;
  
  color:#161616;
  
  border:3px solid #222;
  
  border-radius:15px;
  
  overflow:hidden;
  
  min-height:315px;
  
  display:flex;
  
  flex-direction:column

}


.panel-heading  {
  
  font-weight:850;
  
  padding:14px 15px 4px;
  
  display:flex;
  
  align-items:center;
  
  gap:8px

}


.panel-num  {
  
  background:var(--yellow);
  
  padding:4px 10px;
  
  border-radius:99px

}


.panel-art  {
  
  height:125px;
  
  display:grid;
  
  place-items:center;
  
  padding:7px 15px

}


.panel-art img  {
  
  max-width:100%;
  
  max-height:100%;
  
  width:100%;
  
  object-fit:contain

}


.panel-text  {
  
  line-height:1.85;
  
  font-size:17px;
  
  margin:0;
  
  padding:12px 18px 24px;
  
  flex:1

}


.comic.single  {
  
  grid-template-columns:1fr;
  
  max-width:650px;
  
  margin-left:auto;
  
  margin-right:auto

}


.comic.single .panel-art  {
  
  height:190px

}


.comic.single .panel-text  {
  
  font-size:19px

}


.study  {
  
  border:1px solid #444;
  
  border-radius:18px;
  
  background:#141414;
  
  padding:22px;
  
  margin:25px 0

}


.study h2  {
  
  color:var(--yellow);
  
  margin-top:23px

}


.study h2:first-child  {
  
  margin-top:0

}


.study p, .study li  {
  
  line-height:1.9

}


.study li  {
  
  margin:10px 0

}


.study a  {
  
  color:var(--yellow);
  
  overflow-wrap:anywhere

}


.reader-nav  {
  
  display:flex;
  
  justify-content:space-between;
  
  gap:12px;
  
  margin:30px 0

}


.foot  {
  
  color:var(--muted);
  
  text-align:center;
  
  padding:50px 0 30px;
  
  font-size:13px

}


.search  {
  
  display:block;
  
  width:100%;
  
  background:#191919;
  
  border:1px solid #555;
  
  color:white;
  
  border-radius:12px;
  
  padding:13px;
  
  margin:12px 0 20px

}


.home-view  {
  
  padding-bottom:25px

}


@media(max-width:650px)  {
  
  .shell  {
  
    width:calc(100% - 28px)
  
}


  .brand  {
  
    font-size:22px
  
}


  .shelf  {
  
    font-size:13px;
  
    padding:9px 11px
  
}


  .comic  {
  
    grid-template-columns:1fr
  
}


  .panel  {
  
    min-height:320px
  
}


  .panel-text  {
  
    font-size:18px
  
}


  .tiles  {
  
    gap:10px
  
}


  .tile  {
  
    padding:16px;
  
    min-height:120px
  
}


  .tile strong  {
  
    font-size:15px
  
}


  .series summary  {
  
    font-size:20px
  
}


  .ep-row  {
  
    font-size:15px
  
}



}


/* V3.2: responsive comic layout.
   Reserve independent space for artwork and dialogue on every screen size. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  overflow-x: clip;
}
.shell {
  width: min(calc(100% - 32px), 1040px);
}
.headrow,
.reader-actions,
.reader-nav {
  min-width: 0;
}
.brand {
  flex-shrink: 0;
}
.comic {
  align-items: stretch;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2.5vw, 22px);
}
.panel {
  min-width: 0;
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}
.panel-heading {
  flex: 0 0 auto;
  min-width: 0;
  padding: 16px 18px 8px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.panel-num {
  flex: 0 0 auto;
}
.panel-art {
  /* A fixed aspect ratio avoids percentage-height sizing bugs on mobile. */
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  min-height: 0;
  padding: 12px 22px;
  overflow: hidden;
}
.panel-art img,
.comic.single .panel-art img {
  display: block;
  flex: 0 1 auto;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  object-position: center;
}
.panel-text {
  position: relative;
  flex: 1 0 auto;
  min-width: 0;
  margin: 0;
  padding: 14px 20px 24px;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.75;
  overflow-wrap: anywhere;
  word-break: normal;
}
.comic.single {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 650px;
}
.comic.single .panel-art {
  height: auto;
  aspect-ratio: 16 / 9;
}
.comic.single .panel-text {
  font-size: clamp(17px, 2vw, 20px);
}
.study,
.study li,
.study p {
  overflow-wrap: anywhere;
}
@media (max-width: 700px) {
  .comic {
    grid-template-columns: minmax(0, 1fr);
  }
  .panel {
    min-height: 0;
  }
  .panel-art,
  .comic.single .panel-art {
    aspect-ratio: 16 / 8;
    padding: 12px 22px;
  }
  .panel-text,
  .comic.single .panel-text {
    font-size: clamp(16px, 4.2vw, 19px);
    line-height: 1.7;
  }
}
@media (max-width: 380px) {
  .shell {
    width: calc(100% - 24px);
  }
  .brand {
    font-size: 20px;
  }
  .shelf {
    font-size: 12px;
    padding: 9px;
  }
  .reader-actions {
    gap: 8px;
  }
  .reader-actions .action {
    padding: 10px 12px;
    font-size: 14px;
  }
  .panel-art,
  .comic.single .panel-art {
    aspect-ratio: 16 / 9;
    padding: 8px 14px;
  }
  .panel-text {
    padding: 12px 16px 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}


/* V3.3: Explicitly isolate artwork from dialogue.
   SVG intrinsic aspect ratio is 2:1. Give the artwork its own box and
   reserve its full height before the paragraph starts. */
.panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: start;
}
.panel-heading {
  grid-row: 1;
}
.panel-art,
.comic.single .panel-art {
  grid-row: 2;
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  padding: 0 18px;
  margin: 0;
  overflow: hidden;
}
.panel-art img,
.comic.single .panel-art img {
  display: block;
  position: static;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
}
.panel-text,
.comic.single .panel-text {
  grid-row: 3;
  display: block;
  flex: none;
  align-self: start;
  margin: 0;
  padding: 14px 20px 26px;
  min-height: 0;
  height: auto;
  line-height: 1.75;
}
@media (max-width: 700px) {
  .panel-art,
  .comic.single .panel-art {
    padding: 0 14px;
  }
  .panel-text,
  .comic.single .panel-text {
    padding: 12px 18px 24px;
  }
}

/* V4 EP01: unique scene artwork stays independent from episode copy. */
.panel-art img[src*="ep01-v4/"] { display:block; width:100%; height:100%; object-fit:contain; }
.panel:has(.panel-art img[src*="ep01-v4/"]) .panel-art { background:#141414; border-radius:14px; overflow:hidden; }

/* V4 EP02 artwork: preserve the shared reader and isolate scene assets. */
.panel-art img[src*="ep02-v4/"] { display:block; width:100%; height:100%; object-fit:contain; }
.panel:has(.panel-art img[src*="ep02-v4/"]) .panel-art { background:#141414; border-radius:14px; overflow:hidden; }

/* V4.4 illustrated scenes: isolate artwork from story and keep reader responsive. */
.v4-scene { display:block; width:100%; height:100%; max-width:100%; }
.panel-art:has(.v4-scene) { background:#141414; border-radius:14px; overflow:hidden; }

/* EP03 V5 prototype: vector panel artwork is isolated from the unchanged story text. */
.v5-ep03-scene { display:block; width:100%; height:100%; max-width:100%; }
.panel-art:has(.v5-ep03-scene) { background:#141414; border-radius:14px; overflow:hidden; }

/* V5: same black/yellow visual language across all eight episodes. */
[class*="v5-ep"][class$="-scene"] { display:block; width:100%; height:100%; max-width:100%; }
.panel-art:has([class*="v5-ep"][class$="-scene"]) { background:#141414; border-radius:14px; overflow:hidden; }
.v5-editorial { border:1px solid #51471d; border-radius:16px; background:#16140c; margin-top:26px; }
.v5-editorial h2 { color:#ffe044; }
.v5-editorial .muted { font-size:.92rem; }

/* Reader feedback invitation: visible, mobile-friendly and accessible. */
.feedback-action { border-color:#ffe044; color:#ffe044; }
.feedback-invite { margin:32px 0 42px; padding:22px; border:1px solid #62541d; border-radius:18px; background:#17150d; }
.feedback-invite h2 { margin-top:0; color:#ffe044; }
.feedback-invite p { line-height:1.8; }
.feedback-status:empty { display:none; }
@media(max-width:480px){ .feedback-invite { padding:17px; } .feedback-invite .action { width:100%; text-align:center; } }

/* Home: feedback is a quiet invitation after the bookshelf, not the hero. */
.feedback-invite--compact { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:17px 20px; background:#111; border-color:#38332a; }
.feedback-invite--compact h2 { font-size:17px; margin:0 0 5px; color:#f5f5f5; }
.feedback-invite--compact p { margin:0; font-size:14px; color:var(--muted); }
.feedback-invite--compact .action { flex-shrink:0; }
@media(max-width:560px) { .feedback-invite--compact .action { width:100%; text-align:center; } }

/* Brand icon beside the existing accessible site name. */
.brand { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.brand-icon { display:block; width:36px; height:36px; border-radius:9px; flex-shrink:0; }
@media(max-width:400px){ .brand { font-size:20px; } .brand-icon { width:30px; height:30px; } }

/* Automatic read/favorite badges in the manga bookshelf. */
.ep-status { display:inline-flex; align-items:center; gap:7px; font-size:17px; }
.read-tick { display:inline-grid; place-items:center; width:23px; height:23px; border-radius:50%; background:#1d643e; color:#a7f3c4; font-size:16px; font-weight:900; }
.favorite-star { color:#ffe044; font-size:21px; line-height:1; }