body{color:var(--text-primary);-webkit-font-smoothing:antialiased;background-color:#fbfbfd;font-family:Inter,system-ui,sans-serif}.studio-title{letter-spacing:-.02em;font-family:Space Grotesk,sans-serif}.form-select,.form-input,.form-textarea{font-family:Inter,sans-serif;transition:all .2s;border:1px solid var(--border)!important;color:var(--text-primary)!important;border-radius:var(--radius-md)!important;background-color:#fff!important;outline:none!important}.form-select:focus,.form-input:focus,.form-textarea:focus{border-color:var(--accent-primary)!important;box-shadow:0 0 0 3px #4f46e51a!important}.custom-checkbox{appearance:none;border:1px solid var(--border);cursor:pointer;background-color:#fff;border-radius:4px;outline:none;flex-shrink:0;justify-content:center;align-items:center;width:18px;height:18px;transition:all .2s;display:inline-flex;position:relative}.custom-checkbox:checked{background-color:var(--accent-primary);border-color:var(--accent-primary)}.custom-checkbox:checked:after{content:"✓";color:#fff;font-size:11px;font-weight:700;position:absolute}.studio-card{border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff;padding:1.75rem;transition:all .22s;box-shadow:0 1px 3px #00000003}.studio-card:hover{border-color:#4f46e533}.tab-btn{color:var(--text-secondary);transition:var(--transition);white-space:nowrap;border-bottom:2px solid #0000;padding:.5rem 1rem;font-family:JetBrains Mono,monospace;font-size:.75rem;font-weight:500}.tab-btn.active{color:var(--accent-primary);border-bottom-color:var(--accent-primary);font-weight:600}.ide-container{border-radius:var(--radius-lg);border:1px solid #1e293b;flex-direction:column;display:flex;overflow:hidden;box-shadow:0 12px 40px #0f172a1f}.ide-header{background-color:#1e293b;border-bottom:1px solid #334155;justify-content:space-between;align-items:center;padding:.75rem 1.25rem;display:flex}.ide-dots{gap:6px;display:flex}.ide-dot{border-radius:50%;width:10px;height:10px}.ide-dot-red{background-color:#ef4444}.ide-dot-yellow{background-color:#f59e0b}.ide-dot-green{background-color:#10b981}.ide-viewport{white-space:pre;word-break:break-all;min-height:480px;max-height:720px;overflow:auto;color:#e2e8f0!important;background-color:#0f172a!important;padding:1.5rem!important;font-family:JetBrains Mono,monospace!important;font-size:.82rem!important;line-height:1.6!important}.navbar{border-bottom:1px solid var(--border);z-index:100;background:#fff;height:80px;position:sticky;top:0}.diagram-container{border-radius:var(--radius-lg);color:#e2e8f0;background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%);border:1px solid #334155;padding:1.5rem;font-family:Space Grotesk,sans-serif}.diagram-flow{flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem;margin-top:1rem;display:flex}.diagram-step{border-radius:var(--radius-md);text-align:center;background:#ffffff0d;border:1px solid #ffffff1a;min-width:100px;padding:.5rem .75rem;font-size:.72rem;transition:all .3s}.diagram-step.active{border-color:var(--accent-primary);background:#6366f126;box-shadow:0 0 12px #6366f14d}.diagram-arrow{color:var(--text-muted);font-weight:700}.tabs-scrollable::-webkit-scrollbar{height:4px}.tabs-scrollable::-webkit-scrollbar-thumb{background:#0000001a;border-radius:4px}@media (prefers-color-scheme:dark){:root{--bg-base:#0f172a!important;--bg-surface:#1e293b!important;--bg-card:#1e293b!important;--bg-card-hover:#1e2b4d!important;--text-primary:#f8fafc!important;--text-secondary:#cbd5e1!important;--text-muted:#64748b!important;--border:#334155!important}body{color:#f8fafc!important;background-color:#0f172a!important}.studio-card{background-color:#1e293b!important;border-color:#334155!important}.studio-card:hover{border-color:var(--accent-primary)!important}.form-select,.form-input,.form-textarea{color:#f8fafc!important;background-color:#0f172a!important;border-color:#334155!important}.custom-checkbox{background-color:#0f172a!important;border-color:#334155!important}.navbar{background:#0f172ad9!important;border-bottom-color:#334155!important}.navbar a{color:#f8fafc!important}.navbar div{color:#cbd5e1!important}footer{color:#cbd5e1!important;background-color:#0f172a!important;border-top-color:#334155!important}.tab-btn{color:#cbd5e1!important}.tab-btn.active{color:#818cf8!important;border-bottom-color:#818cf8!important}.diagram-step{background:#ffffff08!important;border-color:#ffffff14!important}.diagram-step.active{border-color:var(--accent-primary)!important;background:#6366f126!important;box-shadow:0 0 12px #6366f14d!important}.bg-white{background-color:#1e293b!important}.bg-gray-50{background-color:#0f172a!important}.text-gray-900{color:#f8fafc!important}.text-gray-500{color:#94a3b8!important}.text-gray-400{color:#64748b!important}.border-gray-100,.border-slate-100{border-color:#334155!important}}