:root {
  font-family: Arial, Helvetica, sans-serif;
  color: #243746;
  background: #f4f7fa;
  font-size: 16px;
  line-height: 1.55;
  --blue: #1f4e79;
  --border: #cbd6df;
  --muted: #526575;
  --good: #176342;
  --bad: #a82f35;
  --assembly: #1f4e79;
  --testing: #a35d14;
  --demand: #657488;
  --objective: #7542ad;
}

* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
a { color: var(--blue); text-underline-offset: 3px; }
p { margin: .5rem 0 1rem; }
h1, h2, h3 { color: #193e60; line-height: 1.2; margin: 0 0 1rem; }
h1 { font-size: 2.5rem; letter-spacing: -.025em; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }
button { border-radius: 5px; padding: .65rem 1rem; min-height: 44px; cursor: pointer; line-height: 1.3; font-weight: 600; }
button:disabled { cursor: default; opacity: .5; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible, .table-scroll:focus-visible { outline: 3px solid #bf7700; outline-offset: 3px; }
.primary { background: var(--blue); color: white; border: 1px solid var(--blue); }
.primary:hover:not(:disabled) { background: #173f64; }
.secondary { background: white; color: var(--blue); border: 1px solid #97afc2; }
.secondary:hover:not(:disabled) { background: #edf3f8; }
.quiet { border: 1px solid transparent; background: transparent; color: var(--blue); }
.quiet:hover { text-decoration: underline; }

.site-header { background: white; border-bottom: 1px solid var(--border); }
.header-inner { max-width: 1480px; margin: auto; padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.site-name { font-size: 1.15rem; font-weight: 700; color: #273d4d; text-decoration: none; }
.site-header nav { display: flex; gap: 1.5rem; font-size: .94rem; }
.page { max-width: 1480px; margin: auto; padding: 2rem; }
.page-heading { padding: 1.6rem 1.9rem; margin-bottom: 1.5rem; border-radius: 8px; background: #193e60; color: white; }
.page-heading h1 { color: white; margin-bottom: .6rem; }
.eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 .5rem; color: #c4dce9; }
.lead { color: #e1eef3; max-width: 850px; margin: 0; font-size: 1.05rem; }
.panel { background: white; border: 1px solid var(--border); border-radius: 8px; min-width: 0; }
.case-panel { padding: 1.5rem 1.8rem; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.section-heading h2, .section-heading h3 { margin-bottom: .8rem; }
.scenario-label { display: inline-block; border: 1px solid #c7dbe9; padding: .25rem .6rem; color: #31576e; border-radius: 4px; font-size: .82rem; line-height: 1.5; flex-shrink: 1; max-width: 100%; overflow-wrap: anywhere; }
.case-description { max-width: 1000px; margin-top: 0; }
.parameter-form { margin-top: 1.4rem; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font-size: 1rem; font-weight: 700; color: #193e60; margin: 0 0 .5rem; padding: 0; }
.capacity-inputs { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
.field { display: flex; align-items: center; gap: .8rem; }
.field label { font-size: .94rem; }
input { color: #243746; background: white; border: 1px solid #90a5b5; border-radius: 4px; padding: .5rem .65rem; min-height: 44px; font-variant-numeric: tabular-nums; max-width: 100%; }
.field input { width: 140px; }
input[aria-invalid="true"] { border: 2px solid var(--bad); }
.table-scroll { position: relative; overflow-x: auto; max-width: 100%; margin: 1rem 0; }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
caption { text-align: left; font-weight: 700; margin-bottom: .55rem; color: #213f57; }
th { background: #edf3f8; color: #233e53; text-align: left; font-weight: 700; }
th, td { border-bottom: 1px solid #d5dfe7; padding: .65rem .7rem; vertical-align: middle; }
td { font-variant-numeric: tabular-nums; }
.unit { font-size: .8rem; font-weight: 400; color: var(--muted); white-space: nowrap; }
.parameter-table { min-width: 680px; table-layout: fixed; }
.parameter-table th:first-child { width: 22%; }
.parameter-table th:not(:first-child) { width: 19.5%; }
.parameter-table th[scope="row"] { background: white; white-space: nowrap; font-weight: 600; }
.parameter-table input { width: 100%; }
.parameter-table .variable { margin-left: .4rem; color: #657788; }
.variable { font-style: italic; }
.parameter-actions { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; }
.entry-note { color: var(--muted); font-size: .86rem; line-height: 1.5; }
.parameter-form > .entry-note { margin: .7rem 0 0; }
.input-errors { padding: .8rem 1rem; border-left: 4px solid var(--bad); background: #fff2f2; color: #85282e; margin: 1rem 0 0; }
.input-errors:empty { display: none; }
.case-support { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid #dfe7ed; }
.case-support .table-scroll { margin: 0 0 .65rem; }
.case-support p:last-child { margin-bottom: 0; }
.cm-table { min-width: 365px; }
.cm-table th:first-child { width: 40%; }
.cm-table td { text-align: right; }
.model-panel { padding: .1rem 0 0; }
.model-panel h3 { margin-bottom: .4rem; }
.model-panel .entry-note { margin: 0 0 .6rem; }
.model-equations { font-variant-numeric: tabular-nums; font-size: .95rem; color: #29475e; line-height: 1.65; overflow-wrap: anywhere; }
.model-equations p { margin: .2rem 0; }
.model-equations .objective { font-weight: 700; margin-bottom: .35rem; }

.simplex-section { margin-top: 2rem; scroll-margin-top: 1rem; }
.step-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1rem; }
.step-toolbar h2 { margin-bottom: .45rem; }
.step-introduction { font-size: .92rem; color: var(--muted); max-width: 780px; margin: 0; }
.step-controls { display: flex; align-items: center; gap: .65rem; flex-shrink: 0; }
.step-number { min-width: 52px; text-align: center; font-size: .88rem; font-weight: 700; white-space: nowrap; }
.current-status { padding: .9rem 1.1rem; margin-bottom: 1rem; border: 1px solid #c6dbe7; border-left: 4px solid var(--blue); border-radius: 4px; background: #eaf3f8; color: #294b62; font-size: .94rem; }
.simplex-workspace { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.15fr); align-items: start; gap: 1.2rem; }
.plot-panel, .tableau-panel { padding: 1.25rem; }
.panel-note { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.plot-wrap { min-width: 0; }
#simplex-plot { display: block; width: 100%; height: auto; overflow: visible; }
#simplex-plot text { font-family: Arial, Helvetica, sans-serif; }
.plot-grid { fill: none; stroke: #e0e7ed; stroke-width: 1; }
.plot-axis { fill: none; stroke: #667d8c; stroke-width: 1.4; }
.plot-tick { fill: #526575; font-size: 12px; }
.plot-label { fill: #334e62; font-size: 14px; }
.constraint-assembly { fill: none; stroke: var(--assembly); stroke-width: 2.2; }
.constraint-testing { fill: none; stroke: var(--testing); stroke-width: 2.2; }
.constraint-demand { fill: none; stroke: var(--demand); stroke-width: 1.8; stroke-dasharray: 7 5; }
.feasible-region { fill: #e9f3eb; stroke: #96b69e; stroke-width: 1; }
.objective-line { fill: none; stroke: var(--objective); stroke-width: 2; stroke-dasharray: 5 4; }
.simplex-path, .path-segment { fill: none; stroke: var(--good); stroke-width: 3; }
.path-segment { stroke-width: 2; stroke-dasharray: 4 5; opacity: .55; }
.corner-point { fill: white; stroke: #536b79; stroke-width: 1.5; }
.current-point { fill: var(--good); stroke: white; stroke-width: 2.5; }
.corner-label { fill: #344f61; font-size: 12px; stroke: white; stroke-width: 3px; paint-order: stroke; }
.plot-legend { list-style: none; padding: 0; margin: .6rem 0 .9rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .9rem; font-size: .8rem; color: #526575; }
.plot-legend li { display: flex; align-items: center; gap: .55rem; }
.legend-line { display: inline-block; width: 24px; flex: 0 0 24px; height: 0; border-top: 2px solid var(--assembly); }
.legend-line.testing { border-color: var(--testing); }
.legend-line.demand { border-color: var(--demand); border-top-style: dashed; }
.legend-line.objective { border-color: var(--objective); border-top-style: dashed; }
.legend-area { display: inline-block; width: 24px; flex: 0 0 24px; height: 11px; border: 1px solid #96b69e; background: #e9f3eb; }
.legend-point { width: 11px; height: 11px; background: var(--good); border-radius: 50%; margin: 0 6.5px; flex: 0 0 11px; }
.plot-panel > .entry-note { margin-bottom: 0; }
.tableau-panel h3 { margin-bottom: .55rem; }
.pivot-label { margin: 0; min-height: 2.5rem; font-size: .89rem; color: #455f73; }
.tableau-wrap { margin: .9rem 0 .75rem; }
.simplex-tableau { min-width: 475px; font-size: .85rem; }
.simplex-tableau th, .simplex-tableau td { padding: .55rem .45rem; text-align: right; white-space: nowrap; }
.simplex-tableau th:first-child, .simplex-tableau td:first-child { text-align: left; }
.simplex-tableau th[scope="row"] { background: white; }
.simplex-tableau tr.objective-row { border-top: 2px solid #8ba5b8; }
.simplex-tableau tr.objective-row td, .simplex-tableau tr.objective-row th { color: #193e60; font-weight: 700; }
.simplex-tableau .entering, .simplex-tableau tr .entering { background: #f0e7fa; color: #583181; }
.simplex-tableau .leaving, .simplex-tableau tr.leaving td, .simplex-tableau tr.leaving th { background: #e4edf6; }
.simplex-tableau .pivot, .simplex-tableau tr.leaving .pivot { background: #fff1d1; color: #80510c; font-weight: 700; outline: 2px solid #c99035; outline-offset: -2px; }
.simplex-tableau .minimum, .simplex-tableau tr.leaving .minimum { background: #e2f1e7; color: var(--good); font-weight: 700; }
.tableau-key { display: flex; flex-wrap: wrap; gap: .4rem .9rem; color: #526575; font-size: .76rem; margin-bottom: 1rem; }
.tableau-key span { display: flex; gap: .4rem; align-items: center; }
.tableau-key i { display: inline-block; width: 12px; height: 12px; border: 1px solid transparent; }
.key-entering { background: #f0e7fa; border-color: #d7c0ed !important; }
.key-leaving { background: #e4edf6; border-color: #b4c8dd !important; }
.key-pivot { background: #fff1d1; border-color: #c99035 !important; }
.key-minimum { background: #e2f1e7; border-color: #9bc6ac !important; }
details { border-top: 1px solid #dfe7ed; padding-top: .8rem; margin-top: .8rem; }
summary { color: #244c69; cursor: pointer; font-size: .9rem; font-weight: 600; }
.guide-definitions { font-size: .84rem; margin: .8rem 0 0; }
.guide-definitions dt { font-weight: 700; color: #344f61; margin-top: .65rem; }
.guide-definitions dd { color: #526575; margin: .15rem 0 0; }
.guide-content { font-size: .89rem; color: #455f71; margin-top: .85rem; }
.guide-content p { margin: .65rem 0; }
.guide-content h4 { font-size: .94rem; color: #244c69; margin: 1rem 0 .4rem; }
.algorithm-steps { padding-left: 1.3rem; margin: .7rem 0; }
.algorithm-steps li { padding-left: .15rem; margin: .65rem 0; }
.step-explanation { border-left: 3px solid #a8c4d8; padding-left: .85rem; }
.guide-equation { font-variant-numeric: tabular-nums; font-weight: 600; color: #193e60; overflow-wrap: anywhere; padding: .65rem .8rem; background: #edf3f8; border-radius: 4px; }
.stop-guide { margin-top: 1rem; padding: 1rem 1.2rem; }
.stop-guide > summary { font-size: .98rem; }
.stop-guide .guide-content > p { max-width: 1050px; }
.corner-table { max-width: 900px; min-width: 440px; }
.corner-table td { text-align: right; }
.corner-table td:last-child { text-align: left; }
.corner-table .optimal-corner td { background: #eef7f1; color: #20573b; font-weight: 600; }
.row-operations > .entry-note { margin: .7rem 0 0; }
.row-operations .table-scroll { margin-top: .6rem; }
.operation-table { font-size: .82rem; }
.operation-table th, .operation-table td { padding: .45rem .5rem; }
.operation-table td:last-child { overflow-wrap: anywhere; }
.terminal { margin: 1rem 0 0; padding: .8rem 1rem; background: #eef7f1; border-left: 4px solid var(--good); color: #20573b; font-size: .9rem; }
.terminal:empty, .simplex-result:empty { display: none; }
.simplex-result { margin-top: 1rem; border: 1px solid #b9d6c4; border-radius: 6px; background: #eef7f1; padding: 1rem 1.2rem; color: #20573b; }
.simplex-result p { margin: .3rem 0; }
.simplex-result table { margin: .6rem 0 0; }
.simplex-result th { background: #e4f0e9; }
.model-note { margin-top: 1.4rem; font-size: .85rem; color: #526575; }
.model-note p { margin: .4rem 0; }
.practice-footer { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: .85rem; color: var(--muted); }
.practice-footer p { margin: 0; }
.notice { margin: 1rem; border: 1px solid #ccab68; background: #fff8e9; color: #604415; padding: 1rem; }
.skip { position: absolute; left: 1rem; top: -5rem; background: white; padding: .5rem 1rem; z-index: 5; }
.skip:focus { top: 1rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

@media (max-width: 1160px) {
  .step-toolbar { align-items: flex-start; flex-direction: column; gap: .9rem; }
  .simplex-workspace { grid-template-columns: minmax(0, .9fr) minmax(0, 1.15fr); gap: 1rem; }
  .plot-panel, .tableau-panel { padding: 1rem; }
}
@media (max-width: 880px) {
  .page { padding: 1.5rem; }
  .header-inner { padding: 1rem 1.5rem; }
  .case-panel { padding: 1.3rem; }
  .simplex-workspace { grid-template-columns: minmax(0, 1fr); }
  .plot-panel { padding: 1.25rem; }
  .plot-wrap { max-width: 680px; margin: auto; }
  .plot-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case-support { gap: 1.25rem; }
}
@media (max-width: 620px) {
  .page { padding: 1.1rem 1rem; }
  .header-inner { padding: 1rem; align-items: flex-start; }
  .site-header nav { flex-direction: column; gap: .3rem; font-size: .85rem; }
  .site-name { font-size: 1rem; }
  .page-heading { padding: 1.3rem; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.35rem; }
  .lead { font-size: 1rem; }
  .case-panel { padding: 1.1rem; }
  .section-heading { flex-wrap: wrap; gap: .2rem; margin-bottom: .6rem; }
  .section-heading h2, .section-heading h3 { margin-bottom: .4rem; }
  .scenario-label { margin-bottom: .4rem; }
  .capacity-inputs { display: grid; grid-template-columns: minmax(0, 1fr); gap: .65rem; }
  .field { justify-content: space-between; }
  .field input { width: 135px; }
  .parameter-actions button { flex: 1 1 auto; }
  .case-support { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .model-panel { padding-top: .8rem; border-top: 1px solid #dfe7ed; }
  .cm-table { min-width: 300px; font-size: .85rem; }
  .cm-table th, .cm-table td { padding: .55rem .4rem; }
  .simplex-section { margin-top: 1.5rem; }
  .step-controls { flex-wrap: wrap; width: 100%; gap: .5rem; }
  .step-controls button { padding: .65rem .7rem; flex: 1 1 auto; }
  .step-number { min-width: 44px; }
  .current-status { padding: .8rem .9rem; }
  .plot-panel, .tableau-panel { padding: 1rem .8rem; }
  .plot-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .panel-note { font-size: .76rem; }
  .practice-footer { display: block; }
  .practice-footer p { margin-bottom: .45rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .site-header, .parameter-actions, .step-controls, .practice-footer, .model-note { display: none; }
  body { background: white; }
  .page { max-width: none; padding: 0; }
  .page-heading { background: white; padding: 0 0 1rem; color: #243746; }
  .page-heading h1, .page-heading .eyebrow, .page-heading .lead { color: #193e60; }
  .panel { break-inside: avoid; }
  .simplex-workspace { display: block; }
  .tableau-panel { margin-top: 1rem; }
  .plot-wrap { max-width: 580px; margin: auto; }
  input { border: 0; padding: .2rem; min-height: 0; }
}