splatoon-ui 0.1.0

package/dist/styles.css

@@ -0,0 +1,4225 @@
+/* Splatoon UI global styles */
+
+@import 'tailwindcss';
+@import 'tw-animate-css';
+@import 'shadcn/tailwind.css';
+
+/* ── Font Face: fooregular (Splatoon heading font) ── */
+@font-face {
+  font-family: 'fooregular';
+  src:
+    url('/fonts/foo-webfont.woff2') format('woff2'),
+    url('/fonts/foo-webfont.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* ── Font Face: Montserrat (body text) ── */
+@font-face {
+  font-family: 'Montserrat';
+  src:
+    url('/fonts/montserrat-v24-latin-regular.woff2') format('woff2'),
+    url('/fonts/montserrat-v24-latin-regular.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Montserrat';
+  src:
+    url('/fonts/montserrat-v24-latin-500.woff2') format('woff2'),
+    url('/fonts/montserrat-v24-latin-500.woff') format('woff');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Montserrat';
+  src: url('/fonts/montserrat-v24-latin-600.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Montserrat';
+  src: url('/fonts/montserrat-v24-latin-700.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Montserrat';
+  src: url('/fonts/montserrat-v24-latin-900.woff2') format('woff2');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-body);
+  --font-mono:
+    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  --font-heading: 'fooregular', sans-serif;
+  --font-body: 'Montserrat', sans-serif;
+  --font-alt: var(--font-obviously-narrow), 'obviously-narrow', sans-serif;
+  /* Brand colors — registered for Tailwind utilities (bg-yellow, text-blue, etc.) */
+  --color-yellow: #eaff3d;
+  --color-blue: #603bff;
+  --color-purple: #af50ff;
+  --color-green: #6af7ce;
+  --color-orange: #ff9750;
+  --color-red: #ff505e;
+  --color-black: #0d0d0d;
+  --color-white: #ffffff;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-overlay: var(--overlay);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: 2px;
+  --radius-md: 3px;
+  --radius-lg: 4px;
+  --radius-xl: 6px;
+  --radius-2xl: 8px;
+  --radius-3xl: 12px;
+  --radius-4xl: 16px;
+
+  /* Splatoon site exact easing functions */
+  --ease-out: cubic-bezier(0.35, 0.91, 0.3, 0.99);
+  --ease-in-out: cubic-bezier(0.75, 0, 0.21, 0.99);
+  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
+
+  /* Events tab hover splat */
+  --active-splat-url: image-set(
+    url('/_images/events/active-splat.webp') 1x,
+    url('/_images/events/active-splat-2x.webp') 2x
+  );
+}
+
+/* Tab hover splat — ::after content must be in CSS, not Tailwind,
+   because SSR HTML-encodes the quotes in content-[''] → content-[''] */
+.tab-splat::after {
+  content: ' ';
+  position: absolute;
+  display: block;
+  height: 78px;
+  width: 74px;
+  left: -30px;
+  top: -10px;
+  z-index: 1;
+  background-image: var(--active-splat-url);
+  background-size: 74px 78px;
+  background-repeat: no-repeat;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease;
+}
+.tab-splat:hover::after {
+  opacity: 1;
+}
+
+/* Hide scrollbar for peek-scroll containers */
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* ── Light Theme: Desert Wasteland ── */
+:root {
+  /* Exact Splatoon site colors */
+  --background: #ffffff;
+  --foreground: #0d0d0d;
+  --card: #ffffff;
+  --card-foreground: #0d0d0d;
+  --popover: #ffffff;
+  --popover-foreground: #0d0d0d;
+  --primary: #eaff3d;
+  --primary-foreground: #0d0d0d;
+  --secondary: #603bff;
+  --secondary-foreground: #ffffff;
+  --muted: #f5f5f5;
+  --muted-foreground: #555555;
+  --accent: #af50ff;
+  --accent-foreground: #ffffff;
+  --destructive: #ff505e;
+  --border: #cccccc;
+  --input: #cccccc;
+  --ring: #eaff3d;
+  --overlay: rgb(0 0 0 / 0.9);
+
+  /* z-index scale */
+  --z-deco: 1;
+  --z-deco-fg: 2;
+  --z-nav-canvas: 80;
+  --z-nav-content: 81;
+  --z-nav-overlay: 90;
+  --z-nav: 100;
+  --z-floating: 130;
+  --z-sheet-overlay: 200;
+  --z-sheet: 210;
+  --z-dialog-overlay: 200;
+  --z-dialog: 210;
+  --z-dialog-close: 220;
+  --chart-1: #eaff3d;
+  --chart-2: #603bff;
+  --chart-3: #ff505e;
+  --chart-4: #ff9750;
+  --chart-5: #6af7ce;
+  --radius: 8px;
+
+  /* Splatoon brand tokens (exact from site) */
+  --neon-yellow: #eaff3d;
+  --ink-blue: #603bff;
+  --ink-purple: #af50ff;
+  --ink-green: #6af7ce;
+  --ink-orange: #ff9750;
+  --ink-red: #ff505e;
+  --desert-sand: #f5f0e8;
+  --chaos-black: #0d0d0d;
+  --tape-white: #ffffff;
+
+  /* Splatoon UI CSS custom properties */
+  --color-true-black: #000;
+  --color-black: #0d0d0d;
+  --color-black-alt: #0e0e0e;
+  --color-white: #fff;
+  --color-yellow: #eaff3d;
+  --color-blue: #603bff;
+  --color-purple: #af50ff;
+  --color-green: #6af7ce;
+  --color-orange: #ff9750;
+  --color-orange-dark: #fa5a00;
+  --color-red: #ff505e;
+  --color-brown: #7f413f;
+  --color-nintendo-red: #e60012;
+  --color-twitter: #1da1f2;
+  --color-side-order-red: #9f6a62;
+  --color-side-order-green: #58a28a;
+  --color-side-order-blue: #7e96bd;
+  --color-side-order-yellow: #c2c26e;
+  --color-side-order-purple: #a280b2;
+  --color-side-order-orange: #be9b6f;
+  --color-side-order-black: #292929;
+  --color-side-order-white: #faf8f0;
+  --color-grey-100: #ccc;
+  --color-grey-200: #888;
+  --color-grey-300: #555;
+  --color-grey-400: #222;
+  --base-space: 8px;
+  --gutter-width: 24px;
+  --duration-factor: 1;
+  --ease-in: cubic-bezier(0.51, 0, 0.9, 0.43);
+  --ease-back-in: cubic-bezier(0.38, -0.37, 0.83, 0.23);
+  --ease-back-out: cubic-bezier(0.21, 0.12, 0.35, 1.43);
+  --ease-out: cubic-bezier(0.35, 0.91, 0.3, 0.99);
+  --ease-in-out: cubic-bezier(0.75, 0, 0.21, 0.99);
+  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
+  --in-view-delay: 0s;
+  --in-view-stagger-delay: 0s;
+  --in-view-stagger-amount: 0.2s;
+
+  --sidebar: #f5f5f5;
+  --sidebar-foreground: #0d0d0d;
+  --sidebar-primary: #eaff3d;
+  --sidebar-primary-foreground: #0d0d0d;
+  --sidebar-accent: #f0f0f0;
+  --sidebar-accent-foreground: #0d0d0d;
+  --sidebar-border: #cccccc;
+  --sidebar-ring: #eaff3d;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+    container-type: inline-size;
+  }
+}
+
+/* ── Splatoon Typography (exact from real site) ── */
+@layer base {
+  h1,
+  h2,
+  h3,
+  h4 {
+    font-family: var(--font-heading);
+    font-weight: 700;
+    line-height: 1;
+  }
+  h3,
+  h4 {
+    font-family: var(--font-heading);
+    font-weight: 700;
+  }
+  h2 {
+    font-weight: 700;
+    text-transform: uppercase;
+  }
+  h1 {
+    font-size: clamp(2.5rem, 5vw, 5rem);
+    font-family: var(--font-heading);
+    font-weight: 700;
+  }
+  h2 {
+    font-size: clamp(1.5rem, 3vw, 3.125rem);
+  }
+  body {
+    font-family: var(--font-body);
+    font-size: 1rem;
+    font-weight: 500;
+    line-height: 1.6;
+  }
+}
+
+/* ── Splatoon Utilities ── */
+@layer utilities {
+  /* Soft depth used for generic UI; hard offset shadows are reserved for paper-cutout accents. */
+  .shadow-soft-splat-sm {
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
+  }
+  .shadow-soft-splat-md {
+    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
+  }
+  .shadow-soft-splat-lg {
+    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
+  }
+
+  /* Legacy hard offset shadows. Keep only for explicit cutout-style specials. */
+  .shadow-solid {
+    box-shadow: 4px 4px 0px var(--chaos-black);
+  }
+  .shadow-solid-sm {
+    box-shadow: 2px 2px 0px var(--chaos-black);
+  }
+  .shadow-solid-lg {
+    box-shadow: 6px 6px 0px var(--chaos-black);
+  }
+  .shadow-solid-xl {
+    box-shadow: 8px 8px 0px var(--chaos-black);
+  }
+
+  .scrap-panel,
+  .scrap-panel-tight,
+  .drawer-sheet {
+    position: relative;
+  }
+
+  .scrap-panel {
+    border-radius: 10px 14px 12px 16px;
+  }
+
+  .scrap-panel-tight {
+    border-radius: 8px 12px 10px 14px;
+  }
+
+  .drawer-sheet {
+    border-radius: 0;
+  }
+
+  .field-cut {
+    border-radius: 7px 11px 8px 12px;
+  }
+
+  .field-cut-popup {
+    border-radius: 8px 11px 9px 13px;
+  }
+}
+
+/* ── Skewed heading style — like real site h1/h2 ── */
+.splat-heading {
+  font-family: var(--font-heading);
+  font-style: italic;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.splat-skew {
+  font-family: var(--font-heading);
+  font-style: italic;
+  font-weight: 900;
+  text-transform: uppercase;
+  transform: skewX(-2deg);
+}
+
+/* ── Marquee Animation ── */
+@keyframes marquee {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+
+/* ── Morph blob animation ── */
+@keyframes morph {
+  0%,
+  100% {
+    border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%;
+  }
+  34% {
+    border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
+  }
+  67% {
+    border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
+  }
+}
+
+/* ── Section Background Patterns ── */
+/* These utility classes add a repeating pattern texture on top of the section's background color.
+   The pattern images are semi-transparent PNGs that tile/repeat. */
+
+.pattern-camo-black {
+  background-image: url('/_images/backgrounds/camo-black.png');
+  background-image: image-set(
+    url('/_images/backgrounds/camo-black.png') 1x,
+    url('/_images/backgrounds/camo-black-2x.png') 2x
+  );
+}
+
+.pattern-camo-green {
+  background-image: url('/_images/backgrounds/camo-green.png');
+  background-image: image-set(
+    url('/_images/backgrounds/camo-green.png') 1x,
+    url('/_images/backgrounds/camo-green-2x.png') 2x
+  );
+}
+
+.pattern-camo-purple {
+  background-image: url('/_images/backgrounds/camo-purple.png');
+  background-image: image-set(
+    url('/_images/backgrounds/camo-purple.png') 1x,
+    url('/_images/backgrounds/camo-purple-2x.png') 2x
+  );
+}
+
+.pattern-camo-white {
+  background-image: url('/_images/backgrounds/camo-white.png');
+  background-image: image-set(
+    url('/_images/backgrounds/camo-white.png') 1x,
+    url('/_images/backgrounds/camo-white-2x.png') 2x
+  );
+}
+
+.pattern-chip-white {
+  background-image: url('/_images/backgrounds/chip-white.png');
+  background-image: image-set(
+    url('/_images/backgrounds/chip-white.png') 1x,
+    url('/_images/backgrounds/chip-white-2x.png') 2x
+  );
+}
+
+.pattern-tapes-black {
+  background-image: url('/_images/backgrounds/tapes-black.jpg');
+  background-image: image-set(
+    url('/_images/backgrounds/tapes-black.webp') type('image/webp') 1x,
+    url('/_images/backgrounds/tapes-black.jpg') 1x,
+    url('/_images/backgrounds/tapes-black-2x.webp') type('image/webp') 2x,
+    url('/_images/backgrounds/tapes-black-2x.jpg') 2x
+  );
+}
+
+.pattern-tapes-green {
+  background-image: url('/_images/backgrounds/tapes-green.jpg');
+  background-image: image-set(
+    url('/_images/backgrounds/tapes-green.webp') type('image/webp') 1x,
+    url('/_images/backgrounds/tapes-green.jpg') 1x,
+    url('/_images/backgrounds/tapes-green-2x.webp') type('image/webp') 2x,
+    url('/_images/backgrounds/tapes-green-2x.jpg') 2x
+  );
+}
+
+.pattern-tapes-purple {
+  background-image: url('/_images/backgrounds/tapes-purple.jpg');
+  background-image: image-set(
+    url('/_images/backgrounds/tapes-purple.webp') type('image/webp') 1x,
+    url('/_images/backgrounds/tapes-purple.jpg') 1x,
+    url('/_images/backgrounds/tapes-purple-2x.webp') type('image/webp') 2x,
+    url('/_images/backgrounds/tapes-purple-2x.jpg') 2x
+  );
+}
+
+/* ── Reduced Motion ── */
+@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;
+  }
+}
+
+.reduced-motion,
+.reduced-motion * {
+  animation-duration: 0.01ms !important;
+  animation-iteration-count: 1 !important;
+  transition-duration: 0.01ms !important;
+  scroll-behavior: auto !important;
+}
+
+/* Splatoon UI component styles: server.css */
+
+/* src/components/ui/card-slot.module.css */
+.cardSlot {
+  position: absolute;
+  z-index: 20;
+  pointer-events: none;
+}
+
+/* src/components/ui/torn-card.module.css */
+.tape {
+  display: block;
+  transform: rotate(var(--tape-rotate, 0deg));
+}
+.alertContent {
+  padding: calc(var(--base-space, 8px) * 4);
+}
+@container (min-width: 400px) {
+  .alertContent {
+    padding: calc(var(--base-space, 8px) * 6) calc(var(--base-space, 8px) * 4);
+  }
+}
+.imgDesktop {
+  display: none;
+}
+@container (min-width: 400px) {
+  .imgMobile {
+    display: none;
+  }
+  .imgDesktop {
+    display: block;
+  }
+}
+
+/* src/components/ui/black-tape-container.module.css */
+.blackTapeContainer {
+  --tape-offset: 16px;
+  --tape-safe-bleed: min(var(--tape-offset), max(0px, calc((100cqw - 100%) / 2)));
+  --tape-width: 30px;
+  margin-left: calc(var(--tape-safe-bleed) * -1);
+  margin-right: calc(var(--tape-safe-bleed) * -1);
+  overflow-x: clip;
+  padding: 0 var(--tape-offset);
+  position: relative;
+}
+.blackTapeContainer::before,
+.blackTapeContainer::after {
+  background-repeat: repeat-y;
+  content: "";
+  height: 100%;
+  position: absolute;
+  top: 0;
+  width: var(--tape-width);
+  z-index: 1;
+}
+.blackTapeContainer::before {
+  background-image: url(/_images/svg/left-black-tape-container.svg);
+  background-position: calc(100% - 1px) top;
+  left: 0;
+}
+.blackTapeContainer::after {
+  background-image: url(/_images/svg/right-black-tape-container.svg);
+  background-position: 1px top;
+  right: 0;
+}
+.blackTapeContainerInner {
+  background: var(--color-black-alt, #0e0e0e);
+  padding: 1.5em;
+}
+.tapeYellow .blackTapeContainerInner {
+  background: var(--color-yellow, #eaff3d);
+  color: var(--color-black, #0d0d0d);
+}
+.tapeYellow::before {
+  background-image: url(/_images/svg/left-yellow-tape-container.svg);
+}
+.tapeYellow::after {
+  background-image: url(/_images/svg/right-yellow-tape-container.svg);
+}
+.noVerticalPadding .blackTapeContainerInner {
+  padding: 0 1.5em;
+}
+@media screen and (min-width: 640px) {
+  .blackTapeContainer {
+    --tape-offset: 38px;
+    --tape-width: 40px;
+  }
+  .blackTapeContainerInner {
+    padding: 2em;
+  }
+  .noVerticalPadding .blackTapeContainerInner {
+    padding: 0 2em;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .blackTapeContainer {
+    --tape-offset: 58px;
+    --tape-width: 60px;
+  }
+}
+
+/* src/components/ui/button-arrow.module.css */
+.buttonArrow {
+  color: var(--color);
+  display: inline-block;
+  font-family: var(--font-alt);
+  font-size: 1.5rem;
+  line-height: 1;
+  text-decoration: none;
+}
+.buttonArrow:hover .iconWrap {
+  transform: translateX(10px);
+}
+.iconWrap {
+  display: inline-flex;
+  margin-left: 0.5rem;
+}
+.iconWrap svg {
+  height: 16px;
+  transform: translateX(5px);
+  transition: transform 0.2s;
+  width: 8px;
+}
+@media screen and (min-width: 1024px) {
+  .buttonArrow {
+    font-size: 1.625rem;
+  }
+}
+
+/* src/components/ui/button-drip.module.css */
+.button {
+  --bg-color: var(--color-primary);
+  --text-color: var(--color-primary-alt);
+  --hover-bg-color: var(--color-accent);
+  --hover-text-color: var(--color-accent-alt);
+  --speed: calc(var(--duration-factor) * 1.8s);
+  --drip-speed-factor: 1;
+  --drip-in-start: polygon(0 100%, 0 100%, 100% 100%, 100% 100%);
+  --drip-in-end: polygon(0 0, 0 100%, 100% 100%, 100% 0);
+  --drip-out-start: polygon(0 0, 0 0, 100% 0, 100% 0);
+  --drip-out-end: polygon(0 0, 0 100%, 100% 100%, 100% 0);
+  border-radius: 0.5rem;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-block;
+  font-family: var(--font-alt);
+  font-weight: var(--font-weight-bold);
+  line-height: 1;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transition: border calc(var(--duration-factor) * 0.2s) calc(var(--duration-factor) * 0.25s);
+  width: 100%;
+}
+.button > *:not(.icon) {
+  width: 100%;
+}
+.icon {
+  height: 26px;
+  margin-right: var(--base-space, 8px);
+  padding-top: var(--base-space, 8px);
+  width: 20px;
+}
+.content,
+.hoverContent {
+  align-items: center;
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  display: flex;
+  font-size: 1.5rem;
+  height: 100%;
+  justify-content: center;
+  padding: calc(var(--base-space, 8px) * 1.5) calc(var(--base-space, 8px) * 5.5) calc(var(--base-space, 8px) * 2.5) calc(var(--base-space, 8px) * 5.5);
+  transition: background-color calc(var(--duration-factor) * 0.2s) ease;
+  width: 100%;
+}
+.content span,
+.hoverContent span {
+  position: relative;
+  white-space: nowrap;
+  z-index: 1;
+}
+.content .icon,
+.hoverContent .icon {
+  fill: var(--text-color);
+}
+.hoverContent {
+  animation: calc(var(--speed) * var(--drip-speed-factor)) button-drip_drip-leave 0.2s ease forwards;
+  animation-fill-mode: forwards;
+  background-color: var(--hover-bg-color);
+  border-radius: 0.5rem;
+  box-shadow: inset 0 0 0 2px var(--hover-bg-color);
+  color: var(--hover-text-color);
+  height: 100%;
+  left: 0;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  transition: box-shadow 0.2s;
+  transition-delay: 0.6s;
+  width: 100%;
+  z-index: 2;
+}
+@media (hover: hover) {
+  .button:hover .hoverContent {
+    animation: calc(var(--speed) * var(--drip-speed-factor)) button-drip_drip-enter 0.2s ease forwards;
+    box-shadow: inset 0 0 0 2px var(--hover-text-color);
+    opacity: 1;
+  }
+}
+.accentColors {
+  --bg-color: var(--color-accent);
+  --text-color: var(--color-accent-alt);
+  --hover-bg-color: var(--color-primary);
+  --hover-text-color: var(--color-primary-alt);
+}
+@-webkit-keyframes button-drip_drip-enter {
+  0% {
+    -webkit-clip-path: var(--drip-in-start);
+    clip-path: var(--drip-in-start);
+  }
+  to {
+    -webkit-clip-path: var(--drip-in-end);
+    clip-path: var(--drip-in-end);
+  }
+}
+@keyframes button-drip_drip-enter {
+  0% {
+    -webkit-clip-path: var(--drip-in-start);
+    clip-path: var(--drip-in-start);
+  }
+  to {
+    -webkit-clip-path: var(--drip-in-end);
+    clip-path: var(--drip-in-end);
+  }
+}
+@-webkit-keyframes button-drip_drip-leave {
+  0% {
+    -webkit-clip-path: var(--drip-out-start);
+    clip-path: var(--drip-out-start);
+  }
+  to {
+    -webkit-clip-path: var(--drip-out-end);
+    clip-path: var(--drip-out-end);
+  }
+}
+@keyframes button-drip_drip-leave {
+  0% {
+    -webkit-clip-path: var(--drip-out-start);
+    clip-path: var(--drip-out-start);
+  }
+  to {
+    -webkit-clip-path: var(--drip-out-end);
+    clip-path: var(--drip-out-end);
+  }
+}
+
+/* src/components/ui/event-callout.module.css */
+.callout {
+  background: var(--color-black, #0d0d0d);
+  border: 3px solid var(--color-black, #0d0d0d);
+  border-radius: 8px;
+  color: var(--color-white, #fff);
+  overflow: hidden;
+  position: relative;
+}
+.background {
+  block-size: 100%;
+  filter: saturate(1.18) contrast(1.05);
+  inline-size: 100%;
+  inset: 0;
+  object-fit: cover;
+  opacity: 0.32;
+  position: absolute;
+  transform: scale(1.08) rotate(-1deg);
+}
+.content {
+  display: grid;
+  gap: clamp(18px, 4vw, 30px);
+  grid-template-columns: minmax(0, 1fr);
+  padding: clamp(18px, 4vw, 30px);
+  position: relative;
+  z-index: 1;
+}
+.mediaFrame {
+  aspect-ratio: 382 / 215;
+  background: var(--color-white, #fff);
+  border: 4px solid var(--color-white, #fff);
+  box-shadow: 8px 10px 0 rgb(0 0 0 / 0.35);
+  position: relative;
+  transform: rotate(-1.5deg);
+}
+.media {
+  block-size: 100%;
+  display: block;
+  inline-size: 100%;
+  object-fit: cover;
+}
+.iconBadge {
+  align-items: center;
+  background: var(--color-yellow, #eaff3d);
+  border: 3px solid var(--color-black, #0d0d0d);
+  border-radius: 999px;
+  box-shadow: 4px 5px 0 rgb(0 0 0 / 0.35);
+  display: flex;
+  inline-size: clamp(46px, 12vw, 64px);
+  justify-content: center;
+  padding: 7px;
+  position: absolute;
+  right: -14px;
+  top: -18px;
+  transform: rotate(8deg);
+}
+.iconBadge img {
+  block-size: auto;
+  display: block;
+  inline-size: 100%;
+}
+.body {
+  align-self: center;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-inline-size: 0;
+}
+.eyebrow {
+  color: var(--color-yellow, #eaff3d);
+  font-size: 0.75rem;
+  font-weight: 900;
+  letter-spacing: 0.18em;
+  line-height: 1;
+  margin: 0;
+  text-transform: uppercase;
+}
+.title {
+  font-family: var(--font-heading), sans-serif;
+  font-size: clamp(1.875rem, 7vw, 3.25rem);
+  font-weight: 900;
+  letter-spacing: 0;
+  line-height: 0.9;
+  margin: 0;
+  text-transform: uppercase;
+}
+.description {
+  color: rgb(255 255 255 / 0.82);
+  font-size: 0.95rem;
+  font-weight: 700;
+  line-height: 1.45;
+  margin: 0;
+  max-inline-size: 34rem;
+}
+.action {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-block-start: 8px;
+}
+@media (min-width: 760px) {
+  .content {
+    align-items: center;
+    grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1fr);
+  }
+  .mediaFrame {
+    transform: rotate(-2deg);
+  }
+}
+
+/* src/components/ui/heading-tape.module.css */
+.headingTapeSection {
+  container-type: inline-size;
+  display: flex;
+  justify-content: center;
+  margin-bottom: calc(var(--base-space, 8px) * var(--margin-offset, 2));
+  min-inline-size: 0;
+  position: relative;
+  width: 100%;
+}
+.overlapTop {
+  margin-top: -30px;
+}
+.headingTapeContainer {
+  position: relative;
+  transform: rotate(-3deg);
+  width: fit-content;
+}
+.headingTapeDecorations {
+  height: 100%;
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 0;
+}
+.headingTapeDecoration {
+  display: block;
+  inline-size: var(--heading-tape-decoration-inline-size, 100%);
+  max-inline-size: var(--heading-tape-decoration-max-inline-size, 100%);
+  position: absolute;
+}
+.decorationTopLeft {
+  left: var(--heading-tape-decoration-inline-offset, -19px);
+  top: var(--heading-tape-decoration-block-offset, -15px);
+  transform: rotate(var(--heading-tape-decoration-rotate, 0deg));
+}
+.decorationTopRight {
+  right: var(--heading-tape-decoration-inline-offset, -17px);
+  top: var(--heading-tape-decoration-block-offset, -15px);
+  transform: rotate(var(--heading-tape-decoration-rotate, 0deg));
+}
+.decorationBottomLeft {
+  bottom: var(--heading-tape-decoration-block-offset, -17px);
+  left: var(--heading-tape-decoration-inline-offset, -19px);
+  transform: rotate(var(--heading-tape-decoration-rotate, 0deg));
+}
+.decorationBottomRight {
+  bottom: var(--heading-tape-decoration-block-offset, -17px);
+  right: var(--heading-tape-decoration-inline-offset, -17px);
+  transform: rotate(var(--heading-tape-decoration-rotate, 0deg));
+}
+.headingTapeDecorationImage {
+  block-size: auto;
+  display: block;
+  inline-size: auto;
+  max-inline-size: 100%;
+}
+.headingTapeDecorationImageDesktop {
+  display: none;
+}
+.headingTapeText {
+  background: var(--color-white, #ffffff);
+  border-radius: 10px;
+  color: var(--color-black, #0d0d0d);
+  display: inline-block;
+  font-family: var(--font-heading, inherit);
+  font-size: 1.875rem;
+  font-weight: 700;
+  letter-spacing: 0;
+  line-height: 1;
+  max-inline-size: 100%;
+  overflow-wrap: break-word;
+  padding: calc(var(--base-space, 8px) * 2) 40px;
+  position: relative;
+  text-align: center;
+  text-transform: uppercase;
+  z-index: 1;
+}
+.compact .headingTapeText {
+  border-radius: 8px;
+  font-size: 1.375rem;
+  padding: calc(var(--base-space, 8px) * 1.25) 24px;
+}
+@container (min-width: 640px) {
+  .headingTapeDecorationImageMobile {
+    display: none;
+  }
+  .headingTapeDecorationImageDesktop {
+    display: block;
+  }
+}
+@container (min-width: 640px) {
+  .headingTapeText {
+    padding: calc(var(--base-space, 8px) * 2) 60px;
+  }
+  .compact .headingTapeText {
+    font-size: 2rem;
+    padding: calc(var(--base-space, 8px) * 1.5) 36px;
+  }
+}
+@container (min-width: 1024px) {
+  .headingTapeText {
+    font-size: 3.125rem;
+  }
+  .compact .headingTapeText {
+    font-size: 2.5rem;
+  }
+}
+
+/* src/components/ui/photo-frame.module.css */
+.photoFrame {
+  --border-offset-x: 3px;
+  --border-offset-y: 4px;
+  --tape-rotation: 6deg;
+  --margin-offset: 6;
+  --photo-aspect-ratio: auto;
+  aspect-ratio: var(--photo-aspect-ratio);
+  container-type: inline-size;
+  display: inline-block;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
+  line-height: 0;
+  margin-top: calc(var(--base-space, 8px) * var(--margin-offset));
+  padding: calc(var(--border-offset-y) * 2) calc(var(--border-offset-x) * 2);
+  position: relative;
+  transform: rotate(var(--end-rotate, 0deg));
+}
+.photoFrame::before {
+  background-image: url(/_images/svg/styled-photo-background.svg);
+  background-position: 50% center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  content: "";
+  height: calc(100% + var(--border-offset-y) * 2);
+  left: calc(var(--border-offset-x) * -1);
+  position: absolute;
+  top: calc(var(--border-offset-y) * -1);
+  width: calc(100% + var(--border-offset-x) * 2);
+  pointer-events: none;
+}
+.fillWidth {
+  --photo-aspect-ratio: 16 / 9;
+  display: block;
+  width: 100%;
+}
+.nested {
+  max-width: 350px;
+}
+.nested.photoFrame {
+  --border-offset-x: 2px;
+  --border-offset-y: 3px;
+  --margin-offset: 4;
+}
+.thinBorder.photoFrame,
+.photoFrame.thinBorder {
+  --border-offset-x: 2px;
+  --border-offset-y: 3px;
+}
+.mediumBorder.photoFrame,
+.photoFrame.mediumBorder {
+  --border-offset-x: 2px;
+  --border-offset-y: 4px;
+}
+.photo {
+  mask-image: url(/_images/svg/styled-photo-background.svg);
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: 100% 100%;
+  object-fit: contain;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.noContainer {
+  container-type: unset;
+}
+.tape {
+  position: absolute;
+  z-index: 20;
+  pointer-events: none;
+}
+.tapeMobile {
+  display: block;
+}
+.tapeDesktop {
+  display: none;
+}
+@container (min-width: 400px) {
+  .tapeMobile {
+    display: none;
+  }
+  .tapeDesktop {
+    display: block;
+  }
+}
+.tapeCenter {
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(var(--tape-rotate, 6deg));
+}
+.tapeLeft {
+  top: 0;
+  left: var(--slot-offset, 15%);
+  transform: translateY(-50%) rotate(var(--tape-rotate, 6deg));
+}
+.tapeRight {
+  top: 0;
+  right: var(--slot-offset, 15%);
+  transform: translateY(-50%) rotate(var(--tape-rotate, 6deg));
+}
+.tapeBottomCenter {
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, 50%) rotate(var(--tape-rotate, 6deg));
+}
+.tapeBottomLeft {
+  bottom: 0;
+  left: var(--slot-offset, 15%);
+  transform: translateY(50%) rotate(var(--tape-rotate, 6deg));
+}
+.tapeBottomRight {
+  bottom: 0;
+  right: var(--slot-offset, 15%);
+  transform: translateY(50%) rotate(var(--tape-rotate, 6deg));
+}
+.decoration {
+  pointer-events: none;
+  position: absolute;
+  z-index: 20;
+}
+.decorationMobile {
+  display: block;
+}
+.decorationDesktop {
+  display: none;
+}
+@container (min-width: 400px) {
+  .decorationMobile {
+    display: none;
+  }
+  .decorationDesktop {
+    display: block;
+  }
+}
+.decorationBottomLeft {
+  --slot-offset: 15%;
+  bottom: 0;
+  left: var(--slot-offset);
+  transform: translateY(50%);
+}
+.decorationTopRight {
+  --slot-offset: 15%;
+  top: 0;
+  right: var(--slot-offset);
+  transform: translateY(-50%);
+}
+.decorationBottomRight {
+  --slot-offset: 15%;
+  bottom: 0;
+  right: var(--slot-offset);
+  transform: translateY(50%);
+}
+.decorationCenter {
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+@media screen and (min-width: 640px) {
+  .decorationBottomLeft,
+  .decorationBottomRight {
+    --slot-offset: 15%;
+  }
+  .decorationTopRight {
+    --slot-offset: 15%;
+  }
+}
+@media screen and (min-width: 640px) {
+  .photoFrame {
+    --border-offset-x: 4px;
+    --border-offset-y: 3px;
+  }
+}
+
+/* src/components/ui/section-background.module.css */
+.sectionBackground {
+  background-position: top;
+  min-height: 100px;
+}
+.patternBaseBgPattern {
+  background-image: url(/_images/backgrounds/base-bg-pattern.jpg);
+  background-image: image-set(url(/_images/backgrounds/base-bg-pattern.jpg) 1x, url(/_images/backgrounds/base-bg-pattern-2x.jpg) 2x);
+}
+.patternCamoBlack {
+  background-image: url(/_images/backgrounds/camo-black.png);
+  background-image: image-set(url(/_images/backgrounds/camo-black.png) 1x, url(/_images/backgrounds/camo-black-2x.png) 2x);
+}
+.patternCamoGreen {
+  background-image: url(/_images/backgrounds/camo-green.png);
+  background-image: image-set(url(/_images/backgrounds/camo-green.png) 1x, url(/_images/backgrounds/camo-green-2x.png) 2x);
+}
+.patternCamoPurple {
+  background-image: url(/_images/backgrounds/camo-purple.png);
+  background-image: image-set(url(/_images/backgrounds/camo-purple.png) 1x, url(/_images/backgrounds/camo-purple-2x.png) 2x);
+}
+.patternCamoPurpleRevised {
+  background-image: url(/_images/backgrounds/camo-purple-revised.png);
+  background-image: image-set(url(/_images/backgrounds/camo-purple-revised.png) 1x, url(/_images/backgrounds/camo-purple-revised-2x.png) 2x);
+}
+.patternCamoOrange {
+  background-image: url(/_images/backgrounds/camo-orange.png);
+  background-image: image-set(url(/_images/backgrounds/camo-orange.png) 1x, url(/_images/backgrounds/camo-orange-2x.png) 2x);
+}
+.patternCamoRed {
+  background-image: url(/_images/backgrounds/camo-red.png);
+  background-image: image-set(url(/_images/backgrounds/camo-red.png) 1x, url(/_images/backgrounds/camo-red-2x.png) 2x);
+}
+.patternCamoWhite {
+  background-image: url(/_images/backgrounds/camo-white.png);
+  background-image: image-set(url(/_images/backgrounds/camo-white.png) 1x, url(/_images/backgrounds/camo-white-2x.png) 2x);
+}
+.patternCamoWhiteOutline {
+  background-image: url(/_images/backgrounds/camo-white-outline.png);
+  background-image: image-set(url(/_images/backgrounds/camo-white-outline.png) 1x, url(/_images/backgrounds/camo-white-outline-2x.png) 2x);
+}
+.patternHardwareBackground {
+  background-image: url(/_images/backgrounds/hardware-background.png);
+  background-image: image-set(url(/_images/backgrounds/hardware-background.png) 1x, url(/_images/backgrounds/hardware-background-2x.png) 2x);
+  background-position: 50%;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+@media screen and (min-width: 640px) {
+  .patternHardwareBackground {
+    background-image: url(/_images/backgrounds/hardware-background-medium-up.png);
+    background-image: image-set(url(/_images/backgrounds/hardware-background-medium-up.png) 1x, url(/_images/backgrounds/hardware-background-medium-up-2x.png) 2x);
+  }
+}
+.patternOctoBlack {
+  background-image: url(/_images/backgrounds/octo-black.png);
+  background-image: image-set(url(/_images/backgrounds/octo-black.png) 1x, url(/_images/backgrounds/octo-black-2x.png) 2x);
+}
+.patternOctoRed {
+  background-image: url(/_images/backgrounds/octo-red.png);
+  background-image: image-set(url(/_images/backgrounds/octo-red.png) 1x, url(/_images/backgrounds/octo-red-2x.png) 2x);
+}
+.patternOctoarrowGreen {
+  background-image: url(/_images/backgrounds/octoarrow-green.png);
+  background-image: image-set(url(/_images/backgrounds/octoarrow-green.png) 1x, url(/_images/backgrounds/octoarrow-green-2x.png) 2x);
+}
+.patternOctoarrowOrange {
+  background-image: url(/_images/backgrounds/octoarrow-orange.png);
+  background-image: image-set(url(/_images/backgrounds/octoarrow-orange.png) 1x, url(/_images/backgrounds/octoarrow-orange-2x.png) 2x);
+}
+.patternSquidBlack {
+  background-image: url(/_images/backgrounds/squid-black.png);
+  background-image: image-set(url(/_images/backgrounds/squid-black.png) 1x, url(/_images/backgrounds/squid-black-2x.png) 2x);
+}
+.patternCirclesGreen {
+  background-image: url(/_images/backgrounds/circles-green.png);
+  background-image: image-set(url(/_images/backgrounds/circles-green.png) 1x, url(/_images/backgrounds/circles-green-2x.png) 2x);
+}
+.patternChipWhite {
+  background-image: url(/_images/backgrounds/chip-white.png);
+  background-image: image-set(url(/_images/backgrounds/chip-white.png) 1x, url(/_images/backgrounds/chip-white-2x.png) 2x);
+}
+.patternMonstersBlack {
+  background-image: url(/_images/backgrounds/monsters-black.png);
+  background-image: image-set(url(/_images/backgrounds/monsters-black.png) 1x, url(/_images/backgrounds/monsters-black-2x.png) 2x);
+  background-size: 50%;
+}
+.patternGraffiti {
+  background-image: url(/_images/backgrounds/graffiti.jpg);
+  background-image: image-set(url(/_images/backgrounds/graffiti.jpg) 1x, url(/_images/backgrounds/graffiti-2x.jpg) 2x);
+  background-position: 50%;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+@media screen and (min-width: 640px) {
+  .patternGraffiti {
+    background-image: url(/_images/backgrounds/graffiti-medium-up.jpg);
+    background-image: image-set(url(/_images/backgrounds/graffiti-medium-up.jpg) 1x, url(/_images/backgrounds/graffiti-medium-up-2x.jpg) 2x);
+  }
+}
+.patternTapesBlack {
+  background-image: url(/_images/backgrounds/tapes-black.jpg);
+  background-image: image-set(url(/_images/backgrounds/tapes-black.webp) type("image/webp") 1x, url(/_images/backgrounds/tapes-black.jpg) 1x, url(/_images/backgrounds/tapes-black-2x.webp) type("image/webp") 2x, url(/_images/backgrounds/tapes-black-2x.jpg) 2x);
+}
+.patternTapesGreen {
+  background-image: url(/_images/backgrounds/tapes-green.jpg);
+  background-image: image-set(url(/_images/backgrounds/tapes-green.webp) type("image/webp") 1x, url(/_images/backgrounds/tapes-green.jpg) 1x, url(/_images/backgrounds/tapes-green-2x.webp) type("image/webp") 2x, url(/_images/backgrounds/tapes-green-2x.jpg) 2x);
+}
+.patternTapesPattern {
+  background-image: url(/_images/backgrounds/tapes-pattern.jpg);
+  background-image: image-set(url(/_images/backgrounds/tapes-pattern.jpg) 1x, url(/_images/backgrounds/tapes-pattern-2x.jpg) 2x);
+}
+.patternTapesPurple {
+  background-image: url(/_images/backgrounds/tapes-purple.jpg);
+  background-image: image-set(url(/_images/backgrounds/tapes-purple.webp) type("image/webp") 1x, url(/_images/backgrounds/tapes-purple.jpg) 1x, url(/_images/backgrounds/tapes-purple-2x.webp) type("image/webp") 2x, url(/_images/backgrounds/tapes-purple-2x.jpg) 2x);
+}
+
+/* src/components/ui/staple-card.module.css */
+.stapleCard {
+  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.14));
+  height: 100%;
+}
+.card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  position: relative;
+  transition: transform calc(var(--duration-factor) * 0.3s) var(--ease-in-out);
+}
+.card.hoverTilt:hover {
+  transform: rotate(2deg);
+}
+.cardLayout {
+  background-color: var(--color-white, #fff);
+  color: var(--color-black, #0d0d0d);
+  display: grid;
+  grid-template-rows: auto 1fr;
+  height: 100%;
+  padding: calc(var(--base-space, 8px) * 0) calc(var(--base-space, 8px) * 4) calc(var(--base-space, 8px) * 3) calc(var(--base-space, 8px) * 4);
+  position: relative;
+}
+.image {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  transform: rotate(-1deg);
+  width: 100%;
+}
+.image img {
+  object-fit: contain;
+}
+.stapleLeft {
+  bottom: 0;
+  left: 20px;
+  position: absolute;
+  width: 20%;
+}
+.stapleRight {
+  bottom: 0;
+  position: absolute;
+  right: 20px;
+  width: 10%;
+}
+.tape {
+  display: block;
+}
+.tapeImage {
+  display: block;
+  height: auto;
+  width: 100%;
+}
+.imgDesktop {
+  display: none;
+}
+@container (min-width: 400px) {
+  .imgMobile {
+    display: none;
+  }
+  .imgDesktop {
+    display: block;
+  }
+}
+.cardBottom {
+  margin-top: -2px;
+  width: 100%;
+}
+.cardTop {
+  margin-bottom: -2px;
+  width: 100%;
+}
+.info {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: flex-start;
+  padding: calc(var(--base-space, 8px) * 2) 0;
+}
+.surfaceDark .cardLayout {
+  background-color: var(--color-black-alt, #0e0e0e);
+  color: var(--color-white, #fff);
+}
+.title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  line-height: 2;
+}
+.subtitle {
+  margin-top: calc(var(--base-space, 8px) * 1);
+  font-size: 0.875rem;
+  opacity: 0.75;
+}
+
+/* src/components/ui/tape-divider.module.css */
+.tapeDivider {
+  position: relative;
+  width: 100%;
+  z-index: 2;
+  pointer-events: none;
+  line-height: 0;
+}
+.tapePrimary {
+  background-image: url(/_images/tape-assets/tape-2.png);
+  background-image: image-set(url(/_images/tape-assets/tape-2.png) 1x, url(/_images/tape-assets/tape-2-2x.png) 2x);
+  background-position: center;
+  background-repeat: repeat-x;
+  background-size: auto 100%;
+  height: 36px;
+  width: 100%;
+}
+.tapeSecondary {
+  background-image: url(/_images/tape-assets/tape-3.png);
+  background-image: image-set(url(/_images/tape-assets/tape-3.png) 1x, url(/_images/tape-assets/tape-3-2x.png) 2x);
+  background-position: center;
+  background-repeat: repeat-x;
+  background-size: auto 100%;
+  height: 38px;
+  width: 100%;
+}
+.primaryOnly .tapePrimary {
+  height: 36px;
+}
+.double .tapePrimary {
+  position: relative;
+  z-index: 1;
+}
+.double .tapeSecondary {
+  margin-top: -18px;
+  position: relative;
+  z-index: 0;
+}
+.rotateLeft {
+  transform: rotate(-2deg);
+}
+.rotateRight {
+  transform: rotate(2deg);
+}
+.rotateStrong {
+  transform: rotate(-4deg);
+}
+.overlap {
+  margin-top: -36px;
+  padding-top: 36px;
+}
+@media screen and (min-width: 640px) {
+  .tapePrimary {
+    height: 48px;
+  }
+  .tapeSecondary {
+    height: 50px;
+  }
+  .double .tapeSecondary {
+    margin-top: -24px;
+  }
+  .overlap {
+    margin-top: -48px;
+    padding-top: 48px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .tapePrimary {
+    height: 60px;
+  }
+  .tapeSecondary {
+    height: 62px;
+  }
+  .double .tapeSecondary {
+    margin-top: -30px;
+  }
+  .overlap {
+    margin-top: -60px;
+    padding-top: 60px;
+  }
+}
+
+/* src/components/ui/tape-title.module.css */
+.container {
+  --tape-title-left-bleed: 61px;
+  --tape-title-right-bleed: 59px;
+  --tape-color: var(--color-true-black, #000);
+  background: var(--color-black, #0d0d0d);
+  color: var(--color-white, #fff);
+  display: inline-block;
+  margin-inline: var(--tape-title-left-bleed) var(--tape-title-right-bleed);
+  position: relative;
+  transform: rotate(-4deg);
+  z-index: 2;
+}
+.container::before {
+  background-color: var(--tape-color);
+  mask-image: url(/_images/svg/left-tape.svg);
+  mask-position: 100% center;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  content: " ";
+  height: 100%;
+  left: -61px;
+  position: absolute;
+  width: 62px;
+}
+.container::after {
+  background-color: var(--tape-color);
+  mask-image: url(/_images/svg/right-tape.svg);
+  mask-position: 0 center;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  content: " ";
+  height: 100%;
+  position: absolute;
+  right: -58px;
+  top: 0;
+  width: 59px;
+}
+.red {
+  --tape-color: var(--color-red, #ff505e);
+  background: var(--color-red, #ff505e);
+  color: var(--color-black, #0d0d0d);
+}
+.yellow {
+  --tape-color: var(--color-yellow, #eaff3d);
+  background: var(--color-yellow, #eaff3d);
+  color: var(--color-black, #0d0d0d);
+}
+.title {
+  font-family: var(--font-alt);
+  font-weight: 600;
+  font-size: 1.5rem;
+  line-height: 1;
+  padding: 8px 16px 16px;
+  text-transform: none;
+  white-space: nowrap;
+}
+@media screen and (min-width: 1024px) {
+  .title {
+    font-size: 2.3125rem;
+    padding: 16px 40px 24px;
+  }
+}
+
+/* src/components/ui/wave-button.module.css */
+.morph {
+  animation: morph calc(var(--duration-factor, 1) * 3s) linear infinite;
+  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
+  transform: translateZ(0);
+}
+@keyframes morph {
+  0%, 100% {
+    border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%;
+  }
+  34% {
+    border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
+  }
+  67% {
+    border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
+  }
+}
+.iconWrap {
+  background-color: var(--color-yellow, #eaff3d);
+  display: grid;
+  flex-shrink: 0;
+  height: 48px;
+  place-content: center;
+  width: 48px;
+}
+.icon {
+  --line-w: 19px;
+  --line-h: 4px;
+  --line-y: calc(var(--line-h) * -1.5);
+  background-color: var(--color-blue, #603bff);
+  display: block;
+  height: var(--line-h);
+  position: relative;
+  width: var(--line-w);
+  transition: background-color 0.1s linear;
+}
+.icon::before,
+.icon::after {
+  --line-rotation: 0deg;
+  background-color: var(--color-blue, #603bff);
+  content: "";
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  transform: translateY(var(--line-y)) rotate(var(--line-rotation));
+  transition: transform 0.25s cubic-bezier(0.21, 0.12, 0.35, 1.43), background-color 0.1s linear;
+  width: 100%;
+}
+.icon::after {
+  --line-y: calc(var(--line-h) * 1.5);
+}
+.pressed .icon {
+  background-color: transparent;
+}
+.pressed .icon::before {
+  --line-y: 0px;
+  --line-rotation: 45deg;
+}
+.pressed .icon::after {
+  --line-y: 0px;
+  --line-rotation: -45deg;
+}
+.yellow {
+  background-color: var(--color-yellow, #eaff3d);
+}
+.white {
+  background-color: var(--color-white);
+}
+.ghost {
+  background-color: transparent;
+}
+.md {
+  height: 48px;
+  width: 48px;
+}
+.lg {
+  height: 64px;
+  width: 64px;
+}
+
+/* Splatoon UI component styles: client.css */
+
+/* src/components/ui/card-slot.module.css */
+.cardSlot {
+  position: absolute;
+  z-index: 20;
+  pointer-events: none;
+}
+
+/* src/components/ui/torn-card.module.css */
+.tape {
+  display: block;
+  transform: rotate(var(--tape-rotate, 0deg));
+}
+.alertContent {
+  padding: calc(var(--base-space, 8px) * 4);
+}
+@container (min-width: 400px) {
+  .alertContent {
+    padding: calc(var(--base-space, 8px) * 6) calc(var(--base-space, 8px) * 4);
+  }
+}
+.imgDesktop {
+  display: none;
+}
+@container (min-width: 400px) {
+  .imgMobile {
+    display: none;
+  }
+  .imgDesktop {
+    display: block;
+  }
+}
+
+/* src/components/ui/black-tape-container.module.css */
+.blackTapeContainer {
+  --tape-offset: 16px;
+  --tape-safe-bleed: min(var(--tape-offset), max(0px, calc((100cqw - 100%) / 2)));
+  --tape-width: 30px;
+  margin-left: calc(var(--tape-safe-bleed) * -1);
+  margin-right: calc(var(--tape-safe-bleed) * -1);
+  overflow-x: clip;
+  padding: 0 var(--tape-offset);
+  position: relative;
+}
+.blackTapeContainer::before,
+.blackTapeContainer::after {
+  background-repeat: repeat-y;
+  content: "";
+  height: 100%;
+  position: absolute;
+  top: 0;
+  width: var(--tape-width);
+  z-index: 1;
+}
+.blackTapeContainer::before {
+  background-image: url(/_images/svg/left-black-tape-container.svg);
+  background-position: calc(100% - 1px) top;
+  left: 0;
+}
+.blackTapeContainer::after {
+  background-image: url(/_images/svg/right-black-tape-container.svg);
+  background-position: 1px top;
+  right: 0;
+}
+.blackTapeContainerInner {
+  background: var(--color-black-alt, #0e0e0e);
+  padding: 1.5em;
+}
+.tapeYellow .blackTapeContainerInner {
+  background: var(--color-yellow, #eaff3d);
+  color: var(--color-black, #0d0d0d);
+}
+.tapeYellow::before {
+  background-image: url(/_images/svg/left-yellow-tape-container.svg);
+}
+.tapeYellow::after {
+  background-image: url(/_images/svg/right-yellow-tape-container.svg);
+}
+.noVerticalPadding .blackTapeContainerInner {
+  padding: 0 1.5em;
+}
+@media screen and (min-width: 640px) {
+  .blackTapeContainer {
+    --tape-offset: 38px;
+    --tape-width: 40px;
+  }
+  .blackTapeContainerInner {
+    padding: 2em;
+  }
+  .noVerticalPadding .blackTapeContainerInner {
+    padding: 0 2em;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .blackTapeContainer {
+    --tape-offset: 58px;
+    --tape-width: 60px;
+  }
+}
+
+/* src/components/ui/button-arrow.module.css */
+.buttonArrow {
+  color: var(--color);
+  display: inline-block;
+  font-family: var(--font-alt);
+  font-size: 1.5rem;
+  line-height: 1;
+  text-decoration: none;
+}
+.buttonArrow:hover .iconWrap {
+  transform: translateX(10px);
+}
+.iconWrap {
+  display: inline-flex;
+  margin-left: 0.5rem;
+}
+.iconWrap svg {
+  height: 16px;
+  transform: translateX(5px);
+  transition: transform 0.2s;
+  width: 8px;
+}
+@media screen and (min-width: 1024px) {
+  .buttonArrow {
+    font-size: 1.625rem;
+  }
+}
+
+/* src/components/ui/button-drip.module.css */
+.button {
+  --bg-color: var(--color-primary);
+  --text-color: var(--color-primary-alt);
+  --hover-bg-color: var(--color-accent);
+  --hover-text-color: var(--color-accent-alt);
+  --speed: calc(var(--duration-factor) * 1.8s);
+  --drip-speed-factor: 1;
+  --drip-in-start: polygon(0 100%, 0 100%, 100% 100%, 100% 100%);
+  --drip-in-end: polygon(0 0, 0 100%, 100% 100%, 100% 0);
+  --drip-out-start: polygon(0 0, 0 0, 100% 0, 100% 0);
+  --drip-out-end: polygon(0 0, 0 100%, 100% 100%, 100% 0);
+  border-radius: 0.5rem;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-block;
+  font-family: var(--font-alt);
+  font-weight: var(--font-weight-bold);
+  line-height: 1;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transition: border calc(var(--duration-factor) * 0.2s) calc(var(--duration-factor) * 0.25s);
+  width: 100%;
+}
+.button > *:not(.icon) {
+  width: 100%;
+}
+.icon {
+  height: 26px;
+  margin-right: var(--base-space, 8px);
+  padding-top: var(--base-space, 8px);
+  width: 20px;
+}
+.content,
+.hoverContent {
+  align-items: center;
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  display: flex;
+  font-size: 1.5rem;
+  height: 100%;
+  justify-content: center;
+  padding: calc(var(--base-space, 8px) * 1.5) calc(var(--base-space, 8px) * 5.5) calc(var(--base-space, 8px) * 2.5) calc(var(--base-space, 8px) * 5.5);
+  transition: background-color calc(var(--duration-factor) * 0.2s) ease;
+  width: 100%;
+}
+.content span,
+.hoverContent span {
+  position: relative;
+  white-space: nowrap;
+  z-index: 1;
+}
+.content .icon,
+.hoverContent .icon {
+  fill: var(--text-color);
+}
+.hoverContent {
+  animation: calc(var(--speed) * var(--drip-speed-factor)) button-drip_drip-leave 0.2s ease forwards;
+  animation-fill-mode: forwards;
+  background-color: var(--hover-bg-color);
+  border-radius: 0.5rem;
+  box-shadow: inset 0 0 0 2px var(--hover-bg-color);
+  color: var(--hover-text-color);
+  height: 100%;
+  left: 0;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  transition: box-shadow 0.2s;
+  transition-delay: 0.6s;
+  width: 100%;
+  z-index: 2;
+}
+@media (hover: hover) {
+  .button:hover .hoverContent {
+    animation: calc(var(--speed) * var(--drip-speed-factor)) button-drip_drip-enter 0.2s ease forwards;
+    box-shadow: inset 0 0 0 2px var(--hover-text-color);
+    opacity: 1;
+  }
+}
+.accentColors {
+  --bg-color: var(--color-accent);
+  --text-color: var(--color-accent-alt);
+  --hover-bg-color: var(--color-primary);
+  --hover-text-color: var(--color-primary-alt);
+}
+@-webkit-keyframes button-drip_drip-enter {
+  0% {
+    -webkit-clip-path: var(--drip-in-start);
+    clip-path: var(--drip-in-start);
+  }
+  to {
+    -webkit-clip-path: var(--drip-in-end);
+    clip-path: var(--drip-in-end);
+  }
+}
+@keyframes button-drip_drip-enter {
+  0% {
+    -webkit-clip-path: var(--drip-in-start);
+    clip-path: var(--drip-in-start);
+  }
+  to {
+    -webkit-clip-path: var(--drip-in-end);
+    clip-path: var(--drip-in-end);
+  }
+}
+@-webkit-keyframes button-drip_drip-leave {
+  0% {
+    -webkit-clip-path: var(--drip-out-start);
+    clip-path: var(--drip-out-start);
+  }
+  to {
+    -webkit-clip-path: var(--drip-out-end);
+    clip-path: var(--drip-out-end);
+  }
+}
+@keyframes button-drip_drip-leave {
+  0% {
+    -webkit-clip-path: var(--drip-out-start);
+    clip-path: var(--drip-out-start);
+  }
+  to {
+    -webkit-clip-path: var(--drip-out-end);
+    clip-path: var(--drip-out-end);
+  }
+}
+
+/* src/components/ui/event-callout.module.css */
+.callout {
+  background: var(--color-black, #0d0d0d);
+  border: 3px solid var(--color-black, #0d0d0d);
+  border-radius: 8px;
+  color: var(--color-white, #fff);
+  overflow: hidden;
+  position: relative;
+}
+.background {
+  block-size: 100%;
+  filter: saturate(1.18) contrast(1.05);
+  inline-size: 100%;
+  inset: 0;
+  object-fit: cover;
+  opacity: 0.32;
+  position: absolute;
+  transform: scale(1.08) rotate(-1deg);
+}
+.content {
+  display: grid;
+  gap: clamp(18px, 4vw, 30px);
+  grid-template-columns: minmax(0, 1fr);
+  padding: clamp(18px, 4vw, 30px);
+  position: relative;
+  z-index: 1;
+}
+.mediaFrame {
+  aspect-ratio: 382 / 215;
+  background: var(--color-white, #fff);
+  border: 4px solid var(--color-white, #fff);
+  box-shadow: 8px 10px 0 rgb(0 0 0 / 0.35);
+  position: relative;
+  transform: rotate(-1.5deg);
+}
+.media {
+  block-size: 100%;
+  display: block;
+  inline-size: 100%;
+  object-fit: cover;
+}
+.iconBadge {
+  align-items: center;
+  background: var(--color-yellow, #eaff3d);
+  border: 3px solid var(--color-black, #0d0d0d);
+  border-radius: 999px;
+  box-shadow: 4px 5px 0 rgb(0 0 0 / 0.35);
+  display: flex;
+  inline-size: clamp(46px, 12vw, 64px);
+  justify-content: center;
+  padding: 7px;
+  position: absolute;
+  right: -14px;
+  top: -18px;
+  transform: rotate(8deg);
+}
+.iconBadge img {
+  block-size: auto;
+  display: block;
+  inline-size: 100%;
+}
+.body {
+  align-self: center;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-inline-size: 0;
+}
+.eyebrow {
+  color: var(--color-yellow, #eaff3d);
+  font-size: 0.75rem;
+  font-weight: 900;
+  letter-spacing: 0.18em;
+  line-height: 1;
+  margin: 0;
+  text-transform: uppercase;
+}
+.title {
+  font-family: var(--font-heading), sans-serif;
+  font-size: clamp(1.875rem, 7vw, 3.25rem);
+  font-weight: 900;
+  letter-spacing: 0;
+  line-height: 0.9;
+  margin: 0;
+  text-transform: uppercase;
+}
+.description {
+  color: rgb(255 255 255 / 0.82);
+  font-size: 0.95rem;
+  font-weight: 700;
+  line-height: 1.45;
+  margin: 0;
+  max-inline-size: 34rem;
+}
+.action {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-block-start: 8px;
+}
+@media (min-width: 760px) {
+  .content {
+    align-items: center;
+    grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1fr);
+  }
+  .mediaFrame {
+    transform: rotate(-2deg);
+  }
+}
+
+/* src/components/ui/heading-tape.module.css */
+.headingTapeSection {
+  container-type: inline-size;
+  display: flex;
+  justify-content: center;
+  margin-bottom: calc(var(--base-space, 8px) * var(--margin-offset, 2));
+  min-inline-size: 0;
+  position: relative;
+  width: 100%;
+}
+.overlapTop {
+  margin-top: -30px;
+}
+.headingTapeContainer {
+  position: relative;
+  transform: rotate(-3deg);
+  width: fit-content;
+}
+.headingTapeDecorations {
+  height: 100%;
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 0;
+}
+.headingTapeDecoration {
+  display: block;
+  inline-size: var(--heading-tape-decoration-inline-size, 100%);
+  max-inline-size: var(--heading-tape-decoration-max-inline-size, 100%);
+  position: absolute;
+}
+.decorationTopLeft {
+  left: var(--heading-tape-decoration-inline-offset, -19px);
+  top: var(--heading-tape-decoration-block-offset, -15px);
+  transform: rotate(var(--heading-tape-decoration-rotate, 0deg));
+}
+.decorationTopRight {
+  right: var(--heading-tape-decoration-inline-offset, -17px);
+  top: var(--heading-tape-decoration-block-offset, -15px);
+  transform: rotate(var(--heading-tape-decoration-rotate, 0deg));
+}
+.decorationBottomLeft {
+  bottom: var(--heading-tape-decoration-block-offset, -17px);
+  left: var(--heading-tape-decoration-inline-offset, -19px);
+  transform: rotate(var(--heading-tape-decoration-rotate, 0deg));
+}
+.decorationBottomRight {
+  bottom: var(--heading-tape-decoration-block-offset, -17px);
+  right: var(--heading-tape-decoration-inline-offset, -17px);
+  transform: rotate(var(--heading-tape-decoration-rotate, 0deg));
+}
+.headingTapeDecorationImage {
+  block-size: auto;
+  display: block;
+  inline-size: auto;
+  max-inline-size: 100%;
+}
+.headingTapeDecorationImageDesktop {
+  display: none;
+}
+.headingTapeText {
+  background: var(--color-white, #ffffff);
+  border-radius: 10px;
+  color: var(--color-black, #0d0d0d);
+  display: inline-block;
+  font-family: var(--font-heading, inherit);
+  font-size: 1.875rem;
+  font-weight: 700;
+  letter-spacing: 0;
+  line-height: 1;
+  max-inline-size: 100%;
+  overflow-wrap: break-word;
+  padding: calc(var(--base-space, 8px) * 2) 40px;
+  position: relative;
+  text-align: center;
+  text-transform: uppercase;
+  z-index: 1;
+}
+.compact .headingTapeText {
+  border-radius: 8px;
+  font-size: 1.375rem;
+  padding: calc(var(--base-space, 8px) * 1.25) 24px;
+}
+@container (min-width: 640px) {
+  .headingTapeDecorationImageMobile {
+    display: none;
+  }
+  .headingTapeDecorationImageDesktop {
+    display: block;
+  }
+}
+@container (min-width: 640px) {
+  .headingTapeText {
+    padding: calc(var(--base-space, 8px) * 2) 60px;
+  }
+  .compact .headingTapeText {
+    font-size: 2rem;
+    padding: calc(var(--base-space, 8px) * 1.5) 36px;
+  }
+}
+@container (min-width: 1024px) {
+  .headingTapeText {
+    font-size: 3.125rem;
+  }
+  .compact .headingTapeText {
+    font-size: 2.5rem;
+  }
+}
+
+/* src/components/ui/photo-frame.module.css */
+.photoFrame {
+  --border-offset-x: 3px;
+  --border-offset-y: 4px;
+  --tape-rotation: 6deg;
+  --margin-offset: 6;
+  --photo-aspect-ratio: auto;
+  aspect-ratio: var(--photo-aspect-ratio);
+  container-type: inline-size;
+  display: inline-block;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
+  line-height: 0;
+  margin-top: calc(var(--base-space, 8px) * var(--margin-offset));
+  padding: calc(var(--border-offset-y) * 2) calc(var(--border-offset-x) * 2);
+  position: relative;
+  transform: rotate(var(--end-rotate, 0deg));
+}
+.photoFrame::before {
+  background-image: url(/_images/svg/styled-photo-background.svg);
+  background-position: 50% center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  content: "";
+  height: calc(100% + var(--border-offset-y) * 2);
+  left: calc(var(--border-offset-x) * -1);
+  position: absolute;
+  top: calc(var(--border-offset-y) * -1);
+  width: calc(100% + var(--border-offset-x) * 2);
+  pointer-events: none;
+}
+.fillWidth {
+  --photo-aspect-ratio: 16 / 9;
+  display: block;
+  width: 100%;
+}
+.nested {
+  max-width: 350px;
+}
+.nested.photoFrame {
+  --border-offset-x: 2px;
+  --border-offset-y: 3px;
+  --margin-offset: 4;
+}
+.thinBorder.photoFrame,
+.photoFrame.thinBorder {
+  --border-offset-x: 2px;
+  --border-offset-y: 3px;
+}
+.mediumBorder.photoFrame,
+.photoFrame.mediumBorder {
+  --border-offset-x: 2px;
+  --border-offset-y: 4px;
+}
+.photo {
+  mask-image: url(/_images/svg/styled-photo-background.svg);
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: 100% 100%;
+  object-fit: contain;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.noContainer {
+  container-type: unset;
+}
+.tape {
+  position: absolute;
+  z-index: 20;
+  pointer-events: none;
+}
+.tapeMobile {
+  display: block;
+}
+.tapeDesktop {
+  display: none;
+}
+@container (min-width: 400px) {
+  .tapeMobile {
+    display: none;
+  }
+  .tapeDesktop {
+    display: block;
+  }
+}
+.tapeCenter {
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(var(--tape-rotate, 6deg));
+}
+.tapeLeft {
+  top: 0;
+  left: var(--slot-offset, 15%);
+  transform: translateY(-50%) rotate(var(--tape-rotate, 6deg));
+}
+.tapeRight {
+  top: 0;
+  right: var(--slot-offset, 15%);
+  transform: translateY(-50%) rotate(var(--tape-rotate, 6deg));
+}
+.tapeBottomCenter {
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, 50%) rotate(var(--tape-rotate, 6deg));
+}
+.tapeBottomLeft {
+  bottom: 0;
+  left: var(--slot-offset, 15%);
+  transform: translateY(50%) rotate(var(--tape-rotate, 6deg));
+}
+.tapeBottomRight {
+  bottom: 0;
+  right: var(--slot-offset, 15%);
+  transform: translateY(50%) rotate(var(--tape-rotate, 6deg));
+}
+.decoration {
+  pointer-events: none;
+  position: absolute;
+  z-index: 20;
+}
+.decorationMobile {
+  display: block;
+}
+.decorationDesktop {
+  display: none;
+}
+@container (min-width: 400px) {
+  .decorationMobile {
+    display: none;
+  }
+  .decorationDesktop {
+    display: block;
+  }
+}
+.decorationBottomLeft {
+  --slot-offset: 15%;
+  bottom: 0;
+  left: var(--slot-offset);
+  transform: translateY(50%);
+}
+.decorationTopRight {
+  --slot-offset: 15%;
+  top: 0;
+  right: var(--slot-offset);
+  transform: translateY(-50%);
+}
+.decorationBottomRight {
+  --slot-offset: 15%;
+  bottom: 0;
+  right: var(--slot-offset);
+  transform: translateY(50%);
+}
+.decorationCenter {
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+@media screen and (min-width: 640px) {
+  .decorationBottomLeft,
+  .decorationBottomRight {
+    --slot-offset: 15%;
+  }
+  .decorationTopRight {
+    --slot-offset: 15%;
+  }
+}
+@media screen and (min-width: 640px) {
+  .photoFrame {
+    --border-offset-x: 4px;
+    --border-offset-y: 3px;
+  }
+}
+
+/* src/components/ui/section-background.module.css */
+.sectionBackground {
+  background-position: top;
+  min-height: 100px;
+}
+.patternBaseBgPattern {
+  background-image: url(/_images/backgrounds/base-bg-pattern.jpg);
+  background-image: image-set(url(/_images/backgrounds/base-bg-pattern.jpg) 1x, url(/_images/backgrounds/base-bg-pattern-2x.jpg) 2x);
+}
+.patternCamoBlack {
+  background-image: url(/_images/backgrounds/camo-black.png);
+  background-image: image-set(url(/_images/backgrounds/camo-black.png) 1x, url(/_images/backgrounds/camo-black-2x.png) 2x);
+}
+.patternCamoGreen {
+  background-image: url(/_images/backgrounds/camo-green.png);
+  background-image: image-set(url(/_images/backgrounds/camo-green.png) 1x, url(/_images/backgrounds/camo-green-2x.png) 2x);
+}
+.patternCamoPurple {
+  background-image: url(/_images/backgrounds/camo-purple.png);
+  background-image: image-set(url(/_images/backgrounds/camo-purple.png) 1x, url(/_images/backgrounds/camo-purple-2x.png) 2x);
+}
+.patternCamoPurpleRevised {
+  background-image: url(/_images/backgrounds/camo-purple-revised.png);
+  background-image: image-set(url(/_images/backgrounds/camo-purple-revised.png) 1x, url(/_images/backgrounds/camo-purple-revised-2x.png) 2x);
+}
+.patternCamoOrange {
+  background-image: url(/_images/backgrounds/camo-orange.png);
+  background-image: image-set(url(/_images/backgrounds/camo-orange.png) 1x, url(/_images/backgrounds/camo-orange-2x.png) 2x);
+}
+.patternCamoRed {
+  background-image: url(/_images/backgrounds/camo-red.png);
+  background-image: image-set(url(/_images/backgrounds/camo-red.png) 1x, url(/_images/backgrounds/camo-red-2x.png) 2x);
+}
+.patternCamoWhite {
+  background-image: url(/_images/backgrounds/camo-white.png);
+  background-image: image-set(url(/_images/backgrounds/camo-white.png) 1x, url(/_images/backgrounds/camo-white-2x.png) 2x);
+}
+.patternCamoWhiteOutline {
+  background-image: url(/_images/backgrounds/camo-white-outline.png);
+  background-image: image-set(url(/_images/backgrounds/camo-white-outline.png) 1x, url(/_images/backgrounds/camo-white-outline-2x.png) 2x);
+}
+.patternHardwareBackground {
+  background-image: url(/_images/backgrounds/hardware-background.png);
+  background-image: image-set(url(/_images/backgrounds/hardware-background.png) 1x, url(/_images/backgrounds/hardware-background-2x.png) 2x);
+  background-position: 50%;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+@media screen and (min-width: 640px) {
+  .patternHardwareBackground {
+    background-image: url(/_images/backgrounds/hardware-background-medium-up.png);
+    background-image: image-set(url(/_images/backgrounds/hardware-background-medium-up.png) 1x, url(/_images/backgrounds/hardware-background-medium-up-2x.png) 2x);
+  }
+}
+.patternOctoBlack {
+  background-image: url(/_images/backgrounds/octo-black.png);
+  background-image: image-set(url(/_images/backgrounds/octo-black.png) 1x, url(/_images/backgrounds/octo-black-2x.png) 2x);
+}
+.patternOctoRed {
+  background-image: url(/_images/backgrounds/octo-red.png);
+  background-image: image-set(url(/_images/backgrounds/octo-red.png) 1x, url(/_images/backgrounds/octo-red-2x.png) 2x);
+}
+.patternOctoarrowGreen {
+  background-image: url(/_images/backgrounds/octoarrow-green.png);
+  background-image: image-set(url(/_images/backgrounds/octoarrow-green.png) 1x, url(/_images/backgrounds/octoarrow-green-2x.png) 2x);
+}
+.patternOctoarrowOrange {
+  background-image: url(/_images/backgrounds/octoarrow-orange.png);
+  background-image: image-set(url(/_images/backgrounds/octoarrow-orange.png) 1x, url(/_images/backgrounds/octoarrow-orange-2x.png) 2x);
+}
+.patternSquidBlack {
+  background-image: url(/_images/backgrounds/squid-black.png);
+  background-image: image-set(url(/_images/backgrounds/squid-black.png) 1x, url(/_images/backgrounds/squid-black-2x.png) 2x);
+}
+.patternCirclesGreen {
+  background-image: url(/_images/backgrounds/circles-green.png);
+  background-image: image-set(url(/_images/backgrounds/circles-green.png) 1x, url(/_images/backgrounds/circles-green-2x.png) 2x);
+}
+.patternChipWhite {
+  background-image: url(/_images/backgrounds/chip-white.png);
+  background-image: image-set(url(/_images/backgrounds/chip-white.png) 1x, url(/_images/backgrounds/chip-white-2x.png) 2x);
+}
+.patternMonstersBlack {
+  background-image: url(/_images/backgrounds/monsters-black.png);
+  background-image: image-set(url(/_images/backgrounds/monsters-black.png) 1x, url(/_images/backgrounds/monsters-black-2x.png) 2x);
+  background-size: 50%;
+}
+.patternGraffiti {
+  background-image: url(/_images/backgrounds/graffiti.jpg);
+  background-image: image-set(url(/_images/backgrounds/graffiti.jpg) 1x, url(/_images/backgrounds/graffiti-2x.jpg) 2x);
+  background-position: 50%;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+@media screen and (min-width: 640px) {
+  .patternGraffiti {
+    background-image: url(/_images/backgrounds/graffiti-medium-up.jpg);
+    background-image: image-set(url(/_images/backgrounds/graffiti-medium-up.jpg) 1x, url(/_images/backgrounds/graffiti-medium-up-2x.jpg) 2x);
+  }
+}
+.patternTapesBlack {
+  background-image: url(/_images/backgrounds/tapes-black.jpg);
+  background-image: image-set(url(/_images/backgrounds/tapes-black.webp) type("image/webp") 1x, url(/_images/backgrounds/tapes-black.jpg) 1x, url(/_images/backgrounds/tapes-black-2x.webp) type("image/webp") 2x, url(/_images/backgrounds/tapes-black-2x.jpg) 2x);
+}
+.patternTapesGreen {
+  background-image: url(/_images/backgrounds/tapes-green.jpg);
+  background-image: image-set(url(/_images/backgrounds/tapes-green.webp) type("image/webp") 1x, url(/_images/backgrounds/tapes-green.jpg) 1x, url(/_images/backgrounds/tapes-green-2x.webp) type("image/webp") 2x, url(/_images/backgrounds/tapes-green-2x.jpg) 2x);
+}
+.patternTapesPattern {
+  background-image: url(/_images/backgrounds/tapes-pattern.jpg);
+  background-image: image-set(url(/_images/backgrounds/tapes-pattern.jpg) 1x, url(/_images/backgrounds/tapes-pattern-2x.jpg) 2x);
+}
+.patternTapesPurple {
+  background-image: url(/_images/backgrounds/tapes-purple.jpg);
+  background-image: image-set(url(/_images/backgrounds/tapes-purple.webp) type("image/webp") 1x, url(/_images/backgrounds/tapes-purple.jpg) 1x, url(/_images/backgrounds/tapes-purple-2x.webp) type("image/webp") 2x, url(/_images/backgrounds/tapes-purple-2x.jpg) 2x);
+}
+
+/* src/components/ui/staple-card.module.css */
+.stapleCard {
+  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.14));
+  height: 100%;
+}
+.card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  position: relative;
+  transition: transform calc(var(--duration-factor) * 0.3s) var(--ease-in-out);
+}
+.card.hoverTilt:hover {
+  transform: rotate(2deg);
+}
+.cardLayout {
+  background-color: var(--color-white, #fff);
+  color: var(--color-black, #0d0d0d);
+  display: grid;
+  grid-template-rows: auto 1fr;
+  height: 100%;
+  padding: calc(var(--base-space, 8px) * 0) calc(var(--base-space, 8px) * 4) calc(var(--base-space, 8px) * 3) calc(var(--base-space, 8px) * 4);
+  position: relative;
+}
+.image {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  transform: rotate(-1deg);
+  width: 100%;
+}
+.image img {
+  object-fit: contain;
+}
+.stapleLeft {
+  bottom: 0;
+  left: 20px;
+  position: absolute;
+  width: 20%;
+}
+.stapleRight {
+  bottom: 0;
+  position: absolute;
+  right: 20px;
+  width: 10%;
+}
+.tape {
+  display: block;
+}
+.tapeImage {
+  display: block;
+  height: auto;
+  width: 100%;
+}
+.imgDesktop {
+  display: none;
+}
+@container (min-width: 400px) {
+  .imgMobile {
+    display: none;
+  }
+  .imgDesktop {
+    display: block;
+  }
+}
+.cardBottom {
+  margin-top: -2px;
+  width: 100%;
+}
+.cardTop {
+  margin-bottom: -2px;
+  width: 100%;
+}
+.info {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: flex-start;
+  padding: calc(var(--base-space, 8px) * 2) 0;
+}
+.surfaceDark .cardLayout {
+  background-color: var(--color-black-alt, #0e0e0e);
+  color: var(--color-white, #fff);
+}
+.title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  line-height: 2;
+}
+.subtitle {
+  margin-top: calc(var(--base-space, 8px) * 1);
+  font-size: 0.875rem;
+  opacity: 0.75;
+}
+
+/* src/components/ui/tape-divider.module.css */
+.tapeDivider {
+  position: relative;
+  width: 100%;
+  z-index: 2;
+  pointer-events: none;
+  line-height: 0;
+}
+.tapePrimary {
+  background-image: url(/_images/tape-assets/tape-2.png);
+  background-image: image-set(url(/_images/tape-assets/tape-2.png) 1x, url(/_images/tape-assets/tape-2-2x.png) 2x);
+  background-position: center;
+  background-repeat: repeat-x;
+  background-size: auto 100%;
+  height: 36px;
+  width: 100%;
+}
+.tapeSecondary {
+  background-image: url(/_images/tape-assets/tape-3.png);
+  background-image: image-set(url(/_images/tape-assets/tape-3.png) 1x, url(/_images/tape-assets/tape-3-2x.png) 2x);
+  background-position: center;
+  background-repeat: repeat-x;
+  background-size: auto 100%;
+  height: 38px;
+  width: 100%;
+}
+.primaryOnly .tapePrimary {
+  height: 36px;
+}
+.double .tapePrimary {
+  position: relative;
+  z-index: 1;
+}
+.double .tapeSecondary {
+  margin-top: -18px;
+  position: relative;
+  z-index: 0;
+}
+.rotateLeft {
+  transform: rotate(-2deg);
+}
+.rotateRight {
+  transform: rotate(2deg);
+}
+.rotateStrong {
+  transform: rotate(-4deg);
+}
+.overlap {
+  margin-top: -36px;
+  padding-top: 36px;
+}
+@media screen and (min-width: 640px) {
+  .tapePrimary {
+    height: 48px;
+  }
+  .tapeSecondary {
+    height: 50px;
+  }
+  .double .tapeSecondary {
+    margin-top: -24px;
+  }
+  .overlap {
+    margin-top: -48px;
+    padding-top: 48px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .tapePrimary {
+    height: 60px;
+  }
+  .tapeSecondary {
+    height: 62px;
+  }
+  .double .tapeSecondary {
+    margin-top: -30px;
+  }
+  .overlap {
+    margin-top: -60px;
+    padding-top: 60px;
+  }
+}
+
+/* src/components/ui/tape-title.module.css */
+.container {
+  --tape-title-left-bleed: 61px;
+  --tape-title-right-bleed: 59px;
+  --tape-color: var(--color-true-black, #000);
+  background: var(--color-black, #0d0d0d);
+  color: var(--color-white, #fff);
+  display: inline-block;
+  margin-inline: var(--tape-title-left-bleed) var(--tape-title-right-bleed);
+  position: relative;
+  transform: rotate(-4deg);
+  z-index: 2;
+}
+.container::before {
+  background-color: var(--tape-color);
+  mask-image: url(/_images/svg/left-tape.svg);
+  mask-position: 100% center;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  content: " ";
+  height: 100%;
+  left: -61px;
+  position: absolute;
+  width: 62px;
+}
+.container::after {
+  background-color: var(--tape-color);
+  mask-image: url(/_images/svg/right-tape.svg);
+  mask-position: 0 center;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  content: " ";
+  height: 100%;
+  position: absolute;
+  right: -58px;
+  top: 0;
+  width: 59px;
+}
+.red {
+  --tape-color: var(--color-red, #ff505e);
+  background: var(--color-red, #ff505e);
+  color: var(--color-black, #0d0d0d);
+}
+.yellow {
+  --tape-color: var(--color-yellow, #eaff3d);
+  background: var(--color-yellow, #eaff3d);
+  color: var(--color-black, #0d0d0d);
+}
+.title {
+  font-family: var(--font-alt);
+  font-weight: 600;
+  font-size: 1.5rem;
+  line-height: 1;
+  padding: 8px 16px 16px;
+  text-transform: none;
+  white-space: nowrap;
+}
+@media screen and (min-width: 1024px) {
+  .title {
+    font-size: 2.3125rem;
+    padding: 16px 40px 24px;
+  }
+}
+
+/* src/components/ui/wave-button.module.css */
+.morph {
+  animation: morph calc(var(--duration-factor, 1) * 3s) linear infinite;
+  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
+  transform: translateZ(0);
+}
+@keyframes morph {
+  0%, 100% {
+    border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%;
+  }
+  34% {
+    border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
+  }
+  67% {
+    border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
+  }
+}
+.iconWrap {
+  background-color: var(--color-yellow, #eaff3d);
+  display: grid;
+  flex-shrink: 0;
+  height: 48px;
+  place-content: center;
+  width: 48px;
+}
+.icon {
+  --line-w: 19px;
+  --line-h: 4px;
+  --line-y: calc(var(--line-h) * -1.5);
+  background-color: var(--color-blue, #603bff);
+  display: block;
+  height: var(--line-h);
+  position: relative;
+  width: var(--line-w);
+  transition: background-color 0.1s linear;
+}
+.icon::before,
+.icon::after {
+  --line-rotation: 0deg;
+  background-color: var(--color-blue, #603bff);
+  content: "";
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  transform: translateY(var(--line-y)) rotate(var(--line-rotation));
+  transition: transform 0.25s cubic-bezier(0.21, 0.12, 0.35, 1.43), background-color 0.1s linear;
+  width: 100%;
+}
+.icon::after {
+  --line-y: calc(var(--line-h) * 1.5);
+}
+.pressed .icon {
+  background-color: transparent;
+}
+.pressed .icon::before {
+  --line-y: 0px;
+  --line-rotation: 45deg;
+}
+.pressed .icon::after {
+  --line-y: 0px;
+  --line-rotation: -45deg;
+}
+.yellow {
+  background-color: var(--color-yellow, #eaff3d);
+}
+.white {
+  background-color: var(--color-white);
+}
+.ghost {
+  background-color: transparent;
+}
+.md {
+  height: 48px;
+  width: 48px;
+}
+.lg {
+  height: 64px;
+  width: 64px;
+}
+
+/* src/components/ui/in-view.module.css */
+.anim {
+  opacity: var(--start-alpha, 0);
+  transform: translate(var(--start-x, 0), var(--start-y, 0)) scale(var(--start-scale, 1)) rotate(var(--start-rotate, 0deg));
+  transition-delay: 0s;
+  transition-duration: calc(var(--duration-hide, 0.4s) * var(--duration-factor, 1));
+  transition-property: transform, opacity;
+  transition-timing-function: var(--easing-fn-hide, ease);
+}
+.inView .anim {
+  opacity: var(--end-alpha, 1);
+  transform: translate(var(--end-x, 0), var(--end-y, 0)) scale(var(--end-scale, 1)) rotate(var(--end-rotate, 0deg));
+  transition-delay: var(--in-view-delay, 0s);
+  transition-duration: calc(var(--duration-show, 0.4s) * var(--duration-factor, 1));
+  transition-timing-function: var(--easing-fn-show, ease);
+}
+.left {
+  --start-x: 50%;
+  --start-y: 0;
+  --start-scale: 1;
+  --easing-fn-show: var(--ease-out, cubic-bezier(0.35, 0.91, 0.3, 0.99));
+}
+.right {
+  --start-x: -50%;
+  --start-y: 0;
+  --start-scale: 1;
+  --easing-fn-show: var(--ease-out, cubic-bezier(0.35, 0.91, 0.3, 0.99));
+}
+.up {
+  --start-x: 0;
+  --start-y: 50%;
+  --start-scale: 1;
+  --easing-fn-show: var(--ease-out, cubic-bezier(0.35, 0.91, 0.3, 0.99));
+}
+.upMin {
+  --start-x: 0;
+  --start-y: 30px;
+  --start-scale: 1;
+  --easing-fn-show: var(--ease-out, cubic-bezier(0.35, 0.91, 0.3, 0.99));
+}
+.down {
+  --start-x: 0;
+  --start-y: -50%;
+  --start-scale: 1;
+  --easing-fn-show: var(--ease-out, cubic-bezier(0.35, 0.91, 0.3, 0.99));
+}
+.pop {
+  --start-x: 0;
+  --start-y: 0;
+  --start-scale: 0.5;
+  --easing-fn-show: var(--ease-back-out, cubic-bezier(0.21, 0.12, 0.35, 1.43));
+  --easing-fn-hide: var(--ease-back-in, cubic-bezier(0.38, -0.37, 0.83, 0.23));
+}
+.drop {
+  --start-scale: 1.1;
+  --easing-fn-show: var(--ease-out, cubic-bezier(0.35, 0.91, 0.3, 0.99));
+}
+.dropSlow {
+  --start-scale: 1.1;
+  --duration-show: 0.6s;
+  --easing-fn-show: var(--ease-out, cubic-bezier(0.35, 0.91, 0.3, 0.99));
+}
+.delay1 {
+  --in-view-delay: calc(0.1 * 1s * var(--duration-factor, 1));
+}
+.delay2 {
+  --in-view-delay: calc(0.2 * 1s * var(--duration-factor, 1));
+}
+.delay3 {
+  --in-view-delay: calc(0.3 * 1s * var(--duration-factor, 1));
+}
+.delay4 {
+  --in-view-delay: calc(0.4 * 1s * var(--duration-factor, 1));
+}
+.delay5 {
+  --in-view-delay: calc(0.5 * 1s * var(--duration-factor, 1));
+}
+.delay6 {
+  --in-view-delay: calc(0.6 * 1s * var(--duration-factor, 1));
+}
+.delay7 {
+  --in-view-delay: calc(0.7 * 1s * var(--duration-factor, 1));
+}
+.delay8 {
+  --in-view-delay: calc(0.8 * 1s * var(--duration-factor, 1));
+}
+.delay9 {
+  --in-view-delay: calc(0.9 * 1s * var(--duration-factor, 1));
+}
+.delay10 {
+  --in-view-delay: calc(1 * 1s * var(--duration-factor, 1));
+}
+.delay11 {
+  --in-view-delay: calc(1.1 * 1s * var(--duration-factor, 1));
+}
+.delay12 {
+  --in-view-delay: calc(1.2 * 1s * var(--duration-factor, 1));
+}
+.delay13 {
+  --in-view-delay: calc(1.3 * 1s * var(--duration-factor, 1));
+}
+.delay14 {
+  --in-view-delay: calc(1.4 * 1s * var(--duration-factor, 1));
+}
+.delay15 {
+  --in-view-delay: calc(1.5 * 1s * var(--duration-factor, 1));
+}
+.delay16 {
+  --in-view-delay: calc(1.6 * 1s * var(--duration-factor, 1));
+}
+.delay17 {
+  --in-view-delay: calc(1.7 * 1s * var(--duration-factor, 1));
+}
+.delay18 {
+  --in-view-delay: calc(1.8 * 1s * var(--duration-factor, 1));
+}
+.delay19 {
+  --in-view-delay: calc(1.9 * 1s * var(--duration-factor, 1));
+}
+.delay20 {
+  --in-view-delay: calc(2 * 1s * var(--duration-factor, 1));
+}
+.stagger {
+  --in-view-stagger-delay: var(--in-view-delay, 0s);
+}
+.stagger > * {
+  opacity: var(--start-alpha, 0);
+  transform: translate(var(--start-x, 0), var(--start-y, 0)) scale(var(--start-scale, 1)) rotate(var(--start-rotate, 0deg));
+  transition-delay: 0s;
+  transition-duration: calc(var(--duration-hide, 0.4s) * var(--duration-factor, 1));
+  transition-property: transform, opacity;
+  transition-timing-function: var(--easing-fn-hide, ease);
+}
+.inView.stagger > * {
+  opacity: var(--end-alpha, 1);
+  transform: translate(var(--end-x, 0), var(--end-y, 0)) scale(var(--end-scale, 1)) rotate(var(--end-rotate, 0deg));
+  transition-delay: var(--in-view-delay, 0s);
+  transition-duration: calc(var(--duration-show, 0.4s) * var(--duration-factor, 1));
+  transition-timing-function: var(--easing-fn-show, ease);
+}
+.inView .stagger > * {
+  opacity: var(--end-alpha, 1);
+  transform: translate(var(--end-x, 0), var(--end-y, 0)) scale(var(--end-scale, 1)) rotate(var(--end-rotate, 0deg));
+  transition-delay: var(--in-view-delay, 0s);
+  transition-duration: calc(var(--duration-show, 0.4s) * var(--duration-factor, 1));
+  transition-timing-function: var(--easing-fn-show, ease);
+}
+.inView.stagger > :first-child {
+  --in-view-delay: calc( (0 * var(--in-view-stagger-amount, 0.2s) + var(--in-view-stagger-delay, 0s)) * var(--duration-factor, 1) );
+}
+.inView.stagger > :nth-child(2) {
+  --in-view-delay: calc( (1 * var(--in-view-stagger-amount, 0.2s) + var(--in-view-stagger-delay, 0s)) * var(--duration-factor, 1) );
+}
+.inView.stagger > :nth-child(3) {
+  --in-view-delay: calc( (2 * var(--in-view-stagger-amount, 0.2s) + var(--in-view-stagger-delay, 0s)) * var(--duration-factor, 1) );
+}
+.inView.stagger > :nth-child(4) {
+  --in-view-delay: calc( (3 * var(--in-view-stagger-amount, 0.2s) + var(--in-view-stagger-delay, 0s)) * var(--duration-factor, 1) );
+}
+.inView.stagger > :nth-child(5) {
+  --in-view-delay: calc( (4 * var(--in-view-stagger-amount, 0.2s) + var(--in-view-stagger-delay, 0s)) * var(--duration-factor, 1) );
+}
+.inView.stagger > :nth-child(6) {
+  --in-view-delay: calc( (5 * var(--in-view-stagger-amount, 0.2s) + var(--in-view-stagger-delay, 0s)) * var(--duration-factor, 1) );
+}
+.inView.stagger > :nth-child(7) {
+  --in-view-delay: calc( (6 * var(--in-view-stagger-amount, 0.2s) + var(--in-view-stagger-delay, 0s)) * var(--duration-factor, 1) );
+}
+.inView.stagger > :nth-child(8) {
+  --in-view-delay: calc( (7 * var(--in-view-stagger-amount, 0.2s) + var(--in-view-stagger-delay, 0s)) * var(--duration-factor, 1) );
+}
+.inView.stagger > :nth-child(9) {
+  --in-view-delay: calc( (8 * var(--in-view-stagger-amount, 0.2s) + var(--in-view-stagger-delay, 0s)) * var(--duration-factor, 1) );
+}
+.inView.stagger > :nth-child(10) {
+  --in-view-delay: calc( (9 * var(--in-view-stagger-amount, 0.2s) + var(--in-view-stagger-delay, 0s)) * var(--duration-factor, 1) );
+}
+.inView .stagger > :first-child {
+  --in-view-delay: calc( (0 * var(--in-view-stagger-amount, 0.2s) + var(--in-view-stagger-delay, 0s)) * var(--duration-factor, 1) );
+}
+.inView .stagger > :nth-child(2) {
+  --in-view-delay: calc( (1 * var(--in-view-stagger-amount, 0.2s) + var(--in-view-stagger-delay, 0s)) * var(--duration-factor, 1) );
+}
+.inView .stagger > :nth-child(3) {
+  --in-view-delay: calc( (2 * var(--in-view-stagger-amount, 0.2s) + var(--in-view-stagger-delay, 0s)) * var(--duration-factor, 1) );
+}
+.inView .stagger > :nth-child(4) {
+  --in-view-delay: calc( (3 * var(--in-view-stagger-amount, 0.2s) + var(--in-view-stagger-delay, 0s)) * var(--duration-factor, 1) );
+}
+.inView .stagger > :nth-child(5) {
+  --in-view-delay: calc( (4 * var(--in-view-stagger-amount, 0.2s) + var(--in-view-stagger-delay, 0s)) * var(--duration-factor, 1) );
+}
+.inView .stagger > :nth-child(6) {
+  --in-view-delay: calc( (5 * var(--in-view-stagger-amount, 0.2s) + var(--in-view-stagger-delay, 0s)) * var(--duration-factor, 1) );
+}
+.inView .stagger > :nth-child(7) {
+  --in-view-delay: calc( (6 * var(--in-view-stagger-amount, 0.2s) + var(--in-view-stagger-delay, 0s)) * var(--duration-factor, 1) );
+}
+.inView .stagger > :nth-child(8) {
+  --in-view-delay: calc( (7 * var(--in-view-stagger-amount, 0.2s) + var(--in-view-stagger-delay, 0s)) * var(--duration-factor, 1) );
+}
+.inView .stagger > :nth-child(9) {
+  --in-view-delay: calc( (8 * var(--in-view-stagger-amount, 0.2s) + var(--in-view-stagger-delay, 0s)) * var(--duration-factor, 1) );
+}
+.inView .stagger > :nth-child(10) {
+  --in-view-delay: calc( (9 * var(--in-view-stagger-amount, 0.2s) + var(--in-view-stagger-delay, 0s)) * var(--duration-factor, 1) );
+}
+.staggerUpMin {
+  --start-x: 0;
+  --start-y: 30px;
+  --start-scale: 1;
+}
+.staggerPop {
+  --start-x: 0;
+  --start-y: 0;
+  --start-scale: 0.5;
+  --easing-fn-show: var(--ease-back-out, cubic-bezier(0.21, 0.12, 0.35, 1.43));
+  --easing-fn-hide: var(--ease-back-in, cubic-bezier(0.38, -0.37, 0.83, 0.23));
+}
+@media (prefers-reduced-motion: reduce) {
+  .anim,
+  .stagger > * {
+    opacity: 1;
+  }
+}
+:global(.is-reduced-motion) .anim,
+:global(.is-reduced-motion) .stagger > * {
+  opacity: 1;
+}
+
+/* src/components/ui/banner-divider.module.css */
+.bannerDividerGroup {
+  --banner-divider-height: 47px;
+  --banner-divider-stack-offset: var(--banner-divider-max-offset, 0px);
+  --banner-divider-viewport-height: calc( var(--banner-divider-height) + var(--banner-divider-stack-offset) );
+  block-size: 0;
+  isolation: isolate;
+  pointer-events: none;
+  position: relative;
+  z-index: 2;
+}
+.bannerDividerGroupSpacer {
+  block-size: var(--banner-divider-height);
+}
+.bannerDividerViewport {
+  block-size: var(--banner-divider-viewport-height);
+  inset-inline: 0;
+  overflow-x: clip;
+  overflow-y: visible;
+  pointer-events: none;
+  position: absolute;
+  top: var(--banner-divider-anchor-y, calc(var(--banner-divider-height) * -0.5));
+  z-index: 0;
+}
+@media screen and (min-width: 640px) {
+  .bannerDividerGroup {
+    --banner-divider-height: 65px;
+    --banner-divider-stack-offset: var( --banner-divider-max-offset-medium, var(--banner-divider-max-offset, 0px) );
+  }
+}
+@media screen and (min-width: 1024px) {
+  .bannerDividerGroup {
+    --banner-divider-height: 90px;
+  }
+}
+@media screen and (min-width: 1440px) {
+  .bannerDividerGroup {
+    --banner-divider-height: 110px;
+  }
+}
+.bannerDividerTape {
+  background-position: 50%;
+  background-repeat: repeat-x;
+  background-size: auto 100%;
+  height: 47px;
+  left: 50%;
+  position: absolute;
+  width: 110vw;
+  z-index: 0;
+}
+@media screen and (min-width: 640px) {
+  .bannerDividerTape {
+    height: 65px;
+    top: var(--banner-offset-medium, 0);
+  }
+}
+@media screen and (min-width: 1024px) {
+  .bannerDividerTape {
+    height: 90px;
+  }
+}
+@media screen and (min-width: 1440px) {
+  .bannerDividerTape {
+    height: 110px;
+  }
+}
+.bannerDivider {
+  background-position: 50%;
+  background-repeat: repeat-x;
+  background-size: auto 100%;
+  height: 47px;
+  left: -5vw;
+  position: absolute;
+  width: 110vw;
+  z-index: 2;
+}
+@media screen and (min-width: 640px) {
+  .bannerDivider {
+    height: 65px;
+    top: var(--banner-offset-medium, 0);
+  }
+}
+@media screen and (min-width: 1024px) {
+  .bannerDivider {
+    height: 90px;
+  }
+}
+@media screen and (min-width: 1440px) {
+  .bannerDivider {
+    height: 110px;
+  }
+}
+.rotateUp {
+  transform: rotate(1deg);
+  transform-origin: 90% 50%;
+}
+.rotateDown {
+  transform: rotate(-1deg);
+  transform-origin: 90% 50%;
+}
+.banner-divider--design1 {
+  background-image: url(/_images/banners/banner-design1.png);
+  background-image: image-set(url(/_images/banners/banner-design1.png) 1x, url(/_images/banners/banner-design1-2x.png) 2x);
+}
+@media screen and (min-width: 640px) {
+  .banner-divider--design1 {
+    background-image: url(/_images/banners/banner-design1-medium-up.png);
+    background-image: image-set(url(/_images/banners/banner-design1-medium-up.png) 1x, url(/_images/banners/banner-design1-medium-up-2x.png) 2x);
+  }
+}
+.banner-divider--design2 {
+  background-image: url(/_images/banners/banner-design2.png);
+  background-image: image-set(url(/_images/banners/banner-design2.png) 1x, url(/_images/banners/banner-design2-2x.png) 2x);
+}
+@media screen and (min-width: 640px) {
+  .banner-divider--design2 {
+    background-image: url(/_images/banners/banner-design2-medium-up.png);
+    background-image: image-set(url(/_images/banners/banner-design2-medium-up.png) 1x, url(/_images/banners/banner-design2-medium-up-2x.png) 2x);
+  }
+}
+.banner-divider--design3 {
+  background-image: url(/_images/banners/banner-design3.png);
+  background-image: image-set(url(/_images/banners/banner-design3.png) 1x, url(/_images/banners/banner-design3-2x.png) 2x);
+}
+@media screen and (min-width: 640px) {
+  .banner-divider--design3 {
+    background-image: url(/_images/banners/banner-design3-medium-up.png);
+    background-image: image-set(url(/_images/banners/banner-design3-medium-up.png) 1x, url(/_images/banners/banner-design3-medium-up-2x.png) 2x);
+  }
+}
+.banner-divider--yellow {
+  background-image: url(/_images/banners/banner-yellow.png);
+  background-image: image-set(url(/_images/banners/banner-yellow.png) 1x, url(/_images/banners/banner-yellow-2x.png) 2x);
+}
+@media screen and (min-width: 640px) {
+  .banner-divider--yellow {
+    background-image: url(/_images/banners/banner-yellow-medium-up.png);
+    background-image: image-set(url(/_images/banners/banner-yellow-medium-up.png) 1x, url(/_images/banners/banner-yellow-medium-up-2x.png) 2x);
+  }
+}
+.banner-divider--blue {
+  background-image: url(/_images/banners/banner-blue.png);
+  background-image: image-set(url(/_images/banners/banner-blue.png) 1x, url(/_images/banners/banner-blue-2x.png) 2x);
+}
+@media screen and (min-width: 640px) {
+  .banner-divider--blue {
+    background-image: url(/_images/banners/banner-blue-medium-up.png);
+    background-image: image-set(url(/_images/banners/banner-blue-medium-up.png) 1x, url(/_images/banners/banner-blue-medium-up-2x.png) 2x);
+  }
+}
+.banner-divider--green {
+  background-image: url(/_images/banners/banner-green.png);
+  background-image: image-set(url(/_images/banners/banner-green.png) 1x, url(/_images/banners/banner-green-2x.png) 2x);
+}
+@media screen and (min-width: 640px) {
+  .banner-divider--green {
+    background-image: url(/_images/banners/banner-green-medium-up.png);
+    background-image: image-set(url(/_images/banners/banner-green-medium-up.png) 1x, url(/_images/banners/banner-green-medium-up-2x.png) 2x);
+  }
+}
+.banner-divider--purple {
+  background-image: url(/_images/banners/banner-purple.png);
+  background-image: image-set(url(/_images/banners/banner-purple.png) 1x, url(/_images/banners/banner-purple-2x.png) 2x);
+}
+@media screen and (min-width: 640px) {
+  .banner-divider--purple {
+    background-image: url(/_images/banners/banner-purple-medium-up.png);
+    background-image: image-set(url(/_images/banners/banner-purple-medium-up.png) 1x, url(/_images/banners/banner-purple-medium-up-2x.png) 2x);
+  }
+}
+.banner-divider--orange {
+  background-image: url(/_images/banners/banner-orange.png);
+  background-image: image-set(url(/_images/banners/banner-orange.png) 1x, url(/_images/banners/banner-orange-2x.png) 2x);
+}
+@media screen and (min-width: 640px) {
+  .banner-divider--orange {
+    background-image: url(/_images/banners/banner-orange-medium-up.png);
+    background-image: image-set(url(/_images/banners/banner-orange-medium-up.png) 1x, url(/_images/banners/banner-orange-medium-up-2x.png) 2x);
+  }
+}
+.banner-divider--red {
+  background-image: url(/_images/banners/banner-red.png);
+  background-image: image-set(url(/_images/banners/banner-red.png) 1x, url(/_images/banners/banner-red-2x.png) 2x);
+}
+@media screen and (min-width: 640px) {
+  .banner-divider--red {
+    background-image: url(/_images/banners/banner-red-medium-up.png);
+    background-image: image-set(url(/_images/banners/banner-red-medium-up.png) 1x, url(/_images/banners/banner-red-medium-up-2x.png) 2x);
+  }
+}
+
+/* src/components/ui/button.module.css */
+.dripRoot[data-drip-state=entering] .dripHoverContent,
+.dripRoot[data-drip-state=entered] .dripHoverContent,
+.dripRoot[data-drip-state=leaving] .dripHoverContent {
+  opacity: 1;
+}
+.dripHoverContent {
+  animation: splat-drip-leave calc(1.8s * var(--drip-speed-factor)) ease forwards;
+  animation-fill-mode: forwards;
+  background-color: var(--hover-bg-color);
+  clip-path: var(--drip-out-start);
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+.dripFill {
+  display: none;
+}
+.dripFrame {
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 2px var(--hover-text-color);
+  inset: 0;
+  position: absolute;
+}
+.dripRoot[data-drip-state=entering] .dripHoverContent {
+  animation: splat-drip-enter calc(1.8s * var(--drip-speed-factor)) ease forwards;
+}
+.dripRoot[data-drip-state=entered] .dripHoverContent {
+  animation: none;
+  clip-path: var(--drip-in-end);
+}
+.dripRoot[data-drip-state=leaving] .dripHoverContent {
+  animation: splat-drip-leave calc(1.8s * var(--drip-speed-factor)) ease forwards;
+}
+@keyframes splat-drip-enter {
+  0% {
+    clip-path: var(--drip-in-start);
+  }
+  100% {
+    clip-path: var(--drip-in-end);
+  }
+}
+@keyframes splat-drip-leave {
+  0% {
+    clip-path: var(--drip-out-start);
+  }
+  100% {
+    clip-path: var(--drip-out-end);
+  }
+}
+
+/* src/components/ui/carousel-pagination.module.css */
+.pagination {
+  --gap: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  list-style: none;
+  margin: 0 auto calc(var(--gap) * -1);
+  padding: 0;
+  width: 100%;
+  z-index: 10;
+}
+.item {
+  display: inline-block;
+}
+.item:not(:last-child) {
+  margin-right: var(--gap);
+}
+.item button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: block;
+  min-height: 44px;
+  min-width: 44px;
+  padding: 7px;
+}
+.item:focus-visible .paginationIcon,
+.item:hover .paginationIcon {
+  transform: translateY(-5px);
+}
+.iconContainer {
+  display: block;
+  position: relative;
+}
+.paginationIcon {
+  display: block;
+  height: 28px;
+  width: 30px;
+  background: var(--chaos-black, #0d0d0d);
+  mask-image: url(/_images/svg/icon-pagination.svg);
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  -webkit-mask-image: url(/_images/svg/icon-pagination.svg);
+  -webkit-mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  opacity: 0.3;
+  transition: transform 0.2s ease;
+}
+.paginationActive {
+  background: var(--color-primary, #6af7ce);
+  opacity: 1;
+}
+.imagePaginationButton {
+  --scale: 0;
+  position: relative;
+}
+.imagePaginationButton::before {
+  background-image: url(/_images/svg/pagination-splat.svg);
+  background-repeat: no-repeat;
+  content: "";
+  height: 78px;
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  transform: translate(-35%, -35%) rotate(var(--rotate, 0deg)) scale(var(--scale));
+  transition: transform calc(var(--duration-factor, 1) * 0.1s) var(--ease-in, ease-in);
+  width: 74px;
+  z-index: 1;
+}
+.imagePaginationButton:not(.imagePaginationActive):focus-visible .imagePaginationImage,
+.imagePaginationButton:not(.imagePaginationActive):hover .imagePaginationImage {
+  background-color: var(--color-green);
+  border-color: var(--color-green);
+}
+.imagePaginationActive {
+  --scale: 1;
+}
+.imagePaginationActive .imagePaginationImage {
+  border-color: var(--color-accent);
+}
+.imagePaginationImage {
+  --size: 56px;
+  background-clip: padding-box;
+  background-color: var(--color-green);
+  border: 4px solid transparent;
+  border-radius: 50%;
+  display: flex;
+  height: var(--size);
+  overflow: hidden;
+  position: relative;
+  width: var(--size);
+  z-index: 2;
+}
+@media screen and (min-width: 640px) {
+  .imagePaginationImage {
+    --size: 72px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .imagePaginationImage {
+    --size: 90px;
+  }
+}
+.imagePaginationImage img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 1;
+  transition: opacity 0.2s ease;
+}
+.imagePaginationActive .imagePaginationImage img {
+  opacity: 1;
+}
+
+/* src/components/ui/icon-button.module.css */
+.shell {
+  --size: 60px;
+  --icon-size: calc(var(--size) * 0.5);
+  --scale: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--size);
+  border: none;
+  outline: none;
+  cursor: pointer;
+  flex-shrink: 0;
+  overflow: hidden;
+  width: var(--size);
+  height: var(--size);
+  background-color: var(--color-primary, #6af7ce);
+  color: var(--color-primary-alt, #0d0d0d);
+  -webkit-tap-highlight-color: transparent;
+  text-decoration: none;
+  line-height: 1;
+}
+.shell:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+.shell:disabled,
+.shell[aria-disabled=true] {
+  visibility: hidden;
+  pointer-events: none;
+}
+.sm {
+  --size: 40px;
+}
+.md {
+  --size: 48px;
+}
+.lg {
+  --size: 60px;
+}
+.shell[data-size=sm] {
+  --size: 40px;
+}
+.shell[data-size=md] {
+  --size: 48px;
+}
+.shell[data-size=lg] {
+  --size: 60px;
+}
+.icon {
+  display: block;
+  fill: currentcolor;
+  margin: auto;
+  position: relative;
+  width: var(--icon-size);
+  height: var(--icon-size);
+}
+.carousel {
+  --size: 50px;
+  background-color: var(--color-green, #6af7ce);
+  color: var(--color-primary-alt, #0d0d0d);
+}
+@media screen and (min-width: 640px) {
+  .carousel {
+    --size: 60px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .carousel {
+    --size: 86px;
+  }
+}
+.primary {
+  background-color: var(--color-blue, #603bff);
+  color: var(--color-white, #fff);
+}
+.ghost {
+  background-color: transparent;
+  color: currentColor;
+}
+.yellow {
+  background-color: var(--color-yellow, #eaff3d);
+  color: var(--color-black, #0d0d0d);
+}
+.outline {
+  background-color: transparent;
+  color: currentColor;
+  border: 2px solid currentColor;
+}
+.accent {
+  background-color: var(--color-accent, #eaff3d);
+  color: var(--color-accent-alt, #0d0d0d);
+}
+@media (hover: hover) {
+  .shell:not(:disabled):not([aria-disabled=true]):hover {
+    --scale: 1.1;
+  }
+}
+.squish {
+  animation: squish calc(var(--duration-factor, 1) * 2s) ease-out infinite;
+}
+.squishLeft {
+  --squish-direction: -1;
+}
+.squishRight {
+  --squish-direction: 1;
+}
+@keyframes squish {
+  0%, 100% {
+    transform: scale(calc(var(--scale) * 1));
+  }
+  30% {
+    transform: scaleX(calc(var(--scale) * 0.9)) scaleY(calc(var(--scale) * 1.1)) translateX(calc(15% * var(--squish-direction, 1)));
+  }
+  45% {
+    transform: scaleX(calc(var(--scale) * 1.05)) scaleY(calc(var(--scale) * 1)) translateX(calc(8% * var(--squish-direction, 1)));
+  }
+  60% {
+    transform: scaleX(calc(var(--scale) * 0.95)) scaleY(calc(var(--scale) * 1.05)) translateX(calc(8% * var(--squish-direction, 1)));
+  }
+}
+.pulse {
+  animation: pulse 2s ease-in-out infinite;
+}
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(calc(var(--scale) * 1));
+  }
+  50% {
+    transform: scale(calc(var(--scale) * 1.05));
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .shell,
+  .shell:hover,
+  .shell:active {
+    transition: none;
+    transform: none;
+    animation: none;
+  }
+}
+
+/* src/components/ui/card-stack-carousel.module.css */
+.shell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  transform: translateY(-50%) scale(1);
+  will-change: transform, opacity;
+  box-shadow: none;
+  --scale: 1;
+  --squish-direction: 1;
+  background-color: var(--color-green, #6af7ce);
+  color: var(--color-black, #0d0d0d);
+  touch-action: pan-y;
+}
+.left {
+  --squish-direction: -1;
+  --icon-button-size: 86px;
+  --icon-button-icon-size: 40px;
+}
+.right {
+  --squish-direction: 1;
+  --icon-button-size: 86px;
+  --icon-button-icon-size: 40px;
+}
+.shell:not(:disabled):not([aria-disabled=true]):hover {
+  --scale: 1.1;
+}
+.shell:disabled {
+  background-color: transparent;
+  cursor: auto;
+  opacity: 0.2;
+}
+.icon {
+  width: 40px;
+  height: 40px;
+  display: block;
+}
+.intro {
+  animation: icon-button_squish 2s ease-out infinite;
+}
+@-webkit-keyframes icon-button_squish {
+  0%, 100% {
+    transform: translateY(-50%) scale(calc(var(--scale) * 1));
+  }
+  30% {
+    transform: translateY(-50%) scaleX(calc(var(--scale) * .9)) scaleY(calc(var(--scale) * 1.1)) translateX(calc(15% * var(--squish-direction)));
+  }
+  45% {
+    transform: translateY(-50%) scaleX(calc(var(--scale) * 1.05)) scaleY(calc(var(--scale) * 1)) translateX(calc(8% * var(--squish-direction)));
+  }
+  60% {
+    transform: translateY(-50%) scaleX(calc(var(--scale) * .95)) scaleY(calc(var(--scale) * 1.05)) translateX(calc(8% * var(--squish-direction)));
+  }
+}
+@keyframes icon-button_squish {
+  0%, 100% {
+    transform: translateY(-50%) scale(calc(var(--scale) * 1));
+  }
+  30% {
+    transform: translateY(-50%) scaleX(calc(var(--scale) * .9)) scaleY(calc(var(--scale) * 1.1)) translateX(calc(15% * var(--squish-direction)));
+  }
+  45% {
+    transform: translateY(-50%) scaleX(calc(var(--scale) * 1.05)) scaleY(calc(var(--scale) * 1)) translateX(calc(8% * var(--squish-direction)));
+  }
+  60% {
+    transform: translateY(-50%) scaleX(calc(var(--scale) * .95)) scaleY(calc(var(--scale) * 1.05)) translateX(calc(8% * var(--squish-direction)));
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .shell,
+  .shell:hover,
+  .shell:active {
+    transition: none;
+    transform: none;
+    animation: none;
+  }
+}
+
+/* src/components/ui/footer.module.css */
+.footer {
+  background-color: var(--color-black, #0d0d0d);
+  color: var(--color-white, #fff);
+  position: relative;
+  z-index: 1;
+}
+.inner {
+  margin: 0 auto;
+  max-width: 64rem;
+  padding: 3rem 1.5rem 2.5rem;
+  position: relative;
+  z-index: 20;
+}
+@media (min-width: 768px) {
+  .inner {
+    padding: 4rem 2rem 3rem;
+  }
+}
+.brandBlock {
+  display: grid;
+  gap: 0.75rem;
+  justify-items: center;
+  margin: 0 auto 1.75rem;
+  max-width: 42rem;
+  text-align: center;
+}
+.kicker {
+  background: var(--color-yellow, #eaff3d);
+  color: var(--color-black, #0d0d0d);
+  display: inline-block;
+  font-family: var(--font-alt, sans-serif);
+  font-size: 0.8125rem;
+  font-weight: 900;
+  letter-spacing: 0.08em;
+  line-height: 1;
+  padding: 0.35rem 0.75rem;
+  text-transform: uppercase;
+  transform: rotate(-2deg);
+}
+.brandTitle {
+  color: var(--color-white, #fff);
+  font-family: var(--font-heading, sans-serif);
+  font-size: clamp(2rem, 8vw, 4.5rem);
+  line-height: 0.9;
+  margin: 0;
+  text-transform: uppercase;
+}
+.brandCopy {
+  color: rgba(255, 255, 255, 0.74);
+  font-size: 0.95rem;
+  font-weight: 600;
+  line-height: 1.7;
+  margin: 0;
+  max-width: 36rem;
+}
+.projectActions {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  justify-content: center;
+}
+@media (min-width: 640px) {
+  .projectActions {
+    flex-direction: row;
+  }
+}
+.linkRow {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  justify-content: center;
+}
+.navLink {
+  color: rgba(255, 255, 255, 0.72);
+  font-size: 0.875rem;
+  font-weight: 800;
+  text-decoration: none;
+  text-transform: uppercase;
+  transition: color 0.15s ease;
+}
+.navLink:hover {
+  color: var(--color-yellow, #eaff3d);
+}
+.divider {
+  border: none;
+  border-top: 1px solid rgba(255, 255, 255, 0.15);
+  margin: 2rem 0 1.5rem;
+}
+.legalRow {
+  align-items: center;
+  display: grid;
+  gap: 0.5rem;
+  justify-items: center;
+  text-align: center;
+}
+.copyright {
+  color: rgba(255, 255, 255, 0.48);
+  font-size: 0.72rem;
+  line-height: 1.5;
+  max-width: 46rem;
+}
+
+/* src/components/ui/gallery-base.module.css */
+.galleryWrapper {
+  --photo-offset: 0;
+  --photo-ease: var(--ease-out);
+  --gallery-opacity: 0;
+  --gallery-transition-delay: calc(var(--duration-factor, 1) * 0.4s);
+  --delay: 0s;
+  --ease: var(--ease-back-in);
+  --controls-scale: 1;
+  --controls-spread: 0px;
+  margin: 0;
+  padding: 0 16px;
+  position: relative;
+  touch-action: pan-y;
+  width: 100%;
+}
+.gallery {
+  display: grid;
+  grid-template-areas: "item";
+  padding-top: 16px;
+  position: relative;
+}
+.galleryItem {
+  display: block;
+  grid-area: item;
+  margin: 0 auto;
+  opacity: 0;
+  transition: opacity 0s ease-in-out;
+  transition-delay: var(--gallery-transition-delay);
+  width: 100%;
+  will-change: opacity, transform;
+  z-index: 0;
+}
+.galleryItemActive {
+  --gallery-opacity: 1;
+  --ease: var(--ease-out);
+  --delay: var(--gallery-transition-delay);
+  opacity: 1;
+  transition-property: opacity;
+  transition-duration: calc(var(--duration-factor, 1) * 0.4s);
+  transition-timing-function: var(--photo-ease);
+  transition-delay: var(--delay);
+  z-index: 10;
+}
+.galleryControls {
+  --display-type: flex;
+  align-items: center;
+  display: var(--display-type);
+  flex-direction: row;
+  height: 0;
+  justify-content: space-between;
+  left: 50%;
+  max-width: 100%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  z-index: 50;
+}
+.galleryControls > * {
+  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.2));
+  position: relative;
+}
+.galleryControls > :first-child {
+  transform: translateX(calc(-150% - var(--controls-spread))) scale(var(--controls-scale));
+}
+.galleryControls > :nth-child(2) {
+  transform: translateX(calc(100% + var(--controls-spread))) scale(var(--controls-scale));
+}
+@media screen and (max-width: 639px) {
+  .galleryControls {
+    left: 0;
+    max-width: 100%;
+    transform: translateY(-50%);
+    width: 100%;
+  }
+  .galleryControls > :first-child,
+  .galleryControls > :nth-child(2) {
+    transform: none;
+  }
+}
+.galleryContentFade {
+  opacity: var(--gallery-opacity);
+  transition-delay: var(--delay);
+  transition-duration: calc(var(--duration-factor, 1) * 0.4s);
+  transition-property: opacity;
+  transition-timing-function: var(--photo-ease);
+}
+.galleryFrame {
+  --photo-aspect-ratio: 16 / 9;
+  display: block;
+  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
+  margin: 0 auto;
+  max-width: 600px;
+  width: 100%;
+  transform: translateX(calc(50% * var(--photo-offset))) rotate(calc(var(--rotateDirection, 1) * var(--rotateAmount, 3deg) + var(--rotateDirection, 1) * 20deg * var(--photo-offset)));
+  transition-delay: var(--delay);
+  transition-duration: calc(var(--duration-factor, 1) * 0.4s);
+  transition-property: transform;
+  transition-timing-function: var(--ease);
+  will-change: transform;
+}
+
+/* src/components/ui/marquee-carousel.module.css */
+.photoFrame {
+  grid-area: photo;
+}
+.galleryControls {
+  max-width: 100%;
+}
+
+/* src/components/ui/icon-paginated-carousel.module.css */
+.galleryBounce {
+  width: 100%;
+}
+.galleryItemContent {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+  width: 100%;
+}
+.galleryItemText {
+  text-align: center;
+  width: 100%;
+}
+.imagePagination {
+  margin: 0;
+  padding: 8px 0;
+  position: relative;
+  z-index: 10;
+}
+
+/* src/components/ui/ink-trail.module.css */
+.inkTrailRoot {
+  position: relative;
+  width: 100%;
+  pointer-events: auto;
+  overflow: hidden;
+}
+.inkTrailCanvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+/* src/components/ui/loader.module.css */
+.loader {
+  --color: var(--color-true-black, #000);
+  --size: 1em;
+  --loader-shadow: rgb(0 0 0 / 0.35);
+  block-size: var(--size);
+  border-radius: 999px;
+  display: inline-grid;
+  inline-size: var(--size);
+  line-height: 0;
+  margin: auto;
+  place-items: center;
+  vertical-align: middle;
+}
+.blue {
+  --color: var(--color-blue, #603bff);
+}
+.red {
+  --color: var(--color-red, #ff505e);
+}
+.surface {
+  background: var(--color);
+  block-size: 100%;
+  border-radius: inherit;
+  box-shadow: 0 0 0 max(2px, calc(var(--size) * 0.08)) var(--color), calc(var(--size) * 0.12) calc(var(--size) * 0.14) 0 var(--loader-shadow);
+  box-sizing: border-box;
+  display: grid;
+  inline-size: 100%;
+  overflow: hidden;
+  padding: max(2px, calc(var(--size) * 0.12));
+  place-items: center;
+  transform: rotate(-5deg);
+}
+.image {
+  block-size: 100%;
+  inline-size: 100%;
+  object-fit: contain;
+  pointer-events: none;
+  user-select: none;
+}
+.sprite {
+  block-size: 100%;
+  display: block;
+  inline-size: 100%;
+  pointer-events: none;
+  user-select: none;
+}
+.morphSprite {
+  animation: loaderMorphSprite var(--loader-sprite-duration) steps(64, end) infinite;
+  background-image: var(--loader-sprite-url);
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  background-size: 6400% 100%;
+}
+.swimSprite {
+  animation: loaderSwimSprite var(--loader-sprite-duration) steps(31, end) infinite;
+  background-color: var(--color);
+  mask-image: var(--loader-sprite-url);
+  mask-position: 0 0;
+  mask-repeat: no-repeat;
+  mask-size: 3100% 100%;
+  -webkit-mask-image: var(--loader-sprite-url);
+  -webkit-mask-position: 0 0;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: 3100% 100%;
+}
+@keyframes loaderMorphSprite {
+  to {
+    background-position-x: calc(var(--size) * -64);
+  }
+}
+@keyframes loaderSwimSprite {
+  to {
+    mask-position: calc(var(--size) * -31) 0;
+    -webkit-mask-position: calc(var(--size) * -31) 0;
+  }
+}
+
+/* src/components/ui/nav-menu-button.module.css */
+.trigger {
+  align-items: center;
+  color: var(--color-yellow, #eaff3d);
+  display: grid;
+  gap: 8px;
+  grid-template-columns: auto 1fr;
+  padding: 8px 88px 8px 16px;
+  position: relative;
+  width: max-content;
+  z-index: 5;
+  font-family: var(--font-alt);
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1;
+  outline: none;
+  user-select: none;
+}
+.label {
+  display: block;
+  font-size: inherit;
+  font-weight: 700;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  position: relative;
+  top: -0.2em;
+  white-space: nowrap;
+}
+@media screen and (min-width: 1024px) {
+  .trigger {
+    gap: 12px;
+    font-size: 24px;
+    padding-right: 100px;
+  }
+}
+
+/* src/components/ui/navigation.module.css */
+.reducedMotion {
+  align-items: center;
+  color: var(--color-white, #fff);
+  display: inline-flex;
+  font-family: var(--font-alt);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1;
+  padding: 12px 16px;
+}
+.reducedMotionIcon {
+  --dimension: 13px;
+  align-items: center;
+  border: 2px solid var(--color-yellow, currentColor);
+  border-radius: 50%;
+  display: inline-flex;
+  height: var(--dimension);
+  justify-content: center;
+  margin-inline-end: 10px;
+  position: relative;
+  flex-shrink: 0;
+  width: var(--dimension);
+}
+.reducedMotionIconInner {
+  --inner-dimension: calc(var(--dimension) - 8px);
+  background-color: currentColor;
+  border-radius: 50%;
+  height: var(--inner-dimension);
+  width: var(--inner-dimension);
+}
+.reducedMotionLabel {
+  position: relative;
+  top: -0.1em;
+}
+
+/* src/components/ui/section-side-nav.module.css */
+.sidebar {
+  --section-side-nav-fit-scale: 1;
+  --section-side-nav-center-y: 50%;
+  --section-side-nav-max-block-size: none;
+  opacity: 0;
+  position: fixed;
+  right: var(--base-space, 8px);
+  top: var(--section-side-nav-center-y);
+  transform: translateY(-50%) scale(var(--section-side-nav-fit-scale));
+  transform-origin: right center;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+  visibility: hidden;
+  z-index: 9;
+}
+.sidebar[data-overflow=scroll] {
+  max-block-size: var(--section-side-nav-max-block-size);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+}
+.sidebar[data-overflow=scroll]::-webkit-scrollbar {
+  display: none;
+}
+.sidebarShow {
+  opacity: 1;
+  visibility: visible;
+}
+.menu {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--base-space, 8px) * 2);
+  position: relative;
+}
+.menu::before {
+  background: var(--color-purple, #603bff);
+  content: "";
+  height: 100%;
+  left: 50%;
+  margin-left: -3px;
+  position: absolute;
+  top: 0;
+  width: 6px;
+}
+.item {
+  --dimension: 42px;
+  --border: 4px;
+  background: var(--color-purple, #603bff);
+  border: solid var(--border) var(--color-purple, #603bff);
+  border-radius: 50%;
+  display: grid;
+  height: var(--dimension);
+  place-items: center;
+  position: relative;
+  text-decoration: none;
+  width: var(--dimension);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+.item:hover {
+  background: var(--color-black, #000);
+}
+.item:hover.itemActive {
+  background: var(--color-purple, #603bff);
+}
+.itemActive .itemSplat {
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1);
+  visibility: visible;
+}
+.itemSplat {
+  --width: 62px;
+  --height: 55px;
+  color: var(--color-black, #000);
+  height: var(--height);
+  left: 45%;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 45%;
+  transform: translate(-50%, -50%) scale(0);
+  transition: transform 0.3s ease, opacity 0.3s ease;
+  visibility: hidden;
+  width: var(--width);
+}
+.itemText {
+  font-family: var(--font-alt, "obviously-narrow", sans-serif);
+  font-weight: var(--font-weight-bold, 700);
+  position: relative;
+  top: -0.16em;
+  color: var(--color-white, #fff);
+  display: block;
+  font-size: 1.375rem;
+  line-height: 1;
+  text-decoration: none;
+}
+.itemBackToTop {
+  --dimension: 34px;
+}
+.backToTopArrow {
+  --width: 13px;
+  --height: 7.69px;
+  color: var(--color-white, #fff);
+  height: var(--height);
+  transform: rotate(-180deg);
+  width: var(--width);
+}
+@media (prefers-reduced-motion: reduce) {
+  .sidebar,
+  .item,
+  .itemSplat {
+    transition-duration: 0.01ms !important;
+  }
+}
+@media (min-width: 640px) {
+  .sidebar {
+    right: calc(var(--base-space, 8px) * 2);
+  }
+  .menu {
+    gap: calc(var(--base-space, 8px) * 4);
+  }
+  .item {
+    --dimension: 60px;
+    --border: 6px;
+  }
+  .itemSplat {
+    --width: 81px;
+    --height: 72px;
+  }
+  .itemText {
+    font-size: 1.75rem;
+  }
+  .itemBackToTop {
+    --dimension: 44px;
+  }
+  .backToTopArrow {
+    --width: 20px;
+    --height: 11.82px;
+  }
+}
+@media (min-width: 1024px) {
+  .sidebar {
+    right: calc(var(--base-space, 8px) * 5);
+  }
+}
+
+/* src/components/ui/sheet.module.css */
+.sideTop,
+.sideRight,
+.sideBottom,
+.sideLeft {
+  position: fixed;
+  z-index: var(--z-sheet);
+}
+.sideTop {
+  top: 0;
+  left: 0;
+  right: 0;
+  height: auto;
+}
+.sideRight {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 75%;
+  max-width: 24rem;
+}
+.sideBottom {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: auto;
+}
+.sideLeft {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 75%;
+  max-width: 24rem;
+}
+
+/* src/components/ui/video-dialog.module.css */
+.thumbnailTrigger {
+  container-type: inline-size;
+}
+.tape1,
+.tape2 {
+  --trailer-tape-safe-bleed: min( var(--trailer-tape-bleed), max(0px, calc((100vw - 100cqw) / 2 - var(--trailer-tape-tilt-guard, 0px))) );
+}
+.tape1 {
+  --trailer-tape-bleed: 19px;
+  left: calc(var(--trailer-tape-safe-bleed) * -1);
+  top: -20px;
+}
+.tape2 {
+  --trailer-tape-bleed: 15px;
+  --trailer-tape-tilt-guard: 8px;
+  bottom: 0;
+  right: calc(var(--trailer-tape-safe-bleed) * -1);
+}
+.tapeImage {
+  display: block;
+  height: auto;
+  width: 100%;
+}
+.tape1 .tapeImage {
+  transform: rotate(-25deg);
+}
+.tape2 .tapeImage {
+  transform: rotate(-24deg);
+}
+.tapeMobile {
+  display: block;
+}
+.tapeDesktop {
+  display: none;
+}
+.tape1 .tapeMobile {
+  inline-size: 82px;
+}
+.tape2 .tapeMobile {
+  inline-size: 97px;
+}
+@container (min-width: 400px) {
+  .tapeMobile {
+    display: none;
+  }
+  .tapeDesktop {
+    display: block;
+  }
+}
+@container (min-width: 400px) and (max-width: 639px) {
+  .tape1 {
+    --trailer-tape-bleed: 25px;
+    top: -40px;
+  }
+  .tape1 .tapeDesktop {
+    inline-size: 133px;
+  }
+  .tape2 {
+    --trailer-tape-bleed: 50px;
+    bottom: 10px;
+  }
+  .tape2 .tapeDesktop {
+    inline-size: 162px;
+  }
+}
+@container (min-width: 640px) {
+  .tape1 {
+    --trailer-tape-bleed: 25px;
+    top: -50px;
+  }
+  .tape1 .tapeDesktop {
+    inline-size: 166px;
+  }
+  .tape2 {
+    --trailer-tape-bleed: 50px;
+    bottom: 20px;
+  }
+  .tape2 .tapeDesktop {
+    inline-size: 202px;
+  }
+}
+@container (min-width: 760px) {
+  .tape1 {
+    --trailer-tape-bleed: 40px;
+  }
+  .tape2 {
+    --trailer-tape-bleed: 40px;
+  }
+}
+
+/* src/components/ui/weapons-gallery-carousel.module.css */
+.galleryWrapper {
+  --controls-spread: 30px;
+}
+.galleryControls {
+  max-width: 100%;
+  padding-top: 0;
+}
+@media screen and (min-width: 640px) {
+  .galleryControls {
+    max-width: 50%;
+  }
+}
+.photoFrame {
+  transform: translateX(calc(100% * var(--photo-offset))) rotate(calc(var(--rotateDirection, 1) * var(--rotateAmount, 2deg) + var(--rotateDirection, 1) * 20deg * var(--photo-offset)));
+}
+.itemLayout {
+  display: grid;
+  grid-template-rows: 1fr auto;
+  gap: var(--gutter-width);
+}
+@media screen and (min-width: 640px) {
+  .itemLayout {
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: none;
+  }
+}
+.galleryContent {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+  padding-bottom: calc(var(--base-space, 8px) * 2);
+  width: 100%;
+}
+@media screen and (min-width: 640px) {
+  .galleryContent {
+    padding-bottom: calc(var(--base-space, 8px) * 5);
+  }
+}
+.galleryPagination {
+  margin: 0;
+  position: relative;
+  z-index: 10;
+}
+@media screen and (min-width: 640px) {
+  .galleryPagination {
+    bottom: 0;
+    position: absolute;
+    right: 0;
+    width: calc(50% - var(--gutter-width, 1rem) * 0.5);
+  }
+}