@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Patrick+Hand&display=swap');
* { box-sizing: border-box; }
:root { color-scheme: dark; --bg:#08091b; --panel:#101229; --ink:#f4f0ff; --muted:#c3bddb; --line:#7770bd; --purple:#a68aff; --pink:#fa62c7; --blue:#55c9ff; --gold:#ffc85d; }
body { margin:0; min-height:100vh; color:var(--ink); background-color:var(--bg); background-image:linear-gradient(rgba(8,9,27,.78),rgba(8,9,27,.9)),url('../images/background-texture.png'); background-position:center top; background-repeat:repeat; font:16px/1.6 'Atkinson Hyperlegible','Trebuchet MS',sans-serif; }
a { color:inherit; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.shell { width:calc(100% - 30px); max-width:1240px; margin:auto; }
.topline { min-height:34px; display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--muted); font-size:.83rem; }
.topline p { margin:0; }.sparkle { color:var(--purple); letter-spacing:.28em; }
.masthead { min-height:185px; display:flex; align-items:center; justify-content:space-between; position:relative; overflow:hidden; padding:26px clamp(20px,5vw,58px); border:1px solid var(--purple); border-radius:14px 14px 0 0; background:radial-gradient(ellipse at 80% 20%,rgba(250,98,199,.16),transparent 38%),linear-gradient(120deg,#19183c,#0c0d22 75%); box-shadow:0 0 24px rgba(137,93,255,.12),inset 0 0 22px rgba(137,93,255,.06); }
.masthead h1 { margin:0; color:#d4b4ff; font:clamp(2.4rem,6vw,4.3rem)/1.05 'Patrick Hand','Trebuchet MS',sans-serif; letter-spacing:.02em; }.masthead h1 span { color:var(--pink); font-size:.65em; }
.masthead p { margin:.5em 0 0; color:var(--muted); }.masthead .eyebrow { margin:0 0 6px; color:var(--blue); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; }
.doodle { color:var(--purple); font:3.4rem/1.2 'Patrick Hand',cursive; text-align:center; transform:rotate(9deg); text-shadow:0 0 18px #a68aff55; }
.nav { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:7px; padding:9px; border:1px solid var(--line); border-top:0; border-radius:0 0 13px 13px; background:rgba(18,19,44,.98); }
.nav a,.control-button,.language-menu button { min-height:36px; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:6px 11px; border:1px solid transparent; border-radius:8px; color:var(--muted); background:transparent; text-decoration:none; cursor:pointer; font:inherit; }
.nav a:hover,.control-button:hover,.language-menu button:hover { border-color:var(--line); color:var(--ink); background:rgba(166,138,255,.11); }.nav a[aria-current="page"] { color:#e0caff; border-color:var(--purple); background:rgba(166,138,255,.12); }
.nav-tools { display:flex; align-items:center; gap:4px; margin-left:auto; }.language-picker { position:relative; }.language-toggle { width:38px; min-height:36px; border:1px solid transparent; border-radius:8px; color:var(--muted); background:none; cursor:pointer; }.language-toggle svg { width:20px; height:20px; vertical-align:middle; }
.language-menu { position:absolute; z-index:5; top:calc(100% + 7px); right:0; width:145px; padding:6px; border:1px solid var(--line); border-radius:10px; background:#101229; box-shadow:0 10px 24px #0008; }.language-menu[hidden] { display:none; }.language-menu button { width:100%; justify-content:flex-start; }.language-menu button[aria-pressed="true"] { color:var(--gold); }
main { padding:18px 0 24px; }.crumbs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; color:var(--muted); font-size:.9rem; }.crumbs a { text-decoration-color:var(--purple); }
.panel { border:1px solid rgba(119,112,189,.8); border-radius:12px; background:rgba(16,18,41,.95); box-shadow:inset 0 0 22px rgba(137,93,255,.035); }
.eyebrow { margin:0 0 3px; color:var(--blue); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; }
.intro { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 24px; margin-bottom:15px; background:repeating-linear-gradient(0deg,transparent 0 33px,rgba(166,138,255,.035) 33px 34px),rgba(16,18,41,.96); }.intro h2 { margin:0; color:#d4b4ff; font:1.8rem/1.15 'Patrick Hand',cursive; }.intro p:not(.eyebrow) { max-width:720px; margin:8px 0 0; color:var(--muted); }.external-link,.reset-button { flex-shrink:0; padding:9px 13px; border:1px dashed var(--purple); border-radius:7px; color:#e4d6ff; background:rgba(166,138,255,.08); text-decoration:none; cursor:pointer; font:inherit; }.external-link:hover,.reset-button:hover { background:rgba(166,138,255,.2); }
.collection-layout { display:grid; grid-template-columns:230px minmax(0,1fr); align-items:start; gap:15px; }.filter-panel { position:sticky; top:14px; display:grid; gap:9px; padding:15px; }.filter-panel h2,.section-title h2 { margin:0; color:var(--purple); font:1.5rem 'Patrick Hand',cursive; }.filter-panel fieldset { display:grid; gap:6px; padding:9px 10px; border:1px dashed var(--line); border-radius:8px; }.filter-panel legend,.filter-label { color:var(--muted); font-size:.87rem; }.filter-panel fieldset label { display:flex; align-items:center; gap:7px; color:var(--ink); font-size:.92rem; }.filter-panel input[type="checkbox"] { accent-color:var(--purple); }.filter-panel input[type="search"],.filter-panel input[type="number"],.filter-panel select { width:100%; min-height:40px; padding:7px 10px; border:1px solid var(--line); border-radius:7px; color:var(--ink); background:#090b20; font:inherit; }.filter-label { margin-bottom:-7px; }.filter-count { margin:0; color:var(--gold); text-align:center; font-size:.9rem; }
.collection { min-width:0; }.section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 3px 9px; border-bottom:1px dashed var(--line); }.section-title span { color:var(--pink); font-size:.83rem; letter-spacing:.12em; }
.release-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px 14px; padding:16px 3px; }.release-card { min-width:0; color:inherit; text-align:center; text-decoration:none; outline:none; }.case { position:relative; aspect-ratio:1/1; padding:7px; border:1px solid rgba(210,190,255,.83); border-radius:5px; background:linear-gradient(125deg,rgba(255,255,255,.2),transparent 13% 75%,rgba(255,255,255,.11)),linear-gradient(135deg,#27243f,#121322 58%,#29243c); box-shadow:3px 5px 10px #0009,inset 0 0 0 3px rgba(255,255,255,.07),inset 0 0 0 5px rgba(0,0,0,.35); transition:transform .22s ease,box-shadow .22s ease; transform-origin:center; }.case::before { content:''; position:absolute; z-index:2; inset:4px; border:1px solid rgba(255,255,255,.23); border-radius:3px; pointer-events:none; }.case::after { content:''; position:absolute; z-index:2; top:8px; right:9px; bottom:8px; width:7px; border-left:1px solid #fff4; border-right:1px solid #0008; background:linear-gradient(90deg,#fff1,#0002,#fff2); }.case-art { display:grid; place-items:center; width:100%; height:100%; overflow:hidden; border-radius:2px; background:radial-gradient(circle at 70% 20%,var(--art-glow,#a68aff55),transparent 40%),linear-gradient(145deg,var(--art-base,#292047),#08091b 76%); color:#f4f0ff; }.case-art img { display:block; width:100%; height:100%; object-fit:cover; }.case-art img[hidden] { display:none; }.case-fallback { padding:8px; font:1.4rem/1.1 'Patrick Hand',cursive; text-shadow:0 2px 8px #000; }.case-fallback small { display:block; margin-top:8px; color:#e5d3ff; font: .7rem/1.2 'Atkinson Hyperlegible',sans-serif; letter-spacing:.12em; text-transform:uppercase; }.release-card:hover .case,.release-card:focus-visible .case { box-shadow:0 8px 22px #000b,0 0 18px color-mix(in srgb,var(--art-glow,#a68aff) 50%,transparent),inset 0 0 0 3px rgba(255,255,255,.12); animation:case-rock .58s ease-in-out 2 alternate; }.release-card h3 { margin:9px 0 1px; color:#e1c6ff; font:1.18rem/1.12 'Patrick Hand',cursive; }.release-type { color:var(--muted); font-size:.8rem; }.release-year { display:inline-block; margin-top:4px; color:var(--blue); font: .78rem 'Atkinson Hyperlegible',sans-serif; }
@keyframes case-rock { from { transform:rotate(-2deg) translateY(-2px); } to { transform:rotate(2deg) translateY(-4px); } }
.empty-state { padding:24px; border:1px dashed var(--line); border-radius:9px; color:var(--muted); text-align:center; }.note { display:flex; gap:12px; align-items:baseline; margin-top:5px; padding:12px 15px; }.note strong { flex-shrink:0; color:var(--gold); }.note p { margin:0; color:var(--muted); font-size:.9rem; }
.detail-layout { display:grid; grid-template-columns:minmax(220px,330px) minmax(0,1fr); gap:20px; padding:22px; }.detail-cover { position:sticky; top:16px; align-self:start; }.detail-cover .case { width:100%; }.detail-copy h1 { margin:0 0 6px; color:#d4b4ff; font:clamp(2.3rem,5vw,3.5rem)/1.05 'Patrick Hand',cursive; }.detail-copy .metadata { display:flex; flex-wrap:wrap; gap:7px; margin:13px 0 17px; }.tag { padding:3px 9px; border:1px solid var(--line); border-radius:99px; color:var(--muted); font-size:.82rem; }.detail-copy h2 { margin:24px 0 8px; color:var(--blue); font:1.55rem 'Patrick Hand',cursive; }.artist-note,.credits,.lyrics-note { padding:13px 15px; border-left:3px solid var(--purple); background:rgba(166,138,255,.07); color:var(--muted); }.tracklist { width:100%; border-collapse:collapse; }.tracklist th,.tracklist td { padding:8px 10px; border-bottom:1px solid rgba(119,112,189,.35); text-align:left; }.tracklist th { color:var(--gold); font-size:.86rem; }.tracklist td:first-child { width:44px; color:var(--muted); }.tracklist a { color:var(--ink); text-decoration-color:var(--purple); }.credits ul { margin:0; padding-left:20px; }.detail-back { display:inline-flex; margin-top:20px; padding:8px 12px; border:1px solid var(--line); border-radius:7px; color:var(--muted); text-decoration:none; }.detail-back:hover { border-color:var(--gold); color:var(--ink); }
.song-navigation { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.song-tools { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }.song-tools button { padding:7px 10px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:#15152f; font:inherit; cursor:pointer; }.lyrics-panel { padding:20px; border:1px solid rgba(119,112,189,.7); border-radius:10px; background:#0b0d21; font-size:1.08rem; line-height:1.9; }.lyrics-panel p { margin:0; }.lyrics-panel.no-highlights mark { color:inherit; background:transparent; }.annotation-list { display:grid; gap:8px; margin-top:12px; }.annotation-item { padding:10px 12px; border:1px solid rgba(119,112,189,.5); border-radius:7px; color:var(--muted); }.annotation-item strong { display:block; color:var(--pink); }
footer { display:flex; justify-content:space-between; gap:15px; padding:14px 3px 20px; color:var(--muted); font-size:.83rem; }footer a { text-decoration:underline; }
html.theme-secret body { background-color:#030303; background-image:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.35)),url('../images/easter-egg-background.png'); color:#f3f1f1; }html.theme-secret .masthead,html.theme-secret .nav,html.theme-secret .panel,html.theme-secret .case { background-color:rgba(0,0,0,.9); border-color:#51464b; }html.theme-secret .sparkle,html.theme-secret h1,html.theme-secret .detail-copy h1 { color:#0784ff; }
@media(max-width:900px) { .collection-layout { grid-template-columns:200px minmax(0,1fr); }.release-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:650px) { .shell { width:calc(100% - 20px); }.topline { align-items:flex-start; padding:6px 2px; }.masthead { min-height:150px; padding:21px; }.nav-tools { margin-left:0; }.intro { align-items:flex-start; flex-direction:column; gap:14px; }.collection-layout { grid-template-columns:1fr; }.filter-panel { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); }.filter-panel h2,.filter-panel fieldset,.filter-count,.reset-button { grid-column:1/-1; }.filter-panel fieldset { grid-template-columns:repeat(2,1fr); }.release-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px; }.detail-layout { grid-template-columns:1fr; padding:15px; }.detail-cover { position:static; width:min(100%,330px); margin:auto; }.note { align-items:flex-start; flex-direction:column; gap:4px; }footer { flex-direction:column; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }