*,:before,:after{box-sizing:border-box}*{margin:0}html{hanging-punctuation:first last}body{-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;min-height:100vh;line-height:1.5}img,picture,video,canvas,svg{max-width:100%;display:block}input,button,textarea,select{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer;background:0 0;border:none}
:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--surface-page:#eef2f7;--surface-base:#fff;--surface-elevated:#fff;--surface-muted:#f6f8fc;--surface-subtle:#eef3fb;--border-muted:#1118271f;--border-strong:#11182733;--text-primary:#111827;--text-secondary:#4b5b78;--text-muted:#6f7b92;--accent:#4a67ff;--accent-strong:#3f5af0;--accent-contrast:#fff;--font-family-base:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-family-mono:"SFMono-Regular", ui-monospace, monospace;--font-size-0:.8125rem;--font-size-1:.9375rem;--font-size-2:1rem;--font-size-3:1.125rem;--font-size-4:1.25rem;--font-size-5:1.5rem;--font-size-6:2rem;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-7:2rem;--space-8:3rem;--radius-1:.5rem;--radius-2:.75rem;--radius-3:1rem;--radius-4:1.5rem;--radius-round:999px;--shadow-1:0 8px 24px #0f172a0d;--shadow-2:0 18px 44px #0f172a1a;--container-width:1280px;--shell-header-height:4.25rem}
html,body{background:var(--surface-page);color:var(--text-primary);font-family:var(--font-family-base)}body{min-height:100vh}main{display:block}img{max-width:100%}.shell-page{background:var(--surface-page);min-height:100vh}.shell-container{width:min(100% - 3rem, var(--container-width));margin-inline:auto}.next-shell-body{min-height:100vh}@media (max-width:640px){.shell-container{width:min(100% - 1.5rem, var(--container-width))}}
.viz-area{background:var(--viz-area-bg);border-right:1px solid var(--border);flex-direction:column;height:100%;display:flex;overflow:hidden}.viz-header{border-bottom:1px solid var(--border);background:var(--viz-header-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);flex-shrink:0;justify-content:space-between;align-items:center;padding:4px 12px;display:flex}.viz-canvas{background:var(--viz-canvas-bg);flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.viz-canvas canvas{width:100%!important;height:100%!important}.view-toggle{background:var(--view-toggle-bg);border:1px solid var(--border);border-radius:8px;padding:3px;display:flex}.view-toggle button{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:5px 12px;font-size:11px;font-weight:500;transition:all .2s}.view-toggle button.active{color:var(--accent);background:#2463eb26;font-weight:600}.viz-canvas{position:relative}.viz-controls-overlay{z-index:10;flex-direction:column;gap:6px;display:flex;position:absolute;bottom:16px;right:16px}.viz-ctrl-btn{border:1px solid var(--border);border-radius:var(--radius2);background:var(--btn-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);width:40px;height:40px;color:var(--accent);cursor:pointer;justify-content:center;align-items:center;font-size:20px;font-weight:700;transition:all .2s;display:flex}.viz-ctrl-btn:hover{background:var(--btn-hover);border-color:var(--accent);transform:scale(1.05)}.viz-ctrl-btn:active{transform:scale(.95)}.dim-interactive{transition:all .2s}.dim-interactive line{pointer-events:none}.dim-badge{cursor:pointer;fill:#ffffffe6;stroke:#94a3b899;stroke-width:.8px;rx:4;transition:all .2s}.dim-interactive:hover .dim-badge{fill:#ebf3fff0;stroke:#4165f68c;stroke-width:1px}.dim-interactive:hover text{fill:#303c4b;font-weight:600}.dim-input-overlay{background:var(--dim-input-bg);border:1px solid var(--accent);color:var(--text);font-family:var(--font);text-align:center;width:80px;box-shadow:var(--shadow);z-index:100;border-radius:4px;outline:none;padding:4px 8px;font-size:12px;font-weight:600;position:absolute;transform:translate(-50%,-50%)}.plan-layout{flex-direction:column;justify-content:center;align-items:center;gap:12px;width:100%;height:100%;padding:10px 12px 14px;display:flex}.plan-stage{cursor:default;border-radius:14px;flex:1;justify-content:center;align-items:center;width:100%;min-height:0;display:flex;position:relative;overflow:hidden}.plan-stage.is-pannable{cursor:grab}.plan-stage.is-dragging{cursor:grabbing}.plan-stage.is-dragging,.plan-stage.is-dragging *{-webkit-user-select:none;user-select:none}.plan-viewport-content{transform-origin:50%;transition:none}.plan-svg{display:block}.section-layout{justify-content:center;align-items:center;width:100%;height:100%;padding:10px 12px 14px;display:flex}.section-stage{cursor:default;border-radius:14px;justify-content:center;align-items:center;width:100%;height:100%;min-height:0;display:flex;position:relative;overflow:hidden}.section-stage.is-pannable{cursor:grab}.section-stage.is-dragging{cursor:grabbing}.section-stage.is-dragging,.section-stage.is-dragging *{-webkit-user-select:none;user-select:none}.section-viewport-content{transform-origin:50%;transition:none}.section-svg{display:block}.plan-controls{background:var(--panel2);border:1px solid var(--border);border-radius:12px;flex-direction:row;justify-content:center;align-items:center;gap:12px;margin-top:0;padding:8px 14px;display:inline-flex}.plan-control-label{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;flex-direction:row;align-items:baseline;gap:4px;font-size:10px;font-weight:600;line-height:1.05;display:flex}.plan-control-label small{letter-spacing:.02em;margin-top:0;font-size:10px;font-weight:600}.plan-step-input{text-align:center;width:84px;height:32px;padding:0 8px;font-size:14px;font-weight:600}.placement-dimmer{z-index:50;pointer-events:none;background:#00000080;animation:.3s dimmerFadeIn;position:fixed;inset:0}@keyframes dimmerFadeIn{0%{opacity:0}to{opacity:1}}.placement-banner{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:60;color:#fff;box-shadow:var(--glow-md);background:#0f1729e6;border:1px solid #2463eb66;border-radius:12px;align-items:center;gap:12px;padding:10px 20px;font-size:13px;animation:.3s bannerSlideIn;display:flex;position:absolute;top:12px;left:50%;transform:translate(-50%)}@keyframes bannerSlideIn{0%{opacity:0;transform:translate(-50%)translateY(-10px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.placement-icon{font-size:18px}.placement-banner strong{color:var(--accent)}.viz-canvas{z-index:55}