@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:swap;src:url('/s/4c8b93f431d462c6.woff2') format('woff2-variations');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}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:swap;src:url('/s/ee9eeb232cc1fe79.woff2') format('woff2-variations');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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Schibsted Grotesk';font-style:italic;font-weight:400 900;font-display:swap;src:url('/s/4c72510c1a185a7b.woff2') format('woff2-variations');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}
@font-face{font-family:'Schibsted Grotesk';font-style:italic;font-weight:400 900;font-display:swap;src:url('/s/30f8012bb4c18faf.woff2') format('woff2-variations');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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
:root {
  --bg: hsla(240, 20%, 99%, 1);
  --bg-raised: hsla(0, 0%, 100%, 1);
  --ink: hsla(227, 17%, 10%, 1);
  --ink-muted: oklch(from var(--ink) 0.480 0.0032 286);
  --ink-faint: oklch(from var(--ink) 0.700 0.0032 286);
  --bullet-rest-opacity: 0.5;
  --accent: hsla(210, 100%, 43%, 1);
  --accent-soft: hsla(210, 100%, 44.5%, 0.4);
  --hairline: hsla(0, 0%, 0%, 0.12);
  --indent-guide: hsla(0, 0%, 0%, 0.08);
  --wikilink-marker: hsla(240, 6%, 88%, 1);
  --code: hsla(336, 68%, 47%, 1);
  --secret-marker: hsla(0, 0%, 30%, 0.4);
  --good: hsla(136, 56%, 42%, 1);
  --warn: hsla(40, 75%, 48%, 1);
  --t-small: 120ms;
  --t-medium: 200ms;
  --t-exit: 80ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
  
  --text-size: 1rem;
  --indent-extra: 0.2;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-pill: 999px;
  
  --diagram-series-l: 0.62;
  --diagram-series-c: 0.08;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsla(240, 10%, 9%, 1);
    --bg-raised: hsla(240, 9%, 12%, 1);
    --ink: hsla(240, 4%, 88%, 1);
    --ink-muted: oklch(from var(--ink) 0.680 0.0070 286);
    --ink-faint: oklch(from var(--ink) 0.410 0.0065 286);
    --accent: hsla(211, 100%, 64%, 1);
    --accent-soft: hsla(211, 100%, 62.5%, 0.45);
    --hairline: hsla(0, 0%, 100%, 0.11);
    --indent-guide: hsla(0, 0%, 100%, 0.08);
    --wikilink-marker: hsla(240, 14%, 21%, 1);
    --code: hsla(336, 75%, 72%, 1);
    --secret-marker: hsla(0, 0%, 100%, 0.35);
    --good: hsla(138, 55%, 51%, 1);
    --warn: hsla(40, 72%, 56%, 1);
    --diagram-series-l: 0.7;
  }
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  font-family: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.front {
  --gutter: 44px;
  --lead-size: 17.07px;
  display: flex;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 28px;
}

.front::after {
  content: '';
  flex: 248 1 248px;
}

.front-track {
  flex: 352 1 352px;
  min-width: 15rem;
  display: flex;
  justify-content: flex-end;
}

.front-side {
  position: sticky;
  top: 0;
  box-sizing: border-box;
  width: 240px;
  height: 100dvh;
  padding: 84px 32px 32px 8px;
}

.front-id {
  display: flex;
  align-items: center;
  gap: 8.8px;
  width: fit-content;
  color: var(--ink);
  text-decoration: none;
}

.front-icon {
  display: block;
  border-radius: var(--radius-pill);
}

.front-wordmark {
  font-size: 19.4px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.front-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding-top: 38px;
}

.front-badges a {
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--t-medium) var(--ease-standard),
    opacity var(--t-medium) var(--ease-standard);
}

.front-badges a:active {
  transform: scale(0.96);
  opacity: 0.7;
  transition: none;
}

.front-badges img {
  display: block;
}

.front-col {
  flex: none;
  width: 840px;
  box-sizing: border-box;
  border-inline: 1px solid var(--hairline);
}

.front-sect {
  padding: 84px var(--gutter) 0;
}

.front-sect p {
  margin: 0;
}

.front-h1,
.front-h2 {
  margin: 0;
}

.front-h1 {
  font-size: 2.887rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 56px;
}

.front-h2 {
  font-size: 20.7px;
  font-weight: 600;
  letter-spacing: -0.012em;
}

.front-status {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.35em;
  border-radius: var(--radius-pill);
  vertical-align: 0.1em;
}

.front-status-good {
  --ping: 2.4s;
  position: relative;
  background: var(--good);
}

.front-status-good::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--good);
  animation: front-ping var(--ping) var(--ease-decelerate) infinite;
}

@keyframes front-ping {
  from {
    opacity: 0.5;
    transform: scale(1);
  }
  60%,
  to {
    opacity: 0;
    transform: scale(2.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .front-status-good::after {
    animation: none;
    opacity: 0;
  }
}

.front-status-warn {
  background: var(--warn);
}

.front-lead {
  padding-top: 21px;
  color: var(--ink-muted);
  font-size: var(--lead-size);
}

.front-small {
  padding-top: 14px;
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 24px;
}

.front-answer {
  padding-top: 112px;
  padding-bottom: 112px;
  border-bottom: 1px solid var(--hairline);
}

.front-answer:last-child {
  border-bottom: none;
}

.front-pitch {
  padding-bottom: 112px;
}

.front-act-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  padding-top: 28px;
}

.front-link {
  color: var(--ink);
  text-decoration: underline 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--hairline);
  transition: text-decoration-color var(--t-exit) var(--ease-accelerate);
}

.front-more {
  font-size: var(--lead-size);
}

.front-button {
  display: inline-block;
  padding: 14px 24px;
  border-radius: var(--radius-10);
  background: var(--accent);
  color: var(--bg);
  font-size: var(--lead-size);
  font-weight: 600;
  line-height: 28px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  --top-edge: hsla(0, 0%, 100%, 0.24) 0 0.5px 0;
  --bottom-edge: hsla(0, 0%, 0%, 0.12) 0 -1px 0;
  --wash: transparent;
  box-shadow: var(--top-edge) inset, var(--bottom-edge) inset, inset 0 0 0 100vmax var(--wash);
  transition:
    box-shadow var(--t-exit) var(--ease-accelerate),
    transform var(--t-small) var(--ease-standard);
}

.front-button:active {
  --top-edge: hsla(0, 0%, 0%, 0.12) 0 1px 0;
  --bottom-edge: transparent 0 0 0;
  --wash: hsla(0, 0%, 0%, 0.16);
  transform: scale(0.97);
  transition: none;
}

@media (hover: hover) {
  .front-link:hover {
    text-decoration-color: currentColor;
    transition: text-decoration-color var(--t-small) var(--ease-decelerate);
  }

  .front-button:hover:not(:active) {
    --wash: hsla(0, 0%, 0%, 0.08);
    transition:
      box-shadow var(--t-small) var(--ease-decelerate),
      transform var(--t-small) var(--ease-standard);
  }
}

.front a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.front a:not(.front-button):focus-visible {
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .front-badges a:active,
  .front-button:active {
    transform: none;
  }
}

@media (max-width: 70rem) {
  .front {
    --gutter: 32px;
    display: block;
  }

  .front::after {
    display: none;
  }

  .front-track {
    display: block;
    min-width: 0;
  }

  .front-side {
    position: static;
    width: auto;
    height: auto;
    padding: 12px var(--gutter);
  }

  .front-badges {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 21px;
    padding-top: 21px;
    border-top: 1px solid var(--hairline);
  }

  .front-col {
    width: auto;
    border-inline: none;
  }

  .front-sect:first-child {
    padding-top: 56px;
  }

  .front-pitch {
    padding-bottom: 84px;
  }
}

@media (max-width: 40rem) {
  .front {
    --gutter: 20px;
  }

  .front-sect:first-child {
    padding-top: 42px;
  }

  .front-h1 {
    font-size: 1.802rem;
    line-height: 35px;
  }

  .front-answer {
    padding-bottom: 56px;
  }

  .front-sect:not(:first-child) {
    padding-top: 56px;
  }
}