:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg-primary:#1e293b;--bg-secondary:#0f172a;--bg-sidebar:#0f172a;--border-color:#334155;--text-primary:#f8fafc;--text-secondary:#94a3b8;--accent-color:#3b82f6;--accent-hover:#2563eb;--danger-color:#ef4444;--success-color:#10b981;--input-bg:#1e293b;box-sizing:border-box;width:100%;height:100%;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5;overflow:hidden}body{background-color:var(--bg-secondary);width:100vw;height:100vh;color:var(--text-primary);margin:0;padding:0;overflow:hidden}#root{width:100vw;height:100vh;display:flex}.app-container{width:100%;height:100%;display:flex}.viewport-container{background-color:#f8fafc;flex-grow:1;height:100%;position:relative}.sidebar{background-color:var(--bg-sidebar);border-right:1px solid var(--border-color);z-index:10;flex-direction:column;width:380px;min-width:380px;height:100%;display:flex;overflow-y:auto;box-shadow:2px 0 8px #0000004d}.sidebar-header{border-bottom:1px solid var(--border-color);padding:20px}.sidebar-header h1{color:var(--text-primary);align-items:center;gap:8px;margin:0;font-size:1.25rem;font-weight:600;display:flex}.sidebar-header p{color:var(--text-secondary);margin:4px 0 0;font-size:.85rem}.sidebar-content{flex-direction:column;gap:20px;padding:20px;display:flex}.section-title{text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);border-left:3px solid var(--accent-color);margin-bottom:12px;padding-left:8px;font-size:.9rem;font-weight:600}.control-group{border:1px solid var(--border-color);background-color:#1e293b80;border-radius:6px;margin-bottom:15px;padding:14px}.grid-3{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.input-field{flex-direction:column;gap:4px;display:flex}.input-field label{color:var(--text-secondary);font-size:.75rem;font-weight:500}.input-field input{background-color:var(--input-bg);border:1px solid var(--border-color);color:var(--text-primary);border-radius:4px;padding:6px 8px;font-family:monospace;font-size:.85rem}.input-field input:focus{border-color:var(--accent-color);outline:none}.btn{background-color:var(--accent-color);color:#fff;cursor:pointer;border:none;border-radius:4px;justify-content:center;align-items:center;gap:8px;padding:10px 16px;font-size:.9rem;font-weight:500;transition:background-color .2s;display:flex}.btn:hover{background-color:var(--accent-hover)}.btn-secondary{border:1px solid var(--border-color);color:var(--text-primary);background-color:#0000}.btn-secondary:hover{background-color:#ffffff0d}.status-panel{border-radius:4px;margin-top:10px;padding:10px 12px;font-size:.85rem}.status-info{color:#93c5fd;background-color:#3b82f61a;border:1px solid #3b82f64d}.status-warning{color:#fca5a5;background-color:#ef44441a;border:1px solid #ef44444d}.status-success{color:#6ee7b7;background-color:#10b9811a;border:1px solid #10b9814d}.help-text{color:var(--text-secondary);margin-top:6px;font-size:.8rem}.gizmo-controls{border:1px solid var(--border-color);z-index:5;background-color:#0f172acc;border-radius:6px;gap:4px;padding:8px;display:flex;position:absolute;top:16px;left:16px}.gizmo-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:6px 10px;font-size:.8rem}.gizmo-btn.active{background-color:var(--accent-color);color:#fff}.gizmo-btn:hover:not(.active){color:var(--text-primary);background-color:#ffffff14}.gizmo-separator{background-color:var(--border-color);width:1px;margin:2px 4px}