/* สร้างโดย teachkit/figures/p5-aquarium/build.mjs — แก้ที่นั่นแล้ว build ใหม่ ห้ามแก้ไฟล์นี้ตรง ๆ */
.tk-iso{
  --anatomy-page:#0b0b0b;--anatomy-card:#131313;--anatomy-text:#a3a3a3;--anatomy-strong:#e6e6e6;--anatomy-muted:#6e6e6e;
  --anatomy-paper:#131313;--anatomy-face:#1b1b1b;--anatomy-top:#1c1c1c;
  --anatomy-shade-0:#0f0f0f;--anatomy-shade-1:#121212;--anatomy-shade-2:#151515;--anatomy-shade-3:#181818;
  --anatomy-lit-top:#262626;--anatomy-lit-shade:#1d1d1d;
  --anatomy-hi:#d4d4d4;--anatomy-mid:#6a6a6a;--anatomy-lo:#3e3e3e;--anatomy-faint:#2a2a2a;--anatomy-lit:#ffffff;
  --anatomy-halo:#050505;--anatomy-halo-opacity:.9;--anatomy-dot:#e6e6e6;
  --anatomy-red:#ff6b6b;--anatomy-green:#6be0a0;--anatomy-blue:#6b9bff;
  --anatomy-weight:.6px;--anatomy-ease:cubic-bezier(.32,.72,0,1);
  --anatomy-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --anatomy-lift:inset 0 1px 0 0 #ffffff0a,inset 0 0 0 1px #ffffff06,0 0 0 1px #00000026,0 1px 1px -.5px #00000014,0 3px 3px -1.5px #00000014,0 6px 6px -3px #00000014,0 12px 12px -6px #00000014;

  --anatomy-page:#f2f2ef;--anatomy-card:#fbfbfa;--anatomy-text:#57575a;--anatomy-strong:#18181a;--anatomy-muted:#8c8c90;
  --anatomy-paper:#fbfbfa;--anatomy-face:#ffffff;--anatomy-top:#ffffff;
  --anatomy-shade-0:#dcdcd9;--anatomy-shade-1:#e5e5e2;--anatomy-shade-2:#ededea;--anatomy-shade-3:#f4f4f1;
  --anatomy-lit-top:#ffffff;--anatomy-lit-shade:#eeeeeb;
  --anatomy-hi:#26262a;--anatomy-mid:#8a8a8f;--anatomy-lo:#b4b4b8;--anatomy-faint:#d4d4d6;--anatomy-lit:#000000;
  --anatomy-halo:#8a8a80;--anatomy-halo-opacity:.32;--anatomy-dot:#3a3a3e;
  --anatomy-red:#e5484d;--anatomy-green:#30a46c;--anatomy-blue:#3e63dd;
  --anatomy-lift:inset 0 1px 0 0 #ffffff,0 0 0 1px #0000000f,0 1px 1px -.5px #0000000a,0 3px 3px -1.5px #0000000a,0 6px 6px -3px #0000000a,0 12px 12px -6px #0000000a;
--anatomy-paper:var(--bg-c);--anatomy-card:var(--bg-c);--anatomy-face:#fff;--anatomy-top:#fff;--aq-w-front:rgba(46,126,214,.13);--aq-w-side:rgba(46,126,214,.20);--aq-w-top:rgba(90,160,235,.20);--aq-w-layer:rgba(46,126,214,.10);--aq-w-line:rgba(46,110,190,.30);--aq-glass-in:rgba(80,140,150,.035);--aq-glass-out:rgba(80,150,160,.04);--aq-glass-floor:rgba(80,140,150,.05);--aq-glass-edge:rgba(40,150,120,.30);--aq-frost:rgba(255,255,255,.55);--aq-stream:rgba(60,140,225,.42);--aq-ripple:#3d86d6;--aq-brass:#e9dfc4;--aq-bead:#b9b9bd}
[data-theme="dark"] .tk-iso{
  --anatomy-page:#0b0b0b;--anatomy-card:#131313;--anatomy-text:#a3a3a3;--anatomy-strong:#e6e6e6;--anatomy-muted:#6e6e6e;
  --anatomy-paper:#131313;--anatomy-face:#1b1b1b;--anatomy-top:#1c1c1c;
  --anatomy-shade-0:#0f0f0f;--anatomy-shade-1:#121212;--anatomy-shade-2:#151515;--anatomy-shade-3:#181818;
  --anatomy-lit-top:#262626;--anatomy-lit-shade:#1d1d1d;
  --anatomy-hi:#d4d4d4;--anatomy-mid:#6a6a6a;--anatomy-lo:#3e3e3e;--anatomy-faint:#2a2a2a;--anatomy-lit:#ffffff;
  --anatomy-halo:#050505;--anatomy-halo-opacity:.9;--anatomy-dot:#e6e6e6;
  --anatomy-red:#ff6b6b;--anatomy-green:#6be0a0;--anatomy-blue:#6b9bff;
  --anatomy-weight:.6px;--anatomy-ease:cubic-bezier(.32,.72,0,1);
  --anatomy-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --anatomy-lift:inset 0 1px 0 0 #ffffff0a,inset 0 0 0 1px #ffffff06,0 0 0 1px #00000026,0 1px 1px -.5px #00000014,0 3px 3px -1.5px #00000014,0 6px 6px -3px #00000014,0 12px 12px -6px #00000014;
--anatomy-paper:var(--bg-c);--anatomy-card:var(--bg-c);--anatomy-face:#243247;--anatomy-top:#27364c;--anatomy-shade-0:#172131;--anatomy-shade-1:#1a2537;--anatomy-shade-2:#1e2a3d;--anatomy-shade-3:#223044;--anatomy-lit-top:#2e3e58;--anatomy-lit-shade:#26344c;--anatomy-hi:#d7dee8;--anatomy-mid:#7b8ba4;--anatomy-lo:#4b5c76;--anatomy-faint:#35455d;--anatomy-halo:#0a1020;--anatomy-dot:#dbe3ee;--aq-w-front:rgba(64,148,232,.20);--aq-w-side:rgba(64,148,232,.30);--aq-w-top:rgba(120,188,255,.26);--aq-w-layer:rgba(150,205,255,.16);--aq-w-line:rgba(150,205,255,.34);--aq-glass-in:rgba(170,215,225,.035);--aq-glass-out:rgba(190,235,245,.045);--aq-glass-floor:rgba(170,215,225,.05);--aq-glass-edge:rgba(110,205,180,.34);--aq-frost:rgba(255,255,255,.12);--aq-stream:rgba(130,195,255,.55);--aq-ripple:#9ccfff;--aq-brass:#3b3426;--aq-bead:#2e2e2e}



.iso-svg{display:block;width:100%;height:auto;overflow:visible}
.iso-svg path,.iso-svg circle{vector-effect:non-scaling-stroke}
.iso-fill{fill:var(--anatomy-paper);stroke:none}
.iso-solid[data-lit]>.iso-fill{fill:var(--anatomy-face)}
.iso-shade,.iso-top{stroke:none}
.iso-shade[data-shade="0"]{fill:var(--anatomy-shade-0)}
.iso-shade[data-shade="1"]{fill:var(--anatomy-shade-1)}
.iso-shade[data-shade="2"]{fill:var(--anatomy-shade-2)}
.iso-shade[data-shade="3"]{fill:var(--anatomy-shade-3)}
.iso-top{fill:var(--anatomy-top)}
.iso-solid[data-lit]>.iso-top{fill:var(--anatomy-lit-top)}
.iso-solid[data-lit]>.iso-shade{fill:var(--anatomy-lit-shade)}
.iso-solid[data-seamless]>.iso-shade,.iso-solid[data-seamless]>.iso-top{stroke-width:.4;stroke-linejoin:round}
.iso-solid[data-seamless]>.iso-shade[data-shade="0"]{stroke:var(--anatomy-shade-0)}
.iso-solid[data-seamless]>.iso-shade[data-shade="1"]{stroke:var(--anatomy-shade-1)}
.iso-solid[data-seamless]>.iso-shade[data-shade="2"]{stroke:var(--anatomy-shade-2)}
.iso-solid[data-seamless]>.iso-shade[data-shade="3"]{stroke:var(--anatomy-shade-3)}
.iso-solid[data-seamless]>.iso-top{stroke:var(--anatomy-top)}
.iso-solid[data-seamless][data-lit]>.iso-top{stroke:var(--anatomy-lit-top)}
.iso-solid[data-seamless][data-lit]>.iso-shade{stroke:var(--anatomy-lit-shade)}
.iso-solid[data-lit]>.iso-edge{stroke:var(--anatomy-lit)}
.iso-halo{fill:var(--anatomy-halo);stroke:none;filter:blur(9px);opacity:var(--anatomy-halo-opacity);transform:translateY(3px)}
.iso-line{fill:none;stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight);stroke-linecap:round;stroke-linejoin:round}
.iso-line[data-tone="hi"]{stroke:var(--anatomy-hi)}
.iso-line[data-tone="mid"]{stroke:var(--anatomy-mid)}
.iso-line[data-tone="lo"]{stroke:var(--anatomy-lo)}
.iso-line[data-tone="faint"]{stroke:var(--anatomy-faint)}
.iso-line[data-tone="lit"]{stroke:var(--anatomy-lit)}
.iso-line[data-tone="red"]{stroke:var(--anatomy-red)}
.iso-line[data-tone="green"]{stroke:var(--anatomy-green)}
.iso-line[data-tone="blue"]{stroke:var(--anatomy-blue)}
.iso-line[data-dotted]{stroke-dasharray:.01 3.5;stroke-width:1}
.iso-line[data-dashed]{stroke-dasharray:3 3}
.iso-line[data-flow]{stroke-dasharray:2 6}
.iso-wire-end{fill:var(--anatomy-paper);stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight)}
.iso-wire[data-tone="hi"] .iso-wire-end{stroke:var(--anatomy-hi)}
.iso-wire[data-tone="mid"] .iso-wire-end{stroke:var(--anatomy-mid)}
.iso-wire[data-tone="faint"] .iso-wire-end{stroke:var(--anatomy-faint)}
.iso-wire[data-tone="lit"] .iso-wire-end{stroke:var(--anatomy-lit)}
.iso-dots circle{fill:var(--anatomy-dot);stroke:none;opacity:.32}
.iso-dots[data-tone="hi"] circle{opacity:.85}
.iso-dots[data-tone="mid"] circle{opacity:.45}
.iso-dots[data-tone="lo"] circle{opacity:.22}
.iso-dots[data-tone="faint"] circle{opacity:.12}
.iso-face-text{fill:var(--anatomy-mid);font-family:var(--anatomy-mono);letter-spacing:.04em}
.iso-face-text[data-tone="hi"]{fill:var(--anatomy-hi)}
.iso-face-text[data-tone="lo"]{fill:var(--anatomy-lo)}
.iso-face-text[data-tone="faint"]{fill:var(--anatomy-faint)}
.tb-body{fill:var(--anatomy-shade-2);stroke:none}
.tb-shine{fill:var(--anatomy-top);stroke:none}
.tb-shade{fill:var(--anatomy-shade-0);stroke:none}
.tb-ring{fill:none;stroke:var(--anatomy-lo);stroke-width:.45;stroke-linecap:butt;stroke-linejoin:round}
.tb-ring[data-tone="mid"]{stroke:var(--anatomy-mid)}
.tb-ring[data-tone="faint"]{stroke:var(--anatomy-faint)}
.tb-ring[data-tone="hi"]{stroke:var(--anatomy-hi)}
@keyframes iso-flow{to{stroke-dashoffset:-32}}
@keyframes iso-pulse{0%,100%{opacity:.18}12%{opacity:1}40%{opacity:.18}}
.iso-line[data-flow]{animation:iso-flow 1600ms linear infinite}
.iso-dots circle[data-pulse]{animation:iso-pulse 1600ms steps(1,end) infinite;animation-delay:var(--pulse-at,0ms)}
.iso-figure{margin:32px 0 36px}
.iso-plate{position:relative;padding:52px 24px;border-radius:0;background:var(--anatomy-card);box-shadow:0 0 0 1px var(--anatomy-mid);--anatomy-paper:var(--anatomy-card)}
.iso-plate-corners{position:absolute;inset:18px 20px;pointer-events:none}
.iso-plate-corner{position:absolute;color:var(--anatomy-muted);font-family:var(--anatomy-mono);font-size:10.5px;line-height:1;letter-spacing:.04em;white-space:nowrap}
.iso-plate-corner[data-corner="fig"]{top:0;left:0;color:var(--anatomy-text)}
.iso-plate-corner[data-corner="title"]{top:0;right:0;text-transform:uppercase;letter-spacing:.1em}
.iso-plate-corner[data-corner="hint"]{bottom:0;left:0;text-transform:uppercase;letter-spacing:.1em}
.iso-plate-corner[data-corner="readout"]{right:0;bottom:0;color:var(--anatomy-text);font-variant-numeric:tabular-nums}
.iso-plate .iso-svg{margin:0 auto}
.iso-legend{display:grid;gap:8px;margin-top:12px;color:var(--anatomy-muted);font-size:13px;line-height:1.55}
.iso-keys{display:flex;flex-wrap:wrap;gap:6px 18px}
.iso-key{display:inline-flex;align-items:center;gap:7px}
.iso-swatch{width:16px;height:10px;flex:none;overflow:visible}
.iso-swatch path{fill:none;stroke:var(--anatomy-hi);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.iso-swatch[data-mark="raised"] path,.iso-swatch[data-mark="flat"] path{stroke:var(--anatomy-mid)}
.iso-swatch[data-mark="lit"] path{stroke:var(--anatomy-lit)}
.iso-swatch[data-mark="dim"] path{stroke:var(--anatomy-lo)}
.iso-swatch[data-mark="dotted"] path{stroke-dasharray:.01 3;stroke-width:1.4}
.iso-swatch[data-mark="dashed"] path{stroke-dasharray:3 2.5}
.iso-swatch[data-mark="red"] path{stroke:var(--anatomy-red)}
.iso-swatch[data-mark="green"] path{stroke:var(--anatomy-green)}
.iso-swatch[data-mark="blue"] path{stroke:var(--anatomy-blue)}
.iso-swatch-crease{stroke:var(--anatomy-lo)!important}
@media (max-width:560px){.iso-plate{padding:48px 12px 70px}.iso-plate-corner[data-corner="hint"]{bottom:18px}}
@media (prefers-reduced-motion:reduce){.iso-line[data-flow],.iso-dots circle[data-pulse]{animation:none}}


.aq-w-front{fill:var(--aq-w-front);stroke:none}
.aq-w-side{fill:var(--aq-w-side);stroke:none}
.aq-w-top{fill:var(--aq-w-top);stroke:none}
.aq-w-layer{fill:var(--aq-w-layer);stroke:none}
.iso-line.aq-layerline{stroke:var(--aq-w-line);opacity:.55}
.iso-line.aq-layer5{opacity:1}
.aq-glass-in{fill:var(--aq-glass-in);stroke:none}
.aq-glass-out{fill:var(--aq-glass-out);stroke:none}
.aq-glass-floor{fill:var(--aq-glass-floor);stroke:none}
.aq-glass-edge{fill:var(--aq-glass-edge);stroke:none}
.aq-frost{fill:var(--aq-frost);stroke:none}
.aq-stream{fill:var(--aq-stream);stroke:none}
.aq-ripple{fill:none;stroke:var(--aq-ripple);stroke-width:.6;vector-effect:non-scaling-stroke}
.aq-brass{fill:var(--aq-brass);stroke:none}
.iso-line.aq-bead{stroke:var(--aq-bead);stroke-width:1.6}
.aq-acrylic .iso-fill,.aq-acrylic .iso-shade,.aq-acrylic .iso-top,.aq-jug .iso-fill,.aq-jug .iso-shade,.aq-jug .iso-top{fill-opacity:.32}
.aq-etch .iso-face-text{font-family:"IBM Plex Sans Thai","Noto Sans Thai",ui-monospace,monospace;font-weight:500}


.aq-stage{position:relative;outline:none;background:var(--bg-c);-webkit-tap-highlight-color:transparent}
.aq-stage:focus-visible{outline:3px solid var(--c-500);outline-offset:-3px}
.aq-stage .iso-svg{display:block;width:auto;max-width:100%;height:auto;max-height:min(620px,74vh);margin:0 auto}
/* เต็มจอ: ภาพเต็มพื้นที่ที่เหลือ แผงควบคุมอยู่ขวา (จอแคบใช้เลย์เอาต์ปกติของหน้า) */
@media (min-width:901px){
  .tk-aq #lbCard:fullscreen,.tk-aq #lbCard:-webkit-full-screen{display:grid;height:100dvh;grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:auto minmax(0,1fr) auto;align-content:stretch;overflow:hidden}
  .tk-aq #lbCard:fullscreen>.tk-card-hd,.tk-aq #lbCard:-webkit-full-screen>.tk-card-hd{grid-column:1/-1}
  .tk-aq #lbCard:fullscreen>.aq-stage,.tk-aq #lbCard:-webkit-full-screen>.aq-stage{grid-column:1;grid-row:2;width:100%;height:100%;max-width:none;min-height:0;margin:0}
  .tk-aq #lbCard:fullscreen>.aq-stage>svg,.tk-aq #lbCard:-webkit-full-screen>.aq-stage>svg{position:absolute;inset:0;width:100%;height:100%;max-height:none}
  .tk-aq #lbCard:fullscreen>.aq-viewbar,.tk-aq #lbCard:-webkit-full-screen>.aq-viewbar{grid-column:1;grid-row:3}
  .tk-aq #lbCard:fullscreen>.lb-dock,.tk-aq #lbCard:-webkit-full-screen>.lb-dock{grid-column:2;grid-row:2/4;max-height:none;min-height:0;overflow:auto;border-left:1px solid var(--bd)}
}
.aq-stage[data-renderer="3d"]>svg{visibility:hidden}
.aq-render{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
.aq-viewbar{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;padding:.55rem 1rem;border-top:1px solid var(--bd);background:var(--bg-c);color:var(--t2);font-size:.82rem}
.aq-viewbar[hidden]{display:none}
.aq-view-title{display:flex;align-items:center;gap:.4rem;margin-right:auto;color:var(--t1);font-weight:600}
.aq-view-title>svg{color:var(--c-500)}
.aq-viewbar .tk-seg button{min-height:40px;padding:.3rem .8rem}
.aq-orbit{display:flex;gap:.3rem}
.aq-orbit button{min-width:40px;min-height:40px;padding:.3rem .6rem;border:1px solid var(--bd);border-radius:8px;background:var(--bg-c);color:var(--t1);font:inherit;cursor:pointer}
.aq-orbit button[data-aq-turn="-1"],.aq-orbit button[data-aq-turn="1"]{font-size:1.15rem;line-height:1}
.aq-orbit button:hover{border-color:var(--c-500);color:var(--c-500)}
.aq-viewbar button:focus-visible{outline:3px solid var(--c-500);outline-offset:2px}
.tk-workbench #lbCard>.aq-viewbar{grid-column:1;grid-row:3}
.tk-workbench #lbCard:has(>.aq-viewbar:not([hidden]))>.lb-dock{grid-row:2/4}
.aq-range{display:flex;align-items:center;gap:.6rem;font-size:.88rem;color:var(--t2);white-space:nowrap}
.aq-range>span{min-width:4.2em}
.aq-range input{flex:1;min-width:0;accent-color:var(--c-600);min-height:32px}
.aq-range output{min-width:3.6em;text-align:right;font-weight:600;color:var(--t1);font-variant-numeric:tabular-nums}
.aq-dims{display:grid;gap:.15rem}
.aq-dims-note{margin:.1rem 0 0;font-size:.78rem;line-height:1.6;color:var(--t3)}
.aq-vars{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.3rem .7rem;margin:.15rem 0 0;font-size:.86rem;color:var(--t2)}
.aq-vars dt{font-weight:600;color:var(--t1);white-space:nowrap}
.aq-vars dd{margin:0}
.aq-legend{display:grid;gap:.35rem;font-size:.86rem;color:var(--t2)}
.aq-legend span{display:flex;align-items:center;gap:.55rem}
.aq-sw{flex:none;width:14px;height:14px;border-radius:4px}
.aq-sw-water{background:linear-gradient(#93c5fd,#3b82f6);opacity:.8}
.aq-sw-line{height:3px;border-radius:2px;background:var(--t1)}
.aq-sw-ruler{width:6px;margin:0 4px;background:repeating-linear-gradient(#64748b 0 1px,transparent 1px 3px);border:1px solid #94a3b8}
.aq-sw-cube{background:#bfdbfe;box-shadow:inset 0 0 0 1px #60a5fa;background-image:linear-gradient(#60a5fa 1px,transparent 1px),linear-gradient(90deg,#60a5fa 1px,transparent 1px);background-size:4.6px 4.6px}
.aq-sw-tap{border-radius:50%;background:radial-gradient(circle at 40% 40%,#f8fafc,#94a3b8)}
.aq-tbl-wrap{max-height:430px;overflow:auto}
.aq-tbl-wrap thead th{position:sticky;top:0;z-index:1;background:var(--c-700)}
[data-theme="dark"] .aq-tbl-wrap thead th{background:#3d4a5c}
.aq-tank-dot{display:inline-block;width:9px;height:9px;margin-right:.45rem;border-radius:50%;vertical-align:.05em;background:#2563eb}
.aq-tank-dot[data-i="1"]{background:#16a34a}.aq-tank-dot[data-i="2"]{background:#9333ea}.aq-tank-dot[data-i="3"]{background:#db2777}
.aq-chart{min-width:0}
.aq-chart-hd{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;margin:0 0 .4rem;font-size:.86rem;color:var(--t2)}
.aq-chart-key{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;margin:.4rem 0 0;font-size:.84rem;color:var(--t3)}
.aq-chart-key span{display:inline-flex;align-items:center;gap:.45rem}
.aq-key-line{width:24px;height:0;border-top:2.5px dashed var(--c-500)}
.aq-key-dot{width:10px;height:10px;border-radius:50%;background:var(--c-600)}
.aq-key-ring{width:11px;height:11px;border-radius:50%;border:2px solid #f59e0b}
.lb-chart .guide{stroke:var(--t3);stroke-width:1;stroke-dasharray:2 4;opacity:.7;fill:none}
.lb-chart .guide-t{fill:#B45309;font:600 11.5px var(--f-b)}
[data-theme="dark"] .lb-chart .guide-t{fill:#FCD34D}
.lb-chart .aq-now{fill:none;stroke:#f59e0b;stroke-width:2.4}
.lb-chart .aq-curve{fill:none;stroke-width:1.6;opacity:.55}
.lb-chart .aq-curve[data-i="0"]{stroke:#2563eb}.lb-chart .aq-curve[data-i="1"]{stroke:#16a34a}.lb-chart .aq-curve[data-i="2"]{stroke:#9333ea}.lb-chart .aq-curve[data-i="3"]{stroke:#db2777}
.lb-chart .pt[data-i="1"]{fill:#16a34a}.lb-chart .pt[data-i="2"]{fill:#9333ea}.lb-chart .pt[data-i="3"]{fill:#db2777}