*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{background:#030303}body{margin:0;min-height:100vh;background:radial-gradient(circle at 20% 10%,#174cff33,transparent 30%),radial-gradient(circle at 80% 20%,#ff174433,transparent 30%),radial-gradient(circle at 50% 100%,#ffd00022,transparent 35%),#030303;color:#fff;font-family:Arial,Helvetica,sans-serif}.app{width:min(1100px,100%);margin:auto;padding:18px}header{text-align:center;padding:15px 0 25px}.logo{font-size:clamp(38px,9vw,80px);font-weight:1000;letter-spacing:-3px;color:#ffd21a;text-shadow:0 0 8px #ffd21a,0 0 25px #ffcc0044}.logo span{color:#ff244f}.subtitle{color:#aaa;letter-spacing:5px;font-size:12px}.panel{background:linear-gradient(145deg,#151515,#080808);border:1px solid #ffffff18;border-radius:25px;padding:20px;margin-bottom:16px;box-shadow:0 15px 50px #000}.title{font-size:13px;color:#999;letter-spacing:2px;margin-bottom:14px}.genres{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.genre{min-height:60px;border:1px solid #ffffff15;border-radius:15px;background:#121212;color:#fff;font-weight:bold;cursor:pointer;transition:.2s}.genre:hover{transform:translateY(-2px)}.genre.active{color:#050505;background:linear-gradient(135deg,#ffd21a,#ff7b00);box-shadow:0 0 25px #ffd21a55}.beat-header{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap}.genre-name{font-size:28px;font-weight:1000}.bpm{color:#ffd21a;font-size:28px;font-weight:1000}.controls{display:flex;justify-content:center;align-items:center;gap:12px;margin:22px 0;flex-wrap:wrap}.control{min-width:50px;min-height:48px;padding:10px 18px;border:1px solid #ffffff22;border-radius:14px;background:#171717;color:#fff;font-size:16px;font-weight:bold;cursor:pointer}.play{width:75px;height:75px;border-radius:50%;border:0;background:linear-gradient(135deg,#ff244f,#8c00ff);box-shadow:0 0 30px #ff244f66;color:#fff;font-size:27px;cursor:pointer}.sequence{display:grid;grid-template-columns:repeat(16,1fr);gap:6px;margin:20px 0}.step{height:16px;border-radius:5px;background:#252525}.step.active{background:#ffd21a;box-shadow:0 0 12px #ffd21a}.step.current{background:#fff}.pads{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.pad{min-height:100px;border-radius:20px;border:1px solid #ffffff20;color:#fff;background:#111;cursor:pointer;font-size:17px;font-weight:900;transition:.08s}.pad:nth-child(1){border-color:#00eaff66;background:linear-gradient(145deg,#061c2b,#07101a)}.pad:nth-child(2){border-color:#ff244f66;background:linear-gradient(145deg,#2b0712,#100509)}.pad:nth-child(3){border-color:#ffd21a66;background:linear-gradient(145deg,#302307,#110e04)}.pad:nth-child(4){border-color:#a855f766;background:linear-gradient(145deg,#210d35,#0e0716)}.pad:active,.pad.hit{transform:scale(.94);filter:brightness(1.7);box-shadow:0 0 35px currentColor}.challenge{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap}.score{font-size:40px;font-weight:1000;color:#ffd21a}.challenge-btn{padding:15px 25px;border-radius:15px;border:0;background:linear-gradient(90deg,#00d9ff,#0077ff);color:#fff;font-weight:bold;cursor:pointer}.visualizer{height:90px;display:flex;align-items:end;justify-content:center;gap:5px;overflow:hidden}.bar{width:8px;height:10px;border-radius:5px;background:linear-gradient(#ffd21a,#ff244f);transition:height .08s}.volume{height:8px;background:#222;border-radius:20px;overflow:hidden;margin-top:15px}.volume span{display:block;width:0;height:100%;background:linear-gradient(90deg,#00eaff,#ffd21a,#ff244f)}.status{margin:12px 0 0;color:#777;text-align:center;font-size:12px;min-height:18px}.info{color:#888;font-size:13px;line-height:1.6;text-align:center}@media(max-width:650px){.app{padding:10px}.genres{grid-template-columns:repeat(2,1fr)}.pads{grid-template-columns:repeat(2,1fr)}.pad{min-height:85px}.sequence{gap:3px}.step{height:12px}}