*{margin:0;padding:0;box-sizing:border-box}:root{--primary-orange: #ff6b35;--neon-orange: #ff8c42;--dark-orange: #e55a2b;--accent-orange: #ffa366;--bg-primary: #0a0a0a;--bg-secondary: #1a1a1a;--bg-glass: rgba(255, 255, 255, .05);--bg-glass-hover: rgba(255, 255, 255, .1);--text-primary: #ffffff;--text-secondary: #cccccc;--text-muted: #888888;--glow-orange: 0 0 20px rgba(255, 107, 53, .5);--glow-orange-strong: 0 0 30px rgba(255, 107, 53, .8);--shadow-glass: 0 8px 32px rgba(0, 0, 0, .3);--border-glass: 1px solid rgba(255, 255, 255, .1);--font-primary: "Orbitron", monospace}body{font-family:var(--font-primary);background:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 100%),url(/assets/Piano-Cyo1cA0I.png);background-size:cover,contain;background-position:center,center;background-repeat:no-repeat,no-repeat;background-attachment:fixed,fixed;color:var(--text-primary);min-height:100vh;overflow-x:auto}.app-container{min-height:100vh;display:flex;flex-direction:column}.header{background:var(--bg-glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:var(--border-glass);box-shadow:var(--shadow-glass);padding:1rem 2rem;position:sticky;top:0;z-index:100}.header-content{display:flex;justify-content:space-between;align-items:center;max-width:1600px;margin:0 auto}.logo-section{display:flex;align-items:center;gap:1rem}.app-logo{height:50px;width:auto;object-fit:contain;border-radius:12px;filter:drop-shadow(0 0 10px rgba(255,107,53,.3));transition:filter .3s ease}.app-logo:hover{filter:drop-shadow(0 0 15px rgba(255,107,53,.6))}.app-title{font-size:2rem;font-weight:900;text-shadow:var(--glow-orange)}.title-text{color:var(--text-primary)}.title-accent{color:var(--neon-orange);text-shadow:var(--glow-orange-strong)}.controls-panel{display:flex;gap:2rem;align-items:center}.control-group{display:flex;flex-direction:column;align-items:center;gap:.5rem}.control-group label{font-size:.8rem;color:var(--text-secondary);font-weight:700}.slider{width:100px;height:4px;background:var(--bg-glass);border-radius:2px;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:var(--border-glass)}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:var(--neon-orange);border-radius:50%;cursor:pointer;box-shadow:var(--glow-orange)}.slider::-moz-range-thumb{width:16px;height:16px;background:var(--neon-orange);border-radius:50%;cursor:pointer;border:none;box-shadow:var(--glow-orange)}#volume-display,#octave-display{font-size:.9rem;color:var(--neon-orange);font-weight:700;min-width:30px;text-align:center}.neon-button{background:var(--bg-glass);border:2px solid var(--neon-orange);color:var(--neon-orange);padding:.7rem 1.5rem;border-radius:8px;font-family:var(--font-primary);font-weight:700;font-size:.9rem;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--glow-orange);text-transform:uppercase}.neon-button:hover{background:var(--neon-orange);color:var(--bg-primary);box-shadow:var(--glow-orange-strong);transform:translateY(-2px)}.neon-button.connected{background:var(--neon-orange);color:var(--bg-primary);box-shadow:var(--glow-orange-strong)}.audio-notice{background:var(--bg-glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:var(--border-glass);border-radius:20px;padding:2rem;margin-bottom:2rem;text-align:center;box-shadow:var(--shadow-glass);animation:pulseGlow 2s ease-in-out infinite;width:100%;max-width:500px;margin:0 auto 2rem}.audio-notice.hidden{display:none}.notice-content h3{color:var(--neon-orange);font-size:1.5rem;margin-bottom:1rem;text-shadow:var(--glow-orange)}.notice-content p{color:var(--text-secondary);margin-bottom:1.5rem;font-size:1.1rem;line-height:1.4}.neon-button.large{padding:1rem 3rem;font-size:1.2rem;border-radius:12px;min-height:44px}@keyframes pulseGlow{0%,to{box-shadow:var(--shadow-glass),0 0 20px #ff6b354d}50%{box-shadow:var(--shadow-glass),0 0 30px #ff6b3599}}@media (max-width: 768px){.audio-notice{padding:1.5rem;border-radius:15px}.notice-content h3{font-size:1.3rem}.notice-content p{font-size:1rem}.neon-button.large{padding:.8rem 2rem;font-size:1rem}}@media (max-width: 480px){.audio-notice{padding:1rem;margin-bottom:1rem}.notice-content h3{font-size:1.1rem}.notice-content p{font-size:.9rem;margin-bottom:1rem}.neon-button.large{padding:.7rem 1.5rem;font-size:.9rem;width:100%;max-width:250px}}.piano-container{flex:1;display:flex;flex-direction:column;justify-content:center;padding:1rem;width:100%;min-height:60vh}.piano-wrapper{background:var(--bg-glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;border:var(--border-glass);box-shadow:var(--shadow-glass);padding:1.5rem;margin-bottom:2rem;width:100%;overflow-x:auto;overflow-y:hidden}.piano-keyboard{display:flex;justify-content:center;align-items:flex-start;min-height:280px;height:280px;position:relative;-webkit-user-select:none;user-select:none;width:100%;min-width:1200px;margin:0 auto;padding:0 1rem}.piano-key{position:relative;cursor:pointer;transition:all .15s ease;border-radius:0 0 12px 12px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:1rem;font-size:.75rem;font-weight:700;border:2px solid transparent;box-shadow:0 4px 8px #0003}.piano-key.white{width:52px;height:280px;background:linear-gradient(180deg,#fff,#f8f8f8);border:2px solid #ddd;border-bottom:3px solid #ccc;border-radius:0 0 12px 12px;margin:0 1px;color:var(--bg-primary);z-index:1;box-shadow:0 4px 8px #00000026,inset 0 1px #fffc;align-self:stretch}.piano-key.white:hover{background:linear-gradient(180deg,#f0f0f0,#e8e8e8);border-color:var(--neon-orange);box-shadow:0 0 15px #ff6b3566,0 6px 12px #0003,inset 0 1px #ffffffe6;transform:translateY(2px)}.piano-key.white.active{background:linear-gradient(180deg,var(--accent-orange) 0%,var(--neon-orange) 100%);color:var(--text-primary);box-shadow:var(--glow-orange-strong),0 2px 4px #0000004d,inset 0 -2px 4px #0003;transform:translateY(4px);border-color:var(--dark-orange)}.piano-key.black{width:32px;height:180px;background:linear-gradient(180deg,#3a3a3a,#0a0a0a);border:2px solid #555;border-bottom:3px solid #000;border-radius:0 0 8px 8px;margin:0 -16px;color:var(--text-primary);z-index:2;font-size:.65rem;box-shadow:0 6px 12px #0006,inset 0 1px #ffffff1a;align-self:flex-start}.piano-key.black:hover{background:linear-gradient(180deg,#505050,#202020);border-color:var(--neon-orange);box-shadow:0 0 15px #ff6b3599,0 8px 16px #00000080,inset 0 1px #fff3;transform:translateY(2px)}.piano-key.black.active{background:linear-gradient(180deg,var(--neon-orange) 0%,var(--dark-orange) 100%);box-shadow:var(--glow-orange-strong),0 4px 8px #00000080,inset 0 -2px 4px #0000004d;transform:translateY(4px);border-color:var(--dark-orange)}.key-info{text-align:center;margin-bottom:2rem}.current-note{background:var(--bg-glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:var(--border-glass);border-radius:15px;padding:1rem 2rem;display:inline-block;box-shadow:var(--shadow-glass)}#current-note-display{font-size:1.5rem;font-weight:700;color:var(--neon-orange);text-shadow:var(--glow-orange)}.info-panel{background:var(--bg-glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:var(--border-glass);box-shadow:var(--shadow-glass);padding:2rem}.info-content{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}.info-section h3{color:var(--neon-orange);font-size:1.1rem;margin-bottom:.5rem;text-shadow:var(--glow-orange)}.info-section p{color:var(--text-secondary);font-size:.9rem;line-height:1.4;margin-bottom:.3rem}.copyright-section{border-top:var(--border-glass);padding-top:1.5rem;margin-top:1.5rem;text-align:center}.copyright-section p{color:var(--text-muted);font-size:.8rem;font-weight:400;letter-spacing:.5px}.loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--bg-primary);display:flex;justify-content:center;align-items:center;z-index:1000;transition:opacity .5s ease}.loading-content{text-align:center;max-width:400px}.loading-spinner{width:60px;height:60px;border:3px solid rgba(255,107,53,.3);border-top:3px solid var(--neon-orange);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 2rem;box-shadow:var(--glow-orange)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-content h2{color:var(--neon-orange);font-size:1.8rem;margin-bottom:1rem;text-shadow:var(--glow-orange)}.loading-content p{color:var(--text-secondary);margin-bottom:2rem}.loading-progress{width:100%;height:6px;background:var(--bg-glass);border-radius:3px;overflow:hidden;border:var(--border-glass)}.loading-bar{height:100%;background:linear-gradient(90deg,var(--neon-orange),var(--accent-orange));width:0%;transition:width .3s ease;box-shadow:var(--glow-orange)}@media (max-width: 1400px){.piano-keyboard{min-width:1000px}.piano-key.white{width:45px;height:260px}.piano-key.black{width:28px;height:165px;margin:0 -14px}.controls-panel{gap:1.5rem}}@media (max-width: 1200px){.piano-keyboard{min-width:900px;height:240px;min-height:240px;align-items:flex-start}.piano-key.white{width:40px;height:240px;font-size:.7rem;align-self:stretch}.piano-key.black{width:25px;height:150px;margin:0 -12px;font-size:.6rem;align-self:flex-start}.controls-panel{gap:1rem;flex-wrap:wrap}.app-title{font-size:1.5rem}.piano-container,.piano-wrapper{padding:1rem}}@media (max-width: 992px){.header-content{flex-direction:column;gap:1rem;text-align:center}.logo-section{justify-content:center}.app-logo{height:45px}.piano-keyboard{min-width:800px;height:220px;min-height:220px}.piano-key.white{width:36px;height:220px}.piano-key.black{width:22px;height:135px;margin:0 -11px}.controls-panel{justify-content:center}.info-content{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.app-title{font-size:1.3rem}.app-logo{height:40px}.logo-section{gap:.75rem}.title-text,.title-accent{display:block;line-height:1.2}.piano-container{padding:.5rem;min-height:50vh}.piano-wrapper{padding:.5rem;border-radius:15px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.piano-keyboard{min-width:700px;height:200px;min-height:200px;padding:0 .5rem;align-items:flex-start}.piano-key.white{width:32px;height:200px;font-size:.65rem;padding-bottom:.5rem;align-self:stretch}.piano-key.black{width:20px;height:125px;margin:0 -10px;font-size:.55rem;align-self:flex-start}.controls-panel{flex-direction:column;gap:.75rem}.control-group{flex-direction:row;align-items:center;gap:1rem;justify-content:space-between;width:100%;max-width:300px}.control-group label{min-width:70px;text-align:left;font-size:.75rem}.slider{width:120px}.neon-button{padding:.6rem 1.2rem;font-size:.8rem}.info-content{grid-template-columns:1fr;gap:1rem;text-align:center}.info-section p{font-size:.8rem}.current-note{padding:.75rem 1.5rem}#current-note-display{font-size:1.2rem}}@media (max-width: 480px){.header{padding:.75rem 1rem}.app-title{font-size:1.1rem}.app-logo{height:35px}.logo-section{gap:.5rem;flex-direction:column}.piano-container{padding:.25rem}.piano-wrapper{padding:.25rem;margin-bottom:1rem}.piano-keyboard{min-width:600px;height:180px;min-height:180px;padding:0 .25rem}.piano-key.white{width:28px;height:180px;font-size:.6rem;border-radius:0 0 8px 8px}.piano-key.black{width:18px;height:110px;margin:0 -9px;font-size:.5rem;border-radius:0 0 6px 6px}.control-group{flex-direction:column;gap:.5rem;text-align:center}.control-group label{min-width:auto;text-align:center;font-size:.7rem}.slider{width:100px}.neon-button{padding:.5rem 1rem;font-size:.75rem}.current-note{padding:.5rem 1rem}#current-note-display{font-size:1rem}.info-panel{padding:1rem}.info-section h3{font-size:1rem}.info-section p{font-size:.75rem;line-height:1.3}}@media (max-width: 360px){.piano-keyboard{min-width:500px;height:160px;min-height:160px}.piano-key.white{width:24px;height:160px;font-size:.55rem}.piano-key.black{width:15px;height:100px;margin:0 -7px;font-size:.45rem}.app-title{font-size:1rem}.neon-button{padding:.4rem .8rem;font-size:.7rem}}.piano-wrapper::-webkit-scrollbar{height:8px}.piano-wrapper::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:4px}.piano-wrapper::-webkit-scrollbar-thumb{background:var(--neon-orange);border-radius:4px;box-shadow:var(--glow-orange)}.piano-wrapper::-webkit-scrollbar-thumb:hover{background:var(--accent-orange)}@media (hover: none){.piano-key{min-height:44px}.piano-key.white:active{background:linear-gradient(180deg,var(--accent-orange) 0%,var(--neon-orange) 100%);transform:translateY(3px)}.piano-key.black:active{background:linear-gradient(180deg,var(--neon-orange) 0%,var(--dark-orange) 100%);transform:translateY(3px)}}.piano-key.active{animation:keyPress .1s ease}.piano-key.recording{box-shadow:0 0 20px #ff0000b3;border-color:red}@keyframes keyPress{0%{transform:translateY(0)}50%{transform:translateY(3px)}to{transform:translateY(2px)}}.neon-button.recording{background:#f44;border-color:#f66;color:#fff;animation:pulse 1s infinite}@keyframes pulse{0%{box-shadow:0 0 10px #ff444480}50%{box-shadow:0 0 20px #f44c}to{box-shadow:0 0 10px #ff444480}}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideOut{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}.notification{font-family:var(--font-primary);font-weight:700;font-size:.9rem}.notification.error{color:#f44;border-color:#f44}.performance-metrics{position:fixed;bottom:20px;left:20px;background:var(--bg-glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:var(--border-glass);border-radius:8px;padding:1rem;font-size:.8rem;color:var(--text-secondary);z-index:100}.metric{margin-bottom:.25rem}.piano-key:hover:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,transparent,rgba(255,107,53,.1),transparent);border-radius:inherit;pointer-events:none}@media (max-width: 480px){.controls-panel{flex-direction:column;gap:.5rem}.control-group{flex-direction:row;align-items:center;gap:1rem}.control-group label{min-width:60px;text-align:left}.piano-key.white{width:20px;height:120px;font-size:.6rem}.piano-key.black{width:12px;height:72px;margin:0 -6px;font-size:.5rem}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--neon-orange);border-radius:4px;box-shadow:var(--glow-orange)}::-webkit-scrollbar-thumb:hover{background:var(--accent-orange)}