/* v3.css (2026-10-15): the chapters layout, loaded last. Two layouts (html.lay-a "Chapters", html.lay-b "Story"),
   the camera's floating view and its toggle, the light bar, the intro, the filled mock tank, and the parts redone in
   the 10/15 review. Chum blue is the accent. */
:root { --chum: #248FD3; --mk-water-top: rgb(150 196 214 / 34%); --mk-water-bot: rgb(92 150 178 / 46%); --r: 14px; --tabbar: 0px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --mk-water-top: rgb(70 130 160 / 36%); --mk-water-bot: rgb(40 90 120 / 52%); } }
:root[data-theme="dark"] { --mk-water-top: rgb(70 130 160 / 36%); --mk-water-bot: rgb(40 90 120 / 52%); }

/* ------------------------------------------------------------------ the page */
html.v3 body { padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom)); }
html.v3 .page, html.v3 .page.on { display: block; padding: 0; }
html.v3 .page[hidden] { display: none !important; }
html.v3 .pages { max-width: none; }
html.v3 .chapter { display: block; max-width: 64rem; margin: 0 auto; padding: 0 var(--pad); }
html.v3.site .chapter .page .wrap, html.v3.pager.fullview.site .chapter .page .wrap { max-width: none; padding: 0; margin: 0; }
html.v3 .band .wrap::before { display: none; }
html.v3 .band { border: 0; background: none; }
html.v3 .camtools, html.v3 .theaterbtn, html.v3 #hub, html.v3 .livenow { display: none !important; }
html.v3 .sub > .wrap > .head, html.v3 .sub .card-body > .head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .9rem; margin: 0 0 1.1rem; padding: 0; border: 0; }
html.v3 .sub .head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.45rem, 3.2vw, 1.9rem); letter-spacing: 0; margin: 0; }
html.v3 .sub .head > p { margin: 0; color: var(--grey); font-size: .875rem; }

/* chapter titles: the clear breaks between the five groups */
.ch-head { padding: clamp(3rem, 8vw, 5.5rem) 0 1.25rem; }
.ch-head h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 7vw, 3.6rem); line-height: 1; color: var(--strong); letter-spacing: -.01em; }
.ch-head h2::before { content: ""; display: block; width: 2.25rem; height: 3px; margin-bottom: 1.1rem; background: var(--chum); border-radius: 2px; }

/* ------------------------------------------------------------------ the bar */
html.v3 .top { display: flex; flex-wrap: nowrap; gap: .75rem; z-index: 60; }
html.v3 .top .brand { margin-right: auto; }
.chnav { display: flex; align-items: center; gap: .15rem; }
.chtab { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.5rem; padding: 0 .85rem; border-radius: 999px; color: var(--grey); text-decoration: none; font-size: .8125rem; font-weight: 500; letter-spacing: .01em; transition: color .2s, background-color .2s; }
.chtab:hover { color: var(--strong); }
.chtab[aria-current] { color: var(--strong); background: color-mix(in srgb, var(--chum) 12%, transparent); }
.chtab[aria-current] .chi { color: var(--chum); }
.chi { display: inline-flex; width: 1.15rem; height: 1.15rem; }
.chi svg, .v3btn svg, .v3pill svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html.v3 .v3menu { display: inline-flex !important; flex-direction: column; justify-content: center; align-items: stretch; gap: 4px; width: 2.5rem; height: 2.5rem; padding: 0 .7rem; background: none; border: 1px solid var(--line-strong); color: var(--strong); cursor: pointer; }
.v3menu i { display: block; height: 1.5px; background: currentColor; border-radius: 1px; }
html.v3 .themebtn { border-radius: 0; }

/* ------------------------------------------------------------------ the menu sheet */
.jumpsheet { width: min(26rem, calc(100vw - 2rem)); max-height: min(80dvh, 44rem); margin: auto 1rem calc(1rem + env(safe-area-inset-bottom)) auto; padding: .5rem 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--text); box-shadow: 0 24px 80px rgb(0 0 0 / 30%); overflow: auto; }
.jumpsheet::backdrop { background: rgb(0 0 0 / 28%); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.js-ch { padding: .35rem 0; }
.js-ch + .js-ch { border-top: 1px solid var(--line); }
.js-chn { display: flex; align-items: center; gap: .6rem; padding: .55rem 1.1rem; color: var(--strong); text-decoration: none; font-family: var(--serif); font-size: 1.2rem; }
.js-chn .chi { color: var(--chum); }
.js-subs { display: flex; flex-wrap: wrap; gap: .3rem; padding: 0 1rem .6rem 2.85rem; }
.js-sub { padding: .35rem .7rem; border: 1px solid var(--line); border-radius: 999px; color: var(--text); text-decoration: none; font-size: .8125rem; }
.js-sub:hover { border-color: var(--chum); color: var(--strong); }

/* ------------------------------------------------------------------ floating: the camera toggle, the jump button, the pill */
.v3dock { z-index: 47 !important; position: fixed; right: max(.85rem, env(safe-area-inset-right)); bottom: calc(.85rem + var(--tabbar) + env(safe-area-inset-bottom)); z-index: 45; display: flex; align-items: center; gap: .5rem; }
.v3btn, .v3pill { display: inline-flex; align-items: center; gap: .45rem; height: 2.75rem; padding: 0 1rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bar-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--strong); font: 500 .8125rem/1 var(--sans); cursor: pointer; box-shadow: 0 6px 24px rgb(0 0 0 / 14%); }
.v3btn svg, .v3pill svg { width: 1.15rem; height: 1.15rem; flex: none; }
.v3btn[hidden] { display: none; }
.v3jump { width: 2.75rem; padding: 0; justify-content: center; }
.v3cam[aria-pressed="true"] { border-color: var(--chum); }
.v3pill .pill-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--chum); }

/* the floating camera: bottom right, over the buttons */
html.v3 .view.dock { position: fixed; inset: auto max(.85rem, env(safe-area-inset-right)) calc(4.4rem + var(--tabbar) + env(safe-area-inset-bottom)) auto; width: min(52vw, 22rem); height: auto; aspect-ratio: 16 / 9; z-index: 44; border-radius: 12px; overflow: hidden; box-shadow: 0 16px 50px rgb(0 0 0 / 40%); animation: dockin .35s var(--ease); }
html.v3 .view.dock .undock { display: none !important; }
html.v3 .view.dock video, html.v3 .view.dock img { object-fit: cover; }
@keyframes dockin { from { opacity: 0; transform: translateY(12px) scale(.96); } }

/* "Live": a small red dot, top right of the picture */
html.v3 .view .live { position: absolute; top: .7rem; right: .7rem; left: auto; z-index: 4; width: .7rem; height: .7rem; padding: 0; border: 0; background: none; }
html.v3 .view .live i { display: block; width: .62rem; height: .62rem; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 0 2px rgb(0 0 0 / 25%); animation: livepulse 2.4s ease-in-out infinite; }
html.v3 .view.dock .live { top: .45rem; right: .45rem; }
@keyframes livepulse { 50% { opacity: .55; } }
html.calm .view .live i { animation: none; }
html.v3 .view .cams { top: auto; bottom: .6rem; left: .6rem; right: auto; }

/* the camera block */
html.v3 .tankside { display: block; position: static; width: 100%; margin: 0 auto; padding: 0; background: none; border: 0; }
html.v3 .tankside .viewslot { width: 100% !important; max-width: 60rem; margin: 0 auto; border-radius: var(--r); overflow: hidden; }
html.v3 .tankside .camfs { display: inline-flex; margin: .75rem auto 0; }
html.v3 .tankside { text-align: center; }
html.v3 .tankside > * { text-align: initial; }

/* ------------------------------------------------------------------ the light bar, under the camera */
.lightbar { max-width: 34rem; margin: 1rem auto 0; }
.lb-row { display: flex; align-items: center; gap: .75rem; }
.lb-k { flex: none; color: var(--grey); font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.lb-track { position: relative; flex: 1; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--grey) 22%, transparent); }
.lb-seg { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.lb-dim { background: color-mix(in srgb, var(--chum) 38%, transparent); }
.lb-full { background: var(--chum); }
.lb-show { position: absolute; top: -3px; width: 3px; height: 14px; margin-left: -1.5px; border-radius: 2px; background: var(--strong); opacity: .55; }
.lb-now { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--bg); border: 2px solid var(--strong); box-shadow: 0 1px 4px rgb(0 0 0 / 20%); }
.lb-now-full, .lb-now-dim { border-color: var(--chum); }
.lb-labs { position: relative; height: 1.1rem; margin: .35rem 0 0 calc(3.2rem + .75rem); }
.lb-labs span { position: absolute; transform: translateX(-50%); color: var(--grey); font-size: .6875rem; white-space: nowrap; }
.lb-labs span:nth-child(1) { transform: translateX(-100%); padding-right: .2rem; }
.lb-labs span:nth-child(2) { transform: none; padding-left: .2rem; }

/* ------------------------------------------------------------------ A: chapters as tabs */
html.lay-a .intro { display: none; }
html.lay-a .chapter { display: none; }
html.lay-a .chapter.on { display: block; }
html.lay-a .chapter.fadein { animation: chfade .35s var(--ease); }
@keyframes chfade { from { opacity: 0; transform: translateY(8px); } }
html.lay-a .ch-head { padding: 2rem 0 .5rem; }
html.lay-a .ch-head h2 { font-size: clamp(1.9rem, 6vw, 2.8rem); }
html.lay-a .sub { padding: 2.25rem 0; border-top: 1px solid var(--line); }
html.lay-a .sub:first-of-type, html.lay-a #tankside + .page + .sub { border-top: 0; }
html.lay-a #c-live .ch-head { display: none; }
html.lay-a #c-live .tankside { padding-top: 1.25rem; }
@media (max-width: 47.99rem) {
  html.lay-a { --tabbar: 4rem; }
  html.lay-a .chnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; justify-content: space-around; height: calc(var(--tabbar) + env(safe-area-inset-bottom)); padding: 0 .25rem env(safe-area-inset-bottom); background: var(--bar-bg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--line); }
  html.lay-a .chtab { flex: 1; flex-direction: column; justify-content: center; gap: .2rem; min-height: 100%; padding: 0; border-radius: 0; background: none !important; font-size: .6875rem; }
  html.lay-a .chtab .chi { width: 1.35rem; height: 1.35rem; }
}

/* ------------------------------------------------------------------ B: one story; cards that open */
html.lay-b .chnav { display: none; }
html.lay-b .ch-head { padding-bottom: 1.25rem; }
html.lay-b .card { margin: 0 0 .75rem; border: 1px solid var(--line); border-radius: var(--r); background: color-mix(in srgb, var(--raise) 55%, transparent); transition: border-color .25s, background-color .25s; }
html.lay-b .card.open { background: none; border-color: var(--line-strong); }
html.lay-b .card > .wrap { padding: 0; }
.card-head { display: flex; align-items: center; gap: 1rem; width: 100%; padding: 1.15rem 1.25rem; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--r); }
.card-t { display: grid; gap: .2rem; flex: 1; min-width: 0; }
.card-name { font-family: var(--serif); font-size: 1.35rem; color: var(--strong); line-height: 1.15; }
.card-sum { color: var(--grey); font-size: .8125rem; }
.card-chev { flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid var(--line-strong); position: relative; transition: transform .3s var(--ease), border-color .2s; }
.card-chev::before { content: ""; position: absolute; left: 50%; top: 45%; width: .42rem; height: .42rem; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: translate(-50%, -50%) rotate(45deg); }
.card.open .card-chev { transform: rotate(180deg); border-color: var(--chum); color: var(--chum); }
.card-head:hover .card-chev { border-color: var(--chum); }
.card-body { display: none; padding: 0 1.25rem 1.5rem; }
.card.open .card-body { display: block; animation: cardin .35s var(--ease); }
@keyframes cardin { from { opacity: 0; transform: translateY(-6px); } }
html.lay-b .card .card-body > .head { display: none; }
html.lay-b .card .card-body > .head:has(.tag), html.lay-b .card .card-body > .head:has(p:not(:empty)) { display: flex; }
html.lay-b .card .card-body > .head h2, html.lay-b .card .card-body > .head h3 { display: none; }
html.lay-b #c-live > .ch-head { display: none; }
/* the rail (computer) and the pill (phone) */
.v3rail { position: fixed; left: 1.1rem; top: 50%; z-index: 30; display: grid; gap: .3rem; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity .3s; }
html.intro-done .v3rail, html.intro-static .v3rail, html.calm .v3rail { opacity: 1; pointer-events: auto; }
.rail-a { display: flex; align-items: center; gap: .6rem; padding: .3rem 0; color: var(--grey); text-decoration: none; font-size: .75rem; }
.rail-a i { width: .5rem; height: .5rem; border-radius: 50%; border: 1.5px solid currentColor; transition: background-color .2s, transform .2s; }
.rail-a span { opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.v3rail:hover .rail-a span, .rail-a[aria-current] span { opacity: 1; transform: none; }
.rail-a[aria-current] { color: var(--strong); }
.rail-a[aria-current] i { background: var(--chum); border-color: var(--chum); transform: scale(1.25); }
html.lay-b .v3pill { display: none; }
@media (max-width: 74.99rem) { .v3rail { display: none; } html.lay-b .v3pill { display: inline-flex; } }
@media (min-width: 75rem) { html.lay-b .v3dock { right: 1.25rem; } }

/* ------------------------------------------------------------------ B: the intro */
html.lay-b .intro { position: relative; height: 290vh; height: 290dvh; }
.intro-stage { z-index: 46; pointer-events: none; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; display: grid; place-items: center; }
.intro-words { position: absolute; top: clamp(5.5rem, 16vh, 9rem); left: 0; right: 0; z-index: 3; text-align: center; padding: 0 var(--pad); will-change: opacity, transform; }
.intro-kicker { margin: 0 0 .35rem; color: var(--grey); font-size: .75rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.intro-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 10vw, 5.5rem); line-height: 1; color: var(--strong); letter-spacing: -.02em; }
.intro-sub { margin: .9rem auto 0; max-width: 30rem; color: var(--text); font-size: clamp(.9375rem, 2.6vw, 1.0625rem); line-height: 1.5; }
.intro-cue { position: absolute; bottom: calc(1.5rem + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); margin: 0; color: var(--grey); font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; }
.intro-cue::after { content: ""; display: block; width: 1px; height: 2rem; margin: .6rem auto 0; background: linear-gradient(var(--grey), transparent); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 50% { transform: translateY(6px); opacity: .4; } }
.intro-cam { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--bar) + 1rem) var(--pad) 1rem; opacity: 0; }
.intro-cam .tankside { width: 100%; max-width: 60rem; }
/* the tank, in CSS 3D: a glass box of water on soil, on its stand; 75 x 45 x 45 cm, stand 75 x 45 x 80 */
.tank3d-wrap { position: absolute; inset: 0; display: grid; place-items: center; padding-top: 26vh; perspective: 2400px; perspective-origin: 50% 30%; will-change: opacity; }
.tank3d { --w: min(58vw, 23rem, 34vh); --d: calc(var(--w) * .6); --h: calc(var(--w) * .6); --sh: calc(var(--w) * .78); position: relative; width: var(--w); height: calc(var(--h) + var(--sh)); transform-style: preserve-3d; transform: rotateX(14deg) rotateY(-38deg) scale(.86); will-change: transform; }
.t3-tank, .t3-stand { position: absolute; left: 0; width: var(--w); transform-style: preserve-3d; }
.t3-tank { top: 0; height: var(--h); }
.t3-stand { top: var(--h); height: var(--sh); }
.tank3d i { position: absolute; display: block; backface-visibility: visible; }
/* glass */
.t3f { border: 1.5px solid rgb(150 200 205 / 75%); background: rgb(220 240 245 / 6%); }
.t3-front, .t3-back { left: 0; top: 0; width: var(--w); height: var(--h); }
.t3-front { transform: translateZ(calc(var(--d) / 2)); }
.t3-back { transform: translateZ(calc(var(--d) / -2)); }
.t3-left, .t3-right { top: 0; left: calc(50% - var(--d) / 2); width: var(--d); height: var(--h); }
.t3-left { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.t3-right { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.t3-bottom { left: 0; top: calc(var(--h) - var(--d) / 2); width: var(--w); height: var(--d); transform: rotateX(90deg) translateZ(calc(var(--d) / -2)); }
/* water (to 96 % of the glass) */
.t3w { background: linear-gradient(rgb(120 185 210 / 30%), rgb(60 130 165 / 42%)); }
.t3w-front, .t3w-back { left: 2px; top: calc(var(--h) * .06); width: calc(var(--w) - 4px); height: calc(var(--h) * .94); }
.t3w-front { transform: translateZ(calc(var(--d) / 2 - 2px)); }
.t3w-back { transform: translateZ(calc(var(--d) / -2 + 2px)); }
.t3w-left, .t3w-right { top: calc(var(--h) * .06); left: calc(50% - var(--d) / 2 + 2px); width: calc(var(--d) - 4px); height: calc(var(--h) * .94); }
.t3w-left { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2 - 2px)); }
.t3w-right { transform: rotateY(90deg) translateZ(calc(var(--w) / 2 - 2px)); }
.t3w-top { left: 2px; top: calc(var(--h) * .06 - var(--d) / 2); width: calc(var(--w) - 4px); height: var(--d); transform: rotateX(90deg); background: rgb(160 210 225 / 22%); }
/* Controsoil */
.t3s { background: linear-gradient(#3b2f26, #1d1814); }
.t3s-front, .t3s-back { left: 2px; top: calc(var(--h) * .8); width: calc(var(--w) - 4px); height: calc(var(--h) * .2); }
.t3s-front { transform: translateZ(calc(var(--d) / 2 - 3px)); background: linear-gradient(#5b8a3a 0 10%, #3b2f26 10%, #1d1814); }
.t3s-back { transform: translateZ(calc(var(--d) / -2 + 3px)); }
.t3s-left, .t3s-right { top: calc(var(--h) * .8); left: calc(50% - var(--d) / 2 + 3px); width: calc(var(--d) - 6px); height: calc(var(--h) * .2); }
.t3s-left { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2 - 3px)); background: linear-gradient(#5b8a3a 0 10%, #3b2f26 10%, #1d1814); }
.t3s-right { transform: rotateY(90deg) translateZ(calc(var(--w) / 2 - 3px)); }
.t3s-top { left: 2px; top: calc(var(--h) * .8 - var(--d) / 2); width: calc(var(--w) - 4px); height: calc(var(--d) - 6px); transform: rotateX(90deg); background: #4f7d33; }
/* the stand */
.t3b { background: #1d1f20; }
.t3b-front, .t3b-back { left: 0; top: 0; width: var(--w); height: var(--sh); }
.t3b-front { transform: translateZ(calc(var(--d) / 2)); background: linear-gradient(90deg, #232526 0 49.6%, #3a3d3f 49.6% 50.4%, #232526 50.4%); }
.t3b-back { transform: translateZ(calc(var(--d) / -2)); }
.t3b-left, .t3b-right { top: 0; left: calc(50% - var(--d) / 2); width: var(--d); height: var(--sh); background: #161819; }
.t3b-left { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.t3b-right { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.t3b-top { left: 0; top: calc(var(--d) / -2); width: var(--w); height: var(--d); transform: rotateX(90deg); background: #2b2e30; }
.t3-shadow { left: -10%; width: 120%; height: var(--d); top: calc(var(--h) + var(--sh) - var(--d) / 2); transform: rotateX(90deg) translateZ(calc(var(--sh) * -0)); background: radial-gradient(closest-side, rgb(0 0 0 / 22%), transparent); }
/* reduced motion: no scroll scene; the words, then the camera */
html.intro-static .intro, html.calm.lay-b .intro { height: auto; }
html.intro-static .intro-stage, html.calm .intro-stage { position: static; height: auto; display: block; padding: calc(var(--bar) + 2.5rem) 0 0; }
html.intro-static .intro-words, html.calm .intro-words { position: static; }
html.intro-static .tank3d-wrap, html.intro-static .intro-cue, html.calm .tank3d-wrap, html.calm .intro-cue { display: none; }
html.intro-static .intro-cam, html.calm .intro-cam { position: static; opacity: 1 !important; transform: none !important; padding: 2rem var(--pad) 0; }
html.lay-b .intro-cam .tankside .camfs { margin-top: .6rem; }

/* ------------------------------------------------------------------ the mock tank */
.mk-crop { position: relative; width: 100%; overflow: hidden; }
.mk-crop > .mk-stage { position: absolute; left: 0; width: 100%; }
.mk-fill, .mk-pipes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mk-fill { z-index: 1; }
.mk-pipes { z-index: 3; overflow: visible; }
.mk-light { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.mk-stage > .mk-base { position: relative; z-index: 2; }
.mk-surface { stroke: rgb(255 255 255 / 55%); stroke-width: 1.5; }
.mk-carpet { fill: #5f9a3c; }
.mk-glass-o { fill: none; stroke: rgb(120 160 170 / 55%); stroke-width: 16; stroke-linecap: round; }
.mk-glass-i { fill: none; stroke: rgb(236 248 250 / 72%); stroke-width: 12.5; stroke-linecap: round; }
.mk-skim.mk-glass-o { stroke-width: 11; } .mk-skim.mk-glass-i { stroke-width: 8; }
.mk-inlet { fill: rgb(236 248 250 / 80%); stroke: rgb(120 160 170 / 70%); stroke-width: 1.5; }
.mk-mesh { stroke: rgb(120 160 170 / 55%); stroke-width: 1.2; }
.mk-skimcap { fill: rgb(236 248 250 / 85%); stroke: rgb(120 160 170 / 70%); stroke-width: 1.5; }
.mk-reliever { fill: rgb(236 248 250 / 80%); stroke: rgb(120 160 170 / 70%); stroke-width: 1.5; }
.mk-hose { fill: none; stroke: rgb(60 66 70 / 45%); stroke-width: 21; stroke-linecap: round; stroke-linejoin: round; }
.mk-flow { fill: none; stroke: var(--chum); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 14; animation: mkflow 1.1s linear infinite; }
@keyframes mkflow { to { stroke-dashoffset: -15; } }
html.calm .mk-flow { animation: none; }
/* the hoses and their flow are behind the cabinet doors until a door opens: the doors sit above them */
.mk .mk-door { z-index: 6; }
.mk .mk-p { z-index: 5; }
.mk .mk-p.mk-tank, .mk .mk-p.mk-out { z-index: 5; }
.mk .mk-badge { z-index: 8; }
.mk-k-anubias, .mk-k-drop, .mk-k-atomizer { filter: none; }
.mk-plan { display: none !important; }

/* Controls: the mock-up under the light's glow */
.rig .rig-mk { position: relative; z-index: 1; }
.rig .rig-mk .mk { margin: 0; }
.rig .rig-water { z-index: 2; }
.rig .rig-lamp, .rig .rig-beam { z-index: 3; }
.rig .rig-mist { z-index: 4; opacity: 0 !important; transition: opacity 1.2s ease; background: radial-gradient(closest-side, rgb(255 255 255 / 40%), transparent) !important; filter: blur(6px); animation: none !important; }
.rig.mist .rig-mist { opacity: .35 !important; }
.rig .hot { z-index: 6; }

/* Ecosystem: the glass only; fish in their lanes; the shark */
.swim { margin: 0; border-radius: var(--r); overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.swim .mk-crop { border-radius: var(--r); }
.swim .swim-f { position: absolute; z-index: 5; height: auto; pointer-events: none; transition: opacity .25s; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 18%)); }
.swim .swim-f.gone { opacity: 0 !important; }
.eco-shark { position: absolute; z-index: 7; left: 50%; bottom: 0; width: 46%; transform: translate(-50%, 105%); pointer-events: none; transition: transform .55s cubic-bezier(.2, .9, .3, 1.2); }
.eco-shark.up { transform: translate(-50%, 8%); }
.eco-shark.down { transform: translate(-50%, 110%); transition: transform .8s cubic-bezier(.5, 0, .8, .4); }
.mk-crop.shaking { animation: shake .5s ease-in-out 2; }
@keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* ------------------------------------------------------------------ Controls: looks in groups */
.looks { margin-top: 1.75rem; }
.lookgroup + .lookgroup { margin-top: 1.25rem; }
.lookgroup .label { margin-bottom: .6rem; }
.lookgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .5rem; }
html.v3 .lookgrid .mode { display: flex; align-items: center; gap: .7rem; min-height: 3.25rem; padding: .55rem .8rem; border: 1px solid var(--line); border-radius: 12px; background: none; text-align: left; cursor: pointer; }
html.v3 .lookgrid .mode:hover { border-color: var(--line-strong); }
html.v3 .lookgrid .mode.sel { border-color: var(--chum); }
.lookgrid .sw { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%); }
.mtxt { display: grid; gap: .1rem; flex: 1; min-width: 0; }
.mname { color: var(--strong); font-size: .875rem; font-weight: 500; }
.mword { color: var(--grey); font-size: .75rem; }
.lookgrid .tag { flex: none; }
.sw-the-day-s-light { background: conic-gradient(from 200deg, #2b3a55, #9ec9e8, #fff4e0, #9ec9e8, #2b3a55) !important; }
.sw-storm { background: linear-gradient(135deg, #3c4a6e, #1d2236) !important; }
.sw-rainforest { background: radial-gradient(circle at 35% 35%, #d6ffaa, #3f8a3a) !important; }
.sw-jungle-night { background: radial-gradient(circle at 35% 35%, #2c8a8f, #0d2b33) !important; }
html.v3 .acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .5rem; }
html.v3 .modepick { margin-top: .9rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 12px; }

/* the atomizer: on its printed holder, one line */
.atomhow2 { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1.25rem; align-items: center; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.atomhow2 img { width: 100%; height: auto; display: block; }
.atomhow2 p { margin: 0; }
.atomhow2 .label { margin-bottom: .35rem; }

/* ------------------------------------------------------------------ Water: vials, the four charts, changes */
.vials { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.vialcard { display: flex; align-items: center; gap: .7rem; padding: .75rem .8rem; border: 1px solid var(--line); border-radius: 12px; }
.vial { flex: none; width: 1.15rem; height: 3rem; }
.vial-cap { fill: var(--strong); opacity: .85; }
.vial-glass { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.vial-shine { stroke: rgb(255 255 255 / 55%); stroke-width: 1.5; stroke-linecap: round; }
.vial-t { display: grid; gap: .15rem; min-width: 0; }
.vial-n { color: var(--grey); font-size: .75rem; }
.vial-t b { color: var(--strong); font-size: 1.05rem; font-weight: 600; white-space: nowrap; }
.vial-when { margin: .5rem 0 0; color: var(--grey); }
@media (max-width: 40rem) { .vials { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
html.v3 #testchart { display: grid; gap: .75rem; margin-top: 1.5rem; }
.cyc-mini { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; color: var(--text); font-size: .8125rem; }
.cyc-step { display: inline-flex; align-items: center; gap: .4rem; }
.cyc-dot { width: .6rem; height: .6rem; border-radius: 50%; }
.cyc-arrow { width: 1.4rem; height: 1px; background: var(--grey); position: relative; }
.cyc-arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border: solid var(--grey); border-width: 1px 1px 0 0; transform: rotate(45deg); }
.tc3 { padding: .85rem .9rem .5rem; border: 1px solid var(--line); border-radius: 12px; }
.tc3-h { display: flex; align-items: center; gap: .5rem; }
.tc3-dot { width: .6rem; height: .6rem; border-radius: 50%; }
.tc3-n { color: var(--strong); font-size: .875rem; font-weight: 500; }
.tc3-h b { margin-left: auto; color: var(--strong); font-size: .875rem; }
.tc3-svg { display: block; width: 100%; height: auto; margin-top: .25rem; overflow: visible; }
.tc3-grid { stroke: var(--line); stroke-width: 1; }
.tc3-tx { fill: var(--grey); font: 400 10.5px var(--sans); }
.tc3-mockbg { fill: color-mix(in srgb, var(--grey) 8%, transparent); }
.tc3-mock { fill: none; stroke-width: 2; stroke-dasharray: 5 5; opacity: .75; }
.tc3-real { fill: none; stroke-width: 2.5; }
.tc3-pt { stroke: var(--bg); stroke-width: 2; }
.tc3-div { stroke: var(--grey); stroke-width: 1; stroke-dasharray: 2 3; }
.tc3-mocklab { fill: var(--grey); font: 600 10px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.tc3-note { margin: .2rem 0 .3rem; color: var(--text); }
.ghkh-line { margin: .25rem 0 0; }
.wcstrip { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; padding: .25rem 0 .5rem; }
.wcstrip::-webkit-scrollbar { display: none; }
.wcd { flex: 0 0 2.6rem; display: grid; justify-items: center; gap: .35rem; color: var(--grey); font-size: .6875rem; }
.wcd-dot { width: .7rem; height: .7rem; border-radius: 50%; background: color-mix(in srgb, var(--grey) 25%, transparent); }
.wcd.done .wcd-dot { width: 1rem; height: 1rem; margin: -.15rem 0; background: var(--chum); }
.wcd.plan .wcd-dot { width: 1rem; height: 1rem; margin: -.15rem 0; background: none; border: 2px solid var(--chum); }
.wcd.today { color: var(--strong); font-weight: 600; }
.wcd.today .wcd-n { border-bottom: 2px solid var(--strong); }
.wckey { display: flex; gap: 1.25rem; margin-top: .5rem; color: var(--grey); font-size: .75rem; }
.wck { display: inline-flex; align-items: center; gap: .4rem; }
.wck i { width: .7rem; height: .7rem; border-radius: 50%; }
.wck.done i { background: var(--chum); } .wck.plan i { border: 2px solid var(--chum); }
html.v3 .testphotos { margin-top: .5rem; }

/* ------------------------------------------------------------------ Schedule: the week */
.sc-week { display: grid; gap: .65rem; }
.sc-wrow { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .75rem; align-items: center; }
.sc-wlab { display: grid; gap: .1rem; font-size: .8125rem; }
.sc-wlab b { color: var(--strong); font-weight: 500; }
.sc-tag { color: var(--chum-text); font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.sc-wtracks { position: relative; display: grid; gap: 4px; }
.sc-wtracks .sc-track { position: relative; height: 10px; border-radius: 5px; overflow: hidden; }
.sc-wtracks .sc-co2 { height: 6px; }
.sc-show { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--strong); opacity: .6; }
.sc-key .sc-show { position: static; display: inline-block; width: 3px; height: 10px; margin: 0; }
.sc-nowline { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--strong); border-radius: 1px; }
.sc-axrow { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .75rem; }

/* ------------------------------------------------------------------ Feeding, and Feed the fish */
.feedcard { display: grid; gap: .75rem; justify-items: start; }
.feedlines { display: grid; gap: 0; width: 100%; margin: 0; padding: 0; list-style: none; }
.feedlines li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.feedlines li:first-child { border-top: 0; }
.feedlines b { color: var(--strong); font-weight: 500; }
@media (max-width: 30rem) { .feedlines li { grid-template-columns: 1fr; gap: .15rem; } }
.feeddots { display: flex; gap: .4rem; }
.feeddots i { width: .7rem; height: .7rem; border-radius: 50%; background: color-mix(in srgb, var(--grey) 25%, transparent); }
.feeddots i.on { background: var(--k-feed, #D98A2B); }
.feedme { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem; border: 1px solid var(--chum); border-radius: 999px; color: var(--chum-text); text-decoration: none; font-size: .8125rem; font-weight: 500; }
.feedme:hover { background: color-mix(in srgb, var(--chum) 10%, transparent); }
.feedme[hidden] { display: none; }
.feedme-sm { padding: .3rem .75rem; font-size: .75rem; margin-left: .5rem; }

/* ------------------------------------------------------------------ Photos: a framed day */
html.v3 .dv-big { margin: 0; border-radius: var(--r); overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
html.v3 .dv-big img { width: 100%; height: 100%; object-fit: contain; display: block; }
html.v3 .dv-big figcaption { padding: .6rem .2rem 0; background: var(--bg); color: var(--grey); font-size: .8125rem; }
html.v3 .dayview .dv-big { aspect-ratio: auto; background: none; }
html.v3 .dayview .dv-big img { aspect-ratio: 16 / 9; border-radius: var(--r); background: #000; }
html.v3 .dayview.single .dv-row { display: none; }
html.v3 .daygrid.single .dp-arrow { visibility: hidden; }

/* ------------------------------------------------------------------ Fish and plant cards: one frame, one size */
html.v3 #stock-list img, html.v3 #plants-list img { object-fit: contain; }

/* ------------------------------------------------------------------ the sheet over the bars */
html.v3 dialog.sheet:not(.jumpsheet) { z-index: 60; }

/* the camera block keeps no padding of its own (the old side column's) */
html.v3.pager.fullview.site .tankside { padding: 0 !important; position: static !important; max-height: none !important; border: 0 !important; }
html.lay-a #c-live .tankside { padding-top: 1.25rem !important; }

/* ---- 10/15 fixes after the first look */
/* Controls: the mock-up inside the lit rig */
.rig .rig-mk { position: absolute; inset: 0; z-index: 1; }
.rig .rig-mk .mk, .rig .rig-mk .mk-stage { margin: 0; width: 100%; height: 100%; }
.rig .mk-stage img { height: auto; }
.rig .mk-stage img.mk-light { height: 100%; }
html.v3 #mode-list.modes { display: block; }
html.v3 .acts { display: flex !important; flex-wrap: wrap; gap: .5rem; }
html.v3 .acts .act { flex: 1 1 calc(33% - .5rem); min-width: 6.5rem; }
/* fish and plants: two to a row on a phone, one frame size, the animal filling it alike */
html.v3 #stock-list .entries.allfish, html.v3 #plants-list.entries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
@media (min-width: 48rem) { html.v3 #stock-list .entries.allfish, html.v3 #plants-list.entries { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
html.v3 #stock-list .entry, html.v3 #plants-list .entry { display: flex; flex-direction: column; gap: .6rem; margin: 0; padding: 0; border: 0; }
html.v3 #stock-list .entry.choice { grid-column: 1 / -1; }
html.v3 #stock-list .epic, html.v3 #plants-list .epic { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; margin: 0; padding: 0; border-radius: 12px; background: color-mix(in srgb, var(--line) 40%, transparent); overflow: hidden; }
html.v3 #stock-list .epic img, html.v3 #plants-list .epic img { width: auto !important; height: auto !important; max-width: 84%; max-height: 72%; object-fit: contain; }
html.v3 #stock-list .choice .three .epic { aspect-ratio: 4 / 3; }
html.v3 #stock-list .ebody, html.v3 #plants-list .ebody { padding: 0; }
html.v3 #stock-list .esay, html.v3 #plants-list .esay { font-size: .8125rem; margin: .2rem 0 0; }
html.v3 #stock-list .ename, html.v3 #plants-list .ename { font-size: 1.05rem; }
/* water: the dates of the four, the mock label, the tube photos */
.tc3-mocklab { font-size: 11px; }
html.v3 .testphotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem; }
html.v3 .testphotos .tthumb { width: 100%; aspect-ratio: 1; border-radius: 10px; overflow: hidden; }
html.v3 .testphotos .tthumb img { width: 100%; height: 100%; object-fit: cover; }
.wcd { flex: 1 0 2.2rem; }
/* filter: the four Neo parts, picture over words */
html.v3 .dg-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
@media (min-width: 48rem) { html.v3 .dg-parts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
html.v3 .dg-parts .dg-partcard { display: grid; grid-template-rows: 6.5rem auto; gap: .5rem; margin: 0; padding: .9rem .6rem; text-align: center; border: 1px solid var(--line); border-radius: 12px; min-height: 0; }
html.v3 .dg-parts .dg-partpic { position: relative; height: 6.5rem; display: grid; place-items: center; margin: 0; padding: 0; background: none; }
html.v3 .dg-parts .dg-partpic img { position: static !important; width: auto !important; height: auto !important; max-width: 100%; max-height: 100%; object-fit: contain; opacity: 1 !important; transform: none !important; }
html.v3 .dg-parts figcaption { position: static !important; display: grid; gap: .15rem; font-size: .8125rem; }
html.v3 .dg-parts figcaption span { color: var(--grey); font-size: .75rem; }
/* the aquascaping tools: the picture alone, no frame */
html.v3 .kwidepic { padding: .25rem 0 .5rem; background: none; }
html.v3 .kwidepic img { max-height: 11rem; width: 100%; }
/* photos: a framed day; one photo shows as the first */
html.v3 .dayview .dv-big img { aspect-ratio: auto; width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--line); background: none; }
html.v3 .dayview .dv-row .dv-shot { border-radius: 10px; overflow: hidden; }
html.v3.pager.fullview .tankside > .lightbar { display: block; }
/* A on a phone: the chapter tabs live in their own bar at the bottom (the header's blur would trap a fixed bar) */
.tabbar { display: none; }
@media (max-width: 47.99rem) {
  html.lay-a .top .chnav { display: none; }
  html.lay-a .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; justify-content: space-around; height: calc(var(--tabbar) + env(safe-area-inset-bottom)); padding: 0 .25rem env(safe-area-inset-bottom); background: var(--bar-bg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--line); }
  html.lay-a .tabbar .chtab { flex: 1; flex-direction: column; justify-content: center; gap: .2rem; min-height: 100%; padding: 0; border-radius: 0; background: none !important; font-size: .6875rem; }
  html.lay-a .tabbar .chtab .chi { width: 1.35rem; height: 1.35rem; }
}
.rig .mk-stage img.mk-light { position: absolute; inset: 0; width: 100%; height: 100%; }
.rig .mk-stage img.mk-base { position: relative; width: 100%; height: auto; }
.rig .mk-stage .mk-p img { position: static; width: 100%; height: auto; }
.mk-crop > .mk-stage { max-width: none !important; margin: 0 !important; perspective: none; }
.mk-host .mk-flowfig .mk-stage { max-width: 26rem; }
.swim { max-width: 52rem; margin: 0 auto 1rem; }
html.v3.site .view .live:not([hidden]) { display: block !important; }
html.v3.site .view.dock { inset: auto max(.85rem, env(safe-area-inset-right)) calc(4.4rem + var(--tabbar) + env(safe-area-inset-bottom)) auto !important; width: min(52vw, 22rem) !important; z-index: 44 !important; }
html.v3 .dayview .dv-big { border: 0 !important; background: none !important; padding: 0; text-align: center; aspect-ratio: auto !important; }
html.v3 .dayview .dv-big img { display: inline-block; width: auto !important; max-width: 100%; max-height: min(68vh, 36rem); height: auto; border-radius: var(--r); border: 1px solid var(--line); }
html.v3 .dayview .dv-big figcaption { text-align: center; }