*{box-sizing:border-box}
html{background:#050605}
body{margin:0;background:#050605;color:#d8ddd5;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;min-height:100vh;font-size:13px;letter-spacing:.02em}
button{font:inherit}
.crt{position:fixed;inset:0;pointer-events:none;z-index:20;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 1px,transparent 1px,transparent 4px);opacity:.22}
.topbar{height:72px;border-bottom:1px solid #293028;display:flex;align-items:center;justify-content:space-between;padding:0 18px;position:sticky;top:0;background:rgba(5,6,5,.97);z-index:10}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{font-size:25px;font-weight:600;letter-spacing:-.08em;color:#f0f2ed}
.brand-mark span{color:#7e9a80}
.brand-meta{font-size:11px;line-height:1.5}
.brand-meta small{color:#6e806e;font-size:8px}
.brand-meta i,.led{display:inline-block;width:6px;height:6px;border-radius:50%;background:#718b71;box-shadow:0 0 8px #718b71;margin-right:4px}
.status{text-align:right;font-size:8px;color:#5e6b5e;line-height:1.5}
main{max-width:880px;margin:auto;padding:26px 16px 50px}
.intro{border-bottom:1px solid #293028;padding:18px 0 28px}
.eyebrow,.index{font-size:9px;color:#647164;letter-spacing:.14em}
.intro h1{font-size:clamp(42px,12vw,82px);line-height:.82;margin:15px 0;color:#e7e9e4;letter-spacing:-.08em}
.intro h1 span{color:#758976}
.intro p{font-size:10px;color:#7d877d;margin:18px 0 0}
.player-status{border-left:2px solid #6f876f;margin:18px 0;padding:8px 10px;background:#090c09;color:#8a9b8a;font-size:9px}
.player-status.error{border-color:#8a3e3e;color:#b87373}
.catalog{display:grid;gap:10px}
.beat-card{border:1px solid #293028;background:linear-gradient(180deg,#0a0d0a,#070907);padding:15px}
.beat-card:hover{border-color:#4a5a4a}
.beat-head{display:flex;justify-content:space-between;align-items:flex-start}
.beat-head h2{font-size:20px;margin:5px 0 0;letter-spacing:-.04em}
.led{margin-top:4px}
.led.red{background:#8a3e3e;box-shadow:0 0 7px #8a3e3e}
.meta-row{display:flex;flex-wrap:wrap;gap:7px 14px;color:#748074;font-size:9px;margin-top:12px;text-transform:uppercase}
.wave{height:48px;margin:13px 0 8px;border-top:1px solid #1c231c;border-bottom:1px solid #1c231c;display:flex;align-items:center;gap:2px;padding:4px 0}
.wave b{display:block;width:3px;height:var(--h);background:#435343;opacity:.8}
.play-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.play-btn,.buy-btn,.primary-btn{border:1px solid #4d5e4d;background:#0c110c;color:#cbd3c9;cursor:pointer}
.play-btn{padding:9px 12px;font-size:10px;touch-action:manipulation}
.play-btn:active,.buy-btn:active,.primary-btn:active{transform:translateY(1px)}
.playing{font-size:8px;color:#657565;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.buy-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.buy-btn{min-height:50px;padding:8px;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:8px;touch-action:manipulation}
.buy-btn span{font-size:9px}
.buy-btn strong{font-size:11px;color:#dfe4dd}
.buy-btn.exclusive{border-color:#755050}
.buy-btn.sold{opacity:.45;cursor:not-allowed}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:50;display:grid;place-items:center;padding:18px}
.modal.hidden{display:none}
.modal-card{width:min(520px,100%);background:#090c09;border:1px solid #536253;padding:22px;position:relative;box-shadow:0 20px 80px #000}
.close{position:absolute;right:10px;top:7px;background:none;border:0;color:#899489;font-size:25px;cursor:pointer}
.modal h2{font-size:24px;margin:12px 0 18px}
.modal ul{padding-left:18px;color:#9ca89b;line-height:1.9;font-size:11px}
.warning{color:#9d5d5d;font-size:9px;border-left:2px solid #7b4b4b;padding-left:8px}
.primary-btn{width:100%;padding:14px;margin-top:14px;background:#cfd7ce;color:#071007;border-color:#cfd7ce;font-weight:600;display:block;text-align:center}
.primary-btn:disabled{opacity:.6;cursor:wait}
footer{border-top:1px solid #202620;display:flex;justify-content:space-between;gap:10px;padding:15px 16px;color:#4f5a4f;font-size:8px;max-width:880px;margin:auto}
@media(max-width:560px){.buy-grid{grid-template-columns:1fr}.buy-btn{min-height:56px}.intro h1{font-size:52px}.topbar{padding:0 12px}.brand-meta{display:none}.status{font-size:7px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}