@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-latin-ext.3911b66d9f.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-latin.a30ddcd349.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;
}

@font-face {
  font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/courier-prime-latin-ext.efbea074e3.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/courier-prime-latin.f09844e1f4.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 {

  --slate-25: #FBFCFD;
  --slate-50: #F4F6F8;
  --slate-100: #ECEEF1;
  --slate-200: #DDE0E4;
  --slate-300: #C8CCD2;
  --slate-400: #9FA3AA;
  --slate-500: #696E74;
  --slate-600: #52565D;
  --slate-700: #3B3F44;
  --slate-800: #272A2F;
  --slate-900: #1B1E21;
  --slate-950: #0E0F12;

  --ink-500: #424E60;
  --ink-600: #2E3B4E;
  --ink-700: #212E41;
  --ink-800: #1A273A;
  --ink-850: #142032;
  --ink-900: #101A29;
  --ink-950: #070F19;
  --ink-1000: #03060D;

  --blue-50: #E9F7FF;
  --blue-100: #D3EEFF;
  --blue-200: #ACE0FE;
  --blue-300: #7BCAF6;
  --blue-400: #4EB5EA;
  --blue-500: #1AA0DA;
  --blue-600: #0088BC;
  --blue-700: #006D98;
  --blue-800: #005476;
  --blue-900: #003A54;

  --sand-50: #FBF6F0;
  --sand-100: #F7ECE0;
  --sand-200: #EDDBC6;
  --sand-300: #E0C8AB;
  --sand-400: #D0B28E;
  --sand-500: #C19E72;
  --sand-700: #82623A;

  --ok-500: #3DA454;
  --ok-600: #1D8139;
  --ok-300: #86D391;
  --warn-500: #E6A231;
  --warn-600: #AA5C08;
  --warn-300: #F5C984;
  --danger-500: #E24947;
  --danger-600: #C3222A;
  --danger-300: #FF9592;

  --eq-ink-0: #B3A0FF;
  --eq-ink-1: #A8A5FF;
  --eq-ink-2: #9DA9FF;
  --eq-ink-3: #92ADFF;
  --eq-ink-4: #86B1FF;
  --eq-ink-5: #78B4FF;
  --eq-ink-6: #67B8FF;
  --eq-ink-7: #4FBCFF;
  --eq-ink-8: #37BFFA;
  --eq-ink-9: #18C3F3;
  --eq-ink-10: #00C5E9;
  --eq-ink-11: #00C7DE;
  --eq-ink-12: #00C9D4;
  --eq-light-0: #8871D6;
  --eq-light-1: #7C75DA;
  --eq-light-2: #6F79DD;
  --eq-light-3: #617DDE;
  --eq-light-4: #5181DE;
  --eq-light-5: #3D86DC;
  --eq-light-6: #1F8AD9;
  --eq-light-7: #008ECF;
  --eq-light-8: #0090C3;
  --eq-light-9: #0092B8;
  --eq-light-10: #0094AF;
  --eq-light-11: #0096A7;
  --eq-light-12: #00979F;
  --eq-ink-sweep: linear-gradient(90deg, #B3A0FF, #A8A5FF, #9DA9FF, #92ADFF, #86B1FF, #78B4FF, #67B8FF, #4FBCFF, #37BFFA, #18C3F3, #00C5E9, #00C7DE, #00C9D4);
  --eq-light-sweep: linear-gradient(90deg, #8871D6, #7C75DA, #6F79DD, #617DDE, #5181DE, #3D86DC, #1F8AD9, #008ECF, #0090C3, #0092B8, #0094AF, #0096A7, #00979F);
}

:root {

  --w-bg: var(--slate-50);
  --w-surface: #fff;
  --w-surface-sunken: var(--slate-100);
  --w-surface-raised: #fff;

  --w-hairline: color-mix(in srgb, var(--ink-900) 6%, transparent);
  --w-line: color-mix(in srgb, var(--ink-900) 11%, transparent);
  --w-line-strong: color-mix(in srgb, var(--ink-900) 22%, transparent);

  --w-text: var(--slate-900);
  --w-text-dim: var(--slate-500);
  --w-text-faint: var(--slate-400);
  --w-text-inverse: var(--slate-25);

  --w-text-heading: var(--w-text);

  --w-accent: var(--blue-500);
  --w-accent-ink: var(--blue-700);
  --w-accent-solid: var(--blue-700);
  --w-accent-soft: color-mix(in srgb, var(--blue-500) 12%, transparent);
  --w-accent-soft-hover: color-mix(in srgb, var(--blue-500) 19%, transparent);
  --w-accent-line: color-mix(in srgb, var(--blue-500) 34%, transparent);

  --w-primary-bg: var(--ink-950);
  --w-primary-bg-hover: var(--ink-900);
  --w-primary-fg: #fff;

  --w-hover: color-mix(in srgb, var(--ink-900) 5%, transparent);
  --w-hover-strong: color-mix(in srgb, var(--ink-900) 9%, transparent);
  --w-pressed: color-mix(in srgb, var(--ink-900) 13%, transparent);
  --w-focus-ring: color-mix(in srgb, var(--blue-500) 45%, transparent);
  --w-selection: color-mix(in srgb, var(--blue-500) 22%, transparent);

  --w-ok: var(--ok-600);
  --w-ok-dot: var(--ok-500);
  --w-ok-soft: color-mix(in srgb, var(--ok-500) 13%, transparent);
  --w-warn: var(--warn-600);
  --w-warn-dot: var(--warn-500);
  --w-warn-soft: color-mix(in srgb, var(--warn-500) 16%, transparent);
  --w-danger: var(--danger-600);
  --w-danger-dot: var(--danger-500);
  --w-danger-soft: color-mix(in srgb, var(--danger-500) 12%, transparent);
  --w-danger-fg-on-solid: #fff;

  --w-pro-bg: var(--sand-100);
  --w-pro-line: var(--sand-300);
  --w-pro-ink: var(--sand-700);

  --w-eq-sweep: var(--eq-light-sweep);
  --w-eq-0: var(--eq-light-0);
  --w-eq-6: var(--eq-light-6);
  --w-eq-12: var(--eq-light-12);

  --w-shadow-color: 16 26 41;
  --w-e1: 0 1px 2px rgb(var(--w-shadow-color) / .05),
          0 1px 3px rgb(var(--w-shadow-color) / .04);
  --w-e2: 0 1px 3px rgb(var(--w-shadow-color) / .06),
          0 4px 12px rgb(var(--w-shadow-color) / .05);
  --w-e3: 0 2px 6px rgb(var(--w-shadow-color) / .07),
          0 12px 28px rgb(var(--w-shadow-color) / .08);
  --w-e4: 0 8px 24px rgb(var(--w-shadow-color) / .10),
          0 24px 60px rgb(var(--w-shadow-color) / .13);

  --w-sheen: inset 0 1px 0 rgb(255 255 255 / .9);
}

[data-surface="ink"] {
  --w-bg: var(--ink-950);
  --w-surface: var(--ink-900);
  --w-surface-sunken: var(--ink-1000);
  --w-surface-raised: var(--ink-850);

  --w-hairline: rgb(255 255 255 / .06);
  --w-line: rgb(255 255 255 / .10);
  --w-line-strong: rgb(255 255 255 / .22);

  --w-text: var(--slate-25);
  --w-text-dim: var(--slate-400);
  --w-text-faint: var(--slate-500);
  --w-text-inverse: var(--ink-950);

  --w-accent: var(--blue-400);
  --w-accent-ink: var(--blue-300);
  --w-accent-solid: var(--blue-500);
  --w-accent-soft: color-mix(in srgb, var(--blue-400) 22%, transparent);
  --w-accent-soft-hover: color-mix(in srgb, var(--blue-400) 30%, transparent);
  --w-accent-line: color-mix(in srgb, var(--blue-400) 40%, transparent);

  --w-primary-bg: var(--slate-25);
  --w-primary-bg-hover: #fff;
  --w-primary-fg: var(--ink-950);

  --w-hover: rgb(255 255 255 / .07);
  --w-hover-strong: rgb(255 255 255 / .12);
  --w-pressed: rgb(255 255 255 / .16);
  --w-focus-ring: color-mix(in srgb, var(--blue-400) 55%, transparent);
  --w-selection: color-mix(in srgb, var(--blue-400) 28%, transparent);

  --w-ok: var(--ok-300);
  --w-ok-dot: var(--ok-500);
  --w-ok-soft: color-mix(in srgb, var(--ok-500) 20%, transparent);
  --w-warn: var(--warn-300);
  --w-warn-dot: var(--warn-500);
  --w-warn-soft: color-mix(in srgb, var(--warn-500) 22%, transparent);
  --w-danger: var(--danger-300);
  --w-danger-dot: var(--danger-500);
  --w-danger-soft: color-mix(in srgb, var(--danger-500) 20%, transparent);
  --w-danger-fg-on-solid: var(--ink-1000);

  --w-pro-bg: color-mix(in srgb, var(--sand-300) 16%, transparent);
  --w-pro-line: color-mix(in srgb, var(--sand-300) 40%, transparent);
  --w-pro-ink: var(--sand-200);

  --w-eq-sweep: var(--eq-ink-sweep);
  --w-eq-0: var(--eq-ink-0);
  --w-eq-6: var(--eq-ink-6);
  --w-eq-12: var(--eq-ink-12);

  --w-e1: 0 1px 2px rgb(0 0 0 / .30);
  --w-e2: 0 2px 8px rgb(0 0 0 / .35);
  --w-e3: 0 6px 20px rgb(0 0 0 / .42);
  --w-e4: 0 14px 44px rgb(0 0 0 / .50);
  --w-sheen: inset 0 1px 0 rgb(255 255 255 / .08);
}

[data-surface="paper"] {
  --w-bg: var(--sand-50);
  --w-surface: color-mix(in srgb, var(--sand-50) 38%, #fff);
  --w-surface-sunken: var(--sand-100);
  --w-surface-raised: #fff;

  --w-hairline: color-mix(in srgb, #3B2A16 8%, transparent);
  --w-line: color-mix(in srgb, #3B2A16 14%, transparent);
  --w-line-strong: color-mix(in srgb, #3B2A16 26%, transparent);
  --w-hover: color-mix(in srgb, #3B2A16 5%, transparent);
  --w-hover-strong: color-mix(in srgb, #3B2A16 9%, transparent);
  --w-pressed: color-mix(in srgb, #3B2A16 13%, transparent);
  --w-shadow-color: 59 42 22;

  --w-text-heading: var(--w-glass-top);
}

:root {

  --w-glass-top: var(--ink-800);
  --w-glass-bottom: var(--ink-900);
  --w-glass-edge: rgb(255 255 255 / .09);
  --w-glass-fill: linear-gradient(180deg, var(--w-glass-top), var(--w-glass-bottom));

  --w-glass-shadow:
    inset 0 1px 0 rgb(255 255 255 / .10),
    0 1px 2px rgb(0 0 0 / .28),
    0 8px 24px rgb(0 0 0 / .28);
  --w-glass-radius: 999px;

  --w-cta-fill: var(--w-glass-fill);
  --w-cta-fill-hover: linear-gradient(180deg, var(--ink-700), var(--ink-850));
  --w-cta-fg: var(--sand-50);
  --w-cta-shadow: 0 2px 6px rgb(16 26 41 / .30), 0 10px 26px rgb(16 26 41 / .26);
  --w-cta-shadow-hover: 0 3px 10px rgb(16 26 41 / .34), 0 16px 36px rgb(16 26 41 / .30);
}

:root {

  --w-font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --w-font-display: "Manrope", system-ui, -apple-system, sans-serif;
  --w-font-mono: "Courier Prime", ui-monospace, "SF Mono", Consolas, monospace;

  --w-d1-size: clamp(2.75rem, 6.2vw, 4.5rem);
  --w-d1-line: 1.06;
  --w-d1-track: -0.042em;
  --w-d2-size: clamp(2rem, 4vw, 2.875rem);
  --w-d2-line: 1.12;
  --w-d2-track: -0.035em;
  --w-d3-size: clamp(1.375rem, 2.4vw, 1.75rem);
  --w-d3-line: 1.22;
  --w-d3-track: -0.028em;
  --w-display-weight: 800;

  --w-t-xl: 20px;
  --w-t-lg: 17px;
  --w-t-md: 14px;
  --w-t-sm: 13px;
  --w-t-xs: 12px;
  --w-t-2xs: 11px;
  --w-leading-tight: 1.25;
  --w-leading: 1.45;
  --w-leading-loose: 1.65;

  --w-label-track: 0.06em;
}

:root {

  --w-s1: 4px;   --w-s2: 8px;   --w-s3: 12px;  --w-s4: 16px;
  --w-s5: 20px;  --w-s6: 24px;  --w-s7: 32px;  --w-s8: 40px;
  --w-s9: 56px;  --w-s10: 72px; --w-s11: 96px; --w-s12: 128px;

  --w-r1: 6px;
  --w-r2: 8px;
  --w-r3: 10px;
  --w-r4: 14px;
  --w-r5: 18px;
  --w-r6: 24px;
  --w-r-full: 999px;

  --w-ease: cubic-bezier(.2, .7, .2, 1);
  --w-ease-out: cubic-bezier(.16, 1, .3, 1);
  --w-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --w-dur-1: 120ms;
  --w-dur-2: 180ms;
  --w-dur-3: 240ms;
  --w-dur-4: 320ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --w-dur-1: 1ms; --w-dur-2: 1ms; --w-dur-3: 1ms; --w-dur-4: 1ms;
  }
}

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--w-bg); color: var(--w-text);
         font-family: var(--w-font-ui); font-size: 16px; line-height: 1.6;
         -webkit-font-smoothing: antialiased; }
  a { color: inherit; text-decoration: none; }
  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

  h1, h2 { font-family: var(--w-font-display); font-weight: 800;
       letter-spacing: -0.038em; margin: 0; color: var(--w-text-heading); }
  h1 { font-size: clamp(2.3rem, 4.8vw, 3.6rem); line-height: 1.08; }

  header { border-bottom: 1px solid var(--w-hairline); }
  .nav { display: flex; align-items: center; gap: 20px; height: 70px; }
  .brand { display: flex; align-items: center; gap: 10px; }

  .brand .wtile { display: grid; place-items: center; width: 30px; height: 30px;
       border-radius: 8px; flex-shrink: 0; color: #fff;
       background: linear-gradient(155deg, #16223A, #070F19);
       box-shadow: inset 0 1px 0 rgb(255 255 255 / .10);
       font-family: "Zilla Slab", Georgia, serif; font-weight: 600;
       font-size: 17px; line-height: 1; letter-spacing: -.01em; }

  .brand span { font-family: var(--w-font-display); font-weight: 800; font-size: 20px;
       letter-spacing: -0.035em; }
  .back { margin-left: auto; font-size: 14.5px; color: var(--w-text-dim);
       display: inline-flex; align-items: center; gap: 8px; }
  .back:hover { color: var(--w-text); }
  .back svg { width: 15px; height: 15px; fill: none; stroke: currentColor;
       stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

  .intro { padding: 84px 0 24px; }
  .intro p { font-size: 19px; color: var(--slate-700); max-width: 52ch;
       line-height: 1.5; letter-spacing: -0.006em; margin: 22px 0 0; }
  .eyebrow { font-family: var(--w-font-mono); font-size: 11.5px; font-weight: 700;
       letter-spacing: .1em; text-transform: uppercase; color: var(--w-accent-ink);
       display: inline-flex; align-items: center; gap: 9px; }
  .eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px;
       background: var(--w-eq-sweep); }

  .stream { padding: 40px 0 130px; display: flex; flex-direction: column; }
  .ex { position: relative; --rot: 0deg; margin-top: 56px; }
  .ex:first-child { margin-top: 0; }

  .ex:nth-child(1) { max-width: 640px; margin-left: 0;    --rot: -1.7deg; }
  .ex:nth-child(2) { max-width: 700px; margin-left: auto; --rot:  1.3deg; margin-top: 40px; }
  .ex:nth-child(3) { max-width: 560px; margin-left: 52px; --rot: -1.1deg; margin-top: 34px; }
  .ex:nth-child(4) { max-width: 730px; margin-left: auto; --rot:  1.6deg; margin-top: 44px; }
  .ex:nth-child(5) { max-width: 545px; margin-left: 18px; --rot: -1.4deg; margin-top: 30px; }
  .ex:nth-child(6) { max-width: 715px; margin-left: auto; --rot:  0.9deg; margin-top: 42px; }

  @media (max-width: 900px) {
    .ex { max-width: none !important; margin-left: 0 !important; margin-top: 44px !important;
          --rot: 0deg; }
  }

  .tag { font-family: var(--w-font-mono); font-size: 11px; font-weight: 700;
       letter-spacing: .09em; text-transform: uppercase; color: var(--w-text-faint);
       margin-bottom: 12px; display: block; }

  .pair { display: grid; grid-template-columns: 1fr 54px 1.05fr; align-items: center; }
  @media (max-width: 760px) { .pair { grid-template-columns: 1fr; } }

  .card { border-radius: 18px; padding: 20px 22px 22px; }
  .card .k { font-family: var(--w-font-mono); font-size: 11px; font-weight: 700;
       letter-spacing: .07em; text-transform: uppercase; color: var(--w-text-faint);
       margin-bottom: 11px; display: flex; align-items: center; gap: 8px; }
  .card .k i { width: 7px; height: 7px; border-radius: 50%; display: block; }
  .said { background: var(--sand-100); outline: 1px solid var(--w-hairline);
       outline-offset: -1px; }
  .said p { margin: 0; font-size: 15.5px; line-height: 1.72; color: var(--slate-500); }
  .out { background: var(--w-surface-raised);
       box-shadow: 0 1px 3px rgb(59 42 22 / .07), 0 14px 34px rgb(59 42 22 / .10); }
  .out p { margin: 0; font-size: 15.5px; line-height: 1.72; color: var(--slate-800); }
  .out b { color: var(--w-text); }

  .out mark { background: linear-gradient(var(--w-accent-soft), var(--w-accent-soft));
       box-shadow: inset 0 -2px 0 var(--w-accent-line); border-radius: 2px;
       padding: 0 2px; color: inherit; }

  .arrow { display: grid; place-items: center; }
  .arrow span { width: 40px; height: 40px; border-radius: 50%; background: var(--ink-900);
       display: grid; place-items: center; box-shadow: 0 5px 16px rgb(16 26 41 / .28); }
  .arrow svg { width: 18px; height: 18px; }
  @media (max-width: 760px) { .arrow { padding: 16px 0; } }

  .why { margin-top: 14px; font-size: 13.5px; color: var(--w-text-dim);
       max-width: 60ch; line-height: 1.6; }
  .why b { color: var(--w-text); font-weight: 600; }

  .ex { opacity: 0;
       transform: translateY(44px) scale(.93) rotate(0deg);
       transition: opacity .5s var(--w-ease), transform .72s var(--w-ease); }
  .ex.in { opacity: 1; transform: translateY(0) scale(1) rotate(var(--rot)); }

  .closing { padding: 0 0 120px; }
  .box { border-radius: 22px; padding: 46px 44px; background: var(--ink-950);
       color: var(--slate-25); text-align: center; }
  .box h2 { color: var(--slate-25); font-size: clamp(1.6rem, 3vw, 2.2rem);
       margin-bottom: 14px; }
  .box p { color: var(--slate-300); max-width: 48ch; margin: 0 auto 26px;
       font-size: 16px; }
  .btn { display: inline-flex; align-items: center; gap: 10px; font-weight: 700;
       font-size: 16px; padding: 15px 26px; border-radius: 12px; cursor: pointer;
       background: var(--slate-25); color: var(--ink-950); }
  .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor;
       stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .ex { transform: rotate(var(--rot)); transition: opacity .35s linear; }
    .ex.in { transform: rotate(var(--rot)); }
  }

  .card .k i.dot-raw { background: var(--slate-400); }
  .card .k i.dot-out { background: var(--w-accent); }