.abv {
  --abv-night: var(--home-night, #071d33);
  --abv-paper: #f4f7f6;
  --abv-muted: #a9bdcc;
  --abv-cobalt: var(--home-blue, #3158d4);
  --abv-signal: #7fa4ff;
  --abv-line: #385267;
  --abv-steel-00: #f1f5f5;
  --abv-steel-01: #d3dee1;
  --abv-steel-02: #aabdc5;
  --abv-steel-03: #7d96a3;
  --abv-steel-04: #506b7d;
  --abv-agitation-duration: 1.8s;
  --abv-aeration-duration: 3.5s;
  color: var(--abv-paper);
  background: var(--abv-night);
  border: 1px solid var(--abv-line);
  border-radius: 14px;
  font: 400 15px/1.5 "Manrope", sans-serif;
  overflow: hidden;
  isolation: isolate;
}
.abv *, .abv *::before, .abv *::after { box-sizing: border-box; }
.abv button, .abv input { font: inherit; }
.abv-topline { min-height: 66px; padding: 16px 24px 0; display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.abv-kicker { color: var(--abv-muted); font: 400 11px/1.5 "DM Mono", monospace; text-transform: uppercase; }
.abv-section-toggle { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 9px 12px; color: var(--abv-paper); background: transparent; border: 1px solid var(--abv-line); border-radius: 8px; cursor: pointer; white-space: nowrap; }
.abv-section-toggle[aria-pressed="true"] { color: var(--abv-paper); border-color: var(--abv-signal); }
.abv-section-toggle > span { color: var(--abv-signal); }
.abv-figure { margin: 0; }
.abv-scene { width: 100%; }
.abv-drawing { display: block; width: 100%; height: auto; overflow: visible; }
.abv-drawing path, .abv-drawing line, .abv-drawing ellipse, .abv-drawing rect, .abv-drawing circle { vector-effect: non-scaling-stroke; }
.abv-figure figcaption { padding: 0 24px 22px; color: var(--abv-muted); font-size: 12px; text-wrap: pretty; }
.abv-building { fill: none; stroke: var(--abv-line); stroke-width: .7; opacity: .6; }
.abv-building .abv-floor { fill: #10293e; stroke-width: .7; }
.abv-building .abv-floor-edge { stroke: #567186; }
.abv-header-pipes > path { fill: none; stroke: var(--abv-steel-04); stroke-width: 6; stroke-linejoin: round; }
.abv-header-pipes .abv-gas-header { stroke: var(--abv-signal); stroke-width: 2; opacity: .7; }
.abv-platform { fill: none; stroke: var(--abv-steel-03); stroke-width: 1.2; }
.abv-platform .abv-platform-deck { fill: #253f50; stroke: var(--abv-steel-03); }
.abv-legs { fill: none; stroke: var(--abv-steel-03); stroke-width: 6; }
.abv-legs > path + path { stroke-width: 3; }
.abv-shell-underlay { fill: #132e43; }
.abv-shell-outline { fill: none; stroke: var(--abv-steel-02); stroke-width: .8; }
.abv-steel-reflection { stroke: var(--abv-steel-00); stroke-width: 1; opacity: .6; }
.abv-weld { fill: none; stroke: var(--abv-steel-04); stroke-width: .7; opacity: .8; }
.abv-head-seam { fill: none; stroke: var(--abv-steel-04); stroke-width: .7; }
.abv-jacket { fill: none; stroke: var(--abv-steel-03); stroke-width: 1.4; }
.abv-metal-pipe { fill: none; stroke: var(--abv-steel-02); stroke-width: 5; stroke-linejoin: round; }
.abv-utility-pipe { fill: none; stroke: var(--abv-steel-03); stroke-width: 3; stroke-linejoin: round; }
.abv-handwheel { fill: var(--abv-night); stroke: var(--abv-steel-02); stroke-width: 1.8; }
.abv-air-pipe { fill: none; stroke: var(--abv-signal); stroke-width: 2.4; stroke-linejoin: round; }
.abv-air-valve { fill: var(--abv-night); stroke: var(--abv-signal); stroke-width: 1.2; }
.abv-valve { fill: none; stroke: var(--abv-steel-02); stroke-width: 2; }
.abv-external-shaft { fill: none; stroke: var(--abv-steel-02); stroke-width: 8; }
.abv-mount { fill: var(--abv-steel-02); stroke: var(--abv-steel-04); stroke-width: .8; }
.abv-motor-side { fill: #526a7a; stroke: var(--abv-steel-03); stroke-width: .8; }
.abv-motor { fill: #24415a; stroke: var(--abv-steel-03); stroke-width: .8; }
.abv-motor-fins { stroke: #89a1b1; stroke-width: 1; }
.abv-drive-base { stroke: var(--abv-steel-01); stroke-width: 4; }
.abv-port > ellipse { fill: var(--abv-steel-03); stroke: var(--abv-steel-01); stroke-width: .8; }
.abv-port > ellipse + ellipse { fill: #2c475b; }
.abv-interior { opacity: 0; }
.abv-liquid { fill: var(--abv-cobalt); opacity: .44; }
.abv-liquid-surface { fill: var(--abv-signal); opacity: .25; }
.abv-baffles { fill: none; stroke: #6b8ca4; stroke-width: 3; }
.abv-internal-shaft { fill: none; stroke: var(--abv-steel-01); stroke-width: 3; }
.abv-blade { fill: var(--abv-steel-00); stroke: var(--abv-steel-03); stroke-width: .7; }
.abv-blade-back { fill: var(--abv-steel-03); stroke: var(--abv-steel-01); stroke-width: .7; }
.abv-shaft { fill: var(--abv-steel-01); }
.abv-sparger { fill: none; stroke: var(--abv-signal); stroke-width: 2; }
.abv-bubble { fill: #c1d4ff; opacity: .8; }
.abv-front-pipes { fill: none; stroke: var(--abv-steel-03); stroke-width: 5; stroke-linejoin: round; }
.abv-front-pipes .abv-pipe-return { stroke: var(--abv-steel-04); stroke-width: 3; }
.abv-equipment-tag rect { fill: #102e45; stroke: var(--abv-line); stroke-width: .8; }
.abv-equipment-tag text { fill: var(--abv-paper); font: 400 11px "DM Mono", monospace; text-anchor: middle; }
.abv-figure-notes { fill: var(--abv-muted); font: 400 10px "DM Mono", monospace; }
.abv[data-abv-section="true"] .abv-vessel--main .abv-interior { opacity: 1; }
.abv[data-abv-section="true"] .abv-vessel--main .abv-shell-body { opacity: .2; }
.abv[data-abv-section="true"] .abv-vessel--main .abv-port { opacity: .35; }
.abv[data-abv-part="drive"] .abv-vessel--main [data-abv-svg-part="drive"] .abv-motor { stroke: var(--abv-signal); stroke-width: 1.8; }
.abv[data-abv-part="air"] .abv-vessel--main .abv-air-pipe, .abv[data-abv-part="air"] .abv-vessel--main .abv-sparger { stroke: var(--abv-paper); stroke-width: 3; }
.abv[data-abv-part="jacket"] .abv-vessel--main .abv-jacket, .abv[data-abv-part="jacket"] .abv-vessel--main .abv-utility-pipe { stroke: var(--abv-signal); stroke-width: 3; }
.abv-impeller { transform-box: fill-box; transform-origin: center; animation: abv-rotate var(--abv-agitation-duration) linear infinite paused; }
.abv-bubble { animation: abv-rise var(--abv-aeration-duration) linear infinite paused; }
.abv-bubble--2 { opacity: .35; }
.abv[data-abv-running="true"][data-abv-section="true"] .abv-vessel--main .abv-impeller, .abv[data-abv-running="true"][data-abv-section="true"] .abv-vessel--main .abv-bubble { animation-play-state: running; }
.abv[data-abv-agitation="0"] .abv-impeller, .abv[data-abv-aeration="0"] .abv-bubble { animation: none; }
.abv[data-abv-aeration="0"] .abv-bubble { opacity: 0; }
.abv[data-abv-aeration="1"] .abv-bubble--1, .abv[data-abv-aeration="1"] .abv-bubble--2, .abv[data-abv-aeration="2"] .abv-bubble--2 { visibility: hidden; }
.abv-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0 24px; padding: 21px 0 24px; border-top: 1px solid var(--abv-line); }
.abv-control { min-width: 0; }
.abv-control > span { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; color: var(--abv-paper); font-size: 13px; }
.abv-control output { color: var(--abv-signal); font: 400 12px/1.5 "DM Mono", monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.abv-control input { display: block; width: 100%; height: 44px; margin: 2px 0 0; padding: 0; accent-color: var(--abv-signal); cursor: pointer; }
.abv-control small { display: flex; justify-content: space-between; margin-top: -4px; color: var(--abv-muted); font-size: 11px; }
.abv-inspect { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 25px; padding: 18px 24px 24px; background: #0c253b; border-top: 1px solid var(--abv-line); }
.abv-part-buttons { display: flex; flex-wrap: wrap; gap: 6px; max-width: 280px; }
.abv-part-buttons button { min-height: 44px; padding: 9px 12px; color: var(--abv-muted); background: transparent; border: 1px solid var(--abv-line); border-radius: 8px; cursor: pointer; font-size: 12px; }
.abv-part-buttons button[aria-pressed="true"] { color: var(--abv-paper); border-color: var(--abv-signal); background: #18344b; }
.abv-detail { max-width: 56ch; min-height: 80px; }
.abv-detail strong { font-size: 13px; font-weight: 600; }
.abv-detail p { margin: 4px 0 0; color: var(--abv-muted); font-size: 12px; text-wrap: pretty; }
.abv :is(button, input):focus-visible { outline: 2px solid var(--abv-paper); outline-offset: 4px; }
.abv :is(button, input):disabled { cursor: default; opacity: .65; }
@keyframes abv-rotate { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
@keyframes abv-rise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .75; } 85% { opacity: .65; } 100% { transform: translateY(calc(-1 * var(--abv-rise))); opacity: 0; } }
@media (max-width: 600px) {
  .abv-topline { padding: 12px 16px 0; gap: 10px; }
  .abv-kicker { max-width: 18ch; font-size: 10px; }
  .abv-section-toggle { padding: 9px 10px; font-size: 12px; }
  .abv-figure figcaption { padding: 0 16px 18px; font-size: 11px; }
  .abv-controls { margin: 0 16px; gap: 14px; padding: 18px 0; }
  .abv-control > span { display: grid; grid-template-columns: 1fr; gap: 4px; font-size: 12px; }
  .abv-control output { font-size: 11px; }
  .abv-inspect { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  .abv-part-buttons { max-width: none; }
  .abv-detail { min-height: 85px; }
}
@media (prefers-reduced-motion: reduce) {
  .abv .abv-impeller, .abv .abv-bubble { animation: none !important; }
}

/* The equipment owns the frame; controls sit on quiet, aligned rails. */
.abv-studio { position: relative; width: 100%; height: clamp(440px, 72svh, 820px); margin-top: 18px; background: #040f1b; overflow: hidden; }
.abv-studio [data-abv-scene] { position: absolute; inset: 0; display: grid; place-items: center; }
.abv-studio [data-abv-scene][hidden], .abv-studio-canvas[hidden] { display: none; }
.abv-studio .abv-drawing { width: 100%; height: 100%; }
.abv-studio-canvas { display: block; width: 100%; height: 100%; outline-offset: -3px; cursor: grab; }
.abv-studio-canvas:active { cursor: grabbing; }
.abv-studio-canvas:focus-visible { outline: 2px solid #9bbcff; }
.abv-viewbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; border-top: 1px solid #263b50; }
.abv-viewbar > p { margin: 0; max-width: 64ch; color: #a9bdcc; font: 400 11px/1.6 "DM Mono", monospace; text-wrap: pretty; }
.abv-viewbar > div { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; }
.abv-viewbar button { min-height: 44px; padding: 10px 15px; border: 1px solid #526b83; border-radius: 4px; background: transparent; color: #f2f6fb; font-size: 12px; cursor: pointer; }
.abv-viewbar button[aria-pressed="true"] { background: #3154d5; border-color: #3154d5; }
.abv-viewbar button:hover:not(:disabled) { border-color: #9bbcff; background: #18304b; }
.abv-viewbar button:focus-visible { outline: 2px solid #9bbcff; outline-offset: 3px; }
.abv-viewbar button[hidden] { display: none; }
.abv[data-abv-renderer="ready"] .abv-kicker { color: #9bbcff; }
@media (max-width: 760px) {
  .abv-studio { height: 520px; max-height: 74svh; min-height: 380px; }
  .abv-viewbar { align-items: flex-start; flex-direction: column; gap: 12px; }
  .abv-viewbar > p { max-width: 44ch; font-size: 10px; }
  .abv-viewbar button { padding-inline: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  .abv-viewbar button { transition: border-color 150ms ease, background-color 150ms ease; }
}