/*
 * ZeroToModel course home (index.html) only; builds on theme.css (tokens + zm- classes).
 * Lessons use style.css and never load this file.
 */

/* page-level resets */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
button, input { font: inherit; color: inherit; }
main:focus { outline: none; }
[hidden] { display: none !important; }
.zd-eyebrow-gap { margin-bottom: 22px; }

/* ------------------------------------------------------------------ nav */
.zd-nav { position: sticky; top: 0; z-index: 50; padding: 12px var(--gutter) 0; }
.zd-nav-inner {
  max-width: var(--max); margin: 0 auto; height: 60px; padding: 0 10px 0 18px;
  display: flex; align-items: center; gap: 16px;
  border: 1px solid var(--line); border-radius: 14px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  transition: border-color 0.4s var(--ease-out), background-color 0.4s var(--ease-out);
}
.zd-nav.is-scrolled .zd-nav-inner { border-color: var(--line-2); background: color-mix(in srgb, var(--bg) 86%, transparent); }
.zd-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 500; font-size: 18px; letter-spacing: -0.03em; white-space: nowrap; }
.zd-brand-to { color: var(--accent); }
.zd-mark { width: 26px; height: 26px; fill: var(--accent); flex: none; }
.zd-mark .zd-mark-core { fill: var(--ink); }
.zd-brand:hover .zd-mark circle:not(.zd-mark-core) { animation: zd-mark-in 0.7s var(--ease-out); }
@keyframes zd-mark-in { from { transform: translateX(-3px); opacity: 0.3; } }
.zd-links { display: flex; gap: 4px; margin: 0 auto; }
.zd-links a {
  position: relative; padding: 8px 12px; border-radius: 8px; text-decoration: none;
  font: 400 13.5px var(--mono); color: var(--ink-2); transition: color 0.25s, background-color 0.25s;
}
.zd-links a:hover { color: var(--ink); background: var(--accent-soft); }
.zd-nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.zd-links + .zd-nav-actions { margin-left: 0; }
.zd-nav .z-theme-toggle, .zd-pill {
  display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 10px; cursor: pointer; white-space: nowrap;
  font: 400 13px var(--mono); color: var(--ink-2); background: transparent; border: 1px solid var(--line-2);
  transition: color 0.25s, border-color 0.25s, transform 0.25s var(--ease-out);
}
.zd-nav .z-theme-toggle:hover, .zd-pill:hover { color: var(--ink); border-color: var(--accent); }
.zd-pill--solid { background: var(--cta-bg); color: var(--cta-ink); border-color: transparent; }
.zd-pill--solid:hover { color: var(--cta-ink); transform: translateY(-1px); }
.zd-account { position: relative; }
.zd-avatar { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 600 11px var(--font); }
.zd-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; padding: 14px; z-index: 60;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.5);
  transform-origin: top right; animation: zd-pop 0.28s var(--ease-out);
}
.zd-menu p { margin-bottom: 10px; overflow-wrap: anywhere; }
@keyframes zd-pop { from { opacity: 0; transform: translateY(-6px) scale(0.97); } }

/* ------------------------------------------------------------------ hero */
.zd-hero { position: relative; padding: clamp(40px, 7vw, 96px) var(--gutter) 0; isolation: isolate; }
.zd-hero-grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center;
}
.zd-hero h1 { font-weight: 300; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.zd-h1-a, .zd-h1-b { display: block; }
.zd-lede { margin-top: 24px; max-width: 34em; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--ink-2); font-weight: 300; }
.zd-lede strong { color: var(--ink); font-weight: 450; }
.zd-lede--sm { font-size: 17px; margin-top: 16px; }
.zd-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.zd-cta .zm-btn--primary { max-width: 100%; }

/* progress ring */
.zd-ring-card { padding: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 26px; align-items: center; justify-items: center; }
.zd-ring-card .zd-ring-meta { justify-self: stretch; }
.zd-ring { position: relative; width: clamp(150px, 15vw, 190px); aspect-ratio: 1; }
.zd-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.zd-ring-track { fill: none; stroke: var(--line); stroke-width: 10; }
.zd-ring-fill {
  fill: none; stroke: url(#zd-ring-grad); stroke-width: 10; stroke-linecap: round;
  stroke-dasharray: 0 1000; transition: stroke-dasharray 1.6s var(--ease-out);
  filter: drop-shadow(0 0 6px var(--glow-a));
}
.zd-stop-a { stop-color: var(--accent); }
.zd-stop-b { stop-color: var(--pass); }
.zd-ring-ticks line { stroke: var(--bg); stroke-width: 3; }
.zd-ring-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.zd-ring-num { font-weight: 300; font-size: clamp(40px, 4vw, 52px); letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.zd-ring-of { margin-top: 6px; font: 400 11.5px var(--mono); color: var(--ink-3); }
.zd-ring-meta { display: grid; gap: 10px; min-width: 0; }
.zd-ring-stage { font-size: 19px; line-height: 1.3; letter-spacing: -0.02em; }
.zd-ring-stage b { display: block; font: 500 12px var(--mono); color: var(--accent); letter-spacing: 0.04em; margin-bottom: 4px; font-weight: 400; }
.zd-minibar { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.zd-minibar span { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--pass)); transform-origin: left; transform: scaleX(0); transition: transform 1.4s var(--ease-out) 0.2s; }

/* lesson field: 160 dots converging into one model */
.zd-field { position: relative; max-width: var(--max); margin: clamp(40px, 6vw, 72px) auto 0; }
.zd-field svg { display: block; width: 100%; height: clamp(150px, 19vw, 240px); overflow: visible; }
.zd-field figcaption { display: flex; gap: 10px; align-items: baseline; margin-top: 14px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }
.zd-key { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pass); box-shadow: 0 0 8px var(--pass); }
.zd-fd { fill: var(--lock); opacity: 0; transform-box: fill-box; transform-origin: center; animation: zd-dot-in 0.9s var(--ease-out) forwards; animation-delay: var(--d, 0s); }
.zd-fd.is-pass { fill: var(--pass); }
.zd-fd.is-open { fill: var(--accent); }
.zd-fd.is-current { fill: var(--ink); }
@keyframes zd-dot-in { from { opacity: 0; transform: translateX(-24px) scale(0.2); } to { opacity: var(--o, 0.9); transform: none; } }
.zd-fd-drift { animation: zd-drift 6s ease-in-out infinite alternate; animation-delay: var(--dd, 0s); }
@keyframes zd-drift { to { transform: translateY(var(--dy, 3px)); } }
.zd-fd-i { transition: transform 0.35s var(--ease-out); }
.zd-field svg.is-live .zd-fd-i { cursor: pointer; }
.zd-fd-i.is-hover .zd-fd { opacity: 1 !important; transform: scale(2) !important; animation: none; }
.zd-field-label.is-link { cursor: pointer; }
.zd-field-label.is-link:hover { fill: var(--ink); }
.zd-field-tip { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 5; padding: 8px 11px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: 0 14px 30px -14px rgba(0,0,0,.6); font-size: 13px; line-height: 1.4; color: var(--ink); white-space: nowrap; transform: translate(-50%, calc(-100% - 12px)); transition: opacity .15s; }
.zd-field-tip[hidden] { display: none; }
.zd-field-tip b { font: 400 11px var(--mono); color: var(--accent); display: block; margin-bottom: 2px; }
.zd-field-tip .is-pass { color: var(--pass); }
.zd-fd-halo { fill: none; stroke: var(--ink); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: zd-halo 2.4s var(--ease-out) infinite; }
@keyframes zd-halo { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(2.6); opacity: 0; } }
.zd-beam { stroke: url(#zd-beam-grad); stroke-width: 2; fill: none; }
.zd-beam-pulse { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; fill: none; stroke-dasharray: 40 400; animation: zd-pulse 3.2s linear infinite; }
@keyframes zd-pulse { from { stroke-dashoffset: 440; } to { stroke-dashoffset: 0; } }
.zd-core { fill: var(--ink); }
.zd-core-ring { fill: none; stroke: var(--accent); stroke-width: 1; opacity: 0.5; }
.zd-field-label { font: 400 12px var(--mono); fill: var(--ink-3); }
.zd-field-label--end { fill: var(--ink); }

/* ------------------------------------------------------------------ marquee */
.zd-marquee {
  margin-top: clamp(40px, 6vw, 64px); border-block: 1px solid var(--line); overflow: hidden; padding: 18px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.zd-marquee-track { display: flex; width: max-content; animation: zd-marquee var(--mq, 60s) linear infinite; }
.zd-marquee:hover .zd-marquee-track { animation-play-state: paused; }
.zd-marquee-group { display: flex; gap: 48px; padding-right: 48px; }
.zd-mq-item { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; font: 400 14px var(--mono); color: var(--ink-3); }
.zd-mq-item b { font-weight: 400; color: var(--accent); }
.zd-mq-item.is-pass { color: var(--ink-2); }
.zd-mq-item.is-pass b { color: var(--pass); }
@keyframes zd-marquee { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------------ sections */
.zd-section { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(72px, 10vw, 128px) var(--gutter) 0; }
.zd-section-head { margin-bottom: clamp(28px, 4vw, 48px); max-width: 52rem; }
.zd-section-head .zm-eyebrow { margin-bottom: 16px; }
.zd-section h2 { font-weight: 300; font-size: clamp(32px, 4.6vw, 56px); line-height: 1.06; letter-spacing: -0.04em; }

/* bento */
.zd-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; grid-auto-flow: dense; align-items: start; }
/* cards are as tall as what is in them: a one-item plan does not stretch to its neighbours */
.zd-card { position: relative; padding: 26px; min-width: 0; overflow: hidden; transition: transform 0.5s var(--ease-out), border-color 0.4s, box-shadow 0.5s var(--ease-out); }
.zd-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity 0.5s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), var(--accent-soft), transparent 60%);
}
.zd-card:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: 0 24px 60px -32px var(--glow-a); }
.zd-card:hover::before { opacity: 1; }
.zd-card > * { position: relative; }
.zd-card--plan { grid-column: span 7; grid-row: span 2; }
.zd-card--stats { grid-column: span 5; }
.zd-card--mastery { grid-column: span 5; }
.zd-card--connect { grid-column: span 5; }
.zd-card--tutor { grid-column: span 12; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 24px; align-items: center; }
.zd-card--tutor .zm-small { grid-column: 2; }
.zd-card--tutor h3 { grid-column: 2; }
.zd-card--tutor .zd-tutor-orb { grid-row: span 2; }
.zd-card--tutor .zm-btn { grid-column: 3; grid-row: 1 / span 2; }
.zd-bento.no-side .zd-card--plan { grid-row: auto; }
.zd-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.zd-card h3 { font-weight: 400; font-size: 22px; letter-spacing: -0.025em; line-height: 1.2; }

/* plan list */
.zd-plan { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: plan; }
.zd-plan-item { counter-increment: plan; }
.zd-plan-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 4px 14px; align-items: start;
  padding: 16px; border-radius: 12px; border: 1px solid var(--line); text-decoration: none; color: inherit;
  background: color-mix(in srgb, var(--bg) 40%, transparent);
  transition: border-color 0.3s, background-color 0.3s, transform 0.4s var(--ease-out);
}
a.zd-plan-row:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateX(4px); }
.zd-plan-ico { grid-row: span 3; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font: 500 13px var(--mono); background: var(--accent-soft); color: var(--accent); }
.zd-plan-item[data-kind="review"] .zd-plan-ico { background: var(--pass-soft); color: var(--pass); }
.zd-plan-item[data-kind="weak_drill"] .zd-plan-ico, .zd-plan-item[data-kind="fix_root_cause"] .zd-plan-ico, .zd-plan-item[data-kind="revisit"] .zd-plan-ico { background: var(--shaky-soft); color: var(--shaky); }
.zd-plan-kind { font: 400 11.5px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.zd-plan-title { font-size: 17px; line-height: 1.35; letter-spacing: -0.01em; grid-column: 2; }
.zd-plan-why { grid-column: 2 / -1; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.zd-plan-min { grid-row: 1; grid-column: 3; font: 400 12px var(--mono); color: var(--ink-2); white-space: nowrap; }
.zd-plan-go { color: var(--accent); font: 400 12.5px var(--mono); grid-column: 2 / -1; margin-top: 4px; }
.zd-plan-note { margin-top: 16px; }
.zd-plan-note:empty { display: none; }
.zd-skeleton { height: 86px; border-radius: 12px; background: linear-gradient(90deg, var(--line) 25%, var(--glass-hi) 50%, var(--line) 75%); background-size: 200% 100%; animation: zd-shimmer 1.4s linear infinite; }
@keyframes zd-shimmer { to { background-position: -200% 0; } }

/* stats */
.zd-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; }
.zd-stats div { min-width: 0; }
.zd-stats dt { font: 400 11.5px/1.3 var(--mono); color: var(--ink-3); letter-spacing: 0.02em; }
.zd-stats dd { margin: 6px 0 0; font-weight: 300; font-size: clamp(34px, 3.4vw, 44px); line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.zd-stats dd small { font-size: 14px; letter-spacing: 0; color: var(--ink-2); margin-left: 4px; }
.zd-spark { margin-top: 22px; }
.zd-spark-bars { display: flex; align-items: flex-end; gap: 3px; height: 56px; }
.zd-spark-bars span { flex: 1; min-width: 2px; height: 100%; border-radius: 2px; background: var(--accent); opacity: 0.85; transform-origin: bottom; transform: scaleY(var(--h)); transition: transform 0.9s var(--ease-out); }
.zd-spark-bars span.is-zero { background: var(--line-2); transform: scaleY(0.05); }
.zd-spark-bars span.is-today { background: var(--pass); }
.zd-spark-axis { display: flex; justify-content: space-between; margin-top: 8px; font: 400 11px var(--mono); color: var(--ink-3); }

/* mastery */
.zd-mastery-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.zd-mc { display: grid; gap: 4px; }
.zd-mc b { font-weight: 300; font-size: 36px; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.zd-mc span { font: 400 11.5px var(--mono); color: var(--ink-3); display: inline-flex; gap: 6px; align-items: center; }
.zd-mc i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.zd-segbar { display: flex; height: 8px; gap: 3px; margin: 18px 0 22px; }
.zd-segbar span { border-radius: 99px; background: var(--c); transform-origin: left; transform: scaleX(0); transition: transform 1.1s var(--ease-out); }
.zd-segbar.is-in span { transform: none; }
.zd-weak { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.zd-weak li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); }
.zd-weak .zd-wk-name { font-size: 15px; line-height: 1.35; }
.zd-weak .zd-wk-meta { grid-column: 1; font: 400 11.5px var(--mono); color: var(--ink-3); }
.zd-weak a { grid-row: 1 / span 2; grid-column: 2; padding: 8px 12px; border-radius: 8px; text-decoration: none; font: 400 12.5px var(--mono); color: var(--accent); border: 1px solid var(--line-2); transition: border-color 0.25s, background-color 0.25s; white-space: nowrap; }
.zd-weak a:hover { border-color: var(--accent); background: var(--accent-soft); }
.zd-weak .is-shaky .zd-wk-meta { color: var(--shaky); }

/* connect form: sign in / create account */
.zd-mode { display: inline-flex; gap: 4px; margin-top: 16px; padding: 4px; border-radius: 12px; border: 1px solid var(--line-2); }
.zd-mode-btn { min-height: 36px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: 400 13px var(--mono); cursor: pointer; transition: background-color 0.25s, color 0.25s; }
.zd-mode-btn:hover { color: var(--ink); }
.zd-mode-btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.zd-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 14px; }
.zd-fld { display: grid; gap: 6px; min-width: 0; }
.zd-fld[hidden] { display: none; }
.zd-form label { font: 400 12.5px var(--mono); color: var(--ink-2); }
.zd-form input { width: 100%; min-width: 0; height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--bg) 60%, transparent); color: var(--ink); font: inherit; transition: border-color 0.25s; }
.zd-form input:focus { border-color: var(--accent); }
.zd-form input[aria-invalid="true"] { border-color: var(--bad); }
.zd-pass-wrap { position: relative; }
.zd-pass-wrap input { padding-right: 72px; }
.zd-show-pass { position: absolute; right: 4px; top: 4px; height: 36px; min-width: 60px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--accent); font: 400 12.5px var(--mono); cursor: pointer; }
.zd-show-pass:hover { background: var(--accent-soft); }
.zd-field-hint { font-size: 13px; color: var(--ink-3); margin: 0; }
.zd-field-err { font-size: 13.5px; color: var(--bad); margin: 0; }
.zd-field-err:empty { display: none; }
.zd-form .zm-btn { margin-top: 4px; justify-self: start; }
.zd-form .zm-btn[aria-busy="true"] { opacity: 0.75; cursor: progress; }
.zd-form-msg { font-size: 14px; min-height: 1.4em; margin: 0; color: var(--ink-2); }
.zd-form-msg.is-bad { color: var(--bad); }
.zd-form-msg.is-good { color: var(--ink); }
.zd-form-alt { margin: 0; font-size: 14px; color: var(--ink-2); }
.zd-link-btn { padding: 4px 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.zd-forgot { margin-top: 14px; font-size: 14px; }
.zd-forgot summary { cursor: pointer; color: var(--accent); min-height: 32px; display: list-item; }
.zd-forgot p { margin: 8px 0; }
.zd-forgot pre { margin: 6px 0; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); overflow-x: auto; font: 400 12.5px var(--mono); }
.zd-menu-who { font-size: 14px; }
#zd-connect-title:focus { outline: none; }

/* tutor card */
.zd-tutor-orb { position: relative; width: 64px; height: 64px; }
.zd-tutor-orb span { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--accent); opacity: 0.6; animation: zd-orb 4s var(--ease-out) infinite; }
.zd-tutor-orb span:nth-child(2) { animation-delay: 1.33s; }
.zd-tutor-orb span:nth-child(3) { animation-delay: 2.66s; }
.zd-tutor-orb::after { content: ""; position: absolute; inset: 22px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 24px var(--accent); }
@keyframes zd-orb { from { transform: scale(0.35); opacity: 0.9; } to { transform: scale(1); opacity: 0; } }

/* ------------------------------------------------------------------ roadmap */
.zd-rail { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.zd-rail-line { position: absolute; left: 6.25%; right: 6.25%; top: 27px; height: 2px; background: var(--line-2); border-radius: 2px; overflow: hidden; }
/* the river: water flowing behind the stage dots, drawn on a canvas (dashboard.js paintRiver) */
.zd-river { position: absolute; left: 0; right: 0; top: -28px; height: 112px; width: 100%; pointer-events: none; z-index: 0; }
.zd-rail > .zd-node { z-index: 1; }
.zd-rail-line span { display: block; height: 100%; background: linear-gradient(90deg, var(--pass), var(--accent)); transform-origin: left; transform: scaleX(0); transition: transform 1.6s var(--ease-out) 0.2s; }
.zd-road.is-in .zd-rail-line span { transform: scaleX(var(--fill, 0)); }
.zd-rail.has-river .zd-rail-line { opacity: 0.35; }
.zd-node {
  position: relative; width: 100%; display: grid; justify-items: center; gap: 10px; padding: 0 4px 14px;
  background: none; border: 0; cursor: pointer; text-align: center; border-radius: 12px; color: var(--ink-2);
}
.zd-node-dot {
  position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg); border: 1px solid var(--line-2); font: 400 17px var(--mono); color: var(--ink-2);
  transition: transform 0.45s var(--ease-spring), border-color 0.3s, background-color 0.3s, box-shadow 0.4s;
}
.zd-node-dot svg { position: absolute; inset: -5px; width: 66px; height: 66px; transform: rotate(-90deg); }
.zd-node-dot svg circle { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.zd-node-dot .zd-nd-arc { stroke: var(--pass); stroke-dasharray: 0 100; transition: stroke-dasharray 1.2s var(--ease-out) 0.3s; }
.zd-road.is-in .zd-nd-arc { stroke-dasharray: var(--arc, 0) 100; }
.zd-node-name { font-size: 13.5px; line-height: 1.3; letter-spacing: -0.01em; max-width: 13ch; }
.zd-node-count { font: 400 11.5px var(--mono); color: var(--ink-3); }
.zd-node:hover .zd-node-dot { transform: translateY(-3px) scale(1.06); border-color: var(--accent); }
.zd-node[aria-selected="true"] { color: var(--ink); }
.zd-node[aria-selected="true"] .zd-node-dot { background: var(--cta-bg); color: var(--cta-ink); border-color: transparent; box-shadow: 0 0 0 6px var(--accent-soft), 0 12px 32px -8px var(--glow-a); }
.zd-node.is-passed .zd-node-dot { border-color: var(--pass); color: var(--pass); }
.zd-node.is-passed[aria-selected="true"] .zd-node-dot { color: var(--cta-ink); }
.zd-node.is-locked .zd-node-dot { color: var(--ink-3); border-style: dashed; }
.zd-node.is-now .zd-node-dot::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid var(--accent); animation: zd-halo-css 2.4s var(--ease-out) infinite; }
@keyframes zd-halo-css { from { transform: scale(0.85); opacity: 0.9; } to { transform: scale(1.35); opacity: 0; } }
.zd-node.is-now .zd-node-name::after { content: "you are here"; display: block; margin-top: 4px; font: 400 10.5px var(--mono); color: var(--accent); letter-spacing: 0.04em; }

.zd-panel { margin-top: 28px; padding: clamp(20px, 3vw, 36px); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr); gap: clamp(20px, 4vw, 56px); }
.zd-panel.is-swap { animation: zd-swap 0.55s var(--ease-out); }
@keyframes zd-swap { from { opacity: 0; transform: translateY(10px); } }
.zd-panel-side { display: grid; gap: 14px; align-content: start; }
.zd-panel-side h3 { font-weight: 300; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.1; letter-spacing: -0.035em; }
.zd-panel-side .zm-btn { justify-self: start; margin-top: 8px; }
.zd-state { display: inline-flex; align-items: center; gap: 8px; font: 400 12px var(--mono); color: var(--ink-2); }
.zd-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--accent)); }
.zd-lessons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; align-content: start; }
.zd-lessons a {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--ink-2);
  border: 1px solid transparent; transition: background-color 0.25s, border-color 0.25s, color 0.25s, transform 0.35s var(--ease-out);
}
.zd-lessons a:hover { background: var(--accent-soft); border-color: var(--line); color: var(--ink); transform: translateX(3px); }
.zd-ls-ico { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 500 11px var(--mono); border: 1px solid var(--line-2); color: var(--ink-3); }
.zd-ls-title { font-size: 14.5px; line-height: 1.35; }
.zd-ls-min { font: 400 11px var(--mono); color: var(--ink-3); white-space: nowrap; }
.zd-lessons .is-passed .zd-ls-ico { background: var(--pass-soft); border-color: transparent; color: var(--pass); }
.zd-lessons .is-passed { color: var(--ink); }
.zd-lessons .is-locked { color: var(--ink-3); }
.zd-lessons .is-current { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.zd-lessons .is-current .zd-ls-ico { background: var(--accent); color: var(--accent-ink); border-color: transparent; }

/* how it works */
.zd-how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.zd-how li { padding: 22px; display: grid; gap: 10px; align-content: start; transition: transform 0.5s var(--ease-out), border-color 0.4s; }
.zd-how li:hover { transform: translateY(-4px); border-color: var(--line-2); }
.zd-how-more { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 18px 0 0; }
.zd-footer a { color: var(--ink-2); }
.zd-how-n { font: 400 12px var(--mono); color: var(--accent); }
.zd-how strong { font-weight: 400; font-size: 18px; letter-spacing: -0.02em; }
.zd-how li > span:last-child { font-size: 14px; color: var(--ink-2); line-height: 1.55; }

/* footer */
.zd-footer { margin-top: clamp(80px, 12vw, 160px); border-top: 1px solid var(--line); padding: 48px var(--gutter) 40px; overflow: hidden; }
.zd-footer-inner { max-width: var(--max); margin: 0 auto; display: grid; gap: 20px; }
/* footer wordmark: a small sign-off in the hero field's language — dots flow along a beam
   from "zero" and gather into "model". Transform/opacity only; paused off-screen. */
.zd-wm { margin: 0; text-align: center; white-space: nowrap; font-weight: 300; font-size: clamp(28px, 4vw, 44px); line-height: 1.2; letter-spacing: -0.04em; color: var(--accent); }
.zd-wm-zero { color: var(--ink-3); }
.zd-wm-model { display: inline-block; }
.zd-wm-path { display: inline-block; width: 3.6em; height: 0.9em; margin: 0 0.18em; vertical-align: -0.2em; overflow: visible; color: var(--accent); }
.zd-wm-track { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-linecap: round; }
.zd-wm-head { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.zd-wm-dot { transform-box: view-box; animation: zd-wm-flow var(--t, 3s) cubic-bezier(0.45, 0, 0.25, 1) infinite; animation-delay: var(--d, 0s); opacity: 0; }
.zd-wm-dot.is-pass { fill: var(--pass); }
.zd-wm-dot.is-open { fill: var(--accent); }
@keyframes zd-wm-flow {
  0% { transform: translate(0, var(--y, 0px)); opacity: 0; }
  15% { opacity: 0.95; }
  80% { opacity: 0.9; }
  100% { transform: translate(138px, 0); opacity: 0; }
}
.zd-wm.is-paused *, .zd-wm.is-paused { animation-play-state: paused !important; }

.zd-notice { padding: 16px; border-radius: 12px; border: 1px solid var(--shaky); background: var(--shaky-soft); }


/* ------------------------------------------------------------------ knowledge graph */
.zd-graph-stage { position: relative; max-width: 100%; margin: 8px auto 0; }
.zd-graph-labels { position: relative; height: 34px; margin-top: 6px; }
.zd-glabel { position: absolute; top: 0; padding: 0 4px; font: 400 11px/1.35 var(--font); color: var(--ink-3); text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zd-graph-svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.zd-ge { fill: none; stroke: var(--line-2); stroke-width: 1.2; }
.zd-ge.is-path { stroke: var(--accent); stroke-width: 1.8; opacity: 0.8; }
.zd-ge-pulse { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 26 414; animation: zd-pulse 2.8s linear infinite; animation-delay: var(--d, 0s); }
.zd-gn { cursor: pointer; outline: none; }
.zd-gn .zd-gn-shape { stroke-width: 2; transition: transform 0.35s var(--ease-spring); transform-box: fill-box; transform-origin: center; }
.zd-gn:hover .zd-gn-shape, .zd-gn:focus-visible .zd-gn-shape { transform: scale(1.35); }
.zd-gn:focus-visible .zd-gn-ring { opacity: 1; }
.zd-gn-ring { fill: none; stroke: var(--focus); stroke-width: 2; opacity: 0; }
.is-mastered .zd-gn-shape { fill: var(--pass); stroke: var(--pass); }
.is-learning .zd-gn-shape { fill: var(--bg); stroke: var(--accent); }
.is-shaky .zd-gn-shape { fill: var(--shaky-soft); stroke: var(--shaky); }
.is-unseen .zd-gn-shape { fill: var(--surface); stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 3 2.5; }
.is-next .zd-gn-shape { stroke: var(--accent); stroke-width: 2.5; filter: drop-shadow(0 0 4px var(--glow-a)); }
.zd-gn-halo { fill: none; stroke: var(--accent); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: zd-halo 2.4s var(--ease-out) infinite; }
.zd-gl { font: 400 11px var(--mono); fill: var(--ink-3); }
.zd-graph-info { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 16px; align-items: center; }
.zd-graph-tip { min-height: 1.5em; font-size: 15px; color: var(--ink); }
.zd-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; font: 400 12px var(--mono); color: var(--ink-2); }
.zd-legend li { display: inline-flex; align-items: center; gap: 8px; }
.zd-legend svg { width: 16px; height: 16px; overflow: visible; }
.zd-graph.is-paused *, .zd-loop.is-paused * { animation-play-state: paused !important; }

/* "Your next step" map: lesson-graph.css pills + dashboard bits */
.zd-ns.z-lg, .zd-ns .z-lg { margin: 0; }
.zd-ns-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.zd-ns .z-lg-node { flex-wrap: wrap; }
.zd-ns .z-lg-col--here .z-lg-colhead { color: var(--accent); }
.zd-ns .z-lg-col--stage .z-lg-colhead, .zd-ns .z-lg-stage--wide .z-lg-colhead { text-transform: none; letter-spacing: 0; font-size: 12px; line-height: 1.35; min-height: 2.7em; }
.zd-ns-fix { display: inline-block; margin: 6px 0 0 10px; font: 400 12px var(--mono); color: var(--shaky); text-decoration: none; border-bottom: 1px dashed currentColor; }
.zd-ns-fix:hover { color: var(--ink); }
.zd-ns-foot { margin-top: 14px; display: grid; gap: 10px; justify-items: start; }
.zd-ns-lesson { font-size: 15px; color: var(--ink); line-height: 1.35; }
.zd-ns-scroll { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 6px; border-radius: var(--r-lg); }
.zd-ns-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.zd-ns-legend { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.zd-ns-legend .z-lg-badge { font-size: 12px; padding: 3px 10px; }

/* ------------------------------------------------------------------ tutor loop */
.zd-loop { padding: clamp(20px, 3vw, 40px); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.zd-loop-svg { width: 100%; max-width: 420px; justify-self: center; overflow: visible; }
.zd-loop-outer { fill: none; stroke: var(--pass); stroke-width: 1.2; stroke-dasharray: 3 7; opacity: 0.6; }
.zd-loop-inner { fill: none; stroke: var(--line-2); stroke-width: 1.5; }
.zd-loop-spin { transform-origin: 200px 200px; animation: zd-spin 10s linear infinite; }
.zd-loop-spin--outer { animation-duration: 26s; }
@keyframes zd-spin { to { transform: rotate(360deg); } }
/* The comets glow with a soft second circle, not a filter: a filter on a rotating group is
   re-rasterised every frame and made the numbered nodes jitter while the card revealed. */
.zd-loop-comet { fill: var(--accent); }
.zd-loop-comet--pass { fill: var(--pass); }
.zd-loop-glow { fill: var(--accent); opacity: 0.28; }
.zd-loop-glow--pass { fill: var(--pass); opacity: 0.28; }
.zd-loop-svg { will-change: transform; transform: translateZ(0); }
.zd-loop-spin { will-change: transform; }
/* This card reveals by fading only: a slide would move the spinning picture under a blurred glass background. */
.zm-motion .zd-loop.zm-reveal { transform: none; transition: opacity var(--dur-3) var(--ease-out); }
.zd-loop-node text { text-rendering: geometricPrecision; }
.zd-loop-node rect { fill: var(--surface); stroke: var(--line-2); stroke-width: 1.2; }
.zd-loop-node text { font: 400 12px var(--mono); fill: var(--ink); }
.zd-loop-node .zd-ln-n { fill: var(--accent); }
.zd-loop-mid { font: 300 22px var(--font); fill: var(--ink); letter-spacing: -0.02em; }
.zd-loop-mid--sm { font: 400 11px var(--mono); fill: var(--ink-3); letter-spacing: 0; }
.zd-loop-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.zd-loop-steps li { display: grid; gap: 2px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); }
.zd-loop-steps b { font: 400 13px var(--mono); color: var(--accent); }
.zd-loop-steps span { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.zd-loop-steps .is-outer { border-style: dashed; border-color: var(--pass); }
.zd-loop-steps .is-outer b { color: var(--pass); }
@media (max-width: 860px) { .zd-loop { grid-template-columns: minmax(0, 1fr); } }

/* style.css classes the tutor panel uses (this page does not load style.css) */
.z-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2); background: transparent; color: var(--ink); font: 400 13px var(--mono); cursor: pointer; transition: border-color 0.25s, background-color 0.25s; }
.z-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.z-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.z-btn--primary { background: var(--cta-bg); color: var(--cta-ink); border-color: transparent; }
.z-btn--primary:hover { background: var(--cta-bg); filter: brightness(1.08); }
.z-ok { color: var(--pass); }
.z-bad { color: var(--bad); }

/* ---- masonry: the cards pack into two columns by their real heights (dashboard.js layoutBento) ---- */
.zd-bento.is-masonry { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; }
/* columns are flex stacks; the last card of the shorter column grows to the bottom edge, so both
   columns end on the same line — the breathing room sits inside a card, never as a hole beside it */
.zd-bento.is-masonry > .zd-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.zd-bento.is-masonry > .zd-col > .zd-card:last-child { flex: 1 1 auto; display: flex; flex-direction: column; }
.zd-bento.is-masonry > .zd-col > .zd-card:last-child > .zm-small:last-child,
.zd-bento.is-masonry > .zd-col > .zd-card:last-child > p:last-child { margin-top: auto; padding-top: 14px; }
.zd-bento.is-masonry > .zd-col > .zd-card--tutor:last-child { display: grid; align-content: start; }
.zd-bento.is-masonry .zd-card { grid-column: auto; grid-row: auto; }
.zd-col--side .zd-card--tutor { grid-template-columns: auto minmax(0, 1fr); }
.zd-col--side .zd-card--tutor .zm-btn { grid-column: 1 / -1; grid-row: auto; justify-self: start; margin-top: 8px; }

/* ------------------------------------------------------------------ reveal */
.zm-motion .zd-card.zm-reveal.is-in { transition: opacity 0.9s var(--ease-out), transform 0.5s var(--ease-out), border-color 0.4s, box-shadow 0.5s var(--ease-out); transition-delay: var(--rd, 0s), 0s, 0s, 0s; }
.zd-hero-copy > *, .zd-ring-card { animation: zd-rise 1s var(--ease-out) both; }
.zd-hero-copy > :nth-child(2) { animation-delay: 0.06s; }
.zd-hero-copy > :nth-child(3) { animation-delay: 0.14s; }
.zd-hero-copy > :nth-child(4) { animation-delay: 0.22s; }
.zd-ring-card { animation-delay: 0.18s; }
@keyframes zd-rise { from { opacity: 0; transform: translateY(18px); } }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .zd-how { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zd-how li:last-child { grid-column: 1 / -1; }
  .zd-card--plan { grid-column: span 12; grid-row: auto; }
  .zd-card--stats, .zd-card--mastery, .zd-card--connect { grid-column: span 6; }
}
@media (max-width: 960px) {
  .zd-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .zd-ring-card { max-width: 560px; }
  /* Phones and tablets: section links hidden, actions stay on the right. */
  .zd-links { display: none; }
  .zd-links + .zd-nav-actions { margin-left: auto; }
  .zd-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 18px; }
  .zd-rail-line { display: none; }
  .zd-panel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .zd-card--stats, .zd-card--mastery, .zd-card--connect { grid-column: span 12; }
  .zd-card--tutor { grid-template-columns: auto minmax(0, 1fr); }
  .zd-card--tutor .zm-btn { grid-column: 1 / -1; grid-row: auto; justify-self: start; margin-top: 8px; }
  .zd-lessons { grid-template-columns: minmax(0, 1fr); }
  .zd-how { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .zd-nav { padding-top: 8px; }
  .zd-nav-inner { padding: 0 6px 0 12px; gap: 8px; height: 56px; }
  .zd-brand { font-size: 16px; gap: 8px; }
  .zd-mark { width: 22px; height: 22px; }
  .zd-nav .z-theme-toggle, .zd-pill { padding: 0 10px; font-size: 12px; height: 36px; }
  .zd-acct-name { display: none; }
  .zd-avatar { margin-right: 0; }
  .zd-ring-card { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 24px 20px; }
  .zd-ring-meta { width: 100%; }
  .zd-cta .zm-btn { width: 100%; }
  .zd-card { padding: 20px; }
  .zd-plan-row { grid-template-columns: 34px minmax(0, 1fr); padding: 14px; }
  .zd-plan-ico { width: 34px; height: 34px; }
  .zd-plan-min { grid-column: 2; grid-row: auto; }
  .zd-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .zd-rail { gap: 4px; }
  .zd-node-dot { width: 48px; height: 48px; font-size: 15px; }
  .zd-node-dot svg { inset: -5px; width: 58px; height: 58px; }
  .zd-node-name { font-size: 12px; }
  .zd-field figcaption { font-size: 11.5px; }
}


/* ------------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .zm-motion .zm-reveal { opacity: 1; transform: none; }
  .zd-fd { opacity: var(--o, 0.9); }
  .zd-marquee-track { flex-wrap: wrap; width: auto; }
  .zd-marquee-group[aria-hidden="true"] { display: none; }
  .zd-marquee-group { flex-wrap: wrap; row-gap: 10px; padding: 0 var(--gutter); }
  .zd-wm-dot { display: none; }
}