:root{--bg-color: #121214;--panel-bg: #1e1e24;--text-color: #e1e1e6;--accent-color: #00d4ff;--accent-glow: 0 0 10px rgba(0, 212, 255, .5);--danger-color: #ff4d4d;--key-white: #ffffff;--key-black: #1a1a1a;--key-active: #00d4ff}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background-color:var(--bg-color);color:var(--text-color);display:flex;justify-content:center;align-items:center;min-height:100vh;overflow-x:hidden;padding:6rem 1rem}#app{width:100%;max-width:1000px;background-color:var(--panel-bg);padding:2rem;border-radius:16px;box-shadow:0 20px 50px #00000080;text-align:center}header{margin-bottom:2rem}h1{font-size:2.5rem;font-weight:700;letter-spacing:-.05em;margin-bottom:.5rem;text-transform:uppercase;background:linear-gradient(90deg,#fff,var(--accent-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}p{color:#888}.controls{display:flex;justify-content:space-between;align-items:center;background:#18181b;padding:1rem 2rem;border-radius:12px;margin-bottom:1.5rem;border:1px solid #333;flex-wrap:wrap;gap:1rem}.status-display{display:flex;flex-direction:column;align-items:flex-start}#status-text{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:#666}#timer{font-family:Courier New,monospace;font-size:1.5rem;font-weight:700;color:var(--accent-color);text-shadow:var(--accent-glow)}.button-group{display:flex;gap:1rem;flex-wrap:wrap}.btn{background:transparent;border:1px solid #444;color:var(--text-color);padding:.8rem 1.5rem;border-radius:8px;cursor:pointer;font-weight:600;transition:all .2s;text-transform:uppercase;font-size:.8rem;letter-spacing:.05em}.btn:hover:not(:disabled){border-color:var(--accent-color);box-shadow:var(--accent-glow)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.primary{background:var(--accent-color);color:#000;border:none}.btn.primary:hover:not(:disabled){background:#33e0ff;box-shadow:0 0 20px #00d4ff66}.btn.danger{border-color:var(--danger-color);color:var(--danger-color)}.btn.danger:hover:not(:disabled){background:var(--danger-color);color:#fff;box-shadow:0 0 15px #ff4d4d66}.feature-controls{display:flex;justify-content:space-between;gap:1.5rem;margin-bottom:1.5rem;flex-wrap:wrap}.control-section{background:#18181b;padding:1rem 1.5rem;border-radius:12px;border:1px solid #333;flex:1;min-width:200px}.control-section label{display:block;font-size:.9rem;font-weight:600;margin-bottom:.5rem;color:var(--accent-color)}.selector{background:#0d0d0f;border:1px solid #444;color:var(--text-color);padding:.6rem 1rem;border-radius:8px;font-size:.9rem;cursor:pointer;transition:all .2s;width:100%}.selector:hover{border-color:var(--accent-color)}.rhythm-section{flex:2}.rhythm-controls{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}.rhythm-controls .btn{padding:.6rem 1.2rem;font-size:.75rem}.rhythm-controls .selector{flex:1;min-width:120px}#tempo-slider{flex:1;min-width:100px;height:6px;background:#333;border-radius:3px;outline:none;-webkit-appearance:none}#tempo-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--accent-color);border-radius:50%;cursor:pointer;box-shadow:var(--accent-glow)}#tempo-slider::-moz-range-thumb{width:16px;height:16px;background:var(--accent-color);border-radius:50%;cursor:pointer;box-shadow:var(--accent-glow)}#tempo-display{font-family:Courier New,monospace;font-size:.9rem;color:var(--accent-color);min-width:70px;text-align:center}.piano-container{position:relative;margin-bottom:2rem;padding:1rem;background:#121214;border-radius:12px;box-shadow:inset 0 0 20px #000c}.piano{display:flex;justify-content:center;position:relative;height:200px}.key{position:relative;border-radius:0 0 4px 4px;cursor:pointer;transition:background .1s,transform .1s;-webkit-user-select:none;user-select:none}.key.white{width:60px;height:100%;background:var(--key-white);border:1px solid #ccc;z-index:1;margin:0 2px}.key.white:active,.key.white.active{background:var(--accent-color);box-shadow:0 0 15px var(--accent-color);transform:translateY(2px);border-color:var(--accent-color)}.key.black{width:40px;height:60%;background:var(--key-black);position:absolute;top:0;z-index:2;border-radius:0 0 4px 4px;box-shadow:0 2px 5px #00000080}.key.black:active,.key.black.active{background:var(--accent-color);box-shadow:0 0 15px var(--accent-color)}.instructions{text-align:left;background:#18181b;padding:1.5rem;border-radius:8px;border:1px solid #333}.instructions h3{margin-bottom:1rem;color:#888;font-size:.9rem;text-transform:uppercase}.key-map-guide p{margin-bottom:.5rem;font-family:monospace;font-size:1rem;color:#ccc}.key-map-guide strong{color:var(--accent-color)}.key-label{position:absolute;bottom:10px;left:50%;transform:translate(-50%);font-size:.75rem;font-weight:700;color:#666;-webkit-user-select:none;user-select:none;pointer-events:none}.key.white .key-label{color:#999}.key.black .key-label{color:#888;bottom:8px;font-size:.65rem}.key.active .key-label{color:#000}