@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap";:root{--bg-main:#0a0b10;--bg-gradient:radial-gradient(circle at 50% -20%, #141b29 0%, #0a0b10 80%);--surface-card:#15171ea6;--surface-card-hover:#1b1e27bf;--surface-card-border:#363a4933;--surface-card-border-active:#2b6cee66;--text-primary:#f3f4f7;--text-secondary:#c4c9d4;--text-muted:#8d95a5;--accent-blue:#3969ef;--accent-blue-hover:#557ff1;--accent-blue-glow:#3969ef40;--accent-teal:#16c5ae;--accent-teal-hover:#18dcc2;--accent-teal-glow:#16c5ae40;--accent-purple:#874de6;--accent-purple-hover:#9967e9;--accent-purple-glow:#874de640;--accent-coral:#e23645;--accent-coral-glow:#e2364540;--font-sans:"Outfit", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;--radius-card:16px;--radius-input:10px;--backdrop-blur:blur(16px);--shadow-card:0 8px 32px 0 #0000005e;--transition-fast:.2s cubic-bezier(.4, 0, .2, 1);--transition-normal:.3s cubic-bezier(.4, 0, .2, 1)}*,:before,:after{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;padding:0}body{background:var(--bg-main);background-image:var(--bg-gradient);color:var(--text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;background-attachment:fixed;line-height:1.6;overflow-x:hidden}.app-container{flex-direction:column;min-height:100vh;padding-bottom:3rem;display:flex}.header{text-align:center;padding:3rem 1.5rem 1rem}.header h1{letter-spacing:-.05em;background:linear-gradient(135deg, #fff 30%, var(--accent-blue) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin:0;font-size:2.75rem;font-weight:800}.header p{color:var(--text-muted);margin:.5rem 0 0;font-size:1.1rem;font-weight:400}.module-grid{grid-template-columns:1fr;gap:1rem;width:100%;max-width:1400px;margin:0 auto;padding:1rem;display:grid}@media (width>=22.5em){.module-grid{gap:1.25rem;padding:1.25rem}}@media (width>=48em){.module-grid{gap:1.5rem;padding:1.5rem}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-main)}::-webkit-scrollbar-thumb{background:#2b2e3b;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent-blue)}.card{background:var(--surface-card);border:1px solid var(--surface-card-border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);-webkit-backdrop-filter:var(--backdrop-blur);min-width:0;transition:transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);flex-direction:column;padding:1.25rem;display:flex}@media (width>=48em){.card{padding:1.75rem}}.card:hover{border-color:var(--surface-card-border-active);background:var(--surface-card-hover);transform:translateY(-2px);box-shadow:0 12px 40px #00000073}.card h2{border-bottom:1px solid #ffffff0d;align-items:center;gap:.5rem;margin:0 0 1.25rem;padding-bottom:.75rem;font-size:1.35rem;font-weight:600;display:flex}.card h2 svg{color:var(--accent-blue)}.settings-hud{background:#101218cc;border:1px solid #2b6cee26;flex-direction:column;grid-column:1/-1;gap:1.25rem;padding:1.25rem;display:flex}@media (width>=48em){.settings-hud{flex-flow:wrap;justify-content:space-around;gap:2rem;padding:1.5rem}}.settings-hud .control-group{flex-direction:column;flex:200px;gap:.5rem;width:100%;display:flex}.control-label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-size:.85rem;font-weight:600}.settings-hud .control-input-wrapper{align-items:center;gap:1rem;display:flex}input[type=text],input[type=number],select{border:1px solid var(--surface-card-border);color:var(--text-primary);border-radius:var(--radius-input);font-size:.95rem;font-family:var(--font-sans);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);background:#0d0e1299;outline:none;width:100%;padding:.6rem .85rem}input[type=text]:focus,input[type=number]:focus,select:focus{border-color:var(--accent-blue);box-shadow:0 0 0 3px var(--accent-blue-glow)}input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{background:#21232ccc;border-radius:4px;height:6px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent-blue);width:18px;height:18px;transition:transform var(--transition-fast), background-color var(--transition-fast);box-shadow:0 0 8px var(--accent-blue-glow);border-radius:50%;margin-top:-6px}input[type=range]::-webkit-slider-thumb:hover{background:var(--accent-blue-hover);transform:scale(1.15)}.btn{background:var(--accent-blue);color:var(--text-primary);border-radius:var(--radius-input);font-size:.95rem;font-weight:600;font-family:var(--font-sans);cursor:pointer;transition:background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);border:none;justify-content:center;align-items:center;gap:.5rem;padding:.65rem 1.25rem;text-decoration:none;display:inline-flex}.btn:hover{background:var(--accent-blue-hover);box-shadow:0 0 15px var(--accent-blue-glow)}.btn:active{transform:scale(.97)}.btn-secondary{border:1px solid var(--surface-card-border);background:#21232c99}.btn-secondary:hover{border-color:var(--text-muted);box-shadow:none;background:#2b2e3bcc}.btn-accent{background:var(--accent-teal)}.btn-accent:hover{background:var(--accent-teal-hover);box-shadow:0 0 15px var(--accent-teal-glow)}.btn-danger{background:var(--accent-coral)}.btn-danger:hover{box-shadow:0 0 15px var(--accent-coral-glow);background:#e64d59}.calc-row{flex-wrap:wrap;align-items:flex-end;gap:1rem;margin-bottom:1rem;display:flex}.calc-group{flex-direction:column;flex:120px;gap:.4rem;min-width:0;display:flex}.calc-group label{color:var(--text-muted);font-size:.85rem;font-weight:500}.display-box{border:1px solid var(--surface-card-border);border-radius:var(--radius-input);text-align:center;font-family:var(--font-mono);color:var(--accent-teal);background:#0a0b0fcc;justify-content:center;align-items:center;gap:.5rem;margin-top:auto;padding:1rem;font-size:1.5rem;font-weight:600;display:flex;box-shadow:inset 0 2px 4px #00000080}.display-box.pulse{animation:80ms ease-out pulse-border}@keyframes pulse-border{0%{border-color:var(--accent-teal);box-shadow:0 0 10px var(--accent-teal-glow)}to{border-color:var(--surface-card-border);box-shadow:inset 0 2px 4px #00000080}}.metro-visualizer{justify-content:center;gap:.75rem;margin:1rem 0;display:flex}.metro-dot{border:1px solid var(--surface-card-border);background:#21232ccc;border-radius:50%;width:16px;height:16px;transition:background-color .1s ease-out,transform .1s ease-out}.metro-dot.active{background:var(--accent-coral);box-shadow:0 0 12px var(--accent-coral-glow);transform:scale(1.25)}.metro-dot.accent-beat.active{background:var(--accent-teal);box-shadow:0 0 12px var(--accent-teal-glow)}.table-container{border-radius:var(--radius-input);border:1px solid var(--surface-card-border);max-height:380px;margin-top:.5rem;overflow:auto}.delay-table{border-collapse:collapse;text-align:left;width:100%;font-size:.9rem}.delay-table th{color:var(--text-muted);border-bottom:2px solid var(--surface-card-border);z-index:10;background:#0c0d12e6;padding:.75rem 1rem;font-weight:600;position:sticky;top:0}.delay-table td{font-family:var(--font-mono);border-bottom:1px solid #ffffff08;padding:.65rem 1rem}.delay-table tr:hover td{background:#ffffff05}.delay-table td span.ms{color:var(--text-primary)}.delay-table td span.hz{color:var(--accent-purple)}.note-grid-container{border-radius:var(--radius-input);border:1px solid var(--surface-card-border);max-height:280px;overflow-y:auto}.note-row{border-bottom:1px solid #ffffff08;justify-content:space-between;padding:.5rem 1rem;display:flex}.note-row:nth-child(2n){background:#ffffff03}.note-row:hover{background:#ffffff08}.note-row .midi-num{color:var(--text-muted);font-family:var(--font-mono);width:40px}.note-row .note-name{font-weight:500}.note-row .freq-val{color:var(--accent-teal);font-family:var(--font-mono)}@media (width>=48em){.module-grid{grid-template-columns:repeat(2,1fr)}}@media (width>=68em){.module-grid{grid-template-columns:repeat(3,1fr)}}@media (width>=90em){.module-grid{grid-template-columns:repeat(4,1fr)}}