:root {
  --bg:#151718; --surface:#1d2022; --surface-2:#24282b; --text:#e7eaee;
  --muted:#aeb7c2; --border:#31373c; --accent:#8ab4ff; --accent-soft:rgba(138,180,255,.12);
  --warn:#f8c76a; --shadow:0 10px 28px rgba(0,0,0,.26); --maxw:940px;
}
[data-theme="light"] { --bg:#eef1f4; --surface:#fff; --surface-2:#f5f7f9; --text:#1f2933;
  --muted:#5c6978; --border:#d6dde5; --accent:#2358d3; --accent-soft:rgba(35,88,211,.08);
  --warn:#946200; --shadow:0 10px 24px rgba(31,41,51,.08); }
* { box-sizing:border-box; }
body { margin:0; color:var(--text); background:radial-gradient(circle at top,rgba(82,101,130,.16),transparent 34%),var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif; line-height:1.6; }
a { color:inherit; text-decoration:none; }
.page { width:min(var(--maxw),calc(100% - 28px)); margin:0 auto; padding:18px 0 56px; }
.page.wide { --maxw:1080px; }
.topbar { display:flex; align-items:center; gap:10px; min-height:38px; margin-bottom:16px; }
.home-link,.crumb { color:var(--muted); font-size:.92rem; }
.home-link:hover { color:var(--accent); }
.spacer { flex:1; }
.theme-toggle { appearance:none; border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:999px; padding:8px 13px; font:inherit; cursor:pointer; }
.theme-toggle:hover { background:var(--surface-2); }
.hero { padding:26px 24px; border:1px solid var(--border); border-radius:18px; background:linear-gradient(135deg,var(--accent-soft),transparent 66%),var(--surface); box-shadow:var(--shadow); margin-bottom:25px; }
.eyebrow { margin:0 0 4px!important; color:var(--accent)!important; font-size:.76rem!important; font-weight:800; letter-spacing:.13em; }
.hero h1 { margin:0; font-size:clamp(1.55rem,3vw,2.15rem); line-height:1.25; }
.hero p { margin:9px 0 0; color:var(--muted); font-size:.96rem; }
.archive-section h2 { margin:0 0 11px; color:var(--muted); font-size:.98rem; letter-spacing:.04em; }
.author-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.author-card { position:relative; display:flex; flex-direction:column; min-height:145px; padding:20px; border:1px solid var(--border); border-radius:15px; background:var(--surface); box-shadow:var(--shadow); transition:.15s ease; }
.author-card:hover { transform:translateY(-2px); border-color:var(--accent); background:var(--surface-2); }
.work-title { color:var(--accent); font-size:.8rem; font-weight:800; letter-spacing:.08em; }
.author-name { margin-top:8px; font-size:1.35rem; font-weight:800; }
.archive-meta { margin-top:auto; color:var(--muted); font-size:.88rem; }
.arrow { position:absolute; right:20px; bottom:17px; color:var(--accent); font-size:1.25rem; }
.stats { display:flex; flex-wrap:wrap; gap:8px; margin-top:19px; }
.stats span { border:1px solid var(--border); border-radius:999px; padding:5px 10px; background:var(--surface-2); color:var(--muted); font-size:.8rem; }
.stats strong { color:var(--text); }
.controls { position:sticky; top:8px; z-index:2; display:grid; grid-template-columns:minmax(230px,2fr) repeat(2,minmax(150px,1fr)); gap:9px; padding:11px; border:1px solid var(--border); border-radius:14px; background:color-mix(in srgb,var(--surface) 93%,transparent); box-shadow:var(--shadow); backdrop-filter:blur(8px); }
input,select { width:100%; min-height:43px; border:1px solid var(--border); border-radius:10px; padding:9px 11px; background:var(--surface-2); color:var(--text); font:inherit; }
input:focus,select:focus { outline:2px solid var(--accent); outline-offset:1px; }
.result-row { display:flex; align-items:center; gap:12px; padding:13px 3px 8px; color:var(--muted); font-size:.86rem; }
.result-row span { margin-right:auto; }
.result-row a { color:var(--accent); }
.comment-list { display:grid; gap:10px; }
.comment-card { padding:17px 18px; border:1px solid var(--border); border-radius:14px; background:var(--surface); box-shadow:0 5px 17px rgba(0,0,0,.12); }
.comment-head { display:flex; align-items:flex-start; gap:11px; }
.chapter { min-width:72px; color:var(--accent); font-weight:800; }
.chapter-title { flex:1; font-weight:750; }
.issue { color:var(--muted); font-size:.83rem; white-space:nowrap; }
.comment-text { margin:11px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.comment-text.missing { color:var(--muted); font-style:italic; }
.badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.badge { display:inline-block; border:1px solid var(--border); border-radius:999px; padding:2px 8px; color:var(--muted); background:var(--surface-2); font-size:.72rem; }
.badge.warn { color:var(--warn); border-color:color-mix(in srgb,var(--warn) 45%,var(--border)); }
.attribution { margin-top:8px; color:var(--muted); font-size:.78rem; }
.empty-message { padding:28px; text-align:center; color:var(--muted); border:1px dashed var(--border); border-radius:14px; }
.footer { margin-top:34px; padding-top:18px; border-top:1px solid var(--border); color:var(--muted); text-align:center; font-size:.78rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:720px) { .controls { position:static; grid-template-columns:1fr; } .comment-head { flex-wrap:wrap; } .chapter-title { order:2; flex-basis:calc(100% - 83px); } .issue { order:3; width:100%; padding-left:83px; white-space:normal; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }

.comments-browser { margin-top:28px; }
.controls.four { grid-template-columns:minmax(230px,2fr) repeat(3,minmax(135px,1fr)); }
.work-badge { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%,var(--border)); }
@media (max-width:880px) { .controls.four { position:static; grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .controls.four { grid-template-columns:1fr; } }