:root {
  /* Education intentionally reuses the established PENGER palette. */
  --edu-ink: var(--text-accent);
  --edu-paper: var(--bg-main);
  --edu-red: #c9362b;
  --edu-blue: #1d4ed8;
  --edu-green: #16733f;
  --edu-line: var(--border-default);
}

.page-education main { background: var(--edu-paper); color: var(--edu-ink); }

/* Education hub: one viewport, four direct choices. */
.edu-lab-main { min-height: 0; }
.edu-lab {
  min-height: calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px));
  padding: clamp(16px, 2vw, 28px);
  border-bottom: 1px solid var(--edu-ink);
  background: var(--edu-paper);
}
.edu-lab-shell {
  width: 100%;
  min-height: calc(100svh - 66px - clamp(32px, 4vw, 56px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(18px, 2.6vw, 34px);
}
.edu-lab-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 520px);
  align-items: end;
  gap: clamp(24px, 5vw, 80px);
  padding-bottom: clamp(14px, 1.8vw, 24px);
  border-bottom: 1px solid var(--edu-ink);
}
.edu-lab-heading h1 {
  margin: 6px 0 0;
  font-size: clamp(34px, 4.4vw, 68px);
  line-height: .9;
  letter-spacing: -.055em;
}
.edu-lab-heading > p {
  max-width: 520px;
  margin: 0;
  color: rgba(16,16,16,.64);
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.45;
}
.edu-lab-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(210px, 1fr));
  gap: clamp(8px, 1.1vw, 14px);
}
.edu-lab-card {
  min-width: 0;
  min-height: 0;
  padding: clamp(18px, 2vw, 30px);
  border: 1px solid var(--edu-ink);
  border-radius: clamp(16px, 1.7vw, 24px);
  background: var(--edu-paper);
  color: var(--edu-ink);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.edu-lab-card:nth-child(1),
.edu-lab-card:nth-child(4) { background: var(--edu-ink); color: #fff; }
.edu-lab-card:hover,
.edu-lab-card:focus-visible { background: var(--edu-ink); color: #fff; outline: none; }
.edu-lab-card:nth-child(1):hover,
.edu-lab-card:nth-child(1):focus-visible,
.edu-lab-card:nth-child(4):hover,
.edu-lab-card:nth-child(4):focus-visible { background: #fff; color: var(--edu-ink); }
.edu-lab-card:focus-visible { box-shadow: inset 0 0 0 3px currentColor; }
.edu-lab-card-top { display: flex; align-items: flex-start; justify-content: space-between; }
.edu-lab-index { font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.edu-lab-arrow { font-size: clamp(22px, 2vw, 30px); line-height: 1; }
.edu-lab-card-copy { display: grid; gap: 10px; align-self: stretch; }
.edu-lab-card-copy strong {
  max-width: 760px;
  font-size: clamp(25px, 3.25vw, 52px);
  line-height: .94;
  letter-spacing: -.05em;
}
.edu-lab-card-copy > span {
  max-width: 620px;
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.45;
  opacity: .66;
}

@media (max-width: 620px) {
  .edu-lab {
    height: calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px));
    min-height: 0;
    padding: 10px;
  }
  .edu-lab-shell {
    min-height: 0;
    height: 100%;
    gap: 10px;
  }
  .edu-lab-heading {
    grid-template-columns: minmax(0, 1fr) minmax(120px, .85fr);
    gap: 12px;
    padding: 2px 2px 10px;
  }
  .edu-lab-heading .label { font-size: 8px; }
  .edu-lab-heading h1 { margin-top: 4px; font-size: clamp(28px, 10vw, 42px); }
  .edu-lab-heading > p {
    font-size: 10px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .edu-lab-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .edu-lab-card {
    padding: 14px;
    border-radius: 14px;
    gap: 12px;
  }
  .edu-lab-index { font-size: 9px; }
  .edu-lab-arrow { font-size: 20px; }
  .edu-lab-card-copy { gap: 7px; }
  .edu-lab-card-copy strong { font-size: clamp(18px, 6vw, 25px); }
  .edu-lab-card-copy > span {
    font-size: clamp(9px, 2.7vw, 11px);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (max-width: 350px), (max-height: 620px) {
  .edu-lab-heading > p { -webkit-line-clamp: 2; }
  .edu-lab-card { padding: 11px; }
  .edu-lab-card-copy strong { font-size: clamp(16px, 5.6vw, 20px); }
  .edu-lab-card-copy > span { -webkit-line-clamp: 3; }
}
.edu-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--edu-ink); }
.edu-hero::after {
  content: ""; position: absolute; width: min(42vw, 620px); aspect-ratio: 1;
  right: -14%; bottom: -52%; border: clamp(36px, 5vw, 74px) solid var(--edu-red);
  border-radius: 50%; opacity: .85; pointer-events: none;
}
.edu-hero-grid { min-height: min(740px, calc(100svh - 70px)); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); align-items: center; gap: clamp(40px, 8vw, 120px); padding-block: clamp(72px, 10vw, 148px); position: relative; z-index: 1; }
.edu-hero-copy h1 { font-size: clamp(44px, 7.3vw, 108px); line-height: .9; letter-spacing: -.065em; max-width: 970px; margin: 18px 0 28px; text-wrap: balance; }
.edu-hero-intro { max-width: 690px; font-size: clamp(17px, 1.65vw, 23px); line-height: 1.5; color: rgba(16,16,16,.72); }
.edu-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.edu-primary-action, .edu-secondary-action { min-height: 48px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--edu-ink); border-radius: 999px; font: 700 13px/1 var(--font-sans); letter-spacing: .02em; text-decoration: none; cursor: pointer; transition: background-color .16s ease, color .16s ease, border-color .16s ease; }
.edu-primary-action { background: var(--edu-ink); color: #fff; }
.edu-secondary-action { background: transparent; color: var(--edu-ink); }
.edu-primary-action:hover, .edu-primary-action:focus-visible { background: var(--edu-red); border-color: var(--edu-red); }
.edu-secondary-action:hover, .edu-secondary-action:focus-visible { background: #fff; }
.edu-privacy { margin-top: 20px; max-width: 620px; color: rgba(16,16,16,.56); font-size: 12px; line-height: 1.5; }

.edu-progress-card { background: var(--edu-ink); color: #fff; padding: clamp(24px, 3vw, 42px); border-radius: 28px; box-shadow: 18px 18px 0 var(--edu-blue); }
.edu-progress-orbit { width: min(100%, 260px); aspect-ratio: 1; border: 2px solid rgba(255,255,255,.22); border-radius: 50%; margin: 0 auto 30px; display: grid; place-items: center; position: relative; }
.edu-progress-orbit::before, .edu-progress-orbit::after { content:""; position:absolute; border-radius:50%; }
.edu-progress-orbit::before { inset: 12%; border: 14px solid var(--edu-red); border-right-color: rgba(255,255,255,.1); transform: rotate(-35deg); }
.edu-progress-orbit::after { width: 16px; aspect-ratio:1; background:#fff; top:7%; left:47%; box-shadow: 0 0 0 8px rgba(255,255,255,.12); }
.edu-progress-number { font-size: clamp(42px, 5vw, 70px); font-weight: 800; letter-spacing: -.06em; position: relative; z-index: 1; }
.edu-progress-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.edu-progress-stats div { display:flex; flex-direction:column; gap:4px; border-top:1px solid rgba(255,255,255,.2); padding-top:14px; }
.edu-progress-stats strong { font-size: 24px; }
.edu-progress-stats span { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.58); }
.edu-progress-summary { margin: 0; text-align: center; color: rgba(255,255,255,.72); line-height: 1.55; }
.edu-reset { width:100%; margin-top:24px; background:transparent; border:1px solid rgba(255,255,255,.25); border-radius:999px; color:rgba(255,255,255,.72); min-height:42px; cursor:pointer; }
.edu-reset:hover, .edu-reset:focus-visible { border-color:#fff; color:#fff; }

.edu-path, .edu-tools { padding: clamp(72px, 9vw, 132px) 0; border-bottom:1px solid var(--edu-ink); }
.edu-section-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.55fr); gap:40px; align-items:end; margin-bottom: clamp(44px,7vw,86px); }
.edu-section-heading h2 { font-size:clamp(34px,5vw,72px); letter-spacing:-.055em; line-height:.95; margin:12px 0 0; }
.edu-section-heading > p { color:rgba(16,16,16,.64); font-size:16px; line-height:1.55; margin:0; }
.edu-track { display:grid; grid-template-columns:180px minmax(0,1fr); gap:clamp(24px,5vw,80px); padding-top:24px; border-top:1px solid var(--edu-ink); }
.edu-track + .edu-track { margin-top:72px; }
.edu-track-label { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; display:flex; align-items:center; gap:10px; height:32px; }
.edu-track-label span { width:10px; aspect-ratio:1; border-radius:50%; background:var(--edu-red); }
.edu-track[data-track="security"] .edu-track-label span { background:var(--edu-blue); }
.edu-track[data-track="strategy"] .edu-track-label span { background:var(--edu-green); }
.edu-mission-list { list-style:none; padding:0; margin:0; }
.edu-mission { position:relative; }
.edu-mission:not(:last-child)::after { content:""; position:absolute; left:25px; top:59px; bottom:-17px; width:1px; background:var(--edu-line); }
.edu-mission a { display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:20px; align-items:center; color:inherit; text-decoration:none; padding:16px; margin:0 -16px 18px; border:1px solid transparent; border-radius:18px; transition:background-color .16s ease,border-color .16s ease; }
.edu-mission a:hover, .edu-mission a:focus-visible { background:rgba(255,255,255,.72); border-color:var(--edu-line); }
.edu-mission-index { width:52px; aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:#fff; border:1px solid var(--edu-ink); font-weight:800; position:relative; z-index:1; }
.edu-mission.is-complete .edu-mission-index { background:var(--edu-green); border-color:var(--edu-green); color:#fff; }
.edu-mission.is-next .edu-mission-index { background:var(--edu-red); border-color:var(--edu-red); color:#fff; box-shadow:0 0 0 7px rgba(239,75,63,.15); }
.edu-mission-copy { display:flex; flex-direction:column; gap:5px; }
.edu-mission-copy strong { font-size:clamp(18px,2vw,25px); letter-spacing:-.025em; }
.edu-mission-copy > span:last-child { color:rgba(16,16,16,.58); line-height:1.45; }
.edu-mission-state { color:var(--edu-red); text-transform:uppercase; font-size:9px; font-weight:800; letter-spacing:.1em; }
.edu-mission.is-complete .edu-mission-state { color:var(--edu-green); }
.edu-mission-meta { white-space:nowrap; color:rgba(16,16,16,.55); font-size:12px; }
.edu-mission-meta i { margin-left:16px; font-style:normal; color:var(--edu-ink); font-size:20px; }

.edu-tools { background:#fff; }
.edu-tool-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.edu-tool-card { min-height:240px; padding:28px; border:1px solid var(--edu-ink); border-radius:22px; color:var(--edu-ink); text-decoration:none; display:grid; grid-template-columns:1fr auto; grid-template-rows:auto 1fr auto; gap:16px; background:var(--edu-paper); transition:background-color .16s ease,color .16s ease; }
.edu-tool-card:hover, .edu-tool-card:focus-visible { background:var(--edu-ink); color:#fff; }
.edu-tool-mark { font-size:12px; font-weight:800; }
.edu-tool-card strong { grid-column:1/-1; align-self:end; font-size:clamp(24px,3vw,42px); letter-spacing:-.045em; }
.edu-tool-card > span:nth-of-type(2) { max-width:520px; line-height:1.5; opacity:.65; }
.edu-tool-card i { font-style:normal; font-size:26px; align-self:end; }

@media (max-width: 860px) {
  .edu-hero-grid { grid-template-columns:1fr; min-height:auto; }
  .edu-progress-card { max-width:540px; box-shadow:10px 10px 0 var(--edu-blue); }
  .edu-progress-orbit { width:190px; }
  .edu-section-heading { grid-template-columns:1fr; gap:20px; }
  .edu-track { grid-template-columns:1fr; gap:18px; }
}
@media (max-width: 620px) {
  .edu-hero-grid { padding-block:58px 74px; }
  .edu-hero-copy h1 { font-size:clamp(42px,14vw,68px); }
  .edu-progress-stats strong { font-size:20px; }
  .edu-tool-grid { grid-template-columns:1fr; }
  .edu-tool-card { min-height:190px; }
  .edu-mission a { grid-template-columns:44px minmax(0,1fr); gap:14px; }
  .edu-mission-index { width:44px; }
  .edu-mission:not(:last-child)::after { left:21px; }
  .edu-mission-meta { grid-column:2; }
}

@media (prefers-reduced-motion: reduce) {
  .edu-primary-action, .edu-secondary-action, .edu-mission a, .edu-tool-card { transition:none; }
}

/* Guide entry: article hero first, then large level choices. */
.guide-level-main { background: var(--edu-paper); color: var(--edu-ink); }
.guide-level-hero { padding: clamp(16px, 2vw, 28px); }
.guide-level-banner { width: 100%; height: auto; max-height: 190px; object-fit: contain; border-radius: clamp(12px, 1.3vw, 18px); display: block; }
.guide-level-copy { padding: 0; }
.guide-level-back { display: inline-flex; margin-bottom: 12px; color: inherit; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.guide-level-back:hover, .guide-level-back:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.guide-level-copy h1 { max-width: 900px; margin: 6px 0 12px; font-size: clamp(36px, 4.2vw, 64px); line-height: .92; letter-spacing: -.06em; }
.guide-level-copy > p:last-child { max-width: 720px; margin: 0; color: rgba(16,16,16,.64); font-size: clamp(14px, 1.1vw, 17px); line-height: 1.45; }
.guide-level-picker { padding: 8px clamp(16px, 2vw, 28px) clamp(28px, 4vw, 54px); }
.guide-level-picker-heading { display: grid; grid-template-columns: minmax(0, .35fr) minmax(280px, 1fr); gap: 24px; align-items: end; margin-bottom: 16px; }
.guide-level-picker-heading h2 { max-width: 780px; margin: 0; font-size: clamp(30px, 3.5vw, 50px); line-height: .94; letter-spacing: -.05em; }
.guide-level-grid { display: grid; grid-template-columns: repeat(var(--guide-level-count, 3), minmax(0, 1fr)); gap: clamp(8px, 1.1vw, 14px); }
.guide-level-grid:has(.guide-level-card:nth-child(2):last-child) { --guide-level-count: 2; }
.guide-level-card { min-height: clamp(220px, 22vw, 320px); }
.guide-level-practice { margin-top: 18px; padding-top: 14px; border-top: 1px solid currentColor; display: flex; flex-direction: column; gap: 4px; font-weight: 700; }
.guide-level-practice small { opacity: .6; font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.guide-level-card:nth-child(1), .guide-level-card:nth-child(4) { background: var(--edu-ink); color: #fff; }
.guide-level-card:nth-child(1):hover, .guide-level-card:nth-child(1):focus-visible { background: #fff; color: var(--edu-ink); }

/* Article pages no longer repeat the hero/selector or show pre-article labs. */
.guide-layout .guide-toc { display: none; }
.guide-layout[data-guide-level] .section-intro { display: none; }
.guide-layout[data-guide-level] .guide-content { display: none; }
.guide-layout[data-guide-level="beginner"] #guide-beginner,
.guide-layout[data-guide-level="intermediate"] #guide-intermediate,
.guide-layout[data-guide-level="advanced"] #guide-advanced { display: block; }

@media (min-width: 721px) {
  .guide-level-hero { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(28px, 4vw, 64px); }
}

@media (max-width: 720px) {
  .guide-level-hero { display: block; padding: 12px; }
  .guide-level-banner { max-height: none; }
  .guide-level-copy { padding: 24px 4px 16px; }
  .guide-level-copy h1 { font-size: clamp(38px, 12vw, 60px); }
  .guide-level-picker { padding: 24px 12px 36px; }
  .guide-level-picker-heading { grid-template-columns: 1fr; gap: 12px; }
  .guide-level-grid { grid-template-columns: 1fr; }
  .guide-level-card { min-height: 220px; }
}

/* Individual guide compositions */
.guide-layout .guide-experience { padding: clamp(50px, 7vw, 92px) 0; border-bottom: 1px solid var(--border-default); background: var(--edu-paper); color: var(--edu-ink); }
.guide-layout .guide-experience .container { max-width: 1120px; }
.guide-exp-kicker { font-size: 10px; font-weight: 800; letter-spacing: .14em; color: var(--edu-red); margin: 0 0 12px; }
.guide-experience h2 { font-size: clamp(30px, 5vw, 64px); line-height: .98; letter-spacing: -.05em; max-width: 880px; margin: 0 0 18px; }
.guide-experience > .container > p:not(.guide-exp-kicker):not(.guide-exp-result):not(.guide-exp-note) { max-width: 720px; color: rgba(16,16,16,.64); font-size: 17px; line-height: 1.55; }
.guide-exp-result { margin: 22px 0 0; padding: 18px 20px; border-left: 3px solid var(--edu-red); background: rgba(255,255,255,.68); line-height: 1.5; }
.guide-exp-note { font-size: 12px; color: rgba(16,16,16,.56); }
.guide-complete { margin-top: 26px; min-height: 46px; border: 1px solid var(--edu-ink); border-radius: 999px; background: var(--edu-ink); color: #fff; padding: 0 20px; font-weight: 700; cursor: pointer; transition: background-color .16s ease, border-color .16s ease; }
.guide-complete:hover, .guide-complete:focus-visible { background: var(--edu-red); border-color: var(--edu-red); }
.guide-complete.is-complete { background: var(--edu-green); border-color: var(--edu-green); }

.bitstream-lab { display:grid; grid-template-columns:minmax(240px,1fr) auto minmax(300px,1.2fr); gap:24px; align-items:end; margin-top:34px; padding:26px; border:1px solid var(--edu-ink); border-radius:22px; background:#fff; }
.bitstream-lab label { display:grid; gap:12px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.bitstream-lab output { font-size:clamp(34px,5vw,64px); font-weight:800; letter-spacing:-.06em; }
.bitstream-readout { display:flex; align-items:flex-end; gap:12px; }
.bitstream-readout > span { display:grid; gap:3px; }
.bitstream-readout small { color:var(--text-dim); font-family:var(--font-mono); font-size:8px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.bitstream-readout b { padding-bottom:10px; color:var(--text-dim); font-family:var(--font-mono); font-size:12px; white-space:nowrap; }
.bitstream-cells { display:grid; grid-template-columns:repeat(11,1fr); gap:5px; }
.bitstream-cells span { aspect-ratio:1; border-radius:50%; border:1px solid var(--edu-ink); display:grid; place-items:center; font-size:10px; }
.bitstream-cells span.is-on { background:var(--edu-red); color:#fff; border-color:var(--edu-red); }

.wallet-layer-map { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:34px; }
.wallet-layer-map button { min-height:150px; padding:18px; border:1px solid var(--edu-ink); background:#fff; border-radius:18px; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; cursor:pointer; }
.wallet-layer-map button[aria-pressed="true"] { background:var(--edu-blue); color:#fff; }
.wallet-layer-map span { font-size:10px; font-weight:800; }.wallet-layer-map strong { font-size:20px; }

.sovereignty-roadmap { list-style:none; padding:0; margin:34px 0 0; display:grid; grid-template-columns:repeat(4,1fr); }
.sovereignty-roadmap li { position:relative; }.sovereignty-roadmap li:not(:last-child)::after { content:""; position:absolute; top:27px; left:54px; right:0; height:1px; background:var(--edu-ink); }
.sovereignty-roadmap button { width:100%; border:0; background:none; display:grid; grid-template-columns:54px 1fr; text-align:left; gap:12px; cursor:pointer; position:relative; z-index:1; }
.sovereignty-roadmap button > span { width:54px; aspect-ratio:1; border:1px solid var(--edu-ink); background:var(--edu-paper); border-radius:50%; display:grid; place-items:center; font-weight:800; }
.sovereignty-roadmap button.is-done > span { background:var(--edu-green); border-color:var(--edu-green); color:#fff; }.sovereignty-roadmap button strong { padding-top:10px; }.sovereignty-roadmap button i { grid-column:2; font-style:normal; }

.decision-switch { display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }.decision-switch button { border:1px solid var(--edu-ink); border-radius:999px; background:transparent; min-height:44px; padding:0 18px; cursor:pointer; }.decision-switch button[aria-pressed="true"] { background:var(--edu-ink); color:#fff; }
.decision-result { display:flex; flex-direction:column; gap:6px; }.decision-result strong { font-size:24px; }

.threat-board { display:grid; gap:10px; margin-top:30px; }.threat-board button { display:grid; grid-template-columns:minmax(120px,.4fr) auto minmax(240px,1fr); gap:20px; align-items:center; width:100%; min-height:76px; padding:16px 20px; border:1px solid var(--edu-ink); border-radius:16px; background:#fff; text-align:left; cursor:pointer; }.threat-board button.is-active { background:var(--edu-ink); color:#fff; }.threat-board i { font-style:normal; font-size:24px; }

.passphrase-branches { display:grid; grid-template-columns:180px 1fr; gap:60px; align-items:center; margin-top:34px; }.passphrase-branches > div:first-child { aspect-ratio:1; border-radius:50%; background:var(--edu-red); color:#fff; display:grid; place-items:center; font-weight:800; font-size:24px; }.passphrase-branches > div:last-child { display:grid; gap:12px; position:relative; }.passphrase-branches > div:last-child::before { content:""; position:absolute; left:-60px; top:50%; width:60px; height:1px; background:var(--edu-ink); }.passphrase-branches button { min-height:82px; padding:16px 20px; border:1px solid var(--edu-ink); background:#fff; border-radius:16px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; }.passphrase-branches button[aria-pressed="true"] { background:var(--edu-blue); color:#fff; }

.quorum-builder { display:grid; grid-template-columns:1fr 1fr auto; gap:22px; align-items:end; margin-top:32px; padding:24px; background:#fff; border:1px solid var(--edu-ink); border-radius:20px; }.quorum-builder label { display:grid; gap:10px; font-weight:800; }.quorum-builder output { min-width:150px; font-size:44px; font-weight:800; letter-spacing:-.05em; }
.hodl-timeline { display:grid; grid-template-columns:repeat(4,1fr); margin-top:34px; border-top:1px solid var(--edu-ink); }.hodl-timeline div { padding:22px 18px; border-right:1px solid var(--edu-ink); min-height:130px; display:flex; flex-direction:column; justify-content:space-between; }.hodl-timeline strong { font-size:24px; }.hodl-timeline span { color:rgba(16,16,16,.58); }
.audit-score { display:grid; grid-template-columns:180px 1fr; gap:30px; margin-top:34px; align-items:start; }.audit-score output { aspect-ratio:1; border-radius:50%; background:var(--edu-ink); color:#fff; display:grid; place-items:center; font-size:38px; font-weight:800; }.audit-score > div { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }.audit-score label { min-height:54px; border:1px solid var(--edu-ink); border-radius:12px; display:flex; align-items:center; gap:12px; padding:0 14px; background:#fff; }.audit-score input { width:20px; height:20px; }
.boundary-map { display:grid; grid-template-columns:1fr minmax(210px,.7fr) 1fr; gap:18px; align-items:stretch; margin-top:34px; }.boundary-map > div { min-height:180px; border:1px solid var(--edu-ink); border-radius:18px; padding:20px; display:flex; flex-direction:column; justify-content:space-between; }.boundary-map > div:not(.boundary-core) { background:#fff; }.boundary-map button { border:0; background:none; text-align:left; padding:0; cursor:pointer; font-weight:800; }.boundary-map button.is-active { color:var(--edu-red); }.boundary-core { background:var(--edu-ink); color:#fff; justify-content:center!important; text-align:center; }.boundary-core strong { font-size:24px; }.boundary-core small { color:rgba(255,255,255,.6); margin-top:8px; }

/* Preserve semantics while making dense tables usable on small screens. */
.guide-layout .section-block table { width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--border-default); border-radius:14px; overflow:hidden; }
.guide-layout .section-block th { position:sticky; top:0; background:var(--bg-surface); text-align:left; }.guide-layout .section-block th,.guide-layout .section-block td { padding:14px 16px; vertical-align:top; }

@media (max-width:760px) {
  .bitstream-lab,.quorum-builder,.audit-score,.boundary-map { grid-template-columns:1fr; }
  .wallet-layer-map,.hodl-timeline { grid-template-columns:repeat(2,1fr); }
  .sovereignty-roadmap { grid-template-columns:1fr; gap:16px; }.sovereignty-roadmap li:not(:last-child)::after { left:27px; top:54px; bottom:-16px; width:1px; height:auto; right:auto; }
  .passphrase-branches { grid-template-columns:90px 1fr; gap:30px; }.passphrase-branches > div:last-child::before { left:-30px; width:30px; }
  .threat-board button { grid-template-columns:1fr auto; }.threat-board button strong { grid-column:1/-1; }
  .audit-score output { width:150px; }.audit-score > div { grid-template-columns:1fr; }
}

/* Article reader shell: keep title, level and context visible on every level URL. */
.guide-reader-header {
  padding: clamp(30px, 5vw, 64px) 0 clamp(28px, 4vw, 52px);
  border-bottom: 1px solid var(--border-default);
  background:
    radial-gradient(circle at 92% 15%, rgba(16,16,16,.055) 0 72px, transparent 73px),
    var(--bg-surface);
}
.guide-reader-header .container { max-width: 1040px; }
.guide-reader-breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-bottom: clamp(24px, 4vw, 42px);
  font-family: var(--font-mono); font-size: 10px; line-height: 1.4;
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim);
}
.guide-reader-breadcrumb a { color: inherit; text-decoration: none; }
.guide-reader-breadcrumb a:hover,
.guide-reader-breadcrumb a:focus-visible { color: var(--text-accent); text-decoration: underline; text-underline-offset: 4px; }
.guide-reader-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 6vw, 80px); align-items: end; }
.guide-reader-copy { min-width: 0; }
.guide-reader-kicker { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 14px; color: var(--text-dim); font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.guide-reader-kicker span + span::before { content: "·"; margin-right: 18px; color: var(--border-active); }
.guide-reader-header h1 { max-width: 840px; margin: 0; color: var(--text-accent); font-size: clamp(36px, 5.6vw, 70px); line-height: .96; letter-spacing: -.055em; text-wrap: balance; }
.guide-reader-lede { max-width: 68ch; margin: 18px 0 0; color: var(--text-primary); font-size: clamp(14px, 1.25vw, 17px); line-height: 1.65; }
.guide-reader-levels { min-width: 180px; }
.guide-reader-levels__label { display: block; margin-bottom: 9px; color: var(--text-dim); font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.guide-reader-levels > div { display: grid; gap: 6px; }
.guide-reader-levels a { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 12px; border: 1px solid var(--border-default); border-radius: 6px; background: var(--bg-main); color: var(--text-label); font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; }
.guide-reader-levels a::after { content: "↗"; color: var(--text-dim); }
.guide-reader-levels a:hover,
.guide-reader-levels a:focus-visible { border-color: var(--text-accent); color: var(--text-accent); outline: none; }
.guide-reader-levels a[aria-current="page"] { background: var(--text-accent); border-color: var(--text-accent); color: #fff; }
.guide-reader-levels a[aria-current="page"]::after { content: "●"; color: #fff; font-size: 7px; }

/* Readable article measure and hierarchy. */
.guide-layout[data-guide-level] .guide-content > .section-block > .container { max-width: 980px; }
.guide-layout[data-guide-level] .guide-content > .section-block { padding-block: clamp(38px, 5.5vw, 66px); }
.guide-layout[data-guide-level] .guide-content > .section-block + .section-block { border-top: 1px solid var(--border-default); }
.guide-layout[data-guide-level] .guide-content h2 { max-width: 28ch; margin-bottom: 22px; font-size: clamp(25px, 3.2vw, 39px); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.guide-layout[data-guide-level] .guide-text { font-size: clamp(14px, 1.15vw, 16px); line-height: 1.82; }
.guide-layout[data-guide-level] .guide-text > p,
.guide-layout[data-guide-level] .guide-text > ul,
.guide-layout[data-guide-level] .guide-text > ol,
.guide-layout[data-guide-level] .guide-text > blockquote { max-width: 78ch; }
.guide-layout[data-guide-level] .guide-text h3 { max-width: 52ch; margin-top: 36px; font-size: clamp(16px, 1.6vw, 20px); line-height: 1.35; }

/* Editorial notes stay in the reading flow instead of competing with it. */
.guide-layout .callout {
  --guide-callout-mark: "i";
  --guide-callout-rule: var(--border-default);
  --guide-callout-label: var(--text-dim);
  position: relative;
  max-width: 78ch;
  margin: clamp(28px, 4vw, 40px) 0;
  padding: 1px 0 1px clamp(17px, 2.4vw, 24px);
  border: 0;
  border-left: 1px solid var(--guide-callout-rule);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text-primary);
}
.guide-layout .callout-info { --guide-callout-mark: "i"; }
.guide-layout .callout-tip { --guide-callout-mark: "+"; }
.guide-layout .callout-warning {
  --guide-callout-mark: "!";
  --guide-callout-rule: color-mix(in srgb, var(--error-text) 42%, var(--border-default));
  --guide-callout-label: var(--text-label);
}
.guide-layout .callout-label {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin: 0 0 7px;
  color: var(--guide-callout-label) !important;
  font-family: var(--font-mono);
  font-size: clamp(9px, .75vw, 10px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.guide-layout .callout-label::before {
  content: var(--guide-callout-mark);
  flex: 0 0 13px;
  width: 13px;
  border: 0;
  color: var(--text-label);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-transform: none;
}
.guide-layout .callout-label::after {
  content: "";
  flex: 1 1 auto;
  min-width: 24px;
  height: 1px;
  background: var(--guide-callout-rule);
}
.guide-layout .callout strong { color: var(--text-accent); }
.guide-layout .callout-disclosure { padding: 0; }
.guide-layout .callout-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 32px;
  padding: 0 0 0 clamp(17px, 2.4vw, 24px);
  cursor: pointer;
  list-style: none;
}
.guide-layout .callout-summary::-webkit-details-marker { display: none; }
.guide-layout .callout-summary .callout-label { flex: 1; margin: 0; }
.guide-layout .callout-summary__action {
  flex: 0 0 auto;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.guide-layout .callout-summary:hover .callout-label,
.guide-layout .callout-summary:focus-visible .callout-label { color: var(--text-accent) !important; }
.guide-layout .callout-summary:focus-visible { outline: 2px solid var(--text-accent); outline-offset: 6px; }
.guide-layout .callout-disclosure__body { padding: 9px 0 1px clamp(17px, 2.4vw, 24px); }
.guide-layout .callout-disclosure__body > :last-child { margin-bottom: 0; }
.guide-layout .guide-text blockquote { position: relative; margin: 30px 0; padding: 22px 24px 22px 58px; border: 1px solid var(--border-default); border-left: 0; border-radius: 8px; background: var(--bg-highlight); color: var(--text-label); font-size: clamp(14px, 1.25vw, 16px); line-height: 1.75; }
.guide-layout .guide-text blockquote::before { content: "“"; position: absolute; top: 14px; left: 20px; color: var(--text-accent); font-family: Georgia, serif; font-size: 44px; line-height: 1; }

/* Tables become labelled record cards when the structure is simple; complex tables keep safe horizontal scrolling. */
.guide-layout .guide-table-wrap { position: relative; background: var(--bg-surface); box-shadow: 0 8px 28px rgba(16,16,16,.045); }
.guide-layout .guide-table-wrap:focus-visible { outline: 2px solid var(--text-accent); outline-offset: 3px; }
.guide-layout .guide-table th { position: static; background: var(--text-accent) !important; color: #fff !important; }
.guide-table-hint { display: none; margin: -10px 0 20px; color: var(--text-dim); font-family: var(--font-mono); font-size: 10px; line-height: 1.5; }

/* Mathematical notation stays inline with the surrounding explanation. */
.guide-layout .guide-math-expression { white-space: normal; overflow-wrap: anywhere; font-variant-numeric: tabular-nums lining-nums; }
.guide-layout sup { position: relative; top: -.15em; font-size: .72em; line-height: 0; }

/* Copyable code and formula blocks. */
.guide-layout .guide-code-block__label { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.guide-code-copy { min-height: 28px; padding: 4px 9px; border: 1px solid rgba(255,255,255,.42); border-radius: 4px; background: transparent; color: #fff; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
.guide-code-copy:hover,
.guide-code-copy:focus-visible,
.guide-code-copy.is-copied { background: #fff; color: var(--text-accent); outline: none; }

/* Article-specific learning labs: compact, distinct and available at every level. */
.guide-layout[data-guide-level] .guide-experience { display: block; padding: clamp(42px, 6vw, 70px) 0; border-block: 1px solid var(--border-default); background: var(--bg-highlight); }
.guide-layout[data-guide-level] .guide-experience .container { max-width: 980px; }
.guide-layout[data-guide-level] .guide-experience h2 { max-width: 760px; margin-bottom: 14px; font-size: clamp(26px, 3.7vw, 44px); line-height: 1.02; }
.guide-layout[data-guide-level] .guide-experience > .container > p:not(.guide-exp-kicker):not(.guide-exp-result):not(.guide-exp-note) { max-width: 68ch; font-size: 15px; }
.guide-layout[data-guide-level] .bitstream-lab,
.guide-layout[data-guide-level] .wallet-layer-map,
.guide-layout[data-guide-level] .sovereignty-roadmap,
.guide-layout[data-guide-level] .threat-board,
.guide-layout[data-guide-level] .passphrase-branches,
.guide-layout[data-guide-level] .quorum-builder,
.guide-layout[data-guide-level] .hodl-timeline,
.guide-layout[data-guide-level] .audit-score,
.guide-layout[data-guide-level] .boundary-map { margin-top: 24px; }
.guide-layout[data-guide-level] .guide-exp-result { border-radius: 0 7px 7px 0; background: var(--bg-surface); }
.guide-layout[data-guide-level] .guide-complete:focus-visible,
.guide-layout[data-guide-level] .guide-experience button:focus-visible,
.guide-layout[data-guide-level] .guide-experience input:focus-visible,
.guide-layout[data-guide-level] .guide-experience select:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }

@media (max-width: 760px) {
  .guide-reader-header { padding-inline: 14px; }
  .guide-reader-heading { grid-template-columns: 1fr; gap: 28px; }
  .guide-reader-levels { min-width: 0; }
  .guide-reader-levels > div { display: flex; flex-wrap: wrap; }
  .guide-reader-levels a { flex: 1 1 120px; }
  .guide-layout[data-guide-level] .guide-content > .section-block { padding-block: 34px; }
  .guide-layout[data-guide-level] .guide-content > .section-block > .container,
  .guide-layout[data-guide-level] .guide-experience .container { padding-inline: 14px; }
  .guide-layout .guide-text blockquote { padding: 20px 18px 20px 50px; }
  .guide-layout .callout { margin-block: 26px; padding-left: 16px; }
  .guide-layout .callout-disclosure { padding: 0; }
  .guide-layout .callout-summary { padding-left: 16px; }
  .guide-layout .callout-disclosure__body { padding-left: 16px; }

  .guide-table-wrap[data-table-mode="cards"] { overflow: visible; border: 0; background: transparent; box-shadow: none; }
  .guide-table-wrap[data-table-mode="cards"] .guide-table,
  .guide-table-wrap[data-table-mode="cards"] .guide-table tbody { display: block; }
  .guide-table-wrap[data-table-mode="cards"] .guide-table { width: 100%; max-width: none; border: 0; border-radius: 0; background: transparent; overflow: visible; }
  .guide-table-wrap[data-table-mode="cards"] .guide-table thead { position: absolute; width: 1px; height: 1px; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
  .guide-table-wrap[data-table-mode="cards"] .guide-table tbody { display: grid; gap: 12px; }
  .guide-table-wrap[data-table-mode="cards"] .guide-table tbody tr { display: block; width: 100%; overflow: hidden; border: 1px solid var(--border-default); border-radius: 8px; background: var(--bg-surface); box-shadow: 0 5px 18px rgba(16,16,16,.04); }
  .guide-table-wrap[data-table-mode="cards"] .guide-table tbody td { display: grid; grid-template-columns: minmax(96px, .4fr) minmax(0, 1fr); gap: 14px; width: 100%; max-width: none; min-width: 0; padding: 10px 12px; border: 0; border-top: 1px solid var(--border-default); background: transparent !important; text-align: left; overflow-wrap: anywhere; }
  .guide-table-wrap[data-table-mode="cards"] .guide-table tbody td:first-child { border-top: 0; }
  .guide-table-wrap[data-table-mode="cards"] .guide-table tbody td::before { content: attr(data-label); color: var(--text-dim); font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .05em; line-height: 1.45; text-transform: uppercase; }
  .guide-table-wrap[data-table-mode="cards"] .guide-table .mono,
  .guide-table-wrap[data-table-mode="cards"] .guide-table .num { white-space: normal; }
  .guide-table-wrap[data-table-mode="cards"] .guide-table tfoot { display: block; margin-top: 12px; }
  .guide-table-wrap[data-table-mode="scroll"] { background-image: linear-gradient(to right, transparent calc(100% - 22px), rgba(16,16,16,.07)); }
  .guide-table-hint + .guide-table-wrap[data-table-mode="scroll"] { margin-top: 8px; }
  .guide-table-hint { display: block; }

  .guide-layout[data-guide-level] .bitstream-lab { padding: 18px; }
  .guide-layout[data-guide-level] .bitstream-readout { justify-content: space-between; }
  .guide-layout[data-guide-level] .bitstream-cells { grid-template-columns: repeat(6, 1fr); }
  .guide-layout[data-guide-level] .wallet-layer-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-layout[data-guide-level] .wallet-layer-map button { min-height: 112px; }
  .guide-layout[data-guide-level] .hodl-timeline div { min-height: 106px; padding: 16px 12px; }
  .guide-layout[data-guide-level] .boundary-map > div { min-height: 130px; }
}

@media (max-width: 420px) {
  .guide-reader-kicker span + span::before { display: none; }
  .guide-reader-levels > div { display: grid; grid-template-columns: 1fr; }
  .guide-layout[data-guide-level] .wallet-layer-map,
  .guide-layout[data-guide-level] .hodl-timeline { grid-template-columns: 1fr; }
  .guide-layout[data-guide-level] .hodl-timeline div { border-right: 0; border-bottom: 1px solid var(--edu-ink); }
  .guide-table-wrap[data-table-mode="cards"] .guide-table tbody td { grid-template-columns: 1fr; gap: 4px; }
  .guide-layout .callout { margin-block: 22px; padding-left: 13px; }
  .guide-layout .callout-label { gap: 7px; }
  .guide-layout .callout-label::after { min-width: 12px; }
  .guide-layout .callout-summary { gap: 8px; padding-left: 13px; }
  .guide-layout .callout-summary__action { font-size: 8px; }
  .guide-layout .callout-disclosure__body { padding-left: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .guide-layout .guide-experience *,
  .guide-layout .callout-disclosure * { scroll-behavior: auto !important; transition: none !important; }
}

/* =========================================================
   LEVEL-SPECIFIC LEARNING MECHANICS
   Each composition mirrors the mental model of its article.
   ========================================================= */

.guide-experience select,
.guide-experience input[type="range"] { accent-color: var(--edu-blue); }
.guide-experience select { min-height: 44px; padding: 0 38px 0 12px; border: 1px solid var(--edu-ink); border-radius: 8px; background: var(--bg-surface); color: var(--edu-ink); font: 700 13px/1.2 var(--font-sans); }
.guide-experience fieldset { min-width: 0; }

/* Seed advanced: entropy is shown as an equation that resolves into word chunks. */
.guide-experience--entropy { --mechanic-accent: #6d28d9; }
.entropy-workbench { margin-top: 28px; padding: clamp(20px, 3vw, 30px); border: 1px solid var(--edu-ink); border-radius: 18px; background: var(--bg-surface); box-shadow: 10px 10px 0 color-mix(in srgb, var(--mechanic-accent) 16%, transparent); }
.entropy-workbench > label { display: flex; align-items: center; justify-content: space-between; gap: 18px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.entropy-equation { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 14px; align-items: center; margin: 26px 0; }
.entropy-equation span { min-height: 92px; padding: 16px; border: 1px solid var(--border-default); border-radius: 12px; display: grid; align-content: space-between; background: var(--bg-highlight); }
.entropy-equation small { color: var(--text-dim); font: 700 10px/1.2 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }
.entropy-equation output { font-size: clamp(20px, 3vw, 34px); font-weight: 800; letter-spacing: -.04em; }
.entropy-equation b { color: var(--mechanic-accent); font-size: 24px; }
.entropy-chunks { display: grid; grid-template-columns: repeat(12, minmax(30px, 1fr)); gap: 6px; }
.entropy-chunks span { min-height: 48px; border: 1px solid color-mix(in srgb, var(--mechanic-accent) 40%, var(--border-default)); border-radius: 7px; display: grid; place-items: center; background: color-mix(in srgb, var(--mechanic-accent) 7%, var(--bg-surface)); font: 800 12px/1 var(--font-mono); }
.entropy-chunks small { display: block; color: var(--text-dim); font-size: 8px; }

/* Wallet advanced: a path reads left-to-right like a derivation tree. */
.guide-experience--path { --mechanic-accent: #0369a1; }
.path-decoder { margin-top: 28px; padding: clamp(20px, 3vw, 30px); border: 1px solid var(--edu-ink); border-radius: 18px; background: #07141d; color: #f8fafc; }
.path-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.path-presets button { min-height: 42px; padding: 0 16px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: transparent; color: inherit; font-weight: 700; cursor: pointer; }
.path-presets button[aria-pressed="true"] { border-color: #7dd3fc; background: #7dd3fc; color: #082f49; }
.path-decoder > code { display: block; margin: 26px 0; color: #bae6fd; font-size: clamp(22px, 4vw, 42px); font-weight: 800; letter-spacing: -.04em; overflow-wrap: anywhere; }
.path-segments { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; }
.path-segments li { min-height: 104px; padding: 13px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; display: flex; flex-direction: column; gap: 7px; }
.path-segments small { color: #7dd3fc; font: 700 9px/1.3 var(--font-mono); text-transform: uppercase; }
.path-segments strong { font: 800 20px/1 var(--font-mono); }
.path-segments span { margin-top: auto; color: rgba(255,255,255,.62); font-size: 10px; }

/* Sovereignty advanced: dependencies resemble an operational control board. */
.guide-experience--dependencies { --mechanic-accent: #166534; }
.dependency-map { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; margin-top: 28px; }
.dependency-map label { min-height: 132px; padding: 14px; border: 1px solid var(--border-default); border-radius: 13px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; background: var(--bg-surface); cursor: pointer; }
.dependency-map label:has(input:checked) { border-color: var(--mechanic-accent); background: color-mix(in srgb, var(--mechanic-accent) 8%, var(--bg-surface)); }
.dependency-map input { width: 22px; height: 22px; }
.dependency-map span { font-size: 12px; font-weight: 700; line-height: 1.35; }
.dependency-meter { display: grid; grid-template-columns: 130px 1fr; gap: 18px; align-items: center; margin-top: 12px; padding: 16px; border-radius: 12px; background: #10251a; color: #fff; }
.dependency-meter output { font-size: 34px; font-weight: 800; }
.dependency-meter span { color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.5; }

/* Wallet architecture: controls sit beside an immediate recommendation. */
.guide-experience--architecture { --mechanic-accent: #b45309; }
.architecture-builder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
.architecture-builder > label { min-height: 132px; padding: 16px; border: 1px solid var(--border-default); border-radius: 13px; display: grid; gap: 13px; align-content: space-between; background: var(--bg-surface); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.architecture-builder > label > span { color: var(--mechanic-accent); font-size: 14px; text-transform: none; }
.architecture-builder .architecture-check { grid-column: 1 / -1; min-height: 58px; display: flex; align-items: center; justify-content: flex-start; }
.architecture-check input { width: 22px; height: 22px; }

/* OpSec advanced: two-column assumption/control model and explicit severity. */
.guide-experience--blast { --mechanic-accent: #b91c1c; }
.blast-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.blast-grid fieldset { padding: 18px; border: 1px solid var(--edu-ink); border-radius: 15px; background: var(--bg-surface); }
.blast-grid legend { padding: 0 8px; font: 800 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.blast-grid label { min-height: 46px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--border-default); font-size: 13px; }
.blast-grid label:last-child { border-bottom: 0; }
.blast-grid input { width: 20px; height: 20px; }
.blast-output { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; margin-top: 14px; padding: 18px; border-radius: 13px; background: #2a0d0d; color: #fff; }
.blast-output output { color: #fca5a5; font: 800 22px/1 var(--font-mono); letter-spacing: .08em; }
.blast-output p { margin: 0; color: rgba(255,255,255,.76); font-size: 13px; line-height: 1.5; }

/* Passphrase advanced: formula inputs and outputs share one compact instrument. */
.guide-experience--cracktime { --mechanic-accent: #7c3aed; }
.cracktime-calculator { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 12px; margin-top: 28px; }
.cracktime-calculator > label,
.cracktime-calculator > div { min-height: 154px; padding: 18px; border: 1px solid var(--border-default); border-radius: 14px; display: grid; gap: 12px; align-content: space-between; background: var(--bg-surface); font-size: 12px; font-weight: 800; }
.cracktime-calculator label output { color: var(--mechanic-accent); font-size: 22px; }
.cracktime-calculator > div { border-color: var(--mechanic-accent); background: color-mix(in srgb, var(--mechanic-accent) 8%, var(--bg-surface)); }
.cracktime-calculator > div small { color: var(--text-dim); font: 700 9px/1.2 var(--font-mono); text-transform: uppercase; }
.cracktime-calculator > div output { font-size: clamp(18px, 2.4vw, 28px); font-weight: 800; letter-spacing: -.03em; }

/* Multisig advanced: dependencies are arranged like a configuration table, not article prose. */
.guide-experience--domains { --mechanic-accent: #0f766e; }
.domain-lab { margin-top: 28px; border: 1px solid var(--edu-ink); border-radius: 15px; overflow: hidden; background: var(--bg-surface); }
.domain-row { display: grid; grid-template-columns: .5fr 1fr 1fr; gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--border-default); }
.domain-row:first-child { border-top: 0; }
.domain-head { background: #103632; color: #fff; font: 700 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.domain-row strong { font-size: 13px; }
.domain-output { display: grid; grid-template-columns: 210px 1fr; gap: 18px; align-items: center; margin-top: 12px; padding: 16px; border-left: 4px solid var(--mechanic-accent); background: var(--bg-surface); }
.domain-output output { font-size: 20px; font-weight: 800; }
.domain-output p { margin: 0; color: var(--text-dim); font-size: 12px; line-height: 1.5; }

/* HODL exercises deliberately resemble planning tools, not price charts. */
.guide-experience--drawdown { --mechanic-accent: #be123c; }
.drawdown-lab { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
.drawdown-lab label { min-height: 136px; padding: 17px; border: 1px solid var(--border-default); border-radius: 13px; display: grid; gap: 12px; align-content: space-between; background: var(--bg-surface); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.drawdown-lab output { color: var(--mechanic-accent); font-size: 24px; font-weight: 800; text-transform: none; }
.guide-experience--rebalance { --mechanic-accent: #1d4ed8; }
.rebalance-lab { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 12px; margin-top: 28px; }
.rebalance-lab > label,
.rebalance-lab > div { min-height: 160px; padding: 18px; border: 1px solid var(--border-default); border-radius: 14px; display: grid; align-content: space-between; gap: 12px; background: var(--bg-surface); font-size: 12px; font-weight: 800; }
.rebalance-lab label output { color: var(--mechanic-accent); font-size: 24px; }
.rebalance-lab > div { background: #0c1b42; color: #fff; }
.rebalance-lab > div small { color: #93c5fd; font: 700 9px/1 var(--font-mono); text-transform: uppercase; }
.rebalance-lab > div output { font-size: 20px; font-weight: 800; }

/* Due diligence levels progressively move from screen -> evidence -> weighted rubric. */
.guide-experience--evidence { --mechanic-accent: #0369a1; }
.evidence-ladder { display: grid; gap: 9px; margin-top: 28px; }
.evidence-ladder label { display: grid; grid-template-columns: 1fr minmax(190px, .45fr); gap: 18px; align-items: center; min-height: 62px; padding: 10px 14px; border: 1px solid var(--border-default); border-radius: 11px; background: var(--bg-surface); font-size: 13px; font-weight: 700; }
.evidence-output,
.rubric-output { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; margin-top: 12px; padding: 17px; border-radius: 12px; background: #082f49; color: #fff; }
.evidence-output output,
.rubric-output output { color: #7dd3fc; font-size: 28px; font-weight: 800; }
.evidence-output p,
.rubric-output p { margin: 0; color: rgba(255,255,255,.75); font-size: 12px; line-height: 1.5; }
.guide-experience--rubric { --mechanic-accent: #7c2d12; }
.rubric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 28px; }
.rubric-grid > label { min-height: 104px; padding: 15px; border: 1px solid var(--border-default); border-radius: 12px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; background: var(--bg-surface); font-size: 12px; font-weight: 800; }
.rubric-grid input[type="range"] { grid-column: 1 / -1; width: 100%; }
.rubric-grid .rubric-stop { grid-column: 1 / -1; min-height: 60px; display: flex; border-color: #dc2626; background: #fff7ed; }
.rubric-stop input { width: 22px; height: 22px; flex: 0 0 auto; }
.rubric-output { background: #431407; }
.rubric-output output { color: #fdba74; }

/* Hardware levels move from boundary -> attack path -> architecture trade-off. */
.guide-experience--attackpath { --mechanic-accent: #b45309; }
.attack-paths,
.signer-architectures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 28px; }
.attack-paths button,
.signer-architectures button { min-height: 54px; padding: 10px; border: 1px solid var(--edu-ink); border-radius: 10px; background: var(--bg-surface); font-weight: 800; cursor: pointer; }
.attack-paths button[aria-pressed="true"] { border-color: var(--mechanic-accent); background: var(--mechanic-accent); color: #fff; }
.attack-output { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.attack-output > div { min-height: 128px; padding: 18px; border-radius: 13px; display: grid; align-content: space-between; gap: 18px; background: var(--bg-surface); border: 1px solid var(--border-default); }
.attack-output small,
.architecture-output small { color: var(--text-dim); font: 700 9px/1 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }
.attack-output strong { font-size: 20px; line-height: 1.25; }
.attack-output span { color: var(--text-dim); font-size: 13px; line-height: 1.5; }
.guide-experience--architectures { --mechanic-accent: #334155; }
.signer-architectures button[aria-pressed="true"] { background: #0f172a; color: #fff; }
.architecture-output { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.architecture-output > div { min-height: 156px; padding: 18px; border: 1px solid var(--border-default); border-radius: 13px; display: flex; flex-direction: column; gap: 18px; background: var(--bg-surface); }
.architecture-output strong { font-size: 18px; line-height: 1.3; }
.architecture-output span { color: var(--text-dim); font-size: 12px; line-height: 1.5; }

@media (max-width: 840px) {
  .dependency-map { grid-template-columns: repeat(2, 1fr); }
  .architecture-builder,
  .drawdown-lab,
  .cracktime-calculator,
  .rebalance-lab,
  .architecture-output { grid-template-columns: 1fr; }
  .path-segments { grid-template-columns: repeat(3, 1fr); }
  .entropy-chunks { grid-template-columns: repeat(8, 1fr); }
}

@media (max-width: 620px) {
  .entropy-equation { grid-template-columns: 1fr; }
  .entropy-equation b { text-align: center; transform: rotate(90deg); }
  .entropy-chunks { grid-template-columns: repeat(4, 1fr); }
  .path-segments,
  .dependency-map,
  .blast-grid,
  .rubric-grid,
  .attack-output { grid-template-columns: 1fr; }
  .architecture-builder .architecture-check,
  .rubric-grid .rubric-stop { grid-column: auto; }
  .dependency-meter,
  .blast-output,
  .domain-output,
  .evidence-output,
  .rubric-output { grid-template-columns: 1fr; }
  .domain-row { grid-template-columns: 1fr; gap: 7px; }
  .domain-head { display: none; }
  .attack-paths,
  .signer-architectures { grid-template-columns: repeat(2, 1fr); }
  .evidence-ladder label { grid-template-columns: 1fr; gap: 8px; }
}

/* =========================================================
   EDITORIAL ARTICLE REFINEMENT
   Keep article chrome quiet and reserve interaction for tools.
   ========================================================= */

/* Reading-level cards intentionally inherit the Education card component unchanged. */
.guide-level-card { min-height: 0; }
.guide-level-practice { display: none; }

/* Article hero repeats only the title and deck from the level-selection page. */
.guide-reader-header {
  padding: clamp(42px, 7vw, 86px) 0 clamp(34px, 5vw, 66px);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-main);
}
.guide-reader-header .container { max-width: 1040px; }
.guide-reader-header h1 {
  max-width: 900px;
  font-size: clamp(38px, 6.4vw, 80px);
}
.guide-reader-lede {
  max-width: 62ch;
  margin-top: 22px;
  font-size: clamp(15px, 1.35vw, 18px);
}

/* A looser editorial rhythm: short lead paragraphs and occasional right-side extracts. */
.guide-layout[data-guide-level] .guide-content > .section-block {
  padding-block: clamp(34px, 4.6vw, 58px);
}
.guide-layout[data-guide-level] .guide-content > .section-block + .section-block { border-top: 0; }
.guide-layout[data-guide-level] .guide-content > .section-block > .container { max-width: 1040px; }
.guide-layout[data-guide-level] .guide-text { line-height: 1.76; }
.guide-layout[data-guide-level] .guide-text::after { content: ""; display: table; clear: both; }
.guide-layout[data-guide-level] .guide-text > p:first-child {
  max-width: 70ch;
  color: var(--text-label);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.68;
}
.guide-layout .guide-text ::selection { background: rgba(16,16,16,.14); color: var(--text-accent); }
.guide-layout .guide-text a { transition: none; }

@media (min-width: 900px) {
  .guide-layout .guide-text > blockquote {
    width: min(38%, 360px);
    margin: 28px 0 30px auto;
    padding: 20px 20px 20px 48px;
    border-radius: 6px;
  }
  .guide-layout .guide-text > blockquote::before { left: 16px; }
}

/* Tables size to their content; wide comparison matrices keep their own scroll region. */
.guide-layout .guide-table-wrap {
  width: fit-content;
  max-width: 100%;
  margin: 26px auto;
  overflow-x: auto;
  border-radius: 7px;
  box-shadow: none;
}
.guide-layout .section-block .guide-table {
  width: auto;
  max-width: none;
  table-layout: auto;
}
.guide-layout .guide-table th,
.guide-layout .guide-table td { max-width: 34ch; }
.guide-layout .guide-table .mono,
.guide-layout .guide-table .num { white-space: nowrap; }
.guide-layout .guide-table th {
  background: var(--bg-highlight) !important;
  color: var(--text-accent) !important;
  border-bottom: 1px solid var(--border-active);
}
.guide-layout .guide-table tbody tr:hover { background: inherit; }

/* Privacy guidance reads like an editorial note, not a competing warning panel. */
.guide-layout .callout-privacy-note {
  max-width: 78ch;
  padding: 16px 0 0;
  border: 0;
  border-top: 1px solid var(--border-active);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.guide-layout .callout-privacy-note .callout-label { margin-bottom: 8px; }
.guide-layout .callout-privacy-note .callout-label::before { display: none; }

/* Only three articles own simulators; each tool sits directly in the article flow. */
.guide-layout[data-guide-level] .guide-experience {
  padding: clamp(38px, 5vw, 62px) 0;
  border-block: 0;
  background: var(--bg-main);
}
.guide-layout[data-guide-level] .guide-experience .container { max-width: 1040px; }
.guide-exp-kicker { color: var(--text-dim); }
.guide-complete {
  min-height: 44px;
  border-radius: 6px;
  padding-inline: 16px;
}
.guide-complete:hover,
.guide-complete:focus-visible { background: var(--text-label); border-color: var(--text-label); }
.guide-exp-result { border-radius: 0; box-shadow: none; }

/* Seed index: square bit cells without a decorative tray. */
.bitstream-lab {
  grid-template-columns: minmax(220px, .8fr) minmax(260px, 1fr) minmax(340px, 1.25fr);
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.bitstream-lab > label,
.bitstream-readout,
.bitstream-cells {
  min-height: 112px;
  padding: 16px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--bg-surface);
}
.bitstream-cells { align-content: center; }
.bitstream-cells span {
  aspect-ratio: 1;
  border-radius: 5px;
  background: var(--bg-main);
}
.bitstream-cells span.is-on { background: var(--text-accent); border-color: var(--text-accent); }
.entropy-workbench,
.quorum-builder,
.domain-lab {
  border-radius: 8px;
  box-shadow: none;
}
.entropy-equation span,
.entropy-chunks span,
.quorum-builder label,
.domain-row select { border-radius: 6px; }

/* Existing passphrase simulator becomes one instrument instead of three cards. */
#passphrase-simulator .sim-card {
  margin-bottom: 0;
  border-radius: 8px 8px 0 0;
  box-shadow: none;
}
#passphrase-simulator .sim-output {
  margin-top: 0;
  padding: 0 28px 28px;
  border: 1px solid var(--border-default);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: var(--bg-surface);
  gap: 0;
}
#passphrase-simulator .sim-result-block {
  padding: 22px 0;
  border: 0;
  border-top: 1px solid var(--border-default);
  border-radius: 0;
  background: transparent;
}
#passphrase-simulator .sim-result-block:hover { border-color: var(--border-default); }
#passphrase-simulator .sim-tag,
#passphrase-simulator .sim-addr-idx { border-radius: 4px; }

@media (max-width: 760px) {
  .guide-reader-header { padding-inline: 14px; }
  .guide-layout[data-guide-level] .guide-content > .section-block { padding-block: 30px; }
  .guide-layout .guide-text > blockquote { width: auto; margin-inline: 0; }
  .bitstream-lab { grid-template-columns: 1fr; }
  .bitstream-lab > label,
  .bitstream-readout,
  .bitstream-cells { min-height: 0; }
  .guide-table-wrap[data-table-mode="cards"] {
    width: 100%;
    margin-inline: 0;
  }
  .guide-table-wrap[data-table-mode="cards"] .guide-table { width: 100%; }
  .guide-table-wrap[data-table-mode="cards"] .guide-table tbody tr {
    border-radius: 6px;
    box-shadow: none;
  }
  .guide-table-wrap[data-table-mode="cards"] .guide-table tbody td {
    grid-template-columns: minmax(112px, .42fr) minmax(0, 1fr);
    gap: 12px;
    padding: 11px 12px;
  }
  .guide-table-wrap[data-table-mode="cards"] .guide-table tbody td:first-child {
    padding-top: 14px;
    padding-bottom: 14px;
    background: var(--bg-highlight) !important;
    font-weight: 700;
  }
  .guide-table-wrap[data-table-mode="scroll"] {
    width: 100%;
    margin-inline: 0;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    background: var(--bg-surface);
    background-image: none;
    scrollbar-width: thin;
    scrollbar-color: var(--border-active) transparent;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  .guide-table-wrap[data-table-mode="scroll"] .guide-table {
    width: max-content;
    min-width: 100%;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  .guide-table-wrap[data-table-mode="scroll"] .guide-table th,
  .guide-table-wrap[data-table-mode="scroll"] .guide-table td {
    min-width: 138px;
    max-width: 220px;
    padding: 10px 12px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .guide-table-wrap[data-table-mode="scroll"] .guide-table th:first-child,
  .guide-table-wrap[data-table-mode="scroll"] .guide-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 128px;
    min-width: 128px;
    max-width: 128px;
    border-right: 1px solid var(--border-default);
    background: var(--bg-surface) !important;
  }
  .guide-table-wrap[data-table-mode="scroll"] .guide-table th:first-child { z-index: 2; background: var(--bg-highlight) !important; }
  .guide-table-hint {
    margin: 24px 0 8px;
    padding-left: 1px;
  }
  #passphrase-simulator .sim-output { padding: 0 18px 18px; }
}

@media (max-width: 520px) {
  .guide-table-wrap[data-table-mode="cards"] .guide-table tbody td { grid-template-columns: 1fr; gap: 5px; }
  .guide-table-wrap[data-table-mode="scroll"] .guide-table th,
  .guide-table-wrap[data-table-mode="scroll"] .guide-table td { min-width: 126px; max-width: 190px; padding: 9px 10px; }
  .guide-table-wrap[data-table-mode="scroll"] .guide-table th:first-child,
  .guide-table-wrap[data-table-mode="scroll"] .guide-table td:first-child { width: 112px; min-width: 112px; max-width: 112px; }
}

/* HODL editorial graphics: thesis-led decisions and the inverse DCA relationship. */
.guide-layout--hodl .hodl-visual-kicker {
  color: var(--text-dim);
  font: 700 9px/1.4 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.guide-layout--hodl .hodl-investment-logic,
.guide-layout--hodl .hodl-dca-chart {
  max-width: 940px;
  margin: clamp(30px, 5vw, 48px) 0;
  border: 1px solid var(--border-active);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-surface);
  color: var(--text-accent);
}
.guide-layout--hodl .hodl-investment-logic h3,
.guide-layout--hodl .hodl-dca-chart h3 {
  max-width: none;
  margin: 8px 0 0;
  font-size: clamp(20px, 2.8vw, 32px);
  line-height: 1.05;
  letter-spacing: -.035em;
}
.hodl-investment-logic__head,
.hodl-dca-chart__head { padding: clamp(20px, 3vw, 30px); }
.hodl-investment-logic__lanes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}
.hodl-investment-lane { min-width: 0; padding: clamp(20px, 3vw, 30px); }
.hodl-investment-lane + .hodl-investment-lane { border-left: 1px solid var(--border-default); }
.hodl-investment-lane--trading { background: var(--bg-highlight); }
.hodl-investment-lane--hodl { background: var(--text-accent); color: #fff; }
.guide-layout--hodl .hodl-investment-lane--hodl strong { color: #fff; }
.hodl-investment-lane__title { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 25px; }
.hodl-investment-lane__title span {
  color: var(--text-dim);
  font: 700 9px/1.3 var(--font-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.hodl-investment-lane--hodl .hodl-investment-lane__title span { color: rgba(255,255,255,.56); }
.hodl-investment-lane__title strong { font-size: clamp(18px, 2.2vw, 26px); letter-spacing: -.035em; }
.hodl-investment-lane ol { margin: 0; padding: 0; list-style: none; }
.hodl-investment-lane li {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  min-height: 68px;
  padding: 0 0 18px;
}
.hodl-investment-lane li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 0;
  left: 13px;
  width: 1px;
  background: var(--border-active);
}
.hodl-investment-lane--hodl li:not(:last-child)::after { background: rgba(255,255,255,.25); }
.hodl-investment-lane li > span {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-active);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg-surface);
  font: 700 8px/1 var(--font-mono);
}
.hodl-investment-lane--hodl li > span { border-color: rgba(255,255,255,.38); background: #fff; color: var(--text-accent); }
.hodl-investment-lane li div { display: grid; gap: 3px; padding-top: 2px; }
.hodl-investment-lane li strong { font-size: 14px; line-height: 1.3; }
.hodl-investment-lane li small { color: var(--text-dim); font-size: 11px; line-height: 1.45; }
.hodl-investment-lane--hodl li small { color: rgba(255,255,255,.6); }
.hodl-investment-lane > p {
  margin: 4px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border-default);
  font: 700 10px/1.4 var(--font-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.hodl-investment-lane--hodl > p { border-color: rgba(255,255,255,.22); }
.hodl-investment-logic figcaption,
.hodl-dca-chart figcaption {
  margin: 0;
  padding: 14px clamp(20px, 3vw, 30px);
  color: var(--text-dim);
  font-size: 10px;
  line-height: 1.5;
}

.hodl-dca-chart__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.hodl-dca-chart__legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px 16px; color: var(--text-dim); font: 700 9px/1.3 var(--font-mono); text-transform: uppercase; }
.hodl-dca-chart__legend span { display: flex; align-items: center; gap: 7px; }
.hodl-dca-chart__legend i { width: 20px; display: block; }
.hodl-dca-chart__legend-line { border-top: 2px solid var(--edu-red); }
.hodl-dca-chart__legend-bar { height: 8px; background: var(--edu-blue); }
.hodl-dca-chart__viewport { overflow-x: auto; border-block: 1px solid var(--border-default); background: var(--bg-highlight); scrollbar-width: thin; }
.hodl-dca-chart__viewport:focus-visible { outline: 2px solid var(--edu-blue); outline-offset: -3px; }
.hodl-dca-chart__plot { position: relative; min-width: 670px; display: grid; grid-template-columns: 50px minmax(0, 1fr); padding: 24px 26px 18px 16px; }
.hodl-dca-chart__scale { height: 238px; padding-bottom: 38px; display: flex; flex-direction: column; justify-content: space-between; color: var(--text-dim); font: 700 8px/1 var(--font-mono); }
.hodl-dca-chart__months { position: relative; z-index: 0; height: 238px; display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; }
.hodl-dca-chart__months::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0 0 38px;
  background: repeating-linear-gradient(to bottom, var(--border-default) 0 1px, transparent 1px 66px);
}
.hodl-dca-chart__price-line { position: absolute; z-index: 3; inset: 0 0 38px; width: 100%; height: 200px; pointer-events: none; overflow: visible; }
.hodl-dca-chart__price-line polyline { fill: none; stroke: var(--edu-red); stroke-width: 2; vector-effect: non-scaling-stroke; }
.hodl-dca-chart__months li { position: relative; min-width: 0; height: 238px; padding-bottom: 38px; display: flex; align-items: end; justify-content: center; }
.hodl-dca-chart__months li::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 38px;
  left: 50%;
  border-left: 1px dashed rgba(16,16,16,.12);
}
.hodl-dca-chart__price {
  position: absolute;
  z-index: 5;
  top: var(--price-y);
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 4px 6px;
  border-radius: 3px;
  background: var(--edu-red);
  color: #fff;
  font: 700 8px/1 var(--font-mono);
}
.hodl-dca-chart__bar {
  position: relative;
  z-index: 2;
  width: min(44px, 48%);
  height: calc(var(--units-h) * .72);
  min-height: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 3px 3px 0 0;
  background: var(--edu-blue);
}
.hodl-dca-chart__bar b {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%) rotate(-90deg);
  color: #fff;
  font: 700 8px/1 var(--font-mono);
  letter-spacing: .02em;
  white-space: nowrap;
}
.hodl-dca-chart__months li.is-low .hodl-dca-chart__bar { background: var(--edu-green); }
.hodl-dca-chart__months li > strong,
.hodl-dca-chart__months li > small { position: absolute; bottom: 13px; }
.hodl-dca-chart__months li > strong { left: calc(50% - 24px); font: 700 10px/1 var(--font-mono); }
.hodl-dca-chart__months li > small { right: calc(50% - 30px); color: var(--text-dim); font: 700 8px/1 var(--font-mono); }
.hodl-dca-chart__insight {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 14px clamp(20px, 3vw, 30px);
  border-bottom: 1px solid var(--border-default);
  background: #eaf4ed;
  color: #0f5f35;
}
.hodl-dca-chart__insight span { font: 700 9px/1 var(--font-mono); text-transform: uppercase; }
.hodl-dca-chart__insight strong { text-align: center; font-size: 12px; line-height: 1.4; }
.hodl-dca-chart__summary { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; }
.hodl-dca-chart__summary > div { min-width: 0; min-height: 96px; padding: 17px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; border-right: 1px solid var(--border-default); }
.hodl-dca-chart__summary > div:last-child { border-right: 0; }
.hodl-dca-chart__summary dt { color: var(--text-dim); font: 700 8px/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.hodl-dca-chart__summary dd { margin: 0; font-size: clamp(16px, 2vw, 23px); font-weight: 800; letter-spacing: -.03em; }
.hodl-dca-chart__summary dd small { display: block; margin-top: 4px; color: rgba(255,255,255,.62); font: 700 8px/1.2 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.hodl-dca-chart__summary .is-result { background: var(--text-accent); color: #fff; }
.hodl-dca-chart__summary .is-result dt { color: rgba(255,255,255,.58); }

@media (max-width: 720px) {
  .hodl-investment-logic__lanes { grid-template-columns: 1fr; }
  .hodl-investment-lane + .hodl-investment-lane { border-top: 1px solid var(--border-default); border-left: 0; }
  .hodl-dca-chart__head { align-items: start; flex-direction: column; }
  .hodl-dca-chart__legend { justify-content: flex-start; }
  .hodl-dca-chart__summary { grid-template-columns: repeat(2, 1fr); }
  .hodl-dca-chart__summary > div { border-bottom: 1px solid var(--border-default); }
  .hodl-dca-chart__summary > div:nth-child(2) { border-right: 0; }
  .hodl-dca-chart__summary > div:nth-child(n+3) { border-bottom: 0; }
}

@media (max-width: 520px) {
  .guide-layout--hodl .hodl-investment-logic,
  .guide-layout--hodl .hodl-dca-chart { width: calc(100% + 2px); margin-inline: -1px; border-radius: 6px; }
  .hodl-investment-lane__title { align-items: start; flex-direction: column; gap: 5px; }
  .hodl-dca-chart__viewport::after {
    content: "Swipe to compare months →";
    position: sticky;
    left: 16px;
    display: block;
    width: max-content;
    padding: 0 0 10px;
    color: var(--text-dim);
    font: 700 8px/1 var(--font-mono);
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  .hodl-dca-chart__insight { grid-template-columns: 1fr; gap: 5px; text-align: center; }
  .hodl-dca-chart__summary { grid-template-columns: 1fr; }
  .hodl-dca-chart__summary > div { min-height: 78px; border-right: 0; border-bottom: 1px solid var(--border-default) !important; }
  .hodl-dca-chart__summary > div:last-child { border-bottom: 0 !important; }
}