/* Learn 0.5 (Ches, 2026-10-29). Roland: Learn is built on the satoshis.watch foundation. site.css,
   generated from the satoshis.watch landing page, supplies the tokens in both themes, the 1180px
   grid with 24px gutters, the header, the footer, the type and the section, card and button pieces.
   This file holds only what Learn adds, on those same --swr tokens. Earlier decisions still stand:
   plain 2.4 codes, Inter throughout, dark by default with a remembered light toggle, progress only
   in the browser (reports/2026-10-26-learn-design-research.md in Ches's workspace). */
html { background: #10141F; }
html[data-theme="light"] { background: #F0EEE6; }
body.sw-site { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
/* The satoshis.watch orange rule along the top of every page */
body.sw-site::before { content: ""; display: block; height: 2px; background: #F7931A; flex-shrink: 0; }
body.learn {
  --learn-measure: 68ch;
  --learn-body: color-mix(in srgb, var(--swr-text) 84%, var(--swr-text2));
  --learn-radius: 14px;
  --learn-warm-low: rgba(247, 147, 26, .06);
  --learn-warm-high: rgba(247, 147, 26, .25);
}
.learn [hidden] { display: none !important; }
.learn :focus-visible { outline: 2px solid var(--swr-btc-ink); outline-offset: 2px; }
.learn .learn-main { flex: 1; width: 100%; }

/* Shared marks: the landing's section label, Learn's lesson code */
.learn .learn-code { font-family: var(--swr-mono); font-variant-numeric: tabular-nums slashed-zero; font-size: .82em; font-weight: 500; letter-spacing: 0; color: var(--swr-btc-ink); }
.learn .learn-eyebrow,
.learn .learn-level-num { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--swr-btc-ink); }
.learn .learn-label { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--swr-text3); }
.learn .learn-section-title { margin: 0 0 20px; font-size: clamp(24px, 2.6vw, 32px); font-weight: 640; line-height: 1.15; letter-spacing: -.024em; color: var(--swr-text); }
.learn .learn-tick { display: none; flex: none; color: var(--swr-btc-ink); }
.learn .is-read .learn-tick { display: inline-block; }

/* Header: the landing's bar, with Learn's name and sections between the wordmark and the controls */
.learn .lnav-brand { flex: none; }
.learn .learn-brand-sub { margin-left: 3px; padding-left: 12px; border-left: 1px solid var(--swr-border-strong); color: var(--swr-text2); font-weight: 600; }
.learn .learn-nav { display: flex; align-items: center; gap: 4px; margin: 0 auto 0 28px; }
.learn .learn-nav a { padding: 8px 12px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--swr-text2); transition: color .15s, background .15s; }
.learn .learn-nav a:hover { color: var(--swr-text); }
.learn .learn-nav a[aria-current] { color: var(--swr-text); background: color-mix(in srgb, var(--swr-surface) 80%, transparent); }
.learn .learn-nav-short,
.learn .learn-lookup-short { display: none; }
.learn .lnav-login { white-space: nowrap; }

/* Buttons: the landing's orange call to action, and a quiet text link beside it */
.learn .final-cta { text-decoration: none; }
.learn .final-cta:hover { color: var(--swr-btn-ink); }
.learn .learn-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin: 30px 0 0; }
.learn .learn-hero-alt { font-size: 15px; font-weight: 600; color: var(--swr-text); border-bottom: 1px solid var(--swr-border-strong); padding-bottom: 2px; }
.learn .learn-hero-alt:hover { border-color: var(--swr-btc); }
.learn .learn-facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 26px; margin: 30px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--swr-text3); }
.learn .learn-facts strong { font-size: 16px; font-weight: 600; color: var(--swr-text); }

/* Landing (Roland 2026-10-29): the front door to everything on Learn, not to the lessons alone. A short
   centred hero, then one row of equal doors (the satoshis.watch card standard); a new section is one more
   door and the grid makes room. The live chain sits below. */
.learn .learn-hero { min-height: 0; padding: 72px 24px 40px; }
.learn .learn-hero h1 { margin-bottom: 16px; font-size: clamp(32px, 4vw, 48px); line-height: 1.08; letter-spacing: -.028em; }
.learn .learn-hero .hero-sub { max-width: 640px; margin-bottom: 0; font-size: clamp(16px, 1.4vw, 18px); }
.learn .learn-hero .final-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 55% 60% at 50% 30%, rgba(247, 147, 26, .10), transparent 70%); }
.learn .learn-hero .eyebrow .pulse { background: var(--swr-btc); box-shadow: none; animation: none; }
.learn .learn-hero .learn-hero-actions { justify-content: center; margin-top: 8px; }
.learn .learn-hero .learn-facts { justify-content: center; margin-top: 34px; font-size: 13.5px; }
.learn .learn-hero .learn-facts strong { font-size: 15px; }
.learn .learn-doors { padding: 0 0 72px; }
.learn .learn-doors .cards { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.learn .learn-door { display: flex; flex-direction: column; }
.learn .learn-door h3 { font-size: 23px; letter-spacing: -.02em; }
.learn .learn-door h3 a { color: var(--swr-text); }
.learn .learn-door h3 a:hover { color: var(--swr-btc-ink); }
.learn .learn-home-links a { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: baseline; padding: 9px 0; color: var(--swr-text); }
.learn .learn-home-links a:hover { color: var(--swr-btc-ink); }
.learn .learn-door-lookup { display: flex; margin: 18px 0 0; }
.learn .learn-door-lookup input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--swr-border-strong); border-right: 0; border-radius: 10px 0 0 10px; background: var(--swr-bg); font-family: var(--swr-mono); font-size: 13.5px; color: var(--swr-text); }
.learn .learn-door-lookup input::placeholder { color: var(--swr-text3); }
.learn .learn-door-lookup input:focus { outline: none; border-color: color-mix(in srgb, var(--swr-btc) 60%, transparent); }
.learn .learn-door-lookup button { flex: none; height: 44px; padding: 0 16px; border: 0; border-radius: 0 10px 10px 0; background: var(--swr-btc); font: inherit; font-size: 14px; font-weight: 600; color: var(--swr-btn-ink); cursor: pointer; }
.learn .learn-door-lookup button:hover { background: var(--swr-btc-hover); }
.learn .learn-door-try { margin: 12px 0 0 !important; font-size: 13px !important; color: var(--swr-text3) !important; }
.learn .learn-door-try a { color: var(--swr-text2); border-bottom: 1px dashed var(--swr-border-strong); }
.learn .learn-door-try a:hover { color: var(--swr-text); }
.learn .learn-home-now { display: flex; flex-direction: column; gap: 20px; max-width: calc(1040px + 48px); padding-bottom: 96px; }
.learn .learn-home-now .learn-continue { margin: 0; }
.learn .learn-home-now .learn-live { margin: 0; box-shadow: var(--swr-card-shadow); }
.learn .learn-home-now .learn-live dl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.learn .learn-home-list { margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--swr-border); }
.learn .learn-home-list li { border-bottom: 1px solid var(--swr-border); font-size: 14px; line-height: 1.45; }
.learn .learn-home-fa li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; }
.learn .learn-home-fa-name { min-width: 0; color: var(--swr-text); }
.learn .learn-home-fa-btc { font-family: var(--swr-mono); font-variant-numeric: tabular-nums slashed-zero; font-size: 13px; color: var(--swr-btc-ink); white-space: nowrap; }
.learn .learn-home-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 20px; font-size: 14px; font-weight: 600; color: var(--swr-btc-ink); }
.learn .learn-home-more:hover { color: var(--swr-text); }


/* Live figures: a textbook figure, never a ticker */
.learn .learn-live { margin: 32px 0; padding: 0; overflow: hidden; border: 1px solid var(--swr-border); border-radius: var(--learn-radius); background: var(--swr-surface); }
.learn .learn-live-source { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-bottom: 1px solid var(--swr-border); background: var(--learn-warm-low); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--swr-btc-ink); }
.learn .learn-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--swr-text3); }
.learn .learn-live.is-live .learn-live-dot { background: var(--swr-btc); box-shadow: 0 0 0 4px var(--learn-warm-high); animation: learn-pulse 2.4s ease-in-out infinite; }
.learn .learn-live.is-offline .learn-live-dot { background: var(--swr-text3); box-shadow: none; animation: none; }
@keyframes learn-pulse { 50% { box-shadow: 0 0 0 7px transparent; } }
.learn .learn-live-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 16px 18px 14px; }
.learn .learn-live-title { font-size: 16px; font-weight: 700; color: var(--swr-text); }
.learn .learn-live-stamp { font-family: var(--swr-mono); font-size: 12px; color: var(--swr-text3); font-variant-numeric: tabular-nums slashed-zero; }
.learn .learn-live dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 0; overflow: hidden; border-top: 1px solid var(--swr-border); }
/* Cell rules drawn by each cell, so a short last row leaves plain surface, not a grey block. */
.learn .learn-live dl > div { padding: 14px 18px 16px; box-shadow: 1px 0 0 var(--swr-border), 0 1px 0 var(--swr-border); }
.learn .learn-live dt { font-size: 13px; line-height: 1.4; color: var(--swr-text3); }
.learn .learn-live dd { margin: 6px 0 0; font-family: var(--swr-mono); font-size: 1.3rem; font-weight: 600; line-height: 1.25; color: var(--swr-text); font-variant-numeric: tabular-nums slashed-zero; overflow-wrap: anywhere; }
.learn .learn-live dd small { display: block; margin-top: 4px; font-family: var(--swr-sans); font-size: 12.5px; font-weight: 400; color: var(--swr-text3); }
.learn .learn-live .learn-live-note { margin: 0; padding: 14px 18px 16px; border-top: 1px solid var(--swr-border); font-size: 15px; line-height: 1.55; color: var(--swr-text2); }
.learn .learn-live-watch { display: block; padding: 11px 18px; border-top: 1px solid var(--swr-border); font-size: 14px; font-weight: 600; color: var(--swr-btc-ink); }
.learn .learn-live-watch:hover { background: var(--learn-warm-low); color: var(--swr-btc-ink); }

/* "Try it" on lessons about addresses */
.learn .learn-try-watch { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 20px; margin: 28px 0 0; padding: 20px 24px; border: 1px solid var(--learn-warm-high); border-radius: 16px; background: var(--learn-warm-low); }
.learn .learn-try-title { margin: 0; font-size: 1.15rem; font-weight: 620; color: var(--swr-text); }
.learn .learn-try-text { grid-column: 1; margin: 0; font-size: 15px; color: var(--swr-text2); }
.learn .learn-try-btn { grid-column: 2; grid-row: 1 / span 2; white-space: nowrap; }
/* Hub: continue, how it works, the course, about */
.learn .learn-continue { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin: 32px 0 0; padding: 18px 22px; border: 1px solid var(--learn-warm-high); border-radius: var(--learn-radius); background: var(--learn-warm-low); }
.learn .learn-continue .learn-label { margin: 0; color: var(--swr-btc-ink); }
.learn .learn-continue-link { display: inline-flex; align-items: baseline; gap: 10px; font-size: 1.1rem; font-weight: 700; color: var(--swr-text); }
.learn .learn-continue-link:hover { color: var(--swr-btc-ink); }
.learn .learn-continue-count { margin: 0 0 0 auto; font-size: 14px; color: var(--swr-text3); }

.learn .learn-how { padding: 60px 0; border-bottom: 1px solid var(--swr-border); }
.learn .learn-how ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: learn-step; }
.learn .learn-how li { padding: 18px 0 0; border-top: 2px solid var(--swr-border-strong); counter-increment: learn-step; }
.learn .learn-how li:first-child { border-top-color: var(--swr-btc); }
.learn .learn-how li::before { content: counter(learn-step); display: block; margin: 0 0 10px; font-family: var(--swr-mono); font-size: 13px; color: var(--swr-btc-ink); }
.learn .learn-how strong { display: block; margin: 0 0 6px; font-size: 1.05rem; color: var(--swr-text); }
.learn .learn-how span { display: block; font-size: 15px; line-height: 1.55; color: var(--swr-text2); }

.learn .learn-course { padding: 60px 0 24px; scroll-margin-top: 72px; }
.learn .learn-course-head p { margin: -8px 0 28px; color: var(--swr-text2); }
.learn .learn-level { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 56px; padding: 40px 0; border-top: 1px solid var(--swr-border); scroll-margin-top: 72px; }
.learn .learn-level-head { position: sticky; top: 88px; align-self: start; }
.learn .learn-level-head h3 { margin: 8px 0 8px; font-size: 1.5rem; font-weight: 640; line-height: 1.2; letter-spacing: -.015em; color: var(--swr-text); }
.learn .learn-level-for { margin: 0 0 12px; font-size: 15px; line-height: 1.55; color: var(--swr-text2); }
.learn .learn-level-meta { margin: 0; font-size: 14px; color: var(--swr-text3); }
.learn .learn-lessons { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--swr-border); }
.learn .learn-lessons li { border-bottom: 1px solid var(--swr-border); }
.learn .learn-lessons a,
.learn .learn-lessons .learn-soon { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: 3px 16px; align-items: baseline; padding: 16px 10px; margin: 0 -10px; border-radius: 10px; color: inherit; }
.learn .learn-lessons a:hover { background: var(--learn-warm-low); }
.learn .learn-lessons .learn-code { grid-row: 1 / span 2; font-size: 14px; }
.learn .learn-lesson-t { font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--swr-text); }
.learn .learn-lessons a:hover .learn-lesson-t { color: var(--swr-btc-ink); }
.learn .learn-lesson-a { grid-column: 2; font-size: 15px; line-height: 1.5; color: var(--swr-text2); }
.learn .learn-lesson-time { display: inline-flex; align-items: center; gap: 6px; grid-column: 3; grid-row: 1; font-size: 13px; color: var(--swr-text3); white-space: nowrap; }
.learn .learn-soon .learn-lesson-t { color: var(--swr-text2); }
.learn .learn-badge { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.learn .learn-about { padding: 56px 0 80px; border-top: 1px solid var(--swr-border); }
.learn .learn-about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 56px; }
.learn .learn-about h3 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; color: var(--swr-text); }
.learn .learn-about p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--swr-text2); }
.learn .learn-qhead.learn-course-top { max-width: none; padding-bottom: 44px; border-bottom: 1px solid var(--swr-border); }
.learn .learn-course-top > :not(.learn-facts):not(.learn-hero-actions) { max-width: 820px; }
/* Famous Bitcoin addresses: moved from satoshis.watch; each card opens the address there */
.learn .learn-fa-stamp { max-width: 46em; margin: 18px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--swr-btc); font-size: 14px; line-height: 1.55; color: var(--swr-text3); }
.learn .learn-fa-section { padding: 44px 0 4px; scroll-margin-top: 72px; }
.learn .learn-fa-head h2 { margin: 0 0 6px; font-size: 1.5rem; font-weight: 640; letter-spacing: -.015em; color: var(--swr-text); }
.learn .learn-fa-head p { max-width: 46em; margin: 0 0 20px; font-size: 15.5px; line-height: 1.55; color: var(--swr-text2); }
.learn .learn-fa-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.learn .learn-fa-card { display: flex; flex-direction: column; height: 100%; padding: 18px 18px 16px; border: 1px solid var(--swr-border); border-radius: var(--learn-radius); background: var(--swr-surface); color: var(--swr-text); transition: border-color .15s; }
.learn .learn-fa-card:hover { border-color: var(--swr-btc); color: var(--swr-text); }
.learn .learn-fa-name { font-size: 16px; font-weight: 700; line-height: 1.35; }
.learn .learn-fa-card:hover .learn-fa-name { color: var(--swr-btc-ink); }
.learn .learn-fa-addr { margin: 4px 0 12px; font-family: var(--swr-mono); font-size: 12.5px; color: var(--swr-text3); }
.learn .learn-fa-figs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.learn .learn-fa-btc { font-family: var(--swr-mono); font-variant-numeric: tabular-nums slashed-zero; font-size: 1.12rem; font-weight: 600; color: var(--swr-text); }
.learn .learn-fa-usd { font-family: var(--swr-mono); font-size: 13px; color: var(--swr-text3); }
.learn .learn-fa-spark { display: block; width: 100%; height: 44px; margin: 12px 0 0; }
.learn .learn-fa-spark-empty { border-bottom: 1px dashed var(--swr-border); }
.learn .learn-fa-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: auto; padding-top: 12px; font-size: 12.5px; color: var(--swr-text3); }
.learn .learn-fa-chip { padding: 2px 8px; border: 1px solid var(--swr-border); border-radius: 999px; font-size: 11.5px; }
.learn .learn-fa-try { margin-top: 44px; }
.learn .learn-main-famous .learn-about { margin-top: 44px; }
/* Lesson: level outline on the left, the class on the right */
.learn .learn-lesson-grid { display: grid; grid-template-columns: 250px minmax(0, 760px); justify-content: start; gap: 96px; padding: 48px 0 96px; }
.learn .learn-lesson-aside { position: sticky; top: 92px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto; }
.learn .learn-rail-head { display: flex; flex-direction: column; gap: 4px; margin: 0 0 16px; }
.learn .learn-rail-level { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--swr-text); }
.learn .learn-rail-count { font-size: 13px; color: var(--swr-text3); }
.learn .learn-rail ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--swr-border); }
.learn .learn-rail li { display: flex; align-items: center; }
.learn .learn-rail li > a,
.learn .learn-rail li > span { display: flex; flex: 1; gap: 10px; margin-left: -1px; padding: 7px 10px 7px 14px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.4; color: var(--swr-text2); }
.learn .learn-rail li > a:hover { color: var(--swr-text); border-left-color: var(--swr-border-strong); }
.learn .learn-rail li.is-current > span { font-weight: 600; color: var(--swr-text); border-left-color: var(--swr-btc); }
.learn .learn-rail .learn-code { min-width: 2.1em; font-size: 12px; color: var(--swr-text3); }
.learn .learn-rail li.is-current .learn-code { color: var(--swr-btc-ink); }
.learn .learn-rail li.is-soon { opacity: .55; }
.learn .learn-rail-all { display: inline-block; margin: 16px 0 0 15px; font-size: 13px; color: var(--swr-text3); }
.learn .learn-rail-all:hover { color: var(--swr-text); }

.learn .learn-lesson,
.learn .learn-doc { min-width: 0; }
.learn .learn-crumb { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; font-size: 13px; color: var(--swr-text3); }
.learn .learn-crumb a { color: var(--swr-text3); }
.learn .learn-crumb a:hover { color: var(--swr-text); }
.learn .learn-newcomer { margin: -8px 0 28px; padding: 10px 14px; border: 1px dashed var(--swr-border-strong); border-radius: 10px; font-size: 14px; color: var(--swr-text2); }
.learn .learn-newcomer a { font-weight: 600; color: var(--swr-btc-ink); }
.learn .learn-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 13px; color: var(--swr-text3); }
.learn .learn-kicker .learn-code { padding: 2px 8px; border: 1px solid var(--learn-warm-high); border-radius: 6px; background: var(--learn-warm-low); font-size: 15px; }
.learn .learn-lesson h1,
.learn .learn-doc h1 { margin: 0 0 14px; font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 640; line-height: 1.1; letter-spacing: -.025em; color: var(--swr-text); }
.learn .learn-meta { display: flex; flex-wrap: wrap; margin: 0; font-size: 14px; color: var(--swr-text3); }
.learn .learn-meta span + span::before { content: "·"; margin: 0 10px; }
.learn .learn-dots { display: flex; gap: 6px; margin: 20px 0 36px; }
.learn .learn-dot { width: 30px; height: 4px; border-radius: 2px; background: var(--swr-border-strong); }
.learn .learn-dot.is-read { background: color-mix(in srgb, var(--swr-btc) 50%, var(--swr-border-strong)); }
.learn .learn-dot.is-current { background: var(--swr-btc); }
.learn .learn-answers { margin: 0 0 40px; padding: 18px 22px 16px; border: 1px solid var(--swr-border); border-radius: var(--learn-radius); background: var(--swr-surface); }
.learn .learn-answers ul { margin: 0; padding-left: 1.2em; }
.learn .learn-answers li { margin: 4px 0; font-size: 16px; line-height: 1.5; color: var(--swr-text); }
.learn .learn-answers li::marker { color: var(--swr-btc-ink); }

/* Lesson prose: the reading column */
.learn .learn-prose { font-size: 18px; line-height: 1.7; color: var(--learn-body); }
.learn .learn-prose > :not(table):not(figure) { max-width: var(--learn-measure); }
.learn .learn-prose p { margin: 0 0 1.1em; }
.learn .learn-prose .doc-lead { margin: 0 0 1.4em; font-size: 1.22rem; line-height: 1.55; color: var(--swr-text); }
.learn .learn-prose h2 { margin: 2.2em 0 .6em; font-size: 1.45rem; font-weight: 620; line-height: 1.25; letter-spacing: -.01em; color: var(--swr-text); }
.learn .learn-prose h3 { margin: 1.8em 0 .5em; font-size: 1.15rem; font-weight: 700; color: var(--swr-text); }
.learn .learn-prose strong { color: var(--swr-text); }
.learn .learn-prose a { color: var(--swr-btc-ink); text-decoration: underline; text-decoration-color: var(--learn-warm-high); text-underline-offset: 3px; }
.learn .learn-prose a:hover { text-decoration-color: currentColor; }
.learn .learn-prose ul,
.learn .learn-prose ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.learn .learn-prose li { margin: .35em 0; }
.learn .learn-prose li::marker { color: var(--swr-text3); }
.learn .learn-prose table { width: 100%; margin: 1.4em 0 1.8em; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; }
.learn .learn-prose th,
.learn .learn-prose td { padding: 10px 16px 10px 0; border-bottom: 1px solid var(--swr-border); text-align: left; vertical-align: top; }
.learn .learn-prose th { font-weight: 600; color: var(--swr-text); }
.learn .learn-prose thead th { border-bottom-color: var(--swr-border-strong); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--swr-text3); }
.learn .learn-prose .learn-terms th { width: 10rem; }
.learn .learn-prose td a { text-decoration-color: var(--swr-border-strong); }
.learn .learn-watch-link { font-size: 14px; color: var(--swr-text3); }

/* Check yourself: practice, the answer stays hidden until the reader asks */
.learn .learn-check { margin: 56px 0 0; padding: 26px 28px 10px; border: 1px solid var(--swr-border); border-radius: 16px; background: var(--swr-surface); }
.learn .learn-check h2 { margin: 0 0 4px; font-size: 1.45rem; font-weight: 640; color: var(--swr-text); }
.learn .learn-check-lead { margin: 0 0 14px; font-size: 15px; color: var(--swr-text3); }
.learn .learn-check details { border-top: 1px solid var(--swr-border); }
.learn .learn-check summary { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 16px 0; cursor: pointer; list-style: none; }
.learn .learn-check summary::-webkit-details-marker { display: none; }
.learn .learn-check-n { font-family: var(--swr-mono); font-size: 14px; color: var(--swr-btc-ink); }
.learn .learn-check-q { font-size: 17px; font-weight: 600; line-height: 1.45; color: var(--swr-text); }
.learn .learn-check-reveal { padding: 4px 12px; border: 1px solid var(--learn-warm-high); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--swr-btc-ink); white-space: nowrap; }
.learn .learn-check summary:hover .learn-check-reveal { background: var(--learn-warm-low); }
.learn .learn-check details[open] .learn-check-reveal { border-color: transparent; color: var(--swr-text3); }
.learn .learn-check details[open] .learn-check-reveal::before { content: "Hide"; }
.learn .learn-check details[open] .learn-check-reveal { font-size: 0; }
.learn .learn-check details[open] .learn-check-reveal::before { font-size: 13px; }
.learn .learn-check details p { margin: 0 0 18px calc(1.8rem + 12px); padding: 12px 16px; border-left: 2px solid var(--swr-btc); border-radius: 0 10px 10px 0; background: var(--learn-warm-low); font-size: 16px; line-height: 1.6; color: var(--swr-text); }

/* Sources, finishing, next */
.learn .learn-sources-block { margin: 48px 0 0; }
.learn .learn-sources-block h2 { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--swr-text3); }
.learn .learn-sources { margin: 0; padding-left: 1.5em; }
.learn .learn-sources li { margin: 6px 0; font-size: 15px; line-height: 1.55; color: var(--swr-text2); }
.learn .learn-sources li::marker { font-family: var(--swr-mono); font-size: 13px; color: var(--swr-text3); }
.learn .learn-sources a { color: var(--swr-text2); text-decoration: underline; text-underline-offset: 3px; }

.learn .learn-finish { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 40px 0 0; padding: 22px 0 0; border-top: 1px solid var(--swr-border); }
.learn .learn-mark { appearance: none; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border: 1px solid var(--swr-border-strong); border-radius: 10px; background: transparent; font: inherit; font-size: 15px; font-weight: 600; color: var(--swr-text); cursor: pointer; }
.learn .learn-mark:hover { border-color: var(--swr-btc); }
.learn .learn-mark-done { display: none; align-items: center; gap: 6px; }
.learn .learn-mark-done .learn-tick { display: inline-block; }
.learn .learn-mark.is-done { border-color: var(--learn-warm-high); background: var(--learn-warm-low); color: var(--swr-btc-ink); }
.learn .learn-mark.is-done .learn-mark-idle { display: none; }
.learn .learn-mark.is-done .learn-mark-done { display: inline-flex; }
.learn .learn-mark-note { margin: 0; font-size: 13px; color: var(--swr-text3); }

.learn .learn-pager { display: flex; flex-direction: column; gap: 14px; margin: 28px 0 0; }
.learn .learn-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 22px 24px; border: 1px solid var(--swr-border-strong); border-radius: 16px; background: var(--swr-surface); color: var(--swr-text); transition: border-color .15s; }
.learn .learn-next:hover { border-color: var(--swr-btc); color: var(--swr-text); }
.learn .learn-next-label { grid-column: 1 / -1; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--swr-btc-ink); }
.learn .learn-next-title { display: flex; align-items: baseline; gap: 10px; font-size: 1.3rem; font-weight: 620; line-height: 1.3; }
.learn .learn-next-meta { align-self: end; font-size: 14px; color: var(--swr-text3); white-space: nowrap; }
.learn .learn-prev { align-self: flex-start; font-size: 14px; color: var(--swr-text3); }
.learn .learn-prev:hover { color: var(--swr-text); }
.learn .learn-fine { margin: 40px 0 0; font-size: 13px; line-height: 1.55; color: var(--swr-text3); }

/* Questions, privacy, terms, 404 */
.learn .learn-doc { max-width: 780px; padding: 48px 0 96px; }
.learn .learn-doc > .learn-meta { margin-bottom: 32px; }
.learn .learn-doc-lead { margin: 0 0 32px; font-size: 1.2rem; line-height: 1.55; color: var(--swr-text2); }
.learn .learn-doc > h2 { display: flex; flex-direction: column; gap: 6px; margin: 48px 0 12px; font-size: 1.35rem; font-weight: 620; color: var(--swr-text); }
/* /questions: the course's questions, level by level, each lesson beside the questions it answers */
.learn .learn-qhead { max-width: 820px; padding: 48px 0 8px; }
.learn .learn-qhead h1 { margin: 10px 0 14px; font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 640; line-height: 1.1; letter-spacing: -.025em; color: var(--swr-text); }
.learn .learn-qhead .learn-doc-lead { margin: 0; }
.learn .learn-qfind { margin: 28px 0 0; }
.learn .learn-qfind label { display: block; margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--swr-text3); }
.learn .learn-qfind input { width: 100%; max-width: 560px; height: 50px; padding: 0 16px; border: 1px solid var(--swr-border-strong); border-radius: 12px; background: var(--swr-surface); font: inherit; font-size: 17px; color: var(--swr-text); }
.learn .learn-qfind input::placeholder { color: var(--swr-text3); }
.learn .learn-qfind input:focus { outline: none; border-color: var(--swr-btc); box-shadow: 0 0 0 3px var(--learn-warm-high); }
.learn .learn-qfind-count { min-height: 1.4em; margin: 8px 0 0; font-size: 14px; color: var(--swr-text3); }
.learn .learn-qjump { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.learn .learn-qjump a { display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 13px; border: 1px solid var(--swr-border); border-radius: 999px; font-size: 14px; color: var(--swr-text2); }
.learn .learn-qjump a:hover { border-color: var(--swr-btc); color: var(--swr-text); }
.learn .learn-qlevel { margin: 44px 0 0; scroll-margin-top: 72px; }
.learn .learn-qlevel-head { padding: 0 0 14px; }
.learn .learn-qlevel-head h2 { margin: 6px 0 0; font-size: 1.5rem; font-weight: 640; letter-spacing: -.015em; color: var(--swr-text); }
.learn .learn-qgroup { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 8px 40px; padding: 18px 0; border-top: 1px solid var(--swr-border); }
.learn .learn-qlesson { display: grid; grid-template-columns: 2.8rem minmax(0, 1fr); gap: 2px 6px; align-self: start; color: var(--swr-text); }
.learn .learn-qlesson .learn-code { grid-row: 1 / span 2; font-size: 14px; }
.learn .learn-qlesson-t { font-size: 16px; font-weight: 600; line-height: 1.4; }
.learn .learn-qlesson:hover .learn-qlesson-t { color: var(--swr-btc-ink); }
.learn .learn-qlesson-m { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--swr-text3); }
.learn .learn-qlist { margin: 0; padding: 0; list-style: none; }
.learn .learn-qlist li { padding: 3px 0; }
.learn .learn-qlist a { font-size: 16.5px; line-height: 1.45; color: var(--learn-body); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.learn .learn-qlist a:hover { color: var(--swr-btc-ink); text-decoration-color: currentColor; }
.learn .learn-qempty { margin: 40px 0 0; font-size: 17px; color: var(--swr-text2); }
.learn .learn-qempty a { color: var(--swr-btc-ink); }
.learn .learn-qfine { margin: 56px 0 80px; }
.learn .learn-qfine a { color: var(--swr-text2); text-decoration: underline; text-underline-offset: 3px; }
.learn .learn-foot-fine { grid-column: 1 / -1; margin: 0 0 6px; font-size: 12.5px; color: var(--swr-text3); }
.learn .learn-progress-note { padding: 18px 0; border-top: 1px solid var(--swr-border); font-size: 14px; color: var(--swr-text3); }
.learn .learn-progress-note p { margin: 0 auto; }
.learn .learn-linkbtn { appearance: none; padding: 0; border: 0; background: none; font: inherit; color: var(--swr-btc-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Inner pages share the landing's heading scale, one step down */
.learn .learn-lesson h1,
.learn .learn-doc h1,
.learn .learn-qhead h1 { margin: 10px 0 16px; font-size: clamp(32px, 4.2vw, 50px); font-weight: 640; line-height: 1.06; letter-spacing: -.03em; color: var(--swr-text); }
.learn .learn-lesson h1 { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .learn .learn-live.is-live .learn-live-dot { animation: none; }
}

/* Tablet: the header's sections move to a row of their own; level headers sit above their lessons */
@media (max-width: 1080px) {
  .learn .learn-how ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
  .learn .learn-level { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .learn .learn-level-head { position: static; }
  .learn .learn-qgroup { grid-template-columns: 240px minmax(0, 1fr); gap: 8px 28px; }
  .learn .learn-home-now .learn-live dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .learn .lnav-in { flex-wrap: wrap; height: auto; min-height: 58px; padding-top: 11px; column-gap: 12px; }
  .learn .lnav-right { margin-left: auto; }
  .learn .learn-nav { order: 3; flex-basis: 100%; margin: 8px 0 0; padding: 4px 0 6px; border-top: 1px solid color-mix(in srgb, var(--swr-border) 55%, transparent); overflow-x: auto; scrollbar-width: none; }
  .learn .learn-nav a { padding: 7px 12px; }
  .learn .learn-nav a:first-child { margin-left: -12px; }
  .learn .learn-lesson-grid { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 28px 0 64px; }
  .learn .learn-lesson-aside { display: none; }
}
@media (max-width: 640px) {
  .learn .learn-lookup-long { display: none; }
  .learn .learn-lookup-short { display: inline; }
  .learn .learn-hero { padding: 44px 16px 28px; }
  .learn .learn-doors { padding-bottom: 48px; }
  .learn .learn-home-now { padding-bottom: 64px; }
  .learn .learn-hero .learn-facts { gap: 6px 18px; }
    .learn .learn-how { padding: 44px 0; }
  .learn .learn-how ol { grid-template-columns: minmax(0, 1fr); }
  .learn .learn-course { padding-top: 44px; }
  .learn .learn-level { padding: 32px 0; }
  .learn .learn-lessons a,
  .learn .learn-lessons .learn-soon { grid-template-columns: 2.6rem minmax(0, 1fr); padding: 14px 8px; margin: 0 -8px; }
  .learn .learn-lesson-time { grid-column: 2; grid-row: auto; }
  .learn .learn-about-grid { grid-template-columns: minmax(0, 1fr); }
  .learn .learn-continue-count { margin-left: 0; }
  .learn .learn-fa-cards { grid-template-columns: minmax(0, 1fr); }
  .learn .learn-qhead { padding-top: 28px; }
  .learn .learn-qgroup { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .learn .learn-qlist li { padding: 6px 0; }
  .learn .learn-dots .learn-dot { flex: 1; width: auto; }
  .learn .learn-prose { font-size: 17.5px; }
  .learn .learn-prose table { display: block; overflow-x: auto; }
  .learn .learn-prose .learn-terms th { width: 7.5rem; }
  .learn .learn-live dl,
  .learn .learn-home-now .learn-live dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learn .learn-live dd { font-size: 1.12rem; }
  .learn .learn-check { margin-left: -6px; margin-right: -6px; padding: 20px 16px 6px; }
  .learn .learn-check details p { margin-left: 0; }
  .learn .learn-next { padding: 18px; }
  .learn .learn-next-title { font-size: 1.15rem; }
  .learn .learn-try-watch { grid-template-columns: minmax(0, 1fr); }
  .learn .learn-try-btn { grid-column: 1; grid-row: auto; justify-content: center; margin-top: 10px; }
}
/* Phones: the wordmark, Learn, the theme switch and Look up stay on one row, as on satoshis.watch */
@media (max-width: 480px) {
  .learn .lnav-in { column-gap: 10px; }
  .learn .lnav-right { gap: 6px; }
  .learn .lnav-theme { width: 32px; height: 32px; }
  .learn .lnav-login { padding: 6px 11px; }
  .learn .lnav-login svg { display: none; }
  .learn .learn-brand-sub { margin-left: 1px; padding-left: 9px; }
}

/* Print: a light, plain lesson with its sources */
@media print {
  body.learn { --swr-bg: #fff; --swr-surface: #fff; --swr-text: #111; --swr-text2: #333; --swr-text3: #555; --swr-border: #ccc; --swr-border-strong: #999; --swr-btc-ink: #8A4A00; --learn-warm-low: transparent; --learn-body: #111; font-size: 12pt; }
  .learn .lnav, .learn .learn-lesson-aside, .learn .swr-foot, .learn .learn-progress-note, .learn .learn-finish,
  .learn .learn-pager, .learn .learn-dots, .learn .learn-newcomer, .learn .learn-check-reveal,
  .learn .learn-continue { display: none !important; }
  body.sw-site::before { display: none; }
  .learn .learn-lesson-grid { display: block; padding: 0; }
  .learn .learn-check, .learn .learn-answers, .learn .learn-live { break-inside: avoid; }
}

/* Following now (Roland 2026-10-29): Binance outflows. A developing story told on the chain:
   proof figures, a minute-by-minute timeline tagged by chain, the Bitcoin flow into 19 live tiles, the
   Ethereum flow and what was frozen. Bitcoin wears the site's orange, Ethereum the info blue. Tile states
   are plain words; only a piece that has moved takes the orange, so movement is what stands out. */
.learn { --bt-btc: var(--swr-btc-ink); --bt-eth: var(--swr-info); }
.learn .bt-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--swr-btc); animation: bt-pulse 2.4s ease-out infinite; }
@keyframes bt-pulse { 0% { box-shadow: 0 0 0 0 rgba(247, 147, 26, .55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(247, 147, 26, 0); } }
.learn .bt { padding: 44px 0 96px; }
.learn .bt-head { max-width: 860px; }
.learn .bt-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 6px 14px 6px 12px; border: 1px solid var(--learn-warm-high); border-radius: 999px; background: var(--learn-warm-low); font-size: 13px; font-weight: 600; color: var(--swr-btc-ink); }
.learn .bt-kicker time { font-variant-numeric: tabular-nums; }
.learn .bt-head h1 { margin: 20px 0 18px; font-size: clamp(32px, 4.4vw, 54px); font-weight: 660; line-height: 1.05; letter-spacing: -.032em; color: var(--swr-text); }
.learn .bt-lead { max-width: 68ch; margin: 0; font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.6; color: var(--swr-text2); }

/* Four figures; the last is live */
.learn .bt-proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 36px 0 0; border: 1px solid var(--swr-border); border-radius: 18px; background: var(--swr-surface); box-shadow: var(--swr-card-shadow); overflow: hidden; }
.learn .bt-proof-item { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; padding: 22px 24px 24px; box-shadow: 1px 0 0 var(--swr-border); }
.learn .bt-proof dd { margin: 0; font-family: var(--swr-mono); font-size: clamp(22px, 2.4vw, 32px); font-weight: 650; line-height: 1.1; letter-spacing: -.02em; color: var(--swr-text); font-variant-numeric: tabular-nums slashed-zero; }
.learn .bt-proof dt { font-size: 14px; line-height: 1.45; color: var(--swr-text3); }
.learn .bt-proof-live { background: var(--learn-warm-low); }
.learn .bt-proof-live dd { color: var(--swr-btc-ink); }
.learn .bt-proof-sub { order: -1; margin: 0; font-size: 13px; font-weight: 600; color: var(--swr-btc-ink); }

/* Sections */
.learn .bt-section { margin: 80px 0 0; }
.learn .bt-section > h2 { margin: 0 0 14px; font-size: clamp(24px, 2.6vw, 32px); font-weight: 640; line-height: 1.15; letter-spacing: -.024em; color: var(--swr-text); }
.learn .bt-text,
.learn .bt-prose p { max-width: 68ch; margin: 0 0 1em; font-size: 17.5px; line-height: 1.7; color: var(--learn-body); }
.learn .bt-note { margin: 0; font-size: 14px; color: var(--swr-text3); }
.learn .bt-addr { font-family: var(--swr-mono); font-size: .86em; color: var(--swr-text); border-bottom: 1px dotted var(--swr-border-strong); white-space: nowrap; font-variant-numeric: slashed-zero; }
.learn a.bt-addr:hover { color: var(--swr-btc-ink); border-bottom-color: currentColor; }
.learn .bt-name { color: var(--swr-text); font-weight: 600; border-bottom: 1px dotted var(--swr-border-strong); }
.learn .bt-name:hover { color: var(--swr-btc-ink); border-bottom-color: currentColor; }
.learn .bt-node-k .bt-name { letter-spacing: 0; text-transform: none; font-size: 15px; }
.learn .bt-proof dd small { font-size: .55em; font-weight: 500; letter-spacing: 0; color: var(--swr-text3); }
.learn .bt-node-frozen { background: color-mix(in srgb, var(--bt-eth) 9%, var(--swr-surface)); }

/* Timeline: time, a dot on the rail in the chain's colour, then what happened */
.learn .bt-timeline { position: relative; max-width: 900px; margin: 28px 0 0; padding: 0; list-style: none; }
.learn .bt-timeline::before { content: ""; position: absolute; left: 131px; top: 10px; bottom: 14px; width: 2px; background: var(--swr-border); }
.learn .bt-event { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 44px; padding: 0 0 24px; }
.learn .bt-event::before { content: ""; position: absolute; left: 126px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--bt-c); box-shadow: 0 0 0 4px var(--swr-bg); }
.learn .bt-event.bt-btc { --bt-c: var(--bt-btc); }
.learn .bt-event.bt-eth { --bt-c: var(--bt-eth); }
.learn .bt-event.bt-say { --bt-c: var(--swr-text3); }
.learn .bt-when { grid-column: 1; grid-row: 1 / span 2; padding-top: 1px; text-align: right; font-family: var(--swr-mono); font-size: 14px; font-weight: 600; color: var(--swr-text2); font-variant-numeric: tabular-nums slashed-zero; }
.learn .bt-chain { grid-column: 2; justify-self: start; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bt-c); }
.learn .bt-event p { grid-column: 2; max-width: 68ch; margin: 4px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--learn-body); }
.learn .bt-event.bt-btc p { padding: 12px 16px; border: 1px solid var(--learn-warm-high); border-radius: 12px; background: var(--learn-warm-low); color: var(--swr-text); }
.learn .bt-event.bt-btc strong { color: var(--swr-btc-ink); }

/* Flow nodes, shared by the Bitcoin and Ethereum flows */
.learn .bt-node { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px 18px; border: 1px solid var(--swr-border); border-top: 3px solid var(--bt-c); border-radius: 14px; background: var(--swr-surface); }
.learn .bt-node-btc { --bt-c: var(--swr-btc); }
.learn .bt-node-eth { --bt-c: var(--bt-eth); }
.learn .bt-node-k { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--swr-text3); }
.learn .bt-node-k .bt-addr { font-size: 13px; letter-spacing: 0; text-transform: none; }
.learn .bt-node-v { font-size: 14px; line-height: 1.45; color: var(--swr-text2); }
.learn .bt-node > .bt-addr { align-self: flex-start; font-size: 14px; }
.learn .bt-arrow { flex: none; align-self: center; color: var(--swr-text3); }
.learn .bt-btcflow { display: flex; align-items: stretch; gap: 12px; margin: 28px 0 0; }
.learn .bt-btcflow .bt-node { flex: 1; }
.learn .bt-node-end { background: var(--learn-warm-low); border-color: var(--learn-warm-high); border-top-color: var(--swr-btc); }

/* The 19 pieces */
.learn .bt-tiles-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 32px 0 14px; }
.learn .bt-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--swr-text3); }
.learn .bt-legend .bt-state { margin-right: 4px; }
.learn .bt-checked { margin: 0; font-family: var(--swr-mono); font-size: 12.5px; color: var(--swr-text3); font-variant-numeric: tabular-nums slashed-zero; }
.learn .bt-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.learn .bt-tile { position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 14px 16px 18px; overflow: hidden; border: 1px solid var(--swr-border); border-radius: 12px; background: var(--swr-surface); color: var(--swr-text); transition: border-color .15s, transform .15s; }
.learn .bt-tile::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: var(--bt-w, 100%); background: var(--swr-border-strong); }
.learn .bt-tile:hover { border-color: var(--swr-btc); transform: translateY(-1px); }
.learn .bt-tile-btc { font-family: var(--swr-mono); font-size: 20px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums slashed-zero; }
.learn .bt-tile-btc small { font-size: 12px; font-weight: 500; color: var(--swr-text3); }
.learn .bt-tile-addr { font-family: var(--swr-mono); font-size: 12px; color: var(--swr-text3); font-variant-numeric: slashed-zero; }
.learn .bt-tile[data-state="moving"] { border-color: var(--swr-warning); }
.learn .bt-tile[data-state="moved"] { border-color: var(--swr-btc); background: var(--learn-warm-low); }
.learn .bt-tile[data-state="moved"]::after,
.learn .bt-tile[data-state="moving"]::after { background: var(--swr-btc); }
.learn .bt-state { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--swr-text2); white-space: nowrap; }
.learn .bt-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--swr-border-strong); }
.learn .bt-state[data-state="still"]::before { background: var(--swr-text3); }
.learn .bt-state[data-state="moving"] { color: var(--swr-warning); }
.learn .bt-state[data-state="moving"]::before { background: var(--swr-warning); animation: bt-pulse 1.6s ease-out infinite; }
.learn .bt-state[data-state="moved"] { color: var(--swr-btc-ink); }
.learn .bt-state[data-state="moved"]::before { background: var(--swr-btc); }
.learn .bt-state[data-state="unavailable"]::before { background: none; border: 1px dashed var(--swr-text3); }

/* How the wallet was taken over: three steps */
.learn .bt-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; max-width: 1000px; margin: 28px 0 0; padding: 0; list-style: none; counter-reset: none; }
.learn .bt-steps li { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 22px; border: 1px solid var(--swr-border); border-radius: 14px; background: var(--swr-surface); font-size: 16px; line-height: 1.45; }
.learn .bt-steps li > span:last-child { color: var(--swr-text2); }
.learn .bt-steps li strong { font-weight: 600; color: var(--swr-text); }
.learn .bt-text code { font-family: var(--swr-mono); font-size: .86em; color: var(--swr-text); }
.learn .bt-steps li + li::before { content: "→"; position: absolute; left: -27px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--swr-text3); }
.learn .bt-step-n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--bt-eth) 16%, transparent); color: var(--bt-eth); font-family: var(--swr-mono); font-size: 14px; font-weight: 700; }

/* Ethereum flow: three sources, the receiving address, three outcomes */
.learn .bt-ethflow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, .8fr) auto minmax(0, 1fr); align-items: center; gap: 12px; margin: 24px 0 32px; }
.learn .bt-col { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.learn .bt-node-hub { border-top-width: 3px; background: color-mix(in srgb, var(--bt-eth) 7%, var(--swr-surface)); }
.learn .bt-node-frozen { border-style: dashed; border-top-style: solid; }
.learn .bt-table { overflow-x: auto; }
.learn .bt-table table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.learn .bt-table th,
.learn .bt-table td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--swr-border); text-align: left; vertical-align: top; color: var(--learn-body); }
.learn .bt-table thead th { border-bottom-color: var(--swr-border-strong); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--swr-text3); }
.learn .bt-table tbody th { font-weight: 650; color: var(--swr-text); }
.learn .bt-num { font-family: var(--swr-mono); font-variant-numeric: tabular-nums slashed-zero; white-space: nowrap; color: var(--swr-text); }
.learn .bt-table a:not(.bt-addr) { color: var(--swr-btc-ink); }

/* Statements */
.learn .bt-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 24px 0 0; }
.learn .bt-quote { margin: 0; padding: 22px 24px 24px; border: 1px solid var(--swr-border); border-radius: 16px; background: var(--swr-surface); }
.learn .bt-quote figcaption { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--swr-text3); }
.learn .bt-quote blockquote { margin: 0; padding: 0 0 0 16px; border-left: 2px solid var(--swr-btc); }
.learn .bt-quote blockquote p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--swr-text); }
.learn .bt-quote-text { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--swr-text2); }
.learn .bt-quote-between { margin: 14px 0; font-size: 15px; line-height: 1.55; color: var(--swr-text2); }
.learn .bt-markets { max-width: 68ch; margin: 18px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--swr-text2); }
.learn .bt-markets strong { color: var(--swr-text); }

/* Open questions, follow it yourself, sources */
.learn .bt-unknown { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 1000px; margin: 22px 0 0; padding: 0; list-style: none; }
.learn .bt-unknown li { display: flex; gap: 12px; padding: 16px 18px; border: 1px dashed var(--swr-border-strong); border-radius: 12px; font-size: 16px; line-height: 1.5; color: var(--swr-text); }
.learn .bt-unknown li::before { content: "?"; flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--swr-border-strong); font-family: var(--swr-mono); font-size: 13px; font-weight: 700; color: var(--swr-text3); }
.learn .bt-follow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 22px 0 0; }
.learn .bt-follow-card { padding: 20px 22px; border: 1px solid var(--swr-border); border-top: 3px solid var(--bt-c); border-radius: 14px; background: var(--swr-surface); }
.learn .bt-follow-k { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--swr-text2); }
.learn .bt-follow ul { margin: 0; padding: 0; list-style: none; }
.learn .bt-follow li { padding: 8px 0; border-top: 1px solid var(--swr-border); font-size: 15.5px; }
.learn .bt-follow li:first-child { border-top: 0; }
.learn .bt-follow a { color: var(--swr-text); font-weight: 550; }
.learn .bt-follow a:hover { color: var(--swr-btc-ink); }
.learn .bt-sources ol { max-width: 80ch; margin: 16px 0 0; padding-left: 1.3em; font-size: 14.5px; line-height: 1.6; color: var(--swr-text2); }
.learn .bt-sources li { margin: 6px 0; }
.learn .bt-sources li::marker { color: var(--swr-text3); }
.learn .bt-sources a:not(.bt-addr) { color: var(--swr-btc-ink); text-decoration: underline; text-decoration-color: var(--learn-warm-high); text-underline-offset: 3px; }
.learn .bt-disclaimer { max-width: 80ch; margin: 28px 0 0; padding-top: 16px; border-top: 1px solid var(--swr-border); font-size: 14px; line-height: 1.6; color: var(--swr-text3); }

/* Where the story is linked from: a slim strip above the doors, a line on the famous page */
.learn .learn-following { display: flex; align-items: center; gap: 10px 16px; margin: 0 0 18px; padding: 13px 18px; border: 1px solid var(--learn-warm-high); border-radius: 14px; background: var(--learn-warm-low); color: var(--swr-text); transition: border-color .15s; }
.learn .learn-following:hover { border-color: var(--swr-btc); }
.learn .learn-following-k { display: inline-flex; align-items: center; gap: 9px; flex: none; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--swr-btc-ink); }
.learn .learn-following-t { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 600; }
.learn .learn-following svg { flex: none; color: var(--swr-btc-ink); }
.learn .learn-fa-following { display: flex; align-items: baseline; gap: 10px; max-width: 46em; margin: 14px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--swr-text2); }
.learn .learn-fa-following .bt-dot { position: relative; top: -1px; }
.learn .learn-fa-following a { color: var(--swr-btc-ink); font-weight: 600; }

@media (max-width: 900px) {
  .learn .bt-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learn .bt-proof-item { box-shadow: 1px 0 0 var(--swr-border), 0 1px 0 var(--swr-border); }
  .learn .bt-btcflow,
  .learn .bt-ethflow { display: flex; flex-direction: column; align-items: stretch; }
  .learn .bt-btcflow .bt-arrow,
  .learn .bt-ethflow .bt-arrow { transform: rotate(90deg); }
  .learn .bt-steps { grid-template-columns: 1fr; gap: 26px; }
  .learn .bt-steps li + li::before { content: "↓"; left: 50%; top: -24px; transform: translateX(-50%); }
  .learn .bt-quotes,
  .learn .bt-unknown,
  .learn .bt-follow { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .learn .bt { padding-top: 28px; }
  .learn .bt-section { margin-top: 60px; }
  .learn .bt-proof-item { padding: 16px 16px 18px; }
  .learn .bt-timeline::before { left: 5px; }
  .learn .bt-event { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; padding-left: 28px; }
  .learn .bt-event::before { left: 0; top: 4px; }
  .learn .bt-when { grid-row: 1; text-align: left; }
  .learn .bt-chain { align-self: center; }
  .learn .bt-event p { grid-column: 1 / -1; }
  .learn .bt-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .learn .bt-tile { padding: 12px 12px 16px; }
  .learn .bt-tile-btc { font-size: 17px; }
  .learn .bt-table table { min-width: 0; }
  .learn .bt-table thead { display: none; }
  .learn .bt-table tr { display: grid; grid-template-columns: 4.2em minmax(0, 1fr); gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid var(--swr-border); }
  .learn .bt-table tbody th { grid-row: 1 / span 3; }
  .learn .bt-table th,
  .learn .bt-table td { grid-column: auto; padding: 0; border: 0; }
  .learn .bt-table td { grid-column: 2; }
  .learn .learn-following { flex-wrap: wrap; }
  .learn .learn-following-t { flex-basis: 100%; order: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .learn .bt-dot,
  .learn .bt-state::before { animation: none; }
  .learn .bt-tile { transition: none; }
}