:root{
  --ink:#0e1418; --ink-2:#1b242b; --line:#26323a;
  --paper:#f4f6f7; --muted:#8fa0ab; --hot:#ff8a2b; --blue:#4ea3e0;
  --rail:rgba(14,20,24,.82);
  /* one signature curve, four durations, .18s dominant */
  --e:cubic-bezier(.2,.8,.2,1);
  --t:.18s; --t-mid:.28s; --t-slow:.42s;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:radial-gradient(120% 90% at 50% 0%,#1d272e 0%,#0c1216 55%,#080c0f 100%);
  color:var(--paper); font:400 15px/1.55 Inter,system-ui,sans-serif; overflow:hidden;
}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; letter-spacing:.04em}

#stage{position:fixed; inset:0}
#c{width:100%; height:100%; display:block}
#labels{position:absolute; inset:0; pointer-events:none}

/* The tank is a large, bright, moving object and the type sits straight on top
   of it. These two gradients give every word its own ground at any width,
   which is cheaper and steadier than moving the copy out of the way. */
.scrim{position:fixed; inset:0; z-index:5; pointer-events:none;
  background:
    linear-gradient(90deg,  rgba(8,12,15,.92) 0%, rgba(8,12,15,.62) 14%, rgba(8,12,15,0) 33%),
    linear-gradient(270deg, rgba(8,12,15,.88) 0%, rgba(8,12,15,.52) 12%, rgba(8,12,15,0) 29%),
    linear-gradient(0deg,   rgba(8,12,15,.75) 0%, rgba(8,12,15,0) 14%);
}

/* loader */
#loader{position:fixed; inset:0; display:grid; place-content:center; gap:14px; background:#0a0f13; z-index:50; transition:opacity var(--t-slow) var(--e)}
#loader.gone{opacity:0; pointer-events:none}
.loader__bar{width:220px; height:2px; background:#1d272e; overflow:hidden}
.loader__bar i{display:block; height:100%; width:30%; background:var(--hot); animation:sl 1.1s ease-in-out infinite}
@keyframes sl{0%{transform:translateX(-110%)}100%{transform:translateX(370%)}}
.loader__t{color:var(--muted); text-align:center}

/* header */
.top{position:fixed; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; z-index:20; pointer-events:none}
.brand{display:flex; align-items:center; gap:11px; pointer-events:auto}
.mark{width:26px; height:26px; border:2px solid var(--hot); border-radius:3px; position:relative; flex:none}
.mark::after{content:""; position:absolute; inset:4px 4px auto; height:2px; background:var(--hot);
  box-shadow:0 5px 0 var(--hot),0 10px 0 var(--hot)}
.brand__t{font:600 17px/1 'Barlow Condensed',sans-serif; letter-spacing:.11em; display:flex; flex-direction:column; gap:3px}
.brand__t small{font:500 9px/1 'JetBrains Mono',monospace; letter-spacing:.12em; color:var(--muted)}

.prods{display:flex; gap:6px; pointer-events:auto; background:var(--rail); padding:5px; border-radius:999px;
  backdrop-filter:blur(10px); border:1px solid var(--line)}
.prod{appearance:none; border:0; background:transparent; color:var(--muted); cursor:pointer;
  font:600 12px/1 Inter,sans-serif; letter-spacing:.04em; padding:9px 17px; border-radius:999px; transition:color var(--t) var(--e),background var(--t) var(--e)}
.prod:hover{color:var(--paper)}
.prod.is-on{background:var(--hot); color:#12181c}

/* title */
.title{position:fixed; left:24px; top:96px; z-index:15; max-width:330px; pointer-events:none}
.eyebrow{color:var(--hot); margin-bottom:10px}
.title h1{margin:0 0 12px; font:700 62px/.88 'Barlow Condensed',sans-serif; letter-spacing:-.005em;
  font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
.title h1 .unit{font:500 15px/1 Inter,sans-serif; letter-spacing:.06em; color:var(--muted); text-transform:uppercase}
.dims{color:#7d919e; margin:-4px 0 12px; letter-spacing:.06em}
.title p{margin:0; color:#b6c5cf; font-size:13.5px; max-width:310px}

/* rails */
.rail{position:fixed; z-index:18; background:var(--rail); backdrop-filter:blur(12px);
  border:1px solid var(--line); border-radius:12px; padding:15px 15px 13px; width:216px}
.rail--left{left:24px; bottom:64px}
.rail--right{right:24px; top:92px}
.rail__h{font:600 10px/1 'JetBrains Mono',monospace; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:11px; display:flex; justify-content:space-between; align-items:center}
.rail__h--sp{margin-top:19px}
.rail__h em{font-style:normal; color:var(--hot)}
.rail__note{margin-top:11px; font-size:10.5px; color:#6f8492; line-height:1.4}
.rail__note--tight{margin-top:8px}

/* parts list */
.parts{display:flex; flex-direction:column; gap:1px; max-height:min(42vh,320px); overflow-y:auto; margin:0 -5px}
.parts{scrollbar-width:thin}
.parts::-webkit-scrollbar{width:3px; height:3px}
.parts::-webkit-scrollbar-thumb{background:#33424d; border-radius:2px}
.pt{appearance:none; border:0; background:transparent; color:#c3d0d9; text-align:left; cursor:pointer;
  font:500 12.5px/1.25 Inter,sans-serif; padding:8px 9px; border-radius:6px; display:flex; gap:8px;
  align-items:center; transition:color var(--t) var(--e),background var(--t) var(--e)}
.pt:hover{background:#1a242b; color:#fff}
.pt.is-on{background:var(--hot); color:#12181c; font-weight:600}
.pt i{width:4px; height:4px; border-radius:50%; background:#4c5f6c; flex:none; transition:color var(--t) var(--e),background var(--t) var(--e)}
.pt.is-on i{background:#12181c}
.pt.has-cad i{background:var(--blue); box-shadow:0 0 0 3px rgba(78,163,224,.18)}

/* swatches */
.swatches{display:grid; grid-template-columns:repeat(5,1fr); gap:7px}
.sw{aspect-ratio:1; border-radius:6px; border:2px solid transparent; cursor:pointer; padding:0;
  outline:1px solid rgba(255,255,255,.1); outline-offset:-1px;
  transition:transform var(--t) var(--e),border-color var(--t) var(--e)}
.sw:hover{transform:scale(1.08)}
.sw.is-on{border-color:#fff; transform:scale(1.08)}

/* capacity */
.capwrap{position:relative}
.cap{width:100%; appearance:none; height:3px; border-radius:3px; background:#2b3841; outline:0; cursor:pointer;
  position:relative; z-index:2}
.cap::-webkit-slider-thumb{appearance:none; width:15px; height:15px; border-radius:50%; background:var(--hot);
  border:2px solid #12181c; cursor:grab}
.cap::-moz-range-thumb{width:15px; height:15px; border-radius:50%; background:var(--hot); border:2px solid #12181c}
.capscale{display:flex; justify-content:space-between; color:#6f8492; margin-top:6px}

/* the exact point on the track where the tank she sent us lives */
.capmark{position:absolute; top:50%; width:1px; height:15px; margin-top:-7.5px; background:var(--blue);
  opacity:.75; pointer-events:none; z-index:1}
.capback{display:block; width:100%; min-height:44px; margin-top:9px; appearance:none; cursor:pointer;
  background:transparent; border:1px solid var(--line); border-radius:6px; color:var(--muted);
  font:500 11px/1.3 Inter,sans-serif; padding:8px 10px; transition:color var(--t) var(--e),border-color var(--t) var(--e)}
.capback:hover{color:#fff; border-color:#3d4d58}

/* segmented */
.seg{display:flex; background:#151e24; border-radius:7px; padding:3px; gap:2px}
.seg--top{pointer-events:auto; background:var(--rail); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:999px; padding:5px}
.seg--top .seg__b{flex:none; white-space:nowrap; border-radius:999px; padding:9px 15px;
  font-size:12px; font-weight:600; letter-spacing:.04em}
.seg--top .seg__b.is-on{background:#2b3a44}
.seg__b{flex:1; appearance:none; border:0; background:transparent; color:var(--muted); cursor:pointer;
  font:500 11.5px/1 Inter,sans-serif; padding:8px 4px; border-radius:5px; transition:color var(--t) var(--e),background var(--t) var(--e)}
.seg__b:hover{color:#fff}
.seg__b.is-on{background:#2b3a44; color:#fff}

/* hotspot labels */
.hot{pointer-events:auto; cursor:pointer; transform:translate(-50%,-50%)}
.hot__d{width:13px; height:13px; border-radius:50%; background:var(--hot); border:2px solid #0e1418;
  box-shadow:0 0 0 0 rgba(255,138,43,.5); animation:pp 2.1s ease-out infinite}
@keyframes pp{0%{box-shadow:0 0 0 0 rgba(255,138,43,.5)}100%{box-shadow:0 0 0 15px rgba(255,138,43,0)}}
.hot__l{position:absolute; left:20px; top:-4px; white-space:nowrap; font:600 11px/1 Inter,sans-serif;
  background:#0e1418; border:1px solid var(--line); padding:5px 9px; border-radius:5px; color:#fff}

/* the scale figure names itself, because at three million gallons it is only
   a few pixels tall and a shape that small has to say what it is */
.figlab{transform:translate(-50%,-50%); white-space:nowrap; color:#b6c5cf; font-size:9.5px;
  letter-spacing:.1em; text-transform:uppercase; text-shadow:0 1px 6px rgba(8,12,15,.95); pointer-events:none}

/* only appears once you are in close on a part */
.reset{position:fixed; left:50%; bottom:58px; transform:translate(-50%,10px); z-index:24; appearance:none;
  min-height:44px; padding:11px 18px; border-radius:999px; cursor:pointer;
  background:rgba(14,20,24,.9); backdrop-filter:blur(10px); border:1px solid var(--line); color:var(--paper);
  font:500 12px/1 Inter,sans-serif; display:flex; align-items:center; gap:9px;
  opacity:0; pointer-events:none; transition:opacity var(--t-mid) var(--e),transform var(--t-mid) var(--e)}
.reset.is-on{opacity:1; transform:translate(-50%,0); pointer-events:auto}
.reset:hover{border-color:#3d4d58}
.reset kbd{font:500 9.5px/1 'JetBrains Mono',monospace; color:var(--muted); border:1px solid var(--line);
  border-radius:3px; padding:3px 5px}

/* spec card */
.card{position:fixed; right:24px; bottom:64px; width:296px; z-index:22; background:#111a20;
  max-height:calc(100vh - var(--railbot,420px) - 84px); overflow-y:auto; overscroll-behavior:contain;
  border:1px solid var(--line); border-radius:12px; padding:18px; opacity:0; transform:translateY(10px);
  pointer-events:none; transition:opacity var(--t-mid) var(--e),transform var(--t-mid) var(--e)}
.card.is-on{opacity:1; transform:none; pointer-events:auto}
.card__x{position:absolute; top:10px; right:12px; appearance:none; border:0; background:transparent;
  color:var(--muted); font-size:19px; cursor:pointer; line-height:1}
.card h3{margin:0 0 3px; font:600 16px/1.2 Inter,sans-serif}
.card .kicker{font:500 10px/1 'JetBrains Mono',monospace; letter-spacing:.12em; color:var(--hot);
  text-transform:uppercase; margin-bottom:9px}
.card ul{margin:11px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px}
.card li{font-size:12.5px; color:#b6c5cf; padding-left:13px; position:relative}
.card li::before{content:""; position:absolute; left:0; top:7px; width:4px; height:4px; border-radius:50%; background:#3f5260}
.card .cadtag{margin-top:12px; font:500 10px/1.4 'JetBrains Mono',monospace; color:var(--blue);
  background:rgba(78,163,224,.1); border:1px solid rgba(78,163,224,.25); padding:6px 8px; border-radius:5px}

/* footer */
.foot{position:fixed; left:0; right:0; bottom:0; z-index:19; display:flex; justify-content:space-between;
  align-items:center; padding:13px 24px; color:#5e7180; pointer-events:none}
.foot .mono{font-size:10px}
.foot__b{pointer-events:auto; appearance:none; background:transparent; border:1px solid var(--line);
  color:var(--muted); font:500 11px/1 Inter,sans-serif; padding:7px 13px; border-radius:6px; cursor:pointer}
.foot__b:hover{color:#fff; border-color:#3d4d58}

/* between here and 980 the copy is the widest thing on the left, so it is the
   first thing to reach the tank. pull it in before that happens. */
@media (max-width:1240px){
  .title{max-width:274px}
  .title h1{font-size:52px}
  .title p{font-size:12.5px; max-width:262px}
}
@media (max-width:980px){
  .rail--right{top:auto; bottom:64px; right:16px; transform:none; width:178px}
  .rail--left{left:16px; bottom:auto; top:150px; width:178px}
  .title{top:88px; left:16px; max-width:calc(100% - 210px)}
  .title h1{font-size:44px}
  .card{left:16px; right:16px; width:auto; bottom:126px}
  /* three things no longer fit on one header row */
  .top{flex-wrap:wrap; gap:10px; padding:14px 16px}
  .seg--top{order:3; width:100%; justify-content:space-between}
  .seg--top .seg__b{flex:1; padding:9px 8px; font-size:11.5px}
  .title{top:150px}
  .rail--left{top:214px}
  .reset{bottom:auto; top:156px; left:auto; right:16px; transform:translateY(-8px); padding:9px 13px; font-size:11px}
  .reset.is-on{transform:none}
  .reset kbd{display:none}
  .scrim{background:linear-gradient(0deg,rgba(8,12,15,.8) 0%,rgba(8,12,15,0) 26%),
                    linear-gradient(180deg,rgba(8,12,15,.85) 0%,rgba(8,12,15,0) 30%)}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001s!important; transition-duration:.001s!important}}

/* ---------------------------------------------------------------
   PHONE. The two side rails cannot coexist at 375px: they overlap
   each other and bury the headline. So the layout changes shape
   rather than shrinking. Header stacks, the parts list turns into a
   horizontal chip scroller, and the finish and capacity controls
   become one sheet at the bottom. The tank keeps the middle band.
----------------------------------------------------------------*/
@media (max-width:760px){
  .top{flex-wrap:wrap; gap:8px; padding:12px 14px 10px}
  .brand{width:100%}
  .brand__t{font-size:15px}
  .prods{flex:1; padding:4px}
  .prod{flex:1; text-align:center; padding:9px 8px; font-size:11.5px}
  .seg--top{order:3; width:100%; padding:4px}
  .seg--top .seg__b{flex:1 1 0; text-align:center; padding:9px 6px; font-size:11.5px}

  .title{left:14px; right:14px; top:172px; max-width:none}
  .title .eyebrow{margin-bottom:6px}
  .title h1{font-size:40px; margin-bottom:6px}
  .dims{margin:0}
  .title p{display:none}          /* the how-to line is desktop only */

  .rail{left:14px; right:14px; width:auto; padding:10px 12px}
  .rail--left{top:auto; bottom:calc(42px + var(--sheet,190px) + 8px)}
  .rail--left .rail__note{display:none}
  .parts{flex-direction:row; max-height:none; overflow-x:auto; overflow-y:hidden;
    gap:6px; margin:0; padding-bottom:2px}
  .pt{flex:none; white-space:nowrap; background:#1a242b; padding:10px 13px; font-size:12px}

  .rail--right{top:auto; bottom:42px; transform:none}
  .rail--right .rail__note{display:none}
  .rail__h--sp{margin-top:12px}
  .swatches{grid-template-columns:repeat(10,1fr); gap:5px}
  .capback{min-height:44px; margin-top:8px}

  .card{left:14px; right:14px; width:auto; bottom:42px; z-index:30; max-height:56vh}
  /* the card IS the bottom sheet here, so the floating button would land on
     top of it. its close button does the same job and is already in reach. */
  .reset{display:none}

  .foot{padding:10px 14px; gap:10px}
  .foot .mono{font-size:9px; line-height:1.3}
  .foot__b{flex:none; white-space:nowrap; padding:7px 10px; font-size:10px}
}