:root{--bg:#141414;--panel:#1e1e1e;--line:#333;--ink:#ececec;--dim:#8a8a8a;--hot:#ff8c3a}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;background:var(--bg);color:var(--ink);font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
body{display:flex;flex-direction:column;min-height:100vh}
header{height:48px;display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid var(--line);background:var(--panel)}
header a{font-weight:800;letter-spacing:.18em;color:var(--ink);text-decoration:none}
.pill{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.lbl{color:var(--dim);font-size:12px;letter-spacing:.06em}
main{flex:1;width:100%;padding:18px 16px 30px}
.sheet{max-width:960px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
h1{font-size:30px;font-weight:800;letter-spacing:-.02em}
.line{color:#d8d8d8;font-size:17px;margin-top:4px}
.like{color:var(--dim);font-style:italic;margin-top:4px}
.hero{position:relative;background:#181818;border:1px solid var(--line);border-radius:16px;overflow:hidden;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center}
.hero img{width:100%;height:100%;object-fit:cover}
.hero svg{width:100%;height:100%;padding:18px}
.hero .pages{position:absolute;left:10px;bottom:10px;display:flex;gap:6px}
.hero .pages button{width:9px;height:9px;padding:0;border-radius:50%;background:#555;border:0;cursor:pointer}
.hero .pages button.on{background:var(--hot)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fact{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.fact .lbl{display:block;margin-bottom:2px}
.fact b{font-weight:600;font-size:14px}
.beats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.beat{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.beat .img{aspect-ratio:1;background:#181818}
.beat img{width:100%;height:100%;object-fit:cover;display:block}
.beat p{padding:8px 10px;font-size:13px}
.beat p b{color:var(--hot);font-weight:700;margin-right:4px}
.block{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.block>.bh{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line)}
.pic-stage{display:flex;align-items:center;justify-content:center;padding:14px;min-height:200px;position:relative;width:100%}
.pic-stage>svg{max-width:100%;max-height:70vh;width:100%;height:auto}
.gl{position:relative;height:420px;border-top:1px solid var(--line)}
.gl canvas{width:100%;height:100%;display:block;touch-action:none}
.note{position:absolute;left:14px;bottom:10px;color:var(--dim);font-size:12px;pointer-events:none}
.bar{display:flex;align-items:center;gap:14px}
button{font:inherit;color:#141414;background:var(--hot);border:0;border-radius:10px;padding:12px 18px;font-weight:700;cursor:pointer}
footer{color:#555;font-size:12px;text-align:center;padding:16px}
.phone{height:520px;aspect-ratio:390/844;background:#101010;border:2px solid #333;border-radius:34px;overflow:hidden;position:relative;cursor:pointer;user-select:none}
.phone svg{position:absolute;top:0;left:0;height:100%;width:auto;max-width:none;max-height:none;transition:transform .25s}
.phone .dots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:6px}
.phone .dots i{width:7px;height:7px;border-radius:50%;background:#444}
.phone .dots i.on{background:var(--hot)}
@media (max-width:600px){h1{font-size:24px}.facts,.beats{grid-template-columns:1fr}.hero{aspect-ratio:1}.phone{height:440px}}