:root{color:#e6edf3;background:#0b1117;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#app{height:100%;margin:0}body{overflow:hidden}button,textarea,select,input,summary{font:inherit;letter-spacing:0}button,summary,select,input[type=color],input[type=range]{cursor:pointer}.app-shell[data-workspace-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--surface-canvas:#0b1117;--surface-panel:#111820;--surface-raised:#18212b;--surface-editor:#0e151c;--surface-hover:#1d2934;--border:#293642;--border-strong:#3d4d5b;--text:#e6edf3;--text-muted:#8fa0af;--accent:#2dd4bf;--accent-strong:#14b8a6;--accent-soft:#113c3a;--danger:#fb7185;--danger-soft:#3d1d29;--warning:#f5b942;--warning-soft:#392d16;--focus:#67e8f9;--dot:#9fb0bf1f;--backdrop:#03080d94}.app-shell[data-workspace-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--surface-canvas:#f4f7f8;--surface-panel:#fff;--surface-raised:#edf2f4;--surface-editor:#fbfcfd;--surface-hover:#e4ecef;--border:#d5dde2;--border-strong:#aebcc5;--text:#17212b;--text-muted:#61717f;--accent:#0f9f8f;--accent-strong:#0f766e;--accent-soft:#d8f3ef;--danger:#e11d48;--danger-soft:#ffe4e9;--warning:#b7791f;--warning-soft:#fff4d6;--focus:#0e7490;--dot:#4754671a;--backdrop:#17212b47}.app-shell{min-width:0;height:100%;color:var(--text);background:var(--surface-canvas);grid-template-rows:56px minmax(0,1fr) 34px;display:grid}.topbar{background:var(--surface-panel);border-bottom:1px solid var(--border);grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px;min-width:0;padding:0 16px;display:grid}.brand{color:var(--text-muted);align-items:baseline;gap:5px;font-size:14px;display:flex}.brand strong{color:var(--text);font:700 18px/1 ui-monospace,SFMono-Regular,Consolas,monospace}.topbar-actions{justify-content:flex-end;align-items:center;gap:8px;min-width:0;min-height:36px;display:flex}.action-status{min-width:0;color:var(--text-muted);text-align:right;text-overflow:ellipsis;white-space:nowrap;flex:auto;font-size:12px;overflow:hidden}.topbar button,.topbar summary,.mobile-nav button,.style-drawer button,.style-drawer select{border:1px solid var(--border);min-height:34px;color:var(--text);background:var(--surface-raised);border-radius:6px}.topbar button,.mobile-nav button,.style-drawer button{padding:6px 10px}.topbar button:hover,.topbar summary:hover,.mobile-nav button:hover,.style-drawer button:hover{border-color:var(--border-strong);background:var(--surface-hover)}button:disabled{cursor:not-allowed;opacity:.42}.theme-switch,.segmented-control{border:1px solid var(--border);background:var(--surface-canvas);border-radius:7px;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:2px;padding:2px;display:grid}.theme-switch{width:116px;height:36px}.theme-switch button,.segmented-control button{white-space:nowrap;background:0 0;border:0;min-height:28px;padding:3px 8px}.theme-switch button[aria-pressed=true],.segmented-control button[aria-pressed=true]{color:var(--surface-canvas);background:var(--accent);font-weight:700}[data-style-open][data-style-custom=true]{border-color:var(--accent)}.export-menu{position:relative}.export-menu>summary{-webkit-user-select:none;user-select:none;place-items:center;min-width:64px;padding:6px 10px;list-style:none;display:grid}.export-menu>summary::-webkit-details-marker{display:none}.export-menu[open]>summary{border-color:var(--accent)}.export-options{z-index:3;border:1px solid var(--border);background:var(--surface-panel);border-radius:7px;gap:4px;width:132px;padding:6px;display:grid;position:absolute;top:calc(100% + 6px);right:0;box-shadow:0 12px 28px #00000038}.export-options button{text-align:left;width:100%}.workspace{background:var(--border);grid-template-columns:208px minmax(360px,.9fr) minmax(420px,1.25fr);gap:1px;min-width:0;min-height:0;display:grid}.diagram-panel,.editor-panel,.preview-panel{background:var(--surface-panel);min-width:0;min-height:0}.diagram-panel{padding:14px;overflow-y:auto}.preview-panel{padding:14px 14px 10px}.panel-heading{justify-content:space-between;align-items:center;gap:10px;min-height:28px;display:flex}.panel-heading h2{color:var(--text);margin:0;font-size:13px;font-weight:700}[data-diagram-count],[data-preview-status]{border:1px solid var(--border);min-width:32px;min-height:22px;color:var(--text-muted);background:var(--surface-raised);border-radius:999px;justify-content:center;align-items:center;padding:2px 8px;font:650 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace;display:inline-flex}.diagram-list{gap:5px;margin-top:10px;display:grid}.diagram-item{width:100%;min-height:56px;color:var(--text);text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;gap:4px;padding:9px 10px;display:grid}.diagram-item:hover{background:var(--surface-raised)}.diagram-item span{color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;font-size:11px;overflow:hidden}.diagram-item[aria-current=true]{border-color:var(--accent);background:var(--accent-soft)}.editor-panel{grid-template-rows:44px minmax(0,1fr);display:grid}.editor-tabs{border-bottom:1px solid var(--border);align-items:end;gap:4px;padding:0 12px;display:flex}.editor-tabs button{height:36px;color:var(--text-muted);cursor:pointer;background:0 0;border:0;border-bottom:2px solid #0000;padding:0 9px}.editor-tabs button[aria-selected=true]{color:var(--accent);border-bottom-color:var(--accent)}.editor-surface{min-height:0}.editor-surface textarea{resize:none;width:100%;height:100%;color:var(--text);background:var(--surface-editor);caret-color:var(--accent);border:0;outline:0;padding:18px;font:13px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace}.preview-panel{grid-template-rows:auto minmax(0,1fr);gap:10px;display:grid}.preview-canvas{border:1px solid var(--border);background-color:var(--surface-canvas);background-image:radial-gradient(circle, var(--dot) 1px, transparent 1px);background-size:16px 16px;border-radius:4px;min-height:0;padding:10px;overflow:auto}.preview-canvas svg{width:auto;max-width:100%;height:auto;max-height:none;margin-inline:auto;display:block}.diagnostics-bar{border-top:1px solid var(--border);background:var(--surface-panel);min-width:0;min-height:34px;padding:6px 14px;overflow-x:auto}.diagnostic{white-space:nowrap;margin:0;font:12px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace}.diagnostic-ok{color:var(--accent-strong)}.diagnostic-issue{color:var(--warning)}.empty-preview,[data-empty-list]{color:var(--text-muted);font-size:13px}.mobile-nav{display:none}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.style-drawer{border:0;border-left:1px solid var(--border);width:min(380px,100vw - 24px);max-width:none;height:calc(100dvh - 90px);max-height:none;color:var(--text);background:var(--surface-panel);border-radius:0;margin:0;padding:0;position:fixed;inset:56px 0 34px auto;box-shadow:-16px 0 36px #0000003d}.style-drawer[open]{grid-template-rows:auto minmax(0,1fr) auto;display:grid}.style-drawer::backdrop{background:var(--backdrop)}.style-drawer-header,.style-drawer-footer{background:var(--surface-panel);justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;display:flex}.style-drawer-header{border-bottom:1px solid var(--border)}.style-drawer-footer{border-top:1px solid var(--border)}.style-drawer-header h2{margin:0;font-size:15px}.icon-button{width:36px;min-width:36px;padding:0;font-size:22px;line-height:1}.style-drawer-body{min-height:0;overflow-y:auto}.style-drawer fieldset{border:0;border-bottom:1px solid var(--border);gap:10px;margin:0;padding:15px 14px 18px;display:grid}.style-drawer legend{color:var(--text-muted);text-transform:uppercase;padding:0;font-size:11px;font-weight:750}.theme-switch-drawer{width:100%}.color-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 12px;display:grid}.style-control{min-width:0;color:var(--text);border-left:2px solid #0000;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding-left:7px;font-size:12px;display:grid}.style-control[data-overridden=true]{border-left-color:var(--accent);font-weight:650}.style-control-stack{grid-template-columns:1fr;align-items:stretch}.style-control select{min-width:132px;padding:5px 28px 5px 8px}.style-control input[type=color]{border:1px solid var(--border);background:var(--surface-raised);border-radius:5px;width:34px;height:28px;padding:2px}.range-control{grid-template-columns:minmax(0,1fr) 34px}.range-control input{width:100%;accent-color:var(--accent);grid-column:1/-1}.range-control output{color:var(--text-muted);text-align:right;font:12px/1 ui-monospace,SFMono-Regular,Consolas,monospace}.segmented-control,.style-drawer-footer button{width:100%}button:focus-visible,summary:focus-visible,textarea:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}@media (width<=1024px){body{overflow:hidden}.app-shell{grid-template-rows:auto auto minmax(0,1fr);height:100dvh}.topbar{grid-template-columns:1fr;gap:8px;padding:9px 10px 8px}.brand{min-height:24px}.topbar-actions{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:100%;min-width:0;display:grid}.topbar-actions>.theme-switch{width:100%}.topbar-actions>button,.topbar-actions>details,.topbar-actions>details>summary{width:100%;min-width:0}.topbar-actions>button,.topbar-actions>details>summary{min-height:44px;padding-inline:4px}.action-status{text-align:left;grid-area:2/1/auto/-1;min-height:16px}.action-status:empty{display:none}.topbar-actions>.theme-switch button{padding-inline:2px;font-size:12px}.export-options{top:auto;bottom:calc(100% + 6px);right:0}.mobile-nav{border-bottom:1px solid var(--border);background:var(--surface-panel);grid-template-columns:repeat(3,1fr);gap:6px;padding:7px 8px;display:grid}.mobile-nav button{min-height:44px}.mobile-nav button[aria-pressed=true]{color:var(--accent-strong);border-color:var(--accent);background:var(--accent-soft);font-weight:700}.workspace{background:var(--surface-panel);height:100%;min-height:0;display:block;overflow:hidden}[data-panel]{height:100%;min-height:0;display:none}.app-shell[data-mobile-panel=list] [data-panel=list],.app-shell[data-mobile-panel=edit] [data-panel=edit],.app-shell[data-mobile-panel=preview] [data-panel=preview]{display:grid}.diagram-panel{overflow:auto}.preview-panel{padding:10px}.diagnostics-bar{display:none}.app-shell[data-mobile-panel=preview] .diagnostics-bar{display:block}.style-drawer{width:100vw;height:100dvh;box-shadow:none;border:0;inset:0}.style-drawer-header{padding-top:max(12px, env(safe-area-inset-top))}.style-drawer-footer{padding-bottom:max(12px, env(safe-area-inset-bottom))}.style-drawer button,.style-drawer select{min-height:44px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}