.post-info,.post-meta,.post-tags{flex-wrap:wrap;align-items:center;display:flex}.post-info{gap:var(--space-1) var(--space-4)}.post-meta{gap:var(--space-0) var(--space-2);font-size:var(--step--1);color:var(--text-muted)}.post-tags{gap:var(--space-1)}.post-page{padding-block:var(--header-gap) var(--section-pad);display:grid}.post-page>*{min-width:0;max-width:46rem}.post-page>*+*{margin-top:var(--space-5)}@media (width>=64rem){.post-page--howto{column-gap:var(--space-8);grid-template-columns:13rem minmax(0,46rem)}.post-page--howto>*{grid-column:2}.howto-steps{top:calc(var(--nav-height) + var(--space-3));grid-area:1/1/span 7;align-self:start;margin-top:0;position:sticky}}.post-sample{padding:var(--space-2) var(--space-3);border:1px dashed var(--accent);border-radius:var(--radius-2);color:var(--text-muted)}.post-problem>*+*{margin-top:var(--space-2)}.post-problem h2{padding-bottom:var(--space-1);border-bottom:var(--hairline);font-weight:var(--weight-body);line-height:var(--leading-body);text-wrap:unset;position:relative}.post-problem h2:after{content:"";width:var(--seam-length);height:var(--seam-weight);background:var(--accent);position:absolute;bottom:-1px;left:0}.howto-start{padding:var(--space-3);border:var(--hairline);border-radius:var(--radius-2);background:var(--surface)}.howto-start h2{font-size:var(--step-1)}.howto-start dl{gap:var(--space-1) var(--space-5);margin-top:var(--space-2);flex-wrap:wrap;display:flex}.howto-start h3{margin-top:var(--space-3)}.howto-start ul{padding-left:1.2em}.howto-needs__panel{margin-top:var(--space-2);padding:var(--space-2);border:var(--hairline);border-radius:var(--radius-2);background:var(--bg)}.howto-needs__group,.howto-needs__note{align-items:center;gap:var(--space-1);margin-bottom:var(--space-1);font:var(--weight-medium) var(--step--1) / 1.5 var(--font-body);display:flex}.howto-needs__note{margin-top:var(--space-3);color:var(--text-muted);font-weight:var(--weight-body)}:is(.howto-needs__group,.howto-needs__note) .icon{color:var(--secondary)}.howto-needs__table,.post table{border-collapse:collapse;width:100%;font-size:var(--step--1)}.howto-needs__table{table-layout:fixed}.post-table{overflow-x:auto}:is(.howto-needs__table,.post table) :is(th,td){padding:var(--space-1) var(--space-2);text-align:left;vertical-align:top;line-height:1.5;font-weight:var(--weight-body)}:is(.howto-needs__table,.post table) tbody tr:nth-child(odd){background:var(--surface)}:is(.howto-needs__table,.post table) :is(th,td)+:is(th,td){border-left:var(--hairline)}.howto-needs__table :is(th,td):first-child{width:18%}.howto-needs__table :is(th,td):nth-child(2){width:28%}.howto-needs__table :is(th,td):first-child:nth-last-child(2){width:46%}.howto-needs__table :is(th,td):nth-child(2):last-child{width:auto}.howto-needs__why,:is(.howto-needs__table,.post table) thead th{color:var(--text-muted);font-size:.94em}.howto-series ol{margin-top:var(--space-1);font-size:var(--step--1);color:var(--text-muted);padding-left:1.6em}.howto-series li+li{margin-top:.3em}.howto-series li[aria-current]{color:var(--text)}.howto-series li[aria-current]::marker{color:var(--accent);font-weight:var(--weight-semibold)}.howto-series a{color:inherit}.howto-series a:hover{color:var(--accent-strong)}.howto-series__soon{font-family:var(--font-mono);font-size:.85em}.howto-steps ol{counter-reset:s;gap:.15rem;padding:0;list-style:none;display:grid}.howto-steps a{border-left:2px solid var(--border);font-size:var(--step--1);color:var(--text-muted);counter-increment:s;gap:.7em;padding:.3em .7em;text-decoration:none;display:flex}.howto-steps a:before{content:counter(s);font-family:var(--font-mono);color:var(--accent)}.howto-steps a:hover,.howto-steps [aria-current]{border-color:var(--accent);color:var(--text)}.post>*+*{margin-top:1.1em}.post h2{font-size:var(--step-3);scroll-margin-top:calc(var(--nav-height) + var(--space-3));margin-top:2em}.post h3{background:linear-gradient(var(--secondary), var(--secondary)) left top / var(--seam-length) var(--seam-weight) no-repeat, linear-gradient(var(--border), var(--border)) left top / 100% 1px no-repeat;font-size:var(--step-1);margin-top:2em;padding-top:.75em}.post :is(ul,ol){padding-left:1.3em}.post li+li{margin-top:.4em}.post blockquote{padding:var(--space-2) var(--space-3);border-left:3px solid var(--accent);border-radius:0 var(--radius-2) var(--radius-2) 0;background:var(--surface)}.post blockquote strong:first-child{color:var(--accent)}.post blockquote>*+*{margin-top:.75em}.post--howto{--rail-pad:clamp(1.6rem, .5rem + 3vw, 2.5rem);padding-left:var(--rail-pad);border-left:2px solid var(--border);counter-reset:step;margin-left:1rem}.post--howto h2{counter-increment:step;position:relative}.post--howto h2:before{content:counter(step);top:.15em;left:calc(-1 * var(--rail-pad) - 1rem - 1px);border:2px solid var(--accent);background:var(--bg);width:2rem;height:2rem;font-family:var(--font-mono);font-size:var(--step--1);color:var(--accent);border-radius:50%;place-items:center;display:grid;position:absolute}.code{margin-inline:0}.code__bar{justify-content:space-between;align-items:center;gap:var(--space-2);min-height:2.6rem;padding:.3rem .5rem .3rem var(--space-3);border:var(--hairline);border-radius:var(--radius-2) var(--radius-2) 0 0;background:var(--band);font-size:var(--step--1);color:var(--text-muted);border-bottom:0;display:flex}.code__file{color:var(--text)}.code pre{border-radius:0 0 var(--radius-2) var(--radius-2)}.code__copy{border:var(--hairline);border-radius:var(--radius-1);color:var(--text-muted);background:0 0;align-items:center;gap:.4em;padding:.2em .6em;display:inline-flex}.code__copy:hover{border-color:var(--secondary);color:var(--text)}.code__copy[data-done]{color:var(--secondary)}.token:is(.comment,.prolog){color:var(--text-muted);font-style:italic}.token:is(.keyword,.atrule,.key,.selector,.tag,.function,.builtin){color:var(--accent)}.token:is(.string,.attr-value,.char,.url){color:var(--secondary)}.token:is(.number,.boolean,.variable,.property){color:var(--accent-strong)}.post-foot{justify-content:space-between;gap:var(--space-3);padding-top:var(--space-4);border-top:var(--hairline);flex-wrap:wrap;display:flex}.post-foot__link{font-family:var(--font-display);font-size:var(--step-1);color:var(--text);gap:.2em;text-decoration:none;display:grid}.post-foot__all{font-size:var(--step--1);flex-basis:100%}
