@import"https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto+Condensed:wght@400;700&display=swap";:root{--rwth-blue-100: #00549f;--rwth-blue-75: #407fb7;--rwth-blue-50: #8ebae5;--rwth-blue-25: #c7ddf2;--rwth-blue-10: #e8f1fa;--rwth-black-100: #000000;--rwth-black-75: #646567;--rwth-black-50: #9c9e9f;--rwth-black-25: #cfd1d2;--rwth-black-10: #ecedee;--rwth-green-100: #57ab27;--rwth-orange-100: #f6a800;--rwth-red-100: #cc071e;--rwth-petrol-100: #006165;--aa-blue-dark: #253141;--aa-blue-light: #6788b6;--aa-dark-tint-10: #e9ebee;--aa-light-tint-15: #e1e7f0;--aa-line: #ccd4e0;--font-lfi: Arial, "Helvetica Neue", Helvetica, sans-serif;--aa-font-primary: "Poppins", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--aa-font-secondary: "Roboto Condensed", "Arial Narrow", system-ui, sans-serif}:root,[data-theme=lfi]{--surface: #ffffff;--text: var(--rwth-black-100);--muted: var(--rwth-black-75);--line: var(--rwth-black-25);--primary: var(--rwth-blue-100);--primary-hover: var(--rwth-blue-75);--focus-ring: var(--rwth-blue-50);--accent-soft: var(--rwth-blue-50);--hover-wash: var(--rwth-blue-10);--cta-disabled: var(--rwth-blue-25);--danger: var(--rwth-red-100);--listening: var(--rwth-green-100);--thinking: var(--rwth-petrol-100);--idle: var(--rwth-blue-50);--font-body: var(--font-lfi);--font-head: var(--font-lfi);--radius: 4px;--head-weight: 700}[data-theme=aa]{--surface: #ffffff;--text: var(--aa-blue-dark);--muted: #5a6675;--line: var(--aa-line);--primary: var(--aa-blue-dark);--primary-hover: var(--aa-blue-light);--focus-ring: var(--aa-blue-light);--accent-soft: var(--aa-blue-light);--hover-wash: var(--aa-light-tint-15);--cta-disabled: var(--aa-dark-tint-10);--danger: var(--rwth-red-100);--listening: var(--aa-blue-light);--thinking: var(--aa-blue-light);--idle: var(--aa-blue-light);--font-body: var(--aa-font-secondary);--font-head: var(--aa-font-primary);--radius: 8px;--head-weight: 600}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}@supports (height: 100dvh){html,body,#root{height:100dvh}}body{font-family:var(--font-body);background:var(--surface);color:var(--text);-webkit-font-smoothing:antialiased;overscroll-behavior:none}.app{height:100%;display:flex;flex-direction:column;background:var(--surface)}.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 26px;border-bottom:1px solid var(--line);background:var(--surface)}.brand{display:flex;align-items:center;gap:16px;min-width:0}.brand-logo{height:62px;margin:0 15px;width:auto;display:block;flex:none}.brand-text{min-width:0}.brand-text h1{margin:0;font-family:var(--font-head);font-size:18px;font-weight:var(--head-weight);line-height:1.2;color:var(--primary)}.brand-text p{margin:3px 0 0;font-size:13px;line-height:1.3;color:var(--muted)}.topbar-right{display:flex;align-items:center;gap:12px}.state-pill{display:inline-flex;align-items:center;gap:9px;flex:none;padding:7px 14px;border-radius:999px;font-size:13px;color:var(--text);background:var(--surface);border:1px solid var(--line)}.state-pill .dot{width:9px;height:9px;border-radius:50%;background:var(--rwth-black-50);flex:none}.state-speaking .dot{background:var(--primary)}.state-listening .dot{background:var(--listening)}.state-thinking .dot{background:var(--thinking)}.state-idle .dot,.state-initializing .dot{background:var(--idle)}.stage{position:relative;flex:1;min-height:0;background:var(--surface)}.stage canvas{display:block;touch-action:none}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:grid;place-items:center;padding:24px;background:#fff9}.overlay-card{width:min(440px,90vw);padding:32px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--accent-soft);text-align:left}.overlay-card h2{margin:0 0 12px;font-family:var(--font-head);font-size:22px;font-weight:var(--head-weight);color:var(--primary)}.overlay-card p{margin:0 0 24px;color:var(--text);line-height:1.5;font-size:15px}.cta{width:100%;padding:14px 20px;font-family:var(--font-head);font-size:15px;font-weight:var(--head-weight);color:#fff;background:var(--primary);border:1px solid var(--primary);border-radius:var(--radius);cursor:pointer;transition:background .12s ease,border-color .12s ease}.cta:hover:not(:disabled){background:var(--primary-hover);border-color:var(--primary-hover)}.cta:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}.cta:disabled{background:var(--cta-disabled);border-color:var(--cta-disabled);color:var(--muted);cursor:progress}.err{margin:16px 0 0!important;color:var(--danger)!important;font-size:13px!important;line-height:1.4;word-break:break-word}.controls{display:flex;gap:12px;justify-content:center;padding:16px;border-top:1px solid var(--line);background:var(--surface);height:85px}.ctrl{padding:11px 20px;font-family:var(--font-head);font-size:14px;font-weight:var(--head-weight);border-radius:var(--radius);cursor:pointer;color:var(--primary);background:var(--surface);border:1px solid var(--primary);transition:background .12s ease,color .12s ease,border-color .12s ease}.ctrl:hover{background:var(--hover-wash)}.ctrl:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}.ctrl.off{color:var(--muted);border-color:var(--line)}.ctrl.off:hover{background:var(--rwth-black-10)}.ctrl.danger{color:var(--danger);border-color:var(--danger)}.ctrl.danger:hover{background:var(--danger);color:#fff}.topbar-right{display:flex;align-items:center;gap:16px;flex:none}.theme-switch{display:inline-flex;flex:none;padding:3px;gap:3px;border-radius:999px;border:1px solid var(--line);background:var(--surface)}.theme-switch button{font-family:var(--font-head);font-size:12px;font-weight:var(--head-weight);line-height:1;padding:7px 12px;border:none;border-radius:999px;cursor:pointer;color:var(--muted);background:transparent;transition:background .12s ease,color .12s ease}.theme-switch button:hover:not([aria-pressed=true]){background:var(--hover-wash);color:var(--text)}.theme-switch button[aria-pressed=true]{color:#fff;background:var(--primary)}.theme-switch button:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}@media (max-width: 768px){.topbar{gap:16px;padding:12px 18px}.brand{gap:12px}.brand-logo{height:48px;margin:0 8px}.brand-text h1{font-size:16px}.brand-text p{font-size:12px}.topbar-right{gap:10px}}@media (max-width: 560px){.topbar{flex-direction:column;align-items:stretch;gap:12px;padding:12px 16px}.brand{gap:10px}.brand-logo{height:42px;margin:0 4px}.brand-text h1,.brand-text p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar-right{justify-content:space-between;gap:12px}.theme-switch{flex:1 1 auto;justify-content:center;min-width:0}.theme-switch button{flex:1 1 auto;padding:9px 10px;text-align:center}.state-pill{padding:9px 14px}.overlay{padding:16px}.overlay-card{width:100%;padding:24px 20px}.overlay-card h2{font-size:20px}.controls{flex-direction:column;gap:10px;padding:12px 16px;height:auto}.ctrl{width:100%;padding:14px 20px}}@media (max-width: 360px){.brand-text h1{font-size:15px}.theme-switch button{padding:9px 6px;font-size:11px}}.bg-dom{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;overflow:hidden}.bg-image{background-size:cover;background-position:center;transform-origin:center}.bg-parallax{perspective:1px}.parallax-layer{position:absolute;top:-8%;right:-8%;bottom:-8%;left:-8%;background-size:cover;background-position:center;will-change:transform}.icon-btn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:var(--radius);font-size:17px;cursor:pointer;color:var(--primary);background:var(--surface);border:1px solid var(--line);transition:background .12s ease,border-color .12s ease,color .12s ease}.icon-btn:hover{background:var(--hover-wash);border-color:var(--primary)}.icon-btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}.topbar-settings{transition:background .12s ease,border-color .12s ease,color .12s ease,transform .15s ease}.topbar-settings:hover{transform:rotate(30deg)}.panel-scrim{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;background:transparent;pointer-events:none}.panel-scrim.show{pointer-events:auto}.settings-panel{position:fixed;top:0;right:0;z-index:21;width:min(360px,92vw);height:100%;display:flex;flex-direction:column;background:var(--surface);border-left:1px solid var(--line);transform:translate(100%);transition:transform .28s cubic-bezier(.22,1,.36,1)}.settings-panel.open{transform:translate(0)}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}.panel-head h2{margin:0;font-family:var(--font-head);font-size:17px;font-weight:var(--head-weight);color:var(--primary)}.panel-body{flex:1;overflow-y:auto;padding:18px 20px 40px}.divider{height:1px;margin:16px 0;background:var(--line)}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.mode-chip{display:flex;flex-direction:column;gap:3px;padding:10px 11px;text-align:left;border-radius:var(--radius);cursor:pointer;color:var(--text);background:var(--surface);border:1px solid var(--line);transition:border-color .12s ease,background .12s ease,color .12s ease}.mode-chip:hover{background:var(--hover-wash)}.mode-chip.active{border-color:var(--primary);background:var(--hover-wash)}.mode-chip:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}.mode-name{font-family:var(--font-head);font-size:13.5px;font-weight:var(--head-weight)}.mode-chip.active .mode-name{color:var(--primary)}.mode-hint{font-size:11px;color:var(--muted);line-height:1.3}.field{display:flex;flex-direction:column;gap:8px;margin:14px 0}.field-row{flex-direction:row;align-items:center;justify-content:space-between}.field-label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--text)}.field-value{font-size:12px;color:var(--primary);font-variant-numeric:tabular-nums}.field input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;border-radius:999px;background:var(--line);outline:none}.field input[type=range]:focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px}.field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--primary);cursor:pointer}.field input[type=range]::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:var(--primary);cursor:pointer}.switch{position:relative;width:42px;height:24px;border-radius:999px;border:1px solid var(--line);cursor:pointer;background:var(--surface);transition:background .15s ease,border-color .15s ease;flex:0 0 auto}.switch.on{background:var(--primary);border-color:var(--primary)}.switch:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}.switch .knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--rwth-black-50);transition:transform .15s ease,background .15s ease}.switch.on .knob{background:#fff;transform:translate(18px)}.color-input{display:inline-flex;align-items:center;gap:8px}.color-hex{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}.color-input input[type=color]{width:30px;height:26px;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:none;cursor:pointer}.field select{padding:7px 10px;border-radius:var(--radius);font-family:var(--font-body);font-size:13px;color:var(--text);background:var(--surface);border:1px solid var(--line);cursor:pointer}.field select:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}.field-note{margin:4px 0 12px;font-size:12px;line-height:1.4;color:var(--muted)}.field-group-label{display:block;margin:16px 0 2px;font-family:var(--font-head);font-size:11px;font-weight:var(--head-weight);letter-spacing:.06em;text-transform:uppercase;color:var(--primary)}.reset-btn{width:100%;padding:10px;font-family:var(--font-head);font-size:13px;font-weight:var(--head-weight);border-radius:var(--radius);cursor:pointer;color:var(--primary);background:var(--surface);border:1px solid var(--primary);transition:background .12s ease,color .12s ease}.reset-btn:hover{background:var(--hover-wash)}.reset-btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}