html,body{margin:0;background:var(--ff-bg)}.how{min-height:100vh;background:var(--ff-bg);color:var(--ff-text);font:400 16px/1.6 var(--ff-font)}.how a{color:var(--ff-accent)}.how a:hover{color:var(--ff-accent-hover)}.how-main{max-width:1180px;margin:0 auto;padding:40px 20px 80px}.how-kicker,.how-step{margin:0 0 8px;font:var(--ff-label);letter-spacing:var(--ff-label-spacing);text-transform:uppercase;color:var(--ff-accent)}.how-title{margin:0;max-width:820px;font:750 clamp(28px,4.4vw,46px)/1.1 var(--ff-font);letter-spacing:-.02em}.how-lede{max-width:720px;margin:16px 0 0;color:var(--ff-text-2);font-size:18px}.how-chapter{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px;align-items:start;margin-top:72px;padding-top:32px;border-top:1px solid var(--ff-line)}.how-copy h3{margin:0 0 12px;font:700 clamp(21px,2.6vw,28px)/1.2 var(--ff-font);letter-spacing:-.01em}.how-copy p{margin:0 0 14px;color:var(--ff-text-2);max-width:560px}.how-copy b,.how-copy em{color:var(--ff-text)}.how-visual{min-width:0;background:var(--ff-surface);border:1px solid var(--ff-line);border-radius:var(--ff-radius-lg);padding:18px}#world .how-visual{position:sticky;top:16px}.how-controls{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-bottom:12px;font-size:14px;color:var(--ff-text-2)}.how-controls select,.how-controls button{min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--ff-line-strong);background:var(--ff-bg);color:var(--ff-text);font:550 14px var(--ff-font);cursor:pointer}.how-controls select{margin-left:6px;border-radius:8px}.how-controls button:hover,.how-controls select:hover{border-color:var(--ff-accent)}.how-controls :focus-visible,.how-cta:focus-visible{outline:2px solid var(--ff-accent);outline-offset:2px}.how-check{display:inline-flex;gap:6px;align-items:center;cursor:pointer}.how-canvas{display:block;width:100%;height:auto;aspect-ratio:660 / 480;border-radius:var(--ff-radius);background:#05080b}.how-readout{margin:10px 0 0;font:500 13px var(--ff-mono);color:var(--ff-muted);font-variant-numeric:tabular-nums}.how-legend ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px;color:var(--ff-text-2)}.how-legend li{display:flex;align-items:center;gap:10px}.sw{display:inline-block;width:18px;height:18px;border-radius:4px;border:1px solid var(--ff-line-strong)}.sw.unknown{background:#0b1218}.sw.free{background:#56e0ff59}.sw.visited{background:#3dff9a99}.sw.wall{background:#eef4f7}.sw.path{background:#ffd166;height:4px;border:0}.how-obs{display:flex;gap:3px;height:72px}.how-obs span{display:flex;flex-direction:column;justify-content:space-between;min-width:0;padding:6px;border-radius:6px;background:var(--ff-accent-soft);border:1px solid var(--ff-line);overflow:hidden}.how-obs b{font:600 11.5px/1.2 var(--ff-font);color:var(--ff-text);overflow:hidden;text-overflow:ellipsis}.how-obs small{font:500 12px var(--ff-mono);color:var(--ff-muted)}.how-obs-notes{margin:14px 0 0;padding-left:18px;display:grid;gap:6px;font-size:14px;color:var(--ff-text-2)}.how-net{margin:14px 0 0;font-size:15px;color:var(--ff-text-2)}.how-net code{font:600 14px var(--ff-mono);color:var(--ff-text);background:var(--ff-bg);padding:2px 6px;border-radius:6px}.how-bars{list-style:none;margin:0;padding:0;display:grid;gap:14px}.how-bars li{display:grid;grid-template-columns:minmax(110px,170px) minmax(0,1fr) 62px;grid-template-rows:auto auto;gap:2px 12px;align-items:center}.how-bar-label{font-size:14.5px;color:var(--ff-text)}.how-bar-track{height:12px;border-radius:4px;background:var(--ff-bg);overflow:hidden}.how-bar-track span{display:block;height:100%;border-radius:4px;background:var(--ff-text-2)}.how-bars li.accent .how-bar-track span{background:var(--ff-accent)}.how-bars li.muted .how-bar-track span{background:var(--ff-muted);opacity:.7}.how-bars li.danger .how-bar-track span{background:var(--ff-danger)}.how-bar-value{font:650 14px var(--ff-mono);text-align:right;font-variant-numeric:tabular-nums}.how-bar-note{grid-column:2 / 4;font-size:12.5px;color:var(--ff-muted)}.how-foot{margin:16px 0 0;font-size:13px;color:var(--ff-muted)}.how-phases{margin:0;padding:0;list-style:none;counter-reset:phase;display:grid;gap:4px}.how-phases li{counter-increment:phase;display:grid;grid-template-columns:34px 90px minmax(0,1fr);gap:10px;padding:10px 4px;border-bottom:1px solid var(--ff-line);font-size:14.5px}.how-phases li:last-child{border-bottom:0}.how-phases li:before{content:counter(phase);font:650 14px var(--ff-mono);color:var(--ff-accent)}.how-phases b{color:var(--ff-text)}.how-phases span{color:var(--ff-text-2)}.how-cta{display:inline-flex;align-items:center;min-height:40px;margin:4px 8px 4px 0;padding:0 16px;border-radius:999px;background:var(--ff-accent);color:var(--ff-accent-ink)!important;font-weight:650;text-decoration:none}.how-cta:hover{background:var(--ff-accent-hover)}.how-cta.ghost{background:transparent;border:1px solid var(--ff-line-strong);color:var(--ff-text)!important}.how-facts dl{margin:0;display:grid;gap:12px}.how-facts div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px}.how-facts dt{font:var(--ff-label);letter-spacing:var(--ff-label-spacing);text-transform:uppercase;color:var(--ff-muted);padding-top:3px}.how-facts dd{margin:0;color:var(--ff-text-2)}@media(max-width:860px){.how-main{padding:28px 16px 64px}.how-chapter{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:48px}#world .how-visual{position:static}.how-obs{flex-wrap:wrap;height:auto}.how-obs span{flex:1 1 30%!important;min-height:52px}.how-bars li{grid-template-columns:minmax(96px,120px) minmax(0,1fr) 56px}.how-phases li{grid-template-columns:26px minmax(0,1fr)}.how-phases span{grid-column:2}.how-facts div{grid-template-columns:minmax(0,1fr);gap:2px}}