:root{--bg:#fff;--text:#1a1a1a;--accent:#555;--secondary:#666;--border:#eee;--btn-bg:#1a1a1a;--btn-text:#fff;--po:.12;--tr:.3s ease;--lines:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 900' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%231a1a1a'%3E%3Cpolyline points='0,100 200,150 400,50 800,200 1200,0' stroke-width='1.5'/%3E%3Cpolyline points='1200,800 900,600 600,900 200,700 0,850' stroke-width='1.5'/%3E%3Cline x1='10%25' y1='0' x2='90%25' y2='100%25' stroke-width='1'/%3E%3Cline x1='85%25' y1='0' x2='15%25' y2='100%25' stroke-width='1'/%3E%3Cpolyline points='100,400 150,450 120,500 200,550' stroke-width='2'/%3E%3Cpolyline points='1000,300 1050,250 1100,350' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E")}
[data-theme="dark"]{--bg:#0a0a0a;--text:#e0e0e0;--accent:#aaa;--secondary:#888;--border:#222;--btn-bg:#fff;--btn-text:#0a0a0a;--po:.2;--lines:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 900' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23e0e0e0'%3E%3Cpolyline points='0,100 200,150 400,50 800,200 1200,0' stroke-width='1.5'/%3E%3Cpolyline points='1200,800 900,600 600,900 200,700 0,850' stroke-width='1.5'/%3E%3Cline x1='10%25' y1='0' x2='90%25' y2='100%25' stroke-width='1'/%3E%3Cline x1='85%25' y1='0' x2='15%25' y2='100%25' stroke-width='1'/%3E%3Cpolyline points='100,400 150,450 120,500 200,550' stroke-width='2'/%3E%3Cpolyline points='1000,300 1050,250 1100,350' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E")}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.6;transition:background var(--tr),color var(--tr);overflow-x:hidden;position:relative}
.bg-overlay{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--po);background-image:var(--lines),linear-gradient(135deg,var(--text) 1px,transparent 1px),linear-gradient(45deg,var(--text) 1px,transparent 1px);background-size:100% 100%,60px 60px,60px 60px}
.lyrics-font{font-family:Georgia,"Times New Roman",serif}
header{position:sticky;top:0;z-index:100;background:var(--bg);border-bottom:1px solid var(--border);padding:1rem 5%;display:flex;justify-content:space-between;align-items:center;transition:background var(--tr),border-color var(--tr)}
.logo-block{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.logo-img{height:40px;width:40px;object-fit:contain}
.group-name{font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:1.1rem}
.nav-controls{display:flex;align-items:center;gap:20px}
.theme-toggle{background:none;border:none;cursor:pointer;color:var(--text);display:flex;align-items:center;justify-content:center;padding:5px;transition:opacity .2s}
.theme-toggle:hover{opacity:.7}
.theme-toggle svg{width:24px;height:24px;fill:currentColor}
.tg-link{background:var(--btn-bg);color:var(--btn-text);padding:8px 16px;border-radius:20px;text-decoration:none;font-size:.9rem;font-weight:500;transition:transform .2s}
.tg-link:hover{transform:translateY(-2px)}
main{max-width:1100px;margin:0 auto;padding:60px 20px}
.hero{text-align:center;margin-bottom:80px}
.main-title{font-size:clamp(2.5rem,8vw,4.5rem);font-weight:800;text-transform:uppercase;letter-spacing:-2px;line-height:.9;margin-bottom:20px}
.content-wrap{display:flex;align-items:flex-start;gap:32px}
.song-nav{position:sticky;top:96px;flex:0 0 200px;display:flex;flex-direction:column;gap:8px}
.song-nav-btn{display:flex;align-items:center;gap:8px;width:100%;padding:10px 14px;background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:inherit;font-size:.95rem;text-align:left;cursor:pointer;transition:border-color var(--tr),background var(--tr),color var(--tr)}
.song-nav-btn:hover{border-color:var(--text);background:var(--text);color:var(--bg)}
.song-nav-btn.active{background:var(--btn-bg);color:var(--btn-text);border-color:var(--btn-bg)}
.song-nav-short{display:none}
.lyrics-section{flex:1;min-width:0;margin-bottom:120px}
.song-card{margin-bottom:20px;scroll-margin-top:88px}
.song-title{font-size:2.2rem;margin-bottom:30px;font-weight:300;letter-spacing:-1px;border-left:3px solid var(--text);padding-left:20px}
.lyrics-content{font-size:1.15rem;color:var(--text);max-width:600px;margin-left:23px}
.section-text{white-space:pre-wrap;word-wrap:break-word}
.section-label{font:400 .75rem/1.6 sans-serif;text-transform:uppercase;letter-spacing:2px;color:var(--secondary);display:block;margin:10px 0 5px;opacity:.8}
.section-label:first-child{margin-top:0}
.divider{height:1px;background:var(--border);margin:20px 0}
footer{padding:80px 20px;text-align:center;border-top:1px solid var(--border);background:var(--bg)}
.footer-logo{width:120px;margin-bottom:30px;opacity:.8}
.copyright{font-size:.8rem;color:var(--secondary);margin-top:40px}
.logo-light{display:block}
.logo-dark{display:none}
[data-theme="dark"] .logo-light{display:none}
[data-theme="dark"] .logo-dark{display:block}
[data-theme="dark"] .sun-icon{display:block}
[data-theme="dark"] .moon-icon{display:none}
.sun-icon{display:none}
.moon-icon{display:block}
@media(max-width:768px){.content-wrap{gap:12px}.song-nav{flex:0 0 52px;top:84px}.song-nav-btn{justify-content:center;padding:10px 6px;font-size:.8rem;text-align:center}.song-nav-full{display:none}.song-nav-short{display:inline}}
@media(max-width:600px){.group-name{display:none}.song-title{font-size:1.8rem}.lyrics-content{font-size:1.05rem;margin-left:15px}.hero{margin-bottom:60px}.main-title{letter-spacing:-1px}}