:root{color-scheme:light;color:#213547;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f1f5f9;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}#root{width:100%;min-height:100vh}.control-panel{background:var(--bg-tertiary,#f8fafc);box-shadow:var(--shadow-sm,0 4px 6px -1px #0000001a);border:1px solid var(--border-color,#e2e8f0);border-radius:1rem;flex-direction:column;gap:1.5rem;max-width:400px;padding:2rem;transition:all .3s;display:flex}.input-group label,.slider-item label{color:var(--text-secondary,#475569);margin-bottom:.5rem;font-weight:600;transition:color .3s;display:block}.subject-input{border:1px solid var(--border-color,#cbd5e1);box-sizing:border-box;background:var(--bg-secondary,#fff);width:100%;color:var(--text-primary,#1e293b);border-radius:.5rem;padding:.75rem;font-size:1rem;transition:all .2s}.subject-input:focus{border-color:var(--accent-secondary,#3b82f6);outline:none;box-shadow:0 0 0 3px #3b82f61a}.slider-group{flex-direction:column;gap:1rem;display:flex}.slider-item input{cursor:pointer;width:100%}select{border:1px solid var(--border-color,#cbd5e1);background:var(--bg-secondary,#fff);width:100%;color:var(--text-primary,#1e293b);cursor:pointer;border-radius:.5rem;padding:.75rem;font-size:1rem;transition:all .2s}select:focus{border-color:var(--accent-secondary,#3b82f6);outline:none}.status-warning{border-radius:.5rem;align-items:center;gap:.5rem;padding:.75rem 1rem;font-size:.875rem;font-weight:500;transition:all .3s;display:flex}.status-warning.loading{background:var(--bg-primary,#dbeafe);color:var(--text-primary,#1e40af);border:1px solid var(--border-color,#bfdbfe)}.status-warning.error{color:#dc2626;background:#fee2e2e6;border:1px solid #fecacae6}.status-warning.warning{color:#b45309;background:#fef3c7e6;border:1px solid #fde68ae6}.warning-icon{font-size:1rem}.generate-btn{background:var(--accent-secondary,#3b82f6);color:#fff;cursor:pointer;border:none;border-radius:.5rem;padding:1rem;font-size:1rem;font-weight:700;transition:all .2s}.generate-btn:hover:not(:disabled){background:var(--accent-primary,#2563eb);transform:translateY(-1px);box-shadow:0 4px 6px -1px #3b82f64d}.generate-btn:disabled{background:var(--text-muted,#94a3b8);cursor:not-allowed;opacity:.7}.control-panel-actions{flex-direction:column;gap:.75rem;display:flex}.cancel-btn{color:#dc2626;cursor:pointer;background:#ef44441a;border:2px solid #dc2626;border-radius:.5rem;padding:.75rem 1rem;font-size:.875rem;font-weight:600;transition:all .2s}.cancel-btn:hover{background:#ef444433;transform:translateY(-1px);box-shadow:0 4px 6px -1px #ef44444d}.narrator{z-index:1000;align-items:flex-end;gap:1rem;transition:transform .3s ease-in-out;display:flex;position:fixed;bottom:2rem;right:2rem}.narrator.showing-quip{transform:scale(1.05)}.speech-bubble{background:var(--bg-secondary,#fff);box-shadow:var(--shadow-md,0 10px 15px -3px #0000001a);border:2px solid var(--accent-secondary,#3b82f6);max-width:250px;color:var(--text-primary,#1e293b);border-radius:1.5rem 1.5rem .2rem;padding:1rem 1.5rem;font-weight:500;transition:all .3s ease-in-out;position:relative}.speech-bubble.quip-bubble{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);border-color:#f59e0b;max-width:300px;animation:.3s ease-out pop}@keyframes pop{0%{transform:scale(.9)}50%{transform:scale(1.05)}to{transform:scale(1)}}.character{filter:drop-shadow(0 10px 8px #0000001a);user-select:none;font-size:4rem;animation:2s ease-in-out infinite bounce}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.model-status-dashboard{background:var(--bg-secondary,#fff);box-shadow:var(--shadow-sm,0 1px 3px #0000001a);border:1px solid var(--border-color,#e2e8f0);border-radius:.75rem;max-width:320px;padding:1.25rem;transition:all .3s}.dashboard-title{color:var(--text-primary,#1e293b);border-bottom:1px solid var(--border-color,#e2e8f0);margin:0 0 1rem;padding-bottom:.75rem;font-size:.875rem;font-weight:700;transition:all .3s}.capability-section,.model-section{margin-bottom:1rem}.capability-section:last-child,.model-section:last-child{margin-bottom:0}.capability-header,.model-header{color:var(--text-muted,#64748b);text-transform:uppercase;letter-spacing:.025em;align-items:center;gap:.5rem;margin-bottom:.5rem;font-size:.75rem;font-weight:600;transition:color .3s;display:flex}.webgpu-status{border-radius:.5rem;align-items:center;gap:.5rem;padding:.5rem .75rem;font-size:.875rem;font-weight:500;display:flex}.webgpu-status.supported{color:#166534;background:#dcfce7}.webgpu-status.unsupported{color:#991b1b;background:#fee2e2}.capability-details{background:var(--bg-tertiary,#f8fafc);border-radius:.5rem;margin-top:.5rem;padding:.5rem .75rem;transition:all .3s}.capability-item{color:var(--text-secondary,#64748b);justify-content:space-between;font-size:.75rem;transition:color .3s;display:flex}.capability-item .yes{color:#16a34a;font-weight:600}.capability-item .no{color:#dc2626;font-weight:600}.model-status{border-radius:.5rem;align-items:center;gap:.5rem;padding:.5rem .75rem;font-size:.875rem;font-weight:500;display:flex}.status-ready{color:#166534;background:#dcfce7}.status-loading{color:#1e40af;background:#dbeafe}.status-error{color:#991b1b;background:#fee2e2}.status-idle{color:#64748b;background:#f1f5f9}.status-text{flex:1}.icon-success{color:#16a34a}.icon-loading{color:#3b82f6;animation:1s linear infinite spin}.icon-error{color:#dc2626}@keyframes spin{to{transform:rotate(360deg)}}.progress-bar{background:#e2e8f0;border-radius:4px;height:8px;margin-top:.5rem;position:relative;overflow:hidden}.progress-fill{background:linear-gradient(90deg,#3b82f6,#8b5cf6);border-radius:4px;height:100%;transition:width .3s}.progress-text{color:#64748b;font-size:.625rem;font-weight:600;position:absolute;top:50%;right:.5rem;transform:translateY(-50%)}.device-info,.error-message,.warning-note{border-radius:.375rem;align-items:center;gap:.375rem;margin-top:.5rem;padding:.375rem .5rem;font-size:.75rem;display:flex}.device-info{color:#64748b;background:#f8fafc}.error-message{color:#991b1b;background:#fef2f2}.warning-note{color:#92400e;background:#fffbeb}.model-status-mini{gap:.5rem;display:flex}.status-indicator{border-radius:50%;width:10px;height:10px}.status-indicator.ready{background:#16a34a}.status-indicator.loading{background:#3b82f6;animation:1s ease-in-out infinite pulse}.status-indicator.error{background:#dc2626}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.speed-mode-section{background:var(--bg-tertiary,#f8fafc);border:1px solid var(--border-color,#e2e8f0);border-radius:.5rem;margin-bottom:1rem;padding:.75rem;transition:all .3s}.speed-mode-header{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}.speed-mode-toggle{cursor:pointer;color:var(--text-secondary,#64748b);background:0 0;border:none;border-radius:.25rem;justify-content:center;align-items:center;padding:.25rem;transition:all .2s;display:flex}.speed-mode-toggle:hover{background:var(--border-color,#e2e8f0);color:var(--accent-secondary,#3b82f6)}.speed-mode-toggle.active{color:var(--accent-success,#16a34a)}.speed-mode-toggle.active:hover{background:#16a34a1a}.speed-mode-description{color:#64748b;margin-bottom:.375rem;font-size:.75rem}.speed-mode-reason{color:#f59e0b;background:#fffbeb;border-radius:.25rem;align-items:center;gap:.375rem;padding:.25rem .5rem;font-size:.625rem;display:flex}.cache-section{background:var(--bg-primary,#f0f9ff);border:1px solid var(--border-color,#e0f2fe);border-radius:.5rem;margin-bottom:1rem;padding:.75rem;transition:all .3s}.cache-stats{justify-content:space-between;align-items:center;margin-top:.5rem;display:flex}.cache-count{color:#0369a1;font-size:.875rem;font-weight:600}.cache-clear-btn{color:#fff;cursor:pointer;background:#0ea5e9;border:none;border-radius:.25rem;padding:.25rem .5rem;font-size:.625rem;font-weight:600;transition:all .2s}.cache-clear-btn:hover{background:#0284c7}.cache-description{color:#64748b;margin-top:.375rem;font-size:.625rem}.active-model-badge{color:#1e40af;background:#dbeafe;border-radius:.25rem;margin-left:auto;padding:.125rem .375rem;font-size:.625rem;font-weight:600}.error-boundary{text-align:center;background:linear-gradient(135deg,#fef2f2 0%,#fff1f2 100%);border:2px dashed #fca5a5;border-radius:1rem;justify-content:center;align-items:center;min-height:400px;padding:3rem;display:flex}.error-content{max-width:400px}.error-icon{margin-bottom:1rem;font-size:3rem}.error-content h2{color:#1e293b;margin:0 0 .5rem;font-size:1.5rem;font-weight:700}.error-message{color:#64748b;margin-bottom:1.5rem;font-size:.875rem}.error-details{text-align:left;color:#e2e8f0;background:#1e293b;border-radius:.5rem;margin-bottom:1.5rem;padding:1rem;font-size:.75rem}.error-details summary{cursor:pointer;color:#fca5a5;margin-bottom:.5rem;font-weight:600}.error-details pre{white-space:pre-wrap;word-break:break-word;max-height:200px;margin:0;overflow-y:auto}.error-actions{justify-content:center;gap:.75rem;display:flex}.retry-btn,.back-btn{cursor:pointer;border:none;border-radius:.5rem;padding:.75rem 1.5rem;font-size:.875rem;font-weight:600;transition:all .2s}.retry-btn{color:#fff;background:#3b82f6}.retry-btn:hover{background:#2563eb;transform:translateY(-1px)}.back-btn{color:#475569;background:#f1f5f9}.back-btn:hover{background:#e2e8f0}:root{--bg-primary:#f1f5f9;--bg-secondary:#fff;--bg-tertiary:#f8fafc;--text-primary:#1e293b;--text-secondary:#475569;--text-muted:#94a3b8;--border-color:#e2e8f0;--accent-primary:#6366f1;--accent-secondary:#3b82f6;--accent-success:#10b981;--shadow-sm:0 1px 3px #0000001a;--shadow-md:0 10px 25px -5px #0000001a}html.dark-mode{--bg-primary:#0f172a;--bg-secondary:#1e293b;--bg-tertiary:#334155;--text-primary:#f1f5f9;--text-secondary:#cbd5e1;--text-muted:#64748b;--border-color:#475569;--accent-primary:#818cf8;--accent-secondary:#60a5fa;--accent-success:#34d399;--shadow-sm:0 1px 3px #0000004d;--shadow-md:0 10px 25px -5px #00000080}.app-container{background-color:var(--bg-primary);min-height:100vh;padding-bottom:5rem;font-family:Inter,system-ui,-apple-system,sans-serif;transition:background-color .3s,color .3s}.skip-link{color:#fff;z-index:9999;background:#1e293b;border-radius:.5rem;padding:.75rem 1.5rem;font-weight:600;text-decoration:none;transition:top .2s;position:absolute;top:-100%;left:50%;transform:translate(-50%)}.skip-link:focus{outline-offset:2px;outline:2px solid #3b82f6;top:1rem}#main-content:focus{outline:none}.app-header{background:var(--bg-secondary);box-shadow:var(--shadow-sm);justify-content:space-between;align-items:center;margin-bottom:3rem;padding:1rem 4rem;transition:background-color .3s,box-shadow .3s;display:flex}.logo{color:var(--text-primary);font-size:1.5rem;font-weight:800;transition:color .3s}.header-right{align-items:center;gap:1rem;display:flex}.header-btn{background:var(--accent-secondary);color:#fff;cursor:pointer;border:none;border-radius:.5rem;padding:.5rem 1rem;font-size:.875rem;font-weight:600;transition:all .2s}.header-btn:hover:not(:disabled){background:var(--accent-primary);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.header-btn:disabled{background:var(--text-muted);cursor:not-allowed;opacity:.5}.theme-btn{background:var(--bg-tertiary);border:2px solid var(--border-color);padding:.5rem .75rem;font-size:1.25rem}.theme-btn:hover:not(:disabled){background:var(--border-color)}.status-badge{background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border-color);border-radius:2rem;padding:.5rem 1rem;font-size:.875rem;font-weight:600;transition:all .3s}.app-main{align-items:flex-start;gap:3rem;max-width:1300px;margin:0 auto;padding:0 2rem;display:flex}.sidebar{flex-shrink:0;position:sticky;top:2rem}.content-area{flex:1;align-items:flex-start;gap:3rem;display:flex}@media (width<=1024px){.app-header{padding:1rem 2rem}.app-main{flex-direction:column;align-items:center;padding:0 1rem}.sidebar{width:100%;position:static}.content-area{flex-direction:column;align-items:center;width:100%}}