.learn-page, .learn-intro-page, .learn-strip, .learn-coach, .learn-sheet-wrap, .learn-guide {
  --learn-rift: oklch(66% 0.13 292);
  --learn-rift-light: oklch(86% 0.07 292);
  --learn-rift-wash: oklch(66% 0.13 292 / 0.16);
  --learn-rift-glow: oklch(66% 0.13 292 / 0.45);
}


.learn-page {
  --learn-inline: max(var(--page-gutter), calc((100% - var(--page-max)) / 2));
  --learn-node: 48px;
  min-height: calc(100dvh - var(--shell-h) - var(--footer-h));
  box-sizing: border-box;
  padding: 0 0 var(--step-7);
  background: var(--surface-ground);
  color: var(--ink-1);
}


.learn-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--step-4);
  padding: var(--step-8) var(--learn-inline) var(--step-7);
  overflow: hidden;
  border-bottom: 1px solid var(--line-1);
}
.learn-hero-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(55% 90% at 82% 45%, var(--learn-rift-wash), transparent 70%),
    var(--rift-field) right center / cover no-repeat;
  mask-image: linear-gradient(90deg, transparent 8%, var(--ink-1) 60%);
  pointer-events: none;
}
.learn-hero-text { display: grid; gap: var(--step-4); max-width: 40rem; animation: learn-rise var(--motion-4) var(--ease-standard) both; }
.learn-hero-kicker { margin: 0; color: var(--ink-3); font-size: var(--type-label); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; }
.learn-hero-title.ur-page-title { font-size: clamp(2.25rem, 2.4vw + 1.5rem, 3.5rem); line-height: 1.02; }
.learn-hero-premise { margin: 0; color: var(--ink-2); font-size: 1.125rem; line-height: 1.5; }
.learn-hero-line { display: block; }
.learn-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--step-3) var(--step-5); margin-top: var(--step-2); }
.learn-hero-start { min-height: var(--touch); }
.learn-hero-wait { color: var(--ink-3); font-size: var(--type-read); }
.learn-hero-progress { display: inline-flex; align-items: center; gap: var(--step-3); }
.learn-hero-count { color: var(--ink-2); font-size: var(--type-body); font-variant-numeric: tabular-nums; }
.learn-hero .learn-taught { position: absolute; top: var(--step-5); right: var(--learn-inline); }


.learn-page a.ui-btn, .learn-card a.ui-btn, .learn-sheet a.ui-btn { text-decoration: none; }


.learn-pips { display: inline-flex; gap: 4px; }
.learn-pip { width: 16px; height: 4px; border-radius: 2px; background: var(--line-2); }
.learn-pip.is-done, .learn-pip.is-past { background: var(--ink-2); }
.learn-pip.is-here { background: var(--learn-rift-light); box-shadow: 0 0 8px var(--learn-rift-glow); }


.learn-seal { display: block; overflow: visible; }
.learn-seal-hex { fill: var(--surface-1); stroke: var(--line-2); stroke-width: 1.2; }
.learn-seal-glyph path, .learn-seal-glyph circle, .learn-seal-check { fill: none; stroke: var(--ink-1); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.learn-seal-glyph .solid { fill: var(--ink-1); stroke: none; }
.learn-seal-num { fill: var(--ink-2); font: 800 11px var(--font-ui); }


.learn-know { padding: var(--step-6) var(--learn-inline) var(--step-5); background: var(--surface-well); border-bottom: 1px solid var(--line-1); }
.learn-know-head { margin: 0 0 var(--step-4); font: 500 var(--type-section) / 1.2 var(--font-display); letter-spacing: var(--track-display); }
.learn-know-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--step-5); margin: 0; padding: 0; list-style: none; }
.learn-know-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 2px var(--step-3); align-content: start; }
.learn-know-mark { grid-row: 1 / span 2; display: grid; justify-items: center; gap: var(--step-1); }
.learn-know-seal { width: 40px; height: 37px; }
.learn-know-seal .learn-seal-hex { stroke: var(--learn-rift); fill: var(--learn-rift-wash); }
.learn-know-domains { display: grid; grid-template-columns: repeat(3, 14px); gap: 2px; }
.learn-know-domains .ur-dom-icon { width: 14px; height: 14px; }
.learn-know-name { margin: 0; text-transform: none; color: var(--ink-1); font: 500 var(--type-head) / 1.25 var(--font-display); letter-spacing: var(--track-display); }
.learn-know-line { margin: 0; color: var(--ink-2); font-size: var(--type-body); line-height: 1.45; }


.learn-path { padding: var(--step-6) var(--learn-inline) var(--step-4); }
.learn-path-head { margin: 0 0 var(--step-4); font: 500 var(--type-section) / 1.2 var(--font-display); letter-spacing: var(--track-display); }
.learn-steps { position: relative; display: grid; gap: var(--step-2); margin: 0; padding: 0; list-style: none; }

.learn-steps::before {
  content: "";
  position: absolute;
  top: var(--step-6);
  bottom: var(--step-6);
  left: calc(var(--learn-node) / 2 - 1px);
  width: 2px;
  background: linear-gradient(180deg, var(--learn-rift), var(--line-2) 40%, var(--line-1));
}
.learn-step {
  position: relative;
  display: grid;
  grid-template-columns: var(--learn-node) 12rem minmax(0, 1fr) auto;
  gap: var(--step-5);
  align-items: center;
  padding: var(--step-3) 0;
  animation: learn-rise var(--motion-4) var(--ease-standard) both;
  --learn-i: 0;
  animation-delay: calc(var(--learn-i) * var(--stagger));
}
.learn-step-node { position: relative; display: grid; place-items: center; }
.learn-step-seal { width: var(--learn-node); height: calc(var(--learn-node) * 0.9167); }
.learn-step-seal .learn-seal-hex { fill: var(--surface-ground); stroke-width: 1.4; }
.learn-step-seal .learn-seal-num { font-size: 10px; }
.learn-step.is-done .learn-step-seal .learn-seal-hex { fill: var(--surface-2); stroke: var(--ink-3); }
.learn-step.is-current .learn-step-seal .learn-seal-hex { fill: var(--learn-rift-wash); stroke: var(--learn-rift-light); }
.learn-step.is-current .learn-step-seal { filter: drop-shadow(0 0 10px var(--learn-rift-glow)); }
.learn-step.is-current .learn-step-seal .learn-seal-num { fill: var(--ink-1); }
.learn-step.is-soon .learn-step-seal .learn-seal-hex { stroke-dasharray: 2 2; }

.learn-step-art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--round-2);
  background: radial-gradient(70% 90% at 50% 40%, var(--learn-rift-wash), transparent 75%), var(--surface-1);
  box-shadow: 0 0 0 1px var(--line-1);
}
.learn-step-emblem { width: 44px; height: 40px; }
.learn-step-emblem .learn-seal-hex { fill: var(--surface-ground); stroke: var(--learn-rift); }

.learn-step-img, .learn-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transform: scale(1.22); transform-origin: 50% 24%; }
.learn-step.is-done .learn-step-img { filter: saturate(0.55) brightness(0.8); }
.learn-step.is-current .learn-step-art { box-shadow: 0 0 0 1px var(--learn-rift), 0 0 24px var(--learn-rift-wash); }

.learn-step-text { display: grid; gap: var(--step-1); min-width: 0; }
.learn-step-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--step-1) var(--step-3); margin: 0; color: var(--ink-3); font-size: var(--type-label); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; }
.learn-step-word { color: var(--ink-2); }
.learn-step.is-current .learn-step-word { color: var(--learn-rift-light); }
.learn-step-name { margin: 0; text-transform: none; font: 500 var(--type-head) / 1.25 var(--font-display); letter-spacing: var(--track-display); color: var(--ink-1); }
.learn-step-blurb { margin: 0; color: var(--ink-2); font-size: var(--type-read); line-height: 1.45; }
.learn-step.is-next .learn-step-name, .learn-step.is-soon .learn-step-name { color: var(--ink-2); }
.learn-step-action { display: flex; justify-content: flex-end; }
.learn-step-go { min-height: var(--touch); }
.learn-step-soon { color: var(--ink-3); font-size: var(--type-note); }


.learn-step.is-current {
  grid-template-columns: var(--learn-node) 16rem minmax(0, 1fr) auto;
  margin: var(--step-2) calc(-1 * var(--step-4));
  padding: var(--step-4);
  border-radius: 12px;
  background: var(--surface-1);
  box-shadow: 0 0 0 1px var(--line-2);
}
.learn-step.is-current .learn-step-name { font-size: 1.375rem; }


.learn-onward { padding: var(--step-6) var(--learn-inline) 0; }
.learn-onward-head { margin: 0 0 var(--step-4); font: 500 var(--type-section) / 1.2 var(--font-display); letter-spacing: var(--track-display); }
.learn-onward-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--step-4); }
.learn-onward-link {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--step-1) var(--step-3);
  min-height: 88px;
  align-content: center;
  padding: var(--step-4) var(--step-5);
  border-radius: 12px;
  background: var(--surface-1);
  box-shadow: 0 0 0 1px var(--line-1);
  color: var(--ink-1);
  text-decoration: none;
  transition: background-color var(--motion-1) var(--ease-inout);
}
@media (hover: hover) { .learn-onward-link:hover { background: var(--surface-2); } }
.learn-onward-link:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-off); }
.learn-onward-name { font: 600 var(--type-head) / 1.25 var(--font-display); letter-spacing: var(--track-display); }
.learn-onward-line { grid-column: 1; color: var(--ink-2); font-size: var(--type-body); }
.learn-onward-arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--ink-2); font-size: var(--type-title); transition: transform var(--motion-2) var(--ease-standard); }
@media (hover: hover) { .learn-onward-link:hover .learn-onward-arrow { transform: translateX(4px); } }
.learn-onward.is-finished .learn-onward-link { box-shadow: 0 0 0 1px var(--learn-rift); }

.learn-account { display: flex; flex-wrap: wrap; gap: var(--step-2); align-items: center; margin: var(--step-5) var(--learn-inline) 0; color: var(--ink-2); }
.learn-account-link { min-height: var(--touch); display: inline-flex; align-items: center; color: var(--ink-1); text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 900px) {
  .learn-know-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learn-step, .learn-step.is-current { grid-template-columns: var(--learn-node) 9rem minmax(0, 1fr); }
  .learn-step-action { grid-column: 3; justify-content: flex-start; }
}
@media (max-width: 600px) {
  .learn-page { --learn-inline: var(--step-4); --learn-node: 36px; }
  .learn-hero { padding-top: var(--step-6); padding-bottom: var(--step-6); }
  .learn-hero-field { mask-image: linear-gradient(180deg, var(--ink-1), transparent 90%); opacity: 0.6; }
  .learn-hero-premise { font-size: 1rem; }
  .learn-hero-start { width: 100%; }
  .learn-hero .learn-taught { position: static; justify-self: start; }
  .learn-know-list { grid-template-columns: minmax(0, 1fr); gap: var(--step-4); }
  .learn-step, .learn-step.is-current { grid-template-columns: var(--learn-node) minmax(0, 1fr) 64px; gap: var(--step-2) var(--step-3); align-items: start; }
  .learn-step-node { grid-row: 1 / span 2; }
  .learn-step-art { grid-column: 3; grid-row: 1; width: 64px; aspect-ratio: 1; }
  .learn-step-emblem { width: 30px; height: 28px; }
  .learn-step-text { grid-column: 2; grid-row: 1; }
  .learn-step-action { grid-column: 2 / span 2; grid-row: 2; }
  .learn-step.is-current { margin-inline: calc(-1 * var(--step-3)); padding: var(--step-3); }
  .learn-step.is-current .learn-step-art { grid-column: 2 / span 2; grid-row: 1; width: auto; aspect-ratio: 16 / 7; }
  .learn-step.is-current .learn-step-text { grid-row: 2; }
  .learn-step.is-current .learn-step-action { grid-row: 3; }
  .learn-step.is-current .learn-step-node { grid-row: 1 / span 3; }
  .learn-step.is-current .learn-step-name { font-size: 1.1875rem; }
  .learn-step.is-current .learn-step-go { width: 100%; }
  
  .learn-step:not(.is-current) .learn-step-go { padding-inline: 0; }
  .learn-step:not(.is-current) .learn-step-action { margin-top: calc(-1 * var(--step-2)); }
  .learn-onward-links { grid-template-columns: minmax(0, 1fr); }
}


.learn-intro-page {
  position: relative;
  min-height: calc(100dvh - var(--shell-h) - var(--footer-h));
  display: grid; place-items: center;
  padding: var(--step-6) var(--page-gutter);
  box-sizing: border-box;
  background: var(--surface-ground);
  color: var(--ink-1);
}
.learn-felt { position: absolute; inset: 0; background: radial-gradient(50% 60% at 50% 45%, var(--learn-rift-wash), transparent 75%), var(--rift-field) right center / cover no-repeat; opacity: 0.7; pointer-events: none; }
.learn-card {
  position: relative;
  width: min(32rem, 100%);
  overflow: hidden;
  box-sizing: border-box;
  background: var(--surface-1);
  border-radius: 14px;
  box-shadow: 0 0 0 1px var(--line-2), 0 18px 48px oklch(9% 0.02 274 / 0.6);
  animation: learn-rise var(--motion-4) var(--ease-standard) both;
}
.learn-card-art { position: relative; display: grid; place-items: center; height: 160px; overflow: hidden; background: radial-gradient(60% 100% at 50% 40%, var(--learn-rift-wash), transparent 75%), var(--surface-well); border-bottom: 1px solid var(--line-1); }
.learn-card-emblem { width: 64px; height: 59px; }
.learn-card-emblem .learn-seal-hex { fill: var(--surface-ground); stroke: var(--learn-rift); }
.learn-card-body { display: grid; gap: var(--step-3); padding: var(--step-5) var(--step-6) var(--step-6); }
.learn-card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--step-2); }
.learn-card-kicker { margin: 0; color: var(--ink-3); font-size: var(--type-label); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; }
.learn-card-title { margin: 0; font: 700 2rem / 1.1 var(--font-display); letter-spacing: var(--track-display); }
.learn-card-line { margin: 0; color: var(--ink-2); font-size: var(--type-read); line-height: 1.5; }
.learn-card-actions { display: flex; flex-wrap: wrap; gap: var(--step-3); margin-top: var(--step-2); }
.learn-link { min-height: var(--touch); display: inline-flex; align-items: center; justify-self: start; color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; }
.learn-intro-page.is-phone { place-items: end stretch; padding: 0; }
.learn-card.is-sheet { width: 100%; border-radius: var(--round-2) var(--round-2) 0 0; }
.learn-card.is-sheet .learn-card-art { height: 120px; }
.learn-card.is-sheet .learn-card-body { padding: var(--step-4) var(--step-4) var(--step-5); }
.learn-card.is-sheet .learn-card-title { font-size: 1.625rem; }
.learn-card.is-sheet .ui-btn { flex: 1 1 auto; }


.learn-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--step-1) var(--step-3);
  padding: var(--step-2) var(--step-3);
  background: var(--surface-1);
  border-bottom: 1px solid var(--line-2);
  color: var(--ink-1);
  font-size: var(--type-body);
}
.learn-strip-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--step-1) var(--step-3); min-width: 0; }
.learn-strip-kicker { color: var(--ink-3); font-size: var(--type-label); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; }
.learn-strip-title { font: 500 var(--type-head) / 1.2 var(--font-display); letter-spacing: var(--track-display); }
.learn-strip-step { display: inline-flex; align-items: center; gap: var(--step-2); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.learn-strip-pips .learn-pip { width: 12px; }
.learn-strip-fold { font-weight: 600; letter-spacing: 0.02em; }
.learn-strip-actions { display: flex; gap: var(--step-2); align-items: center; }
.learn-strip.is-phone { padding: 0 var(--step-2); font-size: var(--type-note); }


.learn-coach.is-float {
  position: fixed; z-index: calc(var(--z-anchored) - 1);
  left: 0; top: 0;
  width: min(25rem, calc(100vw - 2 * var(--step-4)));
  box-sizing: border-box;
  display: grid; gap: var(--step-2);
  padding: var(--step-4) var(--step-5);
  background: var(--surface-overlay);
  border-radius: var(--round-2);
  box-shadow: 0 0 0 1px var(--learn-rift-glow), 0 0 24px oklch(66% 0.13 292 / 0.22), var(--shadow-float);
  color: var(--ink-1);
  animation: learn-words var(--motion-2) var(--ease-standard);
}
.learn-coach.is-float:not([data-coach-spot]) { opacity: 0; }
.learn-coach-top { display: flex; align-items: center; justify-content: space-between; gap: var(--step-2); }
.learn-coach-count { color: var(--learn-rift-light); font-size: var(--type-label); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.learn-coach-pips .learn-pip { width: 10px; }
.learn-coach-lead { margin: 0; font: 600 1.375rem / 1.3 var(--font-display); letter-spacing: 0.005em; color: var(--ink-1); text-wrap: pretty; animation: learn-words var(--motion-1) var(--ease-standard); }
.learn-coach-note { margin: 0; color: var(--ink-2); font-size: var(--type-body); line-height: 1.45; }
.learn-coach-hint { margin: 0; padding: var(--step-2) var(--step-3); border-radius: var(--round-1); background: var(--surface-2); color: var(--ink-1); font-size: var(--type-body); line-height: 1.45; }
.learn-coach-controls { display: flex; flex-wrap: wrap; gap: var(--step-2); }
.learn-coach.is-float.is-phone { width: calc(100vw - 2 * var(--step-4)); padding: var(--step-3) var(--step-4); gap: var(--step-1); }
.learn-coach.is-float.is-phone .learn-coach-lead { font-size: 1.125rem; }
.learn-coach.is-float.is-phone .ui-btn { min-height: 44px; }
.learn-coach.is-float.is-folded { width: auto; max-width: min(22rem, calc(100vw - 2 * var(--step-4))); padding: 0; border-radius: 999px; opacity: 0.94; overflow: hidden; display: flex; }
.learn-coach-chip .learn-coach-count { flex: none; white-space: nowrap; }
.learn-coach-chip {
  display: flex; align-items: center; gap: var(--step-3);
  min-height: 44px; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
  padding: var(--step-2) var(--step-4);
  border: 0; border-radius: inherit; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer;
}
.learn-coach-chip:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-off); }
.learn-coach-chip-say { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--type-body); font-weight: 600; line-height: 1.3; }


.learn-guide {
  --learn-guide-ink: oklch(84% 0.12 292);
  --learn-guide-glow: oklch(66% 0.13 292 / 0.75);
  --learn-guide-shade: oklch(12% 0.02 274 / 0.72);
  position: fixed; inset: 0; z-index: 74;
  pointer-events: none;
}

.table[data-sheet-open][data-sheet-open] :is(.learn-guide, .learn-coach.is-float),
.table:not([data-shape="wide"])[data-menu-open][data-menu-open] :is(.learn-guide, .learn-coach.is-float) { opacity: 0; pointer-events: none; }
.learn-guide-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.learn-guide-ring {
  fill: none; stroke: var(--learn-guide-ink); stroke-width: 3;
  transform-box: fill-box; transform-origin: center;
  filter: drop-shadow(0 0 6px var(--learn-guide-glow));
  animation: learn-ring var(--loop-call) var(--ease-inout) infinite;
}
.learn-guide-ring.is-drop { stroke-dasharray: 10 7; }
.learn-guide-under { fill: none; stroke: var(--learn-guide-shade); stroke-width: 9; stroke-linecap: round; }
.learn-guide-line { fill: none; stroke: var(--learn-guide-ink); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 12 9; animation: learn-dash var(--motion-5) linear infinite; }
.learn-guide-head { fill: var(--learn-guide-ink); stroke: var(--learn-guide-shade); stroke-width: 1.5; stroke-linejoin: round; filter: drop-shadow(0 0 4px var(--learn-guide-glow)); }
.learn-guide-arrow { animation: learn-bob var(--loop-wait) var(--ease-inout) infinite; }
@keyframes learn-ring { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.015); } }
@keyframes learn-dash { to { stroke-dashoffset: -21; } }
@keyframes learn-bob { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(calc(var(--guide-dx) * -1), calc(var(--guide-dy) * -1)); } }
.card.at-hand[data-hand-card][data-learn-lift]:not(:hover) { translate: 0 calc(var(--fan-drop) - 14px); }
[data-learn-lift]:not(.card) { translate: 0 -10px; transition: translate var(--motion-2) var(--ease-emphasis); }
@keyframes learn-words { from { opacity: 0; } to { opacity: 1; } }


.help-tour {
  --learn-rift: oklch(66% 0.13 292);
  --learn-rift-light: oklch(86% 0.07 292);
  --learn-rift-glow: oklch(66% 0.13 292 / 0.45);
  --learn-guide-ink: oklch(84% 0.12 292);
  --learn-guide-glow: oklch(66% 0.13 292 / 0.75);
  --learn-guide-shade: oklch(12% 0.02 274 / 0.72);
  
  position: fixed; inset: 0; z-index: calc(var(--z-anchored) - 1);
}
.help-tour-scrim { position: absolute; inset: 0; }
.help-tour-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.help-tour-dim { fill: var(--veil); }
.help-tour-ring { pointer-events: none; }
.help-tour-svg .learn-guide-arrow { pointer-events: none; }
.help-tour-mark {
  position: fixed; left: 0; top: 0;
  width: 28px; height: 28px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--learn-rift-glow); border-radius: 999px;
  background: var(--surface-overlay); color: var(--learn-rift-light);
  font-size: var(--type-body); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px oklch(9% 0.02 274 / 0.6);
  cursor: pointer;
}
.help-tour-mark:not([style]), .help-tour-mark[data-help-missing] { visibility: hidden; }
.help-tour-mark.is-here { background: var(--learn-guide-ink); border-color: var(--learn-guide-ink); color: var(--surface-ground); box-shadow: 0 0 0 3px var(--learn-rift-glow), 0 2px 8px oklch(9% 0.02 274 / 0.6); }
@media (hover: hover) { .help-tour-mark:hover:not(.is-here) { border-color: var(--learn-rift-light); } }
.help-tour-mark:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-off); }
.help-tour.is-phone .help-tour-mark { width: 32px; height: 32px; }
.help-tour-card {
  position: fixed; left: 0; top: 0;
  width: min(24rem, calc(100vw - 2 * var(--step-4)));
  box-sizing: border-box;
  display: grid; gap: var(--step-2);
  padding: var(--step-4) var(--step-5);
  background: var(--surface-overlay);
  border-radius: var(--round-2);
  box-shadow: 0 0 0 1px var(--learn-rift-glow), 0 0 24px oklch(66% 0.13 292 / 0.22), var(--shadow-float);
  color: var(--ink-1);
  animation: learn-words var(--motion-2) var(--ease-standard);
}
.help-tour-card:not([data-help-spot]) { opacity: 0; }
.help-tour-top { display: flex; align-items: center; justify-content: space-between; gap: var(--step-2); }
.help-tour-count { color: var(--learn-rift-light); font-size: var(--type-label); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.help-tour-close {
  width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: var(--round-1);
  background: none; color: var(--ink-2);
  font-size: 1.25rem; line-height: 1; cursor: pointer;
}
@media (hover: hover) { .help-tour-close:hover { background: var(--surface-2); color: var(--ink-1); } }
.help-tour-close:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-off); }
.help-tour-name { margin: 0; font: 600 1.25rem / 1.3 var(--font-display); color: var(--ink-1); text-wrap: balance; animation: learn-words var(--motion-1) var(--ease-standard); }
.help-tour-says { margin: 0; color: var(--ink-1); font-size: var(--type-read); line-height: 1.5; text-wrap: pretty; animation: learn-words var(--motion-1) var(--ease-standard); }
.help-tour-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--step-2); margin-top: var(--step-1); }
.help-tour-controls [data-help-back] { margin-inline-end: auto; }
.help-tour.is-phone .help-tour-card { width: calc(100vw - 2 * var(--step-4)); padding: var(--step-3) var(--step-4); gap: var(--step-1); }
.help-tour.is-phone .help-tour-name { font-size: 1.125rem; }
.help-tour.is-phone :is(.help-tour-btn, .help-tour-close) { min-height: 44px; }
.help-tour.is-phone .help-tour-close { width: 44px; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) :is(.help-tour-card, .help-tour-name, .help-tour-says) { animation: learn-words var(--motion-still) linear; }
}
:root[data-motion="reduce"] :is(.help-tour-card, .help-tour-name, .help-tour-says) { animation: learn-words var(--motion-still) linear; }


.learn-sheet-wrap {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center;
  padding: var(--page-gutter);
  pointer-events: none;
}
.learn-sheet-wrap.is-phone { place-items: end stretch; padding: 0; }
.learn-sheet {
  pointer-events: auto;
  position: relative;
  width: min(30rem, 100%);
  display: grid; gap: var(--step-3);
  justify-items: start;
  padding: var(--step-6);
  box-sizing: border-box;
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--round-2);
  box-shadow: var(--win-shadow);
  color: var(--ink-1);
}
.learn-sheet-wrap.is-phone .learn-sheet { width: 100%; border-radius: var(--round-2) var(--round-2) 0 0; padding: var(--step-5) var(--step-4) var(--step-6); }
.learn-sheet-crest { position: relative; display: grid; place-items: center; width: 72px; height: 72px; }
.learn-sheet-burst { position: absolute; inset: -40%; border-radius: 50%; background: radial-gradient(circle, var(--learn-rift-glow), transparent 65%); animation: learn-burst var(--motion-5) var(--ease-standard) both; }
.learn-sheet-seal { position: relative; width: 64px; height: 59px; }
.learn-sheet-seal .learn-seal-hex { fill: var(--learn-rift-wash); stroke: var(--learn-rift-light); stroke-width: 1.4; }
.learn-sheet-seal .learn-seal-check { stroke-width: 1.8; }
.learn-sheet-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--step-3); }
.learn-sheet-kicker { margin: 0; color: var(--ink-3); font-size: var(--type-label); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; }
.learn-sheet-title { margin: 0; font: 700 1.75rem / 1.1 var(--font-display); letter-spacing: var(--track-display); }
.learn-sheet.is-last .learn-sheet-title { font-size: 2.25rem; }
.learn-sheet-line { margin: 0; color: var(--ink-2); font-size: var(--type-read); line-height: 1.5; }
.learn-sheet-actions { display: flex; flex-wrap: wrap; gap: var(--step-2) var(--step-3); margin-top: var(--step-2); }
@keyframes learn-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes learn-burst { from { opacity: 0; transform: scale(0.4); } 40% { opacity: 1; } to { opacity: 0.7; transform: none; } }


@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) :is(.learn-hero-text, .learn-step, .learn-card) { animation: none; }
  :root:not([data-motion="full"]) .learn-sheet-burst { animation: none; opacity: 0.7; }
  :root:not([data-motion="full"]) :is(.learn-onward-link, .learn-onward-arrow) { transition: none; }
  :root:not([data-motion="full"]) :is(.learn-guide-ring, .learn-guide-line, .learn-guide-arrow) { animation: none; }
  :root:not([data-motion="full"]) .learn-guide-ring { opacity: 1; }
  :root:not([data-motion="full"]) [data-learn-lift]:not(.card) { transition: none; }
}
:root[data-motion="reduce"] :is(.learn-hero-text, .learn-step, .learn-card) { animation: none; }
:root[data-motion="reduce"] .learn-sheet-burst { animation: none; opacity: 0.7; }
:root[data-motion="reduce"] :is(.learn-onward-link, .learn-onward-arrow) { transition: none; }
:root[data-motion="reduce"] :is(.learn-guide-ring, .learn-guide-line, .learn-guide-arrow) { animation: none; }
:root[data-motion="reduce"] .learn-guide-ring { opacity: 1; }
:root[data-motion="reduce"] [data-learn-lift]:not(.card) { transition: none; }


.learn-taught {
  align-self: start;
  padding: 2px var(--step-3);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink-1);
  font-size: var(--type-body);
  font-weight: 600;
}


.home-learn {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--step-3);
  padding: var(--step-4) var(--step-5);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--surface-1);
}
.home-learn-text { display: grid; gap: var(--step-1); min-width: 0; }
.home-learn-title { margin: 0; font-size: var(--type-read); font-weight: 600; color: var(--ink-1); }
.home-learn-line { margin: 0; color: var(--ink-2); }
.home-learn-actions { display: flex; flex-wrap: wrap; gap: var(--step-2); }

.land-learn { justify-self: start; }