/* ==========================================================================
   Source14. Hand-written, no build step.
   The world is the logo picture, alive: a white neon line drawing with a soft
   bloom, sitting in a pool of ambient light on true black. Light geometric
   type, no colour. The rules live in DESIGN.md.
   The ground is #000 on purpose: on an OLED screen those pixels are off, and
   the light only exists where something is lit.
   ========================================================================== */

/* Montserrat, served from this site so no visitor's browser has to call anyone else. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #000000;
  --ink-raised: #0a0a0a;
  --white: #f5f5f5;
  --mute: #a6a6a6;
  --dim: #7f7f7f;
  --line: rgba(245, 245, 245, 0.13);
  --line-strong: rgba(245, 245, 245, 0.26);
  --bad: #ff8f85;

  --bloom-text: 0 0 30px rgba(255, 255, 255, 0.26);
  --bloom-dot: 0 0 14px 1px rgba(255, 255, 255, 0.55);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --wrap: 1120px;
  --gutter: clamp(20px, 5vw, 48px);
  --section: clamp(96px, 13vw, 176px);
  --nav-h: 72px;
  --font: "Montserrat", ui-sans-serif, system-ui, "Segoe UI", sans-serif;

  color-scheme: dark;
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--ink);
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font: 400 1.0625rem/1.6 var(--font);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }

::selection { background: var(--white); color: var(--ink); }
:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: 0; }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.defs { position: absolute; width: 0; height: 0; }

.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}

.skip {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  transition: top 0.3s var(--ease);
}
.skip:focus { top: 14px; }

h2 {
  font-size: clamp(1.875rem, 3.6vw, 3rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.nw { white-space: nowrap; }

/* Things rise into place when they come into view. site.js only hides what the
   browser has confirmed is off screen, so nothing can stay invisible. */
[data-reveal] {
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-waiting { opacity: 0; transform: translateY(26px); filter: blur(6px); transition-delay: 0ms; }
[data-reveal].is-set { transition: none; }

/* ?still on any address freezes the page in its finished state, for screenshots and checks. */
.still *, .still *::before, .still *::after { animation: none !important; transition: none !important; }

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.35s var(--ease),
    border-color 0.35s var(--ease),
    box-shadow 0.5s var(--ease),
    transform 0.35s var(--ease);
}
.btn:active { transform: scale(0.98); }
/* A button that also rises into view needs both sets of transitions, or its own list wins and it pops in. */
.btn[data-reveal] {
  transition:
    opacity 1.1s var(--ease) var(--d, 0ms),
    filter 1.1s var(--ease) var(--d, 0ms),
    transform 1.1s var(--ease) var(--d, 0ms),
    background-color 0.35s var(--ease),
    border-color 0.35s var(--ease),
    box-shadow 0.5s var(--ease);
}
.btn[data-reveal].is-set { transition: none; }

.btn-solid {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 0 26px -6px rgba(255, 255, 255, 0.45);
}
.btn-solid:hover { background: #ffffff; box-shadow: 0 0 44px -4px rgba(255, 255, 255, 0.7); }

.btn-line { border-color: var(--line-strong); background: transparent; color: var(--white); }
.btn-line:hover {
  border-color: var(--white);
  background: rgba(245, 245, 245, 0.06);
  box-shadow: 0 0 28px -8px rgba(255, 255, 255, 0.5);
}

/* The bright button: a full white outline, the logo's own line. It is for the two ways into the
   product (Labs, Sign in). The grey outline of .btn-line read as out of place up there. */
.btn-bright {
  border-color: var(--white);
  background: transparent;
  color: var(--white);
  box-shadow: 0 0 22px -8px rgba(255, 255, 255, 0.55);
  transition:
    background-color 0.35s var(--ease),
    color 0.35s var(--ease),
    border-color 0.35s var(--ease),
    box-shadow 0.5s var(--ease),
    transform 0.35s var(--ease);
}
.btn-bright:hover { background: var(--white); color: var(--ink); box-shadow: 0 0 36px -4px rgba(255, 255, 255, 0.7); }

/* ---------- nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 var(--gutter);
  border-bottom: 1px solid transparent;
  transition: background-color 0.5s var(--ease), border-color 0.5s var(--ease);
  animation: fade-in 1.4s var(--ease) 0.2s both;
}
.nav.is-scrolled {
  background: rgba(0, 0, 0, 0.78);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  text-decoration: none;
}
/* The mark is the full logo drawing at every size. Small uses raise the line weight and the
   star size (--sw, --dot) so the double ring and the stars still read. */
.mark-dots circle {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(var(--dot, 1));
}
.brand-mark {
  --sw: 5.6px;
  --dot: 1.9;
  width: 74px;
  height: 46px;
  flex: none;
  color: var(--white);
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.85))
    drop-shadow(0 0 6px rgba(255, 255, 255, 0.5))
    drop-shadow(0 0 16px rgba(255, 255, 255, 0.3));
}
.brand-word { font-size: 1.3125rem; font-weight: 400; letter-spacing: -0.01em; text-shadow: 0 0 18px rgba(255, 255, 255, 0.3); }

.nav-links {
  display: flex;
  gap: clamp(20px, 3vw, 40px);
  margin-left: auto;
}
.nav-links a {
  padding: 10px 0;
  font-size: 0.9375rem;
  color: var(--mute);
  text-decoration: none;
  transition: color 0.3s var(--ease), text-shadow 0.3s var(--ease);
}
.nav-links a:hover { color: var(--white); text-shadow: 0 0 18px rgba(255, 255, 255, 0.5); }

.nav-actions { display: flex; gap: 10px; margin-left: clamp(4px, 1.5vw, 16px); }
/* The two on the right wait unseen for the server to say whether the visitor is signed in, so
   nobody watches "Sign in" turn into their account. site.js lets them in; so does the page's own
   failsafe if that script never runs. */
.js .nav-actions { transition: opacity 0.4s var(--ease); }
.js .nav-actions.is-waiting { opacity: 0; pointer-events: none; }

/* The visitor's own face: a solid disc with their initial, never an empty ring. In the top bar it
   takes the place of Sign in once they are signed in; Labs uses the same disc for its account corner. */
.me-face {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  box-shadow: 0 0 18px -6px rgba(255, 255, 255, 0.6);
}
/* with the visitor's own picture: it covers the disc and fades in over the initial */
.me-face.has-pic { overflow: hidden; background: var(--ink-raised); }
.me-face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; animation: fade-in 0.5s var(--ease) both; }
.nav-me { display: grid; place-items: center; border-radius: 50%; text-decoration: none; transition: transform 0.35s var(--ease); }
.nav-me .me-face { width: 44px; height: 44px; font-size: 1.0625rem; transition: box-shadow 0.5s var(--ease); }
.nav-me:hover .me-face { box-shadow: 0 0 34px -4px rgba(255, 255, 255, 0.75); }
.nav-me:active { transform: scale(0.96); }
.nav-cta { height: 44px; padding: 0 20px; }

@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-actions { margin-left: auto; }
}
@media (max-width: 400px) {
  .nav { gap: 12px; }
  .brand { gap: 8px; }
  .brand-mark { --sw: 6.2px; width: 62px; height: 38px; }
  .brand-word { font-size: 1.1875rem; }
  .nav-actions { gap: 8px; }
  .nav-cta { padding: 0 14px; }
}
@media (max-width: 350px) {
  .brand-word { display: none; }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  padding: calc(var(--nav-h) + clamp(8px, 2vw, 24px)) 0 clamp(72px, 9vw, 120px);
  overflow: clip;
}

.stars {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -1;
  width: 100%;
  height: 900px;
  max-width: none;
  fill: var(--white);
  opacity: 0.7;
  pointer-events: none;
  animation: fade-in 3s var(--ease) 0.6s both;
}
.stars circle { animation: twinkle 6s ease-in-out infinite; }
.stars circle:nth-child(3n + 1) { animation-duration: 7.5s; animation-delay: -2s; }
.stars circle:nth-child(3n + 2) { animation-duration: 9s; animation-delay: -5s; }
@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

.hero-head { text-align: center; }

/* ---------- the orb: the logo, alive ---------- */

.orb {
  position: relative;
  width: clamp(260px, 33vw, 440px);
  aspect-ratio: 460 / 300;
  margin: 0 auto clamp(4px, 1vw, 14px);
}

/* the pool of light behind it, like the logo picture */
.orb-light {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: min(1500px, 240vw);
  aspect-ratio: 1.5;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side,
    rgba(255, 255, 255, 0.125) 0%,
    rgba(255, 255, 255, 0.07) 26%,
    rgba(255, 255, 255, 0.028) 54%,
    rgba(255, 255, 255, 0.008) 78%,
    rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  animation: light-on 3.2s var(--ease) both;
}
@keyframes light-on {
  from { opacity: 0; scale: 0.72; }
  to { opacity: 1; scale: 1; }
}
/* fine grain over the light, so the gradient does not band on a dark screen */
.orb-light::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .1 -.025'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
}
/* two slow drifts of light, so the pool is never still */
.orb-light span {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.055);
  filter: blur(70px);
  will-change: transform;
}
.orb-light span:nth-child(1) { left: 24%; top: 20%; width: 34%; height: 44%; animation: drift-a 19s ease-in-out infinite alternate; }
.orb-light span:nth-child(2) { right: 22%; bottom: 18%; width: 30%; height: 40%; animation: drift-b 23s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate3d(22%, 14%, 0) scale(1.2); } }
@keyframes drift-b { to { transform: translate3d(-20%, -12%, 0) scale(1.25); } }

.orb-shift { position: absolute; inset: 0; will-change: transform; }
.orb-float {
  position: absolute;
  inset: 0;
  animation: orb-float 9s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes orb-float {
  from { transform: translate3d(0, -7px, 0) rotate(-0.7deg); }
  to { transform: translate3d(0, 7px, 0) rotate(0.7deg); }
}

.orb-float svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--white);
}

/* the line drawing with its neon bloom; it draws itself once on load */
.orb-still {
  filter:
    drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.9))
    drop-shadow(0 0 9px rgba(255, 255, 255, 0.5))
    drop-shadow(0 0 28px rgba(255, 255, 255, 0.3));
  stroke-dasharray: 1200;
  animation: orb-draw 2.6s var(--ease) 0.15s both, fade-in 0.9s var(--ease) 0.15s both;
  will-change: transform;
}
@keyframes orb-draw { from { stroke-dashoffset: 1200; } to { stroke-dashoffset: 0; } }

/* a wide soft copy of the drawing that breathes */
.orb-halo { position: absolute; inset: 0; animation: fade-in 2.4s var(--ease) 1.3s both; }
.orb-halo svg { filter: blur(16px); animation: orb-breathe 5.5s ease-in-out infinite alternate; will-change: opacity; }
@keyframes orb-breathe { from { opacity: 0.25; } to { opacity: 0.8; } }

/* light running round the ring, and moons that pass behind the planet */
.orb-live { animation: fade-in 2.2s var(--ease) 1.9s both; will-change: transform; }
.orb-pulse {
  stroke-dasharray: 60 940;
  stroke-dashoffset: 60;
  animation: orb-run 7s linear infinite;
}
.orb-pulse.is-wide { stroke-width: 17; opacity: 0.13; }
.orb-pulse.is-mid { stroke-width: 8; opacity: 0.34; }
.orb-pulse.is-inner { animation-duration: 9.5s; animation-delay: -3.4s; }
@keyframes orb-run { to { stroke-dashoffset: -940; } }

/* a pasted link is answered with a swell of light */
.orb.is-lit .orb-light { animation: light-swell 1.8s var(--ease); }
.orb.is-lit .orb-halo svg { animation: halo-flash 1.8s var(--ease), orb-breathe 5.5s ease-in-out 1.8s infinite alternate; }
@keyframes light-swell {
  0% { scale: 1; }
  30% { scale: 1.16; }
  100% { scale: 1; }
}
@keyframes halo-flash {
  0% { opacity: 0.5; }
  28% { opacity: 1; }
  100% { opacity: 0.25; }
}

h1 {
  font-size: clamp(2.25rem, 4.9vw, 4.25rem);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
  text-shadow: var(--bloom-text);
  animation: rise 1.3s var(--ease) 0.45s both;
}

.lede {
  max-width: 56ch;
  margin: clamp(18px, 2.2vw, 26px) auto 0;
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height: 1.55;
  color: var(--mute);
  text-wrap: pretty;
  animation: rise 1.3s var(--ease) 0.6s both;
}

/* ---------- the link field ---------- */

.finder {
  max-width: 760px;
  margin: clamp(26px, 3vw, 36px) auto 0;
  animation: rise 1.3s var(--ease) 0.75s both;
}

.field {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 68px;
  padding: 0 8px 0 24px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 60px -18px rgba(255, 255, 255, 0.22);
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease), box-shadow 0.6s var(--ease);
}
.field:focus-within {
  border-color: var(--white);
  background: rgba(0, 0, 0, 0.75);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 54px -6px rgba(255, 255, 255, 0.48);
}
.field.is-bad { border-color: var(--bad); box-shadow: 0 0 44px -10px rgba(255, 143, 133, 0.5); }

.field-ico {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--dim);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.4s var(--ease);
}
.field:focus-within .field-ico { stroke: var(--white); }

.field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  outline: 0;
  font-size: 1.0625rem;
  text-overflow: ellipsis;
}
.field input::placeholder { color: var(--dim); opacity: 1; }

/* under the field, the hint and the error share one line and trade places */
.finder-foot { display: grid; min-height: 1.5rem; margin-top: 12px; }
.finder-foot > * { grid-area: 1 / 1; }
.finder-hint {
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--dim);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.finder-hint.is-off { opacity: 0; transform: translateY(4px); }

.field-msg {
  min-height: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.5rem;
  color: var(--bad);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.field-msg.is-on { opacity: 1; transform: none; }

@media (max-width: 560px) {
  .field {
    display: grid;
    gap: 12px;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .field:focus-within, .field.is-bad { background: none; box-shadow: none; }
  .field-ico { display: none; }
  .field input {
    height: 60px;
    padding: 0 24px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    box-shadow: 0 0 50px -16px rgba(255, 255, 255, 0.22);
    text-align: center;
    transition: border-color 0.4s var(--ease), box-shadow 0.6s var(--ease);
  }
  .field input:focus {
    border-color: var(--white);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 44px -6px rgba(255, 255, 255, 0.45);
  }
  .field.is-bad input { border-color: var(--bad); }
  .field .btn { height: 56px; }
}

/* ---------- early access panel ---------- */

.access {
  display: grid;
  grid-template-rows: 0fr;
  max-width: 760px;
  margin-inline: auto;
  opacity: 0;
  transition: grid-template-rows 0.7s var(--ease), opacity 0.5s var(--ease);
}
.access.is-open { grid-template-rows: 1fr; opacity: 1; }
.access-clip { min-height: 0; overflow: hidden; }

.access-card {
  margin-top: 6px;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(10, 10, 10, 0.88);
  text-align: left;
}
.access-title {
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.access-text { max-width: 52ch; margin-top: 8px; color: var(--mute); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* the top padding is only there to make the link easier to hit */
  margin-top: 6px;
  padding: 12px 0 3px;
  border-bottom: 1px solid var(--line-strong);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.35s var(--ease), text-shadow 0.35s var(--ease);
}
.text-link::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.35s var(--ease);
}
.text-link:hover { border-bottom-color: var(--white); text-shadow: 0 0 18px rgba(255, 255, 255, 0.5); }
.text-link:hover::after { transform: translateX(3px) rotate(45deg); }
.text-link.is-back::after { display: none; }
.text-link.is-back::before {
  content: "";
  width: 7px;
  height: 7px;
  border-bottom: 1.5px solid currentColor;
  border-left: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.35s var(--ease);
}
.text-link.is-back:hover::before { transform: translateX(-3px) rotate(45deg); }

/* ---------- the pair ---------- */

.pair {
  margin-top: clamp(44px, 5vw, 60px);
  animation: rise 1.4s var(--ease) 0.95s both;
}

.pair-head, .pair-row {
  display: grid;
  grid-template-columns: 1fr clamp(132px, 17vw, 208px) 1fr;
}

.pair-head { align-items: end; padding-bottom: clamp(18px, 2.6vw, 28px); }

.pair-side, .pair-mid { display: flex; flex-direction: column; gap: 2px; }
.pair-side.is-listing { align-items: flex-end; text-align: right; padding-right: clamp(8px, 3vw, 44px); }
.pair-side.is-source { align-items: flex-start; padding-left: clamp(8px, 3vw, 44px); }
.pair-mid { align-items: center; text-align: center; }

.pair-kicker { font-size: 0.8125rem; font-weight: 500; line-height: 1.3; color: var(--dim); }
.pair-name { font-size: clamp(1.125rem, 1.8vw, 1.375rem); letter-spacing: -0.01em; }
.pair-side.is-listing .pair-name { color: var(--mute); }
.pair-side.is-source .pair-name { text-shadow: var(--bloom-text); }
.pair-mid .pair-name { font-size: 1rem; color: var(--mute); }

.pair-row {
  align-items: baseline;
  padding: clamp(16px, 2.2vw, 24px) 0;
  border-top: 1px solid var(--line);
}
.pair-row:last-child { border-bottom: 1px solid var(--line); }

.pair-label {
  font-size: 0.875rem;
  line-height: 1.3;
  text-align: center;
  color: var(--dim);
}

.pair-val {
  font-size: clamp(1.375rem, 3vw, 2.375rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.pair-val.is-listing { text-align: right; padding-right: clamp(8px, 3vw, 44px); color: var(--dim); }
.pair-val.is-source {
  padding-left: clamp(8px, 3vw, 44px);
  color: var(--white);
  text-shadow: var(--bloom-text);
}
.pair-val.is-source > span { display: inline-block; }

.pair-row.is-total .pair-val { font-weight: 400; }
.pair-row.is-total .pair-label { color: var(--mute); }

/* After a beat the source side resolves out of the dark. */
.js .pair .pair-side.is-source,
.js .pair .pair-val.is-source > span {
  transition:
    opacity 1.1s var(--ease),
    filter 1.1s var(--ease),
    transform 1.1s var(--ease);
  transition-delay: calc(var(--i, 0) * 130ms + 150ms);
}
.js .pair:not(.is-resolved) .pair-side.is-source,
.js .pair:not(.is-resolved) .pair-val.is-source > span {
  opacity: 0;
  filter: blur(12px);
  transform: translateX(-18px);
}

.verdict { margin-top: clamp(40px, 6vw, 72px); text-align: center; }
.js .verdict { transition: opacity 1.1s var(--ease) 0.9s, transform 1.1s var(--ease) 0.9s, filter 1.1s var(--ease) 0.9s; }
.js .pair:not(.is-resolved) + .verdict { opacity: 0; transform: translateY(14px); filter: blur(8px); }

.verdict-line {
  font-size: clamp(1.75rem, 3.8vw, 3rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.verdict-line b {
  font-weight: 400;
  font-variant-numeric: tabular-nums lining-nums;
  text-shadow: 0 0 34px rgba(255, 255, 255, 0.4);
}

.volume { max-width: 520px; margin: clamp(24px, 3.4vw, 36px) auto 0; }
.volume-text { color: var(--mute); }
.volume-text output, .volume-text strong {
  color: var(--white);
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
}

.range {
  --p: 9.09%;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 32px;
  margin: 10px 0 0;
  background: transparent;
  cursor: pointer;
}
.range::-webkit-slider-runnable-track {
  height: 1px;
  background: linear-gradient(to right, var(--white) var(--p), var(--line-strong) var(--p));
}
.range::-moz-range-track { height: 1px; background: var(--line-strong); }
.range::-moz-range-progress { height: 1px; background: var(--white); }
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 18px 1px rgba(255, 255, 255, 0.6);
  transition: transform 0.3s var(--ease), box-shadow 0.4s var(--ease);
}
.range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 18px 1px rgba(255, 255, 255, 0.6);
  transition: transform 0.3s var(--ease), box-shadow 0.4s var(--ease);
}
.range:hover::-webkit-slider-thumb, .range:active::-webkit-slider-thumb { transform: scale(1.2); box-shadow: 0 0 28px 3px rgba(255, 255, 255, 0.75); }
.range:hover::-moz-range-thumb, .range:active::-moz-range-thumb { transform: scale(1.2); box-shadow: 0 0 28px 3px rgba(255, 255, 255, 0.75); }
.range:focus-visible { outline: 0; }
.range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--white); outline-offset: 4px; }
.range:focus-visible::-moz-range-thumb { outline: 2px solid var(--white); outline-offset: 4px; }

.pair-note { margin-top: clamp(20px, 3vw, 28px); font-size: 0.875rem; color: var(--dim); }

@media (max-width: 720px) {
  .pair-head, .pair-row { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .pair-mid { grid-column: 1 / -1; order: -1; margin-bottom: 22px; align-items: flex-start; text-align: left; }
  .pair-side.is-listing, .pair-side.is-source { align-items: flex-start; text-align: left; padding: 0; }
  .pair-row { row-gap: 6px; }
  .pair-label { grid-column: 1 / -1; order: -1; text-align: left; }
  .pair-val.is-listing, .pair-val.is-source { text-align: left; padding: 0; }
}

/* ---------- sections ---------- */

.section {
  position: relative;
  isolation: isolate;
  padding: var(--section) 0;
  border-top: 1px solid var(--line);
  /* the pools of light reach past the edge of the page; cut them there so a phone never scrolls sideways */
  overflow-x: clip;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.split-head { position: sticky; top: calc(var(--nav-h) + 40px); }
.split-head h2 { font-size: clamp(1.75rem, 3.1vw, 2.625rem); }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split-head { position: static; }
}

#how::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -18%;
  top: 6%;
  width: min(900px, 130vw);
  aspect-ratio: 1.4;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.026) 40%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

/* ---------- route lines: steps (down) and flow (across) ----------
   site.js sets --fill (0 to 1) on each item from the scroll position and
   eases it, so the line glides even when the page scrolls in jumps. */

.steps {
  --gap: clamp(44px, 6vw, 80px);
  display: grid;
  gap: var(--gap);
  padding-left: 44px;
}
.steps li { position: relative; }
.steps li::before {
  content: "";
  position: absolute;
  left: -44px;
  top: 0.62em;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--bloom-dot);
}
.steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: -39px;
  top: calc(0.62em + 21px);
  bottom: calc(-1 * var(--gap) - 0.62em + 10px);
  width: 1px;
  background:
    linear-gradient(var(--white), var(--white)) top / 100% calc(var(--fill, 0) * 100%) no-repeat,
    var(--line-strong);
}
.steps h3 {
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.steps p { max-width: 44ch; margin-top: 10px; color: var(--mute); }

/* ---------- pricing ---------- */

#pricing::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -16%;
  top: -6%;
  width: min(1100px, 150vw);
  aspect-ratio: 1.5;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.085) 0%, rgba(255, 255, 255, 0.04) 36%, rgba(255, 255, 255, 0.012) 66%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

.price-big {
  font-size: clamp(3.25rem, 10vw, 6rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: lining-nums;
  text-shadow: 0 0 46px rgba(255, 255, 255, 0.32);
}
.price-lede {
  max-width: 40ch;
  margin-top: clamp(20px, 2.6vw, 32px);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.5;
  color: var(--mute);
  text-wrap: pretty;
}

.paid { margin-top: clamp(64px, 9vw, 120px); }
.paid-title {
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(36px, 5vw, 56px);
}
.flow li {
  position: relative;
  padding: 32px clamp(16px, 3vw, 40px) 0 0;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.35;
}
.flow li b { display: block; max-width: 22ch; font-weight: 400; }
.flow li span {
  display: block;
  max-width: 30ch;
  margin-top: 10px;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--mute);
}
.flow li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--bloom-dot);
}
.flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 21px;
  right: 10px;
  top: 5px;
  height: 1px;
  background:
    linear-gradient(var(--white), var(--white)) left / calc(var(--fill, 0) * 100%) 100% no-repeat,
    var(--line-strong);
}

@media (max-width: 860px) {
  .flow { --gap: 36px; grid-template-columns: 1fr; gap: var(--gap); padding-left: 44px; }
  .flow li { padding: 0; }
  .flow li b { max-width: none; }
  .flow li span { max-width: 44ch; }
  .flow li::before { left: -44px; top: 0.5em; }
  .flow li:not(:last-child)::after {
    left: -39px;
    right: auto;
    top: calc(0.5em + 21px);
    bottom: calc(-1 * var(--gap) - 0.5em + 10px);
    width: 1px;
    height: auto;
    background:
      linear-gradient(var(--white), var(--white)) top / 100% calc(var(--fill, 0) * 100%) no-repeat,
      var(--line-strong);
  }
}

/* ---------- labs: the account side, offered and never forced ---------- */

#labs::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -12%;
  top: 8%;
  width: min(1000px, 140vw);
  aspect-ratio: 1.4;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.032) 40%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

.labs {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.labs-copy h2 { font-size: clamp(1.75rem, 3.1vw, 2.625rem); }
.labs-lede {
  max-width: 38ch;
  margin-top: clamp(18px, 2.2vw, 26px);
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  color: var(--mute);
  text-wrap: pretty;
}
.labs-copy .btn { margin-top: clamp(24px, 3vw, 36px); }

/* a look at Labs: lit from above, like a screen in a dark room */
.labs-view {
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.014) 36%, rgba(255, 255, 255, 0) 100%),
    var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 50px 120px -50px rgba(255, 255, 255, 0.2);
  overflow: hidden;
}
.labs-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
}
.labs-mark {
  --sw: 7px;
  --dot: 2.2;
  width: 45px;
  height: 28px;
  flex: none;
  color: var(--white);
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.45));
}
.labs-title { font-weight: 500; letter-spacing: -0.01em; }
.labs-tag {
  margin-left: auto;
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--dim);
}
.labs-body { display: grid; grid-template-columns: 156px 1fr; }
.labs-rail {
  display: grid;
  gap: 2px;
  align-content: start;
  padding: 14px 10px;
  border-right: 1px solid var(--line);
}
.labs-rail li { padding: 9px 13px; border-radius: 999px; font-size: 0.9375rem; color: var(--dim); }
.labs-rail li.is-on { color: var(--white); background: rgba(255, 255, 255, 0.08); }
.labs-list li {
  display: grid;
  grid-template-columns: 1fr auto 104px;
  align-items: center;
  gap: 16px;
  padding: 17px 22px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
}
.labs-list li:last-child { border-bottom: 0; }
.labs-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.labs-price { color: var(--mute); font-variant-numeric: tabular-nums lining-nums; }
.labs-state { display: inline-flex; align-items: center; gap: 8px; color: var(--mute); }
.labs-state::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 10px 1px rgba(255, 255, 255, 0.6);
}
.labs-list .is-busy .labs-name, .labs-list .is-busy .labs-price { color: var(--dim); }
.labs-list .is-busy .labs-state::before { animation: busy 1.3s ease-in-out infinite alternate; }
@keyframes busy {
  from { opacity: 0.2; transform: scale(0.75); }
  to { opacity: 1; transform: scale(1.15); }
}

@media (max-width: 860px) {
  .labs { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .labs-body { grid-template-columns: 1fr; }
  .labs-rail {
    display: flex;
    gap: 4px;
    padding: 10px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, #000 78%, transparent 100%);
    mask-image: linear-gradient(to right, #000 78%, transparent 100%);
  }
  .labs-rail li { flex: none; padding: 8px 12px; font-size: 0.875rem; }
  .labs-list li { grid-template-columns: 1fr auto auto; gap: 12px; padding: 15px 16px; }
}

/* ---------- the Labs page and the not-found page ---------- */

.gate {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(var(--nav-h) + 24px) 0 clamp(48px, 8vw, 96px);
  overflow: clip;
  text-align: center;
}
.gate::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 42%;
  width: min(1400px, 220vw);
  aspect-ratio: 1.5;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.062) 28%, rgba(255, 255, 255, 0.022) 58%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  animation: light-on 3s var(--ease) both;
}
.gate-in { width: min(100% - 2 * var(--gutter), 440px); }
.gate-mark {
  width: 132px;
  height: 87px;
  margin: 0 auto;
  color: var(--white);
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.9))
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.5))
    drop-shadow(0 0 30px rgba(255, 255, 255, 0.3));
  animation: orb-float 9s ease-in-out infinite alternate, fade-in 1.6s var(--ease) both;
}
.gate h1 { margin-top: 18px; font-size: clamp(2.5rem, 7vw, 3.75rem); animation-delay: 0.25s; }
.gate-lede { margin-top: 14px; color: var(--mute); text-wrap: balance; animation: rise 1.3s var(--ease) 0.4s both; }
.gate-ways { display: grid; gap: 10px; margin-top: clamp(28px, 4vw, 40px); animation: rise 1.3s var(--ease) 0.55s both; }
.gate-ways li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 58px;
  padding: 0 14px 0 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--mute);
}
.gate-ways span {
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--dim);
}
.gate-note { margin-top: 20px; font-size: 0.875rem; color: var(--dim); text-wrap: balance; animation: rise 1.3s var(--ease) 0.7s both; }
.gate .text-link { margin-top: clamp(16px, 3vw, 28px); animation: rise 1.3s var(--ease) 0.85s both; }

/* ---------- plain text pages (privacy) ---------- */

.doc { padding: calc(var(--nav-h) + clamp(40px, 8vw, 96px)) 0 clamp(64px, 10vw, 128px); }
.doc-in { width: min(100% - 2 * var(--gutter), 720px); margin-inline: auto; }
.doc h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); animation-delay: 0.25s; }
.doc-lede { margin-top: 14px; font-size: 1.125rem; color: var(--mute); animation: rise 1.3s var(--ease) 0.4s both; }
.doc h2 { margin-top: clamp(40px, 6vw, 64px); font-size: 1.375rem; font-weight: 400; line-height: 1.25; letter-spacing: -0.015em; }
.doc p, .doc li { color: var(--mute); }
.doc p { margin-top: 16px; }
.doc ul { display: grid; gap: 12px; margin-top: 16px; }
.doc li { position: relative; padding-left: 22px; }
.doc li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--bloom-dot);
}
.doc li a, .doc p a { color: var(--white); text-underline-offset: 3px; }
.doc .doc-date { margin-top: clamp(40px, 6vw, 64px); font-size: 0.875rem; color: var(--dim); }
.doc .text-link { margin-top: 20px; }
.foot a { color: inherit; text-underline-offset: 3px; }

/* ---------- questions ---------- */

.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item h3 { font: inherit; }

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: clamp(20px, 2.4vw, 26px) 0;
  border: 0;
  background: none;
  text-align: left;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.012em;
  cursor: pointer;
  transition: text-shadow 0.4s var(--ease);
}
.faq-q:hover, .faq-item.is-open .faq-q { text-shadow: 0 0 22px rgba(255, 255, 255, 0.35); }

.faq-ico { position: relative; flex: none; width: 16px; height: 16px; }
.faq-ico::before, .faq-ico::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 0.75px);
  height: 1.5px;
  border-radius: 2px;
  background: var(--mute);
  transition: transform 0.5s var(--ease), background-color 0.3s var(--ease);
}
.faq-ico::after { transform: rotate(90deg); }
.faq-q:hover .faq-ico::before, .faq-q:hover .faq-ico::after { background: var(--white); }
.faq-q[aria-expanded="true"] .faq-ico::after { transform: rotate(0deg); }

.faq-a { display: grid; grid-template-rows: 1fr; }
.faq-a > div { min-height: 0; overflow: hidden; }
.faq-a p { max-width: 54ch; padding: 0 40px clamp(22px, 2.6vw, 28px) 0; color: var(--mute); }

.js .faq-a { grid-template-rows: 0fr; transition: grid-template-rows 0.6s var(--ease); }
.js .faq-a p {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.4s var(--ease), transform 0.6s var(--ease);
}
.js .faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.js .faq-item.is-open .faq-a p { opacity: 1; transform: none; }

/* ---------- close and footer ---------- */

.close {
  position: relative;
  isolation: isolate;
  padding: var(--section) 0 clamp(80px, 10vw, 136px);
  border-top: 1px solid var(--line);
  text-align: center;
  overflow: clip;
}
.close::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: clamp(40px, 6vw, 96px);
  width: min(1300px, 200vw);
  aspect-ratio: 1.5;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.115) 0%, rgba(255, 255, 255, 0.06) 28%, rgba(255, 255, 255, 0.02) 58%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}
.close-float { animation: orb-float 9s ease-in-out infinite alternate; will-change: transform; }
.close-badge {
  width: min(500px, 78vw);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.42)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.24));
}
.close h2 { margin-top: clamp(24px, 4vw, 44px); text-shadow: var(--bloom-text); }
.close .btn { margin-top: clamp(24px, 3vw, 36px); }

.foot { padding: 28px 0 40px; border-top: 1px solid var(--line); }
.foot .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 32px;
  font-size: 0.875rem;
  color: var(--dim);
}

/* ---------- sign-in: a two-panel window over the page ---------- */

html:has(dialog.signin[open]) { overflow: hidden; }

.signin {
  width: min(920px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 28px;
  background: var(--ink);
  color: var(--white);
  overflow: auto;
  box-shadow: 0 40px 140px -30px rgba(255, 255, 255, 0.18);
}
.signin::backdrop {
  background: rgba(0, 0, 0, 0.68);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.signin[open] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  animation: signin-in 0.24s var(--ease);
}
.signin[open]::backdrop { animation: fade-in 0.24s var(--ease); }
.signin.is-closing { animation: signin-out 0.18s ease-in forwards; }
.signin.is-closing::backdrop { animation: fade-out 0.18s ease-in forwards; }
@keyframes signin-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
@keyframes signin-out { to { opacity: 0; transform: translateY(8px) scale(0.985); } }
@keyframes fade-out { to { opacity: 0; } }

/* left: the logo in its light, and the one line that says what this is */
.signin-show {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: end;
  min-height: 520px;
  padding: 36px;
  overflow: hidden;
}
.signin-show::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 38%;
  width: 900px;
  aspect-ratio: 1.5;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.07) 28%, rgba(255, 255, 255, 0.024) 58%, rgba(255, 255, 255, 0) 100%);
}
.signin-art {
  position: absolute;
  left: 50%;
  top: 37%;
  width: min(340px, 74%);
  aspect-ratio: 348 / 216;
  translate: -50% -50%;
  animation: orb-float 9s ease-in-out infinite alternate;
}
.signin-art svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--white);
}
.signin-art .is-halo { filter: blur(14px); animation: orb-breathe 5.5s ease-in-out infinite alternate; }
.signin-art .is-line {
  filter:
    drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.9))
    drop-shadow(0 0 9px rgba(255, 255, 255, 0.5))
    drop-shadow(0 0 26px rgba(255, 255, 255, 0.3));
}
.signin-tag {
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-shadow: var(--bloom-text);
}
.signin-sub { max-width: 34ch; margin-top: 10px; font-size: 0.9375rem; line-height: 1.5; color: var(--mute); }

/* right: the ways in */
.signin-panel {
  display: grid;
  align-content: center;
  gap: 14px;
  padding: 26px 32px 30px;
  border-left: 1px solid var(--line);
  background: var(--ink-raised);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.signin-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.signin-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 1.125rem; letter-spacing: -0.01em; }
.signin-brand .brand-mark { --sw: 6.4px; width: 52px; height: 32px; }
.signin-x {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--mute);
  cursor: pointer;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.signin-x:hover { color: var(--white); background: rgba(255, 255, 255, 0.08); }
.signin-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.signin .signin-title {
  margin-bottom: 8px;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-shadow: none;
}
.signin-way {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 20px;
  align-items: center;
  height: 52px;
  padding: 0 20px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: none;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--white);
  cursor: pointer;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), box-shadow 0.5s var(--ease);
}
.signin-way:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 28px -8px rgba(255, 255, 255, 0.45);
}
.signin-way svg { width: 20px; height: 20px; }
.signin-way span { text-align: center; }
.signin-or {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  font-size: 0.8125rem;
  color: var(--dim);
}
.signin-or::before, .signin-or::after { content: ""; height: 1px; background: var(--line); }
.signin-form { display: grid; gap: 12px; }
.signin-form input {
  height: 52px;
  padding: 0 20px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  outline: 0;
  font-size: 0.9375rem;
  transition: border-color 0.3s var(--ease), box-shadow 0.5s var(--ease);
}
.signin-form input:focus {
  border-color: var(--white);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 36px -8px rgba(255, 255, 255, 0.45);
}
.signin-form input::placeholder { color: var(--dim); opacity: 1; }
.signin-note {
  min-height: 3em;
  margin-top: 4px;
  font-size: 0.875rem;
  color: var(--dim);
  transition: color 0.3s var(--ease);
}
.signin-note.is-on { color: var(--white); }
.signin-note.is-bad { color: var(--bad); }
.signin-form input[aria-invalid="true"] { border-color: var(--bad); }

@media (max-width: 760px) {
  .signin { width: min(440px, calc(100vw - 24px)); }
  .signin[open] { grid-template-columns: minmax(0, 1fr); }
  .signin-show { display: none; }
  .signin-panel { border-left: 0; padding: 22px 22px 24px; }
}

/* a short screen, such as a phone on its side, gets the form alone and can scroll */
@media (max-height: 560px) {
  .signin { width: min(440px, calc(100vw - 24px)); }
  .signin[open] { grid-template-columns: minmax(0, 1fr); }
  .signin-show { display: none; }
  .signin-panel { border-left: 0; }
}

/* the two quiet suggestions under a pasted link */
.access-links { display: flex; flex-wrap: wrap; gap: 0 28px; }

/* ---------- what a pasted link was found for ----------
   The pair from further down the page, in small: the listing dim, Source14 lit, the saving after it.
   The prices roll down from the listing's as the panel opens. */
.found-kicker { font-size: 0.8125rem; font-weight: 500; line-height: 1.3; color: var(--dim); }
.found .access-title { margin-top: 6px; }
.found-figs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 18px 0 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.found-figs > div { display: grid; align-content: space-between; gap: 6px; min-width: 0; padding: 16px 0 16px 20px; border-left: 1px solid var(--line); }
.found-figs > div:first-child { padding-left: 0; border-left: 0; }
.found-figs dt { font-size: 0.8125rem; font-weight: 500; line-height: 1.3; color: var(--dim); }
.found-figs dd {
  margin: 0;
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums lining-nums;
}
.found-figs dd.is-listing { color: var(--dim); }
.found-figs dd.is-source { font-weight: 400; text-shadow: 0 0 34px rgba(255, 255, 255, 0.4); }
.found-meta { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 14px; font-size: 0.875rem; color: var(--dim); }
.found-meta b { font-weight: 500; color: var(--white); }
.found-meta[hidden], .found-meta [hidden] { display: none; }
.found .access-text { margin-top: 14px; }
/* a calm refusal, such as too many look-ups at once, is not an error */
.finder .field-msg.is-note { color: var(--mute); }
/* the button that is asking stays itself, and only breathes */
.finder .btn[aria-busy="true"] { animation: ask 0.9s ease-in-out infinite alternate; }
@keyframes ask { to { box-shadow: 0 0 40px -6px rgba(255, 255, 255, 0.7); } }

@media (max-width: 560px) {
  /* each figure becomes a line: its label, then its value at the end */
  .found-figs { grid-template-columns: minmax(0, 1fr); }
  .found-figs > div,
  .found-figs > div:first-child {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 12px;
    padding: 12px 0;
    border-left: 0;
  }
  .found-figs > div + div { border-top: 1px solid var(--line); }
}
button.text-link {
  border-width: 0 0 1px;
  border-style: solid;
  border-color: var(--line-strong);
  background: none;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: inherit;
  cursor: pointer;
}