@property --utd-ink{syntax:"<color>";inherits:true;initial-value:#1f1c15}@property --utd-ink2{syntax:"<color>";inherits:true;initial-value:#59513e}@property --utd-fine{syntax:"<color>";inherits:true;initial-value:#a69774}@property --utd-paper{syntax:"<color>";inherits:true;initial-value:#fdfbf7}@property --utd-grid{syntax:"<color>";inherits:true;initial-value:transparent}@property --utd-grid2{syntax:"<color>";inherits:true;initial-value:transparent}@property --utd-water{syntax:"<color>";inherits:true;initial-value:#ebf4fa}@property --utd-waterhatch{syntax:"<color>";inherits:true;initial-value:#c2e1f2}@property --utd-cool{syntax:"<color>";inherits:true;initial-value:#86abbf}@property --utd-warm{syntax:"<color>";inherits:true;initial-value:#cc9670}@property --utd-hl{syntax:"<color>";inherits:true;initial-value:#9e653c}@property --utd-soil{syntax:"<color>";inherits:true;initial-value:#a69774}@property --utd-glow{syntax:"<color>";inherits:true;initial-value:#f5eeb5}@property --utd-h1c{syntax:"<color>";inherits:true;initial-value:#232319}@property --utd-subc{syntax:"<color>";inherits:true;initial-value:#535349}@property --utd-eyec{syntax:"<color>";inherits:true;initial-value:#636e48}@property --utd-lnkc{syntax:"<color>";inherits:true;initial-value:#232319}.utd-hero{--utd-slate:color-mix(in oklab,var(--brand-accent-300) 50%,var(--brand-primary-900));--utd-slate-accent:color-mix(in oklab,var(--brand-accent-300) 85%,var(--brand-primary-900));--utd-earth:color-mix(in oklab,var(--brand-primary-600) 40%,var(--brand-neutral-700));--utd-earth-light:color-mix(in oklab,var(--brand-primary-600) 55%,var(--brand-primary-200));--utd-terracotta-accent:color-mix(in oklab,var(--brand-terracotta-400) 55%,var(--brand-terracotta-50));--utd-citrine-light:color-mix(in oklab,var(--brand-sunshine-400) 40%,var(--brand-primary-50));--utd-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--utd-ease:cubic-bezier(0.45,0,0.55,1);--utd-reach:1rem;--utd-h:var(--blog-hero-h);--utd-ink:var(--brand-primary-900);--utd-ink2:var(--utd-earth);--utd-fine:var(--utd-earth-light);--utd-paper:var(--background);--utd-grid:color-mix(in oklab,var(--utd-slate) 7%,transparent);--utd-grid2:color-mix(in oklab,var(--utd-slate) 13%,transparent);--utd-water:var(--brand-accent-50);--utd-waterhatch:var(--brand-accent-200);--utd-cool:var(--utd-slate-accent);--utd-warm:var(--utd-terracotta-accent);--utd-hl:var(--brand-terracotta-400);--utd-soil:var(--utd-earth-light);--utd-glow:var(--brand-sunshine-400);--utd-h1c:var(--foreground);--utd-subc:var(--brand-neutral-700);--utd-eyec:var(--brand-secondary-600);--utd-lnkc:var(--foreground);position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:var(--utd-h);transition:--utd-ink 1.2s var(--utd-ease),--utd-ink2 1.2s var(--utd-ease),--utd-fine 1.2s var(--utd-ease),--utd-paper 1.2s var(--utd-ease),--utd-grid 1.2s var(--utd-ease),--utd-grid2 1.2s var(--utd-ease),--utd-water 1.2s var(--utd-ease),--utd-waterhatch 1.2s var(--utd-ease),--utd-cool 1.2s var(--utd-ease),--utd-warm 1.2s var(--utd-ease),--utd-hl 1.2s var(--utd-ease),--utd-soil 1.2s var(--utd-ease),--utd-glow 1.2s var(--utd-ease),--utd-h1c 1.2s var(--utd-ease),--utd-subc 1.2s var(--utd-ease),--utd-eyec 1.2s var(--utd-ease),--utd-lnkc 1.2s var(--utd-ease)}.utd-hero[data-night]{--utd-ink:var(--brand-primary-100);--utd-ink2:var(--brand-accent-50);--utd-fine:var(--brand-accent-200);--utd-paper:var(--utd-slate);--utd-grid:color-mix(in oklab,var(--brand-accent-50) 8%,transparent);--utd-grid2:color-mix(in oklab,var(--brand-accent-50) 16%,transparent);--utd-water:var(--utd-slate-accent);--utd-waterhatch:var(--brand-accent-200);--utd-cool:var(--brand-accent-50);--utd-warm:var(--brand-sunshine-400);--utd-hl:var(--brand-sunshine-400);--utd-soil:var(--brand-accent-200);--utd-glow:var(--utd-citrine-light);--utd-h1c:var(--brand-primary-100);--utd-subc:var(--brand-primary-100);--utd-eyec:var(--utd-citrine-light);--utd-lnkc:var(--brand-primary-100)}.utd-paper{position:absolute;z-index:-1;top:calc(-1 * var(--utd-reach));bottom:0;left:50%;width:100vw;translate:-50% 0;background-color:var(--utd-paper);background-image:linear-gradient(var(--utd-grid) 1px,transparent 1px),linear-gradient(90deg,var(--utd-grid) 1px,transparent 1px),linear-gradient(var(--utd-grid2) 1px,transparent 1px),linear-gradient(90deg,var(--utd-grid2) 1px,transparent 1px);background-size:24px 24px,24px 24px,120px 120px,120px 120px;background-position:-1px -1px;mask-image:linear-gradient(180deg,#000 calc(100% - 3rem),transparent)}.utd-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem;padding-top:var(--blog-hero-inset);pointer-events:none}.utd-copy :where(a,button,span){pointer-events:auto}.utd-copy h1{max-width:48rem;color:var(--utd-h1c)}.utd-copy [data-slot=eyebrow]{color:var(--utd-eyec)}.utd-copy .utd-subtitle{color:var(--utd-subc)}.utd-copy [data-slot=blog-breadcrumbs] a{color:var(--utd-lnkc)}.utd-copy [data-slot=blog-breadcrumbs] svg{color:var(--utd-subc)}.utd-copy [data-slot=hero-link]{border-color:var(--utd-ink);background-color:color-mix(in oklab,var(--utd-paper) 85%,transparent);color:var(--utd-h1c)}.utd-copy [data-slot=hero-link]:focus-visible{--tw-ring-color:color-mix(in oklab,var(--utd-ink) 70%,transparent)}.utd-copy [data-slot=hero-link-meta]{color:var(--utd-subc)}@media (hover:hover){.utd-copy [data-slot=hero-link]:hover{background-color:color-mix(in oklab,var(--utd-ink) 10%,var(--utd-paper))}}@media (max-width:63.99rem) and (max-height:46rem){.utd-drawing{flex-basis:7rem;min-height:7rem}}.utd-drawing{position:relative;z-index:1;flex:1 1 8rem;min-height:8rem;margin-top:.5rem;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.utd-svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}.utd-legend{display:none}.utd-controls{position:relative;z-index:3;justify-content:flex-end;gap:.625rem;margin-top:auto;padding-top:.5rem}.utd-controls,.utd-hint{display:flex;align-items:center}.utd-hint{gap:.5rem;min-width:0;margin:0 auto 0 0;padding:.4375rem .75rem .4375rem .5625rem;border:1px solid var(--utd-grid2);border-radius:9999px;background:var(--utd-paper);box-shadow:0 8px 22px color-mix(in oklab,var(--brand-primary-900) 8%,transparent);color:var(--utd-ink2);font-size:.75rem;line-height:1.125rem;pointer-events:none;transition:opacity .7s ease,translate .7s ease;animation:utd-hint-in .9s ease 3.2s backwards}.utd-hint svg{flex:none;color:var(--utd-hl)}.utd-hero[data-hinted] .utd-hint{opacity:0;translate:0 10px}.utd-hint-pointer{display:none}@media (hover:hover) and (pointer:fine){.utd-hint-pointer{display:inline}.utd-hint-touch{display:none}}.utd-control{display:grid;flex:none;place-items:center;width:2.5rem;height:2.5rem;border:1px solid color-mix(in oklab,var(--brand-primary-900) 18%,transparent);border-radius:9999px;background:var(--brand-primary-50);color:var(--brand-primary-900);cursor:pointer}.utd-control:focus-visible{outline:none;box-shadow:0 0 0 2px var(--brand-primary-50),0 0 0 5px color-mix(in oklab,var(--brand-primary-900) 70%,transparent)}.utd-note{position:absolute;z-index:4;display:flex;flex-direction:column;gap:3px;width:max-content;max-width:236px;padding:9px 12px 10px;border:1px solid var(--utd-ink2);border-radius:8px;background:var(--utd-paper);box-shadow:0 10px 26px color-mix(in oklab,var(--brand-primary-900) 14%,transparent);font-size:13px;line-height:18px;text-decoration:none;transform:translate(-50%,calc(-100% - 12px));animation:utd-note-in .35s ease backwards}.utd-note,.utd-note:hover{color:var(--utd-ink)}.utd-note:focus-visible{outline:none;box-shadow:0 0 0 2px var(--utd-paper),0 0 0 4px var(--utd-hl)}.utd-note:after{content:"";position:absolute;bottom:-6px;left:calc(50% + var(--utd-note-arrow, 0px));width:10px;height:10px;border-right:1px solid var(--utd-ink2);border-bottom:1px solid var(--utd-ink2);background:var(--utd-paper);transform:translateX(-50%) rotate(45deg)}.utd-note-eyebrow{color:var(--utd-hl);font-family:var(--utd-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase}.utd-note-title{font-weight:500}@media (min-width:64rem){.utd-hero{--utd-draw-w:min(40rem,52vw,calc((var(--utd-h) - 2.5rem) * 16 / 15));--utd-draw-right:calc(max(1rem, (100vw - 72rem) / 2 - 110px) - max(0px, (100vw - 72rem) / 2) - 2rem)}.utd-copy{max-width:calc(100% - var(--utd-draw-w) - var(--utd-draw-right) - 1.5rem)}.utd-drawing{position:absolute;top:-.625rem;right:var(--utd-draw-right);width:var(--utd-draw-w);min-height:0;margin:0;aspect-ratio:640/600}.utd-controls{padding-top:1rem}.utd-hint{margin-right:.5rem;font-size:.8125rem}}.utd-hero[data-legend-open] .utd-legend{position:absolute;z-index:5;right:0;bottom:3.5rem;display:block;max-width:calc(100vw - 2rem);padding:.625rem .875rem .75rem 1.25rem;border:1px solid var(--utd-grid2);border-radius:.75rem;background:var(--utd-paper);box-shadow:0 10px 26px color-mix(in oklab,var(--brand-primary-900) 14%,transparent);color:var(--utd-ink2);font-family:var(--utd-mono);font-size:11.5px;letter-spacing:.02em;animation:utd-note-in .25s ease backwards}.utd-hero[data-legend-open] .utd-row-label{width:96px}.utd-legend .utd-legend-deck{margin:6px 0 0;padding:6px 0 0;border-top:1px solid var(--utd-grid2);list-style:none}.utd-legend .utd-legend-deck .utd-row-label{width:auto}.utd-legend-toggle[aria-expanded=true]{background:var(--brand-primary-900);color:var(--brand-primary-50)}@media (min-width:80rem) and (min-height:62rem){.utd-controls{align-items:flex-end}.utd-hero .utd-legend,.utd-hero[data-legend-open] .utd-legend{position:static;z-index:auto;order:-1;margin-right:auto;display:block;max-width:none;padding:0;border:0;background:none;box-shadow:none;color:var(--utd-ink2);font-family:var(--utd-mono);font-size:11.5px;letter-spacing:.02em;animation:utd-fade .9s ease 2.2s backwards}.utd-hero[data-legend-open] .utd-row-label{width:116px}.utd-hero .utd-legend{grid-template-columns:auto auto;column-gap:2.5rem;align-items:start}.utd-hero .utd-legend,.utd-hero[data-legend-open] .utd-legend{display:grid}.utd-legend .utd-legend-deck{margin:0;padding:0;border-top:0}.utd-legend .utd-title-block{grid-column:1/-1}.utd-legend-toggle{display:none}}.utd-legend ol{margin:0;padding:0;list-style:none}.utd-row{display:flex;align-items:baseline;width:100%;margin:0 0 0 -8px;padding:0 8px;border:0;border-radius:6px;background:var(--utd-row-bg,transparent);color:var(--utd-row-on,var(--utd-ink2));font:inherit;letter-spacing:inherit;line-height:23px;text-align:left;cursor:pointer;transition:background-color .2s ease}.utd-row:focus-visible{outline:none;box-shadow:0 0 0 2px var(--utd-hl)}.utd-row-ordinal{flex:none;width:30px;color:var(--utd-row-on,var(--utd-fine))}.utd-row-label{flex:none;width:116px;color:var(--utd-row-on,var(--utd-ink));letter-spacing:.08em;text-transform:uppercase}.utd-row-value{flex:none;font-variant-numeric:tabular-nums}.utd-title-block{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--utd-grid2);color:var(--utd-fine);font-size:10.5px;letter-spacing:.1em;line-height:16px;text-transform:uppercase}.utd-svg .utd-ink,.utd-svg .utd-pipe-in,.utd-svg .utd-pipe-out{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;animation:utd-ink 1.5s cubic-bezier(.45,0,.2,1) backwards;animation-delay:var(--d,0s)}.utd-svg .utd-ink{stroke:var(--utd-stroke,var(--utd-ink));stroke-width:1.25}.utd-svg .utd-fine{stroke:var(--utd-stroke,var(--utd-ink2));stroke-width:.9}.utd-svg .utd-pipe-out{stroke:var(--utd-stroke,var(--utd-ink));stroke-width:8}.utd-svg .utd-pipe-in{stroke:var(--utd-paper);stroke-width:5.6}.utd-svg .utd-flow{fill:none;stroke-dasharray:4 9;stroke-linecap:round;stroke-width:2.2;animation:utd-fade 1s ease backwards;animation-delay:var(--d,0s)}.utd-svg .utd-cool{stroke:var(--utd-cool)}.utd-svg .utd-warm{stroke:color-mix(in oklab,var(--utd-warm),var(--utd-hl) calc(var(--utd-warmth, .2) * 100%))}.utd-svg .utd-dye{fill:none;pointer-events:none;stroke:var(--utd-hl);stroke-dasharray:.16 2;stroke-linecap:round;stroke-width:4.4}.utd-svg .utd-fill{animation:utd-fade 1.2s ease backwards;animation-delay:var(--d,0s)}.utd-svg .utd-fade{animation:utd-fade .9s ease backwards;animation-delay:var(--d,0s)}.utd-svg .utd-soil{fill:url(#utd-soil);opacity:.7}.utd-svg .utd-crete{fill:url(#utd-crete)}.utd-svg .utd-water{fill:var(--utd-water)}.utd-svg .utd-waterhatch{fill:url(#utd-ripples)}.utd-svg .utd-sandbed{fill:url(#utd-sand)}.utd-svg .utd-hatch{stroke:var(--utd-soil);stroke-width:.6}.utd-svg .utd-dot{fill:var(--utd-fine)}.utd-svg .utd-wline{stroke:var(--utd-waterhatch);stroke-width:1}.utd-svg .utd-solid{fill:var(--utd-ink)}.utd-svg .utd-nut{fill:var(--utd-paper);stroke:var(--utd-ink);stroke-width:1.1}.utd-svg .utd-surf{fill:none;stroke:var(--utd-ink2);stroke-linejoin:round;stroke-width:1.1}.utd-svg .utd-tag circle{fill:var(--utd-tag-fill,var(--utd-paper));stroke:var(--utd-stroke,var(--utd-ink2));stroke-width:.9}.utd-svg .utd-label,.utd-svg .utd-tag text{fill:var(--utd-tag-text,var(--utd-ink2));font-family:var(--utd-mono);font-size:8px;letter-spacing:.02em;text-anchor:middle}.utd-svg .utd-label{fill:var(--utd-ink2)}.utd-svg .utd-label-big{font-size:9px}.utd-svg .utd-label-hot{fill:var(--utd-hl);font-size:8.5px;letter-spacing:.08em}.utd-svg [data-node=backwash]{text-transform:uppercase}.utd-svg .utd-readout{fill:var(--utd-warm);font-family:var(--utd-mono);font-size:7.5px;text-anchor:middle}.utd-svg .utd-spin{transform-origin:560px 60px;animation:utd-spin 90s linear infinite}.utd-svg .utd-drift{animation:utd-drift 26s ease-in-out infinite alternate}.utd-svg .utd-drift-slow{animation-duration:34s;animation-direction:alternate-reverse}.utd-svg .utd-bub{fill:none;stroke:var(--utd-cool);stroke-width:.9;animation:utd-bub 2.6s ease-in infinite}.utd-svg [data-backwash] .utd-bub{animation-duration:.7s}.utd-svg .utd-glow{fill:url(#utd-glow);animation:utd-glow 5s ease-in-out infinite alternate}.utd-svg .utd-glow-stop{stop-color:var(--utd-glow);stop-opacity:.95}.utd-svg .utd-glow-stop-end{stop-opacity:0}.utd-svg .utd-jet{fill:none;stroke:color-mix(in oklab,var(--utd-warm),var(--utd-hl) calc(var(--utd-warmth, .2) * 100%));stroke-dasharray:3 5;stroke-linecap:round;stroke-width:1.1;animation:utd-jet 1s linear infinite}.utd-svg .utd-coil{fill:none;stroke:var(--utd-warm);stroke-linejoin:round;stroke-width:1.4;animation:utd-glow 2.4s ease-in-out infinite alternate}.utd-svg .utd-star{fill:var(--utd-ink);animation:utd-twinkle 3.2s ease-in-out infinite alternate}.utd-svg .utd-moon,.utd-svg .utd-screen,.utd-svg .utd-stars{opacity:0}.utd-svg .utd-glow-group{opacity:.4}.utd-svg .utd-glow-group,.utd-svg .utd-moon,.utd-svg .utd-screen,.utd-svg .utd-stars,.utd-svg .utd-sun{transition:opacity 1.2s var(--utd-ease)}.utd-hero[data-night] .utd-glow-group,.utd-hero[data-night] .utd-moon,.utd-hero[data-night] .utd-stars{opacity:1}.utd-hero[data-night] .utd-screen{opacity:.9}.utd-hero[data-night] .utd-sun{opacity:0}.utd-svg .utd-floater[data-kind=leaf] .utd-floater-nut,.utd-svg .utd-floater[data-kind=nut] .utd-floater-leaf{display:none}.utd-svg .utd-floater-leaf{fill:none;stroke:var(--utd-ink2);stroke-linecap:round;stroke-linejoin:round;stroke-width:1}.utd-svg .utd-drop{fill:none;stroke:var(--utd-cool);stroke-width:.9}.utd-svg .utd-drop[data-kind=droplet]{stroke:var(--utd-ink2)}.utd-svg .utd-part,.utd-svg .utd-tap{cursor:pointer}.utd-svg .utd-hit{fill:transparent}@media (hover:hover){.utd-svg .utd-part:hover{--utd-stroke:var(--utd-hl);--utd-tag-fill:var(--utd-hl);--utd-tag-text:var(--utd-paper)}.utd-hero:has([data-part=drain]:hover) [data-legend=drain],.utd-hero:has([data-part=filter]:hover) [data-legend=filter],.utd-hero:has([data-part=heater]:hover) [data-legend=heater],.utd-hero:has([data-part=light]:hover) [data-legend=light],.utd-hero:has([data-part=pump]:hover) [data-legend=pump],.utd-hero:has([data-part=return]:hover) [data-legend=return],.utd-hero:has([data-part=skimmer]:hover) [data-legend=skimmer]{--utd-row-on:var(--utd-hl);--utd-row-bg:var(--utd-grid2)}}.utd-hero:has([data-legend=drain] .utd-row:is(:hover,:focus-visible)) [data-part=drain],.utd-hero:has([data-legend=filter] .utd-row:is(:hover,:focus-visible)) [data-part=filter],.utd-hero:has([data-legend=heater] .utd-row:is(:hover,:focus-visible)) [data-part=heater],.utd-hero:has([data-legend=light] .utd-row:is(:hover,:focus-visible)) [data-part=light],.utd-hero:has([data-legend=pump] .utd-row:is(:hover,:focus-visible)) [data-part=pump],.utd-hero:has([data-legend=return] .utd-row:is(:hover,:focus-visible)) [data-part=return],.utd-hero:has([data-legend=skimmer] .utd-row:is(:hover,:focus-visible)) [data-part=skimmer],.utd-hero[data-lit~=drain] [data-part=drain],.utd-hero[data-lit~=filter] [data-part=filter],.utd-hero[data-lit~=heater] [data-part=heater],.utd-hero[data-lit~=light] [data-part=light],.utd-hero[data-lit~=palm] [data-part=palm],.utd-hero[data-lit~=pump] [data-part=pump],.utd-hero[data-lit~=return] [data-part=return],.utd-hero[data-lit~=skimmer] [data-part=skimmer],.utd-hero[data-lit~=sun] [data-part=sun],.utd-hero[data-lit~=umbrella] [data-part=umbrella]{--utd-stroke:var(--utd-hl);--utd-tag-fill:var(--utd-hl);--utd-tag-text:var(--utd-paper)}.utd-hero[data-lit~=drain] [data-legend=drain],.utd-hero[data-lit~=filter] [data-legend=filter],.utd-hero[data-lit~=heater] [data-legend=heater],.utd-hero[data-lit~=light] [data-legend=light],.utd-hero[data-lit~=pump] [data-legend=pump],.utd-hero[data-lit~=return] [data-legend=return],.utd-hero[data-lit~=skimmer] [data-legend=skimmer],.utd-legend .utd-row:focus-visible,.utd-legend .utd-row:hover{--utd-row-on:var(--utd-hl);--utd-row-bg:var(--utd-grid2)}.utd-hero[data-paused] .utd-svg *{animation-play-state:paused}@media (max-width:40rem){.utd-svg .utd-ink{stroke-width:1.9}.utd-svg .utd-fine{stroke-width:1.4}.utd-svg .utd-label,.utd-svg .utd-readout,.utd-svg .utd-tag{display:none}}@media (forced-colors:active){.utd-svg .utd-dye,.utd-svg .utd-flow,.utd-svg .utd-glow{display:none}}@media (prefers-reduced-motion:reduce){.utd-hero,.utd-hero *,.utd-hero :after,.utd-hero :before{animation:none!important;transition:none!important}}@keyframes utd-ink{0%{stroke-dashoffset:1}}@keyframes utd-fade{0%{opacity:0}}@keyframes utd-hint-in{0%{opacity:0;translate:0 10px}}@keyframes utd-note-in{0%{opacity:0;translate:0 6px}}@keyframes utd-jet{to{stroke-dashoffset:-8}}@keyframes utd-spin{to{transform:rotate(1turn)}}@keyframes utd-drift{to{transform:translateX(18px)}}@keyframes utd-bub{0%{opacity:0;transform:translateY(0)}15%{opacity:1}to{opacity:0;transform:translateY(-40px)}}@keyframes utd-glow{0%{opacity:.35}to{opacity:.85}}@keyframes utd-twinkle{0%{opacity:.25}to{opacity:1}}