*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-yellow: #ffbe1a;--card-bg: #0e172a;--text-main: #ffffff;--accent-green: #00ff9a;--accent-orange: #ff9f1c;--accent-red: #ff4b5c;--border-soft: rgba(255, 255, 255, .12);--shadow-soft: 0 18px 45px rgba(0, 0, 0, .45);--radius-xl: 26px;--font-main: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif}body{min-height:100vh;font-family:var(--font-main);color:var(--text-main);background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed}body:before{content:"";position:fixed;inset:0;background:#00000040;pointer-events:none;z-index:-1}.app{min-height:100vh;display:flex;flex-direction:column;padding:24px;gap:24px}.app-header{display:flex;justify-content:space-between;align-items:center}.logo-left{font-weight:800;font-size:clamp(24px,4vw,34px)}.logo-main{color:#fff}.logo-highlight{margin-left:4px;color:var(--accent-green);text-shadow:0 0 12px rgba(0,255,154,.7)}.logo-right{display:flex;align-items:center;gap:12px}.badge{width:82px;height:82px;border-radius:50%;background:#111827;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-soft)}.logo-sub{font-size:clamp(20px,3vw,28px);font-weight:800;color:#00ffcf}.vinyl-wrapper{position:fixed;top:16px;right:16px;width:110px;height:110px;z-index:999;filter:drop-shadow(0 8px 16px rgba(0,0,0,.4))}.vinyl-spin{width:110px;height:110px;border-radius:50%;background-image:url(/images/vinyl.jpg);background-size:cover;background-position:center;border:3px solid #000;animation:spin 6s linear infinite;position:relative}.vinyl-label{width:4px;height:4px;background:#f03;border-radius:50%;border:2px solid rgba(0,0,0,.4);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.app-content{width:100%;display:flex;justify-content:center;padding-top:30px}.card{background:radial-gradient(circle at top left,#111827,#020617);border-radius:var(--radius-xl);border:1px solid var(--border-soft);box-shadow:var(--shadow-soft);padding:24px 26px 20px}.player-body{display:flex;flex-direction:column;gap:16px}.btn{border:none;border-radius:999px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;background:#ffffffe6;color:#000;box-shadow:0 10px 18px #0006}.btn-green{background:var(--accent-green)}.btn-red{background:var(--accent-red)}.btn-orange{background:var(--accent-orange)}.slider{width:100%;accent-color:var(--accent-orange)}.sprite-wrapper{width:100px;height:90px;display:flex;align-items:flex-end;animation:drumBounce .6s ease-in-out infinite}.drummer{width:80px;image-rendering:pixelated}@keyframes drumBounce{0%{transform:translateY(0)}25%{transform:translateY(-4px)}50%{transform:translateY(0)}75%{transform:translateY(-2px)}to{transform:translateY(0)}}.why-box{display:flex;flex-direction:column;gap:10px}.why-title{font-size:20px;font-weight:800;color:#2f8}.title-bar{background:linear-gradient(90deg,#00ff9a,#00b3ff);padding:12px 18px;border-radius:14px;color:#0b0b0b;font-weight:800;text-align:center;margin-bottom:18px}.app-footer{margin-top:auto;display:flex;justify-content:space-between;font-size:11px;color:#111827}@media(max-width:960px){.card{max-width:100%}}@media(max-width:640px){.app{padding:16px;gap:16px}.badge{width:64px;height:64px}.app-footer{flex-direction:column;gap:4px}}.titlebar{font-size:1.2rem;font-weight:600;color:#7ee0ff;text-align:center;padding:12px 0;margin-bottom:14px;background:#006ea033;border:1px solid rgba(0,255,255,.3);border-radius:10px;box-shadow:0 0 18px #00b4ff59;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}