html:has(.how-page){scroll-snap-type:none}
.how-main{max-width:var(--content);margin:0 auto;padding:clamp(2rem,5vw,4.5rem) var(--gutter) clamp(3rem,6vw,6rem)}
.how-intro{max-width:58rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.how-intro h1{margin:0;font-size:clamp(2.75rem,6vw,5rem);line-height:1.05;letter-spacing:-.05em;color:var(--deep)}
.how-intro>p{max-width:45rem;margin:1.25rem 0;color:var(--muted);font-size:clamp(1.1rem,2vw,1.4rem);line-height:1.55}
.how-sections{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:1rem}
.how-sections a,.how-next>a:not(.button){display:inline-flex;align-items:center;min-height:44px;color:var(--blue-deep);font-weight:750;text-underline-offset:.22em}
.how-section{scroll-margin-top:8rem}
.how-section+.how-section{margin-top:clamp(3rem,6vw,5rem);padding-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--line)}
.how-section h2{margin:0;color:var(--deep);font-size:clamp(1.75rem,3.4vw,3rem);line-height:1.12;letter-spacing:-.035em}
.how-section>p{max-width:48rem;color:var(--muted);font-size:1.1rem;line-height:1.6}
.how-diagram{margin:1.5rem 0 0;background:var(--white);border:1px solid var(--line)}
.how-diagram>button{display:block;color:var(--blue-deep);text-decoration:none}
.how-diagram img{display:block;width:100%;height:auto}
.how-diagram>button>span{display:block;padding:1rem 1.25rem;border-top:1px solid var(--line);font-weight:750;text-decoration:underline;text-underline-offset:.2em}
.how-diagram small{display:block;margin-top:.25rem;font-size:.9rem;font-weight:400;color:var(--muted);text-decoration:none}
.how-diagram button:hover>span{background:var(--wash)}
.how-explanation{border-bottom:1px solid var(--line)}
.how-explanation summary{min-height:52px;display:list-item;padding:1rem 0;cursor:pointer;font-weight:750;color:var(--blue-deep)}
.how-explanation dl,.how-explanation ol{max-width:52rem;margin:0;padding:0 0 1.5rem;color:var(--ink);line-height:1.65}
.how-explanation dt{font-weight:750;margin-top:1rem}.how-explanation dd{margin:.3rem 0 0}
.how-explanation ol{padding-left:1.5rem}.how-explanation li{padding-left:.4rem}.how-explanation li+li{margin-top:1rem}
.how-next{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line)}
.how-main a:focus-visible,.how-main summary:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
@media(max-width:480px){.how-sections{display:grid;gap:.25rem}.how-diagram>button>span{padding:.8rem}.how-next{align-items:stretch;flex-direction:column}.how-next .button{width:100%}}

.how-diagram>button{position:relative;width:100%;padding:0;border:0;border-radius:0;background:transparent;text-align:left;font:inherit;cursor:zoom-in}
.how-diagram .how-diagram__action{display:flex;align-items:center;gap:.65rem;text-decoration:none}
.how-diagram__action svg{position:absolute;top:.75rem;right:.75rem;width:44px;height:44px;padding:10px;border-radius:.4rem;background:rgb(9 22 32 / .32);color:rgb(255 255 255 / .85);fill:none;stroke:currentColor;stroke-width:2;flex:none;box-shadow:0 1px 5px #0003}
.how-diagram button:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
dialog.diagram-viewer{position:fixed;inset:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#091620;color:#fff;overflow:hidden;overscroll-behavior:contain}
dialog.diagram-viewer[open]{display:flex;flex-direction:column}
.diagram-viewer::backdrop{background:#091620}
.diagram-viewer__stage{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none;overscroll-behavior:contain;cursor:zoom-in}
.diagram-viewer__stage.is-zoomed{cursor:grab}
.diagram-viewer__stage:active{cursor:grabbing}
.diagram-viewer__stage img{position:absolute;left:50%;top:50%;max-width:none;max-height:none;transform-origin:center;user-select:none;pointer-events:none}
.diagram-viewer__retract{position:absolute;z-index:1;left:max(env(safe-area-inset-left),var(--control-left,12px));top:max(env(safe-area-inset-top),var(--control-top,12px));display:grid;place-items:center;width:44px;height:44px;padding:10px;border:0;border-radius:.4rem;background:#172f40;color:#fff;cursor:pointer;box-shadow:0 1px 5px #0003}
.diagram-viewer__retract svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2}
.diagram-viewer__retract:focus-visible{outline:3px solid #b8e5ff;outline-offset:2px}
.diagram-viewer__controls{flex:0 0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1rem;padding:.5rem max(.75rem,env(safe-area-inset-right)) max(.5rem,env(safe-area-inset-bottom)) max(.75rem,env(safe-area-inset-left));max-height:45%;overflow:auto;background:#091620;color:#fff;border-top:1px solid #5c7080}
.diagram-viewer__controls [role="group"]{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.35rem}
.diagram-viewer__controls button{min-width:44px;min-height:44px;padding:.4rem .65rem;border:1px solid #8299aa;border-radius:.4rem;background:#172f40;color:#fff;font:inherit;cursor:pointer}
.diagram-viewer__controls button:disabled{color:#9baab5;border-color:#536370;cursor:default}
.diagram-viewer__controls output{min-width:4ch;text-align:center;font-variant-numeric:tabular-nums}
.diagram-viewer__controls details{flex-basis:100%;text-align:center;font-size:.875rem}
.diagram-viewer__controls summary{display:inline-block;min-height:44px;padding:.5rem;cursor:pointer;text-decoration:underline}
.diagram-viewer__controls p{margin:.25rem auto .5rem;max-width:42rem;font-size:inherit;color:inherit;line-height:1.5}

.diagram-viewer__controls[hidden]{display:none}