*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#1a1a2e;--surface:#16213e;--border:#0f3460;--accent:#7ec8e3;--text:#e0e0e0;--muted:#8a93a5;--green:#4caf50;--red:#ef5350;--orange:#ff9800;--yellow:#ffd54f;--code:#b5cea8;--cell:clamp(17px,2.2vw,24px)}html{scroll-behavior:smooth}body{font-family:'Segoe UI','Yu Gothic UI',sans-serif;background:radial-gradient(circle at 85% 3%,rgba(126,200,227,.07),transparent 28rem),var(--bg);color:var(--text);line-height:1.7;min-height:100vh}code,pre{font-family:Consolas,'Cascadia Code',monospace}a{color:var(--accent)}.top{max-width:1080px;margin:auto;padding:20px 24px 0;display:flex;justify-content:space-between}.top a{text-decoration:none;font-size:.82rem;opacity:.82}header{max-width:920px;margin:auto;padding:54px 24px 60px;text-align:center}.eyebrow{display:inline-block;border:1px solid #315078;border-radius:99px;padding:4px 14px;color:var(--accent);font:700 .7rem Consolas,monospace;letter-spacing:.08em;margin-bottom:17px}h1{color:var(--accent);font-size:clamp(2rem,5vw,3.4rem);line-height:1.18;margin-bottom:16px}.lead{color:#abb4c5;max-width:720px;margin:auto}.flow{margin-top:28px;display:flex;justify-content:center;align-items:center;gap:7px;flex-wrap:wrap}.flow span{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:6px 10px;font:.73rem Consolas,monospace}.flow b{color:var(--accent)}.layout{max-width:1080px;margin:auto;padding:0 24px 70px;display:grid;grid-template-columns:170px minmax(0,1fr);gap:38px;align-items:start}.nav{position:sticky;top:22px;border-left:1px solid var(--border);padding-left:15px}.nav small{color:#58657b;letter-spacing:.1em}.nav a{display:block;text-decoration:none;color:#6e7b90;font-size:.74rem;padding:5px 0}.nav a.active{color:var(--accent)}main{min-width:0}.card{background:rgba(22,33,62,.97);border:1px solid var(--border);border-radius:12px;padding:clamp(20px,4vw,34px);margin-bottom:44px;scroll-margin-top:22px;overflow:hidden}.heading{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px}.num{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--accent);border:1px solid var(--accent);font:700 .78rem Consolas,monospace}.kicker{color:#647087;font:.67rem Consolas,monospace;letter-spacing:.08em}.heading h2{font-size:clamp(1.1rem,3vw,1.5rem);line-height:1.4}.intro{color:#a9b3c3;font-size:.87rem;margin-bottom:22px}.visual{display:grid;grid-template-columns:minmax(300px,auto) minmax(220px,1fr);gap:26px;align-items:center}.board-wrap{overflow-x:auto;padding-bottom:6px}.board{display:grid;grid-template-columns:repeat(17,var(--cell));grid-template-rows:repeat(17,var(--cell));width:max-content}.axis,.corner{display:grid;place-items:center;color:#758199;font:.54rem Consolas,monospace}.axis.x{color:#8ebed1}.axis.y{color:#8fb298}.cell{position:relative;display:grid;place-items:center;background:#0d1422;border-right:1px solid #1d2b43;border-bottom:1px solid #1d2b43;font-size:calc(var(--cell)*.52)}.cell.top{border-top:1px solid #1d2b43}.cell.left{border-left:1px solid #1d2b43}.cell.wall{background:#40516a}.cell.visited{background:rgba(126,200,227,.2)}.cell.path{background:rgba(76,175,80,.35)}.cell.start:after{content:'S';color:#a5d6a7;font-weight:800}.cell.goal:after{content:'G';color:#ffd54f;font-weight:800}.cell.current:after{content:'●';color:#ccff90}.cell.rock:after{content:'◆';color:#90a4ae}.cell.item:after{content:attr(data-value);color:#ffe082;font-weight:700}.cell.clear:after{content:'★';color:#fff59d}.cell.player:after{content:'▲';color:#69f0ae}.cell.danger{background:rgba(239,83,80,.28)}.cell.safe{background:rgba(76,175,80,.22)}.cell.frontier{box-shadow:inset 0 0 0 2px var(--accent)}.caption{width:calc(var(--cell)*17);text-align:center;color:#68758a;font-size:.68rem;margin-top:5px}.explain h3{color:var(--accent);font-size:.9rem;margin-bottom:8px}.explain p{color:#a4aebe;font-size:.82rem;margin-bottom:12px}.code{background:#080e1b;border:1px solid #1a3558;border-radius:7px;padding:12px 14px;overflow-x:auto;color:#c8d0e0;font-size:.74rem;line-height:1.65;white-space:pre}.code .c{color:#608b4e}.note{margin-top:15px;background:rgba(126,200,227,.07);border:1px solid rgba(126,200,227,.25);border-radius:7px;padding:12px 14px;color:#a9c9d6;font-size:.8rem}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:18px}.steps div{position:relative;background:#0a1222;border:1px solid #1a3a60;border-radius:7px;padding:11px 8px;text-align:center;color:#9da9bb;font-size:.7rem}.steps strong{display:block;color:var(--code)}.steps div:not(:last-child):after{content:'→';position:absolute;right:-8px;top:50%;color:var(--accent);transform:translate(50%,-50%);z-index:2}.compare{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.compare div{background:#0a1222;border:1px solid #1a3a60;border-radius:8px;padding:14px}.compare strong{display:block;color:var(--accent);font-size:.82rem}.compare span{color:#8591a4;font-size:.72rem}.summary{display:grid;gap:0}.summary div{display:grid;grid-template-columns:145px 1fr;gap:14px;padding:10px 0;border-bottom:1px solid var(--border);font-size:.8rem}.summary code{color:var(--code)}.summary span{color:#9da8b9}.back{display:inline-block;margin-top:20px;background:#1b5e20;border:1px solid #2e7d32;color:#fff;text-decoration:none;border-radius:6px;padding:7px 13px;font-size:.8rem}footer{text-align:center;color:#4e5a6f;font-size:.72rem;padding:28px}
@media(max-width:780px){.layout{grid-template-columns:1fr}.nav{display:none}.visual{grid-template-columns:1fr}.board-wrap{margin:auto;max-width:100%}.steps,.compare{grid-template-columns:1fr 1fr}.steps div:after{display:none}}@media(max-width:480px){header{padding:40px 16px}.layout{padding-inline:12px}.steps,.compare{grid-template-columns:1fr}.summary div{grid-template-columns:1fr;gap:2px}}