:root { color-scheme:light; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#302c38; background:#faf9fc; }
* { box-sizing:border-box; letter-spacing:0; }
body { margin:0; min-height:100dvh; display:flex; flex-direction:column; }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:3px solid #925ca4; outline-offset:5px; }
.site-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; min-height:84px; padding:20px 32px; background:#fff; border-bottom:1px solid #e6e1e9; }
h1 { margin:0; font:600 29px Georgia,"Times New Roman",serif; }
nav { display:flex; align-items:center; flex-wrap:wrap; gap:28px; font-size:14px; }
nav a { display:inline-flex; min-height:40px; align-items:center; position:relative; white-space:nowrap; }
nav [aria-current] { color:#88519c; }
nav [aria-current]::after { position:absolute; content:""; bottom:0; left:0; right:0; height:2px; background:#88519c; border-right:14px solid #78b9bd; }
nav .score-link { padding:0 18px; border:1px solid #dcd2e4; border-radius:6px; color:#74478a; }
main { width:min(1280px,100%); margin:0 auto; padding:40px 40px 28px; flex:1; }
.intro { text-align:center; margin-bottom:30px; }
.eyebrow { font-size:11px; color:#8c8396; margin:0 0 12px; }
h2 { font:500 30px Georgia,"Songti SC",serif; margin:0; line-height:1.5; }
.portals { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.portal { display:flex; flex-direction:column; min-width:0; border:1px solid #ded6e6; border-radius:8px; overflow:hidden; background:#fff; box-shadow:0 10px 28px #44354d08; transition:transform .25s,border-color .25s,box-shadow .25s; }
.portal:hover { transform:translateY(-4px); border-color:#a68ab9; box-shadow:0 16px 30px #44354d12; }
.album { border-color:#e7d5dc; }.album:hover { border-color:#ca8ba2; }
.cover { aspect-ratio:16/11; overflow:hidden; background:#e8e2ed; }
.cover img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 48%; transition:transform .6s; }
.portal:hover img { transform:scale(1.025); }
.album .cover { background:#faedf0; }
.saga .cover { background:#dce6ef; }
.saga .cover img { object-fit:contain; object-position:center; }
.album .cover img { object-fit:contain; object-position:center; }
.portal-content { display:flex; flex:1; flex-direction:column; align-items:flex-start; padding:24px; }
.chapter { display:flex; gap:8px; flex-wrap:wrap; font:10px ui-monospace,monospace; color:#877193; margin:0 0 12px; line-height:1.6; }
.album .chapter { color:#ac6c86; }
h3 { font:500 24px Georgia,"Songti SC",serif; margin:0 0 24px; line-height:1.5; overflow-wrap:anywhere; }
.enter { display:flex; justify-content:flex-end; align-items:center; gap:6px; width:100%; margin-top:auto; padding-top:16px; border-top:1px solid #ece5f0; color:#88519c; font-size:14px; }
.album .enter { color:#b06b89; border-color:#f0e0e5; }
svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
footer { text-align:center; padding:24px 20px max(24px,env(safe-area-inset-bottom)); color:#948a9b; font-size:12px; }
@media(min-width:1600px) { main { padding-top:60px; }.intro { margin-bottom:40px; } }
@media(max-width:1000px) { .site-header { padding:18px 24px; }nav { gap:18px; }main { padding:32px 24px 20px; }.portals { gap:20px; }h3 { font-size:21px; }.portal-content { padding:20px; } }
@media(max-width:700px) {
  .site-header { gap:12px; padding:20px; }h1 { font-size:26px; }nav { width:100%; gap:12px; justify-content:space-between; font-size:12px; }nav .score-link { padding:0 10px; }
  main { padding:28px 18px 8px; }.intro { margin-bottom:24px; }h2 { font-size:24px; }.eyebrow { font-size:10px; }
  .portals { grid-template-columns:minmax(0,1fr); gap:24px; }.cover { aspect-ratio:16/11; }.portal-content { padding:20px; }h3 { font-size:23px; margin-bottom:20px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; }.portal:hover,.portal:hover img { transform:none; } }