:root{color-scheme:light;--paper:#f3f5f2;--ink:#18211e;--muted:#69756f;--line:#dce3dd;--white:#fff;--green:#c1e756;--green-ink:#526822;--grid:#dfe6e1;--frontier:#f2c45e;--visited:#b8d4ef;--wall:#596b63;--terrain:#e5d1ac;--start:#2b8271;--finish:#d2755e;font-family:Inter,"Segoe UI",Arial,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;font-optical-sizing:auto}
*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;color:var(--ink);background:var(--paper)}button,input{font:inherit}button{color:inherit;cursor:pointer}button:focus-visible,input:focus-visible,[role=grid]:focus-visible{outline:3px solid #658436;outline-offset:2px}.app-shell{width:min(1500px,100%);margin:0 auto;padding:0 46px}.topbar{display:flex;min-height:70px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:9px;color:var(--ink);font-size:17px;font-weight:700;letter-spacing:-.07em;text-decoration:none}.brand-symbol{display:inline-flex;height:19px;align-items:end;gap:2px}.brand-symbol i{width:4px;border-radius:3px 3px 0 0;background:var(--ink)}.brand-symbol i:nth-child(1){height:7px}.brand-symbol i:nth-child(2){height:12px}.brand-symbol i:nth-child(3){height:17px}.brand-symbol i:nth-child(4){height:10px;background:#91b433}.topbar-note{display:flex;align-items:center;gap:9px;color:#859088;font-size:8px;font-weight:700;letter-spacing:.09em}.live-dot{width:6px;height:6px;border-radius:50%;background:#8aa542}.topbar-divider{width:20px;height:1px;background:#c9d1ca}.reset-link{display:inline-flex;align-items:center;gap:7px;border:0;padding:8px 0;background:transparent;color:var(--muted);font-size:10px}.reset-link:hover{color:var(--ink)}.reset-link svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}
.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:29px 0 25px}.eyebrow,.panel-kicker{margin:0;color:#7f8c83;font-size:8px;font-weight:700;letter-spacing:.12em}.intro .eyebrow{margin-bottom:10px;color:#70814c}h1{margin:0;font-size:clamp(34px,4vw,51px);font-weight:600;letter-spacing:-.065em;line-height:.98}.intro-copy{margin:12px 0 0;color:var(--muted);font-size:12px}.intro-mark{display:flex;align-items:center;gap:11px;padding:0 6px 4px;color:#a3ada5;font-size:9px;font-variant-numeric:tabular-nums}.mark-path{position:relative;display:flex;width:111px;height:27px;align-items:center;justify-content:space-between}.mark-path:before{position:absolute;right:4px;left:4px;height:1px;background:#ccd4cc;content:""}.mark-path i,.mark-path b{position:relative;z-index:1;width:7px;height:7px;border:1px solid #8a968c;border-radius:50%;background:var(--paper)}.mark-path i:nth-child(2),.mark-path i:nth-child(4){transform:translateY(-8px)}.mark-path i:nth-child(3){transform:translateY(8px)}.mark-path b{width:10px;height:10px;border-color:var(--ink);background:var(--green)}
.workbench{display:grid;grid-template-columns:minmax(0,1fr) 286px;align-items:stretch;gap:15px}.board-panel,.control-panel{border:1px solid var(--line);border-radius:9px;background:var(--white)}.board-panel{min-width:0;padding:17px 18px 13px}.board-head{display:flex;align-items:end;justify-content:space-between;gap:12px;padding:0 1px 13px}.panel-kicker{display:block;margin-bottom:5px}.board-title h2{margin:0;font-size:16px;font-weight:600;letter-spacing:-.025em}.board-size{display:flex;align-items:center;gap:7px;color:#87928a;font-size:9px}.board-size span:first-child{color:#526058;font-variant-numeric:tabular-nums}.board-size-dot{width:3px;height:3px;border-radius:50%;background:#a7b1a8}
.toolbar{display:flex;min-height:42px;align-items:center;gap:9px;border-top:1px solid #edf0ed;border-bottom:1px solid #edf0ed}.tool-caption{flex:0 0 auto;color:#8a958d;font-size:8px;font-weight:700;letter-spacing:.1em}.tool-list{display:flex;flex-wrap:wrap;gap:3px}.tool-button{display:inline-flex;min-height:28px;align-items:center;gap:6px;border:1px solid transparent;border-radius:5px;padding:0 7px;background:transparent;color:#647168;font-size:9px;white-space:nowrap}.tool-button:hover{background:#f3f5f2}.tool-button.is-active{border-color:#d7dfd1;background:#eef2e9;color:var(--ink)}.tool-icon{display:grid;width:12px;height:12px;place-items:center;border-radius:3px}.wall-icon{background:var(--wall)}.mud-icon{border:1px solid #c8b183;background:repeating-linear-gradient(135deg,#e5d1ac 0 3px,#f4ecdb 3px 5px)}.erase-icon{border:1px solid #aab4ac;background:linear-gradient(135deg,transparent 44%,#69756f 45% 55%,transparent 56%)}.start-icon,.end-icon{border-radius:50%;color:#fff;font-size:8px;font-weight:700}.start-icon{background:var(--start)}.end-icon{background:var(--finish)}.draw-hint{margin-left:auto;color:#98a199;font-size:8px;white-space:nowrap}
.grid-frame{position:relative;margin:14px 0 10px;border:1px solid #d6dfd8;border-radius:5px;padding:10px;background-color:#f9faf8;background-image:linear-gradient(45deg,#f1f4f0 25%,transparent 25%,transparent 75%,#f1f4f0 75%),linear-gradient(45deg,#f1f4f0 25%,transparent 25%,transparent 75%,#f1f4f0 75%);background-position:0 0,5px 5px;background-size:10px 10px}.grid{display:grid;grid-template-columns:repeat(21,minmax(0,1fr));width:100%;overflow:hidden;border:1px solid #d7e0d9;border-radius:3px;touch-action:none;user-select:none}.cell{position:relative;display:grid;min-width:0;aspect-ratio:1;place-items:center;border:0;border-right:1px solid var(--grid);border-bottom:1px solid var(--grid);background:#fff;color:var(--ink);font-size:clamp(7px,.8vw,10px);line-height:1;transition:background-color .11s,color .11s}.cell:nth-child(21n){border-right:0}.cell.is-wall{background:var(--wall)}.cell.is-mud{background:repeating-linear-gradient(135deg,#e5d1ac 0 4px,#f1e6d2 4px 7px)}.cell.is-frontier{background:var(--frontier)}.cell.is-visited{background:var(--visited)}.cell.is-path{z-index:1;background:var(--green);box-shadow:inset 0 0 0 1px #95b43e}.cell.is-start{z-index:2;border-radius:50%;background:var(--start);color:#fff;font-size:9px;font-weight:700}.cell.is-end{z-index:2;border-radius:50%;background:var(--finish);color:#fff;font-size:9px;font-weight:700}.cell.is-active-cell{z-index:3;outline:2px solid #18211e;outline-offset:-2px}.grid[data-tool=wall] .cell:not(.is-start,.is-end){cursor:crosshair}.grid[data-tool=mud] .cell:not(.is-start,.is-end){cursor:cell}.grid[data-tool=erase] .cell:not(.is-start,.is-end){cursor:grab}.grid[data-tool=start] .cell:not(.is-end),.grid[data-tool=end] .cell:not(.is-start){cursor:copy}.grid-coordinates{display:flex;justify-content:space-between;padding:6px 1px 0;color:#9aa49c;font-size:7px}
.legend{display:flex;min-height:28px;align-items:center;flex-wrap:wrap;gap:10px 16px;border-bottom:1px solid #edf0ed;padding:3px 1px 11px;color:#758178;font-size:8px}.legend span{display:inline-flex;align-items:center;gap:5px}.legend i{display:inline-block;width:8px;height:8px;border-radius:2px}.legend-start{background:var(--start)}.legend-finish{background:var(--finish)}.legend-frontier{background:var(--frontier)}.legend-visited{background:var(--visited)}.legend-path{background:var(--green)}.legend-mud{border:1px solid #c8b183;background:var(--terrain)}.board-foot{display:flex;min-height:29px;align-items:end;justify-content:space-between;color:#9aa49c;font-size:8px}.board-foot kbd{border:1px solid #d7ddd7;border-radius:3px;padding:1px 4px;background:#f6f7f5;font:inherit}.clear-board{border:0;padding:3px 0;background:transparent;color:#6f7b72;font-size:8px}.clear-board:hover{color:var(--ink);text-decoration:underline}
.control-panel{display:flex;flex-direction:column;overflow:hidden}.control-panel>section{padding:16px 15px}.control-panel>section+section{border-top:1px solid #e9ede9}.section-heading{display:flex;align-items:center;justify-content:space-between}.section-heading .panel-kicker{margin:0}.step-ornament{width:29px;height:14px;border:1px solid #d9e0d9;border-radius:4px;background:repeating-linear-gradient(90deg,transparent 0 6px,#d9e0d9 6px 7px)}.algorithm-list{display:grid;gap:4px;margin-top:12px}.algorithm-option{display:flex;min-height:42px;align-items:center;gap:9px;border:1px solid transparent;border-radius:6px;padding:4px 8px;background:transparent;text-align:left}.algorithm-option:hover{background:#f5f7f4}.algorithm-option.is-selected{border-color:#dce4d2;background:#f2f5ed}.algorithm-letter{display:grid;width:26px;height:26px;flex:0 0 26px;place-items:center;border-radius:5px;background:#edf0ed;color:#5a685e;font-size:11px;font-weight:700}.algorithm-option.is-selected .algorithm-letter{background:var(--ink);color:var(--green)}.algorithm-copy{display:grid;gap:2px}.algorithm-copy strong{font-size:10px;font-weight:600}.algorithm-copy small{color:#849087;font-size:8px}.algorithm-check{display:none;margin-left:auto;color:#708b39;font-size:12px}.algorithm-option.is-selected .algorithm-check{display:block}.algorithm-description{min-height:31px;margin:9px 0 11px;color:#758178;font-size:9px;line-height:1.55}.diagonal-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #edf0ed;padding-top:11px;cursor:pointer}.toggle-copy{display:grid;gap:3px}.toggle-copy strong{font-size:9px;font-weight:600}.toggle-copy small{color:#8b968e;font-size:8px}.diagonal-toggle input{position:absolute;width:1px;height:1px;opacity:0}.toggle-track{position:relative;width:29px;height:17px;flex:0 0 29px;border-radius:99px;background:#d9dfd9;transition:background .17s}.toggle-track:after{position:absolute;top:3px;left:3px;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #16221c30;content:"";transition:transform .17s}.diagonal-toggle input:checked+.toggle-track{background:#748f39}.diagonal-toggle input:checked+.toggle-track:after{transform:translateX(12px)}.diagonal-toggle input:focus-visible+.toggle-track{outline:3px solid #658436;outline-offset:2px}
.run-status{display:inline-flex;align-items:center;gap:5px;color:#7c8980;font-size:8px;font-weight:700}.run-status i{width:6px;height:6px;border-radius:50%;background:#9aa49c}.run-status.is-running{color:#536b25}.run-status.is-running i{background:#93b33f;animation:blink .8s infinite alternate}.run-status.is-done i{background:#6e953b}.run-status.is-error i{background:var(--finish)}@keyframes blink{to{opacity:.35}}.run-buttons{display:grid;grid-template-columns:1fr 38px;gap:7px;margin-top:12px}.run-button,.step-button{display:inline-flex;min-height:39px;align-items:center;justify-content:center;gap:8px;border:0;border-radius:6px;background:var(--ink);color:var(--white);font-size:10px;font-weight:600}.run-button:hover{background:#2a3a32}.run-button.is-running{background:#354437}.play-symbol{color:var(--green);font-size:9px}.step-button{border:1px solid var(--line);background:var(--white);color:var(--ink);font-size:15px}.step-button:hover{background:#eff2ed}.pause-button{width:100%;min-height:31px;margin-top:6px;border:1px solid #dce4d2;border-radius:5px;background:#f2f5ed;color:#4d6124;font-size:9px}.speed-row{display:flex;align-items:center;gap:8px;margin-top:13px;color:#879289;font-size:8px}.speed-row input{width:100%;height:3px;accent-color:#789542}.speed-row output{min-width:20px;color:#526053;text-align:right;font-size:9px;font-variant-numeric:tabular-nums}.run-progress{height:2px;overflow:hidden;margin-top:11px;border-radius:3px;background:#eef1ed}.run-progress span{display:block;width:0;height:100%;background:#9fbe4a;transition:width .08s linear}
.result-pulse{width:7px;height:7px;border-radius:50%;background:#c3cec4}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:13px}.result-stat{display:grid;gap:4px}.result-stat+.result-stat{border-left:1px solid #e8ece8;padding-left:9px}.result-stat strong{font-size:18px;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums}.result-stat span{color:#849087;font-size:8px}.result-message{min-height:24px;margin:11px 0 0;color:#718077;font-size:9px;line-height:1.5}.compare-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.compare-heading .panel-kicker{margin-bottom:5px}.compare-heading h2{margin:0;font-size:12px;font-weight:600}.compare-trigger{border:1px solid #d7dfd1;border-radius:5px;padding:6px 8px;background:#f4f7ee;color:#506126;font-size:8px;font-weight:600}.compare-trigger:hover{background:#e9f0db}.compare-help{margin:9px 0 0;color:#849087;font-size:8px;line-height:1.55}.comparison-table{display:grid;gap:0;margin-top:11px;border-top:1px solid #e9ede9}.compare-row{display:grid;grid-template-columns:1fr 52px 44px;gap:6px;border-bottom:1px solid #edf0ed;padding:7px 0;color:#66736a;font-size:8px}.compare-row strong{color:var(--ink);font-size:9px;font-weight:600}.compare-row span:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}.compare-row.header{color:#919b93;font-size:7px;font-weight:700;letter-spacing:.06em}.compare-row.is-best strong:after{display:inline-block;width:5px;height:5px;margin-left:5px;border-radius:50%;background:#a6c751;content:"";vertical-align:1px}
.page-footer{display:flex;justify-content:space-between;margin-top:16px;border-top:1px solid var(--line);padding:11px 0 18px;color:#8a958d;font-size:8px;letter-spacing:.07em}.page-footer span:first-child{display:flex;align-items:center;gap:8px}.page-footer i{width:3px;height:3px;border-radius:50%;background:#9aab7a}.page-footer span:last-child{letter-spacing:0}.toast{position:fixed;z-index:10;right:20px;bottom:20px;max-width:calc(100vw - 40px);transform:translateY(12px);border-radius:6px;padding:10px 14px;background:var(--ink);color:#fff;font-size:10px;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}.toast.is-visible{transform:translateY(0);opacity:1}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}[hidden]{display:none!important}

/* PATHLAB is styled as a working route atlas: field paper, ink and survey marks. */
:root{color-scheme:light;--paper:#e9e1d2;--ink:#252c28;--muted:#625f53;--line:#c7bda9;--white:#f7f1e5;--green:#d09a55;--green-ink:#613e24;--grid:#d5cab6;--frontier:#e5ac50;--visited:#9eafb0;--wall:#3b5148;--terrain:#c9b27e;--start:#3d7460;--finish:#416f78;font-family:Arial,"Segoe UI",sans-serif}
body{color:var(--ink);background-color:var(--paper);background-image:radial-gradient(ellipse at 8% 6%,transparent 0 150px,rgba(103,112,89,.055) 151px 152px,transparent 153px 184px,rgba(103,112,89,.04) 185px 186px,transparent 187px 220px),radial-gradient(ellipse at 91% 88%,transparent 0 190px,rgba(103,112,89,.05) 191px 192px,transparent 193px 226px,rgba(103,112,89,.035) 227px 228px,transparent 229px 270px)}
button:focus-visible,input:focus-visible,[role=grid]:focus-visible{outline:3px solid #bb6a43;outline-offset:3px}
.app-shell{width:min(1580px,100%);padding:0 42px}
.topbar{min-height:74px;border-color:#bfb49e}
.brand{font-size:20px;font-weight:800;letter-spacing:-.08em}.brand-symbol i{background:#334d43}.brand-symbol i:nth-child(4){background:#bd563e}
.topbar-note{gap:10px;color:#756e5d;font-size:9px;letter-spacing:.16em}.live-dot{width:7px;height:7px;background:#b84e38;box-shadow:0 0 0 3px rgba(184,78,56,.13)}
.reset-link{color:#5f6258;font-size:12px}.reset-link:hover{color:#a24835}
.intro{align-items:center;padding:36px 0 30px}.intro .eyebrow,.panel-kicker{color:#8b6547;font-size:9px;letter-spacing:.17em}.intro .eyebrow{margin-bottom:13px}
h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(40px,5.2vw,66px);font-weight:500;letter-spacing:-.055em;line-height:.98}
.intro-copy{max-width:580px;margin-top:15px;color:#625f53;font-size:14px;line-height:1.6}
.hero-note{display:grid;grid-template-columns:auto 30px auto;align-items:center;gap:9px;min-width:245px;margin:0 3px 5px 0;border-top:1px solid #bfb49e;border-bottom:1px solid #bfb49e;padding:14px 0;color:#736c5d;font-size:9px;font-weight:700;letter-spacing:.12em}.hero-note i{height:1px;background:#b45c42}.hero-note strong{grid-column:1/-1;color:#303e37;font-family:Georgia,"Times New Roman",serif;font-size:17px;font-weight:500;letter-spacing:0}.hero-note b{padding:0 7px;color:#b45c42;font-family:Arial,sans-serif;font-size:12px}
.workbench{grid-template-columns:minmax(0,1fr) 326px;gap:17px}
.board-panel,.control-panel{border-radius:2px;box-shadow:0 4px 18px rgba(53,46,34,.07)}
.board-panel{border-color:#bdb29c;padding:20px 22px 16px;background:#f4eddf;box-shadow:0 0 0 5px rgba(181,164,133,.17),0 8px 26px rgba(53,46,34,.08)}
.board-head{padding:0 2px 17px}.board-title h2{font-family:Georgia,"Times New Roman",serif;font-size:23px;font-weight:500;letter-spacing:-.025em}.board-size{color:#756f61;font-size:11px}.board-size span:first-child{color:#363c34;font-weight:700}.board-size-dot{background:#b74e39}
.toolbar{min-height:53px;gap:13px;border-color:#d5cbb9}.tool-caption{color:#897d69;font-size:8px;letter-spacing:.14em}.tool-list{gap:5px}.tool-button{min-height:34px;gap:6px;border:1px solid transparent;border-radius:2px;padding:0 9px;color:#54584f;font-size:11px}.tool-button:hover{border-color:#c5b89f;background:#ebe3d4}.tool-button.is-active{border-color:#a64a36;background:#a64a36;color:#fff7e9}.tool-icon{width:10px;height:10px}.tool-button.is-active .wall-icon{background:#fff0d7}.tool-button.is-active .mud-icon{background:#ecc982}.tool-button.is-active .erase-icon{border-color:#fff0d7}.tool-button.is-active .start-icon,.tool-button.is-active .end-icon{color:#fff}.draw-hint{color:#877d6a;font-size:10px}
.grid-frame{border:1px solid #aa9e86;background:#d8ceba;box-shadow:inset 0 0 0 4px rgba(248,241,225,.42)}.grid{gap:2px;padding:10px;background-color:#d8ceba;background-image:linear-gradient(rgba(81,91,76,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(81,91,76,.07) 1px,transparent 1px);background-size:calc(100% / 21) calc(100% / 13)}.cell{border:1px solid rgba(91,91,75,.09);border-radius:1px;background:rgba(248,243,232,.88);transition:background-color .16s,border-color .16s,transform .16s}.cell.is-wall{border-color:#32483f;background:#3b5148}.cell.is-mud{border-color:#b69c63;background:#d9c18e}.cell.is-frontier{border-color:#d19537;background:#e5ac50}.cell.is-visited{border-color:#91a4a4;background:#aebfc0}.cell.is-path{border-color:#b54f38;background:#b54f38;box-shadow:0 0 0 1px rgba(251,232,204,.6)}.cell.is-start{border-color:#8c3929;background:#b64e39;color:#fff8e8}.cell.is-end{border-color:#355c63;background:#416f78;color:#f9f2e4}.cell.is-active-cell:not(.is-start):not(.is-end){outline:2px solid #9f513a;outline-offset:1px;z-index:2}
.grid-coordinates{color:#7d715d;font-size:9px;letter-spacing:.1em}.legend{gap:12px 18px;padding:13px 1px 11px;color:#6b6658;font-size:10px}.legend>span{gap:6px}.legend i{width:9px;height:9px;border-radius:1px}.legend-start{background:#b64e39}.legend-finish{background:#416f78}.legend-frontier{background:#e5ac50}.legend-visited{background:#aebfc0}.legend-path{background:#b64e39}.legend-mud{background:#d9c18e}
.board-foot{border-top:1px solid #d8cebc;padding-top:10px;color:#817967;font-size:10px}.board-foot kbd{border-color:#c8bda8;border-radius:2px;background:#fbf6ea;color:#514e43}.clear-board{color:#865343;font-size:10px}.clear-board:hover{color:#a3402c}
.control-panel{border:1px solid #2b3b35;background:#2b3b35;color:#f4eddf;box-shadow:0 7px 24px rgba(34,42,36,.16)}.control-panel>section{padding:18px 17px}.control-panel>section+section{border-color:rgba(229,216,186,.16)}.control-panel .panel-kicker{color:#d0ad75}.section-heading{min-height:13px}.step-ornament,.result-pulse{display:none}
.algorithm-list{gap:5px;margin-top:14px}.algorithm-option{min-height:48px;gap:11px;border:1px solid transparent;border-radius:2px;padding:0 10px;color:#e9e2d4}.algorithm-option:hover{border-color:rgba(221,192,139,.42);background:rgba(255,255,255,.04)}.algorithm-option.is-selected{border-color:#c18b55;background:#3c4d43}.algorithm-letter{width:24px;height:24px;border:1px solid #859084;border-radius:50%;color:#eee1c9;font-family:Georgia,"Times New Roman",serif;font-size:13px}.algorithm-option.is-selected .algorithm-letter{border-color:#d3a263;background:#b6553d;color:#fff5e5}.algorithm-copy strong{font-family:Georgia,"Times New Roman",serif;font-size:15px;font-weight:500}.algorithm-copy small{color:#bcb9aa;font-size:10px}.algorithm-check{color:#e5bc78}.algorithm-description{min-height:38px;margin:10px 0 14px;color:#c3c2b6;font-size:11px;line-height:1.55}
.diagonal-toggle{border-color:rgba(229,216,186,.17);padding-top:13px}.toggle-copy strong{font-size:11px;font-weight:600}.toggle-copy small{color:#b8b8aa;font-size:10px}.toggle-track{width:34px;height:20px;flex-basis:34px;background:#536258}.toggle-track:after{width:14px;height:14px;background:#f3ead8}.diagonal-toggle input:checked+.toggle-track{background:#b7513c}.diagonal-toggle input:checked+.toggle-track:after{transform:translateX(14px)}
.run-status{color:#d2cdbd;font-size:9px;letter-spacing:.1em}.run-status i{background:#d7a457}.run-status.is-running i{background:#e6a14f}.run-button{min-height:43px;border-radius:2px;background:#b34e39;color:#fff7e8;font-size:12px}.run-button:hover{background:#c15c43}.step-button{min-height:43px;border:1px solid #7c897c;border-radius:2px;background:transparent;color:#f0e6d3}.step-button:hover{border-color:#d7b879;background:rgba(255,255,255,.06)}.play-symbol{font-size:11px}.speed-row{margin-top:13px;color:#d0cabb;font-size:10px}.speed-row output{color:#e8be7f;font-size:10px}.speed-row input{accent-color:#d69d59}.run-progress{height:3px;background:#4a5a50}.run-progress span{background:#d39b56}
.result-section{background:#34463d}.result-grid{margin-top:14px}.result-stat{gap:5px}.result-stat+.result-stat{border-color:rgba(229,216,186,.18);padding-left:12px}.result-stat strong{color:#fff1d9;font-family:Georgia,"Times New Roman",serif;font-size:24px;font-weight:500}.result-stat span{color:#c4c1b3;font-size:9px}.result-message{min-height:30px;margin-top:12px;color:#d2ccbb;font-size:10px;line-height:1.55}
.compare-heading h2{color:#faf2e2;font-family:Georgia,"Times New Roman",serif;font-size:19px;font-weight:500}.compare-trigger{border:1px solid #d0a264;border-radius:2px;padding:8px 10px;background:transparent;color:#f0c07c;font-size:10px}.compare-trigger:hover{background:#b34e39;color:#fff}.compare-help{margin-top:10px;color:#c3c2b6;font-size:10px;line-height:1.55}.comparison-table{margin-top:13px;border-color:rgba(229,216,186,.2)}.compare-row{grid-template-columns:minmax(64px,1fr) 40px 38px 46px;gap:5px;border-color:rgba(229,216,186,.14);padding:8px 0;color:#ddd4c2;font-size:9px}.compare-row strong{color:#fff2dc;font-family:Georgia,"Times New Roman",serif;font-size:12px;font-weight:500}.compare-row.header{color:#d0ad75;font-size:7px;letter-spacing:.08em}.compare-row.is-best strong:after{background:#e5ad57}
.page-footer{margin-top:21px;border-color:#bfb49e;padding-top:13px;color:#756f61;font-size:9px;letter-spacing:.12em}.page-footer i{width:4px;height:4px;background:#b64e39}.page-footer span:last-child{font-size:10px;letter-spacing:0}.toast{border:1px solid #c6a269;border-radius:2px;background:#2b3b35;color:#fff3dd;font-size:12px}
@media(max-width:1080px){.app-shell{padding:0 28px}.workbench{grid-template-columns:minmax(0,1fr) 300px;gap:13px}.board-panel{padding:16px}.toolbar{gap:7px}.tool-button{padding:0 7px}.legend{gap:9px 12px}}
@media(max-width:760px){.app-shell{padding:0 16px}.topbar{min-height:62px}.topbar-note{font-size:8px}.intro{align-items:flex-start;padding:28px 0 23px}.intro-copy{font-size:13px}.hero-note{min-width:160px;grid-template-columns:auto 18px auto;gap:6px;margin-top:4px;font-size:7px}.hero-note strong{font-size:14px}.hero-note b{padding:0 3px}.workbench{grid-template-columns:1fr;gap:13px}.board-panel{padding:14px 12px 12px}.board-title h2{font-size:20px}.board-size{font-size:10px}.toolbar{align-items:flex-start;gap:7px;padding:9px 0}.tool-list{gap:3px}.tool-button{min-height:32px;padding:0 6px;font-size:10px}.grid{gap:1px;padding:6px}.legend{gap:8px 11px;padding:11px 0;font-size:9px}.board-foot{font-size:9px}.control-panel{grid-template-columns:repeat(2,minmax(0,1fr))}.control-panel>section{padding:14px 12px}.control-panel>section+section{border-top:1px solid rgba(229,216,186,.16)}.compare-section{grid-column:1/-1}.page-footer{gap:10px;font-size:8px}.page-footer span:last-child{max-width:50%;text-align:right;font-size:9px}}
@media(max-width:480px){.app-shell{padding:0 11px}.intro{display:block}.hero-note{width:max-content;max-width:100%;margin-top:18px}.desktop-break{display:none}.board-head{align-items:flex-start}.board-size{flex-wrap:wrap;justify-content:flex-end;max-width:112px;text-align:right}.toolbar{display:block}.tool-caption{display:block;margin-bottom:7px}.tool-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.tool-button{justify-content:center;font-size:9px}.draw-hint{display:block;margin-top:7px;font-size:9px}.control-panel{grid-template-columns:1fr}.control-panel>section{padding:14px}.compare-section{grid-column:auto}.page-footer{display:grid}.page-footer span:last-child{max-width:none;text-align:left}}
@media(max-width:1080px){.app-shell{padding:0 28px}.workbench{grid-template-columns:minmax(0,1fr) 260px;gap:11px}.board-panel{padding:14px 13px 11px}.toolbar{flex-wrap:wrap;padding:5px 0}.tool-caption{display:none}.draw-hint{display:none}.legend{gap:8px 11px}.control-panel>section{padding-right:12px;padding-left:12px}}
@media(max-width:760px){.app-shell{padding:0 17px}.workbench{grid-template-columns:1fr}.control-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.control-panel>section{padding:13px 12px}.control-panel>section+section{border-top:0}.control-panel>section:nth-child(2n){border-left:1px solid #e9ede9}.control-panel>section:nth-child(n+3){border-top:1px solid #e9ede9}.algorithm-section{grid-row:span 2}.run-section,.result-section{grid-column:2}.compare-section{grid-column:1/-1}.intro{padding-top:25px}.intro-mark{transform:scale(.85);transform-origin:right bottom}.board-panel{padding:13px 12px 10px}.grid-frame{margin-top:10px;padding:7px}.legend{gap:7px 10px}.legend span{font-size:7px}}
@media(max-width:520px){.app-shell{padding:0 12px}.topbar{min-height:57px}.topbar-note{gap:5px;font-size:6px}.topbar-divider{width:10px}.reset-link{gap:4px;font-size:9px}.intro{align-items:flex-start;padding:23px 0 17px}.intro h1{max-width:280px;font-size:35px}.intro-copy{max-width:270px;font-size:10px;line-height:1.5}.intro-mark{display:none}.board-head{align-items:center}.board-size{gap:5px;font-size:7px}.board-title h2{font-size:14px}.toolbar{gap:3px}.tool-list{width:100%;justify-content:space-between}.tool-button{gap:4px;padding:0 4px;font-size:8px}.tool-icon{width:10px;height:10px}.grid-frame{margin:8px 0;padding:5px}.cell{font-size:6px}.grid-coordinates{font-size:6px}.legend{padding-bottom:8px;gap:6px 9px}.legend span{gap:3px;font-size:6.5px}.board-foot{font-size:7px}.control-panel>section{padding:11px 9px}.algorithm-option{min-height:37px;gap:6px;padding:3px 5px}.algorithm-letter{width:22px;height:22px;flex-basis:22px;font-size:9px}.algorithm-copy strong{font-size:9px}.algorithm-copy small{font-size:7px}.algorithm-description{font-size:8px}.toggle-copy strong{font-size:8px}.toggle-copy small{font-size:7px}.run-button,.step-button{min-height:35px;font-size:9px}.result-stat strong{font-size:16px}.result-stat span{font-size:7px}.compare-heading h2{font-size:11px}.compare-help{font-size:7px}.page-footer{font-size:6px}.desktop-break{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* Keep the start marker distinct from the highlighted route. */
.legend-start{background:#3d7460}
/* Match the map marker and legend swatch to the same cartographic color. */
.cell.is-start{border-color:#285542;background:#3d7460;color:#fff8e8}

.goal-icon{border:1px solid #bd684b;border-radius:50%;background:#f7e3d5;color:#8e3d2c;font-size:8px;font-weight:700}
.cell.is-goal{z-index:2;border:2px solid #a94a32;border-radius:50%;background:#f6dfcf;color:#71321f;font-size:clamp(6px,.7vw,9px);font-weight:800;box-shadow:0 0 0 2px rgba(255,247,230,.8)}
.legend-goal{border:1px solid #a94a32;border-radius:50%;background:#f6dfcf}