/* story.css (2026-10-15): the story lines, the controls moved to their own page, the camera badge. Loaded last.
   See story.js for what each part does. */

/* ---------------------------------------------------------------- the story lines */
.tale { max-width: 34rem; margin: 0 auto clamp(2rem, 5vw, 3rem); text-align: center; }
.tale p { margin: 0; font-family: var(--display, inherit); font-size: clamp(1.375rem, 3.4vw, 2rem); font-weight: 600; line-height: 1.2; letter-spacing: -.03em; color: var(--strong); text-wrap: balance; }
.tale p + p { margin-top: .6rem; font-size: clamp(1.0625rem, 2.2vw, 1.25rem); font-weight: 500; line-height: 1.4; letter-spacing: -.015em; color: var(--grey); }
.tale.wait p { opacity: 0; transform: translateY(14px); }
.tale.wait.on p { opacity: 1; transform: none; transition: opacity .9s var(--ease, ease), transform .9s var(--ease, ease); }
.tale.wait.on p + p { transition-delay: .25s; }
.sidecam > .tale { margin-top: clamp(1rem, 3vw, 2rem); }

/* "Here's a live view of the tank." over the camera at the end of the intro (fades in with it) */
.intro-cam .tale-live { width: 100%; margin: 0 auto .9rem; }
.intro-cam .tale-live p { font-size: clamp(1.25rem, 2.6vw, 1.625rem); }
html.v4.site .intro-cam .tankside .viewslot, html.v4.cam-portrait.site .intro-cam .tankside .viewslot {
  width: min(100%, 36rem, calc((100vh - var(--barh) - 6.25rem) * var(--car)), calc((100dvh - var(--barh) - 6.25rem) * var(--car))) !important;
}
html.intro-static .intro-cam .tale-live { display: none; }

/* the quiet link to Admin controls, in About */
html .about p.ctl-link, .ctl-link { margin-top: 1.25rem; font-size: .8125rem !important; line-height: 1.4; text-align: inherit; }
.ctl-link a { color: var(--grey); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.ctl-link a:hover { color: var(--chum-text, #248FD3); }

/* ---------------------------------------------------------------- the main page shows no controls */
html:not(.ctlpage) .ctlonly { display: none !important; }

/* ---------------------------------------------------------------- the Admin controls page (controls.html) */
html.ctlpage .chapter:not(#c-live), html.ctlpage #sidecam, html.ctlpage .chnav, html.ctlpage .chstrip, html.ctlpage #menu,
html.ctlpage .v4top, html.ctlpage .v3cam, html.ctlpage .sitefoot { display: none !important; }
html.ctlpage #c-live > .ch-head { display: block !important; text-align: center; padding: clamp(2rem, 6vw, 3.5rem) 0 1.5rem; }
html.ctlpage #c-live > .ch-head h2 { font-size: clamp(2.25rem, 8vw, 4rem); }
html.ctlpage .ctl-back { margin: 1rem 0 0; font-size: .875rem; }
html.ctlpage .ctl-back a { color: var(--chum-text, #248FD3); }
html.ctlpage #c-live > .tankside { width: min(100% - 2 * var(--pad, 16px), 28rem); margin: 0 auto 2rem; }
html.ctlpage #c-live > .ch-head::before { display: none; }

/* ---------------------------------------------------------------- LIVE and the time, on the camera */
html.v3.site .view.has-camtag .live, html.v3.site .view.has-camtag .live:not([hidden]), .view.has-camtag .live { display: none !important; }
.camtag { position: absolute; left: .6rem; bottom: .6rem; z-index: 5; display: inline-flex; align-items: center; gap: .5rem; padding: .22rem .55rem; border-radius: 6px; background: rgb(0 0 0 / 48%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font: 600 .6875rem/1.2 -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif; letter-spacing: .04em; font-variant-numeric: tabular-nums; pointer-events: none; }
.camtag .ct-live { display: inline-flex; align-items: center; gap: .35rem; letter-spacing: .08em; }
.camtag[hidden], .camtag .ct-live[hidden] { display: none; }
.camtag .ct-live i { width: .45rem; height: .45rem; border-radius: 50%; background: #ff3b30; }
.camtag.is-live .ct-time { padding-left: .5rem; border-left: 1px solid rgb(255 255 255 / 30%); }
.view.dock .camtag { left: .4rem; bottom: .4rem; padding: .15rem .4rem; font-size: .625rem; }

/* ================================================================ 10/15 evening: the hero (his words: "the Apple feel,
   especially the landing page screen"). One headline, one line under it, the tank large in the middle, a quiet cue.
   Only the wordmark shows in the bar until the hero is done (v4.js sets .strip-on at its end). */
html.v4 .intro-words { top: calc(var(--barh) + clamp(1.25rem, 6vh, 4.5rem)); }
html.v4 .intro-title { max-width: 14ch; margin: 0 auto; font-size: clamp(2.75rem, 11.5vw, 6.75rem); font-weight: 700; line-height: .98; letter-spacing: -.055em; color: var(--strong); text-wrap: balance; }
html.v4 .intro-title .nb { white-space: nowrap; }
@media (min-width: 48rem) { html.v4 .intro-title { max-width: none; } }
html.v4 .intro-sub { max-width: 24rem; margin: clamp(.9rem, 2.4vh, 1.4rem) auto 0; color: var(--grey); font-size: clamp(1.125rem, 3.2vw, 1.5rem); font-weight: 500; line-height: 1.3; letter-spacing: -.02em; text-wrap: balance; }
@media (min-width: 48rem) { html.v4 .intro-sub { max-width: none; } }
/* a soft blue light behind the tank, like a product shot */
html.v4 .tank3d-wrap::before { content: ""; position: absolute; left: 50%; top: 58%; width: min(120vw, 60rem); aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgb(36 143 211 / 16%), rgb(36 143 211 / 5%) 55%, transparent); pointer-events: none; }
:root[data-theme="light"] html.v4 .tank3d-wrap::before, :root[data-theme="light"] .tank3d-wrap::before { opacity: .6; }
/* the cue: a line of words and a chevron that drifts down */
html.v4 .intro-cue { display: flex; flex-direction: column; align-items: center; gap: .35rem; width: max-content; color: var(--grey); font-size: .8125rem; font-weight: 500; letter-spacing: -.005em; text-transform: none; }
html.v4 .intro-cue::after { display: none; }
html.v4 .intro-cue svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; animation: cuedrop 2.2s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes cuedrop { 0%, 100% { transform: translateY(-2px); opacity: .5; } 50% { transform: translateY(5px); opacity: 1; } }
/* the bar is just the wordmark during the hero */
html.v4 .top :is(.chnav, .themebtn, .menu-btn, .brand-day) { transition: opacity .45s var(--ease, ease); }
html.v4:not(.strip-on):not(.intro-static) .top :is(.chnav, .themebtn, .menu-btn, .brand-day) { opacity: 0; pointer-events: none; }
html.v4:not(.strip-on):not(.intro-static) .top { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.v4:not(.strip-on):not(.intro-static) .chstrip { opacity: 0; pointer-events: none; }
/* the stage starts under the bar, so the cue sits a bar's height up to stay on the first screen */
html.v4 .intro-cue { bottom: calc(var(--barh, 56px) + 1.25rem + env(safe-area-inset-bottom)); }

/* ================================================================ 10/15 night: one story, tighter (his words: "random horizontal
   rules ... the hardscape section is too tall ... the water section data is too large ... cleaner, more Apple / GlassAqua /
   UNS"). Spacing instead of rules; a section is an eyebrow, one big line, one grey line, then the picture; the rest of the
   detail waits behind a "More" toggle (story.js .tuck). */

/* ---- no rules: space does the separating */
html.v4 :is(.chapter > .sub, .band, .band > .wrap, .head, .subh, .rows, #trees, .entry, .filterfacts, .tc3, .fit, .fit-row, .stack, .stack > div,
  .smarttank, .khead, .kgrp, .foot, .sitefoot, #photo-credits, .dg-key li, .dg-tap, #feedplan li, .card-head, .sc-list li, .st-list li, .time li) {
  border-top-width: 0 !important; border-bottom-width: 0 !important; }
html.v4 .chapter > .sub.is-main, html.v4 .chapter > .sub.is-main + .sub.is-main,
html.v4 .chapter > .sub.is-main + .sub.adminonly + .sub.is-main { padding-top: 0 !important; margin-bottom: clamp(5rem, 13vw, 8.5rem) !important; }

/* ---- chapter titles: centred, huge, the number in chum blue */
html.v4 .ch-head { padding: clamp(2rem, 7vh, 4.5rem) 0 clamp(3rem, 8vw, 5rem); text-align: center; }
html.v4 .ch-head::before { color: var(--chum-text, #248FD3); margin-bottom: 1.1rem; }
html.v4 .ch-head h2 { font-size: clamp(3.75rem, 17vw, 9rem); line-height: .9; letter-spacing: -.06em; }

/* ---- a section's opening: eyebrow, the line, the grey line; one width, one place */
html.v4 .lede { max-width: 40rem; margin: 0 auto clamp(2.25rem, 6vw, 3.75rem); text-align: center; }
html.v4 .lede > .head { display: block; margin: 0 0 1rem; padding: 0; text-align: center; }
html.v4 .lede > .head.vh { display: none; }
html.v4 .lede > .head h2 { display: inline; margin: 0; font-family: inherit; font-size: .8125rem !important; font-weight: 600 !important; letter-spacing: .14em !important; line-height: 1.2; text-transform: uppercase; color: var(--chum-text, #248FD3) !important; }
html.v4 .lede > .head .tag { margin-left: .5rem; vertical-align: 1px; font-size: .6875rem; }
html.v4 .lede > .head > p { margin: .55rem auto 0; max-width: 32rem; color: var(--grey); font-size: .875rem; line-height: 1.45; }
html.v4 .lede > .head > p:empty { display: none; }
html.v4 .lede .tale { max-width: none; margin: 0; }
html.v4 .tale p { font-size: clamp(1.875rem, 6.6vw, 3.25rem); font-weight: 600; line-height: 1.06; letter-spacing: -.045em; }
html.v4 .tale p + p { margin-top: clamp(.75rem, 2vw, 1.1rem); font-size: clamp(1.0625rem, 2.6vw, 1.375rem); font-weight: 500; line-height: 1.4; letter-spacing: -.018em; }
html.v4 .intro-cam .tale-live p { font-size: clamp(1.25rem, 2.6vw, 1.625rem); }
html.v4 .sidecam > .tale p { font-size: clamp(1.5rem, 4.6vw, 2.25rem); }
/* headings inside a section (Today, Hardscape, Weeks 1 to 6...): quiet eyebrows too */
html.v4 :is(#trees > .subhead, .dgsec > .head h3, #sched .head.subh h2, #sched .head.subh h3) { font-family: inherit; font-size: .75rem !important; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--grey) !important; }

/* ---- the drawing beside the story on a wide screen; the words stay put while it scrolls by */
@media (min-width: 64rem) {
  html.v4 .duo-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  html.v4 .duo-row > .lede { grid-column: 1; grid-row: 1; position: sticky; top: calc(var(--barh, 56px) + 22vh); margin: 0; text-align: left; }
  html.v4 .duo-row > .lede > .head { text-align: left; }
  html.v4 .duo-row > .lede > .head > p { margin-left: 0; }
  html.v4 .duo-row > .duo-art { grid-column: 2; grid-row: 1; margin-top: 0 !important; }
  html.v4 .duo.flip .duo-row > .lede { grid-column: 2; }
  html.v4 .duo.flip .duo-row > .duo-art { grid-column: 1; }
  html.v4 .duo-row .lede .tale p { font-size: clamp(2rem, 3.4vw, 3rem); }
  html.v4 .duo-row .lede .tale p + p { font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); }
  html.v4 .duo-row + * { margin-top: clamp(2rem, 4vw, 3rem); }
}

/* ---- More / Less: the detail behind one quiet button */
.tk-row { display: flex; justify-content: center; margin: clamp(1.5rem, 4vw, 2.25rem) 0 0; }
.tk-btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 1.15rem; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--grey) 14%, transparent); color: var(--strong); font: inherit; font-size: .9375rem; font-weight: 500; letter-spacing: -.01em; cursor: pointer; transition: background-color .2s; }
.tk-btn:hover { background: color-mix(in srgb, var(--grey) 22%, transparent); }
.tk-btn:focus-visible { outline: 2px solid var(--chum, #248FD3); outline-offset: 3px; }
.tk-btn i { position: relative; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #248FD3; flex: none; }
.tk-btn i::before, .tk-btn i::after { content: ""; position: absolute; left: 50%; top: 50%; width: .55rem; height: 1.6px; margin: -.8px 0 0 -.275rem; background: #fff; border-radius: 1px; transition: transform .3s var(--ease, ease); }
.tk-btn i::after { transform: rotate(90deg); }
.tuck-open .tk-btn i::after { transform: rotate(0deg); }
.tk-in { animation: tkin .45s var(--ease, ease) both; }
@keyframes tkin { from { opacity: 0; transform: translateY(10px); } }

/* ---- extra photos, gone (his ask): the photo strip, the test-tube photos, the product photos under the filter */
#days, #photos, #testphotos, #in-tank .dg-parts { display: none !important; }

/* ---- Hardscape: three small tiles in a row */
html.v4 #trees .entries { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(.6rem, 2vw, 1.25rem); max-width: 44rem; margin: 0 auto; }
html.v4 #trees .entry { display: flex !important; flex-direction: column; align-items: center; gap: .55rem; padding: 0 !important; min-height: 0 !important; text-align: center; background: none; }
html.v4 #trees .epic { width: 100% !important; height: auto !important; max-width: none !important; aspect-ratio: 1; margin: 0 !important; border-radius: 18px; overflow: hidden; background: color-mix(in srgb, var(--grey) 9%, transparent); }
html.v4 #trees .epic img { width: 100% !important; height: 100% !important; object-fit: contain; padding: 10%; }
html.v4 #trees .ebody { padding: 0 !important; }
html.v4 #trees .ename { margin: 0; font-size: clamp(.875rem, 2.4vw, 1.0625rem); font-weight: 600; letter-spacing: -.02em; }
html.v4 #trees .ego { display: none !important; }
html.v4 #trees .esay { display: none; }
@media (min-width: 48rem) { html.v4 #trees .esay { display: block; margin: .3rem 0 0; color: var(--grey); font-size: .8125rem; line-height: 1.4; } }
html.v4 #trees > .subhead { display: block; margin: clamp(2rem, 5vw, 3rem) 0 1rem; text-align: center; }

/* ---- Water: the numbers big, the rest behind More */
html.v4 .filterfacts { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; max-width: 40rem; margin: clamp(1.5rem, 4vw, 2.5rem) auto 0; padding: 0 !important; text-align: center; }
html.v4 .filterfacts .cell { padding: 0 !important; border: 0 !important; }
html.v4 .filterfacts .v { font-family: var(--display, inherit); font-size: clamp(1.375rem, 5.2vw, 2.5rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; color: var(--strong); }
html.v4 .filterfacts .k { order: 2; margin-top: .35rem; color: var(--grey); font-size: .75rem; letter-spacing: .02em; }
html.v4 .filterfacts .cell { display: flex; flex-direction: column-reverse; }
html.v4 #vials .vial-t b { font-size: clamp(1.25rem, 4.2vw, 1.75rem); font-weight: 600; letter-spacing: -.03em; }

/* ---- between chapters: the hand-off, with a few fish drifting through */
.ch-gap { position: relative; display: grid; place-items: center; min-height: clamp(15rem, 40vh, 24rem); margin: 0 calc(-1 * var(--pad, 16px)) clamp(1rem, 4vw, 3rem); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
html.ctlpage .ch-gap { display: none; }
.ch-next { position: relative; z-index: 1; display: inline-flex; flex-direction: column; align-items: center; gap: .35rem; padding: .5rem 1rem; color: var(--strong); text-decoration: none; font-family: var(--display, inherit); font-size: clamp(1.5rem, 4.4vw, 2.25rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.1; }
.ch-next span { font-family: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--chum-text, #248FD3); }
.ch-next svg { width: 1.5rem; height: 1.5rem; margin-top: .25rem; fill: none; stroke: var(--grey); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; animation: cuedrop 2.2s cubic-bezier(.45, 0, .55, 1) infinite; }
.ch-next:hover svg { stroke: var(--chum-text, #248FD3); }
.fishflow { position: absolute; inset: 0; pointer-events: none; container-type: inline-size; }
.ff { position: absolute; left: 0; top: var(--y); width: var(--w); opacity: var(--o, .3); will-change: transform; animation: ffswim var(--d) linear infinite; animation-delay: var(--dl); }
.ff.back { animation-direction: reverse; }
.ff.back img { transform: scaleX(-1); }
.ff img { display: block; width: 100%; height: auto; animation: ffbob var(--b, 3.4s) ease-in-out infinite alternate; }
.ff.back img { animation-name: ffbobr; }
@keyframes ffswim { from { transform: translateX(-5rem); } to { transform: translateX(calc(100cqw + 5rem)); } }
@keyframes ffbob { from { transform: translateY(-3px) rotate(6deg); } to { transform: translateY(3px) rotate(10deg); } }
@keyframes ffbobr { from { transform: scaleX(-1) translateY(-3px) rotate(6deg); } to { transform: scaleX(-1) translateY(3px) rotate(10deg); } }
.ch-gap:not(.inview) .ff, .ch-gap:not(.inview) .ff img { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ff { display: none; } .ch-next svg { animation: none; } }

/* ---- drawings come alive when their section arrives, and rest when it leaves (smooth on a phone) */
html.v4.anim .band:not(.flowing) :is(.mk-gasflow, .mk-bub, .mk-bcb, .mk-flow, .dg-flow, .dg-jet, .dg-loop, .dg-speck, .dg-pearl, .dg-cbub, .dg-gas, .dg-mist, .dg-co2) { opacity: 0 !important; }
html.v4.anim .band :is(.mk-flow, .dg-flow, .dg-jet, .dg-loop, .mk-gasflow) { transition: opacity .9s var(--ease, ease); }
html.v4 .band:not(.inview) :is(svg *, .mk-stage *) { animation-play-state: paused !important; }
html.v4.anim .mk-gasline[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(.65, 0, .35, 1); }
html.v4.anim .band.seen .mk-gasline[pathLength] { stroke-dashoffset: 0; }

/* ---- scroll-linked: chapter titles rise in, story lines fade in and drift a little, drawings settle into place */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.v4.sl .chapter > .ch-head.rv, html.v4.sl .chapter > .sub.rv { opacity: 1 !important; transform: none !important; transition: none !important; }
    html.v4.sl .ch-head h2 { animation: sl-ch linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
    html.v4.sl .ch-head::before { animation: sl-fade linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    html.v4.sl .tale:not(.tale-live) p { animation: sl-fade linear both, sl-drift linear both; animation-timeline: view(), view(); animation-range: entry 0% cover 28%, cover 0% cover 100%; }
    html.v4.sl .tale:not(.tale-live) p + p { animation-range: entry 8% cover 34%, cover 0% cover 100%; }
    html.v4.sl .lede > .head { animation: sl-fade linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
    html.v4.sl :is(.duo-art, #eco-drawn, #sched > .sc-week, #vials, .filterfacts, #trees .entries, #plants-list, .dd, .showtime, #stock-list, .plangrid) { animation: sl-art linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    html.v4.sl .ch-next { animation: sl-next linear both; animation-timeline: view(); animation-range: entry 10% cover 50%; }
  }
}
@keyframes sl-ch { from { opacity: 0; transform: translateY(14vh) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes sl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sl-drift { from { transform: translateY(28px); } to { transform: translateY(-28px); } }
@keyframes sl-art { from { opacity: 0; transform: translateY(56px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes sl-next { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; transform: none; } }
/* the fallback (no scroll timelines): pictures fade up once, with an IntersectionObserver */
html.v4 .art-wait { opacity: 0; transform: translateY(40px) scale(.97); }
html.v4 .art-wait.on { opacity: 1; transform: none; transition: opacity 1s var(--ease, ease), transform 1s var(--ease, ease); }

/* ---- Smart tank */
html.v4 #smart { margin: 0 auto; max-width: 44rem; padding: 0; border: 0; background: none; }
html.v4 #smart .st-cols { display: block; }
html.v4 #smart .st-col:first-child > .label { display: none; }
html.v4 #smart .st-col:first-child .st-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 1.75rem) clamp(1rem, 4vw, 2.5rem); margin: 0; padding: 0; list-style: none; }
html.v4 #smart .st-col:first-child .st-list li { padding: 0; color: var(--grey); font-size: .875rem; line-height: 1.4; }
html.v4 #smart .st-col:first-child .st-list li b { display: block; margin-bottom: .2rem; color: var(--strong); font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; }
html.v4 #smart .st-col:first-child .st-list li:last-child:nth-child(odd) { grid-column: 1 / -1; text-align: center; }
html.v4 #smart .st-col + .st-col { margin-top: clamp(2rem, 5vw, 3rem); }

/* ---- the dial, as a demo (story.js; nothing is sent anywhere) */
.dd { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: center; max-width: 60rem; margin: 0 auto; }
@media (min-width: 48rem) { .dd { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.dd-tank { position: relative; margin: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 1200 / 630; background: #000; isolation: isolate; }
.dd-tank img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(var(--lv, 1)) saturate(var(--sat, 1)); transition: filter .9s var(--ease, ease); }
.dd-tint, .dd-glow, .dd-flash, .dd-mist, .dd-shim { position: absolute; inset: 0; pointer-events: none; }
.dd-tint { background: var(--tint, #fff); mix-blend-mode: multiply; opacity: var(--ta, 0); transition: background-color .9s var(--ease, ease), opacity .9s var(--ease, ease); }
.dd-glow { background: radial-gradient(120% 70% at 50% -10%, var(--tint, #fff), transparent 70%); mix-blend-mode: screen; opacity: var(--ga, 0); transition: opacity .9s var(--ease, ease); }
.dd-flash { background: radial-gradient(90% 80% at 50% 0%, #fff, rgb(200 220 255 / 60%) 60%, transparent); opacity: 0; mix-blend-mode: screen; }
.dd-flash.go { animation: ddflash .55s ease-out; }
.dd-flash.far { animation: ddfar 1.4s ease-out; }
@keyframes ddflash { 0% { opacity: 0; } 8% { opacity: .95; } 18% { opacity: .25; } 28% { opacity: .8; } 100% { opacity: 0; } }
@keyframes ddfar { 0% { opacity: 0; } 20% { opacity: .22; } 100% { opacity: 0; } }
.dd-mist { background: radial-gradient(60% 35% at 45% 18%, rgb(255 255 255 / 55%), transparent 70%), radial-gradient(50% 30% at 62% 26%, rgb(255 255 255 / 40%), transparent 70%); opacity: 0; transition: opacity 1.2s var(--ease, ease); }
.dd.mist .dd-mist { opacity: .85; animation: ddmist 6s ease-in-out infinite alternate; }
@keyframes ddmist { from { transform: translate(-4%, 2%) scale(1); } to { transform: translate(5%, -3%) scale(1.12); } }
.dd-shim { background: linear-gradient(115deg, transparent 30%, rgb(140 255 220 / 16%) 45%, transparent 60%); background-size: 250% 100%; opacity: 0; mix-blend-mode: screen; transition: opacity 1s; }
.dd.shim .dd-shim { opacity: 1; animation: ddshim 5s linear infinite; }
@keyframes ddshim { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.dd-tag { position: absolute; left: .7rem; top: .7rem; z-index: 2; padding: .22rem .55rem; border-radius: 6px; background: rgb(0 0 0 / 50%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.dd-say { min-height: 2.9em; margin: .9rem 0 0; text-align: center; color: var(--grey); font-size: .9375rem; line-height: 1.45; }
.dd-say b { display: block; color: var(--strong); font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; }
.dd-side { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.dd-dial { position: relative; width: min(13.5rem, 60vw); aspect-ratio: 1; border-radius: 50%; user-select: none; -webkit-user-select: none; touch-action: none; filter: drop-shadow(0 14px 22px rgb(0 0 0 / 50%)); }
.dd-dial img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dd-ring { transition: transform .25s var(--ease, ease), filter .2s; }
.dd-dial.turning .dd-ring { transition: none; filter: brightness(1.35) drop-shadow(0 0 10px rgb(255 255 255 / 45%)); }
.dd-grab { position: absolute; inset: 0; border-radius: 50%; cursor: grab; }
.dd-grab:focus-visible { outline: 2px solid #248FD3; outline-offset: 4px; }
.dd-k { position: absolute; width: 41%; height: 41%; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .05s, box-shadow .05s; }
.dd-k1 { left: 9%; top: 9%; border-radius: 100% 0 0 0; } .dd-k2 { right: 9%; top: 9%; border-radius: 0 100% 0 0; }
.dd-k3 { left: 9%; bottom: 9%; border-radius: 0 0 0 100%; } .dd-k4 { right: 9%; bottom: 9%; border-radius: 0 0 100% 0; }
.dd-k:hover { background: rgb(255 255 255 / 6%); }
.dd-k.pressed { background: rgb(255 255 255 / 80%); box-shadow: 0 0 14px rgb(255 255 255 / 55%); }
.dd-k:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.dd-lvl { display: flex; align-items: center; gap: .75rem; color: var(--grey); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.dd-lvl button { width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--grey) 14%, transparent); color: var(--strong); font: inherit; font-size: 1.1rem; cursor: pointer; }
.dd-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; max-width: 22rem; }
.dd-chip { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.25rem; padding: 0 .85rem; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--grey) 13%, transparent); color: var(--strong); font: inherit; font-size: .8125rem; font-weight: 500; cursor: pointer; transition: background-color .2s; }
.dd-chip i { display: inline-flex; gap: 2px; }
.dd-chip i b { width: 4px; height: 4px; border-radius: 50%; background: var(--grey); }
.dd-chip.on { background: #248FD3; color: #fff; }
.dd-chip.on i b { background: #fff; }
.showtime { margin: clamp(3.5rem, 9vw, 6rem) auto 0; max-width: 40rem; text-align: center; }
.show-big { margin: 0; font-family: var(--display, inherit); font-size: clamp(1.875rem, 6.4vw, 3.25rem); font-weight: 600; line-height: 1.06; letter-spacing: -.045em; color: var(--strong); text-wrap: balance; }
.show-big em { font-style: normal; color: #248FD3; }
.show-sub { margin: .9rem 0 0; color: var(--grey); font-size: clamp(1rem, 2.4vw, 1.25rem); }

/* ---- 10/15 night, second batch */
/* the light: the week's two bars are enough (his words: "too much, probably not needed") */
html.v4 #sched > .head.subh, html.v4 #sched > .sc-list { display: none !important; }
/* the second beat inside one section (the filter after the pipes) */
html.v4 .lede-2 { margin-top: clamp(4rem, 11vw, 7rem); }
/* the water's status, right under the chapter title */
.ch-status { max-width: 30rem; margin: calc(-1 * clamp(1.5rem, 4vw, 3rem)) auto clamp(3rem, 8vw, 5rem); text-align: center; color: var(--grey); font-size: clamp(1rem, 2.4vw, 1.1875rem); line-height: 1.45; text-wrap: balance; }
.ch-status:empty { display: none; }
/* where are the fish? */
.wherefish { max-width: 34rem; margin: clamp(2rem, 6vw, 3.5rem) auto; text-align: center; color: var(--grey); font-size: clamp(1rem, 2.4vw, 1.1875rem); line-height: 1.45; text-wrap: balance; }
.wherefish b { display: block; margin-bottom: .3rem; color: var(--strong); font-family: var(--display, inherit); font-size: clamp(1.375rem, 4vw, 1.875rem); font-weight: 600; letter-spacing: -.035em; }
.wherefish[hidden] { display: none; }
/* the pipes up close */
html.v4 #flow-zoom .mk-zoom { max-width: 30rem; margin: 0 auto; }
html.v4 #flow-zoom .mk-badge, html.v4 #flow-zoom .mk-hot { display: none !important; }
html.v4 #filter-art { max-width: 34rem; margin: 0 auto; }
/* plants: two tiles, like the hardscape */
html.v4 #plants-list.entries { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: clamp(.75rem, 2.4vw, 1.5rem); max-width: 30rem; margin: 0 auto; }
html.v4 #plants-list .entry { display: flex !important; flex-direction: column; align-items: center; gap: .55rem; padding: 0 !important; text-align: center; background: none; }
html.v4 #plants-list .epic { width: 100% !important; height: auto !important; max-width: none !important; aspect-ratio: 1; margin: 0 !important; border-radius: 18px; overflow: hidden; background: color-mix(in srgb, var(--grey) 9%, transparent); }
html.v4 #plants-list .epic img { width: 100% !important; height: 100% !important; object-fit: contain; padding: 8%; }
html.v4 #plants-list .ebody { padding: 0 !important; }
html.v4 #plants-list .ename { margin: 0; font-size: clamp(.9375rem, 2.6vw, 1.125rem); font-weight: 600; letter-spacing: -.02em; }
html.v4 #plants-list .esay { margin: .25rem 0 0; color: var(--grey); font-size: .8125rem; line-height: 1.4; }
html.v4 #plants-list .ego, html.v4 #plants-list .erole { display: none !important; }
/* cycle weeks: where we are */
html.v4 .wk6 .wk { position: relative; }
html.v4 .wk6 .wk.fut { opacity: .45; }
html.v4 .wk6 .wk.on { opacity: 1; box-shadow: 0 0 0 2px #248FD3; }
html.v4 .wk6 .wk.on::before { content: "We are here"; position: absolute; left: 50%; top: -.7rem; transform: translate(-50%, -100%); padding: .2rem .5rem; border-radius: 6px; background: #248FD3; color: #fff; font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
html.v4 .wk6 .wk.on::after { content: ""; position: absolute; left: 50%; top: -.72rem; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #248FD3; }
html.v4 .wk6 { padding-top: 1.6rem; }
/* temperature, simplified */
.tq-top { max-width: 34rem; margin: 0 auto; text-align: center; }
.tq-big { margin: 0; font-family: var(--display, inherit); color: var(--strong); line-height: 1; }
.tq-n { font-size: clamp(4rem, 17vw, 6.5rem); font-weight: 600; letter-spacing: -.05em; }
.tq-u { margin-left: .15em; font-size: clamp(1.5rem, 5vw, 2.25rem); font-weight: 500; color: var(--grey); vertical-align: .9em; }
.tq-live { display: inline-flex; align-items: center; gap: .4rem; margin: .7rem 0 0; color: var(--grey); font-size: .875rem; }
.tq-live .ldot { width: .5rem; height: .5rem; border-radius: 50%; background: #34c759; }
.tq-live.old .ldot { background: var(--grey); }
.tq-bar { margin: clamp(1.75rem, 5vw, 2.5rem) 0 0; }
.tq-track { position: relative; height: .75rem; border-radius: 999px; background: color-mix(in srgb, var(--grey) 18%, transparent); }
.tq-band { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: #248FD3; }
.tq-now { position: absolute; top: 50%; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--strong); box-shadow: 0 0 0 3px var(--bg, #000); transform: translate(-50%, -50%); }
.tq-now b { position: absolute; left: 50%; bottom: calc(100% + .45rem); transform: translateX(-50%); color: var(--strong); font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.tq-ends { display: flex; justify-content: space-between; align-items: baseline; margin-top: .6rem; color: var(--grey); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.tq-tlab { color: #248FD3; font-weight: 600; }
.tq-say { margin: clamp(1.25rem, 4vw, 1.75rem) auto 0; max-width: 28rem; color: var(--grey); font-size: clamp(1rem, 2.4vw, 1.125rem); line-height: 1.45; text-wrap: balance; }
.tq-h { margin: 0 0 1rem; text-align: center; color: var(--grey); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.tq-fish, .tq-chart { max-width: 40rem; margin: clamp(2.5rem, 7vw, 4rem) auto 0; }
.tq-rows { position: relative; display: grid; gap: .8rem; padding-top: 1.6rem; }
.tq-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 3.5rem; align-items: center; gap: .75rem; }
.tq-name { color: var(--strong); font-size: .9375rem; font-weight: 500; }
.tq-rng { color: var(--grey); font-size: .8125rem; text-align: right; font-variant-numeric: tabular-nums; }
.tq-rtrack { position: relative; height: .6rem; border-radius: 999px; background: color-mix(in srgb, var(--grey) 14%, transparent); }
.tq-rtrack i { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: color-mix(in srgb, #248FD3 70%, transparent); }
.tq-row.out .tq-rtrack i { background: color-mix(in srgb, var(--grey) 45%, transparent); }
/* the Now line runs over the bars' column only: name 7.5rem + gap, and the range 3.5rem + gap */
.tq-line { position: absolute; top: 0; bottom: -.3rem; width: 0; border-left: 2px solid var(--strong); pointer-events: none; }
.tq-line { left: calc(8.25rem + (100% - 12.5rem) * var(--xf, 0)); }
.tq-line b { position: absolute; top: 0; left: 0; transform: translateX(-50%); padding: .1rem .4rem; border-radius: 5px; background: var(--strong); color: var(--bg, #000); font-size: .6875rem; font-weight: 700; white-space: nowrap; }
.tq-scale { display: flex; justify-content: space-between; margin: .5rem 4.25rem 0 8.25rem; color: var(--grey); font-size: .75rem; }
@media (max-width: 30rem) {
  .tq-row { grid-template-columns: 5.5rem minmax(0, 1fr) 3rem; gap: .5rem; }
  .tq-line { left: calc(6rem + (100% - 9.5rem) * var(--xf, 0)); }
  .tq-scale { margin: .5rem 3.5rem 0 6rem; }
  .tq-name { font-size: .8125rem; }
}
.tq-chart .tl-wrap { margin: 0; }
/* Care: a plain two-column list, no rules */
.care { display: grid; gap: clamp(1.1rem, 3vw, 1.6rem); max-width: 44rem; margin: 0 auto; }
.care > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; align-items: baseline; }
.care dt { margin: 0; color: var(--strong); font-family: var(--display, inherit); font-size: clamp(1.0625rem, 2.6vw, 1.25rem); font-weight: 600; letter-spacing: -.02em; }
.care dd { margin: 0; color: var(--grey); font-size: clamp(.9375rem, 2.2vw, 1.0625rem); line-height: 1.5; }
@media (max-width: 30rem) { .care > div { grid-template-columns: minmax(0, 1fr); gap: .2rem; } }
/* the appendix: one quiet section */
html.v4 #appendix .apx-body > #photo-credits { margin-top: clamp(2rem, 6vw, 3rem); }
html.v4 #c-appendix .ch-head h2 { font-size: clamp(2.75rem, 11vw, 5.5rem); }
/* the phone's chapter strip has room for seven; the appendix is in the menu and at the end of About */
.chstrip [href="#c-appendix"] { display: none !important; }

/* ================================================================ 10/15 late: cleaner rhythm (his words: "it's faint, on every one",
   "no breaks between sections", "spacing is hella awkward"). The faint line was app.css's .band .wrap::before hairline.
   One spacing scale: chapter = a near-full-screen title moment; section to section 160 px (96 on a phone);
   words to picture 48 (32); small steps 24. */
html.v4 .band .wrap::before, html.v4 .band > .wrap::before { display: none !important; content: none !important; }
html.v4 .card, html.v4.lay-b .card, html.v4.lay-b .card:last-of-type { border-top: 0 !important; border-bottom: 0 !important; }
html.v4 .foot, html.v4 .sitefoot { border-top: 0 !important; }
html.v4 .page .head, html.v4 .page + .page > .wrap { border-bottom: 0 !important; border-top: 0 !important; }
:root { --s-sec: clamp(6rem, 11vw, 10rem); --s-pic: clamp(2rem, 4vw, 3rem); --s-step: 1.5rem; }
/* the chapter's title moment */
html.v4 .ch-head { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: min(78vh, 46rem); min-height: min(78svh, 46rem); padding: 0 0 var(--s-step); margin: 0; }
html.v4 .ch-sub { margin: clamp(1rem, 2.5vw, 1.5rem) 0 0; max-width: 22ch; color: var(--grey); font-family: var(--display, inherit); font-size: clamp(1.375rem, 4.2vw, 2.25rem); font-weight: 600; line-height: 1.15; letter-spacing: -.035em; text-wrap: balance; }
html.v4 #c-live > .ch-head { display: none; }
html.ctlpage .ch-sub { display: none; }
/* sections: one gap, no rules */
html.v4 .chapter > .sub.is-main, html.v4 .chapter > .sub.is-main + .sub.is-main,
html.v4 .chapter > .sub.is-main + .sub.adminonly + .sub.is-main { padding-top: 0 !important; margin-bottom: var(--s-sec) !important; }
html.v4 .lede { margin-bottom: var(--s-pic); }
html.v4 .lede-2 { margin-top: var(--s-sec); }
html.v4 .tk-row { margin-top: var(--s-pic); }
html.v4 .ch-gap { min-height: clamp(12rem, 32vh, 18rem); margin-bottom: 0; }
html.v4 .sidecam { padding-top: var(--s-sec); }
/* two columns on a wide screen: label, line and body all on the left of the text column */
@media (min-width: 64rem) {
  html.v4 .duo-row > .lede, html.v4 .duo-row > .lede .tale, html.v4 .duo-row > .lede .tale p { text-align: left; }
  html.v4 .duo-row > .lede { top: calc(var(--barh, 56px) + 26vh); padding-top: clamp(1rem, 6vh, 4rem); }
  html.v4 .duo-row > .duo-art { align-self: start; }
}
/* the drawn heater beside the number */
.tq-row1 { display: flex; justify-content: center; align-items: center; gap: clamp(1.25rem, 5vw, 2.5rem); }
.tq-col { text-align: left; }
.tq-hfig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .4rem; color: var(--grey); font-size: .75rem; }
.tq-heater { width: clamp(2.25rem, 7vw, 2.75rem); height: auto; }
.tqh-cap { fill: color-mix(in srgb, var(--grey) 55%, transparent); }
.tqh-glass { fill: color-mix(in srgb, var(--grey) 10%, transparent); stroke: color-mix(in srgb, var(--grey) 55%, transparent); stroke-width: 1.5; }
.tqh-fill { fill: #ff8a3d; opacity: .85; }
.tqh-coil { fill: none; stroke: color-mix(in srgb, #ffd2a6 80%, transparent); stroke-width: 1.4; stroke-linejoin: round; }
.tq-top .tq-live { margin-top: .5rem; }
/* the words on the flow drawing, on the closed right door */
.fz-say { position: absolute; left: 54%; top: 66%; width: 38%; margin: 0; color: rgb(255 255 255 / 80%); font-size: clamp(.6875rem, 2.4vw, .9375rem); line-height: 1.3; text-wrap: balance; pointer-events: none; z-index: 6; }
.fz-say b { display: block; margin-bottom: .2rem; color: #fff; font-size: 1.15em; font-weight: 600; letter-spacing: -.01em; }
.fz-say::before { content: ""; position: absolute; right: calc(100% + .5rem); top: .65em; width: clamp(1rem, 6vw, 2.5rem); border-top: 1.5px dashed rgb(36 143 211 / 85%); }
/* plants: one row of three (the carpet, the moss, the soil) */
html.v4 .plantrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 2.4vw, 1.5rem); max-width: 44rem; margin: 0 auto; }
html.v4 .plantrow > #plants-list, html.v4 .plantrow > #trees, html.v4 .plantrow #trees > .entries { display: contents !important; }
html.v4 .plantrow #trees > .subhead, html.v4 .plantrow #trees > details { display: none !important; }
html.v4 .plantrow .entry[hidden] { display: none !important; }
html.v4 .plantrow #trees .esay { display: block; margin: .25rem 0 0; color: var(--grey); font-size: .8125rem; line-height: 1.4; }
html.v4 .plantrow .ename { font-size: clamp(.875rem, 2.4vw, 1.0625rem) !important; }
/* feeding: the week as dots */
.feedstrip .wcd { flex: 1 0 2.6rem; }
.feedstrip .wcd.rest .wcd-dot { width: 1rem; height: 1rem; margin: -.15rem 0; background: none; border: 2px dashed color-mix(in srgb, var(--grey) 60%, transparent); }
.feedstrip { justify-content: center; max-width: 28rem; margin: 0 auto; }
.feedsay { max-width: 30rem; margin: 1rem auto 0; text-align: center; color: var(--grey); font-size: 1rem; line-height: 1.45; }
html.v4 #trees .entry[hidden], html.v4 #plants-list .entry[hidden] { display: none !important; }
/* where are the fish: a quiet aside at the start of Life */
.wherefish.aside { max-width: 30rem; margin: 0 auto var(--s-pic); padding: 0; font-size: .9375rem; }
.wherefish.aside b { display: inline; margin: 0 .3rem 0 0; font-family: inherit; font-size: inherit; font-weight: 600; letter-spacing: 0; color: var(--strong); }
html.v4 #fish #stock-say { display: none; }
/* About: centred like the rest */
html.v4 #about > .wrap > .head { display: block; margin: 0 0 1rem; text-align: center; }
html.v4 #about > .wrap > .head h2 { font-family: inherit; font-size: .8125rem !important; font-weight: 600 !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--chum-text, #248FD3) !important; }
html.v4 #about .about { max-width: 38rem; margin: 0 auto; text-align: center; }
html.v4 #about .about > p:first-child { font-size: clamp(1.125rem, 2.6vw, 1.375rem); line-height: 1.5; color: var(--text); }
html.v4 #about .feedrow { display: flex; justify-content: center; }

/* ================================================================ 10/15 late pass */
/* hero: the messages that slide by while the tank turns, and a clearer cue */
.intro-msgs { position: absolute; left: 0; right: 0; top: calc(var(--barh, 56px) + clamp(1.5rem, 7vh, 5rem)); z-index: 3; pointer-events: none; }
.intro-msgs p { position: absolute; left: 0; right: 0; margin: 0 auto; max-width: 20ch; padding: 0 var(--pad, 16px); text-align: center; font-family: var(--display, inherit); font-size: clamp(1.75rem, 6.4vw, 3.25rem); font-weight: 600; line-height: 1.08; letter-spacing: -.045em; color: var(--strong); opacity: 0; visibility: hidden; text-wrap: balance; will-change: opacity, transform; }
html.intro-static .intro-msgs { display: none; }
html.v4 .intro-cue { font-size: .9375rem; font-weight: 600; color: var(--strong); gap: .2rem; }
html.v4 .intro-cue svg { width: 2rem; height: 2rem; stroke: #248FD3; stroke-width: 2.2; animation-duration: 1.6s; }
/* the wordmark beside the logo: centred on it, one clean gap */
html.v4 .top .brand { display: inline-flex; align-items: center; gap: .6rem; }
html.v4 .brand-logo { width: 1.75rem; height: 1.75rem; flex: none; }
html.v4 .brand-txt { display: flex; flex-direction: column; justify-content: center; line-height: 1.1; }
html.v4 .brand-name { line-height: 1.1; }
html.v4:not(.strip-on):not(.intro-static) .brand-day { display: none; }
/* the 3D tank's carpeted floor */
.t4-floor { background: linear-gradient(180deg, #3f8f33, #5aa83d 55%, #3c2f24); opacity: .95; }
/* the pipes: intake behind, fainter; suction cups */
.mk-back { opacity: .55; }
.mk-cup { fill: rgb(220 235 240 / 35%); stroke: rgb(220 235 240 / 70%); stroke-width: 1.5; }
.mk-cup.mk-back { opacity: .55; }
/* the canister label, pointing at it */
.fz-say { left: 46%; top: 80%; width: 44%; font-size: clamp(.8125rem, 3.2vw, 1rem); }
.fz-say::before { display: none; }
.fz-line { position: absolute; left: 33%; top: 81.5%; width: 12%; border-top: 2px dashed #248FD3; z-index: 6; pointer-events: none; }
.fz-line::before { content: ""; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: #248FD3; }
/* the live view's show line and calendar links */
.showline { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin: .75rem auto 0; text-align: center; }
.sl-say { margin: 0; color: var(--grey); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.sl-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.sl-btn { display: inline-flex; align-items: center; min-height: 2rem; padding: 0 .8rem; border-radius: 999px; background: color-mix(in srgb, var(--grey) 14%, transparent); color: var(--strong); font-size: .75rem; font-weight: 600; text-decoration: none; }
.sl-btn:hover { background: #248FD3; color: #fff; }
html.v4.site .intro-cam .tankside .viewslot, html.v4.cam-portrait.site .intro-cam .tankside .viewslot {
  width: min(100%, 36rem, calc((100vh - var(--barh) - 12.5rem) * var(--car)), calc((100dvh - var(--barh) - 12.5rem) * var(--car))) !important; }
/* the balance loop */
.loop { counter-reset: lp; list-style: none; display: grid; gap: .9rem; max-width: 36rem; margin: var(--s-pic) auto 0; padding: 0; }
.loop li { counter-increment: lp; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .75rem; align-items: baseline; color: var(--grey); font-size: clamp(1rem, 2.4vw, 1.125rem); line-height: 1.45; }
.loop li::before { content: counter(lp); display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: color-mix(in srgb, #248FD3 18%, transparent); color: #248FD3; font-size: .8125rem; font-weight: 700; }
.loop li b { color: var(--strong); font-weight: 600; margin-right: .3rem; }
/* the scape: six tiles */
.scape { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 1.75rem); max-width: 56rem; margin: 0 auto; padding: 0; }
@media (min-width: 48rem) { .scape { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.scape li { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; }
.sc-pic { display: block; width: 100%; aspect-ratio: 1; margin-bottom: .4rem; border-radius: 18px; overflow: hidden; background: color-mix(in srgb, var(--grey) 9%, transparent); }
.sc-pic img { width: 100%; height: 100%; object-fit: contain; padding: 9%; }
.sc-photo .sc-pic img { object-fit: cover; padding: 0; }
.scape b { color: var(--strong); font-size: clamp(.9375rem, 2.4vw, 1.0625rem); font-weight: 600; letter-spacing: -.02em; }
.scape li > span:last-child { color: var(--grey); font-size: .8125rem; line-height: 1.4; max-width: 22ch; }
/* fish: grouped by role, short cards, gently swimming */
html.v4 .fishgroup + .fishgroup { margin-top: clamp(2.5rem, 7vw, 4rem); }
html.v4 .rolehead { margin: 0; text-align: center; font-family: inherit; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #248FD3; }
html.v4 .rolesay { margin: .35rem auto 1.25rem; max-width: 30rem; text-align: center; color: var(--grey); font-size: .9375rem; }
html.v4 #stock-list .echip, html.v4 #stock-list .ego, html.v4 #stock-list .elatin, html.v4 #stock-list .efacts { display: none !important; }
html.v4 #stock-list .esay { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.v4 #stock-list .entries.allfish { justify-content: center; }
html.v4 #stock-list .entries.allfish:has(> .entry:only-child) { grid-template-columns: minmax(0, 18rem) !important; }
html.v4 #stock-list .epic img { animation: fswim var(--fs, 4.2s) ease-in-out infinite alternate; transform-origin: 50% 60%; will-change: transform; }
html.v4 #stock-list .entry:nth-child(2n) .epic img { --fs: 5s; animation-delay: -1.3s; }
html.v4 #stock-list .entry:nth-child(3n) .epic img { --fs: 3.6s; animation-delay: -2.1s; }
html.v4 #stock-list .entry:hover .epic img, html.v4 #stock-list .entry:active .epic img { animation-name: fdart; animation-duration: .9s; }
@keyframes fswim { from { transform: translate(-4px, 2px) rotate(-1.5deg); } to { transform: translate(4px, -3px) rotate(1.5deg); } }
@keyframes fdart { 0% { transform: translate(-6px, 0) rotate(-2deg); } 50% { transform: translate(10px, -5px) rotate(3deg); } 100% { transform: translate(-6px, 2px) rotate(-1deg); } }
html.v4 #fish:not(.inview) .epic img { animation-play-state: paused; }
/* the dial: ticks, the level arc, a caption on the picture */
.dd-dial { width: min(15rem, 66vw); }
.dd-arc { position: absolute; inset: -9%; width: 118% !important; height: 118% !important; overflow: visible; pointer-events: none; }
.dd-ticks { stroke: color-mix(in srgb, var(--grey) 60%, transparent); stroke-width: .8; stroke-linecap: round; }
.dd-track { fill: none; stroke: color-mix(in srgb, var(--grey) 16%, transparent); stroke-width: 1.6; }
.dd-lvlarc { fill: none; stroke: #248FD3; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: var(--lvl, 100) 100; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dasharray .2s ease; }
.dd-ring { transition: transform .12s cubic-bezier(.3, 1.4, .6, 1); }
.dd-tank img { transition: filter .7s var(--ease, ease); }
.dd-toast { position: absolute; left: 50%; bottom: .8rem; z-index: 3; transform: translate(-50%, 6px); padding: .35rem .8rem; border-radius: 999px; background: rgb(0 0 0 / 55%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: .8125rem; font-weight: 600; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; white-space: nowrap; }
.dd-toast.on { opacity: 1; transform: translate(-50%, 0); }
/* Fund the next aquarium: a clear support button */
html.v4 .feedlink { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 1.2rem; border-radius: 999px; background: #248FD3; color: #fff !important; font-weight: 600; text-decoration: none; }
html.v4 .feedlink svg { stroke: #fff; }
/* aquascaping tools: the one photo small, then a symmetric grid of name + use */
html.v4 #kit .kgrp.kwide .kwidepic { max-width: 18rem; margin: 0 auto 1.25rem; background: none; }
html.v4 #kit .kgrp.kwide .kwidepic img { width: 100%; height: auto; }
html.v4 #kit .kgrp.kwide .knames { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; max-width: 40rem; margin: 0 auto; padding: 0; columns: auto; }
@media (min-width: 48rem) { html.v4 #kit .kgrp.kwide .knames { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
html.v4 #kit .kgrp.kwide .knames li { display: flex; flex-direction: column; gap: .2rem; padding: .75rem .8rem; border-radius: 14px; background: color-mix(in srgb, var(--grey) 9%, transparent); text-align: center; }
html.v4 #kit .kgrp.kwide .knames li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 48rem) { html.v4 #kit .kgrp.kwide .knames li:last-child:nth-child(odd) { grid-column: auto; } html.v4 #kit .kgrp.kwide .knames li:nth-child(4n+1):last-child { grid-column: 2 / span 2; } }
html.v4 #kit .kgrp.kwide .knames a { color: var(--strong); text-decoration: none; font-size: .875rem; font-weight: 600; }
html.v4 #kit .kgrp.kwide .knames .kuse { color: var(--grey); font-size: .75rem; }
.loop li { display: block; position: relative; padding-left: 2.6rem; }
.loop li::before { position: absolute; left: 0; top: -.1rem; }
.chstrip [href="#c-about"] { display: none !important; }
/* the ecosystem picture: no store detail from its parts; the loop's own buttons explain each step */
html.v4 #eco-drawn .mk-p, html.v4 #eco-drawn .mk-hot { pointer-events: none !important; }
/* care: one line each, label left, value right */
.care { gap: .1rem; max-width: 36rem; }
.care > div { grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr); gap: 1rem; padding: .7rem 0; align-items: baseline; }
.care dt { font-size: clamp(.9375rem, 2.4vw, 1.0625rem); white-space: nowrap; }
.care dd { text-align: right; font-size: clamp(.875rem, 2.2vw, 1rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 30rem) { .care > div { grid-template-columns: auto minmax(0, 1fr); gap: .75rem; } .care dd { font-size: .8125rem; } }
/* where are the fish: under the live view */
.intro-cam .wherefish.aside, #c-live .wherefish.aside { max-width: 32rem; margin: .6rem auto 0; font-size: .8125rem; line-height: 1.4; }
/* feeding by type: four rows, a week of dots each */
.feedrows { display: grid; gap: 1.1rem; max-width: 38rem; margin: 0 auto; }
.feedrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; }
.fr-t { display: grid; gap: .1rem; }
.fr-t b { color: var(--strong); font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.fr-who { color: var(--text); font-size: .8125rem; }
.fr-what { color: var(--grey); font-size: .8125rem; line-height: 1.35; }
.fr-dots { display: flex; gap: .3rem; }
.fr-dots i { width: .7rem; height: .7rem; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--grey) 45%, transparent); }
.fr-dots i.on { background: #248FD3; border-color: #248FD3; }
/* the week strip: routine and feeding */
.wk7 { display: grid; gap: .35rem; max-width: 40rem; margin: 0 auto; }
.wk7-row { display: grid; grid-template-columns: minmax(7.5rem, 1.6fr) repeat(7, minmax(0, 1fr)); align-items: center; gap: .25rem; min-height: 2.6rem; }
.wk7-head { min-height: 1.4rem; }
.wk7-l { display: grid; line-height: 1.2; min-width: 0; }
.wk7-l b { color: var(--strong); font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.wk7-l small { color: var(--grey); font-size: .6875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk7-d { text-align: center; color: var(--grey); font-size: .6875rem; font-weight: 600; }
.wk7-d.today { color: #fff; background: #248FD3; border-radius: 999px; padding: .1rem 0; }
.wk7-c { display: grid; place-items: center; height: 2rem; border-radius: 8px; }
.wk7-c.on { background: color-mix(in srgb, #248FD3 16%, transparent); }
.wk7-c.off { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--grey) 14%, transparent) 0 4px, transparent 4px 8px); }
.wk7-band { grid-column: 2 / -1; display: flex; align-items: center; justify-content: center; height: 2rem; border-radius: 999px; background: color-mix(in srgb, #248FD3 16%, transparent); }
.wk7 svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: #248FD3; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wk7-more { display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem 1.25rem; margin-top: 1rem; color: var(--grey); font-size: .8125rem; }
.wk7-more p { margin: 0; }
@media (max-width: 30rem) { .wk7-row { grid-template-columns: 6.6rem repeat(7, minmax(0, 1fr)); gap: .2rem; } .wk7-l small { font-size: .625rem; } .wk7 svg { width: .9rem; height: .9rem; } }
#feedplan .feedsay { margin-top: 1rem; }
.mk-p.tapped::after { opacity: 1 !important; }
/* the chapter's line moves with its title, so they never overlap on the way in */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.v4.sl .ch-sub { animation: sl-ch linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
  }
}

/* ================================================================ 10/15 late (his bug: "why does it jump me down?"): no scroll
   snapping anywhere on the page; the browser keeps the visitor's place when content above grows (scroll anchoring) */
html.v4, html.v4.nosnap { scroll-snap-type: none !important; }
html.v4 .intro, html.v4 .intro-end, html.v4 .ch-head, html.v4 .chapter > .sub { scroll-snap-align: none !important; }
html.v4 body { overflow-anchor: auto; }

/* ================================================================ 10/15 late, round 3 */
/* group colours, built around the chum blue */
:root { --rc-school: #248FD3; --rc-school2: #2FC4B2; --rc-show: #F2A33A; --rc-bottom: #9B87F5; --rc-grazer: #5DBB63; --rc-crew: #E8738F; }
[data-rc="school"] { --rc: var(--rc-school); } [data-rc="school2"] { --rc: var(--rc-school2); } [data-rc="show"] { --rc: var(--rc-show); }
[data-rc="bottom"] { --rc: var(--rc-bottom); } [data-rc="grazer"] { --rc: var(--rc-grazer); } [data-rc="crew"] { --rc: var(--rc-crew); }
/* fish: a real grid, wider cards, bigger pictures, clear group headers */
html.v4 #stock-list .fishgroup:not([data-rc]) { --rc: #248FD3; }
html.v4 #stock-list .fishgroup + .fishgroup { margin-top: clamp(3rem, 8vw, 4.5rem); }
html.v4 #stock-list .rolehead { display: flex; align-items: center; justify-content: center; gap: .5rem; color: var(--rc); font-size: .8125rem; }
html.v4 #stock-list .rolehead::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--rc); }
html.v4 #stock-list .entries.allfish { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: clamp(.75rem, 2.5vw, 1.25rem) !important; max-width: 60rem; margin: 0 auto; align-items: stretch; }
@media (min-width: 48rem) { html.v4 #stock-list .entries.allfish { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (min-width: 64rem) { html.v4 #stock-list .entries.allfish { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
html.v4 #stock-list .entries.allfish:has(> .entry:only-child) { grid-template-columns: minmax(0, 15rem) !important; justify-content: center; }
html.v4 #stock-list .entries.allfish:has(> .entry:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 20rem)) !important; justify-content: center; }
html.v4 #stock-list .entry { display: flex !important; flex-direction: column; gap: .5rem; height: 100%; padding: .9rem !important; border-radius: 18px; background: color-mix(in srgb, var(--rc) 9%, transparent) !important; border: 0 !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 22%, transparent); }
html.v4 #stock-list .epic { width: 100% !important; max-width: none !important; height: auto !important; aspect-ratio: 16 / 10; margin: 0 !important; display: grid; place-items: center; overflow: visible; background: none !important; }
html.v4 #stock-list .epic img { width: 92% !important; height: 100% !important; object-fit: contain; }
html.v4 #stock-list .ebody { padding: 0 !important; display: grid; gap: .2rem; }
html.v4 #stock-list .ename { font-size: clamp(.9375rem, 2.4vw, 1.0625rem); margin: 0; }
html.v4 #stock-list .ecount { color: var(--rc); }
/* the same colours on the feeding rows and the stocking bars */
#feedplan .wk7-row[data-rc] .wk7-c.on, #feedplan .wk7-row[data-rc] .wk7-band { background: color-mix(in srgb, var(--rc) 18%, transparent); }
#feedplan .wk7-row[data-rc] svg { stroke: var(--rc); }
#feedplan .wk7-row[data-rc] .wk7-l b::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .4rem; border-radius: 50%; background: var(--rc); vertical-align: .1em; }
html.v4 #stocking .g-row[data-rc] .g-bar { background: var(--rc) !important; }
html.v4 #stocking .g-row[data-rc] .g-soft { background: var(--rc) !important; }
/* the balance: one line per step */
.loop li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(.875rem, 3.7vw, 1.0625rem); }
/* the fish note after the side camera, leading into Balance */
.wherefish-x { max-width: 34rem; margin: var(--s-sec, 6rem) auto 0; text-align: center; }
.wherefish-x[hidden] { display: none; }
.wherefish-x .wf-h { margin: 0 0 .6rem; color: var(--strong); font-family: var(--display, inherit); font-size: clamp(1.75rem, 6vw, 2.75rem); font-weight: 600; line-height: 1.08; letter-spacing: -.045em; }
.wherefish-x p { margin: 0 0 .7rem; color: var(--grey); font-size: clamp(1rem, 2.5vw, 1.1875rem); line-height: 1.45; text-wrap: balance; }
.sidecam > .tale { margin-bottom: 1rem !important; }
/* storm on: play the sound here */
.sl-storm { display: inline-flex; align-items: center; gap: .6rem; padding: .3rem .4rem .3rem .8rem; border-radius: 999px; background: rgb(36 143 211 / 18%); color: var(--strong); font-size: .8125rem; font-weight: 600; }
.sl-storm[hidden] { display: none; }
.sl-play { min-height: 2rem; padding: 0 .9rem; border: 0; border-radius: 999px; background: #248FD3; color: #fff; font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; }
/* the dial, shown plainly */
.dialshow { display: grid; gap: clamp(1.5rem, 5vw, 3rem); align-items: center; max-width: 52rem; margin: 0 auto; }
@media (min-width: 48rem) { .dialshow { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.ds-dial { position: relative; width: min(14rem, 60vw); aspect-ratio: 1; margin: 0 auto; filter: drop-shadow(0 16px 26px rgb(0 0 0 / 50%)); }
.ds-dial img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ds-list { list-style: none; display: grid; gap: .9rem; margin: 0; padding: 0; }
.ds-list li { display: grid; gap: .15rem; }
.ds-list b { color: var(--strong); font-size: 1rem; font-weight: 600; letter-spacing: .02em; }
.ds-list span { color: var(--grey); font-size: .9375rem; line-height: 1.4; }
.ds-admin { margin: var(--s-pic, 2.5rem) auto 0; text-align: center; color: var(--grey); font-size: .875rem; }
/* ---- the top bar: the wordmark centred, sticky, blurred; the chapters in one strip under it at all widths */
html.v4 .top { position: sticky; top: 0; justify-content: center; min-height: 3.5rem; background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
html.v4 .top .brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; }
html.v4 .brand-txt { align-items: flex-start; }
html.v4 .top .themebtn { position: absolute; left: var(--pad, 16px); top: 50%; transform: translateY(-50%); }
html.v4 .top .menu-btn { position: absolute; right: var(--pad, 16px); top: 50%; transform: translateY(-50%); }
html.v4 .top .adminbadge { position: absolute; right: calc(var(--pad, 16px) + 3rem); top: 50%; transform: translateY(-50%); }
html.v4.lay-b .top .chnav { display: none !important; }
@media (min-width: 48rem) {
  html.v4 .chstrip { display: flex !important; justify-content: center; gap: .5rem; }
  html.v4 .chstrip .chtab { padding: 0 .9rem; }
}
/* ---- the hero's logo */
.intro-logo { display: block; width: clamp(3.75rem, 14vw, 5.5rem); height: auto; margin: 0 auto clamp(.9rem, 2.4vh, 1.4rem); filter: drop-shadow(0 8px 24px rgb(36 143 211 / 35%)); }
/* ---- the admin link: the very bottom only */
html.v4 .sitefoot .ctl-link { margin: .75rem 0 0; font-size: .75rem !important; }

.loop li { font-size: clamp(.8125rem, 3.5vw, 1.0625rem); }

/* ================================================================ 10/15 late, round 4 */
/* the filter: no cut-open media drawing, no hoses, no parts list */
html.v4 #filter-art > svg, html.v4 #in-tank, html.v4 #mediaflow, html.v4 #filter-facts .cell[hidden] { display: none !important; }
html.v4 #filter-art .heaterfig { display: flex; align-items: flex-end; justify-content: center; gap: 1.25rem; margin: 0 auto; }
html.v4 #filter-art .heaterfig .cani { width: min(11rem, 40vw); height: auto; }
html.v4 #filter-art .heaterfig > img:not(.cani) { height: min(11rem, 40vw); width: auto; }
html.v4 #filter-art .heaterfig figcaption { max-width: 14rem; color: var(--grey); font-size: .9375rem; line-height: 1.4; }
html.v4 .filterfacts { grid-template-columns: minmax(0, 1fr) !important; }
/* lily pipes */
.lily { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 1.75rem); max-width: 48rem; margin: 0 auto; padding: 0; }
@media (min-width: 48rem) { .lily { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lily li { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; }
.li-pic { display: grid; place-items: center; width: 100%; aspect-ratio: 1; margin-bottom: .3rem; border-radius: 18px; background: color-mix(in srgb, var(--grey) 9%, transparent); }
.li-pic img { max-width: 78%; max-height: 78%; object-fit: contain; }
.lily b { color: var(--strong); font-size: 1rem; font-weight: 600; }
.lily li > span:last-child { color: var(--grey); font-size: .8125rem; line-height: 1.35; }
/* automated: one tidy list */
.autolist { list-style: none; display: grid; gap: .1rem; max-width: 36rem; margin: 0 auto; padding: 0; }
.autolist li { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem; padding: .7rem 0; align-items: baseline; }
.autolist b { color: var(--strong); font-size: 1rem; font-weight: 600; }
.autolist span { color: var(--grey); font-size: .9375rem; line-height: 1.4; }
@media (max-width: 30rem) { .autolist li { grid-template-columns: 6.75rem minmax(0, 1fr); gap: .75rem; } .autolist span { font-size: .875rem; } }
.sl-auto { margin: 0; color: var(--strong); font-size: .875rem; font-weight: 600; }
/* the dial beside the tank */
.dialshow { grid-template-columns: minmax(0, 1fr) !important; }
@media (min-width: 48rem) { .dialshow { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) !important; } }
.ds-tank { position: relative; margin: 0 0 8%; border-radius: 18px; overflow: visible; }
.ds-photo { display: block; width: 100%; height: auto; border-radius: 18px; }
.ds-tank .ds-dial { position: absolute; right: -2%; bottom: -14%; width: 28%; margin: 0; }
.ds-list { gap: .55rem !important; }
.ds-list li { grid-template-columns: 4.5rem minmax(0, 1fr); display: grid !important; gap: .75rem !important; align-items: baseline; }
.ds-list b { font-size: .9375rem !important; letter-spacing: .12em !important; color: var(--strong); }
.ds-list span { font-size: .875rem !important; }

/* ================================================================ 10/15 late: one colour per element, the same everywhere
   (accent #248FD3 stays the brand and the UI) */
:root { --c-light: #F2C94C; --c-co2: #A88BF5; --c-plant: #4DC46B; --c-bact: #F0973A; --c-water: #4FB3F0; --c-heat: #F2643A; --c-oxy: #9FE3EC; --c-food: #D9A066; }
:root[data-theme="light"] { --c-light: #C99A0E; --c-co2: #7B5CE0; --c-plant: #24994A; --c-bact: #C9701A; --c-water: #1F86C8; --c-heat: #D2481F; --c-oxy: #2A9DB0; --c-food: #A8743A; }
/* section labels take their element's colour */
html.v4 #schedule .lede > .head h2 { color: var(--c-light) !important; }
html.v4 #co2 .lede > .head h2 { color: var(--c-co2) !important; }
html.v4 #plants .lede > .head h2 { color: var(--c-plant) !important; }
html.v4 :is(#filter, #lily, #data, #water-changes) .lede > .head h2 { color: var(--c-water) !important; }
html.v4 #filter .lede-2 > .head h2, html.v4 #water-cycle .lede > .head h2 { color: var(--c-bact) !important; }
html.v4 #temperature .lede > .head h2 { color: var(--c-heat) !important; }
html.v4 #feeding .lede > .head h2 { color: var(--c-food) !important; }
/* the balance steps */
.loop li:nth-child(1)::before, .loop li:nth-child(4)::before { background: color-mix(in srgb, var(--c-plant) 20%, transparent); color: var(--c-plant); }
.loop li:nth-child(2)::before { background: color-mix(in srgb, var(--c-oxy) 20%, transparent); color: var(--c-oxy); }
.loop li:nth-child(3)::before { background: color-mix(in srgb, var(--c-bact) 20%, transparent); color: var(--c-bact); }
.loop li:nth-child(5)::before { background: color-mix(in srgb, var(--rc-crew) 20%, transparent); color: var(--rc-crew); }
.loop li:nth-child(6)::before { background: color-mix(in srgb, var(--c-water) 20%, transparent); color: var(--c-water); }
/* the schedule bars and their key: light vs CO2 */
html.v4 .sb-full { background: var(--c-light) !important; }
html.v4 .sb-dim { background: color-mix(in srgb, var(--c-light) 38%, transparent) !important; }
html.v4 .sb-co2 { background: var(--c-co2) !important; }
html.v4 .sb-co2.planned { background: none !important; border-color: var(--c-co2) !important; }
/* the routine strip */
#care-list .wk7-row[data-c] { --cc: var(--c-light); }
#care-list .wk7-row[data-c="co2"] { --cc: var(--c-co2); } #care-list .wk7-row[data-c="water"] { --cc: var(--c-water); } #care-list .wk7-row[data-c="plant"] { --cc: var(--c-plant); }
#care-list .wk7-row[data-c] .wk7-band, #care-list .wk7-row[data-c] .wk7-c.on { background: color-mix(in srgb, var(--cc) 18%, transparent); }
#care-list .wk7-row[data-c] svg { stroke: var(--cc); }
#care-list .wk7-row[data-c] .wk7-l b::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .4rem; border-radius: 50%; background: var(--cc); vertical-align: .1em; }
#feedplan .wk7-row:not([data-rc]) svg { stroke: var(--c-food); }
/* the drawings: CO2 in its colour, water in its colour */
html.v4 .mk-gasflow, html.v4 .dg-gas, html.v4 .dg-co2, html.v4 .c-gas { stroke: var(--c-co2) !important; }
html.v4 .mk-gasline { stroke: color-mix(in srgb, var(--c-co2) 45%, transparent) !important; }
html.v4 .mk-bub, html.v4 .mk-bcb, html.v4 .dg-cbub, html.v4 .dg-pearl { fill: var(--c-co2) !important; }
html.v4 :is(.mk-flow, .dg-flow, .dg-jet, .dg-loop, .f-flow, .c-hose) { stroke: var(--c-water) !important; }
.tqh-fill { fill: var(--c-heat); }
html.v4 .fz-line { border-top-color: var(--c-water); } html.v4 .fz-line::before { background: var(--c-water); }
/* things that vanish on the dark page: the clear glass cup, the CO2 diffuser */
html.v4 .kcard[aria-label^="UNS glass cup"] .kpic, html.v4 .kcard[aria-label^="Aquario Neo CO2 diffuser"] .kpic { background: radial-gradient(closest-side, rgb(255 255 255 / 16%), transparent) !important; }
html.v4 .kcard[aria-label^="UNS glass cup"] img, html.v4 .kcard[aria-label^="Aquario Neo CO2 diffuser"] img { filter: drop-shadow(0 0 1px rgb(255 255 255 / 95%)) drop-shadow(0 0 7px rgb(190 220 255 / 45%)) !important; }
html.v4 .kcard[aria-label^="Aquario Neo CO2 diffuser"] img { filter: invert(1) hue-rotate(180deg) brightness(1.15) drop-shadow(0 0 6px rgb(190 220 255 / 45%)) !important; }
html.v4 .mk-co2fig .mk-k-diffuser img, html.v4 .mk .mk-k-diffuser img { filter: invert(1) hue-rotate(180deg) brightness(1.3) drop-shadow(0 0 3px rgb(200 225 255 / 80%)) !important; opacity: 1 !important; }
html.v4 .mk .mk-k-anubias img { filter: drop-shadow(0 0 1.5px rgb(255 255 255 / 85%)); }
.kcard-static { cursor: default; }
/* About */
html.v4 #about .about-me { margin-bottom: .4rem; color: var(--strong); font-family: var(--display, inherit); font-size: clamp(1.375rem, 4vw, 1.875rem) !important; font-weight: 600; letter-spacing: -.03em; }
.socials { display: flex; justify-content: center; gap: .75rem; margin: 0 0 1.5rem !important; }
.socials a { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: color-mix(in srgb, var(--grey) 14%, transparent); }
.socials svg { width: 1.1rem; height: 1.1rem; fill: var(--strong); }
.socials a:hover { background: #248FD3; } .socials a:hover svg { fill: #fff; }
/* credits: fine print */
html.v4 #photo-credits, html.v4 #photo-credits * { font-size: 11px !important; line-height: 1.45 !important; color: var(--grey) !important; }
html.v4 #photo-credits .head h2 { font-size: 11px !important; letter-spacing: .12em; text-transform: uppercase; }
html.v4 #photo-credits a { color: var(--grey) !important; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--grey) 40%, transparent); }
html.v4 #photo-credits .linklist { padding-left: 1rem; margin: .2rem 0 .6rem; }
.showline .sl-btns { display: none !important; }
/* the clear lily pipes: drawn light on the dark page so they read */
.li-pic { background: radial-gradient(closest-side, rgb(255 255 255 / 10%), transparent) , color-mix(in srgb, var(--grey) 9%, transparent); }
.li-pic img { filter: invert(1) hue-rotate(180deg) brightness(1.15) drop-shadow(0 0 4px rgb(190 220 255 / 45%)); }
:root[data-theme="light"] .li-pic img { filter: none; }
html.v4 .kcard[aria-label^="Aquario Neo CO2 diffuser"] img { filter: grayscale(1) invert(1) brightness(1.7) drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 8px rgb(190 220 255 / 60%)) !important; }
html.v4 .kcard[aria-label^="UNS glass cup"] .kpic { background: color-mix(in srgb, var(--grey) 22%, transparent) !important; }
html.v4 .kcard[aria-label^="UNS glass cup"] img { filter: brightness(.9) contrast(1.25) drop-shadow(0 0 1px rgb(255 255 255 / 70%)) !important; }
/* lily pipes, tidied: four equal tiles, one backdrop, each cut-out the same height, captions aligned */
.lily { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: stretch; }
@media (min-width: 48rem) { .lily { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
.lily li { display: grid !important; grid-template-rows: auto auto 1fr; justify-items: center; align-content: start; gap: .35rem; }
.li-pic { display: flex !important; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; margin: 0 0 .45rem; border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--grey) 16%, transparent), color-mix(in srgb, var(--grey) 8%, transparent)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--grey) 14%, transparent); }
.li-pic img { height: 72% !important; width: auto !important; max-width: 78% !important; max-height: none !important; object-fit: contain; filter: invert(1) hue-rotate(180deg) brightness(1.15) drop-shadow(0 0 3px rgb(190 220 255 / 40%)) !important; }
:root[data-theme="light"] .li-pic img { filter: none !important; }
.lily b { min-height: 1.3em; }
.lily li > span:last-child { max-width: 16ch; }
/* the Black Rose shrimp: jet black, so a faint rim of light lets it read on the dark card */
img[src*="fish/black-rose"] { filter: drop-shadow(0 0 1px rgb(255 255 255 / 55%)) drop-shadow(0 0 6px rgb(180 200 230 / 25%)); }
/* a group of three: centred, symmetric */
@media (min-width: 48rem) { html.v4 #stock-list .entries.allfish:has(> .entry:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 17rem)) !important; justify-content: center; } }
@media (max-width: 47.99rem) { html.v4 #stock-list .entries.allfish > .entry:last-child:nth-child(odd):not(:only-child) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .4rem); } }
/* the tools tile: one line, same size as the rest */
html.v4 #kit .kcard-static .kname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.v4 #kit .kcard-static .kname { white-space: normal; overflow: visible; }
html.v4 #kit .kgrid > .kcard-static:nth-child(3n+1):last-child { grid-column: 2; }

/* ================================================================ 10/15 late (his ask: "weird, not good transitions, clunky"):
   chapters flow straight on, spacing only. No title screens, no hand-offs, no fish between chapters, no sticky words. */
html.v4 .ch-head, html.v4 .ch-gap { display: none !important; }
html.v4 .chapter { padding-top: 0; }
html.v4 .chapter + .chapter { margin-top: 0; }
html.v4 .duo-row > .lede { position: static !important; top: auto !important; padding-top: 0 !important; align-self: center; }
html.v4 .duo-row { align-items: center !important; }
/* the one light entrance: opacity and a short lift, once */
html.v4 .rv { opacity: 0; transform: translate3d(0, 16px, 0); }
html.v4 .rv.in { opacity: 1; transform: none; transition: opacity .6s ease-out, transform .6s ease-out; }
html.v4 .tale.wait p { transform: translate3d(0, 10px, 0); }
html.v4 .tale.wait.on p { transition: opacity .6s ease-out, transform .6s ease-out; }
html.v4 .art-wait { transform: translate3d(0, 18px, 0); }
html.v4 .art-wait.on { transition: opacity .6s ease-out, transform .6s ease-out; }
/* the static hero on a phone: logo, headline, the live view under it */
html.v4.intro-static .intro-stage { padding: calc(var(--barh, 56px) + 2.5rem) 0 0; text-align: center; }
html.v4.intro-static .intro-words { padding: 0 var(--pad, 16px); }
html.v4.intro-static .intro-cam { padding: 2rem var(--pad, 16px) 0 !important; }
html.v4.intro-static .intro-cam .tale-live { display: block; }
html.v4.intro-static .intro-sub { margin-bottom: .5rem; }
/* the heater photo as the gauge */
.tq-rod { position: relative; width: clamp(2.4rem, 8vw, 3rem); aspect-ratio: 141 / 978; }
.tq-rod img { position: absolute; inset: 0; width: 100%; height: 100%; }
.tq-rodfill { position: absolute; left: 27%; right: 27%; bottom: 2.5%; height: calc(var(--f) * 78%); border-radius: 999px; background: linear-gradient(0deg, var(--c-heat), color-mix(in srgb, var(--c-heat) 55%, #ffcf8a)); opacity: .55; mix-blend-mode: screen; }
html.v4.intro-static .intro, html.v4.lay-b.intro-static .intro { height: auto !important; min-height: 0 !important; }
html.v4.intro-static .intro-stage { position: static !important; height: auto !important; overflow: visible; }
html.v4.intro-static :is(.intro-cue, .intro-msgs, .tank3d-wrap) { display: none !important; }
html.v4.intro-static .intro-end { display: none; }

/* ---- 10/16 pass (his ask: accurate, smoother, flows better, more Apple) ---------------------------------------- */
/* callouts: a dot on the part, a hairline to its number */
.mk-leads { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 7; overflow: visible; pointer-events: none; }
.mk-leads line { stroke: var(--strong, #fff); stroke-width: 2.2; stroke-linecap: round; opacity: .7; stroke-dasharray: 1; stroke-dashoffset: 0; }
.mk-dot { position: absolute; z-index: 7; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--strong, #fff); box-shadow: 0 0 0 2px var(--bg, #000); pointer-events: none; }
html.anim .band:not(.seen) .mk-leads line { stroke-dashoffset: 1; }
html.anim .band .mk-leads line { transition: stroke-dashoffset .9s cubic-bezier(.2, .7, .2, 1) .35s; }
html.anim .band:not(.seen) .mk-dot, html.anim .band:not(.seen) .mk-badge { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
html.anim .band .mk-badge { transition: opacity .5s ease .9s, transform .5s cubic-bezier(.2, .7, .2, 1) .9s; }
html.anim .band .mk-dot { transition: opacity .4s ease .3s; }
html.anim .band:not(.seen) .mk-dot { transform: none; }
/* the balance list: numbers were clipped by the one-line ellipsis */
.loop li { white-space: normal; overflow: visible; text-overflow: clip; min-height: 1.75rem; padding-top: .15rem; }
.loop li::before { top: 0; }
/* smooth scrolling: animations that loop only run while on screen; fewer permanent layers */
.ff { will-change: auto; }
.ch-gap:not(.inview) .ch-next svg { animation-play-state: paused; }
html.intro-done .intro-cue svg { animation-play-state: paused; }
.t4-fish { filter: none; }
@media (prefers-reduced-motion: reduce) {
  .mk-leads line { stroke-dashoffset: 0 !important; transition: none !important; }
  .mk-dot, .mk-badge { opacity: 1 !important; transition: none !important; }
}
/* Resources (appendix): grouped lists, no rules or boxes; favourites get one small blue tag */
.resources { margin-top: var(--s-pic, 4rem); }
.resources .lede { margin-bottom: 1.5rem; }
.rs-local { max-width: 40rem; margin: 0 auto 2.75rem; padding: 1.1rem 1.25rem; border-radius: 18px; background: color-mix(in srgb, var(--strong, #fff) 6%, transparent); color: var(--grey); font-size: 1rem; line-height: 1.5; text-align: left; text-wrap: pretty; }
.rs-local b { color: var(--strong); font-weight: 600; }
.rs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 2.25rem 2.5rem; max-width: 64rem; margin: 0 auto; text-align: left; }
.rs-g h3, .rs-g h4 { margin: 0 0 .75rem; color: var(--grey); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.rs-h { max-width: 64rem; margin: 3.25rem auto 1.25rem; color: var(--strong); font-size: clamp(1.25rem, 3.6vw, 1.5rem); font-weight: 600; letter-spacing: -.02em; text-align: left; }
.rs-g ul { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; }
.rs-g li { display: grid; gap: .15rem; }
.rs-g li b { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-weight: 600; font-size: 1rem; letter-spacing: -.01em; }
.rs-g li b a, .rs-g li b span { color: var(--strong); text-decoration: none; }
.rs-g li b a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rs-g li > span { color: var(--grey); font-size: .875rem; line-height: 1.45; }
.rs-g li em { font-style: normal; color: var(--strong); opacity: .8; }
.rs-pill { font-style: normal; padding: .1rem .5rem; border-radius: 999px; background: color-mix(in srgb, #248FD3 16%, transparent); color: #248FD3; font-size: .6875rem; font-weight: 600; letter-spacing: .02em; }
html[data-theme="light"] .rs-pill, :root:not([data-theme="dark"]) .rs-pill { color: #1A74B0; }
html[data-theme="dark"] .rs-pill { color: #248FD3; }
@media (max-width: 600px) { .rs-grid { gap: 2rem; } .rs-h { margin-top: 2.75rem; } }

/* 10/16 (his ask): "But where are the fishy?" with one fish swimming back and forth under the lines. Transform only. */
.fishy { container-type: inline-size; height: 44px; margin: 14px 0 0; pointer-events: none; overflow: hidden; }
.fishy img { display: block; width: 46px; height: auto; transform: translate(0, 6px); animation: fishy-swim 22s ease-in-out infinite; will-change: transform; }
@keyframes fishy-swim {
  0%   { transform: translate(0, 8px) scaleX(1); }
  22%  { transform: translate(calc(50cqw - 23px), 2px) scaleX(1); }
  46%  { transform: translate(calc(100cqw - 46px), 10px) scaleX(1); }
  50%  { transform: translate(calc(100cqw - 46px), 8px) scaleX(-1); }
  74%  { transform: translate(calc(50cqw - 23px), 14px) scaleX(-1); }
  96%  { transform: translate(0, 6px) scaleX(-1); }
  100% { transform: translate(0, 8px) scaleX(1); }
}
@media (prefers-reduced-motion: reduce) { .fishy img { animation: none; } }
html.calm .fishy img { animation: none; }

/* ---- Day by day (10/16): the evening photo of each day, newest first, one swipeable strip */
#growth[hidden] { display: none !important; }
.gr-strip { display: flex; gap: clamp(.75rem, 2.4vw, 1.25rem); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; padding: 0 16px .5rem; margin: 0 -16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gr-strip::-webkit-scrollbar { display: none; }
@media (min-width: 48rem) { .gr-strip { justify-content: safe center; margin: 0; padding: 0 0 .5rem; scroll-padding-inline: 0; } }
.gr-day { flex: none; width: clamp(8.5rem, 38vw, 12.5rem); display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: zoom-in; scroll-snap-align: start; }
.gr-pic { position: relative; display: block; width: 100%; aspect-ratio: 5 / 8; margin-bottom: .45rem; border-radius: 18px; overflow: hidden; background: color-mix(in srgb, var(--grey) 12%, transparent); }
.gr-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease, ease); }
.gr-day:hover .gr-pic img { transform: scale(1.03); }
.gr-day:focus-visible { outline: none; } .gr-day:focus-visible .gr-pic { outline: 2px solid #248FD3; outline-offset: 3px; }
.gr-n { position: absolute; right: .5rem; bottom: .5rem; min-width: 1.5rem; height: 1.5rem; padding: 0 .4rem; border-radius: 999px; background: rgb(0 0 0 / 55%); color: #fff; font-style: normal; font-size: .6875rem; font-weight: 600; line-height: 1.5rem; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.gr-day:first-child .gr-n { background: #248FD3; }
.gr-day b { color: var(--strong); font-size: clamp(.9375rem, 2.4vw, 1.0625rem); font-weight: 600; letter-spacing: -.02em; }
.gr-day > span:last-child { color: var(--grey); font-size: .8125rem; }

/* ---- Day by day, redone 10/25 night (his words: "day by day swap stinks"): one picture of the tank, cropped to the
   glass, the days cross-fading on a slider (app.js drawGrowth). The crop: 98% of the photo's width, 25% to 66% of its
   height (the daily photos are 1361 x 2178, the tank from the rim to the stand). */
.gr-play { max-width: 56rem; margin: 0 auto; }
.gr-frame { position: relative; display: block; width: 100%; aspect-ratio: 1.4936; padding: 0; border: 0; border-radius: 22px; overflow: hidden; background: color-mix(in srgb, var(--grey) 12%, transparent); cursor: zoom-in; }
.gr-frame img { position: absolute; left: -1.02%; top: 0; width: 102.04%; height: auto; max-width: none; transform: translateY(-25%); opacity: 0; transition: opacity .45s ease; }
.gr-frame img.on { opacity: 1; }
.gr-frame:focus-visible { outline: 2px solid #248FD3; outline-offset: 3px; }
.gr-now { display: flex; align-items: baseline; justify-content: center; gap: .6rem; margin: 1.1rem 0 .55rem; }
.gr-now b { color: var(--strong); font-size: clamp(1.25rem, 3vw, 1.5rem); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gr-now span { color: var(--grey); font-size: .9375rem; }
.gr-ctl { display: flex; align-items: center; gap: .75rem; max-width: 34rem; margin: 0 auto; }
.gr-end { flex: none; color: var(--grey); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.gr-btn { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 999px; background: #248FD3; color: #fff; cursor: pointer; }
.gr-btn svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.gr-btn:focus-visible { outline: 2px solid #248FD3; outline-offset: 3px; }
.gr-range { flex: 1; min-width: 0; height: 2.5rem; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; --p: 100%; }
.gr-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, #248FD3 var(--p), color-mix(in srgb, var(--grey) 30%, transparent) var(--p)); }
.gr-range::-moz-range-track { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--grey) 30%, transparent); }
.gr-range::-moz-range-progress { height: 6px; border-radius: 3px; background: #248FD3; }
.gr-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgb(0 0 0 / 35%); }
.gr-range::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgb(0 0 0 / 35%); }
.gr-range:focus-visible { outline: none; } .gr-range:focus-visible::-webkit-slider-thumb { outline: 2px solid #248FD3; outline-offset: 2px; }
@media (max-width: 30rem) { .gr-frame { border-radius: 16px; } .gr-ctl { gap: .55rem; } }
@media (prefers-reduced-motion: reduce) { .gr-frame img { transition: none; } }