.howto-titlebar{justify-content:space-between;align-items:baseline;gap:var(--sp-3);display:flex}.howto-trigger{width:44px;min-width:44px;height:44px;margin-block:calc(-22px + .8rem);margin-right:calc(var(--sp-2) * -1);color:var(--ink-faint);cursor:pointer;background:0 0;border:0;flex:none;justify-content:center;align-self:center;align-items:center;padding:0;display:inline-flex}.howto-trigger>span{border:1px solid var(--rule-strong);width:1.6rem;height:1.6rem;font-size:var(--step--1);border-radius:50%;place-items:center;font-weight:600;line-height:1;display:grid}.howto-trigger:active>span{border-color:var(--accent);color:var(--accent)}@media (hover:hover) and (pointer:fine){.howto-trigger>span{transition:border-color .12s,color .12s}.howto-trigger:hover>span{border-color:var(--accent);color:var(--accent)}}.howto-layer{z-index:40;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.howto-scrim{background:var(--ink);opacity:.5;animation:.16s ease-out howto-fade-in;position:absolute;inset:0}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .howto-scrim{background:var(--paper);opacity:.72}}:root[data-theme=dark] .howto-scrim{background:var(--paper);opacity:.72}:root[data-theme=light] .howto-scrim{background:var(--ink);opacity:.5}.howto-sheet{z-index:1;width:100%;max-width:40rem;max-height:min(88dvh, calc(100dvh - var(--sp-6)));border-top:1px solid var(--rule-strong);background:var(--paper);border-radius:14px 14px 0 0;flex-direction:column;animation:.22s cubic-bezier(.2,.8,.2,1) howto-sheet-in;display:flex;position:relative}@supports not (height:100dvh){.howto-sheet{max-height:88vh}}.howto-sheet:focus-visible{outline:none}.howto-head{padding:var(--sp-5) var(--gutter) var(--sp-3);flex:none;position:relative}.howto-head:before{content:"";top:0;left:var(--gutter);background:var(--accent);width:3.5rem;height:3px;position:absolute}.howto-eyebrow{margin:0 0 var(--sp-1);font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}.howto-title{font-family:var(--font-serif);font-size:var(--step-2);letter-spacing:-.03em;margin:0;font-weight:500;line-height:1}.howto-body{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;min-height:0;padding:0 var(--gutter) var(--sp-4);flex:auto;overflow-y:auto}.howto-sub{margin:var(--sp-5) 0 var(--sp-2);padding-top:var(--sp-4);border-top:1px solid var(--rule);font-family:var(--font-sans);font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-weight:600}.howto-p{margin:0 0 var(--sp-3);max-width:var(--measure);color:var(--ink-soft);text-wrap:pretty}.howto-meta{margin:var(--sp-4) 0 0;font-family:var(--font-mono);font-size:var(--step--1);color:var(--ink-faint);text-wrap:pretty;line-height:1.45}.howto-more{margin:var(--sp-3) 0 0;font-size:var(--step--1)}.howto-more a{min-height:44px;color:var(--ink);text-decoration-line:underline;text-decoration-thickness:1px;-webkit-text-decoration-color:var(--rule-strong);text-decoration-color:var(--rule-strong);text-underline-offset:.22em;align-items:center;display:inline-flex}.howto-more a:active,.howto-more a:focus-visible{text-decoration-thickness:2px;-webkit-text-decoration-color:var(--accent);text-decoration-color:var(--accent)}@media (hover:hover) and (pointer:fine){.howto-more a:hover{text-decoration-thickness:2px;-webkit-text-decoration-color:var(--accent);text-decoration-color:var(--accent)}}.howto-foot{padding:var(--sp-3) var(--gutter) calc(var(--sp-4) + var(--safe-b));border-top:1px solid var(--rule);flex:none}.howto-dismiss{width:100%}@keyframes howto-fade-in{0%{opacity:0}}@keyframes howto-sheet-in{0%{transform:translateY(12%)}}@media (prefers-reduced-motion:reduce){.howto-scrim,.howto-sheet{animation:none}}@media (min-width:40rem){.howto-layer{padding:var(--sp-5);align-items:center}.howto-sheet{border:1px solid var(--rule-strong);border-radius:var(--radius);max-width:36rem;max-height:min(80dvh,44rem);animation-name:howto-fade-in}.howto-head{padding-inline:var(--sp-6)}.howto-head:before{left:var(--sp-6)}.howto-title{font-size:var(--step-3);line-height:1.05}.howto-body{padding-inline:var(--sp-6)}.howto-foot{padding:var(--sp-4) var(--sp-6)}.howto-dismiss{width:auto;min-width:10rem}}@media (max-height:26rem){.howto-sheet{max-height:calc(100dvh - var(--sp-3))}.howto-head{padding-top:var(--sp-4);padding-bottom:var(--sp-2)}.howto-title{font-size:var(--step-1)}.howto-foot{padding-top:var(--sp-2);padding-bottom:calc(var(--sp-2) + var(--safe-b))}}
