/* THE NAVIGATION LOOKS (his, 29 Oct 2026) — a face for the visitor's buttons, scoped by <body data-nui="…"> (app/nui-looks.js). Read from SACRED HEART VISUALS/css/looks.css: a look is a few variables
   (the fonts, the ink, the accent, the spacing) and the same dressing for every look; the Home button shows the look's mark instead of the word. Nothing here changes what a button does. */
body[data-nui="heritage"], body[data-nui="sacred-heart"] { --nui-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif; --nui-w: 400; --nui-ink: #fff; --nui-accent: #fff; --nui-ls: .34em; --nui-shadow: 0 1px 8px rgba(0, 0, 0, .6); --nui-rot: 0deg; }
body[data-nui="trash-cult"] { --nui-sans: 'Permanent Marker', 'Sedgwick Ave Display', cursive; --nui-w: 400; --nui-ink: #30f008; --nui-accent: #ff2fa0; --nui-ls: .06em; --nui-shadow: 2px 2px 0 #000, 0 0 8px rgba(0, 0, 0, .85); --nui-rot: -1.5deg; }
body[data-nui="magazine"] { --nui-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif; --nui-w: 300; --nui-ink: #fff; --nui-accent: #fff; --nui-ls: .34em; --nui-shadow: 0 1px 14px rgba(0, 0, 0, .55); --nui-rot: 0deg; }
/* DIGLER'S NUI (his sketch, 10 Nov: "no lines, it's just writing, with the scan underneath … a slight drop shadow"): Piermont's bottom row in Jost and white, and the mode menu's other modes left open
   as one row of words across the middle above it; the mode you are in stays bottom right */
body[data-nui="digler"] { --nui-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif; --nui-w: 300; --nui-ink: #fff; --nui-accent: #fff; --nui-ls: .42em; --nui-shadow: 0 1px 3px rgba(0, 0, 0, .55); --nui-rot: 0deg; }      /* check-ok: a visitor look's own colours, as every look in this file */
body[data-nui="digler-montserrat"] { --nui-sans: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --nui-w: 300; --nui-ink: #fff; --nui-accent: #fff; --nui-ls: .42em; --nui-shadow: 0 1px 3px rgba(0, 0, 0, .55); --nui-rot: 0deg; }      /* check-ok: a visitor look's own colours, as every look in this file */
body[data-nui^="digler"] .modeCorner { left: max(16px, env(safe-area-inset-left)); pointer-events: none !important; }
body[data-nui^="digler"] .modeCorner.pgModeCorner { left: 12px; }
body[data-nui^="digler"] .modeCorner .modeMenu { position: static; }
body[data-nui^="digler"] .modeCorner .modeMenu .mmList { left: 50%; right: auto; transform: translateX(-50%); bottom: calc(100% - 2px); flex-direction: row; align-items: flex-end; gap: calc(26px * var(--nv, 1)); pointer-events: none; }
body[data-nui^="digler"] .modeCorner .mmItem { opacity: 1; transform: none; min-width: 0 !important; padding: 8px 4px !important; font-weight: 400; letter-spacing: .3em; font-size: calc(clamp(11px, 1vw, 16px) * var(--nv, 1)) !important; text-shadow: var(--nui-shadow) !important; }
body[data-nui^="digler"] .pgModeCorner .mmItem { font-size: calc(clamp(10px, calc(var(--pvw, 100vw) * 0.01), 16px) * var(--nv, 1)) !important; }
body[data-nui^="digler"] .modeCorner .mmItem, body[data-nui^="digler"] .modeCorner .mmPill { pointer-events: auto !important; }
body[data-nui^="digler"] .modeCorner .mmPill, body[data-nui^="digler"] .tourNav .navPill, body[data-nui^="digler"] .tourNav .spPill { font-family: var(--nui-sans) !important; font-weight: var(--nui-w) !important; text-shadow: var(--nui-shadow) !important; }
body[data-nui^="digler"] .modeMenu .mmChev { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55)); }
body[data-nui="piermont"] { --nui-sans: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --nui-w: 300; --nui-ink: #fff; --nui-accent: #fff; --nui-ls: .42em; --nui-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 2px 10px rgba(0, 0, 0, .6); --nui-rot: 0deg; }

/* the buttons: no box, the look's words — the kit's landing "Tour" button (show.css .choice .word): the look's face, capitals, wide spacing, a hairline that grows on hover; the padding is an invisible slide so the hit box stays big (his: "no more pills or slides") */
body[data-nui] .navPill { text-transform: uppercase; font-size: clamp(14px, 1.5vw, 24px); color: rgba(255, 255, 255, .88); transition: color .3s, letter-spacing .3s; background: transparent; border: 0; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--nui-ink); font-family: var(--nui-sans); font-weight: var(--nui-w);
  letter-spacing: var(--nui-ls); text-shadow: var(--nui-shadow); transform: rotate(var(--nui-rot)); }
body[data-nui] .navPill:hover { background: transparent; color: #fff; letter-spacing: calc(var(--nui-ls) + .04em); }
body[data-nui] .tourNav .navPill, body[data-nui] .tourNav .modePill { min-width: 0; padding: 14px 18px 13px; }
body[data-nui] .navPill::before { border-bottom-color: var(--nui-accent); }
body[data-nui] .navPill:hover::before { border-color: transparent; border-bottom-color: var(--nui-accent); width: calc(100% + 2px); height: 0; }
body[data-nui] .navPill.on { border-color: transparent; background: transparent; color: var(--nui-accent); }
/* the Explore · Tour switch: its square takes the accent */
body[data-nui] .tourNav .modePill.sw::before { display: none; }
body[data-nui] .tourNav .modePill.sw[data-state=explore] [data-m=explore], body[data-nui] .tourNav .modePill.sw[data-state=tour] [data-m=tour] { border-bottom: 1px solid var(--nui-accent); padding-bottom: 4px; }
body[data-nui] .tourNav .modePill.sw[data-state=explore] [data-m=explore], body[data-nui] .tourNav .modePill.sw[data-state=tour] [data-m=tour] { color: var(--nui-accent); }
/* Home is the look's mark, not a word */
body[data-nui] [data-nui-mark] { display: grid; place-items: center; width: 58px; height: 58px; padding: 0; letter-spacing: 0; color: var(--nui-accent); }
body[data-nui] [data-nui-mark] svg, body[data-nui] [data-nui-mark] img { display: block; width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .6)); }
body[data-nui] [data-nui-mark]::before { display: none; }
/* the small icons and the loading line keep the look's ink */
body[data-nui] .teleIcon { color: var(--nui-ink); }
body[data-nui] .camReset svg { color: var(--nui-ink); }
body[data-nui] #loadingName { font-family: var(--nui-sans); font-weight: var(--nui-w); letter-spacing: var(--nui-ls); color: var(--nui-ink); text-shadow: var(--nui-shadow); }
body[data-nui] #loadingBar i { background: var(--nui-accent); }

/* ── THE SIGNATURE LOOKS (7 Nov 2026, his: "the nav user interface … navigation buttons, home buttons … settings icons, volume and mute") — read off two Higgsfield boards in the
   Library's own look. Signature: no boxes, Jost in wide-spaced capitals, a chevron on Previous and Next, the stop's name in italic serif between two hairlines, the round icons as thin
   circles, gold for what is on. Signature glass: the same, each in a pill of dark frosted glass. Arena: loud — bold capitals, Next a solid white pill, Back an outline one, magenta for what is on.
   The base (hotspots.css) dresses the bar with !important; these name the look on <body>, so they outrank it only while one of these looks is picked ── */
body[data-nui="signature"], body[data-nui="signature-glass"] { --nui-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif; --nui-w: 400; --nui-ink: #fff; --nui-accent: #ffffff; --nui-ls: .34em; --nui-shadow: 0 1px 10px rgba(0, 0, 0, .55); --nui-rot: 0deg; --nui-serif: 'Cormorant Garamond', 'Cormorant', Georgia, serif; }
body[data-nui="arena"] { --nui-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif; --nui-w: 600; --nui-ink: #fff; --nui-accent: #ff3d9a; --nui-ls: .14em; --nui-shadow: 0 2px 12px rgba(0, 0, 0, .6); --nui-rot: 0deg; --nui-serif: 'Jost', 'Helvetica Neue', Arial, sans-serif; }
/* the words of Previous · Info · Next and the mode menu: the look's face and spacing, a touch smaller than the program's own */
body[data-nui^="signature"] .tourNav .navPill, body[data-nui^="signature"] .tourNav .mmPill, body[data-nui^="signature"] .tourNav .mmItem, body[data-nui^="signature"] .modeCorner .mmPill, body[data-nui^="signature"] .modeCorner .mmItem,
body[data-nui="arena"] .tourNav .navPill, body[data-nui="arena"] .tourNav .mmPill, body[data-nui="arena"] .tourNav .mmItem, body[data-nui="arena"] .modeCorner .mmPill, body[data-nui="arena"] .modeCorner .mmItem {
  font-family: var(--nui-sans) !important; font-weight: var(--nui-w) !important; letter-spacing: var(--nui-ls) !important; text-transform: uppercase; text-shadow: var(--nui-shadow);
  font-size: calc(clamp(12px, 1.05vw, 17px) * var(--nv, 1)) !important; }
/* Previous and Next carry their chevron: a thin one drawn with two borders, the size of the words */
body[data-nui^="signature"] .tourNav #tourPrev::before, body[data-nui^="signature"] .tourNav [data-go=prev]::before, body[data-nui="arena"] .tourNav #tourPrev::before, body[data-nui="arena"] .tourNav [data-go=prev]::before {
  display: inline-block !important; content: ''; position: static; width: .5em; height: .5em; margin: 0 1em .12em 0; border: 0; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: none; vertical-align: middle; }
body[data-nui^="signature"] .tourNav #tourNext::after, body[data-nui^="signature"] .tourNav [data-go=next]::after, body[data-nui="arena"] .tourNav #tourNext::after, body[data-nui="arena"] .tourNav [data-go=next]::after {
  display: inline-block; content: ''; width: .5em; height: .5em; margin: 0 0 .12em .7em; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); vertical-align: middle; }
/* the stop's name: italic serif, bigger, not spaced — between two hairlines (Signature) */
body[data-nui^="signature"] .stopPill .spPill, body[data-nui^="signature"] .stopPill .spItem { font-family: var(--nui-serif) !important; font-style: italic; font-weight: 400 !important; text-transform: none !important; letter-spacing: .01em !important; font-size: calc(clamp(18px, 1.9vw, 30px) * var(--nv, 1)) !important; }
body[data-nui="signature"] .tourNav .stopPill { padding: 0 calc(26px * var(--nv, 1)); border-left: 1px solid rgba(255, 255, 255, .62); border-right: 1px solid rgba(255, 255, 255, .62); }
body[data-nui^="signature"] .stopPill .spItem.on { text-decoration-color: var(--nui-accent); }
/* what is on wears the accent: a short gold line under it */
body[data-nui^="signature"] .navPill.on, body[data-nui^="signature"] .mmItem.on { color: #fff !important; text-decoration: underline; text-decoration-color: var(--nui-accent); text-underline-offset: .55em; text-decoration-thickness: 1px; }
/* the round buttons (Reset camera, the music, Home): thin circles, the icon inside */
body[data-nui^="signature"] .camReset, body[data-nui^="signature"] [data-nui-mark] { width: 46px !important; height: 46px !important; border: 1px solid rgba(255, 255, 255, .6) !important; border-radius: 50% !important; background: rgba(10, 12, 15, .18) !important; color: #fff !important; }
body[data-nui^="signature"] .camReset svg, body[data-nui^="signature"] [data-nui-mark] svg { width: 22px !important; height: 22px !important; }
body[data-nui^="signature"] .camReset:hover, body[data-nui^="signature"] [data-nui-mark]:hover { border-color: var(--nui-accent) !important; color: var(--nui-accent) !important; }
/* Signature glass: every piece in a pill of dark frosted glass with a hairline edge */
body[data-nui="signature-glass"] .tourNav .navPill, body[data-nui="signature-glass"] .stopPill .spPill, body[data-nui="signature-glass"] .modeCorner .mmPill, body[data-nui="signature-glass"] .camReset, body[data-nui="signature-glass"] [data-nui-mark] {
  background: rgba(14, 17, 22, .42) !important; -webkit-backdrop-filter: blur(14px) saturate(1.2) !important; backdrop-filter: blur(14px) saturate(1.2) !important; border: 1px solid rgba(255, 255, 255, .24) !important; border-radius: 999px !important; }
body[data-nui="signature-glass"] .tourNav .navPill, body[data-nui="signature-glass"] .modeCorner .mmPill { padding: calc(13px * var(--nv, 1)) calc(24px * var(--nv, 1)) !important; }
body[data-nui="signature-glass"] .stopPill .spPill { padding: calc(8px * var(--nv, 1)) calc(30px * var(--nv, 1)) !important; }
/* Arena: Next a solid white pill, Back (Previous) an outline one, the stop's name bold and big, the round buttons with a firm edge */
body[data-nui="arena"] .tourNav #tourNext, body[data-nui="arena"] .tourNav [data-go=next] { background: #fff !important; color: #111 !important; border: 2px solid #fff !important; border-radius: 999px !important; text-shadow: none; padding: calc(12px * var(--nv, 1)) calc(26px * var(--nv, 1)) !important; }
body[data-nui="arena"] .tourNav #tourPrev, body[data-nui="arena"] .tourNav [data-go=prev] { border: 2px solid #fff !important; border-radius: 999px !important; padding: calc(12px * var(--nv, 1)) calc(26px * var(--nv, 1)) !important; }
body[data-nui="arena"] .stopPill .spPill, body[data-nui="arena"] .stopPill .spItem { font-family: var(--nui-sans) !important; font-weight: 700 !important; letter-spacing: .02em !important; font-size: calc(clamp(15px, 1.6vw, 26px) * var(--nv, 1)) !important; }
body[data-nui="arena"] .tourNav .stopPill { border-bottom: 3px solid var(--nui-accent); padding-bottom: 4px; }
body[data-nui="arena"] .navPill.on, body[data-nui="arena"] .mmItem.on { color: var(--nui-accent) !important; }
body[data-nui="arena"] .camReset, body[data-nui="arena"] [data-nui-mark] { width: 48px !important; height: 48px !important; border: 2px solid #fff !important; border-radius: 50% !important; background: rgba(0, 0, 0, .25) !important; color: #fff !important; }
body[data-nui="arena"] .camReset svg, body[data-nui="arena"] [data-nui-mark] svg { width: 22px !important; height: 22px !important; }
body[data-nui="arena"] .camReset:hover, body[data-nui="arena"] [data-nui-mark]:hover { background: var(--nui-accent) !important; border-color: var(--nui-accent) !important; }
/* the stop’s name is never cut short: the pill is as wide as the whole name (up to the bar’s own limit) — its slide-in box hides the overflow, so on its own it stayed at its smallest */
body[data-nui^="signature"] .stopPill .spPill, body[data-nui="arena"] .stopPill .spPill { width: max-content; }

/* GLASS BAR (9 Nov, his: "a nice, sexy glass slide … with displacement … instead of those pills"; "a website, not a virtual tour"): ONE slab of the slides' real glass along the
   bottom (app/callout.js glassOn, from app/nui-looks.js) — Prev, the place, Next on it in Jost's spaced capitals; nothing counts the visitor through a sequence. The little house in a glass circle */
body[data-nui="glass-bar"] { --nui-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif; --nui-w: 400; --nui-ink: #fff; --nui-accent: #9ab8b0; --nui-ls: .3em; --nui-shadow: 0 1px 8px rgba(0, 0, 0, .5); }      /* check-ok: a visitor look's own colours, as every look in this file (the editor's look is app/look.css) */
body[data-nui="glass-bar"] #tourNav { padding: 6px 10px; gap: 2px; border-radius: 18px; max-width: calc(100vw - 32px); background: transparent !important; border: none !important; }
body[data-nui="glass-bar"] #tourNav > .glassSurf { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; border-radius: 18px; }
body[data-nui="glass-bar"] #tourNav > *:not(.glassSurf):not(.glassDefs) { position: relative; z-index: 1; }
body[data-nui="glass-bar"] .tourNav .navPill, body[data-nui="glass-bar"] .stopPill .spPill { background: transparent !important; border: none !important; border-radius: 12px !important; box-shadow: none !important; min-width: 0 !important;
  padding: calc(11px * var(--nv, 1)) calc(18px * var(--nv, 1)) !important; font-family: var(--nui-sans); font-weight: var(--nui-w); letter-spacing: var(--nui-ls); text-transform: uppercase; font-size: calc(11px * var(--nv, 1)); color: var(--nui-ink); text-shadow: var(--nui-shadow); }
body[data-nui="glass-bar"] .tourNav .navPill::before { display: none; }
body[data-nui="glass-bar"] .tourNav .navPill:hover, body[data-nui="glass-bar"] .stopPill .spPill:hover { background: rgba(255, 255, 255, .1) !important; }
body[data-nui="glass-bar"] .tourNav .navPill.on { background: rgba(255, 255, 255, .16) !important; }
body[data-nui="glass-bar"] .modeCorner .mmPill, body[data-nui="glass-bar"] .camReset, body[data-nui="glass-bar"] [data-nui-mark] { background: rgba(14, 17, 22, .42) !important; -webkit-backdrop-filter: blur(14px) saturate(1.2) !important; backdrop-filter: blur(14px) saturate(1.2) !important; border: 1px solid rgba(255, 255, 255, .24) !important; border-radius: 999px !important; }
body[data-nui="glass-bar"] .modeCorner .mmPill:hover, body[data-nui="glass-bar"] .camReset:hover, body[data-nui="glass-bar"] [data-nui-mark]:hover { border-color: var(--nui-accent) !important; color: var(--nui-accent) !important; }

/* (9 Nov) the tablet's two rows (app/stop-pill.js .spUnit, .spSecs): only a look that turns the pages draws them — every other look lays the stop pill out as before, with no row of sections */
.stopPill .spUnit { display: contents; }
.stopPill .spSecs, .stopPill .spAddr { display: none; }

/* ── THE SPLATTERPORT PILL (10 Nov 2026, his "Splatterport: the pill and the house title — BUILD THIS": "The Glass tablet is now this two-pane pill"). Two joined panes of glass bottom centre, one font
   (Jost), all white, no outlines, no boxes round words. THE TOP PANE: the modes this stop has (app/stop-pill.js navModes) — SKY · STREET · INSIDE spread evenly, the one you are in lit on a soft pane;
   it does the job of the old tab that rose above the tablet, which is off. THE BOTTOM PANE: the stop — the page before and after either side (hidden on a phone), the big name in the middle (a title,
   not a button), the arrows at its ends, the dots under the name. Top left the client's mark with a white line under it (app/brand-mark.js); top right Home in a glass circle, RESET VIEW once
   the view has been dragged. Flat frosted fills (a 16 px blur), so the words read over anything ── */
body[data-nui="tablet"] { --nui-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif; --nui-w: 400; --nui-ink: #fff; --nui-accent: #ffffff; --nui-ls: .18em; --nui-shadow: 0 1px 8px rgba(0, 0, 0, .4); --nui-rot: 0deg;      /* check-ok: a visitor look's own colours, as every look in this file (the editor's look is app/look.css) */
  --pl-w: min(720px, calc(100% - 32px)); --pl-top: min(640px, calc(100% - 64px)); --pl-h: calc(100px * var(--nv, 1)); --pl-b: max(16px, env(safe-area-inset-bottom));
  --pl-fill: rgba(255, 255, 255, .1); --pl-blur: blur(16px) saturate(1.15); }
@media (max-width: 600px) { body[data-nui="tablet"] { --pl-top: calc(100% - 32px); --pl-h: calc(84px * var(--nv, 1)); } }
/* the bar is the pill: 720 px at most, the screen less two 16 px gutters on a phone, 16 px off the bottom */
body[data-nui="tablet"] #tourNav.tourNav { z-index: 9; left: 50%; bottom: var(--pl-b); width: min(720px, calc(100% - 32px)); transform: translateX(-50%); display: block !important; padding: 0; max-width: none !important; background: none !important; border: 0 !important; }
body[data-nui="tablet"] .tourNav.pgTourNav { z-index: 7; display: block !important; width: min(720px, calc(100% - 32px)); padding: 0; max-width: none !important; }
body[data-nui="tablet"] #tourNav.tourNav > button.navPill, body[data-nui="tablet"] .tourNav.pgTourNav > button.navPill { display: none !important; }
body[data-nui="tablet"] .tourNav .stopPill { display: block; width: 100%; }
body[data-nui="tablet"] .stopPill .spPill, body[data-nui="tablet"] .stopPill .spAddr, body[data-nui="tablet"] .stopPill .spForks, body[data-nui="tablet"] .stopPill .spLit, body[data-nui="tablet"] .stopPill .spDot { display: none !important; }      /* (the old tab above the tablet is off: the top pane's words do its job) */
body[data-nui="tablet"] .stopPill .spUnit { display: flex; flex-direction: column; align-items: center; position: relative; }
/* THE TOP PANE: narrower than the stop under it, square at the foot where it joins on, 16 px corners on top */
body[data-nui="tablet"] .stopPill .spSecs { display: none; }
body[data-nui="tablet"] .stopPill.sectioned .spSecs { display: flex; justify-content: space-around; align-items: center; position: relative; z-index: 1; box-sizing: border-box; width: var(--pl-top); padding: 6px 8px; border-radius: 16px 16px 0 0;
  background: var(--pl-fill); -webkit-backdrop-filter: var(--pl-blur); backdrop-filter: var(--pl-blur); }
body[data-nui="tablet"] .stopPill .spSec, body[data-nui="tablet"] .spSide .spSec { flex: 0 1 auto; min-width: 0; margin: 0; padding: 9px 20px 8px calc(20px + .18em); border: 0; border-radius: 9px; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; cursor: pointer; white-space: nowrap; text-transform: uppercase;
  font: 400 calc(11px * var(--nv, 1))/1 var(--nui-sans); letter-spacing: .18em; color: rgba(255, 255, 255, .74); text-shadow: var(--nui-shadow); -webkit-tap-highlight-color: transparent; transition: color .25s ease, background .25s ease; }
body[data-nui="tablet"] .stopPill .spSec.here, body[data-nui="tablet"] .spSide .spSec.here { background: rgba(255, 255, 255, .2); color: #fff; font-size: calc(13px * var(--nv, 1)); font-weight: 500; letter-spacing: .22em; padding-left: calc(20px + .22em); cursor: default; }
@media (max-width: 600px) { body[data-nui="tablet"] .stopPill .spSec, body[data-nui="tablet"] .stopPill .spSec.here, body[data-nui="tablet"] .spSide .spSec, body[data-nui="tablet"] .spSide .spSec.here { padding: 12px 14px 11px calc(14px + .2em); } }
@media (hover: hover) { body[data-nui="tablet"] .stopPill .spSec:not(.here):hover, body[data-nui="tablet"] .spSide .spSec:not(.here):hover { color: #fff; } }      /* check-ok: the look's own white, as the rest of this look */
body[data-nui="tablet"] .stopPill .spSec:focus, body[data-nui="tablet"] .spSide .spSec:focus { outline: none; }
body[data-nui="tablet"] .stopPill .spSec:focus-visible, body[data-nui="tablet"] .spSide .spSec:focus-visible { outline: 1px solid rgba(255, 255, 255, .6); outline-offset: -3px; }
body[data-nui="tablet"] .stopPill.open .spSecs { visibility: hidden; }      /* (the list of pages stands there while it is open) */
/* TEMPLATE TWO (11 Nov 2026, his picture "during tour — template two"): the same words one under another under the Home circle, top right, right edges in line with it; the one you are in on the
   frosted pane Home has; up only while the pill is (app/stop-pill.js .spSide, .navOff); the pill under them keeps the stop alone */
body[data-nui="tablet"] .spSecs.spSide { position: fixed; top: calc(var(--tu-top) + var(--tu-c) + 10px); right: var(--tu-right); left: auto; bottom: auto; z-index: 9; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; width: auto; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; opacity: 1; visibility: visible; transition: opacity .3s ease; }
body[data-nui="tablet"] #pagesLive .spSecs.spSide { position: absolute; }
body[data-nui="tablet"] .spSecs.spSide.navOff { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility 0s linear .3s; }
body[data-nui="tablet"] .spSide .spSec { padding: 10px 14px 9px calc(14px + .18em); }
body[data-nui="tablet"] .spSide .spSec.here { padding-left: calc(14px + .22em); background: var(--pl-fill); -webkit-backdrop-filter: var(--pl-blur); backdrop-filter: var(--pl-blur); }
/* THE BOTTOM PANE: the stop. 20 px corners, a frosted fill lighter at the top, a hairline of light along its top edge */
body[data-nui="tablet"] .stopPill .spPages { display: block; position: relative; z-index: 1; box-sizing: border-box; width: 100%; height: var(--pl-h); margin: 0; overflow: hidden; border-radius: 20px; cursor: pointer; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04)); -webkit-backdrop-filter: var(--pl-blur); backdrop-filter: var(--pl-blur); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
body[data-nui="tablet"] .stopPill.empty .spPages { visibility: hidden; }
body[data-nui="tablet"] .stopPill .spRow { position: absolute; top: 0; bottom: 0; left: 76px; right: 76px; z-index: 2; perspective: 900px; }      /* (inside the arrows' 44 px boxes, with 16 px either side of them) */
@media (max-width: 600px) { body[data-nui="tablet"] .stopPill .spRow { left: 60px; right: 60px; } }
/* the pages' words: the neighbours 14 px spaced .2 em at 40 % white; the page you are on the big name, Jost 200 spaced .24 em, 44 px or smaller to fit its half (--n, its letters) */
body[data-nui="tablet"] .stopPill .spPage { position: absolute; left: 50%; top: calc(50% - 6px * var(--nv, 1)); margin: 0; padding: 0 0 0 .2em; border: 0; background: none; cursor: pointer; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  transform: translate(calc(-50% + var(--x, 0px)), -50%) rotateY(var(--ry, 0deg)) scale(var(--sc, 1)); opacity: var(--o, 1); font: 400 calc(14px * var(--nv, 1))/1.1 var(--nui-sans); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; text-align: center;
  color: rgba(255, 255, 255, .4); text-shadow: var(--nui-shadow); -webkit-tap-highlight-color: transparent;
  transition: transform .5s cubic-bezier(.22, .7, .2, 1), opacity .5s ease, color .35s ease, font-size .35s ease, letter-spacing .35s ease, padding .35s ease; }
body[data-nui="tablet"] .stopPill .spPage.lit { font-size: min(calc(44px * var(--nv, 1)), calc((var(--sp-lit, 300px) - 8px) / (var(--n, 8) * .92))); font-weight: 200; letter-spacing: .24em; padding-left: .24em; color: #fff; cursor: default; }
body[data-nui="tablet"] .stopPill .spPage.off { pointer-events: none; }
@media (max-width: 600px) { body[data-nui="tablet"] .stopPill .spPage:not(.lit) { opacity: 0 !important; pointer-events: none; } }      /* (a phone: the big name alone; the arrows turn it) */
body[data-nui="tablet"] .stopPill .spPages.dragging .spPage { transition: color .35s ease, font-size .35s ease, letter-spacing .35s ease, padding .35s ease; }
body[data-nui="tablet"] .stopPill .spPage:focus { outline: none; }
body[data-nui="tablet"] .stopPill .spPage:focus-visible { outline: 1px solid rgba(255, 255, 255, .6); outline-offset: 2px; }
@media (hover: hover) { body[data-nui="tablet"] .stopPill .spPage:not(.lit):hover { color: rgba(255, 255, 255, .8); } }
body[data-nui="tablet"] .stopPill.near .spPage.lit { color: rgba(255, 255, 255, .74); }      /* (exploring: only the nearest stop) */
body[data-nui="tablet"] .stopPill.still .spPages { cursor: default; }
body[data-nui="tablet"] .stopPill.editing .spPage.lit { visibility: hidden; }
body[data-nui="tablet"] .stopPill .spPages .spEdit { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; width: calc(var(--sp-lit, 300px) - 8px); min-width: 0; font: 200 28px/1 var(--nui-sans); letter-spacing: .24em; text-transform: uppercase; }
/* THE ARROWS: chevrons 22 px, 2 px strokes with flat ends, 50 % white, each in a 44 × 44 tap box, in the bottom pane's two ends (kept on a phone) */
body[data-nui="tablet"] .stopPill .spArrow { display: grid; place-items: center; position: absolute; bottom: calc((var(--pl-h) - 44px) / 2 + 6px * var(--nv, 1)); z-index: 3; width: 44px; height: 44px; min-width: 0; padding: 0; border: 0; border-radius: 0; color: rgba(255, 255, 255, .5); cursor: pointer;
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; transition: opacity .3s ease, color .2s ease; }
body[data-nui="tablet"] .stopPill .spPrev { left: 16px; }
body[data-nui="tablet"] .stopPill .spNext { right: 16px; }
@media (max-width: 600px) { body[data-nui="tablet"] .stopPill .spPrev { left: 10px; } body[data-nui="tablet"] .stopPill .spNext { right: 10px; } }
body[data-nui="tablet"] .stopPill .spArrow > svg { display: block; width: 24px; height: 24px; stroke-width: 2; stroke-linecap: butt; filter: drop-shadow(0 1px 8px rgba(0, 0, 0, .4)); }
body[data-nui="tablet"] .stopPill .spArrow:hover { color: #fff; }
body[data-nui="tablet"] .stopPill .spArrow:focus { outline: none; }
body[data-nui="tablet"] .stopPill .spArrow:focus-visible { outline: 1px solid rgba(255, 255, 255, .6); outline-offset: -3px; }
body[data-nui="tablet"] .stopPill.still .spArrow { opacity: .3; pointer-events: none; }
/* THE DOTS under the name: 4 px at 40 % white, 7 px apart; the stop you are on a 16 × 4 white dash */
body[data-nui="tablet"] .stopPill .spMeter { display: flex; align-items: center; position: absolute; left: 50%; bottom: calc(14px * var(--nv, 1)); z-index: 2; gap: 3px; transform: translateX(-50%); pointer-events: none; transition: opacity .3s ease; }
body[data-nui="tablet"] .stopPill .spMeter i { display: block; width: 4px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .4); transition: width .35s cubic-bezier(.22, .7, .2, 1), background .35s ease; }
body[data-nui="tablet"] .stopPill .spMeter i.on { width: 16px; background: #fff; }
body[data-nui="tablet"] .stopPill.near .spMeter { opacity: .5; }
/* THE LIST OF PAGES (a tap on the big name): the same frosted glass, standing on the bottom pane, one page a row */
body[data-nui="tablet"] .tourNav .stopPill .spList { left: 0; right: 0; bottom: calc(100% - 20px); transform: none; display: block; gap: 0; padding: 6px 0 20px; border-radius: 20px 20px 0 0; overflow: hidden; z-index: 0;
  background: var(--pl-fill); -webkit-backdrop-filter: var(--pl-blur); backdrop-filter: var(--pl-blur); opacity: 0; visibility: hidden; translate: 0 10px; pointer-events: none;
  transition: opacity .25s ease, translate .3s cubic-bezier(.22, .7, .2, 1), visibility 0s linear .3s; }
body[data-nui="tablet"] .tourNav .stopPill.open .spList { opacity: 1; visibility: visible; translate: 0 0; pointer-events: auto; transition: opacity .25s ease, translate .3s cubic-bezier(.22, .7, .2, 1); }
body[data-nui="tablet"] .tourNav .stopPill .spItem { position: relative; z-index: 1; display: block; width: 100%; min-width: 0 !important; height: calc(44px * var(--nv, 1)); margin: 0; padding: 0 0 0 .2em !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; opacity: 1; transform: none; transition: background .2s ease, color .2s ease;
  font: 400 calc(12px * var(--nv, 1))/1 var(--nui-sans) !important; letter-spacing: .2em !important; text-transform: uppercase; color: rgba(255, 255, 255, .74) !important; text-shadow: var(--nui-shadow); text-align: center; text-decoration: none; pointer-events: auto; }
body[data-nui="tablet"] .tourNav .stopPill .spItem::before { display: none !important; }
body[data-nui="tablet"] .tourNav .stopPill .spItem:hover { color: #fff !important; letter-spacing: .2em !important; text-shadow: var(--nui-shadow); }
body[data-nui="tablet"] .tourNav .stopPill .spItem.on { background: rgba(255, 255, 255, .12) !important; color: #fff !important; font-weight: 500 !important; letter-spacing: .22em !important; text-decoration: none; }
/* the Presentation monitor's Phone frame: the phone's sizes */
body[data-nui="tablet"] #pagesLive.pgW480 .tourNav.pgTourNav { bottom: 16px; --pl-top: calc(100% - 32px); --pl-h: calc(84px * var(--nv, 1)); }
body[data-nui="tablet"] #pagesLive.pgW480 .stopPill .spPage:not(.lit) { opacity: 0 !important; pointer-events: none; }
body[data-nui="tablet"] #pagesLive.pgW480 .stopPill .spRow { left: 60px; right: 60px; }
/* WHAT THE LOOK TURNS OFF: the corner menu where a look asks (data-no-corner) */
body[data-no-corner] .modeCorner { display: none !important; }
/* the credit (glass3d) lives on the cover only */
body[data-nui="tablet"].visitor:not(.homeOn) .credits, body[data-nui="tablet"] #pagesLive:not(.homeDim) .credits { display: none !important; }
/* TOP RIGHT: Home alone, a 44 px circle of frosted glass, and RESET VIEW at 50 % white beside it only once the visitor has dragged the view (body.camOff, app/nui-looks.js watchCam). No mode words
   (his, 10 Nov: explore mode is ditched), no reset tile on the pill, no TOUR box in the corner. All down while the Home page is up */
body[data-nui="tablet"] { --tu-top: max(16px, env(safe-area-inset-top)); --tu-right: max(16px, env(safe-area-inset-right)); --tu-c: 44px; }
body[data-nui="tablet"] #pagesLive { --tu-top: 100px; --tu-right: 16px; }      /* (the Presentation monitor's: inside its frame, under the monitor's own strip of buttons) */
body[data-nui="tablet"].pvPhone #pagesLive { --tu-top: 16px; }
body[data-nui="tablet"] #pagesLive .pgNav { top: 0; right: 0; z-index: 9; }
body[data-nui="tablet"] #planBtn, body[data-nui="tablet"] .pgNav [data-go="plan"] { display: none !important; }
body[data-nui="tablet"] .modeCorner, body[data-nui="tablet"] .modeCorner.pgModeCorner { display: none !important; }      /* (10 Nov, his: "we've ditched explore mode, so get rid of that off the top … then you don't need tour" — top right is Home alone, and RESET VIEW once the view is dragged) */
/* RESET VIEW: the word, at 50 % white, left of Home — up only once the view has been dragged */
body[data-nui="tablet"] .camReset:not(.musicBtn), body[data-nui="tablet"] #resetCam.camReset {
  position: fixed; top: var(--tu-top) !important; bottom: auto !important; left: auto !important; right: calc(var(--tu-right) + var(--tu-c) + 12px) !important; z-index: 9; display: grid; place-items: center end; width: 120px; height: var(--tu-c); min-width: 0; padding: 0; margin: 0;
  border: 0 !important; border-radius: 0 !important; background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none; text-transform: uppercase; white-space: nowrap;
  font: 400 calc(11px * var(--nv, 1))/1 var(--nui-sans); letter-spacing: .22em; color: rgba(255, 255, 255, .5); text-shadow: var(--nui-shadow);
  opacity: 0; visibility: hidden; pointer-events: none; transform: none; translate: 0 0; transition: opacity .3s ease, color .2s ease, visibility 0s linear .3s; }
body[data-nui="tablet"].camOff:not(.homeOn) .camReset:not(.musicBtn), body[data-nui="tablet"].camOff:not(.homeOn) #resetCam.camReset { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .3s ease, color .2s ease; }
body[data-nui="tablet"].camOff #pagesLive.homeDim .camReset:not(.musicBtn) { opacity: 0; visibility: hidden; pointer-events: none; }
body[data-nui="tablet"] .camReset:not(.musicBtn):hover { color: #fff; }
body[data-nui="tablet"] .camReset:not(.musicBtn)::before { display: none !important; }
body[data-nui="tablet"] .camReset.pgReset { position: absolute; }
/* HOME: a 44 px circle of frosted glass, top right */
body[data-nui="tablet"] #homeIcon, body[data-nui="tablet"] .pgNav [data-go="home"] {
  position: fixed; top: var(--tu-top) !important; right: var(--tu-right) !important; bottom: auto !important; left: auto !important; z-index: 9; display: grid; place-items: center; width: var(--tu-c); height: var(--tu-c); min-width: 0; padding: 0; margin: 0; overflow: hidden;
  border: 0 !important; border-radius: 50% !important; color: #fff; font-size: 0; line-height: 0; background: var(--pl-fill) !important; -webkit-backdrop-filter: var(--pl-blur) !important; backdrop-filter: var(--pl-blur) !important; box-shadow: none;
  opacity: 1; visibility: visible; translate: 0 0; transform: none; pointer-events: auto; transition: opacity .3s ease, background .2s ease; }
body[data-nui="tablet"] .pgNav [data-go="home"] { position: absolute; }
body[data-nui="tablet"] #homeIcon::before, body[data-nui="tablet"] .pgNav [data-go="home"]::before { display: none !important; }
body[data-nui="tablet"] #homeIcon:hover, body[data-nui="tablet"] .pgNav [data-go="home"]:hover { background: rgba(255, 255, 255, .18) !important; }
body[data-nui="tablet"] #homeIcon > svg, body[data-nui="tablet"] .pgNav [data-go="home"] > svg { display: block; width: 22px; height: 22px; filter: drop-shadow(0 1px 8px rgba(0, 0, 0, .4)); }
body[data-nui="tablet"] #pagesLive.homeDim .pgNav [data-go="home"] { opacity: 0; visibility: hidden; pointer-events: none; }
/* TOP LEFT: under the client's mark, a white line as wide as the mark (app/brand-mark.js; his, 10 Nov: "we need a line underneath Villawood") */
body[data-nui="tablet"] #pagesLive .brandMark.inBox:not(.home) { top: var(--tu-top); }      /* (11 Nov: in the Presentation monitor the logo stands level with Home, under the monitor's own strip of buttons — it was hidden under it) */
body[data-nui="tablet"] #pagesLive .brandLine.inBox { top: calc(var(--tu-top) + clamp(22px, 7cqh, 44px) + 8px); }
body[data-nui="tablet"] #pagesLive .brandLine.inBox.wide { top: calc(var(--tu-top) + clamp(14px, 4cqh, 26px) + 8px); }
body[data-nui="tablet"] .brandLine { display: block; background: rgba(255, 255, 255, .7); box-shadow: 0 1px 8px rgba(0, 0, 0, .4); }