/* The viewport chrome, shared by the Region Atlas and the receptor page
   so a brain view looks the same wherever it appears. Both pages define
   the ink/paper custom properties this leans on. */

.view{ border:1px solid var(--hair); display:flex; flex-direction:column; min-width:0; }
.view-cap{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:.35rem .8rem; padding:.6rem .8rem .5rem; border-bottom:1px solid var(--hair);
}
.view-cap b{
  font-family:var(--font-brand); font-weight:500; font-size:.68rem;
  letter-spacing:.28em; text-transform:uppercase;
}
.view-cap span{
  font-family:var(--font-serif); font-style:italic; font-size:.82rem; color:var(--ink-60);
}

/* per-viewport controls, sat on their own rule beneath the caption */
.view-tools{
  display:flex; flex-wrap:wrap; align-items:center; gap:.36rem .6rem;
  padding:.4rem .8rem; border-bottom:1px solid var(--hair);
}
.tool-label{
  font-family:var(--font-brand); font-weight:500; font-size:.55rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-60);
}
.centre-btn{
  margin-left:auto; height:1.8rem; padding:0 .6rem;
  display:inline-flex; align-items:center;
}

/* segmented switch — one joined run of square cells, the active one inked */
.seg{ display:inline-flex; border:1px solid var(--hair); align-self:center; }
.seg-btn{
  border:0; border-left:1px solid var(--hair); border-radius:0;
  background:var(--paper); color:var(--ink);
  font-family:var(--font-brand); font-weight:500;
  text-transform:uppercase; cursor:pointer; line-height:1;
  width:1.8rem; height:1.8rem; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
}
.seg-btn:first-child{ border-left:0; }
@media (hover: hover){ .seg-btn:hover{ background:var(--ink); color:var(--paper); } }
.seg-btn.active{ background:var(--ink); color:var(--paper); }
.seg-word{ font-size:.46rem; letter-spacing:.06em; }
.seg-arrow{ font-size:.74rem; letter-spacing:-.04em; }

.mri-stage{ position:relative; background:#000000; height:clamp(240px,36vh,430px); height:clamp(240px,36dvh,430px); }
.mri-stage canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; outline:none; }

/* ── page layout: a rail of inputs beside the viewports, shared by every
   page so the three read as one instrument ── */
.rail{ display:flex; flex-direction:column; gap:var(--gap); }
.card{ border:1px solid var(--hair); padding:1rem 1.05rem 1.1rem; background:var(--paper); }
.card h2{
  font-family:var(--font-brand); font-weight:500; font-size:.68rem;
  letter-spacing:.3em; text-transform:uppercase; text-align:center;
  border-bottom:1px solid var(--hair); padding-bottom:.55rem; margin-bottom:.75rem;
}
.views{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); min-width:0; }
.studio{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:var(--gap); align-items:start; }
.sec-h{
  font-family:var(--font-brand); font-weight:600; font-size:.66rem;
  letter-spacing:.3em; text-transform:uppercase; color:var(--ink);
  border-bottom:1px solid var(--ink); padding:.2rem .1rem .45rem; margin:0 0 var(--gap);
  display:flex; align-items:baseline; justify-content:space-between; gap:.6rem;
}
.selwrap{ position:relative; width:100%; }
.selwrap::after{
  content:""; position:absolute; right:.75rem; top:50%; transform:translateY(-35%);
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid var(--ink); pointer-events:none;
}
select{
  width:100%; appearance:none; -webkit-appearance:none; border-radius:0;
  border:1px solid var(--hair); background:var(--paper); color:var(--ink);
  font-family:var(--font-brand); font-size:.92rem; padding:.55rem 1.8rem .5rem .6rem;
  cursor:pointer;
}

/* the view-switch button, used in title strips, rails and viewport rules */
.ts-btn{
  border:1px solid var(--hair); background:var(--paper); color:var(--ink);
  font-family:var(--font-brand); font-weight:500; font-size:.62rem;
  letter-spacing:.2em; text-transform:uppercase; cursor:pointer;
  padding:.5rem .7rem .42rem; text-decoration:none; line-height:1;
}
.ts-btn.active{ background:var(--ink); color:var(--paper); }
@media (hover: hover){ .ts-btn:hover{ background:var(--ink); color:var(--paper); } }

/* ── narrow screens ──────────────────────────────────────────────────────
   A 300px rail beside the viewports needs a wide window. Below that the
   studio becomes one column with the viewports still on top, and the rail
   reads as a row of cards beneath them. */
@media (max-width:1100px) and (orientation:portrait),
       (max-width:900px) and (orientation:landscape){
  .studio{ grid-template-columns:1fr; }
  .centre{ order:-1; }
  .title-strip .ts-views{ margin-left:0; width:100%; }
  .rail{ display:grid; grid-template-columns:1fr 1fr; align-items:start; }
  .rail .sec-h{ grid-column:1 / -1; }
}
@media (max-width:760px){
  .rail{ grid-template-columns:1fr; }
  /* On a phone each viewport is most of a screen, so leading with them would
     bury the controls. Here the rail comes first and the brain follows. */
  .centre{ order:0; }
  /* keep the boxes two-up: stacking all four puts the controls a screen and
     a half below the fold. The chrome sheds its wordier parts to fit. */
  .views{ grid-template-columns:1fr 1fr; }
  .mri-stage{ height:clamp(150px,38vw,240px); }
  .view-cap{ padding:.45rem .55rem .35rem; }
  .view-cap span{ display:none; }
  .view-tools{ padding:.3rem .5rem; gap:.3rem; }
  .view-tools .tool-label{ display:none; }
  .centre-btn{ margin-left:auto; height:1.6rem; padding:0 .45rem; font-size:.5rem; }
  .seg-btn{ width:1.6rem; height:1.6rem; }
}
@media (max-width:430px){
  .views{ grid-template-columns:1fr; }
  .mri-stage{ height:clamp(190px,54vw,280px); }
}


/* ── enlarge: one box taking the whole grid ── */
.views.solo{ grid-template-columns:1fr; }
.views.solo .view{ display:none; }
.views.solo .view.solo-on{ display:flex; }
.views.solo .mri-stage{ height:clamp(420px,68vh,900px); height:clamp(420px,68dvh,900px); }
.zoom-btn{ padding:0 .5rem; height:1.8rem; display:inline-flex; align-items:center; }

/* the 3D box leads the grid; the atlas names it "render", the other two "Ren" */
.views .view[data-box="Ren"], .views .view[data-box="render"]{ order:-1; }

/* ── slice tool: a cut on each axis, run from the edges ─────────────────
   Each control sits on the edge it works along — up–down down one side,
   front–back down the other, left–right along the bottom — so the middle of
   the box stays clear and the brain is never behind a slider. Each name
   reads in the direction its own cut travels. */
.slice-panel{
  position:absolute; inset:0; z-index:2;
  display:none; pointer-events:none;
}
.slice-panel.on{ display:block; }

.slice-edge{
  position:absolute; pointer-events:auto;
  display:flex; align-items:center; gap:.35rem;
}
.slice-edge .ax{
  font-family:var(--font-brand); font-weight:500; font-size:.48rem;
  letter-spacing:.2em; text-transform:uppercase; white-space:nowrap;
  color:#9A9A9A; transition:color .2s ease;
  text-shadow:0 0 4px #000, 0 0 4px #000;
}
.slice-edge.cutting .ax{ color:#FFFFFF; }

/* the two vertical edges */
.slice-edge.left, .slice-edge.right{
  top:10px; bottom:10px; width:30px;
  flex-direction:column; justify-content:center;
}
.slice-edge.left{ left:3px; }
.slice-edge.right{ right:3px; }
.slice-edge.left .ax{ writing-mode:vertical-rl; transform:rotate(180deg); }
.slice-edge.right .ax{ writing-mode:vertical-rl; }

/* the bottom edge, held clear of both verticals */
.slice-edge.bottom{ left:36px; right:36px; bottom:5px; height:20px; }

/* the centre, marked (v12.9, at the owner's word): a short line across the
   track at the middle of each slider, where nothing is cut, drawn on the
   input itself so it stands under the track and the thumb; a mark and
   nothing more, which the thumb runs past without catching */
.slice-range{
  -webkit-appearance:none; appearance:none;
  --slice-mark:rgba(255,255,255,.7);
  background:linear-gradient(var(--slice-mark), var(--slice-mark)) center / 2px 18px no-repeat;
  cursor:pointer; margin:0;
}
.slice-edge.bottom .slice-range{ flex:1; min-width:0; height:18px; }
.slice-edge.left .slice-range, .slice-edge.right .slice-range{
  writing-mode:vertical-lr; direction:rtl;
  width:18px; flex:1; min-height:0; background-size:18px 2px;
}
.slice-range::-webkit-slider-runnable-track{
  background:rgba(255,255,255,.28); border-radius:2px;
}
.slice-edge.bottom .slice-range::-webkit-slider-runnable-track{ height:2px; }
.slice-edge.left .slice-range::-webkit-slider-runnable-track,
.slice-edge.right .slice-range::-webkit-slider-runnable-track{ width:2px; }
.slice-range::-moz-range-track{ background:rgba(255,255,255,.28); border-radius:2px; }
.slice-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:12px; height:12px; border-radius:50%;
  background:#FFFFFF; border:1px solid #000000; margin-top:-5px;
}
.slice-edge.left .slice-range::-webkit-slider-thumb,
.slice-edge.right .slice-range::-webkit-slider-thumb{ margin:0 0 0 -5px; }
.slice-range::-moz-range-thumb{
  width:12px; height:12px; border-radius:50%;
  background:#FFFFFF; border:1px solid #000000;
}
.slice-range:focus-visible{ outline:1px solid #FFFFFF; outline-offset:3px; }

/* Slice, and Slice regions beside it, ink in while pressed and stand as
   tall as the Centre planes button they share a row with, so the row reads
   as one line */
.slice-btn.active, .slice-regions.active{ background:var(--ink); color:var(--paper); }
.slice-btn, .slice-regions{ height:1.8rem; padding:0 .6rem; white-space:nowrap; }

@media (max-width:760px){
  .slice-edge.left, .slice-edge.right{ width:24px; top:6px; bottom:6px; }
  .slice-edge.bottom{ left:28px; right:28px; bottom:3px; }
  .slice-edge .ax{ font-size:.42rem; letter-spacing:.14em; }
  .slice-btn, .slice-regions{ height:1.6rem; padding:0 .45rem; font-size:.5rem; }
}
/* under a finger each slider is a strip 44 points across, its thumb 24 and
   its track 4, the bottom one held clear of the two at the sides; the
   label keeps its size, the strip's width around the track is the target */
@media (pointer:coarse){
  .slice-edge.left, .slice-edge.right{ width:44px; top:4px; bottom:4px; }
  .slice-edge.left{ left:0; }
  .slice-edge.right{ right:0; }
  .slice-edge.bottom{ left:48px; right:48px; bottom:0; height:44px; }
  .slice-edge.bottom .slice-range{ height:44px; }
  .slice-edge.left .slice-range, .slice-edge.right .slice-range{ width:44px; }
  .slice-range{ background-size:2px 32px; }
  .slice-edge.left .slice-range, .slice-edge.right .slice-range{ background-size:32px 2px; }
  .slice-edge.bottom .slice-range::-webkit-slider-runnable-track{ height:4px; }
  .slice-edge.left .slice-range::-webkit-slider-runnable-track,
  .slice-edge.right .slice-range::-webkit-slider-runnable-track{ width:4px; }
  .slice-range::-webkit-slider-thumb{ width:24px; height:24px; margin-top:-10px; }
  .slice-edge.left .slice-range::-webkit-slider-thumb,
  .slice-edge.right .slice-range::-webkit-slider-thumb{ margin:0 0 0 -10px; }
  .slice-range::-moz-range-track{ height:4px; }
  .slice-edge.left .slice-range::-moz-range-track, .slice-edge.right .slice-range::-moz-range-track{ width:4px; height:auto; }
  .slice-range::-moz-range-thumb{ width:24px; height:24px; }
}

/* ── inside a native shell ──────────────────────────────────────────────
   native.js stamps the platform on the document, so these apply only in the
   App Store and Play Store builds and never to the website.

   A phone has furniture the browser used to keep clear of: a notch, a home
   indicator, a status bar the webview draws underneath. The page is inset by
   whatever the device says it needs, which is zero on a device that needs
   nothing. Rubber-band scrolling is turned off because dragging a brain
   around should not also drag the page, and long-press selection is turned
   off on the chrome for the same reason — but not on the prose, which is
   there to be read and quoted. */
body{
  padding-top:max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px));
  padding-bottom:max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px));
  padding-left:max(env(safe-area-inset-left, 0px), var(--safe-area-inset-left, 0px));
  padding-right:max(env(safe-area-inset-right, 0px), var(--safe-area-inset-right, 0px));
}
:root[data-native] body{
  overscroll-behavior:none;
}
:root[data-native]{ -webkit-tap-highlight-color:transparent; }
:root[data-native] .masthead,
:root[data-native] .nav-row,
:root[data-native] .rail,
:root[data-native] .title-strip,
:root[data-native] .view-cap,
:root[data-native] .view-tools{
  -webkit-user-select:none; user-select:none;
}
/* a canvas is dragged, never selected, and never offers a callout */
:root[data-native] canvas{
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}

/* ── the app's top bar ───────────────────────────────────────────────────
   Inside the native app the masthead and its tab row give way to a bar
   pinned to the top, built by assets/navbar.js: back on the left, the
   title in the middle, theme and account on the right. The website never
   sees any of this. */
:root[data-native] .masthead{ display:none; }
/* the inset comes from the browser where it reports one and from Capacitor's
   SystemBars plugin on Android, which writes the real value into these
   variables since Android 15 draws the app under the bars either way */
:root[data-native]{ --vn-top-inset:max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px)); }
:root[data-native] body{ padding-top:calc(var(--vn-top-inset) + 44px); }
/* in the iOS app's tabs the system bar stands where this one would, outside
   the page, so the page keeps only the inset (navbar.js draws no bar there) */
:root[data-native][data-shell] body{ padding-top:max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px)); }
/* On an iPad in the app's tabs the page fills the screen: the tab bar names
   the section, so the page's own title strip steps aside, keeping only any
   buttons it carries (the shell marks the page data-shell-pad) */
:root[data-shell-pad] .title-strip .name, :root[data-shell-pad] .title-strip .anno{ display:none; }
:root[data-shell-pad] .title-strip:not(:has(.ts-views)){ display:none; }
:root[data-shell][data-shell-pad] body{ padding-top:max(var(--gap, 14px), env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px)); }
.vn-bar{
  position:fixed; top:0; left:0; right:0; z-index:60;
  box-sizing:border-box; height:calc(var(--vn-top-inset, env(safe-area-inset-top)) + 44px);
  padding:var(--vn-top-inset, env(safe-area-inset-top)) 6px 0 6px;
  display:grid; grid-template-columns:minmax(max-content,1fr) minmax(0,max-content) minmax(max-content,1fr); align-items:center;
  background:color-mix(in srgb, var(--paper) 84%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  color:var(--ink); font-family:var(--font-brand);
  -webkit-user-select:none; user-select:none;
  view-transition-name:vn-bar;
}
/* The two ends are never narrower than what they hold, the title has what
   is left and is cut with an ellipsis rather than covered: on a phone the
   menu, account and theme buttons once sat over the brand, with Log out on
   two lines. Where the bar is wide enough the ends share the spare room
   equally, which keeps the title in the centre of the bar on an iPad. */
.vn-bar-left{ display:flex; align-items:center; justify-self:start; }
.vn-bar-right{ display:flex; align-items:center; justify-self:end; gap:.4rem; }
.vn-bar-title{
  min-width:0; font-size:1.02rem; font-weight:600; letter-spacing:.01em; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 .4rem;
}
.vn-bar-brand{ font-weight:500; font-size:1.08rem; }
.vn-back{
  display:inline-flex; align-items:center; gap:.1rem; max-width:100%;
  background:none; border:0; padding:0 .5rem 0 .1rem; min-height:44px;
  color:var(--ink); font:inherit; font-size:1.02rem; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.vn-back:active{ opacity:.45; }
.vn-chevron{
  flex:none; width:.62rem; height:.62rem; margin:0 .32rem 0 .3rem;
  border-left:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(1px,-1px);
}
.vn-back-label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:7em; }
/* when the title would still be cut, the back button keeps its chevron and
   drops its label, as an iPhone's bar does (navbar.js measures) */
.vn-bar.vn-bar-tight .vn-back-label{ display:none; }
.vn-bar.vn-bar-tight .vn-back{ padding-right:.2rem; }
.vn-bar .vn-auth-slot{ display:inline-flex; align-items:center; gap:.4rem; }
/* the theme switch is the Log in button's twin: the same height, type and
   padding, as wide as its word needs. Both stay that size to the eye and
   take the bar's whole height under a finger. */
.vn-bar .theme-toggle{ padding:.28rem .6rem; min-height:0; }
.vn-bar .theme-toggle, .vn-bar .vn-auth-btn, .vn-bar .vn-auth-name{ position:relative; }
.vn-bar .theme-toggle::after, .vn-bar .vn-auth-btn::after, .vn-bar .vn-auth-name::after{
  content:""; position:absolute; left:0; right:0; top:-10px; bottom:-10px;
}
.vn-bar .vn-auth-btn, .vn-bar .vn-auth-name{ white-space:nowrap; }
.vn-bar .vn-auth-name{ max-width:9.6em; letter-spacing:.1em; }
/* signed in, the bar shows the account button alone: it opens the account
   card, and Log out lives there, so the bar keeps to one line on a phone */
.vn-bar .vn-auth-name + .vn-auth-btn{ display:none; }

/* pages slide like screens: in from the right going forward, out again
   coming back. Only the app opts in (navbar.js adds the @view-transition
   rule), so on the website these rules never fire. */
::view-transition-old(root), ::view-transition-new(root){
  animation-duration:.34s; animation-timing-function:cubic-bezier(.32,.72,0,1);
  mix-blend-mode:normal;
}
:root[data-vn-dir="push"]::view-transition-old(root){ animation-name:vn-out-left; }
:root[data-vn-dir="push"]::view-transition-new(root){ animation-name:vn-in-right; }
:root[data-vn-dir="back"]::view-transition-old(root){ animation-name:vn-out-right; }
:root[data-vn-dir="back"]::view-transition-new(root){ animation-name:vn-in-left; }
::view-transition-old(vn-bar), ::view-transition-new(vn-bar){ animation-duration:.2s; }
@keyframes vn-in-right{ from{ transform:translateX(100%); } }
@keyframes vn-out-left{ to{ transform:translateX(-28%); opacity:.55; } }
@keyframes vn-in-left{ from{ transform:translateX(-28%); opacity:.55; } }
@keyframes vn-out-right{ to{ transform:translateX(100%); } }
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root), ::view-transition-new(root){ animation:none; }
}

/* A touch screen has no hover and no scroll wheel, so the viewports get the
   room instead: a stage sized for a thumb, and the gesture claimed from the
   browser so a pinch zooms the brain rather than the page. */
@media (pointer:coarse){
  .mri-stage{ touch-action:none; }
}

/* ── landscape on a short screen: the chrome gives the height back ──────
   Landscape is the posture the app is designed in, and there the scarce
   axis is height — yet the title strip and the stages' fixed clamps spent
   it before any content appeared (the header itself is the slim bar of
   the island at every width since v11.63). Under 1120px of height in
   landscape the strip tightens and the viewport grid is sized from the
   height that is actually there rather than from fixed clamps. Phones in
   landscape pass the min-width gate too, which is fine: the clamp floors
   keep the stages usable and the page simply scrolls.
   Classes are doubled where a page sheet declares the same single class,
   so these win whichever order the sheets land in. */
@media (orientation: landscape) and (max-height: 1120px) and (min-width: 761px){
  .title-strip.title-strip{ padding:.45rem .9rem; margin-bottom:10px; }
  .title-strip .name{ font-size:1.05rem; }
  .masthead + * .title-strip{ margin-top:0; }

  .studio{ grid-template-columns:260px minmax(0,1fr); }

  /* the grid takes what the chrome gave back: two rows that fill the
     screen, one row that fills it alone */
  .views:not(.solo) .mri-stage{ height:clamp(200px, calc((100vh - 330px)/2), 560px); height:clamp(200px, calc((100dvh - 330px)/2), 560px); }
  .views.solo .mri-stage{ height:clamp(300px, calc(100vh - 260px), 900px); height:clamp(300px, calc(100dvh - 260px), 900px); }
}
/* the 768-tall iPads: the title strip wraps to two lines at this width, so
   the stages surrender the difference rather than push past the fold */
@media (orientation: landscape) and (max-height: 800px) and (min-width: 761px){
  .views:not(.solo) .mri-stage{ height:clamp(185px, calc((100vh - 372px)/2), 560px); height:clamp(185px, calc((100dvh - 372px)/2), 560px); }
}

/* ── a stage whose GL context has been taken away ────────────────────────
   iPadOS evicts background WebGL contexts; coming back then shows black.
   stage-lifecycle.js drops this button on the stage when it happens. */
.ctx-lost{
  position:absolute; inset:0; z-index:5; width:100%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.82); color:#FFFFFF; border:0; cursor:pointer;
  font-family:var(--font-brand); font-weight:500; font-size:.68rem;
  letter-spacing:.22em; text-transform:uppercase;
}

/* ── a screen worked by fingers ──────────────────────────────────────────
   Apple's guidance is 44 points and nothing interactive here reached it:
   segment cells were 26px, tab buttons 27, checkboxes 14. Under a coarse
   pointer the controls grow to size; a mouse sees none of this. The
   slice-tool's edge sliders are exempt — they are custom-drawn and sized
   for touch already, and a blanket range rule would break their vertical
   writing mode. */
button, .ts-btn, .seg-btn, .barow{ touch-action:manipulation; }
/* a double tap anywhere zooms nothing: the pages are screens, with their own
   pinch on the views; the page itself still pinches on the website, for whoever
   needs it larger, and not at all inside the apps (the shell's viewport) */
html{ touch-action:manipulation; }
/* the scrollbars follow the theme (v12.85, at the owner's word: on a Mac that draws its scrollbars always, the
   Tractography page's region box carried a white track down its edge on the dark theme, the page's colour scheme
   having been left to the browser's default): the root's colour scheme is the site's theme, so the system's own
   scrollbars and controls take the theme's colours, and the islands' scrollers, the boxes, sheets, minis and lists,
   show a thin bar in the bar's soft ink on no track; the page's own scrollbar keeps the system's look */
:root[data-theme="dark"]{ color-scheme:dark; }
:root:not([data-theme="dark"]){ color-scheme:light; }
.drawer-box, .pop, .mini, .rpick-pop, .reading, .ring-sheet{ scrollbar-color:var(--bar-soft, var(--ink-60)) transparent; }
.drawer-box *, .pop *, .mini, .mini *, .rpick-pop *, .reading *, .ring-sheet *{ scrollbar-width:thin; }
@media (pointer:coarse){
  .ts-btn{ min-height:44px; }
  .seg-btn{ width:44px; height:44px; }
  .theme-toggle{ min-height:44px; }
  .barow{ min-height:44px; }
  .rchip button{ min-width:36px; min-height:36px; }
  .toggle input[type="checkbox"]{ width:22px; height:22px; }
  input[type="range"]:not(.slice-range){ height:34px; }
}
/* the grown controls thicken the chrome, so the stages give it back */
@media (pointer:coarse) and (orientation:landscape) and (max-height:1120px){
  .views:not(.solo) .mri-stage{ height:clamp(185px, calc((100vh - 412px)/2), 560px); height:clamp(185px, calc((100dvh - 412px)/2), 560px); }
  /* grown to 44px, the full toolbars wrap to two rows in a 1024-wide grid;
     the wordier parts go, as they already do on a phone */
  .view-tools .tool-label{ display:none; }
  .view-cap span{ display:none; }
}
/* the smallest landscape iPads with touch: the strip wraps twice at 44px,
   so the four-up runs small — solo view is the working mode at this size,
   and it gets the full height */
@media (pointer:coarse) and (orientation:landscape) and (max-height:800px){
  .views:not(.solo) .mri-stage{ height:clamp(155px, calc((100vh - 444px)/2), 560px); height:clamp(155px, calc((100dvh - 444px)/2), 560px); }
}

/* a zoomed diagram (diagram-gestures.js) can be dragged around by mouse,
   and the cursor should say so */
.diag-zoomed{ cursor:grab; }

/* the gesture hints speak the dialect of the pointer actually present:
   fingers hear about pinching, a mouse hears about its wheel */
.tl-touch{ display:none; }
@media (pointer:coarse){
  .tl-touch{ display:inline; }
  .tl-mouse{ display:none; }
}

/* ── 3D export and saved models, the controls a rail card holds ──────── */
.x3d .btn, .models .btn{
  display:inline-block; font-family:var(--font-brand); font-weight:500;
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  border:1px solid var(--ink); background:var(--paper); color:var(--ink);
  padding:.55rem .9rem .48rem; cursor:pointer; border-radius:0;
}
.x3d .btn:disabled{ opacity:.5; cursor:default; }
@media (hover: hover){ .x3d .btn:not(:disabled):hover, .models .btn:hover{ background:var(--ink); color:var(--paper); } }
.x3d .btns{ display:flex; gap:.6rem; }
.x3d .btns .btn{ flex:1; text-align:center; }
.x3d .toggle{ display:flex; align-items:center; gap:.45rem; font-family:var(--font-serif); font-size:.92rem; cursor:pointer; }
.x3d .toggle input{ width:14px; height:14px; accent-color:var(--ink); margin:0; }
.x3d{ display:flex; flex-direction:column; gap:.55rem; margin-top:.4rem; }
.x3d .btns{ margin-top:0; }
.x3d .toggles{ display:grid; gap:.35rem; }
.x3d-note, .x3d-status, .models-note{
  font-family:var(--font-serif); font-style:italic; font-size:.86rem; line-height:1.45;
  color:var(--ink-60); margin:0;
}
.x3d-status:empty, .models-note:empty{ display:none; }
.x3d-status.err, .models-note.err{ color:var(--ink); font-style:normal; }
.models{ display:flex; flex-direction:column; gap:.55rem; margin-top:.4rem; }
.models .mform{ display:flex; gap:.5rem; align-items:stretch; }
.models .mform input{
  flex:1; min-width:0; font-family:var(--font-serif); font-size:.95rem;
  border:1px solid var(--ink); background:var(--paper); color:var(--ink);
  padding:.45rem .6rem; border-radius:0;
}
.models .mform input:focus{ outline:2px solid var(--ink); outline-offset:1px; }
.models .mform .btn{ flex:none; width:auto; padding:.55rem .9rem .48rem; letter-spacing:.18em; font-size:.66rem; }  /* the pages' .card .btn is full-width */
/* the model as a file (v12.28): Export file and Import file side by side under the name */
.models .mfile{ display:flex; gap:.5rem; margin-top:.5rem; }
.models .mfile .btn{ flex:1 1 0; width:auto; padding:.55rem .6rem .48rem; letter-spacing:.18em; font-size:.66rem; }
.models .mlist{ display:flex; flex-direction:column; gap:.3rem; }
.models .mlist.busy{ opacity:.55; pointer-events:none; }
/* the person's own maps under a heading, None until there is one, and the
   example maps under theirs (v12.47) */
.models .mhead{
  font-family:var(--font-brand); font-weight:500; font-size:.55rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-60); border-bottom:1px solid var(--ink-35); padding:.55rem .1rem .3rem; margin-top:.2rem;
}
.models .mnone{ font-family:var(--font-serif); font-style:italic; font-size:.86rem; color:var(--ink-60); padding:.25rem .1rem; }
.models .mrow.example .mdate{ letter-spacing:.1em; }
/* a folded section (v12.47, at the owner's word): Saved maps in the
   atlas's region box, and the widget's own Saved and Examples inside it,
   each shut until its heading is pressed */
.fold{ border-top:1px solid var(--ink-35); margin-top:.7rem; }
.fold > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  font-family:var(--font-brand); font-weight:500; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink); padding:.6rem .1rem .45rem; -webkit-tap-highlight-color:transparent;
}
.fold > summary::-webkit-details-marker{ display:none; }
.fold > summary::after{
  content:""; flex:none; width:.5rem; height:.5rem; margin-right:.3rem;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg); transition:transform .18s ease;
}
.fold[open] > summary::after{ transform:rotate(45deg); }
@media (hover: hover){ .fold > summary:hover{ color:var(--ink); } }
.fold > summary:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.fold-in{ padding:.1rem 0 .4rem; }
.models .fold{ margin-top:.45rem; }
.models .fold > summary{ font-size:.72rem; }
@media (prefers-reduced-motion: reduce){ .fold > summary::after{ transition:none; } }
.models .mrow{ display:flex; align-items:center; gap:.5rem; border:1px solid var(--hair); padding:.3rem .35rem .3rem .6rem; }
.models .mname{
  flex:1; min-width:0; text-align:left; background:none; border:0; padding:.15rem 0; cursor:pointer;
  font-family:var(--font-serif); font-size:.95rem; line-height:1.25; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (hover: hover){ .models .mname:hover{ text-decoration:underline; } }
.models .mdate{ flex:none; font-family:var(--font-brand); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-60); }
.models .mdel{
  flex:none; width:1.6rem; height:1.6rem; border:1px solid var(--hair); background:none; color:var(--ink);
  font-size:.95rem; line-height:1; cursor:pointer; padding:0;
}
.models .mdel.armed{ width:auto; padding:0 .45rem; font-family:var(--font-brand); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; background:var(--ink); color:var(--paper); border-color:var(--ink); }
/* Save reads Replace? for a moment when the name is kept with another view (v12.48) */
.models .mform .btn.armed{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
@media (hover: hover){ .models .mdel:hover{ background:var(--ink); color:var(--paper); } }
@media (pointer: coarse){ .models .mdel{ min-width:36px; min-height:36px; } }

/* ── the header stays, and carries the island ───────────────────────────
   The masthead is pinned to the top of every page: a slim bar, since
   v11.63 the iOS app's (Shell.swift), with the brand at the left, the
   theme and account buttons at the right and, between them, a floating
   island of the app's five tabs, Atlases, Library, Practice, About and
   Account, each an icon over its name, the one the page belongs to lit.
   navbar.js builds the island after the brand, moves the buttons out of
   the page's row of section links and marks the header .isled; the row
   stays in the page, hidden, its links still there to be read, and the
   links are hidden before the script runs so the old row never flashes.
   From 1001px the three stand on one line, as on an iPad; below that the
   island has a line of its own under the brand and the buttons, and on a
   phone it spans the width, its five tabs equal. The island is inside the
   header, so a page that measures its header's height (the atlas screens'
   --screen-top) counts it, and wherever the header steps aside (a phone
   held sideways on the atlases) the island goes with it. Once the page
   has scrolled the bar is a material, not a wall (navbar.js sets .stuck):
   the page shows faintly through, as the app's own bar lets it. Classes
   are doubled to outrank each page's own single-class rules whichever
   order the sheets land in. */
.masthead-sentinel{ height:1px; margin-bottom:-1px; }
.masthead.masthead{
  position:sticky; top:0; z-index:80; background:var(--paper);
  display:grid; grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr); grid-template-areas:"brand isle tools";
  align-items:center; column-gap:clamp(.8rem,2vw,1.6rem); row-gap:.45rem;
  padding:.55rem clamp(14px,2.5vw,48px); text-align:left;
}
.masthead.masthead::after{ content:none; }
.masthead.masthead.stuck{
  background:color-mix(in srgb, var(--paper) 84%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
}
html{ scroll-padding-top:5.2rem; }
.masthead.masthead .brand, .masthead.masthead.stuck .brand{ grid-area:brand; justify-self:start; margin:0; font-size:1.3rem; }
/* the old row of section links: its links hidden, it holds the buttons
   at the right until the script moves them out, then goes */
.masthead.masthead > .nav-row.nav-row{
  grid-area:tools; justify-self:end; display:inline-flex; flex-direction:row; flex-wrap:nowrap;
  align-items:center; gap:.45rem; padding:0; margin:0;
}
.masthead.masthead > .nav-row > a{ display:none; }
.masthead.masthead.isled > .nav-row.nav-row{ display:none; }
.masthead.masthead > .nav-tools{ grid-area:tools; justify-self:end; display:inline-flex; align-items:center; gap:.45rem; }
/* Log in, the language and the theme stand one height, and each box keeps one size whichever language or theme
   its word is in (v12.79, at the owner's word): a Chinese word, drawn in the system's face, set a taller line than
   the Latin, and every word made its box its own width. Each box is as wide as its widest word, Log in, 中文 and
   Light, so the English boxes keep their size and the Chinese take it; under a finger all three are 40px tall. */
.masthead.masthead .vn-auth-btn, .masthead.masthead .vn-auth-name, .masthead.masthead .theme-toggle{
  box-sizing:border-box; height:26px; min-height:0; padding-top:0; padding-bottom:0;
}
.masthead.masthead .vn-auth-btn, .masthead.masthead .theme-toggle{
  display:inline-flex; align-items:center; justify-content:center; line-height:1;
}
.masthead.masthead .vn-auth-name{ line-height:24px; }
.masthead.masthead .vn-auth-btn{ min-width:6.1em; }
.masthead.masthead .vn-auth-name + .vn-auth-btn{ min-width:7.1em; }
.masthead.masthead .vn-lang{ min-width:4.5em; }
.masthead.masthead .theme-toggle:not(.vn-lang){ min-width:7em; }
@media (pointer:coarse){
  .masthead.masthead .vn-auth-btn, .masthead.masthead .vn-auth-name, .masthead.masthead .theme-toggle{ height:40px; }
  .masthead.masthead .vn-auth-name{ line-height:38px; }
}
/* the island: a capsule of a faint tint, the lit tab a lens lifted from it */
.vn-isle{
  grid-area:isle; justify-self:center; max-width:100%; box-sizing:border-box;
  display:inline-flex; align-items:stretch; gap:2px; padding:3px; border-radius:999px;
  --lens:#FFFFFF; --capsule:rgba(17,17,17,.06); --edge:rgba(17,17,17,.1);
  --lift:0 1px 2px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.08); --lens-lift:0 1px 3px rgba(0,0,0,.14);
  background:var(--capsule); border:1px solid var(--edge); box-shadow:var(--lift);
}
:root[data-theme="dark"] .vn-isle{
  --lens:rgba(255,255,255,.13); --capsule:rgba(255,255,255,.07); --edge:rgba(255,255,255,.12);
  --lift:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35); --lens-lift:0 1px 3px rgba(0,0,0,.5);
}
.vn-tab{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; box-sizing:border-box;
  min-width:4.6rem; height:44px; padding:0 .8rem; border-radius:999px;
  color:var(--ink-60); text-decoration:none; -webkit-tap-highlight-color:transparent;
  font-family:var(--font-brand); font-weight:500; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; line-height:1;
}
.vn-tab svg{ width:21px; height:21px; display:block; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.vn-tab span{ display:block; white-space:nowrap; }
.vn-tab[aria-current]{ color:var(--ink); background:var(--lens); box-shadow:var(--lens-lift); }
@media (hover:hover){ .vn-tab:hover{ color:var(--ink); } }
.vn-tab:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
/* up to 1000px the island has a line of its own under the brand and the buttons */
@media (max-width:1000px){
  .masthead.masthead{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"brand tools" "isle isle"; padding-top:.6rem; padding-bottom:.6rem; }
  /* the buttons at a size a thumb finds at once, all 40px tall */
  .masthead.masthead .vn-auth-btn, .masthead.masthead .vn-auth-name, .masthead.masthead .theme-toggle{
    box-sizing:border-box; height:40px; min-height:0; font-size:.72rem; letter-spacing:.18em;
  }
  .masthead.masthead .theme-toggle{ padding:0 .65rem; }
  .masthead.masthead .vn-auth-name{ line-height:38px; }
  .masthead.masthead .vn-auth-btn, .masthead.masthead .vn-auth-pick{ padding-left:.65rem; padding-right:.65rem; }
  .masthead.masthead .vn-auth-btn{ min-width:5.8em; }
  .masthead.masthead .vn-lang{ min-width:4.4em; }
  .masthead.masthead .theme-toggle:not(.vn-lang){ min-width:6.8em; }
  .masthead.masthead .theme-toggle .th-dot{ width:.8rem; height:.8rem; }
  /* signed in, the account button stands alone: it opens the account card,
     which carries Log out */
  .masthead.masthead .vn-auth-name + .vn-auth-btn{ display:none; }
}
/* on a phone the island spans the width, the five tabs equal */
@media (max-width:600px){
  .masthead.masthead .brand, .masthead.masthead.stuck .brand{ font-size:1.2rem; }
  .vn-isle{ justify-self:stretch; display:flex; }
  .vn-tab{ flex:1 1 0; min-width:0; padding:0 .2rem; }
}
@media (max-width:420px){ .vn-tab{ font-size:.56rem; letter-spacing:.12em; } }
@media (max-width:440px){
  .masthead.masthead{ column-gap:.5rem; }
  .masthead.masthead .theme-toggle{ padding:0 .5rem; }
  .masthead.masthead .vn-auth-btn, .masthead.masthead .vn-auth-pick{ padding-left:.5rem; padding-right:.5rem; }
  .masthead.masthead .vn-auth-btn, .masthead.masthead .vn-auth-name, .masthead.masthead .theme-toggle{ letter-spacing:.14em; }
  .masthead.masthead .vn-auth-btn{ min-width:5.2em; }
  .masthead.masthead .vn-lang{ min-width:3.9em; }
  .masthead.masthead .theme-toggle:not(.vn-lang){ min-width:6.2em; }
  /* the name grows smaller with the screen, so the three buttons never stand over it (v12.79; it ran under Log in
     on a 375px phone) */
  .masthead.masthead .brand, .masthead.masthead.stuck .brand{ font-size:clamp(.9rem, 11.03vw - 26.8px, 1.2rem); }
}
/* only where even the word would push the line over does the theme
   switch keep its dot alone; the word stays for a screen reader */
@media (max-width:374px){
  .masthead.masthead .theme-toggle #themeLbl{
    position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
  }
  .masthead.masthead .theme-toggle, .masthead.masthead .theme-toggle:not(.vn-lang){ width:40px; min-width:0; padding:0; justify-content:center; }
  .masthead.masthead .brand, .masthead.masthead.stuck .brand{ font-size:clamp(.8rem, 11.03vw - 22.5px, 1.2rem); }
}
@media (max-width:359px){ .vn-tab{ font-size:.52rem; letter-spacing:.08em; } }
@media (max-width:340px){ .masthead.masthead{ padding-left:10px; padding-right:10px; } }
/* an anchor scrolled to lands clear of the pinned bar, taller where the
   island has its own line */
@media (max-width:1000px){ html{ scroll-padding-top:8rem; } }
/* a phone held sideways has little height to spare: there the header
   scrolls away with the page instead of pinning, as the app's shell hides
   its bar sideways (the atlas screens hide the header there altogether) */
@media (pointer:coarse) and (orientation:landscape) and (max-height:500px){
  .masthead.masthead{ position:static; }
  html{ scroll-padding-top:0; }
}
/* the same menu inside the app: a button in the bar opens the sections under it */
.vn-menu-btn{
  display:inline-flex; align-items:center; justify-content:center; width:40px; height:36px;
  background:none; border:0; color:var(--ink); cursor:pointer; padding:0;
}
.vn-menu-btn .bars{ width:18px; height:13px; position:relative; }
.vn-menu-btn .bars::before, .vn-menu-btn .bars::after, .vn-menu-btn .bars i{
  content:""; position:absolute; left:0; right:0; height:1.6px; background:currentColor;
}
.vn-menu-btn .bars::before{ top:0; } .vn-menu-btn .bars i{ top:50%; margin-top:-.8px; } .vn-menu-btn .bars::after{ bottom:0; }
.vn-menu{
  position:fixed; z-index:59; left:0; right:0; top:calc(var(--vn-top-inset, env(safe-area-inset-top)) + 44px);
  display:none; flex-direction:column; background:var(--paper);
  border-bottom:1px solid var(--ink); box-shadow:0 14px 30px rgba(0,0,0,.25);
  padding:.2rem 0 .4rem; max-height:calc(100vh - 44px - var(--vn-top-inset, env(safe-area-inset-top))); overflow:auto;
}
.vn-menu.open{ display:flex; }
.vn-menu a{
  display:block; padding:.85rem 1rem; text-decoration:none; color:var(--ink);
  font-family:var(--font-brand); font-weight:500; font-size:.74rem; letter-spacing:.3em; text-transform:uppercase;
  border-bottom:1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.vn-menu a[aria-current]{ font-weight:600; }
.vn-menu a:last-child{ border-bottom:0; }

/* ── where to reach the maker ────────────────────────────────────────────
   navbar.js builds the same links twice for the two places they can sit in
   the app and these rules show one of them: in the top bar from 700px and
   at the foot of the sections menu below it. The website's header carries
   none since v11.63, as the app's tabs carry none: the About page lists
   them, with GitHub. */
.vn-social{ display:inline-flex; align-items:center; gap:2px; }
.vn-social a{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:32px; height:32px; color:var(--ink); text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.vn-social svg{ width:19px; height:19px; display:block; flex:none; }
@media (hover:hover){ .vn-social a:hover{ opacity:.55; } }
.vn-social a:focus-visible{ outline:1px solid var(--ink); outline-offset:1px; }
.vn-bar .vn-social-bar{ display:none; }
.vn-menu .vn-social-menu{ display:grid; grid-template-columns:repeat(2, max-content); gap:0 2.2rem; padding:.3rem 1rem .2rem; }
.vn-menu .vn-social-menu a{
  width:auto; height:auto; min-height:44px; padding:0; gap:.6rem; border-bottom:0; justify-content:flex-start;
  font-family:var(--font-brand); font-weight:500; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
}
.vn-menu .vn-social-menu svg{ width:18px; height:18px; }
.vn-menu .vn-social-menu small{
  display:block; margin-top:.15rem; font-family:var(--font-serif); font-weight:400; font-size:.8rem;
  letter-spacing:0; text-transform:none; color:var(--ink-60);
}
@media (min-width:700px){
  .vn-bar .vn-social-bar{ display:inline-flex; }
  .vn-menu .vn-social-menu{ display:none; }
  .vn-menu > a:last-of-type{ border-bottom:0; }
}

/* ── the feel of a press, a menu and a sheet ────────────────────────────
   After Apple's fluid-interface guidance. A control answers on the press
   itself, not on the release, so nothing feels dead under the finger. A
   menu arrives from the button that opened it and leaves the way it came,
   fast enough to be felt and short enough never to be waited for, and a
   second press mid-flight simply reverses it. The bars and menus are
   materials the page shows through. Anyone who has asked their device for
   less motion gets a plain fade and no scaling; anyone who has asked for
   less transparency or more contrast gets solid chrome. */
.ts-btn, .btn, .seg-btn, .vn-tab, .vn-menu-btn, .theme-toggle, .vn-auth-btn,
.vn-auth-name, .x3d .btn, .models .btn, .models .mdel, .zoom-btn, .cube .ts-btn{
  transition:transform .1s ease-out, background-color .15s ease, color .15s ease, opacity .15s ease;
}
.ts-btn:active, .btn:active, .seg-btn:active, .vn-tab:active, .vn-menu-btn:active,
.theme-toggle:active, .vn-auth-btn:active, .vn-auth-name:active, .x3d .btn:not(:disabled):active,
.models .btn:active, .models .mdel:active, .zoom-btn:active{ transform:scale(.96); }
a.box{ transition:transform .12s ease-out, background .18s ease; }
a.box:active{ transform:scale(.992); }
/* fingers have no hover, so the press also inks the control, as the
   pointer's hover does on a desk */
@media (hover: none){
  .ts-btn:active, .btn:active, .seg-btn:active, .x3d .btn:not(:disabled):active, .models .btn:active{
    background:var(--ink); color:var(--paper);
  }
}

/* the app's section menu: hung from its button at the right of the bar,
   kept in the tree while closed so a press mid-flight reverses the motion
   rather than restarting it, and kept out of reach with visibility */
.vn-menu.vn-menu{
  display:flex; visibility:hidden; opacity:0;
  transform:translateY(-8px) scale(.985); transform-origin:top right;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  transition:opacity .18s cubic-bezier(.32,.72,0,1), transform .22s cubic-bezier(.32,.72,0,1), visibility 0s linear .22s;
}
.vn-menu.vn-menu.open{ visibility:visible; opacity:1; transform:none; transition-delay:0s, 0s, 0s; }
@media (prefers-reduced-motion: reduce){
  .ts-btn:active, .btn:active, .seg-btn:active, .vn-tab:active, .vn-menu-btn:active,
  .theme-toggle:active, .vn-auth-btn:active, .vn-auth-name:active, .x3d .btn:active,
  .models .btn:active, .models .mdel:active, .zoom-btn:active, a.box:active{ transform:none; }
  .ts-btn:active, .btn:active, .seg-btn:active{ background:var(--ink); color:var(--paper); }
  .vn-menu.vn-menu{ transform:none; transition:opacity .15s ease, visibility 0s linear .15s; }
  .vn-menu.vn-menu.open{ transition-delay:0s, 0s; }
}
/* solid chrome for anyone who asked for less transparency or more
   contrast: the bar a wall again, the island's capsule the paper with an
   ink edge and its lit tab inked */
@media (prefers-reduced-transparency: reduce){
  .vn-bar, .masthead.masthead.stuck, .vn-menu.vn-menu{
    background:var(--paper); -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .vn-isle{ background:var(--paper); border-color:var(--ink); box-shadow:none; }
  .vn-tab[aria-current]{ background:var(--ink); color:var(--paper); box-shadow:none; }
}
@media (prefers-contrast: more){
  .vn-bar, .masthead.masthead.stuck, .vn-menu.vn-menu{
    background:var(--paper); -webkit-backdrop-filter:none; backdrop-filter:none;
    border-bottom:1px solid var(--ink);
  }
  .vn-isle{ background:var(--paper); border-color:var(--ink); box-shadow:none; }
  .vn-tab{ color:var(--ink); }
  .vn-tab[aria-current]{ background:var(--ink); color:var(--paper); box-shadow:none; }
}

/* ── a line at the top of a phone (v12.14, at the owner's word) ──────────
   Best experienced on iPad in the iPhone app, Best experienced on desktop on
   the website on a phone, set first in the body by navbar.js, in the
   smallest type the app uses, the slice tool's axis labels' on a phone. */
.vn-best{
  font-family:var(--font-brand); font-weight:500; font-size:.42rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-60); text-align:center; line-height:1; margin:0; padding:.35rem .6rem .3rem;
  -webkit-user-select:none; user-select:none;
}