@layer reading{.reading{max-width:calc(760px + var(--site-gutter) * 2);margin-inline:auto;padding:calc(var(--site-nav-h) + clamp(48px, 6vw, 88px)) var(--site-gutter) clamp(88px,10vw,144px)}.reading:has(.article-toc){max-width:calc(1080px + var(--site-gutter) * 2)}.reading :is(.prose,.reading-header,.reading-note,.empty) a:not(.btn){color:var(--ui-component);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color var(--t-pop) var(--ease-out)}.reading :is(.prose,.reading-header,.reading-note,.empty) a:not(.btn):hover{color:var(--ui-component-hover)}.reading-header{position:relative;margin-bottom:clamp(44px,5.4vw,72px)}.reading-header h1{max-width:18ch;font:600 clamp(32px,3.8vw,48px)/1.06 var(--ui-font-title);letter-spacing:-.03em;text-wrap:balance}.reading-header>p{margin-top:var(--site-group);max-width:60ch;font-size:var(--site-fs-lede);line-height:1.55;color:var(--ui-muted);text-wrap:pretty}.reading-header .article-byline{margin-top:16px;font-size:var(--site-fs-small);color:var(--ui-subtle);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.reading-header .article-answer{color:var(--ui-ink)}.breadcrumbs{display:flex;align-items:center;gap:8px;margin-bottom:24px;font-size:var(--site-fs-small);color:var(--ui-subtle)}.breadcrumbs a{color:var(--ui-muted);font-weight:500;transition:color var(--t-pop)}.breadcrumbs a:hover{color:var(--ui-ink)}.breadcrumbs__sep{color:var(--ui-border-strong)}.guide-index{display:grid;grid-gap:12px;gap:12px}.guide-index>li{border-radius:20px;background:var(--ui-surface);box-shadow:0 0 0 1px var(--ui-hairline),0 1px 2px rgba(0,0,0,.04);transition:box-shadow var(--t-panel) var(--ease-out),transform var(--t-panel) var(--ease-out)}.guide-index>li:has(a:hover){box-shadow:0 0 0 1px var(--ui-hairline),var(--ui-shadow-surface);transform:translateY(-2px)}.guide-index a,.guide-index article{display:block;padding:clamp(20px,2.6vw,28px);border-radius:20px}.guide-index h2{font:560 clamp(17px,1.4vw,19px)/1.25 var(--ui-font-title);letter-spacing:-.015em;color:var(--ui-ink);text-wrap:balance}.guide-index p{margin-top:8px;max-width:62ch;color:var(--ui-muted)}.guide-index__go{display:inline-flex;align-items:center;gap:6px;margin-top:16px;height:32px;padding:0 10px 0 12px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--ui-border-strong);font-size:var(--site-fs-small);font-weight:500;color:var(--ui-ink);transition:background-color var(--t-pop)}.guide-index a:hover .guide-index__go{background:var(--ui-field)}.arrow{transition:transform var(--t-panel) var(--ease-out)}.guide-index a:hover .arrow,.related-guides a:hover .arrow{transform:translateX(3px)}.reading-note{margin-top:32px;font-size:var(--site-fs-small);color:var(--ui-muted)}.empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:clamp(40px,6vw,64px) 24px;border-radius:20px;background:var(--ui-surface-sunken);box-shadow:inset 0 0 0 1px var(--ui-hairline);text-align:center}.empty .reading-note{margin-top:0;max-width:42ch;font-size:16px;color:var(--ui-ink)}@media (min-width:1080px){.reading article:has(.article-toc){display:grid;grid-template-columns:minmax(0,1fr) 240px;grid-column-gap:72px;column-gap:72px}.reading article:has(.article-toc)>.reading-header{grid-column:1/-1}.reading article:has(.article-toc)>.article-toc{grid-column:2;grid-row:2;align-self:start;position:-webkit-sticky;position:sticky;top:calc(var(--site-nav-h) + 24px)}.reading article:has(.article-toc)>.prose{grid-column:1;grid-row:2}.reading:has(.article-toc)>:is(.related-guides,.article-cta){max-width:calc(100% - 312px)}}.article-toc{margin-bottom:clamp(36px,4vw,48px);padding:16px 18px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--ui-border)}.article-toc strong{font:560 13px/1 var(--ui-font-title);color:var(--ui-ink)}.article-toc ol{margin-top:12px;display:grid;grid-gap:10px;gap:10px;list-style:decimal inside;font-size:15px;color:var(--ui-subtle)}.article-toc li::marker{font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.article-toc a{color:var(--ui-ink);text-decoration:underline;-webkit-text-decoration-color:transparent;text-decoration-color:transparent;text-underline-offset:3px;transition:color var(--t-pop),-webkit-text-decoration-color var(--t-pop);transition:text-decoration-color var(--t-pop),color var(--t-pop);transition:text-decoration-color var(--t-pop),color var(--t-pop),-webkit-text-decoration-color var(--t-pop)}.article-toc a:hover{color:var(--ui-component);-webkit-text-decoration-color:currentColor;text-decoration-color:currentColor}.prose{font-size:clamp(15px,1vw,16px);line-height:1.7;color:var(--ui-ink);overflow-wrap:anywhere}.prose section{margin-top:clamp(48px,5.6vw,72px);scroll-margin-top:calc(var(--site-nav-h) + 24px)}.prose section:first-child{margin-top:0}.prose h2{font:560 clamp(20px,1.8vw,24px)/1.2 var(--ui-font-title);letter-spacing:-.02em;color:var(--ui-ink);text-wrap:balance}.prose p{text-wrap:pretty}.prose p,.prose ul{margin-top:16px;max-width:68ch}.prose ul{list-style:none;padding-left:0}.prose ul li{position:relative;padding-left:22px}.prose ul li:before{content:"";position:absolute;left:4px;top:.7em;width:5px;height:5px;border-radius:50%;background:var(--ui-ink)}.prose li+li{margin-top:10px}.prose .article-checklist li{padding-left:30px}.prose .article-checklist li:before{top:.34em;left:0;width:18px;height:18px;border-radius:6px;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2315803d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% /14px no-repeat;box-shadow:inset 0 0 0 1px rgba(22,163,74,.45)}@media (prefers-color-scheme:dark){.prose .article-checklist li:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%234ade80' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");box-shadow:inset 0 0 0 1px rgba(74,222,128,.45)}}.prose pre{margin:22px 0 0;padding:18px 22px;max-width:100%;overflow-x:auto;border-radius:14px;background:var(--ui-surface-sunken);color:var(--ui-ink);box-shadow:inset 0 0 0 1px var(--ui-hairline);font-size:14px;line-height:1.7;-moz-tab-size:2;tab-size:2}.prose pre:focus-visible{outline-offset:3px}.prose code{font-family:var(--ui-font-mono)}.prose :not(pre)>code{padding:.1em .35em;border-radius:6px;background:var(--ui-field);font-size:.9em;color:var(--ui-ink)}.guide-example{margin-top:26px}.guide-example figcaption{margin-top:12px;font-size:var(--site-fs-small);line-height:1.6;color:var(--ui-subtle)}.example-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:12px;gap:12px;padding:12px;border-radius:20px;background:var(--ui-canvas)}.example-comparison .example-label{margin:4px 0 10px 6px;font-size:var(--site-fs-meta);font-weight:600;color:var(--ui-muted)}.example-comparison>div:last-child .example-label{color:var(--ui-ink)}.example-after,.example-before{min-height:260px;border-radius:4px;background:#ffffff;color:#141414;box-shadow:0 1px 2px rgba(0,0,0,.06),0 10px 24px -12px rgba(0,0,0,.2)}.example-before{padding:12px}.example-before h3{font:500 18px/1.3 var(--ui-font);color:#141414}.example-before p{margin:4px 0;font-size:16px}.example-after{padding:24px}.example-after h3{font:560 19px/1.25 var(--ui-font);letter-spacing:-.015em;color:#141414}.example-after p{margin-top:12px;font-size:16px;line-height:1.6}.example-after .meta{font-size:var(--site-fs-small);color:#6b6b6b}.example-action{display:inline-block;margin-top:8px;font-size:var(--site-fs-small)}.example-after .example-action{margin-top:22px;padding:8px 14px;border-radius:8px;background:#111111;color:#ffffff;font-weight:600}.example-projects{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));grid-gap:12px;gap:12px;padding:12px;border-radius:20px;background:var(--ui-canvas)}.example-projects>div{min-width:0;padding:20px;border-radius:10px;background:#ffffff;color:#141414;box-shadow:inset 0 0 0 1px #ececec;overflow-wrap:anywhere}.example-projects p{margin-top:8px;font-size:16px;color:#5c5c5c}.related-guides{margin-top:clamp(64px,7.5vw,104px)}.related-guides h2{font:560 clamp(17px,1.4vw,19px)/1.25 var(--ui-font-title);letter-spacing:-.02em}.related-guides ul{margin-top:16px;box-shadow:inset 0 1px 0 var(--ui-border)}.related-guides li{box-shadow:inset 0 -1px 0 var(--ui-border)}.related-guides a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;font-size:16px;font-weight:600;color:var(--ui-ink);border-radius:8px}.related-guides a .arrow{display:block;flex:none;width:32px;height:32px;padding:8px;border-radius:10px;background:var(--ui-field)}.related-guides a:hover .arrow{background:var(--ui-field-hover)}.article-cta{position:relative;display:flex;flex-direction:column;align-items:flex-start;margin-top:clamp(64px,7.5vw,104px);padding:clamp(28px,4.4vw,48px) clamp(24px,4.4vw,48px) clamp(48px,7vw,88px);border-radius:24px}.article-cta h2{max-width:18ch;font:600 clamp(26px,2.6vw,34px)/1.08 var(--ui-font-title);letter-spacing:-.025em;text-wrap:balance}.article-cta>p{margin-block:12px 24px;max-width:46ch;color:var(--ui-muted)}.article-cta .wl{max-width:480px}@media (max-width:600px){.example-comparison{grid-template-columns:1fr}.example-after,.example-before{min-height:auto}.prose pre{font-size:12.5px}.article-toc,.prose pre{padding:16px}}@media (prefers-reduced-motion:reduce){.guide-index a:hover .arrow,.guide-index>li:has(a:hover),.related-guides a:hover .arrow{transform:none}}}