:root {
      --color-ink: 20 20 20;
      --color-accent: 240 220 200;
      --color-accent-bright: 251 235 217;
      --color-accent-ink: 43 39 37;
      --color-wash: 255 255 255;
      --color-label-primary: 247 247 247;
      --color-label-secondary: 173 173 173;
      --color-label-tertiary: 122 122 122;
      --color-label-quaternary: 79 79 79;
      --nav-h: 81px;
      --home-hero-height: 100vh;
      --home-runway-height: 42vh;

      /* Auth Sheet (Modal) tokens */
      --auth-sheet-bg: #1a1a1a;
      --auth-sso-ink: 242 239 234;

      /* Footer tokens (Deep Obsidian Luxury Tech) */
      --color-footer-bg: 10 11 13;
      --color-footer-ink: 247 247 247;
      --color-footer-link: 173 173 173;
      --color-footer-muted: 122 122 122;
      --footer-wordmark-face: #14171d;
      --footer-wordmark-highlight: rgba(0, 234, 101, 0.25);
      --footer-wordmark-shadow: rgba(0, 0, 0, 0.95);
    }
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #141414;
      color: #f7f7f7;
      font-family: "Instrument Sans", system-ui, -apple-system, sans-serif;
      overflow-x: hidden;
    }
    /* Keyframes */
    @keyframes fadeUp {
      0% {
        opacity: 0;
        transform: translateY(12px);
      }
      100% {
        opacity: 1;
        transform: translateY(0px);
      }
    }
    @keyframes whirl-spin {
      100% {
        transform: rotate(1turn);
      }
    }
    .animate-fade-up {
      animation: 0.6s cubic-bezier(0.32, 0.72, 0, 1) forwards fadeUp;
    }
    /* Button styles */
    .btn-accent {
      background-color: rgb(var(--color-accent));
      color: rgb(var(--color-accent-ink));
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 -2px 3px rgba(160, 130, 100, 0.28), 0 10px 30px rgba(240, 220, 200, 0.12);
      transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    }
    .btn-accent:hover {
      transform: scale(0.975);
      background-color: rgb(var(--color-accent-bright));
    }
    .btn-accent:active {
      transform: scale(0.955);
    }
    .btn-glass {
      background: linear-gradient(-75deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)), rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.16);
      box-shadow: rgba(255, 255, 255, 0.25) 0px 1px 2px inset, rgba(0, 0, 0, 0.35) 0px -3px 4px inset, rgba(0, 0, 0, 0.45) 0px 12px 28px;
      transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    }
    .btn-glass:hover {
      transform: scale(0.975);
      background: linear-gradient(-75deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06)), rgba(255, 255, 255, 0.1);
    }
    .btn-glass:active {
      transform: scale(0.955);
    }
    .keycap-hairline {
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: rgba(255, 255, 255, 0.05);
    }
    /* Modal / Auth Sheet */
    .auth-sheet-theme {
      --auth-sheet-bg: #1a1a1a;
      --auth-sso-ink: 242 239 234;
    }
    .auth-sheet-frame {
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
    }
    .auth-sso-ink {
      color: rgb(var(--auth-sso-ink));
    }
    .shadow-float {
      box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35);
    }
    .shadow-inner-hairline {
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
    /* Footer Styles */
    .site-footer {
      background: rgb(var(--color-footer-bg));
      color: rgb(var(--color-footer-ink));
      padding-bottom: env(safe-area-inset-bottom);
    }
    .site-footer-link {
      color: rgb(var(--color-footer-link));
    }
    .site-footer-link:hover {
      color: rgb(var(--color-footer-ink));
    }
    .site-footer-icon {
      color: #adadad;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }
    .site-footer-icon:hover {
      color: #00ea65;
      background: rgba(0, 234, 101, 0.15);
      border-color: rgba(0, 234, 101, 0.35);
    }
    .site-footer-fineprint {
      color: #7a7a7a;
    }
    .site-footer-link {
      color: #adadad;
    }
    .site-footer-link:hover {
      color: #ffffff;
    }
    /* Embossed Giant Wordmark */
    .wm-stage {
      display: grid;
      container-type: inline-size;
      cursor: default;
      transform: translateY(14%);
      font-family: Comfortaa, sans-serif;
      font-weight: 600;
    }
    .wm-layer {
      grid-area: 1 / 1;
      justify-self: center;
      width: max-content;
      font-size: 19.5vw;
      line-height: 1.04;
      letter-spacing: -0.015em;
      white-space: nowrap;
    }
    .wm-face {
      color: var(--footer-wordmark-face);
      text-shadow: 0 .008em .006em var(--footer-wordmark-highlight), 0 -.006em .008em var(--footer-wordmark-shadow);
    }
    .wm-light {
      background-image: radial-gradient(320px at 50% 40%, rgba(0, 234, 101, 0.4), rgba(0, 0, 0, 0) 70%),
                        radial-gradient(720px at 50% 40%, rgba(0, 234, 101, 0.15), rgba(0, 0, 0, 0) 75%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      opacity: 0;
      transition: opacity 0.5s ease-out;
    }
    .wm-stage:hover .wm-light {
      opacity: 1;
    }
    /* Footer Reveal & Sticky Curtain Effect */
    .footer-ink-cap {
      isolation: isolate;
    }
    .footer-reveal-shell {
      position: sticky;
      bottom: 0;
      z-index: 1;
      isolation: isolate;
      margin-top: -1px;
    }
    .site-footer, .site-footer-bg {
      background: #0a0b0d;
    }
    /* 3D Glass Tiles */
    .glass-tile {
      position: relative;
      display: grid;
      place-items: center;
      width: var(--tile, 72px);
      height: var(--tile, 72px);
      border-radius: 27%;
      background: radial-gradient(120% 90% at 28% -12%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 55%),
                  linear-gradient(-75deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
                  rgba(255, 255, 255, 0.07);
      box-shadow: rgba(255, 255, 255, 0.3) 0px 1.5px 1px inset,
                  rgba(0, 0, 0, 0.35) 0px -3px 6px inset,
                  rgba(0, 0, 0, 0.55) 0px 2px 5px,
                  rgba(0, 0, 0, 0.35) 0px 10px 24px;
      transform: perspective(560px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--s, 1));
      transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1), background 0.3s, box-shadow 0.3s;
      will-change: transform;
    }
    .glass-tile::before {
      content: "";
      position: absolute;
      inset: 0px;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(165deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.07) 38%, rgba(255, 255, 255, 0.04) 62%, rgba(255, 255, 255, 0.22));
      -webkit-mask: linear-gradient(#000 0px, #000 0px) content-box exclude, linear-gradient(#000 0px, #000 0px);
      mask: linear-gradient(#000 0px, #000 0px) content-box exclude, linear-gradient(#000 0px, #000 0px);
      pointer-events: none;
      transition: background 0.3s;
    }
    .glass-tile-icon {
      border-radius: 24%;
      box-shadow: rgba(0, 0, 0, 0.35) 0px 4px 12px;
      transform: translate(var(--ix, 0), var(--iy, 0)) translateZ(0);
      transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1);
    }
    .glass-tile-glare {
      position: absolute;
      inset: 0px;
      border-radius: inherit;
      pointer-events: none;
      background: radial-gradient(calc(var(--tile, 72px) * .5) circle at var(--mx, 50%) var(--my, 0), rgba(255, 255, 255, .35), transparent 72%),
                  radial-gradient(calc(var(--tile, 72px) * 1.5) circle at var(--mx, 50%) var(--my, 0), rgba(255, 255, 255, .08), transparent 60%);
      opacity: 0;
      transition: opacity 0.3s;
    }
    .glass-cell:hover .glass-tile-glare {
      opacity: 1;
    }
    .glass-cell:active .glass-tile {
      --s: 0.93;
      transition-duration: 90ms, 0.3s, 0.3s;
    }
    .glass-cell:active .glass-tile-glare {
      opacity: 1;
    }

    /* Freeze all CSS animations when user is not on the page / tab is inactive */
    html.page-inactive *,
    html.page-inactive *::before,
    html.page-inactive *::after {
      animation-play-state: paused !important;
    }