:root{--bg: #06070a;--amber: #ffb15c;--amber-2: #ff8a3d;--text: #eae7e2;--muted: #7d818c}*{margin:0;padding:0;box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{min-height:100vh;background:var(--bg);color:var(--text);font-family:SF Pro Display,-apple-system,BlinkMacSystemFont,PingFang SC,Helvetica Neue,Arial,sans-serif;display:flex;align-items:center;justify-content:center;padding:40px 24px 56px;overflow-x:hidden;position:relative;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body:before{content:"";position:fixed;top:-20%;right:-20%;bottom:-20%;left:-20%;background:radial-gradient(60% 50% at 50% 0%,rgba(255,177,92,.13),transparent 70%),radial-gradient(50% 45% at 50% 100%,rgba(80,110,255,.1),transparent 70%);pointer-events:none;z-index:0}.app{position:relative;z-index:1;width:100%;max-width:1120px}.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}.eyebrow{font-size:11px;letter-spacing:.34em;color:var(--amber);opacity:.72;margin-bottom:14px;font-weight:600}h1{font-size:clamp(30px,4vw,46px);font-weight:600;letter-spacing:-.03em;line-height:1;color:#f3f0ec;background:linear-gradient(180deg,#fff 8%,#b6b0a6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.sub{margin-top:14px;color:var(--muted);font-size:14px;line-height:1.6}.sub strong{color:#ddd8d0;font-weight:500}.volume{display:flex;align-items:center;gap:12px;padding-bottom:6px;color:var(--muted);flex:0 0 auto}.volume svg{opacity:.5}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:114px;height:4px;border-radius:99px;background:#ffffff1f;outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--amber);box-shadow:0 0 14px #ffb15cbf;transition:transform .15s ease}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}input[type=range]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--amber);box-shadow:0 0 14px #ffb15cbf}.display{position:relative;height:92px;display:flex;align-items:center;justify-content:center;margin-top:16px}.readout{font-size:clamp(38px,5.5vw,62px);font-weight:200;letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:#ffffff1a;transition:color .25s ease,text-shadow .4s ease;user-select:none;-webkit-user-select:none}.readout.live{color:var(--amber);text-shadow:0 0 46px rgba(255,177,92,.45),0 0 96px rgba(255,138,61,.22)}.pop-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.note-pop{position:absolute;bottom:8px;transform:translate(-50%);font-size:12.5px;font-weight:600;letter-spacing:.05em;color:var(--amber);text-shadow:0 0 16px rgba(255,177,92,.6);white-space:nowrap;animation:popUp .85s cubic-bezier(.2,.8,.3,1) forwards}@keyframes popUp{0%{opacity:0;transform:translate(-50%,10px) scale(.85)}18%{opacity:1}to{opacity:0;transform:translate(-50%,-54px) scale(1.06)}}.piano-scroll{overflow-x:auto;overflow-y:hidden;padding:4px 2px 6px}.piano-scroll::-webkit-scrollbar{height:6px}.piano-scroll::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:99px}.piano-shell{min-width:680px;padding:16px 16px 14px;border-radius:20px;background:linear-gradient(180deg,#191c24,#0b0d12);box-shadow:0 40px 80px -30px #000000f2,0 0 0 1px #ffffff0e,inset 0 1px #ffffff12}.keys{position:relative;display:flex;height:clamp(170px,21vw,236px);perspective:900px;animation:riseIn .75s cubic-bezier(.22,1,.36,1) backwards}@keyframes riseIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}.key{position:relative;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none;transform-origin:top center;transition:transform .07s ease,box-shadow .13s ease,background .13s ease}.key.white{flex:1 1 0;z-index:1;border-radius:0 0 9px 9px;background:linear-gradient(180deg,#fdfcf9,#f4efe6 62%,#e0d9cc);box-shadow:inset 0 -16px 22px -14px #3c2d1973,inset 0 1px #ffffffe6,inset -1px 0 #00000024}.key.white:hover{background:linear-gradient(180deg,#fff,#f8f4ec 62%,#e7e0d3)}.key.white.active,.key.white.auto-active{background:linear-gradient(180deg,#fff5e6,#ffcf94 55%,#ffb15c);box-shadow:inset 0 -10px 18px -10px #b46e1e80,0 0 34px #ffb15c73;transform:translateY(3px) scaleY(.972)}.key.black{position:absolute;top:0;width:4%;height:61%;transform:translate(-50%);z-index:3;border-radius:0 0 6px 6px;background:linear-gradient(180deg,#33363f,#16181f 42%,#04050a);box-shadow:0 8px 14px -5px #000000f2,inset 0 1px #ffffff29,inset 0 -6px 8px -6px #ffffff1a}.key.black:hover{background:linear-gradient(180deg,#3d4049,#1b1e26 42%,#06070c)}.key.black.active,.key.black.auto-active{background:linear-gradient(180deg,#ffcf8f,#d98b3c 46%,#6b3a12);box-shadow:0 0 32px #ffb15cb3,inset 0 1px #ffebcdcc;transform:translate(-50%) translateY(2px)}.key-label{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:11px;font-weight:600;letter-spacing:.06em;color:#483e2e9e;pointer-events:none}.key.black .key-label{bottom:8px;font-size:9.5px;color:#fff6}.key.white.active .key-label,.key.white.auto-active .key-label{color:#78460ac7}.key.black.active .key-label,.key.black.auto-active .key-label{color:#ffd2a0e6}.key-label-note{font-size:9.5px;letter-spacing:0;color:#483e2e52}.key.black .key-label-note{font-size:8.5px;color:#fff3}.player{margin-top:24px;display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap}.player-title{font-size:10.5px;letter-spacing:.26em;color:var(--amber);opacity:.68;font-weight:600;margin-right:4px}.song-list{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}.song-btn{padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.09);background:#ffffff0b;color:#b9b4ac;font-size:12.5px;font-family:inherit;letter-spacing:.02em;cursor:pointer;transition:background .2s,color .2s,border-color .2s,box-shadow .25s,transform .12s}.song-btn:hover{background:#ffffff17;color:#e8e4dd}.song-btn:active{transform:scale(.97)}.song-btn.playing{background:#ffb15c26;border-color:#ffb15c8c;color:#ffb15c;box-shadow:0 0 22px #ffb15c2e}.song-btn.playing:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:7px;vertical-align:middle;animation:beat .9s ease-in-out infinite}@keyframes beat{0%,to{opacity:.3;transform:scale(.75)}50%{opacity:1;transform:scale(1.2)}}.tips{margin-top:22px;display:flex;align-items:center;justify-content:center;gap:13px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}kbd{display:inline-block;padding:2px 6px;border-radius:5px;background:#ffffff0f;border:1px solid rgba(255,255,255,.09);font-family:inherit;font-size:11px;color:#cfcac2;box-shadow:0 1px #00000073}.dot{width:3px;height:3px;border-radius:50%;background:#ffffff2e}@media(max-width:720px){.hero{flex-direction:column;align-items:flex-start;gap:16px}.volume{padding-bottom:0}.display{height:76px}body{padding:28px 16px 40px}}.site-back{display:inline-flex;align-items:center;gap:6px;margin-bottom:20px;padding:5px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.08);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#f0e8dc73;text-decoration:none;transition:color .2s,border-color .2s,background .2s}.site-back:hover{color:#ffc07a;border-color:#ffc07a52;background:#ffffff0a}#root{width:100%;display:flex;justify-content:center}