*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;min-height:100vh;overflow-x:auto}#root{min-height:100vh}.piano-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#00b4d8,#0077b6,#023e8a);padding:20px}h1{color:#fff;font-size:2.5rem;margin-bottom:10px;text-shadow:2px 2px 8px rgba(0,0,0,.4);letter-spacing:3px}.instructions{color:#ffffffd9;font-size:.85rem;margin-bottom:30px;text-align:center;line-height:1.6}.piano{position:relative;display:flex;background:linear-gradient(to bottom,#1a1a1a,#0d0d0d);padding:20px 20px 10px;border-radius:12px;box-shadow:0 15px 50px #00000080,0 0 30px #00b4d84d}.white-keys{display:flex;gap:3px}.black-keys{position:absolute;top:20px;left:20px;display:flex;pointer-events:none}.key{border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:8px;transition:all .08s ease}.key.white{width:47px;height:180px;background:linear-gradient(to bottom,#f8f8f8,#e8e8e8);border-radius:0 0 5px 5px;box-shadow:0 4px 6px #0000004d,inset 0 -4px 6px #0000001a}.key.white:hover{background:linear-gradient(to bottom,#fff,#f0f0f0);box-shadow:0 4px 6px #0000004d,inset 0 -4px 6px #0000001a,0 0 15px #00b4d880}.key.white:active,.key.white.active{background:linear-gradient(to bottom,#00b4d8,#0096c7);box-shadow:0 2px 3px #0000004d,inset 0 -2px 3px #0000001a,0 0 20px #00b4d8cc;transform:translateY(2px)}.key.black{position:absolute;width:30px;height:110px;background:linear-gradient(to bottom,#2a2a2a,#111);border-radius:0 0 4px 4px;z-index:1;pointer-events:auto;box-shadow:0 4px 6px #00000080,inset 0 -4px 10px #ffffff0d}.key.black:hover{background:linear-gradient(to bottom,#3a3a3a,#1a1a1a);box-shadow:0 4px 6px #00000080,inset 0 -4px 10px #ffffff0d,0 0 15px #00b4d866}.key.black:active,.key.black.active{background:linear-gradient(to bottom,#0077b6,#023e8a);box-shadow:0 2px 3px #00000080,inset 0 -2px 5px #ffffff0d,0 0 20px #00b4d8cc;transform:translateY(2px)}.note-label{font-size:10px;color:#555;margin-bottom:2px}.key-hint{font-size:9px;color:#888;background:#0000001a;padding:2px 5px;border-radius:3px}.key.black .key-hint{color:#666;background:#ffffff1a}.key.white:active .note-label,.key.white.active .note-label{color:#fff}.key.white:active .key-hint,.key.white.active .key-hint{color:#fff;background:#fff3}.key.black:active .key-hint,.key.black.active .key-hint{color:#ccc}