:root{color-scheme:dark;--bg:#071015;--panel:#0e1b22;--line:#ffffff1c;--text:#eefcff;--muted:#a3b8c1;--cyan:#22d3ee;--pink:#f472b6;--green:#34d399}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 90% 0,#22d3ee15,transparent 50%),var(--bg);color:var(--text);font:16px/1.7 system-ui,sans-serif}.wrap{width:min(1100px,calc(100% - 32px));margin:auto;padding:25px 0 55px}header,.controls,.related{display:flex;align-items:center;flex-wrap:wrap;gap:12px}header{justify-content:space-between;margin-bottom:22px}a{color:var(--cyan)}h1{font-size:clamp(1.6rem,4vw,2.6rem);line-height:1.35;margin:12px 0}h2{font-size:1.15rem;margin:0 0 12px}h3{font-size:1rem}.hero,.card{border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:24px;margin-bottom:18px}.hero{padding:30px}.eyebrow{font-size:.73rem;letter-spacing:.16em;color:var(--cyan);font-weight:800}.badge{font-size:.75rem;color:var(--green);background:#34d39912;padding:5px 12px;border-radius:30px}.note,.hero p{color:var(--muted);font-size:.88rem}.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.grid>.card{min-width:0}.controls{margin:14px 0}button,select,input,textarea{font:inherit}button,select{background:#182d37;color:var(--text);border:1px solid #ffffff33;border-radius:9px;padding:9px 13px}button{cursor:pointer}button.primary{background:var(--cyan);color:#071015;font-weight:800}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--pink);outline-offset:3px}textarea{width:100%;resize:vertical;min-height:95px;background:#070f14;border:1px solid #ffffff33;border-radius:10px;color:var(--text);padding:12px}input[type=range]{accent-color:var(--cyan);max-width:100%}label{display:inline-block}.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:15px 0}.metric{background:#ffffff07;border-radius:12px;padding:14px}.metric b{display:block;font-size:1.5rem;color:var(--cyan)}.metric span{font-size:.78rem;color:var(--muted)}pre,.result{white-space:pre-wrap;overflow-wrap:anywhere;background:#070f14;padding:15px;border-radius:10px;max-height:300px;overflow:auto}.result{min-height:60px}table{border-collapse:collapse;width:100%;font-size:.85rem}th,td{text-align:left;padding:9px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.table-wrap{overflow:auto;max-height:320px}.related{border-top:1px solid var(--line);padding-top:22px;font-size:.85rem}#error{border:1px solid var(--pink);padding:15px;color:#ffb8d7}canvas{max-width:100%;display:block}details{margin-top:12px}summary{cursor:pointer;color:var(--cyan)}.stage{height:330px;position:relative;overflow:hidden;background:#050c12;border-radius:12px}.stage canvas{width:100%;height:100%}.dot{position:absolute;left:0;top:0;width:6px;height:6px;background:#22d3ee;contain:layout style paint}.swatches{display:grid;grid-template-columns:1fr 1fr}.surround{height:220px;display:grid;place-items:center}.chip{width:70px;height:70px;display:grid;place-items:center;color:white;text-shadow:0 1px 3px black}.bridge{height:40px;background:#808080;margin-top:-130px;position:relative;pointer-events:none}.illusion-box{padding-bottom:90px}.ramp{height:100px;background:linear-gradient(90deg,#111,#eee);display:flex;align-items:center}.ramp-line{height:28px;background:#808080;width:100%}#board{display:grid;grid-template-columns:repeat(25,1fr);touch-action:none;gap:1px;background:#29404b;padding:2px;border-radius:8px}#board button{padding:0;border:0;border-radius:0;aspect-ratio:1;background:#10242e;min-width:0;font-size:clamp(7px,1.5vw,12px)}#board button.wall{background:#8ba3af}#board button.seen{background:#236875}#board button.path{background:#fbbf24;color:#071015}#board button.start{background:#34d399;color:#071015}#board button.goal{background:#f472b6;color:#071015}.legend{display:flex;gap:15px;flex-wrap:wrap;font-size:.8rem}.legend span::before{content:'';display:inline-block;width:10px;height:10px;margin-right:5px;background:var(--key)}@media(max-width:650px){.grid{grid-template-columns:1fr}.card,.hero{padding:18px}.wrap{width:calc(100% - 22px)}.surround{height:180px}.chip{width:52px;height:52px}.stage{height:260px}#board button{min-height:13px}}
[hidden]{display:none!important}.illusion-box{position:relative;padding-bottom:0}.bridge{position:absolute;top:50%;left:0;width:100%;margin:0;transform:translateY(-50%)}
#map{width:100%;aspect-ratio:17/10;background:#050c12;border-radius:12px;cursor:crosshair;margin:6px 0 12px}