.howto-list{margin-top:24px}.howto{border-top:1px solid var(--line-1);scroll-margin-top:88px}.howto:last-child{border-bottom:1px solid var(--line-1)}.howto-head{display:flex;width:calc(100% + 32px);align-items:center;gap:16px;margin:0 -16px;padding:18px 16px;border-radius:var(--r-3);text-align:left;transition:background var(--t-1) var(--ease)}.howto-head:hover{background:#ffffff09}.howto-heading{display:grid;flex:1;gap:2px;min-width:0}.howto-title{font-size:1rem;line-height:1.4;color:var(--fg-0);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color var(--t-2) var(--ease)}.howto-lead{font-size:.875rem;line-height:1.5;color:var(--fg-3)}.howto-action{display:inline-flex;flex:none;align-items:center;gap:10px;min-width:6.5rem;justify-content:center;padding:6px 14px 6px 16px;border:1px solid var(--fg-4);border-radius:999px;font-size:.875rem;color:var(--fg-0);transition:color var(--t-1) var(--ease),background var(--t-1) var(--ease),border-color var(--t-1) var(--ease)}.howto-head:hover .howto-action{border-color:var(--fg-2);background:var(--bg-3)}.howto-head:hover .howto-title{text-decoration-color:var(--line-3)}.howto-chev{display:block;width:7px;height:7px;margin-top:-3px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);transition:transform var(--t-2) var(--ease),margin var(--t-2) var(--ease)}.howto.is-open .howto-chev{margin-top:3px;transform:rotate(-135deg)}.howto-head:focus-visible{outline:2px solid var(--accent-500);outline-offset:2px;border-radius:var(--r-2)}.howto-panel{padding:4px 0 36px}.howto-panel:not([hidden]){animation:howto-in .26s var(--ease) both}@keyframes howto-in{0%{opacity:0;transform:translateY(-6px)}}.howto-body{display:grid;gap:24px}.howto-figure{transition:opacity .12s linear}.howto-figure .mock-frame:not(.bare){box-shadow:0 0 0 1px #ffffff12,0 24px 48px -24px #00000080}@media(min-width:1200px){.howto-body.beside{grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);gap:48px;align-items:start}}.howto-body:not(.beside) .howto-figure{max-width:1040px}.howto-steps{display:grid;gap:20px 16px;margin:0;padding:0;list-style:none;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.howto-step>button,.howto-step>div{position:relative;display:grid;align-content:start;gap:6px;width:100%;text-align:left}.howto-step-bar{position:relative;display:block;height:2px;margin-bottom:8px;overflow:hidden;border-radius:2px;background:var(--line-2)}.howto-step-bar>span{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--fg-1);transform-origin:left;transform:scaleX(var(--fill, 0));transition:transform .1s linear}.howto-body.beside .howto-steps{grid-template-columns:1fr;gap:4px}.howto-body.beside .howto-step>button,.howto-body.beside .howto-step>div{padding:12px 0 12px 20px}.howto-body.beside .howto-step-bar{position:absolute;top:0;bottom:0;left:0;width:2px;height:auto;margin:0}.howto-body.beside .howto-step-bar>span{transform-origin:top;transform:scaleY(var(--fill, 0))}.howto-step-title{display:flex;align-items:baseline;gap:8px;font-size:.9375rem;line-height:1.4;color:var(--fg-2);transition:color var(--t-2) var(--ease)}.howto-step-n{font-size:.8125rem;color:var(--fg-4);font-variant-numeric:tabular-nums}.howto-step-text{font-size:.8125rem;line-height:1.55;color:var(--fg-3);transition:color var(--t-2) var(--ease)}.howto-step.is-current .howto-step-title{color:var(--fg-0)}.howto-step.is-current .howto-step-text{color:var(--fg-1)}.howto-step>button{cursor:pointer}.howto-step>button:hover .howto-step-title{color:var(--fg-0)}.howto-step>button:focus-visible{outline:2px solid var(--accent-500);outline-offset:4px;border-radius:var(--r-2)}.howto-figure .product-signin-pointer{filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}.howto-figure .product-signin-pointer svg path:nth-of-type(1){stroke:#fff;stroke-width:4}.howto-figure .product-signin-pointer svg path:nth-of-type(2){fill:#000;stroke:#000;stroke-width:1}.howto-figure .product-signin-pointer:before{content:"";position:absolute;top:8px;left:8px;width:30px;height:30px;margin:-15px 0 0 -15px;box-sizing:border-box;border-radius:50%;border:1.5px solid var(--accent-500);box-shadow:0 0 0 1px #fffffff2}.howto-figure .product-signin-ring{border-color:var(--accent-400)}@media(prefers-reduced-motion:reduce){.howto-panel:not([hidden]){animation:none}}