:root { color-scheme:light; --bg:#f4f6f8; --panel:#fff; --text:#0b1726; --muted:#5c6b7a; --line:rgba(0,0,0,.08); --soft:rgba(0,0,0,.04); --shadow:0 10px 30px rgba(0,0,0,.06); }
:root.dark-mode { color-scheme:dark; --bg:#242424; --panel:#2c2c2c; --text:#f1f1f1; --muted:#b5b5b5; --line:rgba(255,255,255,.1); --soft:rgba(255,255,255,.06); --shadow:0 10px 30px rgba(0,0,0,.18); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.6; }
a { color:inherit; text-underline-offset:4px; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
:focus-visible { outline:3px solid #6685a2; outline-offset:4px; }
.topbar { max-width:1320px; margin:auto; padding:26px 36px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand-wrap,.top-actions { display:flex; align-items:center; gap:20px; }
.brand { font-family:Montserrat,sans-serif; font-size:32px; font-weight:300; letter-spacing:-1.5px; text-decoration:none; }
.breadcrumb { border-left:1px solid var(--line); padding-left:20px; color:var(--muted); font-size:14px; }
.pill { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line); border-radius:999px; padding:9px 18px; background:var(--panel); color:var(--text); text-decoration:none; font-size:14px; transition:background .2s,transform .2s; }
.pill:hover { background:var(--soft); }
.theme-toggle { width:44px; padding:0; font-size:20px; flex-shrink:0; }
.page { width:min(100%,1000px); margin:0 auto; padding:0 28px 32px; }
.hero { text-align:center; padding:62px 0 36px; }
.eyebrow { text-transform:uppercase; font-size:11px; font-weight:600; letter-spacing:.18em; color:var(--muted); margin:0 0 16px; }
h1 { font-family:Montserrat,sans-serif; font-size:clamp(36px,5.5vw,58px); font-weight:300; letter-spacing:-2px; line-height:1.15; margin:0 0 18px; }
.subtitle { max-width:580px; margin:0 auto; color:var(--muted); font-size:16px; }
.search-area { max-width:780px; margin:0 auto; }
.search-row { display:flex; align-items:center; gap:12px; border:1px solid var(--line); background:var(--panel); border-radius:999px; padding:9px 10px 9px 24px; box-shadow:var(--shadow); }
.search-row:focus-within { border-color:var(--muted); }
.search-icon { width:22px; height:22px; color:var(--muted); flex-shrink:0; }
.search-row input { min-width:0; width:100%; border:0; outline:0; background:transparent; color:var(--text); font-size:16px; padding:10px 0; }
.search-row input::placeholder { color:var(--muted); opacity:1; }
.primary { background:var(--text); color:var(--bg); border-color:transparent; padding:10px 24px; }
.primary:hover { background:var(--text); opacity:.85; }
.examples { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:20px; font-size:12px; color:var(--muted); }
.example { font:inherit; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--muted); padding:6px 12px; }
.example:hover { background:var(--panel); color:var(--text); }
.status-row { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:32px 0 20px; border-top:1px solid var(--line); padding-top:20px; }
.status { color:var(--muted); font-size:12px; margin:0; }
.status.warn { color:var(--text); }
.text-button { border:0; padding:8px 0; background:transparent; color:var(--muted); font-size:12px; text-decoration:underline; text-underline-offset:4px; }
.index-actions { display:flex; gap:16px; flex-shrink:0; }
.results { display:grid; gap:12px; }
.result { border:1px solid var(--line); background:var(--panel); border-radius:22px; padding:24px 28px; overflow-wrap:anywhere; }
.result h2 { font-size:20px; font-weight:500; letter-spacing:-.4px; margin:0 0 10px; }
.result h2 a { text-decoration:none; }
.result h2 a:hover { text-decoration:underline; }
.comic-number { font-size:12px; color:var(--muted); margin-right:12px; font-weight:400; white-space:nowrap; }
.result p { margin:0 0 14px; color:var(--muted); font-size:14px; }
.result-links { display:flex; flex-wrap:wrap; gap:18px; font-size:12px; }
.empty { text-align:center; padding:34px 24px; color:var(--muted); }
.empty strong { display:block; font-weight:500; color:var(--text); margin-bottom:8px; }
.result-count { color:var(--muted); font-size:12px; margin:0 0 12px; }
.tool-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:8px 0 56px; }
.tool-card { color:var(--text); text-decoration:none; background:var(--panel); border:1px solid var(--line); border-radius:26px; padding:30px; transition:transform .2s,box-shadow .2s; display:flex; flex-direction:column; }
.tool-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:30px; }
.tool-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:16px; background:var(--soft); }
.tool-icon svg { width:26px; height:26px; }
.arrow { font-size:23px; color:var(--muted); }
.tool-card h2 { font-family:Montserrat,sans-serif; font-size:24px; font-weight:400; letter-spacing:-.6px; margin:0 0 10px; }
.tool-card p { color:var(--muted); font-size:14px; margin:0 0 22px; }
.card-label { margin-top:auto; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.12em; }
details { margin-top:28px; color:var(--muted); font-size:12px; }
summary { cursor:pointer; padding:8px 0; }
details p { max-width:720px; }
footer { display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); margin-top:40px; padding-top:20px; color:var(--muted); font-size:12px; }
footer p { margin:0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:600px) { .topbar { padding:20px; } .brand { font-size:28px; } .breadcrumb { display:none; } .top-actions { gap:8px; } .page { padding:0 20px 28px; } .hero { padding:38px 0 30px; } .subtitle { font-size:14px; } .search-row { gap:8px; padding-left:16px; } .search-icon { display:none; } .search-row input { font-size:16px; } .primary { padding:10px 18px; } .status-row { align-items:flex-start; flex-direction:column; gap:4px; } .tool-grid { grid-template-columns:1fr; gap:14px; } .tool-card { padding:26px; } .card-top { margin-bottom:22px; } .result { padding:22px; } .result h2 { font-size:18px; } footer { flex-direction:column; gap:10px; } }
@media(prefers-reduced-motion:reduce) { * { transition:none !important; } }