:root {
  --ink: #0f2436;
  --ink-dim: rgba(15, 36, 54, .6);
  --line: rgba(15, 36, 54, .16);
  --card: rgba(255, 255, 255, .5);
  --pill: linear-gradient(180deg, #fdfdfe 0%, #dfe4ea 14%, #a9b2bd 34%, #f2f4f7 50%, #737d89 66%, #b9c1ca 84%, #eef1f4 100%);
  --f-wide: 'Lexend Zetta', 'Arial Black', sans-serif;
  --f-mono: 'DM Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: light; } }
:root[data-theme="dark"] { color-scheme: light; }
:root.dark { --ink: #eef1f6; --ink-dim: rgba(238, 241, 246, .62); --line: rgba(238, 241, 246, .16); --card: rgba(14, 16, 20, .45); }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #efeee9; color: var(--ink); font-family: var(--f-mono); font-size: 14px; line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; min-height: 100svh; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
.grain { position: fixed; inset: 0; z-index: 80; pointer-events: none; background-size: 200px 200px; }
.vig { position: fixed; inset: 0; z-index: 79; pointer-events: none; background: radial-gradient(130% 95% at 50% 45%, rgba(0,0,0,0) 58%, rgba(4, 8, 18, .22) 100%); }
.label { font-family: var(--f-mono); font-size: 12px; letter-spacing: .02em; text-transform: lowercase; }
.br::before { content: '[ '; } .br::after { content: ' ]'; }
/* slashed zero, like a camera readout */
.z { position: relative; display: inline-block; }
.z::after { content: ''; position: absolute; left: 50%; top: 36%; bottom: 42%; width: 1px; margin-left: -.5px; background: currentColor; transform: rotate(40deg); }

.pill { position: relative; display: inline-flex; align-items: center; justify-content: center; background: var(--pill); background-size: 100% 260%; background-position: 50% var(--py, 30%); color: #fff; border: 2px solid #fff; border-radius: 999px; box-shadow: inset 0 3px 6px rgba(255,255,255,.9), inset 0 -8px 14px rgba(40,48,60,.3), 0 8px 24px rgba(30,40,55,.25); transition: background-position .5s var(--ease); animation: flow 7s ease-in-out infinite alternate; overflow: hidden; touch-action: manipulation; }
/* the same liquid chrome as the main site: reflections follow the finger, it wobbles and ripples on touch */
.pill::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,.95) 0, rgba(255,255,255,.35) 18%, rgba(255,255,255,0) 42%); mix-blend-mode: soft-light; opacity: var(--glow, .5); transition: opacity .4s; pointer-events: none; z-index: 1; }
.pill:hover, .pill.touch { --glow: 1; }
.pill.jelly { animation: jelly .9s cubic-bezier(.2,.9,.3,1.4), flow 7s ease-in-out infinite alternate; }
.pill.rippling { filter: url(#liquid); }
@keyframes jelly { 0% { transform: scale(1,1); } 18% { transform: scale(1.07,.9); } 36% { transform: scale(.95,1.06); } 54% { transform: scale(1.03,.97); } 72% { transform: scale(.99,1.01); } 100% { transform: scale(1,1); } }
/* light sheen: a faint RGB reflection slides over the letters */
.pill.brand .w { color: transparent; text-shadow: none; background: linear-gradient(105deg, #fff 0%, #fff 40%, #ffc6e8 44%, #d3c6ff 47.5%, #b8f0ff 51%, #c8ffd9 54.5%, #fff 58%, #fff 100%); background-size: 300% 100%; background-position: var(--sp, 0%) 0; -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 1px 1px rgba(20,26,36,.5)); transition: background-position .35s var(--ease), filter .4s; }
.pill.brand .w.lit { filter: drop-shadow(0 1px 1px rgba(20,26,36,.5)) drop-shadow(-1px 0 0 rgba(255,60,140,.3)) drop-shadow(1px 0 0 rgba(40,200,255,.35)); }
.pill::after { content: ''; position: absolute; left: 10%; right: 10%; top: 6%; height: 38%; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,0)); pointer-events: none; }
.pill .w { position: relative; z-index: 1; font-family: var(--f-wide); font-weight: 500; letter-spacing: -.02em; text-shadow: 0 1px 1px rgba(20, 26, 36, .55); }
@keyframes flow { from { background-position: 50% 20%; } to { background-position: 50% 80%; } }

header { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; pointer-events: none; }
header > * { pointer-events: auto; }
header .pill { height: 38px; padding: 0 18px; }
header .pill .w { font-size: 14px; }
header .crumb { display: flex; gap: 14px; color: var(--ink-dim); }
header .crumb a:hover { color: var(--ink); }

/* page arrival and exit: a soft haze wipe, so each page feels like its own room */
.veil { position: fixed; inset: 0; z-index: 90; pointer-events: none; background: radial-gradient(120% 90% at 50% 50%, rgba(240,242,247,.96), rgba(200,210,226,.98)); opacity: 1; transition: opacity .9s var(--ease); }
.dark .veil { background: radial-gradient(120% 90% at 50% 50%, rgba(30,33,40,.97), rgba(8,9,12,.99)); }
.veil.off { opacity: 0; }
.veil.on { opacity: 1; transition-duration: .45s; }

footer { padding: 30px 24px 40px; text-align: center; color: var(--ink-dim); }
@media (max-width: 560px) { header { padding: 14px 16px; } }
@media (max-width: 760px) { header { position: absolute; } }
@media (prefers-reduced-motion: reduce) { .pill { animation: none; } .pill.rippling { filter: none; } .veil { transition: none; } }