/* motion.css (2026-10-23): the held scenes, the nitrogen wheel, the swimming canvas and the fish cards (motion.js,
   swim.js). Transform and opacity only. README, fishtank.cam section 51. */

/* ---- pinned scenes (10/23 calm pass): the picture stays under the bar while the words below it scroll past.
   On a phone the words pass beneath the picture and slip under it; on a computer they pass on the right. */
.mo-pin { position: relative; }
html.mo .mo-pin > .mo-stick { position: sticky; top: calc(var(--barh, 56px) + var(--striph, 0px) + 6px); z-index: 2; background: var(--bg); }
html.mo .mo-pin > .mo-stick::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 2.5rem; background: linear-gradient(var(--bg), transparent); pointer-events: none; }
html.mo .mo-flow { position: relative; z-index: 1; padding: 4svh 0 10svh; }
html.mo .mo-flow > ol > li, html.mo .mo-flow > .mo-it { min-height: 26svh; }
html.mo .mo-flow > ol > li { transition: opacity .5s; }
html.mo .mo-flow > ol.sc-rows > li:not(.on), html.mo .mo-flow > ol.cy-steps > li:not(.on) { opacity: .38; }
@media (min-width: 64rem) {
  html.mo .mo-pin { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  html.mo .mo-pin > .mo-stick { top: calc(var(--barh, 56px) + var(--striph, 0px) + 12vh); }
  html.mo .mo-pin > .mo-stick::after { display: none; }
  html.mo .mo-flow { padding: 22vh 0 34vh; }
  html.mo .mo-flow > ol > li { min-height: 40vh; }
}
/* the six lines of Balance's loop, passing under the picture */
html.mo .mo-ecopin .mo-flow ol.loop { display: block; margin: 0; padding: 0; }
html.mo .mo-ecopin .mo-flow ol.loop > li { display: block; position: relative; padding: 7svh 0 0 3.2rem; white-space: normal; overflow: visible; font-size: clamp(1.25rem, 4.6vw, 1.75rem); line-height: 1.3; letter-spacing: -.02em; }
html.mo .mo-ecopin .mo-flow ol.loop > li::before { position: absolute; left: 0; top: calc(7svh - .2rem); width: 2.25rem; height: 2.25rem; font-size: .9375rem; }

/* ---- the temperature meter */
html.mo .mo-tq .tq-rodfill { transform-origin: 50% 100%; }
html.mo .mo-tq { padding: .5rem 0 1rem; background: var(--bg); }
.mo-tqhold + #temp-page { margin-top: 0; }

/* ---- the nitrogen wheel: one wheel turning to the stage being read */
.cy-host { display: block; }
.cy { position: relative; container-type: inline-size; width: min(100%, 21rem, 48svh); aspect-ratio: 1; margin: .75rem auto .25rem; --cur: var(--chum, #248FD3); }
.cy-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cy-track { fill: none; stroke: color-mix(in srgb, var(--grey, #8e8e93) 22%, transparent); stroke-width: 2; }
.cy-mark { position: absolute; left: 50%; top: 12.67%; width: 7rem; height: 7rem; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cur) 40%, transparent), transparent); transition: background .6s; pointer-events: none; }
.cy-rot { position: absolute; inset: 0; }
.cy-node { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateY(-37.33cqw); }
.cy-in { position: absolute; left: 0; top: 0; translate: -50% -50%; display: grid; place-content: center; gap: .1rem; width: 5.25rem; height: 5.25rem; border-radius: 50%;
  text-align: center; color: var(--strong, #fff); background: color-mix(in srgb, var(--c) 14%, var(--bg, #000)); box-shadow: inset 0 0 0 1.5px var(--c);
  transition: background .6s, scale .8s cubic-bezier(.16, 1, .3, 1); }
.cy-in b { font: 700 .9375rem/1.1 var(--sans, system-ui); letter-spacing: -.01em; color: var(--c); padding: 0 .3rem; }
.cy-in em { font-style: normal; font-weight: 700; font-size: .75rem; color: var(--c); }
.cy-node.on .cy-in { background: var(--c); scale: 1.12; }
.cy-node.on .cy-in b, .cy-node.on .cy-in em { color: #fff; }
.cy-steps { list-style: none; margin: 0; padding: 0; }
.cy-steps > li { display: flex; flex-direction: column; justify-content: center; gap: .3rem; }
.cy-steps b { font: 600 clamp(1.4rem, 5vw, 2rem)/1.1 var(--display, var(--sans, system-ui)); letter-spacing: -.03em; color: var(--strong); }
.cy-steps b::before { content: ""; display: inline-block; width: .6rem; height: .6rem; margin-right: .6rem; border-radius: 50%; background: var(--c); vertical-align: .15em; }
.cy-steps span { color: var(--grey); font-size: 1rem; line-height: 1.45; }
html.mo-still .cy-steps > li { padding: .75rem 0; }
.cy-cy { display: none; }

/* ---- the swimming picture: one canvas over the glass */
.swim-cv { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
html.mo #eco-drawn.mo-stick { background: var(--bg); }

/* ---- the fish cards: the frame holds the fish as it swims in and out */
html.mo #stock-list .mo-card .epic { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .cy-in, .cy-mark { transition: none; }
}

/* ---- the menu: an icon beside each item (mnuicons.js), Admin last */
.mnu-list .chi { display: inline-flex; width: 1.25rem; height: 1.25rem; flex: none; color: var(--grey); }
.mnu-list .chi svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mnu-list a[aria-current] .chi { color: var(--chum-text, var(--chum, #248FD3)); }
.mnu-list a.tk .chi { width: 1.5rem; height: 1.5rem; }
.mnu-list a[target="_blank"] .mnu-t b::after { content: " ↗"; color: var(--grey); font-weight: 400; }

/* ---- the kuhli's card: a slow, soft wave along its body (10/23 calm pass: slower and smaller) */
html.v4 #stock-list .epic img[src*="kuhli"] { animation-name: kwave; --fs: 3.2s; }
@keyframes kwave { from { transform: skewY(2.5deg) rotate(-.8deg); } to { transform: skewY(-2.5deg) rotate(.8deg); } }

/* ---- the tech rows (10/23 calm pass): ONE bar, plants (green, from the left) against algae, the edge moving row by row */
.mo-st { padding: .9rem 0 1.1rem; background: var(--bg); }
.st-lab { display: flex; justify-content: space-between; margin-bottom: .6rem; font: 600 clamp(1.25rem, 4.6vw, 1.6rem)/1 var(--display, var(--sans, system-ui)); letter-spacing: -.03em; }
.st-a { color: #2f9e64; } .st-b { color: #8f9a3c; }
.st-bar { position: relative; height: 18px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, #9AA548 55%, var(--bg)); }
.st-fill { position: absolute; inset: 0; border-radius: inherit; background: #4CC38A; transform-origin: 0 50%; transform: scaleX(.5); }
.st-rule { display: flex; align-items: center; gap: .9rem; margin-top: 1rem; }
.st-num { font: 600 .72rem/1 var(--sc-mono, system-ui); letter-spacing: .14em; color: var(--chum-text, #248FD3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.st-ticks { flex: 1; display: flex; gap: 6px; }
.st-ticks > i { flex: 1; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--grey) 30%, transparent); transition: background .6s; }
.st-ticks > i.on { background: var(--chum-text, #248FD3); }
html.mo .mo-stpin .mo-flow ol.sc-rows { margin: 0; }
@media (min-width: 64rem) { .mo-st { padding: 0; } }
/* the salt scale rides the scroll (sgScene): the CSS slide is off, the needle and number move by transform */
html.mo .sc-fig.mo-sg .sg-needle, html.mo .sc-fig.mo-sg .sg-now { left: 0 !important; transition: none !important; }

/* ---- the water drop (10/23 calm pass): it falls, lands, the rings spread; all tied to the scroll */
.mo-drop { width: min(100%, 30rem); margin: 0 auto; aspect-ratio: 2 / 1; pointer-events: none; }
.mo-drop.in-head { margin-top: 1.25rem; }
.mo-drop svg { display: block; width: 100%; height: 100%; overflow: visible; }
.md-drop { fill: #248FD3; }
.md-jet { fill: #248FD3; opacity: 0; }
.md-rings ellipse { fill: none; stroke: #248FD3; stroke-width: 1.4; opacity: 0; }
html.mo-still .mo-drop { display: none; }

/* ---- turning as they pass (10/23 calm pass): the chapter numerals spin round, the tank pictures and plant photos turn */
html.mo .ch-head::after, html.mo .sc-head::after { transform: perspective(900px) rotateY(var(--ry, 0deg)); }
html.mo .tk5-img, html.mo .sc-stat, html.mo .pl-turn { transform-origin: 50% 50%; backface-visibility: hidden; }
/* the temperature story's two lines pass under the meter */
html.mo .mo-tqpin .mo-flow .mo-tale { margin: 0; }
html.mo .mo-tqpin .mo-flow .mo-tale > p { min-height: 24svh; padding-top: 6svh; text-align: center; }
html.mo .mo-tqpin .mo-flow .mo-tale > p:first-child { font-size: clamp(1.5rem, 5.5vw, 2.25rem); }
@media (min-width: 64rem) { html.mo .mo-tqpin .mo-flow .mo-tale > p { min-height: 38vh; padding-top: 12vh; text-align: left; } }
/* the rows passing beside the pinned bar: one narrow column at any width */
html.mo .mo-flow .sc-rows > li { grid-template-columns: 3rem minmax(0, 1fr); }
html.mo .mo-flow .sc-rows > li::before { grid-row: span 2; }
html.mo .mo-flow .sc-rows p { margin: .35rem 0 0; }
/* turning and swinging things stay inside the page's width */
html.mo .cy-host, html.mo #hardware, html.mo .pl-grid { overflow-x: clip; }
html.mo .mo-flow > ol.sc-rows > li { align-content: center; }

/* ---- 10/23 pacing (his words: "it should take longer to see these things"): each passing line gets most of a screen */
/* pass 6 (his words: "10 minutes to scroll"): shorter passes */
html.mo .mo-flow > ol > li, html.mo .mo-flow > .mo-it { min-height: 34svh; }
html.mo .mo-tqpin .mo-flow .mo-tale > p { min-height: 30svh; }
@media (min-width: 64rem) { html.mo .mo-flow > ol > li { min-height: 42vh; } html.mo .mo-tqpin .mo-flow .mo-tale > p { min-height: 40vh; } }

/* ---- scenes with a picture that stays (fullscene.js; pass 6, 10/23, his words: "elements stay" means the OBJECT stays
   while things around it change, not the whole section pinned). The picture sticks under the bar; the words are plain
   text scrolling past it (beside it on a computer, under it on a phone); the one being read is full strength. */
html.mo .fs-pin { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0 16px; }
html.mo .fs-pin > .fs-art { display: grid; place-items: center; padding: 1svh 0 .5rem; }
.fs-art > * { width: min(100%, 64rem); margin: 0 !important; }
html.mo .fs-flow { padding: 2svh 0 8svh; }
html.mo .fs-steps { list-style: none; margin: 0 !important; padding: 0 !important; display: block !important; counter-reset: none; }
html.mo .fs-steps > li { display: block !important; min-height: 34svh !important; padding: 3svh 0 0 !important; margin: 0 !important; border: 0 !important; background: none !important;
  white-space: normal !important; opacity: .32; transition: opacity .45s; }
html.mo .fs-steps > li::before { display: none !important; content: none !important; }
html.mo .fs-steps > li.on { opacity: 1; }
html.mo .fs-steps > li b, html.mo .fs-steps > li h3 { display: block; font: 600 clamp(1.4rem, 5.6vw, 2.25rem)/1.1 var(--display, var(--sans, system-ui)); letter-spacing: -.03em; color: var(--strong); margin: 0 0 .45rem; }
html.mo .fs-steps > li p, html.mo .fs-steps > li span { display: block; color: var(--grey); font-size: clamp(1rem, 3.6vw, 1.15rem); line-height: 1.45; margin: 0; max-width: 34rem; }
@media (max-width: 63.99rem) {
  html.mo .fs-pin > .fs-art { max-height: 50svh; }
  html.mo .fs-pin > .fs-art > * { max-height: calc(50svh - 1.5rem); }
}
@media (min-width: 64rem) {
  html.mo .fs-pin { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 5rem); padding: 0 clamp(2rem, 5vw, 6rem); align-items: start; }
  html.mo .fs-pin > .fs-art { top: calc(var(--barh, 56px) + var(--striph, 0px)); height: calc(100vh - var(--barh, 56px) - var(--striph, 0px)); padding: 4vh 0; }
  html.mo .fs-pin > .fs-art > * { max-height: 100%; }
  html.mo .fs-flow { padding: 30vh 0 30vh; }
  html.mo .fs-steps > li { min-height: 42vh !important; padding: 0 !important; }
}
/* the waste story: the swimming picture */
.fs-waste .fs-art > #eco-drawn { display: grid; place-items: center; }
.fs-waste #eco-drawn figure { width: min(100%, calc((50svh - 2rem) * 1.6)); margin: 0; }
@media (min-width: 64rem) { .fs-waste #eco-drawn figure { width: min(100%, calc((100vh - 12rem) * 1.6)); } }
#eco-drawn .eco-loop, #eco-drawn .el-say { display: none !important; }
/* high tech / low tech: the drawn tank */
.tk-fig { display: grid; place-items: center; }
.tk-art { display: block; width: 100%; height: auto; max-height: calc(50svh - 1.5rem); overflow: visible; }
@media (min-width: 64rem) { .tk-art { max-height: 80vh; } }
html.mo-still .tk-fig, html.flat .tk-fig { display: none; }
.tk-lamp { fill: #2a2d31; stroke: #44484e; }
.tk-water { fill: color-mix(in srgb, #248FD3 9%, var(--bg)); stroke: color-mix(in srgb, #9fd3ee 45%, transparent); stroke-width: 1.5; }
.tk-soil { fill: #3a2c22; }
.tk-st { fill: none; stroke: #3f8a3a; stroke-width: 3; stroke-linecap: round; }
.tk-stem ellipse { fill: #4cae4f; }
.tk-stem.tk-c1 ellipse { fill: #6cc35a; } .tk-stem.tk-c2 ellipse { fill: #3d9a52; }
.tk-carpet ellipse { fill: #7cc95a; }
.tk-algae circle { fill: #8f9a3c; }
.tk-cyl { fill: #c9ced4; stroke: #8a9096; }
.tk-cyltxt { font: 700 9px var(--sans, system-ui); fill: #4a5056; text-anchor: middle; letter-spacing: .08em; }
.tk-line { fill: none; stroke: #8a9096; stroke-width: 1.5; }
.tk-gas { fill: none; stroke: #9fd8f5; stroke-width: 2.4; stroke-dasharray: 3 9; stroke-linecap: round; }
.tk-diff { fill: #d9eef8; stroke: #8a9096; }
.tk-bub circle { fill: rgb(207 234 247 / 25%); stroke: #cfeaf7; stroke-width: .8; }
.tk-gtrack { fill: color-mix(in srgb, var(--grey) 22%, transparent); }
.tk-gband { fill: none; stroke: #4CC38A; stroke-width: 1.5; }
.tk-gfill { fill: #248FD3; transition: fill .3s; }
.tk-gauge.in .tk-gfill { fill: #4CC38A; }
.tk-gl { font: 600 9px var(--sans, system-ui); fill: var(--grey); text-anchor: end; }
.tk-gu { text-anchor: middle; }
.tk-gtxt { font: 700 11px var(--sans, system-ui); fill: #248FD3; }
.tk-gauge.in .tk-gtxt { fill: #4CC38A; }
.tk-food path { fill: #f0b75e; }
.tk-stem, .tk-carpet, .tk-pad { transform-box: view-box; }
.tk-trunk { fill: none; stroke: #7a3d24; stroke-width: 9; stroke-linecap: round; }
.tk-br { fill: none; stroke: #8a4528; stroke-width: 5; stroke-linecap: round; }
.tk-root { fill: none; stroke: #6d3520; stroke-width: 4; stroke-linecap: round; }
.tk-pad .tk-m0 { fill: #3f7a2c; } .tk-pad .tk-m1 { fill: #5b9a3a; } .tk-pad .tk-m2 { fill: #77b14a; }
.tk-mc .tk-l0 { fill: #6cc24a; } .tk-mc .tk-l1 { fill: #8bd65e; } .tk-mc .tk-l2 { fill: #57a83c; }
.tk-mc circle { opacity: 0; }

/* ---- the pixel clock at the top of the menu card (pixclock.js, 10/23) */
.mnu-clock { margin: .25rem 1rem .9rem; }
.mnu-clock canvas { display: block; box-sizing: border-box; width: 100%; height: auto; aspect-ratio: 4 / 1; padding: 3.2%; border-radius: 10px; background: #0a0b0d; }

/* ---- the plain view, ?all (flat.js, 10/23): the same page at once, nothing moves */
html.flat *, html.flat *::before, html.flat *::after { animation: none !important; transition: none !important; }
html.flat .mo-drop { display: none; }

/* ---- the 75P from above (10/23, his ask: overhead views; the scape list is numbered to match) */
.topview { margin: 1.5rem auto 2rem; width: min(100%, 34rem); }
.topview svg { display: block; width: 100%; height: auto; }
.topview figcaption { margin-top: .6rem; text-align: center; color: var(--grey); font-size: .875rem; }
.tv-glass { fill: none; stroke: color-mix(in srgb, #9fd3ee 55%, transparent); stroke-width: 2; }
.tv-soil { fill: #2c2119; }
.tv-carpet ellipse { fill: #5d9e35; opacity: .85; }
.tv-stone path { fill: #8d959d; stroke: #5d646b; stroke-width: 1; }
.tv-wood path { fill: none; stroke: #8a3f27; stroke-width: 5; stroke-linecap: round; }
.tv-crown { fill: #47672a; opacity: .92; } .tv-c2 { fill: #62843a; } .tv-small { fill: #62843a; }
.tv-front { font: 600 8px var(--sans, system-ui); fill: var(--grey); text-anchor: middle; letter-spacing: .12em; text-transform: uppercase; }
.tv-k circle { fill: #248FD3; stroke: var(--bg, #000); stroke-width: 2; }
.tv-k text { font: 700 10px var(--sans, system-ui); fill: #fff; text-anchor: middle; }
.scape-n { counter-reset: tv; }
.scape-n > li { counter-increment: tv; }
.scape-n > li > b::before { content: counter(tv); display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; margin-right: .45rem; border-radius: 50%; background: #248FD3; color: #fff; font-size: .75rem; font-weight: 700; vertical-align: .1em; }
/* the heater fills red like a thermometer as the number climbs (10/23) */
.tq-rodfill { background: linear-gradient(0deg, #d7261b, #ff5a3c) !important; opacity: .92 !important; mix-blend-mode: normal !important; box-shadow: 0 0 12px rgb(255 60 40 / 45%); }
.tq-rod::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 0; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ff6a4d, #c41d14); box-shadow: 0 0 14px rgb(255 60 40 / 50%); }
/* the water drop on Water (05): a quiet backdrop behind the chapter's opening (10/23, his ask) */
html.mo #c-water > .ch-head { position: relative; isolation: isolate; }
html.mo .mo-drop.in-head { position: absolute; z-index: -1; left: 50%; top: 50%; translate: -50% -42%; width: min(100vw, 52rem); margin: 0; opacity: .6; }

/* ===== 10/23 pass 4 ===== */
/* the wheel owns the screen: bigger, the waste flowing round to the stage being read */
.fs-cycle .fs-art > .cy-host { display: grid; place-items: center; width: 100%; height: 100%; }
.fs-cycle .cy { width: min(100%, 34rem, calc(50svh - 2.5rem)); margin: 0; }
@media (min-width: 64rem) { .fs-cycle .cy { width: min(100%, 40rem, 72vh); } }
.cy-flow { position: absolute; inset: 0; pointer-events: none; }
.cy-flow i { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--cur); box-shadow: 0 0 10px var(--cur); opacity: 0; }
.fs-cycle .cy-in { width: 5.2rem; height: 5.2rem; } .fs-cycle .cy-in b { font-size: 1.05rem; }
@media (min-width: 64rem) { .fs-cycle .cy-in { width: 8rem; height: 8rem; } }
.fs-cycle .fs-list > li b::before { content: ""; display: inline-block; width: .7rem; height: .7rem; margin-right: .6rem; border-radius: 50%; background: var(--c); vertical-align: .2em; }
/* the stocking plan: the tank fills as the steps come up */
.fs-stock .fs-art > .fs-stockart { display: grid; place-items: center; height: 100%; width: 100%; }
.fs-stock .fs-stockart figure { width: min(100%, calc((50svh - 2rem) * 1.6)); margin: 0; }
@media (min-width: 64rem) { .fs-stock .fs-stockart figure { width: min(100%, calc((100vh - 12rem) * 1.6)); } }
/* the care week: a day passes per screen; the day's jobs light up */
.fs-care .fs-art > #care-list { width: min(100%, 46rem); }
.wk-play .wk7-d, .wk-play .wk7-c { transition: opacity .4s, transform .5s cubic-bezier(.16, 1, .3, 1), background-color .4s; }
html.mo .wk-play .wk7-c:not(.hit) { opacity: .25; }
html.mo .wk-play .wk7-c.now.on { transform: scale(1.25); }
html.mo .wk-play .wk7-d.now { background: #248FD3; color: #fff; border-radius: 99px; }
html.mo .wk-play .wk7-band { transform-origin: 0 50%; transform: scaleX(var(--wk, 0)); transition: none; }
/* the scape from above: one piece lit at a time, its number marked */
.fs-scape .fs-art > .topview { width: min(100%, 52rem, calc((50svh - 3rem) * 1.55)); }
@media (min-width: 64rem) { .fs-scape .fs-art > .topview { width: min(100%, 52rem, calc((100vh - 14rem) * 1.55)); } }
.tv-play .tv-k { opacity: .35; transition: opacity .4s; } .tv-play .tv-k.on { opacity: 1; } .tv-play .tv-k.past { opacity: .6; }
.tv-play .tv-k.on circle { r: 12; }
.tv-play .tv-lit { filter: drop-shadow(0 0 6px #248FD3) brightness(1.25); }
.tv-play .tv-soil.tv-lit { filter: brightness(1.6); }
.fs-scape .fs-list .sc-pic { width: 6rem; height: 6rem; margin-bottom: .75rem; }
.fs-scape .fs-list .sc-pic img { width: 100%; height: 100%; object-fit: contain; transform: none !important; }
/* watch it grow: the days play as a time-lapse on the scroll */
.gl-frame { position: relative; width: min(100%, 26rem); aspect-ratio: 1361 / 2178; max-height: 100%; border-radius: 18px; overflow: hidden; background: #000; margin: 0 auto; }
.fs-grow .gl-frame { height: 100%; width: auto; }
.gl-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.gl-frame img:first-child { opacity: 1; }
.gl-day { position: absolute; left: 1rem; top: 1rem; padding: .3rem .7rem; border-radius: 99px; background: rgb(0 0 0 / 60%); color: #fff; font-weight: 600; font-size: .9rem; font-variant-numeric: tabular-nums; }
.gl-bar { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; height: 4px; border-radius: 2px; background: rgb(255 255 255 / 25%); overflow: hidden; }
.gl-bar i { position: absolute; inset: 0; background: #248FD3; transform-origin: 0 50%; transform: scaleX(0); }
html.mo-still .gl-frame, html.flat .gl-frame { display: none; }
/* the betta that follows the pointer (computer only) */
.chase-betta { position: fixed; left: 0; top: 0; z-index: 40; width: 74px; height: auto; pointer-events: none; will-change: transform; filter: drop-shadow(0 4px 8px rgb(0 0 0 / 35%)); }
/* the next tank: the last screen zooms into it */
.nx-wrap { min-height: 100svh; display: grid; place-items: center; padding: 10svh 16px; }
.nx-tank { display: grid; justify-items: center; gap: 1.25rem; width: min(100%, 40rem); text-decoration: none; color: inherit; }
.nx-pic { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 28px; background: #000; transform-origin: 50% 60%; }
.nx-pic img { width: 100%; height: 100%; object-fit: cover; }
.nx-t { display: grid; justify-items: center; gap: .3rem; text-align: center; }
.nx-t small { color: var(--chum-text, #248FD3); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .75rem; }
.nx-t b { font: 600 clamp(1.8rem, 6vw, 3rem)/1.05 var(--display, var(--sans, system-ui)); letter-spacing: -.035em; color: var(--strong); }
.nx-t > span { color: var(--grey); }
html.mo-still .nx-pic { transform: none !important; }
/* the gear sits level with its words (10/23, his ask: it "should sit higher") */
#hardware .duo-row { align-items: center; }
/* on a computer, a section owns the screen: nothing of the next one shows below it */
/* pass 6: sections no longer stretch to a full screen each on a computer (the scroll was far too long) */
@media (min-width: 64rem) { .fs-care .fs-art > #care-list { zoom: 1.45; } }
@media (min-width: 120rem) { .fs-care .fs-art > #care-list { zoom: 1.8; } }