/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    :before,
    :after,
    ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --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;
    }
  }
}
@layer theme {
  :root,
  :host {
    --font-sans:
      ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono:
      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *,
  :after,
  :before,
  ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }
  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }
  html,
  :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    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;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: 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 {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }
  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 {
    vertical-align: middle;
    display: block;
  }
  img,
  video {
    max-width: 100%;
    height: auto;
  }
  button,
  input,
  select,
  optgroup,
  textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }
  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }
  :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)) {
      ::placeholder {
        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 {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button,
  input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }
  ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button {
    height: auto;
  }
  ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer components;
@layer utilities {
  .pointer-events-none {
    pointer-events: none;
  }
  .visible {
    visibility: visible;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
  .inset-\[-0\.18\%_0\] {
    inset: -0.18% 0;
  }
  .inset-\[-0\.23\%\] {
    inset: -0.23%;
  }
  .inset-\[-0\.25\%\] {
    inset: -0.25%;
  }
  .inset-\[-0\.26px_0\] {
    inset: -0.26px 0;
  }
  .inset-\[-0\.29\%\] {
    inset: -0.29%;
  }
  .inset-\[-0\.31\%\] {
    inset: -0.31%;
  }
  .inset-\[-2\.93\%_-3\.51\%_-8\.77\%_-4\.37\%\] {
    inset: -2.93% -3.51% -8.77% -4.37%;
  }
  .inset-\[-2px_0_0_0\] {
    inset: -2px 0 0;
  }
  .inset-\[-3px_0_0_0\] {
    inset: -3px 0 0;
  }
  .inset-\[-6px_0_0_0\] {
    inset: -6px 0 0;
  }
  .inset-\[-9\.96\%_-2\.8\%_-10\.6\%_-0\.96\%\] {
    inset: -9.96% -2.8% -10.6% -0.96%;
  }
  .inset-\[-10\.17\%_0\] {
    inset: -10.17% 0;
  }
  .inset-\[0\.14\%_49\.94\%_99\.84\%_22\.21\%\] {
    inset: 0.14% 49.94% 99.84% 22.21%;
  }
  .inset-\[0_-0\.26px\] {
    inset: 0 -0.26px;
  }
  .inset-\[0_-1\.88\%\] {
    inset: 0 -1.88%;
  }
  .inset-\[0_-2\.76\%\] {
    inset: 0 -2.76%;
  }
  .inset-\[0_0_0_-50\%\] {
    inset: 0 0 0 -50%;
  }
  .inset-\[6\.37\%_24\.49\%_93\.27\%_68\.95\%\] {
    inset: 6.37% 24.49% 93.27% 68.95%;
  }
  .inset-\[6\.51\%_23\.32\%_93\.42\%_71\.59\%\] {
    inset: 6.51% 23.32% 93.42% 71.59%;
  }
  .inset-\[6\.51\%_23\.32\%_93\.43\%_73\.11\%\] {
    inset: 6.51% 23.32% 93.43% 73.11%;
  }
  .inset-\[6\.51\%_27\.8\%_93\.42\%_72\.2\%\] {
    inset: 6.51% 27.8% 93.42% 72.2%;
  }
  .inset-\[6\.53\%_27\.5\%_93\.44\%_71\.9\%\] {
    inset: 6.53% 27.5% 93.44% 71.9%;
  }
  .inset-\[6\.54\%_27\.77\%_92\.95\%_70\.2\%\] {
    inset: 6.54% 27.77% 92.95% 70.2%;
  }
  .inset-\[6\.55\%_27\.19\%_93\.45\%_71\.59\%\] {
    inset: 6.55% 27.19% 93.45% 71.59%;
  }
  .inset-\[6\.83\%_25\.51\%_92\.71\%_65\.83\%\] {
    inset: 6.83% 25.51% 92.71% 65.83%;
  }
  .inset-\[7\.03\%_26\.23\%_92\.34\%_46\.84\%\] {
    inset: 7.03% 26.23% 92.34% 46.84%;
  }
  .inset-\[7\.03\%_26\.23\%_92\.91\%_71\.2\%\] {
    inset: 7.03% 26.23% 92.91% 71.2%;
  }
  .inset-\[7\.03\%_29\.79\%_92\.91\%_70\.21\%\] {
    inset: 7.03% 29.79% 92.91% 70.21%;
  }
  .inset-\[7\.04\%_29\.49\%_92\.92\%_69\.91\%\] {
    inset: 7.04% 29.49% 92.92% 69.91%;
  }
  .inset-\[7\.05\%_29\.8\%_91\.88\%_29\.95\%\] {
    inset: 7.05% 29.8% 91.88% 29.95%;
  }
  .inset-\[7\.06\%_29\.18\%_92\.94\%_69\.61\%\] {
    inset: 7.06% 29.18% 92.94% 69.61%;
  }
  .inset-\[7\.48\%_48\.05\%_92\.34\%_46\.84\%\] {
    inset: 7.48% 48.05% 92.34% 46.84%;
  }
  .inset-\[7\.89\%_65\.99\%_91\.66\%_25\.82\%\] {
    inset: 7.89% 65.99% 91.66% 25.82%;
  }
  .inset-\[8\.1\%_69\.75\%_91\.86\%_29\.65\%\] {
    inset: 8.1% 69.75% 91.86% 29.65%;
  }
  .inset-\[8\.09\%_69\.45\%_91\.85\%_25\.82\%\] {
    inset: 8.09% 69.45% 91.85% 25.82%;
  }
  .inset-\[8\.09\%_70\.05\%_91\.85\%_29\.95\%\] {
    inset: 8.09% 70.05% 91.85% 29.95%;
  }
  .inset-\[8\.09\%_71\.14\%_91\.85\%_25\.82\%\] {
    inset: 8.09% 71.14% 91.85% 25.82%;
  }
  .inset-\[8\.12\%_68\.56\%_91\.26\%_30\.03\%\] {
    inset: 8.12% 68.56% 91.26% 30.03%;
  }
  .inset-\[8\.12\%_69\.45\%_91\.88\%_29\.34\%\] {
    inset: 8.12% 69.45% 91.88% 29.34%;
  }
  .inset-\[8\.55\%_64\.98\%_91\.07\%_28\%\] {
    inset: 8.55% 64.98% 91.07% 28%;
  }
  .inset-\[8\.71\%_67\.89\%_91\.22\%_26\.32\%\] {
    inset: 8.71% 67.89% 91.22% 26.32%;
  }
  .inset-\[8\.71\%_68\.49\%_91\.22\%_31\.51\%\] {
    inset: 8.71% 68.49% 91.22% 31.51%;
  }
  .inset-\[8\.71\%_69\.86\%_91\.22\%_26\.32\%\] {
    inset: 8.71% 69.86% 91.22% 26.32%;
  }
  .inset-\[8\.73\%_68\.19\%_91\.24\%_31\.2\%\] {
    inset: 8.73% 68.19% 91.24% 31.2%;
  }
  .inset-\[8\.74\%_67\.89\%_91\.26\%_30\.9\%\] {
    inset: 8.74% 67.89% 91.26% 30.9%;
  }
  .start {
    inset-inline-start: var(--spacing);
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-\[-0\.16\%\] {
    top: -0.16%;
  }
  .top-\[-4\.66\%\] {
    top: -4.66%;
  }
  .top-\[-5\.31\%\] {
    top: -5.31%;
  }
  .top-\[-12\.06\%\] {
    top: -12.06%;
  }
  .top-\[-20\.51\%\] {
    top: -20.51%;
  }
  .top-\[-26\.79\%\] {
    top: -26.79%;
  }
  .top-\[-39\.88\%\] {
    top: -39.88%;
  }
  .top-\[-42\.37\%\] {
    top: -42.37%;
  }
  .top-\[-45\.04\%\] {
    top: -45.04%;
  }
  .top-\[-51\.02\%\] {
    top: -51.02%;
  }
  .top-\[-69\.06\%\] {
    top: -69.06%;
  }
  .top-\[-98px\] {
    top: -98px;
  }
  .top-\[-156\.94\%\] {
    top: -156.94%;
  }
  .top-\[10px\] {
    top: 10px;
  }
  .top-\[25px\] {
    top: 25px;
  }
  .top-\[30px\] {
    top: 30px;
  }
  .top-\[43\.5px\] {
    top: 43.5px;
  }
  .top-\[118px\] {
    top: 118px;
  }
  .top-\[181\.43px\] {
    top: 181.43px;
  }
  .top-\[188px\] {
    top: 188px;
  }
  .top-\[337\.8px\] {
    top: 337.8px;
  }
  .top-\[345px\] {
    top: 345px;
  }
  .top-\[495px\] {
    top: 495px;
  }
  .top-\[506px\] {
    top: 506px;
  }
  .top-\[657\.59px\] {
    top: 657.59px;
  }
  .top-\[665px\] {
    top: 665px;
  }
  .top-\[721px\] {
    top: 721px;
  }
  .top-\[832px\] {
    top: 832px;
  }
  .top-\[977px\] {
    top: 977px;
  }
  .top-\[978px\] {
    top: 978px;
  }
  .top-\[1014px\] {
    top: 1014px;
  }
  .top-\[1115px\] {
    top: 1115px;
  }
  .top-\[1166px\] {
    top: 1166px;
  }
  .top-\[1169px\] {
    top: 1169px;
  }
  .top-\[1442px\] {
    top: 1442px;
  }
  .top-\[1450px\] {
    top: 1450px;
  }
  .top-\[1623px\] {
    top: 1623px;
  }
  .top-\[1843px\] {
    top: 1843px;
  }
  .top-\[2040px\] {
    top: 2040px;
  }
  .top-\[2173px\] {
    top: 2173px;
  }
  .top-\[2184px\] {
    top: 2184px;
  }
  .top-\[2207px\] {
    top: 2207px;
  }
  .top-\[2886px\] {
    top: 2886px;
  }
  .top-\[2887px\] {
    top: 2887px;
  }
  .top-\[2895px\] {
    top: 2895px;
  }
  .top-\[2918px\] {
    top: 2918px;
  }
  .top-\[3554\.36px\] {
    top: 3554.36px;
  }
  .top-\[3556px\] {
    top: 3556px;
  }
  .top-\[3562px\] {
    top: 3562px;
  }
  .top-\[3568px\] {
    top: 3568px;
  }
  .top-\[3588px\] {
    top: 3588px;
  }
  .top-\[3603px\] {
    top: 3603px;
  }
  .top-\[3635px\] {
    top: 3635px;
  }
  .top-\[4116px\] {
    top: 4116px;
  }
  .top-\[4263px\] {
    top: 4263px;
  }
  .top-\[4331px\] {
    top: 4331px;
  }
  .top-\[5043px\] {
    top: 5043px;
  }
  .top-\[5049px\] {
    top: 5049px;
  }
  .top-\[5054px\] {
    top: 5054px;
  }
  .top-\[5175px\] {
    top: 5175px;
  }
  .top-\[5178\.3px\] {
    top: 5178.3px;
  }
  .top-\[5180\.3px\] {
    top: 5180.3px;
  }
  .top-\[5190px\] {
    top: 5190px;
  }
  .top-\[5379px\] {
    top: 5379px;
  }
  .top-\[5398px\] {
    top: 5398px;
  }
  .top-\[5616px\] {
    top: 5616px;
  }
  .top-\[6259px\] {
    top: 6259px;
  }
  .top-\[6338\.3px\] {
    top: 6338.3px;
  }
  .top-\[6338px\] {
    top: 6338px;
  }
  .top-\[6339px\] {
    top: 6339px;
  }
  .top-\[6439px\] {
    top: 6439px;
  }
  .top-\[6782\.3px\] {
    top: 6782.3px;
  }
  .top-\[6782\.62px\] {
    top: 6782.62px;
  }
  .top-\[6930px\] {
    top: 6930px;
  }
  .top-\[7211\.01px\] {
    top: 7211.01px;
  }
  .top-\[7211\.68px\] {
    top: 7211.68px;
  }
  .top-\[7246px\] {
    top: 7246px;
  }
  .top-\[8392px\] {
    top: 8392px;
  }
  .top-\[8519px\] {
    top: 8519px;
  }
  .top-\[8658px\] {
    top: 8658px;
  }
  .top-\[9296px\] {
    top: 9296px;
  }
  .top-\[9964px\] {
    top: 9964px;
  }
  .top-\[10604px\] {
    top: 10604px;
  }
  .top-\[10825px\] {
    top: 10825px;
  }
  .top-\[11281px\] {
    top: 11281px;
  }
  .top-\[11926px\] {
    top: 11926px;
  }
  .top-\[12610px\] {
    top: 12610px;
  }
  .top-\[13249px\] {
    top: 13249px;
  }
  .top-\[13886px\] {
    top: 13886px;
  }
  .top-\[13921px\] {
    top: 13921px;
  }
  .top-\[14720px\] {
    top: 14720px;
  }
  .top-\[15395px\] {
    top: 15395px;
  }
  .top-\[15481px\] {
    top: 15481px;
  }
  .top-\[15486px\] {
    top: 15486px;
  }
  .top-\[15804px\] {
    top: 15804px;
  }
  .top-\[15850px\] {
    top: 15850px;
  }
  .top-\[15910px\] {
    top: 15910px;
  }
  .top-\[16419px\] {
    top: 16419px;
  }
  .top-\[16463px\] {
    top: 16463px;
  }
  .top-\[16596px\] {
    top: 16596px;
  }
  .top-\[17555px\] {
    top: 17555px;
  }
  .top-\[18551px\] {
    top: 18551px;
  }
  .top-\[19548px\] {
    top: 19548px;
  }
  .top-\[20544px\] {
    top: 20544px;
  }
  .top-\[21540px\] {
    top: 21540px;
  }
  .top-\[22536px\] {
    top: 22536px;
  }
  .top-\[22543px\] {
    top: 22543px;
  }
  .top-\[22548px\] {
    top: 22548px;
  }
  .top-\[23129px\] {
    top: 23129px;
  }
  .top-\[23244px\] {
    top: 23244px;
  }
  .top-\[23387px\] {
    top: 23387px;
  }
  .top-\[23639px\] {
    top: 23639px;
  }
  .right-\[41\.97\%\] {
    right: 41.97%;
  }
  .right-\[1109\.03px\] {
    right: 1109.03px;
  }
  .right-\[1117\.71px\] {
    right: 1117.71px;
  }
  .right-\[1120\.93px\] {
    right: 1120.93px;
  }
  .right-\[1122px\] {
    right: 1122px;
  }
  .right-\[1211px\] {
    right: 1211px;
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .left-\[-0\.01\%\] {
    left: -0.01%;
  }
  .left-\[-0\.03\%\] {
    left: -0.03%;
  }
  .left-\[-1px\] {
    left: -1px;
  }
  .left-\[-2px\] {
    left: -2px;
  }
  .left-\[-5\.54\%\] {
    left: -5.54%;
  }
  .left-\[-5\.87\%\] {
    left: -5.87%;
  }
  .left-\[-93\.73\%\] {
    left: -93.73%;
  }
  .left-\[-102\.76\%\] {
    left: -102.76%;
  }
  .left-\[-112\.8\%\] {
    left: -112.8%;
  }
  .left-\[-147px\] {
    left: -147px;
  }
  .left-\[-150\.61\%\] {
    left: -150.61%;
  }
  .left-\[-167\.65\%\] {
    left: -167.65%;
  }
  .left-\[-214\.29\%\] {
    left: -214.29%;
  }
  .left-\[-247\.92\%\] {
    left: -247.92%;
  }
  .left-\[-419\.6\%\] {
    left: -419.6%;
  }
  .left-\[3px\] {
    left: 3px;
  }
  .left-\[4px\] {
    left: 4px;
  }
  .left-\[11px\] {
    left: 11px;
  }
  .left-\[13px\] {
    left: 13px;
  }
  .left-\[14px\] {
    left: 14px;
  }
  .left-\[16\.25px\] {
    left: 16.25px;
  }
  .left-\[19px\] {
    left: 19px;
  }
  .left-\[23px\] {
    left: 23px;
  }
  .left-\[24px\] {
    left: 24px;
  }
  .left-\[29px\] {
    left: 29px;
  }
  .left-\[30px\] {
    left: 30px;
  }
  .left-\[38px\] {
    left: 38px;
  }
  .left-\[43\.45\%\] {
    left: 43.45%;
  }
  .left-\[45px\] {
    left: 45px;
  }
  .left-\[53px\] {
    left: 53px;
  }
  .left-\[65px\] {
    left: 65px;
  }
  .left-\[91\.44px\] {
    left: 91.44px;
  }
  .left-\[93\.73px\] {
    left: 93.73px;
  }
  .left-\[94px\] {
    left: 94px;
  }
  .left-\[98\.65px\] {
    left: 98.65px;
  }
  .left-\[99\.48px\] {
    left: 99.48px;
  }
  .left-\[99px\] {
    left: 99px;
  }
  .left-\[100px\] {
    left: 100px;
  }
  .left-\[101\.78px\] {
    left: 101.78px;
  }
  .left-\[120px\] {
    left: 120px;
  }
  .left-\[170px\] {
    left: 170px;
  }
  .left-\[325px\] {
    left: 325px;
  }
  .left-\[399px\] {
    left: 399px;
  }
  .left-\[420px\] {
    left: 420px;
  }
  .left-\[440px\] {
    left: 440px;
  }
  .left-\[445px\] {
    left: 445px;
  }
  .left-\[446px\] {
    left: 446px;
  }
  .left-\[503px\] {
    left: 503px;
  }
  .left-\[517px\] {
    left: 517px;
  }
  .left-\[519px\] {
    left: 519px;
  }
  .left-\[520px\] {
    left: 520px;
  }
  .left-\[521px\] {
    left: 521px;
  }
  .left-\[524px\] {
    left: 524px;
  }
  .left-\[531px\] {
    left: 531px;
  }
  .left-\[537px\] {
    left: 537px;
  }
  .left-\[538px\] {
    left: 538px;
  }
  .left-\[545px\] {
    left: 545px;
  }
  .left-\[552px\] {
    left: 552px;
  }
  .left-\[583\.5px\] {
    left: 583.5px;
  }
  .left-\[590\.87px\] {
    left: 590.87px;
  }
  .left-\[603px\] {
    left: 603px;
  }
  .left-\[625px\] {
    left: 625px;
  }
  .left-\[632px\] {
    left: 632px;
  }
  .left-\[642px\] {
    left: 642px;
  }
  .left-\[652px\] {
    left: 652px;
  }
  .left-\[654px\] {
    left: 654px;
  }
  .left-\[664px\] {
    left: 664px;
  }
  .left-\[687px\] {
    left: 687px;
  }
  .left-\[704px\] {
    left: 704px;
  }
  .left-\[732px\] {
    left: 732px;
  }
  .left-\[736px\] {
    left: 736px;
  }
  .left-\[745px\] {
    left: 745px;
  }
  .left-\[749px\] {
    left: 749px;
  }
  .left-\[759px\] {
    left: 759px;
  }
  .left-\[760px\] {
    left: 760px;
  }
  .left-\[765px\] {
    left: 765px;
  }
  .left-\[769px\] {
    left: 769px;
  }
  .left-\[776px\] {
    left: 776px;
  }
  .left-\[783px\] {
    left: 783px;
  }
  .left-\[801px\] {
    left: 801px;
  }
  .left-\[836px\] {
    left: 836px;
  }
  .left-\[956px\] {
    left: 956px;
  }
  .left-\[977px\] {
    left: 977px;
  }
  .left-px {
    left: 1px;
  }
  .mb-0 {
    margin-bottom: calc(var(--spacing) * 0);
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .aspect-\[187\/624\] {
    aspect-ratio: 187/624;
  }
  .aspect-\[1691\/930\] {
    aspect-ratio: 1691/930;
  }
  .aspect-\[2048\/1119\] {
    aspect-ratio: 2048/1119;
  }
  .size-\[129px\] {
    width: 129px;
    height: 129px;
  }
  .size-\[646px\] {
    width: 646px;
    height: 646px;
  }
  .size-full {
    width: 100%;
    height: 100%;
  }
  .h-0 {
    height: calc(var(--spacing) * 0);
  }
  .h-\[15px\] {
    height: 15px;
  }
  .h-\[21px\] {
    height: 21px;
  }
  .h-\[27px\] {
    height: 27px;
  }
  .h-\[31\.044px\] {
    height: 31.044px;
  }
  .h-\[33px\] {
    height: 33px;
  }
  .h-\[39\.899px\] {
    height: 39.899px;
  }
  .h-\[40\.845px\] {
    height: 40.845px;
  }
  .h-\[53px\] {
    height: 53px;
  }
  .h-\[55px\] {
    height: 55px;
  }
  .h-\[61px\] {
    height: 61px;
  }
  .h-\[73px\] {
    height: 73px;
  }
  .h-\[80\.22px\] {
    height: 80.22px;
  }
  .h-\[87px\] {
    height: 87px;
  }
  .h-\[89px\] {
    height: 89px;
  }
  .h-\[100\.01\%\] {
    height: 100.01%;
  }
  .h-\[100\.16\%\] {
    height: 100.16%;
  }
  .h-\[100\.17\%\] {
    height: 100.17%;
  }
  .h-\[100cqh\] {
    height: 100cqh;
  }
  .h-\[104\.7\%\] {
    height: 104.7%;
  }
  .h-\[109px\] {
    height: 109px;
  }
  .h-\[112\.04\%\] {
    height: 112.04%;
  }
  .h-\[119\.29\%\] {
    height: 119.29%;
  }
  .h-\[121px\] {
    height: 121px;
  }
  .h-\[122px\] {
    height: 122px;
  }
  .h-\[129px\] {
    height: 129px;
  }
  .h-\[135\.26\%\] {
    height: 135.26%;
  }
  .h-\[135px\] {
    height: 135px;
  }
  .h-\[153\.63\%\] {
    height: 153.63%;
  }
  .h-\[154px\] {
    height: 154px;
  }
  .h-\[155px\] {
    height: 155px;
  }
  .h-\[162px\] {
    height: 162px;
  }
  .h-\[165px\] {
    height: 165px;
  }
  .h-\[168px\] {
    height: 168px;
  }
  .h-\[170\.88\%\] {
    height: 170.88%;
  }
  .h-\[171\.43\%\] {
    height: 171.43%;
  }
  .h-\[179\.08\%\] {
    height: 179.08%;
  }
  .h-\[182px\] {
    height: 182px;
  }
  .h-\[186px\] {
    height: 186px;
  }
  .h-\[189px\] {
    height: 189px;
  }
  .h-\[199px\] {
    height: 199px;
  }
  .h-\[217px\] {
    height: 217px;
  }
  .h-\[223px\] {
    height: 223px;
  }
  .h-\[227\.78\%\] {
    height: 227.78%;
  }
  .h-\[266px\] {
    height: 266px;
  }
  .h-\[268px\] {
    height: 268px;
  }
  .h-\[269px\] {
    height: 269px;
  }
  .h-\[281px\] {
    height: 281px;
  }
  .h-\[286px\] {
    height: 286px;
  }
  .h-\[299px\] {
    height: 299px;
  }
  .h-\[315px\] {
    height: 315px;
  }
  .h-\[317\.88\%\] {
    height: 317.88%;
  }
  .h-\[346px\] {
    height: 346px;
  }
  .h-\[364px\] {
    height: 364px;
  }
  .h-\[365px\] {
    height: 365px;
  }
  .h-\[400\.56\%\] {
    height: 400.56%;
  }
  .h-\[445px\] {
    height: 445px;
  }
  .h-\[463px\] {
    height: 463px;
  }
  .h-\[495px\] {
    height: 495px;
  }
  .h-\[637px\] {
    height: 637px;
  }
  .h-\[639px\] {
    height: 639px;
  }
  .h-\[640px\] {
    height: 640px;
  }
  .h-\[642px\] {
    height: 642px;
  }
  .h-\[645px\] {
    height: 645px;
  }
  .h-\[671\.62\%\] {
    height: 671.62%;
  }
  .h-\[676px\] {
    height: 676px;
  }
  .h-\[714px\] {
    height: 714px;
  }
  .h-\[718px\] {
    height: 718px;
  }
  .h-\[721px\] {
    height: 721px;
  }
  .h-\[725px\] {
    height: 725px;
  }
  .h-\[729px\] {
    height: 729px;
  }
  .h-\[873px\] {
    height: 873px;
  }
  .h-\[959px\] {
    height: 959px;
  }
  .h-\[996px\] {
    height: 996px;
  }
  .h-\[997px\] {
    height: 997px;
  }
  .h-\[1129px\] {
    height: 1129px;
  }
  .h-\[1159px\] {
    height: 1159px;
  }
  .h-\[1160px\] {
    height: 1160px;
  }
  .h-\[1251px\] {
    height: 1251px;
  }
  .h-\[1258px\] {
    height: 1258px;
  }
  .h-\[1446\.618px\] {
    height: 1446.62px;
  }
  .h-\[1447px\] {
    height: 1447px;
  }
  .h-\[1635px\] {
    height: 1635px;
  }
  .h-\[1875\.674px\] {
    height: 1875.67px;
  }
  .h-\[1876px\] {
    height: 1876px;
  }
  .h-\[2319px\] {
    height: 2319px;
  }
  .h-\[3214px\] {
    height: 3214px;
  }
  .h-\[3562px\] {
    height: 3562px;
  }
  .h-\[3623px\] {
    height: 3623px;
  }
  .h-\[3986px\] {
    height: 3986px;
  }
  .h-\[10986px\] {
    height: 10986px;
  }
  .h-\[hypot\(10\.0092cqw\,31\.6861cqh\)\] {
    height: hypot(10.0092cqw, 31.6861cqh);
  }
  .h-full {
    height: 100%;
  }
  .w-0 {
    width: calc(var(--spacing) * 0);
  }
  .w-\[4px\] {
    width: 4px;
  }
  .w-\[14\.73px\] {
    width: 14.73px;
  }
  .w-\[14px\] {
    width: 14px;
  }
  .w-\[15\.863px\] {
    width: 15.863px;
  }
  .w-\[50px\] {
    width: 50px;
  }
  .w-\[51px\] {
    width: 51px;
  }
  .w-\[65px\] {
    width: 65px;
  }
  .w-\[73px\] {
    width: 73px;
  }
  .w-\[80\.048px\] {
    width: 80.048px;
  }
  .w-\[80\.516px\] {
    width: 80.516px;
  }
  .w-\[90\.181px\] {
    width: 90.181px;
  }
  .w-\[98px\] {
    width: 98px;
  }
  .w-\[100\.02\%\] {
    width: 100.02%;
  }
  .w-\[100\.03\%\] {
    width: 100.03%;
  }
  .w-\[100\.07\%\] {
    width: 100.07%;
  }
  .w-\[100\.31\%\] {
    width: 100.31%;
  }
  .w-\[100cqw\] {
    width: 100cqw;
  }
  .w-\[100px\] {
    width: 100px;
  }
  .w-\[101\.46\%\] {
    width: 101.46%;
  }
  .w-\[105\.54\%\] {
    width: 105.54%;
  }
  .w-\[109px\] {
    width: 109px;
  }
  .w-\[111\.94\%\] {
    width: 111.94%;
  }
  .w-\[113px\] {
    width: 113px;
  }
  .w-\[120px\] {
    width: 120px;
  }
  .w-\[123\.728px\] {
    width: 123.728px;
  }
  .w-\[125px\] {
    width: 125px;
  }
  .w-\[127\.147px\] {
    width: 127.147px;
  }
  .w-\[162px\] {
    width: 162px;
  }
  .w-\[184\.747px\] {
    width: 184.747px;
  }
  .w-\[186px\] {
    width: 186px;
  }
  .w-\[227px\] {
    width: 227px;
  }
  .w-\[228px\] {
    width: 228px;
  }
  .w-\[230px\] {
    width: 230px;
  }
  .w-\[243px\] {
    width: 243px;
  }
  .w-\[270px\] {
    width: 270px;
  }
  .w-\[275px\] {
    width: 275px;
  }
  .w-\[301\.76\%\] {
    width: 301.76%;
  }
  .w-\[303\.474px\] {
    width: 303.474px;
  }
  .w-\[303px\] {
    width: 303px;
  }
  .w-\[314\.29\%\] {
    width: 314.29%;
  }
  .w-\[321\.3\%\] {
    width: 321.3%;
  }
  .w-\[326px\] {
    width: 326px;
  }
  .w-\[339\.63\%\] {
    width: 339.63%;
  }
  .w-\[385\.27\%\] {
    width: 385.27%;
  }
  .w-\[393px\] {
    width: 393px;
  }
  .w-\[434px\] {
    width: 434px;
  }
  .w-\[451\.36\%\] {
    width: 451.36%;
  }
  .w-\[462\.028px\] {
    width: 462.028px;
  }
  .w-\[466px\] {
    width: 466px;
  }
  .w-\[483\.662px\] {
    width: 483.662px;
  }
  .w-\[484px\] {
    width: 484px;
  }
  .w-\[485px\] {
    width: 485px;
  }
  .w-\[488px\] {
    width: 488px;
  }
  .w-\[492px\] {
    width: 492px;
  }
  .w-\[498px\] {
    width: 498px;
  }
  .w-\[513px\] {
    width: 513px;
  }
  .w-\[522px\] {
    width: 522px;
  }
  .w-\[523px\] {
    width: 523px;
  }
  .w-\[527px\] {
    width: 527px;
  }
  .w-\[539px\] {
    width: 539px;
  }
  .w-\[541px\] {
    width: 541px;
  }
  .w-\[544px\] {
    width: 544px;
  }
  .w-\[606\.64\%\] {
    width: 606.64%;
  }
  .w-\[624px\] {
    width: 624px;
  }
  .w-\[643\.22\%\] {
    width: 643.22%;
  }
  .w-\[643px\] {
    width: 643px;
  }
  .w-\[654\.631px\] {
    width: 654.631px;
  }
  .w-\[745px\] {
    width: 745px;
  }
  .w-\[755\.716px\] {
    width: 755.716px;
  }
  .w-\[1123\.375px\] {
    width: 1123.38px;
  }
  .w-\[1160px\] {
    width: 1160px;
  }
  .w-\[1254\.168px\] {
    width: 1254.17px;
  }
  .w-\[1276px\] {
    width: 1276px;
  }
  .w-\[1279px\] {
    width: 1279px;
  }
  .w-\[1280px\] {
    width: 1280px;
  }
  .w-\[1282px\] {
    width: 1282px;
  }
  .w-\[1283px\] {
    width: 1283px;
  }
  .w-\[1286px\] {
    width: 1286px;
  }
  .w-\[1289px\] {
    width: 1289px;
  }
  .w-\[1292px\] {
    width: 1292px;
  }
  .w-\[1353px\] {
    width: 1353px;
  }
  .w-\[1429px\] {
    width: 1429px;
  }
  .w-\[hypot\(89\.9908cqw\,-68\.3139cqh\)\] {
    width: hypot(89.9908cqw, -68.3139cqh);
  }
  .w-full {
    width: 100%;
  }
  .max-w-none {
    max-width: none;
  }
  .flex-none {
    flex: none;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-scale-x-100 {
    --tw-scale-x: calc(100% * -1);
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .-scale-y-100 {
    --tw-scale-y: calc(100% * -1);
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .-rotate-90 {
    rotate: -90deg;
  }
  .rotate-90 {
    rotate: 90deg;
  }
  .rotate-180 {
    rotate: 180deg;
  }
  .rotate-\[-0\.68deg\] {
    rotate: -0.68deg;
  }
  .rotate-\[-26\.08deg\] {
    rotate: -26.08deg;
  }
  .skew-x-\[0\.02deg\] {
    --tw-skew-x: skewX(0.02deg);
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,)
      var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,)
      var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .flex-col {
    flex-direction: column;
  }
  .content-stretch {
    align-content: stretch;
  }
  .items-center {
    align-items: center;
  }
  .justify-center {
    justify-content: center;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .bg-\[\#f4f1ec\] {
    background-color: #f4f1ec;
  }
  .bg-\[rgba\(232\,227\,216\,0\.5\)\] {
    background-color: #e8e3d880;
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-gradient-to-b {
    --tw-gradient-position: to bottom in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .from-\[\#090505\] {
    --tw-gradient-from: #090505;
    --tw-gradient-stops: var(
      --tw-gradient-via-stops,
      var(--tw-gradient-position),
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position)
    );
  }
  .from-\[rgba\(255\,255\,255\,0\)\] {
    --tw-gradient-from: #fff0;
    --tw-gradient-stops: var(
      --tw-gradient-via-stops,
      var(--tw-gradient-position),
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position)
    );
  }
  .to-\[\#1c9469\] {
    --tw-gradient-to: #1c9469;
    --tw-gradient-stops: var(
      --tw-gradient-via-stops,
      var(--tw-gradient-position),
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position)
    );
  }
  .to-\[\#9dfffd\] {
    --tw-gradient-to: #9dfffd;
    --tw-gradient-stops: var(
      --tw-gradient-via-stops,
      var(--tw-gradient-position),
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position)
    );
  }
  .to-\[\#564120\] {
    --tw-gradient-to: #564120;
    --tw-gradient-stops: var(
      --tw-gradient-via-stops,
      var(--tw-gradient-position),
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position)
    );
  }
  .to-\[\#a89b9c\] {
    --tw-gradient-to: #a89b9c;
    --tw-gradient-stops: var(
      --tw-gradient-via-stops,
      var(--tw-gradient-position),
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position)
    );
  }
  .to-\[\#fd6b04\] {
    --tw-gradient-to: #fd6b04;
    --tw-gradient-stops: var(
      --tw-gradient-via-stops,
      var(--tw-gradient-position),
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position)
    );
  }
  .object-cover {
    object-fit: cover;
  }
  .pt-\[40px\] {
    padding-top: 40px;
  }
  .text-center {
    text-align: center;
  }
  .text-right {
    text-align: right;
  }
  .font-\[\'Inter\:Medium\'\] {
    font-family: Inter\:Medium;
  }
  .font-\[\'Inter\:Regular\'\] {
    font-family: Inter\:Regular;
  }
  .font-\[\'JetBrains_Mono\:Regular\'\] {
    font-family: JetBrains Mono\:Regular;
  }
  .text-\[0px\] {
    font-size: 0;
  }
  .text-\[10px\] {
    font-size: 10px;
  }
  .text-\[11\.452px\] {
    font-size: 11.452px;
  }
  .text-\[14px\] {
    font-size: 14px;
  }
  .text-\[20px\] {
    font-size: 20px;
  }
  .leading-\[0\] {
    --tw-leading: 0;
    line-height: 0;
  }
  .leading-\[15px\] {
    --tw-leading: 15px;
    line-height: 15px;
  }
  .leading-\[normal\] {
    --tw-leading: normal;
    line-height: normal;
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .tracking-\[0\.5px\] {
    --tw-tracking: 0.5px;
    letter-spacing: 0.5px;
  }
  .\[word-break\:break-word\] {
    word-break: break-word;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }
  .text-\[\#171717\] {
    color: #171717;
  }
  .text-\[\#a2a2a2\] {
    color: #a2a2a2;
  }
  .text-\[\#f4f1ec\] {
    color: #f4f1ec;
  }
  .text-\[rgba\(17\,17\,17\,0\.5\)\] {
    color: #11111180;
  }
  .text-black {
    color: var(--color-black);
  }
  .uppercase {
    text-transform: uppercase;
  }
  .not-italic {
    font-style: normal;
  }
  .opacity-60 {
    opacity: 0.6;
  }
  .mix-blend-darken {
    mix-blend-mode: darken;
  }
  .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,);
  }
}
@font-face {
  font-family: Inter\:Medium;
  src: url(https://static.figma.com/font/Inter_1) format("woff2");
  font-style: normal;
  font-weight: 500;
}
@font-face {
  font-family: Inter\:Regular;
  src: url(https://static.figma.com/font/Inter_1) format("woff2");
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: JetBrains Mono\:Regular;
  src: url(https://static.figma.com/font/JetBrainsMono_wght__1) format("woff2");
  font-style: normal;
  font-weight: 400;
}
.reveal {
  opacity: 0;
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateY(24px);
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
.img-link {
  display: block;
  overflow: hidden;
}
.img-link img {
  transition:
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.4s;
}
.img-link:hover img {
  filter: brightness(1.05);
  transform: scale(1.03);
}
.img-link:hover {
  outline: none;
}
.line-reveal {
  opacity: 0;
  transition: opacity 1.2s;
}
.line-reveal.in-view {
  opacity: 1;
}
.delay-100 {
  transition-delay: 0.1s;
}
.delay-200 {
  transition-delay: 0.2s;
}
.delay-300 {
  transition-delay: 0.3s;
}
.delay-400 {
  transition-delay: 0.4s;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-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;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@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;
}

/* Responsive layout additions: preserve the original 1282px Figma canvas. */
:root {
  --canvas-width: 1282px;
  --canvas-height: 23800px;
  --canvas-ratio-height: 1856.47vw;
}

html,
body {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: #fff;
}

img {
  max-width: 100%;
  height: auto;
}

/* Keep the image crops that are part of the fixed composition unchanged. */
body > .bg-white.relative img.max-w-none {
  max-width: none;
}

/* The exported Figma artwork is one positioned canvas, so it scales as one unit. */
body > .bg-white.relative {
  transform-origin: top left;
  will-change: transform;
}

/* Keep the boxed 01–05 project navigation fixed while the page scrolls. */
.project-navigation {
  position: fixed;
  top: 0;
  left: 50%;
  width: var(--canvas-width);
  height: 721px;
  margin: 0;
  transform: translateX(-50%);
  transform-origin: top left;
  z-index: 1000;
}

.project-navigation .fixed {
  position: fixed;
  z-index: 1001;
}

/* Mobile first: scale the complete composition to the viewport width. */
@media (max-width: 767px) {
  body {
    min-height: var(--canvas-ratio-height);
  }

  body > .bg-white.relative {
    width: var(--canvas-width) !important;
    min-height: var(--canvas-height) !important;
    margin: 0 !important;
    transform: scale(calc(100vw / 1282px));
  }

  .project-navigation {
    left: 0;
    transform: scale(calc(100vw / 1282px));
  }
}

/* Tablet: use the same proportional composition and prevent horizontal scrolling. */
@media (min-width: 768px) and (max-width: 1024px) {
  body {
    min-height: var(--canvas-ratio-height);
  }

  body > .bg-white.relative {
    width: var(--canvas-width) !important;
    min-height: var(--canvas-height) !important;
    margin: 0 !important;
    transform: scale(calc(100vw / 1282px));
  }

  .project-navigation {
    left: 0;
    transform: scale(calc(100vw / 1282px));
  }
}

/* Desktop: restore the original full-size layout and centre it. */
@media (min-width: 1025px) {
  body {
    display: flex;
    justify-content: center;
  }

  body > .bg-white.relative {
    width: var(--canvas-width) !important;
    min-height: var(--canvas-height) !important;
    margin: 0 !important;
    transform: none;
  }
}

/* Semantic long-scroll sections: keep the original positioned artwork intact. */
.hero-section,
.intro-section,
.works-1-section,
.works-2-section,
.typography-section,
.graphic-section,
.installation-section,
.architecture-section,
.visual-section,
.scene-section,
.closing-section {
  display: contents;
}

/* Mobile: the existing canvas scaling keeps every section's collage in proportion. */
@media (max-width: 767px) {
  .hero-section,
  .intro-section,
  .works-1-section,
  .works-2-section,
  .typography-section,
  .graphic-section,
  .installation-section,
  .architecture-section,
  .visual-section,
  .scene-section,
  .closing-section {
    display: contents;
  }
}

/* Tablet: retain the original Figma composition while using the existing scaled canvas. */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero-section,
  .intro-section,
  .works-1-section,
  .works-2-section,
  .typography-section,
  .graphic-section,
  .installation-section,
  .architecture-section,
  .visual-section,
  .scene-section,
  .closing-section {
    display: contents;
  }
}

/* Keep only the 01–05 labels and thumbnail blocks fixed, not a full navigation panel. */
.project-navigation {
  position: fixed;
  top: 0;
  left: calc(50% - 641px);
  width: 0;
  height: 0;
  margin: 0;
  transform: translateZ(0);
  transform-origin: top left;
  z-index: 1000;
  pointer-events: none;
}

.project-navigation .fixed {
  position: fixed;
  z-index: 1001;
  pointer-events: auto;
}

@media (max-width: 1024px) {
  .project-navigation {
    left: 0;
    transform: scale(calc(100vw / 1282px));
  }
}

/* Apple-style responsive foundation, scoped to preserve the fixed collage artwork. */
:root {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #1d1d1f;
  background-color: #fff;
  line-height: 1.5;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Reusable grid rule for any later normal-flow collage groups. */
.grid-wrap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
}

a,
button,
.img-link {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Tablet: preserve the existing scaled long canvas and provide a two-column grid option. */
@media screen and (max-width: 1024px) {
  .grid-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 3vw, 1.5rem);
  }

  /* Sections are positioned collage layers, so no generic padding is added here. */
  main > section {
    width: 100%;
    padding: 0;
  }
}

/* Mobile: retain the artwork proportions and make future grid groups single-column. */
@media screen and (max-width: 767px) {
  .grid-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(0.75rem, 2vw, 1.25rem);
  }

  main h1 {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  main h2 {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  main p:not([class]) {
    font-size: clamp(0.9rem, 3vw, 1rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  a,
  button,
  .img-link {
    transition: none;
  }
}

/* Restore the 1282px coordinate layer so all 01–05 labels and thumbnails keep their layout. */
.project-navigation {
  position: fixed;
  top: 0;
  left: 50%;
  display: block;
  width: var(--canvas-width);
  height: 721px;
  margin: 0;
  transform: translateX(-50%);
  transform-origin: top left;
  visibility: visible;
  opacity: 1;
  isolation: isolate;
  z-index: 1100;
  pointer-events: none;
}

.project-navigation .fixed {
  position: fixed;
  z-index: 1101;
  pointer-events: auto;
}

@media (max-width: 1024px) {
  .project-navigation {
    left: 0;
    transform: scale(calc(100vw / 1282px));
  }
}


/* =====================================
   Image section smooth scrolling
   Added only for navigation-to-large-image movement
   Original layout / images / animations unchanged
   ===================================== */

html {
    scroll-behavior: smooth;
}

#yuelu-large,
#houhu-large,
#chaozong-large,
#hnhu-large,
#wuyi-large {
    scroll-margin-top: 90px;
}

/* Keep navigation interaction unchanged */
.project-navigation a {
    cursor: pointer;
}

@media (max-width: 1024px) {
    html {
        scroll-behavior: smooth;
    }
}

/* Local font directory */
@font-face {
    font-family: "InterLocal";
    src: url("./assets/fonts/Inter.woff2") format("woff2");
    font-weight: 400 500;
    font-style: normal;
}

/* Head / tail responsive adjustment */
@media (max-width: 1024px) {

    /* first and last visual sections only */
    .hero,
    .footer,
    .head-section,
    .tail-section {
        width: 100%;
        max-width: 100%;
    }

    .hero,
    .footer,
    .head-section,
    .tail-section {
        position: relative;
    }

    .hero img,
    .footer img,
    .head-section img,
    .tail-section img {
        max-width: 100%;
        height: auto;
    }

    .hero .content,
    .footer .content,
    .head-section .content,
    .tail-section .content {
        width: min(90vw, 720px);
        margin-inline: auto;
    }
}

@media (max-width: 767px) {

    .hero,
    .footer,
    .head-section,
    .tail-section {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .hero h1,
    .head-section h1,
    .tail-section h1 {
        font-size: clamp(2rem, 10vw, 4rem);
    }

    .hero p,
    .footer p,
    .head-section p,
    .tail-section p {
        font-size: clamp(.8rem, 3vw, 1rem);
    }
}

/* Middle long page keeps proportional scaling */
@media (max-width: 1024px) {
    .middle-section,
    .page-middle {
        transform-origin: top center;
    }
}


/* =================================================
   Final responsive reflow
   Desktop unchanged
   Mobile/tablet first page and last page re-layout
   Middle sections keep proportional scaling
   Image paths unchanged
   ================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

/* Middle long page:
   keep original composition, only proportional scaling */
.middle-section,
.middle-content,
.page-content {
    max-width: 100%;
}

.middle-section img,
.middle-content img,
.page-content img {
    max-width: 100%;
    height: auto;
}

/* Tablet */
@media (min-width:768px) and (max-width:1024px){

    .hero-section,
    .first-page,
    .footer-section,
    .last-page {
        width:100%;
        height:auto;
    }

    .hero-section,
    .footer-section,
    .last-page {
        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .hero-section img,
    .footer-section img,
    .last-page img {
        width:90%;
        height:auto;
    }

    h1,
    .title {
        font-size:clamp(3rem,8vw,6rem);
        line-height:.95;
    }
}


/* Mobile */
@media (max-width:767px){

    .hero-section,
    .first-page {
        min-height:auto;
        width:100%;
        display:flex;
        flex-direction:column;
        justify-content:flex-start;
        align-items:center;
        padding:16px;
    }

    .hero-section nav,
    .first-page nav {
        width:100%;
    }

    .hero-section .title,
    .first-page .title,
    h1 {
        width:100%;
        font-size:clamp(2.5rem,13vw,4.5rem);
        line-height:.9;
        text-align:left;
    }

    .hero-section .description,
    .first-page .description,
    .intro {
        width:90%;
        margin:20px auto;
        font-size:clamp(.8rem,3.2vw,1rem);
        line-height:1.5;
    }

    .hero-section img,
    .first-page img {
        width:100%;
        height:auto;
        object-fit:contain;
    }


    .footer-section,
    .last-page {
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:center;
        padding:16px;
    }

    .footer-section img,
    .last-page img {
        width:100%;
        height:auto;
    }

    .footer-section .title,
    .last-page .title {
        font-size:clamp(2rem,11vw,4rem);
    }

}


/* Small phone */
@media (max-width:480px){

    .hero-section,
    .first-page,
    .footer-section,
    .last-page {
        padding:12px;
    }

    h1,
    .title {
        font-size:2.2rem;
    }
}
