/* Chosen learning style: borderless surfaces, visible examples, guided practice. */
.topic-wrap { max-width: 680px; margin: 45px auto 0; }
.topic-wrap h1 { font-size: var(--page-title-size); overflow-wrap: break-word; }
.topic-wrap h2 { font-size: 30px; margin: 0 0 18px; }
.topic-lead { font: 21px/1.6 Georgia, serif; color: var(--muted); margin-bottom: 38px; }
.topic-wrap > p:not(.eyebrow):not(.topic-lead), .topic-wrap section > p { font: 18px/1.85 Georgia, serif; }
.topic-section { margin: 40px 0; }
.topic-wrap .element-label { display: table; width: fit-content; max-width: 100%; padding: 4px 9px; border-radius: 3px; background: #285b4610; font: 10px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; text-transform: uppercase; letter-spacing: 1.4px; color: var(--green); margin: 0 0 10px; }
.topic-wrap :is(.definition, .theorem, .worked, .prerequisite, .note, .attention, .warning, .caution):has(> :is(h2, h3, .block-title)) > .element-label { float: right; margin-left: 16px; }
.definition, .theorem { display: flow-root; padding: 22px 25px; border-radius: 5px; margin: 25px 0; }
.definition { background: #edf3e7; }
.theorem { background: #edf1f8; }
.theorem > .element-label { color: #4e6385; }
/* Short underlines distinguish titles; soft tags identify block types. */
.topic-wrap :is(.definition, .theorem, .worked, .prerequisite, .note, .attention, .warning, .caution) > :is(h2, h3),
.topic-wrap .block-title { font: 600 16px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--ink); margin: 0 0 16px; padding: 0; }
.topic-wrap :is(.definition, .theorem, .worked, .prerequisite, .note, .attention, .warning, .caution) > :is(h2, h3)::after,
.topic-wrap .block-title::after { content: ''; display: block; width: 28px; height: 2px; background: #285b4680; margin-top: 8px; }

.definition p:not(.element-label), .theorem > p:not(.element-label), .disclosure p, .attention p:not(.element-label), .caution p:not(.element-label), .warning p:not(.element-label) { font: 17px/1.85 Georgia, serif; }
.definition p:last-child, .attention p:last-child, .caution p:last-child, .warning p:last-child { margin-bottom: 0; }
.attention, .caution, .warning { display: flow-root; background: #faf1dd; border-radius: 5px; padding: 18px 20px; margin: 28px 0; }
.attention > .element-label, .caution > .element-label, .warning > .element-label { color: #80612a; }
.disclosure { margin-top: 16px; }
.disclosure summary { padding: 12px 0; font-size: 13px; color: var(--green); }
.disclosure p { margin-top: 10px; }
.display-math { padding: 14px 0; overflow-x: auto; font-size: 22px; }
.display-math math { margin: 0; }
.topic-wrap mark { color: inherit; background: linear-gradient(transparent 32%, #f3df8cb3 32%, #f3df8cb3 91%, transparent 91%); padding: .06em .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; border-radius: .15em; }
.topic-wrap mark.math-marker { display: inline-block; vertical-align: baseline; background: linear-gradient(transparent 7%, #f3df8cb3 7%, #f3df8cb3 94%, transparent 94%); padding: .12em .22em; line-height: 1.4; }
.math-marker math { font-size: 1.05em; }
.highlight-equation { display: flex; justify-content: center; max-width: 100%; overflow-x: auto; margin: 22px 0 30px; padding: 10px 0; font-size: 25px; }
.highlight-equation .math-marker { flex-shrink: 0; padding: .18em .4em; }
.worked-examples { display: grid; grid-template-columns: 1fr; gap: 20px; }

.topic-figure { margin: 25px 0; }
.topic-figure img, .topic-figure svg, .topic-widget > svg { display: block; width: 100%; height: auto; }
.widget-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 16px 24px; padding-top: 20px; }
.widget-controls label { flex: 1 1 160px; font-size: 12px; color: var(--ink); }
.widget-controls output { float: right; color: var(--green); font-variant-numeric: tabular-nums; }
.widget-controls input { display: block; width: 100%; min-height: 44px; margin: 0; accent-color: var(--green); }
.widget-controls button { background: #e7ece1; font-size: 12px; }
.widget-result { font-size: 13px; color: var(--green); margin: 16px 0 0; }
.practice { margin: 45px 0 30px; }
.quiz-card { background: var(--practice-surface); padding: 26px; border-radius: 7px; }
.practice h2 { color: #645078; }
.topic-wrap fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.topic-wrap legend { font-size: 16px; line-height: 1.6; padding: 0; margin-bottom: 15px; }
.answers { display: grid; grid-template-columns: 1fr; gap: 6px; }
.answer { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; background: #ece6f1; border-radius: 4px; min-height: 48px; padding: 14px 16px; font-size: 14px; color: var(--ink); cursor: pointer; }
.answer:has(input:checked) { background: #ddd1e8; }
.answer input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.answer:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }
.feedback { font-size: 13px; margin: 14px 0 0; line-height: 1.7; }
.feedback:empty { display: none; }
.answer-verdict { margin-left: auto; font-size: 10px; white-space: nowrap; }
.answer[data-result=correct], .answer[data-result=correct]:has(input:checked), .feedback[data-result=correct] { background: #e0eedb; color: #29513a; }
.answer[data-result=incorrect], .answer[data-result=incorrect]:has(input:checked), .feedback[data-result=incorrect] { background: #f6e3df; color: #843f35; }
.feedback[data-result] { padding: 12px 14px; border-radius: 5px; }
.topic-wrap .question-number { margin-bottom: 20px; }
.table-scroll { overflow-x: auto; }
.topic-wrap table { border-collapse: collapse; width: 100%; font-size: 13px; }
.topic-wrap caption { text-align: left; font-size: 11px; color: var(--muted); margin-bottom: 10px; }
.topic-wrap th, .topic-wrap td { text-align: left; padding: 12px; }
.topic-wrap thead { background: #f0f3ec; }
.topic-wrap th { font-weight: 500; }
.derivation { padding-left: 22px; font: 17px/1.8 Georgia, serif; }
.derivation li { padding: 6px 0; }
.topic-wrap pre { padding: 20px; background: #f0f0ed; overflow-x: auto; border-radius: 4px; font: 12px/1.8 ui-monospace, monospace; }
.topic-wrap blockquote { margin: 28px 0; padding: 0 20px; font: italic 21px/1.6 Georgia, serif; }
.topic-wrap blockquote cite { display: block; font: 11px/1.7 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--muted); margin-top: 10px; }
section[id], figure[id] { scroll-margin-top: 24px; }
@media(max-width:600px) {
  .topic-wrap { margin-top: 30px; }
  .definition, .theorem { padding: 18px; }
  .quiz-card { padding: 20px; }
  .display-math { font-size: 20px; }
}
/* Examples are visible grey blocks; graphs and widgets stay transparent. */
.worked { display: flow-root; margin: 24px 0; padding: 18px 24px; background: #f1f2ef; border-radius: 6px; }
.worked > p:last-child { margin-bottom: 0; }
.limits-widget { margin: 25px 0 35px; }
@media(max-width:600px) { .worked { padding: 18px; } }

.topic-widget { user-select: none; -webkit-user-select: none; }
.topic-widget img, .topic-widget svg { -webkit-user-drag: none; }
.widget-instruction, .topic-figure figcaption { font: 12px/1.7 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--muted); margin: 16px 0 0; text-align: center; }
#limit-handle { cursor: grab; touch-action: none; }
#limit-handle[data-dragging] { cursor: grabbing; }
#limit-handle:focus-visible #limit-moving-point { stroke: #285b46; stroke-width: 3; }

.limits-plot { position: relative; }
.limits-plot > svg { display: block; width: 100%; }
.graph-axis { position: absolute; font-size: 15px; pointer-events: none; }
.graph-axis-x { left: 93%; top: 89%; }
.graph-axis-y { left: 3%; top: 1%; }
#limit-handle, #limit-handle:focus, #limit-handle:focus-visible { outline: none; -webkit-tap-highlight-color: transparent; }
#limit-focus-ring { visibility: hidden; pointer-events: none; }
#limit-handle:focus-visible #limit-focus-ring { visibility: visible; }
.limit-album { margin: 24px 0 35px; }
.scenario-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.scenario-choices legend { font: 11px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--muted); margin-bottom: 10px; }
.scenario-choices label { position: relative; cursor: pointer; }
.scenario-choices input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.scenario-choices span { display: flex; align-items: center; min-height: 44px; padding: 9px 14px; border-radius: 5px; font-size: 12px; background: #f1f2ef; color: var(--ink); }
.scenario-choices input:checked + span { background: var(--tint); color: var(--green); }
.scenario-choices input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 3px; }
.scenario-panel { display: none; }
.limit-album:has(input[value=jump]:checked) .scenario-jump,
.limit-album:has(input[value=unbounded]:checked) .scenario-unbounded,
.limit-album:has(input[value=oscillation]:checked) .scenario-oscillation { display: block; }
.scenario-panel .topic-figure { margin: 12px 0 18px; }
.note { display: flow-root; margin: 30px 0; padding: 18px 22px; border-radius: 5px; background: #f1f2ef; }
.note > p:not(.element-label) { font: 17px/1.8 Georgia, serif; margin: 0; }


.quiz-status, .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.continuity-widget { margin: 25px 0 35px; }
.continuity-readouts { font-size: 16px; }
.graph-handle { cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.graph-handle[data-dragging] { cursor: grabbing; }
.graph-handle:focus, .graph-handle:focus-visible { outline: none; }
.graph-focus-ring { visibility: hidden; pointer-events: none; }
.graph-handle:focus-visible .graph-focus-ring { visibility: visible; }
#continuity-explorer svg { color: #a67936; }
#continuity-explorer svg[data-continuous=true] { color: #285b46; }
.continuity-curve { stroke: currentColor; transition: stroke .2s; }
.continuity-branch:hover .continuity-curve,
.continuity-branch:focus-visible .continuity-curve { stroke-width: 4; }
#continuity-join-glow { transition: opacity .2s; }
.continuity-album { margin: 24px 0 35px; }
.continuity-album:has(input[value=missing]:checked) .continuity-missing,
.continuity-album:has(input[value=misplaced]:checked) .continuity-misplaced,
.continuity-album:has(input[value=jump]:checked) .continuity-jump,
.continuity-album:has(input[value=unbounded]:checked) .continuity-unbounded,
.continuity-album:has(input[value=oscillation]:checked) .continuity-oscillation { display: block; }
.ivt-widget { margin: 25px 0 35px; }
.ivt-readouts { font-size: 14px; }
.ivt-label { position: absolute; font-size: 13px; pointer-events: none; }
.ivt-label-a { left: 12.5%; top: 90%; }
.ivt-label-b { left: 85%; top: 90%; }
.ivt-label-low { left: 1%; top: 79%; }
.ivt-label-high { left: 1%; top: 14%; }
#ivt-target:hover #ivt-target-line, #ivt-target:focus-visible #ivt-target-line { stroke-width: 3.5; }
.ivt-c { top: 90%; transform: translateX(-50%); color: var(--green); }
.ivt-c[hidden], .ivt-c-single { display: none; }
.limits-plot:has(svg[data-intersections="1"]) .ivt-c-single { display: inline; }
.limits-plot:has(svg[data-intersections="1"]) .ivt-c-multiple { display: none; }
.ivt-label-k { left: 89%; transform: translateY(-50%); color: #80612a; }
.derivative-widget, .rules-widget, .trig-widget, .inverse-widget, .hyperbolic-widget, .implicit-widget { margin: 25px 0 35px; }
.derivative-readouts, .rules-readouts, .trig-readouts, .inverse-readouts, .implicit-readouts { font-size: 14px; }
.derivative-change { position: absolute; font-size: 12px; color: #686e66; pointer-events: none; }
.derivative-change[hidden] { display: none; }
.derivative-run { transform: translateX(-50%); }
.derivative-rise { transform: translateY(-50%); white-space: nowrap; }
.rules-label { position: absolute; font-size: 13px; transform: translate(-50%, -50%); pointer-events: none; }
.rules-label[hidden] { display: none; }
.rules-base { left: 42.1875%; top: 87%; }
.rules-side { left: 20%; top: 58%; }
.trig-label { position: absolute; font-size: 13px; pointer-events: none; }
.trig-upper { top: 32%; }
.trig-lower { top: 79%; }
.trig-zero { left: 10.9375%; transform: translateX(-50%); }
.trig-pi { left: 50%; transform: translateX(-50%); }
.trig-two-pi { left: 89.0625%; transform: translateX(-50%); }
.trig-x { left: 94%; }
.inverse-axis { position: absolute; font-size: 13px; pointer-events: none; }
.inverse-axis-x { left: 82%; top: 85%; }
.inverse-axis-y { left: 18%; top: 1%; }
.implicit-axis { position: absolute; font-size: 13px; pointer-events: none; }
.implicit-axis-x { left: 88%; top: 48%; }
.implicit-axis-y { left: 52%; top: 1%; }

.prerequisite { display: flow-root; background: #f7ece7; border-radius: 5px; padding: 18px 20px; margin: 25px 0; }
.prerequisite > .element-label { color: #895d4e; }
.prerequisite p:not(.element-label) { font: 17px/1.85 Georgia, serif; }
.prerequisite p:last-child { margin-bottom: 0; }

.algebra-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.comparison-plot { position: relative; }
@media(max-width:600px) { .algebra-comparison { grid-template-columns: 1fr; gap: 28px; } }

.squeeze-widget { margin: 28px 0 36px; }
.squeeze-readouts { font-size: 15px; }

@media(max-width:600px) { .squeeze-widget svg text { font-size: 20px; } }

.graph-legend { position: absolute; right: 10%; bottom: 15%; display: flex; align-items: center; gap: 9px; width: fit-content; padding: 8px 11px; border-radius: 4px; background: #edf1e9; color: var(--muted); font: 12px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; pointer-events: none; }
.legend-curve { display: inline-block; width: 18px; height: 2px; background: #285b46; }

.graph-feedback { position: absolute; width: 108px; min-height: 54px; max-width: calc(100% - 16px); padding: 6px 9px; border-radius: 4px; background: #edf1e9; color: var(--ink); font-size: 12px; line-height: 1.7; pointer-events: none; }
.graph-feedback > span { display: block; white-space: nowrap; }
.graph-feedback output { font-variant-numeric: tabular-nums; }
@media(max-width:600px) { .graph-feedback { width: 88px; min-height: 46px; padding: 4px 7px; font-size: 11px; } }


.squeeze-plot { position: relative; }
.squeeze-plot > svg { display: block; width: 100%; }
.squeeze-plot .squeeze-legend { display: grid; left: auto; top: auto; right: 10%; bottom: 29%; gap: 3px; padding: 6px; line-height: 1.4; }
.squeeze-legend > span { display: flex; align-items: center; gap: 5px; }
.squeeze-legend i { display: inline-block; flex: 0 0 12px; width: 12px; }
.legend-upper { border-top: 2px solid #a67936; }
.legend-lower { border-top: 2px solid #617a9a; }
@media(max-width:600px) { .squeeze-plot .squeeze-legend { left: calc(50% + 20px); top: 4px; right: auto; bottom: auto; padding: 5px; gap: 2px; font-size: 10.5px; line-height: 1.2; } }

.widget-readouts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 32px; width: 100%; margin-top: 12px; padding: 12px 16px; border-radius: 5px; background: #edf1e9; text-align: center; }
.widget-readouts output { font-variant-numeric: tabular-nums; }

.infinite-widget { margin: 28px 0 36px; }
.infinite-widget .scenario-choices { margin-bottom: 18px; }
.infinite-plot, .slant-plot { position: relative; }
.infinite-plot > svg { display: block; width: 100%; }
.infinite-widget .graph-legend, .slant-figure .graph-legend { display: grid; gap: 6px; }
.infinite-widget .graph-legend > span, .slant-figure .graph-legend > span { display: flex; align-items: center; gap: 9px; }
.asymptote-key { display: inline-block; width: 18px; border-top: 2px dashed #a67936; }
.infinite-widget .pole-legend { bottom: 8%; }
.infinite-widget .tails-legend { bottom: 25%; }
.slant-figure .graph-legend { bottom: 4%; right: 7%; }
@media(max-width:600px) { .infinite-widget svg text { font-size: 18px; } .infinite-widget .graph-legend { font-size: 11px; gap: 3px; padding: 6px 8px; } }

.initial-view-key { display: inline-block; width: 18px; height: 10px; background: #dbe3ee; }
.derivative-legend { right: 6%; bottom: 18%; display: grid; gap: 4px; padding: 6px 8px; font-size: 11px; line-height: 1.3; }
.derivative-legend > span { display: flex; align-items: center; gap: 7px; }
.derivative-secant-key, .derivative-tangent-key { display: inline-block; width: 18px; height: 2px; background: #617a9a; }
.derivative-tangent-key { background: #a67936; }
@media(max-width:600px) { .derivative-legend { font-size: 9.5px; padding: 5px 6px; gap: 3px; } }
.chain-widget { margin: 28px 0 36px; }
.chain-tank { display: block; width: 100%; max-height: 440px; }
.chain-values { gap: 10px 24px; }
.chain-rates { margin-top: 6px; font-size: 15px; }

.higher-widget { margin: 28px 0 36px; }
.higher-widget svg { display: block; width: 100%; overflow: visible; }
.higher-values { gap: 10px 24px; }
@media(max-width:600px) { .higher-widget svg { min-width: 440px; } .higher-widget { overflow-x: auto; } }

.higher-playback { display: flex; justify-content: center; margin-bottom: 8px; }
.higher-playback button { font: inherit; font-size: 14px; color: #285b46; background: #edf1e9; border: 0; border-radius: 4px; padding: 9px 22px; min-width: 90px; cursor: pointer; }
.higher-playback button:hover { background: #e1e9dc; }
.higher-playback button:focus-visible { outline: 2px solid #285b46; outline-offset: 3px; }

.topic-coming-soon { margin: 40px 0 48px; padding: 22px 12px; text-align: center; }
.coming-soon-sketch { display: block; max-width: 100%; margin: 0 auto 16px; overflow: visible; }
.topic-wrap .coming-soon-heading { margin: 0 0 8px; font: 500 20px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: var(--green); }
.topic-wrap .coming-soon-caption { margin: 0 auto; max-width: 360px; font: 14px/1.7 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: var(--muted); }
.coming-soon-pencil { transform: translate(197px, 73px); }
.coming-soon-surprise { opacity: 0; }
@media(prefers-reduced-motion:no-preference) {
  .coming-soon-pencil { transform: none; offset-path: path('M42 73h53c9 0 8-18 17-18s4 30 14 30 9-12 19-12h52'); offset-anchor: 0px 0px; offset-position: 0px 0px; offset-rotate: 0deg; animation: pencil-doodle 5s linear infinite; }
  .coming-soon-line { stroke-dasharray: 1; animation: pencil-ink 5s linear infinite; }
  .coming-soon-surprise { animation: pencil-oops 5s linear infinite; }
  @keyframes pencil-doodle { 0%,8% { offset-distance: 0%; opacity: 1; } 78%,90% { offset-distance: 100%; opacity: 1; } 98% { offset-distance: 100%; opacity: 0; } 99% { offset-distance: 0%; opacity: 0; } 100% { offset-distance: 0%; opacity: 1; } }
  @keyframes pencil-ink { 0%,8% { stroke-dashoffset: 1; opacity: 1; } 78%,90% { stroke-dashoffset: 0; opacity: 1; } 98%,100% { stroke-dashoffset: 0; opacity: 0; } }
  @keyframes pencil-oops { 0%,26% { opacity: 0; } 32%,55% { opacity: 1; } 64%,100% { opacity: 0; } }
}

.graph-legend.inverse-legend { display: grid; left: auto; right: 20%; top: auto; bottom: 15%; gap: 3px; padding: 6px 8px; font-size: 11px; }
.inverse-legend > span,.hyperbola-legend > span { display: flex; align-items: center; gap: 6px; }
.inverse-key { display: inline-block; width: 18px; border-top: 2px solid #a67936; }
.inverse-mirror-key { display: inline-block; width: 18px; border-top: 1px dashed #aab6a3; }
.graph-legend.hyperbola-legend { display: grid; gap: 5px; right: 10%; bottom: 10%; font-size: 12px; }
@media(max-width:600px) { .graph-legend.inverse-legend { font-size: 9px; padding: 4px 6px; } .graph-legend.hyperbola-legend { font-size: 10px; } }

.graph-legend.trig-shared-legend { display: flex; top: 0; bottom: auto; right: 10%; gap: 18px; padding: 5px 8px; }
.trig-shared-legend > span { display: flex; align-items: center; gap: 6px; }
@media (max-width: 600px) { .graph-legend.trig-shared-legend { gap: 10px; font-size: 10px; } }
.implicit-legend > span { display: flex; align-items: center; gap: 6px; }
.graph-legend.implicit-legend { display: grid; right: 16%; bottom: 8%; gap: 3px; font-size: 11px; padding: 5px 7px; }

.hyperbolic-album { margin: 24px 0 35px; }
.hyperbolic-album:has(input[value=sinh]:checked) .hyperbolic-sinh,
.hyperbolic-album:has(input[value=cosh]:checked) .hyperbolic-cosh,
.hyperbolic-album:has(input[value=tanh]:checked) .hyperbolic-tanh { display: block; }

.graph-album > .scenario-choices { justify-content: center; gap: 6px 18px; margin-top: 14px; }
.graph-album > .scenario-choices legend { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.graph-album > .scenario-choices span { padding: 5px 9px; border-radius: 0; background: transparent; color: var(--muted); font-size: 13px; }
.graph-album > .scenario-choices input:checked + span { background: transparent; color: var(--green); box-shadow: inset 0 -2px var(--green); }

.inverse-summary { gap: 12px 22px; font-size: 13px; }