:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100vh;background:#0a0a0a;color:#fafafa}.shell{min-height:100vh;display:grid;place-items:center;padding:2rem}.piano-container{display:flex;flex-direction:column;align-items:center;gap:.5rem}h1{margin:0;font-size:2rem;font-weight:600;letter-spacing:-.02em;background:linear-gradient(135deg,#fafafa,#888);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{margin:0 0 1.25rem;color:#ffffff73;font-size:.85rem}.white-keys{display:flex;gap:3px;position:relative;z-index:1}.white-key{height:200px;border:1px solid rgba(255,255,255,.12);border-top:none;border-radius:0 0 8px 8px;background:linear-gradient(180deg,#f5f5f5,#e0e0e0 70%,#c8c8c8);cursor:pointer;position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:10px;gap:2px;outline:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:background .08s,box-shadow .08s,transform .05s}.white-key:hover{background:linear-gradient(180deg,#fff,#eee 70%,#ddd)}.white-key.active{background:linear-gradient(180deg,#dbeafe,#bfdbfe,#93c5fd);box-shadow:0 0 20px #3b82f659,inset 0 0 10px #3b82f61a;transform:translateY(1px)}.white-key .key-hint{font-size:.6rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#999;pointer-events:none}.white-key .note-label{font-size:.55rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#aaa;pointer-events:none}.white-key.active .key-hint,.white-key.active .note-label{color:#1e3a5f}.black-keys{z-index:2}.black-key{height:120px;border:1px solid rgba(0,0,0,.4);border-top:none;border-radius:0 0 6px 6px;background:linear-gradient(180deg,#333,#1a1a1a,#111);cursor:pointer;position:absolute;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px;outline:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:background .08s,box-shadow .08s,transform .05s;box-shadow:2px 2px 6px #00000080,-1px 0 3px #0000004d}.black-key:hover{background:linear-gradient(180deg,#444,#2a2a2a,#1a1a1a)}.black-key.active{background:linear-gradient(180deg,#1e3a5f,#172554,#0f172a);box-shadow:0 0 20px #3b82f666,inset 0 0 8px #3b82f626;transform:translateY(1px)}.black-key .key-hint{font-size:.5rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#ffffff73;pointer-events:none}.black-key.active .key-hint{color:#93c5fde6}.legend{display:flex;flex-direction:column;align-items:center;gap:.2rem;margin-top:1.5rem;font-size:.7rem;color:#ffffff59}.legend kbd{display:inline-block;padding:.05rem .3rem;font-size:.6rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#ffffff0f;border:1px solid rgba(255,255,255,.12);border-radius:3px;margin:0 .05rem}