/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-green-50: oklch(98.2% 0.018 155.826);
    --color-green-200: oklch(92.5% 0.084 155.995);
    --color-neutral-50: #f7f9fc;
    --color-neutral-700: #303845;
    --color-neutral-900: #11151c;
    --color-neutral-950: #070a0f;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-3xl: 48rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --tracking-tight: 0em;
    --tracking-normal: 0em;
    --tracking-wide: 0.025em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.375rem;
    --radius-xl: 0.375rem;
    --radius-2xl: 0.375rem;
    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.04);
    --shadow-md: 0 8px 24px rgb(0 0 0 / 0.08);
    --shadow-lg: 0 16px 40px rgb(0 0 0 / 0.12);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --blur-sm: 8px;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-neutral-0: #ffffff;
    --color-engineering-500: #155dfc;
    --color-production-500: #ff4f5e;
    --radius-pill: 9999px;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
  }
}
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html,
  :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b,
  strong {
    font-weight: bolder;
  }
  code,
  kbd,
  samp,
  pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol,
  ul,
  menu {
    list-style: none;
  }
  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    display: block;
    vertical-align: middle;
  }
  img,
  video {
    max-width: 100%;
    height: auto;
  }
  button,
  input,
  select,
  optgroup,
  textarea,
  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or
    (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit,
  ::-webkit-datetime-edit-year-field,
  ::-webkit-datetime-edit-month-field,
  ::-webkit-datetime-edit-day-field,
  ::-webkit-datetime-edit-hour-field,
  ::-webkit-datetime-edit-minute-field,
  ::-webkit-datetime-edit-second-field,
  ::-webkit-datetime-edit-millisecond-field,
  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button,
  input:where([type="button"], [type="reset"], [type="submit"]),
  ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .collapse {
    visibility: collapse;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
  .start {
    inset-inline-start: var(--spacing);
  }
  .end {
    inset-inline-end: var(--spacing);
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-1 {
    top: calc(var(--spacing) * 1);
  }
  .top-full {
    top: 100%;
  }
  .right-0 {
    right: calc(var(--spacing) * 0);
  }
  .bottom-1 {
    bottom: calc(var(--spacing) * 1);
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .z-10 {
    z-index: 10;
  }
  .z-20 {
    z-index: 20;
  }
  .z-40 {
    z-index: 40;
  }
  .order-first {
    order: -9999;
  }
  .order-last {
    order: 9999;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .m-0 {
    margin: calc(var(--spacing) * 0);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-auto {
    margin-top: auto;
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-flex {
    display: inline-flex;
  }
  .table {
    display: table;
  }
  .aspect-\[2\/1\] {
    aspect-ratio: 2/1;
  }
  .aspect-\[4\/5\] {
    aspect-ratio: 4/5;
  }
  .aspect-\[5\/4\] {
    aspect-ratio: 5/4;
  }
  .aspect-\[5\/6\] {
    aspect-ratio: 5/6;
  }
  .aspect-\[6\/5\] {
    aspect-ratio: 6/5;
  }
  .aspect-\[16\/9\] {
    aspect-ratio: 16/9;
  }
  .aspect-\[16\/10\] {
    aspect-ratio: 16/10;
  }
  .h-0\.5 {
    height: calc(var(--spacing) * 0.5);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-7 {
    height: calc(var(--spacing) * 7);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .h-full {
    height: 100%;
  }
  .max-h-\[calc\(100dvh-6rem\)\] {
    max-height: calc(100dvh - 6rem);
  }
  .max-h-none {
    max-height: none;
  }
  .min-h-10 {
    min-height: calc(var(--spacing) * 10);
  }
  .min-h-full {
    min-height: 100%;
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-7 {
    width: calc(var(--spacing) * 7);
  }
  .w-10 {
    width: calc(var(--spacing) * 10);
  }
  .w-fit {
    width: fit-content;
  }
  .w-full {
    width: 100%;
  }
  .max-w-3xl {
    max-width: var(--container-3xl);
  }
  .max-w-\[13rem\] {
    max-width: 13rem;
  }
  .max-w-\[14ch\] {
    max-width: 14ch;
  }
  .max-w-\[15ch\] {
    max-width: 15ch;
  }
  .max-w-\[16ch\] {
    max-width: 16ch;
  }
  .max-w-\[18ch\] {
    max-width: 18ch;
  }
  .max-w-\[18rem\] {
    max-width: 18rem;
  }
  .max-w-\[20ch\] {
    max-width: 20ch;
  }
  .max-w-\[20rem\] {
    max-width: 20rem;
  }
  .max-w-\[22ch\] {
    max-width: 22ch;
  }
  .max-w-\[24ch\] {
    max-width: 24ch;
  }
  .max-w-\[28ch\] {
    max-width: 28ch;
  }
  .max-w-\[30ch\] {
    max-width: 30ch;
  }
  .max-w-\[32ch\] {
    max-width: 32ch;
  }
  .max-w-\[34ch\] {
    max-width: 34ch;
  }
  .max-w-\[42ch\] {
    max-width: 42ch;
  }
  .max-w-\[46ch\] {
    max-width: 46ch;
  }
  .max-w-\[56ch\] {
    max-width: 56ch;
  }
  .max-w-\[60ch\] {
    max-width: 60ch;
  }
  .max-w-\[62ch\] {
    max-width: 62ch;
  }
  .max-w-\[64ch\] {
    max-width: 64ch;
  }
  .max-w-\[65ch\] {
    max-width: 65ch;
  }
  .max-w-\[66ch\] {
    max-width: 66ch;
  }
  .max-w-\[68ch\] {
    max-width: 68ch;
  }
  .max-w-\[70ch\] {
    max-width: 70ch;
  }
  .max-w-\[72ch\] {
    max-width: 72ch;
  }
  .max-w-\[80rem\] {
    max-width: 80rem;
  }
  .max-w-none {
    max-width: none;
  }
  .flex-1 {
    flex: 1;
  }
  .flex-shrink-0 {
    flex-shrink: 0;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .-translate-y-\[5px\] {
    --tw-translate-y: calc(5px * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-\[5px\] {
    --tw-translate-y: 5px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-rotate-45 {
    rotate: calc(45deg * -1);
  }
  .rotate-45 {
    rotate: 45deg;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .touch-manipulation {
    touch-action: manipulation;
  }
  .resize {
    resize: both;
  }
  .resize-none {
    resize: none;
  }
  .scroll-mt-24 {
    scroll-margin-top: calc(var(--spacing) * 24);
  }
  .list-disc {
    list-style-type: disc;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .items-start {
    align-items: flex-start;
  }
  .items-stretch {
    align-items: stretch;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }
  .gap-12 {
    gap: calc(var(--spacing) * 12);
  }
  .gap-\[var\(--stack-gap-sm\)\] {
    gap: var(--stack-gap-sm);
  }
  .overflow-auto {
    overflow: auto;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .rounded-\[var\(--radius-2xl\)\] {
    border-radius: var(--radius-2xl);
  }
  .rounded-\[var\(--radius-card\)\] {
    border-radius: var(--radius-card);
  }
  .rounded-\[var\(--radius-lg\)\] {
    border-radius: var(--radius-lg);
  }
  .rounded-\[var\(--radius-pill\)\] {
    border-radius: var(--radius-pill);
  }
  .rounded-\[var\(--radius-xl\)\] {
    border-radius: var(--radius-xl);
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-\[color-mix\(in_srgb\,var\(--fg\)_18\%\,transparent\)\] {
    border-color: var(--fg);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb,var(--fg) 18%,transparent);
    }
  }
  .border-\[var\(--border\)\] {
    border-color: var(--border);
  }
  .border-green-200\/30 {
    border-color: color-mix(in srgb, oklch(92.5% 0.084 155.995) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-green-200) 30%, transparent);
    }
  }
  .bg-\[var\(--accent\)\] {
    background-color: var(--accent);
  }
  .bg-\[var\(--bg\)\] {
    background-color: var(--bg);
  }
  .bg-\[var\(--bg\)\]\/90 {
    background-color: var(--bg);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--bg) 90%, transparent);
    }
  }
  .bg-\[var\(--color-neutral-950\)\] {
    background-color: var(--color-neutral-950);
  }
  .bg-\[var\(--fg\)\]\/80 {
    background-color: var(--fg);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--fg) 80%, transparent);
    }
  }
  .bg-\[var\(--surface\)\] {
    background-color: var(--surface);
  }
  .bg-\[var\(--surface-elevated\)\] {
    background-color: var(--surface-elevated);
  }
  .bg-\[var\(--surface-subtle\)\] {
    background-color: var(--surface-subtle);
  }
  .bg-current {
    background-color: currentcolor;
  }
  .bg-green-50\/30 {
    background-color: color-mix(in srgb, oklch(98.2% 0.018 155.826) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-green-50) 30%, transparent);
    }
  }
  .bg-neutral-50 {
    background-color: var(--color-neutral-50);
  }
  .bg-transparent {
    background-color: transparent;
  }
  .object-cover {
    object-fit: cover;
  }
  .p-0 {
    padding: calc(var(--spacing) * 0);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-5 {
    padding: calc(var(--spacing) * 5);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .px-0 {
    padding-inline: calc(var(--spacing) * 0);
  }
  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .py-0 {
    padding-block: calc(var(--spacing) * 0);
  }
  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }
  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }
  .pt-1 {
    padding-top: calc(var(--spacing) * 1);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }
  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }
  .pt-20 {
    padding-top: calc(var(--spacing) * 20);
  }
  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }
  .pl-5 {
    padding-left: calc(var(--spacing) * 5);
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .text-\[11px\] {
    font-size: 11px;
  }
  .leading-5 {
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }
  .leading-6 {
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
  }
  .leading-7 {
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
  }
  .leading-8 {
    --tw-leading: calc(var(--spacing) * 8);
    line-height: calc(var(--spacing) * 8);
  }
  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-\[0\.01em\] {
    --tw-tracking: 0.01em;
    letter-spacing: 0.01em;
  }
  .tracking-\[0\.12em\] {
    --tw-tracking: 0.12em;
    letter-spacing: 0.12em;
  }
  .tracking-\[0\.14em\] {
    --tw-tracking: 0.14em;
    letter-spacing: 0.14em;
  }
  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }
  .text-\[color-mix\(in_srgb\,var\(--fg\)_58\%\,var\(--bg\)\)\] {
    color: var(--fg);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb,var(--fg) 58%,var(--bg));
    }
  }
  .text-\[var\(--accent-fg\)\] {
    color: var(--accent-fg);
  }
  .text-\[var\(--bg\)\] {
    color: var(--bg);
  }
  .text-\[var\(--fg\)\] {
    color: var(--fg);
  }
  .text-\[var\(--fg\)\]\/72 {
    color: var(--fg);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--fg) 72%, transparent);
    }
  }
  .text-\[var\(--fg\)\]\/82 {
    color: var(--fg);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--fg) 82%, transparent);
    }
  }
  .text-\[var\(--muted\)\] {
    color: var(--muted);
  }
  .text-\[var\(--text-body\)\] {
    color: var(--text-body);
  }
  .text-\[var\(--text-strong\)\] {
    color: var(--text-strong);
  }
  .text-white {
    color: var(--color-white);
  }
  .lowercase {
    text-transform: lowercase;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .underline {
    text-decoration-line: underline;
  }
  .placeholder-\[var\(--muted\)\] {
    &::placeholder {
      color: var(--muted);
    }
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_14px_30px_-20px_var\(--card-glow\)\] {
    --tw-shadow: 0 14px 30px -20px var(--tw-shadow-color, var(--card-glow));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_24px_60px_rgba\(15\,23\,42\,0\.08\)\] {
    --tw-shadow: 0 24px 60px var(--tw-shadow-color, rgba(15,23,42,0.08));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[var\(--shadow-elevated\)\] {
    --tw-shadow: var(--shadow-elevated);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-2 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-\[var\(--primary\)\] {
    --tw-ring-color: var(--primary);
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[background-color\,border-color\,color\,transform\] {
    transition-property: background-color,border-color,color,transform;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .duration-\[var\(--motion-duration-quick\)\] {
    --tw-duration: var(--motion-duration-quick);
    transition-duration: var(--motion-duration-quick);
  }
  .ease-\[var\(--motion-easing-quick\)\] {
    --tw-ease: var(--motion-easing-quick);
    transition-timing-function: var(--motion-easing-quick);
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }
  .group-hover\:translate-x-0\.5 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-translate-x: calc(var(--spacing) * 0.5);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .group-hover\:text-\[var\(--accent\)\] {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--accent);
      }
    }
  }
  .group-hover\:text-\[var\(--fg\)\] {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--fg);
      }
    }
  }
  .group-hover\:text-\[var\(--state-hover-accent\)\] {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--state-hover-accent);
      }
    }
  }
  .first\:border-t-0 {
    &:first-child {
      border-top-style: var(--tw-border-style);
      border-top-width: 0px;
    }
  }
  .first\:pt-0 {
    &:first-child {
      padding-top: calc(var(--spacing) * 0);
    }
  }
  .hover\:border-\[var\(--border-interactive-hover\)\] {
    &:hover {
      @media (hover: hover) {
        border-color: var(--border-interactive-hover);
      }
    }
  }
  .hover\:border-\[var\(--color-neutral-950\)\] {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-neutral-950);
      }
    }
  }
  .hover\:bg-\[var\(--color-neutral-900\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-neutral-900);
      }
    }
  }
  .hover\:bg-\[var\(--surface\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--surface);
      }
    }
  }
  .hover\:bg-\[var\(--surface-base\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--surface-base);
      }
    }
  }
  .hover\:bg-\[var\(--surface-interactive\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--surface-interactive);
      }
    }
  }
  .hover\:bg-\[var\(--surface-subtle\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--surface-subtle);
      }
    }
  }
  .hover\:text-\[var\(--fg\)\] {
    &:hover {
      @media (hover: hover) {
        color: var(--fg);
      }
    }
  }
  .hover\:text-\[var\(--muted\)\] {
    &:hover {
      @media (hover: hover) {
        color: var(--muted);
      }
    }
  }
  .hover\:text-\[var\(--state-hover-accent\)\] {
    &:hover {
      @media (hover: hover) {
        color: var(--state-hover-accent);
      }
    }
  }
  .hover\:no-underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: none;
      }
    }
  }
  .focus\:not-sr-only {
    &:focus {
      position: static;
      width: auto;
      height: auto;
      padding: 0;
      margin: 0;
      overflow: visible;
      clip-path: none;
      white-space: normal;
    }
  }
  .focus\:absolute {
    &:focus {
      position: absolute;
    }
  }
  .focus\:top-4 {
    &:focus {
      top: calc(var(--spacing) * 4);
    }
  }
  .focus\:left-4 {
    &:focus {
      left: calc(var(--spacing) * 4);
    }
  }
  .focus\:z-50 {
    &:focus {
      z-index: 50;
    }
  }
  .focus\:rounded-\[var\(--radius-lg\)\] {
    &:focus {
      border-radius: var(--radius-lg);
    }
  }
  .focus\:border-\[var\(--focus\)\] {
    &:focus {
      border-color: var(--focus);
    }
  }
  .focus\:bg-\[var\(--bg\)\] {
    &:focus {
      background-color: var(--bg);
    }
  }
  .focus\:px-3 {
    &:focus {
      padding-inline: calc(var(--spacing) * 3);
    }
  }
  .focus\:py-2 {
    &:focus {
      padding-block: calc(var(--spacing) * 2);
    }
  }
  .focus\:text-sm {
    &:focus {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }
  .focus\:font-medium {
    &:focus {
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
    }
  }
  .focus\:text-\[var\(--fg\)\] {
    &:focus {
      color: var(--fg);
    }
  }
  .focus\:ring-2 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus\:ring-\[var\(--focus\)\] {
    &:focus {
      --tw-ring-color: var(--focus);
    }
  }
  .focus\:ring-\[var\(--focus\)\]\/10 {
    &:focus {
      --tw-ring-color: var(--focus);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--focus) 10%, transparent);
      }
    }
  }
  .focus\:outline-none {
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .focus-visible\:rounded-\[var\(--radius-lg\)\] {
    &:focus-visible {
      border-radius: var(--radius-lg);
    }
  }
  .focus-visible\:border-\[var\(--accent\)\] {
    &:focus-visible {
      border-color: var(--accent);
    }
  }
  .focus-visible\:border-\[var\(--link-color\)\] {
    &:focus-visible {
      border-color: var(--link-color);
    }
  }
  .focus-visible\:bg-\[var\(--accent-soft\)\] {
    &:focus-visible {
      background-color: var(--accent-soft);
    }
  }
  .focus-visible\:text-\[var\(--fg\)\] {
    &:focus-visible {
      color: var(--fg);
    }
  }
  .focus-visible\:ring-2 {
    &:focus-visible {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus-visible\:ring-\[var\(--fg\)\]\/15 {
    &:focus-visible {
      --tw-ring-color: var(--fg);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--fg) 15%, transparent);
      }
    }
  }
  .focus-visible\:ring-\[var\(--focus\)\] {
    &:focus-visible {
      --tw-ring-color: var(--focus);
    }
  }
  .focus-visible\:ring-\[var\(--focus-ring-color\)\] {
    &:focus-visible {
      --tw-ring-color: var(--focus-ring-color);
    }
  }
  .focus-visible\:ring-offset-2 {
    &:focus-visible {
      --tw-ring-offset-width: 2px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
  }
  .focus-visible\:ring-offset-\[var\(--state-focus-ring-offset\)\] {
    &:focus-visible {
      --tw-ring-offset-color: var(--state-focus-ring-offset);
    }
  }
  .focus-visible\:outline-none {
    &:focus-visible {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .active\:bg-\[var\(--surface\)\] {
    &:active {
      background-color: var(--surface);
    }
  }
  .active\:text-\[var\(--state-active-border\)\] {
    &:active {
      color: var(--state-active-border);
    }
  }
  .disabled\:cursor-not-allowed {
    &:disabled {
      cursor: not-allowed;
    }
  }
  .disabled\:opacity-50 {
    &:disabled {
      opacity: 50%;
    }
  }
  .motion-reduce\:transform-none {
    @media (prefers-reduced-motion: reduce) {
      transform: none;
    }
  }
  .sm\:aspect-\[6\/5\] {
    @media (width >= 40rem) {
      aspect-ratio: 6/5;
    }
  }
  .sm\:w-auto {
    @media (width >= 40rem) {
      width: auto;
    }
  }
  .sm\:grid-cols-2 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-3 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .sm\:flex-row {
    @media (width >= 40rem) {
      flex-direction: row;
    }
  }
  .sm\:items-start {
    @media (width >= 40rem) {
      align-items: flex-start;
    }
  }
  .sm\:justify-between {
    @media (width >= 40rem) {
      justify-content: space-between;
    }
  }
  .sm\:gap-2 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 2);
    }
  }
  .md\:order-first {
    @media (width >= 48rem) {
      order: -9999;
    }
  }
  .md\:order-last {
    @media (width >= 48rem) {
      order: 9999;
    }
  }
  .md\:col-span-2 {
    @media (width >= 48rem) {
      grid-column: span 2 / span 2;
    }
  }
  .md\:flex {
    @media (width >= 48rem) {
      display: flex;
    }
  }
  .md\:grid {
    @media (width >= 48rem) {
      display: grid;
    }
  }
  .md\:hidden {
    @media (width >= 48rem) {
      display: none;
    }
  }
  .md\:aspect-\[3\/4\] {
    @media (width >= 48rem) {
      aspect-ratio: 3/4;
    }
  }
  .md\:max-h-\[calc\(100dvh-7rem\)\] {
    @media (width >= 48rem) {
      max-height: calc(100dvh - 7rem);
    }
  }
  .md\:w-auto {
    @media (width >= 48rem) {
      width: auto;
    }
  }
  .md\:max-w-\[11ch\] {
    @media (width >= 48rem) {
      max-width: 11ch;
    }
  }
  .md\:max-w-\[12ch\] {
    @media (width >= 48rem) {
      max-width: 12ch;
    }
  }
  .md\:max-w-\[20ch\] {
    @media (width >= 48rem) {
      max-width: 20ch;
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-3 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-\[2\.5rem_minmax\(0\,1fr\)\] {
    @media (width >= 48rem) {
      grid-template-columns: 2.5rem minmax(0,1fr);
    }
  }
  .md\:grid-cols-\[minmax\(0\,0\.85fr\)_minmax\(0\,1fr\)\] {
    @media (width >= 48rem) {
      grid-template-columns: minmax(0,0.85fr) minmax(0,1fr);
    }
  }
  .md\:grid-cols-\[minmax\(0\,1fr\)_minmax\(16rem\,20rem\)\] {
    @media (width >= 48rem) {
      grid-template-columns: minmax(0,1fr) minmax(16rem,20rem);
    }
  }
  .md\:grid-cols-\[minmax\(11rem\,13rem\)_minmax\(0\,1fr\)\] {
    @media (width >= 48rem) {
      grid-template-columns: minmax(11rem,13rem) minmax(0,1fr);
    }
  }
  .md\:grid-cols-\[minmax\(15rem\,18rem\)_minmax\(0\,1fr\)\] {
    @media (width >= 48rem) {
      grid-template-columns: minmax(15rem,18rem) minmax(0,1fr);
    }
  }
  .md\:flex-row {
    @media (width >= 48rem) {
      flex-direction: row;
    }
  }
  .md\:flex-wrap {
    @media (width >= 48rem) {
      flex-wrap: wrap;
    }
  }
  .md\:items-center {
    @media (width >= 48rem) {
      align-items: center;
    }
  }
  .md\:items-end {
    @media (width >= 48rem) {
      align-items: flex-end;
    }
  }
  .md\:items-start {
    @media (width >= 48rem) {
      align-items: flex-start;
    }
  }
  .md\:justify-between {
    @media (width >= 48rem) {
      justify-content: space-between;
    }
  }
  .md\:gap-3 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 3);
    }
  }
  .md\:gap-3\.5 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 3.5);
    }
  }
  .md\:gap-4 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 4);
    }
  }
  .md\:gap-5 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 5);
    }
  }
  .md\:gap-6 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 6);
    }
  }
  .md\:gap-7 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 7);
    }
  }
  .md\:gap-8 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 8);
    }
  }
  .md\:gap-10 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 10);
    }
  }
  .md\:gap-12 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 12);
    }
  }
  .md\:gap-16 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 16);
    }
  }
  .md\:gap-x-6 {
    @media (width >= 48rem) {
      column-gap: calc(var(--spacing) * 6);
    }
  }
  .md\:p-6 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 6);
    }
  }
  .md\:p-8 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 8);
    }
  }
  .md\:px-5 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 5);
    }
  }
  .md\:px-6 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .md\:px-8 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .md\:py-4 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 4);
    }
  }
  .md\:py-5 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 5);
    }
  }
  .md\:py-6 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 6);
    }
  }
  .md\:py-14 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 14);
    }
  }
  .md\:pt-2 {
    @media (width >= 48rem) {
      padding-top: calc(var(--spacing) * 2);
    }
  }
  .md\:pt-8 {
    @media (width >= 48rem) {
      padding-top: calc(var(--spacing) * 8);
    }
  }
  .md\:pt-24 {
    @media (width >= 48rem) {
      padding-top: calc(var(--spacing) * 24);
    }
  }
  .md\:pb-6 {
    @media (width >= 48rem) {
      padding-bottom: calc(var(--spacing) * 6);
    }
  }
  .md\:text-2xl {
    @media (width >= 48rem) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }
  .md\:text-3xl {
    @media (width >= 48rem) {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
  }
  .md\:text-4xl {
    @media (width >= 48rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }
  .md\:text-5xl {
    @media (width >= 48rem) {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
  }
  .md\:text-base {
    @media (width >= 48rem) {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }
  .md\:text-lg {
    @media (width >= 48rem) {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
  }
  .md\:text-sm {
    @media (width >= 48rem) {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }
  .md\:text-xl {
    @media (width >= 48rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }
  .lg\:mx-0 {
    @media (width >= 64rem) {
      margin-inline: calc(var(--spacing) * 0);
    }
  }
  .lg\:block {
    @media (width >= 64rem) {
      display: block;
    }
  }
  .lg\:grid-cols-3 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-\[minmax\(0\,1\.02fr\)_minmax\(20rem\,0\.98fr\)\] {
    @media (width >= 64rem) {
      grid-template-columns: minmax(0,1.02fr) minmax(20rem,0.98fr);
    }
  }
  .lg\:grid-cols-\[minmax\(0\,1fr\)_18rem\] {
    @media (width >= 64rem) {
      grid-template-columns: minmax(0,1fr) 18rem;
    }
  }
  .lg\:grid-cols-\[minmax\(0\,1fr\)_minmax\(20rem\,0\.88fr\)\] {
    @media (width >= 64rem) {
      grid-template-columns: minmax(0,1fr) minmax(20rem,0.88fr);
    }
  }
  .lg\:grid-cols-\[minmax\(0\,1fr\)_minmax\(22rem\,0\.95fr\)\] {
    @media (width >= 64rem) {
      grid-template-columns: minmax(0,1fr) minmax(22rem,0.95fr);
    }
  }
  .lg\:grid-cols-\[minmax\(0\,14rem\)_minmax\(0\,1fr\)\] {
    @media (width >= 64rem) {
      grid-template-columns: minmax(0,14rem) minmax(0,1fr);
    }
  }
  .lg\:items-center {
    @media (width >= 64rem) {
      align-items: center;
    }
  }
  .lg\:items-start {
    @media (width >= 64rem) {
      align-items: flex-start;
    }
  }
  .lg\:gap-10 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 10);
    }
  }
  .lg\:p-8 {
    @media (width >= 64rem) {
      padding: calc(var(--spacing) * 8);
    }
  }
  .lg\:pt-2 {
    @media (width >= 64rem) {
      padding-top: calc(var(--spacing) * 2);
    }
  }
  .xl\:flex {
    @media (width >= 80rem) {
      display: flex;
    }
  }
  .xl\:grid-cols-2 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-3 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-4 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-\[minmax\(0\,1\.15fr\)_minmax\(0\,0\.85fr\)\] {
    @media (width >= 80rem) {
      grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr);
    }
  }
  .xl\:grid-cols-\[minmax\(0\,1fr\)_minmax\(18rem\,24rem\)\] {
    @media (width >= 80rem) {
      grid-template-columns: minmax(0,1fr) minmax(18rem,24rem);
    }
  }
  .xl\:flex-col {
    @media (width >= 80rem) {
      flex-direction: column;
    }
  }
  .xl\:items-stretch {
    @media (width >= 80rem) {
      align-items: stretch;
    }
  }
  .xl\:gap-8 {
    @media (width >= 80rem) {
      gap: calc(var(--spacing) * 8);
    }
  }
  .xl\:gap-12 {
    @media (width >= 80rem) {
      gap: calc(var(--spacing) * 12);
    }
  }
  .\[\&\]\:bg-\[var\(--surface\)\] {
    background-color: var(--surface);
  }
  .\[\&\]\:ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .\[\&\]\:ring-\[\#3b82f6\]\/50 {
    --tw-ring-color: color-mix(in oklab, #3b82f6 50%, transparent);
  }
  .\[\&_\.markdown-block\]\:rounded-\[var\(--radius-md\)\] {
    & .markdown-block {
      border-radius: var(--radius-md);
    }
  }
  .\[\&_\.markdown-block\]\:transition-colors {
    & .markdown-block {
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
  }
  .\[\&_\.markdown-block\]\:duration-150 {
    & .markdown-block {
      --tw-duration: 150ms;
      transition-duration: 150ms;
    }
  }
}
:root {
  --mode-color-scheme: light;
  --bg: #ffffff;
  --fg: #10141c;
  --muted: #526070;
  --border-subtle: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    --border-subtle: color-mix(in srgb, var(--fg) 10%, var(--bg));
  }
  --border-default: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    --border-default: color-mix(in srgb, var(--fg) 20%, var(--bg));
  }
  --border-strong: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    --border-strong: color-mix(in srgb, var(--fg) 40%, var(--bg));
  }
  --surface-1: var(--bg);
  --surface-2: #f3f6fb;
  --surface-3: #ffffff;
  --surface-tint: #e8eef7;
  --surface-tint-strong: #d5deeb;
  --surface: var(--surface-1);
  --accent: #155dfc;
  --impact: #ff4f5e;
  --impact-fg: #ffffff;
  --inversion-bg: #0a0d14;
  --inversion-fg: #ffffff;
  --inversion-muted: #cbd5e1;
  --focus: #00a7ff;
  --hero-gradient: none;
  --section-gradient: none;
  --card-glow: rgb(21 93 252 / 0.28);
  --interactive-ring: var(--accent);
  --primary: var(--accent);
  --accent-fg: var(--color-neutral-0);
  --accent-soft: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --accent-soft: color-mix(in srgb, var(--accent) 10%, var(--surface-tint));
  }
  --accent-soft-fg: var(--accent);
  --accent-border: var(--border-interactive);
  --accent-hover: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --accent-hover: color-mix(in srgb, var(--accent) 88%, black);
  }
  --accent-active: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --accent-active: color-mix(in srgb, var(--accent) 75%, black);
  }
  --accent-focus-ring: var(--accent);
  --border-interactive: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --border-interactive: color-mix(
    in srgb,
    var(--accent) 20%,
    var(--border-default)
  );
  }
  --border-interactive-hover: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --border-interactive-hover: color-mix(
    in srgb,
    var(--accent) 38%,
    var(--border-default)
  );
  }
  --separator-color: var(--border-subtle);
  --border: var(--border-default);
  --surface-base: var(--surface-1);
  --surface-subtle: var(--surface-2);
  --surface-elevated: var(--surface-3);
  --surface-interactive: var(--surface-tint);
  --surface-interactive-hover: var(--surface-tint-strong);
  --surface-inset: var(--surface-2);
  @supports (color: color-mix(in lab, red, red)) {
    --surface-inset: color-mix(
    in srgb,
    var(--surface-2) 70%,
    var(--surface-tint-strong)
  );
  }
  --radius-card: 0.375rem;
  --radius-button: 0.375rem;
  --radius-input: 0.375rem;
  --radius-lg: var(--radius-card);
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.04);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow-md: 0 8px 24px rgb(0 0 0 / 0.08);
  --shadow-lg: 0 16px 40px rgb(0 0 0 / 0.12);
  --shadow-surface: var(--shadow-md);
  --shadow-interactive: var(--shadow-lg);
  --font-sans: "Inter Variable", "Aptos", "Segoe UI", sans-serif;
  --font-display: "Inter Variable", "Aptos", "Segoe UI", sans-serif;
  --font-heading: var(--font-display);
  --font-body: var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo,
    monospace;
  --font-display-swap: swap;
  --heading-1-size: 2.35rem;
  --heading-2-size: 1.75rem;
  --heading-3-size: 1.35rem;
  --heading-4-size: var(--text-xl);
  --heading-5-size: var(--text-lg);
  --heading-6-size: var(--text-base);
  --heading-1-leading: var(--leading-tight);
  --heading-2-leading: var(--leading-tight);
  --heading-3-leading: var(--leading-snug);
  --heading-4-leading: var(--leading-snug);
  --heading-5-leading: var(--leading-normal);
  --heading-6-leading: var(--leading-normal);
  --heading-1-tracking: var(--tracking-tight);
  --heading-2-tracking: var(--tracking-tight);
  --heading-3-tracking: var(--tracking-tight);
  --heading-4-tracking: var(--tracking-normal);
  --heading-5-tracking: var(--tracking-normal);
  --heading-6-tracking: var(--tracking-normal);
  --heading-fg: #070a0f;
  --heading-1-weight: 850;
  --heading-2-weight: 800;
  --heading-3-weight: 760;
  --heading-weight: 740;
  --body-size: 1rem;
  --body-leading: 1.62;
  --body-tracking: var(--tracking-normal);
  --muted-size: 1rem;
  --muted-leading: 1.62;
  --muted-tracking: var(--tracking-normal);
  --muted-opacity: 0.82;
  --small-size: 0.925rem;
  --small-leading: var(--leading-normal);
  --small-tracking: var(--tracking-normal);
  --text-strong: var(--fg);
  --text-body: var(--fg);
  --text-muted: var(--muted);
  --link-color: var(--accent);
  --link-color-hover: var(--state-hover-accent);
  --link-color-visited: var(--accent);
  --link-decoration: underline;
  --link-decoration-hover: underline;
  --interactive-text-weight: 500;
  --focus-ring-color: var(--state-focus-ring);
  --state-hover-surface: var(--surface-interactive-hover);
  --state-hover-border: var(--border-interactive);
  --state-hover-accent: var(--accent-hover);
  --state-active-surface: var(--surface-tint-strong);
  --state-active-border: var(--border-interactive-hover);
  --state-focus-ring: var(--accent-focus-ring);
  --state-focus-ring-offset: 2px;
  --state-disabled-opacity: 0.45;
  --button-height-sm: 2.25rem;
  --button-height-md: 2.75rem;
  --button-pad-x: var(--space-4);
  --button-gap: var(--space-2);
  --button-font-size: var(--small-size);
  --button-font-weight: 760;
  --button-radius: var(--radius-button);
  --button-border: var(--accent-border);
  --button-bg-primary: var(--accent);
  --button-fg-primary: var(--accent-fg);
  --button-bg-secondary: var(--surface-elevated);
  --button-fg-secondary: var(--text-strong);
  --button-bg-ghost: transparent;
  --button-fg-ghost: var(--text-strong);
  --button-focus-ring: var(--state-focus-ring);
  --tag-height: 1.75rem;
  --tag-pad-x: var(--space-2);
  --tag-gap: var(--space-2);
  --tag-radius: var(--radius-pill);
  --tag-border: var(--border-subtle);
  --tag-bg: var(--surface-subtle);
  --tag-fg: var(--meta-fg);
  --tag-font-size: var(--small-size);
  --tag-font-weight: 720;
  --meta-gap: var(--stack-gap-xs);
  --meta-fg: var(--text-muted);
  --meta-strong-fg: var(--text-strong);
  --card-surface: var(--surface-elevated);
  --card-border: var(--border-default);
  --card-radius: var(--radius-card);
  --card-shadow: 0 1px 2px rgb(15 23 42 / 0.05),
    8px 8px 0 var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --card-shadow: 0 1px 2px rgb(15 23 42 / 0.05),
    8px 8px 0 color-mix(in srgb, var(--accent) 10%, transparent);
  }
  --card-shadow-hover: 0 1px 2px rgb(15 23 42 / 0.06),
    10px 10px 0 var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --card-shadow-hover: 0 1px 2px rgb(15 23 42 / 0.06),
    10px 10px 0 color-mix(in srgb, var(--accent) 16%, transparent);
  }
  --card-pad: var(--space-6);
  --card-pad-spacious: var(--space-6);
  --card-content-gap: var(--stack-gap-md);
  --card-title-body-gap: var(--stack-gap-sm);
  --card-meta-gap: var(--stack-gap-xs);
  --card-cta-gap: var(--stack-gap-sm);
  --section-pad-y: 3rem;
  --section-pad-y-compact: 2rem;
  --section-pad-y-spacious: 4rem;
  --container-pad-x: var(--space-4);
  --stack-gap-xs: var(--space-1);
  --stack-gap-sm: var(--space-2);
  --stack-gap-md: var(--space-4);
  --stack-gap-lg: var(--space-8);
  --stack-gap-xl: var(--space-12);
  --max-w-content: 72rem;
  --max-w-wide: 84rem;
  --max-w-full: 100%;
  --article-prose-measure: 68ch;
  --article-prose-font-size: var(--text-lg);
  --article-prose-leading: var(--leading-relaxed);
  --article-flow-space: var(--space-6);
  --article-heading-1-space-bottom: var(--space-8);
  --article-heading-2-space-top: var(--space-20);
  --article-heading-2-space-bottom: var(--space-6);
  --article-heading-3-space-top: var(--space-12);
  --article-heading-3-space-bottom: var(--space-4);
  --article-heading-4-space-top: var(--space-8);
  --article-heading-4-space-bottom: var(--space-3);
  --article-block-space: var(--space-8);
  --article-lead-size: 1.2rem;
  --article-lead-leading: 1.58;
  --article-scroll-margin-top: calc(
    var(--section-pad-y-compact) + var(--space-8)
  );
  --motion-duration-micro: 75ms;
  --motion-duration-quick: 150ms;
  --motion-duration-standard: 200ms;
  --motion-duration-transition: 300ms;
  --motion-duration-slow: 400ms;
  --motion-easing-quick: cubic-bezier(0.3, 0.3, 0.3, 1);
  --motion-easing-standard: cubic-bezier(0.2, 0.3, 0.3, 1);
  --motion-easing-smooth: cubic-bezier(0.1, 0.1, 0.3, 1);
  --motion-easing-ease-out: ease-out;
  --motion-easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}
[data-theme="neutral"] {
  --bg: #ffffff;
  --fg: #10141c;
  --muted: #536071;
  --border-subtle: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    --border-subtle: color-mix(in srgb, var(--fg) 10%, var(--bg));
  }
  --border-default: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    --border-default: color-mix(in srgb, var(--fg) 20%, var(--bg));
  }
  --border-strong: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    --border-strong: color-mix(in srgb, var(--fg) 40%, var(--bg));
  }
  --surface-1: var(--bg);
  --surface-2: #f4f7fb;
  --surface-3: #ffffff;
  --surface-tint: #e8eef8;
  --surface-tint-strong: #d4def0;
  --surface: var(--surface-1);
  --accent: #155dfc;
  --impact: #ff4f5e;
  --impact-fg: #ffffff;
  --inversion-bg: #080b12;
  --inversion-fg: #ffffff;
  --inversion-muted: #cbd5e1;
  --heading-fg: #070a0f;
  --focus: #00a7ff;
  --hero-gradient: none;
  --section-gradient: none;
  --card-glow: rgb(21 93 252 / 0.28);
  --interactive-ring: var(--focus);
  --primary: var(--accent);
  --accent-fg: #ffffff;
  --accent-soft: #e7efff;
  --accent-soft-fg: var(--accent);
  --accent-border: var(--border-interactive);
  --accent-hover: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --accent-hover: color-mix(in srgb, var(--accent) 88%, black);
  }
  --accent-active: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --accent-active: color-mix(in srgb, var(--accent) 75%, black);
  }
  --accent-focus-ring: var(--focus);
  --border-interactive: var(--focus);
  @supports (color: color-mix(in lab, red, red)) {
    --border-interactive: color-mix(
    in srgb,
    var(--focus) 20%,
    var(--border-default)
  );
  }
  --border-interactive-hover: var(--focus);
  @supports (color: color-mix(in lab, red, red)) {
    --border-interactive-hover: color-mix(
    in srgb,
    var(--focus) 38%,
    var(--border-default)
  );
  }
  --separator-color: var(--border-subtle);
  --border: var(--border-default);
  --surface-base: var(--surface-1);
  --surface-subtle: var(--surface-2);
  --surface-elevated: var(--surface-3);
  --surface-interactive: var(--surface-tint);
  --surface-interactive-hover: var(--surface-tint-strong);
  --surface-inset: var(--surface-2);
  @supports (color: color-mix(in lab, red, red)) {
    --surface-inset: color-mix(
    in srgb,
    var(--surface-2) 70%,
    var(--surface-tint-strong)
  );
  }
  --link-color: #0b55f4;
  --link-color-hover: #073aa7;
  --link-color-visited: #5537d9;
  --focus-ring-color: var(--state-focus-ring);
  --state-hover-surface: var(--surface-interactive-hover);
  --state-hover-border: var(--border-interactive);
  --state-hover-accent: var(--link-color-hover);
  --state-active-surface: var(--surface-tint-strong);
  --state-active-border: var(--border-interactive-hover);
  --state-focus-ring: var(--accent-focus-ring);
  --state-focus-ring-offset: 2px;
  --state-disabled-opacity: 0.45;
  --button-bg-primary: var(--accent);
  --button-fg-primary: var(--accent-fg);
  --button-bg-secondary: #ffffff;
  --button-fg-secondary: var(--text-strong);
  --button-bg-ghost: transparent;
  --button-fg-ghost: var(--text-strong);
  --button-focus-ring: var(--state-focus-ring);
  --tag-border: var(--border-default);
  --tag-bg: var(--accent-soft);
  --tag-fg: var(--meta-fg);
  --meta-fg: var(--text-muted);
  --meta-strong-fg: var(--text-strong);
  --card-surface: #ffffff;
  --card-shadow: 0 1px 2px rgb(8 11 18 / 0.06), 8px 8px 0 rgb(21 93 252 / 0.12);
  --card-shadow-hover: 0 1px 2px rgb(8 11 18 / 0.08), 10px 10px 0 rgb(21 93 252 / 0.2);
  --font-sans: "Inter Variable", "Aptos", "Segoe UI", sans-serif;
  --font-display: "Inter Variable", "Aptos", "Segoe UI", sans-serif;
}
[data-theme="engineering"] {
  --bg: #f7faff;
  --fg: #0b1220;
  --muted: #42526a;
  --border-subtle: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --border-subtle: color-mix(in srgb, var(--accent) 14%, var(--surface-3));
  }
  --border-default: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --border-default: color-mix(in srgb, var(--accent) 26%, var(--surface-3));
  }
  --border-strong: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --border-strong: color-mix(in srgb, var(--accent) 48%, var(--surface-3));
  }
  --surface-1: var(--bg);
  --surface-2: #eaf1ff;
  --surface-3: #ffffff;
  --surface-tint: #dbe8ff;
  --surface-tint-strong: #b9d0ff;
  --surface: var(--surface-1);
  --accent: #155dfc;
  --impact: #00a7ff;
  --impact-fg: #ffffff;
  --inversion-bg: #071226;
  --inversion-fg: #ffffff;
  --inversion-muted: #cbd5e1;
  --heading-fg: #071226;
  --focus: #00a7ff;
  --hero-gradient: none;
  --section-gradient: none;
  --card-glow: rgb(21 93 252 / 0.28);
  --interactive-ring: var(--accent);
  --primary: var(--accent);
  --accent-fg: var(--color-neutral-0);
  --accent-soft: #e7efff;
  --accent-soft-fg: var(--accent);
  --accent-border: var(--border-interactive);
  --accent-hover: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --accent-hover: color-mix(in srgb, var(--accent) 88%, black);
  }
  --accent-active: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --accent-active: color-mix(in srgb, var(--accent) 75%, black);
  }
  --accent-focus-ring: var(--accent);
  --border-interactive: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --border-interactive: color-mix(
    in srgb,
    var(--accent) 16%,
    var(--border-default)
  );
  }
  --border-interactive-hover: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --border-interactive-hover: color-mix(
    in srgb,
    var(--accent) 28%,
    var(--border-default)
  );
  }
  --separator-color: var(--border-subtle);
  --border: var(--border-default);
  --surface-base: var(--surface-1);
  --surface-subtle: var(--surface-2);
  --surface-elevated: var(--surface-3);
  --surface-interactive: var(--surface-tint);
  --surface-interactive-hover: var(--surface-tint);
  @supports (color: color-mix(in lab, red, red)) {
    --surface-interactive-hover: color-mix(
    in srgb,
    var(--surface-tint) 72%,
    white
  );
  }
  --surface-inset: var(--surface-2);
  @supports (color: color-mix(in lab, red, red)) {
    --surface-inset: color-mix(
    in srgb,
    var(--surface-2) 78%,
    var(--surface-tint-strong)
  );
  }
  --link-color: var(--accent);
  --link-color-hover: var(--state-hover-accent);
  --link-color-visited: var(--accent);
  --focus-ring-color: var(--state-focus-ring);
  --state-hover-surface: var(--surface-interactive-hover);
  --state-hover-border: var(--border-interactive);
  --state-hover-accent: var(--accent-hover);
  --state-active-surface: var(--surface-tint);
  --state-active-border: var(--border-interactive-hover);
  --state-focus-ring: var(--accent-focus-ring);
  --state-focus-ring-offset: 2px;
  --state-disabled-opacity: 0.45;
  --button-bg-primary: var(--accent);
  --button-fg-primary: var(--accent-fg);
  --button-bg-secondary: var(--surface-elevated);
  --button-fg-secondary: var(--text-strong);
  --button-bg-ghost: transparent;
  --button-fg-ghost: var(--text-strong);
  --button-focus-ring: var(--state-focus-ring);
  --tag-border: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --tag-border: color-mix(in srgb, var(--accent) 28%, var(--border-default));
  }
  --tag-bg: var(--accent-soft);
  --tag-fg: var(--meta-fg);
  --meta-fg: var(--text-muted);
  --meta-strong-fg: var(--text-strong);
  --card-surface: #ffffff;
  --card-shadow: 0 1px 2px rgb(15 23 42 / 0.05), 8px 8px 0 rgb(21 93 252 / 0.14);
  --card-shadow-hover: 0 1px 2px rgb(15 23 42 / 0.08), 10px 10px 0 rgb(21 93 252 / 0.22);
  --font-sans: "Inter Variable", "Aptos", "Segoe UI", sans-serif;
  --font-display: "Inter Variable", "Aptos", "Segoe UI", sans-serif;
}
[data-theme="production"] {
  --bg: #ffffff;
  --fg: #151821;
  --muted: #596273;
  --border-subtle: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --border-subtle: color-mix(in srgb, var(--accent) 16%, var(--surface-3));
  }
  --border-default: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --border-default: color-mix(in srgb, var(--accent) 30%, var(--surface-3));
  }
  --border-strong: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --border-strong: color-mix(in srgb, var(--accent) 58%, var(--surface-3));
  }
  --surface-1: var(--bg);
  --surface-2: #f7f8fb;
  --surface-3: #ffffff;
  --surface-tint: #ffe8ec;
  --surface-tint-strong: #ffd2d9;
  --surface: var(--surface-1);
  --accent: #ff4f5e;
  --impact: #ff7a18;
  --impact-fg: #151821;
  --inversion-bg: #151821;
  --inversion-fg: #ffffff;
  --inversion-muted: #d7deea;
  --heading-fg: #11151c;
  --focus: #ff4f5e;
  --hero-gradient: none;
  --section-gradient: none;
  --card-glow: rgb(255 79 94 / 0.24);
  --interactive-ring: var(--accent);
  --primary: var(--accent);
  --accent-fg: var(--color-neutral-0);
  --accent-soft: #ffe8ec;
  --accent-soft-fg: #b31932;
  --accent-border: var(--border-interactive);
  --accent-hover: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --accent-hover: color-mix(in srgb, var(--accent) 88%, black);
  }
  --accent-active: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --accent-active: color-mix(in srgb, var(--accent) 75%, black);
  }
  --accent-focus-ring: var(--accent);
  --border-interactive: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --border-interactive: color-mix(
    in srgb,
    var(--accent) 16%,
    var(--border-default)
  );
  }
  --border-interactive-hover: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --border-interactive-hover: color-mix(
    in srgb,
    var(--accent) 28%,
    var(--border-default)
  );
  }
  --separator-color: var(--border-subtle);
  --border: var(--border-default);
  --surface-base: var(--surface-1);
  --surface-subtle: var(--surface-2);
  --surface-elevated: var(--surface-3);
  --surface-interactive: var(--surface-tint);
  --surface-interactive-hover: var(--surface-tint);
  @supports (color: color-mix(in lab, red, red)) {
    --surface-interactive-hover: color-mix(
    in srgb,
    var(--surface-tint) 72%,
    white
  );
  }
  --surface-inset: var(--surface-2);
  @supports (color: color-mix(in lab, red, red)) {
    --surface-inset: color-mix(
    in srgb,
    var(--surface-2) 78%,
    var(--surface-tint-strong)
  );
  }
  --link-color: var(--accent);
  --link-color-hover: var(--state-hover-accent);
  --link-color-visited: var(--accent);
  --focus-ring-color: var(--state-focus-ring);
  --state-hover-surface: var(--surface-interactive-hover);
  --state-hover-border: var(--border-interactive);
  --state-hover-accent: var(--accent-hover);
  --state-active-surface: var(--surface-tint);
  --state-active-border: var(--border-interactive-hover);
  --state-focus-ring: var(--accent-focus-ring);
  --state-focus-ring-offset: 2px;
  --state-disabled-opacity: 0.45;
  --button-bg-primary: var(--accent);
  --button-fg-primary: var(--accent-fg);
  --button-bg-secondary: var(--surface-elevated);
  --button-fg-secondary: var(--text-strong);
  --button-bg-ghost: transparent;
  --button-fg-ghost: var(--text-strong);
  --button-focus-ring: var(--state-focus-ring);
  --tag-border: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --tag-border: color-mix(in srgb, var(--accent) 32%, var(--border-default));
  }
  --tag-bg: var(--accent-soft);
  --tag-fg: var(--meta-fg);
  --meta-fg: var(--text-muted);
  --meta-strong-fg: var(--text-strong);
  --card-surface: #ffffff;
  --card-shadow: 0 1px 2px rgb(24 24 27 / 0.06), 8px 8px 0 rgb(255 79 94 / 0.14);
  --card-shadow-hover: 0 1px 2px rgb(24 24 27 / 0.08), 10px 10px 0 rgb(255 79 94 / 0.22);
  --font-sans: "Inter Variable", "Aptos", "Segoe UI", sans-serif;
  --font-display: "Inter Variable", "Aptos", "Segoe UI", sans-serif;
}
[data-brand-theme] {
  color-scheme: var(--mode-color-scheme);
  --font-sans: "Inter Variable", "Aptos", "Segoe UI", sans-serif;
  --font-display: "Inter Variable", "Aptos", "Segoe UI", sans-serif;
  --font-heading: var(--font-display);
  --font-body: var(--font-sans);
  --heading-1-weight: 850;
  --heading-2-weight: 800;
  --heading-3-weight: 760;
  --heading-weight: 740;
  --body-leading: 1.58;
  --muted-leading: 1.58;
  --radius-card: 0.375rem;
  --radius-button: 0.375rem;
  --radius-input: 0.375rem;
}
[data-brand-theme="electric-graphite"] {
  --mode-color-scheme: light;
  --bg: #ffffff;
  --fg: #10141c;
  --muted: #536071;
  --border-subtle: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    --border-subtle: color-mix(in srgb, var(--fg) 9%, var(--bg));
  }
  --border-default: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    --border-default: color-mix(in srgb, var(--fg) 18%, var(--bg));
  }
  --border-strong: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    --border-strong: color-mix(in srgb, var(--fg) 44%, var(--bg));
  }
  --surface-1: var(--bg);
  --surface-2: #f4f7fb;
  --surface-3: #ffffff;
  --surface-tint: #e8eef8;
  --surface-tint-strong: #d4def0;
  --surface: var(--surface-1);
  --accent: #155dfc;
  --impact: #ff4f5e;
  --impact-fg: #ffffff;
  --inversion-bg: #080b12;
  --inversion-fg: #ffffff;
  --inversion-muted: #cbd5e1;
  --heading-fg: #070a0f;
  --focus: #00a7ff;
  --hero-gradient: none;
  --section-gradient: none;
  --card-glow: rgb(21 93 252 / 0.28);
  --interactive-ring: var(--focus);
  --primary: var(--accent);
  --accent-fg: #ffffff;
  --accent-soft: #e7efff;
  --accent-soft-fg: #0b43c7;
  --accent-border: var(--border-interactive);
  --accent-hover: #0c49d6;
  --accent-active: #0837a8;
  --accent-focus-ring: var(--focus);
  --border-interactive: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --border-interactive: color-mix(
    in srgb,
    var(--accent) 24%,
    var(--border-default)
  );
  }
  --border-interactive-hover: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --border-interactive-hover: color-mix(
    in srgb,
    var(--accent) 42%,
    var(--border-default)
  );
  }
  --separator-color: var(--border-subtle);
  --border: var(--border-default);
  --surface-base: var(--surface-1);
  --surface-subtle: var(--surface-2);
  --surface-elevated: var(--surface-3);
  --surface-interactive: var(--surface-tint);
  --surface-interactive-hover: var(--surface-tint-strong);
  --surface-inset: var(--surface-2);
  @supports (color: color-mix(in lab, red, red)) {
    --surface-inset: color-mix(
    in srgb,
    var(--surface-2) 72%,
    var(--surface-tint-strong)
  );
  }
  --link-color: #0b55f4;
  --link-color-hover: #073aa7;
  --link-color-visited: #5537d9;
  --focus-ring-color: var(--state-focus-ring);
  --state-hover-surface: var(--surface-interactive-hover);
  --state-hover-border: var(--border-interactive);
  --state-hover-accent: var(--link-color-hover);
  --state-active-surface: var(--surface-tint-strong);
  --state-active-border: var(--border-interactive-hover);
  --state-focus-ring: var(--accent-focus-ring);
  --state-focus-ring-offset: 2px;
  --state-disabled-opacity: 0.45;
  --button-bg-primary: var(--accent);
  --button-fg-primary: var(--accent-fg);
  --button-bg-secondary: #ffffff;
  --button-fg-secondary: var(--text-strong);
  --button-bg-ghost: transparent;
  --button-fg-ghost: var(--text-strong);
  --button-focus-ring: var(--state-focus-ring);
  --tag-border: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --tag-border: color-mix(in srgb, var(--accent) 18%, var(--border-default));
  }
  --tag-bg: var(--accent-soft);
  --tag-fg: var(--accent-soft-fg);
  --meta-fg: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    --meta-fg: color-mix(in srgb, var(--fg) 68%, var(--accent));
  }
  --meta-strong-fg: var(--text-strong);
  --card-surface: #ffffff;
  --card-shadow: 0 1px 2px rgb(8 11 18 / 0.06), 8px 8px 0 rgb(21 93 252 / 0.12);
  --card-shadow-hover: 0 1px 2px rgb(8 11 18 / 0.08), 10px 10px 0 rgb(21 93 252 / 0.2);
}
[data-brand-theme="signal-studio"] {
  --mode-color-scheme: light;
  --bg: #ffffff;
  --fg: #090b0f;
  --muted: #4e5966;
  --border-subtle: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    --border-subtle: color-mix(in srgb, var(--fg) 10%, var(--bg));
  }
  --border-default: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    --border-default: color-mix(in srgb, var(--fg) 20%, var(--bg));
  }
  --border-strong: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    --border-strong: color-mix(in srgb, var(--fg) 48%, var(--bg));
  }
  --surface-1: var(--bg);
  --surface-2: #f2f5f7;
  --surface-3: #ffffff;
  --surface-tint: #e8f9ef;
  --surface-tint-strong: #ccf7dc;
  --surface: var(--surface-1);
  --accent: #11151c;
  --impact: #19e56f;
  --impact-fg: #06100a;
  --inversion-bg: #05070b;
  --inversion-fg: #ffffff;
  --inversion-muted: #c7d0dc;
  --heading-fg: #05070b;
  --focus: #00a7ff;
  --hero-gradient: none;
  --section-gradient: none;
  --card-glow: rgb(25 229 111 / 0.24);
  --interactive-ring: var(--focus);
  --primary: var(--accent);
  --accent-fg: #ffffff;
  --accent-soft: #eafff1;
  --accent-soft-fg: #0b763d;
  --accent-border: var(--border-interactive);
  --accent-hover: #000000;
  --accent-active: #000000;
  --accent-focus-ring: var(--focus);
  --border-interactive: var(--impact);
  @supports (color: color-mix(in lab, red, red)) {
    --border-interactive: color-mix(
    in srgb,
    var(--impact) 24%,
    var(--border-default)
  );
  }
  --border-interactive-hover: var(--impact);
  @supports (color: color-mix(in lab, red, red)) {
    --border-interactive-hover: color-mix(
    in srgb,
    var(--impact) 42%,
    var(--border-default)
  );
  }
  --separator-color: var(--border-subtle);
  --border: var(--border-default);
  --surface-base: var(--surface-1);
  --surface-subtle: var(--surface-2);
  --surface-elevated: var(--surface-3);
  --surface-interactive: var(--surface-tint);
  --surface-interactive-hover: var(--surface-tint-strong);
  --surface-inset: var(--surface-2);
  @supports (color: color-mix(in lab, red, red)) {
    --surface-inset: color-mix(
    in srgb,
    var(--surface-2) 72%,
    var(--surface-tint-strong)
  );
  }
  --link-color: #0069ff;
  --link-color-hover: #004ab8;
  --link-color-visited: #5a35d8;
  --focus-ring-color: var(--state-focus-ring);
  --state-hover-surface: var(--surface-interactive-hover);
  --state-hover-border: var(--border-interactive);
  --state-hover-accent: var(--link-color-hover);
  --state-active-surface: var(--surface-tint-strong);
  --state-active-border: var(--border-interactive-hover);
  --state-focus-ring: var(--accent-focus-ring);
  --state-focus-ring-offset: 2px;
  --state-disabled-opacity: 0.45;
  --button-bg-primary: var(--accent);
  --button-fg-primary: var(--accent-fg);
  --button-bg-secondary: #ffffff;
  --button-fg-secondary: var(--text-strong);
  --button-bg-ghost: transparent;
  --button-fg-ghost: var(--text-strong);
  --button-focus-ring: var(--state-focus-ring);
  --tag-border: var(--impact);
  @supports (color: color-mix(in lab, red, red)) {
    --tag-border: color-mix(in srgb, var(--impact) 26%, var(--border-default));
  }
  --tag-bg: var(--accent-soft);
  --tag-fg: var(--accent-soft-fg);
  --meta-fg: #0b763d;
  --meta-strong-fg: var(--text-strong);
  --card-surface: #ffffff;
  --card-shadow: 0 1px 2px rgb(5 7 11 / 0.06), 8px 8px 0 rgb(25 229 111 / 0.14);
  --card-shadow-hover: 0 1px 2px rgb(5 7 11 / 0.08), 10px 10px 0 rgb(0 105 255 / 0.18);
}
[data-brand-theme="modern-operator"] {
  --mode-color-scheme: light;
  --bg: #ffffff;
  --fg: #111827;
  --muted: #596273;
  --border-subtle: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    --border-subtle: color-mix(in srgb, var(--fg) 9%, var(--bg));
  }
  --border-default: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    --border-default: color-mix(in srgb, var(--fg) 18%, var(--bg));
  }
  --border-strong: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    --border-strong: color-mix(in srgb, var(--fg) 42%, var(--bg));
  }
  --surface-1: var(--bg);
  --surface-2: #f5f7fa;
  --surface-3: #ffffff;
  --surface-tint: #edf2ff;
  --surface-tint-strong: #dce6ff;
  --surface: var(--surface-1);
  --accent: #2457d6;
  --impact: #f59e0b;
  --impact-fg: #111827;
  --inversion-bg: #111827;
  --inversion-fg: #ffffff;
  --inversion-muted: #d1d8e4;
  --heading-fg: #0f172a;
  --focus: #2457d6;
  --hero-gradient: none;
  --section-gradient: none;
  --card-glow: rgb(36 87 214 / 0.23);
  --interactive-ring: var(--focus);
  --primary: var(--accent);
  --accent-fg: #ffffff;
  --accent-soft: #e9efff;
  --accent-soft-fg: #173a91;
  --accent-border: var(--border-interactive);
  --accent-hover: #1b44ab;
  --accent-active: #15347f;
  --accent-focus-ring: var(--focus);
  --border-interactive: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --border-interactive: color-mix(
    in srgb,
    var(--accent) 22%,
    var(--border-default)
  );
  }
  --border-interactive-hover: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --border-interactive-hover: color-mix(
    in srgb,
    var(--accent) 38%,
    var(--border-default)
  );
  }
  --separator-color: var(--border-subtle);
  --border: var(--border-default);
  --surface-base: var(--surface-1);
  --surface-subtle: var(--surface-2);
  --surface-elevated: var(--surface-3);
  --surface-interactive: var(--surface-tint);
  --surface-interactive-hover: var(--surface-tint-strong);
  --surface-inset: var(--surface-2);
  @supports (color: color-mix(in lab, red, red)) {
    --surface-inset: color-mix(
    in srgb,
    var(--surface-2) 72%,
    var(--surface-tint-strong)
  );
  }
  --link-color: #2457d6;
  --link-color-hover: #173a91;
  --link-color-visited: #4d3bbf;
  --focus-ring-color: var(--state-focus-ring);
  --state-hover-surface: var(--surface-interactive-hover);
  --state-hover-border: var(--border-interactive);
  --state-hover-accent: var(--link-color-hover);
  --state-active-surface: var(--surface-tint-strong);
  --state-active-border: var(--border-interactive-hover);
  --state-focus-ring: var(--accent-focus-ring);
  --state-focus-ring-offset: 2px;
  --state-disabled-opacity: 0.45;
  --button-bg-primary: var(--accent);
  --button-fg-primary: var(--accent-fg);
  --button-bg-secondary: #ffffff;
  --button-fg-secondary: var(--text-strong);
  --button-bg-ghost: transparent;
  --button-fg-ghost: var(--text-strong);
  --button-focus-ring: var(--state-focus-ring);
  --tag-border: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --tag-border: color-mix(in srgb, var(--accent) 18%, var(--border-default));
  }
  --tag-bg: var(--accent-soft);
  --tag-fg: var(--accent-soft-fg);
  --meta-fg: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    --meta-fg: color-mix(in srgb, var(--fg) 70%, var(--accent));
  }
  --meta-strong-fg: var(--text-strong);
  --card-surface: #ffffff;
  --card-shadow: 0 1px 2px rgb(17 24 39 / 0.06), 8px 8px 0 rgb(36 87 214 / 0.1);
  --card-shadow-hover: 0 1px 2px rgb(17 24 39 / 0.08), 10px 10px 0 rgb(245 158 11 / 0.18);
}
html[data-color-mode="light"] [data-theme="engineering"] {
  --bg: #f7faff;
  --fg: #0b1220;
  --muted: #42526a;
  --border-subtle: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --border-subtle: color-mix(in srgb, var(--accent) 14%, var(--surface-3));
  }
  --border-default: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --border-default: color-mix(in srgb, var(--accent) 26%, var(--surface-3));
  }
  --border-strong: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --border-strong: color-mix(in srgb, var(--accent) 48%, var(--surface-3));
  }
  --surface-1: var(--bg);
  --surface-2: #eaf1ff;
  --surface-3: #ffffff;
  --surface-tint: #dbe8ff;
  --surface-tint-strong: #b9d0ff;
  --surface: var(--surface-1);
  --accent: #155dfc;
  --impact: #00a7ff;
  --impact-fg: #ffffff;
  --inversion-bg: #071226;
  --inversion-fg: #ffffff;
  --inversion-muted: #cbd5e1;
  --heading-fg: #071226;
  --focus: #00a7ff;
  --card-glow: rgb(21 93 252 / 0.28);
  --interactive-ring: var(--accent);
  --primary: var(--accent);
  --accent-fg: #ffffff;
  --accent-soft: #e7efff;
  --accent-soft-fg: var(--accent);
  --accent-hover: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --accent-hover: color-mix(in srgb, var(--accent) 88%, black);
  }
  --accent-active: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --accent-active: color-mix(in srgb, var(--accent) 75%, black);
  }
  --accent-focus-ring: var(--accent);
  --border-interactive: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --border-interactive: color-mix(
    in srgb,
    var(--accent) 16%,
    var(--border-default)
  );
  }
  --border-interactive-hover: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --border-interactive-hover: color-mix(
    in srgb,
    var(--accent) 28%,
    var(--border-default)
  );
  }
  --separator-color: var(--border-subtle);
  --border: var(--border-default);
  --surface-base: var(--surface-1);
  --surface-subtle: var(--surface-2);
  --surface-elevated: var(--surface-3);
  --surface-interactive: var(--surface-tint);
  --surface-interactive-hover: var(--surface-tint);
  @supports (color: color-mix(in lab, red, red)) {
    --surface-interactive-hover: color-mix(
    in srgb,
    var(--surface-tint) 72%,
    white
  );
  }
  --surface-inset: var(--surface-2);
  @supports (color: color-mix(in lab, red, red)) {
    --surface-inset: color-mix(
    in srgb,
    var(--surface-2) 78%,
    var(--surface-tint-strong)
  );
  }
  --link-color: var(--accent);
  --link-color-hover: var(--state-hover-accent);
  --link-color-visited: var(--accent);
  --state-hover-surface: var(--surface-interactive-hover);
  --state-hover-border: var(--border-interactive);
  --state-hover-accent: var(--accent-hover);
  --state-active-surface: var(--surface-tint);
  --state-active-border: var(--border-interactive-hover);
  --state-focus-ring: var(--accent-focus-ring);
  --button-bg-primary: var(--accent);
  --button-fg-primary: var(--accent-fg);
  --button-bg-secondary: var(--surface-elevated);
  --button-fg-secondary: var(--text-strong);
  --tag-border: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --tag-border: color-mix(in srgb, var(--accent) 28%, var(--border-default));
  }
  --tag-bg: var(--accent-soft);
  --tag-fg: var(--meta-fg);
  --meta-fg: var(--text-muted);
  --meta-strong-fg: var(--text-strong);
  --card-shadow: 0 1px 2px rgb(15 23 42 / 0.05), 8px 8px 0 rgb(21 93 252 / 0.14);
  --card-shadow-hover: 0 1px 2px rgb(15 23 42 / 0.08), 10px 10px 0 rgb(21 93 252 / 0.22);
}
html[data-color-mode="light"] [data-theme="production"] {
  --bg: #ffffff;
  --fg: #151821;
  --muted: #596273;
  --border-subtle: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --border-subtle: color-mix(in srgb, var(--accent) 16%, var(--surface-3));
  }
  --border-default: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --border-default: color-mix(in srgb, var(--accent) 30%, var(--surface-3));
  }
  --border-strong: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --border-strong: color-mix(in srgb, var(--accent) 58%, var(--surface-3));
  }
  --surface-1: var(--bg);
  --surface-2: #f7f8fb;
  --surface-3: #ffffff;
  --surface-tint: #ffe8ec;
  --surface-tint-strong: #ffd2d9;
  --surface: var(--surface-1);
  --accent: #ff4f5e;
  --impact: #ff7a18;
  --impact-fg: #151821;
  --inversion-bg: #151821;
  --inversion-fg: #ffffff;
  --inversion-muted: #d7deea;
  --heading-fg: #11151c;
  --focus: #ff4f5e;
  --card-glow: rgb(255 79 94 / 0.24);
  --interactive-ring: var(--accent);
  --primary: var(--accent);
  --accent-fg: #ffffff;
  --accent-soft: #ffe8ec;
  --accent-soft-fg: #b31932;
  --accent-hover: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --accent-hover: color-mix(in srgb, var(--accent) 88%, black);
  }
  --accent-active: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --accent-active: color-mix(in srgb, var(--accent) 75%, black);
  }
  --accent-focus-ring: var(--accent);
  --border-interactive: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --border-interactive: color-mix(
    in srgb,
    var(--accent) 16%,
    var(--border-default)
  );
  }
  --border-interactive-hover: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --border-interactive-hover: color-mix(
    in srgb,
    var(--accent) 28%,
    var(--border-default)
  );
  }
  --separator-color: var(--border-subtle);
  --border: var(--border-default);
  --surface-base: var(--surface-1);
  --surface-subtle: var(--surface-2);
  --surface-elevated: var(--surface-3);
  --surface-interactive: var(--surface-tint);
  --surface-interactive-hover: var(--surface-tint);
  @supports (color: color-mix(in lab, red, red)) {
    --surface-interactive-hover: color-mix(
    in srgb,
    var(--surface-tint) 76%,
    white
  );
  }
  --surface-inset: var(--surface-2);
  @supports (color: color-mix(in lab, red, red)) {
    --surface-inset: color-mix(
    in srgb,
    var(--surface-2) 78%,
    var(--surface-tint-strong)
  );
  }
  --link-color: #d72539;
  --link-color-hover: #981b2b;
  --link-color-visited: #9a2f7d;
  --state-hover-surface: var(--surface-interactive-hover);
  --state-hover-border: var(--border-interactive);
  --state-hover-accent: var(--accent-hover);
  --state-active-surface: var(--surface-tint);
  --state-active-border: var(--border-interactive-hover);
  --state-focus-ring: var(--accent-focus-ring);
  --button-bg-primary: var(--accent);
  --button-fg-primary: var(--accent-fg);
  --button-bg-secondary: var(--surface-elevated);
  --button-fg-secondary: var(--text-strong);
  --tag-border: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --tag-border: color-mix(in srgb, var(--accent) 32%, var(--border-default));
  }
  --tag-bg: var(--accent-soft);
  --tag-fg: var(--meta-fg);
  --meta-fg: var(--text-muted);
  --meta-strong-fg: var(--text-strong);
  --card-shadow: 0 1px 2px rgb(24 24 27 / 0.06), 8px 8px 0 rgb(255 79 94 / 0.14);
  --card-shadow-hover: 0 1px 2px rgb(24 24 27 / 0.08), 10px 10px 0 rgb(255 79 94 / 0.22);
}
:root {
  color-scheme: light;
}
html[data-color-mode="light"] {
  color-scheme: light;
}
html[data-color-mode="dark"] {
  color-scheme: dark;
  background: #090d14;
}
html[data-color-mode="dark"] body {
  background: #090d14;
  color: #f4f7fb;
}
[data-color-mode="dark"] [data-brand-theme] {
  --mode-color-scheme: dark;
  --bg: #090d14;
  --fg: #f4f7fb;
  --muted: #aab6c7;
  --border-subtle: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    --border-subtle: color-mix(in srgb, var(--fg) 10%, var(--bg));
  }
  --border-default: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    --border-default: color-mix(in srgb, var(--fg) 18%, var(--bg));
  }
  --border-strong: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    --border-strong: color-mix(in srgb, var(--fg) 34%, var(--bg));
  }
  --surface-1: var(--bg);
  --surface-2: #111824;
  --surface-3: #151e2c;
  --surface-tint: #172746;
  --surface-tint-strong: #203967;
  --surface: var(--surface-1);
  --accent: #74a4ff;
  --impact: #ff6f7b;
  --impact-fg: #090d14;
  --inversion-bg: #f7f9fc;
  --inversion-fg: #070a0f;
  --inversion-muted: #475569;
  --heading-fg: #ffffff;
  --focus: #8fd3ff;
  --hero-gradient: none;
  --section-gradient: none;
  --card-glow: rgb(116 164 255 / 0.34);
  --interactive-ring: var(--focus);
  --primary: var(--accent);
  --accent-fg: #071226;
  --accent-soft: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --accent-soft: color-mix(in srgb, var(--accent) 18%, var(--surface-2));
  }
  --accent-soft-fg: #c9dcff;
  --accent-border: var(--border-interactive);
  --accent-hover: #9fbeff;
  --accent-active: #c1d4ff;
  --accent-focus-ring: var(--focus);
  --border-interactive: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --border-interactive: color-mix(
    in srgb,
    var(--accent) 28%,
    var(--border-default)
  );
  }
  --border-interactive-hover: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --border-interactive-hover: color-mix(
    in srgb,
    var(--accent) 44%,
    var(--border-default)
  );
  }
  --separator-color: var(--border-subtle);
  --border: var(--border-default);
  --surface-base: var(--surface-1);
  --surface-subtle: var(--surface-2);
  --surface-elevated: var(--surface-3);
  --surface-interactive: var(--surface-tint);
  --surface-interactive-hover: var(--surface-tint-strong);
  --surface-inset: var(--surface-1);
  @supports (color: color-mix(in lab, red, red)) {
    --surface-inset: color-mix(in srgb, var(--surface-1) 72%, var(--surface-2));
  }
  --text-strong: var(--fg);
  --text-body: var(--fg);
  --text-muted: var(--muted);
  --link-color: #a8c5ff;
  --link-color-hover: #d0ddff;
  --link-color-visited: #c6b8ff;
  --focus-ring-color: var(--state-focus-ring);
  --state-hover-surface: var(--surface-interactive-hover);
  --state-hover-border: var(--border-interactive);
  --state-hover-accent: var(--link-color-hover);
  --state-active-surface: var(--surface-tint-strong);
  --state-active-border: var(--border-interactive-hover);
  --state-focus-ring: var(--accent-focus-ring);
  --button-bg-primary: var(--accent);
  --button-fg-primary: var(--accent-fg);
  --button-bg-secondary: var(--surface-elevated);
  --button-fg-secondary: var(--text-strong);
  --button-bg-ghost: transparent;
  --button-fg-ghost: var(--text-strong);
  --button-focus-ring: var(--state-focus-ring);
  --tag-border: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --tag-border: color-mix(in srgb, var(--accent) 28%, var(--border-default));
  }
  --tag-bg: var(--accent-soft);
  --tag-fg: var(--accent-soft-fg);
  --meta-fg: var(--text-muted);
  --meta-strong-fg: var(--text-strong);
  --card-surface: var(--surface-elevated);
  --card-shadow: 0 1px 2px rgb(0 0 0 / 0.24), 8px 8px 0 rgb(116 164 255 / 0.14);
  --card-shadow-hover: 0 1px 2px rgb(0 0 0 / 0.3), 10px 10px 0 rgb(116 164 255 / 0.2);
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.24);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.28);
  --shadow-md: 0 12px 32px rgb(0 0 0 / 0.34);
  --shadow-lg: 0 18px 48px rgb(0 0 0 / 0.42);
}
[data-color-mode="dark"] [data-theme="engineering"] {
  --bg: #07111f;
  --fg: #f4f8ff;
  --muted: #a9b8ce;
  --surface-2: #0e1b2e;
  --surface-3: #14243a;
  --surface-tint: #14305a;
  --surface-tint-strong: #1c477f;
  --accent: #72b7ff;
  --impact: #2dd4ff;
  --heading-fg: #ffffff;
  --focus: #2dd4ff;
  --card-glow: rgb(45 212 255 / 0.32);
  --accent-fg: #04111f;
  --accent-soft: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --accent-soft: color-mix(in srgb, var(--accent) 18%, var(--surface-2));
  }
  --accent-soft-fg: #c8e7ff;
  --link-color: #a7d7ff;
  --link-color-hover: #d6efff;
  --card-shadow: 0 1px 2px rgb(0 0 0 / 0.26), 8px 8px 0 rgb(45 212 255 / 0.12);
  --card-shadow-hover: 0 1px 2px rgb(0 0 0 / 0.32), 10px 10px 0 rgb(45 212 255 / 0.18);
}
[data-color-mode="dark"] [data-theme="production"] {
  --bg: #140c10;
  --fg: #fff7f8;
  --muted: #d4b8bf;
  --surface-2: #211319;
  --surface-3: #2a1921;
  --surface-tint: #3b1d27;
  --surface-tint-strong: #5b2634;
  --accent: #ff8290;
  --impact: #ffb15f;
  --heading-fg: #ffffff;
  --focus: #ff9aa5;
  --card-glow: rgb(255 130 144 / 0.3);
  --accent-fg: #16070b;
  --accent-soft: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --accent-soft: color-mix(in srgb, var(--accent) 18%, var(--surface-2));
  }
  --accent-soft-fg: #ffd3d8;
  --link-color: #ffb6bf;
  --link-color-hover: #ffe1e5;
  --card-shadow: 0 1px 2px rgb(0 0 0 / 0.26), 8px 8px 0 rgb(255 130 144 / 0.13);
  --card-shadow-hover: 0 1px 2px rgb(0 0 0 / 0.32), 10px 10px 0 rgb(255 177 95 / 0.18);
}
@media (min-width: 768px) {
  :root {
    --section-pad-y: 5rem;
    --section-pad-y-compact: 3.5rem;
    --section-pad-y-spacious: 6rem;
    --container-pad-x: 2.5rem;
    --card-pad: 1.75rem;
    --card-pad-spacious: var(--space-8);
  }
}
@media (min-width: 1280px) {
  :root {
    --section-pad-y: 6rem;
    --section-pad-y-compact: var(--space-16);
    --section-pad-y-spacious: 7rem;
  }
}
[data-theme] {
  font-family: var(--font-sans);
  background-color: var(--bg);
  background-image: var(--hero-gradient), var(--section-gradient);
  background-repeat: no-repeat;
  background-size: 100% 0,
    100% 100%;
  background-position: top center,
    top center;
}
html,
body {
  min-height: 100%;
}
html {
  font-size: 16px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-body);
}
* {
  box-sizing: border-box;
}
a {
  color: inherit;
  text-decoration: none;
}
[data-theme] :is(h1, h2, h3, h4, h5, h6) {
  color: var(--heading-fg);
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  letter-spacing: 0;
}
[data-theme] h1 {
  font-weight: var(--heading-1-weight);
  text-wrap: balance;
}
[data-theme] h2 {
  font-weight: var(--heading-2-weight);
  text-wrap: balance;
}
[data-theme] h3 {
  font-weight: var(--heading-3-weight);
}
[data-theme] :is(.tracking-tight, .tracking-\[0\.12em\]) {
  letter-spacing: 0;
}
[data-theme] :is(p, li).text-\[var\(--muted\)\],
[data-theme] p.text-\[var\(--muted\)\],
[data-theme] .ui-text--muted {
  color: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--fg) 72%, var(--bg));
  }
}
[data-theme] main > section:first-of-type {
  position: relative;
  background: linear-gradient(
      118deg,
      color-mix(in srgb, white 20%, transparent) 0%,
      color-mix(in srgb, white 8%, transparent) 30%,
      transparent 60%
    ),
    var(--inversion-bg);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
      118deg,
      color-mix(in srgb, white 20%, transparent) 0%,
      color-mix(in srgb, white 8%, transparent) 30%,
      transparent 60%
    ),
    color-mix(in srgb, var(--inversion-bg) 86%, white 14%);
  }
  color: var(--inversion-fg);
  border-bottom: 3px solid var(--impact);
  width: 100%;
}
[data-theme] main > section:first-of-type > * {
  position: relative;
}
[data-theme] main > section:first-of-type :is(h1, h2, h3) {
  color: var(--inversion-fg);
}
[data-theme] main > section:first-of-type :is(p, li).text-\[var\(--muted\)\],
[data-theme] main > section:first-of-type p.text-\[var\(--muted\)\],
[data-theme] main > section:first-of-type .ui-text--muted {
  color: white;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, white 78%, var(--inversion-bg));
  }
}
[data-theme] main > section:first-of-type .ui-meta-label {
  color: var(--impact);
}
[data-theme] main > section:first-of-type .ui-editorial-frame {
  border-color: var(--impact);
  box-shadow: 6px 6px 0 var(--impact);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 6px 6px 0 color-mix(in srgb, var(--impact) 60%, transparent);
  }
}
[data-theme] main > section:first-of-type .ui-button-link--secondary {
  background: transparent;
  color: var(--inversion-fg);
  border-color: var(--inversion-fg);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--inversion-fg) 72%, transparent);
  }
}
[data-theme] main > section:first-of-type > div {
  max-width: none;
}
.ui-card,
.ui-proof-card,
.ui-context-panel,
.ui-about-preview-copy,
.ui-about-focus,
.ui-method-copy,
.ui-method-card,
.ui-side-card,
.ui-editorial-frame,
.ui-cta-panel {
  color: var(--fg);
}
.ui-card :is(h1, h2, h3, h4, h5, h6),
.ui-proof-card :is(h1, h2, h3, h4, h5, h6),
.ui-context-panel :is(h1, h2, h3, h4, h5, h6),
.ui-about-preview-copy :is(h1, h2, h3, h4, h5, h6),
.ui-about-focus :is(h1, h2, h3, h4, h5, h6),
.ui-method-copy :is(h1, h2, h3, h4, h5, h6),
.ui-method-card :is(h1, h2, h3, h4, h5, h6),
.ui-side-card :is(h1, h2, h3, h4, h5, h6),
.ui-cta-panel :is(h1, h2, h3, h4, h5, h6) {
  color: var(--heading-fg);
}
.ui-card :is(p, li, .ui-text--muted),
.ui-proof-card :is(p, li, .ui-text--muted),
.ui-context-panel :is(p, li, .ui-text--muted),
.ui-about-preview-copy :is(p, li, .ui-text--muted),
.ui-about-focus :is(p, li, .ui-text--muted),
.ui-method-copy :is(p, li, .ui-text--muted),
.ui-method-card :is(p, li, .ui-text--muted),
.ui-side-card :is(p, li, .ui-text--muted) {
  color: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--fg) 74%, var(--bg));
  }
}
.ui-hero-copy {
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.ui-hero-title {
  max-width: 16ch;
  margin: 0;
  font-size: 2.35rem;
  line-height: 1.04;
  letter-spacing: 0;
  font-weight: var(--heading-1-weight);
}
.ui-hero-text {
  max-width: 56ch;
  margin: 0;
  font-size: 1rem;
  line-height: 1.66;
}
.ui-home-hero-grid {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}
.ui-home-hero-title {
  max-width: 17ch;
}
.ui-home-hero-actions {
  flex-direction: row;
  padding-top: 0.25rem;
}
.ui-home-hero-actions .ui-button-link {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}
.ui-home-hero-points {
  display: grid;
  gap: 0.55rem;
  max-width: 48rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ui-home-hero-points li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--fg) 74%, var(--bg));
  }
}
.ui-home-hero-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 9999px;
  background: var(--impact);
}
.ui-home-hero-visual {
  display: block;
}
.page-home {
  --section-pad-y: 3rem;
}
.page-home .ui-home-hero-grid {
  gap: 1.75rem;
}
.page-home .ui-home-hero-title {
  max-width: 15ch;
  font-size: 2.75rem;
  line-height: 0.98;
}
.page-home .ui-hero-text {
  max-width: 52ch;
  font-size: 1.08rem;
  line-height: 1.62;
}
.page-home .ui-home-hero-visual .ui-editorial-frame {
  max-height: 14rem;
  box-shadow: 0 20px 44px -34px var(--accent),
    8px 8px 0 var(--impact);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 20px 44px -34px color-mix(in srgb, var(--accent) 56%, transparent),
    8px 8px 0 color-mix(in srgb, var(--impact) 20%, transparent);
  }
}
@media (min-width: 640px) {
  .ui-home-hero-points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
  }
}
@media (min-width: 1024px) {
  .ui-hero-title {
    font-size: 3.25rem;
    line-height: 1;
  }
  .ui-hero-text {
    font-size: 1.08rem;
  }
  .ui-home-hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(19rem, 0.78fr);
    gap: 3rem;
  }
  .ui-home-hero-visual {
    padding-top: 0.35rem;
  }
  .page-home {
    --section-pad-y: 6rem;
  }
  .page-home .ui-home-hero-title {
    font-size: 4.35rem;
    line-height: 0.95;
  }
  .page-home .ui-home-hero-visual .ui-editorial-frame {
    max-height: none;
  }
}
[data-theme] main > section:first-of-type .ui-hero-copy {
  background: transparent;
  color: var(--inversion-fg);
}
[data-theme] main > section:first-of-type .ui-hero-copy :is(h1, h2, h3) {
  color: var(--inversion-fg);
}
[data-theme]
  main
  > section:first-of-type
  .ui-hero-copy
  :is(p, li, .ui-text--muted) {
  color: white;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, white 78%, var(--inversion-bg));
  }
}
[data-theme="engineering"] main > section:first-of-type {
  background: var(--bg);
  color: var(--fg);
  border-bottom-color: var(--accent);
}
[data-theme="production"] main > section:first-of-type {
  background: var(--bg);
  color: var(--fg);
  border-bottom-color: var(--accent);
}
[data-theme="neutral"] main > section:first-of-type {
  background: linear-gradient(
      145deg,
      var(--surface-2) 0%,
      transparent 34%,
      var(--accent) 68%,
      var(--impact) 100%
    ),
    var(--bg);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
      145deg,
      color-mix(in srgb, var(--surface-2) 54%, transparent) 0%,
      transparent 34%,
      color-mix(in srgb, var(--accent) 7%, transparent) 68%,
      color-mix(in srgb, var(--impact) 9%, transparent) 100%
    ),
    var(--bg);
  }
  color: var(--fg);
  border-bottom-color: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom-color: color-mix(in srgb, var(--fg) 16%, var(--bg));
  }
}
[data-theme="neutral"] main > section:first-of-type :is(h1, h2, h3) {
  color: var(--heading-fg);
}
[data-theme="production"] main > section:first-of-type :is(h1, h2, h3) {
  color: var(--heading-fg);
}
[data-theme="neutral"]
  main
  > section:first-of-type
  :is(p, li).text-\[var\(--muted\)\],
[data-theme="neutral"] main > section:first-of-type p.text-\[var\(--muted\)\],
[data-theme="neutral"] main > section:first-of-type .ui-text--muted {
  color: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--fg) 82%, var(--bg));
  }
}
[data-theme="production"]
  main
  > section:first-of-type
  :is(p, li).text-\[var\(--muted\)\],
[data-theme="production"]
  main
  > section:first-of-type
  p.text-\[var\(--muted\)\],
[data-theme="production"] main > section:first-of-type .ui-text--muted {
  color: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--fg) 82%, var(--bg));
  }
}
[data-theme="neutral"] main > section:first-of-type .ui-meta-label {
  color: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--fg) 74%, var(--bg));
  }
}
[data-theme="production"] main > section:first-of-type .ui-meta-label {
  color: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--fg) 74%, var(--bg));
  }
}
[data-theme="neutral"] main > section:first-of-type .ui-editorial-frame {
  border-color: var(--border);
  box-shadow: 4px 4px 0 var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 4px 4px 0 color-mix(in srgb, var(--fg) 12%, transparent);
  }
}
[data-theme="production"] main > section:first-of-type .ui-editorial-frame {
  border-color: var(--border);
  box-shadow: 4px 4px 0 var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 4px 4px 0 color-mix(in srgb, var(--fg) 12%, transparent);
  }
}
[data-theme="neutral"] main > section:first-of-type .ui-button-link--secondary {
  background: var(--surface-elevated);
  color: var(--button-fg-secondary);
  border-color: var(--border-strong);
}
[data-theme="production"]
  main
  > section:first-of-type
  .ui-button-link--secondary {
  background: var(--surface-elevated);
  color: var(--button-fg-secondary);
  border-color: var(--border-strong);
}
[data-theme="engineering"] .page-engineering-project > section:first-of-type,
[data-theme="production"] .page-production-project > section:first-of-type {
  background: var(--bg);
  color: var(--fg);
  border-bottom-color: var(--impact);
}
[data-theme="engineering"]
  .page-engineering-project
  > section:first-of-type
  :is(h1, h2, h3),
[data-theme="production"]
  .page-production-project
  > section:first-of-type
  :is(h1, h2, h3) {
  color: var(--heading-fg);
}
[data-theme="engineering"]
  .page-engineering-project
  > section:first-of-type
  :is(p, li).text-\[var\(--muted\)\],
[data-theme="engineering"]
  .page-engineering-project
  > section:first-of-type
  p.text-\[var\(--muted\)\],
[data-theme="engineering"]
  .page-engineering-project
  > section:first-of-type
  .ui-text--muted,
[data-theme="production"]
  .page-production-project
  > section:first-of-type
  :is(p, li).text-\[var\(--muted\)\],
[data-theme="production"]
  .page-production-project
  > section:first-of-type
  p.text-\[var\(--muted\)\],
[data-theme="production"]
  .page-production-project
  > section:first-of-type
  .ui-text--muted {
  color: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--fg) 82%, var(--bg));
  }
}
[data-theme="engineering"]
  .page-engineering-project
  > section:first-of-type
  .ui-meta-label,
[data-theme="production"]
  .page-production-project
  > section:first-of-type
  .ui-meta-label {
  color: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--fg) 74%, var(--bg));
  }
}
[data-theme="engineering"]
  .page-engineering-project
  > section:first-of-type
  .ui-editorial-frame,
[data-theme="production"]
  .page-production-project
  > section:first-of-type
  .ui-editorial-frame {
  border-color: var(--border);
  box-shadow: 6px 6px 0 var(--impact);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 6px 6px 0 color-mix(in srgb, var(--impact) 18%, transparent);
  }
}
[data-theme="engineering"]
  .page-engineering-project
  > section:first-of-type
  .ui-button-link--secondary,
[data-theme="production"]
  .page-production-project
  > section:first-of-type
  .ui-button-link--secondary {
  background: var(--surface-elevated);
  color: var(--button-fg-secondary);
  border-color: var(--border-strong);
}
[data-theme="neutral"] .ui-meta-label {
  color: var(--muted);
  font-weight: 620;
  letter-spacing: 0;
}
[data-theme="neutral"] .ui-button-link {
  border-radius: var(--radius-button);
  text-transform: none;
  letter-spacing: 0;
}
[data-theme="neutral"] .ui-button-link--primary {
  box-shadow: none;
}
@media (hover: hover) {
  [data-theme="neutral"] .ui-button-link--primary:hover {
    box-shadow: none;
  }
}
[data-theme="neutral"] .ui-button-link--secondary {
  box-shadow: none;
}
[data-theme="neutral"] .page-packages > section:first-of-type {
  background: var(--inversion-bg);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--inversion-bg) 82%, white 18%);
  }
  color: var(--inversion-fg);
  border-bottom: 3px solid var(--impact);
}
[data-theme="neutral"] .page-resume > section:first-of-type {
  border-bottom: 0;
}
[data-theme="neutral"] .page-packages > section:first-of-type :is(h1, h2, h3) {
  color: var(--inversion-fg);
}
[data-theme="neutral"]
  .page-packages
  > section:first-of-type
  :is(p, li).text-\[var\(--muted\)\],
[data-theme="neutral"]
  .page-packages
  > section:first-of-type
  p.text-\[var\(--muted\)\],
[data-theme="neutral"] .page-packages > section:first-of-type .ui-text--muted {
  color: white;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, white 88%, var(--inversion-bg));
  }
}
[data-theme="neutral"] .page-packages > section:first-of-type .ui-meta-label {
  color: white;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, white 86%, var(--impact));
  }
}
[data-theme="neutral"]
  .page-packages
  > section:first-of-type
  .ui-editorial-frame {
  border-color: var(--impact);
  box-shadow: 6px 6px 0 var(--impact);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 6px 6px 0 color-mix(in srgb, var(--impact) 60%, transparent);
  }
}
[data-theme="neutral"] .ui-package-card--tone-1 {
  background: linear-gradient(
    150deg,
    color-mix(in srgb, #f4f4f5 86%, #ffffff) 0%,
    color-mix(in srgb, #fafafa 92%, #ffffff) 100%
  );
}
[data-theme="neutral"] .ui-package-card--tone-2 {
  background: linear-gradient(
    150deg,
    color-mix(in srgb, #e9e9ec 84%, #ffffff) 0%,
    color-mix(in srgb, #f4f4f5 90%, #ffffff) 100%
  );
}
[data-theme="neutral"] .ui-package-card--tone-3 {
  background: linear-gradient(
    150deg,
    color-mix(in srgb, #dddddf 82%, #ffffff) 0%,
    color-mix(in srgb, #eeeeef 88%, #ffffff) 100%
  );
}
[data-theme="neutral"] .ui-package-value-intro {
  padding: 1rem 1.1rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-2);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--surface-2) 56%, #ffffff);
  }
}
[data-theme="neutral"] .ui-package-value-card {
  padding: 1rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background: linear-gradient(
    150deg,
    color-mix(in srgb, #ffffff 88%, #d1d5db) 0%,
    color-mix(in srgb, #ffffff 96%, #e5e7eb) 100%
  );
  box-shadow: 0 12px 24px -22px rgb(15 23 42 / 0.22);
}
[data-theme="neutral"] .ui-package-value-graphic {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
[data-theme="neutral"] .ui-package-value-graphic span {
  display: block;
  border-radius: 9999px;
}
[data-theme="neutral"] .ui-package-value-graphic span:nth-child(1) {
  width: 1.8rem;
  height: 0.35rem;
  background: #111827;
}
[data-theme="neutral"] .ui-package-value-graphic span:nth-child(2) {
  width: 0.8rem;
  height: 0.35rem;
  background: #6b7280;
}
[data-theme="neutral"] .ui-package-value-graphic span:nth-child(3) {
  width: 2.6rem;
  height: 0.5rem;
  background: #d1d5db;
}
[data-theme="neutral"] .page-home .ui-proof-card--engineering {
  background: var(--surface-elevated);
  border-color: var(--border-default);
  border-left-width: 0.3rem;
  border-left-color: var(--accent);
}
[data-theme="neutral"] .page-home .ui-proof-card--production {
  background: var(--surface-elevated);
  border-color: var(--border-default);
  border-left-width: 0.3rem;
  border-left-color: var(--impact);
}
[data-color-mode="light"]
  [data-theme="neutral"]
  .page-home
  .ui-proof-card--engineering {
  background: linear-gradient(
    150deg,
    #ffffff 0%,
    var(--surface-elevated) 100%
  );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
    150deg,
    color-mix(in srgb, #ffffff 92%, var(--accent-soft)) 0%,
    color-mix(in srgb, var(--surface-elevated) 96%, var(--accent)) 100%
  );
  }
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 20%, var(--border-default));
  }
}
[data-color-mode="light"]
  [data-theme="neutral"]
  .page-home
  .ui-proof-card--production {
  background: linear-gradient(
    150deg,
    color-mix(in srgb, #ffffff 92%, #ffe8ec) 0%,
    var(--surface-elevated) 100%
  );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
    150deg,
    color-mix(in srgb, #ffffff 92%, #ffe8ec) 0%,
    color-mix(in srgb, var(--surface-elevated) 95%, var(--impact)) 100%
  );
  }
  border-color: var(--impact);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--impact) 22%, var(--border-default));
  }
}
[data-color-mode="dark"]
  [data-theme="neutral"]
  .page-home
  .ui-proof-card--engineering {
  background: linear-gradient(
    150deg,
    var(--surface-elevated) 0%,
    var(--surface-elevated) 100%
  );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--surface-elevated) 88%, var(--accent)) 0%,
    color-mix(in srgb, var(--surface-elevated) 96%, var(--bg)) 100%
  );
  }
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border-default));
  }
}
[data-color-mode="dark"]
  [data-theme="neutral"]
  .page-home
  .ui-proof-card--production {
  background: linear-gradient(
    150deg,
    var(--surface-elevated) 0%,
    var(--surface-elevated) 100%
  );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--surface-elevated) 88%, var(--impact)) 0%,
    color-mix(in srgb, var(--surface-elevated) 96%, var(--bg)) 100%
  );
  }
  border-color: var(--impact);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--impact) 30%, var(--border-default));
  }
}
[data-theme="neutral"] .ui-proof-card {
  border-width: 1px;
  border-color: var(--border);
  border-radius: var(--radius-card);
  box-shadow: none;
}
[data-theme="neutral"] .ui-proof-card-graphic,
[data-theme="neutral"] .ui-proof-impact {
  display: none;
}
@media (hover: hover) {
  [data-theme="neutral"] .ui-proof-card:hover {
    transform: none;
    border-color: var(--border-strong);
    background: var(--surface-interactive-hover);
    box-shadow: none;
  }
  [data-color-mode="light"]
    [data-theme="neutral"]
    .page-home
    .ui-proof-card:hover {
    border-color: var(--accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--accent) 30%, var(--border-strong));
    }
    background: linear-gradient(
      150deg,
      #ffffff 0%,
      var(--surface-elevated) 100%
    );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(
      150deg,
      color-mix(in srgb, #ffffff 88%, var(--accent-soft)) 0%,
      color-mix(in srgb, var(--surface-elevated) 92%, var(--accent)) 100%
    );
    }
    box-shadow: 0 16px 34px -28px
      var(--accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 16px 34px -28px
      color-mix(in srgb, var(--accent) 34%, transparent);
    }
  }
  [data-color-mode="light"]
    [data-theme="neutral"]
    .page-home
    .ui-proof-card--production:hover {
    border-color: var(--impact);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--impact) 34%, var(--border-strong));
    }
    background: linear-gradient(
      150deg,
      color-mix(in srgb, #ffffff 88%, #ffe8ec) 0%,
      var(--surface-elevated) 100%
    );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(
      150deg,
      color-mix(in srgb, #ffffff 88%, #ffe8ec) 0%,
      color-mix(in srgb, var(--surface-elevated) 91%, var(--impact)) 100%
    );
    }
    box-shadow: 0 16px 34px -28px
      var(--impact);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 16px 34px -28px
      color-mix(in srgb, var(--impact) 34%, transparent);
    }
  }
  [data-color-mode="dark"]
    [data-theme="neutral"]
    .page-home
    .ui-proof-card:hover {
    border-color: var(--accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--accent) 44%, var(--border-strong));
    }
    background: linear-gradient(
      150deg,
      var(--surface-elevated) 0%,
      var(--surface-elevated) 100%
    );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(
      150deg,
      color-mix(in srgb, var(--surface-elevated) 82%, var(--accent)) 0%,
      color-mix(in srgb, var(--surface-elevated) 94%, var(--bg)) 100%
    );
    }
    box-shadow: 0 16px 34px -28px
      var(--accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 16px 34px -28px
      color-mix(in srgb, var(--accent) 44%, transparent);
    }
  }
  [data-color-mode="dark"]
    [data-theme="neutral"]
    .page-home
    .ui-proof-card--production:hover {
    border-color: var(--impact);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--impact) 44%, var(--border-strong));
    }
    background: linear-gradient(
      150deg,
      var(--surface-elevated) 0%,
      var(--surface-elevated) 100%
    );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(
      150deg,
      color-mix(in srgb, var(--surface-elevated) 82%, var(--impact)) 0%,
      color-mix(in srgb, var(--surface-elevated) 94%, var(--bg)) 100%
    );
    }
    box-shadow: 0 16px 34px -28px
      var(--impact);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 16px 34px -28px
      color-mix(in srgb, var(--impact) 44%, transparent);
    }
  }
}
[data-theme="neutral"] .ui-about-preview-copy {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
[data-theme="neutral"] .ui-editorial-frame {
  border-width: 1px;
  border-color: var(--border);
  border-radius: var(--radius-card);
  box-shadow: 0 20px 38px -30px var(--card-glow);
}
[data-theme="neutral"] .ui-cta-panel {
  border-width: 1px;
  border-color: var(--border);
  border-radius: var(--radius-card);
  box-shadow: none;
}
[data-theme="neutral"] .ui-cta-panel::before {
  display: none;
}
[data-theme="neutral"] .page-home #home-cta {
  background: var(--inversion-bg);
  color: var(--inversion-fg);
  border-color: var(--inversion-bg);
  box-shadow: 0 22px 46px -34px
    var(--inversion-bg);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 22px 46px -34px
    color-mix(in srgb, var(--inversion-bg) 56%, transparent);
  }
}
[data-theme="neutral"] .page-home #home-cta :is(h1, h2, h3, h4, h5, h6),
[data-theme="neutral"] .page-home #home-cta .ui-cta-title {
  color: var(--inversion-fg);
}
[data-theme="neutral"] .page-home #home-cta .ui-meta-label {
  color: white;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, white 78%, var(--impact));
  }
}
[data-theme="neutral"] .page-home #home-cta :is(p, li).text-\[var\(--muted\)\],
[data-theme="neutral"] .page-home #home-cta .ui-text--muted,
[data-theme="neutral"] .page-home #home-cta .ui-cta-text {
  color: white;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, white 82%, var(--inversion-bg));
  }
}
[data-theme="neutral"] .page-home #home-cta .ui-button-link--primary {
  background: var(--surface-3);
  border-color: var(--surface-3);
  color: var(--fg);
}
[data-theme="neutral"] .page-home #home-cta .ui-button-link--secondary {
  background: transparent;
  border-color: color-mix(in srgb, white 70%, transparent);
  color: var(--inversion-fg);
}
[data-theme="neutral"] .ui-card {
  border-width: 1px;
}
[data-theme="neutral"] .ui-side-card--engineering {
  --side-accent: var(--accent);
  --side-background: linear-gradient(
    150deg,
    var(--accent) 0%,
    var(--accent) 100%
  );
  @supports (color: color-mix(in lab, red, red)) {
    --side-background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--accent) 13%, var(--surface-3)) 0%,
    color-mix(in srgb, var(--accent) 5%, var(--surface-3)) 100%
  );
  }
  --side-heading: var(--heading-fg);
  --side-text: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    --side-text: color-mix(in srgb, var(--fg) 76%, var(--bg));
  }
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 36%, var(--border-default));
  }
  border-left-width: 0.3rem;
  border-left-color: var(--accent);
  box-shadow: none;
}
[data-theme="neutral"] .ui-side-card--production {
  --side-accent: var(--impact);
  --side-background: linear-gradient(
    150deg,
    var(--impact) 0%,
    var(--impact) 100%
  );
  @supports (color: color-mix(in lab, red, red)) {
    --side-background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--impact) 13%, var(--surface-3)) 0%,
    color-mix(in srgb, var(--impact) 5%, var(--surface-3)) 100%
  );
  }
  --side-heading: var(--heading-fg);
  --side-text: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    --side-text: color-mix(in srgb, var(--fg) 76%, var(--bg));
  }
  border-color: var(--impact);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--impact) 38%, var(--border-default));
  }
  border-left-width: 0.3rem;
  border-left-color: var(--impact);
  box-shadow: none;
}
[data-theme="neutral"] .ui-side-card::before {
  opacity: 1;
}
[data-theme="neutral"] .ui-side-card .ui-link-action,
[data-theme="neutral"] .ui-side-card .ui-link-action:visited {
  color: var(--side-accent);
}
@media (hover: hover) {
  [data-theme="neutral"] .ui-side-card.ui-card--interactive:hover {
    border-color: var(--side-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(
      in srgb,
      var(--side-accent) 46%,
      var(--border-default)
    );
    }
    box-shadow: none;
  }
}
[data-theme="engineering"] main > section:first-of-type :is(h1, h2, h3) {
  color: var(--heading-fg);
}
[data-theme="engineering"]
  main
  > section:first-of-type
  :is(p, li).text-\[var\(--muted\)\],
[data-theme="engineering"]
  main
  > section:first-of-type
  p.text-\[var\(--muted\)\],
[data-theme="engineering"] main > section:first-of-type .ui-text--muted {
  color: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--fg) 82%, var(--bg));
  }
}
[data-theme="engineering"] main > section:first-of-type .ui-meta-label {
  color: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--fg) 88%, var(--bg));
  }
}
[data-theme="neutral"] main > section:first-of-type .ui-hero-copy,
[data-theme="engineering"] main > section:first-of-type .ui-hero-copy {
  color: var(--fg);
}
[data-theme="production"] main > section:first-of-type .ui-hero-copy {
  color: var(--fg);
}
[data-theme="neutral"]
  main
  > section:first-of-type
  .ui-hero-copy
  :is(h1, h2, h3),
[data-theme="engineering"]
  main
  > section:first-of-type
  .ui-hero-copy
  :is(h1, h2, h3) {
  color: var(--heading-fg);
}
[data-theme="production"]
  main
  > section:first-of-type
  .ui-hero-copy
  :is(h1, h2, h3) {
  color: var(--heading-fg);
}
[data-theme="neutral"]
  main
  > section:first-of-type
  .ui-hero-copy
  :is(p, li, .ui-text--muted),
[data-theme="engineering"]
  main
  > section:first-of-type
  .ui-hero-copy
  :is(p, li, .ui-text--muted) {
  color: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--fg) 82%, var(--bg));
  }
}
[data-theme="production"]
  main
  > section:first-of-type
  .ui-hero-copy
  :is(p, li, .ui-text--muted) {
  color: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--fg) 82%, var(--bg));
  }
}
[data-theme="neutral"] .page-packages > section:first-of-type .ui-hero-copy {
  color: var(--inversion-fg);
}
[data-theme="neutral"]
  .page-packages
  > section:first-of-type
  .ui-hero-copy
  :is(h1, h2, h3) {
  color: #ffffff;
}
[data-theme="neutral"]
  .page-packages
  > section:first-of-type
  .ui-hero-copy
  :is(p, li, .ui-text--muted),
[data-theme="neutral"]
  .page-packages
  > section:first-of-type
  :is(p, li).text-\[var\(--muted\)\],
[data-theme="neutral"]
  .page-packages
  > section:first-of-type
  p.text-\[var\(--muted\)\],
[data-theme="neutral"] .page-packages > section:first-of-type .ui-text--muted {
  color: #8f97a5;
}
[data-theme="neutral"] .page-packages > section:first-of-type .ui-meta-label {
  color: #7b8493;
}
[data-theme="engineering"]
  main
  > section:first-of-type
  .ui-button-link--secondary {
  background: var(--surface-elevated);
  color: var(--button-fg-secondary);
  border-color: var(--border-strong);
}
.ui-cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--button-gap);
}
.ui-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}
.ui-cta-actions .ui-button-link {
  width: 100%;
}
.page-home .ui-home-hero-actions {
  flex-direction: row;
}
.page-home .ui-home-hero-actions .ui-button-link {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}
.page-home .ui-home-hero-visual .ui-editorial-frame {
  width: 100%;
  height: 14rem;
  aspect-ratio: auto;
}
@media (min-width: 1024px) {
  .page-home .ui-home-hero-visual .ui-editorial-frame {
    height: auto;
    aspect-ratio: 6 / 5;
  }
}
.ui-button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  min-height: var(--button-height-md);
  padding-inline: var(--button-pad-x);
  border: 1px solid var(--button-border);
  border-radius: var(--radius-button);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--motion-duration-quick) var(--motion-easing-quick),
    color var(--motion-duration-quick) var(--motion-easing-quick),
    border-color var(--motion-duration-quick) var(--motion-easing-quick),
    box-shadow var(--motion-duration-quick) var(--motion-easing-quick),
    transform var(--motion-duration-quick) var(--motion-easing-quick);
}
@media (prefers-reduced-motion: reduce) {
  .ui-button-link {
    transition: background var(--motion-duration-quick) var(--motion-easing-quick),
      color var(--motion-duration-quick) var(--motion-easing-quick),
      border-color var(--motion-duration-quick) var(--motion-easing-quick),
      box-shadow var(--motion-duration-quick) var(--motion-easing-quick);
  }
}
.ui-button-link--sm {
  min-height: var(--button-height-sm);
}
.ui-button-link--primary {
  background: var(--button-bg-primary);
  color: var(--button-fg-primary);
  border-color: var(--accent);
  text-transform: none;
  letter-spacing: 0;
  box-shadow: 0 10px 28px -18px var(--card-glow);
}
@media (hover: hover) {
  .ui-button-link--primary:hover {
    background: var(--accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--accent) 86%, black);
    }
    border-color: var(--accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--accent) 84%, black);
    }
    box-shadow: 0 14px 30px -18px var(--card-glow);
  }
}
.ui-button-link--secondary {
  background: var(--surface-elevated);
  color: var(--button-fg-secondary);
  border-color: var(--border-strong);
  box-shadow: 0 6px 18px -16px var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 6px 18px -16px color-mix(in srgb, var(--fg) 38%, transparent);
  }
}
@media (hover: hover) {
  .ui-button-link--secondary:hover {
    background: var(--surface-interactive);
    border-color: var(--accent);
    box-shadow: 0 10px 22px -16px
      var(--accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 10px 22px -16px
      color-mix(in srgb, var(--accent) 36%, transparent);
    }
  }
}
.ui-button-link--ghost {
  background: var(--button-bg-ghost);
  color: var(--button-fg-ghost);
  border-color: transparent;
}
@media (hover: hover) {
  .ui-button-link--ghost:hover {
    background: var(--state-hover-surface);
    border-color: var(--state-hover-border);
  }
}
.ui-button-link--primary:active {
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 75%, black);
  }
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 75%, black);
  }
  transform: scale(0.97);
  transition-duration: var(--motion-duration-micro);
  transition-timing-function: var(--motion-easing-ease-out);
}
.ui-button-link--secondary:active,
.ui-button-link--ghost:active {
  transform: scale(0.97);
  transition-duration: var(--motion-duration-micro);
  transition-timing-function: var(--motion-easing-ease-out);
}
.ui-button-link--secondary:active {
  background: var(--state-active-surface);
  border-color: var(--accent);
}
.ui-button-link--ghost:active {
  background: var(--state-active-surface);
  border-color: var(--state-active-border);
}
@media (prefers-reduced-motion: reduce) {
  .ui-button-link--primary:active,
  .ui-button-link--secondary:active,
  .ui-button-link--ghost:active {
    transform: none;
  }
}
.ui-button-link:focus-visible {
  outline: 2px solid var(--state-focus-ring);
  outline-offset: var(--state-focus-ring-offset);
  transition-duration: 0s;
}
.ui-button-link[aria-disabled="true"] {
  opacity: var(--state-disabled-opacity);
  pointer-events: none;
}
.ui-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tag-gap);
}
.ui-tag {
  display: inline-flex;
  align-items: center;
  min-height: var(--tag-height);
  padding-inline: var(--tag-pad-x);
  border: 1px solid var(--tag-border);
  border-radius: var(--tag-radius);
  background: var(--tag-bg);
  color: var(--tag-fg);
  font-size: var(--tag-font-size);
  font-weight: var(--tag-font-weight);
  line-height: 1;
}
.ui-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--meta-gap);
  color: var(--meta-fg);
}
.ui-meta-strong {
  color: var(--meta-strong-fg);
}
.ui-meta-label {
  font-size: 0.8rem;
  font-weight: 780;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--impact);
}
.ui-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-surface);
  box-shadow: var(--card-shadow);
}
.ui-proof-band {
  padding: 0;
}
.ui-proof-intro {
  display: grid;
  gap: 1rem;
}
.ui-proof-grid {
  display: grid;
  gap: 1rem;
}
.ui-proof-footer {
  display: grid;
  gap: 0.9rem;
  padding-top: 0.5rem;
}
.ui-proof-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap-sm);
  min-height: 100%;
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border-default));
  }
  border-radius: var(--radius-card);
  background: var(--surface-elevated);
  box-shadow: 5px 5px 0 var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 5px 5px 0 color-mix(in srgb, var(--accent) 14%, transparent);
  }
  transition: transform var(--motion-duration-quick) var(--motion-easing-quick),
    border-color var(--motion-duration-quick) var(--motion-easing-quick),
    box-shadow var(--motion-duration-quick) var(--motion-easing-quick),
    background var(--motion-duration-quick) var(--motion-easing-quick);
}
.ui-proof-card--graphic {
  isolation: isolate;
}
.ui-proof-card-graphic {
  display: flex;
  gap: 0.35rem;
  align-items: flex-end;
  margin-bottom: 0.65rem;
}
.ui-proof-card-graphic span {
  display: block;
  border-radius: 9999px;
}
.ui-proof-card-graphic span:nth-child(1) {
  width: 1rem;
  height: 2.2rem;
  background: var(--impact);
}
.ui-proof-card-graphic span:nth-child(2) {
  width: 2.4rem;
  height: 0.7rem;
  background: var(--accent);
}
.ui-proof-card-graphic span:nth-child(3) {
  width: 3.8rem;
  height: 1.2rem;
  background: linear-gradient(
      90deg,
      var(--surface-elevated) 0 14%,
      transparent 14% 18%,
      var(--surface-elevated) 18% 32%,
      transparent 32% 36%,
      var(--surface-elevated) 36% 50%,
      transparent 50% 54%,
      var(--surface-elevated) 54% 68%,
      transparent 68% 72%,
      var(--surface-elevated) 72% 86%,
      transparent 86% 100%
    ),
    var(--accent);
}
@media (hover: hover) {
  .ui-proof-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    background: var(--surface-interactive);
    box-shadow: 5px 5px 0 var(--impact),
      0 22px 42px -28px var(--card-glow);
  }
}
.ui-context-panel {
  position: relative;
  border: 2px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 2px solid color-mix(in srgb, var(--accent) 46%, var(--border-default));
  }
  border-radius: 0.5rem;
  background: var(--surface-elevated);
  box-shadow: 0 24px 52px -34px var(--card-glow);
}
.ui-context-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 0.375rem;
  background: var(--impact);
  opacity: 0.9;
}
.ui-editorial-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border-default));
  }
  border-radius: var(--radius-card);
  background: var(--surface-2);
  box-shadow: 0 28px 64px -34px var(--card-glow);
}
.ui-editorial-frame::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 28%;
  background: var(--surface);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--surface) 42%, transparent);
  }
  pointer-events: none;
}
.ui-about-preview-copy {
  padding: 1.25rem;
  border: 2px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 2px solid color-mix(in srgb, var(--accent) 20%, transparent);
  }
  border-radius: 0.5rem;
  background: var(--surface-3);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--surface-3) 92%, white);
  }
  box-shadow: 4px 4px 0 var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 4px 4px 0 color-mix(in srgb, var(--accent) 10%, transparent);
  }
}
.ui-about-focus {
  padding: 1.25rem;
  border: 0;
  border-radius: 0.75rem;
  background: linear-gradient(
    180deg,
    var(--surface-3) 0%,
    var(--surface-1) 100%
  );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-3) 92%, white) 0%,
    color-mix(in srgb, var(--surface-1) 86%, white) 100%
  );
  }
  box-shadow: 4px 4px 0 var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 4px 4px 0 color-mix(in srgb, var(--accent) 10%, transparent);
  }
}
.ui-about-focus h2,
.ui-about-focus p {
  color: var(--fg);
}
.ui-about-focus p.text-\[var\(--muted\)\] {
  color: var(--muted);
}
.ui-about-focus-media {
  min-height: 100%;
}
.ui-about-intro-photo {
  align-self: start;
}
.ui-about-intro--emphasis {
  padding: 1rem 1.1rem;
  border-radius: var(--radius-card);
  background: linear-gradient(
    150deg,
    var(--surface-2) 0%,
    var(--surface-1) 100%
  );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--surface-2) 66%, #ffffff) 0%,
    color-mix(in srgb, var(--surface-1) 88%, #ffffff) 100%
  );
  }
  box-shadow: 0 14px 30px -26px rgb(15 23 42 / 0.3);
}
.ui-about-focus--inverted {
  padding: 1.5rem;
  border: 1px solid var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--fg) 22%, var(--bg));
  }
  border-radius: var(--radius-card);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, #eef1f5 72%, #ffffff) 0%,
    color-mix(in srgb, #e4e8ee 78%, #ffffff) 100%
  );
}
.ui-about-focus--inverted h2 {
  color: var(--heading-fg);
}
.ui-about-focus--inverted p {
  color: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--fg) 78%, var(--bg));
  }
}
.ui-about-focus--inverted .ui-about-focus-media {
  border-color: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--fg) 22%, var(--bg));
  }
  box-shadow: 0 18px 34px -26px rgb(15 23 42 / 0.28);
}
.ui-about-panel {
  padding: 1.25rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--surface-elevated);
}
.ui-about-panel--principles {
  border-left: 0.35rem solid var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    border-left: 0.35rem solid color-mix(in srgb, var(--fg) 22%, var(--bg));
  }
}
.ui-about-principle-card {
  padding: 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-2);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--surface-2) 72%, #ffffff);
  }
}
.ui-about-panel--split {
  border-left: 0.35rem solid var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    border-left: 0.35rem solid color-mix(in srgb, var(--fg) 22%, var(--bg));
  }
}
.ui-about-split-card {
  background: var(--surface);
}
.ui-about-split-card--engineering {
  background: linear-gradient(
    150deg,
    var(--accent) 0%,
    var(--accent) 100%
  );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--accent) 12%, #ffffff) 0%,
    color-mix(in srgb, var(--accent) 5%, #ffffff) 100%
  );
  }
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 36%, var(--border-default));
  }
}
.ui-about-split-card--production {
  background: linear-gradient(
    150deg,
    var(--impact) 0%,
    var(--impact) 100%
  );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--impact) 14%, #ffffff) 0%,
    color-mix(in srgb, var(--impact) 6%, #ffffff) 100%
  );
  }
  border-color: var(--impact);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--impact) 38%, var(--border-default));
  }
}
[data-color-mode="dark"] .ui-about-split-card {
  color: var(--fg);
}
[data-color-mode="dark"] .ui-about-split-card h3 {
  color: var(--heading-fg);
}
[data-color-mode="dark"] .ui-about-split-card p.text-\[var\(--muted\)\] {
  color: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--fg) 76%, var(--bg));
  }
}
[data-color-mode="dark"] .ui-about-split-card--engineering {
  background: linear-gradient(
    150deg,
    var(--surface-elevated) 0%,
    var(--surface-elevated) 100%
  );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--surface-elevated) 86%, var(--accent)) 0%,
    color-mix(in srgb, var(--surface-elevated) 96%, var(--bg)) 100%
  );
  }
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border-default));
  }
}
[data-color-mode="dark"] .ui-about-split-card--production {
  background: linear-gradient(
    150deg,
    var(--surface-elevated) 0%,
    var(--surface-elevated) 100%
  );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--surface-elevated) 86%, var(--impact)) 0%,
    color-mix(in srgb, var(--surface-elevated) 96%, var(--bg)) 100%
  );
  }
  border-color: var(--impact);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--impact) 34%, var(--border-default));
  }
}
.ui-about-panel--next {
  background: var(--surface-2);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--surface-2) 72%, #ffffff);
  }
}
[data-theme="neutral"] .ui-resume-meta-band {
  padding: 0.875rem 0;
}
[data-theme="neutral"] .ui-resume-meta-band.ui-resume-cue--mixed {
  padding-left: 0.95rem;
  border-left: 0.3rem solid var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    border-left: 0.3rem solid color-mix(in srgb, var(--fg) 24%, var(--bg));
  }
}
[data-theme="neutral"] .ui-resume-section {
  padding-left: 0.95rem;
  border-left: 0.3rem solid var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    border-left: 0.3rem solid color-mix(in srgb, var(--fg) 22%, var(--bg));
  }
}
[data-theme="neutral"] .ui-resume-unit {
  border-left-width: 0.3rem;
}
[data-theme="neutral"] .ui-resume-cue--engineering {
  border-left-color: var(--accent);
}
[data-theme="neutral"] .ui-resume-cue--production {
  border-left-color: var(--impact);
}
[data-theme="neutral"] .ui-resume-cue--mixed {
  border-left-color: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    border-left-color: color-mix(in srgb, var(--fg) 24%, var(--bg));
  }
}
[data-theme="neutral"] .ui-resume-projects-panel {
  border-width: 0;
  background: var(--surface-elevated);
  box-shadow: none;
}
[data-theme="neutral"] .page-resume .ui-context-panel {
  border-width: 0;
}
[data-theme="neutral"] .ui-resume-projects-panel::before {
  display: none;
}
[data-theme="neutral"] .page-contact .ui-contact-teardown-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 1.25rem;
  border: 1px solid #9ca3af;
  border-left: 0.35rem solid #f1f5f9;
  border-radius: var(--radius-card);
  background: linear-gradient(150deg, #5b5b67 0%, #4f4f5a 100%);
}
[data-theme="neutral"] .page-contact .ui-contact-teardown-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    118deg,
    color-mix(in srgb, white 32%, transparent) 0%,
    color-mix(in srgb, white 10%, transparent) 28%,
    transparent 58%
  );
  pointer-events: none;
  z-index: 0;
}
[data-theme="neutral"] .page-contact .ui-contact-teardown-band > * {
  position: relative;
  z-index: 1;
}
:is(
  .ui-cta-panel,
  .ui-context-panel,
  .ui-about-panel,
  .ui-proof-card,
  .ui-side-card,
  .ui-method-card,
  .ui-card--interactive
) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
:is(
  .ui-cta-panel,
  .ui-context-panel,
  .ui-about-panel,
  .ui-proof-card,
  .ui-side-card,
  .ui-method-card,
  .ui-card--interactive
)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    118deg,
    color-mix(in srgb, white 16%, transparent) 0%,
    color-mix(in srgb, white 6%, transparent) 30%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 0;
}
:is(
    .ui-cta-panel,
    .ui-context-panel,
    .ui-about-panel,
    .ui-proof-card,
    .ui-side-card,
    .ui-method-card,
    .ui-card--interactive
  )
  > * {
  position: relative;
  z-index: 1;
}
[data-theme="neutral"]
  .page-contact
  .ui-contact-teardown-band
  :is(h1, h2, h3, h4, h5, h6) {
  color: #f9fafb;
}
[data-theme="neutral"]
  .page-contact
  .ui-contact-teardown-band
  :is(p, li).text-\[var\(--muted\)\],
[data-theme="neutral"] .page-contact .ui-contact-teardown-band .ui-text--muted,
[data-theme="neutral"] .page-contact .ui-contact-teardown-band p {
  color: color-mix(in srgb, white 90%, #4f4f5a);
}
[data-theme="neutral"] .page-contact .ui-contact-teardown-band .ui-meta-label {
  color: color-mix(in srgb, white 93%, #4f4f5a);
}
[data-theme="neutral"]
  .page-contact
  .ui-contact-teardown-band
  :is(input, select, textarea) {
  background: #34343d;
  border-color: #6b7280;
  color: #f3f4f6;
}
[data-theme="neutral"]
  .page-contact
  .ui-contact-teardown-band
  :is(input, textarea)::placeholder {
  color: #a1a1aa;
}
[data-theme="neutral"] .page-contact .ui-contact-teardown-band label {
  color: #e5e7eb !important;
}
[data-theme="neutral"]
  .page-contact
  .ui-contact-teardown-band
  button[type="submit"] {
  background: #ffffff;
  border-color: #ffffff;
  color: #111111;
}
[data-theme="neutral"]
  .page-contact
  .ui-contact-teardown-band
  button[type="submit"]:hover {
  background: #f3f4f6;
  border-color: #f3f4f6;
}
[data-theme="neutral"] .page-contact .ui-context-panel {
  overflow: visible;
  isolation: auto;
}
.contact-inquiry-modal::backdrop {
  background: var(--bg);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg) 95%, transparent);
  }
  backdrop-filter: blur(4px);
}
[data-theme="neutral"] #about-next {
  background: var(--inversion-bg);
  color: var(--inversion-fg);
  border-color: var(--inversion-bg);
  box-shadow: 0 20px 42px -34px
    var(--inversion-bg);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 20px 42px -34px
    color-mix(in srgb, var(--inversion-bg) 56%, transparent);
  }
}
[data-theme="neutral"] #about-next :is(h1, h2, h3, h4, h5, h6),
[data-theme="neutral"] #about-next .ui-cta-title {
  color: var(--inversion-fg);
}
[data-theme="neutral"] #about-next .ui-meta-label {
  color: white;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, white 83%, var(--inversion-bg));
  }
}
[data-theme="neutral"] #about-next :is(p, li).text-\[var\(--muted\)\],
[data-theme="neutral"] #about-next .ui-text--muted,
[data-theme="neutral"] #about-next .ui-cta-text {
  color: white;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, white 79%, var(--inversion-bg));
  }
}
[data-theme="neutral"] #about-next .ui-button-link--primary {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--fg);
}
[data-theme="neutral"] #about-next .ui-button-link--secondary {
  background: transparent;
  border-color: color-mix(in srgb, white 70%, transparent);
  color: var(--inversion-fg);
}
[data-theme="neutral"] .page-resume #resume-cta {
  background: var(--inversion-bg);
  color: var(--inversion-fg);
  border-color: var(--inversion-bg);
  box-shadow: 0 20px 42px -34px
    var(--inversion-bg);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 20px 42px -34px
    color-mix(in srgb, var(--inversion-bg) 56%, transparent);
  }
}
[data-theme="neutral"] .page-resume #resume-cta :is(h1, h2, h3, h4, h5, h6),
[data-theme="neutral"] .page-resume #resume-cta .ui-cta-title {
  color: var(--inversion-fg);
}
[data-theme="neutral"] .page-resume #resume-cta .ui-meta-label {
  color: white;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, white 83%, var(--inversion-bg));
  }
}
[data-theme="neutral"]
  .page-resume
  #resume-cta
  :is(p, li).text-\[var\(--muted\)\],
[data-theme="neutral"] .page-resume #resume-cta .ui-text--muted,
[data-theme="neutral"] .page-resume #resume-cta .ui-cta-text {
  color: white;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, white 79%, var(--inversion-bg));
  }
}
[data-theme="neutral"] .page-resume #resume-cta .ui-button-link--primary {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--fg);
}
[data-theme="neutral"] .page-resume #resume-cta .ui-button-link--secondary {
  background: transparent;
  border-color: color-mix(in srgb, white 70%, transparent);
  color: var(--inversion-fg);
}
[data-theme="neutral"] .page-resume #resume-cta .ui-button-link--ghost {
  background: transparent;
  border-color: color-mix(in srgb, white 56%, transparent);
  color: var(--inversion-fg);
}
.ui-method-band {
  position: relative;
  overflow: clip;
  border-top: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
}
.ui-method-band::before,
.ui-method-band::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.ui-method-band::before {
  inset: 0 auto 0 0;
  width: min(22vw, 17rem);
  opacity: 0.95;
}
.ui-method-band::after {
  inset: auto 0 0 auto;
  width: min(26vw, 22rem);
  height: min(28vw, 18rem);
  opacity: 0.9;
}
.ui-method-band--engineering {
  background: linear-gradient(
    180deg,
    var(--surface-2) 0%,
    var(--surface-1) 100%
  );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-2) 92%, white) 0%,
    color-mix(in srgb, var(--surface-1) 88%, white) 100%
  );
  }
}
.ui-method-band--engineering::before {
  background: linear-gradient(
    180deg,
    transparent 0 8%,
    var(--accent) 8% 18%,
    transparent 18% 26%,
    var(--accent) 26% 48%,
    transparent 48% 58%,
    var(--impact) 58% 82%,
    transparent 82% 100%
  );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
    180deg,
    transparent 0 8%,
    color-mix(in srgb, var(--accent) 12%, transparent) 8% 18%,
    transparent 18% 26%,
    color-mix(in srgb, var(--accent) 58%, transparent) 26% 48%,
    transparent 48% 58%,
    color-mix(in srgb, var(--impact) 24%, transparent) 58% 82%,
    transparent 82% 100%
  );
  }
}
.ui-method-band--engineering::after {
  background: linear-gradient(
    135deg,
    transparent 0 24%,
    var(--accent) 24% 42%,
    transparent 42% 100%
  );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
    135deg,
    transparent 0 24%,
    color-mix(in srgb, var(--accent) 10%, transparent) 24% 42%,
    transparent 42% 100%
  );
  }
}
.ui-method-band--production {
  background: linear-gradient(
    180deg,
    var(--surface-3) 0%,
    var(--surface-2) 100%
  );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-3) 18%, var(--surface-1)) 0%,
    color-mix(in srgb, var(--surface-2) 82%, white) 100%
  );
  }
}
.ui-method-band--production::before {
  background: linear-gradient(
    180deg,
    transparent 0 12%,
    var(--impact) 12% 24%,
    transparent 24% 36%,
    var(--accent) 36% 58%,
    transparent 58% 72%,
    var(--impact) 72% 90%,
    transparent 90% 100%
  );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
    180deg,
    transparent 0 12%,
    color-mix(in srgb, var(--impact) 54%, transparent) 12% 24%,
    transparent 24% 36%,
    color-mix(in srgb, var(--accent) 88%, transparent) 36% 58%,
    transparent 58% 72%,
    color-mix(in srgb, var(--impact) 28%, transparent) 72% 90%,
    transparent 90% 100%
  );
  }
}
.ui-method-band--production::after {
  background: linear-gradient(
    135deg,
    transparent 0 26%,
    var(--accent) 26% 44%,
    transparent 44% 100%
  );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
    135deg,
    transparent 0 26%,
    color-mix(in srgb, var(--accent) 7%, transparent) 26% 44%,
    transparent 44% 100%
  );
  }
}
[data-color-mode="light"]
  [data-theme="engineering"]
  .ui-method-band--engineering {
  background: linear-gradient(
    180deg,
    var(--surface-2) 0%,
    var(--surface-1) 100%
  );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-2) 92%, white) 0%,
    color-mix(in srgb, var(--surface-1) 88%, white) 100%
  );
  }
}
[data-color-mode="light"]
  [data-theme="production"]
  .ui-method-band--production {
  background: linear-gradient(
    180deg,
    var(--surface-3) 0%,
    var(--surface-2) 100%
  );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-3) 18%, var(--surface-1)) 0%,
    color-mix(in srgb, var(--surface-2) 82%, white) 100%
  );
  }
}
[data-color-mode="dark"]
  [data-theme="engineering"]
  .ui-method-band--engineering,
[data-color-mode="dark"] [data-theme="production"] .ui-method-band--production {
  background: linear-gradient(
    180deg,
    var(--surface-2) 0%,
    var(--surface-1) 100%
  );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-2) 86%, var(--bg)) 0%,
    color-mix(in srgb, var(--surface-1) 92%, var(--surface-2)) 100%
  );
  }
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border-default));
  }
}
[data-color-mode="dark"]
  [data-theme="engineering"]
  .ui-method-band--engineering::before {
  opacity: 0.7;
}
[data-color-mode="dark"]
  [data-theme="production"]
  .ui-method-band--production::before {
  opacity: 0.64;
}
[data-color-mode="dark"]
  [data-theme="engineering"]
  .ui-method-band--engineering::after,
[data-color-mode="dark"]
  [data-theme="production"]
  .ui-method-band--production::after {
  opacity: 0.52;
}
.ui-method-section {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.ui-method-hero {
  display: grid;
  gap: 1.5rem;
  align-items: end;
}
.ui-method-copy {
  position: relative;
  z-index: 2;
  padding: 1.25rem;
  border: 2px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 2px solid color-mix(in srgb, var(--accent) 18%, transparent);
  }
  border-radius: 0.5rem;
  background: var(--surface-3);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--surface-3) 92%, white);
  }
  box-shadow: 5px 5px 0 var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 5px 5px 0 color-mix(in srgb, var(--accent) 9%, transparent);
  }
}
.ui-method-graphic {
  display: none;
}
.ui-method-grid {
  display: grid;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.ui-method-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 100%;
  padding: 1.25rem;
  border: 2px solid var(--accent);
  border-radius: 0.5rem;
  background: var(--surface-3);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--surface-3) 92%, white);
  }
  box-shadow: 5px 5px 0 var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 5px 5px 0 color-mix(in srgb, var(--accent) 14%, transparent);
  }
}
.ui-method-card--production {
  background: var(--surface-3);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--surface-3) 94%, white);
  }
}
[data-color-mode="light"] .ui-method-copy,
[data-color-mode="light"] .ui-method-card {
  background: var(--surface-3);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--surface-3) 92%, white);
  }
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border-default));
  }
}
[data-color-mode="light"] .ui-method-card--production {
  background: var(--surface-3);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--surface-3) 94%, white);
  }
  border-color: var(--impact);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--impact) 42%, var(--border-default));
  }
}
[data-color-mode="dark"] .ui-method-copy,
[data-color-mode="dark"] .ui-method-card {
  background: var(--surface-elevated);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--surface-elevated) 88%, var(--bg));
  }
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--border-default));
  }
  box-shadow: 5px 5px 0 var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 5px 5px 0 color-mix(in srgb, var(--accent) 18%, transparent);
  }
}
[data-color-mode="dark"] .ui-method-card--production {
  border-color: var(--impact);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--impact) 38%, var(--border-default));
  }
  box-shadow: 5px 5px 0 var(--impact);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 5px 5px 0 color-mix(in srgb, var(--impact) 18%, transparent);
  }
}
[data-color-mode="dark"] .ui-method-index {
  background: var(--surface-2);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--surface-2) 76%, var(--bg));
  }
}
.ui-method-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.ui-method-index {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.25rem 0.65rem;
  border: 2px solid var(--accent);
  border-radius: 9999px;
  background: var(--surface-1);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 760;
  letter-spacing: 0;
}
.ui-method-card-graphic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  width: 4.8rem;
}
.ui-method-card-graphic span {
  display: block;
  background: var(--accent);
}
.ui-method-card-graphic span:nth-child(1) {
  height: 0.7rem;
  border-radius: 9999px;
}
.ui-method-card-graphic span:nth-child(2) {
  height: 1.6rem;
  border-radius: 9999px 9999px 0.2rem 0.2rem;
  background: var(--impact);
}
.ui-method-card-graphic span:nth-child(3) {
  grid-column: 1 / -1;
  height: 1.9rem;
  border-radius: 0.25rem;
  background: linear-gradient(
      90deg,
      var(--surface-3) 0 10%,
      transparent 10% 14%,
      var(--surface-3) 14% 24%,
      transparent 24% 28%,
      var(--surface-3) 28% 38%,
      transparent 38% 42%,
      var(--surface-3) 42% 52%,
      transparent 52% 56%,
      var(--surface-3) 56% 66%,
      transparent 66% 70%,
      var(--surface-3) 70% 80%,
      transparent 80% 84%,
      var(--surface-3) 84% 94%,
      transparent 94% 100%
    ),
    var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
      90deg,
      var(--surface-3) 0 10%,
      transparent 10% 14%,
      var(--surface-3) 14% 24%,
      transparent 24% 28%,
      var(--surface-3) 28% 38%,
      transparent 38% 42%,
      var(--surface-3) 42% 52%,
      transparent 52% 56%,
      var(--surface-3) 56% 66%,
      transparent 66% 70%,
      var(--surface-3) 70% 80%,
      transparent 80% 84%,
      var(--surface-3) 84% 94%,
      transparent 94% 100%
    ),
    color-mix(in srgb, var(--accent) 78%, white);
  }
}
.ui-method-block {
  display: block;
}
.ui-method-line {
  display: block;
  width: 100%;
  height: 0.45rem;
  border-radius: 9999px;
  background: var(--accent);
}
.ui-method-line--short {
  width: 62%;
  background: var(--impact);
}
.ui-method-block--solid {
  height: 4.8rem;
  border-radius: 0.65rem;
  background: var(--accent);
}
.ui-method-block--tall {
  height: 8rem;
  border-radius: 9999px;
  background: var(--impact);
}
.ui-method-block--wide {
  height: 3rem;
  border-radius: 9999px;
  background: var(--accent);
}
.ui-method-block--grid {
  height: 6.6rem;
  border-radius: 0.65rem;
  background: linear-gradient(
      90deg,
      var(--surface-3) 0 11%,
      transparent 11% 16%,
      var(--surface-3) 16% 27%,
      transparent 27% 32%,
      var(--surface-3) 32% 43%,
      transparent 43% 48%,
      var(--surface-3) 48% 59%,
      transparent 59% 64%,
      var(--surface-3) 64% 75%,
      transparent 75% 80%,
      var(--surface-3) 80% 91%,
      transparent 91% 100%
    ),
    linear-gradient(
      180deg,
      transparent 0 13%,
      var(--surface-3) 13% 18%,
      transparent 18% 31%,
      var(--surface-3) 31% 36%,
      transparent 36% 49%,
      var(--surface-3) 49% 54%,
      transparent 54% 67%,
      var(--surface-3) 67% 72%,
      transparent 72% 85%,
      var(--surface-3) 85% 90%,
      transparent 90% 100%
    ),
    var(--impact);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
      90deg,
      var(--surface-3) 0 11%,
      transparent 11% 16%,
      var(--surface-3) 16% 27%,
      transparent 27% 32%,
      var(--surface-3) 32% 43%,
      transparent 43% 48%,
      var(--surface-3) 48% 59%,
      transparent 59% 64%,
      var(--surface-3) 64% 75%,
      transparent 75% 80%,
      var(--surface-3) 80% 91%,
      transparent 91% 100%
    ),
    linear-gradient(
      180deg,
      transparent 0 13%,
      color-mix(in srgb, var(--surface-3) 85%, transparent) 13% 18%,
      transparent 18% 31%,
      color-mix(in srgb, var(--surface-3) 85%, transparent) 31% 36%,
      transparent 36% 49%,
      color-mix(in srgb, var(--surface-3) 85%, transparent) 49% 54%,
      transparent 54% 67%,
      color-mix(in srgb, var(--surface-3) 85%, transparent) 67% 72%,
      transparent 72% 85%,
      color-mix(in srgb, var(--surface-3) 85%, transparent) 85% 90%,
      transparent 90% 100%
    ),
    color-mix(in srgb, var(--impact) 88%, black 4%);
  }
}
.ui-media-graphic {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
}
.ui-media-graphic span {
  display: block;
  border-radius: 9999px;
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.16);
}
.ui-media-graphic span:nth-child(1) {
  width: 0.7rem;
  height: 2.2rem;
  background: #ffffff;
}
.ui-media-graphic span:nth-child(2) {
  width: 1.25rem;
  height: 3.4rem;
  background: var(--impact);
}
.ui-media-graphic span:nth-child(3) {
  width: 3rem;
  height: 0.85rem;
  background: var(--accent);
}
.ui-card-accent-rail {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.ui-card-accent-rail span {
  display: block;
  border-radius: 9999px;
}
.ui-card-accent-rail span:nth-child(1) {
  width: 0.8rem;
  height: 0.8rem;
  background: var(--impact);
}
.ui-card-accent-rail span:nth-child(2) {
  width: 2rem;
  height: 0.35rem;
  background: var(--accent);
}
.ui-card-accent-rail span:nth-child(3) {
  width: 4.5rem;
  height: 0.65rem;
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 82%, white);
  }
}
.ui-side-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --link-color: var(--side-accent);
  --state-focus-ring: var(--side-accent);
  --text-strong: var(--side-heading);
  --text-muted: var(--side-text);
  background: var(--surface);
}
.ui-side-card :is(h1, h2, h3, h4, h5, h6),
[data-theme]
  main
  > section:first-of-type
  .ui-side-card
  :is(h1, h2, h3, h4, h5, h6) {
  color: var(--side-heading);
}
.ui-side-card :is(p, li, .ui-text--muted),
[data-theme]
  main
  > section:first-of-type
  .ui-side-card
  :is(p, li, .ui-text--muted) {
  color: var(--side-text);
}
.ui-side-card-copy {
  position: relative;
  z-index: 2;
}
.ui-side-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--side-background);
  opacity: 0.96;
  z-index: 0;
}
.ui-side-card::after {
  display: none;
}
.ui-side-card > * {
  position: relative;
  z-index: 2;
}
.ui-cta-panel {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--accent);
  border-radius: var(--radius-card);
  background: var(--surface-elevated);
  padding: var(--space-6);
  box-shadow: 0 20px 42px -34px var(--card-glow);
}
.ui-bottom-cta {
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}
.ui-cta-layout {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}
.ui-cta-image {
  display: none;
}
.ui-cta-title {
  margin: 0;
  max-width: 14ch;
  font-size: 2rem;
  line-height: 1.04;
  letter-spacing: 0;
  font-weight: var(--heading-1-weight);
  color: var(--heading-fg);
}
.ui-cta-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--fg) 78%, var(--bg));
  }
}
@media (min-width: 1024px) {
  .ui-cta-title {
    font-size: 2.45rem;
    line-height: 1;
  }
  .ui-cta-text {
    font-size: 1.06rem;
  }
}
.ui-case-study-section {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}
.ui-case-study-media {
  overflow: hidden;
  border: 2px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface-elevated);
  box-shadow: 0 20px 46px -34px var(--card-glow);
}
.ui-case-study-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 900px) {
  .ui-case-study-section {
    grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr);
    gap: 1.75rem;
  }
  .ui-case-study-section--reverse {
    grid-template-columns: minmax(18rem, 0.95fr) minmax(0, 1.05fr);
  }
  .ui-case-study-section--reverse .ui-case-study-copy {
    order: 2;
  }
  .ui-case-study-section--reverse .ui-case-study-media {
    order: 1;
  }
}
.ui-cta-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.4rem;
  background: var(--impact);
}
.ui-cta-panel > * {
  position: relative;
}
@media (min-width: 768px) {
  .ui-proof-intro {
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
    align-items: end;
  }
  .ui-proof-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ui-proof-footer {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
  .ui-cta-panel {
    padding: var(--space-8);
  }
  .ui-bottom-cta {
    margin-top: var(--space-10);
    margin-bottom: var(--space-6);
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }
  .ui-cta-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(16rem, 0.9fr);
    gap: 2rem;
  }
  .ui-cta-image {
    display: block;
  }
}
@media (min-width: 640px) and (max-width: 1079px) {
  .page-home .ui-proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1080px) {
  .page-home .ui-proof-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.ui-side-card--engineering {
  --side-accent: #dbe8ff;
  --side-background: var(--accent);
  --side-heading: #ffffff;
  --side-text: white;
  @supports (color: color-mix(in lab, red, red)) {
    --side-text: color-mix(in srgb, white 82%, var(--accent));
  }
  border-color: var(--accent);
  box-shadow: 0 18px 38px -26px var(--accent),
    0 1px 2px rgb(15 23 42 / 0.05);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 18px 38px -26px color-mix(in srgb, var(--accent) 38%, transparent),
    0 1px 2px rgb(15 23 42 / 0.05);
  }
}
.ui-side-card--production {
  --side-accent: #ffe1e6;
  --side-background: linear-gradient(
    130deg,
    #ffffff 0%,
    var(--impact) 48%,
    #000000 100%
  );
  @supports (color: color-mix(in lab, red, red)) {
    --side-background: linear-gradient(
    130deg,
    color-mix(in srgb, #ffffff 16%, var(--impact)) 0%,
    var(--impact) 48%,
    color-mix(in srgb, #000000 10%, var(--impact)) 100%
  );
  }
  --side-heading: #ffffff;
  --side-text: #ffe1e6;
  border-color: var(--impact);
  box-shadow: 0 18px 38px -26px var(--impact),
    0 1px 2px rgb(24 24 27 / 0.05);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 18px 38px -26px color-mix(in srgb, var(--impact) 42%, transparent),
    0 1px 2px rgb(24 24 27 / 0.05);
  }
}
.ui-side-card .ui-link-action,
.ui-side-card .ui-link-action:visited {
  color: var(--side-heading);
}
.ui-side-card .ui-link-action:hover {
  color: var(--side-accent);
}
[data-theme="production"] .ui-card,
[data-theme="production"] .ui-proof-card,
[data-theme="production"] .ui-context-panel,
[data-theme="production"] .ui-editorial-frame {
  border-color: var(--impact);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--impact) 52%, var(--border-default));
  }
}
[data-theme="production"] .ui-cta-panel {
  background: linear-gradient(
    138deg,
    #ffffff 0%,
    var(--impact) 46%,
    #000000 100%
  );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
    138deg,
    color-mix(in srgb, #ffffff 12%, var(--impact)) 0%,
    var(--impact) 46%,
    color-mix(in srgb, #000000 12%, var(--impact)) 100%
  );
  }
  color: #ffffff;
  border-color: var(--impact);
  box-shadow: 0 24px 44px -32px
    var(--impact);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 24px 44px -32px
    color-mix(in srgb, var(--impact) 70%, transparent);
  }
}
[data-theme="production"] .ui-cta-panel :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
}
[data-theme="production"] .ui-cta-panel .ui-meta-label {
  color: #ffffff;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, #ffffff 86%, var(--impact));
  }
}
[data-theme="production"] .ui-cta-panel .ui-cta-title {
  color: #ffffff;
}
[data-theme="production"] .ui-cta-panel :is(p, li).text-\[var\(--muted\)\],
[data-theme="production"] .ui-cta-panel .ui-text--muted,
[data-theme="production"] .ui-cta-panel .ui-cta-text {
  color: #ffffff;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, #ffffff 82%, var(--impact));
  }
}
[data-theme="production"] .ui-cta-panel .ui-button-link--primary {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--fg);
  box-shadow: 0 14px 32px -22px color-mix(in srgb, #ffffff 72%, transparent);
}
[data-theme="production"] .ui-cta-panel .ui-button-link--secondary {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--fg);
}
[data-theme="engineering"] .ui-card,
[data-theme="engineering"] .ui-proof-card,
[data-theme="engineering"] .ui-context-panel,
[data-theme="engineering"] .ui-editorial-frame {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 56%, var(--border-default));
  }
}
[data-theme="engineering"] .ui-cta-panel {
  box-shadow: 0 24px 44px -30px
    var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 24px 44px -30px
    color-mix(in srgb, var(--accent) 52%, transparent);
  }
}
[data-theme="engineering"] #selected-work .ui-tag {
  background: #ffffff;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, #ffffff 92%, var(--accent-soft));
  }
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 14%, var(--border-default));
  }
  color: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--fg) 72%, var(--bg));
  }
}
[data-theme="engineering"]
  #selected-work
  .text-xs.font-medium.uppercase.tracking-\[0\.12em\].text-\[var\(--muted\)\] {
  color: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--fg) 52%, var(--bg));
  }
}
[data-theme]
  :is(
    #about-next,
    #resume-cta,
    #package-cta,
    #package-mid-cta,
    #engineering-cta,
    #production-cta,
    #contact-cta,
    #engineering-project-cta,
    #production-project-cta,
    #work-cta
  ).ui-cta-panel {
  background: var(--inversion-bg);
  color: var(--inversion-fg);
  border-color: var(--inversion-bg);
  box-shadow: 0 20px 42px -34px
    var(--inversion-bg);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 20px 42px -34px
    color-mix(in srgb, var(--inversion-bg) 56%, transparent);
  }
}
[data-theme]
  :is(
    #about-next,
    #resume-cta,
    #package-cta,
    #package-mid-cta,
    #engineering-cta,
    #production-cta,
    #contact-cta,
    #engineering-project-cta,
    #production-project-cta,
    #work-cta
  ).ui-cta-panel
  :is(h1, h2, h3, h4, h5, h6),
[data-theme]
  :is(
    #about-next,
    #resume-cta,
    #package-cta,
    #package-mid-cta,
    #engineering-cta,
    #production-cta,
    #contact-cta,
    #engineering-project-cta,
    #production-project-cta,
    #work-cta
  ).ui-cta-panel
  .ui-cta-title {
  color: var(--inversion-fg);
}
[data-theme]
  :is(
    #about-next,
    #resume-cta,
    #package-cta,
    #package-mid-cta,
    #engineering-cta,
    #production-cta,
    #contact-cta,
    #engineering-project-cta,
    #production-project-cta,
    #work-cta
  ).ui-cta-panel
  .ui-meta-label {
  color: white;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, white 80%, var(--impact));
  }
}
[data-theme]
  :is(
    #about-next,
    #resume-cta,
    #package-cta,
    #package-mid-cta,
    #engineering-cta,
    #production-cta,
    #contact-cta,
    #engineering-project-cta,
    #production-project-cta,
    #work-cta
  ).ui-cta-panel
  :is(p, li).text-\[var\(--muted\)\],
[data-theme]
  :is(
    #about-next,
    #resume-cta,
    #package-cta,
    #package-mid-cta,
    #engineering-cta,
    #production-cta,
    #contact-cta,
    #engineering-project-cta,
    #production-project-cta,
    #work-cta
  ).ui-cta-panel
  .ui-text--muted,
[data-theme]
  :is(
    #about-next,
    #resume-cta,
    #package-cta,
    #package-mid-cta,
    #engineering-cta,
    #production-cta,
    #contact-cta,
    #engineering-project-cta,
    #production-project-cta,
    #work-cta
  ).ui-cta-panel
  .ui-cta-text {
  color: white;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, white 82%, var(--inversion-bg));
  }
}
[data-theme]
  :is(
    #about-next,
    #resume-cta,
    #package-cta,
    #package-mid-cta,
    #engineering-cta,
    #production-cta,
    #contact-cta,
    #engineering-project-cta,
    #production-project-cta,
    #work-cta
  ).ui-cta-panel
  .ui-button-link--primary {
  background: var(--surface-3);
  border-color: var(--surface-3);
  color: var(--fg);
}
[data-theme]
  :is(
    #about-next,
    #resume-cta,
    #package-cta,
    #package-mid-cta,
    #engineering-cta,
    #production-cta,
    #contact-cta,
    #engineering-project-cta,
    #production-project-cta,
    #work-cta
  ).ui-cta-panel
  .ui-button-link--secondary,
[data-theme]
  :is(
    #about-next,
    #resume-cta,
    #package-cta,
    #package-mid-cta,
    #engineering-cta,
    #production-cta,
    #contact-cta,
    #engineering-project-cta,
    #production-project-cta,
    #work-cta
  ).ui-cta-panel
  .ui-button-link--ghost {
  background: transparent;
  border-color: color-mix(in srgb, white 70%, transparent);
  color: var(--inversion-fg);
}
[data-color-mode="dark"]
  [data-theme]
  :is(
    #home-cta,
    #about-next,
    #resume-cta,
    #package-cta,
    #package-mid-cta,
    #engineering-cta,
    #production-cta,
    #contact-cta,
    #engineering-project-cta,
    #production-project-cta,
    #work-cta
  ).ui-cta-panel
  .ui-meta-label {
  color: var(--inversion-fg);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--inversion-fg) 70%, var(--impact));
  }
}
[data-color-mode="dark"]
  [data-theme]
  :is(
    #home-cta,
    #about-next,
    #resume-cta,
    #package-cta,
    #package-mid-cta,
    #engineering-cta,
    #production-cta,
    #contact-cta,
    #engineering-project-cta,
    #production-project-cta,
    #work-cta
  ).ui-cta-panel
  :is(p, li).text-\[var\(--muted\)\],
[data-color-mode="dark"]
  [data-theme]
  :is(
    #home-cta,
    #about-next,
    #resume-cta,
    #package-cta,
    #package-mid-cta,
    #engineering-cta,
    #production-cta,
    #contact-cta,
    #engineering-project-cta,
    #production-project-cta,
    #work-cta
  ).ui-cta-panel
  .ui-text--muted,
[data-color-mode="dark"]
  [data-theme]
  :is(
    #home-cta,
    #about-next,
    #resume-cta,
    #package-cta,
    #package-mid-cta,
    #engineering-cta,
    #production-cta,
    #contact-cta,
    #engineering-project-cta,
    #production-project-cta,
    #work-cta
  ).ui-cta-panel
  .ui-cta-text {
  color: var(--inversion-fg);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--inversion-fg) 78%, var(--inversion-bg));
  }
}
[data-color-mode="dark"]
  [data-theme]
  :is(
    #home-cta,
    #about-next,
    #resume-cta,
    #package-cta,
    #package-mid-cta,
    #engineering-cta,
    #production-cta,
    #contact-cta,
    #engineering-project-cta,
    #production-project-cta,
    #work-cta
  ).ui-cta-panel
  .ui-button-link--secondary,
[data-color-mode="dark"]
  [data-theme]
  :is(
    #home-cta,
    #about-next,
    #resume-cta,
    #package-cta,
    #package-mid-cta,
    #engineering-cta,
    #production-cta,
    #contact-cta,
    #engineering-project-cta,
    #production-project-cta,
    #work-cta
  ).ui-cta-panel
  .ui-button-link--ghost {
  border-color: var(--inversion-fg);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--inversion-fg) 42%, transparent);
  }
  color: var(--inversion-fg);
}
@media (min-width: 640px) {
  .ui-cta-actions {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }
  .ui-cta-actions .ui-button-link {
    width: auto;
  }
}
@media (min-width: 768px) {
  .ui-method-section {
    gap: 2.5rem;
  }
  .ui-method-hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.8fr);
    gap: 2rem;
  }
  .ui-method-graphic {
    display: grid;
    grid-template-columns: minmax(2rem, 1fr) minmax(2rem, 1.25fr);
    gap: 0.6rem;
    align-self: stretch;
    min-height: 16rem;
  }
  .ui-method-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }
}
@media (hover: hover) {
  .ui-side-card.ui-card--interactive:hover {
    border-color: var(--side-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(
      in srgb,
      var(--side-accent) 30%,
      var(--border-default)
    );
    }
    box-shadow: 0 24px 46px -24px var(--side-accent),
      0 1px 2px rgb(15 23 42 / 0.06);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 24px 46px -24px color-mix(in srgb, var(--side-accent) 30%, transparent),
      0 1px 2px rgb(15 23 42 / 0.06);
    }
  }
}
.ui-card--interactive {
  cursor: pointer;
  transition: transform var(--motion-duration-standard) var(--motion-easing-standard),
    box-shadow var(--motion-duration-standard) var(--motion-easing-standard),
    border-color var(--motion-duration-standard) var(--motion-easing-standard);
}
.ui-card--interactive:active {
  transform: scale(0.99);
  transition-duration: var(--motion-duration-micro);
  transition-timing-function: var(--motion-easing-ease-out);
}
@media (hover: hover) {
  .ui-card--interactive:hover {
    transform: scale(1.01);
    box-shadow: var(--card-shadow-hover);
    border-color: var(--border-interactive-hover);
  }
}
.ui-card--interactive:focus-visible {
  border-color: var(--border-interactive-hover);
  border-radius: var(--card-radius);
  outline: 2px solid var(--state-focus-ring);
  outline-offset: var(--state-focus-ring-offset);
  transition-duration: 0s;
}
.ui-card--interactive.ui-side-card {
  transition: background-color var(--motion-duration-standard)
      var(--motion-easing-standard),
    transform var(--motion-duration-standard) var(--motion-easing-standard),
    box-shadow var(--motion-duration-standard) var(--motion-easing-standard),
    border-color var(--motion-duration-standard) var(--motion-easing-standard);
}
@media (hover: hover) {
  .ui-card--interactive.ui-side-card.ui-side-card--engineering:hover {
    background: #155dfc;
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(
      in srgb,
      var(--color-engineering-500) 4%,
      var(--card-surface)
    );
    }
    border-color: #155dfc;
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(
      in srgb,
      var(--color-engineering-500) 24%,
      var(--card-border)
    );
    }
  }
  .ui-card--interactive.ui-side-card.ui-side-card--production:hover {
    background: #ff4f5e;
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(
      in srgb,
      var(--color-production-500) 5%,
      var(--card-surface)
    );
    }
    border-color: #ff4f5e;
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(
      in srgb,
      var(--color-production-500) 28%,
      var(--card-border)
    );
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui-card--interactive {
    transition: box-shadow var(--motion-duration-standard) var(--motion-easing-standard),
      border-color var(--motion-duration-standard) var(--motion-easing-standard);
  }
  .ui-card--interactive:hover {
    transform: none;
  }
  .ui-card--interactive:active {
    transform: none;
    transition-duration: var(--motion-duration-micro);
  }
}
:where(.ui-link-inline, .ui-text a) {
  color: var(--link-color);
  font-weight: var(--interactive-text-weight);
  text-decoration-line: var(--link-decoration);
  text-underline-offset: 0.2em;
  transition: color var(--motion-duration-quick) var(--motion-easing-quick),
    text-decoration-color var(--motion-duration-quick)
      var(--motion-easing-quick);
}
:where(.ui-link-inline, .ui-text a):visited {
  color: var(--link-color-visited);
}
:where(.ui-link-inline, .ui-text a):hover {
  color: var(--state-hover-accent);
  text-decoration-line: var(--link-decoration-hover);
}
:where(.ui-link-inline, .ui-text a):active {
  color: var(--state-active-border);
}
:where(.ui-link-inline, .ui-text a)[aria-disabled="true"] {
  opacity: var(--state-disabled-opacity);
  pointer-events: none;
}
:where(.ui-link-inline, .ui-text a):focus-visible {
  border-radius: var(--radius-sm);
  outline: 2px solid var(--state-focus-ring);
  outline-offset: var(--state-focus-ring-offset);
}
.ui-link-action {
  color: var(--link-color);
  font-weight: var(--interactive-text-weight);
  text-decoration: none;
  transition: color var(--motion-duration-quick) var(--motion-easing-quick);
}
.ui-link-action:visited {
  color: var(--link-color-visited);
}
.ui-link-action:hover {
  color: var(--state-hover-accent);
}
.ui-link-action:active {
  color: var(--state-active-border);
}
.ui-link-action[aria-disabled="true"] {
  opacity: var(--state-disabled-opacity);
  pointer-events: none;
}
.ui-link-action:focus-visible {
  border-radius: var(--radius-sm);
  outline: 2px solid var(--state-focus-ring);
  outline-offset: var(--state-focus-ring-offset);
}
.ui-link-action--internal::after {
  content: " \27F6";
  display: inline-block;
  line-height: 1;
}
@keyframes route-fade-in {
  from {
    opacity: 0.92;
  }
  to {
    opacity: 1;
  }
}
.route-transition {
  animation: route-fade-in var(--motion-duration-transition)
    var(--motion-easing-smooth) both;
  will-change: opacity;
}
[data-scroll-reveal] {
  transition: opacity var(--motion-duration-slow) var(--motion-easing-ease-out),
    transform var(--motion-duration-slow) var(--motion-easing-ease-out);
}
[data-scroll-reveal][data-reveal-state="hidden"] {
  opacity: 0;
  transform: translateY(0.5rem);
  will-change: opacity, transform;
}
[data-scroll-reveal][data-reveal-state="visible"] {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .route-transition {
    animation: none;
    will-change: auto;
  }
  [data-scroll-reveal] {
    transition: none;
  }
  [data-scroll-reveal][data-reveal-state="hidden"],
  [data-scroll-reveal][data-reveal-state="visible"] {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
}
.article-prose {
  inline-size: 100%;
  max-inline-size: var(--article-prose-measure);
  margin-inline: auto;
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--article-prose-font-size);
  line-height: var(--article-prose-leading);
  overflow-wrap: break-word;
  text-wrap: pretty;
}
.article-prose>* {
  margin: 0;
}
.article-prose>*+* {
  margin-block-start: var(--article-flow-space);
}
.article-prose> :first-child {
  margin-block-start: 0;
}
.article-prose> :last-child {
  margin-block-end: 0;
}
.article-prose :where(h1, h2, h3, h4, h5, h6) {
  color: var(--text-strong);
  font-family: var(--font-heading);
  text-wrap: balance;
  scroll-margin-top: var(--article-scroll-margin-top);
}
.article-prose :where(h1) {
  font-size: clamp(var(--text-3xl), 4vw, 3.5rem);
  line-height: var(--heading-1-leading);
  letter-spacing: var(--heading-1-tracking);
  margin-block-end: var(--article-heading-1-space-bottom);
}
.article-prose>h1 {
  margin-block-start: 0;
}
.article-prose>h1+* {
  margin-block-start: 0;
}
.article-prose :where(h2) {
  font-size: clamp(var(--text-2xl), 2.75vw, 2.75rem);
  line-height: var(--heading-2-leading);
  letter-spacing: var(--heading-2-tracking);
  margin-block-end: var(--article-heading-2-space-bottom);
}
.article-prose>h2 {
  margin-block-start: var(--article-heading-2-space-top);
}
.article-prose>h2+* {
  margin-block-start: 0;
}
.article-prose :where(h3) {
  font-size: clamp(1.35rem, 2.1vw, 1.9rem);
  line-height: var(--heading-3-leading);
  letter-spacing: var(--heading-3-tracking);
  margin-block-end: var(--article-heading-3-space-bottom);
}
.article-prose>h3 {
  margin-block-start: var(--article-heading-3-space-top);
}
.article-prose>h3+* {
  margin-block-start: 0;
}
.article-prose :where(h4) {
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: var(--leading-normal);
  letter-spacing: 0.12em;
  margin-block-end: var(--article-heading-4-space-bottom);
  opacity: 0.88;
  text-transform: uppercase;
}
.article-prose :where(h5, h6) {
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 650;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-normal);
  margin-block-end: var(--space-2);
  text-transform: uppercase;
}
.article-prose>h4 {
  margin-block-start: var(--article-heading-4-space-top);
}
.article-prose>h4+* {
  margin-block-start: 0;
}
.article-prose :where(p, li, figcaption, td, th, summary) {
  font-size: inherit;
  line-height: inherit;
}
.article-prose>p:first-of-type,
.article-prose>.lead:first-child {
  color: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--fg) 82%, var(--muted));
  }
  font-size: var(--article-lead-size);
  line-height: var(--article-lead-leading);
}
.article-prose :where(strong) {
  color: var(--text-strong);
  font-weight: 650;
}
.article-prose :where(em) {
  font-style: italic;
}
.article-prose :where(a) {
  color: var(--link-color);
  font-weight: var(--interactive-text-weight);
  text-decoration-line: var(--link-decoration);
  text-decoration-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  }
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
  transition: color var(--motion-duration-quick) var(--motion-easing-quick),
    text-decoration-color var(--motion-duration-quick) var(--motion-easing-quick);
}
@media (hover: hover) {
  .article-prose :where(a:hover) {
    color: var(--link-color-hover);
    text-decoration-color: currentColor;
  }
}
.article-prose :where(hr) {
  block-size: 1px;
  margin-block: var(--article-block-space);
  border: 0;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}
.article-prose :where(ul, ol) {
  padding-inline-start: 1.2em;
}
.article-prose :where(ul, ol)::marker,
.article-prose :where(li)::marker {
  color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--accent) 72%, var(--muted));
  }
}
.article-prose :where(ul) {
  list-style: disc;
}
.article-prose :where(ol) {
  list-style: decimal;
}
.article-prose :where(li + li) {
  margin-block-start: var(--space-2);
}
.article-prose :where(li > ul, li > ol) {
  margin-block-start: var(--space-3);
}
.article-prose :where(blockquote) {
  margin-inline: 0;
  padding: var(--space-6) var(--space-6) var(--space-6) calc(var(--space-6) + var(--space-2));
  border-inline-start: 3px solid var(--accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 5%, var(--surface-subtle));
  }
  color: var(--fg);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--fg) 78%, var(--muted));
  }
}
.article-prose :where(blockquote > * + *) {
  margin-block-start: var(--space-4);
}
.article-prose :where(code, kbd, samp) {
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  }
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.12em 0.38em;
}
.article-prose :where(kbd) {
  box-shadow: inset 0 -1px 0 var(--border-strong);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--border-strong) 80%, transparent);
  }
}
.article-prose :where(pre) {
  overflow-x: auto;
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--surface-subtle) 78%, var(--surface));
  }
  box-shadow: var(--shadow-xs);
}
.article-prose :where(pre code) {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  display: block;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  padding: 0;
}
.article-prose :where(figure) {
  display: grid;
  gap: var(--space-3);
  margin-inline: 0;
}
.article-prose :where(img) {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface-subtle);
}
.article-prose :where(figcaption) {
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.article-prose :where(table) {
  inline-size: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  min-inline-size: 36rem;
}
.article-prose__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--surface-subtle) 45%, var(--surface));
  }
  box-shadow: var(--shadow-xs);
}
.article-prose :where(thead) {
  color: var(--text-strong);
}
.article-prose :where(tr) {
  border-bottom: 1px solid var(--border);
}
.article-prose :where(th, td) {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
}
.article-prose :where(th) {
  font-size: var(--text-sm);
  font-weight: 650;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.article-prose :where(details) {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-subtle);
}
.article-prose :where(summary) {
  color: var(--text-strong);
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 600;
}
.article-prose :where(details > * + *) {
  margin-block-start: var(--space-4);
}
.article-prose--compact {
  --article-prose-measure: none;
  --article-prose-font-size: var(--text-sm);
  --article-prose-leading: var(--leading-normal);
  --article-flow-space: var(--space-3);
  --article-heading-1-space-bottom: var(--space-4);
  --article-heading-2-space-top: var(--space-6);
  --article-heading-2-space-bottom: var(--space-3);
  --article-heading-3-space-top: var(--space-4);
  --article-heading-3-space-bottom: var(--space-2);
  --article-heading-4-space-top: var(--space-4);
  --article-heading-4-space-bottom: var(--space-2);
  --article-block-space: var(--space-4);
  --article-lead-size: var(--text-base);
  --article-lead-leading: var(--leading-normal);
}
.article-prose--compact :where(h1) {
  font-size: var(--text-lg);
}
.article-prose--compact :where(h2) {
  font-size: var(--text-base);
}
.article-prose--compact :where(h3) {
  font-size: var(--text-sm);
}
.article-prose--compact>p:first-of-type,
.article-prose--compact>.lead:first-child {
  font-size: var(--article-lead-size);
}
@media (max-width: 767px) {
  .article-prose {
    --article-prose-font-size: var(--text-base);
    --article-flow-space: var(--space-4);
    --article-heading-1-space-bottom: var(--space-6);
    --article-heading-2-space-top: var(--space-12);
    --article-heading-2-space-bottom: var(--space-4);
    --article-heading-3-space-top: var(--space-8);
    --article-heading-3-space-bottom: var(--space-3);
    --article-heading-4-space-top: var(--space-6);
    --article-heading-4-space-bottom: var(--space-2);
    --article-block-space: var(--space-6);
    --article-lead-size: 1.125rem;
  }
  .article-prose :where(blockquote, pre) {
    padding: var(--space-4);
  }
  .article-prose :where(th, td) {
    padding: var(--space-2) var(--space-3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .article-prose :where(a) {
    transition: none;
  }
}
body {
  font-family: var(--font-body);
  line-height: 1.5;
}
main {
  padding: 0;
}
.resume-page.resume-mode-human,
.resume-page.resume-mode-ats {
  --resume-preview-paper: #fff;
  --resume-preview-ink: #111827;
  --resume-preview-rule: #cbd5e1;
}
.resume-page.resume-mode-human > section:first-of-type {
  padding-top: 0 !important;
  padding-bottom: var(--space-3) !important;
}
.resume-page.resume-mode-human > section:first-of-type + section {
  padding-top: var(--space-3) !important;
}
.resume-page.resume-mode-human .resume-print-header,
.resume-page.resume-mode-human .resume-print-section,
.resume-page.resume-mode-human .resume-print-skills-grid,
.resume-page.resume-mode-human .resume-contact,
.resume-page.resume-mode-human .resume-print-projects,
.resume-page.resume-mode-ats .resume-print-header,
.resume-page.resume-mode-ats .resume-print-section,
.resume-page.resume-mode-ats .resume-print-skills-grid,
.resume-page.resume-mode-ats .resume-contact,
.resume-page.resume-mode-ats .resume-print-projects {
  color: var(--resume-preview-ink);
}
.resume-page.resume-mode-human .resume-print-header,
.resume-page.resume-mode-ats .resume-print-header {
  gap: 1.5rem;
  padding: 1.5rem 0 1.25rem;
  border-bottom: 1px solid var(--resume-preview-rule);
}
.resume-page.resume-mode-human .resume-contact,
.resume-page.resume-mode-human .resume-print-summary,
.resume-page.resume-mode-human .resume-print-experience,
.resume-page.resume-mode-human .resume-print-projects,
.resume-page.resume-mode-human .resume-print-skills-grid {
  padding-left: 1rem;
  border-left: 0.3rem solid color-mix(in srgb, #111827 24%, #ffffff);
}
.resume-page.resume-mode-human .resume-contact {
  padding-top: 1rem;
  border-top: 1px solid var(--resume-preview-rule);
}
.resume-page.resume-mode-human .resume-print-projects {
  align-items: start;
}
.resume-page.resume-mode-human .resume-print-project-visual {
  display: none;
}
.resume-page.resume-mode-human .resume-print-project-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  align-items: stretch !important;
}
.resume-page.resume-mode-human .resume-print-project-list article {
  height: 100%;
}
.resume-page.resume-mode-human .resume-print-experience-list {
  gap: 1.5rem;
}
.resume-page.resume-mode-human .resume-print-experience-item {
  grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
  gap: 1.5rem;
}
.resume-page.resume-mode-human .resume-print-experience-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 0.75rem;
  align-items: start;
}
.resume-page.resume-mode-human .resume-print-experience-item h3 {
  grid-column: 1 / -1;
}
.resume-page.resume-mode-human .resume-print-experience-org {
  grid-column: 1 / 2;
}
.resume-page.resume-mode-human .resume-print-experience-timeframe {
  grid-column: 2 / 3;
  text-align: right;
  white-space: nowrap;
}
.resume-page.resume-mode-human .resume-print-experience-context {
  grid-column: 1 / -1;
}
.resume-page.resume-mode-human .resume-print-skills-grid {
  align-items: start;
}
.resume-page.resume-mode-ats {
  --resume-preview-ink: #000;
  --resume-preview-rule: #d1d5db;
}
.resume-page.resume-mode-ats .resume-print-portrait,
.resume-page.resume-mode-ats .resume-print-project-visual,
.resume-page.resume-mode-ats .ui-editorial-frame,
.resume-page.resume-mode-ats .ui-context-panel::before,
.resume-page.resume-mode-ats .ui-editorial-frame::after,
.resume-page.resume-mode-ats #resume-cta {
  display: none !important;
}
.resume-page.resume-mode-ats .resume-print-header,
.resume-page.resume-mode-ats .resume-print-summary,
.resume-page.resume-mode-ats .resume-print-experience,
.resume-page.resume-mode-ats .resume-print-projects,
.resume-page.resume-mode-ats .resume-contact {
  display: block;
  padding-left: 0;
  border-left: 0;
}
.resume-page.resume-mode-ats .resume-print-summary,
.resume-page.resume-mode-ats .resume-print-experience,
.resume-page.resume-mode-ats .resume-print-projects,
.resume-page.resume-mode-ats .resume-print-skills-column,
.resume-page.resume-mode-ats .resume-print-education-column,
.resume-page.resume-mode-ats .resume-contact {
  margin-top: 0;
  padding-top: 0.2rem;
  border-top: 0;
}
.resume-page.resume-mode-ats > section {
  padding-block: 0 !important;
}
.resume-page.resume-mode-ats > section + section,
.resume-page.resume-mode-ats .resume-contact {
  margin-top: 1.6rem !important;
}
.resume-page.resume-mode-ats .resume-print-primary-flow,
.resume-page.resume-mode-ats .resume-print-lower-flow {
  display: block !important;
}
.resume-page.resume-mode-ats .resume-print-primary-flow > * + *,
.resume-page.resume-mode-ats .resume-print-lower-flow > * + * {
  margin-top: 1.6rem !important;
}
.resume-page.resume-mode-ats .resume-print-summary h2,
.resume-page.resume-mode-ats .resume-print-experience h2,
.resume-page.resume-mode-ats .resume-print-projects h2,
.resume-page.resume-mode-ats .resume-print-skills-column h2,
.resume-page.resume-mode-ats .resume-print-education-column h2,
.resume-page.resume-mode-ats .resume-contact > .ui-meta-label {
  margin: 0 0 0.6rem;
}
.resume-page.resume-mode-ats .resume-contact > .ui-meta-label {
  color: #000 !important;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
}
.resume-page.resume-mode-ats .resume-print-experience-heading p,
.resume-page.resume-mode-ats .resume-print-projects-heading p,
.resume-page.resume-mode-ats .resume-print-summary-copy {
  max-width: none;
  margin-bottom: 0.8rem;
}
.resume-page.resume-mode-ats .resume-print-experience-heading,
.resume-page.resume-mode-ats .resume-print-projects-heading,
.resume-page.resume-mode-ats .resume-print-skills-column,
.resume-page.resume-mode-ats .resume-print-education-column {
  gap: 0;
}
.resume-page.resume-mode-ats .resume-print-experience-list {
  gap: 0.35rem !important;
}
.resume-page.resume-mode-ats .resume-print-projects {
  padding: 0 !important;
}
.resume-page.resume-mode-ats .resume-contact ul,
.resume-page.resume-mode-ats .resume-print-project-list,
.resume-page.resume-mode-ats .resume-print-skills-column > div,
.resume-page.resume-mode-ats .resume-print-education-column > div {
  display: block;
}
.resume-page.resume-mode-ats .resume-print-skills-column article ul {
  display: block;
  margin: 0;
}
.resume-page.resume-mode-ats .resume-print-skills-inline {
  margin: 0;
}
.resume-page.resume-mode-ats .resume-print-skills-column article li {
  display: inline;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
}
.resume-page.resume-mode-ats .resume-print-skills-column article li::after {
  content: ", ";
}
.resume-page.resume-mode-ats
  .resume-print-skills-column
  article
  li:last-child::after {
  content: "";
}
.resume-page.resume-mode-ats
  .resume-print-project-list
  article
  > div
  > p:first-child {
  display: none !important;
}
.resume-page.resume-mode-ats .resume-print-project-link {
  margin-top: 0 !important;
  padding-top: 0.2rem !important;
}
.resume-page.resume-mode-ats .resume-contact a,
.resume-page.resume-mode-ats .resume-print-project-list a {
  font-size: 0 !important;
}
.resume-page.resume-mode-ats .resume-contact-icon {
  display: none !important;
}
.resume-page.resume-mode-ats .resume-contact a::after,
.resume-page.resume-mode-ats .resume-print-project-list a::after {
  font-size: 0.95rem !important;
  line-height: 1.4 !important;
}
.resume-page.resume-mode-ats .resume-contact a[href]::after,
.resume-page.resume-mode-ats .resume-print-project-list a[href]::after {
  content: attr(href) !important;
}
.resume-page.resume-mode-ats .resume-print-skills-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  padding-left: 0 !important;
  border-left: 0 !important;
}
.resume-page.resume-mode-ats .resume-contact li,
.resume-page.resume-mode-ats .resume-print-project-list article,
.resume-page.resume-mode-ats .resume-print-skills-column article,
.resume-page.resume-mode-ats .resume-print-education-column article {
  margin-bottom: 0.25rem;
}
.resume-page.resume-mode-ats .resume-contact li:last-child,
.resume-page.resume-mode-ats .resume-print-project-list article:last-child,
.resume-page.resume-mode-ats .resume-print-skills-column article:last-child,
.resume-page.resume-mode-ats .resume-print-education-column article:last-child {
  margin-bottom: 0;
}
.resume-page.resume-mode-ats .resume-print-card,
.resume-page.resume-mode-ats .resume-print-project-list article,
.resume-page.resume-mode-ats .resume-print-experience-item,
.resume-page.resume-mode-ats .resume-print-skills-column article,
.resume-page.resume-mode-ats .resume-print-education-column article {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0.2rem 0 0;
  box-shadow: none;
}
.resume-page.resume-mode-ats .resume-print-experience-item,
.resume-page.resume-mode-ats .resume-print-experience-meta {
  display: block;
}
.resume-page.resume-mode-ats .resume-print-experience-item h3,
.resume-page.resume-mode-ats .resume-print-experience-item p {
  margin: 0 0 0.35rem;
}
.resume-page.resume-mode-ats .resume-print-experience-list,
.resume-page.resume-mode-ats .resume-print-project-list,
.resume-page.resume-mode-ats .resume-print-skills-column > div,
.resume-page.resume-mode-ats .resume-print-education-column > div {
  margin-top: 0;
}
.resume-page.resume-mode-ats .resume-print-experience-timeframe,
.resume-page.resume-mode-ats .resume-print-experience-context,
.resume-page.resume-mode-ats .resume-print-experience-org {
  text-align: left;
  white-space: normal;
}
@page {
  margin: 0.5in;
}
@media print {
  html,
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 10.5pt;
    line-height: 1.3;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body {
    margin: 0;
  }
  *,
  *::before,
  *::after {
    box-shadow: none !important;
    text-shadow: none !important;
    background-image: none !important;
  }
  header,
  footer,
  #resume-cta,
  .resume-mode-switcher {
    display: none !important;
  }
  main {
    padding: 0 !important;
  }
  a,
  a:visited {
    color: #000 !important;
    text-decoration: none !important;
  }
  .resume-page {
    font-size: 10pt;
  }
  .resume-page .ui-meta-label {
    color: #475569 !important;
    letter-spacing: 0 !important;
  }
  .resume-page [data-scroll-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .resume-page li {
    break-inside: auto;
    page-break-inside: auto;
  }
  .resume-page
    :is(
      .ui-editorial-frame,
      .ui-context-panel,
      .ui-resume-unit,
      .ui-resume-section,
      .ui-resume-meta-band
    ) {
    background: transparent !important;
    border-radius: 0 !important;
  }
  .resume-page .container,
  .resume-page [class*="max-w-"] {
    max-width: none !important;
  }
  .resume-page > section,
  .resume-page section[style] {
    padding-block: 0 !important;
    background: transparent !important;
  }
  .resume-page .resume-print-header,
  .resume-page .resume-print-section,
  .resume-page .resume-print-skills-grid {
    margin: 0 0 0.16in 0 !important;
  }
  .resume-page .resume-print-header {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) 1.05in !important;
    gap: 0.18in !important;
    align-items: start !important;
    padding-bottom: 0.14in !important;
    border-bottom: 1px solid #94a3b8 !important;
  }
  .resume-page .resume-print-header h1 {
    font-size: 20pt !important;
    line-height: 1.05 !important;
    margin: 0 !important;
  }
  .resume-page .resume-print-header .text-lg,
  .resume-page .resume-print-header .text-xl {
    font-size: 11pt !important;
    line-height: 1.25 !important;
  }
  .resume-page .resume-print-portrait {
    aspect-ratio: 4 / 5 !important;
    width: 1.05in !important;
    min-width: 1.05in !important;
    overflow: hidden !important;
    border: 1px solid #cbd5e1 !important;
  }
  .resume-page .resume-contact {
    display: block !important;
    border-top: 1px solid #e2e8f0 !important;
    padding-top: 0.1in !important;
    padding-left: 0.95rem !important;
    border-left: 0.3rem solid color-mix(in srgb, #111827 24%, #ffffff) !important;
  }
  .resume-page .resume-contact ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.06in 0.12in !important;
  }
  .resume-page .resume-contact li {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    line-height: 1.25 !important;
  }
  .resume-page .resume-contact a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #475569;
  }
  .resume-page .resume-contact a[href^="mailto:"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #475569;
  }
  .resume-page .resume-contact a[href^="tel:"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #475569;
  }
  .resume-page .resume-print-intro,
  .resume-page #resume-summary + p,
  .resume-page section p,
  .resume-page li {
    color: #111827 !important;
  }
  .resume-page .resume-print-summary,
  .resume-page .resume-print-projects {
    display: block !important;
  }
  .resume-page .resume-print-summary h2,
  .resume-page .resume-print-projects h2,
  .resume-page .resume-print-experience h2,
  .resume-page .resume-print-skills-grid h2 {
    font-size: 12pt !important;
    line-height: 1.15 !important;
    margin: 0 0 0.06in 0 !important;
  }
  .resume-page .resume-print-summary,
  .resume-page .resume-print-experience,
  .resume-page .resume-print-projects,
  .resume-page .resume-print-skills-grid {
    padding-left: 0.95rem !important;
    border-left: 0.3rem solid color-mix(in srgb, #111827 24%, #ffffff) !important;
    padding-top: 0.08in !important;
  }
  .resume-page .resume-print-projects {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.95fr) !important;
    gap: 0.12in !important;
    align-items: start !important;
  }
  .resume-page .resume-print-section > div:first-child,
  .resume-page .resume-print-section > h2:first-child,
  .resume-page .resume-print-skills-grid > section > h2 {
    break-after: avoid-page;
    page-break-after: avoid;
  }
  .resume-page .resume-print-card,
  .resume-page .resume-print-project-list article,
  .resume-page .resume-print-experience article {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .resume-page .resume-print-card {
    background: transparent !important;
    border-color: #d7dee7 !important;
    padding: 0.1in 0 !important;
    border-width: 1px 0 0 0 !important;
  }
  .resume-page .resume-print-skills-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.1in !important;
    align-items: start !important;
  }
  .resume-page .resume-print-experience {
    display: block !important;
  }
  .resume-page .resume-print-experience > div:first-child {
    margin-bottom: 0.06in !important;
  }
  .resume-page .resume-print-experience > div:last-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.1in !important;
  }
  .resume-page .resume-print-experience-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 2.1fr) !important;
    gap: 0.12in !important;
    align-items: start !important;
    padding: 0.1in 0 0 0 !important;
  }
  .resume-page .resume-print-experience-item:first-child {
    border-top: 0 !important;
    padding-top: 0 !important;
  }
  .resume-page .resume-print-experience-meta {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 0.04in 0.12in !important;
    align-items: start !important;
  }
  .resume-page .resume-print-experience-item h3 {
    margin: 0 !important;
    grid-column: 1 / -1 !important;
  }
  .resume-page .resume-print-experience-item p {
    margin: 0 !important;
  }
  .resume-page .resume-print-experience-org {
    grid-column: 1 / 2 !important;
    font-weight: 600 !important;
    color: #334155 !important;
  }
  .resume-page .resume-print-experience-timeframe {
    grid-column: 2 / 3 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }
  .resume-page .resume-print-experience-context {
    grid-column: 1 / -1 !important;
    color: #64748b !important;
  }
  .resume-page .resume-print-experience-bullets {
    margin: 0 !important;
    padding-left: 0.16in !important;
    gap: 0.04in !important;
  }
  .resume-page .resume-print-project-visual {
    display: none !important;
  }
  .resume-page.resume-mode-human .resume-print-project-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.08in !important;
    align-items: stretch !important;
  }
  .resume-page.resume-mode-human .resume-print-project-list article {
    padding-top: 0 !important;
    border-width: 0 !important;
    border-left: 0 !important;
    padding-inline: 0.08in !important;
  }
  .resume-page.resume-mode-human
    .resume-print-project-list
    article:nth-child(odd) {
    padding-left: 0 !important;
  }
  .resume-page.resume-mode-human
    .resume-print-project-list
    article:nth-child(even) {
    padding-right: 0 !important;
  }
  .resume-page.resume-mode-human .resume-print-project-list .ui-text-link,
  .resume-page.resume-mode-human .resume-print-project-list a {
    font-size: 8.5pt !important;
  }
  .resume-page.resume-mode-human
    .resume-print-project-list
    a[href^="/"]::after {
    content: " (" attr(href) ")";
    color: #64748b;
  }
  .resume-page .resume-print-skills-grid > section > div {
    gap: 0.08in !important;
  }
  .resume-page .resume-print-skills-column,
  .resume-page .resume-print-education-column {
    break-inside: auto !important;
    page-break-inside: auto !important;
  }
  .resume-page .resume-print-skills-column > div,
  .resume-page .resume-print-education-column > div {
    display: grid !important;
    gap: 0.08in !important;
  }
  .resume-page .resume-print-skills-grid > section {
    padding-top: 0 !important;
  }
  .resume-page .resume-contact {
    break-inside: auto !important;
    page-break-inside: auto !important;
  }
  .resume-page .resume-print-skills-grid article ul {
    gap: 0.04in !important;
  }
  .resume-page .resume-print-skills-grid article li {
    padding: 0.04in 0.06in !important;
    border-color: #dbe3ec !important;
    background: transparent !important;
    font-size: 8.75pt !important;
    line-height: 1.2 !important;
  }
  .resume-page .ui-button-link,
  .resume-page .ui-cta-panel,
  .resume-page .ui-cta-image {
    display: none !important;
  }
  .resume-page .ui-editorial-frame::after,
  .resume-page .ui-context-panel::before {
    display: none !important;
  }
  .resume-page .text-sm,
  .resume-page .md\:text-base,
  .resume-page .text-base,
  .resume-page .md\:text-lg {
    font-size: 9pt !important;
    line-height: 1.3 !important;
  }
  .resume-page .text-lg,
  .resume-page .md\:text-xl {
    font-size: 10pt !important;
    line-height: 1.25 !important;
  }
  .resume-page .text-2xl,
  .resume-page .md\:text-3xl {
    font-size: 12pt !important;
    line-height: 1.15 !important;
  }
  .resume-page .text-4xl,
  .resume-page .md\:text-5xl {
    font-size: 20pt !important;
  }
  .resume-page .xl\:grid-cols-\[minmax\(0\,1\.15fr\)_minmax\(0\,0\.85fr\)\] {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
  }
  .resume-page .sm\:grid-cols-2,
  .resume-page .xl\:grid-cols-4,
  .resume-page .md\:grid-cols-2,
  .resume-page .lg\:grid-cols-\[minmax\(0\,14rem\)_minmax\(0\,1fr\)\] {
    grid-template-columns: inherit !important;
  }
  .resume-page .mt-auto {
    margin-top: 0 !important;
  }
  .resume-page .resume-print-projects-heading p,
  .resume-page .resume-print-experience-heading p {
    max-width: none !important;
  }
  .resume-page .resume-print-summary-copy {
    max-width: none !important;
    columns: 1 !important;
  }
  .resume-page .flex.flex-col.gap-12,
  .resume-page .md\:gap-16,
  .resume-page .gap-10,
  .resume-page .xl\:gap-12,
  .resume-page .gap-8,
  .resume-page .md\:gap-10,
  .resume-page .gap-6,
  .resume-page .md\:gap-8,
  .resume-page .gap-5,
  .resume-page .md\:gap-6,
  .resume-page .gap-4 {
    gap: 0.08in !important;
  }
  .resume-page.resume-mode-ats,
  .resume-page.resume-mode-ats * {
    color: #000 !important;
  }
  .resume-page.resume-mode-ats .resume-print-portrait,
  .resume-page.resume-mode-ats .resume-print-project-visual,
  .resume-page.resume-mode-ats .ui-editorial-frame,
  .resume-page.resume-mode-ats .ui-context-panel::before,
  .resume-page.resume-mode-ats .ui-editorial-frame::after {
    display: none !important;
  }
  .resume-page.resume-mode-ats .resume-print-header {
    display: block !important;
    gap: 0 !important;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .resume-page.resume-mode-ats .resume-contact,
  .resume-page.resume-mode-ats .resume-print-summary,
  .resume-page.resume-mode-ats .resume-print-experience,
  .resume-page.resume-mode-ats .resume-print-projects,
  .resume-page.resume-mode-ats .resume-print-skills-column,
  .resume-page.resume-mode-ats .resume-print-education-column {
    border-left: 0 !important;
    padding-left: 0 !important;
  }
  .resume-page.resume-mode-ats .resume-print-summary,
  .resume-page.resume-mode-ats .resume-print-experience,
  .resume-page.resume-mode-ats .resume-print-projects,
  .resume-page.resume-mode-ats .resume-print-skills-column,
  .resume-page.resume-mode-ats .resume-print-education-column,
  .resume-page.resume-mode-ats .resume-contact {
    margin-top: 0 !important;
    padding-top: 0.02in !important;
    border-top: 0 !important;
  }
  .resume-page.resume-mode-ats .resume-print-projects {
    padding: 0 !important;
  }
  .resume-page.resume-mode-ats > section {
    padding-block: 0 !important;
  }
  .resume-page.resume-mode-ats > section + section,
  .resume-page.resume-mode-ats .resume-contact {
    margin-top: 0.18in !important;
  }
  .resume-page.resume-mode-ats .resume-print-primary-flow,
  .resume-page.resume-mode-ats .resume-print-lower-flow {
    display: block !important;
  }
  .resume-page.resume-mode-ats .resume-print-primary-flow > * + *,
  .resume-page.resume-mode-ats .resume-print-lower-flow > * + * {
    margin-top: 0.18in !important;
  }
  .resume-page.resume-mode-ats .resume-print-experience-list {
    gap: 0.03in !important;
  }
  .resume-page.resume-mode-ats .resume-print-summary h2,
  .resume-page.resume-mode-ats .resume-print-experience h2,
  .resume-page.resume-mode-ats .resume-print-projects h2,
  .resume-page.resume-mode-ats .resume-print-skills-column h2,
  .resume-page.resume-mode-ats .resume-print-education-column h2,
  .resume-page.resume-mode-ats .resume-contact > .ui-meta-label {
    margin: 0 0 0.06in 0 !important;
  }
  .resume-page.resume-mode-ats .resume-contact > .ui-meta-label {
    color: #000 !important;
    font-size: 12pt !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
  .resume-page.resume-mode-ats .resume-print-experience-heading p,
  .resume-page.resume-mode-ats .resume-print-projects-heading p,
  .resume-page.resume-mode-ats .resume-print-summary-copy {
    margin: 0 0 0.06in 0 !important;
    max-width: none !important;
  }
  .resume-page.resume-mode-ats .resume-contact ul,
  .resume-page.resume-mode-ats .resume-print-project-list,
  .resume-page.resume-mode-ats .resume-print-skills-column > div,
  .resume-page.resume-mode-ats .resume-print-education-column > div {
    display: block !important;
  }
  .resume-page.resume-mode-ats .resume-print-skills-column article ul {
    display: block !important;
    margin: 0 !important;
  }
  .resume-page.resume-mode-ats .resume-print-skills-inline {
    margin: 0 !important;
  }
  .resume-page.resume-mode-ats .resume-print-skills-column article li {
    display: inline !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    font-size: 9pt !important;
    line-height: 1.4 !important;
  }
  .resume-page.resume-mode-ats .resume-print-skills-column article li::after {
    content: ", " !important;
  }
  .resume-page.resume-mode-ats
    .resume-print-skills-column
    article
    li:last-child::after {
    content: "" !important;
  }
  .resume-page.resume-mode-ats
    .resume-print-project-list
    article
    > div
    > p:first-child {
    display: none !important;
  }
  .resume-page.resume-mode-ats .resume-print-project-link {
    margin-top: 0 !important;
    padding-top: 0.02in !important;
  }
  .resume-page.resume-mode-ats .resume-contact a,
  .resume-page.resume-mode-ats .resume-print-project-list a {
    font-size: 0 !important;
  }
  .resume-page.resume-mode-ats .resume-contact-icon {
    display: none !important;
  }
  .resume-page.resume-mode-ats .resume-contact a::after,
  .resume-page.resume-mode-ats .resume-print-project-list a::after {
    font-size: 9pt !important;
    line-height: 1.3 !important;
  }
  .resume-page.resume-mode-ats .resume-contact a[href]::after,
  .resume-page.resume-mode-ats .resume-print-project-list a[href]::after {
    content: attr(href) !important;
  }
  .resume-page.resume-mode-ats .resume-print-skills-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
    padding-left: 0 !important;
    border-left: 0 !important;
  }
  .resume-page.resume-mode-ats .resume-print-projects,
  .resume-page.resume-mode-ats .resume-print-summary,
  .resume-page.resume-mode-ats .resume-print-experience {
    display: block !important;
  }
  .resume-page.resume-mode-ats .resume-print-card,
  .resume-page.resume-mode-ats .resume-print-project-list article,
  .resume-page.resume-mode-ats .resume-print-experience-item,
  .resume-page.resume-mode-ats .resume-print-skills-column article,
  .resume-page.resume-mode-ats .resume-print-education-column article {
    border: 0 !important;
    padding: 0.06in 0 0 0 !important;
  }
  .resume-page.resume-mode-ats .resume-print-experience-item {
    display: block !important;
  }
  .resume-page.resume-mode-ats .resume-print-experience-meta {
    display: block !important;
  }
  .resume-page.resume-mode-ats .resume-print-experience-timeframe,
  .resume-page.resume-mode-ats .resume-print-experience-context,
  .resume-page.resume-mode-ats .resume-print-experience-org {
    text-align: left !important;
    white-space: normal !important;
  }
  .resume-page.resume-mode-ats .resume-contact li,
  .resume-page.resume-mode-ats .resume-print-project-list article,
  .resume-page.resume-mode-ats .resume-print-skills-column article,
  .resume-page.resume-mode-ats .resume-print-education-column article {
    margin-bottom: 0.02in !important;
  }
  .resume-page.resume-mode-ats .resume-print-card,
  .resume-page.resume-mode-ats .resume-print-project-list article,
  .resume-page.resume-mode-ats .resume-print-experience-item,
  .resume-page.resume-mode-ats .resume-print-skills-column article,
  .resume-page.resume-mode-ats .resume-print-education-column article {
    padding: 0.02in 0 0 !important;
  }
  .resume-page.resume-mode-ats .resume-contact a[href^="http"]::after,
  .resume-page.resume-mode-ats .resume-contact a[href^="mailto:"]::after,
  .resume-page.resume-mode-ats .resume-contact a[href^="tel:"]::after,
  .resume-page.resume-mode-ats .resume-print-project-list a[href^="/"]::after {
    color: #000 !important;
  }
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
    }
  }
}