:root {
  --night: #061827;
  --night-2: #0a2940;
  --ink: #edf5f8;
  --muted: #b9c8d1;
  --gold: #d6ad63;
  --gold-2: #f0d69d;
  --card: rgba(10, 41, 64, .84);
  --line: rgba(240, 214, 157, .25);
  --shadow: 0 22px 70px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--night)}
body{margin:0;min-height:100vh;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:
radial-gradient(circle at 78% 8%,rgba(214,173,99,.16),transparent 28rem),
radial-gradient(circle at 10% 86%,rgba(63,119,156,.18),transparent 34rem),
linear-gradient(145deg,var(--night),#06111e 62%,#0a2030);}
a{color:inherit}.shell{width:min(1100px,calc(100% - 32px));margin:auto;padding:30px 0 44px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:46px}.brand{display:flex;align-items:center;gap:13px;text-decoration:none}.mark{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--line);border-radius:50%;color:var(--gold-2);font-size:24px;background:rgba(255,255,255,.035)}.brand strong{font-family:Georgia,serif;letter-spacing:.06em}.brand small{display:block;color:var(--muted);margin-top:2px}.privacy-link{font-size:14px;color:var(--muted)}.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(240px,.75fr);gap:34px;align-items:center}.eyebrow{color:var(--gold-2);font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase}.hero h1{font-family:Georgia,serif;font-size:clamp(46px,8vw,88px);line-height:.95;margin:13px 0 18px;font-weight:500}.hero p{font-size:clamp(17px,2vw,21px);line-height:1.65;color:var(--muted);max-width:680px}.character-card{min-height:380px;border:1px solid var(--line);border-radius:30px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));box-shadow:var(--shadow);display:grid;place-items:center;overflow:hidden;position:relative}.character-card:before{content:"";position:absolute;inset:10%;border-radius:50%;background:radial-gradient(circle,rgba(214,173,99,.22),transparent 66%);filter:blur(6px)}.character-card img{position:relative;width:min(94%,420px);height:360px;object-fit:contain;filter:drop-shadow(0 22px 30px rgba(0,0,0,.28))}.actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:28px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border-radius:999px;border:1px solid var(--line);font-weight:800;text-decoration:none;cursor:pointer;background:rgba(255,255,255,.04);color:var(--ink)}.button-primary{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#12202a;border-color:transparent}.button:hover{transform:translateY(-1px)}.notice{margin-top:32px;padding:16px 18px;border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:16px;color:var(--muted);font-size:14px;line-height:1.55}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px}.feature{padding:22px;border:1px solid var(--line);border-radius:20px;background:var(--card)}.feature h2{font-family:Georgia,serif;font-size:22px;margin:0 0 8px}.feature p{margin:0;color:var(--muted);line-height:1.55}.player-card{margin:44px auto 0;max-width:820px;border:1px solid var(--line);border-radius:28px;background:var(--card);padding:28px;box-shadow:var(--shadow)}.player-card h1{font-family:Georgia,serif;font-size:clamp(38px,7vw,68px);font-weight:500;margin:10px 0}.player-card p{color:var(--muted);line-height:1.65}.mode-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:24px 0}.mode-button{padding:17px;text-align:left;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.035);color:var(--ink);cursor:pointer}.mode-button strong,.mode-button span{display:block}.mode-button span{margin-top:5px;color:var(--muted);font-size:13px}.mode-button.active{border-color:var(--gold);background:rgba(214,173,99,.11)}audio{width:100%;margin:8px 0 18px}.player-actions{display:flex;flex-wrap:wrap;gap:10px}.footer{margin-top:54px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:13px}.qr-note{padding:14px 16px;border-radius:14px;background:rgba(214,173,99,.10);border:1px solid rgba(214,173,99,.25);color:var(--gold-2);font-size:14px}.status{margin-top:12px;color:var(--muted);font-size:14px}@media(max-width:800px){.hero{grid-template-columns:1fr}.character-card{min-height:280px}.character-card img{height:280px}.features{grid-template-columns:1fr}.mode-grid{grid-template-columns:1fr}.topbar{align-items:flex-start}.footer{flex-direction:column}}