:root{--bg:#17191d;--panel:#1f2228;--panel2:#262a31;--border:#343941;--text:#d7dade;--muted:#9aa0a8;--accent:#4e9af1;--accent2:#f4b942;--ok:#3fb761;--bad:#e15759;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif;font-size:14px}#root,.app{flex-direction:column;height:100vh;display:flex}header{background:var(--panel);border-bottom:1px solid var(--border);align-items:center;gap:12px;padding:10px 16px;display:flex}header h1{white-space:nowrap;margin:0;font-size:17px}.subtitle{color:var(--muted);font-size:12px}.spacer{flex:1}.status{border-radius:12px;padding:4px 10px;font-size:12px}.status.ok{color:var(--ok);background:#3fb76126}.status.warn{color:var(--accent2);background:#f4b94226}.status.bad{color:var(--bad);background:#e1575926}button{background:var(--panel2);color:var(--text);border:1px solid var(--border);cursor:pointer;border-radius:6px;padding:6px 12px;font-size:13px}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}button.active{background:var(--accent);border-color:var(--accent);color:#fff}.lang-switch{display:flex}.lang-switch button{border-radius:0;padding:4px 8px;font-size:11px}.lang-switch button:first-child{border-radius:6px 0 0 6px}.lang-switch button:last-child{border-radius:0 6px 6px 0}.lang-switch button+button{border-left:none}main{flex:1;grid-template-columns:minmax(320px,480px) minmax(360px,1fr);gap:12px;min-height:0;padding:12px;display:grid}@media (width<=900px){main{grid-template-columns:1fr}#root,.app{height:auto}}.left,.right{flex-direction:column;gap:10px;min-height:0;display:flex;overflow:auto}.gallery{background:var(--panel);border:1px solid var(--border);border-radius:8px;flex-direction:column;gap:8px;padding:10px;display:flex}.gallery-examples{flex-wrap:wrap;gap:6px;display:flex}.gallery-random{color:var(--muted);align-items:center;gap:14px;font-size:12px;display:flex}.gallery-random label{flex-direction:column;gap:2px;display:flex}.gallery-random input[type=range]{width:110px}.editor{background:var(--panel);border:1px solid var(--border);border-radius:8px;flex-direction:column;flex:1;gap:8px;min-height:0;padding:10px;display:flex}.editor-toolbar{flex-wrap:wrap;gap:6px;display:flex}.editor-toolbar .push-right{margin-left:auto}.editor-canvas{touch-action:none;background:#fbfbf8;border-radius:6px;flex:1;width:100%;min-height:320px}.editor-canvas .edge{stroke:#555;stroke-width:2px}.editor-canvas .edge.crossing{stroke:var(--bad);stroke-width:3px}.editor-canvas .edge.preview{stroke:var(--accent);stroke-dasharray:5 4;stroke-width:2px}.editor-canvas .edge.hover-delete{stroke:var(--bad);stroke-width:4px}.editor-canvas .node{fill:#fff;stroke:#333;stroke-width:1.6px}.editor-canvas .node.selected{fill:#d7e7ff;stroke:var(--accent);stroke-width:4px}.editor-canvas .node.hover-target{stroke:var(--accent);stroke-width:3px}.editor-canvas .node.hover-delete{stroke:var(--bad);fill:#fbe3e4;stroke-width:3px}.editor-canvas .node.edge-source{stroke:var(--accent);stroke-width:3px}.editor-canvas .node.target-valid{stroke:var(--ok);stroke-width:3.5px}.editor-canvas .node.target-invalid{stroke:var(--bad);stroke-width:3.5px}.editor-canvas .node-label{fill:#222;-webkit-user-select:none;user-select:none;pointer-events:none;font-size:12px}.drawing{background:var(--panel);border:1px solid var(--border);border-radius:8px;flex-direction:column;flex:1;gap:8px;min-height:380px;padding:10px;display:flex}.drawing-toolbar{color:var(--muted);flex-wrap:wrap;align-items:center;gap:12px;font-size:12px;display:flex}.drawing-toolbar label{white-space:nowrap;align-items:center;gap:5px;display:flex}.drawing-canvas{background:#101215;border-radius:6px;flex:1;width:100%;min-height:320px}.drawing-canvas .row-guide{stroke:#23262c;stroke-width:1px;vector-effect:non-scaling-stroke}.drawing-canvas .seg{stroke-width:2px;vector-effect:non-scaling-stroke}.drawing-canvas .seg.aug{stroke-dasharray:6 5;opacity:.55}.drawing-canvas .seg.stub{opacity:.8;stroke-dasharray:3 3}.drawing-canvas .seg.hl-out{stroke-width:3.5px;stroke-dasharray:2 2}.drawing-canvas .seg.dim{opacity:.15}.drawing-canvas .halo{stroke-width:10px;opacity:.3;stroke-linecap:round;vector-effect:non-scaling-stroke}.drawing-canvas .halo.median{stroke:var(--accent2)}.drawing-canvas .halo.selected{stroke:var(--accent)}.drawing-canvas .vertex{cursor:pointer}.drawing-canvas .vertex circle{fill:#e8eaed;stroke:#555;vector-effect:non-scaling-stroke}.drawing-canvas .vertex.current circle{fill:var(--accent2);stroke:var(--accent2)}.drawing-canvas .vertex.selected circle{fill:var(--accent);stroke:#d7e7ff;stroke-width:2.5px}.drawing-canvas .vertex text{fill:var(--muted);font-size:11px}.drawing-canvas .vertex.current text{fill:var(--accent2)}.drawing-canvas .vertex.selected text{fill:var(--accent)}.stepper{background:var(--panel);border:1px solid var(--border);border-radius:8px;flex-direction:column;gap:6px;padding:10px;display:flex}.stepper-controls{align-items:center;gap:6px;display:flex}.stepper-controls input[type=range]{flex:1}.step-label{color:var(--muted);white-space:nowrap;font-size:12px}.stepper-text{color:var(--text);min-height:2.4em;font-size:13px}.row{flex-wrap:wrap;align-items:flex-start;gap:10px;display:flex}.stats,.legend{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:10px}.stats{flex:1}.stats table{border-collapse:collapse;width:100%;font-size:13px}.stats td{padding:3px 8px 3px 0}.stats td:first-child{color:var(--muted);white-space:nowrap}.badge{border-radius:10px;margin-bottom:8px;padding:3px 10px;font-size:12px;font-weight:700;display:inline-block}.badge.pass{color:var(--ok);background:#3fb7612e}.badge.fail{color:var(--bad);background:#e157592e}.stats details{margin-top:6px;font-size:12px}.stats pre{white-space:pre-wrap;color:var(--muted);max-height:180px;overflow:auto}.legend{width:210px}.legend h3{color:var(--muted);margin:0 0 6px;font-size:12px;font-weight:600}.legend svg{width:100%}.legend line{stroke-width:2px}.legend text{fill:var(--muted);font-size:11px}.placeholder{background:var(--panel);border:1px dashed var(--border);color:var(--muted);border-radius:8px;padding:24px;line-height:1.5}.error-banner,.stale-banner{border-radius:8px;padding:10px 14px;font-size:13px}.error-banner{color:var(--bad);border:1px solid var(--bad);background:#e1575926}.stale-banner{color:var(--accent2);background:#f4b9421f;border:1px solid #f4b94280}