:root { color-scheme: dark; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
html, body, main { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #080807; -webkit-font-smoothing: antialiased; }
main { position: fixed; inset: 0; isolation: isolate; }
#scene { width: 100%; height: 100%; display: block; touch-action: none; }
.wordmark { position: absolute; z-index: 2; margin: 0; font-weight: 400; user-select: none; pointer-events: none; }
.initials, .descriptor { display: block; }
.grain { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
[data-concept="singularity"] .wordmark { bottom: max(7.5vh, env(safe-area-inset-bottom)); left: 6.5vw; color: #eee4d2; display: flex; align-items: center; gap: 26px; }
[data-concept="singularity"] .initials { font-size: clamp(44px, 4.5vw, 72px); font-weight: 300; letter-spacing: -.065em; line-height: .9; }
[data-concept="singularity"] .descriptor { max-width: 100px; font-size: 10px; text-transform: uppercase; letter-spacing: .23em; line-height: 1.9; border-left: 1px solid #766b53; padding-left: 25px; }
[data-concept="meridian"] { background: #e9e6df; color-scheme: light; }
[data-concept="meridian"] .wordmark { top: max(8vh, env(safe-area-inset-top)); left: 7vw; color: #272927; }
[data-concept="meridian"] .initials { font-family: 'Bodoni 72', Didot, 'Times New Roman', serif; font-size: clamp(72px, 9vw, 144px); font-weight: 400; letter-spacing: -.075em; line-height: .9; }
[data-concept="meridian"] .descriptor { font-size: 9px; text-transform: uppercase; letter-spacing: .3em; margin: 22px 0 0 5px; }
[data-concept="meridian"] .grain { opacity: .055; mix-blend-mode: multiply; }
[data-concept="flux"] { background: #080b1a; }
[data-concept="flux"] .wordmark { left: 50%; top: 12vh; transform: translateX(-50%); color: #f1f1fd; text-align: center; }
[data-concept="flux"] .initials { font-size: clamp(72px, 8.5vw, 136px); font-weight: 500; letter-spacing: -.075em; line-height: .9; padding-right: .075em; }
[data-concept="flux"] .descriptor { margin-top: 25px; font-size: 10px; text-transform: uppercase; letter-spacing: .38em; white-space: nowrap; padding-left: .38em; color: #bcbcd5; }
/* A quiet, readable still composition if the device cannot create a WebGL context. */
body.no-webgl main { background: radial-gradient(ellipse at 55% 45%, #6b4a27 0, #1b1710 25%, #080807 65%); }
body.no-webgl[data-concept="meridian"] main { background: radial-gradient(ellipse at 60% 52%, #a1a9a9, #e9e6df 55%); }
body.no-webgl[data-concept="flux"] main { background: radial-gradient(ellipse at 50% 70%, #51408f, #080b1a 65%); }
@media (max-width: 600px) {
  [data-concept="singularity"] .wordmark { bottom: 8vh; left: 8vw; gap: 22px; }
  [data-concept="meridian"] .wordmark { top: 7vh; left: 8vw; }
  [data-concept="meridian"] .descriptor { font-size: 8px; letter-spacing: .23em; margin-top: 16px; }
  [data-concept="flux"] .wordmark { top: 15vh; }
  [data-concept="flux"] .descriptor { font-size: 8px; margin-top: 22px; }
}

/* Each additional concept has its own typographic placement and material palette. */
.wordmark { transition: color 1.3s ease; }
[data-concept="meridian"].secret .wordmark { color: #edf4ff; }
[data-concept="vault"] { background: #030b10; }
[data-concept="vault"] .wordmark { bottom: 7vh; left: 50%; transform: translateX(-50%); text-align: center; color: #f1d6a6; }
[data-concept="vault"] .initials { font-size: clamp(40px, 4vw, 64px); font-weight: 300; letter-spacing: .26em; padding-left: .26em; }
[data-concept="vault"] .descriptor { font-size: 8px; letter-spacing: .33em; text-transform: uppercase; margin-top: 12px; white-space: nowrap; }
[data-concept="prism"] { background: #020811; }
[data-concept="prism"] .wordmark { top: 7vh; right: 6vw; text-align: right; color: #e4f2ff; }
[data-concept="prism"] .initials { font-size: clamp(64px, 7vw, 110px); font-weight: 300; letter-spacing: -.07em; line-height: .95; }
[data-concept="prism"] .descriptor { font-size: 9px; letter-spacing: .24em; text-transform: uppercase; margin-top: 20px; }
[data-concept="ferro"] { background: #e34c23; }
[data-concept="ferro"] .wordmark { left: 6vw; bottom: 7vh; color: #201510; display: flex; align-items: flex-end; gap: 25px; }
[data-concept="ferro"] .initials { font-size: clamp(64px, 8vw, 128px); font-weight: 600; letter-spacing: -.075em; line-height: .8; }
[data-concept="ferro"] .descriptor { width: 88px; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; line-height: 1.7; }
[data-concept="lacuna"] { background: #522c30; }
[data-concept="lacuna"] main::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(30deg, #100612aa, transparent 50%); }
[data-concept="lacuna"] .wordmark { left: 7vw; bottom: 10vh; color: #fff0da; }
[data-concept="lacuna"] .initials { font-family: 'Bodoni 72', Didot, 'Times New Roman', serif; font-style: italic; font-size: clamp(100px, 13vw, 200px); letter-spacing: -.08em; line-height: .8; }
[data-concept="lacuna"] .descriptor { font-family: 'Times New Roman', serif; font-size: 15px; letter-spacing: .09em; margin-top: 30px; }
[data-concept="index"] { background: #c9d9d9; color-scheme: light; }
[data-concept="index"] .wordmark { left: 5vw; top: 6vh; color: #233333; }
[data-concept="index"] .initials { font-family: 'Courier New', monospace; font-weight: 400; font-size: clamp(52px, 5vw, 80px); letter-spacing: -.08em; line-height: .9; }
[data-concept="index"] .descriptor { margin-top: 18px; font-size: 9px; text-transform: uppercase; letter-spacing: .2em; }
[data-concept="index"].secret .wordmark { color: #e1ecf1; }
body.no-webgl[data-concept="vault"] main, body.no-webgl[data-concept="prism"] main { background: radial-gradient(ellipse at 50% 45%, #23394b, #030b10 65%); }
body.no-webgl[data-concept="ferro"] main { background: radial-gradient(ellipse at 50% 45%, #4d2218, #e34c23 65%); }
body.no-webgl[data-concept="lacuna"] main { background: radial-gradient(ellipse at 65% 30%, #ae8061, #522c30 65%); }
body.no-webgl[data-concept="index"] main { background: radial-gradient(ellipse at 50% 45%, #7a9393, #c9d9d9 65%); }
@media (max-width: 600px) {
  [data-concept="flux"] .wordmark { top: 9vh; }
  [data-concept="flux"] .initials { font-size: 66px; }
  [data-concept="vault"] .wordmark { bottom: 9vh; }
  [data-concept="prism"] .wordmark { top: 8vh; right: 8vw; }
  [data-concept="ferro"] .wordmark { bottom: 9vh; left: 8vw; gap: 20px; }
  [data-concept="ferro"] .descriptor { font-size: 9px; }
  [data-concept="lacuna"] .wordmark { left: 8vw; }
  [data-concept="index"] .wordmark { top: 8vh; left: 8vw; }
}
@media (prefers-reduced-motion: reduce) { .wordmark { transition: none; } }
[data-concept="vault"] main::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, #020709bb, transparent 32%); }
[data-concept="vault"] .wordmark { color: #eef6f6; }