.hardflow-demo { margin:2rem 0; padding:1.2rem; border:1px solid var(--line,#cbd7e2); border-top:4px solid var(--ink,#05213e); background:#f5f8fb; min-width:0; }
.hardflow-demo h3,.hardflow-demo h4 { margin:.25rem 0 .8rem; color:#05213e; }
.hardflow-demo h3 { font-size:1.35rem; line-height:1.35; }
.hardflow-demo h4 { font-size:1.1rem; line-height:1.4; }
.article-body .hardflow-demo p,.hardflow-demo p { font-size:.88rem; line-height:1.65; margin:.85rem 0; }
.hardflow-demo-scope { padding:.8rem 1rem; border-left:3px solid #176394; background:#e8f1f8; color:#173d5f; }
.hardflow-demo-controls { display:flex; flex-wrap:wrap; gap:.5rem; margin:1.1rem 0 1.5rem; }
.hardflow-demo-controls[hidden] { display:none; }
.hardflow-demo-controls button { min-height:44px; border:1px solid #607386; border-radius:4px; padding:.55rem .7rem; background:#fff; color:#05213e; font:600 .8rem/1.4 var(--font-sans,Arial,sans-serif); cursor:pointer; }
.hardflow-demo-controls button[aria-pressed="true"] { color:#fff; background:#05213e; border-color:#05213e; }
.hardflow-demo-controls button:focus-visible,.hardflow-demo-table-scroll:focus-visible { outline:3px solid #176394; outline-offset:3px; }
.hardflow-demo-controls button:hover { text-decoration:underline; }
.hardflow-demo-figure { margin:1rem 0; }
.hardflow-demo-figure svg { display:block; width:100%; max-width:450px; height:auto; margin:0 auto; background:#fff; }
.hardflow-demo-grid { fill:none; stroke:#d6e0e8; stroke-width:.8; }
.hardflow-demo-obstacle { fill:#f1d2c5; stroke:#9b3c1b; stroke-width:2; }
.hardflow-demo-route { fill:none; stroke-width:4; stroke-linejoin:round; stroke-linecap:round; }
.hardflow-demo-route-clear { stroke:#126347; }
.hardflow-demo-route-failed { stroke:#a83316; stroke-dasharray:7 5; }
.hardflow-demo-waypoint { fill:#fff; stroke:#05213e; stroke-width:1.5; }
.hardflow-demo-terminal { fill:#05213e; stroke:#fff; stroke-width:2; }
.hardflow-demo-axis { fill:#40546b; font:13px var(--font-sans,Arial,sans-serif); }
.hardflow-demo-label { fill:#05213e; font:600 13px var(--font-sans,Arial,sans-serif); }
.hardflow-demo-figure figcaption { margin:.6rem 0; font-size:.78rem; line-height:1.6; color:#40546b; }
.hardflow-demo-table-scroll { overflow-x:auto; max-width:100%; border:1px solid #cbd7e2; background:#fff; margin:1rem 0; }
.hardflow-demo table { width:100%; min-width:570px; border-collapse:collapse; font-size:.78rem; line-height:1.5; }
.hardflow-demo caption { text-align:left; font-weight:700; padding:.85rem; background:#05213e; color:#fff; }
.hardflow-demo th,.hardflow-demo td { text-align:left; vertical-align:top; padding:.7rem; border-bottom:1px solid #cbd7e2; }
.hardflow-demo thead { background:#e8f1f8; }
.hardflow-demo tbody th { font-weight:600; }
.hardflow-demo tbody tr:last-child>* { border-bottom:0; }
.hardflow-demo tbody tr:nth-child(even) { background:#f5f8fb; }
.hardflow-demo-status { padding:.65rem .8rem; background:#e8f1f8; border-left:3px solid #176394; }
.hardflow-demo-coordinates { overflow-wrap:anywhere; font-family:var(--font-mono,monospace); }
@media(max-width:420px) { .hardflow-demo { padding:.8rem; } .hardflow-demo-controls button { flex:1 1 45%; } }
@media print { .hardflow-demo-controls { display:none; } .hardflow-demo-figure { break-inside:avoid; } .hardflow-demo-figure svg { print-color-adjust:exact; } .hardflow-demo-table-scroll { overflow:visible; } .hardflow-demo table { min-width:0; } }