:root {
  color-scheme: light;
  --ml-ink: #14243a;
  --ml-muted: #526279;
  --ml-line: #d5e0e8;
  --ml-blue: #1267a8;
  --ml-blue-dark: #0b476f;
  --ml-mint: #76ddbd;
  --ml-gold: #f4bd57;
  --ml-red: #b44945;
  --ml-paper: #fff;
  --ml-soft: #eef5f8;
  --ml-night: #102739;
}

.math-lab-page, .math-lab-page * { box-sizing: border-box; }
.math-lab-page { margin: 0; color: var(--ml-ink); background: #f7fafb; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.math-lab-page a { color: inherit; }
.math-lab-skip { position: fixed; z-index: 100; top: -10rem; left: .75rem; padding: .7rem 1rem; border-radius: .55rem; color: #fff; background: var(--ml-blue-dark); }
.math-lab-skip:focus { top: .75rem; }
.math-lab-site-header { display: flex; min-height: 4.6rem; padding: .7rem clamp(1rem, 4vw, 4rem); align-items: center; justify-content: space-between; gap: 2rem; border-bottom: 1px solid #d7e1e6; background: #fff; }
.math-lab-brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--ml-ink); font-size: 1.05rem; font-weight: 800; text-decoration: none; }
.math-lab-brand img { display: block; }
.math-lab-brand > span > span { color: #0878e8; }
.math-lab-site-header nav { display: flex; align-items: center; gap: 1.3rem; color: #33445b; font-size: .84rem; font-weight: 650; }
.math-lab-site-header nav a { text-decoration: none; }
.math-lab-site-header nav a:hover { color: var(--ml-blue); }
.math-lab-site-header a:focus-visible, .math-lab-page__content a:focus-visible, .math-lab button:focus-visible, .math-lab input:focus-visible, .math-lab [tabindex="0"]:focus-visible { outline: 3px solid #0878e8; outline-offset: 4px; }

.math-lab-hero { padding: 2rem clamp(1rem, 5vw, 5.5rem) 4.5rem; color: #edf7fb; background: radial-gradient(circle at 85% 20%, #276c7288, transparent 32%), linear-gradient(135deg, #102739, #0d3248 58%, #124b55); }
.math-lab-hero nav { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 auto 3.6rem; max-width: 76rem; color: #bdd0da; font-size: .76rem; }
.math-lab-hero nav a { color: #d9e8ee; }
.math-lab-hero__grid { display: grid; max-width: 76rem; margin: 0 auto; grid-template-columns: minmax(0, 1.35fr) minmax(16rem, .65fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.math-lab__eyebrow { margin: 0 0 .75rem; color: var(--ml-blue); font-size: .73rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.math-lab-hero .math-lab__eyebrow, .math-lab-course-link .math-lab__eyebrow { color: var(--ml-mint); }
.math-lab-hero h1 { max-width: 50rem; margin: 0; color: #fff; font-size: clamp(2.4rem, 6vw, 5.1rem); letter-spacing: -.055em; line-height: .98; }
.math-lab-hero__lead { max-width: 42rem; margin: 1.5rem 0 1.8rem; color: #cfdee5; font-size: clamp(1rem, 1.7vw, 1.2rem); line-height: 1.75; }
.math-lab-hero blockquote { margin: 0; padding: 1.5rem 0 0 1.5rem; border-top: 1px solid #8bd8c966; border-left: 4px solid var(--ml-mint); color: #dce9ed; font: 600 1.05rem/1.7 Georgia, serif; }
.math-lab-button { display: inline-flex; min-height: 3rem; padding: .78rem 1.15rem; align-items: center; justify-content: center; border: 1px solid #8ee1c8; border-radius: .75rem; color: #103a35; background: var(--ml-mint); font-size: .85rem; font-weight: 800; text-decoration: none; }
.math-lab-button:hover { background: #a0ead4; }
.math-lab-page .math-lab-button--light { color: var(--ml-blue-dark); background: #fff; border-color: #fff; }
.math-lab-page .math-lab-button--light:hover { color: #073b5d; background: #eaf5f8; border-color: #eaf5f8; }
.math-lab-page__content { width: min(76rem, calc(100% - 2rem)); margin: -2rem auto 4rem; }

.math-lab { overflow: hidden; border: 1px solid #cbd9e2; border-radius: 1.5rem; background: #fff; box-shadow: 0 1.5rem 4rem #10273914; }
.math-lab__intro { padding: 2rem clamp(1.1rem, 3vw, 2.5rem) 1.5rem; border-bottom: 1px solid #dbe5ea; }
.math-lab__intro h2, .math-lab__intro h3 { margin: 0; color: var(--ml-ink); font-size: clamp(1.55rem, 3vw, 2.35rem); letter-spacing: -.035em; line-height: 1.15; }
.math-lab__intro > p:last-child { max-width: 52rem; margin: .8rem 0 0; color: var(--ml-muted); line-height: 1.7; }
.math-lab__workspace { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(18rem, .55fr); }
.math-lab__stage { min-width: 0; padding: clamp(1rem, 2.7vw, 2rem); background: linear-gradient(180deg, #eaf5f8, #f8fbfc); }
.math-lab__brief { display: flex; margin: 0 0 1rem; align-items: flex-start; gap: 1rem; }
.math-lab__step { display: grid; flex: 0 0 2.2rem; width: 2.2rem; height: 2.2rem; place-items: center; border-radius: 50%; color: #fff; background: var(--ml-blue-dark); font-weight: 900; }
.math-lab__brief h3 { margin: 0 0 .35rem; font-size: 1.1rem; }
.math-lab__brief p { margin: 0; color: var(--ml-muted); font-size: .84rem; line-height: 1.55; }
.math-lab__graph { position: relative; overflow: hidden; border: 1px solid #a9c2cf; border-radius: 1rem; background: #fff; }
.math-lab__graph svg { display: block; width: 100%; height: auto; touch-action: none; }
.math-lab__grid-line { stroke: #d9e5ea; stroke-width: 1; }
.math-lab__axis { stroke: #6e8795; stroke-width: 2; }
.math-lab__ceiling { stroke: #b44945; stroke-width: 2; stroke-dasharray: 9 8; }
.math-lab__curve { fill: none; stroke: #0d668d; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.math-lab__obstacle { fill: #f4bd57; stroke: #9a6411; stroke-width: 2; }
.math-lab__endpoint { fill: #fff; stroke: #1a7764; stroke-width: 5; }
.math-lab__vertex { fill: #fff; stroke: #0d668d; stroke-width: 5; cursor: grab; }
.math-lab__vertex:active { cursor: grabbing; }
.math-lab__graph text { fill: #3f5867; font-size: 17px; font-weight: 750; }
.math-lab__graph .math-lab__label-ceiling { fill: #8d3431; }
.math-lab__graph-note { margin: .65rem 0 0; color: #526879; font-size: .74rem; line-height: 1.5; }
.math-lab__formula { margin: 1rem 0; padding: .8rem 1rem; border: 1px solid #cadde5; border-radius: .75rem; color: #153d54; background: #f7fbfc; font: 700 clamp(.88rem, 2vw, 1.05rem)/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; overflow-wrap: anywhere; }
.math-lab__status-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.math-lab__status { padding: .65rem .55rem; border: 1px solid #d4dee5; border-radius: .65rem; color: #6a4b1b; background: #fff9ed; font-size: .7rem; line-height: 1.35; text-align: center; }
.math-lab__status strong { display: block; margin-bottom: .15rem; color: #4d5b68; }
.math-lab__status.is-valid { color: #16604f; background: #edf8f4; border-color: #a9d7ca; }
.math-lab__controls { padding: clamp(1rem, 2.7vw, 2rem); border-left: 1px solid #d8e3e9; background: #fff; }
.math-lab__control { display: grid; margin: 0 0 1.15rem; gap: .45rem; color: #30465a; font-size: .78rem; font-weight: 750; }
.math-lab__control span { display: flex; justify-content: space-between; gap: .5rem; }
.math-lab__control output { color: var(--ml-blue-dark); font: 800 .85rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.math-lab__control input { width: 100%; accent-color: var(--ml-blue); }
.math-lab__actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.2rem; }
.math-lab__actions button { min-height: 2.75rem; padding: .65rem .85rem; border: 1px solid var(--ml-blue-dark); border-radius: .65rem; color: #fff; background: var(--ml-blue-dark); font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; }
.math-lab__actions .math-lab__quiet { color: var(--ml-blue-dark); background: #fff; }
.math-lab__feedback { min-height: 3rem; margin: 1rem 0 0; padding: .8rem; border-radius: .65rem; color: #61502e; background: #fff5dc; font-size: .78rem; line-height: 1.55; }
.math-lab__feedback.is-success { color: #155444; background: #e7f7f1; }
.math-lab__feedback.is-error { color: #7c302d; background: #fff0ef; }
.math-lab__panel { padding: 2rem clamp(1rem, 3vw, 2.5rem); border-top: 1px solid #dbe5ea; }
.math-lab__panel[hidden] { display: none; }
.math-lab__panel-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, .75fr); gap: 1.5rem; align-items: start; }
.math-lab__panel h3 { margin: .25rem 0 .6rem; font-size: clamp(1.25rem, 2.5vw, 1.7rem); }
.math-lab__panel p { color: var(--ml-muted); line-height: 1.65; }
.math-lab__answer-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.math-lab__answer-fields label { display: grid; gap: .35rem; color: #344a5d; font-size: .76rem; font-weight: 800; }
.math-lab__answer-fields input { width: 100%; min-height: 2.8rem; padding: .55rem .65rem; border: 1px solid #aebfca; border-radius: .55rem; color: var(--ml-ink); background: #fff; font: inherit; }
.math-lab__identity { padding: 1rem; border: 1px solid #bcd2dc; border-radius: .85rem; background: #f0f7f9; }
.math-lab__identity strong, .math-lab__identity span { display: block; }
.math-lab__identity strong { color: #163f56; font: 800 .95rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.math-lab__identity span { margin-top: .35rem; color: #526879; font-size: .76rem; line-height: 1.55; }
.math-lab__nojs { padding: 1.5rem; color: #213a4e; background: #edf5f8; line-height: 1.7; }

@media (scripting: enabled) {
  .math-lab:not([data-ready="true"]) .math-lab__mount { min-height: 40rem; background: linear-gradient(180deg, #eaf5f8, #f8fbfc); }
}

.math-lab-reading, .math-lab-sources { margin-top: 1.5rem; padding: clamp(1.4rem, 3vw, 2.5rem); border: 1px solid #d6e1e7; border-radius: 1.3rem; background: #fff; }
.math-lab-reading h2, .math-lab-course-link h2, .math-lab-sources h2 { margin: 0; font-size: clamp(1.45rem, 3vw, 2.15rem); letter-spacing: -.035em; }
.math-lab-reading__grid { display: grid; margin-top: 1.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.math-lab-reading__grid article { padding: 1.1rem; border-radius: .85rem; background: #f2f7f9; }
.math-lab-reading__grid strong { color: #123f59; }
.math-lab-reading__grid p, .math-lab-sources p, .math-lab-sources li { color: var(--ml-muted); font-size: .84rem; line-height: 1.7; }
.math-lab-formula { color: #133f59; font: 750 .95em/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.math-lab-boundary { margin: 1.25rem 0 0; padding: 1rem 1.1rem; border-left: 4px solid var(--ml-gold); background: #fff8e9; }
.math-lab-course-link { display: flex; margin-top: 1.5rem; padding: clamp(1.5rem, 4vw, 3rem); align-items: center; justify-content: space-between; gap: 2rem; border-radius: 1.3rem; color: #edf6fa; background: var(--ml-night); }
.math-lab-course-link p:not(.math-lab__eyebrow) { max-width: 45rem; margin-bottom: 0; color: #bfd0d9; font-size: .86rem; line-height: 1.7; }
.math-lab-course-link .math-lab-button { flex: 0 0 auto; max-width: 17rem; text-align: center; }
.math-lab-sources ol { padding-left: 1.2rem; }
.math-lab-sources a { color: var(--ml-blue-dark); }
.math-lab-footer { display: flex; padding: 2rem clamp(1rem, 5vw, 5rem); justify-content: space-between; gap: 1rem; color: #b9cbd5; background: #0c1e2d; font-size: .78rem; }
.math-lab-footer a { color: #fff; font-weight: 800; }

.math-lab--embedded { margin: 1.4rem 0; border-radius: 1.1rem; box-shadow: none; }
.math-lab--embedded .math-lab__intro { padding: 1.35rem; }
.math-lab--embedded .math-lab__intro h3 { font-size: 1.35rem; }
.math-lab--embedded .math-lab__workspace { grid-template-columns: minmax(0, 1.2fr) minmax(15rem, .8fr); }
.math-lab--embedded .math-lab__stage, .math-lab--embedded .math-lab__controls, .math-lab--embedded .math-lab__panel { padding: 1.25rem; }

@media (max-width: 850px) {
  .math-lab-site-header nav a:not(:first-child) { display: none; }
  .math-lab-hero { padding-bottom: 3.5rem; }
  .math-lab-hero nav { margin-bottom: 2.5rem; }
  .math-lab-hero__grid { grid-template-columns: 1fr; }
  .math-lab-hero blockquote { max-width: 38rem; }
  .math-lab__workspace, .math-lab--embedded .math-lab__workspace, .math-lab__panel-grid { grid-template-columns: 1fr; }
  .math-lab__controls { border-top: 1px solid #d8e3e9; border-left: 0; }
  .math-lab-reading__grid { grid-template-columns: 1fr; }
  .math-lab-course-link { align-items: flex-start; flex-direction: column; }
  .math-lab-course-link .math-lab-button { max-width: none; }
}

@media (max-width: 850px) and (scripting: enabled) {
  .math-lab:not([data-ready="true"]) .math-lab__mount { min-height: 63rem; }
}

@media (max-width: 520px) {
  .math-lab-site-header { min-height: 4rem; }
  .math-lab-brand img { width: 36px; height: 36px; }
  .math-lab-hero { padding-top: 1.3rem; }
  .math-lab-hero h1 { font-size: clamp(2.15rem, 12vw, 3.1rem); }
  .math-lab-page__content { width: min(100% - 1rem, 76rem); }
  .math-lab { border-radius: 1rem; }
  .math-lab__intro { padding: 1.3rem 1rem; }
  .math-lab__status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .math-lab__answer-fields { grid-template-columns: 1fr; }
  .math-lab__actions { align-items: stretch; flex-direction: column; }
  .math-lab__actions button { width: 100%; }
  .math-lab-footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .math-lab-page *, .math-lab-page *::before, .math-lab-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media (forced-colors: active) {
  .math-lab, .math-lab__graph, .math-lab__status, .math-lab__panel, .math-lab-reading, .math-lab-course-link, .math-lab-sources { border: 1px solid CanvasText; }
  .math-lab__curve, .math-lab__axis, .math-lab__ceiling, .math-lab__endpoint, .math-lab__vertex, .math-lab__obstacle { forced-color-adjust: auto; }
  .math-lab__status.is-valid { border-width: 3px; }
}