/* barlow-condensed-latin-700-normal */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./barlow-condensed-latin-700-normal-v1xN8_Wq.woff2) format('woff2'), url(./barlow-condensed-latin-700-normal-Dmwat-ge.woff) format('woff');
}
/* ibm-plex-mono-latin-400-normal */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./ibm-plex-mono-latin-400-normal-DMJ8VG8y.woff2) format('woff2'), url(./ibm-plex-mono-latin-400-normal-CvHOgSBP.woff) format('woff');
}

:root { color-scheme: dark; font-family: 'IBM Plex Mono', monospace; background: #080a09; color: #e8e8e1; }
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { min-width: 280px; min-height: 100svh; overflow-x: hidden; }
button { font: inherit; }
button:focus-visible { outline: 1px solid #ff7436; outline-offset: 8px; }
#atmosphere, .ambient-fallback, .vignette { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ambient-fallback { background: radial-gradient(ellipse at 85% 35%, #29302b26, transparent 58%), linear-gradient(162deg, transparent 29%, #4b574516 43%, transparent 54%); }
#atmosphere { opacity: 0; transition: opacity 1.8s ease; }
.gpu-ready #atmosphere { opacity: 1; }
.vignette { background: radial-gradient(ellipse at 50% 46%, transparent 27%, #080a0938 70%, #080a09c0 100%); }
.page-frame { position: relative; z-index: 1; min-height: 100svh; padding: 34px 42px 28px; display: grid; grid-template-rows: 1fr auto; }
footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; line-height: 1.6; letter-spacing: .12em; }
main { min-height: 440px; display: grid; place-items: center; }
.brand { display: flex; align-items: center; gap: 28px; max-width: 100%; }
.mask-stage { width: clamp(190px, 23vw, 300px); aspect-ratio: 1; position: relative; flex: none; }
.mask-stage canvas, .mask-fallback { position: absolute; width: 100%; height: 100%; object-fit: contain; inset: 0; }
#mask { opacity: 0; transition: opacity 1s ease; }
:root[data-finish="led"] #mask { width: 145%; height: 145%; left: -22.5%; top: -22.5%; }
:root:not([data-finish="metal"]) .mask-fallback { width: 145%; height: 145%; left: -22.5%; top: -22.5%; }
:root[data-finish="blackhole"] #mask, :root:not([data-finish]) .mask-fallback, :root[data-finish="blackhole"] .mask-fallback { width: 180%; height: 180%; max-width: 100vw; max-height: 100vw; left: 50%; top: 50%; transform: translate(-50%, -50%); }
@media (min-width: 761px) { :root[data-finish="blackhole"] .brand { gap: 60px; } }
.gpu-ready #mask { opacity: 1; }
.gpu-ready .mask-fallback { opacity: 0; transition: opacity .5s ease; }
.wordmark-wrap { position: relative; }
h1 { margin: 0; font-family: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif; font-weight: 700; font-size: clamp(74px, 8vw, 116px); line-height: .91; letter-spacing: -.009em; color: #e6e7df; text-shadow: 0 0 32px #e8ecd305; }
footer { padding-top: 18px; border-top: 1px solid #c9d0bf12; font-size: 9px; color: #8f958963; }
#motion { padding: 4px 0 4px 10px; border: 0; color: #a4aaa57e; background: transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; font-size: 9px; letter-spacing: .11em; transition: color .2s; }
#motion[hidden] { display: none; }
#motion:hover { color: #e6e7df; }
.motion-icon { font-size: 10px; width: 10px; display: inline-block; }
@media (min-width: 1800px) { .brand { gap: 42px; } .mask-stage { width: 340px; } h1 { font-size: 136px; } }
@media (max-width: 760px) {
  .page-frame { padding: 24px 24px 22px; }
  main { min-height: 450px; }
  .brand { flex-direction: column; gap: 14px; text-align: center; }
  .mask-stage { width: clamp(195px, 58vw, 270px); }
  .wordmark-wrap { margin: 0; }
  h1 { font-size: clamp(55px, 12.5vw, 84px); }
  footer, #motion { font-size: 8px; letter-spacing: .04em; }
}
@media (max-height: 550px) and (min-width: 761px) { main { min-height: 250px; padding: 0; } .mask-stage { width: 220px; } .page-frame { padding-top: 20px; padding-bottom: 18px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }