.how-to{overflow-x:clip}.how-to .how-to-hero{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:160px;padding-bottom:56px;text-align:center;isolation:isolate}.how-to .how-to-hero>:not(.how-to-hero-illustration){position:relative;z-index:1}.how-to .how-to-hero-illustration{--illustration-rotation: -8deg;--illustration-float-x: 5px;--illustration-float-y: -8px;--illustration-float-rotation: 2deg;display:block;width:120px;height:auto;margin:0 auto 16px;pointer-events:none;-webkit-user-select:none;user-select:none;transform:rotate(var(--illustration-rotation));animation:how-to-illustration-in .7s cubic-bezier(.16,1,.3,1) both,how-to-illustration-float 5.4s ease-in-out .85s infinite alternate both}.how-to .how-to-title{margin:0;color:var(--text-primary)}.how-to .how-to-intro{max-width:640px;margin-top:16px;color:var(--text-secondary)}.how-to .how-to-library{padding-bottom:120px}.how-to .how-to-library>.how-to-controls:first-child{margin-top:24px}.how-to .how-to-audience{display:flex;justify-content:center;margin-bottom:24px}.how-to .how-to-audience .segmented-control{display:flex;width:fit-content;background:color-mix(in srgb,var(--text-primary) 5%,transparent)}.how-to .how-to-audience .segmented-control-item{min-width:140px;padding:8px 24px;white-space:nowrap}.how-to .how-to-controls{display:grid;grid-template-columns:minmax(0,1fr)}.how-to .how-to-controls-layer{grid-area:1 / 1;align-self:start;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;min-width:0;transition:opacity .22s ease-out,filter .22s ease-out,visibility 0s}.how-to .how-to-controls-layer[aria-hidden=true]{opacity:0;filter:blur(8px);visibility:hidden;pointer-events:none;transition:opacity .22s ease-out,filter .22s ease-out,visibility 0s .22s}.how-to .how-to-search{align-self:center;flex-wrap:nowrap}.how-to .how-to-icon-button{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:var(--background);box-shadow:inset 0 0 0 .5px var(--border);color:var(--text-secondary);cursor:pointer;transition:background .15s ease-out,color .15s ease-out;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.how-to .how-to-icon-button svg{display:block}@media (hover: hover){.how-to .how-to-icon-button:hover{background:var(--background-light);color:var(--text-primary)}}.how-to .how-to-icon-button:focus-visible{outline:2px solid var(--brand-icon);outline-offset:2px}.how-to .how-to-search-field{position:relative;display:block;flex:1 1 auto;max-width:480px}.how-to .how-to-search-icon{position:absolute;top:50%;left:12px;display:flex;color:var(--text-secondary);transform:translateY(-50%);pointer-events:none}.how-to .how-to-search-input{width:100%;height:36px;padding:0 16px 0 38px;border:1px solid var(--border);border-radius:999px;background:var(--background);color:var(--text-primary);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:border-color .2s}.how-to .how-to-search-input::placeholder{color:var(--text-secondary)}.how-to .how-to-search-input:focus{border-color:var(--brand)}.how-to .how-to-topics{display:contents}.how-to .how-to-topic{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px 0 12px;border:0;border-radius:999px;background:var(--background);box-shadow:inset 0 0 0 .5px var(--border);color:var(--text-secondary);white-space:nowrap;cursor:pointer;transition:background .15s ease-out,color .15s ease-out;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.how-to .how-to-topic svg{display:block;flex-shrink:0}@media (hover: hover){.how-to .how-to-topic:hover{background:var(--background-light);color:var(--text-primary)}}.how-to .how-to-topic[aria-pressed=true]{background:var(--brand);box-shadow:none;color:var(--brand-text)}.how-to .how-to-topic:focus-visible{outline:2px solid var(--brand-icon);outline-offset:2px}.how-to .how-to-card-grid{margin-top:32px}.how-to .how-to-empty{display:flex;flex-direction:column;align-items:center;padding:48px 0 24px;text-align:center}.how-to .how-to-empty-title{margin:0 0 8px;color:var(--text-primary)}.how-to .how-to-empty-text{max-width:440px;color:var(--text-secondary)}.how-to .how-to-empty .button-secondary{width:auto;margin-top:24px;padding:0 24px}@media (min-width: 950px){.how-to .how-to-hero-illustration{position:absolute;z-index:0;top:124px;right:32px;width:176px;margin:0}}@media (max-width: 800px){.how-to .how-to-hero{padding-top:128px}.how-to .how-to-library{padding-bottom:80px}.how-to .how-to-topic{height:40px;padding:0 16px 0 14px}.how-to .how-to-icon-button{width:40px;height:40px}.how-to .how-to-search-icon{left:14px}.how-to .how-to-search-input{height:40px;padding-left:40px}.how-to .how-to-search-field{max-width:none}}@keyframes how-to-illustration-in{0%{opacity:0}to{opacity:1}}@keyframes how-to-illustration-float{0%{transform:translateZ(0) rotate(var(--illustration-rotation))}to{transform:translate3d(var(--illustration-float-x),var(--illustration-float-y),0) rotate(calc(var(--illustration-rotation) + var(--illustration-float-rotation)))}}@media (prefers-reduced-motion: reduce){.how-to .how-to-hero-illustration{animation:none;transform:rotate(var(--illustration-rotation))}.how-to .how-to-controls-layer,.how-to .how-to-controls-layer[aria-hidden=true]{filter:none;transition:none}}