/* noiro.dev: Weir's page. Flow, the app's live world map, is the hero. */

/* ---------- Weir's colours ---------- */
/* Theme.swift sets these in Display P3; these are their sRGB neighbours. The map follows Apple Maps' muted style.
   Flow, held, mint and amber are in styles.css, since the menu bar panel on every page uses them too. */
:root {
  --weir-lagoon: #00a1b5;
  --weir-stone: #656974; --weir-glow: #8e49f3;
  --map-water: #cbd7e0; --map-land: #f2f2ef; --map-coast: rgba(70, 85, 105, .16);
  --fl-glass: rgba(255, 255, 255, .58); --fl-glass-line: rgba(255, 255, 255, .8); --fl-glass-edge: rgba(0, 0, 0, .09);
  --fl-glass-solid: rgba(250, 250, 252, .8); --fl-seg: rgba(255, 255, 255, .95);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --weir-lagoon: #00abc0;
    --weir-stone: #a8abb6; --weir-glow: #c492ff;
    --map-water: #13171d; --map-land: #24272c; --map-coast: rgba(255, 255, 255, .06);
    --fl-glass: rgba(38, 40, 46, .52); --fl-glass-line: rgba(255, 255, 255, .13); --fl-glass-edge: rgba(0, 0, 0, .45);
    --fl-glass-solid: rgba(34, 35, 40, .82); --fl-seg: rgba(255, 255, 255, .17);
  }
}
:root[data-theme="dark"] {
  --weir-lagoon: #00abc0;
  --weir-stone: #a8abb6; --weir-glow: #c492ff;
  --map-water: #13171d; --map-land: #24272c; --map-coast: rgba(255, 255, 255, .06);
  --fl-glass: rgba(38, 40, 46, .52); --fl-glass-line: rgba(255, 255, 255, .13); --fl-glass-edge: rgba(0, 0, 0, .45);
  --fl-glass-solid: rgba(34, 35, 40, .82); --fl-seg: rgba(255, 255, 255, .17);
}

/* ---------- The hero ---------- */
.flowhero {
  --copy-x: clamp(24px, 4.6vw, 80px); --copy-w: clamp(420px, 35vw, 540px); --side-w: 292px;
  --copy-end: calc(var(--copy-x) + var(--copy-w));
  position: relative; overflow: hidden; background: var(--bg);
}
.flowhero__copy { position: relative; z-index: 3; }
.flowhero .apphero__icon { width: 84px; height: 84px; margin-bottom: 14px; }
.flowhero .wordmark--app { font-size: clamp(4.2rem, 8.6vw, 8.4rem); }
.flowhero .apphero__lede { max-width: 30ch; font-size: clamp(1.25rem, 1.75vw, 1.62rem); }
.flowhero .app__cta { animation: rise-in .9s var(--ease) .7s backwards; }
.flowhero .tryq { margin-top: 28px; }
.flowhero .tryq__label { color: var(--ink-2); }
.flowhero .tryq input {
  color: var(--ink); background: var(--fl-glass-solid);
  box-shadow: inset 0 0 0 .5px var(--line), 0 1px 2px rgba(0, 0, 0, .05);
}
.flowhero .tryq input::placeholder { color: var(--ink-3); }
.flowhero .tryq input:focus { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--weir-flow) 70%, transparent); }
.flowhero .tryq__chips button { color: var(--ink-2); background: var(--fill); box-shadow: inset 0 0 0 .5px var(--line); }
.flowhero .tryq__chips button:hover { color: var(--ink); background: var(--fill-2); }
.flowhero .tryq__out { color: var(--ink-2); }
.flowhero__foot { display: flex; align-items: center; gap: 12px; margin-top: 4px; animation: rise-in .9s var(--ease) .95s backwards; }
.flowhero .toggle {
  display: inline-flex; align-items: center; gap: 8px; flex: none; height: 34px; padding: 0 14px; border-radius: 999px;
  font-size: 13.5px; color: var(--ink-2); background: var(--fill); box-shadow: inset 0 0 0 .5px var(--line);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.flowhero .toggle:hover { background: var(--fill-2); }
.flowhero .toggle[aria-pressed="true"] { background: var(--weir-flow); color: #fff; box-shadow: none; }
.flowhero__note { font-size: 13px; line-height: 1.4; color: var(--ink-3); }
/* Coming soon is words in the meta line, not a button-shaped pill, so the one filled button is Email me. */
.flowhero__soon { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.flowhero__soon .soon__dot { flex: none; }
/* Without scripts there's no map, so the try box and its note would do nothing. */
html:not(.js) .tryq, html:not(.js) .flowhero__foot { display: none; }

/* ---------- Flow ---------- */
html:not(.js) .flow, .flowhero.is-nomap .flow, .flow [hidden] { display: none; }
.flow { position: relative; font-size: 13px; letter-spacing: -.005em; }
.flow__map { position: relative; overflow: hidden; background: var(--map-water); touch-action: pan-y; transition: opacity .8s var(--ease); }
.flowhero:not(.is-ready) .flow__map > :not(.flow__fade) { opacity: 0; }
.flow__map > * { transition: opacity .9s var(--ease); }
.flow__map.is-arc { cursor: pointer; }
.flow__map.is-dragging { cursor: grabbing; }
.flow__land, .flow__fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.flow__fade { position: absolute; inset: 0; pointer-events: none; }

/* Liquid Glass: a frosted surface with a bright rim, as on every floating panel in Weir. */
.fglass {
  background: var(--fl-glass);
  -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8);
  box-shadow: inset 0 0 0 .5px var(--fl-glass-line), 0 0 0 .5px var(--fl-glass-edge), 0 2px 6px rgba(0, 0, 0, .1), 0 12px 32px rgba(0, 20, 50, .08);
}
.flow .ico { width: 1.15em; height: 1.15em; }

/* Home: a blue disc with a house, inside the weir ring drawn on the canvas. */
.flow__home {
  position: absolute; left: 0; top: 0; z-index: 3; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--weir-flow) 78%, #fff), var(--weir-flow));
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7), 0 0 8px color-mix(in srgb, var(--weir-flow) 50%, transparent);
}
.flow__home .ico { width: 18px; height: 18px; }

/* Country labels and edge pills */
.flow__labels { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.fpill {
  position: absolute; left: 0; top: 0; pointer-events: auto;
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 13px;
  font: 600 12px/1 var(--font); letter-spacing: 0; color: var(--ink); white-space: nowrap;
  transform-origin: 0 0; transform: translate(-50%, -50%);
  transition: scale .22s var(--spring), background-color .25s, opacity .25s;
  animation: fpill-in .3s var(--ease) backwards;
}
.fpill__flag { font-size: 13px; line-height: 1; }
.fpill__pct {
  max-width: 0; margin-left: -5px; overflow: hidden; opacity: 0;
  font-size: 11px; font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums;
  transition: max-width .25s var(--ease), margin .25s var(--ease), opacity .2s;
}
.fpill.is-hot { scale: 1.04; }
.fpill.is-sel { scale: 1.08; background: color-mix(in srgb, var(--weir-flow) 35%, var(--fl-glass)); }
.fpill.is-hot .fpill__pct, .fpill.is-sel .fpill__pct { max-width: 44px; margin-left: 0; opacity: 1; }
.fpill__arrow { display: none; }
.fpill--edge { gap: 4px; padding: 0 8px; }
.fpill--edge .fpill__name, .fpill--edge .fpill__pct { display: none; }
.fpill--edge .fpill__arrow { display: block; width: 11px; height: 11px; color: var(--ink-2); }
.fpill:focus-visible { outline-offset: 1px; border-radius: 13px; }
@keyframes fpill-in { from { opacity: 0; scale: .6; } }

/* Map controls */
.flow__controls { position: absolute; z-index: 5; top: 14px; right: 14px; display: grid; gap: 8px; justify-items: center; }
.fctl { display: grid; border-radius: 17px; color: var(--ink); }
.fctl button { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 17px; }
.fctl button:hover { background: var(--hover); }
.fctl hr { width: 18px; height: 0; margin: 0 auto; border: 0; border-top: .5px solid var(--line); }
.fctl .ico { width: 15px; height: 15px; }

/* Devices card */
.flow__devices { z-index: 5; width: 256px; border-radius: 20px; color: var(--ink); }
.fdev__head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 14px; border-radius: 20px; text-align: left; }
.fdev__head > .ico:first-child { color: var(--ink-3); width: 18px; height: 18px; }
.fdev__head b { font-size: 14px; font-weight: 600; }
.fdev__picked { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--ink-3); }
.fdev__chev { margin-left: auto; width: 11px !important; height: 11px !important; color: var(--ink-3); opacity: .7; rotate: -90deg; transition: rotate .3s var(--ease); }
.flow__devices.is-open .fdev__chev { rotate: 0deg; }
.fdev__list { list-style: none; margin: 0; padding: 0 6px 8px; display: grid; gap: 2px; }
.fdev__row {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 4px; align-items: center;
  width: 100%; padding: 6px 8px; border-radius: 10px; text-align: left; color: var(--ink-3); transition: background-color .15s;
}
.fdev__row:hover { background: var(--hover); }
.fdev__row[aria-pressed="true"] { background: color-mix(in srgb, var(--weir-flow) 16%, transparent); color: var(--weir-flow); }
.fdev__row > .ico { grid-row: span 2; justify-self: center; width: 19px; height: 19px; }
.fdev__name { font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fdev__row[aria-pressed="true"] .fdev__name { font-weight: 600; }
.fdev__n { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fdev__ticks { grid-column: 2 / 4; display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); gap: 2px; }
.fdev__ticks i { height: 4px; border-radius: 2px; background: var(--fill-2); }
.fdev__ticks i.on { background: color-mix(in srgb, currentColor 85%, transparent); }

/* The tide. Its one column can't grow past the panel, so nothing in it moves when a bar is read. */
.flow__tide { z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px 16px; border-radius: 24px; color: var(--ink); container-type: inline-size; }
.ftide__head { display: flex; align-items: center; gap: 10px; min-height: 26px; }
.tpill {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px; flex: none;
  font-size: 12px; font-weight: 500; color: var(--weir-flow); background: color-mix(in srgb, var(--weir-flow) 13%, transparent);
}
.tpill--held { color: var(--weir-held); background: color-mix(in srgb, var(--weir-held) 13%, transparent); }
.tpill .ico { width: 13px; height: 13px; }
.tpill b { font: 600 14px/1 ui-rounded, var(--font); color: var(--ink); font-variant-numeric: tabular-nums; }
.ftide__rate { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
/* A narrow panel (a 1200 px window, say) has room for the two counts and the clear button, not the rate as well. */
@container (max-width: 380px) { .ftide__rate { display: none; } }
.ftide__clear { display: grid; place-items: center; width: 22px; height: 22px; flex: none; margin-left: auto; color: var(--ink-3); border-radius: 50%; }
.ftide__clear:hover { color: var(--ink); }
.ftide__clear .ico { width: 15px; height: 15px; }
.ftide__bars { height: 64px; display: flex; align-items: stretch; gap: 3px; }
.ftide__bars.is-dense { gap: 2px; }
.tbar {
  position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 1px;
  transform-origin: 50% 100%; transition: opacity .3s var(--ease), transform .18s var(--ease); border-radius: 3px;
}
.tbar i { display: block; flex: none; }
.tbar__held { border-radius: 3px 3px 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--weir-held) 78%, #fff), var(--weir-held)); }
.tbar__flow { border-radius: 0 0 3px 3px; background: linear-gradient(180deg, color-mix(in srgb, var(--weir-flow) 80%, #fff), var(--weir-flow)); }
.tbar__flow:first-child { border-radius: 3px; }
.ftide__bars.is-hover .tbar:not(.is-hot), .ftide__bars.is-focus .tbar:not([aria-pressed="true"]) { opacity: .35; }
.tbar.is-hot { transform: scaleY(1.04); }
.tbar:focus-visible { outline-offset: 2px; }
/* The live window's last bar carries a small pulsing dot just above it. */
.tbar__live { position: relative; flex: none; align-self: center; width: 5px; height: 5px; margin-bottom: 3px; border-radius: 50%; background: var(--weir-flow); }
.tbar__live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: fl-live 1.8s ease-out infinite; }
@keyframes fl-live { from { transform: scale(1); opacity: .7; } to { transform: scale(3.2); opacity: 0; } }
.ftide__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* The window's name, or the time of the bar being read: the panel here is narrower than the app's, so the time
   takes the title's place rather than a spot in the row above. */
.ftide__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; }
.ftide__title.is-when { font-size: 12.5px; font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fseg { flex: none; display: inline-flex; padding: 2px; border-radius: 8px; background: var(--fill); }
.fseg button { height: 22px; padding: 0 9px; border-radius: 6px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fseg button:hover { color: var(--ink); }
.fseg button[aria-checked="true"] { color: var(--ink); background: var(--fl-seg); box-shadow: 0 0 0 .5px var(--line), 0 1px 2px rgba(0, 0, 0, .12); }

/* Summary, like Flow's inspector */
.flow__summary { z-index: 5; padding: 16px 16px 18px; border-radius: 24px; color: var(--ink); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.fsum__title { display: flex; align-items: center; gap: 8px; font: 700 19px/1.2 var(--font-display); letter-spacing: -.02em; }
.fsum__title .ico { color: var(--ink-3); width: 18px; height: 18px; }
.fsum__sub { margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }
.fsum__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.fstat { padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--weir-flow) 14%, transparent); }
.fstat--held { background: color-mix(in srgb, var(--weir-held) 14%, transparent); }
.fstat--plain { background: var(--fill); }
.fstat > span { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--weir-flow); }
.fstat--held > span { color: var(--weir-held); }
.fstat--plain > span { color: var(--ink-3); font-weight: 500; }
.fstat .ico { width: 12px; height: 12px; }
.fstat b { display: block; margin-top: 2px; font: 600 21px/1.15 ui-rounded, var(--font-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.fcap { display: flex; align-items: center; gap: 6px; margin: 20px 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.fcap .ico { width: 13px; height: 13px; }
.fdest { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.fdest button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 6px; row-gap: 5px; width: 100%; padding: 5px 6px; margin: 0 -6px; width: calc(100% + 12px); border-radius: 8px; text-align: left; transition: background-color .15s; }
.fdest button:hover { background: var(--hover); }
.fdest__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.fdest__name small { margin-left: 6px; font-size: 11.5px; color: var(--ink-3); opacity: .8; }
.fdest__n { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fdest__bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--weir-flow) 18%, transparent); }
.fsum__back { display: inline-flex; align-items: center; gap: 3px; margin-left: -4px; padding: 2px 4px; border-radius: 6px; font-size: 13.5px; font-weight: 500; color: var(--weir-flow); }
.fsum__back:hover { background: var(--hover); }
.fsum__back .ico { width: 13px; height: 13px; }
.fcountry__flag { margin-top: 14px; font-size: 48px; line-height: 1; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .15)); }
.fcountry__name { margin-top: 8px; font: 700 25px/1.15 var(--font-display); letter-spacing: -.02em; }
.fcountry__line { margin-top: 4px; font-size: 13px; color: var(--ink-2); }
.fdom { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fdom li { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; }
.fdom li > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fdom small { font-size: inherit; color: var(--ink-3); }
.fmono { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font: 700 11px/1 ui-rounded, var(--font); color: #fff; text-shadow: 0 .5px 1px rgba(0, 0, 0, .2); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25); }
.fsum__foot { margin-top: 16px; font-size: 11.5px; line-height: 1.4; color: var(--ink-3); }
.fsum__view { animation: fsum-in .35s var(--ease); }
@keyframes fsum-in { from { opacity: 0; transform: translateX(10px); } }

/* ---------- Wide screens: the map fills the hero and the words sit over its quiet side ---------- */
@media (min-width: 1180px) {
  .flowhero { min-height: max(100vh, 720px); min-height: max(100svh, 720px); display: flex; align-items: center; background: var(--map-water); }
  .flowhero__copy { width: var(--copy-w); margin-left: var(--copy-x); padding: clamp(66px, 10vh, 96px) 0 clamp(28px, 5vh, 60px); }
  .flow { position: absolute; inset: 0; z-index: 1; }
  .flow__map { position: absolute; inset: 0; }
  .flow__fade {
    background:
      linear-gradient(90deg, var(--bg) 0, var(--bg) calc(var(--copy-end) - 200px), color-mix(in srgb, var(--bg) 82%, transparent) calc(var(--copy-end) - 40px), color-mix(in srgb, var(--bg) 30%, transparent) calc(var(--copy-end) + 60px), transparent calc(var(--copy-end) + 170px)),
      linear-gradient(0deg, var(--bg), transparent 70px);
  }
  .flow__controls { top: 50px; right: calc(var(--side-w) + 30px); }
  /* When the words make the hero taller than the window, the panels still sit within the first screen. */
  .flow { --below: calc(100% - min(100%, 100vh)); }
  .flow__side { position: absolute; top: 50px; right: 16px; bottom: calc(var(--below) + 24px); width: var(--side-w); display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
  .flow__side > * { pointer-events: auto; }
  .flow__devices { width: auto; flex: none; }
  .flow__summary { flex: 0 1 auto; min-height: 0; }
  /* Well clear of the bottom of the screen. */
  .flow__tide { position: absolute; left: calc(var(--copy-end) + 28px); right: calc(var(--side-w) + 30px); bottom: calc(var(--below) + 100px); max-width: 760px; margin-inline: auto; }
}
/* Most laptop windows are shorter than 900px, so the words drop the icon there to keep the map's panels clear of the bottom of the screen. */
@media (min-width: 1180px) and (max-height: 880px) {
  .flowhero .apphero__icon { display: none; }
  .flowhero .wordmark--app { font-size: clamp(4rem, min(8.6vw, 14.5vh), 8.4rem); }
}

/* ---------- Narrower screens: the words first, then the map ---------- */
@media (max-width: 1179px) {
  .flowhero__copy { width: min(680px, 100% - 32px); margin: 0 auto; padding: 96px 0 34px; }
  .flow { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "map" "tide" "sum"; }
  .flow__map { grid-area: map; height: clamp(400px, 66vw, 640px); }
  .flow__fade { background: linear-gradient(180deg, var(--bg), transparent 56px, transparent calc(100% - 56px), var(--bg)); }
  .flow__side { display: contents; }
  .flow__devices { grid-area: map; align-self: start; justify-self: start; margin: 14px 0 0 14px; position: relative; max-height: calc(100% - 28px); overflow: auto; }
  .flow__tide { grid-area: map; align-self: end; position: relative; width: min(760px, 100% - 32px); margin: 0 auto 16px; }
  .flow__summary { grid-area: sum; position: relative; width: min(680px, 100% - 32px); margin: 16px auto 0; overflow: visible; background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 0 0 .5px var(--line), var(--shadow-sm); }
}
/* Short windows drop the icon too, so the sample data note stays clear of the bottom of the screen (1024 × 768, say). */
@media (min-width: 761px) and (max-width: 1179px) and (max-height: 880px) {
  .flowhero .apphero__icon { display: none; }
}
@media (max-width: 760px) {
  .flowhero .apphero__icon { width: 68px; height: 68px; }
  .flowhero__copy { padding-top: 84px; }
  .flowhero__foot { align-items: flex-start; }
  /* The map comes straight after the call to action, so it starts in the first screen. weir.js moves the try box
     and the note into the map's column, after the tide; here they get their places in its grid. */
  .flow { grid-template-areas: "map" "tide" "try" "foot" "sum"; }
  /* Until weir.js has moved them, so the map doesn't jump up when it does. */
  .js .flowhero__copy > :is(.tryq, .flowhero__foot) { display: none; }
  .flow > .tryq { grid-area: try; width: min(680px, 100% - 32px); margin: 22px auto 0; }
  .flow > .flowhero__foot { grid-area: foot; width: min(680px, 100% - 32px); margin: 8px auto 0; }
  .flow__map { height: clamp(380px, 112vw, 480px); }
  .flow__tide { grid-area: tide; align-self: auto; margin: -44px auto 0; padding: 10px 12px; gap: 8px; }
  .ftide__head { gap: 6px; }
  .ftide__rate { display: none; }
  .tpill { padding: 0 8px; }
  .fseg button { padding: 0 7px; }
  .flow__devices { width: min(256px, 100% - 76px); }
}

@media (prefers-reduced-motion: reduce) {
  .fpill { animation: none; }
  .tbar__live::after { animation: none; }
}

/* ---------- The tour's sidebar: profile switcher and pulse card (SidebarView.swift) ---------- */
/* Sized in the app's points (--u, from .tour__side in styles.css). */
.wtour-profile {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: calc(10 * var(--u));
  height: calc(46.4 * var(--u)); padding: 0 calc(8 * var(--u)); border-radius: calc(14 * var(--u));
  background: var(--tour-glass); box-shadow: inset 0 0 0 .5px var(--tour-glass-line), 0 0 0 .5px var(--tour-glass-edge), 0 calc(1 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, .06);
}
/* Monogram: its hue comes from the profile's name, so Home is always this teal. */
.wtour-mono {
  display: grid; place-items: center; width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: calc(8.4 * var(--u));
  background: linear-gradient(#6fefe3, #2daab8); color: #fff; text-shadow: 0 .5px 1px rgba(0, 0, 0, .2);
  font: 700 calc(15 * var(--u))/1 ui-rounded, var(--font); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25);
}
.wtour-who { display: grid; gap: calc(1 * var(--u)); min-width: 0; }
.wtour-who b { font-size: calc(13.2 * var(--u)); font-weight: 700; }
.wtour-who > span { display: flex; align-items: center; gap: calc(5 * var(--u)); color: var(--tour-ink-2); }
.wtour-who code { font: calc(10.3 * var(--u)) var(--mono); letter-spacing: 0; }
.wtour-who i {
  padding: calc(1.5 * var(--u)) calc(4.6 * var(--u)); border-radius: 999px; background: color-mix(in srgb, var(--weir-lagoon) 25%, transparent);
  font: normal 700 calc(9 * var(--u))/1.15 ui-rounded, var(--font); letter-spacing: .03em;
}
.wtour-profile > .ico { width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: var(--tour-ink-3); }
.wtour-pulse {
  display: grid; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)); border-radius: calc(16 * var(--u));
  background: var(--tour-glass); box-shadow: inset 0 0 0 .5px var(--tour-glass-line), 0 0 0 .5px var(--tour-glass-edge), 0 calc(1 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, .06);
  font-size: calc(10.5 * var(--u)); color: var(--tour-ink-2);
}
.wtour-pulse__top { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.wtour-pulse__top b { font-weight: 600; }
.wtour-pulse__top span { margin-left: auto; font-variant-numeric: tabular-nums; }
/* LiveDot: a 7 pt dot with a halo that grows and fades every 1.6 seconds while the tour is on screen. */
.wtour-pulse__dot { position: relative; width: calc(7.5 * var(--u)); height: calc(7.5 * var(--u)); border-radius: 50%; background: var(--weir-held); }
.wtour-pulse__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--weir-held); opacity: 0; }
.tour.is-live .wtour-pulse__dot::after { animation: wtour-halo 1.6s cubic-bezier(0, 0, .58, 1) infinite; }
@keyframes wtour-halo { from { transform: scale(1); opacity: .55; } to { transform: scale(2.6); opacity: 0; } }
.wtour-pulse__bars { display: flex; align-items: flex-end; gap: calc(2 * var(--u)); height: calc(26 * var(--u)); }
.wtour-pulse__bars i { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: calc(1 * var(--u)); height: 100%; }
.wtour-pulse__bars b, .wtour-pulse__bars s { display: block; min-height: calc(2 * var(--u)); border-radius: 99px; }
.wtour-pulse__bars b { background: var(--weir-held); }
.wtour-pulse__bars s { background: var(--weir-flow); opacity: .85; }
.wtour-pulse__bars s.is-empty { opacity: .18; }
.wtour-pulse__held { display: flex; align-items: baseline; gap: calc(4 * var(--u)); white-space: nowrap; overflow: hidden; }
.wtour-pulse__held b { font: 600 calc(17 * var(--u))/1 ui-rounded, var(--font); color: var(--weir-held); font-variant-numeric: tabular-nums; }

/* ---------- Bands: Something broke?, Wrapped and the menu bar ---------- */
/* Each band is words beside one of the app's own panels. On wide screens the words sit as one block beside the
   panel; on narrow ones the heading comes first, then the panel, then the details. */
:root {
  --wb-broke: #b25f00; --wb-wrapped: var(--weir-glow); --wb-menubar: #0070c9;
  /* A desktop for the menu bar panels: the site's wallpaper, with a menu bar along the top. */
  --wdesk-ink: #1d1d1f; --wdesk-bar: rgba(255, 255, 255, .34); --wdesk-sel: rgba(0, 0, 0, .1);
  /* The panel's own colours, measured from the screenshots: the system's label shades on white or #1e1e1e. */
  --wbk-bg: #ffffff; --wbk-ink: rgba(0, 0, 0, .85); --wbk-ink-2: rgba(0, 0, 0, .5); --wbk-ink-3: rgba(0, 0, 0, .27);
  --wbk-quat: #e5e5e5; --wbk-hover: rgba(0, 0, 0, .05); --wbk-mint: #00a464; --wbk-mint-hi: #00bf7d; --wbk-mint-ink: #ffffff;
  --wbk-glass: #ffffff; --wbk-glass-edge: 0 0 0 .5px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .08);
  --wbk-menu: rgba(246, 246, 246, .88); --wbk-menu-edge: 0 0 0 .5px rgba(0, 0, 0, .14), 0 12px 32px rgba(0, 0, 0, .2);
  --wpanel-shadow: drop-shadow(0 0 .6px rgba(0, 0, 0, .28)) drop-shadow(0 18px 34px rgba(10, 30, 70, .22));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wb-broke: #ffb83f; --wb-menubar: var(--weir-flow);
    --wdesk-ink: #ffffff; --wdesk-bar: rgba(0, 0, 0, .24); --wdesk-sel: rgba(255, 255, 255, .22);
    --wbk-bg: #1e1e1e; --wbk-ink: rgba(255, 255, 255, .86); --wbk-ink-2: rgba(255, 255, 255, .55); --wbk-ink-3: rgba(255, 255, 255, .26);
    --wbk-quat: #333333; --wbk-hover: rgba(255, 255, 255, .055); --wbk-mint: #00e38d; --wbk-mint-hi: #2df2a6; --wbk-mint-ink: rgba(0, 0, 0, .85);
    --wbk-glass: rgba(255, 255, 255, .075); --wbk-glass-edge: inset 0 .5px 0 rgba(255, 255, 255, .3), inset 0 0 0 .5px rgba(255, 255, 255, .08);
    --wbk-menu: rgba(44, 44, 46, .9); --wbk-menu-edge: inset 0 0 0 .5px rgba(255, 255, 255, .12), 0 0 0 .5px rgba(0, 0, 0, .6), 0 14px 36px rgba(0, 0, 0, .5);
    --wpanel-shadow: drop-shadow(0 0 .6px rgba(255, 255, 255, .45)) drop-shadow(0 20px 40px rgba(0, 0, 0, .55));
  }
}
:root[data-theme="dark"] {
  --wb-broke: #ffb83f; --wb-menubar: var(--weir-flow);
  --wdesk-ink: #ffffff; --wdesk-bar: rgba(0, 0, 0, .24); --wdesk-sel: rgba(255, 255, 255, .22);
  --wbk-bg: #1e1e1e; --wbk-ink: rgba(255, 255, 255, .86); --wbk-ink-2: rgba(255, 255, 255, .55); --wbk-ink-3: rgba(255, 255, 255, .26);
  --wbk-quat: #333333; --wbk-hover: rgba(255, 255, 255, .055); --wbk-mint: #00e38d; --wbk-mint-hi: #2df2a6; --wbk-mint-ink: rgba(0, 0, 0, .85);
  --wbk-glass: rgba(255, 255, 255, .075); --wbk-glass-edge: inset 0 .5px 0 rgba(255, 255, 255, .3), inset 0 0 0 .5px rgba(255, 255, 255, .08);
  --wbk-menu: rgba(44, 44, 46, .9); --wbk-menu-edge: inset 0 0 0 .5px rgba(255, 255, 255, .12), 0 0 0 .5px rgba(0, 0, 0, .6), 0 14px 36px rgba(0, 0, 0, .5);
  --wpanel-shadow: drop-shadow(0 0 .6px rgba(255, 255, 255, .45)) drop-shadow(0 20px 40px rgba(0, 0, 0, .55));
}

.wvh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.apppage .wband { margin-top: 130px; }
.wband {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: clamp(40px, 6vw, 88px);
  grid-template-rows: 1fr auto auto 1fr; grid-template-areas: ". stage" "head stage" "more stage" ". stage";
}
.wband--flip { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "stage ." "stage head" "stage more" "stage ."; }
.wband__head { grid-area: head; }
.wband__more { grid-area: more; }
.wband__stage { grid-area: stage; align-self: center; min-width: 0; }
.wband__eyebrow { font-size: 15px; font-weight: 600; color: var(--wb-tint, var(--ink-2)); }
.wband__eyebrow--broke { --wb-tint: var(--wb-broke); }
.wband__eyebrow--wrapped { --wb-tint: var(--wb-wrapped); }
.wband__eyebrow--menubar { --wb-tint: var(--wb-menubar); }
.wband .wband__title { margin-top: 10px; font-size: clamp(1.75rem, 2.9vw, 2.5rem); line-height: 1.08; font-weight: 700; }
/* As Shoo's bands: the lede makes the point in one sentence, the body explains it, and the facts below the hairline
   give the specifics. */
.wband__lede { margin-top: 18px; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.42; color: var(--ink); }
.wband__body { margin-top: 12px; font-size: clamp(15.5px, 1.15vw, 16.5px); line-height: 1.55; color: var(--ink-2); }
.wband__facts { list-style: none; margin: 24px 0 0; padding: 22px 0 0; display: grid; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--ink-2); border-top: .5px solid var(--line); }
.wband__facts li { position: relative; padding-left: 18px; }
.wband__facts li::before { content: ""; position: absolute; left: 2px; top: .58em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); opacity: .7; }
#broke .wband__facts li::before { background: var(--weir-held); opacity: .8; }
#wrapped-story .wband__facts li::before { background: var(--weir-glow); opacity: .8; }
#menu-bar .wband__facts li::before { background: var(--weir-flow); opacity: .8; }
.wband__small { margin-top: 16px; font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
.wband__note { margin-top: 14px; text-align: center; font-size: 13px; color: var(--ink-3); }
.apppage .steps a { color: var(--link); }
.apppage .steps a:hover { text-decoration: underline; }

/* ---------- A desktop with the menu bar along the top ---------- */
.wdesk {
  position: relative; padding: 0 18px 34px; border-radius: 26px;
  background: radial-gradient(90% 70% at 85% 5%, color-mix(in srgb, var(--wp-sky1) 70%, transparent), transparent 70%), linear-gradient(165deg, var(--wp-sky0), var(--wp-sky1));
  box-shadow: 0 0 0 .5px var(--line), var(--shadow-md);
}
.wdesk__bar {
  position: relative; display: flex; align-items: center; justify-content: flex-end; height: 26px; margin: 0 -18px 8px; padding: 0 16px;
  border-radius: 26px 26px 0 0; background: var(--wdesk-bar); color: var(--wdesk-ink);
  font: 500 13px/1 var(--font); letter-spacing: -.005em; white-space: nowrap;
}
.wdesk__clock { font-variant-numeric: tabular-nums; }
/* Weir's menu bar item (MenuBarPanel.swift, MenuBarGlance): a 14 pt ring filled to today's block rate, a centre dot
   that swells when a block arrives, today's count, and a timer while something is allowed for now. It sits over the
   middle of the panel, which hangs below it, and is highlighted because the panel is open. */
.wglance {
  position: absolute; left: 50%; top: 3px; translate: -50% 0; display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 7px; border-radius: 6px; background: var(--wdesk-sel);
}
.wglance__ring { width: 14px; height: 14px; overflow: visible; }
.wglance__ring circle { fill: none; stroke: currentColor; }
.wglance__track { stroke-width: 1.6; opacity: .32; }
.wglance__arc { stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 27 100; transform: rotate(-90deg); transform-origin: 8px 8px; }
.wglance .wglance__dot { fill: currentColor; stroke: none; transform-origin: 8px 8px; transition: transform .25s var(--spring); }
.wglance.is-splash .wglance__dot { transform: scale(2); }
.wglance b { font: 600 12.5px/1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.wglance__timer { display: none; width: 13px; height: 13px; }
.wglance.is-relaxed .wglance__timer { display: block; animation: wglance-in .3s var(--spring); }
@keyframes wglance-in { from { transform: scale(.4); opacity: 0; } }

/* ---------- The menu bar panels ---------- */
/* Shown at the app's own size, 340 pt, so 1 pt is 1 px; --u keeps the drawn parts in step if the panel gets narrower. */
.wpanel { position: relative; width: min(340px, 100%); margin: 0 auto; container-type: inline-size; filter: var(--wpanel-shadow); }
.wpanel > * { --u: calc(100cqw / 340); }
.wpanel img { width: 100%; height: auto; }
.wpanel__cut { position: relative; overflow: hidden; }
.wpanel__cut--top { aspect-ratio: 680 / 200; }
.wpanel__cut--bottom { aspect-ratio: 680 / 250; }
.wpanel__cut--bottom img { position: absolute; left: 0; bottom: 0; }
html:not(.js) .wpanel__cut--top { aspect-ratio: auto; }
html:not(.js) .wpanel__cut--bottom, html:not(.js) .wpanel__live, html:not(.js) .wpanel__hot { display: none; }
/* Live spots over the screenshot's own buttons. */
.wpanel__hot { position: absolute; z-index: 2; border-radius: 50%; transition: background-color .18s; -webkit-tap-highlight-color: transparent; }
.wpanel__hot:hover { background: var(--wbk-hover); }
.wpanel__hot:focus-visible { outline-offset: 1px; }
.wpanel__hot--back { left: calc(15.5 * var(--u)); top: calc(65.25 * var(--u)); width: calc(24.5 * var(--u)); height: calc(24.5 * var(--u)); }
.wpanel__hot--broke { left: calc(16 * var(--u)); top: calc(62 * var(--u)); width: calc(307.5 * var(--u)); height: calc(48.5 * var(--u)); border-radius: calc(14 * var(--u)); }
.wpanel__hot--broke:hover { background: color-mix(in srgb, var(--wbk-ink) 4%, transparent); }

/* Something broke?'s list (TroubleshootView.swift), drawn between the two halves of its screenshot. */
.wpanel__live {
  /* It reaches a pixel into each half of the screenshot to cover the seams, where the cut can land between pixels. */
  position: relative; z-index: 1; margin: -1px 0; background: var(--wbk-bg); color: var(--wbk-ink);
  padding: calc(6.75 * var(--u) + 1px) calc(16 * var(--u)) calc(6.25 * var(--u) + 1px); font-family: var(--font); letter-spacing: 0;
}
.wbk__group, .wbk__rows { display: grid; gap: calc(4 * var(--u)); }
.wbk__group + .wbk__group { margin-top: calc(14 * var(--u)); }
.wbk__cap {
  display: flex; align-items: center; gap: calc(7.2 * var(--u)); height: calc(13 * var(--u));
  font: 600 calc(10.5 * var(--u))/1 var(--font); letter-spacing: calc(.74 * var(--u)); text-transform: uppercase; color: var(--wbk-ink-2);
}
/* The symbols' boxes are 76 units (scope's 89) around a glyph drawn at the caption's size. */
.wbk__cap .ico { width: calc(11.9 * var(--u)); height: calc(11.9 * var(--u)); }
.wbk__cap .ico--wide { width: calc(13.5 * var(--u)); height: calc(13.5 * var(--u)); }
.wbk__count { margin-left: auto; font-weight: 400; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--wbk-ink-3); }
.wbk__row {
  position: relative; display: grid; grid-template-columns: calc(10 * var(--u)) minmax(0, 1fr) auto; align-items: center; column-gap: calc(9 * var(--u));
  height: calc(42 * var(--u)); padding: 0 calc(8 * var(--u)); border-radius: calc(9 * var(--u)); transition: background-color .18s;
}
.wbk__row:hover { background: var(--wbk-hover); }
.wbk__ind { display: grid; place-items: center; height: calc(10 * var(--u)); }
.wbk__dot { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: var(--wbk-quat); }
.is-likely .wbk__dot {
  width: calc(7 * var(--u)); height: calc(7 * var(--u));
  background: linear-gradient(color-mix(in srgb, var(--weir-held) 82%, #fff), var(--weir-held));
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .35), 0 0 calc(3 * var(--u)) color-mix(in srgb, var(--weir-held) 50%, transparent);
}
.wbk__ind .ico { width: calc(12.5 * var(--u)); height: calc(12.5 * var(--u)); color: var(--weir-mint); animation: wbk-pop .3s var(--spring); }
@keyframes wbk-pop { from { transform: scale(.5); opacity: 0; } }
.wbk__text { display: grid; gap: calc(2 * var(--u)); min-width: 0; }
.wbk__domain, .wbk__detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbk__domain { font-size: calc(13.2 * var(--u)); line-height: calc(16 * var(--u)); color: var(--wbk-ink-2); }
.wbk__domain b { font-weight: inherit; color: var(--wbk-ink); }
.is-likely .wbk__domain { font-weight: 500; }
.wbk__detail { font-size: calc(11.4 * var(--u)); line-height: calc(13 * var(--u)); color: var(--wbk-ink-2); }
.wbk__detail.is-mint { color: var(--weir-mint); font-variant-numeric: tabular-nums; }
.wbk__trail { display: flex; align-items: center; justify-content: flex-end; min-width: 0; margin-left: calc(-3 * var(--u)); }
.wbk__age { font-size: calc(11.5 * var(--u)); color: var(--wbk-ink-3); font-variant-numeric: tabular-nums; padding-right: calc(1.5 * var(--u)); }
.wbk__btn {
  display: inline-flex; align-items: center; justify-content: center; height: calc(20.5 * var(--u)); padding: 0 calc(13.5 * var(--u));
  border-radius: 999px; font: 400 calc(11 * var(--u))/1 var(--font); letter-spacing: 0; white-space: nowrap; color: var(--wbk-ink);
  background: var(--wbk-glass); box-shadow: var(--wbk-glass-edge); transition: filter .15s, transform .15s var(--ease);
}
.wbk__btn:active { transform: scale(.96); }
.wbk__btn--mint { color: var(--wbk-mint-ink); background: linear-gradient(var(--wbk-mint-hi), var(--wbk-mint) 22%, var(--wbk-mint) 80%, var(--wbk-mint-hi)); box-shadow: 0 .5px 1px rgba(0, 0, 0, .15); }
.wbk__btn:hover { filter: brightness(1.04) saturate(1.05); }
.wbk__more, .wbk__x { display: grid; place-items: center; width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: calc(5 * var(--u)); color: var(--wbk-ink); }
.wbk__more { margin-right: calc(1.3 * var(--u)); }
.wbk__more .ico { width: calc(12.2 * var(--u)); height: calc(12.2 * var(--u)); }
.wbk__x { margin-left: calc(4 * var(--u)); color: var(--wbk-ink-2); }
.wbk__x .ico { width: calc(11 * var(--u)); height: calc(11 * var(--u)); }
.wbk__more:hover, .wbk__x:hover, .wbk__more[aria-expanded="true"] { background: var(--wbk-hover); }
/* Rows you probably don't need show their age, and offer Allow only while the pointer or focus is on them, or their
   menu is open. Until then the buttons are clipped out of sight rather than removed, so Tab still reaches them. */
.wbk__offer { display: flex; align-items: center; }
.wbk__row:not(.is-likely, :hover, :focus-within, .is-open, .has-menu) .wbk__offer {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.wbk__row:not(.is-likely):is(:hover, .is-open) .wbk__offer { animation: wbk-pop .2s var(--ease); }
.wbk__row:is(:hover, :focus-within, .is-open, .has-menu) .wbk__age { display: none; }
.wpanel__live:focus { outline: none; }
.wbk__show { justify-self: start; height: calc(13 * var(--u)); padding: 0 calc(8 * var(--u)); border-radius: calc(4 * var(--u)); font: 500 calc(11 * var(--u))/1 var(--font); color: var(--weir-flow); }
.wbk__show:hover { text-decoration: underline; }
/* The allow options, as a Mac menu. */
.wbk__menu {
  position: absolute; z-index: 6; min-width: calc(212 * var(--u)); padding: calc(5 * var(--u)); border-radius: calc(11 * var(--u));
  background: var(--wbk-menu); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); box-shadow: var(--wbk-menu-edge);
  animation: wbk-menu .14s var(--ease);
}
@keyframes wbk-menu { from { opacity: 0; transform: translateY(-3px); } }
.wbk__menu[hidden] { display: none; }
.wbk__menu button {
  display: block; width: 100%; padding: calc(3.5 * var(--u)) calc(10 * var(--u)); border-radius: calc(6 * var(--u));
  font: 400 calc(13 * var(--u))/calc(15 * var(--u)) var(--font); letter-spacing: 0; text-align: left; white-space: nowrap; color: var(--wbk-ink);
}
.wbk__menu button:hover, .wbk__menu button:focus { outline: none; background: var(--accent); color: #fff; }
.wbk__menu hr { height: 0; margin: calc(5 * var(--u)) calc(10 * var(--u)); border: 0; border-top: .5px solid color-mix(in srgb, var(--wbk-ink) 16%, transparent); }

/* ---------- Wrapped: the story player ---------- */
/* Like Wrapped's own window (WrappedView.swift): the card in front, the current card's colours blurred behind it,
   glass buttons either side to step through, and Pause and Start Over underneath. */
.wstory {
  /* As big as the column allows, but short enough that the card and its buttons fit in the window. */
  --card-w: clamp(240px, min(25vw, (100vh - 270px) * 9 / 16), 352px);
  position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: center; gap: 16px;
  padding: 30px 16px 22px; border-radius: 26px; color: #fff; background: #121216;
  box-shadow: 0 0 0 .5px var(--line), var(--shadow-lg);
}
.wstory__glow { position: absolute; inset: -60px; z-index: -1; pointer-events: none; }
.wstory__glow i { position: absolute; inset: 0; background: center / cover no-repeat; filter: blur(46px) saturate(1.15); opacity: 0; transition: opacity .9s var(--ease); }
.wstory__glow i.is-on { opacity: .95; }
.wstory__glow::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .42); }
.wstory__row { display: flex; align-items: center; gap: 20px; }
.wstory__step, .wstory__btn {
  color: #fff; background: rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .16);
  transition: background-color .15s, opacity .3s, transform .2s var(--ease);
}
.wstory__step:hover, .wstory__btn:hover { background: rgba(255, 255, 255, .22); }
.wstory__step:active, .wstory__btn:active { transform: scale(.95); }
.wstory__step { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; }
.wstory__step .ico { width: 19px; height: 19px; }
.wstory__step:disabled { opacity: 0; pointer-events: none; }
.wstory__card { position: relative; flex: none; width: var(--card-w); aspect-ratio: 810 / 1440; cursor: pointer; border-radius: 7.4% / 4.17%; filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .45)); -webkit-tap-highlight-color: transparent; }
.wstory__card:focus-visible { outline: 3px solid rgba(255, 255, 255, .7); outline-offset: 4px; }
.wstory__img { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-user-drag: none; user-select: none; }
.js .wstory__img { transition: opacity .55s var(--ease), transform .55s var(--ease); }
/* The captures include the edge of the app's own shadow, cut square at the image's bounds, so each card is clipped
   to its 30 pt corners (a touch more, for the continuous curve) and casts the shadow above instead. */
.wstory__img:not(.is-poster) { clip-path: inset(0 round 7.9% / 4.45%); }
.wstory__img.is-poster { border-radius: 2.5%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.wstory__img.is-enter { opacity: 0; transform: translateX(calc(var(--dir, 1) * 7%)) scale(1.05); }
.wstory__img.is-leave { opacity: 0; transform: scale(.95); pointer-events: none; }
/* Hear your day, over the screenshot's own button on the Your tide card (WrappedCards.swift, WrappedRhythmCard). */
.wstory__hear {
  position: absolute; z-index: 2; left: 7.75%; top: 91.6%; width: 38.2%; height: 4%;
  display: inline-flex; align-items: center; justify-content: center; gap: .4em; border-radius: 999px;
  font: 700 calc(var(--card-w) * 15 / 405)/1 ui-rounded, var(--font); letter-spacing: 0; color: #fff;
  background: #7d413b; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 0 0 1px #5b211a;
}
.wstory__hear:hover { background: #8a4a43; }
.wstory__hear .ico { width: 1.15em; height: 1.15em; }
.wstory__hear[hidden] { display: none; }
.wstory__controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.wstory__btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 15px 0 11px; border-radius: 999px; font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; }
.wstory__btn .ico { width: 14px; height: 14px; }
.wstory__btn[hidden] { display: none; }
/* The time left on a card, as a ring around the Pause symbol. */
.wstory__tick { position: relative; display: grid; place-items: center; width: 20px; height: 20px; }
.wstory__tick svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.wstory__tick circle { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.wstory.is-timing .wstory__tick circle { animation: wstory-tick var(--story-ms, 5000ms) linear forwards; }
.wstory.is-held .wstory__tick circle { animation-play-state: paused; }
@keyframes wstory-tick { to { stroke-dashoffset: 0; } }
.wstory__tick .ico { width: 11px; height: 11px; }
.wstory__where { min-height: 1.4em; font-size: 13px; color: rgba(255, 255, 255, .72); font-variant-numeric: tabular-nums; }

/* ---------- Weir and NextDNS's own apps ---------- */
.apppage .wcompare { margin-top: 150px; }
.wcompare__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.wcompare__text p { color: var(--ink-2); font-size: clamp(16px, 1.3vw, 18px); max-width: 56ch; }
.wcompare__text p + p { margin-top: 16px; }
.wcompare__text .wcompare__aside { font-size: 15px; color: var(--ink-3); }
/* Each side on its own panel, NextDNS's apps first, then Weir in its own blue, so the difference shows at a glance. */
.wcompare__side { padding: 18px 22px 20px; border-radius: 18px; background: var(--fill); }
.wcompare__side + .wcompare__side { margin-top: 12px; }
.wcompare__side--weir { background: color-mix(in srgb, var(--weir-flow) 10%, transparent); }
.wcompare__name { font-size: 17px; font-weight: 600; }
.wcompare__text .wcompare__side p { margin-top: 8px; max-width: none; font-size: 15.5px; line-height: 1.5; }
.wcompare__text .wcompare__aside { margin-top: 18px; }
.wcompare__title { font-size: 17px; font-weight: 600; margin-bottom: 14px; }
.wcompare .group a { font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.wcompare .group a:hover { color: var(--link); }
.apppage #trust { margin-top: 120px; }

/* ---------- Technical details: closed by default, a single row in the style of Questions ---------- */
.apppage .wtech { margin-top: 56px; }
.wtech__sum {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center;
  padding: 18px 20px; border-radius: 18px; cursor: pointer; list-style: none;
  background: var(--card); box-shadow: 0 0 0 .5px var(--line), var(--shadow-sm); transition: background-color .15s;
}
.wtech__sum::-webkit-details-marker { display: none; }
.wtech__sum::after {
  content: ""; grid-column: 2; grid-row: 1 / span 2; width: 8px; height: 8px; margin-right: 4px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--ease);
}
.wtech[open] .wtech__sum::after { transform: translateY(2px) rotate(-135deg); }
.wtech__sum:hover { background: linear-gradient(var(--fill), var(--fill)), var(--card); }
.wtech__title { font-size: 19px; line-height: 1.25; font-weight: 700; }
.wtech__hint { grid-column: 1; margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.wtech .specs__list { margin-top: 12px; }

@media (max-width: 1000px) {
  .wband, .wband--flip { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "stage" "more"; }
  .wband__stage { width: min(560px, 100%); justify-self: center; margin: 36px 0 30px; }
  .wstory { --card-w: clamp(240px, min(100vw - 200px, (100vh - 270px) * 9 / 16), 352px); }
  .wcompare__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .apppage .wband { margin-top: 90px; }
  .apppage .wcompare { margin-top: 100px; }
  .apppage #trust { margin-top: 90px; }
  .wdesk { padding: 0 12px 24px; border-radius: 22px; }
  .wdesk__bar { margin: 0 -12px 8px; border-radius: 22px 22px 0 0; padding: 0 12px; }
}
@media (max-width: 560px) {
  .wstory { --card-w: min(340px, calc(100vw - 72px)); padding: 22px 12px 18px; gap: 14px; }
  /* No room beside the card, so the step buttons float over its edges, where cards keep a margin. */
  .wstory__row { position: relative; }
  .wstory__row > .wstory__step { position: absolute; z-index: 3; top: 50%; translate: 0 -50%; width: 34px; height: 34px; background: rgba(20, 20, 24, .38); }
  .wstory__row > .wstory__step:first-child { left: -10px; }
  .wstory__row > .wstory__step:last-child { right: -10px; }
  .wstory__step .ico { width: 15px; height: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .wstory__img.is-enter, .wstory__img.is-leave { transform: none; }
  .wstory__tick svg:first-child { display: none; }
  .wglance .wglance__dot { transition: none; }
}