.first-principles-understand { width:100%; min-height:0; height:100%; display:block; overflow:hidden; }
.first-principles-understand__panel { height:100%; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr); gap:var(--space-3); }
.first-principles-understand__panel-header { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-4); }
.first-principles-understand__panel-header h3 { margin:0; font-size:var(--text-lg); }
.first-principles-understand__eyebrow { color:var(--mode-soft-text); font-size:var(--text-xs); font-weight:var(--weight-bold); letter-spacing:.04em; text-transform:uppercase; }
.first-principles-understand__panel-body { min-height:0; display:grid; gap:var(--space-3); align-content:start; overflow:auto; padding-right:2px; }
.first-principles-understand__action-row,.first-principles-understand__choice-row { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); }
.first-principles-understand__button { min-height:var(--touch-target-min); padding:0 var(--space-3); border:1px solid var(--border-default); border-radius:var(--radius-md); background:var(--surface-base); color:var(--text-primary); font:inherit; font-weight:var(--weight-semibold); cursor:pointer; }
.first-principles-understand__button--primary,.first-principles-understand__button[aria-pressed="true"] { border-color:var(--mode-accent); background:var(--mode-soft); color:var(--mode-soft-text); }
.first-principles-understand__button:disabled { opacity:.48; cursor:not-allowed; }
.first-principles-understand__button:focus-visible,.first-principles-understand input:focus-visible,.first-principles-understand select:focus-visible { outline:3px solid var(--focus-ring); outline-offset:2px; }
.first-principles-understand__status,.first-principles-understand__insight,.first-principles-understand__takeaway { margin:0; padding:var(--space-3); border-radius:var(--radius-md); line-height:var(--leading-normal); }
.first-principles-understand__status,.first-principles-understand__insight { background:var(--surface-subtle); color:var(--text-secondary); }
.first-principles-understand__takeaway { background:var(--mode-soft); color:var(--mode-soft-text); }
.first-principles-understand__graph-host { min-height:360px; }
.first-principles-understand__graph-host .chord-tangent-explorer { height:auto; min-height:0; }
.first-principles-understand__graph-host .chord-tangent-explorer__diagram { min-height:320px; }
.first-principles-understand__sequence { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:var(--space-2) var(--space-4); padding:var(--space-4); border:1px solid var(--border-default); border-radius:var(--radius-lg); background:var(--surface-subtle); }
.first-principles-understand__limit-value { font-family:var(--font-math); font-size:clamp(1.6rem,4vw,2.6rem); color:var(--mode-soft-text); }
.first-principles-understand__distance { color:var(--text-secondary); }
.first-principles-understand__limit-track { grid-column:1/-1; position:relative; height:18px; border-radius:999px; background:var(--border-subtle); }
.first-principles-understand__limit-track::before { content:'0'; position:absolute; left:0; top:22px; color:var(--text-secondary); font-size:var(--text-xs); }
.first-principles-understand__limit-marker { position:absolute; top:50%; width:18px; height:18px; border-radius:50%; background:var(--mode-accent); transform:translate(-50%,-50%); transition:left .16s ease; }
.first-principles-understand__range { width:min(100%,560px); min-height:var(--touch-target-min); accent-color:var(--mode-accent); }
.first-principles-understand__limit-readout { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-2); }
.first-principles-understand__limit-readout > * { padding:var(--space-3); border:1px solid var(--border-default); border-radius:var(--radius-md); background:var(--surface-subtle); text-align:center; font-family:var(--font-math); }
.first-principles-understand__table { width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--border-default); border-radius:var(--radius-md); overflow:hidden; font-variant-numeric:tabular-nums; }
.first-principles-understand__table caption { padding:0 0 var(--space-2); color:var(--text-secondary); text-align:left; font-size:var(--text-sm); font-weight:var(--weight-semibold); }
.first-principles-understand__table th,.first-principles-understand__table td { padding:var(--space-2) var(--space-3); border-bottom:1px solid var(--border-subtle); text-align:center; }
.first-principles-understand__table th { background:var(--surface-subtle); color:var(--text-secondary); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.03em; }
.first-principles-understand__table tbody tr:last-child td { border-bottom:0; }
.first-principles-understand__table tr.is-current td { background:var(--mode-soft); color:var(--mode-soft-text); font-weight:var(--weight-semibold); }
.first-principles-understand__point-grid,.first-principles-understand__compare { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); }
.first-principles-understand__point-card,.first-principles-understand__compare-card { display:grid; gap:var(--space-2); padding:var(--space-4); border:1px solid var(--border-default); border-radius:var(--radius-lg); background:var(--surface-subtle); }
.first-principles-understand__point-card--accent,.first-principles-understand__compare-card--accent { border-color:var(--mode-accent); background:var(--mode-soft); }
.first-principles-understand__point-card strong,.first-principles-understand__difference-quotient strong { font-family:var(--font-math); font-size:clamp(1.25rem,3vw,1.8rem); }
.first-principles-understand__point-card p,.first-principles-understand__compare-card p { margin:0; color:var(--text-secondary); line-height:var(--leading-normal); }
.first-principles-understand__point-label,.first-principles-understand__compare-label { color:var(--mode-soft-text); font-size:var(--text-xs); font-weight:var(--weight-bold); letter-spacing:.04em; text-transform:uppercase; }
.first-principles-understand__difference-quotient { display:grid; grid-template-columns:1fr auto 1fr; gap:var(--space-3); align-items:center; padding:var(--space-4); border:1px solid var(--mode-accent); border-radius:var(--radius-lg); text-align:center; }
.first-principles-understand__formal-formula { padding:var(--space-4); border:2px solid var(--mode-accent); border-radius:var(--radius-lg); background:var(--mode-soft); color:var(--mode-soft-text); font-family:var(--font-math); font-size:clamp(1.35rem,3vw,2rem); text-align:center; }
.first-principles-understand__formula-map { display:grid; grid-template-columns:minmax(120px,.65fr) minmax(0,1.35fr); margin:0; border:1px solid var(--border-default); border-radius:var(--radius-md); overflow:hidden; }
.first-principles-understand__formula-map dt,.first-principles-understand__formula-map dd { margin:0; padding:var(--space-2) var(--space-3); border-bottom:1px solid var(--border-subtle); }
.first-principles-understand__formula-map dt { background:var(--surface-subtle); font-family:var(--font-math); font-weight:var(--weight-semibold); }
.first-principles-understand__formula-map dd { color:var(--text-secondary); }
.first-principles-understand__formula-map dt:last-of-type,.first-principles-understand__formula-map dd:last-of-type { border-bottom:0; }
.first-principles-understand__steps { min-height:0; }
.first-principles-understand__steps .equation-step-list { margin:0; }
.first-principles-understand__steps .equation-step { background:var(--surface-subtle); }
.first-principles-understand__steps .first-principles-understand__current-step { border-color:var(--mode-accent); background:var(--mode-soft); }
.first-principles-understand__proof-chain { padding:var(--space-4); border:1px solid var(--mode-accent); border-radius:var(--radius-lg); background:var(--mode-soft); color:var(--mode-soft-text); font-weight:var(--weight-semibold); text-align:center; }

.activity-stage__content[data-first-principles-understand-active="true"] { grid-template-columns:minmax(210px,.52fr) minmax(0,1.48fr); gap:var(--space-5); align-items:stretch; }
.activity-stage__content[data-first-principles-understand-active="true"] .activity-copy h2 { font-size:clamp(1.4rem,2.2vw,2rem); margin-bottom:var(--space-2); }
.activity-stage__content[data-first-principles-understand-active="true"] .activity-callout { margin-top:var(--space-3); padding:var(--space-3); }
.activity-stage__content[data-first-principles-understand-active="true"] .math-placeholder { min-height:0; height:100%; display:block; overflow:hidden; border:0; border-radius:0; background:transparent; }
.activity-stage__content[data-first-principles-understand-active="true"] .math-placeholder__grid,
.activity-stage__content[data-first-principles-understand-active="true"] .math-placeholder__formula,
.activity-stage__content[data-first-principles-understand-active="true"] .math-placeholder__caption { display:none; }

@media (max-width:900px) {
  .activity-stage__content[data-first-principles-understand-active="true"] { grid-template-columns:minmax(190px,.48fr) minmax(0,1.52fr); gap:var(--space-4); }
  .first-principles-understand__graph-host { min-height:320px; }
}
@media (max-width:680px) {
  .activity-stage__content[data-first-principles-understand-active="true"] { grid-template-columns:1fr; align-content:start; }
  .activity-stage__content[data-first-principles-understand-active="true"] .math-placeholder { min-height:400px; padding:0; }
  .first-principles-understand { min-height:400px; }
  .first-principles-understand__panel-header { align-items:flex-start; flex-direction:column-reverse; gap:var(--space-1); }
  .first-principles-understand__point-grid,.first-principles-understand__compare,.first-principles-understand__limit-readout { grid-template-columns:1fr; }
  .first-principles-understand__difference-quotient { grid-template-columns:1fr; }
  .first-principles-understand__graph-host { min-height:390px; }
  .first-principles-understand__formula-map { grid-template-columns:minmax(104px,.8fr) minmax(0,1.2fr); }
}
@media (prefers-reduced-motion: reduce) {
  .first-principles-understand__limit-marker { transition:none; }
}
