@font-face {
  font-family: 'PantarayWordmark';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('PantarayWordmark-600.woff2') format('woff2');
}

:root {
  --night: #0a0d12;

  /* Alphas are set by the contrast floor against the brightest the fog gets,
     not by taste: every one of these lands over a moving background. */
  --ink: rgba(238, 245, 255, 0.95);
  --ink-soft: rgba(213, 226, 241, 0.92);
  --ink-mute: rgba(190, 205, 223, 0.78);
  --ink-faint: rgba(178, 194, 213, 0.72);

  --moon: #cfe0f5;
  --moon-hot: #eef5ff;
  --accent: rgb(125, 171, 220);
  --focus-ring: rgba(125, 171, 220, 0.75);

  --line: rgba(196, 214, 236, 0.14);
  --line-strong: rgba(196, 214, 236, 0.26);

  --radius: 10px;
  --gutter: clamp(20px, 5vw, 72px);
  --measure: 34rem;

  --font-sans:
    -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', 'Hiragino Sans',
    'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic UI', Meiryo, sans-serif;

  --label-tracking: 0.16em;
  --label-transform: uppercase;
}

html:lang(ja) {
  --label-tracking: 0.04em;
  --label-transform: none;
  --measure: 30rem;
}

/* Japanese wraps per character by default, which splits compounds like
   「提案／します」. Browsers that know phrase breaking do better; the rest fall
   back to the default and lose nothing. */
html:lang(ja) h1,
html:lang(ja) h2,
html:lang(ja) p {
  word-break: auto-phrase;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  position: relative;
  background: var(--night);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a {
  color: inherit;
}

/* No border-radius here: the outline already follows each element's own shape,
   and setting one would square the buttons off while they are focused. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -140%;
  z-index: 10;
  padding: 10px 18px;
  background: var(--moon-hot);
  color: #0b0f15;
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  font-size: 0.875rem;
}

.skip:focus-visible {
  translate: -50% 0;
}

/* ---------- header ---------- */

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(20px, 3.4vw, 34px) var(--gutter);
}

/* Size and tracking are the app's `.brand-wordmark`. */
.wordmark {
  font-family: 'PantarayWordmark', var(--font-sans);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: -0.008em;
  text-decoration: none;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.44em;
}

/* The symbol is 2.22em wide next to the word, centered on the cap height. */
.wordmark-symbol {
  width: 2.22em;
  height: auto;
  translate: 0 -0.08em;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  font-size: 0.875rem;
}

.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 160ms ease;
}

/* The padding is the tap target, not the look: 14px text on its own is a 23px
   row, just under the 24px minimum. Buttons bring their own and keep it. */
.site-nav a:not(.btn) {
  padding: 4px 0;
}

.site-nav a:hover {
  color: var(--ink);
}

.site-nav .icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
}

.site-nav svg {
  width: 17px;
  height: 17px;
  display: block;
}

/* The language menu names the page's own language, like the help center's,
   and lists both. A native <details> keeps it working without script. */
.lang {
  position: relative;
}

.lang summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  color: var(--ink-soft);
  list-style: none;
  cursor: pointer;
  transition: color 160ms ease;
}

.lang summary::-webkit-details-marker {
  display: none;
}

.lang summary:hover,
.lang[open] summary {
  color: var(--ink);
}

.site-nav .lang svg {
  width: 15px;
  height: 15px;
}

.lang ul {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  min-width: 8rem;
  background: var(--night);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}

.site-nav .lang a {
  display: block;
  padding: 8px 10px;
  border-radius: calc(var(--radius) - 4px);
}

.site-nav .lang a:hover {
  background: var(--line);
}

.site-nav .lang a[aria-current='page'] {
  color: var(--ink);
  font-weight: 600;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius);
  text-decoration: none;
  font-size: 0.9375rem;
  line-height: 1.2;
  padding: 14px 24px;
  border: 1px solid transparent;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
  white-space: nowrap;
}

.btn--solid {
  background: var(--moon);
  color: #0a0e14;
  font-weight: 500;
}

.btn--solid:hover {
  background: var(--moon-hot);
}

.btn--line {
  border-color: rgba(207, 224, 245, 0.3);
  color: var(--ink);
  background: rgba(207, 224, 245, 0.03);
}

.btn--line:hover {
  border-color: rgba(207, 224, 245, 0.55);
  background: rgba(207, 224, 245, 0.08);
}

.btn--sm {
  padding: 8px 14px;
  font-size: 0.8125rem;
}

/* The platform mark sits in the button that downloads for it. Sized off the
   text so it tracks the label, and a shade under full strength so it reads as
   a mark rather than as a second word. */
.btn-icon {
  width: auto;
  height: 1.05em;
  flex: none;
  opacity: 0.85;
  /* the glyph's own mass sits low; this puts it on the text's optical centre */
  margin-top: -0.12em;
}

.btn--sm .btn-icon {
  height: 0.95em;
}

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

.hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(112px, 16vh, 168px) var(--gutter) clamp(72px, 12vh, 132px);
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}

.hero h1 {
  margin: 0;
  max-width: 17ch;
  font-size: clamp(2.5rem, 6.4vw, 5rem);
  font-weight: 300;
  line-height: 1.07;
  letter-spacing: -0.022em;
  color: var(--moon-hot);
}


/* Break only where the sentence allows it, never mid-phrase. */
.hero h1 span {
  display: inline-block;
}

/* Clearly subordinate to the headline and still ahead of the buttons. */
.lede {
  margin: clamp(18px, 2.6vh, 28px) 0 0;
  max-width: 34ch;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Same reason as the headline: a line may end at a full stop and nowhere else. */
.lede span {
  display: inline-block;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(30px, 4.2vh, 46px);
}


.cue {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 4vh, 44px);
  width: 1px;
  height: clamp(30px, 5vh, 52px);
  background: linear-gradient(180deg, transparent, rgba(207, 224, 245, 0.38));
  z-index: 1;
}

/* ---------- everything under the hero ---------- */

/* The fog does not stop at the hero, it is dimmed away by this veil: scrolling
   down the light sinks into the dark, and scrolling back up it comes out of it. */
.below {
  --pillars-top: clamp(96px, 16vh, 180px);
  position: relative;
  z-index: 1;
  /* Opaque from the first item on: the fog is fixed, so anything short of that
     leaves the moon showing faintly behind the text however far the page has
     scrolled. The ramp runs over the space above the items and is eased at both
     ends, because a straight one draws its own edge across the light. */
  background: linear-gradient(
    180deg,
    rgba(10, 13, 18, 0) 0%,
    rgba(10, 13, 18, 0.14) calc(var(--pillars-top) * 0.2),
    rgba(10, 13, 18, 0.5) calc(var(--pillars-top) * 0.5),
    rgba(10, 13, 18, 0.86) calc(var(--pillars-top) * 0.8),
    var(--night) var(--pillars-top)
  );
}

.wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* padding-block, not the shorthand: these also carry .wrap, and a shorthand
   with 0 sides silently deletes its gutter on any window under 1320px. */
.pillars {
  padding-block: var(--pillars-top) clamp(40px, 6vh, 72px);
}

.pillar-grid {
  display: grid;
  gap: 0 clamp(40px, 6vw, 96px);
  grid-template-columns: 1fr;
}

.pillar {
  padding: clamp(32px, 4.5vh, 52px) 0;
  border-top: 1px solid var(--line);
}

.pillar .num {
  display: block;
  margin-bottom: 18px;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.pillar h2 {
  margin: 0 0 14px;
  font-size: clamp(1.375rem, 1.4vw + 1rem, 1.875rem);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.014em;
  color: var(--moon-hot);
}

html:lang(ja) .pillar h2 {
  letter-spacing: -0.005em;
}

.pillar p {
  margin: 0;
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: 1rem;
}

/* ---------- open source ---------- */

.oss {
  padding-block: clamp(56px, 8vh, 96px) clamp(80px, 12vh, 140px);
}

.oss-inner {
  border-top: 1px solid var(--line);
  padding-top: clamp(32px, 4.5vh, 52px);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px clamp(24px, 4vw, 48px);
}

.oss h2 {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: var(--label-tracking);
  text-transform: var(--label-transform);
  color: var(--ink-faint);
  flex: none;
}

.oss p {
  margin: 0;
  max-width: 44rem;
  color: var(--ink-soft);
}

.oss p a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color 160ms ease;
}

.oss p a:hover {
  border-color: var(--accent);
}

/* ---------- footer ---------- */

.site-footer {
  position: relative;
  z-index: 1;
  background: var(--night);
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

.footer-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 32px var(--gutter) 44px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px 32px;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px clamp(18px, 2.6vw, 30px);
}

.site-footer a {
  color: var(--ink-mute);
  text-decoration: none;
  padding: 3px 0;
  transition: color 160ms ease;
}

.site-footer a:hover {
  color: var(--ink);
}

.site-footer small {
  font-size: inherit;
}

/* ---------- responsive ---------- */

@media (min-width: 900px) {
  .pillar-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 719px) {
  .hero {
    align-items: flex-end;
  }

  .hero h1 {
    font-size: clamp(2rem, 8.6vw, 2.75rem);
    /* Wide enough for the longer of the two lines to stay whole: a narrower
       box breaks inside a phrase instead of between them. */
    max-width: 17ch;
  }


  .btn {
    padding: 13px 18px;
    font-size: 0.875rem;
  }

  .site-nav {
    gap: 14px;
  }

  /* The header has no room for the name here, so only the globe shows. The
     name stays for screen readers, and the open menu names both languages. */
  .lang summary {
    min-width: 24px;
    justify-content: center;
  }

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

  /* The whole link goes, not just its text: a link whose only content is
     hidden has no accessible name. Help is still in the hero and the footer. */
  .site-nav .nav-help {
    display: none;
  }

  .cue {
    display: none;
  }
}

/* The header is the widest fixed row on the page. Below this it stops having
   room to breathe, so the gaps close before anything is allowed to clip. */
@media (max-width: 400px) {
  .site-header {
    gap: 12px;
  }

  .site-nav {
    gap: 10px;
  }

  .site-nav .btn {
    padding: 11px 13px;
  }
}