@font-face {
  font-family: Michroma;
  src: url('assets/fonts/Michroma-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #cecece;
  --chrome-bg: linear-gradient(180deg, #dedede, #b8b8b8);
  --powered-bg: #e7e7e7;
  --ink: #303b46;
  --muted: #5e6b77;
  --line: #b4b4b4;
  --accent: #5d8da9;
  --accent-bright: #a1d4eb;
  --brand-ink: #303030;
  --display: Michroma, 'Century Gothic', sans-serif;
  --mono: Consolas, 'Liberation Mono', monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  height: 100svh;
  min-height: 754px;
  display: grid;
  grid-template-rows: 96px minmax(0, 1fr) 124px;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
::selection { background: #a1d4eb; color: #253440; }

/* Header is separate from the artwork, so no image can overlap the wordmark. */
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 0 4.5%;
  border-bottom: 1px solid var(--line);
  background: var(--chrome-bg);
}
.wordmark {
  --wordmark-width: clamp(220px, 25vw, 350px);
  display: flex;
  align-items: center;
  gap: calc(var(--wordmark-width) * .045);
  color: var(--brand-ink);
  font: 400 clamp(13px, 1.35vw, 20px)/1.3 var(--display);
  letter-spacing: 3px;
}
.wordmark-type { display: block; flex-shrink: 0; width: var(--wordmark-width); height: auto; overflow: visible; fill: currentColor; font-family: var(--display); font-weight: 400; letter-spacing: normal; }
.wordmark-name { font-size: 26px; }
.wordmark-subtext { font-size: 12px; }
.theme-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 44px;
  padding: 10px 0 10px 10px;
  background: transparent;
  border: 0;
  color: var(--ink);
}
.theme-sun { font-size: 25px; line-height: 1; }
.switch-track { width: 43px; height: 23px; padding: 3px; border: 1px solid var(--line); border-radius: 20px; }
.switch-thumb { display: block; width: 15px; height: 15px; border-radius: 50%; background: var(--accent); transition: transform .25s; }
.theme-toggle[aria-pressed=true] .switch-thumb { transform: translateX(19px); }

main { min-height: 0; display: grid; grid-template-rows: minmax(360px, 1fr) 174px; }
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 360px;
  background: #c9d1d8;
  --hero-ink: #f5f7f9;
  --hero-line: #77777788;
  color: var(--hero-ink);
  border-bottom: 1px solid var(--line);
  transition: color .7s;
}
.hero[data-tone=dark] { --hero-ink: #eef3f6; --hero-line: #dddddd8c; }
.slides, .slide, .hero-shade { position: absolute; inset: 0; }
.slides { z-index: -3; }
.slide {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Top alignment preserves the image's full headroom at every screen ratio. */
  object-position: var(--position, center top);
  opacity: 0;
  filter: saturate(.46) contrast(1.12);
  transition: opacity 1.4s ease;
}
.slide.is-active { opacity: 1; }
.hero-shade {
  z-index: -1;
  pointer-events: none;
  /* Transparent dark falloff gives the UI contrast without a flat text panel. */
  background: radial-gradient(ellipse at 70% 40%, transparent 28%, #0309124d 78%, #030912a3 100%), linear-gradient(0deg, #030912d1, transparent 30%), linear-gradient(90deg, #08111ba3, #08111b80 36%, transparent 68%);
}
.hero[data-tone=dark] .hero-shade { background: radial-gradient(ellipse at 70% 40%, transparent 28%, #03091273 78%, #030912b3 100%), linear-gradient(0deg, #030912d9, transparent 30%), linear-gradient(90deg, #08111b94, #08111b59 36%, transparent 68%); }
.corners {
  position: absolute;
  inset: 19px;
  pointer-events: none;
  opacity: .8;
  background:
    linear-gradient(var(--hero-line),var(--hero-line)) left top/18px 1px no-repeat,
    linear-gradient(var(--hero-line),var(--hero-line)) left top/1px 18px no-repeat,
    linear-gradient(var(--hero-line),var(--hero-line)) right top/18px 1px no-repeat,
    linear-gradient(var(--hero-line),var(--hero-line)) right top/1px 18px no-repeat,
    linear-gradient(var(--hero-line),var(--hero-line)) left bottom/18px 1px no-repeat,
    linear-gradient(var(--hero-line),var(--hero-line)) left bottom/1px 18px no-repeat,
    linear-gradient(var(--hero-line),var(--hero-line)) right bottom/18px 1px no-repeat,
    linear-gradient(var(--hero-line),var(--hero-line)) right bottom/1px 18px no-repeat;
}
.technical-mark { position: absolute; left: 4.5%; top: 13%; display: flex; gap: 6px; opacity: .4; }
.technical-mark span { width: 18px; height: 1px; background: currentColor; }
.technical-mark span:last-child { width: 5px; }
.hero-action {
  position: absolute;
  left: 6%;
  top: 47%;
  transform: translateY(-50%);
  max-width: 47%;
}
h1 {
  margin: 0 0 32px;
  font: 400 clamp(20px, 2.15vw, 36px)/1.55 var(--display);
  letter-spacing: -.025em;
  text-shadow: 0 2px 4px #00000070, 0 4px 22px #00000060;
}
h1 span { display: block; white-space: nowrap; }
.hero[data-tone=dark] h1 { text-shadow: 0 2px 18px #0b172b80; }
.archive-button {
  --button-top: #527e99;
  --button-bottom: #274b65;
  --button-stroke: color-mix(in srgb, var(--button-bottom) 85%, #000000);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-height: 56px;
  padding: 0 28px;
  background: transparent;
  border: 0;
  color: #fff;
  font: 400 clamp(8px, .7vw, 11px)/1.5 var(--display);
  letter-spacing: .7px;
  filter: drop-shadow(0 5px 13px #0000005c) drop-shadow(0 0 7px #a1d4eb26);
  transition: transform .2s, filter .2s;
}
.archive-button:hover { --button-top: #699ab5; --button-bottom: #335f7d; transform: translateY(-2px); filter: drop-shadow(0 7px 16px #00000070) drop-shadow(0 0 12px #a1d4eb50); }
.archive-button:active { transform: translateY(1px) scale(.985); }
.archive-button .button-frame { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; overflow: visible; }
.button-fill-top { stop-color: var(--button-top); }
.button-fill-bottom { stop-color: var(--button-bottom); }
.button-outline { stroke: var(--button-stroke); stroke-width: 1.25px; }
.button-highlight { stroke: #ffffff; stroke-opacity: .32; stroke-width: .65px; }
.button-label { position: relative; text-shadow: 0 1px 4px #07142160; }
.archive-button .button-arrow { width: 21px; height: 21px; flex-shrink: 0; padding-left: 0; transition: transform .2s; }
.archive-button:hover .button-arrow { transform: translateX(4px); }
.archive-button:focus-visible { outline: 2px solid #ededed; outline-offset: 5px; }
.scene-footer { position: absolute; bottom: 28px; left: 4.5%; right: 4.5%; display: flex; align-items: center; justify-content: center; gap: 24px; color: #f4f4f4; text-shadow: 0 1px 7px #071421; --hero-line: #eeeeee8c; }
.scene-name { font: 400 8px/1.4 var(--display); letter-spacing: 1.8px; text-transform: uppercase; }
.scene-name b { font-weight: 400; margin-right: 12px; opacity: .65; }
.scene-name b::after { content: ' /'; }
.scene-controls { display: flex; align-items: center; gap: 16px; }
.scene-dots { display: flex; gap: 1px; }
.scene-dot { width: 25px; height: 32px; position: relative; border: 0; padding: 0; background: transparent; color: inherit; }
.scene-dot::before { content: ''; position: absolute; width: 6px; height: 6px; left: 9px; top: 13px; border: 1px solid currentColor; opacity: .6; transition: background .2s; }
.scene-dot[aria-current=true]::before { background: #a1d4eb; border-color: #dddddd; opacity: 1; box-shadow: 0 0 9px #a1d4eb70; }
.scene-dot:hover::before { background: currentColor; }
.play-toggle { display: grid; place-items: center; padding: 0 0 0 15px; min-width: 33px; height: 27px; border: 0; border-left: 1px solid var(--hero-line); background: transparent; color: inherit; font-size: 19px; }

/* A quiet, independently framed logo strip. */
.powered { padding: 21px 6% 22px; background: var(--powered-bg); }
.section-title { display: flex; justify-content: center; align-items: center; gap: 23px; margin: 0 0 20px; color: var(--muted); font: 400 8px/1.4 var(--display); letter-spacing: 2.2px; text-transform: uppercase; }
.section-title::before, .section-title::after { content: ''; width: 78px; height: 1px; background: var(--line); }
.brands { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1280px; margin: 0 auto; }
.brand-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; min-width: 0; min-height: 78px; padding: 0 16px; border-right: 1px solid var(--line); }
.brand-card:last-child { border: 0; }
.brand-logo { width: 150px; max-width: 100%; height: 37px; display: flex; align-items: center; justify-content: center; transition: transform .2s; }
.brand-logo img { object-fit: contain; max-width: 100%; max-height: 100%; }
.brand-card:hover .brand-logo { transform: translateY(-2px); }
.brand-logo .epic { height: 37px; filter: invert(1); }
.brand-logo .codex { width: 132px; }
.brand-logo .codex-dark { display: none; }
.brand-logo .claude { width: 123px; }
.brand-logo .legion { width: 150px; filter: brightness(0); }
.brand-card p { margin: 0; color: var(--muted); font: 400 7px/1.5 var(--display); letter-spacing: .9px; text-transform: uppercase; }
.footer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 18px 4.5% 6px; border-top: 1px solid var(--line); background: var(--chrome-bg); color: var(--muted); font: 400 7px/1.5 var(--display); letter-spacing: 1.1px; text-transform: uppercase; }
.footer .theme-toggle { padding: 10px 0; }

/* Dark Titanium keeps the same restrained silver and steel-blue palette. */
html[data-theme=dark] { color-scheme: dark; --paper: #202020; --chrome-bg: linear-gradient(180deg, #303030, #111111); --powered-bg: #343434; --ink: #e2e7eb; --muted: #aab8c2; --line: #4b4b4b; --accent: #a1ccdf; --brand-ink: #e6e6e6; }
html[data-theme=dark] .hero { --hero-ink: #f1f4f7; --hero-line: #dddddd8c; }
html[data-theme=dark] .slide { filter: saturate(.38) brightness(.8) contrast(1.12); }
html[data-theme=dark] .hero .hero-shade { background: radial-gradient(ellipse at 70% 40%, transparent 28%, #03091273 78%, #030912b3 100%), linear-gradient(0deg, #030912d9, transparent 30%), linear-gradient(90deg, #08111b94, #08111b59 36%, transparent 68%); }
html[data-theme=dark] h1 { text-shadow: 0 2px 18px #111a2980; }
html[data-theme=dark] .archive-button { --button-top: #cae6f2; --button-bottom: #85b4ca; color: #1d3443; }
html[data-theme=dark] .archive-button:hover { --button-top: #e4f6fd; --button-bottom: #a4d2e6; }
html[data-theme=dark] .button-label { text-shadow: 0 1px 1px #ffffff50; }
html[data-theme=dark] .brand-logo .epic { filter: none; }
html[data-theme=dark] .brand-logo .claude { filter: invert(1); }
html[data-theme=dark] .brand-logo .codex-light { display: none; }
html[data-theme=dark] .brand-logo .codex-dark { display: block; }
html[data-theme=dark] .brand-logo .legion { filter: brightness(0) invert(1); }

@media (min-width: 1800px) {
  .header, .footer { padding-left: max(4.5%,calc((100vw - 1700px)/2)); padding-right: max(4.5%,calc((100vw - 1700px)/2)); }
  .hero-action { left: max(6%,calc((100vw - 1600px)/2)); }
}
@media (max-width: 1000px) {
  body { min-height: 730px; grid-template-rows: 88px minmax(0,1fr) 124px; }
  main { grid-template-rows: minmax(360px,1fr) 158px; }
  .wordmark { font-size: 13px; letter-spacing: 2px; }
  .hero-action { left: 5%; max-width: 51%; }
  h1 { font-size: clamp(18px,2.2vw,24px); margin-bottom: 27px; }
  .archive-button { min-height: 48px; font-size: 8px; padding: 0 19px; gap: 23px; }
  .powered { padding: 20px 4%; }
  .brand-logo { width: 130px; height: 32px; }
  .brand-card p { font-size: 6px; letter-spacing: .7px; }
}
@media (max-width: 650px) {
  body { height: auto; min-height: 100svh; grid-template-rows: 88px auto 124px; }
  main { display: block; }
  .header { padding: 0 23px; gap: 15px; }
  .wordmark { --wordmark-width: clamp(175px, 51vw, 230px); font-size: 11px; letter-spacing: 1.7px; }
  .theme-toggle { padding-left: 0; gap: 7px; }
  .theme-sun { display: none; }
  .switch-track { width: 37px; height: 21px; padding: 3px; }
  .switch-thumb { width: 13px; height: 13px; }
  .theme-toggle[aria-pressed=true] .switch-thumb { transform: translateX(16px); }
  .hero { height: calc(100svh - 88px); min-height: 570px; max-height: 820px; }
  .slide { object-position: var(--mobile-position,75% top); }
  .hero .hero-shade { background: linear-gradient(0deg,#030912ed,#030912b8 28%,#03091224 65%,transparent 82%), radial-gradient(ellipse at 65% 30%,transparent 30%,#03091285); }
  .hero[data-tone=dark] .hero-shade { background: linear-gradient(0deg,#030912f0,#030912b8 28%,transparent 72%), radial-gradient(ellipse at 65% 30%,transparent 30%,#03091299); }
  html[data-theme=dark] .hero .hero-shade { background: linear-gradient(0deg,#030912f0,#030912b8 28%,transparent 72%), radial-gradient(ellipse at 65% 30%,transparent 30%,#03091299); }
  .hero-action { top: auto; bottom: 99px; left: 27px; right: 27px; max-width: none; transform: none; }
  h1 { font-size: clamp(17px,4vw,23px); line-height: 1.65; margin-bottom: 23px; }
  .archive-button { min-height: 50px; padding: 0 20px; font-size: 8px; gap: 27px; }
  .corners { inset: 13px; }
  .technical-mark { display: none; }
  .scene-footer { left: 27px; right: 27px; bottom: 27px; gap: 12px; }
  .scene-name { font-size: 6px; letter-spacing: 1px; }
  .scene-name b { display: none; }
  .scene-controls { gap: 8px; }
  .scene-dot { width: 19px; height: 31px; }
  .scene-dot::before { left: 6px; width: 5px; height: 5px; }
  .play-toggle { min-width: 24px; padding-left: 9px; font-size: 17px; }
  .powered { padding: 29px 24px 21px; }
  .section-title { margin-bottom: 14px; font-size: 7px; }
  .section-title::before, .section-title::after { width: 30px; }
  .brands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-card { min-height: 107px; padding: 15px 12px; }
  .brand-card:nth-child(2) { border-right: 0; }
  .brand-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .brand-card p { font-size: 6px; }
  .brand-logo { width: 125px; height: 31px; }
  .footer { padding: 18px 20px 6px; font-size: 6px; letter-spacing: .5px; }
}
/* Signal keeps its original file, with a gentler exposure/shade treatment only. */
.slide[data-treatment=signal] { filter: saturate(.65) contrast(.98) brightness(1.18); }
html[data-theme=dark] .slide[data-treatment=signal] { filter: saturate(.55) contrast(1.02) brightness(1.04); }
.hero[data-treatment=signal] .hero-shade,
html[data-theme=dark] .hero[data-treatment=signal] .hero-shade {
  background: radial-gradient(ellipse at 70% 42%, transparent 45%, #03091233 80%, #03091266 100%), linear-gradient(0deg, #03091299, transparent 26%), linear-gradient(90deg, #08111b40, transparent 60%);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}