/*! tailwindcss v4.1.3 | 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: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-xl: 36rem;
    --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-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-normal: 0em;
    --leading-normal: 1.5;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --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);
    --font-display: "Archivo", system-ui, sans-serif;
    --font-body: "Inter", system-ui, sans-serif;
    --font-slab: "Roboto Slab", Georgia, serif;
    --color-void: #000000;
    --color-accent: var(--brand-light, rgb(253 255 255));
    --color-outline: rgb(29 29 29);
    --color-outline-2: rgb(45 45 45);
    --color-muted: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 47%, #000);
    @supports (color: color-mix(in lab, red, red)) {
      --color-muted: color-mix(in srgb, var(--color-accent) 47%, #000);
    }
    --color-dim: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 31%, #000);
    @supports (color: color-mix(in lab, red, red)) {
      --color-dim: color-mix(in srgb, var(--color-accent) 31%, #000);
    }
    --color-brand: var(--brand, rgb(253 255 255));
    --text-micro: 0.625rem;
    --text-micro--line-height: 1.4;
    --animate-scanline: scanline 8s linear infinite;
    --animate-pulse-slow: pulse-slow 3s ease-in-out infinite;
    --animate-marquee: marquee 28s linear infinite;
  }
}
@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;
  }
  :-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 {
  .pointer-events-auto {
    pointer-events: auto;
  }
  .pointer-events-none {
    pointer-events: none;
  }
  .\!visible {
    visibility: visible !important;
  }
  .collapse {
    visibility: collapse;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-5 {
    top: calc(var(--spacing) * 5);
  }
  .right-0 {
    right: calc(var(--spacing) * 0);
  }
  .right-5 {
    right: calc(var(--spacing) * 5);
  }
  .right-\[22\.5rem\] {
    right: 22.5rem;
  }
  .bottom-5 {
    bottom: calc(var(--spacing) * 5);
  }
  .bottom-\[2\.4rem\] {
    bottom: 2.4rem;
  }
  .left-5 {
    left: calc(var(--spacing) * 5);
  }
  .z-10 {
    z-index: 10;
  }
  .z-\[60\] {
    z-index: 60;
  }
  .z-\[70\] {
    z-index: 70;
  }
  .z-\[9998\] {
    z-index: 9998;
  }
  .container {
    width: 100%;
    @media (width >= 400px) {
      max-width: 400px;
    }
    @media (width >= 576px) {
      max-width: 576px;
    }
    @media (width >= 768px) {
      max-width: 768px;
    }
    @media (width >= 992px) {
      max-width: 992px;
    }
    @media (width >= 1200px) {
      max-width: 1200px;
    }
    @media (width >= 1400px) {
      max-width: 1400px;
    }
    @media (width >= 1600px) {
      max-width: 1600px;
    }
    @media (width >= 1800px) {
      max-width: 1800px;
    }
  }
  .mx-auto {
    margin-inline: auto;
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }
  .mt-14 {
    margin-top: calc(var(--spacing) * 14);
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-full {
    height: 100%;
  }
  .h-px {
    height: 1px;
  }
  .w-0 {
    width: calc(var(--spacing) * 0);
  }
  .w-1\.5 {
    width: calc(var(--spacing) * 1.5);
  }
  .w-7 {
    width: calc(var(--spacing) * 7);
  }
  .w-\[62vw\] {
    width: 62vw;
  }
  .w-full {
    width: 100%;
  }
  .w-px {
    width: 1px;
  }
  .max-w-\[1600px\] {
    max-width: 1600px;
  }
  .max-w-xl {
    max-width: var(--container-xl);
  }
  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }
  .shrink {
    flex-shrink: 1;
  }
  .origin-top {
    transform-origin: top;
  }
  .scale-y-0 {
    --tw-scale-y: 0%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .transform {
    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
  }
  .animate-pulse-slow {
    animation: var(--animate-pulse-slow);
  }
  .resize {
    resize: both;
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-\[5px\] {
    gap: 5px;
  }
  .gap-x-10 {
    column-gap: calc(var(--spacing) * 10);
  }
  .gap-y-3 {
    row-gap: calc(var(--spacing) * 3);
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-accent {
    border-color: var(--color-accent);
  }
  .border-outline {
    border-color: var(--color-outline);
  }
  .border-outline-2 {
    border-color: var(--color-outline-2);
  }
  .bg-accent {
    background-color: var(--color-accent);
  }
  .bg-outline {
    background-color: var(--color-outline);
  }
  .bg-outline-2 {
    background-color: var(--color-outline-2);
  }
  .bg-void {
    background-color: var(--color-void);
  }
  .bg-void\/80 {
    background-color: color-mix(in srgb, #000000 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-void) 80%, transparent);
    }
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-7 {
    padding-inline: calc(var(--spacing) * 7);
  }
  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  .py-28 {
    padding-block: calc(var(--spacing) * 28);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .text-center {
    text-align: center;
  }
  .align-top {
    vertical-align: top;
  }
  .font-display {
    font-family: var(--font-display);
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-micro {
    font-size: var(--text-micro);
    line-height: var(--tw-leading, var(--text-micro--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .text-\[0\.35em\] {
    font-size: 0.35em;
  }
  .text-\[22vw\] {
    font-size: 22vw;
  }
  .text-\[clamp\(3rem\,11vw\,10rem\)\] {
    font-size: clamp(3rem, 11vw, 10rem);
  }
  .leading-\[0\.8\] {
    --tw-leading: 0.8;
    line-height: 0.8;
  }
  .leading-\[0\.82\] {
    --tw-leading: 0.82;
    line-height: 0.82;
  }
  .tracking-\[0\.3em\] {
    --tw-tracking: 0.3em;
    letter-spacing: 0.3em;
  }
  .tracking-\[0\.12em\] {
    --tw-tracking: 0.12em;
    letter-spacing: 0.12em;
  }
  .tracking-\[0\.25em\] {
    --tw-tracking: 0.25em;
    letter-spacing: 0.25em;
  }
  .tracking-\[0\.35em\] {
    --tw-tracking: 0.35em;
    letter-spacing: 0.35em;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .text-accent {
    color: var(--color-accent);
  }
  .text-dim {
    color: var(--color-dim);
  }
  .text-muted {
    color: var(--color-muted);
  }
  .uppercase {
    text-transform: uppercase;
  }
  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .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);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .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,);
  }
  .grayscale {
    --tw-grayscale: grayscale(100%);
    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;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[width\] {
    transition-property: width;
    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));
  }
  .duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .duration-500 {
    --tw-duration: 500ms;
    transition-duration: 500ms;
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .hover\:border-accent {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-accent);
      }
    }
  }
  .hover\:text-accent {
    &:hover {
      @media (hover: hover) {
        color: var(--color-accent);
      }
    }
  }
  .hover\:text-void {
    &:hover {
      @media (hover: hover) {
        color: var(--color-void);
      }
    }
  }
  .sm\:top-8 {
    @media (width >= 576px) {
      top: calc(var(--spacing) * 8);
    }
  }
  .sm\:right-10 {
    @media (width >= 576px) {
      right: calc(var(--spacing) * 10);
    }
  }
  .sm\:right-\[24rem\] {
    @media (width >= 576px) {
      right: 24rem;
    }
  }
  .sm\:bottom-8 {
    @media (width >= 576px) {
      bottom: calc(var(--spacing) * 8);
    }
  }
  .sm\:left-10 {
    @media (width >= 576px) {
      left: calc(var(--spacing) * 10);
    }
  }
  .sm\:flex {
    @media (width >= 576px) {
      display: flex;
    }
  }
  .sm\:inline {
    @media (width >= 576px) {
      display: inline;
    }
  }
  .sm\:gap-6 {
    @media (width >= 576px) {
      gap: calc(var(--spacing) * 6);
    }
  }
  .sm\:px-10 {
    @media (width >= 576px) {
      padding-inline: calc(var(--spacing) * 10);
    }
  }
  .sm\:py-10 {
    @media (width >= 576px) {
      padding-block: calc(var(--spacing) * 10);
    }
  }
  .sm\:py-40 {
    @media (width >= 576px) {
      padding-block: calc(var(--spacing) * 40);
    }
  }
  .sm\:text-2xl {
    @media (width >= 576px) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }
  .sm\:text-sm {
    @media (width >= 576px) {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }
  .sm\:text-\[16vw\] {
    @media (width >= 576px) {
      font-size: 16vw;
    }
  }
  .md\:text-\[12vw\] {
    @media (width >= 768px) {
      font-size: 12vw;
    }
  }
  .lg\:block {
    @media (width >= 992px) {
      display: block;
    }
  }
  .lg\:flex {
    @media (width >= 992px) {
      display: flex;
    }
  }
  .lg\:hidden {
    @media (width >= 992px) {
      display: none;
    }
  }
}
@keyframes scanline {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100vh);
  }
}
@keyframes pulse-slow {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}
@keyframes marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}
@keyframes flicker {
  0%,
  92%,
  100% {
    opacity: 1;
  }
  93% {
    opacity: 0.4;
  }
  94% {
    opacity: 1;
  }
  96% {
    opacity: 0.6;
  }
  97% {
    opacity: 1;
  }
}
@keyframes blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}
@keyframes noise-shift {
  0% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-5%, -5%);
  }
  20% {
    transform: translate(-10%, 5%);
  }
  30% {
    transform: translate(5%, -10%);
  }
  40% {
    transform: translate(-5%, 15%);
  }
  50% {
    transform: translate(-10%, 5%);
  }
  60% {
    transform: translate(15%, 0);
  }
  70% {
    transform: translate(0, 10%);
  }
  80% {
    transform: translate(-15%, 0);
  }
  90% {
    transform: translate(10%, 5%);
  }
  100% {
    transform: translate(5%, 0);
  }
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  overflow-x: hidden;
  --brand: rgb(253 255 255);
  background-color: var(--color-void);
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-tap-highlight-color: transparent;
}
html::-webkit-scrollbar {
  display: none;
}
body {
  margin: calc(var(--spacing) * 0);
  min-width: calc(var(--spacing) * 0);
  overflow-x: clip;
  font-family: var(--font-mono);
  color: var(--color-accent);
  background-color: var(--color-void);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body[data-locked="true"] {
  height: 100vh;
  overflow: hidden;
}
::selection {
  background: var(--color-accent);
  color: var(--color-void);
}
.font-display {
  text-transform: uppercase;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: condensed;
  letter-spacing: -0.035em;
  line-height: 0.82;
}
.grid-overlay {
  pointer-events: none;
  position: fixed;
  inset: calc(var(--spacing) * 0);
  z-index: 1;
  background-image: repeating-linear-gradient(
      45deg,
      color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 2.2%, transparent) 0 1px,
      transparent 1px 7px
    ),
    repeating-linear-gradient(
      -45deg,
      color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 2.2%, transparent) 0 1px,
      transparent 1px 7px
    );
  @supports (color: color-mix(in lab, red, red)) {
    background-image: repeating-linear-gradient(
      45deg,
      color-mix(in srgb, var(--color-accent) 2.2%, transparent) 0 1px,
      transparent 1px 7px
    ),
    repeating-linear-gradient(
      -45deg,
      color-mix(in srgb, var(--color-accent) 2.2%, transparent) 0 1px,
      transparent 1px 7px
    );
  }
}
.noise-overlay {
  pointer-events: none;
  position: fixed;
  z-index: 2;
  opacity: 0.035;
  inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27160%27 height=%27160%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.85%27 numOctaves=%273%27/%3E%3C/filter%3E%3Crect width=%27160%27 height=%27160%27 filter=%27url%28%23n%29%27/%3E%3C/svg%3E");
  animation: noise-shift 0.6s steps(2) infinite;
}
.scanline-overlay {
  pointer-events: none;
  position: fixed;
  inset: calc(var(--spacing) * 0);
  z-index: 3;
  opacity: 55%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 3.5%, transparent) 50%,
    transparent 100%
  );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--color-accent) 3.5%, transparent) 50%,
    transparent 100%
  );
  }
  height: 38vh;
  animation: var(--animate-scanline);
}
html[data-perf="medium"] .noise-overlay,
html[data-perf="saver"] .noise-overlay,
html[data-perf="saver"] .scanline-overlay,
html[data-perf="saver"] #particle-canvas {
  display: none;
}
html[data-perf="saver"] .grid-overlay,
html[data-perf="saver"] .hero-scan {
  display: none;
}
.cursor-dot,
.cursor-ring {
  pointer-events: none;
  position: fixed;
  top: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  z-index: 9990;
  border-radius: calc(infinity * 1px);
  will-change: transform;
  mix-blend-mode: difference;
}
.cursor-dot {
  height: 5px;
  width: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: var(--color-accent);
}
.cursor-ring {
  height: 34px;
  width: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 55%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  }
  transition: width 0.28s ease,
    height 0.28s ease,
    margin 0.28s ease,
    opacity 0.28s ease,
    border-color 0.28s ease;
}
.cursor-ring[data-hover="true"] {
  height: 62px;
  width: 62px;
  margin: -31px 0 0 -31px;
  border-color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 90%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) 90%, transparent);
  }
}
@media (hover: none), (pointer: coarse) {
  .cursor-dot,
  .cursor-ring {
    display: none;
  }
}
[data-reveal] {
  opacity: 0%;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="up"] {
  transform: translate3d(0, 42px, 0);
}
[data-reveal="left"] {
  transform: translate3d(-42px, 0, 0);
}
[data-reveal="right"] {
  transform: translate3d(42px, 0, 0);
}
[data-reveal="scale"] {
  transform: scale(0.94);
}
[data-reveal].is-in {
  opacity: 100%;
  transform: none;
}
.char {
  display: inline-block;
  opacity: 0%;
  transform: translate3d(0, 105%, 0) rotate(6deg);
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--char-delay, 0ms);
}
[data-split],
[data-split] * {
  pointer-events: none;
}
a [data-split],
a [data-split] *,
button [data-split],
button [data-split] * {
  pointer-events: auto;
}
.char-mask {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.06em;
  vertical-align: bottom;
}
.is-revealed .char {
  opacity: 100%;
  transform: none;
}
.link-wipe {
  position: relative;
  display: inline-block;
}
.link-wipe::after {
  position: absolute;
  height: 1px;
  width: 100%;
  content: "";
  bottom: -2px;
  left: 0;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.link-wipe:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
.swap {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.swap span {
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.swap span:last-child {
  position: absolute;
  inset: calc(var(--spacing) * 0);
  transform: translateY(100%);
}
.swap:hover span:first-child {
  transform: translateY(-100%);
}
.swap:hover span:last-child {
  transform: translateY(0);
}
.row-fill {
  position: relative;
  isolation: isolate;
}
.row-fill::before {
  position: absolute;
  inset: calc(var(--spacing) * 0);
  content: "";
  z-index: -1;
  background: var(--color-accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.row-fill:hover::before {
  transform: scaleY(1);
  transform-origin: top;
}
.btn-fill {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.btn-fill::before {
  position: absolute;
  inset: calc(var(--spacing) * 0);
  content: "";
  z-index: -1;
  background: var(--color-accent);
  transform: translateY(101%);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-fill:hover::before {
  transform: translateY(0);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: var(--animate-marquee);
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}
.contact-row {
  position: relative;
  display: block;
  padding-inline: calc(var(--spacing) * 0);
  padding-block: calc(var(--spacing) * 8);
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 50%, transparent);
  }
}
.contact-row::before,
.contact-row::after {
  position: absolute;
  left: calc(var(--spacing) * 0);
  z-index: 10;
  height: 1px;
  width: calc(var(--spacing) * 0);
  content: "";
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 40%, transparent);
  }
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.contact-row::before {
  top: -1px;
}
.contact-row::after {
  bottom: -1px;
}
.contact-row:hover {
  color: var(--color-accent);
}
.contact-row-group:hover .contact-row::before,
.contact-row-group:hover .contact-row::after {
  width: 100%;
}
@media (prefers-reduced-motion: reduce) {
  .contact-row,
  .contact-row::before,
  .contact-row::after {
    transition-duration: 0.01ms;
  }
}
#menu-overlay {
  pointer-events: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.85s cubic-bezier(0.76, 0, 0.24, 1);
}
#menu-overlay[data-open="true"] {
  pointer-events: auto;
  clip-path: inset(0 0 0 0);
}
#menu-overlay .menu-item {
  transform: translateY(110%);
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--menu-delay, 0ms);
}
#menu-overlay[data-open="true"] .menu-item {
  transform: translateY(0);
}
.burger-bar {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-menu-open="true"] .burger-bar:first-child {
  transform: translateY(3px) rotate(45deg);
}
[data-menu-open="true"] .burger-bar:last-child {
  transform: translateY(-3px) rotate(-45deg);
}
#preloader {
  transition: clip-path 1.1s cubic-bezier(0.76, 0, 0.24, 1),
    opacity 0.6s ease;
  clip-path: inset(0 0 0 0);
}
#preloader[data-done="true"],
#preloader[data-done="true"] * {
  pointer-events: none;
}
#preloader[data-done="true"] {
  clip-path: inset(0 0 100% 0);
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal],
  .char {
    opacity: 1 !important;
    transform: none !important;
  }
  .noise-overlay,
  .scanline-overlay {
    display: none;
  }
}
.hero-section {
  position: relative;
  display: grid;
  height: 100dvh;
  width: 100%;
  place-content: center;
  overflow: hidden;
  padding: calc(var(--spacing) * 5);
}
.hero-overlay-wrap {
  pointer-events: none;
  position: absolute;
  top: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  z-index: 50;
  height: 100%;
  width: calc(1/2 * 100%);
  padding: 1rem 0 1rem 1rem;
  mix-blend-mode: plus-lighter;
}
.hero-overlay {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  opacity: 0%;
  border-radius: 0.375rem;
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 4.25%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 4.25%, transparent);
  }
  border: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 3%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-accent) 3%, transparent);
  }
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-ready .hero-overlay {
  opacity: 100%;
}
.hero-scan {
  position: absolute;
  top: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  height: 1px;
  width: 100%;
  background-image: linear-gradient(
    to right,
    transparent,
    color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 20%, transparent),
    transparent
  );
  @supports (color: color-mix(in lab, red, red)) {
    background-image: linear-gradient(
    to right,
    transparent,
    color-mix(in srgb, var(--color-accent) 20%, transparent),
    transparent
  );
  }
  animation: hero-scan 4s linear infinite;
}
@keyframes hero-scan {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100vh);
  }
}
.corner-bracket {
  position: absolute;
  height: calc(var(--spacing) * 8);
  width: calc(var(--spacing) * 8);
}
.corner-bracket-tl {
  top: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  border-top: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
  }
  border-left: 1px solid
    color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-left: 1px solid
    color-mix(in srgb, var(--color-accent) 40%, transparent);
  }
  border-top-left-radius: 0.375rem;
}
.corner-bracket-tr {
  top: calc(var(--spacing) * 0);
  right: calc(var(--spacing) * 0);
  border-top: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--color-accent) 10%, transparent);
  }
  border-right: 1px solid
    color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-right: 1px solid
    color-mix(in srgb, var(--color-accent) 10%, transparent);
  }
  border-top-right-radius: 0.375rem;
}
.corner-bracket-bl {
  bottom: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  border-bottom: 1px solid
    color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid
    color-mix(in srgb, var(--color-accent) 10%, transparent);
  }
  border-left: 1px solid
    color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-left: 1px solid
    color-mix(in srgb, var(--color-accent) 10%, transparent);
  }
  border-bottom-left-radius: 0.375rem;
}
.corner-bracket-br {
  right: calc(var(--spacing) * 0);
  bottom: calc(var(--spacing) * 0);
  border-bottom: 1px solid
    color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid
    color-mix(in srgb, var(--color-accent) 40%, transparent);
  }
  border-right: 1px solid
    color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-right: 1px solid
    color-mix(in srgb, var(--color-accent) 40%, transparent);
  }
  border-bottom-right-radius: 0.375rem;
}
.hero-title-scan {
  position: relative;
  text-transform: uppercase;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: condensed;
  font-size: clamp(2.5rem, 6.5vw, 70px);
  line-height: 0.9;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 10%, transparent);
  }
  background: linear-gradient(
    to bottom,
    transparent 0,
    color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 60%, transparent) 30%,
    var(--color-accent) 40%,
    var(--color-accent) 49.9%,
    transparent 50%
  );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
    to bottom,
    transparent 0,
    color-mix(in srgb, var(--color-accent) 60%, transparent) 30%,
    var(--color-accent) 40%,
    var(--color-accent) 49.9%,
    transparent 50%
  );
  }
  background-size: 100% 150px;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-clip: text;
  background-clip: text;
  animation: hero-sync-scan 4s linear infinite;
}
@keyframes hero-sync-scan {
  0% {
    background-position: 0 calc(16px - 75px);
  }
  100% {
    background-position: 0 calc(100vh - 16px - 75px);
  }
}
.hero-content {
  pointer-events: none;
  position: absolute;
  inset: calc(var(--spacing) * 0);
  z-index: 60;
  display: flex;
  align-items: center;
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 0);
}
@media (min-width: 640px) {
  .hero-content {
    padding-inline: calc(var(--spacing) * 10);
    padding-block: calc(var(--spacing) * 0);
  }
}
@media (min-width: 1280px) {
  .hero-content {
    padding-inline: calc(var(--spacing) * 20);
    padding-block: calc(var(--spacing) * 0);
  }
}
.hero-main {
  pointer-events: auto;
  width: 100%;
  max-width: 56rem;
}
.hero-marquee-wrap {
  position: absolute;
  top: calc(var(--spacing) * 8);
  right: calc(var(--spacing) * 0);
  z-index: 50;
  width: calc(1/2 * 100%);
  padding-inline: calc(var(--spacing) * 10);
  padding-block: calc(var(--spacing) * 0);
}
.hero-marquee .marquee-track {
  animation-duration: 42s;
}
.hero-marquee {
  overflow: hidden;
  padding-inline: calc(var(--spacing) * 0);
  padding-block: calc(var(--spacing) * 1);
  border-top: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--color-accent) 5%, transparent);
  }
  border-bottom: 1px solid
    color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid
    color-mix(in srgb, var(--color-accent) 5%, transparent);
  }
}
.status-dot {
  height: calc(var(--spacing) * 1.5);
  width: calc(var(--spacing) * 1.5);
  border-radius: calc(infinity * 1px);
  background-color: rgb(34 197 94);
  box-shadow: 0 0 8px rgb(34 197 94 / 0.6);
  animation: hero-dot-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.hud-status-dot {
  height: calc(var(--spacing) * 1.5);
  width: calc(var(--spacing) * 1.5);
  border-radius: calc(infinity * 1px);
  background-color: var(--color-accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 8px color-mix(in srgb, var(--color-accent) 60%, transparent);
  }
  animation: hero-dot-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes hero-dot-pulse {
  50% {
    opacity: 0.5;
  }
}
.tech-label {
  padding-inline: calc(var(--spacing) * 1.5);
  padding-block: calc(var(--spacing) * 0.5);
  white-space: nowrap;
  text-transform: uppercase;
  border-radius: 0.125rem;
  border: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-accent) 10%, transparent);
  }
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 3%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 3%, transparent);
  }
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  }
}
.hero-right-hud {
  pointer-events: none;
  position: absolute;
  top: calc(1/2 * 100%);
  left: 75%;
  z-index: 50;
  display: none;
  width: calc(var(--spacing) * 48);
  flex-direction: column;
  gap: calc(var(--spacing) * 6);
  font-family: var(--font-mono);
  transform: translate(-50%, -50%);
}
@media (min-width: 1024px) {
  .hero-right-hud {
    display: flex;
  }
}
.reticle {
  pointer-events: none;
  position: fixed;
  top: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  z-index: 61;
  height: calc(var(--spacing) * 8);
  width: calc(var(--spacing) * 8);
  opacity: 0%;
  margin-left: -16px;
  margin-top: -16px;
  transition: opacity 0.4s ease;
  filter: drop-shadow(
    0 0 2px color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 30%, transparent)
  );
  @supports (color: color-mix(in lab, red, red)) {
    filter: drop-shadow(
    0 0 2px color-mix(in srgb, var(--color-accent) 30%, transparent)
  );
  }
}
.reticle[data-active="true"] {
  opacity: 55%;
}
@media (hover: none), (pointer: coarse) {
  .reticle {
    display: none;
  }
}
.hero-btn {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 4);
}
.hero-btn-text {
  padding-bottom: calc(var(--spacing) * 1);
  text-transform: uppercase;
  border-bottom: 1px solid
    color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid
    color-mix(in srgb, var(--color-accent) 20%, transparent);
  }
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 70%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 70%, transparent);
  }
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-btn:hover .hero-btn-text {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.hero-btn-icon {
  display: flex;
  height: calc(var(--spacing) * 10);
  width: calc(var(--spacing) * 10);
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-accent) 10%, transparent);
  }
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  }
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-btn:hover .hero-btn-icon {
  color: var(--color-accent);
  transform: scale(1.1);
  border-color: var(--color-accent);
}
.page-pill--unused {
  position: fixed;
  right: calc(var(--spacing) * 6);
  bottom: calc(var(--spacing) * 6);
  z-index: 70;
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 5);
  border: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 8%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-accent) 8%, transparent);
  }
  border-radius: 0.375rem;
  background: rgb(10 10 10 / 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 0.85rem 0.85rem 0.85rem 1.25rem;
}
.gear-tab {
  position: fixed;
  top: calc(1/2 * 100%);
  right: calc(var(--spacing) * 0);
  z-index: 70;
  display: flex;
  height: calc(var(--spacing) * 10);
  width: calc(var(--spacing) * 8);
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  border: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 8%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-accent) 8%, transparent);
  }
  border-right: 0;
  border-radius: 0.375rem 0 0 0.375rem;
  background: rgb(10 10 10 / 0.85);
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 45%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 45%, transparent);
  }
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: color 0.3s ease;
}
.gear-tab:hover {
  color: var(--color-accent);
}
.wave-toggle {
  color: var(--color-brand);
}
.wave-toggle canvas {
  display: block;
  height: 48px;
  width: 40px;
}
.wave-bar {
  width: 2px;
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 55%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 55%, transparent);
  }
  animation: wave 1.1s ease-in-out infinite;
}
@keyframes wave {
  0%,
  100% {
    height: 4px;
  }
  50% {
    height: 14px;
  }
}
@media (max-width: 1023px) {
  .hero-overlay-wrap {
    width: 100%;
    padding: calc(var(--spacing) * 4);
  }
  .hero-marquee-wrap {
    top: calc(var(--spacing) * 26);
    width: 100%;
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 0);
  }
  .hero-content {
    align-items: flex-end;
    padding-bottom: calc(var(--spacing) * 30);
  }
  #portrait-canvas {
    top: 2%;
    height: 62%;
  }
  .hero-title-scan {
    font-size: clamp(2.5rem, 11vw, 4.5rem);
    line-height: 0.84;
    letter-spacing: -0.01em;
    color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 94%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--color-accent) 94%, transparent);
    }
    background: none;
    animation: none;
    text-shadow: 0 0 24px rgb(0 0 0 / 0.55);
  }
}
@media (max-width: 1023px) and (max-height: 620px) {
  .hero-section {
    height: auto;
    min-height: 100dvh;
    padding-block: 5.5rem 7rem;
    place-content: start;
  }
  .hero-marquee-wrap {
    top: calc(var(--spacing) * 18);
  }
  #portrait-canvas {
    top: calc(var(--spacing) * 0);
    height: 100%;
    opacity: 45%;
  }
  .hero-content {
    position: relative;
    align-items: center;
    padding-bottom: calc(var(--spacing) * 0);
  }
  .hero-title-scan {
    font-size: clamp(2rem, 7vh, 3rem);
  }
  .hero-infolog {
    display: none;
  }
  .hero-btn {
    margin-top: calc(var(--spacing) * 7);
  }
}
@media (max-width: 360px) {
  .hero-content {
    padding-inline: 1rem;
  }
  .hero-marquee-wrap {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 0);
  }
  .hero-title-scan {
    font-size: clamp(2.1rem, 12vw, 2.75rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-title-scan {
    color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 94%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--color-accent) 94%, transparent);
    }
    background: none;
    animation: none;
  }
  .hero-scan,
  .status-dot,
  .hud-status-dot,
  .wave-bar {
    animation: none;
  }
}
.nav-menu-root {
  position: fixed;
  right: calc(var(--spacing) * 6);
  bottom: calc(var(--spacing) * 6);
  z-index: 70;
  width: 320px;
  font-family: var(--font-mono);
  color: var(--color-accent);
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 5%, transparent);
  }
  border: 1px solid rgb(85 85 85 / 0.3);
  border-radius: 8px;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}
.nav-menu-list-container {
  pointer-events: none;
  height: calc(var(--spacing) * 0);
  overflow: hidden;
  transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-menu-root[data-open="true"] .nav-menu-list-container {
  pointer-events: auto;
}
.nav-menu-inner {
  padding: 24px;
}
.nav-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
}
.nav-menu-header-title {
  color: var(--color-accent);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.nav-menu-header-subtitle {
  margin-top: 2px;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1px;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  }
}
.nav-menu-header-badge {
  display: flex;
  height: 36px;
  width: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(85 85 85 / 0.1);
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 5%, transparent);
  }
  font-size: 10px;
  letter-spacing: 1px;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 50%, transparent);
  }
}
.nav-menu-social-grid {
  display: grid;
  gap: 10px;
  padding-top: 4px;
  grid-template-columns: repeat(4, 1fr);
}
.nav-menu-social-link {
  display: flex;
  height: 38px;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  border: 1px solid rgb(85 85 85 / 0.1);
  border-radius: 6px;
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 3%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 3%, transparent);
  }
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.6px;
  transition: background-color 0.35s ease,
    border-color 0.35s ease;
}
.nav-menu-social-link:hover {
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 9%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 9%, transparent);
  }
  border-color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  }
}
.nav-menu-social-dot {
  height: 4px;
  width: 4px;
  flex: none;
  border-radius: calc(infinity * 1px);
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 20%, transparent);
  }
  transition: background-color 0.35s ease;
}
.nav-menu-social-link:hover .nav-menu-social-dot {
  background: var(--color-accent);
}
.nav-menu-lab-link {
  margin-top: 10px;
  display: flex;
  height: 46px;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  color: var(--color-accent);
  text-transform: uppercase;
  border: 1px solid rgb(85 85 85 / 0.2);
  border-radius: 6px;
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 5%, transparent);
  }
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  transition: background-color 0.35s ease,
    border-color 0.35s ease;
}
.nav-menu-lab-link:hover {
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  }
  border-color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 35%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
  }
}
.nav-menu-lab-link svg {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-menu-lab-link:hover svg {
  transform: translate(2px, -2px);
}
.nav-menu-list {
  margin-top: 16px;
  display: flex;
  list-style-type: none;
  flex-direction: column;
  gap: 12px;
  padding-top: 12px;
}
.nav-menu-list-link {
  display: flex;
  height: 62px;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border: 1px solid rgb(85 85 85 / 0.1);
  border-radius: 6px;
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 5%, transparent);
  }
  transition: background-color 0.35s ease,
    border-color 0.35s ease;
}
.nav-menu-list-link:hover {
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 11%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 11%, transparent);
  }
  border-color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  }
}
.nav-menu-list-label-wrap {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.nav-menu-list-index {
  font-size: 12px;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 20%, transparent);
  }
  transition: color 0.35s ease;
}
.nav-menu-list-link:hover .nav-menu-list-index {
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 55%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 55%, transparent);
  }
}
.nav-menu-list-label {
  color: var(--color-accent);
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.9px;
}
.nav-menu-list-dot {
  height: 6px;
  width: 6px;
  border-radius: calc(infinity * 1px);
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 20%, transparent);
  }
  transition: background-color 0.35s ease,
    box-shadow 0.35s ease;
}
.nav-menu-list-link:hover .nav-menu-list-dot {
  background: var(--color-accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 8px color-mix(in srgb, var(--color-accent) 60%, transparent);
  }
}
.nav-menu-toggle {
  display: flex;
  height: 56px;
  width: 100%;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 0 24px;
  background: transparent;
  border: 0;
}
.nav-menu-toggle-label-wrap {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.nav-menu-toggle-index {
  font-size: 14px;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  }
}
.nav-menu-toggle-label {
  color: var(--color-accent);
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1.8px;
}
.nav-menu-toggle-icon-wrap {
  display: flex;
  height: 40px;
  width: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--color-accent);
  color: #060606;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-menu-root[data-open="true"] .nav-menu-toggle-icon-wrap {
  transform: rotate(90deg);
}
.nav-menu-toggle:hover .nav-menu-toggle-icon-wrap {
  transform: scale(1.06);
}
.nav-menu-root[data-open="true"]
  .nav-menu-toggle:hover
  .nav-menu-toggle-icon-wrap {
  transform: rotate(90deg) scale(1.06);
}
.nav-menu-border-svg {
  pointer-events: none;
  position: absolute;
  inset: calc(var(--spacing) * 0);
  overflow: visible;
  width: calc(100% + 1px);
  height: calc(100% + 1px);
}
.nav-menu-border-svg rect {
  stroke: rgb(85 85 85 / 0.55);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-menu-root[data-open="true"] .nav-menu-border-svg rect {
  stroke-dashoffset: 0;
}
@media (max-width: 640px) {
  .nav-menu-root {
    right: calc(var(--spacing) * 4);
    bottom: calc(var(--spacing) * 4);
    left: calc(var(--spacing) * 4);
    width: auto;
  }
  .nav-menu-inner {
    padding: 18px;
  }
  .nav-menu-list-link {
    height: 54px;
  }
}
.nav-menu-root[data-open="true"] .nav-menu-list-container {
  overflow-y: auto;
  max-height: calc(100dvh - 8.5rem);
  overscroll-behavior: contain;
}
@media (max-height: 520px) {
  .nav-menu-header,
  .nav-menu-social-grid,
  .nav-menu-lab-link {
    display: none;
  }
  .nav-menu-list {
    margin-top: calc(var(--spacing) * 0);
    padding-top: calc(var(--spacing) * 0);
  }
  .nav-menu-list-link {
    height: 46px;
    padding: 12px;
  }
  .nav-menu-list-label {
    font-size: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-menu-list-container,
  .nav-menu-border-svg rect,
  .nav-menu-toggle-icon-wrap {
    transition: none;
  }
}
.hud-metric {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
}
.hud-metric-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3);
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  }
}
.hud-metric-value {
  color: var(--color-brand);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 11px;
}
.hud-progress-bar {
  position: relative;
  height: 6px;
  width: 100%;
  overflow: hidden;
  border-radius: calc(infinity * 1px);
  background-color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 7%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent) 7%, transparent);
  }
  background-image: repeating-linear-gradient(
    to right,
    transparent 0 calc(10% - 1px),
    color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 13%, transparent) calc(10% - 1px) 10%
  );
  @supports (color: color-mix(in lab, red, red)) {
    background-image: repeating-linear-gradient(
    to right,
    transparent 0 calc(10% - 1px),
    color-mix(in srgb, var(--color-accent) 13%, transparent) calc(10% - 1px) 10%
  );
  }
}
.hud-progress-inner {
  position: relative;
  display: block;
  height: 100%;
  width: calc(var(--spacing) * 0);
  border-radius: calc(infinity * 1px);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--brand, rgb(253 255 255)) 45%, transparent),
    var(--color-brand)
  );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-brand) 45%, transparent),
    var(--color-brand)
  );
  }
  box-shadow: 0 0 10px color-mix(in srgb, var(--brand, rgb(253 255 255)) 45%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 10px color-mix(in srgb, var(--color-brand) 45%, transparent);
  }
  transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.hud-progress-inner::after {
  position: absolute;
  inset: calc(var(--spacing) * 0);
  content: "";
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 45%, transparent) 50%,
    transparent 100%
  );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--color-accent) 45%, transparent) 50%,
    transparent 100%
  );
  }
  transform: translateX(-100%);
  animation: hud-sheen 3.2s ease-in-out 1.4s infinite;
}
@keyframes hud-sheen {
  0%,
  55% {
    transform: translateX(-100%);
  }
  85%,
  100% {
    transform: translateX(100%);
  }
}
.settings-panel {
  pointer-events: none;
  visibility: hidden;
  position: fixed;
  top: calc(1/2 * 100%);
  right: calc(var(--spacing) * 13);
  z-index: 95;
  width: 320px;
  overflow-y: auto;
  padding: 20px;
  opacity: 0%;
  max-height: min(78dvh, 40rem);
  overscroll-behavior: contain;
  border: 1px solid rgb(85 85 85 / 0.35);
  border-radius: 10px;
  background: rgb(10 10 10 / 0.95);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: translate(12px, -50%) scale(0.97);
  transform-origin: right center;
  transition: opacity 0.4s ease,
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0.4s;
}
.settings-panel[data-open="true"] {
  pointer-events: auto;
  visibility: visible;
  opacity: 100%;
  transform: translate(0, -50%) scale(1);
  transition-delay: 0s;
}
.settings-panel::-webkit-scrollbar {
  width: calc(var(--spacing) * 0);
}
.settings-panel {
  scrollbar-width: none;
}
.settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
  padding-bottom: 16px;
}
.settings-title {
  color: var(--color-accent);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.settings-subtitle {
  margin-top: 2px;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1px;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  }
}
.settings-badge {
  display: flex;
  height: 34px;
  width: 34px;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(85 85 85 / 0.25);
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 5%, transparent);
  }
  font-size: 10px;
  letter-spacing: 1px;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 50%, transparent);
  }
}
.settings-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgb(85 85 85 / 0.25);
}
.settings-section:first-of-type {
  margin-top: calc(var(--spacing) * 0);
}
.settings-section-head {
  margin-bottom: 12px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 85%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 85%, transparent);
  }
}
.settings-section-index {
  margin-right: 6px;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  }
}
.settings-section-meta {
  font-size: 9px;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  }
}
.swatch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.swatch {
  position: relative;
  display: grid;
  height: 34px;
  width: 34px;
  flex: none;
  cursor: pointer;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  transition: border-color 0.3s ease,
    background-color 0.3s ease,
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.swatch:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 25%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) 25%, transparent);
  }
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 5%, transparent);
  }
}
.swatch-chip {
  height: 18px;
  width: 18px;
  border-radius: calc(infinity * 1px);
  background: var(--swatch);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.swatch[aria-checked="true"] {
  border-color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 55%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
  }
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 6%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 6%, transparent);
  }
}
.swatch[aria-checked="true"] .swatch-chip {
  transform: scale(1.25);
}
.swatch:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}
.settings-option {
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-inline: 14px;
  padding-block: 12px;
  text-align: left;
  border: 1px solid rgb(85 85 85 / 0.2);
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 3%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 3%, transparent);
  }
  transition: background-color 0.3s ease,
    border-color 0.3s ease;
}
.settings-option + .settings-option {
  margin-top: 8px;
}
.settings-option:hover {
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 7%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 7%, transparent);
  }
  border-color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  }
}
.settings-option[aria-checked="true"] {
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 8%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  }
  border-color: color-mix(in srgb, var(--brand, rgb(253 255 255)) 55%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-brand) 55%, transparent);
  }
}
.settings-option-text {
  display: flex;
  min-width: calc(var(--spacing) * 0);
  flex-direction: column;
}
.settings-option-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 65%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 65%, transparent);
  }
}
.settings-option[aria-checked="true"] .settings-option-title {
  color: var(--color-accent);
}
.settings-option-sub {
  margin-top: 3px;
  display: block;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 35%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 35%, transparent);
  }
}
.settings-eq {
  display: flex;
  height: 16px;
  flex: none;
  align-items: flex-end;
  gap: 3px;
}
.settings-eq span {
  height: 5px;
  width: 3px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 30%, transparent);
  }
  transition: background-color 0.3s ease;
}
.settings-option[aria-checked="true"] .settings-eq span {
  background: var(--color-brand);
  animation: settings-eq 1s ease-in-out infinite;
}
.settings-option[aria-checked="true"] .settings-eq span:nth-child(2) {
  animation-delay: 0.18s;
}
.settings-option[aria-checked="true"] .settings-eq span:nth-child(3) {
  animation-delay: 0.36s;
}
@keyframes settings-eq {
  0%,
  100% {
    height: 5px;
  }
  50% {
    height: 15px;
  }
}
.settings-segment {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, 1fr);
}
.settings-segment-btn {
  cursor: pointer;
  padding-inline: 4px;
  padding-block: 9px;
  border: 1px solid rgb(85 85 85 / 0.2);
  border-radius: 6px;
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 3%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 3%, transparent);
  }
  font-size: 11px;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 50%, transparent);
  }
  transition: background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}
.settings-segment-btn:hover {
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 7%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 7%, transparent);
  }
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 85%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 85%, transparent);
  }
}
.settings-segment-btn[aria-checked="true"] {
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  }
  border-color: color-mix(in srgb, var(--brand, rgb(253 255 255)) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-brand) 60%, transparent);
  }
}
.settings-foot {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 14px;
  text-transform: uppercase;
  border-top: 1px solid rgb(85 85 85 / 0.25);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  }
}
.settings-foot-dot {
  height: 5px;
  width: 5px;
  border-radius: calc(infinity * 1px);
  background: var(--color-brand);
  animation: hero-dot-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.gear-tab[aria-expanded="true"] {
  color: var(--color-brand);
  border-color: color-mix(in srgb, var(--brand, rgb(253 255 255)) 55%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-brand) 55%, transparent);
  }
}
@media (max-width: 640px) {
  .settings-panel {
    top: auto;
    right: calc(var(--spacing) * 3);
    bottom: calc(var(--spacing) * 25);
    left: calc(var(--spacing) * 3);
    width: auto;
    max-height: min(70dvh, 34rem);
    transform: translateY(14px) scale(0.99);
    transform-origin: bottom center;
  }
  .settings-panel[data-open="true"] {
    transform: translateY(0) scale(1);
  }
  .swatch {
    height: 36px;
    width: 36px;
  }
}
.settings-scrim {
  pointer-events: none;
  position: fixed;
  inset: calc(var(--spacing) * 0);
  z-index: 94;
  opacity: 0%;
  background: rgb(0 0 0 / 0.6);
  transition: opacity 0.4s ease;
}
.settings-scrim[data-open="true"] {
  pointer-events: auto;
  opacity: 100%;
}
@media (min-width: 641px) {
  .settings-scrim {
    background: transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .settings-panel,
  .settings-scrim,
  .swatch,
  .swatch-chip,
  .settings-option,
  .settings-segment-btn {
    transition: none;
  }
  .settings-option[aria-checked="true"] .settings-eq span,
  .settings-foot-dot {
    animation: none;
  }
}
.hud-status-dot,
.status-dot {
  background-color: var(--color-brand);
  box-shadow: 0 0 8px color-mix(in srgb, var(--brand, rgb(253 255 255)) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 8px color-mix(in srgb, var(--color-brand) 60%, transparent);
  }
}
.nav-menu-toggle-icon-wrap {
  background: var(--color-brand);
}
.nav-menu-social-link:hover .nav-menu-social-dot,
.nav-menu-list-link:hover .nav-menu-list-dot {
  background: var(--color-accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--brand, rgb(253 255 255)) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 12px color-mix(in srgb, var(--color-brand) 60%, transparent);
  }
}
.nav-menu-list-link:hover,
.nav-menu-social-link:hover {
  border-color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) 20%, transparent);
  }
  background-color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
  }
}
.nav-menu-lab-link:hover {
  border-color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  }
  background-color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
  }
}
.gear-tab:hover {
  color: var(--color-accent);
}
.hero-btn:hover .hero-btn-text {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.hero-btn:hover .hero-btn-icon {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.wave-bar {
  background: var(--color-brand);
}
#scroll-progress {
  background: var(--color-brand);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}
.field-input:focus,
.field-input:focus-visible {
  outline: none;
  border-color: var(--color-brand);
}
.identity-block {
  display: grid;
  grid-template-columns: auto 1px auto;
  align-items: start;
  gap: 0 0.75rem;
}
.identity-block::before {
  content: "";
  grid-column: 2;
  align-self: stretch;
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 22%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 22%, transparent);
  }
}
.identity-name {
  text-align: right;
  color: var(--color-accent);
  grid-column: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.15;
}
.identity-meta {
  grid-column: 3;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 45%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 45%, transparent);
  }
}
@media (min-width: 640px) {
  .identity-name {
    font-size: 1.15rem;
  }
  .identity-meta {
    font-size: 12px;
  }
}
.page-title {
  pointer-events: none;
  position: fixed;
  top: 1.6rem;
  right: calc(var(--spacing) * 6);
  z-index: 80;
  text-align: right;
  mix-blend-mode: difference;
}
@media (min-width: 640px) {
  .page-title {
    top: 2.28rem;
    right: calc(var(--spacing) * 10);
  }
}
.page-title-crumb {
  pointer-events: auto;
  margin-bottom: calc(var(--spacing) * 2);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  padding-right: calc(var(--spacing) * 1);
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-size: 12px;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  }
}
.page-title-crumb a {
  --tw-tracking: 0.05em;
  letter-spacing: 0.05em;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-title-crumb a:hover {
  color: var(--color-accent);
}
.page-title-sep {
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 20%, transparent);
  }
}
.page-title-current {
  font-weight: 500;
  letter-spacing: 0.05em;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 80%, transparent);
  }
}
.page-title-heading {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  color: var(--color-accent);
  text-transform: uppercase;
  transform-origin: top right;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: condensed;
  line-height: 1;
  font-size: 3rem;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 768px) {
  .page-title-heading {
    font-size: 3.75rem;
  }
}
@media (min-width: 1024px) {
  .page-title-heading {
    font-size: 4.5rem;
  }
}
@media (min-width: 1280px) {
  .page-title-heading {
    font-size: 6rem;
  }
}
@media (max-width: 1023px) {
  .page-title {
    top: calc(var(--spacing) * 18);
  }
}
@media (max-width: 639px) {
  .page-title {
    top: calc(var(--spacing) * 15);
    right: calc(var(--spacing) * 5);
  }
  .page-title-heading {
    font-size: 2rem;
  }
  .page-title-crumb {
    font-size: 10px;
  }
}
body.about-page,
body.projects-page,
body.blog-page,
body.contact-page,
body.detail-page,
body.post-page {
  --font-display: "Big Shoulders Display", "Archivo", system-ui, sans-serif;
  --font-mono: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  --font-body: "Inter", system-ui, sans-serif;
  --ab-max: 92rem;
  --ab-gut: clamp(1.25rem, 4vw, 3.5rem);
  --ab-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ab-a10: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --ab-a10: color-mix(in srgb, var(--color-accent) 10%, transparent);
  }
  --ab-a16: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 16%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --ab-a16: color-mix(in srgb, var(--color-accent) 16%, transparent);
  }
  --ab-a35: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 35%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --ab-a35: color-mix(in srgb, var(--color-accent) 35%, transparent);
  }
  --ab-a45: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 45%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --ab-a45: color-mix(in srgb, var(--color-accent) 45%, transparent);
  }
  --ab-a55: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 55%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --ab-a55: color-mix(in srgb, var(--color-accent) 55%, transparent);
  }
  --ab-a62: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 62%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --ab-a62: color-mix(in srgb, var(--color-accent) 62%, transparent);
  }
  --ab-a85: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 85%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --ab-a85: color-mix(in srgb, var(--color-accent) 85%, transparent);
  }
  --ab-b8: color-mix(in srgb, var(--brand, rgb(253 255 255)) 8%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --ab-b8: color-mix(in srgb, var(--color-brand) 8%, transparent);
  }
  --ab-b30: color-mix(in srgb, var(--brand, rgb(253 255 255)) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --ab-b30: color-mix(in srgb, var(--color-brand) 30%, transparent);
  }
  --ab-b55: color-mix(in srgb, var(--brand, rgb(253 255 255)) 55%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --ab-b55: color-mix(in srgb, var(--color-brand) 55%, transparent);
  }
  --ab-b80: color-mix(in srgb, var(--brand, rgb(253 255 255)) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --ab-b80: color-mix(in srgb, var(--color-brand) 80%, transparent);
  }
}
.ab-particles {
  pointer-events: none;
  position: fixed;
  inset: calc(var(--spacing) * 0);
  z-index: 0;
  height: 100vh;
  width: 100vw;
  opacity: 0%;
  transition: opacity 1.6s var(--ab-ease);
}
.ab-ready .ab-particles {
  opacity: 100%;
}
.ab-dots {
  pointer-events: none;
  position: fixed;
  inset: calc(var(--spacing) * 0);
  z-index: 1;
  background-image: radial-gradient(color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 7.5%, transparent) 0.8px, transparent 0.8px);
  @supports (color: color-mix(in lab, red, red)) {
    background-image: radial-gradient(color-mix(in srgb, var(--color-accent) 7.5%, transparent) 0.8px, transparent 0.8px);
  }
  background-size: 4px 4px;
  mask-image: radial-gradient(ellipse at 70% 50%, #000 0%, rgb(0 0 0 / 0.35) 70%);
}
.ab-fade {
  pointer-events: none;
  position: fixed;
  left: calc(var(--spacing) * 0);
  z-index: 20;
  width: 100%;
}
.ab-fade-top {
  top: calc(var(--spacing) * 0);
  height: calc(var(--spacing) * 32);
  background: linear-gradient(to bottom, var(--color-void), transparent);
}
.ab-fade-bottom {
  bottom: calc(var(--spacing) * 0);
  height: calc(var(--spacing) * 60);
  background: linear-gradient(to top, var(--color-void) 42%, transparent);
}
.about-page .chrome-compact,
.projects-page .chrome-compact,
.blog-page .chrome-compact,
.contact-page .chrome-compact,
.detail-page .chrome-compact,
.post-page .chrome-compact,
.about-page .chrome-rail,
.projects-page .chrome-rail,
.blog-page .chrome-rail,
.contact-page .chrome-rail,
.detail-page .chrome-rail,
.post-page .chrome-rail {
  display: none;
}
.about-page .identity-block,
.projects-page .identity-block,
.blog-page .identity-block,
.contact-page .identity-block,
.detail-page .identity-block,
.post-page .identity-block {
  display: block;
  left: 40px;
  top: 32px;
}
.about-page .identity-block::before,
.projects-page .identity-block::before,
.blog-page .identity-block::before,
.contact-page .identity-block::before,
.detail-page .identity-block::before,
.post-page .identity-block::before,
.about-page .identity-meta,
.projects-page .identity-meta,
.blog-page .identity-meta,
.contact-page .identity-meta,
.detail-page .identity-meta,
.post-page .identity-meta,
.about-page .identity-name br,
.projects-page .identity-name br,
.blog-page .identity-name br,
.contact-page .identity-name br,
.detail-page .identity-name br,
.post-page .identity-name br {
  display: none;
}
.about-page .identity-name,
.projects-page .identity-name,
.blog-page .identity-name,
.contact-page .identity-name,
.detail-page .identity-name,
.post-page .identity-name {
  font-family: var(--font-mono);
  font-size: 20px;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: -0.01em;
  letter-spacing: -0.01em;
  color: var(--color-accent);
}
.about-page .identity-name .text-muted,
.projects-page .identity-name .text-muted,
.blog-page .identity-name .text-muted,
.contact-page .identity-name .text-muted,
.detail-page .identity-name .text-muted,
.post-page .identity-name .text-muted {
  color: inherit;
}
.about-page .identity-name .text-muted::before,
.projects-page .identity-name .text-muted::before,
.blog-page .identity-name .text-muted::before,
.contact-page .identity-name .text-muted::before,
.detail-page .identity-name .text-muted::before,
.post-page .identity-name .text-muted::before {
  content: " ";
}
.about-page .page-title,
.projects-page .page-title,
.blog-page .page-title,
.contact-page .page-title,
.detail-page .page-title,
.post-page .page-title {
  top: 22px;
  right: calc(var(--spacing) * 10);
}
.about-page .page-title-heading,
.projects-page .page-title-heading,
.blog-page .page-title-heading,
.contact-page .page-title-heading,
.detail-page .page-title-heading,
.post-page .page-title-heading {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}
.about-page .chrome-contact,
.projects-page .chrome-contact,
.blog-page .chrome-contact,
.contact-page .chrome-contact,
.detail-page .chrome-contact,
.post-page .chrome-contact {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  padding: calc(var(--spacing) * 0);
  left: 40px;
  right: auto;
  bottom: 32px;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.about-page .chrome-contact p:first-child,
.projects-page .chrome-contact p:first-child,
.blog-page .chrome-contact p:first-child,
.contact-page .chrome-contact p:first-child,
.detail-page .chrome-contact p:first-child,
.post-page .chrome-contact p:first-child {
  font-family: var(--font-mono);
  font-size: 15px;
  --tw-tracking: var(--tracking-normal);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  color: var(--ab-a45);
}
.about-page .chrome-contact a,
.projects-page .chrome-contact a,
.blog-page .chrome-contact a,
.contact-page .chrome-contact a,
.detail-page .chrome-contact a,
.post-page .chrome-contact a,
.about-page .chrome-contact p + p,
.projects-page .chrome-contact p + p,
.blog-page .chrome-contact p + p,
.contact-page .chrome-contact p + p,
.detail-page .chrome-contact p + p,
.post-page .chrome-contact p + p {
  margin-top: calc(var(--spacing) * 1);
  font-size: 15px;
  color: var(--color-accent);
}
.about-page .chrome-contact .chrome-city,
.projects-page .chrome-contact .chrome-city,
.blog-page .chrome-contact .chrome-city,
.contact-page .chrome-contact .chrome-city,
.detail-page .chrome-contact .chrome-city,
.post-page .chrome-contact .chrome-city {
  color: var(--color-accent);
}
.ab-wrap {
  position: relative;
  font-family: var(--font-mono);
  color: var(--color-accent);
  width: min(100%, var(--ab-max));
  margin-inline: auto;
  padding-inline: var(--ab-gut);
}
.ab-js .ab-wrap {
  opacity: 0%;
}
.ab-js.ab-ready .ab-wrap {
  opacity: 100%;
  transition: opacity 1s var(--ab-ease) 0.3s;
}
.ab-wrap p {
  margin: calc(var(--spacing) * 0);
  font-size: 18px;
  --tw-leading: 1.625;
  line-height: 1.625;
}
.ab-block {
  margin-top: calc(var(--spacing) * 36);
}
.ab-block-spaced {
  margin-top: clamp(5rem, 11vh, 9rem);
}
.ab-wrap .ab-ch {
  margin-bottom: calc(var(--spacing) * 8);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-bottom: 0.9rem;
  font-size: 9.5px;
  --tw-tracking: 0.24em;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ab-a10);
  font-family: ui-monospace, Consolas, monospace;
  color: var(--ab-a35);
}
.ab-ch span {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand);
}
.ab-hero {
  display: grid;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 5rem);
  padding-top: clamp(8rem, 18vh, 13rem);
}
.ab-hero-l {
  min-width: calc(var(--spacing) * 0);
}
.ab-wrap .ab-kicker {
  color: var(--ab-a45);
}
.ab-h2 {
  font-family: var(--font-display);
  font-size: 48px;
  --tw-leading: 1;
  line-height: 1;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent);
  text-transform: uppercase;
  margin: 0.5rem 0;
}
.ab-line {
  display: block;
}
.ab-wrap .ab-lede,
.ab-text > p {
  font-family: var(--font-body);
  font-size: 17px;
  --tw-leading: 1.8;
  line-height: 1.8;
  color: var(--ab-a62);
}
.ab-wrap .ab-lede {
  margin-top: calc(var(--spacing) * 6);
  max-width: 52ch;
}
.ab-text > p:last-child {
  margin-top: calc(var(--spacing) * 10);
}
.ab-frame-wrap {
  position: relative;
  z-index: 1;
  margin-left: auto;
  max-width: 23rem;
  min-width: calc(var(--spacing) * 0);
  will-change: filter;
}
.ab-frame {
  position: relative;
  aspect-ratio: 2/3;
  width: 100%;
  overflow: hidden;
  background-color: #050505;
  border: 1px solid var(--ab-a16);
  transition: border-color 0.5s var(--ab-ease),
    box-shadow 0.5s var(--ab-ease),
    transform 0.6s var(--ab-ease);
}
.ab-frame::before,
.ab-frame::after {
  pointer-events: none;
  position: absolute;
  z-index: 3;
  height: 11px;
  width: 11px;
  opacity: 50%;
  content: "";
  border: 0 solid var(--color-brand);
}
.ab-frame::before {
  top: calc(var(--spacing) * 2);
  left: calc(var(--spacing) * 2);
  border-width: 1px 0 0 1px;
}
.ab-frame::after {
  right: calc(var(--spacing) * 2);
  bottom: calc(var(--spacing) * 2);
  border-width: 0 1px 1px 0;
}
@media (hover: hover) and (pointer: fine) {
  .ab-frame:hover {
    border-color: var(--ab-b55);
    box-shadow: 0 0 26px color-mix(in srgb, var(--brand, rgb(253 255 255)) 22%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 26px color-mix(in srgb, var(--color-brand) 22%, transparent);
    }
    transform: translateY(-3px);
  }
}
.ab-frame-img {
  position: absolute;
  inset: calc(var(--spacing) * 0);
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
  opacity: 70%;
  filter: grayscale(1) contrast(1.05);
}
.ab-frame.is-live .ab-frame-img {
  visibility: hidden;
}
.ab-canvas {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  opacity: 0%;
}
.ab-frame.is-live .ab-canvas {
  opacity: 100%;
}
.ab-frame-tint {
  pointer-events: none;
  position: absolute;
  inset: calc(var(--spacing) * 0);
  z-index: 2;
  background: var(--ab-b8);
  mix-blend-mode: color;
}
.ab-frame-scan {
  position: absolute;
  left: calc(var(--spacing) * 0);
  z-index: 3;
  height: 1px;
  width: 100%;
  opacity: 50%;
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 25%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 25%, transparent);
  }
  box-shadow: 0 0 10px color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 10px color-mix(in srgb, var(--color-accent) 30%, transparent);
  }
  animation: ab-scan 7s linear infinite;
}
@keyframes ab-scan {
  0% {
    top: 0;
  }
  100% {
    top: 100%;
  }
}
.ab-wrap .ab-cap {
  margin-top: 0.85rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
  font-size: 8.5px;
  --tw-leading: 1.4;
  line-height: 1.4;
  --tw-tracking: 0.2em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: ui-monospace, Consolas, monospace;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  }
}
.ab-facts {
  margin: calc(var(--spacing) * 0);
  display: grid;
  gap: calc(var(--spacing) * 0);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin-top: clamp(3.5rem, 8vh, 6rem);
  border-top: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 12%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--color-accent) 12%, transparent);
  }
  border-bottom: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 12%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 12%, transparent);
  }
}
.ab-facts > div {
  padding: 1.3rem 1.75rem 1.4rem 0;
}
.ab-facts > div + div {
  padding-left: calc(var(--spacing) * 7);
  border-left: 1px solid var(--ab-a10);
}
.ab-facts dt {
  margin-bottom: 0.45rem;
  font-size: 9.5px;
  --tw-tracking: 0.22em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-family: ui-monospace, Consolas, monospace;
  color: var(--ab-a35);
}
.ab-facts dd {
  margin: calc(var(--spacing) * 0);
  font-family: var(--font-mono);
  font-size: 12.5px;
  --tw-leading: 1.45;
  line-height: 1.45;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: 0.04em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 90%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 90%, transparent);
  }
}
.ab-rules {
  margin: calc(var(--spacing) * 0);
  display: grid;
  list-style-type: none;
  gap: 1px;
  padding-top: 1px;
  grid-template-columns: minmax(0, 1fr);
  background: var(--ab-a10);
}
.ab-rules::after {
  display: none;
  background-color: var(--color-void);
  content: "";
  grid-column: auto / -1;
}
@media (min-width: 560px) {
  .ab-rules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ab-rules::after {
    display: block;
  }
}
@media (min-width: 768px) {
  .ab-rules {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1201px) {
  .ab-rules {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1400px) {
  .ab-rules {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .ab-rules::after {
    display: none;
  }
}
.ab-rules li {
  position: relative;
  background-color: var(--color-void);
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  transition: background-color 0.5s var(--ab-ease);
}
.ab-rules li:hover {
  background: color-mix(in srgb, var(--brand, rgb(253 255 255)) 4%, #000000);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-brand) 4%, var(--color-void));
  }
}
.ab-rules .n {
  margin-bottom: 1.1rem;
  display: block;
  font-size: 10px;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: 0.16em;
  letter-spacing: 0.16em;
  font-family: ui-monospace, Consolas, monospace;
  color: var(--ab-b80);
}
.ab-wrap .ab-rules h3 {
  font-family: var(--font-display);
  --tw-leading: 1.1;
  line-height: 1.1;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: 0.02em;
  letter-spacing: 0.02em;
  color: var(--color-accent);
  text-transform: uppercase;
  margin: 0 0 0.85rem;
  font-size: clamp(20px, 1.5vw, 26px);
}
.ab-wrap .ab-rules p {
  font-family: var(--font-body);
  font-size: 15px;
  --tw-leading: 1.75;
  line-height: 1.75;
  color: var(--ab-a55);
}
.ab-stack {
  margin-block: calc(var(--spacing) * 12);
  display: flex;
  flex-direction: column;
}
.ab-cat {
  display: grid;
  gap: 0.9rem;
  padding-block: 1.6rem;
  grid-template-columns: minmax(0, 1fr);
  border-bottom: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 9%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 9%, transparent);
  }
}
.ab-cat:first-child {
  padding-top: calc(var(--spacing) * 0);
}
.ab-cat-head {
  display: flex;
  align-items: baseline;
  gap: calc(var(--spacing) * 3);
}
.ab-cat-label {
  font-size: 9px;
  --tw-tracking: 0.24em;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-family: ui-monospace, Consolas, monospace;
  color: color-mix(in srgb, var(--brand, rgb(253 255 255)) 70%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) 70%, transparent);
  }
}
.ab-cat-title {
  font-family: var(--font-mono);
  font-size: 12px;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: 0.2em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ab-a85);
}
.ab-list {
  margin: calc(var(--spacing) * 0);
  display: flex;
  list-style-type: none;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: calc(var(--spacing) * 0);
}
.ab-chip {
  display: flex;
  min-width: calc(var(--spacing) * 0);
  align-items: baseline;
  gap: 0.45rem;
  padding-inline: 0.7rem;
  padding-block: 0.35rem;
  border: 1px solid var(--ab-a16);
  border-radius: 99px;
  cursor: default;
  transition: border-color 0.4s,
    color 0.4s,
    background-color 0.4s;
}
.ab-chip:hover {
  border-color: var(--ab-b55);
  background: color-mix(in srgb, var(--brand, rgb(253 255 255)) 6%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-brand) 6%, transparent);
  }
}
.ab-idx {
  display: none;
}
.ab-lbl {
  overflow: hidden;
  font-size: 10px;
  --tw-tracking: 0.16em;
  letter-spacing: 0.16em;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
  font-family: ui-monospace, Consolas, monospace;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 65%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 65%, transparent);
  }
}
.ab-chip:hover .ab-lbl {
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 95%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 95%, transparent);
  }
}
.ab-cta {
  margin: 6rem 0 25vh;
}
.ab-wrap .ab-cta-sub {
  margin-top: calc(var(--spacing) * 6);
  max-width: 52ch;
  font-family: var(--font-body);
  font-size: 16px;
  --tw-leading: 1.8;
  line-height: 1.8;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 60%, transparent);
  }
}
.ab-cta-row {
  margin-top: calc(var(--spacing) * 24);
  display: grid;
  gap: calc(var(--spacing) * 4);
}
.ab-btn {
  display: flex;
  width: 100%;
  max-width: 300px;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 3);
  border-radius: var(--radius-md);
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 4);
  font-family: var(--font-mono);
  font-size: 16px;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: 0.08em;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  text-transform: uppercase;
  border: 1px solid var(--ab-b30);
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 5%, transparent);
  }
  transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ab-btn svg {
  height: 14px;
  width: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  transition: transform 0.4s var(--ab-ease);
}
.ab-btn:hover {
  border-color: var(--ab-a35);
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  }
}
.ab-btn:hover svg {
  transform: translate(2px, -2px);
}
.ab-js [data-rv] {
  opacity: 0%;
  transform: translateY(40px);
  transition: opacity 0.9s var(--ab-ease),
    transform 1s var(--ab-ease),
    border-color 0.3s,
    background-color 0.3s;
}
.ab-js [data-rv].in {
  opacity: 100%;
  transform: none;
}
.xh-on,
.xh-on a,
.xh-on button {
  cursor: none !important;
}
.xh-on .cursor-dot,
.xh-on .cursor-ring {
  display: none;
}
.xh-dot {
  pointer-events: none;
  position: fixed;
  top: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  z-index: 1000;
  height: calc(var(--spacing) * 6);
  width: calc(var(--spacing) * 6);
  border-radius: calc(infinity * 1px);
  background-color: var(--color-white);
  margin: -0.75rem 0 0 -0.75rem;
  border: 1px solid var(--color-accent);
  mix-blend-mode: difference;
  will-change: transform;
  transition: width 0.3s var(--ab-ease),
    height 0.3s var(--ab-ease),
    margin 0.3s var(--ab-ease),
    opacity 0.3s;
}
.xh-dot.big {
  height: calc(var(--spacing) * 12);
  width: calc(var(--spacing) * 12);
  margin: -1.5rem 0 0 -1.5rem;
}
.xh-dot.hide {
  opacity: 0%;
}
.xh-cross {
  pointer-events: none;
  position: fixed;
  top: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  z-index: 2;
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  }
  will-change: transform;
}
.xh-cross-h {
  height: 1px;
  width: 100%;
}
.xh-cross-v {
  height: 100%;
  width: 1px;
}
@media (min-width: 640px) {
  .ab-h2 {
    font-size: 60px;
  }
  .ab-cta-row {
    display: flex;
    gap: calc(var(--spacing) * 6);
  }
}
@media (min-width: 900px) {
  .ab-hero {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  }
  .ab-cat {
    align-items: baseline;
    gap: calc(var(--spacing) * 6);
    grid-template-columns: 13rem minmax(0, 1fr);
  }
  .ab-cat-head {
    flex-direction: column;
    gap: 0.35rem;
  }
}
@media (min-width: 1024px) {
  .ab-h2 {
    font-size: 68px;
  }
}
@media (min-width: 1280px) {
  .ab-h2 {
    font-size: 76px;
  }
}
@media (max-width: 1023px) {
  .about-page .page-title,
  .projects-page .page-title,
  .blog-page .page-title,
  .contact-page .page-title {
    top: 14px;
    right: calc(var(--spacing) * 4);
  }
  .about-page .identity-block,
  .projects-page .identity-block,
  .blog-page .identity-block,
  .contact-page .identity-block {
    left: 1rem;
    top: 1rem;
  }
  .about-page .chrome-contact,
  .projects-page .chrome-contact,
  .blog-page .chrome-contact,
  .contact-page .chrome-contact {
    left: 1.25rem;
  }
  .ab-fade-bottom {
    height: calc(var(--spacing) * 40);
  }
}
@media (max-width: 1279px) {
  .projects-page .chrome-contact {
    display: none;
  }
}
@media (max-width: 1399px) {
  .blog-page .chrome-contact {
    display: none;
  }
}
@media (max-height: 560px) {
  .about-page .chrome-contact,
  .projects-page .chrome-contact,
  .blog-page .chrome-contact {
    display: none;
  }
}
@media (min-width: 560px) and (max-width: 1023px) {
  .ab-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ab-facts > div:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }
  .ab-facts > div:nth-child(n + 3) {
    border-top: 1px solid var(--ab-a10);
  }
}
@media (max-width: 899px) {
  .ab-frame-wrap {
    margin-left: calc(var(--spacing) * 0);
  }
}
@media (max-width: 559px) {
  .ab-h2 {
    font-size: 40px;
  }
  .ab-wrap .ab-lede,
  .ab-text > p {
    font-size: 16px;
  }
  .ab-wrap .ab-rules p {
    font-size: 14px;
  }
  .ab-cta {
    margin-bottom: 15vh;
  }
}
@media (max-width: 767px) {
  .ab-facts {
    grid-template-columns: minmax(0, 1fr);
  }
  .ab-facts > div,
  .ab-facts > div + div {
    padding: 0.95rem 0 1rem;
    border-left: 0;
  }
  .ab-facts > div + div {
    border-top: 1px solid var(--ab-a10);
  }
  .ab-block {
    margin-top: calc(var(--spacing) * 48);
  }
  .ab-wrap .ab-cap {
    display: none;
  }
  .ab-frame-wrap {
    max-width: 17rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ab-js [data-rv],
  .ab-js .ab-wrap {
    opacity: 100%;
    transform: none;
    transition: none;
  }
  .ab-frame-scan {
    animation: none;
  }
}
@font-face {
  font-family: "Project Display";
  src: url(../../assets/fonts/project-display.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Project Mono";
  src: url(../../assets/fonts/project-mono.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
}
.pj-dots {
  pointer-events: none;
  position: fixed;
  inset: calc(var(--spacing) * 0);
  z-index: 1;
  background-image: radial-gradient(color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 7.5%, transparent) 0.8px, transparent 0.8px);
  @supports (color: color-mix(in lab, red, red)) {
    background-image: radial-gradient(color-mix(in srgb, var(--color-accent) 7.5%, transparent) 0.8px, transparent 0.8px);
  }
  background-size: 4px 4px;
  mask-image: radial-gradient(ellipse at 70% 50%, #000 0%, rgb(0 0 0 / 0.35) 70%);
}
.pj-fade {
  pointer-events: none;
  position: fixed;
  left: calc(var(--spacing) * 0);
  z-index: 20;
  height: calc(var(--spacing) * 32);
  width: 100%;
}
.pj-fade-top {
  top: calc(var(--spacing) * 0);
  background: linear-gradient(to bottom, var(--color-void), transparent);
}
.pj-fade-bottom {
  bottom: calc(var(--spacing) * 0);
  height: calc(var(--spacing) * 28);
  background: linear-gradient(to top, var(--color-void) 42%, transparent);
}
@media (min-width: 1024px) {
  .pj-fade-bottom {
    height: calc(var(--spacing) * 44);
  }
}
.pj-list {
  position: relative;
  margin: calc(var(--spacing) * 0);
  list-style-type: none;
  padding: 7rem 1.25rem 7rem;
}
.pj-item {
  position: relative;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.pj-list:has(.pj-card:hover) .pj-item:not(:hover) {
  opacity: 60%;
}
.pj-wrap.pj-infinite {
  position: fixed;
  inset: calc(var(--spacing) * 0);
  z-index: 1;
  overflow: hidden;
}
.pj-infinite .pj-list {
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
}
.pj-infinite .pj-item {
  position: absolute;
  top: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  width: 100%;
  will-change: transform;
}
.pj-wrap.is-scrolling .pj-item {
  pointer-events: none;
}
.pj-wrap.is-scrolling .pj-hud,
.pj-wrap.is-scrolling .pj-scan,
.pj-wrap.is-scrolling .pj-card::before,
.pj-wrap.is-scrolling .pj-card::after {
  opacity: 0 !important;
}
.pj-view {
  pointer-events: none;
  position: fixed;
  top: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  z-index: 40;
  width: calc(var(--spacing) * 32);
  border-radius: var(--radius-lg);
  padding-block: calc(var(--spacing) * 2);
  text-align: center;
  opacity: 0%;
  border: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent);
  }
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  }
  backdrop-filter: blur(8px);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  transition: opacity 0.3s;
  will-change: transform;
}
.pj-view.on {
  opacity: 100%;
}
.pj-card {
  position: relative;
  margin-top: -1px;
  display: block;
  padding-block: calc(var(--spacing) * 8);
  border-top: 1px solid var(--ab-a10);
  border-bottom: 1px solid var(--ab-a10);
  color: var(--color-accent);
  transition: border-color 0.5s;
}
.pj-card::before,
.pj-card::after {
  position: absolute;
  left: calc(var(--spacing) * 0);
  z-index: 5;
  width: calc(var(--spacing) * 0);
  content: "";
  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s;
}
.pj-card::before {
  top: -1px;
  height: 1.5px;
  background: var(--color-brand);
}
.pj-card::after {
  bottom: -1px;
  height: 1px;
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 30%, transparent);
  }
}
.pj-card:hover::before,
.pj-card:hover::after {
  width: 100%;
}
.pj-card:focus-visible {
  outline: 1px solid var(--color-brand);
  outline-offset: 5px;
}
.pj-row {
  position: relative;
  display: block;
  --tw-tracking: 0.025em;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  font-family: var(--font-display);
}
.pj-js .pj-item:not(.in) .pj-row {
  opacity: 0%;
  transform: translateY(24px);
}
.pj-row {
  transition: opacity 0.9s var(--ab-ease),
    transform 1s var(--ab-ease);
}
.pj-row::before {
  pointer-events: none;
  position: absolute;
  z-index: calc(1 * -1);
  opacity: 0%;
  content: "";
  inset: -1.5rem -1.75rem;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--brand, rgb(253 255 255)) 7%, transparent),
    color-mix(in srgb, var(--brand, rgb(253 255 255)) 2%, transparent) 38%,
    transparent 68%
  );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-brand) 7%, transparent),
    color-mix(in srgb, var(--color-brand) 2%, transparent) 38%,
    transparent 68%
  );
  }
  transition: opacity 0.55s var(--ab-ease);
}
.pj-card:hover .pj-row::before,
.pj-item.is-focus .pj-row::before {
  opacity: 100%;
}
.pj-media {
  position: relative;
  margin-bottom: calc(var(--spacing) * 5);
  flex: none;
}
.pj-media::before,
.pj-media::after {
  pointer-events: none;
  position: absolute;
  height: 9px;
  width: 9px;
  opacity: 0%;
  content: "";
  transition: opacity 0.5s var(--ab-ease),
    transform 0.5s var(--ab-ease);
}
.pj-media::before {
  top: calc(5px * -1);
  left: calc(5px * -1);
  border-top: 1px solid var(--color-brand);
  border-left: 1px solid var(--color-brand);
  transform: translate(4px, 4px);
}
.pj-media::after {
  right: calc(5px * -1);
  bottom: calc(5px * -1);
  border-right: 1px solid var(--color-brand);
  border-bottom: 1px solid var(--color-brand);
  transform: translate(-4px, -4px);
}
.pj-card:hover .pj-media::before,
.pj-card:hover .pj-media::after,
.pj-item.is-focus .pj-media::before,
.pj-item.is-focus .pj-media::after {
  opacity: 100%;
  transform: none;
}
.pj-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ab-a10);
  border-radius: 3px;
  transition: border-color 0.5s,
    box-shadow 0.5s;
}
.pj-zoom {
  position: relative;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.pj-img {
  display: block;
  width: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 10;
  filter: grayscale(1) contrast(1.05) brightness(0.86);
  transition: opacity 0.5s,
    filter 0.6s var(--ab-ease);
}
.pj-video {
  pointer-events: none;
  position: absolute;
  inset: calc(var(--spacing) * 0);
  height: 100%;
  width: 100%;
  object-fit: cover;
  opacity: 0%;
  transition: opacity 0.3s;
}
.pj-card.is-playing .pj-video {
  opacity: 100%;
}
.pj-card.is-playing .pj-img {
  opacity: 0%;
}
.pj-item.is-focus .pj-img {
  filter: grayscale(0.45) contrast(1.05) brightness(0.96);
}
.pj-card:hover .pj-img {
  filter: none;
}
.pj-card:hover .pj-frame {
  border-color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  }
  box-shadow: 0 0 30px color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 30px color-mix(in srgb, var(--color-accent) 5%, transparent);
  }
}
.pj-card:hover .pj-zoom {
  transform: scale(1.05);
}
.pj-scan {
  pointer-events: none;
  position: absolute;
  top: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  z-index: 20;
  height: 1px;
  width: 100%;
  opacity: 0%;
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 30%, transparent);
  }
  box-shadow: 0 0 8px color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 8px color-mix(in srgb, var(--color-accent) 20%, transparent);
  }
  transition: opacity 0.5s;
}
.pj-card:hover .pj-scan {
  opacity: 100%;
  animation: pj-scan 8s linear infinite;
}
@keyframes pj-scan {
  0% {
    top: -10%;
    opacity: 0;
  }
  5%,
  95% {
    opacity: 1;
  }
  100% {
    top: 110%;
    opacity: 0;
  }
}
.pj-hud {
  pointer-events: none;
  position: absolute;
  inset: calc(var(--spacing) * 0);
  z-index: 30;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--spacing) * 2);
  opacity: 0%;
  transition: opacity 0.5s;
}
.pj-card:hover .pj-hud {
  opacity: 100%;
}
.pj-hud .h-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.pj-hud .h-lbl,
.pj-hud .h-st {
  overflow: hidden;
  font-size: 7px;
  --tw-tracking: 0.1em;
  letter-spacing: 0.1em;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
  font-family: ui-monospace, Consolas, monospace;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  }
}
.pj-hud .h-st {
  color: rgb(34 197 94 / 0.6);
  animation: hero-dot-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.pj-meta {
  min-width: calc(var(--spacing) * 0);
}
.pj-top {
  margin-bottom: 0.7rem;
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 8%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 8%, transparent);
  }
  transition: border-color 0.5s;
}
.pj-num {
  font-family: var(--font-mono);
  font-size: 12px;
  --tw-leading: 1;
  line-height: 1;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: 0.1em;
  letter-spacing: 0.1em;
  color: var(--color-brand);
  transition: color 0.5s;
}
.pj-kick {
  overflow: hidden;
  font-size: 10px;
  --tw-tracking: 0.16em;
  letter-spacing: 0.16em;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, Consolas, monospace;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 42%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 42%, transparent);
  }
}
.pj-name {
  margin: calc(var(--spacing) * 0);
  width: fit-content;
  font-size: 26px;
  --tw-leading: 1.05;
  line-height: 1.05;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: 0.025em;
  letter-spacing: 0.025em;
  color: var(--color-accent);
  font-family: var(--font-display);
  transition: transform 0.6s var(--ab-ease);
}
.pj-card:hover .pj-name {
  transform: translateX(6px);
}
.pj-desc {
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 14px;
  --tw-leading: 1.65;
  line-height: 1.65;
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  --tw-tracking: var(--tracking-normal);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin: 0.75rem 0 0;
  color: var(--ab-a55);
}
.pj-foot-row {
  margin-top: calc(var(--spacing) * 4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
}
.pj-tags {
  margin: calc(var(--spacing) * 0);
  display: flex;
  min-width: calc(var(--spacing) * 0);
  list-style-type: none;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: calc(var(--spacing) * 0);
}
.pj-tag {
  padding-inline: 0.6rem;
  padding-block: 0.3rem;
  font-size: 9.5px;
  --tw-leading: 1.3;
  line-height: 1.3;
  --tw-tracking: 0.14em;
  letter-spacing: 0.14em;
  white-space: nowrap;
  text-transform: uppercase;
  border: 1px solid var(--ab-a16);
  border-radius: 99px;
  font-family: ui-monospace, Consolas, monospace;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 60%, transparent);
  }
  transition: border-color 0.5s,
    color 0.5s;
}
.pj-card:hover .pj-tag {
  border-color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 32%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) 32%, transparent);
  }
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 85%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 85%, transparent);
  }
}
.pj-go {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.45rem;
  font-size: 9.5px;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: 0.18em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: ui-monospace, Consolas, monospace;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  }
  transition: color 0.5s;
}
.pj-go i {
  font-style: normal;
  transition: transform 0.5s var(--ab-ease);
}
.pj-card:hover .pj-go {
  color: var(--color-brand);
}
.pj-card:hover .pj-go i {
  transform: translateX(5px);
}
.pj-item.is-focus .pj-num {
  text-shadow: 0 0 14px color-mix(in srgb, var(--brand, rgb(253 255 255)) 45%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    text-shadow: 0 0 14px color-mix(in srgb, var(--color-brand) 45%, transparent);
  }
}
.pj-item.is-focus .pj-top {
  border-color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) 20%, transparent);
  }
}
.pj-item.is-focus .pj-go {
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 55%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 55%, transparent);
  }
}
.pj-rail,
.pj-stat,
.pj-guides,
.pj-gauge {
  display: none;
}
.pj-rail {
  position: fixed;
  top: calc(1/2 * 100%);
  z-index: 30;
  max-width: 15rem;
  left: 2.5rem;
  transform: translateY(-50%);
}
.pj-rail-k {
  margin-bottom: 1.1rem;
  display: block;
  padding-left: 2.1rem;
  font-size: 9.5px;
  --tw-tracking: 0.26em;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-family: ui-monospace, Consolas, monospace;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 28%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 28%, transparent);
  }
}
.pj-rail-body {
  display: flex;
  align-items: stretch;
  gap: 1.4rem;
}
.pj-gauge {
  pointer-events: none;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--spacing) * 3);
}
.g-lbl {
  font-size: 8px;
  --tw-tracking: 0.14em;
  letter-spacing: 0.14em;
  font-family: ui-monospace, Consolas, monospace;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 20%, transparent);
  }
}
.g-track {
  position: relative;
  width: 1px;
  flex: 1;
  min-height: clamp(150px, 26vh, 300px);
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 5%, transparent);
  }
}
.g-mark {
  position: absolute;
  left: calc(1/2 * 100%);
  height: 1px;
  width: 7px;
  background: var(--ab-a10);
  transform: translateX(-50%);
}
.g-pointer {
  position: absolute;
  left: calc(1/2 * 100%);
  height: calc(var(--spacing) * 8);
  width: 6px;
  border-radius: calc(infinity * 1px);
  background-color: var(--color-white);
  top: calc(16px + var(--gauge, 0) * (100% - 32px));
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgb(255 255 255 / 0.55);
}
.pj-index {
  margin: calc(var(--spacing) * 0);
  display: grid;
  list-style-type: none;
  align-content: center;
  gap: 0.15rem;
  padding: calc(var(--spacing) * 0);
  max-height: calc(100vh - 14rem);
  overflow-y: auto;
  scrollbar-width: none;
}
.pj-index::-webkit-scrollbar {
  display: none;
}
.pj-index button {
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: baseline;
  gap: 0.7rem;
  border-style: var(--tw-border-style);
  border-width: 0px;
  background-color: transparent;
  padding-inline: calc(var(--spacing) * 0);
  padding-block: 0.34rem;
  text-align: left;
  font-size: 10px;
  --tw-tracking: 0.16em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: ui-monospace, Consolas, monospace;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 26%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 26%, transparent);
  }
  transition: color 0.45s var(--ab-ease);
}
.pj-index .n {
  flex: none;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}
.pj-index .t {
  display: none;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: transform 0.45s var(--ab-ease);
}
.pj-index button:hover {
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 70%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 70%, transparent);
  }
}
.pj-index li.on button {
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 95%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 95%, transparent);
  }
}
.pj-index li.on .n {
  color: var(--color-brand);
}
.pj-index li.on .t {
  transform: translateX(3px);
}
.pj-index button:focus-visible {
  outline: 1px solid var(--color-brand);
  outline-offset: 2px;
}
.pj-stat {
  pointer-events: none;
  position: fixed;
  top: calc(1/2 * 100%);
  z-index: 30;
  width: calc(var(--spacing) * 52);
  text-align: right;
  right: 40px;
  transform: translateY(-50%);
}
.pj-stat-n {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.3rem;
  font-size: 64px;
  --tw-leading: 0.9;
  line-height: 0.9;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-display);
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 90%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 90%, transparent);
  }
}
.pj-stat-n em {
  font-family: var(--font-mono);
  font-size: 14px;
  font-style: normal;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 22%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 22%, transparent);
  }
}
.pj-stat p {
  margin: calc(var(--spacing) * 0);
}
.pj-stat-t {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 12px;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: 0.06em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-top: 1px solid var(--ab-a10);
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 75%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 75%, transparent);
  }
}
.pj-stat-k {
  margin-top: 0.4rem;
  font-size: 9.5px;
  --tw-tracking: 0.2em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: ui-monospace, Consolas, monospace;
  color: color-mix(in srgb, var(--brand, rgb(253 255 255)) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) 80%, transparent);
  }
}
.pj-scrollhint {
  margin-top: calc(var(--spacing) * 9);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 9px;
  --tw-tracking: 0.26em;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-family: ui-monospace, Consolas, monospace;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 25%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 25%, transparent);
  }
}
.pj-scrollhint i {
  position: relative;
  height: 1px;
  width: 34px;
  overflow: hidden;
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 12%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  }
}
.pj-scrollhint i::after {
  position: absolute;
  inset-block: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  width: calc(var(--spacing) * 3);
  content: "";
  background: var(--color-brand);
  animation: pj-hint 2.4s var(--ab-ease) infinite;
}
@keyframes pj-hint {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(34px);
  }
}
.pj-guides {
  pointer-events: none;
  position: fixed;
  inset: calc(var(--spacing) * 0);
  z-index: 0;
}
.pj-guides .gl {
  position: absolute;
  top: calc(var(--spacing) * 0);
  height: 100%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 7%, transparent) 18%,
    color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 7%, transparent) 82%,
    transparent
  );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
    to bottom,
    transparent,
    color-mix(in srgb, var(--color-accent) 7%, transparent) 18%,
    color-mix(in srgb, var(--color-accent) 7%, transparent) 82%,
    transparent
  );
  }
}
.projects-page .pj-guides .gl-1 {
  left: 15%;
}
.projects-page .pj-guides .gl-2 {
  left: 73%;
}
@media (min-width: 640px) {
  .pj-list {
    padding: 6rem 2.5rem 8rem;
  }
  .pj-card {
    display: flex;
    min-height: 200px;
    align-items: center;
  }
  .pj-row {
    display: flex;
    width: 100%;
    align-items: center;
    gap: calc(var(--spacing) * 7);
  }
  .pj-meta {
    flex: 1;
  }
  .pj-media {
    margin-bottom: calc(var(--spacing) * 0);
  }
  .pj-frame {
    width: calc(var(--spacing) * 32);
  }
  .pj-img {
    aspect-ratio: 1;
  }
  .pj-name {
    font-size: 34px;
  }
}
@media (min-width: 768px) {
  .pj-row {
    gap: calc(var(--spacing) * 9);
  }
  .pj-frame {
    width: calc(var(--spacing) * 36);
  }
  .pj-name {
    font-size: 40px;
    --tw-leading: 1;
    line-height: 1;
  }
}
@media (min-width: 1024px) {
  .pj-card {
    min-height: 214px;
  }
  .pj-frame {
    width: calc(var(--spacing) * 40);
  }
  .pj-name {
    font-size: 44px;
  }
}
@media (min-width: 1280px) {
  .pj-list {
    width: 58%;
    margin-left: 15%;
    padding: 9rem 0 9rem;
  }
  .pj-card {
    min-height: 208px;
  }
  .projects-page .pj-rail {
    display: block;
  }
  .projects-page .pj-gauge {
    display: flex;
  }
  .projects-page .pj-stat,
  .projects-page .pj-guides {
    display: block;
  }
}
@media (min-width: 1536px) {
  .pj-list {
    width: 55%;
    margin-left: 17%;
  }
  .projects-page .pj-guides .gl-1 {
    left: 17%;
  }
  .projects-page .pj-guides .gl-2 {
    left: 72%;
  }
  .pj-frame {
    width: calc(var(--spacing) * 44);
  }
  .pj-name {
    font-size: 50px;
  }
}
@media (min-width: 1600px) {
  .projects-page .pj-index .t {
    display: block;
  }
}
@media (max-width: 767px) {
  .pj-list {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
  .pj-foot-row {
    gap: calc(var(--spacing) * 3);
  }
}
@media (max-width: 639px) {
  .pj-media {
    margin-bottom: calc(var(--spacing) * 5);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pj-js .pj-item:not(.in) .pj-row {
    opacity: 100%;
    transform: none;
  }
  .pj-row,
  .pj-name,
  .pj-zoom {
    transition: none;
  }
  .pj-card:hover .pj-scan,
  .pj-scrollhint i::after,
  .pj-hud .h-st {
    animation: none;
  }
}
.blog-page .chrome-clock {
  display: none;
}
.blog-page .page-title-heading {
  font-size: clamp(38px, 6vw, 76px);
  line-height: 0.85;
  letter-spacing: -0.01em;
}
.bl-count {
  margin: calc(var(--spacing) * 0);
  margin-top: 0.35rem;
  text-align: right;
  font-size: 10px;
  --tw-tracking: 0.25em;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  color: var(--ab-a35);
}
.blog-page main {
  position: relative;
}
.bl-inner {
  margin-inline: auto;
  max-width: 1180px;
  padding: clamp(140px, 22vh, 230px) 16px 180px;
}
.bl-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
  padding-top: calc(var(--spacing) * 11);
  padding-bottom: calc(var(--spacing) * 5);
}
.bl-bar-label {
  font-family: var(--font-mono);
  font-size: 10px;
  --tw-tracking: 0.3em;
  letter-spacing: 0.3em;
  color: var(--ab-a35);
}
.bl-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.5rem;
}
.bl-filters,
.bl-views {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.bl-filters .bl-chip {
  cursor: pointer;
  background-color: transparent;
  padding-inline: 0.85rem;
  padding-block: 0.4rem;
  font-family: var(--font-mono);
  font-size: 9.5px;
  --tw-leading: 1;
  line-height: 1;
  --tw-tracking: 0.2em;
  letter-spacing: 0.2em;
  border: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 14%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-accent) 14%, transparent);
  }
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 50%, transparent);
  }
  transition: color 0.3s,
    border-color 0.3s,
    background 0.3s;
}
.bl-filters .bl-chip:hover {
  color: var(--color-accent);
  border-color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  }
}
.bl-filters .bl-chip.on {
  background-color: var(--color-accent);
  color: #000;
  border-color: var(--color-accent);
}
.bl-views {
  gap: calc(var(--spacing) * 0);
  padding: calc(var(--spacing) * 0.5);
  border: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 12%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-accent) 12%, transparent);
  }
  border-radius: 2px;
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 3%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 3%, transparent);
  }
}
.bl-views .bl-vw {
  display: grid;
  height: 26px;
  width: 30px;
  cursor: pointer;
  place-items: center;
  border-style: var(--tw-border-style);
  border-width: 0px;
  background-color: transparent;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  }
  transition: color 0.3s,
    background 0.3s;
}
.bl-views .bl-vw svg {
  height: 13px;
  width: 13px;
  fill: currentColor;
}
.bl-views .bl-vw:hover {
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 80%, transparent);
  }
}
.bl-views .bl-vw.on {
  background-color: var(--color-accent);
  color: #000;
}
.bl-filters .bl-chip:focus-visible,
.bl-views .bl-vw:focus-visible {
  outline: 1px solid var(--color-brand);
  outline-offset: 1px;
}
@media (hover: none), (pointer: coarse) {
  .bl-views .bl-vw {
    height: 34px;
    width: 42px;
  }
  .bl-views .bl-vw svg {
    height: 15px;
    width: 15px;
  }
  .bl-filters .bl-chip {
    padding-block: 0.7rem;
  }
}
.bl-cards {
  margin: calc(var(--spacing) * 0);
  display: grid;
  list-style-type: none;
  padding: calc(var(--spacing) * 0);
  gap: clamp(1.75rem, 3vw, 2.75rem);
}
.bl-cards[data-view="grid"] {
  grid-template-columns: 1fr;
}
.bl-cards[data-view="list"] {
  gap: calc(var(--spacing) * 0);
  grid-template-columns: 1fr;
}
.bl-row[hidden] {
  display: none;
}
.bl-row {
  transition: opacity 0.8s var(--ab-ease),
    transform 0.9s var(--ab-ease);
  transition-delay: calc(var(--k, 0) * 55ms);
}
.bl-js .bl-row:not(.in) {
  opacity: 0%;
  transform: translateY(12px);
}
.bl-card {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  gap: calc(var(--spacing) * 5);
  transition: transform 0.6s var(--ab-ease);
}
.bl-card:hover {
  transform: translateY(-4px);
}
.bl-card::before {
  pointer-events: none;
  position: absolute;
  z-index: calc(1 * -1);
  opacity: 0%;
  content: "";
  inset: -1.35rem -1.5rem;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--brand, rgb(253 255 255)) 8%, transparent),
    color-mix(in srgb, var(--brand, rgb(253 255 255)) 2%, transparent) 42%,
    transparent 72%
  );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--color-brand) 8%, transparent),
    color-mix(in srgb, var(--color-brand) 2%, transparent) 42%,
    transparent 72%
  );
  }
  transition: opacity 0.55s var(--ab-ease);
}
.bl-card:hover::before {
  opacity: 100%;
}
.bl-card-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 14%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-accent) 14%, transparent);
  }
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 2%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 2%, transparent);
  }
}
.bl-card-media::before,
.bl-card-media::after {
  pointer-events: none;
  position: absolute;
  z-index: 4;
  height: 10px;
  width: 10px;
  opacity: 0%;
  content: "";
  transition: opacity 0.5s var(--ab-ease),
    transform 0.5s var(--ab-ease);
}
.bl-card-media::before {
  top: calc(var(--spacing) * 2);
  left: calc(var(--spacing) * 2);
  border-top: 1px solid var(--color-brand);
  border-left: 1px solid var(--color-brand);
  transform: translate(-4px, -4px);
}
.bl-card-media::after {
  right: calc(var(--spacing) * 2);
  bottom: calc(var(--spacing) * 2);
  border-right: 1px solid var(--color-brand);
  border-bottom: 1px solid var(--color-brand);
  transform: translate(4px, 4px);
}
.bl-card:hover .bl-card-media::before,
.bl-card:hover .bl-card-media::after,
.bl-row.is-focus .bl-card-media::before,
.bl-row.is-focus .bl-card-media::after {
  opacity: 100%;
  transform: none;
}
.bl-row.is-focus .bl-card-media::before,
.bl-row.is-focus .bl-card-media::after {
  opacity: 45%;
}
.bl-card-media img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transform: translate3d(0, var(--par, 0%), 0) scale(1.16);
  transition: filter 0.7s var(--ab-ease);
  will-change: transform;
}
.bl-card:hover .bl-card-media img {
  filter: none;
}
.bl-row.is-focus .bl-card-media img {
  filter: grayscale(0.7) contrast(1.05);
}
.bl-card-i {
  position: absolute;
  top: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  z-index: 2;
  background-color: var(--color-void);
  padding-inline: 0.6rem;
  padding-block: 0.4rem;
  font-family: var(--font-mono);
  font-size: 9.5px;
  --tw-tracking: 0.2em;
  letter-spacing: 0.2em;
  border-right: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 14%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-right: 1px solid color-mix(in srgb, var(--color-accent) 14%, transparent);
  }
  border-bottom: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 14%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 14%, transparent);
  }
  color: var(--ab-a45);
  transition: color 0.4s;
}
.bl-card:hover .bl-card-i,
.bl-row.is-focus .bl-card-i {
  color: var(--color-brand);
}
.bl-card-body {
  display: flex;
  min-width: calc(var(--spacing) * 0);
  flex: auto;
  flex-direction: column;
  gap: 0.85rem;
}
.bl-card-meta {
  margin: calc(var(--spacing) * 0);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2);
  font-family: var(--font-mono);
  font-size: 9.5px;
  --tw-tracking: 0.22em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ab-a45);
}
.bl-sep {
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 20%, transparent);
  }
}
.bl-card-cat {
  color: color-mix(in srgb, var(--brand, rgb(253 255 255)) 85%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) 85%, transparent);
  }
}
.bl-card-title {
  margin: calc(var(--spacing) * 0);
}
.bl-card-link {
  --tw-leading: 1.05;
  line-height: 1.05;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.1vw, 30px);
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 90%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 90%, transparent);
  }
  transition: color 0.4s;
}
.bl-card-link::after {
  position: absolute;
  inset: calc(var(--spacing) * 0);
  z-index: 3;
  content: "";
}
.bl-card:hover .bl-card-link {
  color: var(--color-accent);
}
.bl-card-link:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 4px;
}
.bl-card-text {
  margin: calc(var(--spacing) * 0);
  font-family: var(--font-mono);
  font-size: 12.5px;
  --tw-leading: 1.85;
  line-height: 1.85;
  color: var(--ab-a55);
}
.bl-card-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  align-self: flex-start;
  padding-top: 1.1rem;
  font-size: 9.5px;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: 0.2em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: ui-monospace, Consolas, monospace;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  }
  transition: color 0.45s var(--ab-ease);
}
.bl-card-cta i {
  font-style: normal;
  transition: transform 0.5s var(--ab-ease);
}
.bl-card:hover .bl-card-cta {
  color: var(--color-brand);
}
.bl-card:hover .bl-card-cta i {
  transform: translateX(5px);
}
.bl-row.is-focus .bl-card-cta {
  color: var(--ab-a55);
}
.bl-cards[data-view="list"] .bl-row {
  border-top: 1px solid var(--ab-a10);
}
.bl-cards[data-view="list"] .bl-row:last-child {
  border-bottom: 1px solid var(--ab-a10);
}
.bl-cards[data-view="list"] .bl-card {
  flex-direction: column;
  align-items: stretch;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 2.5vw, 2.25rem) 0;
}
.bl-cards[data-view="list"] .bl-card:hover {
  transform: none;
}
.bl-cards[data-view="list"] .bl-card-text {
  max-width: 62ch;
}
.bl-inner .bl-empty,
.bl-inner .bl-end {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  --tw-tracking: 0.3em;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin: 3.5rem 0 0;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 25%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 25%, transparent);
  }
}
.bl-inner .bl-end {
  margin-top: clamp(4.5rem, 8vw, 7rem);
}
@media (min-width: 640px) {
  .bl-inner {
    padding-inline: 40px;
  }
  .bl-cards[data-view="grid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bl-cards[data-view="list"] .bl-card {
    flex-direction: row;
    align-items: center;
  }
  .bl-cards[data-view="list"] .bl-card-media {
    flex: none;
    flex-basis: clamp(190px, 26%, 320px);
    aspect-ratio: 4 / 3;
  }
}
@media (min-width: 900px) {
  .bl-cards[data-view="grid"] {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
  .bl-cards[data-view="grid"] .bl-row-wide {
    grid-column: 1 / -1;
  }
  .bl-cards[data-view="grid"] .bl-row-wide .bl-card {
    display: grid;
    align-items: center;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
    border-bottom: 1px solid var(--ab-a10);
  }
  .bl-cards[data-view="grid"] .bl-row-wide .bl-card-media {
    aspect-ratio: 16 / 11;
  }
  .bl-cards[data-view="grid"] .bl-row-wide .bl-card-link {
    font-size: clamp(28px, 3vw, 44px);
  }
  .bl-cards[data-view="grid"] .bl-row-wide .bl-card-text {
    font-size: 13.5px;
  }
}
@media (min-width: 1024px) {
  .bl-cards[data-view="list"] .bl-card-link {
    font-size: clamp(24px, 2.6vw, 38px);
  }
  .bl-cards[data-view="list"] .bl-card-cta {
    margin-top: 0.35rem;
  }
}
@media (min-width: 1400px) {
  .blog-page main {
    padding-left: 18rem;
  }
  .blog-page .pj-rail {
    display: block;
  }
  .blog-page .pj-gauge {
    display: flex;
  }
  .blog-page .pj-guides {
    display: block;
  }
  .blog-page .pj-index .t {
    display: block;
    max-width: 10rem;
  }
  .blog-page .pj-guides .gl-1 {
    left: calc(18rem + max(0px, (100vw - 18rem - 1180px) / 2) + 40px);
  }
  .blog-page .pj-guides .gl-2 {
    left: auto;
    right: calc(max(0px, (100vw - 18rem - 1180px) / 2) + 40px);
  }
}
@media (max-width: 1023px) {
  .blog-page .page-title {
    top: calc(var(--spacing) * 5);
    right: calc(var(--spacing) * 4);
  }
  .bl-inner {
    padding-top: clamp(120px, 20vh, 180px);
    padding-bottom: 160px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bl-js .bl-row:not(.in) {
    opacity: 100%;
    transform: none;
  }
  .bl-row,
  .bl-card,
  .bl-card-media img {
    transition: none;
  }
  .bl-card-media img {
    transform: scale(1.16);
  }
}
body.post-page {
  --bd-col: 57.5rem;
  --bd-wide: 77rem;
  --bd-pad: clamp(1.25rem, 4vw, 2rem);
}
.post-page .chrome-contact {
  display: none;
}
.post-page .identity-block {
  top: 14px;
  z-index: 40;
}
.bd-bar {
  position: fixed;
  top: calc(var(--spacing) * 0);
  right: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  z-index: 30;
  display: flex;
  height: 54px;
  align-items: center;
  gap: calc(var(--spacing) * 5);
  padding-right: calc(var(--spacing) * 5);
  padding-left: clamp(7rem, 12vw, 11rem);
  border-bottom: 1px solid var(--ab-a10);
  background: rgb(0 0 0 / 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.bd-bar-back,
.bd-bar-read {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-family: var(--font-mono);
  font-size: 10px;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: 0.22em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 55%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 55%, transparent);
  }
  transition: color 0.3s,
    gap 0.4s var(--ab-ease);
}
.bd-bar-back:hover {
  gap: calc(var(--spacing) * 3.5);
  color: var(--color-accent);
}
.bd-bar-read {
  margin-left: auto;
}
.bd-bar-title {
  min-width: calc(var(--spacing) * 0);
  flex: auto;
  overflow: hidden;
  font-size: 13px;
  --tw-leading: 1.4;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0%;
  font-family: var(--font-slab);
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 85%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 85%, transparent);
  }
  transform: translateY(6px);
  transition: opacity 0.35s,
    transform 0.35s var(--ab-ease);
}
.bd-bar.is-in .bd-bar-title {
  opacity: 100%;
  transform: none;
}
.bd-bar-title + .bd-bar-read {
  margin-left: calc(var(--spacing) * 0);
}
.bd-bar-rail {
  position: absolute;
  right: calc(var(--spacing) * 0);
  bottom: -1px;
  left: calc(var(--spacing) * 0);
  height: 2px;
  overflow: hidden;
}
.bd-bar-rail i {
  display: block;
  height: 100%;
  background: var(--color-brand);
  box-shadow: 0 0 10px color-mix(in srgb, var(--brand, rgb(253 255 255)) 70%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 10px color-mix(in srgb, var(--color-brand) 70%, transparent);
  }
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.bd-head {
  margin-inline: auto;
  max-width: var(--bd-col);
  padding: 9rem var(--bd-pad) 0;
}
.bd-crumb {
  margin: calc(var(--spacing) * 0);
  margin-bottom: calc(var(--spacing) * 9);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2);
  font-family: var(--font-mono);
  font-size: 9.5px;
  --tw-tracking: 0.22em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ab-a35);
}
.bd-crumb a {
  color: var(--ab-a55);
}
.bd-crumb a:hover {
  color: var(--color-accent);
}
.bd-crumb .sep {
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 20%, transparent);
  }
}
.bd-head p.bd-kicker {
  margin: calc(var(--spacing) * 0);
  margin-bottom: 1.1rem;
}
.bd-kicker span {
  display: inline-block;
  padding-inline: calc(var(--spacing) * 3);
  padding-block: 0.35rem;
  font-family: var(--font-mono);
  font-size: 9.5px;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: 0.24em;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  border: 1px solid var(--ab-b30);
  background: var(--ab-b8);
  color: var(--ab-a85);
}
.bd-title {
  margin: calc(var(--spacing) * 0);
  margin-bottom: 1.35rem;
  --tw-leading: 1.12;
  line-height: 1.12;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: -0.015em;
  letter-spacing: -0.015em;
  color: var(--color-accent);
  font-family: var(--font-slab);
  font-size: clamp(32px, 4.6vw, 54px);
}
.bd-head p.bd-lede {
  margin: calc(var(--spacing) * 0);
  margin-bottom: calc(var(--spacing) * 9);
  max-width: 68ch;
  font-family: var(--font-body);
  --tw-leading: 1.65;
  line-height: 1.65;
  font-size: clamp(17px, 0.5vw + 16px, 21px);
  color: var(--ab-a62);
}
.bd-byline {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-block: 1.15rem;
  border-top: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 12%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--color-accent) 12%, transparent);
  }
  border-bottom: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 12%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 12%, transparent);
  }
}
.bd-avatar,
.bd-auth-av {
  display: grid;
  height: 2.4rem;
  width: 2.4rem;
  flex: none;
  place-items: center;
  border-radius: calc(infinity * 1px);
  font-family: var(--font-mono);
  font-size: 12px;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent);
  border: 1px solid var(--ab-b30);
  background: color-mix(in srgb, var(--brand, rgb(253 255 255)) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-brand) 10%, transparent);
  }
}
.bd-by-who {
  margin-right: auto;
  display: flex;
  min-width: calc(var(--spacing) * 0);
  flex-direction: column;
  gap: 3px;
}
.bd-by-who b {
  font-family: var(--font-mono);
  font-size: 11.5px;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: 0.1em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 90%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 90%, transparent);
  }
}
.bd-by-who > span {
  font-family: var(--font-mono);
  font-size: 10px;
  --tw-tracking: 0.14em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ab-a45);
}
.bd-by-who i {
  margin-inline: calc(var(--spacing) * 2);
  font-style: normal;
}
.bd-share {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2);
}
.bd-share-b {
  cursor: pointer;
  padding-inline: 0.8rem;
  padding-block: 0.4rem;
  font-family: var(--font-mono);
  font-size: 10px;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: 0.16em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--ab-a16);
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 4%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 4%, transparent);
  }
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 75%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 75%, transparent);
  }
  transition: color 0.3s,
    border-color 0.3s,
    background 0.3s;
}
.bd-share-b:hover {
  border-color: var(--ab-b55);
  background: color-mix(in srgb, var(--brand, rgb(253 255 255)) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-brand) 10%, transparent);
  }
  color: var(--color-accent);
}
.bd-share-b.is-done {
  background-color: var(--color-accent);
  color: #000;
  border-color: var(--color-accent);
}
.bd-cover {
  margin-inline: auto;
  margin-top: calc(var(--spacing) * 12);
  margin-bottom: calc(var(--spacing) * 0);
  max-width: var(--bd-wide);
  padding: 0 var(--bd-pad);
}
.bd-cover-btn {
  display: block;
  width: 100%;
  cursor: zoom-in;
  background-color: transparent;
  padding: calc(var(--spacing) * 0);
  border: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 12%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-accent) 12%, transparent);
  }
}
.bd-cover-btn img {
  display: block;
  width: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 10;
  filter: grayscale(1) contrast(1.04);
  transition: filter 0.5s var(--ab-ease);
}
.bd-cover-btn:hover img {
  filter: none;
}
.bd-cover figcaption {
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 9.5px;
  --tw-tracking: 0.2em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 32%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 32%, transparent);
  }
}
.bd-layout {
  margin-inline: auto;
  display: grid;
  gap: calc(var(--spacing) * 10);
  max-width: var(--bd-col);
  padding: 3.5rem var(--bd-pad) 0;
}
.bd-main {
  min-width: calc(var(--spacing) * 0);
}
.bd-side-in {
  padding: 1.15rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 12%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-accent) 12%, transparent);
  }
  transition: opacity 0.4s var(--ab-ease);
}
.bd-index-label {
  margin-bottom: calc(var(--spacing) * 4);
  display: block;
  font-size: 9.5px;
  --tw-tracking: 0.22em;
  letter-spacing: 0.22em;
  font-family: var(--font-mono);
  color: var(--ab-a35);
}
.bd-index ul {
  margin: calc(var(--spacing) * 0);
  display: flex;
  list-style-type: none;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 0);
}
.bd-index a {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  --tw-leading: 1.5;
  line-height: 1.5;
  --tw-tracking: 0.1em;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 55%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 55%, transparent);
  }
  transition: color 0.3s,
    padding-left 0.4s var(--ab-ease);
}
.bd-index a:hover {
  color: var(--color-accent);
  padding-left: 6px;
}
.bd-index a.is-now {
  color: var(--color-brand);
}
.bd-side-meta {
  margin: calc(var(--spacing) * 0);
  margin-top: calc(var(--spacing) * 4);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2);
  font-family: var(--font-mono);
  font-size: 9.5px;
  --tw-tracking: 0.22em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ab-a35);
}
.bl-article {
  margin-bottom: calc(var(--spacing) * 12);
  font-family: var(--font-body);
  --tw-leading: 1.8;
  line-height: 1.8;
  --tw-font-weight: var(--font-weight-light);
  font-weight: var(--font-weight-light);
  max-width: 78ch;
  font-size: clamp(16.5px, 0.5vw + 15px, 19px);
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 78%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 78%, transparent);
  }
}
.bl-article > :first-child {
  margin-top: calc(var(--spacing) * 0);
}
.bl-article > p {
  margin: calc(var(--spacing) * 0);
  margin-bottom: 1.45em;
}
.bl-article > p:first-of-type {
  font-size: 19px;
  --tw-leading: 1.7;
  line-height: 1.7;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 90%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 90%, transparent);
  }
}
.bl-article h2 {
  margin: calc(var(--spacing) * 0);
  margin-top: calc(var(--spacing) * 12);
  margin-bottom: calc(var(--spacing) * 4);
  padding-top: calc(var(--spacing) * 7);
  font-family: var(--font-display);
  font-size: 34px;
  --tw-leading: 1.05;
  line-height: 1.05;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: 0.01em;
  letter-spacing: 0.01em;
  color: var(--color-accent);
  text-transform: uppercase;
  border-top: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 12%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--color-accent) 12%, transparent);
  }
  scroll-margin-top: 140px;
}
.bl-article em {
  font-style: italic;
}
.bl-article strong {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 90%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 90%, transparent);
  }
}
.bl-article ul {
  margin: calc(var(--spacing) * 0);
  margin-bottom: calc(var(--spacing) * 6);
  list-style-type: none;
  padding-left: calc(var(--spacing) * 5);
}
.bl-article li {
  position: relative;
  margin-bottom: calc(var(--spacing) * 2);
}
.bl-article ul > li::before {
  position: absolute;
  top: 0.9em;
  left: -1.25rem;
  height: 1px;
  width: 6px;
  content: "";
  background: var(--color-brand);
}
.bl-article blockquote {
  margin-block: calc(var(--spacing) * 8);
  padding-block: calc(var(--spacing) * 1);
  padding-left: calc(var(--spacing) * 6);
  font-size: 16px;
  --tw-leading: 1.7;
  line-height: 1.7;
  border-left: 1px solid var(--ab-b55);
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 85%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 85%, transparent);
  }
}
.bl-article blockquote p:last-child {
  margin-bottom: calc(var(--spacing) * 0);
}
.bl-article code {
  padding-inline: 0.4em;
  padding-block: 0.15em;
  font-family: var(--font-mono);
  font-size: 0.9em;
  border: 1px solid var(--ab-a16);
  border-radius: 2px;
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 4%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 4%, transparent);
  }
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 90%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 90%, transparent);
  }
}
.bd-tags {
  margin-top: calc(var(--spacing) * 10);
  margin-bottom: calc(var(--spacing) * 6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding-top: calc(var(--spacing) * 8);
  border-top: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 12%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--color-accent) 12%, transparent);
  }
}
.bd-tags-k {
  margin-right: 0.4rem;
  font-size: 9.5px;
  --tw-tracking: 0.22em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-family: ui-monospace, Consolas, monospace;
  color: var(--ab-a45);
}
.bd-tags-l {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2);
}
.bd-auth {
  margin-top: calc(var(--spacing) * 10);
  display: flex;
  gap: 1.1rem;
  padding: calc(var(--spacing) * 6);
  border: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 14%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-accent) 14%, transparent);
  }
  background: color-mix(in srgb, var(--brand, rgb(253 255 255)) 3%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-brand) 3%, transparent);
  }
}
.bd-auth-av {
  height: calc(var(--spacing) * 12);
  width: calc(var(--spacing) * 12);
  font-size: 15px;
}
.bd-auth-b {
  min-width: calc(var(--spacing) * 0);
}
.bd-auth-k {
  margin-bottom: 0.3rem;
  display: block;
  font-size: 9.5px;
  --tw-tracking: 0.22em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-family: ui-monospace, Consolas, monospace;
  color: var(--ab-a45);
}
.bd-auth-n {
  display: block;
  font-size: 18px;
  font-family: var(--font-slab);
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 95%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 95%, transparent);
  }
}
.bd-auth-l {
  margin-top: 0.85rem;
  display: inline-flex;
  gap: calc(var(--spacing) * 2);
  font-family: var(--font-mono);
  font-size: 10px;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: 0.22em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 70%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 70%, transparent);
  }
  transition: color 0.3s,
    gap 0.4s var(--ab-ease);
}
.bd-auth-l:hover {
  gap: 0.9rem;
  color: var(--color-accent);
}
.bd-after {
  margin-top: calc(var(--spacing) * 10);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
  padding-top: calc(var(--spacing) * 9);
  border-top: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 12%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--color-accent) 12%, transparent);
  }
}
.bd-back-link,
.bd-top {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  gap: 0.6rem;
  background-color: transparent;
  padding-inline: 1.15rem;
  padding-block: calc(var(--spacing) * 3);
  font-family: var(--font-mono);
  font-size: 10px;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: 0.25em;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent);
  }
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 80%, transparent);
  }
  transition: color 0.3s,
    border-color 0.3s,
    background 0.3s,
    gap 0.4s var(--ab-ease);
}
.bd-back-link:hover {
  gap: calc(var(--spacing) * 4);
  background-color: var(--color-accent);
  color: #000;
  border-color: var(--color-accent);
}
.bd-top:hover {
  color: var(--color-accent);
  border-color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 45%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
  }
}
.bd-talk {
  margin-top: calc(var(--spacing) * 14);
  padding-top: calc(var(--spacing) * 10);
  border-top: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 12%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--color-accent) 12%, transparent);
  }
}
.bd-talk-h {
  margin: calc(var(--spacing) * 0);
  margin-bottom: calc(var(--spacing) * 6);
  font-family: var(--font-display);
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  font-size: clamp(22px, 2vw, 30px);
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 95%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 95%, transparent);
  }
}
.bd-form p {
  margin: calc(var(--spacing) * 0);
}
.bd-form p.bd-form-note {
  margin-bottom: calc(var(--spacing) * 6);
  font-family: var(--font-mono);
  font-size: 10px;
  --tw-tracking: 0.14em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ab-a35);
}
.bd-field {
  margin-bottom: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
}
.bd-field label {
  font-size: 9.5px;
  --tw-tracking: 0.22em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-family: ui-monospace, Consolas, monospace;
  color: var(--ab-a45);
}
.bd-field input,
.bd-field textarea {
  width: 100%;
  border-radius: 0;
  padding-inline: 0.9rem;
  padding-block: 0.8rem;
  font-family: var(--font-body);
  font-size: 15px;
  --tw-leading: 1.6;
  line-height: 1.6;
  border: 1px solid var(--ab-a16);
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 3%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 3%, transparent);
  }
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 92%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 92%, transparent);
  }
  transition: border-color 0.3s,
    background 0.3s;
}
.bd-field textarea {
  min-height: calc(var(--spacing) * 36);
  resize: vertical;
}
.bd-field input:focus,
.bd-field textarea:focus {
  --tw-outline-style: none;
  outline-style: none;
  border-color: var(--ab-b55);
  background: var(--ab-b8);
}
.bd-form p:has(> .bd-form-send) {
  margin-top: calc(var(--spacing) * 6);
}
.bd-form-send {
  cursor: pointer;
  background-color: var(--color-accent);
  padding-inline: 1.6rem;
  padding-block: 0.95rem;
  font-family: var(--font-mono);
  font-size: 10px;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: 0.26em;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  border: 1px solid var(--color-accent);
  color: #000;
  transition: color 0.3s,
    background 0.3s,
    border-color 0.3s;
}
.bd-form-send:hover {
  background: var(--ab-b8);
  border-color: var(--ab-b55);
  color: var(--color-accent);
}
.bd-form-send:focus-visible,
.bd-share-b:focus-visible,
.bd-back-link:focus-visible,
.bd-top:focus-visible,
.bd-pager-c:focus-visible,
.bd-index a:focus-visible {
  outline: 1px solid var(--color-brand);
  outline-offset: 2px;
}
.bd-pager {
  margin-inline: auto;
  display: grid;
  gap: calc(var(--spacing) * 4);
  max-width: var(--bd-wide);
  padding: 5rem var(--bd-pad) 7rem;
}
.bd-pager-c {
  display: block;
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 6);
  border: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 14%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-accent) 14%, transparent);
  }
  background: color-mix(in srgb, var(--brand, rgb(253 255 255)) 3%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-brand) 3%, transparent);
  }
  transition: border-color 0.3s,
    background 0.3s,
    transform 0.4s var(--ab-ease);
}
.bd-pager-c:hover {
  border-color: var(--ab-b55);
  background: var(--ab-b8);
  transform: translateY(-3px);
}
.bd-pager-next {
  text-align: right;
}
.bd-pager-k {
  margin-bottom: 0.7rem;
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: 0.24em;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand, rgb(253 255 255)) 90%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) 90%, transparent);
  }
}
.bd-pager-t {
  display: block;
  font-size: 19px;
  --tw-leading: 1.3;
  line-height: 1.3;
  font-family: var(--font-slab);
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 95%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 95%, transparent);
  }
}
.bd-pager-d {
  margin-top: 0.6rem;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 14px;
  --tw-leading: 1.6;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--ab-a45);
}
.bd-js [data-rv] {
  opacity: 0%;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ab-ease),
    transform 1s var(--ab-ease);
}
.bd-js [data-rv].in {
  opacity: 100%;
  transform: none;
}
@media (min-width: 640px) {
  .bd-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
  }
  .bd-form > p {
    grid-column: 1 / -1;
  }
  .bd-form > .bd-field-half {
    grid-column: auto;
  }
}
@media (min-width: 768px) {
  .bd-pager {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
  .bd-pager .bd-pager-next:only-child {
    grid-column: 2;
  }
  .bd-cover-btn img {
    aspect-ratio: 21 / 9;
  }
}
@media (min-width: 1100px) {
  .bd-layout {
    justify-content: center;
    grid-template-columns: 13rem var(--bd-col);
    gap: 3.5rem;
    max-width: none;
    padding: 4rem 1.5rem 0;
  }
  .bd-side-in {
    position: sticky;
    top: calc(var(--spacing) * 32);
    border-style: var(--tw-border-style);
    border-width: 0px;
    padding: calc(var(--spacing) * 0);
  }
  .bd-side-in.is-done {
    pointer-events: none;
    opacity: 0%;
  }
}
@media (max-width: 1023px) {
  .bl-article {
    font-size: 16px;
  }
  .bl-article > p:first-of-type {
    font-size: 17px;
  }
  .bl-article h2 {
    font-size: 27px;
  }
}
@media (max-width: 767px) {
  .bd-head {
    padding-top: 6.5rem;
  }
  .bd-bar {
    height: calc(var(--spacing) * 12);
    padding-left: 6.5rem;
  }
  .bd-bar-back span,
  .bd-bar-read {
    display: none;
  }
  .bd-bar-title {
    text-align: right;
  }
  .bd-byline {
    flex-wrap: wrap;
  }
  .bd-share {
    width: 100%;
  }
  .bd-pager-next {
    text-align: left;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bd-js [data-rv] {
    opacity: 100%;
    transform: none;
    transition: none;
  }
}
body.detail-page {
  --pc-max: 1250px;
  --pc-gut: clamp(1.25rem, 4vw, 3.5rem);
}
.detail-page .chrome-contact {
  display: none;
}
.detail-main {
  position: relative;
}
.pc-back {
  position: fixed;
  top: 1.6rem;
  right: calc(var(--spacing) * 7);
  z-index: 30;
  display: grid;
  aspect-ratio: 1 / 1;
  width: 4.2rem;
  place-items: center;
  border-radius: var(--radius-lg);
  padding: 0.625rem;
  color: var(--color-accent);
  border: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent);
  }
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 5%, transparent);
  }
  transition: background-color 0.3s,
    border-color 0.3s,
    transform 0.3s var(--ab-ease);
}
.pc-back svg {
  height: calc(var(--spacing) * 6);
  width: calc(var(--spacing) * 6);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pc-back:hover {
  border-color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 45%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
  }
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 12%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  }
  transform: translateX(-3px);
}
.pd-fade {
  pointer-events: none;
  position: fixed;
  top: calc(var(--spacing) * 0);
  right: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  z-index: 20;
  height: calc(var(--spacing) * 22);
  background: linear-gradient(var(--color-void) 42%, rgb(0 0 0 / 0.86) 68%, transparent);
}
.pc-head {
  position: relative;
  z-index: 2;
  margin-inline: auto;
  width: min(100%, var(--pc-max));
  padding: 8.5rem var(--pc-gut) 2.5rem;
}
.pc-crumb {
  margin-bottom: calc(var(--spacing) * 8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-size: 10px;
  --tw-tracking: 0.2em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  color: var(--ab-a35);
}
.pc-crumb a {
  transition: color 0.3s;
}
.pc-crumb a:hover {
  color: var(--color-accent);
}
.pc-crumb .sep {
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 20%, transparent);
  }
}
.pc-crumb .cur {
  max-width: 26rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 80%, transparent);
  }
}
.pc-eyebrow {
  margin: calc(var(--spacing) * 0);
  margin-bottom: calc(var(--spacing) * 4);
  font-family: var(--font-mono);
  font-size: 10px;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: 0.26em;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand, rgb(253 255 255)) 90%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) 90%, transparent);
  }
}
.pc-title {
  margin: calc(var(--spacing) * 0);
  margin-bottom: 1.2rem;
  font-family: var(--font-display);
  --tw-leading: 0.98;
  line-height: 0.98;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent);
  text-transform: uppercase;
  font-size: clamp(38px, 5.6vw, 84px);
}
.pc-sub {
  margin: calc(var(--spacing) * 0);
  margin-bottom: calc(var(--spacing) * 8);
  max-width: 54ch;
  font-family: var(--font-body);
  font-size: 18px;
  --tw-leading: 1.7;
  line-height: 1.7;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 66%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 66%, transparent);
  }
}
.pc-shot {
  margin: calc(var(--spacing) * 0);
  margin-top: calc(var(--spacing) * 10);
}
.pc-shot-btn {
  display: block;
  width: 100%;
  cursor: zoom-in;
  background-color: transparent;
  padding: calc(var(--spacing) * 0);
  border: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 12%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-accent) 12%, transparent);
  }
}
.pc-shot-btn img {
  display: block;
  width: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}
.pc-shot figcaption {
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 9.5px;
  --tw-tracking: 0.2em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 32%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 32%, transparent);
  }
}
.pc-strip {
  margin: calc(var(--spacing) * 0);
  margin-top: calc(var(--spacing) * 12);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 14%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--color-accent) 14%, transparent);
  }
  border-bottom: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 14%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 14%, transparent);
  }
}
.pc-strip > div {
  padding: 0.9rem 1rem 1rem;
}
.pc-strip > div:nth-child(2n + 1) {
  padding-left: calc(var(--spacing) * 0);
}
.pc-strip > div:nth-child(2n) {
  border-left: 1px solid var(--ab-a10);
}
.pc-strip > div:nth-child(n + 3) {
  border-top: 1px solid var(--ab-a10);
}
.pc-strip dt {
  margin-bottom: 0.4rem;
  font-size: 9.5px;
  --tw-tracking: 0.22em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-family: ui-monospace, Consolas, monospace;
  color: var(--ab-a45);
}
.pc-strip dd {
  margin: calc(var(--spacing) * 0);
  font-family: var(--font-mono);
  font-size: 12.5px;
  --tw-leading: 1.45;
  line-height: 1.45;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: 0.04em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 90%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 90%, transparent);
  }
}
.pc-wrap {
  position: relative;
  z-index: 2;
  margin-inline: auto;
  display: grid;
  gap: calc(var(--spacing) * 10);
  width: min(100%, var(--pc-max));
  padding: 2rem var(--pc-gut) 7rem;
}
.pc-panel {
  padding: 1.25rem 1.35rem 1.4rem;
  border: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 14%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-accent) 14%, transparent);
  }
  background: color-mix(in srgb, var(--brand, rgb(253 255 255)) 3%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-brand) 3%, transparent);
  }
}
.pc-specs {
  margin: calc(var(--spacing) * 0);
  list-style-type: none;
  padding: calc(var(--spacing) * 0);
}
.pc-specs li {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-block: 0.65rem;
  border-bottom: 1px dashed color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 12%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px dashed color-mix(in srgb, var(--color-accent) 12%, transparent);
  }
}
.pc-specs li:first-child {
  padding-top: calc(var(--spacing) * 0);
}
.pc-specs li:last-child {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 0px;
  padding-bottom: calc(var(--spacing) * 0);
}
.pc-fact-k {
  font-size: 10px;
  --tw-tracking: 0.2em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: ui-monospace, Consolas, monospace;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 52%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 52%, transparent);
  }
}
.pc-fact-v {
  font-family: var(--font-mono);
  font-size: 12.5px;
  --tw-leading: var(--leading-normal);
  line-height: var(--leading-normal);
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: 0.05em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 90%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 90%, transparent);
  }
}
.pc-panel-b {
  margin-top: calc(var(--spacing) * 5);
  padding-top: calc(var(--spacing) * 5);
  border-top: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 14%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--color-accent) 14%, transparent);
  }
}
.pc-panel-b .pc-fact-k {
  margin-bottom: 0.7rem;
  display: block;
}
.pd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2);
}
.pd-chip {
  border-radius: var(--radius-md);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 1);
  font-family: var(--font-mono);
  font-size: 12px;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
  text-transform: uppercase;
  border: 1px solid var(--ab-a10);
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 5%, transparent);
  }
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 80%, transparent);
  }
  transition: border-color 0.3s,
    color 0.3s;
}
.pd-chip:hover {
  border-color: var(--ab-b55);
  color: var(--color-accent);
}
.pc-pal {
  margin: calc(var(--spacing) * 0);
  display: grid;
  list-style-type: none;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 0);
}
.pc-pal li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.pd-swatch {
  height: calc(var(--spacing) * 4);
  width: calc(var(--spacing) * 4);
  flex: none;
  border: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent);
  }
  border-radius: 2px;
}
.pc-pal code {
  font-family: var(--font-mono);
  font-size: 10.5px;
  --tw-tracking: 0.1em;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 60%, transparent);
  }
}
.pc-jump {
  margin-top: calc(var(--spacing) * 6);
  padding-top: 1.35rem;
  border-top: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 12%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--color-accent) 12%, transparent);
  }
}
.pc-jump .pc-fact-k {
  margin-bottom: 0.85rem;
  display: block;
}
.pc-jump ul {
  margin: calc(var(--spacing) * 0);
  list-style-type: none;
  padding: calc(var(--spacing) * 0);
}
.pc-jump a {
  display: flex;
  gap: 0.7rem;
  padding-block: 0.4rem;
  font-family: var(--font-mono);
  font-size: 10.5px;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: 0.14em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 55%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 55%, transparent);
  }
  transition: color 0.3s;
}
.pc-jump a:hover {
  color: var(--color-accent);
}
.pc-jump a.is-now {
  color: var(--color-brand);
}
.pc-jump a span {
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 28%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 28%, transparent);
  }
}
.pc-count {
  margin: calc(var(--spacing) * 0);
  margin-top: 1.15rem;
  font-family: var(--font-mono);
  font-size: 9.5px;
  --tw-tracking: 0.22em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 32%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 32%, transparent);
  }
}
.pc-main {
  min-width: calc(var(--spacing) * 0);
}
.pc-sec + .pc-sec,
.pc-sec + .pc-grid,
.pc-sec + .pc-reel {
  margin-top: 3rem;
}
.pc-sec-h {
  margin: calc(var(--spacing) * 0);
  margin-bottom: 1.1rem;
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding-bottom: 0.85rem;
  font-family: var(--font-display);
  --tw-leading: 1.1;
  line-height: 1.1;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  font-size: clamp(22px, 2.2vw, 30px);
  border-bottom: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 14%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 14%, transparent);
  }
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 95%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 95%, transparent);
  }
}
.pc-sec-n {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  --tw-tracking: 0.2em;
  letter-spacing: 0.2em;
  color: color-mix(in srgb, var(--brand, rgb(253 255 255)) 90%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) 90%, transparent);
  }
}
.pc-sec-b {
  font-family: var(--font-body);
  --tw-leading: 1.8;
  line-height: 1.8;
  font-size: clamp(16px, 0.42vw + 15px, 18px);
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 75%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 75%, transparent);
  }
}
.pc-sec-b p {
  margin: calc(var(--spacing) * 0);
  margin-bottom: 1.1em;
}
.pc-sec-b p:last-child {
  margin-bottom: calc(var(--spacing) * 0);
}
.pc-sec-b p:first-child {
  font-size: 1.08em;
  line-height: 1.7;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 88%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 88%, transparent);
  }
}
.pc-plate {
  position: relative;
  display: block;
  width: 100%;
  cursor: zoom-in;
  overflow: hidden;
  padding: calc(var(--spacing) * 0);
  border: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 12%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-accent) 12%, transparent);
  }
  background: color-mix(in srgb, var(--brand, rgb(253 255 255)) 3%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-brand) 3%, transparent);
  }
}
.pc-plate img,
.pc-plate video {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(0.92);
  transition: filter 0.5s var(--ab-ease),
    transform 0.7s var(--ab-ease);
}
.pc-plate:hover img,
.pc-plate:hover video {
  filter: none;
  transform: scale(1.03);
}
.pc-plate:focus-visible {
  outline: 1px solid var(--color-brand);
  outline-offset: 3px;
}
.pc-plate-video {
  cursor: default;
}
.pc-plate-r {
  position: absolute;
  bottom: 0.6rem;
  left: 0.7rem;
  padding-inline: 0.45rem;
  padding-block: 0.2rem;
  font-family: var(--font-mono);
  font-size: 9px;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: 0.2em;
  letter-spacing: 0.2em;
  background: rgb(0 0 0 / 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 75%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 75%, transparent);
  }
}
.pc-grid {
  display: grid;
  gap: 0.9rem;
  margin: 2.75rem 0 3rem;
}
.pc-grid-1 .pc-plate {
  aspect-ratio: 21 / 9;
}
.pc-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pc-grid-3 .pc-plate {
  aspect-ratio: 9 / 16;
}
.pc-reel {
  position: relative;
  overflow: hidden;
  margin: 3rem 0 3.25rem;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.pc-reel .track {
  display: flex;
  width: max-content;
  animation: marquee 40s linear infinite;
}
.pc-reel:hover .track {
  animation-play-state: paused;
}
.pc-reel .grp {
  display: flex;
  gap: 0.9rem;
  padding-right: 0.9rem;
}
.pc-reel .pc-plate {
  flex: none;
  width: clamp(19rem, 30vw, 34rem);
  aspect-ratio: 16 / 9;
}
.pc-end {
  margin-top: calc(var(--spacing) * 14);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
  padding-top: calc(var(--spacing) * 9);
  border-top: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 12%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--color-accent) 12%, transparent);
  }
}
.pc-end-r {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 3);
}
.pc-end-b {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding-inline: 1.2rem;
  padding-block: 0.8rem;
  font-family: var(--font-mono);
  font-size: 10px;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: 0.24em;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent);
  }
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 80%, transparent);
  }
  transition: color 0.3s,
    border-color 0.3s,
    background 0.3s,
    gap 0.4s var(--ab-ease);
}
.pc-end-b:hover {
  gap: calc(var(--spacing) * 4);
  background-color: var(--color-accent);
  color: #000;
  border-color: var(--color-accent);
}
.pc-end-live {
  border-color: var(--ab-b55);
  color: var(--color-accent);
}
.pd-progress {
  pointer-events: none;
  position: fixed;
  right: calc(var(--spacing) * 0);
  bottom: calc(var(--spacing) * 8);
  left: calc(var(--spacing) * 0);
  z-index: 30;
  margin-inline: auto;
  display: none;
  height: calc(var(--spacing) * 14);
  width: max-content;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  opacity: 0%;
  transition: opacity 0.5s;
}
.pd-scrolled .pd-progress {
  opacity: 100%;
}
.pd-track {
  position: relative;
  height: 1px;
  width: clamp(170px, 22vw, 300px);
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 12%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  }
}
.pd-mark {
  position: absolute;
  top: calc(1/2 * 100%);
  height: 7px;
  width: 1px;
  background: var(--ab-a16);
  transform: translate(-50%, -50%);
}
.pd-pointer {
  position: absolute;
  top: calc(1/2 * 100%);
  left: calc(var(--spacing) * 0);
  height: 6px;
  width: calc(var(--spacing) * 8);
  border-radius: calc(infinity * 1px);
  background-color: var(--color-accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 55%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 10px color-mix(in srgb, var(--color-accent) 55%, transparent);
  }
  transform: translate(-50%, -50%);
}
.pd-modal {
  visibility: hidden;
  position: fixed;
  inset: calc(var(--spacing) * 0);
  z-index: 200;
  display: grid;
  cursor: zoom-out;
  place-items: center;
  opacity: 0%;
  background: rgb(0 0 0 / 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity 0.4s,
    visibility 0s linear 0.4s;
}
.pd-modal.open {
  visibility: visible;
  opacity: 100%;
  transition-delay: 0s;
}
.pd-modal img {
  max-height: 88vh;
  max-width: 95vw;
  object-fit: contain;
  border-radius: 1rem;
  box-shadow: 0 25px 60px rgb(0 0 0 / 0.6);
  transform: scale(0.94);
  transition: transform 0.5s var(--ab-ease);
}
.pd-modal.open img {
  transform: scale(1);
}
.pd-modal-x {
  position: absolute;
  top: calc(var(--spacing) * 5);
  right: calc(var(--spacing) * 5);
  cursor: pointer;
  background-color: transparent;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: 0.6rem;
  font-family: var(--font-mono);
  font-size: 11px;
  --tw-tracking: 0.2em;
  letter-spacing: 0.2em;
  color: var(--color-accent);
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 25%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
  }
}
.pd-modal-x:focus-visible {
  outline: 1px solid var(--color-brand);
  outline-offset: 2px;
}
@media (min-width: 700px) {
  .pc-grid-1 .pc-plate {
    aspect-ratio: 21 / 9;
  }
}
@media (min-width: 768px) {
  .pd-progress {
    display: flex;
  }
}
@media (min-width: 900px) {
  .pc-strip {
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  }
  .pc-strip > div {
    padding: 1.1rem 1.25rem 1.2rem 0;
  }
  .pc-strip > div + div {
    padding-left: 1.5rem;
    border-left: 1px solid var(--ab-a10);
  }
  .pc-strip > div:nth-child(n + 3) {
    border-top-style: var(--tw-border-style);
    border-top-width: 0px;
  }
}
@media (min-width: 1000px) {
  .pc-head {
    display: grid;
    align-items: flex-end;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: clamp(2.5rem, 4.5vw, 6rem);
    padding-top: 9.5rem;
    padding-bottom: 3rem;
  }
  .pc-head-l {
    min-width: calc(var(--spacing) * 0);
  }
  .pc-shot {
    margin: calc(var(--spacing) * 0);
  }
  .pc-strip {
    margin-top: calc(var(--spacing) * 4);
    grid-column: 1 / -1;
  }
  .pc-wrap {
    gap: calc(var(--spacing) * 12);
    padding-top: 2.5rem;
    padding-bottom: 9rem;
  }
  .pc-panel {
    padding: 2rem 2.25rem 2.25rem;
  }
  .pc-specs {
    display: grid;
    padding-bottom: 1.9rem;
    gap: 1.5rem 2.5rem;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    border-bottom: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 14%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 14%, transparent);
    }
  }
  .pc-specs li {
    gap: 0.55rem;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
    padding: calc(var(--spacing) * 0);
  }
  .pc-panels {
    display: flex;
    flex-wrap: wrap;
    padding-top: 1.9rem;
    gap: 2rem 2.5rem;
  }
  .pc-panels > .pc-panel-b {
    margin-top: calc(var(--spacing) * 0);
    min-width: calc(var(--spacing) * 0);
    border-top-style: var(--tw-border-style);
    border-top-width: 0px;
    padding-top: calc(var(--spacing) * 0);
    flex: 1 1 13rem;
  }
  .pc-panel-b .pc-fact-k {
    margin-bottom: 0.9rem;
  }
  .pc-jump ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.75rem;
  }
  .pc-sec + .pc-sec {
    margin-top: 3.75rem;
  }
}
@media (max-width: 767px) {
  .pc-back {
    top: calc(var(--spacing) * 4);
    right: calc(var(--spacing) * 4);
    width: 2.6rem;
  }
  .pc-head {
    padding-top: 6.5rem;
    padding-bottom: 2rem;
  }
  .pc-wrap {
    padding-bottom: 5rem;
  }
  .pc-end-b {
    justify-content: center;
    flex: 1 1 100%;
  }
  .pc-end-r {
    width: 100%;
  }
  .pc-end-r .pc-end-b {
    flex: 1 1 100%;
  }
}
@media (max-width: 699px) {
  .pc-grid-1 .pc-plate {
    aspect-ratio: 16 / 9;
  }
  .pc-grid-3 {
    gap: 0.5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pc-reel .track {
    animation: none;
  }
  .pc-reel {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .pd-modal,
  .pd-modal img,
  .pc-plate img,
  .pc-plate video {
    transition: none;
  }
}
body.home-page {
  --font-display: "Big Shoulders Display", "Archivo", system-ui, sans-serif;
  --font-mono: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  --font-body: "Inter", system-ui, sans-serif;
  --home-inset: 10px;
  --home-line: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 8%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --home-line: color-mix(in srgb, var(--color-accent) 8%, transparent);
  }
  background: #000;
}
.home-dots {
  pointer-events: none;
  position: fixed;
  inset: calc(var(--spacing) * 0);
  z-index: 0;
  background-image: radial-gradient(
    color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 7%, transparent) 0.6px,
    transparent 0.9px
  );
  @supports (color: color-mix(in lab, red, red)) {
    background-image: radial-gradient(
    color-mix(in srgb, var(--color-accent) 7%, transparent) 0.6px,
    transparent 0.9px
  );
  }
  background-size: 4px 4px;
}
.home-hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  min-height: 560px;
}
.home-portrait {
  position: absolute;
  inset: calc(var(--spacing) * 0);
  z-index: 1;
  overflow: hidden;
  touch-action: pan-y;
}
.home-portrait-canvas {
  display: block;
  height: 100%;
  width: 100%;
  opacity: 0%;
  transition: opacity 0.8s ease;
}
.home-portrait.is-live .home-portrait-canvas {
  opacity: 100%;
}
.home-portrait-fallback {
  pointer-events: none;
  position: absolute;
  bottom: calc(var(--spacing) * 0);
  left: calc(1/2 * 100%);
  height: 100%;
  width: auto;
  opacity: 0%;
  -webkit-user-select: none;
  user-select: none;
  max-width: none;
  transform: translateX(-50%);
  filter: grayscale(1) contrast(1.15);
  transition: opacity 0.8s ease;
}
.home-portrait.is-live .home-portrait-fallback {
  opacity: 0%;
}
.home-portrait.is-fallback .home-portrait-fallback {
  opacity: 85%;
}
.home-panel {
  pointer-events: none;
  position: absolute;
  z-index: 2;
  left: var(--home-inset);
  top: var(--home-inset);
  bottom: var(--home-inset);
  width: calc(50% - var(--home-inset));
  border: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 7%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-accent) 7%, transparent);
  }
  border-radius: 6px;
  background: rgb(14 14 14 / 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.home-panel-rule {
  position: absolute;
  top: calc(var(--spacing) * 0);
  right: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--brand, rgb(253 255 255)) 40%, transparent) 40%,
    color-mix(in srgb, var(--brand, rgb(253 255 255)) 5%, transparent)
  );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--color-brand) 40%, transparent) 40%,
    color-mix(in srgb, var(--color-brand) 5%, transparent)
  );
  }
  box-shadow: 0 0 18px color-mix(in srgb, var(--brand, rgb(253 255 255)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 18px color-mix(in srgb, var(--color-brand) 20%, transparent);
  }
  animation: home-scan 8s linear infinite;
}
@keyframes home-scan {
  0% {
    top: 0%;
    opacity: 0;
  }
  8%,
  92% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}
html[data-perf="saver"] .home-panel {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgb(12 12 12 / 0.72);
}
.home-copy {
  pointer-events: none;
  position: absolute;
  top: 36%;
  left: 5.5%;
  z-index: 3;
  width: min(40%, 40rem);
}
.home-title {
  margin: calc(var(--spacing) * 0);
  text-transform: uppercase;
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 5.35vw, 7.5rem);
  line-height: 0.8;
  letter-spacing: -0.005em;
}
.home-title > span {
  display: block;
}
.home-title {
  pointer-events: auto;
  width: fit-content;
}
.home-title-outline {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: transparent;
  -webkit-text-stroke: 1px rgb(235 235 235 / 0.8);
}
@supports not (-webkit-text-stroke: 1px var(--color-accent)) {
  .home-title-outline {
    color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 35%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--color-accent) 35%, transparent);
    }
  }
}
.home-title-solid {
  margin-top: 0.09em;
  color: var(--color-accent);
  font-weight: 700;
  letter-spacing: -0.045em;
}
.home-tags {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  white-space: nowrap;
  text-transform: uppercase;
  margin: clamp(1.25rem, 3vh, 1.9rem) 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 62%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 62%, transparent);
  }
}
.home-tags-rule {
  height: 1px;
  width: calc(var(--spacing) * 12);
  flex: none;
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 30%, transparent);
  }
}
.home-tags-rule--long {
  margin-right: 0.15rem;
  width: calc(var(--spacing) * 12);
}
.home-lede {
  position: relative;
  max-width: 19.5rem;
  text-transform: uppercase;
  margin: 0.95rem 0 0 4.1rem;
  padding: 0.75rem 0 0.9rem 1.1rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 66%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 66%, transparent);
  }
}
.home-lede::before {
  position: absolute;
  width: 1px;
  content: "";
  left: 0;
  top: -0.6rem;
  bottom: -0.6rem;
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 22%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 22%, transparent);
  }
}
.home-stats {
  position: absolute;
  top: calc(1/2 * 100%);
  left: 73.4%;
  z-index: 3;
  font-family: var(--font-mono);
  text-transform: uppercase;
  transform: translateY(-50%);
  width: clamp(250px, 16.2vw, 330px);
  padding: 1.1rem 1.1rem 0.9rem;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 85%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 85%, transparent);
  }
}
.home-stats-corner {
  position: absolute;
  height: 18px;
  width: 18px;
  border-color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 35%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
  }
  border-style: solid;
  border-width: 0;
}
.home-stats-corner--tl {
  top: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  border-left-width: 1px;
  border-top-width: 1px;
}
.home-stats-corner--br {
  right: calc(var(--spacing) * 0);
  bottom: calc(var(--spacing) * 0);
  border-right-width: 1px;
  border-bottom-width: 1px;
}
.home-stats-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--home-line);
}
.home-stats-label {
  margin: calc(var(--spacing) * 0);
  white-space: nowrap;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.3em;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 50%, transparent);
  }
}
.home-stats-fill {
  height: 1px;
  flex: 1;
  background-image: linear-gradient(
    to right,
    color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 25%, transparent) 1px,
    transparent 1px
  );
  @supports (color: color-mix(in lab, red, red)) {
    background-image: linear-gradient(
    to right,
    color-mix(in srgb, var(--color-accent) 25%, transparent) 1px,
    transparent 1px
  );
  }
  background-size: 4px 1px;
}
.home-stats-status {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding-inline: 0.45rem;
  padding-block: 0.15rem;
  border: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 12%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-accent) 12%, transparent);
  }
  border-radius: 999px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.home-stats-dot {
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background: var(--color-brand);
  animation: hero-dot-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.home-stats-body {
  margin-left: calc(var(--spacing) * 4);
  padding-left: calc(var(--spacing) * 0);
  border-left: 1px solid var(--home-line);
}
.home-stats-metrics {
  margin: calc(var(--spacing) * 0);
  display: grid;
  list-style-type: none;
  gap: calc(var(--spacing) * 8);
  grid-template-columns: 1fr 1fr;
  padding: 0.9rem 0 1rem 0;
}
.home-metric {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-left: calc(var(--spacing) * 0);
}
.home-stats-metrics .home-metric:first-child {
  padding-left: calc(var(--spacing) * 0);
  margin-left: -1px;
}
.home-metric-index {
  position: absolute;
  top: 0.35rem;
  right: calc(var(--spacing) * 0);
  font-size: 7px;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  }
}
.home-metric-value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.25rem, 2.6vw, 3.2rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 62%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 62%, transparent);
  }
}
.home-metric-label {
  margin-top: 0.45rem;
  white-space: nowrap;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 50%, transparent);
  }
}
.home-metric-rule {
  position: relative;
  margin-top: calc(var(--spacing) * 3);
  height: 1px;
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 12%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  }
}
.home-metric-rule::before {
  position: absolute;
  content: "";
  inset: 0 auto 0 0;
  width: var(--fill, 80%);
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 75%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 75%, transparent);
  }
}
.home-metric-rule::after {
  position: absolute;
  height: 5px;
  width: 5px;
  content: "";
  top: -2px;
  left: calc(var(--fill, 80%) - 2.5px);
  border-radius: 50%;
  background: var(--color-accent);
}
.home-stats-rows {
  margin: calc(var(--spacing) * 0);
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--home-line);
}
.home-stats-rows > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3);
  padding-inline: calc(var(--spacing) * 0);
  padding-block: 0.3rem;
  font-size: 9px;
  letter-spacing: 0.06em;
}
.home-stats-rows dt {
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 50%, transparent);
  }
}
.home-stats-rows dd {
  margin: calc(var(--spacing) * 0);
  text-align: right;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 90%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 90%, transparent);
  }
}
.home-ticker {
  position: absolute;
  z-index: 3;
  display: flex;
  height: 50px;
  align-items: center;
  overflow: hidden;
  left: calc(var(--home-inset) + 1px);
  bottom: calc(var(--home-inset) + 1px);
  width: calc(50% - var(--home-inset) - 2px);
  border-top: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 8%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--color-accent) 8%, transparent);
  }
  border-radius: 0 0 5px 5px;
  background: rgb(20 20 20 / 0.7);
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 4%,
    #000 90%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 4%,
    #000 90%,
    transparent
  );
}
.home-ticker-track {
  display: flex;
  width: max-content;
  animation: home-ticker 38s linear infinite;
}
.home-ticker-group {
  margin: calc(var(--spacing) * 0);
  display: flex;
  flex: none;
  list-style-type: none;
  align-items: center;
  padding: calc(var(--spacing) * 0);
}
.home-ticker-group li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-right: calc(var(--spacing) * 5);
  white-space: nowrap;
}
.home-ticker-group li::after {
  margin-left: 0.35rem;
  height: 3px;
  width: 3px;
  content: "";
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 30%, transparent);
  }
}
.home-ticker-tag {
  padding-inline: 0.55rem;
  padding-block: 0.2rem;
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 32%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-accent) 32%, transparent);
  }
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 60%, transparent);
  }
}
.home-ticker-value {
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.42em;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 92%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 92%, transparent);
  }
}
@keyframes home-ticker {
  to {
    transform: translateX(-50%);
  }
}
.home-page .identity-block {
  top: 30px;
  left: 38px;
  display: block;
}
.home-page .identity-block::before,
.home-page .identity-meta,
.home-page .identity-name br {
  display: none;
}
.home-page .identity-name {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.home-page .identity-name .text-muted {
  color: inherit;
}
.home-page .identity-name .text-muted::before {
  content: " ";
}
.home-page .chrome-rail,

.home-page .chrome-compact {
  display: none;
}
.home-page .nav-menu-root {
  top: 30px;
  right: 40px;
  bottom: auto;
  display: flex;
  flex-direction: column-reverse;
  background: rgb(18 18 18 / 0.8);
  border-color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 28%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) 28%, transparent);
  }
  border-radius: 6px;
}
.home-page .nav-menu-toggle-label {
  font-size: 17px;
}
.home-page .nav-menu-toggle-index {
  font-size: 12px;
}
.home-page #wave-toggle {
  top: 37px;
  right: 377px;
  bottom: auto;
}
.home-page .chrome-contact {
  right: 40px;
  bottom: 26px;
  left: auto;
  display: none;
  gap: calc(var(--spacing) * 20);
  padding: calc(var(--spacing) * 0);
  text-align: right;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-shadow: 0 0 10px #000,
    0 0 4px #000,
    0 0 2px #000;
}
.home-page .chrome-contact p:first-child {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 72%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 72%, transparent);
  }
}
.home-page .chrome-contact a,
.home-page .chrome-contact p + p {
  margin-top: 0.35rem;
  font-size: 15px;
  color: var(--color-accent);
}
.home-page .chrome-contact .chrome-city {
  color: var(--color-accent);
}
.home-mini-stats {
  display: none;
}
@media (min-width: 992px) {
  .home-page .chrome-contact {
    display: flex;
  }
  .home-page #wave-toggle {
    display: flex;
  }
}
@media (min-width: 992px) and (max-width: 1365px) {
  .home-stats {
    right: 3.2%;
    left: auto;
    width: 268px;
  }
  .home-stats-metrics {
    gap: calc(var(--spacing) * 5);
  }
  .home-metric-label {
    font-size: 8px;
    letter-spacing: 0.04em;
  }
  .home-lede {
    margin-left: calc(var(--spacing) * 10);
  }
}
@media (min-width: 992px) and (max-height: 700px) {
  .home-copy {
    top: 30%;
  }
  .home-title {
    font-size: clamp(3rem, 11vh, 6rem);
  }
}
@media (max-width: 991px) {
  .home-hero {
    min-height: calc(var(--spacing) * 0);
    height: 100vh;
    height: 100svh;
  }
  .home-panel {
    top: 12px;
    bottom: 12px;
    left: 12px;
    width: calc(50% - 12px);
  }
  .home-stats {
    display: none;
  }
  .home-copy {
    top: auto;
    right: 62px;
    bottom: 92px;
    left: auto;
    text-align: right;
    width: min(46%, 26rem);
  }
  .home-title {
    margin-left: auto;
    font-size: clamp(56px, 6.2vw, 92px);
  }
  .home-copy {
    text-shadow: 0 0 14px rgb(0 0 0 / 0.9),
      0 0 3px rgb(0 0 0 / 0.8);
  }
  .home-copy::before {
    pointer-events: none;
    position: absolute;
    content: "";
    z-index: -1;
    inset: -2.5rem -3.5rem -1.5rem -4rem;
    background: radial-gradient(
      ellipse at 70% 55%,
      rgb(0 0 0 / 0.82) 0%,
      rgb(0 0 0 / 0.66) 45%,
      transparent 78%
    );
  }
  .home-lede,
  .home-tags {
    color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 82%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--color-accent) 82%, transparent);
    }
  }
  .home-tags {
    margin-top: calc(var(--spacing) * 4);
    justify-content: flex-end;
    gap: calc(var(--spacing) * 3);
    font-size: 10px;
    letter-spacing: 0.24em;
  }
  .home-tags-rule--long {
    display: none;
  }
  .home-lede {
    max-width: 22rem;
    padding: calc(var(--spacing) * 0);
    margin: 1.25rem 0 0 auto;
    font-size: 11px;
    line-height: 1.7;
  }
  .home-lede::before {
    display: none;
  }
  .home-mini-stats {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 5);
    padding-top: 0.9rem;
    text-transform: uppercase;
    margin: 1.4rem 0 0 auto;
    border-top: 1px solid
      color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 14%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-top: 1px solid
      color-mix(in srgb, var(--color-accent) 14%, transparent);
    }
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--color-accent) 55%, transparent);
    }
  }
  .home-mini-stats b {
    margin-right: calc(var(--spacing) * 2);
    color: var(--color-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
  }
  .home-mini-stats i {
    height: 12px;
    width: 1px;
    background: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-accent) 25%, transparent);
    }
  }
  .home-ticker {
    top: 24px;
    right: 32px;
    bottom: auto;
    left: auto;
    height: 38px;
    width: min(340px, 42vw);
    border-radius: 0;
    border-bottom: 1px solid
      color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-bottom: 1px solid
      color-mix(in srgb, var(--color-accent) 10%, transparent);
    }
    background: rgb(0 0 0 / 0.55);
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent,
      #000 12%,
      #000 88%,
      transparent
    );
    mask-image: linear-gradient(
      90deg,
      transparent,
      #000 12%,
      #000 88%,
      transparent
    );
  }
  .home-ticker-value {
    font-size: 11px;
    letter-spacing: 0.3em;
  }
  .home-ticker-tag {
    font-size: 8.5px;
  }
  .home-page .identity-block {
    top: 24px;
    left: 28px;
  }
  .home-page .identity-name {
    font-size: 17px;
  }
  .home-page .nav-menu-root {
    top: auto;
    right: 32px;
    bottom: 24px;
    flex-direction: column;
  }
  .home-page #wave-toggle {
    display: flex;
    top: auto;
    bottom: 29px;
    right: calc(32px + 320px + 16px);
  }
  .home-page .chrome-contact {
    right: auto;
    bottom: 22px;
    left: 28px;
    display: flex;
    text-align: left;
    max-width: calc(50% - 40px);
    gap: 0.75rem 3rem;
  }
  .home-page .chrome-contact p:first-child {
    font-size: 11.5px;
  }
  .home-page .chrome-contact a,
  .home-page .chrome-contact p + p {
    font-size: 12px;
  }
}
@media (max-width: 900px) {
  .home-panel {
    width: calc(42% - 12px);
  }
  .home-page .chrome-contact {
    flex-direction: column;
    align-items: flex-start;
    max-width: calc(42% - 40px);
  }
  .home-page .chrome-contact > div {
    width: 100%;
    text-align: left;
  }
  .home-copy {
    width: min(52%, 24rem);
  }
}
@media (max-width: 767px) {
  .home-panel {
    width: auto;
    inset: 8px;
    background: rgb(14 14 14 / 0.18);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .home-page .identity-block {
    top: 18px;
    left: 16px;
  }
  .home-ticker {
    top: 64px;
    right: 8px;
    left: 8px;
    width: auto;
  }
  .home-copy {
    right: 24px;
    bottom: 96px;
    left: 24px;
    width: auto;
  }
  .home-title {
    font-size: 58px;
  }
  .home-lede {
    max-width: 19rem;
  }
  .home-tags {
    gap: 0.6rem;
    max-width: 100%;
    font-size: 9.5px;
    letter-spacing: 0.18em;
  }
  .home-tags-text {
    min-width: calc(var(--spacing) * 0);
  }
  .home-page .chrome-contact {
    display: none;
  }
  .home-page .nav-menu-root {
    right: 16px;
    bottom: 16px;
    left: auto;
    width: min(320px, calc(100vw - 88px));
  }
  .home-page .nav-menu-root[data-open="true"] {
    width: min(320px, calc(100vw - 32px));
  }
  .home-page #wave-toggle {
    right: calc(16px + min(320px, calc(100vw - 88px)) + 12px);
    bottom: 20px;
  }
  .home-page .nav-menu-toggle {
    height: 50px;
    padding: 0 6px 0 16px;
  }
  .home-page .nav-menu-toggle-icon-wrap {
    height: 38px;
    width: 38px;
  }
}
@media (max-width: 480px) {
  .home-tags {
    font-size: 9px;
    letter-spacing: 0.14em;
  }
  .home-tags-rule {
    display: none;
  }
  .home-copy {
    right: 20px;
    left: 20px;
  }
  .home-title {
    font-size: clamp(48px, 17vw, 58px);
  }
}
@media (max-width: 991px) and (max-height: 560px) {
  .home-title {
    font-size: clamp(40px, 11vh, 56px);
  }
  .home-lede {
    display: none;
  }
  .home-copy {
    bottom: 84px;
  }
  .home-tags {
    margin-top: 0.6rem;
  }
  .home-mini-stats {
    margin-top: 0.8rem;
    padding-top: 0.6rem;
  }
}
@media (max-width: 767px) and (max-height: 560px) {
  .home-ticker {
    display: none;
  }
  .home-copy {
    right: 56px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-ticker-track,
  .home-stats-dot {
    animation: none;
  }
  .home-panel-rule {
    top: 53.4%;
    animation: none;
  }
  .home-ticker {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .home-page .nav-menu-root,
  .home-portrait-canvas,
  .home-portrait-fallback {
    transition: none;
  }
}
@media (max-width: 1023px) {
  .bl-inner {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
  .ab-hero {
    padding-top: clamp(5rem, 11vh, 7rem);
  }
  .ab-block {
    margin-top: calc(var(--spacing) * 24);
  }
  .bd-head {
    padding-top: 7rem;
  }
  .bd-pager {
    padding-top: 3.5rem;
    padding-bottom: 5rem;
  }
  .pc-head {
    padding-top: 7rem;
    padding-bottom: 1.5rem;
  }
}
@media (max-width: 639px) {
  .bl-inner {
    padding-top: 6.5rem;
    padding-bottom: 7rem;
  }
  .bl-bar {
    padding-top: calc(var(--spacing) * 5);
    padding-bottom: calc(var(--spacing) * 4);
  }
  .ab-hero {
    padding-top: 6.5rem;
  }
  .ab-block {
    margin-top: calc(var(--spacing) * 16);
  }
  .bd-head {
    padding-top: 6rem;
  }
  .bd-pager {
    padding-top: 2.5rem;
    padding-bottom: 4rem;
  }
  .pc-head {
    padding-top: 6rem;
  }
  .pc-wrap {
    padding-bottom: 4rem;
  }
}
.bd-bar {
  padding-left: clamp(9rem, 12vw, 11rem);
}
@media (max-width: 767px) {
  .bd-bar {
    padding-left: 9rem;
  }
}
@media (min-width: 640px) {
  .bd-byline {
    flex-wrap: nowrap;
  }
  .bd-share {
    width: auto;
    flex: none;
    flex-wrap: nowrap;
  }
}
.contact-page .chrome-clock {
  display: none;
}
.contact-page .page-title-heading {
  font-size: clamp(38px, 6vw, 76px);
  line-height: 0.85;
  letter-spacing: -0.01em;
}
.ct-inner {
  position: relative;
  margin-inline: auto;
  width: 100%;
  max-width: 820px;
  padding: clamp(7rem, 16vh, 12rem) 1.25rem 10rem;
}
.ct-kicker {
  margin: calc(var(--spacing) * 0);
  margin-bottom: calc(var(--spacing) * 4);
  font-family: var(--font-mono);
  font-size: 10px;
  --tw-tracking: 0.3em;
  letter-spacing: 0.3em;
  color: var(--ab-a35);
}
.ct-title {
  margin: calc(var(--spacing) * 0);
  margin-bottom: calc(var(--spacing) * 8);
  color: var(--color-accent);
  text-transform: uppercase;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: condensed;
  line-height: 0.9;
  font-size: clamp(3rem, 8vw, 5.5rem);
}
.ct-lede {
  margin: calc(var(--spacing) * 0);
  max-width: 34rem;
  font-family: var(--font-mono);
  font-size: 14px;
  --tw-leading: 1.75;
  line-height: 1.75;
  color: var(--ab-a62);
}
.ct-form {
  margin-top: calc(var(--spacing) * 14);
  display: grid;
  gap: calc(var(--spacing) * 9);
}
.ct-pair {
  display: grid;
  gap: calc(var(--spacing) * 9);
}
.ct-field {
  display: block;
}
.ct-label {
  margin-bottom: calc(var(--spacing) * 3);
  display: block;
  padding: calc(var(--spacing) * 0);
  font-family: var(--font-mono);
  font-size: 9.5px;
  --tw-tracking: 0.25em;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ab-a45);
}
.ct-label b {
  margin-right: calc(var(--spacing) * 1);
  color: var(--color-accent);
}
.ct-field input,
.ct-field textarea {
  display: block;
  width: 100%;
  resize: none;
  border-radius: 0;
  background-color: transparent;
  padding-block: calc(var(--spacing) * 3);
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--color-accent);
  border: 0;
  border-bottom: 1px solid var(--ab-a16);
  outline: 0;
  transition: border-color 0.3s;
}
.ct-field input::placeholder,
.ct-field textarea::placeholder {
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 25%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 25%, transparent);
  }
}
.ct-field input:focus,
.ct-field textarea:focus {
  border-color: var(--color-accent);
}
.ct-group {
  margin: calc(var(--spacing) * 0);
  min-width: calc(var(--spacing) * 0);
  border-style: var(--tw-border-style);
  border-width: 0px;
  padding: calc(var(--spacing) * 0);
}
.ct-chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2);
}
.ct-chip {
  position: relative;
  cursor: pointer;
}
.ct-chip input {
  position: absolute;
  inset: calc(var(--spacing) * 0);
  cursor: pointer;
  opacity: 0%;
}
.ct-chip span {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: 0.65rem;
  font-family: var(--font-mono);
  font-size: 12px;
  --tw-tracking: 0.1em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--ab-a16);
  border-radius: 4px;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 70%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 70%, transparent);
  }
  transition: color 0.3s,
    border-color 0.3s,
    background 0.3s;
}
.ct-chip i {
  font-size: 8px;
  --tw-tracking: var(--tracking-normal);
  letter-spacing: var(--tracking-normal);
  font-style: normal;
  color: color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 25%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 25%, transparent);
  }
}
.ct-chip:hover span {
  border-color: var(--ab-a35);
}
.ct-chip input:checked + span {
  background-color: var(--color-accent);
  color: var(--color-void);
  border-color: var(--color-accent);
}
.ct-chip input:checked + span i {
  color: color-mix(in srgb, #000000 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-void) 50%, transparent);
  }
}
.ct-chip input:focus-visible + span {
  outline: 1px solid var(--color-accent);
  outline-offset: 3px;
}
.ct-send {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  justify-self: flex-start;
  background-color: transparent;
  padding-inline: calc(var(--spacing) * 8);
  padding-block: calc(var(--spacing) * 4);
  font-family: var(--font-mono);
  font-size: 11px;
  --tw-tracking: 0.3em;
  letter-spacing: 0.3em;
  color: var(--color-accent);
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--brand-light, rgb(253 255 255)) 25%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
  }
  transition: color 0.3s,
    background 0.3s;
}
.ct-send:hover {
  background-color: var(--color-accent);
  color: var(--color-void);
}
.ct-links {
  margin: calc(var(--spacing) * 0);
  margin-top: calc(var(--spacing) * 20);
  display: flex;
  list-style-type: none;
  flex-wrap: wrap;
  column-gap: calc(var(--spacing) * 8);
  row-gap: calc(var(--spacing) * 3);
  padding-top: calc(var(--spacing) * 6);
  border-top: 1px solid var(--ab-a10);
}
.ct-links a {
  font-family: var(--font-mono);
  font-size: 11px;
  --tw-tracking: 0.18em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ab-a45);
  transition: color 0.3s;
}
.ct-links a:hover {
  color: var(--color-accent);
}
@media (min-width: 640px) {
  .ct-inner {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .ct-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 1279px) {
  .contact-page .chrome-contact {
    display: none;
  }
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
  initial-value: rotateX(0);
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
  initial-value: rotateY(0);
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
  initial-value: rotateZ(0);
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
  initial-value: skewX(0);
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
  initial-value: skewY(0);
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  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-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@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;
}
@property --tw-font-weight {
  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-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: rotateX(0);
      --tw-rotate-y: rotateY(0);
      --tw-rotate-z: rotateZ(0);
      --tw-skew-x: skewX(0);
      --tw-skew-y: skewY(0);
      --tw-border-style: solid;
      --tw-leading: 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-outline-style: solid;
      --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;
      --tw-font-weight: initial;
    }
  }
}