/* p8.css (fishtank.cam pass 8, 2026-10-24). Loaded last on the public pages. README section 66.
   His words: "the site is so weirdly left aligned"; "this looked so much more elegant before". One centred column, the
   real tank pictures, the swap that turns the tank, the walk through the setup. */
html.p8 { --p8-max: 1180px; }

/* ---- one centred column on a computer: the held pictures and their words sit together in the middle */
@media (min-width: 64rem) {
  html.p8.mo .fs-pin { width: min(var(--p8-max), calc(100vw - 4rem)); margin-left: calc(50% - min(calc(var(--p8-max) / 2), calc(50vw - 2rem))) !important; margin-right: 0 !important;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) !important; gap: clamp(2rem, 4vw, 4.5rem) !important; padding: 0 !important; }
  html.p8.mo .fs-pin > .fs-art { justify-items: center; }
  html.p8.mo .fs-steps > li { max-width: 30rem; }
  html.p8 main section.chapter { padding-left: clamp(24px, 4vw, 64px) !important; padding-right: clamp(24px, 4vw, 64px) !important; }
  html.p8 main section.chapter > *, html.p8 main section.band > .wrap { max-width: var(--p8-max); margin-left: auto !important; margin-right: auto !important; }
  html.p8 .p7-tiles { max-width: var(--p8-max); margin-left: auto; margin-right: auto; }
  html.p8 .bw-stage { max-width: calc(var(--p8-max) + 10vw); margin: 0 auto; }
}

/* ---- the five tanks: one picture box each, the real tanks fitted in it */
html.p8 .p7-tile-art { display: grid; place-items: center; aspect-ratio: 4 / 3; }
html.p8 .p7-tile-art svg { width: 100%; height: 100%; }
.p8-real image { image-rendering: auto; }

/* ---- the swap: this tank turns away, the next one turns in */
.p8-veil { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .32s ease; }
.p8-veil.on { opacity: 1; pointer-events: auto; }
.p8-stage { position: relative; width: min(78vw, 820px); height: min(62svh, 600px); perspective: 1600px; }
.p8-tk { position: absolute; inset: 0; display: grid; place-items: center; transform-style: preserve-3d; backface-visibility: hidden; }
.p8-tk svg { width: 100%; height: 100%; display: block; }
/* pass 8b (his words: the turns for the other tanks are "a JOKE"): a calm cross-fade with a slow scale, the same on all
   five pages; nothing turns edge-on, nothing pokes out */
.p8-cur { opacity: 0; transform: scale(.985); transition: opacity .35s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.p8-veil.on .p8-cur { opacity: 1; transform: none; }
.p8-next { opacity: 0; transform: scale(1.04); }
.p8-veil.turn .p8-cur { transition: transform .7s cubic-bezier(.4, 0, .2, 1), opacity .55s ease; transform: scale(.94); opacity: 0; }
.p8-veil.turn .p8-next { transition: transform .9s cubic-bezier(.16, 1, .3, 1) .25s, opacity .6s ease .25s; transform: none; opacity: 1; }
.p8-tk svg { filter: drop-shadow(0 20px 40px rgb(0 0 0 / 35%)); }
.p8-swapname { position: absolute; left: 0; right: 0; bottom: 12svh; margin: 0; text-align: center; font: 600 .8125rem/1 var(--ft-sans, system-ui); letter-spacing: .16em; text-transform: uppercase;
  color: var(--grey, #8e8e93); opacity: 0; transform: translateY(6px); transition: opacity .5s ease .5s, transform .6s cubic-bezier(.16, 1, .3, 1) .5s; }
.p8-veil.turn .p8-swapname { opacity: 1; transform: none; }

/* ---- the type of tank */
.p8-type { margin: .6rem 0 0; font: 600 .78rem/1.3 var(--sc-mono, ui-monospace, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--grey, #8e8e93); }
.p8-type b { color: #248FD3; margin-right: .5rem; font-weight: 700; }
#intro .p8-type { text-align: center; }
.bw-hero .p8-type { text-align: left; }

/* ---- why it is low tech */
.p8-diff { max-width: 52rem; margin: clamp(2.5rem, 6vw, 4.5rem) auto 0; padding: 0 16px; }
.p8-diff .p8-kicker { margin: 0; text-align: center; }
.p8-diff h2 { margin: .4rem 0 1.4rem; text-align: center; font: 800 clamp(1.5rem, 4.4vw, 2.4rem)/1.02 var(--p7-display, Sora, system-ui, sans-serif); text-transform: uppercase; letter-spacing: -.03em; color: var(--strong, #fff); }
.p8-diff-grid { display: grid; gap: .5rem; }
.p8-diff-row { display: grid; grid-template-columns: 7.5rem 1fr 1fr; gap: 1rem; align-items: start; padding: .85rem 1rem; border-radius: 14px; background: color-mix(in srgb, var(--strong, #fff) 4%, transparent); }
.p8-diff-row b { color: var(--strong, #fff); font-weight: 700; }
.p8-diff-row span { color: var(--grey, #8e8e93); line-height: 1.4; }
.p8-diff-row .p8-this { color: var(--strong, #fff); }
.p8-diff-head { background: none; padding-top: 0; padding-bottom: 0; }
.p8-diff-head span { font: 600 .72rem/1 var(--sc-mono, ui-monospace, monospace); letter-spacing: .12em; text-transform: uppercase; }
.p8-diff-head span:last-child { color: #248FD3; }
@media (max-width: 40rem) { .p8-diff-row { grid-template-columns: 1fr 1fr; gap: .35rem .9rem; } .p8-diff-row b { grid-column: 1 / -1; } .p8-diff-head span:first-child { display: none; } }
.p8-kicker { font: 600 .72rem/1.2 var(--sc-mono, ui-monospace, monospace); letter-spacing: .14em; text-transform: uppercase; color: #248FD3; }

/* ---- the turning bowl: its parts named beside it */
.p8-bl { position: absolute; top: 0; left: 100%; width: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.p8-bl li { position: absolute; left: 0; transform: translateY(-50%); white-space: nowrap; font: 600 .74rem/1 var(--sc-mono, ui-monospace, monospace); letter-spacing: .06em; color: var(--grey, #8e8e93);
  opacity: 0; transition: opacity .5s ease, color .3s; padding-left: .9rem; }
.p8-bl li::before { content: ""; position: absolute; left: 0; top: 50%; width: .45rem; height: .45rem; margin-top: -.225rem; border-radius: 50%; background: currentColor; }
.p8-bl li.on { opacity: 1; }
.p8-bl li.now { color: #248FD3; }
.p8-why { position: absolute; margin: 0; text-align: center; font-size: .8rem; line-height: 1.35; color: var(--grey, #8e8e93); }
@media (max-width: 63.99rem) { .p8-bl li { font-size: .62rem; max-width: 5.5rem; white-space: normal; line-height: 1.15; } }
html.p8 .bw-bowlbox { padding-right: clamp(5.5rem, 12vw, 12rem); }

/* ---- names on the CO2 / growth and scape pictures */
.p8-lbl { font: 600 9px/1 ui-monospace, "SF Mono", monospace; letter-spacing: .06em; fill: rgba(255, 255, 255, .78); paint-order: stroke; stroke: rgba(0, 0, 0, .55); stroke-width: 2px; }
html.light .p8-lbl, :root[data-theme="light"] .p8-lbl { fill: rgba(0, 0, 0, .7); stroke: rgba(255, 255, 255, .7); }

/* ---- Setup: the walk through */
.p8-walkwrap { margin-top: 1rem; }
.p8-walkfig { position: relative; margin: 0 auto; width: min(100%, 30rem, calc((100svh - var(--barh, 56px) - var(--striph, 0px) - 3rem) * .457)); }
@media (max-width: 63.99rem) { .p8-walkfig { width: min(100%, calc((50svh - 2rem) * .457)); } }
.p8-walkfig .p8-walkmk { width: 100%; }
.p8-walkfig.p8-walking .mk-p:not(.p8-hi), .p8-walkfig.p8-walking .mk-hot:not(.p8-hi) { opacity: .28; transition: opacity .35s ease; }
.p8-walkfig .p8-hi { opacity: 1 !important; filter: drop-shadow(0 0 10px rgb(36 143 211 / 85%)) drop-shadow(0 0 2px #248FD3); animation: p8flash 1.1s ease-out 1; }
.p8-walkfig .mk-hot.p8-hi { outline: 2px solid #248FD3; outline-offset: 2px; border-radius: 8px; background: rgb(36 143 211 / 14%); }
@keyframes p8flash { 0% { filter: drop-shadow(0 0 0 #248FD3) brightness(1.6); } 40% { filter: drop-shadow(0 0 16px #248FD3) brightness(1.25); } 100% { filter: drop-shadow(0 0 10px rgb(36 143 211 / 85%)) drop-shadow(0 0 2px #248FD3); } }
.p8-walkcard { position: absolute; right: calc(100% + .8rem); top: 8%; width: clamp(6.5rem, 22vw, 10rem); display: grid; justify-items: center; gap: .4rem; padding: .7rem; border-radius: 16px; background: color-mix(in srgb, var(--bg, #000) 80%, transparent);
  opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .35s ease, transform .5s cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
.p8-walkcard.on { opacity: 1; transform: none; }
.p8-walkcard img { width: 100%; max-height: 9rem; object-fit: contain; }
.p8-walkcard b { font-size: .72rem; text-align: center; color: var(--strong, #fff); line-height: 1.25; }
.p8-walk h3 { text-transform: none !important; }
.p8-walk .p8-kicker { margin: 0 0 .4rem; }

/* ---- the stocking: a big fish swims by */
.fs-stockart { position: relative; }
.p8-bigfish { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.p8-bigfish img { position: absolute; left: 0; width: min(44%, 420px); height: auto; opacity: 0; filter: drop-shadow(0 10px 24px rgb(0 0 0 / 45%));
  animation: p8swim 10s cubic-bezier(.45, .05, .55, .95) both; }
@keyframes p8swim { 0% { transform: translateX(-105%) translateY(0); opacity: 0; } 12% { opacity: 1; } 50% { transform: translateX(80%) translateY(-10px); } 88% { opacity: 1; } 100% { transform: translateX(240%) translateY(4px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .p8-bigfish { display: none; } }

/* no "All at once" anywhere */
.p7-all { display: none !important; }

/* the real tank under the dial */
.p8-dsreal { display: block; }
.p8-dsreal svg { display: block; width: 100%; height: auto; }

/* his photos of the bowl today */
.p8-today { max-width: 64rem; margin: clamp(2rem, 6vw, 4rem) auto; padding: 0 16px; }
.p8-today-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.p8-today-row.one { grid-template-columns: minmax(0, 26rem); justify-content: center; }
.p8-today-row img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 18px; display: block; }
.p8-today-cap { margin: .9rem 0 0; text-align: center; color: var(--grey, #8e8e93); font-size: .95rem; }
@media (max-width: 40rem) { .p8-today-row { grid-template-columns: 1fr 1fr; } .p8-today-row img:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 5; } }

/* the two betta cubes, his photo */
.p8-pairimg { display: block; width: 100%; height: auto; border-radius: 20px; }

/* the neo bowl plant cards: Buce Plant cut-outs, not drawings */
.pic-real { display: grid; place-items: end center; }
.pic-real img { max-width: 86%; max-height: 100%; object-fit: contain; }

/* the bowl pages' scene heads: centred like the tank pages (his words: "weirdly left aligned") */
html.p8 .scene > .sc-head { text-align: center; }
html.p8 .scene > .sc-head .sc-label { justify-content: center; }
html.p8 .scene > .sc-head .sc-h, html.p8 .scene > .sc-head .sc-lede { margin-left: auto; margin-right: auto; }
html.p8 .scene > .sc-head::after { right: auto; left: 50%; translate: -50% var(--py, 0px); }
html.p8 .scene > .sc-note, html.p8 .scene > .sc-lede { text-align: center; margin-left: auto; margin-right: auto; }
.p8-lbl-s { font-size: 5px; stroke-width: 1.2px; }

/* =====================================================================================================================
   Pass 8b (10/24, his words: "go back to the old styling ... but keep the ideas I had today"; "the aesthetic of the labels
   etc was so much better before"). The look of 82ad88c (10/23 ~1 am, before 6462244 / f305d13): SF Pro / Inter, sentence
   case, weight 600 heads at a restrained scale, quiet small-caps labels, no giant outlined numerals. The livestock stops
   keep their big type (his 10/23 ask). One set of tokens for all the public pages.
   ===================================================================================================================== */
:root {
  --ft-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif;
  --ft-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  --ft-head: clamp(1.375rem, 3.4vw, 2rem);       /* a section's line, as before */
  --ft-hero: clamp(2.75rem, 11.5vw, 6.75rem);    /* the page title */
  --ft-label: .6875rem;                          /* small caps captions */
}
html.p8 :is(.intro-title, .ch-head h2, .sc-h, .bw-hero h1, .bw-step h2, .tale > p:first-child, .fs-steps > li b, .fs-steps > li h3, .lv-head h1,
  .p8-diff h2, .intro-msgs p, .intro-sub, .p8-walk h3, .p7-display:not(.p7-sp *), .sc-h3) {
  font-family: var(--ft-display) !important; text-transform: none !important; word-spacing: normal !important; }
html.p8 .intro-title { font-weight: 700 !important; font-size: var(--ft-hero) !important; letter-spacing: -.055em !important; line-height: .98 !important; }
html.p8 .intro-sub { font-weight: 400 !important; letter-spacing: -.015em !important; }
html.p8 .tale > p:first-child, html.p8 .p8-diff h2 { font-weight: 600 !important; font-size: var(--ft-head) !important; line-height: 1.2 !important; letter-spacing: -.03em !important; }
html.p8 .fs-steps > li b, html.p8 .fs-steps > li h3 { font-weight: 600 !important; font-size: clamp(1.2rem, 2.4vw, 1.6rem) !important; line-height: 1.2 !important; letter-spacing: -.028em !important; }
html.p8 .sc-h { font-weight: 600 !important; font-size: clamp(1.75rem, 4.6vw, 2.75rem) !important; line-height: 1.1 !important; letter-spacing: -.04em !important; max-width: 20ch; }
html.p8 .sc-h3 { font-weight: 600 !important; font-size: clamp(1.3rem, 3vw, 1.75rem) !important; letter-spacing: -.03em !important; }
html.p8 .bw-hero h1 { font-weight: 700 !important; font-size: clamp(2.25rem, 7vw, 4.25rem) !important; line-height: 1 !important; letter-spacing: -.05em !important; }
html.p8 .bw-step h2 { font-weight: 600 !important; font-size: clamp(1.6rem, 4vw, 2.4rem) !important; line-height: 1.1 !important; letter-spacing: -.035em !important; }
html.p8 :is(.sc-h, .bw-step h2, .bw-hero h1, .tale p) em { font-style: normal; color: var(--chum-text, #248FD3); }
/* labels: quiet small caps, as before */
html.p8 :is(.p7-kicker, .p8-kicker, .sc-label, .bw-sn, .p8-type, .label, .lede > .head h2) {
  font-family: var(--ft-sans) !important; font-size: var(--ft-label) !important; font-weight: 600 !important; letter-spacing: .14em !important; text-transform: uppercase; }
html.p8 :is(.p7-kicker, .p8-kicker) { color: var(--grey, #8e8e93) !important; }
html.p8 .sc-label b, html.p8 .bw-sn b, html.p8 .p8-type b { font: inherit !important; color: var(--chum-text, #248FD3) !important; letter-spacing: inherit !important; }
html.p8 .ch-head::before { font-family: var(--ft-sans) !important; font-size: var(--ft-label) !important; letter-spacing: .14em !important; color: var(--grey, #8e8e93) !important; }
/* no giant outlined numerals behind the chapters */
html.p8 .ch-head::after, html.p8 .sc-head::after { display: none !important; }
html.p8.v4.sc .ch-head { padding-top: clamp(2.5rem, 8vh, 4.5rem) !important; padding-bottom: .5rem !important; }
/* the chapter bar: names first, the numbers quiet */
html.p8 .p7-n { color: var(--grey, #8e8e93) !important; font-weight: 500 !important; opacity: .7; }
/* the opening lines: one calm measure, balanced lines, no hyphen breaks */
html.p8 .intro-msgs p { font-weight: 600 !important; font-size: clamp(1.45rem, 3.6vw, 2.3rem) !important; line-height: 1.18 !important; letter-spacing: -.03em !important;
  max-width: 21ch !important; text-wrap: balance; hyphens: none; -webkit-hyphens: none; }
html.p8 .intro-msgs { top: calc(var(--barh, 56px) + clamp(2rem, 9vh, 5.5rem)) !important; }
/* no "+" to show more: everything shows */
html.p8 .tk-row { display: none !important; }
html.p8 details.apx-fold > summary, html.p8 details.p7-gearfold > summary { list-style: none; pointer-events: none; cursor: default; }
html.p8 details.apx-fold > summary::-webkit-details-marker, html.p8 details.p7-gearfold > summary::-webkit-details-marker { display: none; }
html.p8 details.apx-fold > summary::after, html.p8 details.p7-gearfold > summary::after, html.p8 details.apx-fold > summary::before { display: none !important; content: none !important; }
/* the water drop behind "Fish make waste": small and quiet on big screens */
html.mo .mo-drop.in-head { width: min(70vw, 22rem) !important; opacity: .45 !important; }
.mo-drop rect { display: none; }
.mo-drop { max-width: 22rem; }

/* ---- water tests: the cycle as one flow (ammonia, then nitrite, then nitrate), the water's four tests in a row */
html.p8 #vials .tw-grp { margin: 1.6rem 0 .7rem; text-align: center; font: 600 var(--ft-label)/1 var(--ft-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--grey, #8e8e93); }
html.p8 #vials .tw-grp:first-child { margin-top: 0; }
html.p8 #vials .tw-list.tw-cyc { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2rem; counter-reset: none; }
html.p8 #vials .tw-list.tw-min { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html.p8 #vials .tw-cyc > li { position: relative; }
html.p8 #vials .tw-cyc > li + li::before { content: ""; position: absolute; left: -1.75rem; top: 50%; width: 1.3rem; height: 1.3rem; margin-top: -.65rem;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23248FD3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
@media (max-width: 63.99rem) { html.p8 #vials .tw-list.tw-min { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 47.99rem) {
  html.p8 #vials .tw-list.tw-cyc { grid-template-columns: 1fr; gap: 2rem; }
  html.p8 #vials .tw-cyc > li + li::before { left: 50%; top: -1.65rem; margin: 0 0 0 -.65rem; transform: rotate(90deg); }
  html.p8 #vials .tw-list.tw-min { grid-template-columns: 1fr; }
}
html.p8 #vials .tw-plain .tw-track { background: linear-gradient(90deg, color-mix(in srgb, #248FD3 18%, transparent), color-mix(in srgb, #248FD3 55%, transparent)); }
html.p8 #vials .tw-sc { display: flex; justify-content: space-between; }
html.p8 #vials .tw-sc span { position: static !important; transform: none !important; }

/* ---- the tank switcher: small real pictures and short names, the camera tank with a red dot */
html.p8 nav.p8-sw { gap: 2px !important; }
html.p8 nav.p8-sw a.p8-tk { position: relative; display: inline-flex !important; align-items: center; gap: .4rem; width: auto !important; height: 30px !important; padding: 0 .65rem 0 3px !important;
  border-radius: 999px !important; background: none !important; box-shadow: none !important; color: var(--grey, #8e8e93) !important; font: 500 .75rem/1 var(--ft-sans) !important; letter-spacing: -.005em; text-decoration: none; white-space: nowrap; }
html.p8 nav.p8-sw a.p8-tk::after { content: none !important; }
html.p8 nav.p8-sw a.p8-tk:hover { color: var(--strong, #fff) !important; background: color-mix(in srgb, var(--grey, #8e8e93) 14%, transparent) !important; }
html.p8 nav.p8-sw a.p8-tk[aria-current] { color: var(--strong, #fff) !important; background: color-mix(in srgb, #248FD3 22%, transparent) !important; }
.p8-th { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; flex: none; background: #0d1114; display: grid; place-items: center; }
.p8-th img { width: 100%; height: 100%; object-fit: cover; }
.p8-live { position: absolute; left: 20px; top: 2px; width: 7px; height: 7px; border-radius: 50%; background: #E5484D; box-shadow: 0 0 0 2px var(--bg, #000); }
@media (max-width: 79.99rem) { html.p8 header nav.p8-sw .p8-tn { display: none; } html.p8 header nav.p8-sw a.p8-tk { padding: 0 3px !important; } }
html.p8 nav.p8-sw.p6-tk-m { max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--bg, #000) 70%, transparent); }
html.p8 nav.p8-sw.p6-tk-m .p8-tn { display: inline; }

/* ---- the menu: Care & setup, Status and Admin first */
.p8-mtop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 1.1rem; }
.p8-mtop a { display: grid; place-items: center; min-height: 44px; border-radius: 14px; text-decoration: none; font: 600 .9rem/1 var(--ft-sans); color: var(--strong, #fff);
  background: color-mix(in srgb, var(--grey, #8e8e93) 14%, transparent); }
.p8-mtop a[aria-current] { background: #248FD3; color: #fff; }

/* ---- Care & setup: one place, a switch between the halves; no Print */
.p8-cs { display: inline-flex; gap: 4px; margin: 1rem auto 0; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--grey, #8e8e93) 14%, transparent); }
.p8-cs a { padding: .55rem 1.1rem; border-radius: 999px; text-decoration: none; font: 600 .875rem/1 var(--ft-sans); color: var(--grey, #8e8e93); }
.p8-cs a[aria-current] { background: var(--strong, #fff); color: var(--bg, #000); }
header.hero:has(.p8-cs) { display: flex; flex-direction: column; align-items: center; }
.foot .print, button.print { display: none !important; }
/* the remaining heavy upper-case pieces go back to the old look (the livestock stops keep theirs) */
html.p8 :is(.p7-tile-t b, .p7-pair-a b, #vials .tw-top h3, .wherefish-x .wf-h, .wherefish-x .wf-h2) { font-family: var(--ft-display) !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: -.025em !important; }
html.p8 .wherefish-x .wf-h { font-size: var(--ft-head) !important; line-height: 1.2 !important; }
html.p8 .wherefish-x .wf-h2 { font-size: clamp(1.05rem, 2.2vw, 1.3rem) !important; font-weight: 500 !important; color: var(--grey, #8e8e93) !important; }
html.p8 .p7-tile-t b { font-size: clamp(.95rem, 1.2vw, 1.05rem) !important; }
html.p8 .intro-msgs p { max-width: 24ch !important; }
@media (min-width: 0) { html.p8 #vials { display: block !important; max-width: 64rem !important; margin-left: auto !important; margin-right: auto !important; } }
html.p8 #vials .tw-n { font-family: var(--ft-display) !important; font-weight: 600 !important; font-size: 1.75rem !important; }

/* ---- round 3: the opening reads clearly */
html.p8 .intro-msgs p { text-shadow: 0 2px 28px rgb(0 0 0 / 85%), 0 0 2px rgb(0 0 0 / 60%); }
html.p8 .p8-type { font-size: .8125rem !important; letter-spacing: .1em !important; color: var(--grey, #9a9aa0) !important; margin-top: .9rem; }
html.p8 #intro .intro-words { z-index: 4; }

/* ---- round 3: the two bowl pages open like the tank pages: logo, centred title, type line, the picture below, the cue */
html.p8 .bw-stage { grid-template-columns: 1fr !important; grid-template-rows: auto minmax(0, 1fr) !important; justify-items: center; align-items: start !important; gap: clamp(.5rem, 2vh, 1.25rem) !important;
  padding-top: calc(var(--barh, 56px) + clamp(1.5rem, 6vh, 4rem)) !important; text-align: center; }
html.p8 .bw-text { order: -1; width: min(100%, 60rem); min-height: clamp(12rem, 30svh, 17rem) !important; }
html.p8 .bw-hero, html.p8 .bw-step { left: 0; right: 0; text-align: center; }
html.p8 .bw-hero h1 { font-size: clamp(2.5rem, 8vw, 5.5rem) !important; line-height: .98 !important; letter-spacing: -.055em !important; max-width: 14ch; margin-left: auto; margin-right: auto; text-wrap: balance; }
html.p8 .bw-hero h1 em, html.p8 .bw-step h2 em { color: inherit !important; }
html.p8 .bw-hero p, html.p8 .bw-step p { margin-left: auto; margin-right: auto; }
html.p8 .bw-hero .sc-label, html.p8 .bw-sn { justify-content: center; }
html.p8 .bw-hero .p8-type { text-align: center; }
html.p8 .bw-bowlbox { order: 2; width: 100%; height: 100%; min-height: 0; padding-right: 0 !important; }
html.p8 .bw-bowlbox .bw-bowl { height: 100%; display: grid; place-items: center; }
html.p8 .bw-bowlbox .bowl-svg { max-height: min(52svh, 100%); width: auto; max-width: min(92vw, 34rem); }
html.p8 .bw-cue { left: 0; right: 0 !important; text-align: center; bottom: -.4rem; }
html.p8 .bw-meter { left: 50% !important; right: auto !important; translate: -50% 0; width: min(18rem, 70vw); }
.p8-logo { display: block; width: clamp(3.25rem, 10vw, 4.5rem); height: auto; margin: 0 auto clamp(.7rem, 2vh, 1.1rem); filter: drop-shadow(0 8px 24px rgb(36 143 211 / 35%)); }
html.p8 .bw-text.past-hero .p8-logo { opacity: 0; }