@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap";:root{--bg-primary:#000;--bg-secondary:#0a0a0c;--bg-tertiary:#121217;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#475569;--accent-primary:#6366f1;--accent-secondary:#8b5cf6;--accent-success:#22c55e;--accent-danger:#ef4444;--accent-warning:#f59e0b;--border-subtle:#ffffff0d;--border-strong:#ffffff1a;--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-full:9999px}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;min-height:100dvh;font-family:Outfit,sans-serif;line-height:1.5;overflow:hidden}.mono{font-family:JetBrains Mono,monospace}.app-container{background:radial-gradient(circle at 50% -20%,#1e1b4b 0%,#000 100%);flex-direction:column;min-height:100dvh;display:flex}.main-content{flex-direction:column;flex:1;width:100vw;height:100dvh;display:flex;position:relative;overflow:hidden}.glass-panel{-webkit-backdrop-filter:blur(16px);border-radius:var(--radius-lg);background:#121217cc;border:1px solid #ffffff0d;padding:3rem;box-shadow:0 10px 25px -5px #0000004d}.upload-area{border-radius:var(--radius-lg);text-align:center;cursor:pointer;background:#1c1c2466;border:2px dashed #ffffff1a;padding:4rem 2rem;transition:all .2s}.upload-area:hover,.upload-area.drag-active{border-color:var(--accent-primary);background:#6366f114}.shadow-glow{box-shadow:0 0 30px #6366f199}.floating-hud{z-index:50;pointer-events:none;background:linear-gradient(#000000e6 0%,#0000 100%);justify-content:space-between;align-items:center;width:100%;padding:1.5rem 2rem;display:flex;position:absolute;top:0;left:0}.floating-hud>*{pointer-events:auto}.glass-pill{-webkit-backdrop-filter:blur(12px);border-radius:var(--radius-full);background:#19192399;border:1px solid #ffffff14;align-items:center;gap:.75rem;padding:.5rem 1rem;display:flex;box-shadow:0 10px 25px -5px #00000080}.btn{border-radius:var(--radius-full);cursor:pointer;border:none;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-family:inherit;font-size:.95rem;font-weight:500;transition:all .2s;display:inline-flex}.btn-primary{background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));color:#fff;box-shadow:0 4px 15px #6366f166}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #6366f199}.btn-secondary{color:var(--text-primary);background:#ffffff1a;border:1px solid #ffffff1a}.btn-secondary:hover{background:#ffffff26;transform:translateY(-2px)}.pro-select{appearance:none;color:#fff;cursor:pointer;background:0 0;border:none;outline:none;font-size:.95rem;font-weight:500}.pro-select option{background:var(--bg-tertiary);color:#fff}.pro-input{appearance:none;color:#fff;border-radius:var(--radius-sm);background:#ffffff0d;border:1px solid #ffffff1a;outline:none;font-size:.95rem;font-weight:500;transition:all .2s}.pro-input:focus{border-color:var(--accent-primary);background:#ffffff1a}.score-container{z-index:10;flex-direction:column;flex:1;width:100%;min-height:0;padding:6rem 2rem 2rem;display:flex;position:relative;overflow:hidden auto}.score-title{text-align:center;width:100%;color:var(--text-primary);z-index:15;pointer-events:none;font-size:2rem;font-weight:600;position:absolute;top:5rem;left:0}.osmd-wrapper{filter:drop-shadow(0 0 20px #ffffff0d);width:100%;min-height:0;position:relative}.osmd-wrapper [fill=\#000000]{fill:#f8fafc!important}.osmd-wrapper [stroke=\#000000]{stroke:#f8fafc!important}.osmd-wrapper img,.osmd-wrapper svg{transition:opacity .2s}.readout{align-items:center;gap:.5rem;display:flex}.readout-label{text-transform:uppercase;color:var(--text-secondary);letter-spacing:.1em;font-size:.7rem}.readout-value{color:var(--accent-primary);text-shadow:0 0 10px #6366f180;font-family:JetBrains Mono,monospace;font-size:1rem;font-weight:700}.readout-value.success{color:var(--accent-success);text-shadow:0 0 10px #22c55e80}.badge{letter-spacing:.05em;text-transform:uppercase;align-items:center;gap:.375rem;font-size:.75rem;font-weight:600;display:inline-flex}.badge-connected{color:var(--accent-success);text-shadow:0 0 8px #22c55e66}.badge-disconnected{color:var(--accent-danger)}.piano-container{z-index:20;background:#000;border-top:1px solid #ffffff1a;flex-shrink:0;width:100%;height:16vh;min-height:100px;max-height:150px;position:relative}.piano-keyboard{width:100%;height:100%;display:flex;position:relative}.piano-key{transition:box-shadow .1s,filter .1s;position:relative}.white-key{z-index:1;background:#fff;border-right:1px solid #cbd5e1;border-radius:0 0 4px 4px;flex:1;height:100%}.white-key:last-child{border-right:none}.black-key{z-index:2;background:#1e293b;border-radius:0 0 3px 3px;width:1.35%;height:65%;position:absolute;top:0}.piano-key.status-expected{box-shadow:none!important}.white-key.status-expected{background:#818cf8}.black-key.status-expected{background:#4338ca}.piano-key.status-correct{box-shadow:none!important}.white-key.status-correct{background:#4ade80}.black-key.status-correct{background:#166534}.piano-key.status-wrong{box-shadow:none!important}.white-key.status-wrong{background:#f87171}.black-key.status-wrong{background:#991b1b}.text-red-500{color:#ef4444}.text-red-400{color:#f87171}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.w-4{width:1rem}.h-4{height:1rem}.w-5{width:1.25rem}.h-5{height:1.25rem}.w-12{width:3rem}.h-12{height:3rem}.mb-4{margin-bottom:1rem}.mx-auto{margin-left:auto;margin-right:auto}.text-2xl{font-size:1.5rem}.text-center{text-align:center}.absolute{position:absolute}.inset-0{inset:0}.z-10{z-index:10}.rounded-lg{border-radius:var(--radius-lg)}.bg-opacity-80{background-color:#000c}.bg-white{background-color:#fff}.animate-pulse{animation:2s ease-in-out infinite pulse}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}