body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fafafa;color:#2d3748;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.6;margin:0}code{font-family:Inter,source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.container{margin:0 auto;max-width:1200px;padding:40px 20px}.header{margin-bottom:60px;text-align:center}.header h1{color:#1a202c;font-family:Playfair Display,serif;font-size:3rem;font-weight:600;letter-spacing:-.02em;margin-bottom:16px}.header p{color:#718096;font-size:1.125rem;font-weight:400;margin:0 auto;max-width:600px}.App{background:linear-gradient(135deg,#fdfcfb,#f7f6f4);min-height:100vh;padding:20px 0}.prompt-form{background:#fff;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;margin-bottom:40px;padding:40px}.form-group{margin-bottom:24px;margin-left:0;margin-right:0}.form-group label{color:#2d3748;display:block;font-size:.875rem;font-weight:500;letter-spacing:.05em;margin-bottom:8px;text-transform:uppercase}.prompt-input{background-color:#fafafa;border:2px solid #e2e8f0;border-radius:12px;box-sizing:border-box;color:#2d3748;font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace;font-size:16px;margin-left:0;margin-right:0;padding:16px;resize:vertical;transition:all .2s ease;width:100%}.prompt-input:focus{background-color:#fff;border-color:#4299e1;box-shadow:0 0 0 3px #4299e11a;outline:none}.prompt-input::placeholder{color:#a0aec0;font-style:italic}.generate-btn{background:linear-gradient(135deg,#943cc0,#6f19ad);border:none;border-radius:12px;box-shadow:0 4px 6px -1px #8b5cf633;color:#fff;cursor:pointer;font-family:Inter,inherit;font-size:16px;font-weight:600;padding:16px 32px;transition:all .2s ease}.generate-btn:hover:not(:disabled){background:linear-gradient(135deg,#af2999,#790731 100);box-shadow:0 8px 15px -3px #8b5cf64d;transform:translateY(-2px)}.generate-btn:disabled{box-shadow:none;cursor:not-allowed;opacity:.6;transform:none}.example-prompts{margin:20px 0}.example-prompts-label{color:#2d3748;font-size:.875rem;font-weight:500;letter-spacing:.05em;margin-bottom:12px;text-transform:uppercase}.example-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}.example-btn{align-items:center;background:linear-gradient(135deg,#f7f3e9,#ede0d3);border:none;border-radius:12px;box-shadow:0 4px 6px -1px #74421033;color:#744210;cursor:pointer;display:flex;font-family:Inter,inherit;font-size:.875rem;font-weight:600;gap:8px;padding:12px 16px;transition:all .2s ease}.example-btn:hover:not(:disabled){background:linear-gradient(135deg,#f5efd5,#e8d5c4);box-shadow:0 8px 15px -3px #7442104d;transform:translateY(-2px)}.example-btn:active{box-shadow:0 4px 6px -1px #74421033;transform:translateY(0)}.example-btn:disabled{box-shadow:none;cursor:not-allowed;opacity:.6;transform:none}.example-btn.selected{background:linear-gradient(135deg,#8b4513,#654321);box-shadow:0 4px 6px -1px #8b451366,inset 0 2px 4px #0003;color:#fff;font-weight:700;transform:translateY(1px)}.example-btn.selected:hover:not(:disabled){background:linear-gradient(135deg,sienna,#8b4513);box-shadow:0 6px 8px -1px #8b451380,inset 0 2px 4px #0003;color:#fff;transform:translateY(0)}.example-icon{font-size:1rem;line-height:1}.example-label{white-space:nowrap}.helper-hint{color:#666;font-family:Inter,inherit;font-size:.75rem;font-weight:400;margin-bottom:8px;margin-top:4px}.progress-section{background:#fff;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;margin-bottom:40px;padding:32px}.progress-bar{background-color:#e2e8f0;border-radius:6px;height:12px;margin-bottom:16px;overflow:hidden;width:100%}.progress-fill{background:linear-gradient(90deg,#943cc0,#6f19ad);border-radius:6px;height:100%;position:relative;transition:width .3s ease}.progress-fill:after{animation:move 1s linear infinite;background-image:linear-gradient(-45deg,#fff3 25%,#0000 0,#0000 50%,#fff3 0,#fff3 75%,#0000 0,#0000);background-size:20px 20px;bottom:0;content:"";left:0;position:absolute;right:0;top:0}@keyframes move{0%{background-position:0 0}to{background-position:20px 20px}}.progress-status{color:#4a5568;font-size:.875rem;font-weight:500;margin:0;text-align:center}.response-section{background:#fff;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;padding:40px}.response-section h3{border-bottom:2px solid #e2e8f0;color:#1a202c;font-family:Playfair Display,serif;font-size:1.5rem;font-weight:600;margin-bottom:24px;margin-top:0;padding-bottom:16px}.response-section p{color:#4a5568;font-size:.875rem;margin-bottom:8px}.midi-item{background:#fbfaf9;border:1px solid #f0efed;border-radius:12px;margin-bottom:20px;padding:24px}.midi-item h4{color:#2d3748;font-family:Playfair Display,serif;font-size:1.125rem;font-weight:600;margin-bottom:12px;margin-top:0}.midi-item p{color:#4a5568;font-size:.875rem;margin-bottom:16px}.play-btn{background:linear-gradient(135deg,#48bb78,#38a169);border:none;border-radius:8px;box-shadow:0 2px 4px -1px #48bb7833;color:#fff;cursor:pointer;font-family:Inter,inherit;font-size:14px;font-weight:500;padding:12px 24px;transition:all .2s ease}.play-btn:hover{background:linear-gradient(135deg,#38a169,#2f855a);box-shadow:0 4px 8px -1px #48bb784d;transform:translateY(-1px)}.midi-player-container{background:#fdfdfc;border:1px solid #f0efed;border-radius:12px;margin-bottom:20px;padding:20px}.midi-header{align-items:center;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;margin-bottom:16px}.midi-header h4{color:#2d3748;font-size:1.3rem;margin:0}.download-btn,.midi-header h4{font-family:Inter,inherit;font-weight:600}.download-btn{background:linear-gradient(135deg,#38a169,#2f855a);border:none;border-radius:8px;box-shadow:0 2px 4px -1px #38a16933;color:#fff;cursor:pointer;font-size:.875rem;padding:8px 16px;transition:all .2s ease}.download-btn:hover:not(:disabled){background:linear-gradient(135deg,#2f855a,#276749);box-shadow:0 4px 6px -1px #38a1694d;transform:translateY(-1px)}.download-btn:disabled{box-shadow:none;cursor:not-allowed;opacity:.6;transform:none}.midi-controls{margin-bottom:16px;padding:12px}.midi-controls,.midi-visualizer{background:#fbfaf9;border:1px solid #f0efed;border-radius:8px}.midi-visualizer{align-items:flex-end;display:flex;height:356px;justify-content:flex-start;overflow-x:hidden;overflow-y:visible;padding:32px 4px 4px;position:relative}midi-player{--primary-color:#031034!important;--secondary-color:#eb2f77!important;--player-background:#0000!important;--note-color:#031034!important;--note-color-active:#eb2f77!important}midi-visualizer{--primary-color:#031034!important;--secondary-color:#eb2f77!important;--visualizer-background:#0000!important;--note-color:#031034!important;--note-color-active:#eb2f77!important}midi-visualizer canvas,midi-visualizer svg{background-color:initial!important;margin:0!important;padding:0!important}midi-visualizer{align-items:center!important;display:flex!important;justify-content:flex-start!important;margin:0!important;padding:2px!important}midi-visualizer svg .note{fill:#031034!important}midi-visualizer svg .note.active{fill:#eb2f77!important}midi-visualizer canvas{filter:none!important}.instrument-controls{align-items:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffffe6;border-radius:6px;box-shadow:0 2px 4px #0000000d;display:flex;gap:8px;left:8px;max-width:calc(100% - 16px);padding:4px;position:absolute;top:8px;z-index:100000}.main-buttons{display:flex;flex-wrap:wrap;gap:4px}.instrument-controls-label{color:#4a5568;font-family:Inter,inherit;font-size:.7rem;font-weight:300;white-space:nowrap}.instrument-btn{align-items:center;background:#f8f9fa;border:none;border-radius:4px;color:#495057;cursor:pointer;display:flex;font-size:.7rem;font-weight:600!important;height:20px;justify-content:center;line-height:1;min-width:24px;padding:2px 6px;position:relative;text-align:center;transition:all .15s ease;-webkit-user-select:none;user-select:none}.floating-tooltip{background:#000000e6;border-radius:4px;color:#fff;font-size:.65rem;font-weight:400;opacity:0;padding:4px 8px;pointer-events:none;position:fixed;transition:opacity .2s ease;white-space:nowrap;z-index:999999}.floating-tooltip.visible{opacity:1}.floating-tooltip:after{border:3px solid #0000;border-top-color:#000000e6;content:"";left:50%;position:absolute;top:100%;transform:translateX(-50%)}.instrument-btn:hover{box-shadow:0 2px 4px #0000001a;transform:translateY(-1px)}.instrument-btn:not(.active):not(.instrument-btn-empty):hover{background-color:var(--active-color)!important;color:#fff!important;filter:brightness(1.1) saturate(1.2)!important;font-weight:600!important}.instrument-btn.active{box-shadow:0 1px 3px #0000001a;color:#fff;font-weight:600}.instrument-btn:not(.active){background:#6c757d1a!important;color:#6c757d;opacity:.6}.instrument-btn-all{background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;color:#495057!important;font-weight:600!important;margin-right:8px}.instrument-btn-all.active{background:linear-gradient(135deg,#28a745,#20c997)!important;color:#fff!important}.instrument-btn-all:not(.active){background:linear-gradient(135deg,#f8f9fa,#e9ecef)!important;color:#6c757d!important}.instrument-btn-all.subdued{background:linear-gradient(135deg,#a8d5a8,#8dc8d8)!important;color:#4a7c59!important;font-weight:600!important;opacity:.8!important}.instrument-btn-all.subdued:hover{background:linear-gradient(135deg,#28a745,#20c997)!important;color:#f8f9fa!important;opacity:1!important}.instrument-btn-empty{background:none!important;color:#8b8b8b!important;font-size:.7rem!important;font-weight:300!important;height:auto!important;margin-left:12px!important;min-width:auto!important;padding:4px 8px!important;text-decoration:underline!important;white-space:nowrap!important}.instrument-btn-empty:hover{color:#5a5a5a!important;transform:translateY(-1px)!important}.error-message{background:#fed7d7;border:1px solid #feb2b2;border-radius:8px;color:#c53030;margin-top:16px;padding:16px}.error-message p{font-weight:500;margin:0 0 8px}.error-message details{margin-top:8px}.error-message details summary{cursor:pointer;font-size:.875rem;font-weight:600}.error-message details p{background:#c530301a;border-radius:4px;font-family:Fira Code,monospace;font-size:.75rem;margin:4px 0;padding:8px}.loading-message{background:#bee3f8;border:1px solid #90cdf4;border-radius:8px;color:#2c5282;margin-top:16px;padding:16px;text-align:center}.loading-message p{font-weight:500;margin:0}.backend-status-message{background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;margin-bottom:24px;padding:24px;text-align:center}.backend-status-message p{color:#4a5568;font-size:1rem;font-weight:500;margin:0 0 16px}.backend-status-message.error{background:linear-gradient(135deg,#f7f3e9,#ede0d3);border-color:#d69e2e}.backend-status-message.error p{color:#744210}.backend-status-message.not-ready{background:linear-gradient(135deg,#f7f3e9,#ede0d3);border-color:#d69e2e}.backend-status-message.not-ready p{color:#744210}.backend-status-message.checking{background:#ebf8ff;border-color:#90cdf4}.backend-status-message.checking p{color:#2b6cb0}.backend-status-message.ready{background:#f0fff4;border-color:#9ae6b4}.backend-status-message.ready p{color:#22543d}.check-status-btn{background:linear-gradient(135deg,#8b4513,#654321);border:none;border-radius:8px;box-shadow:0 2px 4px -1px #8b451333;color:#fff;cursor:pointer;font-family:Inter,inherit;font-size:.875rem;font-weight:600;padding:12px 24px;transition:all .2s ease}.check-status-btn:hover{background:linear-gradient(135deg,sienna,#8b4513);box-shadow:0 4px 6px -1px #8b45134d;transform:translateY(-1px)}.check-status-btn:active{box-shadow:0 2px 4px -1px #8b451333;transform:translateY(0)}.status-buttons{align-items:center;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.go-to-static-btn{background:linear-gradient(135deg,#1e3a8a,#1e40af);border:none;border-radius:8px;box-shadow:0 2px 4px #1e3a8a4d;color:#fff;cursor:pointer;font-family:Inter,inherit;font-size:.875rem;font-weight:600;padding:12px 24px;transition:all .2s ease}.go-to-static-btn:hover{background:linear-gradient(135deg,#1e40af,#2563eb);box-shadow:0 4px 6px -1px #1e40af4d;color:#fff;transform:translateY(-1px)}.go-to-static-btn:active{box-shadow:0 2px 4px -1px #94a3b81a;transform:translateY(0)}@media (max-width:768px){.container{padding:20px 16px}.progress-section,.prompt-form,.response-section{padding:24px}.header h1{font-size:2rem}.midi-player-container{padding:16px}.midi-controls,.midi-visualizer{padding:8px}.example-buttons{justify-content:center}.example-btn{font-size:.8rem;padding:10px 14px}.download-btn{font-size:.75rem;gap:4px;padding:6px 10px}}.header-left{flex:1 1}.feedback-section-inline,.header-right{align-items:center;display:flex;gap:12px}.feedback-label{color:#4a5568;font-family:Inter,inherit;font-size:.875rem;font-weight:300;white-space:nowrap}.feedback-buttons-inline{align-items:center;display:flex;gap:8px}.feedback-btn-round{align-items:center;background:linear-gradient(135deg,#fff,#fdfdfc);border:none;border-radius:50%;box-shadow:0 2px 4px #0000001a;cursor:pointer;display:flex;font-size:1.2rem;height:36px;justify-content:center;overflow:visible;position:relative;transition:all .2s ease;width:36px}.feedback-btn-round:hover:not(:disabled){box-shadow:0 4px 12px #00000026;transform:scale(1.1)}.feedback-btn-round:disabled{background:linear-gradient(135deg,#fbfaf9,#f5f4f2);box-shadow:0 1px 2px #0000000d;cursor:not-allowed;opacity:.3;transform:none}.feedback-btn-round .feedback-text{background:#000c;border-radius:4px;bottom:-30px;color:#fff;font-size:.75rem;left:50%;opacity:0;padding:4px 8px;pointer-events:none;position:absolute;transform:translateX(-50%);transition:opacity .2s ease;white-space:nowrap;z-index:1000}.feedback-btn-round:hover .feedback-text{opacity:1}.feedback-btn-round.super-great{background:linear-gradient(135deg,#fff9e6,#ffecb3)}.feedback-btn-round.super-great:hover:not(:disabled){background:linear-gradient(135deg,#fffbf0,#fff176)}.feedback-btn-round.super-great.selected{background:linear-gradient(135deg,gold,#ffb300);box-shadow:0 0 0 3px #ffd7004d}.feedback-btn-round.good{background:linear-gradient(135deg,#e8f5e8,#c8e6c9)}.feedback-btn-round.good:hover:not(:disabled){background:linear-gradient(135deg,#f0f9f0,#4caf50)}.feedback-btn-round.good.selected{background:linear-gradient(135deg,#28a745,#1e7e34);box-shadow:0 0 0 3px #28a7454d}.feedback-btn-round.bad{background:linear-gradient(135deg,#f7f3e9,#ede0d3)}.feedback-btn-round.bad:hover:not(:disabled){background:linear-gradient(135deg,#faf7f5,#d4a574)}.feedback-btn-round.bad.selected{background:linear-gradient(135deg,#8b4513,#654321);box-shadow:0 0 0 3px #8b45134d}.feedback-status{margin-top:8px;text-align:center}.feedback-hint{color:#6c757d;font-size:.875rem;font-style:italic;margin:0}.feedback-message{align-items:center;display:flex;font-size:.7rem;height:1em;justify-content:center;margin:4px 0;text-align:center}.feedback-thanks{color:#4e4e4e;font-weight:500}.feedback-loading{color:#4e4e4e;font-style:italic;font-weight:300}.qualitative-feedback-btn{align-self:center;background:none;border:none;color:#8b8b8b;cursor:pointer;font-family:Inter,inherit;font-size:.8rem;font-weight:300;margin-left:0;margin-right:20px;padding:4px 8px;text-decoration:underline;transition:color .2s ease;white-space:nowrap}.qualitative-feedback-btn:hover:not(:disabled){color:#5a5a5a}.qualitative-feedback-btn:disabled{cursor:not-allowed;opacity:.5}.qualitative-feedback-section{background:#f8f7f5;border:1px solid #ebe9e6;border-radius:8px;box-sizing:border-box;margin-top:12px;padding:12px}.qualitative-feedback-textarea{background:#fff;border:1px solid #ced4da;border-radius:6px;box-sizing:border-box;font-family:Inter,inherit;font-size:.875rem;max-width:100%;min-height:60px;padding:8px 12px;resize:vertical;transition:border-color .2s ease;width:100%}.qualitative-feedback-textarea:focus{border-color:#4299e1;box-shadow:0 0 0 2px #4299e11a;outline:none}.qualitative-feedback-textarea:disabled{background:#f8f9fa;opacity:.7}.qualitative-feedback-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}.qualitative-submit-btn{background:linear-gradient(135deg,#48bb78,#38a169);border:none;border-radius:6px;color:#fff;cursor:pointer;font-family:Inter,inherit;font-size:.8rem;font-weight:500;padding:6px 16px;transition:all .2s ease}.qualitative-submit-btn:hover:not(:disabled){background:linear-gradient(135deg,#38a169,#2f855a);transform:translateY(-1px)}.qualitative-submit-btn:disabled{cursor:not-allowed;opacity:.5;transform:none}.qualitative-cancel-btn{background:#fbfaf9;border:1px solid #e8e6e3;border-radius:6px;color:#6c757d;cursor:pointer;font-family:Inter,inherit;font-size:.8rem;font-weight:500;padding:6px 16px;transition:all .2s ease}.qualitative-cancel-btn:hover:not(:disabled){background:#f5f4f2;border-color:#ddd9d6}.qualitative-cancel-btn:disabled{cursor:not-allowed;opacity:.5}@media (max-width:480px){.midi-header{align-items:stretch;flex-direction:column}.header-left,.header-right{justify-content:center;text-align:center}.header-right{gap:8px}.feedback-buttons-inline{gap:12px;justify-content:center}}.consent-overlay{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000080;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:1000}.consent-modal{animation:consentFadeIn .3s ease-out;background:#fff;border-radius:16px;box-shadow:0 25px 50px -12px #00000026,0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-height:90vh;max-width:600px;overflow-y:auto;width:100%}@keyframes consentFadeIn{0%{opacity:0;transform:scale(.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}.consent-header{border-bottom:1px solid #e2e8f0;margin-bottom:0;padding:26px 32px 18px;text-align:center}.consent-header h2{color:#1a202c;font-family:Playfair Display,serif;font-size:1.75rem;font-weight:600;letter-spacing:-.02em;margin:0 0 14px}.consent-content{padding:26px 32px}.consent-intro{color:#2d3748;font-size:1rem;font-weight:500;margin-bottom:18px;text-align:center}.consent-details{background:linear-gradient(135deg,#fdfcfb,#f7f6f4);border-radius:12px;box-shadow:0 8px 25px -5px #0000001a,0 4px 6px -1px #0000000d;margin-bottom:22px;padding:22px}.consent-details p{color:#4a5568;font-size:.875rem;line-height:1.6;margin-bottom:14px}.consent-details p:last-child{margin-bottom:0}.consent-details strong{color:#2d3748;font-weight:600}.consent-form{margin-top:24px}.consent-checkboxes{background:linear-gradient(135deg,#fdfcfb,#f7f6f4);border-radius:12px;box-shadow:0 8px 25px -5px #0000001a,0 4px 6px -1px #0000000d;margin-bottom:26px;padding:22px}.consent-checkbox-item{align-items:flex-start;background:#ffffff4d;border:1px solid #ffffff80;border-radius:10px;cursor:pointer;display:flex;gap:12px;margin-bottom:16px;padding:15px;transition:all .2s ease}.consent-checkbox-item:last-child{margin-bottom:0}.consent-checkbox-item:hover{background:#fff9;border-color:#4299e180;box-shadow:0 2px 8px -2px #0000001a}.consent-checkbox-item input[type=checkbox]{-webkit-appearance:none;appearance:none;background:#fff;border:2px solid #cbd5e0;border-radius:4px;cursor:pointer;flex-shrink:0;height:20px;margin-top:2px;position:relative;transition:all .2s ease;width:20px}.consent-checkbox-item input[type=checkbox]:checked{background:#4299e1;border-color:#4299e1}.consent-checkbox-item input[type=checkbox]:checked:after{color:#fff;content:"✓";font-size:14px;font-weight:700;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.consent-checkbox-item input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5}.checkbox-text{color:#2d3748;font-size:.875rem;font-weight:500;line-height:1.5}.consent-actions{align-items:center;display:flex;flex-direction:row;gap:20px;justify-content:center;text-align:center}.consent-submit-btn{background:linear-gradient(135deg,#4299e1,#3182ce);border:none;border-radius:12px;box-shadow:0 4px 6px -1px #4299e133;color:#fff;cursor:pointer;font-family:Inter,inherit;font-size:16px;font-weight:600;min-width:200px;padding:16px 32px;transition:all .2s ease}.consent-submit-btn.enabled:hover{background:linear-gradient(135deg,#3182ce,#2c5282);box-shadow:0 8px 15px -3px #4299e14d;transform:translateY(-2px)}.consent-submit-btn.disabled{background:#cbd5e0;box-shadow:none;cursor:not-allowed;opacity:.6;transform:none}.consent-bypass-btn{background:#0000;border:none;border-radius:8px;color:#718096;cursor:pointer;font-family:Inter,inherit;font-size:12px;font-weight:300;padding:10px;text-decoration:underline;transition:all .2s ease}.consent-bypass-btn:hover:not(:disabled){background:#f7fafc;color:#4a5568}.consent-bypass-btn:disabled{cursor:not-allowed;opacity:.5}.static-demo-section{text-align:center}.static-demo-message h3{color:#1a202c;font-family:Playfair Display,serif;font-size:1.5rem;font-weight:600;margin-bottom:16px}.static-demo-message p{color:#4a5568;font-size:1rem;line-height:1.6;margin-bottom:24px}.static-examples-placeholder{background:#f8f9fa;border:2px dashed #e2e8f0;border-radius:12px;margin-top:32px;padding:40px 24px}.static-examples-placeholder p{color:#718096;font-size:1rem;margin-bottom:8px}.static-examples-placeholder p:last-child{font-size:.875rem;font-style:italic;margin-bottom:24px}.return-to-consent-btn{background:linear-gradient(135deg,#4299e1,#3182ce);border:none;border-radius:10px;box-shadow:0 4px 6px -1px #4299e133;color:#fff;cursor:pointer;font-family:Inter,inherit;font-size:15px;font-weight:600;margin-top:8px;padding:14px 28px;transition:all .2s ease}.return-to-consent-btn:hover{background:linear-gradient(135deg,#3182ce,#2c5282);box-shadow:0 8px 15px -3px #4299e14d;transform:translateY(-2px)}.consent-footer{color:#718096;font-size:.75rem;font-style:italic;margin-bottom:0;margin-top:24px;text-align:center}@media (max-width:768px){.consent-overlay{padding:10px}.consent-modal{max-height:95vh}.consent-content,.consent-header{padding:24px 20px}.consent-header h2{font-size:1.5rem}.consent-checkboxes,.consent-details{padding:20px}.consent-checkbox-item{padding:12px}.consent-submit-btn{min-width:auto;width:100%}.static-demo-section{padding:24px}.static-examples-placeholder{padding:24px 16px}.return-to-consent-btn{font-size:14px;padding:12px 20px;width:100%}}.demo-mode-toggle{margin-bottom:0;margin-top:32px}.toggle-buttons{background:#f8f9fa;border:1px solid #e2e8f0;border-radius:16px;display:flex;gap:0;justify-content:center;margin:0 auto;max-width:500px;padding:6px}.toggle-btn{background:#0000;border:none;border-radius:10px;color:#718096;cursor:pointer;flex:1 1;font-family:Inter,inherit;font-size:1rem;font-weight:600;min-width:140px;padding:16px 32px;position:relative;transition:all .2s ease}.toggle-btn:hover:not(.active){background:#ffffff80;color:#4a5568}.toggle-btn:first-child{background:linear-gradient(135deg,#f7f3e9,#ede0d3);color:#744210}.toggle-btn:first-child:hover:not(.active){background:linear-gradient(135deg,#f5efd5,#e8d5c4);color:#744210}.toggle-btn:first-child.active{background:linear-gradient(135deg,#8b4513,#654321);box-shadow:0 2px 4px #8b45134d;color:#fff;transform:none}.toggle-btn:last-child{background:linear-gradient(135deg,#f8fafc,#f1f5f9);color:#64748b}.toggle-btn:last-child:hover:not(.active){background:linear-gradient(135deg,#f1f5f9,#e2e8f0);color:#475569}.toggle-btn:last-child.active{background:linear-gradient(135deg,#1e3a8a,#1e40af);box-shadow:0 2px 4px #1e3a8a4d;color:#fff;transform:none}.toggle-btn-content{align-items:center;display:flex;flex-direction:column;gap:2px;height:100%;justify-content:center;width:100%}.toggle-btn-main{font-size:1rem;font-weight:600;line-height:1.2}.toggle-btn-sub{font-size:.65rem;font-weight:400;line-height:1;opacity:.7;white-space:nowrap}.static-demo-section{background:#fff;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;padding:40px}.static-demo-header{border-bottom:2px solid #e2e8f0;margin-bottom:40px;padding-bottom:24px;text-align:left}.static-demo-header h3{color:#1a202c;font-family:Playfair Display,serif;font-size:1.75rem;font-weight:600;margin-bottom:12px;margin-top:0}.static-demo-header p{color:#4a5568;font-size:1rem;line-height:1.6;margin:0 auto 16px;max-width:80%}.dataset-link{color:#2a79b1;font-weight:inherit;text-decoration:none}.dataset-link:hover{color:#2a79b1;text-decoration:underline}.return-to-live-btn{background:linear-gradient(135deg,#8b4513,#654321);border:none;border-radius:10px;box-shadow:0 3px 6px #8b451333;color:#fff;cursor:pointer;font-family:Inter,inherit;font-size:.875rem;font-weight:600;padding:12px 24px;transition:all .2s ease}.return-to-live-btn:hover{background:linear-gradient(135deg,sienna,#8b4513);box-shadow:0 6px 12px #8b45134d;transform:translateY(-2px)}.comparison-selector{margin-bottom:32px}.selector-title{color:#2d3748;font-family:Inter,inherit;font-size:.875rem;font-weight:500;letter-spacing:.05em;margin-bottom:8px;text-align:left;text-transform:uppercase}.comparison-chips{flex-wrap:wrap;gap:14px;margin:0 auto;max-width:1200px}.comparison-chip,.comparison-chips{display:flex;justify-content:center}.comparison-chip{align-items:center;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:none;border-radius:12px;box-shadow:0 4px 6px -1px #94a3b81a;color:#64748b;cursor:pointer;font-family:Inter,inherit;font-size:.875rem;font-weight:600;gap:8px;padding:12px 16px;transition:all .2s ease}.comparison-chip:hover:not(.selected){background:linear-gradient(135deg,#f1f5f9,#e2e8f0);box-shadow:0 8px 15px -3px #94a3b833;color:#475569;transform:translateY(-2px)}.comparison-chip:active{box-shadow:0 4px 6px -1px #94a3b81a;transform:translateY(0)}.comparison-chip.selected{background:linear-gradient(135deg,#1e3a8a,#1e40af);box-shadow:0 4px 6px -1px #1e3a8a66,inset 0 2px 4px #0003;color:#fff;font-weight:700;transform:translateY(1px)}.comparison-chip.selected:hover{background:linear-gradient(135deg,#1e40af,#2563eb);box-shadow:0 6px 8px -1px #1e3a8a80,inset 0 2px 4px #0003;color:#fff;transform:translateY(0)}.comparison-display,.prompt-display{margin-bottom:32px}.prompt-label{display:block;font-family:Inter,inherit;font-weight:500;letter-spacing:.05em;margin-bottom:8px;text-transform:uppercase}.prompt-box,.prompt-label{color:#2d3748;font-size:.875rem;text-align:left}.prompt-box{-webkit-appearance:none;appearance:none;background-color:#fafafa;border:2px solid #e2e8f0;border-radius:12px;box-sizing:border-box;font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace;line-height:1.6;margin-left:0;margin-right:0;padding:16px;resize:none;width:100%}.audio-comparison{margin-bottom:24px}.comparison-row{grid-gap:24px;display:grid;gap:24px;grid-template-columns:repeat(3,1fr)}.model-audio-player{background:#fbfaf9;border:1px solid #f0efed;border-radius:12px;padding:20px;transition:all .2s ease}.model-audio-player:hover{border-color:#e2e8f0;box-shadow:0 4px 12px #0000001a;transform:translateY(-2px)}.model-header{border-bottom:1px solid #e2e8f0;margin-bottom:20px;padding-bottom:16px;text-align:center}.model-name{align-items:center;color:#64748b;display:flex;font-family:Inter,sans-serif;font-size:1rem;font-weight:500;height:1.5rem;justify-content:center;line-height:1.5rem;margin:0 0 6px;text-align:center}.model-name-midi-llm{color:#1a202c;font-family:Playfair Display,serif;font-size:1.25rem;font-weight:700}.model-description{color:#718096;font-family:Inter,inherit;font-size:.75rem;font-weight:500;margin:0}.audio-player-container{background:#f8f9fa;border:1px solid #e2e8f0;border-radius:8px;padding:16px;text-align:center}.simple-audio-player{border-radius:6px;height:40px;max-width:300px;outline:none;width:100%}.simple-audio-player:focus{outline:2px solid #4299e1;outline-offset:2px}.audio-placeholder-simple{color:#718096;padding:10px}.audio-icon{color:#718096;display:block;font-size:1.2rem;margin-bottom:8px}.audio-filename{color:#4a5568;font-family:Inter,inherit;font-size:.75rem;font-weight:500;margin:0 0 4px}.audio-placeholder-simple small{color:#a0aec0;font-size:.6875rem;font-style:italic}.static-demo-footer{border-top:1px solid #e2e8f0;padding-top:24px;text-align:center}.static-demo-footer .return-to-live-btn{margin-top:20px}.return-to-live-btn-large{background:linear-gradient(135deg,#8b4513,#654321);border:none;border-radius:12px;box-shadow:0 4px 8px #8b451333;color:#fff;cursor:pointer;font-family:Inter,inherit;font-size:1rem;font-weight:600;margin-top:20px;padding:18px 36px;transition:all .2s ease}.return-to-live-btn-large:hover{background:linear-gradient(135deg,sienna,#8b4513);box-shadow:0 8px 16px #8b45134d;transform:translateY(-2px)}.demo-note{color:#718096;font-size:.75rem;line-height:1.3;margin:0}@media (max-width:768px){.demo-mode-toggle{margin-top:24px}.toggle-buttons{margin:0;max-width:100%}.toggle-btn{font-size:.9rem;min-width:120px;padding:12px 20px}.toggle-btn-content{gap:1px}.toggle-btn-main{font-size:.9rem}.toggle-btn-sub{font-size:.55rem}.comparison-chips{gap:12px;max-width:100%}.comparison-chip{font-size:.8rem;padding:10px 14px}.comparison-row{gap:16px;grid-template-columns:1fr}.model-audio-player{padding:16px}.model-name{font-size:1rem}.simple-audio-player{height:35px;max-width:100%}.return-to-live-btn-large{font-size:1rem;padding:16px 28px}}
/*# sourceMappingURL=main.4a6a2e5f.css.map*/