/* The top bar (templates/partials/bar.html), on every page of tethery.app: the home page, /download
   and /pricing draw it over home.css, the older pages over site.css. It brings what it needs with it
   (its face, its unit and its glass), scoped to the bar, so it looks the same over either sheet. Sizes
   are in --u, one pixel of the 1344-wide mockup frame, as in home.css. In Chrome home.js makes the bar
   and its button a lens (.has-lens); the older pages do not load home.js, so they show the frosted bar
   Safari and Firefox show everywhere. */

@font-face { font-family: "Satoshi"; src: url("/fonts/Satoshi-Variable.woff2?v=e739aff9b4d02c26") format("woff2"); font-weight: 300 900; font-display: swap; }
@property --rim { syntax: "<angle>"; inherits: true; initial-value: 165deg; }

.bar { --u: calc(min(100vw, 1612px) / 1344); --sans: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  position: fixed; z-index: 50; top: calc(24 * var(--u)); left: 0; right: 0; pointer-events: none; }
.bar *, .bar *::before, .bar *::after { box-sizing: border-box; }
/* The download button sits in the bar's corner with the same gap above, below and to its right,
   and its corners are the bar's less that gap, so the two curves run parallel. */
.bar__in { --inset: calc((53 - 38.5) / 2 * var(--u)); --round: calc(18 * var(--u)); pointer-events: auto; position: relative; width: calc(1229 * var(--u)); height: calc(53 * var(--u)); margin: 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--inset) 0 calc(22 * var(--u)); border-radius: var(--round); border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(12, 11, 12, 0.55); backdrop-filter: saturate(150%) blur(18px); -webkit-backdrop-filter: saturate(150%) blur(18px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 12px 40px -18px rgba(0, 0, 0, 0.8); }
.bar__home { display: block; line-height: 0; }
.bar__home img { display: block; height: calc(27 * var(--u)); width: auto; }
.bar__nav { display: flex; align-items: center; height: 100%; font: 500 calc(14.5 * var(--u))/1 var(--sans); }
.bar__nav > a:not(.bar__cta) { color: #C6C9CE; text-decoration: none; margin-right: calc(42 * var(--u)); transition: color 160ms; }
.bar__nav > a:not(.bar__cta):hover, .bar__nav > a:not(.bar__cta)[aria-current="page"] { color: #fff; }
.bar__nav > a:nth-child(3) { margin-right: calc(39 * var(--u)); }
.bar__cta { position: relative; display: inline-flex; align-items: center; gap: calc(9 * var(--u)); height: calc(38.5 * var(--u)); padding: 0 calc(18 * var(--u)) 0 calc(17 * var(--u)); border-radius: calc(var(--round) - var(--inset));
  color: #0B0B0C; text-decoration: none; font-weight: 500; --rim-a: 1; --rim-b: 0.6; --spec: 0.5;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(226, 228, 233, 0.86));
  -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
  box-shadow: inset 0 1px 1px #fff, inset 0 -10px 14px -10px rgba(255, 255, 255, 0.9), inset 0 -1px 1px rgba(0, 0, 0, 0.08), 0 2px 6px -2px rgba(0, 0, 0, 0.6), 0 8px 22px -10px rgba(255, 255, 255, 0.3); }
.bar__cta svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); fill: currentColor; margin-top: -2px; }
.bar__cta svg path[stroke] { fill: none; }

/* The download button is glass as the page's buttons are (home.css, "buttons"): a rim brightest on the
   edge facing the pointer and a highlight that follows it (home.js sets --mx, --my and --rim). */
.bar__cta { --mx: 50%; --my: -40%; --lit: 0; --rim: 165deg; isolation: isolate;
  transition: --rim 500ms var(--ease), background-color 320ms var(--ease), box-shadow 320ms var(--ease), transform 460ms cubic-bezier(0.25, 1.3, 0.45, 1); }
.bar__cta::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(var(--rim), rgba(255, 255, 255, var(--rim-a)) 0%, rgba(255, 255, 255, calc(var(--rim-a) * 0.25)) 22%, rgba(255, 255, 255, 0.02) 48%, rgba(255, 255, 255, calc(var(--rim-b) * 0.3)) 76%, rgba(255, 255, 255, var(--rim-b)) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.bar__cta::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(calc(110 * var(--u)) circle at var(--mx) var(--my), rgba(255, 255, 255, var(--spec)), rgba(255, 255, 255, 0) 70%);
  mix-blend-mode: screen; mix-blend-mode: plus-lighter; opacity: var(--lit); transition: opacity 320ms var(--ease); }
.bar__cta:hover { --lit: 1; }
/* Pressed, it gives at once; let go, it springs back a touch past where it was. */
.bar__cta:active { transform: scale(0.965); transition-duration: 500ms, 320ms, 320ms, 90ms; transition-timing-function: var(--ease), var(--ease), var(--ease), ease-out; }
html[data-motion="still"] .bar__cta:active { transform: none; }

/* The bar under the lens: clearer, and lit along its rim as the buttons are, so they read as one glass. */
.has-lens .bar__in { isolation: isolate; border-color: transparent; background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)), rgba(10, 10, 12, 0.46);
  box-shadow: inset 0 0 calc(10 * var(--u)) rgba(255, 255, 255, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.16), inset 0 -12px 18px -14px rgba(255, 255, 255, 0.1), 0 12px 40px -18px rgba(0, 0, 0, 0.8); }
.has-lens .bar__in::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(172deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0.02) 55%, rgba(255, 255, 255, 0.06) 80%, rgba(255, 255, 255, 0.24));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
/* Where the reader asks for less see-through, the glass goes solid. */
@media (prefers-reduced-transparency: reduce) {
  .bar__in { -webkit-backdrop-filter: none; backdrop-filter: none; background: #0E0E10; }
}

/* The menu's button and the menu itself are a phone's alone (bar.html). */
.bar__menu, .menu { display: none; }

/* Phones and narrow windows: the logo and the download in the bar, and the menu's button beside it, a square of
   the same glass at the right edge (the owner, 2026-10-27). */
@media (max-width: 899px) {
  .bar { --u: 1px; top: 12px; }
  .bar__in { --inset: 6px; --round: 16px; width: calc(100% - 24px - 60px); height: 52px; margin: 0 0 0 12px; padding: 0 var(--inset) 0 16px; }
  .bar__home img { height: 24px; }
  .bar__nav > a:not(.bar__cta) { display: none; }
  .bar__cta { height: 40px; font-size: 14px; padding: 0 16px; }
  .bar__menu { pointer-events: auto; position: absolute; top: 0; right: 12px; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer;
    background: rgba(12, 11, 12, 0.55); backdrop-filter: saturate(150%) blur(18px); -webkit-backdrop-filter: saturate(150%) blur(18px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 12px 40px -18px rgba(0, 0, 0, 0.8); -webkit-tap-highlight-color: transparent; }
  .bar__menu svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
  .bar__menu:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; }

  /* The menu: the whole screen, its own copy of the bar at the top, the three pages large and numbered as the
     help numbers its chapters, the smaller pages under them, and the download at the foot. */
  .menu:popover-open { --sans: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    display: flex; position: fixed; inset: 0; width: auto; height: auto; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: auto; overscroll-behavior: contain;
    background: #09090B; color: #fff; animation: menu-in 200ms cubic-bezier(0.2, 0.7, 0.2, 1); }
  .menu::backdrop { background: transparent; }
  @keyframes menu-in { from { opacity: 0; } }
  .menu *, .menu *::before, .menu *::after { box-sizing: border-box; }
  .menu__in { display: flex; flex-direction: column; width: 100%; min-height: 100%; padding: 96px 24px calc(28px + env(safe-area-inset-bottom)); }
  .menu__k { margin: 0 0 10px; font: 400 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #8E9298; }
  .menu ul { list-style: none; margin: 0; padding: 0; }
  .menu__big a { display: flex; align-items: baseline; gap: 14px; padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: #F3F3F3; text-decoration: none;
    font: 600 34px/1 var(--sans); letter-spacing: -0.03em; }
  .menu__big a b { font: 400 12px/1 var(--mono); letter-spacing: 0.06em; color: #FF6650; }
  .menu__big a[aria-current="page"] { color: #fff; }
  .menu__big a[aria-current="page"]::after { content: ""; align-self: center; width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: #FA4C33; box-shadow: 0 0 10px rgba(250, 76, 51, 0.8); }
  .menu .menu__small { display: flex; flex-wrap: wrap; gap: 12px 22px; margin: 26px 0 40px; }
  .menu__small a { color: #A4A8AF; text-decoration: none; font: 450 15px/1.4 var(--sans); }
  .menu__go { display: flex; align-items: center; justify-content: center; gap: 10px; height: 54px; margin-top: auto; border-radius: 14px; color: #fff; text-decoration: none; font: 500 17px/1 var(--sans);
    background: rgba(255, 64, 34, 0.82); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), inset 0 -10px 16px -12px rgba(255, 196, 176, 0.6), 0 12px 30px -12px rgba(250, 76, 51, 0.9); }
  .menu__go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  /* The page does not scroll behind it. */
  html:has(.menu:popover-open) { overflow: hidden; }
}
html[data-motion="still"] .menu:popover-open { animation: none; }