:root{
  --bg:#0a0908; --panel:#151210; --panel2:#1d1915; --line:#2e2820;
  --text:#f5efe0; --muted:#b9ac93; --gold:#e3b93e; --gold2:#f5d67a;
  --red:#e11d48; --red2:#fb4d6d; --lyric-scale:1;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Manrope,system-ui,sans-serif;font-size:16px;line-height:1.55}
h1,h2,h3{font-family:Unbounded,Manrope,sans-serif;line-height:1.08;margin:0}
h2{font-size:clamp(26px,4vw,40px);font-weight:900}
a{color:var(--gold2)}
button,input,select,textarea{font:inherit;color:inherit}

.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:12px 20px;background:rgba(10,9,8,.92);border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-family:Unbounded,sans-serif;font-size:15px}
.brand b{color:var(--gold)}
.topbar nav{display:flex;gap:18px;flex-wrap:wrap}
.topbar nav a{color:var(--muted);text-decoration:none;font-weight:600;font-size:14px}
.topbar nav a:hover{color:var(--gold2)}

.hero{position:relative;padding:72px 20px 0;overflow:hidden;
  background:
    radial-gradient(900px 420px at 18% -10%, rgba(227,185,62,.20), transparent 60%),
    radial-gradient(700px 380px at 88% 0%, rgba(225,29,72,.16), transparent 60%),
    var(--bg)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(245,214,122,.35) 1px, transparent 1.6px);background-size:34px 34px;
  mask-image:linear-gradient(180deg,black,transparent 72%)}
.hero-inner{position:relative;z-index:1;max-width:1080px;margin:0 auto}
.hero-tag{color:var(--gold2);font-weight:700;letter-spacing:.04em;margin:0 0 14px}
.hero h1{font-size:clamp(44px,9vw,104px);font-weight:900;text-transform:uppercase}
.hero-sub{max-width:640px;color:var(--muted);font-size:18px;margin:18px 0 26px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;padding-bottom:54px}

.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel2);
  padding:12px 20px;border-radius:6px;font-weight:800;cursor:pointer;text-decoration:none;color:var(--text)}
.btn:hover{border-color:var(--gold)}
.btn-gold{background:var(--gold);border-color:var(--gold);color:#171204}
.btn-gold:hover{background:var(--gold2)}
.btn-ghost{background:transparent}
.btn-small{padding:7px 12px;font-size:13px}
.btn-play{min-width:132px;justify-content:center}

.marquee{border-block:1px solid var(--line);background:#100e0b;overflow:hidden;padding:10px 0}
.marquee-track{display:flex;gap:0;width:max-content;animation:scroll 30s linear infinite;white-space:nowrap;
  font-family:Unbounded,sans-serif;font-size:13px;color:var(--muted)}
.marquee-track span{padding:0 18px}
.marquee-track b{color:var(--gold)}
@keyframes scroll{to{transform:translateX(-50%)}}

section{padding:56px 20px}
.stage,.tracks,.add,.how{max-width:1180px;margin:0 auto}
.stage-head,.lyrics-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.stage-head p{color:var(--gold2);font-weight:700}
.section-sub{color:var(--muted);max-width:720px}

.stage-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr);gap:20px;margin-top:22px}
@media (max-width:900px){.stage-grid{grid-template-columns:1fr}}
.screen{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.screen.has-video video{display:block}
.screen.has-video .demo-stage{display:none}
.demo-stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:radial-gradient(600px 300px at 50% 110%, rgba(225,29,72,.28), transparent 65%),#14100c}
.spot{position:absolute;top:-12%;width:180px;height:130%;opacity:.34;filter:blur(2px);transform-origin:top center;
  background:linear-gradient(180deg,rgba(245,214,122,.9),transparent 75%);clip-path:polygon(42% 0,58% 0,100% 100%,0 100%)}
.spot-a{left:6%;transform:rotate(16deg)} .spot-b{left:42%} .spot-c{right:6%;transform:rotate(-16deg)}
.screen.playing .spot-a{animation:sway 3.2s ease-in-out infinite alternate}
.screen.playing .spot-c{animation:sway 3.8s ease-in-out infinite alternate-reverse}
@keyframes sway{from{transform:rotate(8deg)}to{transform:rotate(24deg)}}
.demo-silhouette{font-size:84px;position:relative;z-index:1}
.demo-caption{position:relative;z-index:1;text-align:center;color:var(--muted);font-family:Unbounded,sans-serif;font-size:13px;margin:0}
.screen-lyrics{position:absolute;left:0;right:0;bottom:0;padding:14px 18px 16px;text-align:center;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.78) 42%)}
.screen-lyrics p{margin:2px 0}
.line-prev,.line-next{color:rgba(245,239,224,.5);font-size:calc(15px * var(--lyric-scale));font-weight:600;min-height:1.3em}
.line-current{position:relative;font-family:Unbounded,sans-serif;font-weight:700;font-size:calc(24px * var(--lyric-scale));min-height:1.35em}
#lineCurrentFill{position:absolute;inset:auto 0 0 0;margin:auto;width:fit-content;max-width:100%;color:var(--gold);
  overflow:hidden;white-space:nowrap;text-overflow:clip;clip-path:inset(0 100% 0 0)}
#lineCurrent{color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.8)}

.controls{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.controls input[type=range]{flex:1;min-width:140px;accent-color:var(--gold)}
.controls-2 label{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px;font-weight:600}
.controls select{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:6px 8px}
.time{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:700}
.mic-meter{width:120px;height:10px;background:var(--panel2);border:1px solid var(--line);border-radius:99px;overflow:hidden}
.mic-meter div{height:100%;width:0;background:var(--red2);transition:width .06s}

.lyrics-panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:18px}
.lyrics-actions{display:flex;gap:8px;flex-wrap:wrap}
.lyrics-list{list-style:none;margin:14px 0 0;padding:0;max-height:420px;overflow:auto}
.lyrics-list li{padding:8px 10px;border-radius:6px;cursor:pointer;color:var(--muted);font-weight:600}
.lyrics-list li:hover{color:var(--text);background:var(--panel2)}
.lyrics-list li.active{color:#171204;background:var(--gold);font-weight:800}
.lyrics-list li .lt{display:inline-block;min-width:52px;font-size:12px;opacity:.75;font-variant-numeric:tabular-nums}
.hint{color:var(--muted);font-size:13px}

.track-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-top:22px}
.track{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:18px;display:flex;flex-direction:column;gap:8px}
.track h3{font-size:17px;font-weight:700}
.track p{color:var(--muted);font-size:14px;margin:0;flex:1}
.track .badge{align-self:flex-start;font-size:12px;font-weight:800;padding:3px 9px;border-radius:99px;border:1px solid var(--line);color:var(--gold2)}
.track .badge.ready{color:#171204;background:var(--gold);border-color:var(--gold)}
.track .row{display:flex;gap:8px;flex-wrap:wrap}

.add-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:20px;margin-top:22px}
@media (max-width:900px){.add-grid{grid-template-columns:1fr}}
.dropzone{border:2px dashed var(--line);border-radius:8px;padding:28px;text-align:center;background:var(--panel)}
.dropzone.drag{border-color:var(--gold)}
.dz-title{font-family:Unbounded,sans-serif;font-weight:700;font-size:19px;margin:0 0 8px}
.dz-sub{color:var(--muted)}
.dz-file{color:var(--gold2);font-weight:700}
.add-form{display:flex;flex-direction:column;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:20px}
.add-form label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:14px}
.add-form input,.add-form textarea{background:#0e0c0a;border:1px solid var(--line);border-radius:6px;padding:10px 12px}
.add-form input:focus,.add-form textarea:focus{outline:2px solid var(--gold);outline-offset:0}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:22px}
.step{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:20px}
.step-n{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--red);color:#fff;
  font-family:Unbounded,sans-serif;font-weight:900;margin-bottom:12px}
.step h3{font-size:16px;margin-bottom:8px}
.step p{color:var(--muted);margin:0}

footer{border-top:1px solid var(--line);padding:28px 20px 40px;max-width:1180px;margin:0 auto;color:var(--muted)}
.foot-small{font-size:13px}

@media (prefers-reduced-motion:reduce){
  .marquee-track,.screen.playing .spot-a,.screen.playing .spot-c{animation:none}
  html{scroll-behavior:auto}
}