:root{--bg: #f7f6fb;--surface: #ffffff;--text: #1d1b26;--muted: #6b6880;--border: #e3e1ec;--accent: #7c4dff;--accent-ink: #ffffff;--accent-soft: #efe9ff;--danger: #c62845;--shadow: 0 1px 2px rgba(20, 16, 40, .06), 0 4px 16px rgba(20, 16, 40, .05);color-scheme:light}@media(prefers-color-scheme:dark){:root{--bg: #14121b;--surface: #1d1a27;--text: #ece9f5;--muted: #a19db3;--border: #2f2b3d;--accent: #a585ff;--accent-ink: #14121b;--accent-soft: #2a2340;--danger: #ff6b85;--shadow: 0 1px 2px rgba(0, 0, 0, .3);color-scheme:dark}}*{box-sizing:border-box}html,body{margin:0}body{background:var(--bg);color:var(--text);font:15px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Inter,Helvetica,Arial,sans-serif;min-height:100vh;display:flex;flex-direction:column}a{color:inherit}.site-header{display:flex;align-items:center;gap:24px;padding:14px 24px;border-bottom:1px solid var(--border);background:var(--surface)}.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:18px;text-decoration:none}.brand-mark{font-size:22px}.site-nav{display:flex;gap:4px;flex-wrap:wrap}.site-nav a{text-decoration:none;color:var(--muted);padding:6px 10px;border-radius:8px}.site-nav a:hover{color:var(--text);background:var(--bg)}.site-nav a[aria-current=page]{color:var(--accent);background:var(--accent-soft)}.hero{max-width:960px;margin:0 auto;padding:56px 24px 24px}.hero h1{font-size:40px;line-height:1.1;margin:0 0 12px;letter-spacing:-.02em}.hero p{color:var(--muted);font-size:17px;margin:0;max-width:620px}.tool-grid{max-width:960px;margin:0 auto;padding:24px 24px 64px;width:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}.tool-card{display:flex;flex-direction:column;gap:8px;text-decoration:none;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;box-shadow:var(--shadow);transition:border-color .15s,transform .15s}.tool-card:hover{border-color:var(--accent);transform:translateY(-2px)}.tool-card h2{margin:0;font-size:17px}.tool-card p{margin:0;color:var(--muted)}.tool-card .tags{display:flex;gap:6px;margin-top:auto;padding-top:8px}.tag{font-size:12px;padding:2px 8px;border-radius:99px;background:var(--accent-soft);color:var(--accent)}.tool-card.soon{opacity:.55;pointer-events:none;box-shadow:none}.tool-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--surface)}.tool-bar h1{font-size:15px;margin:0 12px 0 0}.tool-bar .spacer{flex:1}.status{color:var(--muted);font-size:13px}.status.error{color:var(--danger)}.btn{font:inherit;font-size:14px;cursor:pointer;padding:7px 14px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text)}.btn:hover{border-color:var(--accent)}.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.btn.primary:hover{filter:brightness(1.08)}.btn:disabled{opacity:.5;cursor:not-allowed}.field{font:inherit;font-size:14px;padding:6px 10px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text)}.workspace{flex:1;display:grid;grid-template-columns:1fr 1fr;min-height:0;height:calc(100vh - 110px)}.pane{min-width:0;min-height:0;display:flex;flex-direction:column}.pane+.pane{border-left:1px solid var(--border)}.pane-label{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:8px 16px;border-bottom:1px solid var(--border)}.editor{flex:1;width:100%;resize:none;border:0;outline:none;padding:16px;background:var(--surface);color:var(--text);font:13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;-moz-tab-size:2;tab-size:2}.preview{flex:1;overflow:auto;background:#fff}.preview.checker{background-color:#fff;background-image:linear-gradient(45deg,#f0f0f3 25%,transparent 25%),linear-gradient(-45deg,#f0f0f3 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f0f0f3 75%),linear-gradient(-45deg,transparent 75%,#f0f0f3 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}body.dragging .workspace{outline:3px dashed var(--accent);outline-offset:-8px}.diagram-list{display:flex;flex-direction:column;gap:16px;padding:16px}.diagram-item{background:#ffffffd9;border:1px solid #e3e1ec;border-radius:10px;padding:12px;color:#1d1b26}.diagram-item header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:13px;color:#6b6880}.diagram-item .svg-wrap{text-align:center;overflow:auto}.diagram-item .svg-wrap svg{max-width:100%;height:auto}.diagram-item .err{color:#c62845;white-space:pre-wrap;font:12.5px/1.5 ui-monospace,Menlo,monospace;margin:0}@media(max-width:800px){.site-header{padding:12px 16px;gap:12px;flex-wrap:wrap}.hero{padding:36px 16px 16px}.hero h1{font-size:30px}.tool-grid{padding:16px 16px 48px}.workspace{grid-template-columns:1fr;grid-template-rows:45vh auto;height:auto}.pane+.pane{border-left:0;border-top:1px solid var(--border)}.preview{min-height:60vh}}