:root{color-scheme:light;--color-paper-0: oklch(96% .012 200);--color-paper-1: oklch(99% .006 200);--color-paper-2: oklch(97% .01 200);--color-paper-3: oklch(94% .014 200);--color-paper-glass: oklch(99% .006 200 / .86);--color-ink-0: oklch(26% .02 220);--color-ink-1: oklch(40% .02 220);--color-ink-2: oklch(54% .018 220);--color-ink-3: oklch(68% .014 220);--color-line: oklch(90% .012 200);--color-line-soft: oklch(93% .01 200);--color-line-strong: oklch(82% .016 200);--color-accent: oklch(62% .11 190);--color-accent-hi: oklch(68% .12 190);--color-accent-dim: oklch(50% .09 190);--color-accent-ink: oklch(99% .01 190);--color-accent-ghost: oklch(62% .11 190 / .14);--color-ok: oklch(66% .15 155);--color-ok-ghost: oklch(66% .15 155 / .14);--color-warn: oklch(74% .15 78);--color-warn-ghost: oklch(74% .15 78 / .16);--color-danger: oklch(62% .19 22);--color-danger-ghost: oklch(62% .19 22 / .14);--color-info: oklch(64% .12 230);--color-focus: oklch(62% .11 190);--font-display: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;--font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, monospace;--text-xs: 10.5px;--text-sm: 12px;--text-base: 13px;--text-md: 14px;--text-lg: 16px;--text-xl: 19px;--text-2xl: 24px;--space-2xs: 2px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 24px;--space-2xl: 32px;--radius-xs: 8px;--radius-sm: 12px;--radius-md: 16px;--radius-lg: 22px;--radius-pill: 999px;--shadow-sm: 0 1px 3px oklch(45% .03 220 / .1);--shadow-md: 0 6px 20px oklch(45% .03 220 / .12);--shadow-lg: 0 14px 40px oklch(45% .03 220 / .16);--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-in-out: cubic-bezier(.65, 0, .35, 1);--dur-fast: .12s;--dur-mid: .2s;--dur-slow: .32s}@media (prefers-color-scheme: dark){:root{color-scheme:dark;--color-paper-0: oklch(19% .014 220);--color-paper-1: oklch(23% .016 220);--color-paper-2: oklch(27% .018 220);--color-paper-3: oklch(32% .02 220);--color-paper-glass: oklch(23% .016 220 / .86);--color-ink-0: oklch(95% .008 210);--color-ink-1: oklch(80% .012 210);--color-ink-2: oklch(64% .014 210);--color-ink-3: oklch(48% .014 210);--color-line: oklch(34% .018 220);--color-line-soft: oklch(29% .016 220);--color-line-strong: oklch(42% .022 220);--color-accent: oklch(70% .13 190);--color-accent-hi: oklch(76% .13 190);--color-accent-dim: oklch(54% .1 190);--color-accent-ink: oklch(14% .02 190);--color-accent-ghost: oklch(70% .13 190 / .18);--color-ok: oklch(72% .15 155);--color-ok-ghost: oklch(72% .15 155 / .18);--color-warn: oklch(78% .15 78);--color-warn-ghost: oklch(78% .15 78 / .2);--color-danger: oklch(68% .19 22);--color-danger-ghost: oklch(68% .19 22 / .18);--color-info: oklch(72% .12 230);--color-focus: oklch(70% .13 190);--shadow-sm: 0 1px 3px oklch(0% 0 0 / .3);--shadow-md: 0 6px 20px oklch(0% 0 0 / .36);--shadow-lg: 0 14px 40px oklch(0% 0 0 / .46)}}:root[data-theme=dark]{color-scheme:dark;--color-paper-0: oklch(19% .014 220);--color-paper-1: oklch(23% .016 220);--color-paper-2: oklch(27% .018 220);--color-paper-3: oklch(32% .02 220);--color-paper-glass: oklch(23% .016 220 / .86);--color-ink-0: oklch(95% .008 210);--color-ink-1: oklch(80% .012 210);--color-ink-2: oklch(64% .014 210);--color-ink-3: oklch(48% .014 210);--color-line: oklch(34% .018 220);--color-line-soft: oklch(29% .016 220);--color-line-strong: oklch(42% .022 220);--color-accent: oklch(70% .13 190);--color-accent-hi: oklch(76% .13 190);--color-accent-dim: oklch(54% .1 190);--color-accent-ink: oklch(14% .02 190);--color-accent-ghost: oklch(70% .13 190 / .18);--color-ok: oklch(72% .15 155);--color-ok-ghost: oklch(72% .15 155 / .18);--color-warn: oklch(78% .15 78);--color-warn-ghost: oklch(78% .15 78 / .2);--color-danger: oklch(68% .19 22);--color-danger-ghost: oklch(68% .19 22 / .18);--color-info: oklch(72% .12 230);--color-focus: oklch(70% .13 190);--shadow-sm: 0 1px 3px oklch(0% 0 0 / .3);--shadow-md: 0 6px 20px oklch(0% 0 0 / .36);--shadow-lg: 0 14px 40px oklch(0% 0 0 / .46)}:root[data-theme=light]{color-scheme:light;--color-paper-0: oklch(96% .012 200);--color-paper-1: oklch(99% .006 200);--color-paper-2: oklch(97% .01 200);--color-paper-3: oklch(94% .014 200);--color-paper-glass: oklch(99% .006 200 / .86);--color-ink-0: oklch(26% .02 220);--color-ink-1: oklch(40% .02 220);--color-ink-2: oklch(54% .018 220);--color-ink-3: oklch(68% .014 220);--color-line: oklch(90% .012 200);--color-line-soft: oklch(93% .01 200);--color-line-strong: oklch(82% .016 200);--color-accent: oklch(62% .11 190);--color-accent-hi: oklch(68% .12 190);--color-accent-dim: oklch(50% .09 190);--color-accent-ink: oklch(99% .01 190);--color-accent-ghost: oklch(62% .11 190 / .14);--color-ok: oklch(66% .15 155);--color-ok-ghost: oklch(66% .15 155 / .14);--color-warn: oklch(74% .15 78);--color-warn-ghost: oklch(74% .15 78 / .16);--color-danger: oklch(62% .19 22);--color-danger-ghost: oklch(62% .19 22 / .14);--color-info: oklch(64% .12 230);--color-focus: oklch(62% .11 190);--shadow-sm: 0 1px 3px oklch(45% .03 220 / .1);--shadow-md: 0 6px 20px oklch(45% .03 220 / .12);--shadow-lg: 0 14px 40px oklch(45% .03 220 / .16)}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;width:100%;overflow:clip}body{font-family:var(--font-body);font-size:var(--text-base);color:var(--color-ink-0);background:var(--color-paper-0);-webkit-font-smoothing:antialiased}.app{position:relative;height:100vh;width:100vw;overflow:clip;background:var(--color-paper-0)}.app>.canvas-layer{position:absolute;top:0;right:0;bottom:0;left:0}.grid-viewport{position:absolute;top:0;right:0;bottom:0;left:0}.grid-viewport canvas{display:block;width:100%;height:100%;cursor:crosshair;touch-action:none}.fluid-canvas{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.topbar{position:absolute;top:0;left:0;right:0;height:56px;display:flex;align-items:center;gap:var(--space-lg);padding:0 var(--space-lg);background:var(--color-paper-glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--color-line);z-index:40}.brand{display:flex;align-items:center;gap:var(--space-sm);font-family:var(--font-display);font-weight:750;font-size:var(--text-lg);letter-spacing:-.01em;color:var(--color-ink-0);white-space:nowrap}.brand .mark{width:24px;height:24px;border-radius:var(--radius-sm);background:radial-gradient(circle at 30% 25%,var(--color-accent-hi),var(--color-accent-dim));box-shadow:inset 0 0 0 1px #ffffff4d,0 0 12px var(--color-accent-ghost)}.brand small{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;color:var(--color-ink-2);letter-spacing:.02em;padding:2px 7px;border:1px solid var(--color-line);border-radius:var(--radius-pill);background:var(--color-paper-2)}.topbar-spacer{flex:1}.topbar-right{display:flex;align-items:center;gap:var(--space-sm);overflow-x:auto;max-width:100%}.topbar-right button{white-space:nowrap;flex:none}.diag-badges{display:flex;gap:6px;cursor:pointer}.diag-dropdown-wrap,.preset-dropdown-wrap{position:relative}.diag-dropdown,.preset-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:320px;max-height:320px;overflow-y:auto;padding:var(--space-sm);background:var(--color-paper-glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--color-line);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:50;animation:panel-in var(--dur-fast) var(--ease-out)}.preset-dropdown{left:0;right:auto;width:240px}.diag-item{display:flex;align-items:flex-start;gap:8px;padding:7px 9px;border-radius:var(--radius-sm);font-size:var(--text-sm);line-height:1.4;cursor:pointer}.diag-item:hover{background:var(--color-paper-3)}.diag-item .dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex:none}.diag-item.error .dot{background:var(--color-danger)}.diag-item.warning .dot{background:var(--color-warn)}.preset-dropdown button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;border:none;background:transparent;padding:8px 9px}.preset-dropdown button:hover{background:var(--color-paper-3)}.preset-dropdown button span{font-size:var(--text-xs);color:var(--color-ink-2);font-weight:400}.zoom-controls{display:flex;align-items:center;gap:6px;background:var(--color-paper-2);border:1px solid var(--color-line);border-radius:var(--radius-pill);padding:3px}.zoom-controls button{width:26px;height:26px;padding:0;border-radius:var(--radius-pill);border:none;background:transparent}.zoom-controls span{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-ink-2);min-width:38px;text-align:center}.panel{width:100%;overflow-y:auto;padding:var(--space-lg);background:var(--color-paper-glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--color-line);border-radius:var(--radius-lg);color:var(--color-ink-0);font-size:var(--text-base);box-shadow:var(--shadow-lg);animation:panel-in var(--dur-slow) var(--ease-out);z-index:30;flex:none}.left-dock{position:absolute;top:72px;bottom:var(--space-lg);left:var(--space-lg);width:260px;display:flex;flex-direction:column;gap:var(--space-md);overflow-y:auto;z-index:30}.left-dock .panel{max-height:100%;min-height:0}.inspector{position:absolute;top:72px;right:var(--space-lg);width:260px;max-height:calc(100vh - 88px)}@keyframes panel-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.panel h1{margin:0;font-family:var(--font-display);font-size:var(--text-xl);font-weight:750;letter-spacing:-.01em}.inspector-head{display:flex;align-items:center;justify-content:space-between}.inspector-head button{width:26px;height:26px;padding:0;border-radius:var(--radius-pill)}.subtitle{margin:2px 0 var(--space-lg);color:var(--color-ink-2);font-size:var(--text-sm)}.section{margin-top:var(--space-lg);padding-top:var(--space-md);border-top:1px solid var(--color-line-soft)}.section h2{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--color-ink-2);font-weight:650;margin:0 0 var(--space-sm)}button{font:inherit;font-weight:600;cursor:pointer;border-radius:var(--radius-sm);border:1px solid var(--color-line-strong);background:var(--color-paper-2);color:var(--color-ink-0);padding:8px 12px;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}button:hover{background:var(--color-paper-3)}button:active{transform:translateY(1px)}button:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}button.wide{width:100%}button.active{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-ink)}button.danger{background:var(--color-danger-ghost);border-color:transparent;color:var(--color-danger)}button.danger:hover{background:#e2484f38}.segmented{display:flex;gap:4px;padding:3px;background:var(--color-paper-2);border:1px solid var(--color-line);border-radius:var(--radius-md)}.segmented button{flex:1;border:none;background:transparent;color:var(--color-ink-2);padding:7px 8px;font-size:var(--text-sm);border-radius:var(--radius-sm)}.segmented button.active{background:var(--color-accent);color:var(--color-accent-ink)}.piece-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.piece{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;font-size:var(--text-sm);border-radius:var(--radius-md)}.piece-icon{width:28px;height:28px;border-radius:var(--radius-xs);background:linear-gradient(135deg,#e4527a,#c43862);transition:transform var(--dur-mid) var(--ease-out)}.piece-icon-elbow{border-radius:4px 100% 4px 4px}.piece-icon-tee{border-radius:var(--radius-xs);background:linear-gradient(135deg,#e4527a,#c43862)}.piece-icon-cross{border-radius:50%}.piece-icon-valve{background:linear-gradient(135deg,#ffc94d,#dd9f00);border-radius:50%}.piece-icon-pump{background:linear-gradient(135deg,#7c6fe0,#5b4fc4);border-radius:50%}.piece-icon-source{background:linear-gradient(135deg,#37b679,#25904f);border-radius:8px}.piece-icon-sink{background:linear-gradient(135deg,#4ea8de,#2e82b5);border-radius:8px}.field{display:block;margin:var(--space-sm) 0}.field span{display:block;color:var(--color-ink-2);font-size:var(--text-sm);margin-bottom:var(--space-xs)}.field input[type=range]{width:100%;accent-color:var(--color-accent)}.ef{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);margin:6px 0}.ef span{color:var(--color-ink-2);font-size:var(--text-sm)}.ef input,.ef select{width:118px;background:var(--color-paper-2);color:var(--color-ink-0);border:1px solid var(--color-line-strong);border-radius:var(--radius-xs);padding:6px 8px;font:inherit;font-size:var(--text-sm)}.ef input:focus-visible,.ef select:focus-visible{outline:2px solid var(--color-focus);outline-offset:1px;border-color:var(--color-accent)}.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:650;letter-spacing:.01em;border:1px solid var(--color-line);background:var(--color-paper-2);color:var(--color-ink-1)}.badge.warn{background:var(--color-warn-ghost);border-color:transparent;color:#7c5500;color:oklch(48% .13 78)}.badge.danger{background:var(--color-danger-ghost);border-color:transparent;color:var(--color-danger)}.readout{margin:var(--space-sm) 0 var(--space-md);padding:8px 10px;border-radius:var(--radius-sm);background:var(--color-paper-2);border:1px solid var(--color-line-soft)}.kv{display:flex;justify-content:space-between;gap:var(--space-sm);padding:3px 0;font-size:var(--text-sm)}.kv span:first-child{color:var(--color-ink-2)}.kv span:last-child{font-family:var(--font-mono);color:var(--color-ink-0);font-variant-numeric:tabular-nums}.legend{position:absolute;left:50%;bottom:var(--space-lg);transform:translate(-50%);min-width:260px;padding:var(--space-md) var(--space-lg);background:var(--color-paper-glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--color-line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:30}.legend-row{display:flex;align-items:center;gap:var(--space-sm)}.legend-row button{padding:5px 12px;font-size:var(--text-sm)}.legend-status{font-size:var(--text-xs);color:var(--color-ink-2)}.legend-status.warn{color:var(--color-danger);font-weight:650}.legend-bar{height:10px;border-radius:var(--radius-pill);margin-top:var(--space-sm)}.legend-scale{display:flex;justify-content:space-between;margin-top:4px;font-size:var(--text-xs);font-family:var(--font-mono);color:var(--color-ink-1)}.legend-scale .muted{font-family:var(--font-body);color:var(--color-ink-3)}.legend-warn{margin-top:6px;font-size:var(--text-xs);color:#8b2fc9;font-weight:650}.transient-panel{max-height:50vh}.hint{margin:var(--space-sm) 0 4px;font-size:var(--text-xs);color:var(--color-ink-2)}.target-list{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}.target-list button{font-size:var(--text-xs);padding:5px 8px}.transient-chart{display:block;margin-top:var(--space-sm);border-radius:var(--radius-xs);background:var(--color-paper-2)}.chart-legend{display:flex;gap:var(--space-md);margin-top:4px;font-size:var(--text-xs);color:var(--color-ink-2)}.chart-legend span{display:inline-flex;align-items:center;gap:4px}.chart-legend .dot{width:8px;height:8px;border-radius:2px;display:inline-block}.panel::-webkit-scrollbar,.left-dock::-webkit-scrollbar{width:10px}.panel::-webkit-scrollbar-thumb,.left-dock::-webkit-scrollbar-thumb{background:var(--color-line-strong);border-radius:var(--radius-pill);border:3px solid transparent;background-clip:padding-box}@media (max-width: 720px){.left-dock,.inspector{width:min(260px,62vw)}.brand small{display:none}.diag-dropdown,.preset-dropdown{width:min(320px,80vw)}}@media (max-width: 480px){.left-dock,.inspector{width:min(230px,74vw)}.panel{padding:var(--space-md)}.piece-grid{grid-template-columns:1fr}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}