
:root{color-scheme:dark;--text:#eae8e7;--muted:#b0b8c6;--line:#6571857c;--accent:#dfbfa8}*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background-color:#0a0c14;background-image:linear-gradient(90deg,#070914b8,#0e1026bd,#070914b8),url("assets/background.webp");background-position:center;background-size:cover;background-repeat:no-repeat;background-attachment:fixed;color:var(--text);font:17px/1.68 Georgia,'Times New Roman',serif}
a{color:inherit}.wrap{max-width:1140px;margin:auto;width:calc(100% - 52px)}
nav{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:23px 0;border-bottom:1px solid var(--line)}
nav a{text-decoration:none;font:12px Arial,sans-serif;text-transform:uppercase;letter-spacing:.14em}
nav .right{display:flex;gap:22px;flex-wrap:wrap}.small{font:12px/1.4 Arial,sans-serif;text-transform:uppercase;letter-spacing:.18em;color:var(--accent)}
.hero{display:grid;grid-template-columns:minmax(200px,.8fr) 1.2fr;gap:65px;align-items:center;padding:60px 0 70px}
.hero img{display:block;width:100%;max-width:400px;box-shadow:0 18px 74px #0008}.hero h1{font-size:clamp(48px,6vw,87px);line-height:1.08;font-weight:400;margin:16px 0 22px}.hero p{font-size:20px;color:#cbd1de}
.button{display:inline-block;border:1px solid #a9aabb99;background:#29314377;text-decoration:none;padding:12px 19px;margin:12px 10px 0 0;font:12px Arial,sans-serif;text-transform:uppercase;letter-spacing:.08em}.button:hover{background:#37455d}
h2{font-size:clamp(32px,4vw,47px);font-weight:400;margin:6px 0 22px;line-height:1.14}.section{padding:55px 0;border-top:1px solid var(--line)}
.intro{max-width:870px;font-size:19px;line-height:1.87;color:#d0d6df}.intro p{margin:0 0 19px}
.tracks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.track{background:#121a29e8;border:1px solid var(--line);padding:23px;min-width:0}.track h3{font-size:25px;font-weight:400;margin:7px 0}.track p{color:var(--muted);font:14px/1.6 Arial,sans-serif}.track audio{width:100%;margin:15px 0 0}.track.is-playing{border-color:var(--accent)}
.lyric-panel{border:1px solid var(--line);background:#111a2be8;margin:0 0 12px}
.lyric-panel>summary{display:flex;align-items:center;gap:22px;padding:19px 25px;list-style:none;cursor:pointer;min-height:85px}
.lyric-panel>summary::-webkit-details-marker{display:none}
.lyric-panel>summary:hover{background:#263149aa}
.lyric-panel[open]>summary{border-bottom:1px solid var(--line)}
.panel-index{font:14px Arial,sans-serif;letter-spacing:.1em;color:var(--accent)}
.panel-label{flex:1;min-width:0}.panel-label strong{display:block;font-size:22px;font-weight:400;line-height:1.25}
.panel-label small{font:13px/1.5 Arial,sans-serif;color:var(--muted);display:block;margin-top:4px}
.panel-chevron{font-size:26px;line-height:1;color:var(--accent);transition:transform .2s}
.lyric-panel[open] .panel-chevron{transform:rotate(180deg)}
.panel-body{padding:30px;display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr);gap:42px}
.panel-body .about{font-size:17px;line-height:1.85;color:#cbd4dd}
@media(max-width:750px){.panel-body{grid-template-columns:1fr;padding:22px;gap:12px}.lyric-panel>summary{padding:17px;gap:13px}}

.entry h3{font-size:clamp(29px,3vw,43px);font-weight:400;margin:12px 0 20px}.entry .about{color:#cbd4dd;font-size:18px}.lyrics{background:#0a1020da;border:1px solid var(--line);padding:28px 35px;color:#e2e3e8;white-space:pre-line;font:17px/1.9 Georgia,serif}
footer{text-align:center;color:var(--muted);padding:35px;border-top:1px solid var(--line);font:12px Arial,sans-serif}
@media(max-width:750px){.hero,.entry{grid-template-columns:1fr;gap:23px}.hero img{max-width:310px;margin:auto}.tracks{grid-template-columns:1fr}nav{align-items:flex-start;flex-direction:column}.entry{padding:35px 0}}
