/* Imports are ordered from most foundational to most specific */
@layer resets {
  /* Modern Box Sizing */
  /* makes sizing simpler */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* remove default spacing */
  /* force styling of type through styling, rather than elements */

  * {
    margin: 0;
    padding: 0;
    font: inherit;
  }

  /* Document Setup */
  html {
    color-scheme: dark light;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
  }

  .scroll-container {
    scrollbar-gutter: stable;
    overflow-y: auto;
  }

  /* Body Setup */
  body {
    min-height: 100vh;
    scrollbar-gutter: stable;
  }

  /* Hidden Elements */
  [hidden] {
    display: none;
  }

  /* Media Elements */
  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    display: block;
    max-width: 100%;
    vertical-align: middle;
  }

  /* Aspect Ratio Handling */
  img,
  svg,
  video,
  canvas {
    height: auto;
  }

  img,
  span {
    font-family: var(--font-primary, sans-serif);
  }

  /* Audio Controls */
  audio:not([controls]) {
    display: none;
  }
  audio {
    width: 100%;
  }

  /* Picture and Source Elements */
  picture {
    display: contents;
  }
  source {
    display: none;
  }

  /* Typography */
  h1 {
    font-size: var(--font-size-3xl); /* 32px to 40px */
    margin: 0.07em 0;
  }
  h2 {
    font-size: var(--font-size-2xl); /* 28px to 36px */
  }
  h3 {
    font-size: var(--font-size-xl); /* 24px to 32px */
  }
  h4 {
    font-size: var(--font-size-lg); /* 20px to 24px */
  }
  h5 {
    font-size: var(--font-size-md); /* 16px to 20px */
  }
  h6 {
    font-size: var(--font-size-sm); /* 14px to 16px */
  }

  /* Modern Text Wrapping */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
    font-family: var(--font-primary, sans-serif);
  }

  p,
  a,
  label,
  time {
    font-family: var(--font-primary, sans-serif);
    font-size: var(--font-size-md);
  }

  pre {
    white-space: pre-wrap;
  }

  /* HTML5 Element Display */
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  main,
  nav,
  section {
    display: block;
  }

  /* Horizontal Rule */
  hr {
    border-style: solid;
    border-width: 1px 0 0;
    color: inherit;
    height: 0;
    overflow: visible;
  }

  /* Form Elements */
  input,
  textarea,
  button,
  select {
    font: inherit;
  }

  /* Form Input Fixes */
  [type='checkbox'],
  [type='radio'] {
    box-sizing: border-box;
    padding: 0;
  }

  /* Legacy Browser Fixes */
  img {
    border-style: none;
  }
  svg {
    overflow: hidden;
  }
}
@supports (scrollbar-gutter: stable) {
  html,
  .scroll-container {
    scrollbar-gutter: stable;
  }
}
@supports not (scrollbar-gutter: stable) {
  /* Fallback for browsers without support */
  html,
  .scroll-container {
    overflow-y: scroll; /* Always show scrollbar */
  }
}
@layer colors {
  /* Base color palette - never changes regardless of theme */
  :root {
    /* Brand Colors in HSL */
    --stps-blue: #0080ff;
    --stps-blue-light: #66b3ff;
    --stps-blue-dark: #004c99e6;
    --stps-blue-dark-2: #003366e6;
    --stps-brown: #8a4a00e9;
    --stps-brown-light: #ef7800e6;
    --stps-brown-dark: #552b00e6;
    --stps-green: #00cc00e6;
    --stps-green-light: #99ff99e6;
    --stps-green-dark: #007d00e6;
    --stps-orange: #ff7300e6;
    --stps-orange-light: #ffb77be6;
    --stps-orange-dark: #ac4d00e6;
    --stps-orange-dark-theme: #ff7300d5;
    --stps-yellow: #ffd500eb;
    --stps-yellow-light: #ffe066e6;
    --stps-yellow-dark: #b2990de6;
    --stps-white: #e9e2dbe6;
    --stps-black: #1d1c1ce6;

    /* Neutral Colors */
    --gray-100: hsl(33, 26%, 96%);
    --gray-200: hsl(33, 26%, 88%);
    --gray-300: hsl(33, 26%, 75%);
    --gray-400: hsl(33, 26%, 63%);
    --gray-500: hsl(33, 26%, 50%);
    --gray-600: hsl(33, 26%, 38%);
    --gray-700: hsl(33, 26%, 25%);
    --gray-800: hsl(33, 26%, 13%);
    --gray-900: hsl(33, 26%, 6%);

    /* Semantic Colors */
    --success: hsl(120, 100%, 40%);
    --error: hsl(0, 100%, 50%);
    --warning: hsl(45, 100%, 50%);
    --info: hsl(200, 100%, 50%);
  }

  /* Light Mode Theme Colors */
  :root {
    --lm-primary: var(--stps-blue);
    --lm-primary-light: var(--stps-blue-light);
    --lm-primary-dark: var(--stps-blue-dark);
    --lm-secondary: var(--stps-orange);
    --lm-secondary-light: var(--stps-orange-light);
    --lm-secondary-dark: var(--stps-orange-dark);
    --lm-accent: var(--stps-green);
    --lm-accent-light: var(--stps-green-light);
    --lm-accent-dark: var(--stps-green-dark);
    --lm-tertiary: var(--stps-yellow);
    --lm-tertiary-light: var(--stps-yellow-light);
    --lm-tertiary-dark: var(--stps-yellow-dark);
    --lm-quaternary: var(--stps-brown);
    --lm-quaternary-light: var(--stps-brown-light);
    --lm-quaternary-dark: var(--stps-brown-dark);
    --lm-background: var(--stps-white);
    --lm-text: var(--stps-black);
    --lm-black: hsl(0 0% 10%);
    --lm-gray: hsl(0 0% 38%);
    --lm-gray-light: hsl(0 0% 88%);
    --lm-gray-dark: hsl(0 0% 25%);
    --lm-gray-gradient: linear-gradient(
      to bottom,
      hsl(0 0% 88% / 50%),
      var(--stps-white)
    );
    --lm-box-shadow:
      0 var(--s-2) var(--s-1) hsl(0 0% 38% / 25%),
      0 var(--s0) var(--s2) hsl(0 0% 38% / 33%),
      0 var(--s1) var(--s3) hsl(0 0% 38% / 33%);
    --lm-ticker: hsl(116, 38%, 35%);

    /* Dark Mode Theme Colors */
    --dm-primary: var(--stps-blue);
    --dm-primary-light: var(--stps-blue-light);
    --dm-primary-dark: var(--stps-blue-dark-2);
    --dm-secondary: var(--stps-orange-dark-theme);
    --dm-secondary-light: var(--stps-orange);
    --dm-secondary-dark: var(--stps-orange-dark);
    --dm-tertiary: var(--stps-yellow);
    --dm-tertiary-light: var(--stps-yellow);
    --dm-tertiary-dark: var(--stps-yellow-dark);
    --dm-accent: var(--stps-green-dark);
    --dm-accent-light: var(--stps-green-light);
    --dm-accent-dark: var(--stps-green);
    --dm-background: var(--stps-black);
    --dm-text: var(--stps-white);
    --dm-black: hsl(30 100% 27%);
    --dm-gray: hsl(0 0% 63%);
    --dm-gray-light: hsl(0 0% 38%);
    --dm-gray-dark: hsl(0 0% 13%);
    --dm-pixel-border-hover:
      -4px 0 0 -2px hsl(0 0% 0% / 0.1), -8px 0 0 -4px hsl(0 0% 0% / 0.1),
      4px 0 0 -2px hsl(0 0% 0% / 0.1), 8px 0 0 -4px hsl(0 0% 0% / 0.1);
    --dm-gray-gradient: linear-gradient(
      to bottom,
      hsl(0 0% 38% / 50%),
      var(--gray-900)
    );
    --dm-ticker: hsl(116, 72%, 45%);

    /* Default Theme Variables (Light Mode) */
    --clr-primary: var(--lm-primary);
    --clr-primary-light: var(--lm-primary-light);
    --clr-primary-dark: var(--lm-primary-dark);
    --clr-secondary: var(--lm-secondary);
    --clr-secondary-light: var(--lm-secondary-light);
    --clr-secondary-dark: var(--lm-secondary-dark);
    --clr-tertiary: var(--lm-tertiary);
    --clr-tertiary-light: var(--lm-tertiary-light);
    --clr-tertiary-dark: var(--lm-tertiary-dark);
    --clr-quaternary: var(--lm-quaternary);
    --clr-quaternary-light: var(--lm-quaternary-light);
    --clr-quaternary-dark: var(--lm-quaternary-dark);
    --clr-bg: var(--lm-background);
    --clr-text: var(--lm-text);
    --clr-accent: var(--lm-accent);
    --clr-accent-light: var(--lm-accent-light);
    --clr-accent-dark: var(--lm-accent-dark);
    --accent: var(--lm-accent);
    --accent-dark: var(--lm-accent-dark);
    --black: var(--lm-black);
    --gray: var(--lm-gray);
    --gray-light: var(--lm-gray-light);
    --gray-dark: var(--lm-gray-dark);
    --gray-gradient: var(--lm-gray-gradient);
    --box-shadow: var(--lm-box-shadow);
    --pixel-border:
      -4px 0 0 -2px hsl(0 0% 0% / 0.1), -8px 0 0 -4px hsl(0 0% 0% / 0.1),
      4px 0 0 -2px hsl(0 0% 0% / 0.1), 8px 0 0 -4px hsl(0 0% 0% / 0.1);
    color-scheme: light;
  }

  /* System preference-based dark mode */
  @media (prefers-color-scheme: dark) {
    :root {
      --clr-primary: var(--dm-primary);
      --clr-primary-light: var(--dm-primary-light);
      --clr-primary-dark: var(--dm-primary-dark);
      --clr-secondary: var(--dm-secondary);
      --clr-secondary-light: var(--dm-secondary-light);
      --clr-secondary-dark: var(--dm-secondary-dark);
      --clr-accent: var(--dm-accent);
      --clr-accent-light: var(--dm-accent-light);
      --clr-accent-dark: var(--dm-accent-dark);
      --clr-tertiary: var(--dm-tertiary);
      --clr-tertiary-light: var(--dm-tertiary-light);
      --clr-tertiary-dark: var(--dm-tertiary-dark);
      --clr-bg: var(--dm-background);
      --clr-text: var(--dm-text);
      --accent: var(--dm-accent);
      --accent-dark: var(--dm-accent-dark);
      --black: var(--dm-black);
      --gray: var(--dm-gray);
      --gray-light: var(--dm-gray-light);
      --gray-dark: var(--dm-gray-dark);
      --gray-gradient: var(--dm-gray-gradient);
      --box-shadow: var(--dm-box-shadow);
      --pixel-border:
        -4px 0 0 -2px hsl(0 0% 100% / 0.1), -8px 0 0 -4px hsl(0 0% 100% / 0.1),
        4px 0 0 -2px hsl(0 0% 100% / 0.1), 8px 0 0 -4px hsl(0 0% 100% / 0.1);
      --ticker: var(--dm-ticker);
      color-scheme: dark;
    }
  }

  /* Manual dark theme selection via data attribute */
  [data-theme='dark'] {
    --clr-primary: var(--dm-primary);
    --clr-primary-light: var(--dm-primary-light);
    --clr-primary-dark: var(--dm-primary-dark);
    --clr-secondary: var(--dm-secondary);
    --clr-secondary-light: var(--dm-secondary-light);
    --clr-secondary-dark: var(--dm-secondary-dark);
    --clr-accent: var(--dm-accent);
    --clr-accent-light: var(--dm-accent-light);
    --clr-accent-dark: var(--dm-accent-dark);
    --clr-tertiary: var(--dm-tertiary);
    --clr-tertiary-light: var(--dm-tertiary-light);
    --clr-tertiary-dark: var(--dm-tertiary-dark);
    --clr-bg: var(--dm-background);
    --clr-text: var(--dm-text);
    --accent: var(--dm-accent);
    --accent-dark: var(--dm-accent-dark);
    --black: var(--dm-black);
    --gray: var(--dm-gray);
    --gray-light: var(--dm-gray-light);
    --gray-dark: var(--dm-gray-dark);
    --gray-gradient: var(--dm-gray-gradient);
    --box-shadow: var(--dm-box-shadow);
    --pixel-border:
      -4px 0 0 -2px hsl(0 0% 100% / 0.1), -8px 0 0 -4px hsl(0 0% 100% / 0.1),
      4px 0 0 -2px hsl(0 0% 100% / 0.1), 8px 0 0 -4px hsl(0 0% 100% / 0.1);
    --ticker: var(--dm-ticker);
    color-scheme: dark;
  }

  /* Manual light theme selection via data attribute */
  [data-theme='light'] {
    --clr-primary: var(--lm-primary);
    --clr-primary-light: var(--lm-primary-light);
    --clr-primary-dark: var(--lm-primary-dark);
    --clr-secondary: var(--lm-secondary);
    --clr-secondary-light: var(--lm-secondary-light);
    --clr-secondary-dark: var(--lm-secondary-dark);
    --clr-accent: var(--lm-accent);
    --clr-accent-light: var(--lm-accent-light);
    --clr-accent-dark: var(--lm-accent-dark);
    --clr-tertiary: var(--lm-tertiary);
    --clr-tertiary-light: var(--lm-tertiary-light);
    --clr-tertiary-dark: var(--lm-tertiary-dark);
    --clr-bg: var(--lm-background);
    --clr-text: var(--lm-text);
    --accent: var(--lm-accent);
    --accent-dark: var(--lm-accent-dark);
    --black: var(--lm-black);
    --gray: var(--lm-gray);
    --gray-light: var(--lm-gray-light);
    --gray-dark: var(--lm-gray-dark);
    --gray-gradient: var(--lm-gray-gradient);
    --box-shadow: var(--lm-box-shadow);
    --pixel-border:
      -4px 0 0 -2px hsl(0 0% 0% / 0.1), -8px 0 0 -4px hsl(0 0% 0% / 0.1),
      4px 0 0 -2px hsl(0 0% 0% / 0.1), 8px 0 0 -4px hsl(0 0% 0% / 0.1);
    --ticker: var(--lm-ticker);
    color-scheme: light;
  }

  /* Gradient variables */
  :root {
    --gradient-card-primary: linear-gradient(
      to bottom,
      var(--clr-primary-light) 50%,
      var(--clr-secondary-dark) 50% 25%,
      var(--stps-brown) 25% 100%
    );

    --gradient-card-accent: linear-gradient(
      to bottom,
      var(--clr-accent-light) 25%,
      var(--clr-tertiary-dark) 25% 50%,
      var(--clr-primary) 50% 100%
    );

    --gradient-card-inverted: linear-gradient(
      to bottom,
      var(--clr-secondary-dark) 50%,
      var(--clr-primary-light) 50% 75%,
      var(--stps-orange) 75% 100%
    );

    /* For backward compatibility and easier switching */
    --card-bg-default: var(--gradient-card-primary);
    --card-bg-accent: var(--gradient-card-accent);
    --card-bg-inverted: var(--gradient-card-inverted);
  }

  /* Card background colors by variant */
  :root {
    --card-bg-post: var(--clr-secondary);
    --card-bg-game: var(--clr-tertiary);
    --card-bg-currentWork: var(--card-bg-game);
    --card-bg-teammember: var(--clr-quaternary);
    --card-bg-author: var(--gradient-card-inverted);
    --card-bg-featuredPost: var(--clr-secondary);
  }

  /* Elements with tertiary background get light mode text for better contrast */
  .card--game,
  .card--currentWork,
  .card--lineLevel,
  .about-mission__content,
  .blog-list__content,
  .contact-us__content,
  [class*='bg-tertiary'],
  [style*='background: var(--clr-tertiary)'],
  [style*='background-color: var(--clr-tertiary)'] {
    color: var(--lm-text);
  }

  /* Commented out specific card targeting - kept for reference */
  /* .card--game .card__title,
  .card--game .card__description,
  .card--currentWork .card__title,
  .card--currentWork .card__description,
  .card--lineLevel .card__line-level__title {
    color: var(--lm-text);
  } */
}
@font-face {
  font-family: 'Departure Mono';
  src: url('/_astro/DepartureMono-Regular.upYs3Yn6.woff2')
    format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Press Start 2P';
  src: url('/_astro/PressStart2P-Regular.DogiNJoF.ttf')
    format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('/_astro/SpaceMono-Regular.Ba0nOT4a.ttf')
    format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Silkscreen';
  src: url('/_astro/Silkscreen-Regular.DrhhE05D.ttf')
    format('woff2');
  font-weight: 400;
  font-display: swap;
}
@layer typography {
  :root {
    /* Font Families */
    --font-primary: 'Departure Mono', ui-monospace, 'Courier New', monospace;
    --font-secondary: 'Press Start 2P', cursive;
    --font-tertiary: 'Space Mono', monospace;
    --font-quartiary: 'Silkscreen', sans-serif;
    --font-mono: var(--font-primary);

    /* Font Sizes */
    --font-size-xs: clamp(
      0.5rem,
      round(1cqi + 0.25rem, 0.5rem),
      0.75rem
    ); /* 8px to 12px */
    --font-size-sm: clamp(
      0.875rem,
      round(1.2cqi + 0.3rem, 0.875rem),
      1rem
    ); /* 14px to 16px */
    --font-size-md: clamp(
      1rem,
      round(1.5cqi + 0.35rem, 1rem),
      1.25rem
    ); /* 16px to 20px */
    --font-size-lg: clamp(
      1.25rem,
      round(2cqi + 0.4rem, 1.25rem),
      1.5rem
    ); /* 20px to 24px */
    --font-size-xl: clamp(
      1.5rem,
      round(2.5cqi + 0.5rem, 1.5rem),
      2rem
    ); /* 24px to 32px */
    --font-size-2xl: clamp(
      1.75rem,
      round(3cqi + 0.6rem, 1.75rem),
      2.25rem
    ); /* 28px to 36px */
    --font-size-3xl: clamp(
      2rem,
      round(3.5cqi + 0.7rem, 2rem),
      2.5rem
    ); /* 32px to 40px */
    --font-size-4xl: clamp(
      2.5rem,
      round(4cqi + 0.8rem, 2.5rem),
      3rem
    ); /* 40px to 48px */

    /* Font Weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-bold: 700;

    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* Letter Styles */
    --text-shadow:
      -1px -1px 0 var(--clr-shadow, #000), 1px -1px 0 var(--clr-shadow, #000),
      -1px 1px 0 var(--clr-shadow, #000), 1px 1px 0 var(--clr-shadow, #000);

    /* Letter Spacing */
    --text-tracking-tight: -0.05em;
    --text-tracking-normal: 0em;
    --text-tracking-wide: 0.05em;

    /* Text Transform */
    --text-transform-uppercase: uppercase;
    --text-transform-lowercase: lowercase;
    --text-transform-capitalize: capitalize;

    /* Theme-specific typography adjustments */
    :root.dark-mode {
      --text-shadow:
        -1px -1px 0 rgba(0, 0, 0, 0.5), 1px -1px 0 rgba(0, 0, 0, 0.5),
        -1px 1px 0 rgba(0, 0, 0, 0.5), 1px 1px 0 rgba(0, 0, 0, 0.5);
    }
  }
}
@layer spacing {
  :root {
    --ratio: 1.5;
    --base-size: 1rem; /* Base size */

    /* Smaller sizes calculated by dividing the base size by the ratio */
    --s-5: calc(var(--s-4) / var(--ratio)); /* Smallest size */
    --s-4: calc(var(--s-3) / var(--ratio)); /* Smaller size */
    --s-3: calc(var(--s-2) / var(--ratio)); /* Small size */
    --s-2: calc(var(--s-1) / var(--ratio)); /* Medium-small size */
    --s-1: calc(
      var(--base-size) / var(--ratio)
    ); /* Slightly smaller than base size */

    /* Base size */
    --s0: var(--base-size); /* Base size */

    /* Larger sizes calculated by multiplying the base size by the ratio */
    --s1: calc(
      var(--base-size) * var(--ratio)
    ); /* Slightly larger than base size */
    --s2: calc(var(--s1) * var(--ratio)); /* Medium-large size */
    --s3: calc(var(--s2) * var(--ratio)); /* Large size */
    --s4: calc(var(--s3) * var(--ratio)); /* Larger size */
    --s5: calc(var(--s4) * var(--ratio)); /* Largest size */

    /* Layout */
    --container-padding: 2rem; /* Padding for containers */
    --container-width: 1280px; /* Maximum width for containers */
    --sgap: var(--s1); /* Gap size for spacing */
    --max-width: 1280px;
  }
}
@layer animations {
  :root {
    /* Durations */
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;

    /* Easings */
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* Transitions */
    --transition-base: all var(--duration-normal) var(--ease-in-out);
    --transition-transform: transform var(--duration-normal) var(--ease-in-out);
    --transition-opacity: opacity var(--duration-normal) var(--ease-in-out);

    .scroll-animation {
      view-timeline-name: --element-timeline;
      view-timeline-axis: block;
      animation-timeline: --element-timeline;
      animation-fill-mode: both;
    }

    .scroll-animation--fade-in {
      animation-name: fadeIn;
      animation-range: entry 10% cover 25%;
      opacity: 0;
    }

    .scroll-animation--slide-up {
      animation-name: slideUp;
      animation-range: entry 10% cover 30%;
      transform: translateY(30px);
      opacity: 0;
    }

    .scroll-animation--scale {
      animation-name: scale;
      animation-range: entry 10% cover 30%;
      transform: scale(0.9);
      opacity: 0;
    }

    .scroll-animation--reveal {
      animation-name: reveal;
      animation-range: entry 5% cover 20%;
      clip-path: inset(0 100% 0 0);
    }

    .scroll-animation--stagger-children > * {
      view-timeline-name: --staggered-timeline;
      view-timeline-axis: block;
      animation-timeline: --staggered-timeline;
      animation-fill-mode: both;
      opacity: 0;
      transform: translateY(20px);
      animation-name: staggerFade;
      animation-range: entry 5% cover 15%;
    }

    .scroll-animation--stagger-children > *:nth-child(1) {
      animation-delay: 0ms;
    }
    .scroll-animation--stagger-children > *:nth-child(2) {
      animation-delay: 100ms;
    }
    .scroll-animation--stagger-children > *:nth-child(3) {
      animation-delay: 200ms;
    }
    .scroll-animation--stagger-children > *:nth-child(4) {
      animation-delay: 300ms;
    }
    .scroll-animation--stagger-children > *:nth-child(5) {
      animation-delay: 400ms;
    }
    .scroll-animation--stagger-children > *:nth-child(6) {
      animation-delay: 500ms;
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes slideUp {
    from {
      transform: translateY(30px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes scale {
    from {
      transform: scale(0.9);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes reveal {
    from {
      clip-path: inset(0 100% 0 0);
    }
    to {
      clip-path: inset(0 0 0 0);
    }
  }

  @keyframes staggerFade {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slide-fade-in {
    from {
      opacity: 0;
      transform: translateY(5vh);
    }
  }

  /* @media (prefers-reduced-motion: no-preference) {
    .card {
      view-timeline-name: --item-timeline;
      animation: slide-fade-in both;
      animation-timeline: --item-timeline;
      animation-range: contain 0% contain 50%;
    }
  } */
}
/* @import "~/styles/tokens/breakpoints.css"; */
@layer elements {
  :root {
    --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --radius-sm: 0.125rem;
    --radius-md: 0.25rem;
    --radius-lg: 0.5rem;

    main,
    footer {
      padding-inline: var(--s4);
      max-width: var(--max-width);
    }

    main,
    aside,
    article,
    .post-content {
      container-type: inline-size;
    }

    section {
      padding-block-end: var(--s2);
    }

    .hidden {
      display: none;
    }

    .featured-post__card,
    .game__card,
    .post-card {
      padding-block-end: var(--s0);
    }

    .card__header > h2,
    .card__header > h3 {
      padding-inline: var(--s0);
    }

    .card__main {
      padding-inline: var(--s0);
    }

    .card__footer {
      padding-inline: var(--s0);
    }

    /* Base image styles */
    .picca {
      width: 100%;
      & img {
        width: 100%;
      }
    }

    /* Card image styles */
    .card-container--currentWork {
      .card--currentWork {
        & img {
          aspect-ratio: 16 / 3;
          object-fit: cover;
        }
      }
    }

    .card-container--featuredPost {
      .card--featuredPost {
        & img {
          aspect-ratio: 16 / 3;
          object-fit: cover;
        }
      }
    }

    .card-container--game {
      .card--game {
        & img {
          aspect-ratio: 16 / 5;
          object-fit: cover;
        }
      }
    }
    .card-container--post {
      .card--post {
        & img {
          aspect-ratio: 16 / 7;
          object-fit: cover;
        }
      }
    }

    .card-container--teammember {
      .card--teammember {
        & img {
          aspect-ratio: 4 / 3;
          object-fit: cover;
        }
      }
    }

    .author-card__content,
    .card__author {
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid var(--clr-accent);
        box-shadow: var(--box-shadow);
      }
    }

    .post-header {
      .post-header__meta {
        .post-header__image {
          aspect-ratio: 16 / 4;
          object-fit: cover;
        }
      }
    }
  }
}
/* Define explicit cascade layers for better organization */
@layer base, themes, layouts, components, utilities;
@layer base {
  :root {
    /* Root/Base Max-Width */
    --max-width: 1280px;
    --measure: 60ch;
  }
  body {
    background-color: var(--clr-bg);
    color: var(--clr-text);
    transition:
      background-color var(--duration-normal) var(--ease-in-out),
      color var(--duration-normal) var(--ease-in-out);
  }
}
@layer themes {
  /* Light theme (default) */
  :root {
    background: var(--clr-bg);
    color: var(--clr-text);
  }
}
@layer layouts {
  /* Stack Layout - vertical stacking with consistent spacing */
  .stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .stack > * {
    margin-block: 0;
  }

  .stack > * + * {
    margin-block-start: var(--space, var(--s0));
  }

  /* Center Layout - horizontally center content with max-width */
  .center {
    box-sizing: content-box;
    margin-inline: auto;
    max-inline-size: var(--measure);
    padding-inline: var(--s0);
  }

  /* Sidebar Layout - responsive sidebar with main content */
  .sidebar-layout {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
  }

  .sidebar {
    flex-basis: 20%;
    flex-grow: 1;
    padding: var(--s2);
  }

  .main-content {
    flex-basis: 70%;
    flex-grow: 999;
    min-inline-size: 50%;
    padding: var(--s2);
  }

  /* Grid Layout - responsive grid for card-like elements */
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--s2);
  }

  /* Switcher Layout - responsive horizontal/vertical layout */
  .switcher {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
  }

  .switcher > * {
    flex-grow: 1;
    flex-basis: calc((30rem - 100%) * 999);
  }

  /* Frame Layout - fixed aspect ratio container */
  .frame {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .frame > img,
  .frame > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
@layer utilities {
  /* Box utility - for creating padded containers with borders */
  .box {
    padding: var(--s2);
    border: 1px solid var(--clr-gray-300);
    border-radius: var(--s1);
  }

  /* Icon utility - for aligning icons with text */
  .icon {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
  }

  .icon > svg {
    flex-shrink: 0;
  }

  /* Visibility utilities */
  .visually-hidden,
  .sr-only {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
}
@layer keyframes {
  @keyframes pulsateSimple {
    0% {
        background-color: var(--clr-secondary);
    }
    100% {
        background-color: var(--clr-primary-dark);
    }
  }

  @keyframes pulsateAdvanced {
    0% {
      background-color: var(--clr-primary-light);
      color: var(--clr-text);
      box-shadow:
        0 0 0 4px var(--clr-primary),
        4px 4px 0 4px var(--clr-primary-dark),
        8px 8px 0 4px var(--clr-primary);
    }
    100% {
      background-color: var(--clr-primary-dark);
      color: var(--clr-tertiary-dark);
      box-shadow:
        0 0 0 4px var(--clr-tertiary-dark),
        4px 4px 0 4px var(--clr-tertiary),
        8px 8px 0 4px var(--clr-tertiary-dark);
    }
  }
}
/* Route announcer */
	.astro-route-announcer {
		position: absolute;
		left: 0;
		top: 0;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		overflow: hidden;
		white-space: nowrap;
		width: 1px;
		height: 1px;
	}footer[data-astro-cid-ioeiary4]{padding-block-end:var(--s0);margin-top:auto;&.implode{animation:implode 1.2s forwards}}.footer-container[data-astro-cid-ioeiary4]{max-width:1200px;margin:0 auto}.footer-content[data-astro-cid-ioeiary4]{display:flex;flex-direction:column;align-items:center;gap:var(--s0)}.copyright[data-astro-cid-ioeiary4]{font-size:var(--font-size-xs);text-align:center}@keyframes implode{0%{opacity:1;transform:scale(1) rotateY(0deg);filter:blur(0px)}50%{transform:scale(0.5) rotateY(15deg);filter:blur(2px)}75%{transform:scale(0.3) rotateY(45deg);filter:blur(4px)}100%{opacity:0;transform:scale(0) rotateY(90deg);filter:blur(8px)}}.theme-switcher[data-astro-cid-7z33y2zl]{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;background:none;border:none;border-radius:50%;height:60px;width:60px;cursor:pointer;transition:transform 0.3s ease-in-out;& label[data-astro-cid-7z33y2zl]{display:grid}.theme-toggle__logo {border-radius: 50%; width: 50px; height: 50px; object-fit: cover;}}.theme-switcher[data-astro-cid-7z33y2zl]:hover{transform:scale(1.05)}.theme-switcher__tooltip[data-astro-cid-7z33y2zl]{font-size:var(--font-size-xs);border-radius:5%;padding:var(--s-4);background-color:var(--clr-primary);box-shadow:var(--box-shadow)}.transition-enter[data-astro-cid-7z33y2zl]{transition:opacity 0.2s ease-out,transform 0.2s ease-out}.transition-enter-start[data-astro-cid-7z33y2zl]{opacity:0;transform:translateY(10px)}.transition-enter-end[data-astro-cid-7z33y2zl]{opacity:1;transform:translateY(0)}.transition-leave[data-astro-cid-7z33y2zl]{transition:opacity 0.2s ease-in,transform 0.2s ease-in}.transition-leave-start[data-astro-cid-7z33y2zl]{opacity:1;transform:translateY(0)}.transition-leave-end[data-astro-cid-7z33y2zl]{opacity:0;transform:translateY(10px)}@keyframes astroFadeInOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes astroFadeIn {
	from {
		opacity: 0;
		mix-blend-mode: plus-lighter;
	}
	to {
		opacity: 1;
		mix-blend-mode: plus-lighter;
	}
}

@keyframes astroFadeOut {
	from {
		opacity: 1;
		mix-blend-mode: plus-lighter;
	}
	to {
		opacity: 0;
		mix-blend-mode: plus-lighter;
	}
}

@keyframes astroSlideFromRight {
	from {
		transform: translateX(100%);
	}
}

@keyframes astroSlideFromLeft {
	from {
		transform: translateX(-100%);
	}
}

@keyframes astroSlideToRight {
	to {
		transform: translateX(100%);
	}
}

@keyframes astroSlideToLeft {
	to {
		transform: translateX(-100%);
	}
}

@media (prefers-reduced-motion) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}

	[data-astro-transition-scope] {
		animation: none !important;
	}
}
.navbar[data-astro-cid-wryw3v4n]{font-family:var(--font-secondary);padding-block:var(--s-4) var(--s0);width:100%}.navbar__container[data-astro-cid-wryw3v4n]{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;.activity-display {padding-inline: var(--s0); margin-left: auto;}}.navbar__home-link[data-astro-cid-wryw3v4n]{font-size:var(--font-size-lg);text-decoration:none;font-weight:bold;transition:var(--transition-base)}.navbar__social-container[data-astro-cid-wryw3v4n]{display:none}.navbar__links[data-astro-cid-wryw3v4n]{display:flex;flex-wrap:wrap;gap:var(--sgap);list-style:none;transition:transform 0.3s ease;.navbar__link {text-decoration: none; font-size: var(--font-size-lg); transition: var(--transition-base);} .navbar__link--active {text-underline-offset: 0.5rem; animation: link-pulse 6s infinite ease-in-out; will-change: color,background-color; transform: translateX(0); text-shadow: var(--text-shadow); border-radius: var(--radius-sm);}}.navbar__menu-toggle[data-astro-cid-wryw3v4n]{display:none;background:none;border:none;cursor:pointer;padding:var(--s-1);z-index:10;width:40px;height:40px;position:relative}.navbar__menu-bar[data-astro-cid-wryw3v4n]{display:block;width:25px;height:3px;margin:5px auto;background-color:var(--clr-text);transition:var(--transition-base)}.navbar__menu-bar--open-top[data-astro-cid-wryw3v4n]{transform:translateY(8px) rotate(45deg)}.navbar__menu-bar--open-middle[data-astro-cid-wryw3v4n]{opacity:0}.navbar__menu-bar--open-bottom[data-astro-cid-wryw3v4n]{transform:translateY(-8px) rotate(-45deg)}@keyframes link-pulse{0%,100%{color:var(--random-color-1, var(--clr-accent))}10%{color:var(--random-color-2, var(--clr-secondary))}20%{color:var(--random-color-3, var(--clr-tertiary))}30%{color:var(--random-color-4, var(--clr-accent))}40%{color:var(--random-color-5, var(--clr-secondary))}50%{color:var(--random-color-6, var(--clr-tertiary))}60%{color:var(--random-color-7, var(--clr-accent))}70%{color:var(--random-color-8, var(--clr-secondary))}80%{color:var(--random-color-9, var(--clr-tertiary))}90%{color:var(--random-color-10, var(--clr-accent))}}@media screen and (max-width: 768px){.navbar__menu-toggle[data-astro-cid-wryw3v4n]{display:block}.navbar__links[data-astro-cid-wryw3v4n]{position:fixed;left:-100%;top:0;flex-direction:column;background-color:var(--clr-bg);width:100%;height:100vh;text-align:center;transition:0.3s;box-shadow:0 10px 27px rgba(0,0,0,0.05);padding-top:5rem;z-index:5}.navbar__links--active[data-astro-cid-wryw3v4n]{left:0}.navbar__item[data-astro-cid-wryw3v4n]{margin:var(--s1) 0}.navbar__social-container--active[data-astro-cid-wryw3v4n]{display:flex;justify-content:center;position:fixed;bottom:2rem;left:0;width:100%;z-index:5}}@media (max-width: 425px){.navbar[data-astro-cid-wryw3v4n]{padding-inline:var(--s-2)}.navbar__item[data-astro-cid-wryw3v4n] a[data-astro-cid-wryw3v4n]{font-size:var(--font-size-md)}}@media (min-width: 426px) and (max-width: 767px){.navbar[data-astro-cid-wryw3v4n]{padding-inline:clamp(var(--base-size),2vw,var(--s2))}}@media (min-width: 768px) and (max-width: 1023px){.navbar[data-astro-cid-wryw3v4n]{padding-inline:var(--s3)}}@media (min-width: 1024px){.navbar[data-astro-cid-wryw3v4n]{padding-inline:var(--s4)}}#game[data-astro-cid-jpw6xuni]{background:var(--clr-primary);color:var(--stps-white);display:inline-block;cursor:url(/crosshair_og.png) 16 16,crosshair;position:absolute;left:0;width:100%;height:100%}@keyframes dripping{0%{transform:translateY(-25px);opacity:1}100%{transform:translateY(100px);opacity:0}}@font-face{font-family:"Departure Mono";src:url(/_astro/DepartureMono-Regular.upYs3Yn6.woff2) format("woff2");font-weight:100 900;font-display:swap}#ticker[data-astro-cid-7n6eflkv]{background:transparent;display:block}#toasty[data-astro-cid-b7xoeecu]{position:fixed;bottom:0;right:-100px;width:100px;height:auto;transition:right 0.5s ease-in-out;&.show{right:0}}.game[data-astro-cid-2acvulne]:not(.game-disclaimer),.ticker[data-astro-cid-2acvulne]{position:relative;display:flex;align-items:center;justify-content:center}.ticker[data-astro-cid-2acvulne]{background-color:var(--clr-bg);height:16px;padding:0;margin-top:2px}.game[data-astro-cid-2acvulne]:not(.game-disclaimer){background:var(--clr-primary);height:10dvh;padding-block:var(--s0);.game-title {display: flex; flex-direction: column; pointer-events: none; text-align: center; z-index: 1; padding-inline: var(--s0); .game-title__heading {font-size: var(--font-size-4xl); color: var(--stps-white);} .game-disclaimer {font-family: var(--font-tertiary); font-size: var(--font-size-xs); color: var(--stps-white);}}}.toasty[data-astro-cid-2acvulne]{position:absolute}@media screen and (max-width: 425px){.game[data-astro-cid-2acvulne]:not(.game-disclaimer){height:initial}}#global-message[data-astro-cid-i3x4clvj]{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--clr-primary);font-weight:bold;text-shadow:2px 2px 0 var(--clr-primary-dark),4px 4px 0 var(--clr-primary-dark);z-index:9999;opacity:0;font-family:var(--font-secondary);white-space:nowrap;text-align:center;pointer-events:none;&.red{color:red;text-shadow:2px 2px 0 black,4px 4px 0 darkred}&.green{color:green;text-shadow:2px 2px 0 black,4px 4px 0 darkgreen}&.active{opacity:1}&.fadeout{transition:opacity 5s ease-out}}#global-flash[data-astro-cid-i3x4clvj]{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--stps-white);z-index:9998;opacity:0;transition:opacity .1s ease-out;pointer-events:none;&.red{background-color:red;opacity:.15}&.green{background-color:green;opacity:.15}&.active{opacity:1}};{}@media (max-width: 425px) {
		nav,
		main,
		footer {
			padding-inline: var(--s-2);
		}
	}

	@media (min-width: 426px) {
		nav,
		main,
		footer {
			padding-inline: clamp(var(--base-size), 2vw, var(--s2));
		}
	}

	@media (min-width: 768px) and (max-width: 1023px) {
		nav,
		main,
		footer {
			padding-inline: var(--s3);
		}
	}

	@media (min-width: 1024px) {
		nav,
		main,
		footer {
			padding-inline: var(--s4);
		}
	}

	p {
		font-size: var(--font-size-md);
	}

	.base-wrapper {
		min-height: 100dvh;
		max-width: var(--max-width);
		margin: 0 auto;
	}