:root{
  --night:#07101d;--navy:#101f36;--navy2:#182b48;--cream:#f3e8c5;
  --paper:#fff8dc;--burg:#8f302d;--red:#b84536;--gold:#c69a3a;
  --gold2:#f3d078;--teal:#4f8580;--ink:#211c19;--muted:#b8aa86;
  --shadow:0 30px 90px rgba(0,0,0,.48);--radius:22px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--night)}
body{margin:0;background:
 radial-gradient(circle at 18% 12%,rgba(58,87,129,.24),transparent 34%),
 radial-gradient(circle at 86% 12%,rgba(143,48,45,.16),transparent 28%),
 linear-gradient(180deg,#0a1423 0,#07101d 58%,#050a12 100%);
 color:#fff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 min-height:100vh;overflow-x:hidden}
button,a{font:inherit}
button{cursor:pointer}
a{color:inherit}
.no-scroll{overflow:hidden}

.texture{position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.12;mix-blend-mode:soft-light;
 background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E")}

.topbar{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;
 padding:15px clamp(18px,4vw,58px);background:linear-gradient(180deg,rgba(6,13,24,.94),rgba(6,13,24,.58),transparent);
 backdrop-filter:blur(8px)}
.brand{display:flex;gap:12px;align-items:center;text-decoration:none;font-weight:900;letter-spacing:.08em}
.brand-mark{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--cream);
 background:radial-gradient(circle at 35% 30%,#f8d780 0 9%,var(--red) 10% 58%,#68201f 60%);
 border:2px solid var(--gold);box-shadow:0 0 0 5px rgba(198,154,58,.1),0 5px 18px #0008}
.brand small{display:block;color:var(--muted);font-size:10px;letter-spacing:.18em;margin-top:2px}
.top-actions{display:flex;align-items:center;gap:10px}
.ghost,.gold,.red,.icon-btn{border-radius:999px;border:1px solid rgba(243,208,120,.46);padding:10px 16px;font-weight:800}
.ghost{background:rgba(16,31,54,.56);color:#fff}
.gold{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#21170b;border-color:#ffe29a;box-shadow:0 8px 25px rgba(198,154,58,.2)}
.red{background:linear-gradient(180deg,#c95442,#923129);color:#fff;border-color:#e28774;box-shadow:0 8px 25px rgba(184,69,54,.22)}
.ghost:hover,.icon-btn:hover{background:rgba(243,232,197,.12)}
.gold:hover,.red:hover{transform:translateY(-1px);filter:brightness(1.05)}

.hero{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,580px);
 gap:clamp(36px,7vw,110px);align-items:center;padding:110px clamp(20px,7vw,110px) 70px;position:relative}
.hero-copy{max-width:720px}
.eyebrow{font-weight:900;color:var(--gold2);letter-spacing:.22em;font-size:12px;margin-bottom:18px}
h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(54px,8.2vw,118px);line-height:.88;margin:0 0 25px;
 letter-spacing:-.045em;text-wrap:balance;text-shadow:0 12px 40px #000b}
h1 span{display:block;color:var(--gold2);font-style:italic;font-size:.64em;letter-spacing:-.03em;margin-top:12px}
.hero-copy p{font-family:Georgia,"Times New Roman",serif;font-size:clamp(19px,2vw,28px);line-height:1.42;color:#e8dfc7;max-width:680px}
.hero-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-note{display:flex;gap:18px;flex-wrap:wrap;margin-top:28px;color:var(--muted);font-size:13px}
.hero-note span::before{content:"✦";color:var(--gold);margin-right:7px}

.cover-wrap{perspective:1400px;display:grid;place-items:center;position:relative}
.cover-glow{position:absolute;width:80%;height:80%;border-radius:50%;background:rgba(198,154,58,.18);filter:blur(70px)}
.cover-card{position:relative;width:min(76vw,430px);aspect-ratio:1273/1600;border-radius:8px;overflow:hidden;
 transform:rotateY(-7deg) rotateX(3deg) rotateZ(1deg);box-shadow:-18px 28px 0 #7e6430,0 42px 100px #000c;
 border:3px solid #e0bc61;animation:float 6s ease-in-out infinite}
.cover-card img{width:100%;height:100%;object-fit:cover;display:block}
.cover-card::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(255,255,255,.14),transparent 22%,transparent 72%,rgba(0,0,0,.22))}
.cover-badge{position:absolute;right:-24px;bottom:12%;z-index:3;width:118px;height:118px;border-radius:50%;display:grid;place-items:center;text-align:center;
 background:radial-gradient(circle at 36% 30%,#fff3b2 0 4%,#c85340 8% 57%,#77251e 60%);border:5px solid var(--gold);
 box-shadow:0 18px 36px #0009;color:#fff;font-weight:950;line-height:1.05;transform:rotate(9deg)}
@keyframes float{50%{transform:rotateY(-3deg) rotateX(1deg) rotateZ(-1deg) translateY(-12px)}}

.marquee{overflow:hidden;border-block:1px solid rgba(198,154,58,.35);background:#0e1d32}
.marquee-track{display:flex;width:max-content;gap:50px;padding:15px 0;animation:scroll 26s linear infinite;color:var(--gold2);
 font-weight:900;letter-spacing:.16em;font-size:12px}
.marquee-track span::after{content:"◆";margin-left:50px;color:var(--red)}
@keyframes scroll{to{transform:translateX(-50%)}}

.section{padding:100px clamp(20px,7vw,110px)}
.section-head{max-width:780px;margin-bottom:48px}
.kicker{color:var(--gold2);font-weight:900;letter-spacing:.2em;font-size:12px}
h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(38px,5vw,70px);line-height:1;margin:12px 0 18px}
.section-head p{color:#d6ccb2;font-size:18px;line-height:1.6}

.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature{position:relative;min-height:260px;border:1px solid rgba(198,154,58,.3);border-radius:var(--radius);padding:28px;
 background:linear-gradient(145deg,rgba(24,43,72,.82),rgba(9,18,32,.88));box-shadow:0 18px 55px rgba(0,0,0,.22);overflow:hidden}
.feature::after{content:"";position:absolute;width:130px;height:130px;border-radius:50%;right:-55px;bottom:-55px;border:18px solid rgba(198,154,58,.07)}
.feature-index{color:var(--gold2);font-weight:900;letter-spacing:.15em}
.feature h3{font-family:Georgia,"Times New Roman",serif;font-size:30px;margin:48px 0 12px}
.feature p{color:#cfc3a6;line-height:1.55}

.editions{background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(198,154,58,.035))}
.edition-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.edition{display:flex;flex-direction:column;border-radius:var(--radius);padding:28px;min-height:430px;border:1px solid rgba(198,154,58,.35);
 background:linear-gradient(180deg,rgba(23,42,70,.9),rgba(8,17,29,.94));position:relative;overflow:hidden}
.edition.featured{border-color:var(--gold2);transform:translateY(-10px);box-shadow:0 28px 80px rgba(198,154,58,.14)}
.ribbon{position:absolute;top:18px;right:-36px;transform:rotate(38deg);background:var(--gold);color:#21170b;font-weight:950;padding:7px 42px;font-size:11px}
.edition h3{font-family:Georgia,"Times New Roman",serif;font-size:31px;margin:18px 0 10px}
.price{font-size:15px;color:var(--gold2);font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.edition ul{padding:0;margin:28px 0;list-style:none;color:#d4c9ad;line-height:1.8}
.edition li::before{content:"✓";color:var(--gold2);margin-right:10px;font-weight:900}
.edition button{margin-top:auto;width:100%}

.footer{padding:48px clamp(20px,7vw,110px);display:flex;justify-content:space-between;gap:24px;align-items:center;
 color:#958a71;border-top:1px solid rgba(198,154,58,.18);font-size:13px}

/* Player */
.player-shell{position:fixed;inset:0;z-index:120;background:#050a12;display:none;grid-template-rows:auto 1fr auto}
.player-shell.open{display:grid}
.player-top{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:#0c192b;border-bottom:1px solid rgba(198,154,58,.35)}
.player-title{font-family:Georgia,"Times New Roman",serif;font-weight:900}
.player-title small{display:block;font:10px/1.2 ui-sans-serif,system-ui;color:var(--muted);letter-spacing:.16em;margin-top:3px}
.player-actions{display:flex;gap:8px}
.icon-btn{padding:8px 12px;background:#162a46;color:#fff;border-radius:10px;white-space:nowrap}

.theatre{min-height:0;padding:14px;display:grid;place-items:center;background:
 radial-gradient(circle at 50% 40%,#403024,#15100e 68%);position:relative}
.tv{width:min(1500px,100%);height:100%;max-height:calc(100vh - 142px);aspect-ratio:16/9;display:grid;grid-template-columns:minmax(390px,36%) minmax(0,64%);
 background:#171310;border-radius:18px;overflow:hidden;border:8px solid #1a2b43;outline:2px solid var(--gold);
 box-shadow:0 30px 100px #000;position:relative}
.lyric-panel{position:relative;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:12px;
 background:linear-gradient(180deg,#fff5d2 0%,#f0dfa8 100%);color:var(--ink);border-right:5px solid var(--gold);
 overflow:hidden;padding:42px clamp(24px,3.2vw,58px) 38px}
.lyric-panel::before{content:"";position:absolute;inset:18px;border:1px solid rgba(143,48,45,.18);pointer-events:none}
.blockbar{position:absolute;left:0;right:0;height:13px;background:repeating-linear-gradient(90deg,#ad4e3a 0 20px,#d09a2f 20px 40px,#55857d 40px 60px,#4f6894 60px 80px,#7c5280 80px 100px)}
.blockbar.top{top:0}.blockbar.bottom{bottom:0}
.chapter-chip{position:relative;z-index:1;background:var(--navy);color:var(--gold2);border:2px solid var(--gold);border-radius:14px;padding:10px;text-align:center;
 font-weight:950;letter-spacing:.04em;font-size:clamp(11px,1.15vw,17px)}
.follow{position:relative;z-index:1;color:#776c51;text-align:center;font-size:10px;letter-spacing:.17em;font-weight:900}
.lyrics{position:relative;z-index:1;min-height:0;display:flex;flex-wrap:wrap;align-content:center;align-items:center;justify-content:center;
 gap:.14em .24em;text-align:center;font-family:Georgia,"Times New Roman",serif;font-size:clamp(22px,2.25vw,42px);
 line-height:1.22;font-weight:850;padding:clamp(14px,2vw,28px) 0;text-wrap:balance;overflow:hidden}
.lyrics.sparse{font-size:clamp(26px,2.65vw,48px);line-height:1.18}
.lyrics.compact{font-size:clamp(20px,2vw,36px);line-height:1.2}
.lyrics.dense{font-size:clamp(17px,1.7vw,30px);line-height:1.18}
.word{display:inline-block;margin-right:0;transition:color .1s,opacity .1s,transform .1s,text-shadow .1s}
.word.done{opacity:.45}.word.active{color:var(--burg);transform:scale(1.055)}
.bounce-dot{position:absolute;width:20px;height:20px;border-radius:50%;background:var(--red);border:3px solid var(--gold);
 box-shadow:inset -2px -3px 0 #6f211c,0 4px 9px #0005;left:0;top:0;opacity:0;pointer-events:none;will-change:transform}
.bounce-dot::after{content:"";position:absolute;width:4px;height:4px;border-radius:50%;background:#fff9;left:3px;top:3px}
.brandline{position:relative;z-index:1;border-top:2px solid var(--gold);padding-top:11px;text-align:center;
 color:var(--navy);font-size:11px;font-weight:950;letter-spacing:.08em}
.lyric-progress{position:absolute;left:11%;right:11%;height:10px;bottom:5.5%;background:#d0be8a;border-radius:10px;overflow:hidden}
.lyric-progress span{display:block;height:100%;background:var(--burg);width:0}

.stage{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 42%,#49352a,#17110f 75%);touch-action:none}
.page{position:absolute;max-width:none;max-height:none;opacity:0;filter:drop-shadow(12px 16px 14px #0009);will-change:left,top,width,height,opacity}
.page-turn{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transform:translateX(115%);background:linear-gradient(100deg,transparent 0 28%,#fff5d2b3 46%,#6049319c 53%,transparent 72%)}
.page-turn.go{animation:turn .62s ease-in-out}
@keyframes turn{0%{opacity:0;transform:translateX(105%)}35%{opacity:.82}100%{opacity:0;transform:translateX(-110%)}}
.stage-help{position:absolute;left:14px;bottom:14px;z-index:8;background:rgba(7,16,29,.78);color:#e7ddc3;padding:8px 10px;border-radius:10px;font-size:11px;opacity:0;transition:opacity .2s}
.stage.explore .stage-help{opacity:1}

.controls{height:78px;display:grid;grid-template-columns:auto minmax(140px,1fr) auto auto auto auto auto;gap:10px;align-items:center;
 padding:10px 18px;background:#0c192b;border-top:1px solid rgba(198,154,58,.35)}
.play-main{width:52px;height:52px;border-radius:50%;border:2px solid var(--gold2);background:var(--red);color:#fff;font-weight:950}
.seek{width:100%;accent-color:var(--gold)}
.time{font-variant-numeric:tabular-nums;color:#d7ccae;font-size:12px;white-space:nowrap}
.control-label{display:flex;align-items:center;gap:7px;color:#c6b996;font-size:12px}
.control-label input{accent-color:var(--gold)}
.chapter-select{max-width:220px;background:#162a46;color:#fff;border:1px solid rgba(198,154,58,.45);border-radius:10px;padding:9px}

.lock-overlay{position:absolute;inset:0;z-index:30;display:none;place-items:center;background:rgba(4,9,16,.82);backdrop-filter:blur(10px);padding:20px}
.lock-overlay.show{display:grid}
.lock-card{max-width:540px;text-align:center;border:1px solid var(--gold);border-radius:24px;padding:34px;background:linear-gradient(180deg,#182d4a,#0b1728);box-shadow:var(--shadow)}
.lock-card h3{font-family:Georgia,"Times New Roman",serif;font-size:38px;margin:10px}
.lock-card p{color:#d3c7aa;line-height:1.55}
.lock-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px}

/* Modal */
.modal{position:fixed;inset:0;z-index:200;background:rgba(1,5,10,.82);backdrop-filter:blur(10px);display:none;place-items:center;padding:20px}
.modal.open{display:grid}
.modal-card{width:min(600px,100%);background:linear-gradient(180deg,#172c49,#091524);border:1px solid var(--gold);border-radius:26px;
 padding:30px;box-shadow:var(--shadow);position:relative}
.modal-close{position:absolute;right:16px;top:16px}
.modal-card h3{font-family:Georgia,"Times New Roman",serif;font-size:38px;margin:6px 0 14px}
.modal-card p{color:#d3c7aa;line-height:1.55}
.purchase-summary{margin:22px 0;padding:16px;border-radius:16px;background:rgba(0,0,0,.2);display:flex;justify-content:space-between;gap:15px}
.demo-note{border-left:4px solid var(--gold);padding:10px 14px;background:rgba(198,154,58,.08);color:#e1d5b7;font-size:13px}
.modal-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);z-index:260;background:#f3e8c5;color:#211c19;
 padding:12px 18px;border-radius:999px;font-weight:800;opacity:0;pointer-events:none;transition:.25s}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:950px){
  .hero{grid-template-columns:1fr;text-align:center;padding-top:130px}.hero-copy{margin:auto}.hero-copy p{margin-inline:auto}
  .hero-buttons,.hero-note{justify-content:center}.cover-wrap{margin-top:10px}.cover-card{width:min(76vw,390px)}
  .feature-grid,.edition-grid{grid-template-columns:1fr}.edition.featured{transform:none}
  .tv{grid-template-columns:1fr;grid-template-rows:minmax(0,58%) minmax(0,42%);aspect-ratio:auto}
  .stage{grid-row:1}.lyric-panel{grid-row:2;border-right:0;border-top:5px solid var(--gold);padding:26px clamp(18px,5vw,50px) 24px;gap:8px}
  .lyric-panel::before{inset:14px}.chapter-chip{justify-self:center;max-width:min(540px,100%);font-size:10px}.follow{display:none}
  .lyrics{font-size:clamp(18px,4.2vw,31px);line-height:1.18;padding:4px 0 10px}.lyrics.sparse{font-size:clamp(21px,5vw,36px)}
  .lyrics.compact{font-size:clamp(18px,4vw,29px)}.lyrics.dense{font-size:clamp(15px,3.45vw,24px)}.brandline{display:none}
  .lyric-progress{left:4%;right:4%;bottom:6px;height:6px}.bounce-dot{width:16px;height:16px}
}
@media(max-width:700px){
  .topbar{padding:10px 12px}.brand-text{display:none}.top-actions .ghost{display:none}
  .section{padding:72px 18px}.hero{padding-inline:18px}.cover-badge{width:92px;height:92px;font-size:12px;right:-12px}
  .footer{align-items:flex-start;flex-direction:column}
  .player-top{height:56px}.player-title{font-size:14px}.player-title small{display:none}
  .theatre{padding:5px}.tv{grid-template-rows:minmax(0,54%) minmax(0,46%);border-width:4px;border-radius:9px;max-height:calc(100vh - 124px)}
  .controls{height:68px;padding:7px;grid-template-columns:auto 1fr auto auto}
  .controls .control-label,.chapter-select,.hide-mobile{display:none}.play-main{width:46px;height:46px}.time{font-size:10px}
}