:root { --bg: #ffffff; --fg: #0a0a0a; --muted:#6b6b6b; --card:#f6f6f6; --line:#e8e8e8; --elev: 0 6px 24px rgba(0,0,0,.06); }
:root.dark { --bg:#0b0b0b; --fg:#f3f3f3; --muted:#b5b5b5; --card:#141414; --line:#1f1f1f; --elev: 0 8px 30px rgba(0,0,0,.35); }

#bgPlayer, #bgPlayer iframe { position: fixed; width: 0; height: 0; opacity: 0; pointer-events: none; }

* { box-sizing: border-box; }
html,body { margin:0; padding:0; background:var(--bg); color:var(--fg); font-family:"Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
img { max-width:100%; height:auto; }

.site-header { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid var(--line); background:var(--bg); }
.brand { display:flex; align-items:center; gap:.75rem; }
.brand-mark { width:28px; height:28px; border:2px solid var(--fg); border-radius:6px; transform: rotate(45deg); transition: transform .2s ease; }
.site-header:hover .brand-mark { transform: rotate(40deg) scale(1.02); }
.title { font-size:1.2rem; margin:0; line-height:1; font-weight:800; letter-spacing:.2px; }
.subtitle { margin:.15rem 0 0; font-size:.78rem; color:var(--muted); }

.actions { display:flex; gap:.5rem; }
.btn { appearance:none; border:1px solid var(--line); background:transparent; color:var(--fg); padding:.5rem .7rem; border-radius:.6rem; font-weight:600; }
.btn:active { transform: scale(0.98); }
.btn-ghost { border:none; color:var(--muted); }

.toc { display:flex; gap:.5rem; overflow-x:auto; padding:.5rem 1rem; border-bottom:1px solid var(--line); scroll-snap-type: x mandatory; }
.toc-chip { flex:0 0 auto; scroll-snap-align:start; border:1px solid var(--line); padding:.45rem .7rem; border-radius:999px; text-decoration:none; color:var(--fg); white-space:nowrap; font-size:.85rem; }
.toc-chip:focus-visible { outline:2px solid var(--fg); outline-offset:2px; }

.search-wrap { display:flex; gap:.5rem; padding:1rem; align-items:center; position:sticky; top:60px; background:var(--bg); z-index:5; border-bottom:1px solid var(--line); }
.search { flex:1; padding:.75rem .9rem; border-radius:.6rem; border:1px solid var(--line); background:var(--card); color:var(--fg); }

.content { padding:1rem; max-width:900px; margin:0 auto; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1rem; margin:1rem 0; box-shadow: var(--elev); }
.card h2 { margin-top:0; font-size:1.25rem; }
.card blockquote { margin: .5rem 0; padding:.5rem .75rem; border-left:3px solid var(--fg); color:var(--muted); }

.grid { margin:1.5rem 0; }
.grid h2 { margin:0 0 .75rem; }
.grid-cards { display:grid; grid-template-columns: 1fr; gap:.75rem; }
@media (min-width:640px){ .grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width:900px){ .grid-cards { grid-template-columns: repeat(3, 1fr); } }

.card-item { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:.9rem; transition: transform .1s ease, border-color .2s ease; display:flex; gap:.75rem; align-items:flex-start; }
.card-item:hover { transform: translateY(-1px); border-color: var(--fg); }
/* thumbnail */
.thumb-wrap { flex:0 0 72px; border-radius:8px; overflow:hidden; background:linear-gradient(180deg, rgba(0,0,0,0.03), transparent); }
.thumb { width:72px; height:72px; object-fit:cover; display:block; }
/* ensure small screens stack nicely */
@media (max-width:640px){ .card-item { flex-direction:row; } }

.timeline { margin:1.5rem 0; }
.timeline-list { list-style:none; margin:0; padding:0; border-left:2px solid var(--line); }
.timeline-list li { position:relative; margin:0; padding: .75rem 0 .75rem 1rem; }
.timeline-list li::before { content:""; position:absolute; left:-6px; top:1.1rem; width:10px; height:10px; background:var(--fg); border-radius:50%; }
.time { font-weight:700; font-size:.9rem; }
.event { margin:.25rem 0 0; color:var(--muted); }

.gloss { display:grid; grid-template-columns: 1fr; gap:.75rem; }
.gloss dt { font-weight:700; }
.gloss dd { margin:0; color:var(--muted); }

.to-top { position:fixed; right:12px; bottom:12px; padding:.6rem .7rem; border-radius:.6rem; border:1px solid var(--line); background:var(--bg); color:var(--fg); box-shadow:var(--elev); opacity:0; pointer-events:none; transition: opacity .2s ease, transform .2s ease; }
.to-top.show { opacity:1; pointer-events:auto; transform: translateY(0); }

.site-footer { padding:2rem 1rem; color:var(--muted); text-align:center; border-top:1px solid var(--line); }

.hidden { display:none !important; }
mark { background: transparent; color: inherit; border-bottom: 2px dotted var(--fg); }