.hb-surface .hb-guide-roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:1rem;gap:1rem;margin-top:1.75rem}.hb-surface .hb-guide-roles article{padding:1.25rem;border:1px solid var(--line);border-radius:.3rem}.hb-surface .hb-guide-roles h2{margin:0 0 .65rem;font-size:1.1rem}.hb-surface .hb-guide-roles p{font-size:.9rem;color:var(--muted)}.hb-surface .hb-guide-roles strong{color:var(--text)}.hb-surface .hb-guide-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:.5rem;gap:.5rem;margin:1.5rem 0}.hb-surface .hb-guide-steps button{display:flex;align-items:center;justify-content:center;gap:.4rem;min-width:0;min-height:3.8rem;padding:.75rem .35rem;border:1px solid var(--line);border-radius:.3rem;background:var(--surface);color:var(--text);font-size:.9rem;white-space:nowrap;cursor:pointer}.hb-surface .hb-guide-steps button:first-child{grid-column:2}.hb-surface .hb-guide-steps button:nth-child(2){grid-column:3}.hb-surface .hb-guide-steps button[aria-pressed=true]{border-color:var(--text);background:var(--text);color:var(--surface)}.hb-surface .hb-guide-steps button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.hb-surface .hb-guide-example{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;grid-gap:2rem;gap:2rem}.hb-surface .hb-guide-figure{min-width:0;margin:0}.hb-surface .hb-guide-figure figcaption{margin-bottom:.75rem;text-align:center;color:var(--muted);font-size:.85rem}.hb-surface .hb-guide-figure .home-guide-board{margin-top:0}.hb-surface .hb-guide-last{background:rgb(255 255 255/30%);box-shadow:inset 0 0 0 2px #666}.hb-surface .hb-guide-explanation{min-width:0}.hb-surface .hb-guide-copy{display:grid}.hb-surface .hb-guide-copy>div{grid-area:1/1}.hb-surface .hb-guide-copy>[aria-hidden=true]{visibility:hidden;pointer-events:none}.hb-surface .hb-guide-navigation{display:flex;justify-content:center;align-items:center;gap:.75rem;margin-top:1rem}.hb-surface .hb-guide-navigation button{display:inline-flex;align-items:center;justify-content:center;min-width:2.75rem;min-height:2.75rem;padding:.5rem}.hb-surface .hb-guide-navigation .history-navigation-icon{width:1.75rem;height:1.75rem}.hb-surface .hb-guide-progress{color:var(--muted);font-size:.8rem;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.hb-surface .hb-guide-explanation h3{margin:.55rem 0 .8rem;font-size:1.1rem;line-height:1.6;word-break:keep-all}@container (max-width: 38rem){.hb-surface .hb-guide-example{grid-template-columns:minmax(0,1fr);gap:1.5rem}}@container (max-width: 24rem){.hb-surface .hb-guide-roles{gap:.65rem}.hb-surface .hb-guide-roles article{padding:.85rem}.hb-surface .hb-guide-roles br{display:none}.hb-surface .hb-guide-steps button{min-height:2.9rem;padding:.6rem .15rem;font-size:clamp(.68rem,3cqi,.9rem)}}