.learn { margin: 0; background: #130b0c; color: #fff3f3; color-scheme: dark; font: 1rem/1.6 system-ui, sans-serif; }
.learn header, .learn main, .learn footer { box-sizing: border-box; max-width: 48rem; padding-inline: 1.25rem; margin-inline: auto; }
.learn header { padding-block: 1.25rem; }
.learn-brand { font-weight: 800; font-size: 1.25rem; }
.learn h1 { font-size: clamp(2rem, 6vw, 3.8rem); line-height: 1.08; margin: 1rem 0; text-wrap: balance; }
.learn h2 { font-size: 1.35rem; margin-top: 2rem; }
.learn-lead { font-size: 1.12rem; }
.learn a { color: #ffb8b8; }
.learn a:focus-visible, .learn summary:focus-visible { outline: 2px solid #ffb8b8; outline-offset: 4px; }
.learn-actions, .learn nav { display: flex; flex-wrap: wrap; gap: .75rem 1rem; }
.learn .learn-action { border: 1px solid #ff9f9f; border-radius: .8rem; padding: .65rem 1rem; font-weight: 700; color: #fff; background: #92252d; text-decoration: none; }
.learn-example { background: #251517; border: 1px solid #724044; border-radius: 1rem; padding: .4rem 1.15rem; }
.learn summary { cursor: pointer; }
.learn footer { padding-block: 1.5rem 2rem; }