:root{--bg: #f7f7f9;--card: #ffffff;--text: #0f172a;--muted: #64748b;--border: #e5e7eb;--ring: #93c5fd;--accent: #2563eb;--green: #16a34a;--red: #ef4444;--amber: #f59e0b;--radius: 14px;--radius-sm: 10px;--shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);--shadow-md: 0 8px 24px rgba(15, 23, 42, .08);--shadow-lg: 0 14px 40px rgba(15, 23, 42, .1);--panel-w: clamp(560px, 56vw, 1120px)}@media (prefers-color-scheme: dark){:root{--bg: #0b1220;--card: #0e1726;--text: #e5e7eb;--muted: #94a3b8;--border: #1f2937;--ring: #60a5fa;--accent: #60a5fa;--green: #22c55e;--red: #f43f5e;--amber: #fbbf24}}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";color:var(--text);background:radial-gradient(1200px 800px at 20% -10%,rgba(37,99,235,.06),transparent 60%),radial-gradient(1000px 600px at 110% 10%,rgba(34,197,94,.06),transparent 60%),var(--bg);display:flex;flex-direction:column;align-items:center}header{width:100%;max-width:1280px;padding:1.25rem 1.25rem .75rem;position:relative}h1{margin:0 0 .75rem;font-size:1.25rem;font-weight:700;letter-spacing:.2px}.controls{background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-sm);border-radius:var(--radius);padding:.75rem;display:grid;grid-template-columns:1fr auto auto auto auto;gap:.5rem .5rem;align-items:center}.psControlsGrid{display:contents}.maze .psControlsGrid{display:grid;grid-template-columns:auto auto;gap:.5rem;grid-column:3 / 6;align-items:center}.maze .psControlsGrid>button{width:100%}.maze .psControlsGrid .resetSpan{grid-column:1 / 3}@media (max-width:960px){.maze .psControlsGrid{grid-column:1 / -1;grid-template-columns:1fr 1fr}.maze .psControlsGrid .resetSpan{grid-column:1 / -1}}@media (max-width: 960px){.controls{grid-template-columns:1fr 1fr}}@media (max-width: 1200px){.controls{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));align-items:center}.controls button{min-width:96px}.controls input[type=range]{width:100%}.controls .modePanel,.controls .markerPanel{grid-column:1 / -1;justify-content:flex-start;flex-wrap:wrap;gap:.5rem}.controls .resetFull{justify-self:start}}@media (max-width: 900px){.controls{grid-template-columns:1fr 1fr}}@media (max-width: 560px){.controls{grid-template-columns:1fr}}.controls label{color:var(--muted);font-size:.9rem;display:flex;align-items:center;gap:.35rem}.controls .modePanel{display:none;gap:.5rem;align-items:center;justify-content:flex-end}.controls .modePanel.visible{display:flex}select,input[type=number],input[type=text]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--border);background:var(--card);color:var(--text);padding:.45rem .6rem;border-radius:10px;font-size:.95rem;outline:none;transition:box-shadow .15s ease,border-color .15s ease}select:focus,input[type=number]:focus,input[type=text]:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 35%,transparent)}button{border:1px solid var(--border);background:var(--card);color:var(--text);padding:.45rem .7rem;border-radius:10px;font-size:.95rem;cursor:pointer;transition:transform .05s ease,box-shadow .15s ease,border-color .15s ease,background .15s ease;box-shadow:var(--shadow-sm);-webkit-tap-highlight-color:transparent}button:hover{border-color:color-mix(in srgb,var(--accent) 30%,var(--border))}button:active{transform:translateY(1px)}button:disabled{opacity:.5;cursor:not-allowed}button:focus,button:focus-visible{outline:none}button::-moz-focus-inner{border:0}button.primary{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 14%,var(--card)),var(--card));border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}.modePanel button.active{background:color-mix(in srgb,var(--accent) 10%,var(--card));border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}#removeEdge.active{background:color-mix(in srgb,#ef4444 12%,var(--card))}#deleteNode.active{background:color-mix(in srgb,#ef4444 8%,var(--card))}input[type=range]{width:160px;height:2px;background:var(--border);border-radius:999px;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:999px;background:var(--accent);border:2px solid var(--card);box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 30%,transparent)}input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:999px;background:var(--accent);border:2px solid var(--card)}main{position:relative;width:100%;max-width:1440px;padding:1rem 1.25rem 2rem}.canvasWrap{display:grid;grid-template-columns:max-content minmax(520px,var(--panel-w));gap:.75rem;align-items:start;width:100%}@media (max-width: 1200px){.canvasWrap{grid-template-columns:1fr}}.canvasWrap{grid-template-areas:"canvas info"}.canvasWrap.splitInfo{grid-template-areas:"canvas info" "code   info";grid-auto-rows:auto}.canvasWrap.stackInfo{grid-template-areas:"canvas" "info" "code";grid-template-columns:1fr}@media (max-width: 1200px){.canvasWrap{grid-template-areas:"canvas" "info" "code"}}@media (max-width: 1360px){.canvasWrap{grid-template-columns:1fr}.canvasWrap{grid-template-areas:"canvas" "info" "code"}#infoPanel{width:100%;flex:1 1 100%;max-width:100%;order:2}#infoPanel .code{display:flex}#codeBelow{display:none}}canvas{grid-area:canvas}#infoPanel{grid-area:info}#codeBelow{grid-area:code}canvas{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow-md);cursor:crosshair;display:block;max-width:none;justify-self:start;align-self:start}:root{--settings-modal-w: 380px}@media (max-width: 560px){:root{--settings-modal-w: 92vw}}.markerPanel{display:flex;gap:.5rem;align-items:center;justify-content:flex-end}.marker{-webkit-user-select:none;user-select:none;cursor:grab;display:inline-flex;align-items:center;gap:.35rem;font-size:.95rem;padding:.3rem .5rem;border-radius:12px;border:1px dashed var(--border);background:var(--card)}.marker .box{width:18px;height:18px;border:1px solid var(--border);border-radius:4px}.marker.used .box{opacity:.35}.marker.used{cursor:pointer}#infoPanel{position:relative;width:auto;flex:initial;padding:.75rem .9rem;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-lg);border-radius:var(--radius);font-size:.9rem;line-height:1.45;overflow:hidden;display:grid;grid-template-rows:auto 1fr;gap:.5rem}@media (min-width: 1201px){#infoPanel{position:sticky;top:.5rem;align-self:flex-start;max-height:calc(100vh - 1rem)}}@media (max-width: 1200px){#infoPanel{width:100%;flex:1 1 100%;max-width:100%;order:2}}#infoPanel .infoHeader h2{margin:.25rem 0;font-size:1.05rem}#infoPanel .infoGrid{display:grid;grid-template-columns:.8fr 2.4fr;grid-template-rows:auto auto;gap:.6rem;min-height:0}#infoPanel .infoGrid>section{background:color-mix(in srgb,var(--card),transparent 4%);border:1px solid var(--border);padding:.6rem .65rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;min-height:0;overflow:hidden;border-radius:12px}#infoPanel h3{margin:.1rem 0 .4rem;font-size:.95rem;color:var(--muted)}#infoPanel .need{grid-area:1 / 1 / 2 / 2}#infoPanel .how{grid-area:2 / 1 / 3 / 2}#infoPanel .code{grid-area:1 / 2 / 3 / 3}#infoPanel .need,#infoPanel .how{--fit-scale: 1}#infoPanel .need ul.bullet,#infoPanel .how .howBody{font-size:calc(.95rem * var(--fit-scale));line-height:calc(1.45 * var(--fit-scale))}#infoPanel ul.bullet,#infoPanel .howBody{white-space:normal;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}#infoPanel ul.bullet{padding-left:0;margin:0;list-style:none;color:var(--text);overflow:visible;white-space:normal;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}#infoPanel .howBody{overflow:visible;white-space:normal;text-wrap:pretty;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}#infoPanel .code{display:flex;min-height:0}#infoPanel .codeBlock{flex:1 1 auto;margin:0;white-space:pre;overflow-x:auto;overflow-y:auto;word-break:normal;background:color-mix(in srgb,var(--card),transparent 6%);border:1px dashed var(--border);padding:.6rem;border-radius:10px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:clamp(.72rem,1.6vw,.78rem);line-height:1.35}@media (max-width: 900px){#infoPanel .infoGrid{grid-template-columns:1fr;grid-template-rows:auto auto auto}#infoPanel .need{grid-area:1 / 1 / 2 / 2}#infoPanel .how{grid-area:2 / 1 / 3 / 2}#infoPanel .code{grid-area:3 / 1 / 4 / 2}}#infoPanel h2{margin:.25rem 0 .5rem;font-size:1.05rem}#infoPanel h3{margin:.5rem 0 .35rem;font-size:.95rem;color:var(--muted)}#infoPanel pre{white-space:pre-wrap;background:color-mix(in srgb,var(--card),transparent 8%);border:1px dashed var(--border);padding:.5rem;border-radius:10px;font-size:.85rem;overflow:auto}#infoPanel ul.bullet{padding-left:1.25rem;margin:0;list-style-type:disc}#infoPanel ul.bullet li{margin:.15rem 0;color:var(--text)}.canvasWrap.splitInfo #infoPanel .code,#codeBelow{display:none}.canvasWrap.splitInfo #codeBelow{display:block}@media (max-width: 1200px){#infoPanel .code{display:flex}#codeBelow{display:none}}#codeBelow{background:color-mix(in srgb,var(--card),transparent 4%);border:1px solid var(--border);border-radius:12px;padding:.6rem .65rem;box-shadow:var(--shadow-sm);font-size:.9rem}#codeBelow h3{margin:.5rem 0 .35rem;font-size:.95rem;color:var(--muted)}#metrics{margin-top:.75rem;font-size:.9rem;color:var(--muted)}body.theme-light{--bg: #f7f7f9;--card: #ffffff;--text: #0f172a;--muted: #64748b;--border: #e5e7eb;--ring: #93c5fd;--accent: #2563eb;--grid-lines: rgba(229,231,235,.8);--wall: #0f172a}body.theme-dark{--bg: #10192a;--card: #0e1726;--text: #e5e7eb;--muted: #94a3b8;--border: #1f2937;--ring: #60a5fa;--accent: #60a5fa;--grid-lines: rgba(148,163,184,.28);--wall: #334155}.themeToggle{position:absolute;top:10px;right:12px;z-index:5}.themeToggle .iconBtn{border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:999px;width:36px;height:36px;display:grid;place-items:center;box-shadow:0 1px 2px #00000014;cursor:pointer}.themeToggle .iconBtn:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--border))}.controls .modePanel .toggle{position:relative}.controls .modePanel .toggle[aria-pressed=true]{background:color-mix(in srgb,var(--accent) 16%,var(--card));border-color:color-mix(in srgb,var(--accent) 55%,var(--border));box-shadow:inset 0 2px 6px #0000002e,inset 0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent),var(--shadow-sm);transform:translateY(1px)}.controls .modePanel #removeEdge[aria-pressed=true]{background:color-mix(in srgb,#ef4444 15%,var(--card));border-color:color-mix(in srgb,#ef4444 55%,var(--border))}.controls .modePanel #deleteNode[aria-pressed=true]{background:color-mix(in srgb,#ef4444 12%,var(--card));border-color:color-mix(in srgb,#ef4444 50%,var(--border))}.controls .modePanel .toggle[aria-pressed=true]:after{content:"";position:absolute;right:8px;top:8px;width:8px;height:8px;border-radius:999px;background:currentColor;opacity:.6}body{background:var(--bg);min-height:100svh;position:relative}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:-1;background:radial-gradient(1200px 800px at 20% -10%,rgba(37,99,235,.06),transparent 60%),radial-gradient(1000px 600px at 110% 10%,rgba(34,197,94,.06),transparent 60%),var(--bg)}.topButtons{position:absolute;top:10px;right:12px;z-index:6;display:flex;align-items:center;gap:8px}.topButtons .iconBtn{border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:999px;width:36px;height:36px;display:grid;place-items:center;box-shadow:0 1px 2px #00000014;cursor:pointer;font-size:22px;line-height:1}.topButtons .iconBtn:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--border))}.settingsBtn{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 12%,var(--card)),var(--card));border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}@keyframes overlayFade{0%{opacity:0}to{opacity:1}}@keyframes panelPop{0%{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.modalOverlay{position:fixed;top:0;right:0;bottom:0;left:0;background:color-mix(in srgb,#0b1220 36%,transparent);z-index:50;animation:overlayFade .18s ease-out both;display:grid;place-items:center;padding:1rem}.modalPanel{width:min(var(--settings-modal-w),92vw);background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);color:var(--text);animation:panelPop .22s cubic-bezier(.2,.8,.2,1) both;display:grid;grid-template-rows:auto 1fr auto;gap:.5rem;padding:.65rem .7rem}.modalHeader{display:flex;align-items:center;justify-content:space-between}.modalHeader h2{margin:.25rem 0;font-size:1.05rem}.modalBody{display:grid;gap:.65rem;padding:.25rem 0 .5rem}.modalBody .row{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.modalBody .checkboxRow{justify-content:flex-start;gap:.5rem}.modalBody input[type=number]{width:5.5rem;text-align:right}.modalFooter{display:flex;justify-content:flex-end;gap:.5rem;padding-top:.25rem}.closeBtn{width:32px;height:32px}@media (prefers-reduced-motion: reduce){.modalOverlay,.modalPanel{animation:none!important}}.toast{position:fixed;left:50%;bottom:0;transform:translate(-50%) translateY(16px);z-index:1000;display:grid;grid-template-columns:22px auto;gap:.55rem;align-items:center;max-width:min(92vw,560px);width:max-content;min-width:220px;padding:.6rem .9rem;color:#fff;background:color-mix(in srgb,var(--red) 86%,transparent);border:1px solid color-mix(in srgb,var(--red) 60%,transparent);border-top-left-radius:var(--radius);border-top-right-radius:var(--radius);box-shadow:0 10px 40px #00000040,0 -2px 6px #00000014;pointer-events:none;opacity:0;visibility:hidden;transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .2s ease,visibility 0s .22s}.toast.visible{transform:translate(-50%) translateY(0);opacity:1;visibility:visible;transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .2s ease,visibility 0s}.toast .toastIcon{display:grid;place-items:center}.toast svg{width:20px;height:20px;color:#fff}