*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{height:100%;overflow:hidden;}
  body{font-family:'Baloo Bhaijaan 2',sans-serif;color:#3A2E52;background:linear-gradient(160deg,#2A2150,#4A3A7A);user-select:none;-webkit-user-select:none;touch-action:none;display:flex;flex-direction:column;height:100dvh;}
  .topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 6px;}
  .topbar h1{font-size:clamp(18px,5vw,26px);font-weight:800;color:#fff;}
  .nm{color:#FFD43B;}
  .homebtn{text-decoration:none;background:#fff;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 4px 0 #00000040;}
  .hint{color:#ffffffcc;font-size:clamp(12px,3.4vw,15px);font-weight:700;}
  #keys{flex:1;display:flex;gap:8px;padding:10px 14px 18px;}
  .key{flex:1;border-radius:16px;cursor:pointer;box-shadow:0 8px 0 #00000035, inset 0 0 0 4px #ffffff30;display:flex;align-items:flex-end;justify-content:center;padding-bottom:18px;font-size:30px;transition:transform .06s;}
  .key:active,.key.on{transform:translateY(6px) scale(.99);box-shadow:0 2px 0 #00000035, inset 0 0 0 4px #ffffff55;}
  .note{position:fixed;font-size:30px;pointer-events:none;animation:fly .8s ease forwards;z-index:5;}
  @keyframes fly{0%{opacity:1;transform:translateY(0) scale(.6)}100%{opacity:0;transform:translateY(-90px) scale(1.4)}}