.learn-hero,
.learn-top,
.learn-body-band,
.learn-prose {
--learn-head: 900px;
--learn-measure: 720px;
--learn-wide: 980px;
--learn-t-body: 18px;
--learn-rail: clamp(216px, 20vw, 272px);
--learn-rail-gap: clamp(28px, 3vw, 52px);
}
.learn-hero {
padding: calc(var(--topbar-h) + clamp(44px, 6vh, 80px)) var(--gutter)
clamp(32px, 4vh, 52px);
background: var(--bg);
color: var(--fg);
}
body.isn .learn-hero {
padding-top: clamp(44px, 6vh, 80px);
}
.learn-hero .eyebrow {
margin-bottom: clamp(16px, 2vw, 24px);
}
.learn-hero h1 {
font-size: var(--t-display);
max-width: 20em;
margin-bottom: clamp(16px, 2vw, 26px);
}
.learn-hero .lead {
max-width: var(--measure-lead);
}
html:not([data-js]) .learn-filter,
html:not([data-js]) .learn-count {
display: none;
}
.learn-filter {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding-block: clamp(20px, 2.4vw, 30px) 0;
}
.learn-filter-label {
font-family: var(--font-mono);
font-size: var(--t-mono);
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--fg-soft);
margin-right: 6px;
}
.learn-chip {
appearance: none;
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 0 12px;
border: 1px solid var(--line);
border-radius: var(--r-pill);
background: transparent;
color: var(--fg-sub);
font-family: var(--font-mono);
font-size: var(--t-mono);
letter-spacing: 0.01em;
text-transform: none;
cursor: pointer;
transition:
border-color var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease),
background-color var(--dur-fast) var(--ease);
}
.learn-chip:hover,
.learn-chip:focus-visible {
border-color: var(--line-strong);
color: var(--fg);
}
.learn-chip[aria-pressed='true'] {
border-color: var(--fg);
background: var(--fg);
color: var(--bg);
}
body.isn .learn-filter-label,
body.isn .learn-count,
body.isn .learn-card-topics li,
body.isn .learn-card-foot,
body.isn .learn-crumbs ol,
body.isn .learn-answer-label,
body.isn .learn-meta,
body.isn .learn-rail-title,
body.isn .learn-check-title,
body.isn .learn-table th,
body.isn .learn-table figcaption,
body.isn .learn-callout-title {
letter-spacing: 0.01em;
text-transform: none;
}
.learn-count {
margin-top: clamp(18px, 2vw, 24px);
font-family: var(--font-mono);
font-size: var(--t-mono);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fg-soft);
}
.learn-body-band {
padding-block: clamp(36px, 4vw, 56px) var(--section-y);
}
.learn-grid {
display: grid;
gap: clamp(16px, 1.8vw, 24px);
list-style: none;
}
.learn-grid--blog {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.learn-grid--guides {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.learn-card[data-hidden='true'] {
display: none;
}
.learn-card-link {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
padding: clamp(20px, 2vw, 28px);
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: var(--bg-raised);
color: inherit;
text-decoration: none;
transition:
border-color var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease);
}
.learn-card-link:hover,
.learn-card-link:focus-visible {
border-color: var(--line-strong);
transform: translateY(-2px);
}
.learn-card-cat {
font-family: var(--font-mono);
font-size: var(--t-mono);
letter-spacing: 0.01em;
text-transform: none;
color: var(--info);
}
.learn-card-title {
font-family: var(--font-display);
font-size: var(--t-h3);
font-weight: 600;
line-height: 1.22;
letter-spacing: -0.01em;
text-wrap: balance;
}
.learn-card-body {
font-size: var(--t-small);
line-height: 1.6;
color: var(--fg-sub);
}
.learn-card-media {
display: block;
aspect-ratio: 16 / 10;
margin-bottom: 4px;
overflow: hidden;
border-radius: var(--r-xs);
background: var(--line);
}
.learn-card-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--dur-fast) var(--ease);
}
.learn-card-link:hover .learn-card-media img {
transform: scale(1.03);
}
.learn-card-author {
display: flex;
min-width: 0;
margin-top: auto;
padding-top: 6px;
}
.learn-card-author + .learn-card-foot {
margin-top: 0;
}
.learn-card-topics {
display: flex;
flex-wrap: wrap;
gap: 6px;
list-style: none;
}
.learn-card-topics li {
padding: 3px 9px;
border: 1px solid var(--line);
border-radius: var(--r-xs);
font-family: var(--font-mono);
font-size: var(--t-mono-sm);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fg-soft);
}
.learn-card-foot {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-top: auto;
padding-top: 4px;
font-family: var(--font-mono);
font-size: var(--t-mono);
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--fg-soft);
}
.learn-card-read {
color: var(--fg);
border-bottom: 1px solid var(--line-strong);
padding-bottom: 2px;
transition: border-color var(--dur-fast) var(--ease);
}
.learn-card-link:hover .learn-card-read,
.learn-card-link:focus-visible .learn-card-read {
border-color: var(--fg);
}
.learn-top {
padding: calc(var(--topbar-h) + clamp(36px, 4.5vh, 64px)) var(--gutter)
clamp(28px, 3.4vw, 44px);
background: var(--bg);
color: var(--fg);
border-bottom: 1px solid var(--line);
}
body.isn .learn-top {
padding-top: clamp(36px, 4.5vh, 64px);
}
.learn-crumbs ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
list-style: none;
font-family: var(--font-mono);
font-size: var(--t-mono);
letter-spacing: 0.07em;
text-transform: uppercase;
}
.learn-crumbs li + li::before {
content: '';
display: inline-block;
width: 12px;
height: 1px;
margin-right: 8px;
vertical-align: middle;
background: var(--fg-faint);
}
.learn-crumbs a {
color: var(--fg-soft);
text-decoration: none;
transition: color var(--dur-fast) var(--ease);
}
.learn-crumbs a:hover,
.learn-crumbs a:focus-visible {
color: var(--fg);
}
.learn-crumbs [aria-current] {
color: var(--fg-sub);
}
.learn-head-cat {
display: block;
margin-top: clamp(22px, 2.6vw, 32px);
font-family: var(--font-mono);
font-size: var(--t-mono);
letter-spacing: 0.01em;
text-transform: none;
color: var(--info);
}
.learn-top h1 {
margin-top: clamp(12px, 1.4vw, 18px);
font-size: clamp(30px, 3.6vw, 46px);
line-height: 1.1;
letter-spacing: -0.02em;
max-width: var(--learn-head);
text-wrap: balance;
}
.learn-answer {
margin-top: clamp(26px, 3vw, 38px);
padding-left: clamp(16px, 1.8vw, 24px);
border-left: 2px solid var(--info);
max-width: var(--learn-measure);
}
.learn-answer-label {
font-family: var(--font-mono);
font-size: var(--t-mono);
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--fg-soft);
margin-bottom: 8px;
}
.learn-answer p {
font-size: var(--t-lead);
line-height: 1.55;
color: var(--fg);
}
.learn-meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px 18px;
margin-top: clamp(24px, 2.8vw, 34px);
font-family: var(--font-mono);
font-size: var(--t-mono);
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--fg-soft);
}
.learn-meta time {
color: var(--fg-sub);
}
.learn-top .isn-byline {
margin-top: clamp(20px, 2.4vw, 28px);
}
.learn-cover {
width: min(100%, var(--learn-wide));
margin: clamp(22px, 2.6vw, 32px) 0 0;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 20px;
background: var(--line);
}
.learn-cover img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.learn-layout {
display: grid;
row-gap: clamp(26px, 3.2vw, 40px);
}
@media (min-width: 1001px) {
.learn-layout {
grid-template-columns: minmax(0, 1fr) var(--learn-rail);
column-gap: var(--learn-rail-gap);
align-items: start;
}
.learn-rail {
grid-area: 1 / 2;
}
.learn-main {
grid-area: 1 / 1;
min-width: 0;
}
.learn-rail {
position: sticky;
top: calc(var(--bar-h, var(--topbar-h)) + clamp(14px, 1.8vw, 26px));
max-height: calc(100vh - var(--bar-h, var(--topbar-h)) - clamp(40px, 6vh, 76px));
display: flex;
flex-direction: column;
}
.learn-toc {
display: flex;
flex-direction: column;
min-height: 0;
}
.learn-toc-list {
overflow-y: auto;
overscroll-behavior: contain;
}
}
.learn-rail-title {
font-family: var(--font-mono);
font-size: var(--t-mono);
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--fg-soft);
margin-bottom: 12px;
}
.learn-toc-list {
list-style: none;
margin: 0;
padding: 0;
border-left: 1px solid var(--line);
}
.learn-toc-list > li {
margin: 0;
}
.learn-toc a {
display: block;
margin-left: -1px;
padding: 5px 0 5px 14px;
border-left: 2px solid transparent;
font-size: var(--t-small);
line-height: 1.42;
color: var(--fg-soft);
text-decoration: none;
transition:
color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease);
}
.learn-toc a:hover,
.learn-toc a:focus-visible {
color: var(--fg);
border-left-color: var(--line-strong);
}
.learn-toc a[aria-current='location'] {
color: var(--fg);
border-left-color: var(--info);
}
.learn-rail-about {
border-left: 1px solid var(--line);
padding-left: 14px;
}
.learn-rail-cat {
font-size: var(--t-small);
color: var(--info);
margin-bottom: 6px;
}
.learn-rail-line {
font-size: var(--t-small);
line-height: 1.5;
color: var(--fg-soft);
}
.learn-rail-jump {
margin-top: 12px;
font-size: var(--t-small);
}
.learn-rail-jump a {
color: var(--fg-sub);
text-decoration: none;
border-bottom: 1px solid var(--line-strong);
transition:
color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease);
}
.learn-rail-jump a:hover,
.learn-rail-jump a:focus-visible {
color: var(--fg);
border-bottom-color: var(--fg);
}
.learn-prose {
padding-block: clamp(36px, 4.4vw, 60px) var(--section-y);
}
.learn-body {
display: grid;
grid-template-columns:
min(var(--learn-measure), 100%)
minmax(0, 1fr);
row-gap: clamp(16px, 1.6vw, 22px);
}
.learn-body > * {
grid-column: 1;
}
.learn-body > .learn-wide {
grid-column: 1 / -1;
width: min(100%, var(--learn-wide));
margin-inline: 0;
}
.learn-body p {
font-size: var(--learn-t-body);
line-height: 1.7;
color: var(--fg-sub);
}
.learn-body > .learn-lead {
font-size: var(--t-lead);
line-height: 1.62;
color: var(--fg);
}
.learn-body h2 {
margin-top: clamp(26px, 3.2vw, 46px);
font-size: clamp(24px, 2.4vw, 32px);
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--fg);
}
.learn-body h3 {
margin-top: clamp(18px, 2vw, 28px);
font-size: var(--t-h3);
line-height: 1.28;
color: var(--fg);
}
.learn-body h2,
.learn-body h3 {
scroll-margin-top: calc(var(--topbar-h) + 16px);
}
.learn-body a {
color: var(--fg);
text-decoration: none;
border-bottom: 1px solid var(--info);
transition:
color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease);
}
.learn-body a:hover,
.learn-body a:focus-visible {
color: var(--info);
border-bottom-width: 2px;
}
.learn-body strong {
font-weight: 600;
color: var(--fg);
}
.learn-body code {
font-family: var(--font-mono);
font-size: 0.92em;
padding: 1px 5px;
border-radius: var(--r-xs);
background: color-mix(in srgb, var(--fg) 7%, transparent);
color: var(--fg);
}
.learn-list {
display: grid;
row-gap: 10px;
padding-left: 1.25em;
font-size: var(--learn-t-body);
line-height: 1.65;
color: var(--fg-sub);
}
.learn-list li::marker {
color: var(--fg-faint);
}
ol.learn-list li::marker {
font-family: var(--font-mono);
font-size: var(--t-small);
}
.learn-steps {
display: grid;
row-gap: clamp(14px, 1.6vw, 20px);
list-style: none;
counter-reset: learn-step;
}
.learn-steps > li {
display: grid;
grid-template-columns: 2.4em minmax(0, 1fr);
column-gap: 2px;
counter-increment: learn-step;
}
.learn-steps > li::before {
content: counter(learn-step, decimal-leading-zero);
font-family: var(--font-mono);
font-size: var(--t-mono);
letter-spacing: 0.06em;
color: var(--info);
padding-top: 0.35em;
}
.learn-step-title {
font-family: var(--font-display);
font-size: var(--t-h3);
font-weight: 600;
line-height: 1.28;
color: var(--fg);
margin-bottom: 4px;
}
.learn-check {
display: grid;
row-gap: 10px;
list-style: none;
padding: clamp(18px, 2vw, 24px);
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: color-mix(in srgb, var(--fg) 3%, transparent);
}
.learn-check-title {
font-family: var(--font-mono);
font-size: var(--t-mono);
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--fg-soft);
margin-bottom: 4px;
}
.learn-check > li {
display: grid;
grid-template-columns: 22px minmax(0, 1fr);
align-items: start;
font-size: var(--learn-t-body);
line-height: 1.6;
color: var(--fg-sub);
}
.learn-check > li::before {
content: '';
width: 11px;
height: 6px;
margin-top: 0.5em;
border-left: 1.6px solid var(--info);
border-bottom: 1.6px solid var(--info);
transform: rotate(-45deg);
}
.learn-table {
margin: clamp(8px, 1vw, 14px) 0;
}
.learn-table-scroll {
overflow-x: auto;
border: 1px solid var(--line);
border-radius: var(--r-sm);
-webkit-overflow-scrolling: touch;
}
.learn-table-scroll:focus-visible {
outline: 2px solid var(--info);
outline-offset: 2px;
}
.learn-table table {
width: 100%;
border-collapse: collapse;
font-size: var(--t-small);
line-height: 1.5;
}
.learn-table th,
.learn-table td {
padding: 11px 14px;
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--line);
min-width: 8em;
}
.learn-table th {
font-family: var(--font-mono);
font-size: var(--t-mono);
font-weight: 500;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--fg);
background: color-mix(in srgb, var(--fg) 4%, transparent);
white-space: nowrap;
}
.learn-table td {
color: var(--fg-sub);
}
.learn-table tbody tr:last-child td {
border-bottom: 0;
}
.learn-table figcaption {
font-family: var(--font-mono);
font-size: var(--t-mono);
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--fg-soft);
margin-bottom: 10px;
}
.learn-note {
font-size: var(--t-small);
line-height: 1.55;
color: var(--fg-soft);
}
.learn-formula {
padding: clamp(14px, 1.6vw, 20px) clamp(16px, 1.8vw, 22px);
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: color-mix(in srgb, var(--fg) 4%, transparent);
font-family: var(--font-mono);
font-size: var(--t-small);
line-height: 1.6;
color: var(--fg);
overflow-x: auto;
}
.learn-formula-note {
font-size: var(--t-small);
line-height: 1.55;
color: var(--fg-soft);
margin-top: -8px;
}
.learn-def {
padding-left: clamp(14px, 1.6vw, 20px);
border-left: 2px solid var(--line-strong);
}
.learn-def dt {
font-family: var(--font-display);
font-size: var(--t-h3);
font-weight: 600;
line-height: 1.3;
color: var(--fg);
margin-bottom: 6px;
}
.learn-def dd {
font-size: var(--learn-t-body);
line-height: 1.7;
color: var(--fg-sub);
}
.learn-callout {
padding: clamp(16px, 1.8vw, 22px);
border: 1px solid var(--line);
border-left-width: 3px;
border-radius: var(--r-sm);
background: color-mix(in srgb, var(--fg) 3%, transparent);
}
.learn-callout--note {
border-left-color: var(--info);
}
.learn-callout--caution {
border-left-color: var(--state-exception);
}
.learn-callout-title {
font-family: var(--font-mono);
font-size: var(--t-mono);
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--fg);
margin-bottom: 6px;
}
.learn-body .learn-callout p {
font-size: var(--t-small);
line-height: 1.65;
}
.learn-end {
display: grid;
row-gap: clamp(30px, 3.6vw, 52px);
margin-top: clamp(40px, 5vw, 72px);
}
.learn-end-section {
padding-top: clamp(26px, 3vw, 40px);
border-top: 1px solid var(--line);
}
.learn-end-section > h2 {
font-size: clamp(22px, 2.2vw, 28px);
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--fg);
margin-bottom: clamp(16px, 1.8vw, 24px);
}
.learn-faq {
display: grid;
list-style: none;
}
.learn-faq > li {
border-bottom: 1px solid var(--line);
}
.learn-faq summary {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding: 16px 0;
cursor: pointer;
font-family: var(--font-display);
font-size: var(--t-lead);
font-weight: 600;
line-height: 1.35;
color: var(--fg);
list-style: none;
}
.learn-faq summary::-webkit-details-marker {
display: none;
}
.learn-faq summary::after {
content: '';
flex: none;
width: 12px;
height: 12px;
margin-top: 0.45em;
background:
linear-gradient(var(--fg-soft), var(--fg-soft)) center / 12px 1.5px no-repeat,
linear-gradient(var(--fg-soft), var(--fg-soft)) center / 1.5px 12px no-repeat;
transition: transform var(--dur-fast) var(--ease);
}
.learn-faq details[open] summary::after {
background: linear-gradient(var(--fg), var(--fg)) center / 12px 1.5px no-repeat;
}
.learn-faq-answer {
padding-bottom: 18px;
max-width: var(--learn-measure);
font-size: var(--learn-t-body);
line-height: 1.7;
color: var(--fg-sub);
}
.learn-sources {
display: grid;
row-gap: 10px;
list-style: none;
counter-reset: learn-source;
}
.learn-sources > li {
display: grid;
grid-template-columns: 2.4em minmax(0, 1fr);
font-size: var(--t-small);
line-height: 1.6;
counter-increment: learn-source;
}
.learn-sources > li::before {
content: counter(learn-source, decimal-leading-zero);
font-family: var(--font-mono);
font-size: var(--t-mono);
color: var(--fg-faint);
padding-top: 0.25em;
}
.learn-sources a {
color: var(--fg);
text-decoration: none;
border-bottom: 1px solid var(--line-strong);
transition: border-color var(--dur-fast) var(--ease);
}
.learn-sources a:hover,
.learn-sources a:focus-visible {
border-color: var(--info);
}
.learn-source-host {
display: block;
font-family: var(--font-mono);
font-size: var(--t-mono);
letter-spacing: 0.05em;
color: var(--fg-soft);
margin-top: 3px;
}
.learn-related {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(14px, 1.6vw, 20px);
list-style: none;
}
@media (max-width: 1000px) {
.learn-grid--blog,
.learn-related {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.learn-rail {
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: color-mix(in srgb, var(--fg) 3%, transparent);
padding: clamp(15px, 2.6vw, 20px) clamp(16px, 3vw, 22px);
max-width: min(100%, var(--learn-wide));
}
.learn-toc-list,
.learn-rail-about {
border-left: 0;
padding-left: 0;
}
.learn-toc-list {
columns: 2;
column-gap: clamp(20px, 3.4vw, 36px);
}
.learn-toc a {
margin-left: 0;
padding-left: 11px;
}
}
@media (max-width: 640px) {
.learn-grid--blog,
.learn-grid--guides,
.learn-related {
grid-template-columns: minmax(0, 1fr);
}
.learn-toc-list {
columns: auto;
max-height: 46vh;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--line-strong) transparent;
}
.learn-steps > li {
grid-template-columns: minmax(0, 1fr);
row-gap: 2px;
}
.learn-steps > li::before {
padding-top: 0;
}
.learn-table th,
.learn-table td {
padding: 9px 11px;
}
}