.code-block{margin: 0 0 1rem;padding: 0.9rem 1.1rem;background: var(--surface);border: 1px solid var(--line);border-radius: var(--r);overflow-x: auto;}
.code-block:focus-visible{outline: 2px solid var(--ink);outline-offset: 2px;}
.code-block code{font-family: var(--mono);font-size: 0.82rem;line-height: 1.6;color: var(--mut);}
.how-page{width: 100%;}
.how-hero{padding: 1.625rem 0 0.375rem;}
.how-hero h1{margin: 0 0 0.875rem;font-size: clamp(1.875rem,5vw,2.75rem);line-height: 1.08;letter-spacing: -0.03em;}
.how-lead{max-width: 62ch;color: var(--ink);font-size: 1.125rem;line-height: 1.6;}
.how-api-jump{display: inline-flex;flex-wrap: wrap;align-items: baseline;gap: 0.35rem 0.55rem;margin: 0.25rem 0 0;color: var(--mut);font-size: 0.9375rem;line-height: 1.45;}
.how-api-jump a{display: inline-flex;align-items: center;min-height: 2rem;padding: 0.375rem 0.625rem;border: 1px solid var(--line2);border-radius: var(--r-sm);background: var(--surface);color: var(--ink);font-weight: 600;text-decoration: none;}
.how-api-jump a:hover{border-color: var(--mut);background: var(--raise);}
.how-api-jump a:focus-visible{outline: 2px solid var(--ink);outline-offset: 2px;}
.how-cell-key{display: flex;flex-wrap: wrap;gap: 0.7rem 1.25rem;margin: 1.5rem 0 0;color: var(--mut);font-family: var(--mono);font-size: 0.75rem;}
.how-cell-key-title{flex: 0 0 100%;color: var(--faint);}
.how-cell-key span:not(.how-cell-key-title){display: inline-flex;align-items: center;gap: 0.5rem;}
.how-cell{width: 14px;height: 20px;border-radius: 1px;flex: 0 0 auto;}
.how-cell-up{background: var(--bar-up);}
.how-cell-slow{background: var(--slow);}
.how-cell-down{background: var(--down);}
.how-cell-none{background: var(--bar-dim);border: 1px solid var(--line2);}
.how-generated{margin: 1rem 0 0;color: var(--faint);font-family: var(--mono);font-size: 0.6875rem;letter-spacing: 0.02em;}
.how-shell{display: grid;grid-template-columns: 188px minmax(0,1fr);gap: 3.5rem;align-items: start;margin-top: 1.875rem;}
.how-toc{position: sticky;top: 1.5rem;font-family: var(--mono);font-size: 0.75rem;}
.how-toc p{margin: 0 0 0.75rem;color: var(--faint);font-size: 0.625rem;letter-spacing: 0.16em;text-transform: uppercase;}
.how-toc a{display: block;margin-left: -0.75rem;padding: 0.3125rem 0 0.3125rem 0.75rem;border-left: 2px solid transparent;color: var(--mut);line-height: 1.35;text-decoration: none;}
.how-toc a:hover,.how-toc a:focus-visible{color: var(--ink);}
.how-toc a:focus-visible{outline: 2px solid var(--ink);outline-offset: 2px;}
.how-toc a.is-active{border-left-color: var(--down);color: var(--ink);}
.how-content{min-width: 0;}
.how-section{margin: 0 0 1.875rem;padding-top: 1.875rem;border-top: 1px solid var(--line);scroll-margin-top: 1.25rem;}
.how-section:first-child{padding-top: 0;border-top: 0;}
.how-section-title{margin: 0 0 0.875rem;font-size: 1.3125rem;font-weight: 650;letter-spacing: -0.015em;}
.how-anchor{opacity: 0;margin-left: 0.55rem;color: var(--faint);font-family: var(--mono);font-size: 0.62em;font-weight: 400;text-decoration: none;vertical-align: middle;}
.how-section-title:hover .how-anchor,.how-anchor:focus{opacity: 1;}
.how-section-sub{max-width: 66ch;margin: 0 0 1.125rem;padding-left: 0.875rem;border-left: 2px solid var(--line2);color: var(--ink);font-size: 1rem;font-weight: 500;line-height: 1.5;}
.how-section p{max-width: 68ch;color: var(--ink);font-size: 0.96875rem;line-height: 1.65;}
.how-section p.meta{color: var(--mut);}
.how-section p strong,.how-kind strong{color: var(--ink);font-weight: 600;}
.how-signal-grid{grid-template-columns: repeat(auto-fit,minmax(190px,1fr));margin: 0.25rem 0 1rem;}
.how-signal-grid .legend-card{display: block;padding: 0.875rem 0.9375rem;}
.how-signal-grid .legend-icon{display: none;}
.how-card-num{color: var(--faint);font-family: var(--mono);font-size: 0.6875rem;font-weight: 500;}
.how-card-role{margin-left: auto;color: var(--mut);font-family: var(--mono);font-size: 0.625rem;font-weight: 500;letter-spacing: 0.06em;text-transform: uppercase;}
.how-kind-list{display: flex;flex-direction: column;gap: 0.6875rem;margin: 0.25rem 0 1rem;}
.how-kind{display: flex;align-items: flex-start;gap: 0.75rem;color: var(--mut);font-size: 0.9375rem;line-height: 1.55;}
.how-swatch{width: 11px;height: 11px;margin-top: 0.35rem;border-radius: 2px;flex: 0 0 auto;}
.how-swatch-good{background: var(--good);}
.how-swatch-down{background: var(--down);}
.how-swatch-dim{background: var(--bar-dim);border: 1px solid var(--line2);}
.how-table-wrap{margin: 0.375rem 0 1rem;}
.how-page table.probes{min-width: 0;font-size: 0.875rem;}
.how-page table.probes th,.how-page table.probes td{white-space: normal;vertical-align: top;line-height: 1.55;}
.how-page table.probes th:first-child,.how-page table.probes td:first-child{width: 14.375rem;}
.how-numbers-table th:nth-child(2),.how-numbers-table td:nth-child(2){width: 10.5rem;color: var(--ink);font-family: var(--mono);font-size: 0.8125rem;}
.how-verdict-label{display: flex;align-items: center;gap: 0.55rem;color: var(--ink);font-weight: 500;}
.how-callout{max-width: 68ch;margin-top: 0.25rem;border-left: 2px solid var(--line2);}
.how-callout p{margin-bottom: 0.625rem;}
.how-callout p:last-child{margin-bottom: 0;color: var(--mut);}
.how-mcp-endpoint{display: flex;flex-wrap: wrap;align-items: center;gap: 0.5rem 0.75rem;max-width: 68ch;margin: 0.25rem 0 0.875rem;padding: 0.875rem 1rem;border: 1px solid var(--line);border-radius: var(--r);background: var(--surface);}
.how-mcp-endpoint span{color: var(--mut);font-family: var(--mono);font-size: 0.6875rem;letter-spacing: 0.08em;text-transform: uppercase;}
.how-mcp-endpoint code{color: var(--ink);overflow-wrap: anywhere;}
.how-mcp-steps{display: grid;grid-template-columns: repeat(auto-fit,minmax(220px,1fr));gap: 0.75rem;max-width: 68ch;margin: 0 0 0.875rem;}
.how-mcp-steps p{margin: 0;padding: 0.875rem 0.9375rem;border: 1px solid var(--line);border-radius: var(--r);background: var(--surface);color: var(--mut);font-size: 0.875rem;line-height: 1.5;}
.how-mcp-guide{margin: 0.25rem 0 0.875rem;}
.how-mcp-guide a{display: inline-flex;align-items: center;min-height: 2rem;padding: 0.375rem 0.625rem;border: 1px solid var(--line2);border-radius: var(--r-sm);background: var(--surface);color: var(--ink);font-weight: 600;text-decoration: none;}
.how-mcp-guide a::after{content: " \2192";color: var(--ink);}
.how-mcp-guide a:hover{border-color: var(--mut);background: var(--raise);}
.how-mcp-guide a:focus-visible{outline: 2px solid var(--ink);outline-offset: 2px;}
.how-api-card{max-width: 68ch;margin: 0.25rem 0 1rem;padding: 1.125rem 1.25rem;border: 1px solid var(--line);border-radius: var(--r);background: var(--surface);}
.how-api-pitches{display: grid;grid-template-columns: repeat(auto-fit,minmax(240px,1fr));gap: 0.8125rem 1.5rem;margin: 0 0 1.125rem;}
.how-api-pitch{display: flex;gap: 0.5625rem;}
.how-api-pitch > span{flex: 0 0 auto;color: var(--good);font-family: var(--mono);font-size: 0.875rem;line-height: 1.5;}
.how-api-pitch p{min-width: 0;margin: 0;color: var(--mut);font-size: 0.875rem;line-height: 1.5;}
.how-api-form{display: flex;flex-wrap: wrap;gap: 0.5rem;max-width: 460px;margin: 0;}
.how-api-label{flex: 0 0 100%;color: var(--ink);font-size: 0.8125rem;font-weight: 600;line-height: 1.3;}
.how-api-form input[type=email]{flex: 1 1 200px;min-width: 0;padding: 0.5625rem 0.75rem;border: 1px solid var(--line2);border-radius: var(--r-sm);background: var(--bg);color: var(--ink);font: 0.875rem/1.3 var(--sans);}
.how-api-form input[type=email]:focus{border-color: var(--ink);outline: none;}
.how-api-form input[type=email]:focus-visible{outline: 2px solid var(--ink);outline-offset: 2px;}
.how-api-form.is-invalid input[type=email]{border-color: var(--down);}
.how-api-form button{padding: 0.5625rem 1rem;border: 0;border-radius: var(--r-sm);background: var(--ink);color: var(--bg);font: 600 0.875rem/1.3 var(--sans);cursor: pointer;white-space: nowrap;}
.how-api-form button:hover{filter: brightness(1.08);}
.how-api-form button:focus-visible{outline: 2px solid var(--ink);outline-offset: 2px;}
.how-api-form button:disabled{cursor: wait;opacity: 0.7;}
.how-api-message{min-height: 1.25rem;margin: 0.5rem 0 0;color: var(--mut);font-size: 0.875rem;line-height: 1.4;}
.how-api-message.is-success{color: var(--good);}
.how-api-message.is-error{color: var(--down);}
.how-api-note{margin-top: 0.625rem;color: var(--faint);font-family: var(--mono);font-size: 0.6875rem;}
.api-page{width: 100%;padding-bottom: 1.5rem;}
.api-hero{max-width: 58rem;padding: 1.625rem 0 0.75rem;}
.api-eyebrow{margin: 0 0 0.625rem;color: var(--faint);font-family: var(--mono);font-size: 0.75rem;letter-spacing: 0.12em;text-transform: uppercase;}
.api-hero h1{max-width: 760px;margin: 0 0 0.875rem;font-size: clamp(2rem,5vw,3.125rem);line-height: 1.05;letter-spacing: -0.03em;}
.api-lead{max-width: 62ch;margin: 0;color: var(--ink);font-size: 1.125rem;line-height: 1.6;}
.api-shell{display: grid;grid-template-columns: minmax(0,1fr) minmax(280px,360px);gap: 2rem;align-items: start;margin-top: 1.625rem;padding-top: 1.625rem;border-top: 1px solid var(--line);}
.api-main h2{margin: 0 0 0.875rem;font-size: 1.3125rem;font-weight: 650;letter-spacing: -0.015em;}
.api-main,.api-card,.api-concept{min-width: 0;}
.api-main{grid-column: 1;}
.api-main > p{max-width: 66ch;margin: 0 0 1.125rem;color: var(--ink);font-size: 0.96875rem;line-height: 1.65;}
.api-pitches{max-width: 720px;margin-bottom: 1rem;}
.api-concept{grid-column: 1;max-width: 66ch;padding: 0.875rem 1rem;border: 1px solid var(--line);border-radius: var(--r);background: var(--surface);}
.api-concept p{margin: 0;color: var(--mut);font-size: 0.9375rem;line-height: 1.55;}
.api-concept .api-concept-label{margin-bottom: 0.35rem;color: var(--faint);font-family: var(--mono);font-size: 0.6875rem;letter-spacing: 0.12em;text-transform: uppercase;}
.api-concept .code-block{margin: 0.75rem 0 0;background: var(--bg);}
.api-card{grid-column: 2;grid-row: 1 / span 2;position: sticky;top: 1.5rem;margin-top: 0;}
.api-form-expectation{margin: 0.625rem 0 0;color: var(--mut);font-size: 0.875rem;line-height: 1.45;}
@media (min-width: 861px){html{scroll-behavior: smooth;}
}
@media (prefers-reduced-motion: reduce){html{scroll-behavior: auto;}
}
@media (max-width: 860px){.how-shell{grid-template-columns: 1fr;gap: 0;}
.how-toc{position: sticky;top: 0;z-index: 1;display: flex;flex-wrap: nowrap;gap: 0.5rem;overflow-x: auto;margin: 0 0 1.25rem;padding: 0.5rem 0;background: var(--bg);}
.how-toc p{display: none;}
.how-toc a{flex: 0 0 auto;margin-left: 0;padding: 0.4375rem 0.625rem;border: 1px solid var(--line);border-radius: var(--r-sm);color: var(--mut);line-height: 1.2;white-space: nowrap;}
.how-toc a.is-active{border-color: var(--down);background: var(--raise);color: var(--ink);}
.api-shell{grid-template-columns: 1fr;gap: 1.25rem;}
.api-main,.api-card,.api-concept{grid-column: auto;grid-row: auto;}
.api-card{position: static;max-width: 100%;}
}
@media (max-width: 640px){.api-lead{font-size: 1rem;}
.api-pitches{grid-template-columns: 1fr;}
.how-lead{font-size: 1rem;}
.how-page .probes-scroll{overflow-x: visible;}
.how-page table.probes{min-width: 0;}
.how-page table.probes,.how-page table.probes tbody,.how-page table.probes tr,.how-page table.probes td{display: block;}
.how-page table.probes thead{display: none;}
.how-page table.probes tr{padding: 0.75rem 0;border-bottom: 1px solid var(--line);}
.how-page table.probes tr:last-child{border-bottom: 0;}
.how-page table.probes th,.how-page table.probes td{border-bottom: 0;white-space: normal;}
.how-page table.probes td{display: grid;grid-template-columns: minmax(5.5rem,35%) minmax(0,1fr);gap: 0.75rem;align-items: baseline;padding: 0.22rem 0.85rem;}
.how-page table.probes td::before{content: attr(data-label);color: var(--mut);font-size: 0.72rem;font-weight: 500;letter-spacing: 0.06em;text-transform: uppercase;}
.how-page table.probes th:first-child,.how-page table.probes td:first-child,.how-numbers-table th:nth-child(2),.how-numbers-table td:nth-child(2){width: auto;}
}