@layer reset, base, components, responsive;
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  body,
  h1,
  h2,
  h3,
  p,
  figure {
    margin: 0;
  }
  button,
  input,
  textarea,
  select {
    font: inherit;
  }
  button,
  a,
  input,
  textarea,
  select,
  summary {
    -webkit-tap-highlight-color: transparent;
  }
  button {
    cursor: pointer;
  }
  img,
  svg {
    display: block;
    max-width: 100%;
  }
  button {
    color: inherit;
  }
  a {
    color: inherit;
  }
  button:disabled {
    cursor: wait;
  }
  textarea {
    resize: vertical;
  }
  dialog {
    color: inherit;
  }
  [hidden] {
    display: none !important;
  }
}
@layer base {
  :root {
    color-scheme: dark;
    --bg: #070c13;
    --panel: #0b121d;
    --panel-raised: #101a27;
    --text: #f0f4f8;
    --muted: #9aaabf;
    --faint: #8394aa;
    --cyan: #43d8f2;
    --blue: #228cff;
    --border: #233142;
    --mono:
      "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --sans: Arial, Helvetica, sans-serif;
    --gutter: clamp(20px, 4.5vw, 72px);
    --max: 1280px;
  }
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 106px;
  }
  body {
    background: var(--bg);
    font: 16px/1.65 var(--sans);
    color: var(--text);
    isolation: isolate;
  }
  body.modal-open {
    overflow: hidden;
  }
  ::selection {
    background: var(--cyan);
    color: var(--bg);
  }
  :focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 5px;
  }
  a {
    text-underline-offset: 5px;
  }
  button {
    border: 0;
    background: none;
  }
  input,
  textarea,
  select {
    min-width: 0;
  }
  h1,
  h2,
  h3 {
    text-wrap: balance;
  }
  p {
    text-wrap: pretty;
  }
  h2 {
    font-size: clamp(35px, 4.1vw, 56px);
    font-weight: 700;
    line-height: 1.09;
    letter-spacing: -2.2px;
  }
  h3 {
    line-height: 1.18;
    letter-spacing: -0.8px;
  }
  button,
  summary {
    touch-action: manipulation;
  }
  .container {
    width: min(calc(100% - var(--gutter) * 2), var(--max));
    margin-inline: auto;
  }
  .cyan {
    color: var(--cyan);
  }
  .muted-heading {
    color: var(--muted);
  }
  .eyebrow {
    font: 10px/1.5 var(--mono);
    letter-spacing: 1.8px;
    color: var(--cyan);
  }
  .micro-label {
    font: 10px/1.5 var(--mono);
    letter-spacing: 0.9px;
    color: var(--muted);
  }
  .icon-library {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }
  .skip-link {
    position: fixed;
    top: 12px;
    left: 20px;
    transform: translateY(-170%);
    z-index: 100;
    background: var(--cyan);
    color: var(--bg);
    padding: 12px 20px;
    font-weight: 700;
  }
  .skip-link:focus {
    transform: none;
  }
  .section {
    padding-block: 108px;
    scroll-margin-top: 10px;
  }
  .section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
    margin-bottom: 43px;
  }
  .section-heading .eyebrow {
    margin-bottom: 20px;
  }
  .section-intro {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
    padding-bottom: 3px;
  }
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    min-height: 52px;
    padding: 14px 22px;
    border: 1px solid var(--cyan);
    font: 700 11px/1.6 var(--mono);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    transition:
      background 0.2s,
      box-shadow 0.2s,
      transform 0.2s;
  }
  .button-primary {
    background: var(--cyan);
    color: #07121a;
  }
  .button-primary:hover {
    background: #8aeaff;
    box-shadow: 0 0 28px #43d8f21c;
    transform: translateY(-2px);
  }
  .button svg,
  .project-link svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
  }
  .text-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: 48px;
    font: 11px/1.6 var(--mono);
    text-decoration: none;
    transition: color 0.2s;
  }
  .text-button:hover {
    color: var(--cyan);
  }
  .text-button span {
    font-size: 18px;
  }
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
      animation: none !important;
      transition: none !important;
    }
  }
  html[data-motion="paused"] {
    scroll-behavior: auto;
  }
  html[data-motion="paused"] *,
  html[data-motion="paused"] *::before,
  html[data-motion="paused"] *::after {
    animation-play-state: paused !important;
    transition: none !important;
  }
}