.canvas-wrap{margin:0 27px;height:clamp(300px,calc(100svh - 480px),540px);border:1px solid var(--theme-active);border-radius:8px;overflow:hidden;position:relative;background:var(--theme-deep)}#grid{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}#canvas-hint{position:absolute;right:12px;bottom:12px;background:color-mix(in srgb,var(--theme-deep) 85%,transparent);border:1px solid color-mix(in srgb,var(--theme-border) 33%,transparent);color:#9ebae0;border-radius:5px;font:9px ui-monospace,monospace;padding:8px 11px;pointer-events:none}.grid-tools{display:flex;justify-content:space-between;align-items:center;padding:21px 27px 0;gap:15px}.brushes{display:flex;gap:6px}.brushes button,.grid-tools>button{min-height:39px;padding:9px 12px;font-size:10px}.brushes button{display:flex;align-items:center;justify-content:center;gap:7px}.brushes button.selected{background:var(--theme-active);color:#d8ebff;border-color:#6492c5}.start-dot{width:7px;height:7px;background:#90d8dd;display:inline-block;border-radius:50%}.frontier-key{background:#bba4f1}.visited-key{background:#446fa3}.path-key{background:var(--theme-accent)}.visual-footer{padding-top:24px}#guarantee{font-size:10px;color:#aacfff}.toolbar .algorithm-control{max-width:440px}#grid:focus-visible{outline:2px solid #9fceff;outline-offset:-3px}@media(max-width:600px){.toolbar .algorithm-control{flex-basis:100%;max-width:none}.canvas-wrap{margin:0 20px;height:360px}.grid-tools{padding:20px 20px 0;gap:14px;flex-wrap:wrap}.brushes{width:100%}.brushes button{flex:1;font-size:9px;min-height:41px}.grid-tools>button{font-size:9px}.visual-footer{padding-top:20px}.legend{font-size:9px}}