/* ============================================================
   V3 overrides — loaded after ../css/app.css.

   Everything here came out of one round of feedback: the tags
   were too small, the line under each name (the only thing that
   says what a region holds) was invisible, "Explore my mind" sat
   where the frontal label wanted to be, the invitation vanished
   on small screens, and on a tall narrow window the whole lot
   overlapped.
   ============================================================ */

/* ---------- region labels ----------
   Names go up to 15px and the descriptor to 13px in a colour that
   survives the resting state. Both numbers cost gutter, which is
   paid for in tune.js (camera.frameHalfWidth) rather than by
   shrinking the type back down. */
.rlabel{height:80px;margin-top:-40px}

.rlabel b{
  font-size:15px;letter-spacing:.15em;
  /* a faint halo so the name holds against a bright gyrus behind it */
  text-shadow:0 0 22px rgba(2,5,10,.92),0 1px 2px rgba(2,5,10,.85);
}

/* The descriptor: the thing that tells you what is in there.
   Clamped to two lines — a third line pushes the box past the row
   spacing and the columns start colliding, which is exactly what
   went wrong the first time. */
.rlabel span{
  margin-top:8px;font-size:13px;font-weight:var(--wt);letter-spacing:.01em;
  line-height:1.4;color:#9db8c9;text-shadow:0 0 18px rgba(2,5,10,.92);
  white-space:normal;max-width:min(21ch,15vw);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
}
.rlabel.left span{margin-left:auto}
/* Detail regions used to fade this line to 70%. Nothing is gained by
   hiding the one line that explains the region. */
.rlabel.tier-detail span{opacity:1}
.rlabel:hover span{color:#cfe2ee}

/* ---------- the hero ----------
   "Explore my mind" used to live under the name, top left, which is
   the exact spot the prefrontal label needs. It belongs with the
   invitation instead, and the invitation belongs at the bottom where
   it reads as a caption to the object rather than a subtitle to the
   name. */
#identity{max-width:32ch}

#tagline{
  bottom:44px;left:var(--pad);max-width:34ch;
  display:flex;flex-direction:column;align-items:flex-start;
}
#tagline b{font-size:16px;letter-spacing:.15em}
#tagline span{font-size:14px;line-height:1.65;color:#7e99ab;max-width:32ch}
#tagline #cta{margin-top:18px}

#hint{font-size:11px;color:#8aa2b3;line-height:2.2}
#nav button{font-size:11px}
#tip{min-width:280px}
#tip .nm{font-size:13px;letter-spacing:.16em}
.arow .n{font-size:11px}
.arow .t{font-size:12px}

/* ---------- laptops and tall windows ----------
   Between phone and a wide laptop the gutters are the scarce thing:
   the columns cost the same pixels as on a 1440 screen but there are
   several hundred fewer of them. Type comes down a notch; tune.js
   pulls the camera back to match. */
@media (max-width:1180px){
  .rlabel{height:62px;margin-top:-31px}
  .rlabel b{font-size:13px;letter-spacing:.13em}
  .rlabel span{font-size:11.5px;max-width:min(24ch,17vw)}
  #tagline{max-width:30ch}
  #tagline b{font-size:14px}
  #tagline span{font-size:13px}
}

/* ---------- phones ----------
   app.css hides the tagline outright below 900px, which is where the
   "this is my brain / explore" invitation went. It is the single most
   useful thing on the page for someone who has never seen it, so it
   comes back — as a compact block above the nav bar, with the button
   full width so it is a thumb target rather than a link.

   Labels cannot have gutters here: two columns of "PREFRONTAL CORTEX"
   would leave about 115px for the brain. So they stop pretending to be
   a column and become chips that sit on the tissue and carry their own
   dark backing, which is the only way uppercase type stays legible over
   a bright gyrus. */
@media (max-width:640px),(pointer:coarse) and (max-width:900px){
  .rlabel{height:28px;margin-top:-14px}
  .rlabel span{display:none}
  .rlabel b{
    font-size:10px;letter-spacing:.07em;
    padding:4px 7px;border-radius:3px;
    background:rgba(2,6,11,.82);
    border:1px solid rgba(120,160,190,.14);
    text-shadow:none;
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  }

  #tagline{
    display:flex;
    left:var(--pad);right:var(--pad);max-width:none;
    bottom:calc(var(--bar) + 14px);
  }
  #tagline b{font-size:12.5px;letter-spacing:.13em}
  #tagline span{font-size:12.5px;line-height:1.55;max-width:28ch}
  #tagline #cta{margin-top:14px}

  /* The name block shrinks so the brain keeps the middle of the screen. */
  #identity{max-width:none}
  #identity .roles{display:none}
}

/* Very short phones cannot afford the sentence under the headline —
   the brain would be squeezed into a letterbox. */
@media (max-height:680px) and (max-width:640px){
  #tagline span{display:none}
  #tagline #cta{margin-top:10px}
}

/* ---------- bottom row ----------
   Three things live along the bottom edge: the invitation on the left,
   the EEG in the middle, the controls on the right. With the invitation
   grown into a two-line sentence plus a button, the centred EEG landed
   on top of it. Pinning the EEG to the right of centre and lifting it
   clear of the button gives all three their own lane. */
#eeg{left:auto;right:calc(var(--pad) + 190px);bottom:112px;transform:translateZ(0)}

@media (max-width:1180px){
  #eeg{right:var(--pad);bottom:126px;width:250px}
  #eeg-c{width:250px;height:36px}
}

/* On a phone there is no lane left for it in the overview — the name owns
   the top, the invitation owns the bottom, the brain owns the middle, and
   squeezing it in truncated its own label. It comes back inside a region,
   where the screen is otherwise empty and it is actually telling you
   something. */
@media (max-width:640px),(pointer:coarse) and (max-width:900px){
  body[data-mode="overview"] #eeg{opacity:0}
  #eeg{left:var(--pad);right:auto;bottom:calc(var(--bar) + 12px);top:auto;width:min(62vw,240px)}
  #eeg-c{width:100%;height:30px}
}

/* ============================================================
   TYPE SCALE

   Everything a visitor actually reads goes up about a quarter:
   region names, headings, project names, the copy inside a panel,
   navigation, search results. The small monospaced HUD metadata —
   keycap hints, tag chips, the disclaimer, "5 nodes" — deliberately
   stays where it is, because scaling that too would just make the
   page loud rather than legible.
   ============================================================ */

/* headings */
#identity h1{font-size:38px}
#region-title h2{font-size:26px}
#panel h2{font-size:33px}
#atlas-sheet h2{font-size:16px}
#ent-name{font-size:24px}

/* body copy inside a region panel */
#panel .txt{font-size:18px;max-width:36ch}
#panel li{font-size:17px}
#panel ul.specs li{font-size:15px}
#panel .links a{font-size:15px}

/* the interactive labels: project nodes floating in a region */
.cnode b{font-size:13px;top:-32px}
.cnode.sub b{font-size:9.5px}

/* navigation, search, hover readout, atlas rows */
#nav button{font-size:13px}
#tip .nm{font-size:15px}
#tip .lat{font-size:13px}
#tip .tg{font-size:14px}
#tip .go{font-size:12px}
#pal li .t{font-size:16px}
#pal-q{font-size:16px}
.arow .n{font-size:13px}
.arow .t{font-size:14.5px}

/* the region labels over the brain, and the invitation */
.rlabel b{font-size:16.5px}
.rlabel span{font-size:14px}
#tagline b{font-size:18px}
#tagline span{font-size:16px}
#cta{font-size:13px}

@media (max-width:1180px){
  #identity h1{font-size:29px}
  #panel h2{font-size:27px}
  #panel .txt{font-size:16px}
  #panel li{font-size:15.5px}
  .rlabel b{font-size:14px}
  .rlabel span{font-size:12.5px}
  #tagline b{font-size:15.5px}
  #tagline span{font-size:14px}
}

@media (max-width:640px),(pointer:coarse) and (max-width:900px){
  #identity h1{font-size:21px}
  #region-title h2{font-size:17px}
  #panel h2{font-size:24px}
  #panel .txt{font-size:16px}
  #panel li{font-size:15.5px}
  .rlabel b{font-size:11.5px}
  #tagline b{font-size:14px}
  #tagline span{font-size:14px}
  #nav button{font-size:11.5px}
}

/* ============================================================
   SHORT VIEWPORTS

   A 16:9 laptop at 1280x450, or any window someone has dragged
   short, has room for the brain or for three 80px label boxes
   plus the invitation — not both. Rather than let them collide,
   the labels lose their second line and the name block loses its
   role list, which buys back about 120px of column.
   ============================================================ */
@media (max-height:660px) and (min-width:641px){
  .rlabel{height:52px;margin-top:-26px}
  .rlabel b{font-size:13px}
  .rlabel span{font-size:11px;-webkit-line-clamp:1;margin-top:5px}
  #identity .roles{display:none}
  #identity h1{font-size:26px}
  #tagline{bottom:30px}
  #tagline b{font-size:14px}
  #tagline span{display:none}
  #tagline #cta{margin-top:12px}
  #eeg{display:none}
  #hint{line-height:1.9}
}

/* ============================================================
   PHONE PASS

   Three things were wrong on a 375px screen: the navigation bar
   ran off the right edge, the seven region chips stacked into one
   solid block across the middle of the brain, and the reader's
   own chrome was still sized for a desktop column.
   ============================================================ */
@media (max-width:640px),(pointer:coarse) and (max-width:900px){

  /* ---- navigation bar ----
     Syncopate is the widest face on the page and the bar is the one
     place with a hard width budget, so on phones the bar alone drops
     to Manrope: same tracked-caps reading, roughly a third less width.
     Work goes entirely — Atlas lists every region, which is all Work
     ever did — and the rest use their data-short labels. */
  #nav-work{display:none}
  #nav button{
    font-family:var(--micro);font-weight:700;
    font-size:9.5px;letter-spacing:.08em;padding:7px 6px;
  }
  #nav button[data-short]{font-size:0;letter-spacing:0}
  #nav button[data-short]::after{
    content:attr(data-short);
    font-size:9.5px;letter-spacing:.08em;
  }
  /* If a longer word list ever does overflow, it should look scrollable
     rather than simply cut off. */
  #nav{
    justify-content:space-between;
    -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);
    mask-image:linear-gradient(90deg,#000 92%,transparent);
  }

  /* ---- region chips ----
     The stacking solver is told how much room a row needs; at 40px,
     with a 28px chip, seven of them packed into 160px of the brain's
     midline and read as one block. Wider rows spread the same seven
     across most of the brain's height, so each one lands nearer the
     tissue it names and the silhouette stays visible between them. */
  .rlabel b{font-size:11px;letter-spacing:.06em;padding:4px 6px}
}

/* Narrow phones only: the two chip columns are what decide whether the
   brain has a middle left. */
@media (max-width:400px){
  .rlabel b{font-size:10.5px;padding:4px 5px}
  #identity h1{font-size:19px}
}

/* ---- the strip above the nav bar ----
   On a desktop the dive progress bar spans the bottom and the EEG trace
   sits bottom-right, so they never meet. A phone has one strip above the
   nav bar and both were claiming it, printing the progress percentage
   straight through the trace. During a dive the bar is the one saying
   something the visitor needs; the trace comes back once you have
   arrived, where the screen is otherwise empty. */
@media (max-width:640px),(pointer:coarse) and (max-width:900px){
  body[data-mode="diving"] #eeg,
  body[data-mode="surfacing"] #eeg{opacity:0}
}

/* ---- inside a region, on a phone ----
   The region card sits top-left and the node rosette starts immediately
   under it, so the three verbs stacked below the region name landed on
   the first node and its caption. They are flavour; the name is the
   orientation. Same reasoning that already drops them in project mode. */
@media (max-width:640px),(pointer:coarse) and (max-width:900px){
  #region-title .verbs{display:none}
  #region-title .rule{margin:10px 0}

  /* Node captions are centred on their node, so a wide face costs width
     at both ends. Manrope fits roughly a third more of the label in the
     same span before the ellipsis takes over. */
  .cnode b{
    font-family:var(--micro);font-weight:700;
    font-size:8.5px;letter-spacing:.1em;max-width:46vw;
  }
  .cnode .cap{font-family:var(--micro);font-weight:700;letter-spacing:.1em}
}

/* ============================================================
   FRONT PAGE — quieter.

   The landing view had six competing blocks of chrome around the
   brain: a name, a four-line role list, a seven-item navigation bar
   on two rows, an invitation, a three-line control hint and a
   disclaimer. Each was small, and together they were louder than the
   thing they surrounded.

   Nothing is deleted except Work, which pointed at a region id this
   build does not have. The rest is compressed: the roles onto one
   line, the hint onto one line, and the bar into a single row of
   Manrope, which sets far narrower than Syncopate at the same
   reading size. The brain is what should be loud.
   ============================================================ */

/* ---- navigation: one row ---- */
#nav{
  gap:0;flex-wrap:nowrap;white-space:nowrap;
  max-width:none;left:auto;
}
#nav button{
  font-family:var(--micro);font-weight:600;
  font-size:10px;letter-spacing:.13em;
  padding:6px 0;margin-left:26px;
  color:#7e97a8;position:relative;
}
#nav button:first-child{margin-left:0}
/* a rule that draws itself in from the left on hover, rather than a
   colour change that just blinks */
#nav button::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .32s cubic-bezier(.22,.61,.36,1);
}
#nav button:hover,#nav button.on{color:var(--cyan)}
#nav button:hover::after,#nav button.on::after{transform:scaleX(1)}

/* ---- identity: the role list reads as one line ---- */
#identity .roles{
  font-family:var(--micro);font-weight:600;
  font-size:10px;letter-spacing:.13em;line-height:1.6;color:#5f7889;
}
#identity .headline{color:#6b8798}

/* ---- the invitation and the hint, dialled back ---- */
#tagline span{color:#7e99ab}
#hint{
  font-family:var(--micro);font-weight:600;
  font-size:10px;letter-spacing:.1em;line-height:1.6;color:#5f7889;
}
#hint b{color:#8fb8cc}
#disclaimer{opacity:.55}

/* ---- entrance ----
   The brain fades up out of the boot screen on its own; the chrome
   should arrive after it and in order, so the eye lands on the name,
   then the brain, then the way in. Transform and opacity only, so
   none of it costs a layout while the first frames are rendering. */
@keyframes hud-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
#identity,#nav,#tagline,#hint{
  animation:hud-in .85s cubic-bezier(.22,.61,.36,1) both;
}
#identity{animation-delay:.10s}
#nav{animation-delay:.26s}
#tagline{animation-delay:.42s}
#hint{animation-delay:.54s}
/* #identity already animates opacity/transform when you dive in; the
   entrance must not fight that, so it only runs on the way in. */
body.immersed #identity{animation:none}

@media (prefers-reduced-motion:reduce){
  #identity,#nav,#tagline,#hint{animation:none}
  #nav button::after{transition:none}
}

/* Phones keep the bottom bar layout from the phone pass above; only the
   colour and the underline carry over. */
@media (max-width:640px),(pointer:coarse) and (max-width:900px){
  #nav{gap:0;left:0;flex-wrap:nowrap}
  #nav button{margin-left:0;padding:7px 6px}
  #nav button::after{display:none}
}

/* ============================================================
   HEADER BAND

   The name was a two-line block dropping out of the top-left while
   the navigation was a single thin row on the right, so the top of
   the page had a heavy corner and a light one. On a wide screen the
   name goes on one line and the bar is centred against it: one
   header band, name at one end, sections at the other.

   The band is also where the type was smallest relative to its job,
   so everything in it comes up a step.
   ============================================================ */
#nav button{font-size:11.5px;letter-spacing:.12em;margin-left:30px}
#identity .headline{font-size:11px;letter-spacing:.2em}
#identity .roles{font-size:11.5px;letter-spacing:.12em}

@media (min-width:1100px){
  /* one line, so the name reads as a logotype on the band rather than
     as a stacked block */
  #identity h1{font-size:33px;line-height:1.2}
  #identity h1 span{display:inline}
  #identity h1 span + span{margin-left:.44em}
  /* centre the bar on the name's own line */
  #nav{top:calc(var(--padtop) + 6px)}
}

/* Below that the name still stacks, and the bar sits with the first
   line of it rather than above both. */
@media (max-width:1099px) and (min-width:641px){
  #nav{top:calc(var(--padtop) + 2px)}
}

/* ============================================================
   PHONE MENU

   The bottom bar was the wrong shape for this site. Every sheet
   here — the detail panel, the atlas, the readout — is anchored to
   the bottom edge and drawn above the bar's z-index, so the moment
   you opened a project the navigation was buried under it and there
   was no way back to Atlas or Contact without surfacing first.

   A floating control cannot be covered: it sits above every sheet,
   stays in the same corner in every state, and opens the same six
   destinations as a list with room for a thumb. --bar reserves the
   strip it floats in, so the panel, the readout and the dive bar all
   stop clear of it without knowing it is there.
   ============================================================ */
#nav-toggle{display:none}

@media (max-width:640px),(pointer:coarse) and (max-width:900px){
  :root{--bar:calc(78px + env(safe-area-inset-bottom))}

  /* ---- the control ---- */
  #nav-toggle{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4.5px;
    position:fixed;z-index:25;
    right:18px;bottom:calc(12px + env(safe-area-inset-bottom));
    width:54px;height:54px;border-radius:50%;
    background:rgba(4,11,18,.92);border:1px solid rgba(120,190,220,.26);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    box-shadow:0 10px 30px -10px #000;
    color:#cfe3ee;
    transition:border-color .3s,background .3s,transform .3s;
  }
  #nav-toggle i{
    width:19px;height:1.5px;background:currentColor;border-radius:1px;
    transition:transform .34s cubic-bezier(.22,.61,.36,1),opacity .18s;
  }
  /* three bars fold into a cross, so the same control closes what it opened */
  body.menu #nav-toggle{border-color:var(--cyan);color:#fff}
  body.menu #nav-toggle i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  body.menu #nav-toggle i:nth-child(2){opacity:0}
  body.menu #nav-toggle i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  /* the reader is a whole site with its own navigation */
  body.reading #nav-toggle{opacity:0;pointer-events:none}

  /* ---- the sheet ----
     #nav becomes the whole overlay: scrim plus a column of destinations
     resting on the bottom edge. Tapping the scrim is tapping #nav
     itself, which is what closes it. */
  #nav{
    position:fixed;inset:0;top:0;left:0;right:0;bottom:0;
    z-index:24;pointer-events:auto;
    display:flex;flex-direction:column;justify-content:flex-end;
    gap:0;padding:0 16px calc(84px + env(safe-area-inset-bottom));
    background:rgba(1,4,8,.74);
    -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
    -webkit-mask-image:none;mask-image:none;
    overflow:visible;max-width:none;
    opacity:0;visibility:hidden;
    transition:opacity .3s,visibility 0s linear .3s;
  }
  body.menu #nav{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}

  #nav button{
    flex:0 0 auto;margin:0;width:100%;text-align:left;
    font-family:var(--micro);font-weight:700;
    font-size:13px;letter-spacing:.14em;
    padding:17px 18px;color:#b6cbd8;
    background:rgba(5,13,21,.96);
    border:1px solid rgba(120,190,220,.14);border-bottom:0;
    /* each row slides up behind the one above it */
    transform:translateY(14px);opacity:0;
    transition:transform .42s cubic-bezier(.22,.61,.36,1),opacity .3s,
               background .2s,color .2s;
  }
  #nav button:first-of-type{border-radius:3px 3px 0 0}
  #nav button:last-of-type{border-bottom:1px solid rgba(120,190,220,.14);border-radius:0 0 3px 3px}
  #nav button:active{background:rgba(90,214,255,.10);color:#fff}
  #nav button::after{display:none}
  body.menu #nav button{transform:none;opacity:1}
  /* bottom-up stagger: the row nearest the thumb arrives first */
  body.menu #nav button:nth-last-of-type(1){transition-delay:.02s}
  body.menu #nav button:nth-last-of-type(2){transition-delay:.06s}
  body.menu #nav button:nth-last-of-type(3){transition-delay:.10s}
  body.menu #nav button:nth-last-of-type(4){transition-delay:.14s}
  body.menu #nav button:nth-last-of-type(5){transition-delay:.18s}
  body.menu #nav button:nth-last-of-type(6){transition-delay:.22s}

  /* the short labels were for a bar with no room; a list has room */
  #nav button[data-short]{font-size:13px;letter-spacing:.14em}
  #nav button[data-short]::after{content:none}

  /* the entrance animation belongs to the desktop band */
  #nav{animation:none}
}

@media (prefers-reduced-motion:reduce){
  #nav-toggle i,#nav button{transition-duration:.01ms}
}

/* ============================================================
   GUIDE — make it scrollable.

   #guide is a centring grid with no overflow. That is fine while the
   box fits, but the moment it is taller than the window - which on a
   phone it always is - a centred item overflows equally in both
   directions and the top half becomes unreachable: there is no
   scrollbar, and scrolling up past the start of a grid item does not
   work in any browser.

   The fix is the standard one: a flex container that scrolls, with
   `margin:auto` on the box. It still centres when the box fits, and
   when it does not the auto margins resolve to zero and it scrolls
   from the top like normal content.
   ============================================================ */
#guide{
  display:flex;align-items:flex-start;
  overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
#guide .g-box{margin:auto}

/* Trim it on a phone so it usually does not need to scroll at all. */
@media (max-width:640px),(pointer:coarse) and (max-width:900px){
  #guide{padding:18px}
  #guide .g-box{padding:26px 22px 24px;width:100%}
  #guide h2{font-size:19px;margin-top:12px}
  #guide .g-lede{font-size:14px;line-height:1.7;margin-top:12px}
  #guide .g-steps{gap:11px;margin-top:20px}
  #guide .g-steps li{gap:13px}
  #guide .g-steps b{width:21px;height:21px;font-size:8.5px}
  #guide .g-steps span{font-size:13.5px;line-height:1.5}
  #guide .g-acts{margin-top:24px;gap:18px}
  #guide #guide-go{padding:14px 22px}
  /* the menu control must not sit on the guide's own button */
  body:has(#guide.on) #nav-toggle{opacity:0;pointer-events:none}
}

/* ============================================================
   PHONE OVERVIEW — the brain, and nothing else.

   A 360px-wide screen was carrying the name block, a role line, the
   invitation with its button, the EEG trace and seven region chips
   over a brain that had already been pushed back to make room for
   them. Zooming in then moved the chips without moving any of the
   chrome, so everything landed on everything.

   All three text blocks go on phones. The name is in the tab title,
   the reader and the résumé; the invitation is instructions for a
   gesture people already try; and the EEG is decoration with no room
   to be decorative in. What is left is the thing worth looking at,
   its labels, and one control.
   ============================================================ */
@media (max-width:640px),(pointer:coarse) and (max-width:900px){
  #tagline,#eeg{display:none}
  /* nothing is competing for the bottom strip any more, so the dive
     bar can sit just above the menu control */
  #dive{bottom:calc(var(--bar) + 6px)}
}

/* ============================================================
   PHONE: MARKERS, AND THE TOP AND BOTTOM BACK

   Two set names per row, in two columns, over a 360px brain meant
   the labels were the picture and the brain was behind them. On a
   phone each region becomes a dot on the tissue it names, and the
   name itself moves to the readout, where there is room for the
   descriptor too. Tapping a dot names it; tapping the readout goes
   in — the readout being much the bigger target of the two.

   The name comes back at the top, small and on one line, and the
   bottom carries the instruction and the credit, so neither end is
   an empty band any more.
   ============================================================ */
@media (max-width:640px),(pointer:coarse) and (max-width:900px){

  /* ---- region markers ---- */
  .rlabel{
    left:0;right:auto;
    width:34px;height:34px;margin:-17px 0 0 -17px;
    align-items:center;justify-content:center;text-align:center;
  }
  .rlabel b,.rlabel span{display:none}
  .rlabel::before{
    content:"";width:9px;height:9px;border-radius:50%;
    background:currentColor;
    box-shadow:0 0 0 3px rgba(2,6,11,.55), 0 0 14px currentColor;
    transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s;
  }
  /* the selected one grows a ring, so you can see which dot the readout
     is describing */
  .rlabel.on::before{transform:scale(1)}
  .rlabel:active::before,.rlabel.hov::before{
    transform:scale(1.45);
    box-shadow:0 0 0 3px rgba(2,6,11,.55), 0 0 22px currentColor;
  }

  /* ---- the readout is the second tap ---- */
  /* only when it is actually showing - an opacity-0 element still eats taps */
  #tip.on{pointer-events:auto}
  #tip .go{color:var(--accent,var(--cyan));font-size:10px}

  /* ---- name back at the top ---- */
  #identity{display:block;top:calc(16px + env(safe-area-inset-top));left:18px}
  #identity h1{font-size:15px;letter-spacing:.15em;line-height:1.5}
  #identity h1 span{display:inline}
  #identity h1 span + span{margin-left:.42em}
  #identity h1 span:last-child{color:#8fa9b9}
  #identity .rule{display:none}
  #identity .roles{display:none}
  #identity .headline{margin-top:5px;font-size:8.5px;letter-spacing:.2em;color:#5f7889}
  body.immersed #identity{opacity:0;pointer-events:none}

  /* ---- and a footer ---- */
  #hint{
    display:block;left:18px;right:auto;text-align:left;
    bottom:calc(var(--bar) + 2px);max-width:58vw;
    font-size:9.5px;letter-spacing:.09em;line-height:1.55;color:#5f7889;
  }
  #disclaimer{display:block;bottom:calc(6px + env(safe-area-inset-bottom));font-size:7px;opacity:.5}
  body.readout #hint,body.immersed #hint{opacity:0}
}