/* cr01.ai: one dark page, the pulse behind it. Ground #0B0B0B, bone #ECEAE5, signal green only as dots. */
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('fonts/IBMPlexSans-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('fonts/IBMPlexSans-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
:root { --ground: #0B0B0B; --bone: #ECEAE5; --muted: #8E939B; --graphite: #24262A; --green: #3DDC84; --dot: 236,234,229; --shade: 11,11,11; color-scheme: dark; --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; --sans: 'IBM Plex Sans', system-ui, sans-serif; }
/* light: the brand's paper and charcoal; the green dots stay green */
:root[data-theme="light"] { --ground: #F4F2EE; --bone: #141413; --muted: #6B7078; --graphite: #D9D6D0; --dot: 20,20,19; --shade: 244,242,238; color-scheme: light; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) { --ground: #F4F2EE; --bone: #141413; --muted: #6B7078; --graphite: #D9D6D0; --dot: 20,20,19; --shade: 244,242,238; color-scheme: light; } }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--ground); color: var(--bone); transition: background 300ms ease, color 300ms ease; font-family: var(--sans); overflow: hidden; -webkit-font-smoothing: antialiased; touch-action: manipulation; }
#pulse { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
.stage { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 0 clamp(20px, 7vw, 120px); pointer-events: none; }
.stage::before { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(64% 64% at 24% 52%, rgba(var(--shade),0.96), rgba(var(--shade),0) 74%); pointer-events: none; }
.stage > * { pointer-events: auto; position: relative; z-index: 1; }
.mark { width: clamp(44px, 6vw, 72px); height: clamp(44px, 6vw, 72px); margin-bottom: 18px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14%; }
.mark i { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--bone); opacity: 0; transform: scale(0.4); transition: opacity 420ms ease, transform 520ms cubic-bezier(.2,.9,.3,1.2); }
.mark i.on { opacity: 1; transform: scale(1); }
.mark i.dim { opacity: 0.16; transform: scale(1); }
.mark i.green { background: var(--green); }
.word { margin: 0; font-family: var(--mono); font-weight: 500; font-size: clamp(40px, 9vw, 112px); letter-spacing: -0.02em; line-height: 1; }
.word .dash { color: var(--muted); font-weight: 400; margin: 0 0.04em; }
.line { margin: 22px 0 0; font-family: var(--mono); font-size: clamp(14px, 1.6vw, 20px); color: var(--bone); min-height: 1.6em; letter-spacing: 0.02em; }
.line .g { color: var(--muted); }
.tele { margin: 10px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
.tilt { margin-top: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone); background: transparent; border: 1px solid var(--graphite); border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.tilt:hover { border-color: var(--muted); }
.theme { position: fixed; top: calc(16px + env(safe-area-inset-top)); right: clamp(16px, 4vw, 40px); z-index: 2; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); background: transparent; border: 1px solid var(--graphite); border-radius: 999px; padding: 7px 12px; cursor: pointer; }
.theme:hover { color: var(--bone); border-color: var(--muted); }
.foot { position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 26px; padding: 18px clamp(20px, 7vw, 120px) calc(18px + env(safe-area-inset-bottom)); font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: lowercase; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover, .foot a:focus-visible { color: var(--bone); outline: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
@media (max-aspect-ratio: 4/5) { .stage { justify-content: flex-start; padding-top: 24vh; } .stage::before { background: radial-gradient(70% 36% at 30% 36%, rgba(var(--shade),0.94), rgba(var(--shade),0) 72%); } .word { font-size: clamp(44px, 14vw, 72px); } .line { font-size: 15px; } .tele { font-size: 10px; letter-spacing: 0.08em; } }
@media (max-height: 520px) { .mark { display: none; } .line { margin-top: 12px; } }
@media (prefers-reduced-motion: reduce) { .mark i { transition: none; } }