.surface-blowups-lab { width:100%; min-width:0; color:var(--ink,#20252b); font-family:var(--font-ui,system-ui,sans-serif); letter-spacing:0; }
.surface-blowups-lab *, .surface-blowups-lab *::before, .surface-blowups-lab *::after { box-sizing:border-box; letter-spacing:0; }
.surface-blowups-lab [hidden] { display:none !important; }
.surface-blowups-lab h2 { margin:0; font-size:22px; }
.surface-blowups-lab h3 { margin:0; font-size:14px; font-weight:600; }
.sbu-heading { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 16px; margin-bottom:14px; }
.sbu-heading > span, .sbu-small { color:var(--muted,#5b6577); font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.sbu-small { margin:6px 0; }
.sbu-extension { margin:0 0 6px; font-size:12px; font-weight:600; }
.sbu-book-context { margin:0 0 14px; font-size:12px; line-height:1.6; max-width:110ch; }
.sbu-book-context p { margin:6px 0; }
.sbu-book-context summary, .sbu-custom-details summary { width:fit-content; cursor:pointer; color:var(--muted,#5b6577); }
.sbu-custom-details { margin-top:10px; font-size:12px; }
.sbu-branch-notice { color:var(--ink,#20252b); border-left:2px solid var(--accent,#2a52c4); padding-left:8px; }
.sbu-plot-actions { display:flex; flex-wrap:wrap; gap:8px; padding-top:10px; }
.sbu-repeat, .sbu-algebra { scroll-margin-top:16px; }
.sbu-controls { display:grid; grid-template-columns:minmax(140px,1.4fr) minmax(90px,.65fr) 95px minmax(145px,1fr) 38px; align-items:end; gap:10px; }
.sbu-custom { display:grid; grid-template-columns:minmax(200px,1.5fr) minmax(230px,1fr) auto; align-items:end; gap:8px 12px; margin-top:14px; }
.sbu-equation-input { font-family:var(--font-mono,monospace); }
.sbu-original-centre { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; min-width:0; margin:0; padding:0; border:0; }
.sbu-original-centre legend { font-size:12px; line-height:1.5; color:var(--muted,#5b6577); padding:0; margin-bottom:3px; }
.sbu-custom > :is(.sbu-small,.sbu-error) { grid-column:1/-1; margin:0; }
.sbu-custom > button { color:var(--accent,#2a52c4); border-color:var(--accent,#2a52c4); }
.sbu-calculation { display:flex; align-items:center; gap:8px; min-width:0; }
.sbu-calculation-status:empty { display:none; }
.sbu-calculation > button { margin-top:6px; }
.sbu-field { display:grid; gap:4px; min-width:0; color:var(--muted,#5b6577); font-size:12px; }
.sbu-input { width:100%; min-width:0; min-height:38px; padding:7px 8px; border:1px solid var(--line-2,#bac4cb); border-radius:4px; font:inherit; font-size:14px; color:var(--ink,#20252b); background:var(--surface,#fff); }
.sbu-input[aria-invalid="true"] { border-color:var(--bad,#b43d30); }
.sbu-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:0; min-height:38px; max-width:100%; padding:7px 10px; border:1px solid var(--line-2,#bac4cb); border-radius:4px; background:var(--surface,#fff); color:var(--ink,#20252b); cursor:pointer; font:inherit; font-size:13px; overflow-wrap:anywhere; }
.sbu-button:hover { background:var(--surface-2,#eef1f3); }
.sbu-button:disabled { opacity:.45; cursor:not-allowed; }
.sbu-button svg { width:17px; height:17px; flex:0 0 17px; }
.sbu-icon { width:38px; height:38px; flex:0 0 38px; padding:4px; }
.surface-blowups-lab :is(button,input,select,summary,canvas[tabindex]):focus-visible { outline:2px solid var(--focus,#2a52c4); outline-offset:2px; }
.sbu-path { margin:12px 0 5px; font-size:12px; font-weight:600; overflow-wrap:anywhere; }
.sbu-context { padding:0 0 10px; }
.sbu-math { max-width:100%; min-width:0; overflow-x:auto; overflow-y:hidden; padding:4px 0; font-size:14px; }
.surface-blowups-lab mjx-container { max-width:100%; }
.sbu-view-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; padding:9px 0; border-block:1px solid var(--line,#d6dce7); }
.sbu-check { display:inline-flex; gap:6px; align-items:center; min-height:32px; font-size:12px; }
.sbu-check input { width:16px; height:16px; accent-color:var(--accent,#2a52c4); }
.sbu-camera-tools { display:flex; gap:5px; margin-left:auto; }
.sbu-plots { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; padding-top:12px; }
.sbu-plot { min-width:0; }
.sbu-plot-heading { display:flex; align-items:baseline; justify-content:space-between; gap:5px 12px; flex-wrap:wrap; min-height:44px; }
.sbu-viewport { position:relative; width:100%; height:390px; overflow:hidden; background:var(--surface,#fff); }
.sbu-viewport canvas { display:block; width:100%; height:100%; touch-action:none; }
.sbu-viewport canvas:focus-visible { outline-offset:-3px !important; }
.sbu-axis-label { position:absolute; transform:translate(-50%,-50%); pointer-events:none; font:600 12px var(--font-mono,monospace); text-shadow:0 1px 3px var(--surface,#fff); }
.sbu-axis-label[data-axis="0"] { color:#c65664; }.sbu-axis-label[data-axis="1"] { color:#4d9464; }.sbu-axis-label[data-axis="2"] { color:#587db8; }
.sbu-mesh-status { min-height:36px; margin:6px 0; font-size:11px; line-height:1.5; color:var(--muted,#5b6577); overflow-wrap:anywhere; }
.sbu-legend { display:flex; flex-wrap:wrap; gap:6px 18px; font-size:12px; }
.sbu-legend span::before { content:''; display:inline-block; width:14px; height:3px; margin-right:6px; vertical-align:middle; background:currentColor; }
.sbu-key-original { color:#18858a; }.sbu-key-strict { color:#436cc3; }.sbu-key-exceptional { color:#ba426a; }.sbu-key-point { color:#b76b10; }
.sbu-numerical { margin:8px 0 14px; font-size:12px; line-height:1.6; color:var(--muted,#5b6577); max-width:135ch; }
.sbu-exceptional { display:grid; grid-template-columns:260px minmax(0,1fr); gap:26px; border-top:1px solid var(--line,#d6dce7); padding:16px 0; }
.sbu-section-canvas { display:block; width:100%; aspect-ratio:1; }
.sbu-section-info { min-width:0; }
.sbu-section-info details { font-size:12px; margin-top:10px; }
.sbu-section-info summary { cursor:pointer; }
.sbu-repeat, .sbu-algebra, .sbu-graph { padding:16px 0; border-top:1px solid var(--line,#d6dce7); min-width:0; }
.sbu-next { display:grid; grid-template-columns:repeat(3,minmax(55px,1fr)) auto; gap:8px; align-items:end; max-width:750px; }
.sbu-next > button { border-color:var(--accent,#2a52c4); color:var(--accent,#2a52c4); }
.sbu-known-points { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.sbu-point-choices { display:flex; flex-wrap:wrap; gap:6px; }
.sbu-error { margin:6px 0 0; font-size:13px; color:var(--bad,#b43d30); overflow-wrap:anywhere; }
.sbu-error:empty { display:none; }
.sbu-chart-equations { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:12px; }
.sbu-chart-row { min-width:0; border-top:2px solid transparent; padding-top:8px; }
.sbu-chart-row[data-selected="true"] { border-top-color:#436cc3; }
.sbu-chart-heading { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; }
.sbu-chart-heading button[aria-pressed="true"] { color:var(--accent,#2a52c4); background:var(--accent-soft,#e3e9fb); }
.sbu-chart-status { font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.sbu-chart-row > button { margin:4px 0; }
.sbu-graph-view { display:block; width:100%; max-width:540px; height:140px; }
.sbu-graph-edge { stroke:var(--muted,#5b6577); stroke-width:1.5; }
.sbu-graph-node { fill:#ba426a; }
.sbu-graph-view text { fill:var(--ink,#20252b); font:13px var(--font-ui,system-ui,sans-serif); }
@media (max-width:1000px) {
  .sbu-custom { grid-template-columns:minmax(160px,1fr) minmax(200px,1fr); }
  .sbu-custom > button { justify-self:start; }
  .sbu-controls { grid-template-columns:minmax(130px,1fr) minmax(85px,.7fr) 90px; }
  .sbu-controls > label:nth-child(4) { grid-column:1/3; }
  .sbu-controls > button { justify-self:end; }
  .sbu-viewport { height:340px; }
  .sbu-chart-equations { grid-template-columns:minmax(0,1fr); gap:14px; }
}
@media (max-width:680px) {
  .sbu-custom { grid-template-columns:minmax(0,1fr); }
  .sbu-custom > button { justify-self:stretch; }
  .sbu-plots { grid-template-columns:minmax(0,1fr); gap:10px; }
  .sbu-viewport { height:350px; }
  .sbu-exceptional { grid-template-columns:minmax(0,1fr); gap:14px; }
  .sbu-section-plot { width:100%; max-width:300px; justify-self:center; }
  .sbu-next { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .sbu-next > button { grid-column:1/-1; }
  .sbu-controls { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }
  .sbu-controls > label:first-child { grid-column:1/-1; }
  .sbu-controls > label:nth-child(4) { grid-column:auto; }
  .sbu-input { font-size:16px; }
  .sbu-plot-heading { min-height:52px; }
}