.basics-understand {
  width: 100%; min-height: 0; height: 100%; display: block; overflow: hidden;
  border: 0; border-radius: 0; background: transparent; padding: 0;
}
.basics-understand__panel { height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr); gap: var(--space-3); }
.basics-understand__panel-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.basics-understand__panel-header h3 { margin: 0; font-size: var(--text-lg); }
.basics-understand__eyebrow { color: var(--mode-soft-text); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .04em; text-transform: uppercase; }
.basics-understand__panel-body { min-height: 0; display: grid; gap: var(--space-3); align-content: start; overflow: auto; padding-right: 2px; }
.basics-understand__prompt,.basics-understand__instruction,.basics-understand__takeaway,.basics-understand__insight,.basics-understand__history-note { margin:0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--mode-soft); color: var(--mode-soft-text); line-height: var(--leading-normal); }
.basics-understand__graph-host { min-height: 0; }
.basics-understand__action-row { display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; }
.basics-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; }
.basics-understand__button--primary { border-color:var(--mode-accent); background:var(--mode-soft); color:var(--mode-soft-text); }
.basics-understand__button:focus-visible,.basics-understand select:focus-visible,.basics-understand input:focus-visible { outline:3px solid var(--focus-ring); outline-offset:2px; }
.basics-understand__status { color:var(--text-secondary); font-size:var(--text-sm); }
.basics-understand__coefficients { display:grid; grid-template-columns:repeat(5,minmax(76px,1fr)); gap:var(--space-2); }
.basics-understand__coefficient { display:grid; gap:4px; color:var(--text-secondary); font-size:var(--text-xs); font-weight:var(--weight-semibold); }
.basics-understand__coefficient input,.basics-understand__machine-select { min-height:var(--touch-target-min); width:100%; border:1px solid var(--border-default); border-radius:var(--radius-sm); background:var(--surface-base); color:var(--text-primary); padding:0 var(--space-2); font:inherit; }
.basics-understand__notation-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3); }
.basics-understand__notation-card { min-width:0; 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); }
.basics-understand__notation-card p { margin:0; color:var(--text-secondary); line-height:var(--leading-normal); }
.basics-understand__notation-formula { font-family:var(--font-math); font-size:clamp(1.7rem,4vw,2.8rem); color:var(--mode-soft-text); }
.basics-understand__equivalence,.basics-understand__rule-reveal,.basics-understand__term-result { 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-family:var(--font-math); font-size:clamp(1.2rem,2.8vw,1.8rem); text-align:center; }
.basics-understand__machine { display:grid; grid-template-columns:minmax(130px,.8fr) minmax(130px,1fr) auto auto minmax(130px,1fr); gap:var(--space-3); align-items:center; }
.basics-understand__machine-box { min-height:86px; display:grid; place-items:center; border:1px solid var(--border-default); border-radius:var(--radius-lg); background:var(--surface-subtle); font-family:var(--font-math); font-size:clamp(1.5rem,4vw,2.5rem); }
.basics-understand__machine-box--output { border-color:var(--mode-accent); background:var(--mode-soft); color:var(--mode-soft-text); }
.basics-understand__machine-operator { min-width:70px; padding:var(--space-3); border:2px solid var(--mode-accent); border-radius:var(--radius-lg); color:var(--mode-soft-text); font-family:var(--font-math); font-size:1.5rem; text-align:center; }
.basics-understand__machine-arrow { color:var(--mode-soft-text); font-size:1.55rem; font-weight:var(--weight-bold); text-align:center; }
.basics-understand__timeline { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3); }
.basics-understand__timeline-item { display:grid; gap:var(--space-2); padding:var(--space-4); border-left:4px solid var(--mode-accent); border-radius:0 var(--radius-md) var(--radius-md) 0; background:var(--surface-subtle); }
.basics-understand__timeline-item p { margin:0; color:var(--text-secondary); line-height:var(--leading-normal); }
.basics-understand__timeline-notation { color:var(--mode-soft-text); font-family:var(--font-math); font-size:1.15rem; }
.basics-understand__pattern-list { display:grid; gap:var(--space-2); }
.basics-understand__pattern-row { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-4); border:1px solid var(--border-default); border-radius:var(--radius-md); }
.basics-understand__pattern-input,.basics-understand__pattern-output { font-family:var(--font-math); font-size:clamp(1.15rem,3vw,1.55rem); }
.basics-understand__pattern-output { color:var(--mode-soft-text); font-weight:var(--weight-semibold); }
.basics-understand__term-expression { font-family:var(--font-math); font-size:clamp(1.4rem,3vw,2rem); text-align:center; }
.basics-understand__term-row { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-2); }
.basics-understand__term-card { padding:var(--space-3); border:1px solid var(--border-default); border-radius:var(--radius-md); background:var(--surface-subtle); font-family:var(--font-math); text-align:center; }

.activity-stage__content[data-basics-understand-active="true"] { grid-template-columns:minmax(210px,.52fr) minmax(0,1.48fr); gap:var(--space-5); align-items:stretch; }
.activity-stage__content[data-basics-understand-active="true"] .activity-copy h2 { font-size:clamp(1.4rem,2.2vw,2rem); margin-bottom:var(--space-2); }
.activity-stage__content[data-basics-understand-active="true"] .activity-callout { margin-top:var(--space-3); padding:var(--space-3); }
.activity-stage__content[data-basics-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-basics-understand-active="true"] .math-placeholder__grid,
.activity-stage__content[data-basics-understand-active="true"] .math-placeholder__formula,
.activity-stage__content[data-basics-understand-active="true"] .math-placeholder__caption { display:none; }

@media (max-width: 900px) {
  .activity-stage__content[data-basics-understand-active="true"] { grid-template-columns:minmax(190px,.48fr) minmax(0,1.52fr); gap:var(--space-4); }
  .basics-understand__notation-grid,.basics-understand__timeline { grid-template-columns:1fr; }
  .basics-understand__notation-card,.basics-understand__timeline-item { padding:var(--space-3); }
  .basics-understand__term-row { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:680px) {
  .activity-stage__content[data-basics-understand-active="true"] { grid-template-columns:1fr; align-content:start; }
  .activity-stage__content[data-basics-understand-active="true"] .math-placeholder { min-height:390px; padding:0; }
  .basics-understand { min-height:390px; }
  .basics-understand__coefficients { grid-template-columns:repeat(3,1fr); }
  .basics-understand__machine { grid-template-columns:1fr auto 1fr; }
  .basics-understand__machine-select { grid-column:1/-1; }
  .basics-understand__machine-operator { grid-column:1; }
  .basics-understand__machine-arrow { grid-column:2; }
  .basics-understand__machine-box--output { grid-column:3; }
  .basics-understand__machine-box:not(.basics-understand__machine-box--output) { grid-column:1/-1; }
}
