.how-field .lead{max-width:40ch}.leaflet{position:relative}.rail-track{display:none}@media(min-width:1180px){.rail-track{display:block;position:absolute;top:0;bottom:0;z-index:3;width:168px;pointer-events:none;left:calc((100% - min(1200px,100% - 80px))/2);padding-top:clamp(32px,4vw,52px)}.how-wrap{padding-left:208px}}.rail{position:sticky;top:92px;padding:12px 8px;border-radius:14px;background:var(--ground);color:var(--ink);box-shadow:inset 0 0 0 1px var(--row-sep);pointer-events:auto}.rail-group{padding:4px 10px 2px;font-size:13px;font-weight:600;color:var(--ink-2)}.rail ol+.rail-group{margin-top:10px;padding-top:12px;box-shadow:inset 0 1px 0 var(--row-sep)}.rail ol{list-style:none;margin:0;padding:0}.rail a{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:center;min-height:44px;padding:0 10px;border-radius:3px;color:var(--ink);font-size:15px;font-weight:500;text-decoration:none;transition:background-color .16s cubic-bezier(.16,1,.3,1)}.rail a:hover{background:var(--rest-tint)}.rail .rn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--row-sep);font-size:12px;font-weight:650;font-variant-numeric:tabular-nums;transition:background-color .16s cubic-bezier(.16,1,.3,1),color .16s cubic-bezier(.16,1,.3,1)}.rail a[aria-current=step]{background:var(--rest-tint);font-weight:650}.rail a[aria-current=step] .rn{background:var(--door);color:var(--door-ink);box-shadow:none}.how-room .room-head{max-width:640px}.leaflet>.how-room:first-of-type{padding-top:clamp(32px,4vw,52px)}.how-step{--w: min(64vw, 250px);--pad: .034;--lg: 44px;display:grid;gap:24px;margin-top:40px;padding-top:40px;box-shadow:inset 0 1px 0 var(--row-sep);scroll-margin-top:84px}.how-step.android{--pad: .03}.room-head+.how-step{margin-top:28px;padding-top:32px}.how-step h3{display:flex;align-items:center;gap:14px;font-size:clamp(22px,2.2vw,28px);font-weight:650;line-height:1.15;letter-spacing:-.016em}.sn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--door);color:var(--door-ink);font-size:17px;font-weight:700;letter-spacing:0;font-variant-numeric:tabular-nums}.step-words>p{margin-top:14px;max-width:46ch}.step-words>h3+p{margin-top:16px}.not-yet{font-size:15px;font-weight:600;color:var(--ink-2)}.keeps{margin-top:22px!important;padding-top:14px;max-width:46ch;box-shadow:inset 0 1px 0 var(--row-sep);font-size:16px;line-height:1.5;color:var(--ink-2)}.keeps b{display:block;margin-bottom:2px;font-size:14px;font-weight:650;color:var(--ink)}.step-fig{margin:0;display:grid;gap:18px;justify-items:center}.screen{position:relative}.pins{list-style:none;margin:0;padding:0;position:absolute;inset:0;pointer-events:none}.pins li{position:absolute;right:-11px;top:calc(var(--y) * 100%);width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--door);color:var(--door-ink);box-shadow:0 0 0 2px var(--off-white);font:700 12px/22px var(--font-body);text-align:center;font-variant-numeric:tabular-nums;transition:transform .16s cubic-bezier(.16,1,.3,1)}.pins li.is-hot{transform:scale(1.22)}.notes{list-style:none;margin:0;padding:0;counter-reset:note;display:grid;gap:12px;width:100%;max-width:420px}.notes li{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;font-size:15px;line-height:1.45;color:var(--ink-2);counter-increment:note}.notes li:before{content:counter(note);display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--door);color:var(--door-ink);font-size:12px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}.notes li>*{grid-column:2}@media(min-width:1000px){.how-step{--w: clamp(224px, 19vw, 250px);grid-template-columns:minmax(0,1fr) var(--w) minmax(200px,.8fr);column-gap:var(--lg);align-items:start}.step-words{grid-column:1;padding-top:6px}.step-fig{grid-column:2 / 4;grid-template-columns:var(--w) minmax(0,1fr);column-gap:var(--lg);justify-items:stretch;align-items:start}.notes{display:block;position:relative;max-width:none;height:calc(var(--w) * (2 * var(--pad) + (1 - 2 * var(--pad)) * 2.1641))}.notes li{position:absolute;left:0;right:0;top:calc(var(--w) * (var(--pad) + (1 - 2 * var(--pad)) * 2.1641 * var(--y)));transform:translateY(-11px)}.notes li:after{content:"";position:absolute;top:11px;right:100%;height:1px;width:calc(var(--lg) + var(--w) * var(--pad) - 11px);background:color-mix(in srgb,var(--ink) 42%,transparent);transform-origin:left center;transition:transform .7s cubic-bezier(.16,1,.3,1),background-color .16s}.notes li:nth-child(2):after{transition-delay:.12s}.notes li:nth-child(3):after{transition-delay:.24s}.notes li:hover:after{background:var(--ink)}.notes li:hover{color:var(--ink)}.js .notes li:after{transform:scaleX(0)}.js .how-step.is-in .notes li:after{transform:scaleX(1)}}.how-close{margin-top:72px}.how-close .btn{margin-top:6px}.safe-line{font-size:15px;color:var(--ink-2)}@media(prefers-reduced-motion:reduce){.js .notes li:after,.js .how-step.is-in .notes li:after,.notes li:after{transform:none;transition:none}.pins li,.pins li.is-hot,.rail a,.rail .rn{transition:none}.pins li.is-hot{transform:none}}#step-1 :is(.pins,.notes) li:nth-child(1){--y: .211}#step-1 :is(.pins,.notes) li:nth-child(2){--y: .475}#step-2 :is(.pins,.notes) li:nth-child(1){--y: .325}#step-2 :is(.pins,.notes) li:nth-child(2){--y: .79}#step-3 :is(.pins,.notes) li:nth-child(1){--y: .46}#step-3 :is(.pins,.notes) li:nth-child(2){--y: .602}#step-4 :is(.pins,.notes) li:nth-child(1){--y: .371}#step-4 :is(.pins,.notes) li:nth-child(2){--y: .735}#step-5 :is(.pins,.notes) li:nth-child(1){--y: .256}#step-5 :is(.pins,.notes) li:nth-child(2){--y: .594}#step-6 :is(.pins,.notes) li:nth-child(1){--y: .476}#step-6 :is(.pins,.notes) li:nth-child(2){--y: .931}#step-7 :is(.pins,.notes) li:nth-child(1){--y: .612}#step-7 :is(.pins,.notes) li:nth-child(2){--y: .768}#step-8 :is(.pins,.notes) li:nth-child(1){--y: .107}#step-8 :is(.pins,.notes) li:nth-child(2){--y: .45}
