.app{max-width:1600px;margin:0 auto;padding:0 28px 28px}.app-header{align-items:center;gap:16px;min-height:64px;display:flex}.brand{letter-spacing:-.01em;align-items:center;gap:10px;margin:0;font-size:18px;display:inline-flex}.tagline{border-left:1px solid var(--ss-border-strong);min-width:0;margin:0;padding-left:16px;font-size:14px}.app-links{align-items:center;gap:4px;margin-left:auto;display:flex}.app-header a{border-radius:var(--ss-radius-sm);color:var(--ss-accent-strong);white-space:nowrap;margin-left:auto;padding:6px 10px;font-size:14px;font-weight:600;text-decoration:none}.app-header a:hover{background:var(--ss-accent-soft)}.workspace{grid-template-columns:minmax(280px,36fr) minmax(0,64fr);align-items:start;gap:20px;display:grid}.panel{border:1px solid var(--ss-border);border-radius:var(--ss-radius-lg);background:var(--ss-surface);min-width:0;box-shadow:var(--ss-shadow-panel);padding:20px}.panel-heading{min-height:var(--ss-control-h);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;display:flex}h2{margin:0;font-size:16px;font-weight:650}.help{color:var(--ss-text-2);font-size:12px}.state-chip{background:var(--ss-accent-soft);color:var(--ss-info);white-space:nowrap;border-radius:999px;align-items:center;gap:6px;padding:3px 10px 3px 8px;font-size:12px;font-weight:600;display:inline-flex}.state-chip:empty{display:none}.state-chip:before{content:"";background:currentColor;border-radius:50%;width:6px;height:6px}.state-chip[data-state=ready]{background:var(--ss-success-soft);color:var(--ss-success)}.state-chip[data-state=stale]{background:var(--ss-warning-soft);color:var(--ss-warning)}.state-chip[data-state=error]{background:var(--ss-danger-soft);color:var(--ss-danger)}.editor-panel label{margin-bottom:6px;font-size:13px;font-weight:600;display:block}.editor-panel select{width:100%}.source-label{margin-top:16px}textarea{resize:vertical;border:1px solid var(--ss-border-strong);border-radius:var(--ss-radius-md);background:var(--ss-bg);width:100%;height:clamp(340px,46vh,560px);min-height:200px;color:var(--ss-text);font:13px/1.7 var(--ss-font-mono);tab-size:4;padding:14px;display:block}textarea:focus-visible{border-color:var(--ss-accent);outline:none;box-shadow:0 0 0 3px #2563eb2e}.editor-actions{flex-wrap:wrap;align-items:center;gap:12px;margin:16px 0;display:flex}[data-source-state]{color:var(--ss-text-2);font-size:13px}[data-error]{border:1px solid var(--ss-danger-border);border-left:4px solid var(--ss-danger);border-radius:var(--ss-radius-md);background:var(--ss-danger-soft);color:#7f1d1d;overflow-wrap:anywhere;margin-bottom:16px;padding:12px 14px;font-size:13px}[data-error]:empty,[data-export-error]:empty{display:none}[data-error] button{width:100%;height:auto;min-height:0;color:var(--ss-danger);text-align:left;white-space:normal;text-underline-offset:3px;background:0 0;border:0;padding:0;font-weight:700;text-decoration:underline;display:block}[data-error] button:hover:not(:disabled){background:0 0}[data-error] pre{border:1px solid var(--ss-danger-border);border-radius:var(--ss-radius-sm);color:var(--ss-text);font:12px/1.6 var(--ss-font-mono);white-space:pre-wrap;overflow-wrap:anywhere;background:#fff;margin:8px 0;padding:8px 10px;overflow-x:auto}[data-error] p{color:inherit;margin:0}[data-export-error]{color:var(--ss-danger);overflow-wrap:anywhere}.syntax{border-top:1px solid var(--ss-border);margin-top:12px;padding-top:12px}.syntax summary{cursor:pointer;align-items:center;gap:8px;font-size:14px;font-weight:600;list-style:none;display:flex}.syntax summary::-webkit-details-marker{display:none}.syntax summary:before{content:"";border:solid var(--ss-text-2);width:6px;height:6px;transition:transform var(--ss-duration) var(--ss-ease);border-width:0 2px 2px 0;transform:rotate(-45deg)}.syntax[open] summary:before{transform:rotate(45deg)}.syntax p{font-size:13px}.syntax pre{border:1px solid var(--ss-border);border-radius:var(--ss-radius-sm);background:var(--ss-bg);font:12px/1.7 var(--ss-font-mono);padding:12px;overflow-x:auto}.privacy{border-radius:var(--ss-radius-md);background:var(--ss-surface-sunken);margin:16px 0 0;padding:10px 12px}.preview-notice{border:1px solid var(--ss-accent-border);border-radius:var(--ss-radius-md);background:var(--ss-accent-soft);color:var(--ss-info);align-items:flex-start;gap:10px;margin:0;padding:10px 12px;font-size:13px;display:flex}.preview-notice:before{content:"i";width:15px;height:15px;font:700 10px/12px var(--ss-font);text-align:center;border:1.5px solid;border-radius:50%;flex:none;margin-top:2px}.preview-panel[data-state=stale] .preview-notice{border-color:var(--ss-warning-border);background:var(--ss-warning-soft);color:var(--ss-warning)}.preview-panel[data-state=error] .preview-notice{border-color:var(--ss-danger-border);background:var(--ss-danger-soft);color:var(--ss-danger)}.preview-panel[data-state=stale] .preview-notice:before,.preview-panel[data-state=error] .preview-notice:before{content:"!"}.stage{position:relative}.stage-tag{z-index:3;border:1px solid var(--ss-border-strong);box-shadow:var(--ss-shadow-panel);color:var(--ss-text-2);background:#fff;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700;display:none;position:absolute;top:10px;left:10px}.preview-panel:is([data-state=stale],[data-state=error]) .stage:has(svg) .stage-tag{display:block}.preview-panel:is([data-state=stale],[data-state=error]) .stage-tag:after{content:"Last successful render"}.preview-panel[data-state=busy] .stage:has(svg) .stage-tag{display:block}.preview-panel[data-state=busy] .stage-tag:after{content:"Rendering…"}.preview-panel:is([data-state=stale],[data-state=error]) [data-diagram]>*{filter:grayscale();opacity:.6}.preview-panel[data-state=busy] [data-diagram]>*{opacity:.35}[data-diagram]>*{transition:opacity var(--ss-duration) var(--ss-ease), filter var(--ss-duration) var(--ss-ease)}.placeholder{text-align:center;place-content:center;min-height:160px;display:grid}dialog{border:1px solid var(--ss-border);border-radius:var(--ss-radius-lg);max-width:min(440px,100% - 32px);color:var(--ss-text);padding:24px;box-shadow:0 20px 48px #0f172a2e}dialog h2{margin-bottom:8px;font-size:17px}dialog p{margin:0 0 20px;font-size:14px}dialog::backdrop{background:#0f172a66}.dialog-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}@media (width>=960px){.preview-panel{flex-direction:column;max-height:calc(100dvh - 92px);display:flex}.preview-panel>*{flex:none}.preview-panel>.stage{flex-direction:column;flex:0 auto;min-height:140px;display:flex}.preview-panel [data-diagram]{flex:0 auto;min-height:0;max-height:720px}}@media (width<=959px){.workspace{grid-template-columns:minmax(0,1fr)}textarea{height:340px}}@media (width<=599px){.app{padding:0 12px 16px}.app-header{flex-wrap:wrap;gap:2px 12px;padding:12px 0}.tagline{border:0;flex-basis:100%;order:3;padding:0;font-size:13px}.panel{border-radius:10px;padding:16px}}