:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0b1120;--panel:#10192e;--panel-2:#15213a;--border:#94a3b82e;--text:#e5eefc;--muted:#93a4c7;--accent:#2563eb;--accent-2:#60a5fa;--success:#10b981;--error:#ef4444;--shadow:0 16px 48px #02061759;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}html,body{background:radial-gradient(circle at top, #2563eb29, transparent 36%), linear-gradient(180deg, #050816 0%, var(--bg) 100%);min-height:100%;color:var(--text);margin:0}body{padding:24px}button,input,select,textarea{font:inherit}.app-shell{gap:20px;max-width:1440px;margin:0 auto;display:grid}.hero,.panel{border:1px solid var(--border);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:var(--shadow);background:#0a0f1ed1;border-radius:24px}.hero{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px;padding:20px 24px;display:grid}.hero-copy{gap:12px;display:grid}.hero-brand{align-items:center;gap:14px;display:flex}.brand-mark{background:linear-gradient(135deg,#0f172a,#020617);border-radius:14px;place-items:center;width:44px;height:44px;display:grid;box-shadow:0 10px 24px #2563eb47}.eyebrow{text-transform:uppercase;letter-spacing:.16em;color:var(--accent-2);margin:0 0 4px;font-size:.75rem;font-weight:700}.hero h1{margin:0;font-size:clamp(1.5rem,2.6vw,2.35rem);line-height:1.08}.lede,.panel-header p,.field span,.status{color:var(--muted)}.lede{max-width:58ch;margin:0;font-size:.96rem;line-height:1.55}.hero-meta{flex-wrap:wrap;gap:10px;display:flex}.meta-pill{color:var(--text);background:#94a3b814;border:1px solid #94a3b824;border-radius:999px;align-items:center;padding:8px 12px;font-size:.84rem;display:inline-flex}.hero-actions{flex-wrap:wrap;justify-content:end;align-items:center;gap:10px;display:flex}.mobile-menu-toggle{display:none}.hero-action-buttons{flex-wrap:wrap;justify-content:end;align-items:center;gap:10px;display:flex}.export-dropdown{position:relative}.export-menu{border:1px solid var(--border);min-width:110px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:10;background:#0a0f1ef7;border-radius:14px;position:absolute;top:calc(100% + 6px);right:0;overflow:hidden}.export-menu button{text-align:left;width:100%;color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:0;padding:10px 16px;font-size:.92rem;display:block}.export-menu button:hover{background:#94a3b81a}.button{appearance:none;cursor:pointer;border:1px solid #0000;border-radius:999px;padding:12px 16px;transition:transform .15s,border-color .15s,background .15s}.compact-button{padding:10px 14px;font-size:.92rem}.button:hover{transform:translateY(-1px)}.button.primary{background:linear-gradient(135deg, var(--accent), #4f46e5);color:#fff}.button.secondary{color:var(--text);background:#94a3b814;border-color:#94a3b826}.workspace{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:20px;display:grid}.panel{padding:22px}.panel-header{justify-content:space-between;align-items:start;gap:16px;margin-bottom:18px;display:flex}.panel-header h2{margin:0 0 4px;font-size:1.1rem}.panel-header p{margin:0;font-size:.93rem;line-height:1.4}.field{gap:8px;display:grid}.field.compact{min-width:220px}.history-tools{justify-items:end;gap:10px;display:grid}.history-actions{flex-wrap:wrap;justify-content:end;gap:8px;display:flex}.history-meta{color:var(--muted);text-align:right;margin:0;font-size:.83rem}.management-bar{grid-template-columns:minmax(240px,1fr) auto;align-items:end;gap:14px;margin-bottom:16px;display:grid}.management-name-field{min-width:0}.management-actions{flex-wrap:wrap;justify-content:end;align-items:end;gap:8px;display:flex}.management-meta{text-align:left;margin-bottom:16px}.field span{font-size:.92rem}textarea{resize:vertical;width:100%;min-height:520px;color:var(--text);background:#081021;border:1px solid #94a3b82e;border-radius:18px;padding:18px;line-height:1.55}textarea:focus,select:focus,input:focus{outline-offset:2px;outline:2px solid #60a5fa8c}select,input[type=color],input[type=text],input[type=range]{width:100%}select,input[type=text],input[type=range]{color:var(--text);background:#091224;border:1px solid #94a3b82e;border-radius:12px;padding:12px}input[type=color]{background:0 0;border:1px solid #94a3b82e;border-radius:12px;min-height:48px;padding:4px}.preset-grid,.controls-grid,.theme-preset-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:18px;display:grid}.preset-bar{align-items:end;gap:8px;margin-top:18px;display:flex}.preset-select-field{flex:1;min-width:0}.icon-button{text-align:center;flex-shrink:0;min-width:42px;font-size:1.05rem;padding:10px 13px!important}.preset-card{color:var(--text);text-align:left;cursor:pointer;background:#0f172abf;border:1px solid #94a3b829;border-radius:18px;padding:14px}.preset-card strong{margin-bottom:6px;display:block}.preset-card span{color:var(--muted);font-size:.88rem;line-height:1.45}.preview-panel{flex-direction:column;display:flex}.preview-toolbar{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.zoom-btn{text-align:center;min-width:40px;padding:8px 10px!important;font-size:.88rem!important}.preview-frame{background-color:#0000;background-image:linear-gradient(45deg,#94a3b80d 25%,#0000 25%),linear-gradient(-45deg,#94a3b80d 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#94a3b80d 75%),linear-gradient(-45deg,#0000 75%,#94a3b80d 75%);background-position:0 0,0 12px,12px -12px,-12px 0;background-repeat:repeat,repeat,repeat,repeat;background-size:24px 24px;background-attachment:scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box;border:1px dashed #94a3b833;border-radius:20px;flex:1;min-height:520px;padding:18px;position:relative;overflow:auto}.preview-canvas{transform-origin:50%;place-items:center;min-height:480px;transition:transform .2s;display:grid}.preview-canvas svg{max-width:100%;height:auto}.empty-state,.error-card{background:#081021eb;border:1px solid #94a3b82e;border-radius:20px;width:min(100%,560px);padding:20px 22px}.empty-state{color:var(--muted);text-align:center}.error-card strong{color:#fca5a5;margin-bottom:10px;display:block}.error-card pre{white-space:pre-wrap;word-break:break-word;color:#fecaca;margin:0}.status{text-align:right;min-width:180px;font-size:.92rem}.status.success{color:#86efac}.status.error{color:#fca5a5}.controls-panel{margin-bottom:8px}.library-actions{align-items:center;gap:8px;display:flex}.settings-backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:20;background:#020617ad;position:fixed;inset:0}.settings-drawer{border:1px solid var(--border);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);width:min(440px,100vw - 24px);box-shadow:var(--shadow);z-index:30;background:#0a0f1ef2;border-radius:24px;align-content:start;gap:16px;padding:20px;display:grid;position:fixed;top:20px;bottom:20px;right:20px;overflow:auto}.settings-drawer-header{justify-content:space-between;align-items:start;gap:16px;display:flex}.settings-drawer-header h2{margin:0 0 6px}.settings-copy{color:var(--muted);margin:0;line-height:1.5}.fullscreen-overlay{z-index:50;background:var(--bg);flex-direction:column;display:flex;position:fixed;inset:0}.fullscreen-toolbar{border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#0a0f1ef2;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 20px;display:flex}.fullscreen-title{margin-right:auto;font-size:1rem;font-weight:700}.fullscreen-controls{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.fullscreen-canvas{background-color:#0000;background-image:linear-gradient(45deg,#94a3b80d 25%,#0000 25%),linear-gradient(-45deg,#94a3b80d 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#94a3b80d 75%),linear-gradient(-45deg,#0000 75%,#94a3b80d 75%);background-position:0 0,0 12px,12px -12px,-12px 0;background-repeat:repeat,repeat,repeat,repeat;background-size:24px 24px;background-attachment:scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box;flex:1;place-items:center;padding:40px;display:grid;overflow:auto}.fullscreen-canvas svg{max-width:100%;height:auto;transition:transform .2s}.toast-container{z-index:100;pointer-events:none;gap:10px;display:grid;position:fixed;bottom:24px;right:24px}.toast{border:1px solid var(--border);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:var(--text);pointer-events:auto;background:#0a0f1ef2;border-radius:16px;align-items:center;gap:10px;max-width:380px;padding:14px 20px;font-size:.92rem;animation:.3s forwards toast-in;display:flex;box-shadow:0 8px 24px #0000004d}.toast.toast-out{animation:.25s forwards toast-out}.toast.success{border-color:#10b98159}.toast.error{border-color:#ef444459}.toast-icon{flex-shrink:0;font-size:1.1rem}@keyframes toast-in{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes toast-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(16px)}}.site-footer{color:var(--muted);padding:8px 8px 4px;font-size:.93rem;line-height:1.6}.site-footer p{margin:0}.site-footer a{color:var(--accent-2);text-decoration:none}.site-footer a:hover{text-decoration:underline}.shortcuts-hint{opacity:.7;font-size:.82rem;margin-top:6px!important}.shortcuts-hint kbd{background:#94a3b814;border:1px solid #94a3b840;border-radius:5px;padding:2px 6px;font-family:inherit;font-size:.78rem;display:inline-block}.controls-layout{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;display:grid}.control-card{background:#08102194;border:1px solid #94a3b824;border-radius:20px;padding:18px}.control-card-header{margin-bottom:8px}.control-card h3{margin:0 0 4px;font-size:1rem}.control-card p{color:var(--muted);margin:0;font-size:.9rem;line-height:1.45}.theme-preset-button{appearance:none;color:var(--text);text-align:left;cursor:pointer;background:#0f172ad1;border:1px solid #94a3b829;border-radius:16px;padding:14px;transition:transform .15s,border-color .15s,box-shadow .15s}.theme-preset-button:hover{border-color:#60a5fa52;transform:translateY(-1px)}.theme-preset-button.active{border-color:#60a5fabf;box-shadow:0 0 0 1px #60a5fa47}.theme-preview-row{gap:8px;margin-bottom:12px;display:flex}.theme-swatch{border:1px solid #ffffff1f;border-radius:999px;width:22px;height:22px}.theme-swatch.large{border-radius:999px;width:52px}.theme-preset-button strong{margin-bottom:6px;display:block}.theme-preset-button span{color:var(--muted);font-size:.86rem;line-height:1.4}.save-library-card{gap:14px;display:grid}.save-library-form{gap:12px;display:grid}.saved-diagrams-list{gap:10px;display:grid}.saved-diagram-card{background:#0f172ab8;border:1px solid #94a3b824;border-radius:16px;gap:10px;padding:14px;display:grid}.saved-diagram-head{justify-content:space-between;align-items:start;gap:12px;display:flex}.saved-diagram-head strong{display:block}.saved-diagram-head span,.saved-diagram-source{color:var(--muted);font-size:.84rem}.saved-diagram-source{margin:0;line-height:1.45}.saved-diagram-actions{flex-wrap:wrap;gap:8px;display:flex}.empty-library{color:var(--muted);background:#0810217a;border:1px dashed #94a3b82e;border-radius:16px;margin:0;padding:16px}@media (width<=1120px){.workspace{grid-template-columns:1fr}.hero{grid-template-columns:1fr;justify-items:start}.history-tools{justify-items:start;width:100%}.history-actions,.history-meta{text-align:left;justify-content:start}.management-bar{grid-template-columns:1fr}.management-actions{justify-content:start}.controls-layout{grid-template-columns:1fr}}.help-modal{width:min(560px,100vw - 24px)}.help-code{color:var(--accent-2);white-space:pre;background:#050a18b8;border:1px solid #94a3b824;border-radius:14px;margin:12px 0 0;padding:14px 16px;font-size:.84rem;line-height:1.55;overflow-x:auto}.help-list{color:var(--muted);margin:12px 0 0;padding-left:20px;font-size:.88rem;line-height:1.65}.help-list li{margin-bottom:4px}.help-list code,.help-list kbd{color:var(--accent-2);background:#94a3b814;border:1px solid #94a3b838;border-radius:5px;padding:1px 5px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.82rem}.help-list a{color:var(--accent-2);text-decoration:none}.help-list a:hover{text-decoration:underline}@media (width<=720px){body{padding:14px}.panel{border-radius:18px;padding:18px}.hero-lede,.hero-meta,.panel-header p,.management-meta{display:none}.mobile-menu-toggle{display:flex}.hero-action-buttons{width:100%;display:none}.hero-action-buttons.menu-open{flex-direction:column;align-items:stretch;display:flex}.hero-action-buttons.menu-open button{justify-content:center;width:100%}.settings-drawer{border-radius:18px;width:calc(100vw - 24px);padding:16px;top:12px;bottom:12px;right:12px}textarea{min-height:360px}.preview-toolbar{flex-wrap:wrap}.library-actions{flex-direction:column}.help-modal{width:calc(100vw - 24px)}.fullscreen-toolbar{gap:6px;padding:10px 14px}.fullscreen-title{white-space:nowrap;text-overflow:ellipsis;flex:auto;min-width:0;font-size:.9rem;overflow:hidden}.fullscreen-controls{border-top:1px solid var(--border);order:1;justify-content:center;width:100%;padding-top:4px}}