@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
/* The portfolio wordmark treatment. This is a logo treatment only: prose
 * continues to spell the product name as "ITZA Future". In the mark the
 * Roboto-set words touch: ITZAFuture. */
.itza-wordmark {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: inherit;
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: -.01em;
  text-decoration: none;
}
.itza-wordmark .wm { line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
/* Older page-specific wordmark rules target every nested span. Reset those
 * inherited offsets so the two halves always meet as the ITZAFuture mark. */
body .itza-wordmark .wm,
body .itza-wordmark .wm-itza,
body .itza-wordmark .wm-prod { margin-left: 0; }
body .itza-wordmark .wm-itza { color: #0c7ffb; font: inherit; font-weight: 600; }
body .itza-wordmark .wm-prod { color: #ad8009; font: inherit; font-weight: 800; }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  body .itza-wordmark .wm-prod {
    background-image: linear-gradient(105deg,
      #8a6206 0%, #c99a10 22%, #f9df6d 40%, #f5c711 52%,
      #a67c08 72%, #e0b312 88%, #b98a0a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
html[data-theme='dark'] body .itza-wordmark .wm-itza,
html[data-theme='contrast'] body .itza-wordmark .wm-itza,
body .brandmark.itza-wordmark .wm-itza,
.classic-page .topnav .itza-wordmark .wm-itza,
.theme-teen .world-head .itza-wordmark .wm-itza,
.theme-midlife .world-head .itza-wordmark .wm-itza { color: #4d9bff; }
html[data-theme='dark'] body .itza-wordmark .wm-prod,
html[data-theme='contrast'] body .itza-wordmark .wm-prod,
body .brandmark.itza-wordmark .wm-prod,
.classic-page .topnav .itza-wordmark .wm-prod,
.theme-teen .world-head .itza-wordmark .wm-prod,
.theme-midlife .world-head .itza-wordmark .wm-prod { color: #f5c711; }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  html[data-theme='dark'] body .itza-wordmark .wm-prod,
  html[data-theme='contrast'] body .itza-wordmark .wm-prod,
  body .brandmark.itza-wordmark .wm-prod,
  .classic-page .topnav .itza-wordmark .wm-prod,
  .theme-teen .world-head .itza-wordmark .wm-prod,
  .theme-midlife .world-head .itza-wordmark .wm-prod {
    background-image: linear-gradient(105deg,
      #b98a0a 0%, #f5c711 25%, #ffe98a 42%, #f5c711 55%,
      #c99a10 75%, #ffd83d 90%, #e0b312 100%);
    color: transparent;
  }
}
.wordmark.itza-wordmark,
.brand.itza-wordmark,
.footer-brand.itza-wordmark,
.foot-brand.itza-wordmark,
.discovery-home.itza-wordmark { font-family: "Roboto", "Helvetica Neue", Arial, sans-serif; }
/* Age-world headers predate the shared markup but carry the same two
 * semantic halves. Keep them on the identical house face and colours. */
.wordmark:not(.itza-wordmark) {
  display: inline-flex;
  align-items: center;
  color: inherit;
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: -.01em;
  text-decoration: none;
}
body .wordmark:not(.itza-wordmark) > strong { color: #0c7ffb; font: inherit; font-weight: 600; letter-spacing: inherit; }
body .wordmark:not(.itza-wordmark) > span { margin-left: 0; color: #ad8009; font: inherit; font-weight: 800; }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  body .wordmark:not(.itza-wordmark) > span {
    background-image: linear-gradient(105deg,
      #8a6206 0%, #c99a10 22%, #f9df6d 40%, #f5c711 52%,
      #a67c08 72%, #e0b312 88%, #b98a0a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.theme-teen .world-head .wordmark:not(.itza-wordmark) > strong,
.theme-midlife .world-head .wordmark:not(.itza-wordmark) > strong { color: #4d9bff; }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .theme-teen .world-head .wordmark:not(.itza-wordmark) > span,
  .theme-midlife .world-head .wordmark:not(.itza-wordmark) > span {
    background-image: linear-gradient(105deg,
      #b98a0a 0%, #f5c711 25%, #ffe98a 42%, #f5c711 55%,
      #c99a10 75%, #ffd83d 90%, #e0b312 100%);
    color: transparent;
  }
}
#screen-onboard .brand.itza-wordmark { color: inherit; font-family: "Roboto", "Helvetica Neue", Arial, sans-serif; font-size: 1.05rem; letter-spacing: -.01em; }
#screen-onboard .pyr.brand-mark { width: 22px; height: 22px; object-fit: contain; }
.world-foot-brand.itza-wordmark { gap: 0; font-size: 1rem; white-space: nowrap; }
.world-foot-brand .wordmark-context {
  display: inline-flex;
  align-items: center;
  margin-left: .7rem;
  padding-left: .7rem;
  border-left: 1px solid color-mix(in srgb, var(--muted, currentColor), transparent 62%);
  color: var(--muted, inherit);
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-size: .75rem;
  line-height: 1.15;
  letter-spacing: 0;
}

/* The compact light/dark control shared by every ITZA Future surface. */
.site-theme-toggle {
  appearance: none;
  flex: 0 0 auto;
  width: 62px;
  min-width: 62px;
  height: 44px;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: inherit;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.site-theme-track {
  position: relative;
  width: 56px;
  height: 30px;
  display: block;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, currentColor, transparent 78%);
  border-radius: 999px;
  background: color-mix(in srgb, #edf5ff 88%, transparent);
  transition: background-color 220ms ease, border-color 220ms ease;
}
.site-theme-icon {
  position: absolute;
  z-index: 1;
  top: 7px;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, currentColor, transparent 38%);
}
.site-theme-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.site-theme-moon { left: 7px; }
.site-theme-sun { right: 7px; }
.site-theme-knob {
  position: absolute;
  z-index: 2;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffd43b;
  transform: translateX(0);
  transition: transform 240ms cubic-bezier(.2,.8,.2,1), background-color 220ms ease;
}
.site-theme-toggle:hover .site-theme-track { border-color: color-mix(in srgb, #0071e3, transparent 42%); }
.site-theme-toggle:focus-visible { outline: 3px solid #1689f8; outline-offset: 2px; }
html[data-theme='dark'] .site-theme-track,
html[data-theme='contrast'] .site-theme-track { background: #171c31; border-color: #65708e; }
html[data-theme='dark'] .site-theme-knob,
html[data-theme='contrast'] .site-theme-knob { background: #e9efff; transform: translateX(26px); }
html[data-theme='dark'] .site-theme-icon,
html[data-theme='contrast'] .site-theme-icon { color: #aeb9d8; }
.site-theme-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.site-theme-toggle-floating { position: fixed; z-index: 46; right: 12px; bottom: max(10px, env(safe-area-inset-bottom)); }
html.workshop-on .site-theme-toggle-floating,
html.portal-on .site-theme-toggle-floating,
html.gallery-on .site-theme-toggle-floating { display: none; }

/* Canonical gateway. */
html[data-theme='dark'], html[data-theme='contrast'] {
  color-scheme: dark;
  --paper: #0c0f1c;
  --ink: #f2f5ff;
  --navy: #f5f7ff;
  --muted: #bec5da;
  --line: rgba(224, 231, 255, .17);
}
html[data-theme='dark'] .gateway-page,
html[data-theme='contrast'] .gateway-page {
  background: radial-gradient(circle at 12% 15%, #2a2614 0, transparent 28%), radial-gradient(circle at 87% 20%, #102f37 0, transparent 32%), linear-gradient(145deg, #090c17 0, #111528 62%, #21101a 100%);
}
html[data-theme='dark'] .gateway-page .site-head,
html[data-theme='contrast'] .gateway-page .site-head { background: linear-gradient(rgba(12,15,28,.88), transparent); }
html[data-theme='dark'] .gateway-page .down-link span,
html[data-theme='contrast'] .gateway-page .down-link span,
html[data-theme='dark'] .gateway-page .orbit-question,
html[data-theme='contrast'] .gateway-page .orbit-question { background: #171b2e; color: #f5f7ff; }
html[data-theme='dark'] .gateway-page .people-orbit::after,
html[data-theme='contrast'] .gateway-page .people-orbit::after { opacity: 0; }
html[data-theme='dark'] .gateway-page .gateway-foot,
html[data-theme='contrast'] .gateway-page .gateway-foot { color: #b8bfd4; }
html[data-theme='dark'] .gateway-page .create-link,
html[data-theme='contrast'] .gateway-page .create-link { background: #0071e3; color: #fff; }

/* Individual age worlds retain their accent colour while their surrounding
 * room changes. Images and cinematic dark sections remain untouched. */
html[data-theme='dark'] body[data-age],
html[data-theme='contrast'] body[data-age] {
  --paper: #0c0f1c;
  --ink: #f1f4ff;
  --deep: #f5f7ff;
  --soft: #111528;
  --muted: #bdc4d8;
  --hero-bg: #101426;
  --moment-bg: #0d1120;
  --ideas-bg: #090d19;
  --card-bg: #171c30;
  --card-text: #f5f7ff;
  --closing-bg: #070a13;
  --closing-text: #fff;
  --nav-color: #fff;
}
html[data-theme='contrast'] body[data-age] { --accent: #56aaff; --accent2: #ffe06b; --muted: #fff; }
html[data-theme='dark'] body[data-age] .world-nav > a,
html[data-theme='contrast'] body[data-age] .world-nav > a { background: var(--accent); color: var(--on-accent, #fff); }
html[data-theme='dark'] body[data-age] .world-nav > .gallery-link,
html[data-theme='contrast'] body[data-age] .world-nav > .gallery-link { background: transparent; color: inherit; box-shadow: none; }
html[data-theme='dark'] body[data-age] .age-menu nav,
html[data-theme='contrast'] body[data-age] .age-menu nav { background: #161a2c; color: #f4f6ff; border-color: #ffffff24; }
html[data-theme='dark'] body[data-age] .age-menu nav a:hover,
html[data-theme='dark'] body[data-age] .age-menu nav a:focus-visible,
html[data-theme='contrast'] body[data-age] .age-menu nav a:hover,
html[data-theme='contrast'] body[data-age] .age-menu nav a:focus-visible { background: #252b44; }
html[data-theme='dark'] body[data-age] .value-note,
html[data-theme='contrast'] body[data-age] .value-note { background: #171c30; color: #fff; }
html[data-theme='dark'] body[data-age] .value-note p,
html[data-theme='contrast'] body[data-age] .value-note p { color: #d3d8e8; }
html[data-theme='dark'] body[data-age] .world-closing,
html[data-theme='contrast'] body[data-age] .world-closing { background: #070a13; color: #fff; }
html[data-theme='dark'] body[data-age] .closing-nav a.next,
html[data-theme='contrast'] body[data-age] .closing-nav a.next { color: #101426; }
html[data-theme='dark'] body[data-age].theme-little .hero-media,
html[data-theme='contrast'] body[data-age].theme-little .hero-media { border-color: #22283b; }

/* The two retained long-form alternatives use their existing composition;
 * these overrides only exchange the room and reading surfaces. */
html[data-theme='dark'] .age-scroll-page,
html[data-theme='contrast'] .age-scroll-page { background: #0c0f1c; }
html[data-theme='dark'] .age-scroll-page .welcome,
html[data-theme='contrast'] .age-scroll-page .welcome { background: radial-gradient(circle at 12% 16%, #2d2914, transparent 25%), radial-gradient(circle at 84% 18%, #10323a, transparent 27%), #0d1120; }
html[data-theme='dark'] .age-scroll-page .welcome-lede,
html[data-theme='dark'] .age-scroll-page .universe-head p,
html[data-theme='dark'] .age-scroll-page .final p,
html[data-theme='dark'] .age-scroll-page .foot-links a,
html[data-theme='dark'] .age-scroll-page .foot-note,
html[data-theme='contrast'] .age-scroll-page .welcome-lede,
html[data-theme='contrast'] .age-scroll-page .universe-head p,
html[data-theme='contrast'] .age-scroll-page .final p,
html[data-theme='contrast'] .age-scroll-page .foot-links a,
html[data-theme='contrast'] .age-scroll-page .foot-note { color: #bec5da; }
html[data-theme='dark'] .age-scroll-page .mobile-menu,
html[data-theme='dark'] .age-scroll-page .universe,
html[data-theme='dark'] .age-scroll-page .site-foot,
html[data-theme='contrast'] .age-scroll-page .mobile-menu,
html[data-theme='contrast'] .age-scroll-page .universe,
html[data-theme='contrast'] .age-scroll-page .site-foot { background: #0d1120; color: #f2f5ff; }
html[data-theme='dark'] .age-scroll-page .spark,
html[data-theme='dark'] .age-scroll-page .idea-filters button,
html[data-theme='contrast'] .age-scroll-page .spark,
html[data-theme='contrast'] .age-scroll-page .idea-filters button { background: #171c30; color: #f2f5ff; }
html[data-theme='dark'] .age-scroll-page .age-world,
html[data-theme='contrast'] .age-scroll-page .age-world { --world-bg: #101426; --world-ink: #f5f7ff; --world-soft: #191e33; background: radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--world-accent), transparent 78%), transparent 30%), var(--world-bg); }

html[data-theme='dark'] .classic-page,
html[data-theme='contrast'] .classic-page { --paper: #0c0f1c; --ink: #f2f5ff; --muted: #bdc4d8; --line: rgba(224,231,255,.17); background: #0c0f1c; }
html[data-theme='dark'] .classic-page .step,
html[data-theme='contrast'] .classic-page .step { background: #171c30; }
html[data-theme='dark'] .classic-page .manifesto::after,
html[data-theme='contrast'] .classic-page .manifesto::after { color: rgba(130,160,255,.05); }

@media (max-width: 600px) {
  .gateway-page .site-head nav { gap: 5px; }
  .gateway-page .site-head nav > a:first-of-type { display: none; }
  body[data-age] .world-nav { gap: 4px; }
  body[data-age] .world-nav > a[data-create] { display: none; }
  body[data-age] .site-theme-toggle { width: 54px; min-width: 54px; }
  .site-theme-actions { gap: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-theme-track, .site-theme-knob { transition: none; }
}