:root { color-scheme: light; --ink:#17211d; --muted:#66736c; --paper:#f6f7f3; --card:#fff; --accent:#176b4c; --line:#dce3dd; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.55 system-ui,-apple-system,sans-serif; }
a { color:var(--accent); }
.site-header, main, footer { width:min(1100px,calc(100% - 32px)); margin:auto; }
.site-header { min-height:72px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--line); }
.site-header .brand { color:var(--ink); font-weight:800; text-decoration:none; }
.site-header span { color:var(--muted); font-size:14px; }
.site-header .index-count { margin-left:auto; padding:6px 10px; border-radius:999px; background:#e5ede8; color:var(--accent); font-weight:700; }
.site-header nav { margin-left:8px; }
main { min-height:calc(100vh - 180px); padding:56px 0; }
.hero { text-align:center; padding:24px 0 52px; }
.hero h1,.detail h1,.guide h1 { font-size:clamp(36px,7vw,68px); line-height:1.02; letter-spacing:-.045em; margin:.25em 0 .55em; }
.eyebrow { color:var(--accent); font-weight:750; text-transform:uppercase; letter-spacing:.08em; font-size:13px; }
.search { display:grid; grid-template-columns:minmax(180px,1fr) auto auto auto auto auto; gap:10px; background:var(--card); padding:10px; border:1px solid var(--line); border-radius:16px; box-shadow:0 10px 35px #1c3d2d10; text-align:left; }
input[type=search],select,button,.button { border:0; border-radius:10px; padding:13px 15px; font:inherit; }
input[type=search],select { background:#f0f3ef; min-width:0; }
button,.button { background:var(--accent); color:white; font-weight:700; cursor:pointer; text-decoration:none; display:inline-block; }
.secondary { background:#e5ede8; color:var(--accent); }
.danger { background:#8d2f2f; }
.result-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.result-heading h2 { margin:0; }
.result-heading span { color:var(--muted); font-size:13px; }
.selection-toolbar { position:sticky; top:0; z-index:5; background:var(--paper); padding:12px 0; border-bottom:1px solid var(--line); }
.source-filter { position:relative; background:#f0f3ef; border-radius:10px; padding:12px 14px; }
.source-filter summary { cursor:pointer; white-space:nowrap; }
.source-filter div { position:absolute; z-index:10; top:calc(100% + 6px); right:0; min-width:220px; display:grid; gap:7px; padding:12px; background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:0 10px 30px #0002; }
.download-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.results { display:grid; gap:10px; }
.track { display:grid; grid-template-columns:auto 1fr; gap:15px; padding:18px; background:var(--card); border:1px solid var(--line); border-radius:14px; }
.track-title { color:var(--ink); font-size:19px; font-weight:750; text-decoration:none; }
.track p { color:var(--muted); margin:3px 0 8px; }
.badges { display:flex; flex-wrap:wrap; gap:7px; }
.badges span { font-size:12px; padding:4px 8px; border-radius:999px; background:#edf2ee; }
.track audio,.detail-player { width:100%; margin-top:14px; height:42px; }
.detail,.guide { max-width:820px; margin:auto; }
.artist { font-size:22px; color:var(--muted); }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin:30px 0; }
.evidence { background:var(--card); border:1px solid var(--line); padding:24px; border-radius:16px; }
dl { display:grid; grid-template-columns:180px 1fr; gap:10px 18px; }
dt { font-weight:700; } dd { margin:0; overflow-wrap:anywhere; } code { font-size:12px; }
.notice { background:#fff6d8; border-left:4px solid #d8a720; padding:15px; margin-top:22px; }
.guide { font-size:18px; } .guide h2 { margin-top:36px; }
.admin h1 { font-size:clamp(34px,6vw,58px); margin:.2em 0 .5em; }
.admin h2 { margin-top:42px; }
.admin { font-size:14px; }
.admin > h1 { font-size:clamp(30px,4vw,44px); }
.admin th,.admin td { padding:9px 11px; }
.admin-action { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0 0 18px; }
.admin-action small { color:var(--muted); }
.row-actions { display:flex; flex-wrap:wrap; gap:6px; }
.row-actions form { margin:0; }
.row-actions button, td form button { padding:8px 10px; font-size:13px; }
.adapter-requests { display:grid; gap:10px; }
.adapter-requests summary { cursor:pointer; }
.markdown-content { margin-top:18px; overflow-wrap:anywhere; }
.markdown-content { font-size:13px; line-height:1.48; }
.admin .markdown-content h1 { font-size:26px; line-height:1.15; letter-spacing:-.02em; margin:24px 0 16px; }
.admin .markdown-content h2 { font-size:20px; line-height:1.2; margin:28px 0 12px; }
.admin .markdown-content h3 { font-size:16px; line-height:1.25; margin:22px 0 10px; }
.markdown-content pre { overflow:auto; padding:14px; border-radius:10px; background:#f0f3ef; font:13px/1.5 ui-monospace,monospace; }
.markdown-content code { font:13px/1.5 ui-monospace,monospace; }
.markdown-content table { margin:16px 0; }
.markdown-content blockquote { margin-left:0; padding-left:16px; border-left:4px solid var(--line); color:var(--muted); }
.error { color:#8d2f2f; }
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin:28px 0; }
.stat-grid article { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; display:grid; }
.stat-grid strong { font-size:30px; } .stat-grid span { color:var(--muted); font-size:13px; }
.table-wrap { overflow-x:auto; background:var(--card); border:1px solid var(--line); border-radius:14px; }
table { width:100%; border-collapse:collapse; } th,td { padding:12px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; } th { font-size:12px; text-transform:uppercase; color:var(--muted); } tr:last-child td { border-bottom:0; }
footer { border-top:1px solid var(--line); padding:24px 0 40px; color:var(--muted); font-size:13px; }
@media (max-width:760px) { .site-header { flex-wrap:wrap; padding:12px 0; } .site-header .index-count { order:3; margin-left:0; } .site-header nav { margin-left:auto; } .search { grid-template-columns:1fr; } .hero { text-align:left; } dl { grid-template-columns:1fr; gap:2px; } dd { margin-bottom:13px; } .result-heading { align-items:flex-start; flex-direction:column; } .download-actions { justify-content:flex-start; } }