:root {
  --bg: #070707; --bg-2: #0c0c0c; --bg-3: #111;
  --fg: #ededdf; --fg-2: #cfcfc4; --muted: #6e6e66; --muted-2: #3a3a36;
  --line: #ededdf14; --line-2: #ededdf29;
  --accent: #c9f558; --accent-dim: #c9f5582e; --accent-2: #e8c47a; --accent-2-dim: #e8c47a2e;
  --serif: "IBM Plex Sans Condensed", "Helvetica Neue", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --sans: "Geist", "Helvetica Neue", sans-serif;
  --gutter: max(40px, 50vw - 720px);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
button { color: inherit; cursor: pointer; background: none; border: 0; padding: 0; font-family: inherit; }
::selection { background: var(--accent); color: #0a0a0a; }
.serif { font-family: var(--serif); }
.shell { position: relative; z-index: 3; max-width: 1440px; margin: 0 auto; padding: 0 24px; }
.kick { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 0; }

.bg-gradient { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(1200px 600px at 80% -10%, #c9f5580f, transparent 60%), radial-gradient(900px 700px at -10% 30%, #ffffff06, transparent 60%); }
.noise { position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* scroll frame and back-to-top */
.frame { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 32; pointer-events: none; }
.frame path { fill: none; stroke: url(#frame-grad); stroke-width: 3.5px; stroke-linecap: round; }
.return-top { position: fixed; top: 20px; right: 24px; z-index: 40; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; background: #0c0c0ceb; border: 1px solid #ededdf59; color: var(--fg-2); opacity: 0; pointer-events: none;
  transition: opacity .3s, border-color .25s var(--ease), box-shadow .25s var(--ease), color .25s; }
.return-top.show { opacity: 1; pointer-events: auto; }
.return-top:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 1px var(--accent-dim), 0 0 24px var(--accent-dim); }

/* preloader */
.preloader { position: fixed; inset: 0; z-index: 9000; overflow: hidden; transition: transform .9s var(--ease);
  background: radial-gradient(120% 60% at 50% -5%, #ffffff0b, transparent 55%), radial-gradient(80% 50% at 50% 100%, #c9f55808, transparent 60%), var(--bg); }
.preloader.done { transform: translateY(-100%); }
.pre-tl { position: absolute; top: 28px; left: 28px; font: 400 13px var(--mono); letter-spacing: .18em; color: var(--accent); }
.pre-hud { position: absolute; left: 28px; bottom: 28px; display: flex; flex-direction: column; gap: 6px; }
.pre-status { margin: 0; display: flex; align-items: center; gap: 6px; font: 400 12px var(--mono); letter-spacing: .18em; color: var(--accent-2); }
.pre-cur { width: 7px; height: 12px; background: var(--accent-2); animation: blink 1s step-end infinite; }
.pre-pct { font: 500 13px var(--mono); letter-spacing: .14em; color: var(--accent-2); }
.pre-line { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--muted-2); }
.pre-line i { position: absolute; inset: 0; background: var(--accent); transform-origin: 0; transform: scaleX(0); box-shadow: 0 0 18px var(--accent), 0 0 48px #c9f55859; }
.pre-center { position: absolute; inset: 0; display: grid; place-items: center; }
.boxes { --sz: 44px; width: calc(var(--sz) * 3); height: calc(var(--sz) * 2); position: relative; transform-style: preserve-3d; transform: rotateX(60deg) rotate(45deg); }
.box { position: absolute; top: 0; left: 0; width: var(--sz); height: var(--sz); transform-style: preserve-3d; background: #d8ff78; }
.box::before, .box::after { content: ""; position: absolute; width: var(--sz); height: var(--sz); transform-origin: 0 0; }
.box::before { background: var(--accent); transform: translateY(var(--sz)) rotateX(90deg); }
.box::after { background: #7ab020; transform: translateX(var(--sz)) rotateY(-90deg); }
.b1 { animation: bx1 .8s linear infinite; } .b2 { animation: bx2 .8s linear infinite; }
.b3 { animation: bx3 .8s linear infinite; } .b4 { animation: bx4 .8s linear infinite; }
@keyframes bx1 { 0%, 50% { transform: translate(100%, 0) translateZ(var(--sz)); } 100% { transform: translate(200%, 0) translateZ(var(--sz)); } }
@keyframes bx2 { 0% { transform: translate(0, 100%) translateZ(var(--sz)); } 50% { transform: translate(0, 0) translateZ(var(--sz)); } 100% { transform: translate(100%, 0) translateZ(var(--sz)); } }
@keyframes bx3 { 0%, 50% { transform: translate(100%, 100%) translateZ(var(--sz)); } 100% { transform: translate(0, 100%) translateZ(var(--sz)); } }
@keyframes bx4 { 0% { transform: translate(200%, 0) translateZ(var(--sz)); } 50% { transform: translate(200%, 100%) translateZ(var(--sz)); } 100% { transform: translate(100%, 100%) translateZ(var(--sz)); } }
@keyframes blink { 50% { opacity: 0; } }

/* hero: pinned while About slides over it */
.stack { position: relative; }
.hero { position: sticky; top: 0; z-index: 1; height: 100svh; display: flex; flex-direction: column; justify-content: space-between;
  gap: clamp(12px, 2vh, 20px); padding: clamp(12px, 1.7vh, 18px) var(--gutter) clamp(16px, 2.2vh, 28px); overflow: hidden; }
.stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero-scrim { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 130% 80% at 50% 100%, #0c0c0c 0%, transparent 55%), radial-gradient(ellipse 52% 62% at 50% 38%, #07070799 0%, #0707074d 45%, transparent 72%); }
.hero-spline { position: absolute; top: 0; bottom: 0; right: 0; left: 48%; z-index: 1; transform: translateX(8%); overflow: hidden; opacity: 0; transition: opacity .8s; }
.hero-spline.ready { opacity: 1; }
.hero-spline canvas { display: block; width: 100% !important; height: 100% !important; }
.hero > *:not(.stars):not(.hero-scrim):not(.hero-spline) { position: relative; z-index: 3; }
.hero > .hero-identity, .hero > .manifesto-block, .hero > .hero-bottom { pointer-events: none; }
.hero .metrics, .hero .cta-btn, .hero .terminal, .hero .manifesto-quote, .hero .manifesto-focus { pointer-events: auto; }

.meta-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 16px; font: 400 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2);
  text-shadow: 0 0 1px #070707f2, 0 1px 3px #070707bf; }
.meta-row > span { border: 1px solid var(--line); background: #070707e0; border-radius: 4px; padding: 6px 10px; }
.meta-role { justify-self: start; white-space: nowrap; }
.meta-role #matrix { display: inline-block; min-width: 26ch; }
.br { color: var(--accent); font-weight: 500; text-shadow: 0 0 6px var(--accent), 0 0 14px var(--accent-dim); }
.br:first-child { margin-right: 8px; } .br:last-child { margin-left: 8px; }
.mx-g { color: var(--accent); text-shadow: 0 0 6px var(--accent), 0 0 14px var(--accent-dim); }
.meta-mail { justify-self: center; text-transform: none; }
.meta-mail a:hover { color: var(--accent); text-shadow: 0 0 8px var(--accent-dim); }
.tw-caret { color: var(--accent); font-style: normal; margin-left: 2px; animation: blink 1s steps(2, end) infinite; }
.meta-social { justify-self: end; display: flex; gap: 8px; margin-right: calc(22vw - var(--gutter) - 243px); }
.soc { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 4px; background: #070707e0;
  font: 400 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); text-shadow: none;
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease); }
.soc svg { width: 14px; height: 14px; flex-shrink: 0; }
.soc:hover { color: var(--accent); border-color: var(--accent); background: #c9f5581a; box-shadow: 0 0 20px #c9f5582e; }

.hero-identity { display: flex; flex-direction: column; gap: clamp(12px, 2vh, 20px); }
.hero h1 { margin: 0 0 0 -.05em; font: 500 min(clamp(90px, 9.6vw, 152px), 17vh)/.92 var(--serif); letter-spacing: -.02em; white-space: nowrap; }
.hero h1 .line { display: inline-block; }
.hero h1 .last { color: var(--accent-2); }
.hero h1 .ch { display: inline-block; opacity: 0; transform: translateY(.3em); filter: blur(6px); animation: chIn .9s var(--ease) forwards; }
@keyframes chIn { to { opacity: 1; transform: none; filter: none; } }
.hero-dot { color: var(--accent); font-style: italic; text-shadow: 0 0 8px #c9f558e6, 0 0 18px #c9f55880, 0 0 34px #c9f55847; }
.headline { margin: 0; font: 400 clamp(14px, 1.7vw, 26px)/1.15 var(--serif); letter-spacing: -.02em; white-space: nowrap; }
.hl-role { font-size: 1.2em; font-weight: 700; }
.hl-ai { color: var(--accent-2); font-weight: 600; text-shadow: 0 0 10px #e8c47aa6, 0 0 24px #e8c47a47; }

.manifesto-block { display: flex; flex-direction: column; gap: clamp(18px, 2.8vh, 32px); max-width: clamp(581px, 54.9vw, 791px); }
.manifesto-quote, .manifesto-focus { position: relative; margin: 0; padding-left: clamp(16px, 1.35vw, 22px); font: 400 clamp(15px, 1.2vw, 19px)/1.55 var(--sans); color: #ededdfc7; }
.manifesto-quote { text-align: justify; letter-spacing: -.005em; max-width: 66ch; }
.manifesto-quote b { color: var(--fg); font-weight: 500; }
.manifesto-quote::before, .manifesto-focus::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: #c9f558a6; box-shadow: 0 0 6px #c9f5588c, 0 0 16px #c9f55833; }
.manifesto-focus::before { width: 1.5px; background: #c9f558cc; }
.manifesto-focus .serif { color: var(--accent-2); font-style: italic; font-size: 1.08em; text-shadow: 0 0 8px #e8c47ae6, 0 0 22px #e8c47a8c, 0 0 48px #e8c47a38; }

.hero-bottom { position: relative; display: flex; align-items: flex-start; width: 100%; }
.hero-manifesto { display: flex; flex-direction: column; gap: clamp(28px, 4.5vh, 48px); flex: 1 1 0; max-width: clamp(581px, 54.9vw, 791px); }
.metrics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mf { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 16px; border: 1px solid var(--line);
  background: linear-gradient(160deg, #ffffff0a 0%, #0a0a0af0 40%); transition: border-color .28s, background .28s, box-shadow .28s; }
.mf::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--accent); opacity: .7; transform-origin: 0; transform: scaleX(.16);
  transition: transform .34s var(--ease), opacity .28s; box-shadow: 0 0 8px #c9f55899, 0 0 20px #c9f55833; }
.mf:hover { border-color: var(--accent); background: linear-gradient(160deg, #c9f5580b 0%, #08090ce0 40%); box-shadow: 0 22px 44px -18px #000000a6, 0 0 0 1px #c9f55833, 0 0 30px -8px #c9f55842; }
.mf:hover::before { opacity: 1; transform: scaleX(1); }
.mf-icon { display: inline-flex; color: var(--accent-2); filter: drop-shadow(0 0 5px #e8c47aa6) drop-shadow(0 0 12px #e8c47a47); transition: color .24s, filter .24s; }
.mf:hover .mf-icon { color: var(--accent); filter: drop-shadow(0 0 5px #c9f558b3) drop-shadow(0 0 14px #c9f5584d); }
.mf-icon svg { width: 20px; height: 20px; }
.mf-num { font: 500 clamp(22px, 2vw, 28px)/1 var(--serif); letter-spacing: -.02em; color: var(--accent); }
.mf-label { font: 400 10px/1.25 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-2); }
.manifesto-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding-top: 10px; border-top: 1px solid var(--line); }
.quote-sm { margin: 0; padding-left: clamp(14px, 1.1vw, 18px); border-left: 1px solid var(--accent-dim); font: 400 clamp(14px, 1.05vw, 17px)/1.55 var(--sans); color: var(--fg-2); }
.quote-sm .serif { color: var(--accent-2); font-style: italic; font-size: 1.08em; text-shadow: 0 0 6px #e8c47aa6, 0 0 16px #e8c47a52; }
.cta-btn { display: inline-block; transform: skew(-6deg); padding: 12px 28px; border: 1px solid var(--accent); border-radius: 6px; color: var(--accent);
  background: linear-gradient(#c9f5581a, #c9f5581a), #090a08f0; font: 500 24px/1.1 var(--serif); box-shadow: 0 0 20px #c9f5581a;
  transition: background .25s var(--ease), box-shadow .25s var(--ease); }
.cta-btn:hover { background: #c9f55824; box-shadow: 0 0 30px #c9f5584d; }
.scramble .sc { display: inline-block; min-width: .7em; text-align: center; }
.scramble .sc.on { color: var(--fg); }

.sub { position: absolute; z-index: 3; bottom: 0; width: min(486px, 37.8vw); left: calc(78vw - min(243px, 18.9vw) - var(--gutter)); }
.terminal { position: relative; overflow: hidden; width: 100%; border: 1px solid var(--line-2); background: linear-gradient(#0c0c0cbf, #070707d1);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); font: 400 12px var(--mono); transition: box-shadow .22s, border-color .22s; }
.terminal:hover { border-color: var(--accent); box-shadow: 0 0 0 1px #c9f5581a, 0 16px 48px -14px #c9f55838; }
.terminal .bar { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 5px 12px; font-size: 11px; letter-spacing: .14em; color: var(--muted);
  background: linear-gradient(#ededdf0e, transparent 58%), #0707073d; border-bottom: 1px solid #ededdf1f; box-shadow: inset 0 1px #ededdf14; }
.terminal .bar::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(transparent 0 2px, #ffffff06 2px 3px); }
.lights { display: flex; gap: 6px; }
.lights span { width: 8px; height: 8px; border-radius: 50%; border: 1px solid #ededdf14; background: #ededdf1a; }
.lights span:first-child { background: #c9f5584d; } .lights span:nth-child(2) { background: #ededdf2e; }
.bar-title { color: var(--fg-2); text-transform: uppercase; }
.bar-shell { color: var(--accent-2); text-shadow: 0 0 6px #e8c47ab3, 0 0 16px #e8c47a52; }
.terminal .body { padding: 8px 14px 10px; }
.term-prompt { display: flex; align-items: center; font-size: 11px; letter-spacing: .08em; margin-bottom: 12px; }
.tone-muted { color: var(--muted); } .tone-accent { color: var(--accent); } .tone-gold { color: var(--accent-2); }
.cur { display: inline-block; width: 7px; height: 13px; margin-left: 4px; background: var(--accent); vertical-align: -2px; animation: blink 1s step-end infinite; }
.term-hint { margin-left: 10px; font-size: .82em; font-style: italic; color: var(--muted); white-space: nowrap; }
.term-output { min-height: 132px; }
.term-line { color: var(--fg-2); margin: 0 0 3px; line-height: 1.45; font-size: 11.5px; }
.term-line .k { color: var(--fg-2); }
.term-line .v { color: var(--fg); }
.term-line .v.ok { color: var(--accent); }
.term-line a { color: var(--accent); text-decoration: underline; text-decoration-color: #c9f55873; text-underline-offset: 3px; }
.term-cmds { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.term-cmds button { font: 400 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-2); padding: 3px 8px; transition: color .2s, border-color .2s; }
.term-cmds button:hover { color: var(--accent); border-color: var(--accent); }

/* section heads */
.section-head { display: grid; grid-template-columns: 96px 1fr auto; align-items: end; gap: 28px; padding: 120px 0 48px; border-top: 1px solid var(--line); }
.section-head .idx, .journey-header .idx { font: 400 96px/.85 var(--serif); color: var(--fg); }
.section-head .title, .journey-header .title { margin: 0; font: 400 56px/1 var(--serif); letter-spacing: -.02em; }
.section-head .title em, .journey-header .title em, .footer .big em { color: var(--muted); font-style: italic; }
.section-head .right { margin: 0; max-width: 280px; text-align: right; font: 400 11px/1.6 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

/* about */
.about { position: relative; z-index: 2; min-height: 100svh; background: var(--bg-2); border-top: 1px solid var(--line); border-radius: 32px 32px 0 0;
  padding: clamp(40px, 7vh, 80px) 0 clamp(80px, 14vh, 160px); display: flex; flex-direction: column; }
.about .section-head { border-top: 0; padding-top: 0; }
.statement { margin: clamp(24px, 3vh, 40px) 0 0; max-width: 46ch; font: 500 clamp(30px, 3.2vw, 54px)/1.15 var(--serif); letter-spacing: -.02em; }
.statement .w { position: relative; display: inline-block; margin-right: .28em; }
.statement .w .g { position: absolute; opacity: .2; pointer-events: none; }
.statement .w .f { position: relative; display: inline-block; opacity: 0; transition: opacity .25s; }
.statement .w.on .f { opacity: 1; }
.statement .w.hl { color: var(--accent); }
.statement .w.hl .f { text-shadow: 0 0 8px #c9f5588c, 0 0 22px #c9f55852, 0 0 42px #c9f5582e; }
.statement .w.em { color: var(--accent-2); font-style: italic; }
.tech { margin-top: clamp(48px, 8vh, 96px); }
.tech-kicker { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 clamp(24px, 4vh, 44px);
  font: 400 11px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--accent-2); }
.tech-kicker::before, .tech-kicker::after { content: ""; flex: 0 1 clamp(32px, 8vw, 120px); height: 1px; background: var(--line); }
.tech-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(36px, 5.5vw, 80px); }
.tech-row li { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tech-row img { width: 46px; height: 46px; filter: invert(93%) sepia(6%) saturate(300%) hue-rotate(20deg); transition: filter .25s var(--ease); }
.tech-row span { font: 400 11px var(--mono); letter-spacing: .02em; color: var(--muted); transition: color .25s; }
.tech-row li:hover img { filter: invert(86%) sepia(60%) saturate(560%) hue-rotate(25deg) drop-shadow(0 0 8px #c9f5588c); }
.tech-row li:hover span { color: var(--fg-2); }

main { position: relative; z-index: 2; background: var(--bg); }

/* clients */
.marquee { overflow: hidden; margin: 0 0 40px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.track { display: flex; align-items: center; gap: 76px; width: max-content; padding: 26px 38px; animation: slide 50s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
.track img { display: block; height: 34px; width: auto; opacity: .82; transition: opacity .25s, transform .25s; }
.track img:hover { opacity: 1; transform: scale(1.06); }
.track .lg-gov { height: 60px; } .track .lg-tall { height: 62px; } .track .lg-word { height: 20px; } .track .lg-wide { height: 30px; } .track .lg-mid { height: 40px; }
@keyframes slide { to { transform: translateX(calc(-50% - 38px)); } }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; }
.card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--line);
  background: linear-gradient(160deg, #ffffff0a 0%, #0a0a0af0 40%); transition: border-color .28s, box-shadow .28s; }
.card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--accent); opacity: .7; transform-origin: 0; transform: scaleX(.12);
  transition: transform .34s var(--ease), opacity .28s; box-shadow: 0 0 8px #c9f55899; }
.card:hover { border-color: var(--accent); box-shadow: 0 22px 44px -18px #000000a6, 0 0 30px -8px #c9f55842; }
.card:hover::before { transform: scaleX(1); opacity: 1; }
.card.gov::before { background: var(--accent-2); box-shadow: 0 0 8px #e8c47a99; }
.card.gov .kick { color: var(--accent-2); }
.card .kick { color: var(--accent); font-size: 10px; letter-spacing: .14em; }
.card p:not(.kick) { margin: 0; color: var(--fg-2); font-size: 14px; line-height: 1.6; }
.c-6 { grid-column: span 6; } .c-4 { grid-column: span 4; }
.card-logo { height: 44px; width: auto; max-width: 100%; object-fit: contain; object-position: left; align-self: flex-start; }
.card-logo.word { height: 26px; margin: 9px 0; }
.card-logo.gov { height: 72px; } .card-logo.tall { height: 72px; }
.logo-pair { display: flex; align-items: center; gap: 18px; } .logo-pair .gov { height: 58px; }
.card.lab { min-height: 260px; } .card.lab .card-logo { height: 50px; } .card.lab .card-logo.word { height: 30px; margin: 10px 0; }
.via { margin-top: auto; display: flex; align-items: center; gap: 14px; padding-top: 14px; border-top: 1px solid var(--line); font: 400 10px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.via img { height: 18px; width: auto; opacity: .85; }
.via b { font: 600 13px var(--sans); letter-spacing: .22em; color: var(--fg-2); }

/* what I do */
.wid { --row: calc(clamp(48px, 8.25vw, 135px) * .92); position: relative; height: calc(100vh * 6.2); }
.wid-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.wid .section-head { padding: 32px 0 48px; border-top: 1px solid var(--line); }
.wid-pin > .shell { width: 100%; }
.wid-stage { --band-w: calc(min(50vw, 720px) - 24px); clip-path: inset(0 0 -100vh 0); position: relative; flex: 1; width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 24px; }
.wid-left { position: relative; height: 100%; }
.wid-stack { position: absolute; top: 0; left: 0; will-change: transform; }
.wid-word { display: block; width: max-content; height: var(--row); margin: 0; font: 700 clamp(48px, 8.25vw, 135px)/.92 var(--serif); letter-spacing: -.03em; text-transform: uppercase; white-space: nowrap; color: var(--fg); cursor: pointer; user-select: none; transition: transform .25s; }
.wid-stack:not(.ko) .wid-word:hover { transform: translateX(6px); }
.wid-band { position: absolute; left: 0; top: var(--row); width: var(--band-w); height: var(--row); background: var(--accent); overflow: hidden; z-index: 2; pointer-events: none; }
.wid-stack.ko .wid-word { color: var(--bg); }
.wid-viz { position: absolute; top: 0; bottom: 0; left: var(--viz-left, calc(50vw + 48px)); right: max(24px, 50vw - 696px); pointer-events: none; }
.wid-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .55s; display: flex; flex-direction: column; justify-content: center; padding: 4vh 0 22vh; }
.wid-layer.on { opacity: 1; }
.wid-caption { position: absolute; top: 0; bottom: 0; left: var(--viz-left, calc(50vw + 48px)); right: max(24px, 50vw - 696px); z-index: 5; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 0 22px 88px 14px; pointer-events: none; }
.cap-block { display: flex; align-items: stretch; }
.cap-bar { flex-shrink: 0; width: 1.5px; background: #c9f55880; box-shadow: 0 0 8px #c9f55847; }
.cap-text { position: relative; overflow: hidden; margin: 0; padding-left: 14px; max-width: 78ch; font: 400 clamp(12px, .95vw, 13.5px)/1.7 var(--mono); color: var(--fg-2); text-shadow: 0 1px 10px #000000a6; pointer-events: auto; }
.cap-text b { color: var(--accent-2); font-weight: 400; text-shadow: 0 0 12px #e8c47a8c, 0 0 28px #e8c47a38; }
.cap-text.in { animation: capIn .5s var(--ease) both; }
@keyframes capIn { from { opacity: 0; transform: translateY(8px); } }
.cap-more { display: none; }

/* shared viz styles */
.vz { font-family: var(--mono); color: var(--muted); }
.vz-head { display: flex; justify-content: space-between; align-items: center; padding: 0 2px 9px; border-bottom: 1px solid var(--line-2); font-size: 8px; letter-spacing: .14em; }
.vz-head .ok { color: var(--accent); } .vz-head .gold { color: var(--accent-2); }
.vz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.vz-cell { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px 9px; border: 1px solid var(--line); background: #0707078c; border-radius: 2px; transition: border-color .45s, box-shadow .45s; }
.vz-cell.alert { border-color: #e8c47a80; box-shadow: 0 0 14px #e8c47a1a; }
.vz-cell-head { display: flex; justify-content: space-between; align-items: center; font-size: 8px; letter-spacing: .18em; text-transform: uppercase; }
.vz-badge { font-size: 7px; letter-spacing: .12em; padding: 1.5px 4px; border-radius: 2px; color: var(--accent); border: 1px solid #c9f55847; }
.vz-badge.warn { color: var(--accent-2); border-color: #e8c47a80; animation: pulse .9s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.vz-bars { display: flex; align-items: flex-end; gap: 5px; height: 54px; }
.vz-bars i { flex: 1; height: 100%; background: var(--muted-2); border-radius: 1px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.vz-bars i b { display: block; width: 100%; background: var(--accent); box-shadow: 0 0 6px #c9f5584d; transition: height .5s var(--ease); }
.vz-bars.gold i b { background: var(--accent-2); box-shadow: 0 0 5px #e8c47a40; }
.vz-foot { display: flex; align-items: baseline; gap: 4px; font-size: 11px; color: var(--accent); }
.vz-foot small { font-size: 7px; letter-spacing: .1em; color: var(--muted); }
.vz-track { height: 9px; background: var(--muted-2); border-radius: 1px; overflow: hidden; }
.vz-track b { display: block; height: 100%; background: var(--accent); box-shadow: 2px 0 8px #c9f55866; transition: width .6s var(--ease); }
.vz-big { font-size: 21px; letter-spacing: .05em; color: var(--accent); text-shadow: 0 0 16px #c9f55859; text-align: center; }
.vz-log { display: flex; flex-direction: column; gap: 3px; max-height: 58px; overflow: hidden; margin-top: 12px; padding-top: 7px; border-top: 1px solid var(--line); font-size: 8px; letter-spacing: .08em; }
.vz-log p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: logIn .3s forwards; }
.vz-log p.gold { color: var(--accent-2); }
@keyframes logIn { from { opacity: 0; transform: translateY(4px); } }
.vz svg text { font-family: var(--mono); }

/* journey */
.journey { position: relative; border-top: 1px solid var(--line); }
.journey-bg { position: absolute; inset: 0; }
.journey-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.journey-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.journey-scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #070707f0 0%, #070707e6 35%, #0707078c 50%, transparent 68%), linear-gradient(#07070766 0%, transparent 22%), linear-gradient(transparent 74%, #07070773 100%); }
.globe-hud { position: absolute; right: max(24px, 50vw - 696px); top: 92px; display: flex; gap: 18px; font: 400 10px var(--mono); letter-spacing: .16em; color: var(--muted); pointer-events: none; }
.globe-hud b { color: var(--accent); font-weight: 500; }
.globe-hud .where { color: var(--fg-2); }
.globe-legend { position: absolute; right: max(24px, 50vw - 696px); bottom: 108px; display: flex; gap: 18px; font: 400 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); pointer-events: none; }
.globe-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 7px; }
.globe-legend .lv { background: #d6ff78; } .globe-legend .vs { background: #5ed6e6; } .globe-legend .og { background: var(--accent-2); }
.journey-track { position: relative; z-index: 1; padding: 120px 48px 0 calc(max(0px, 50vw - 720px) + 24px); pointer-events: none; }
.journey-track a, .journey-track .chips li { pointer-events: auto; }
.journey-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 120px; }
.journey-body { position: relative; }
.spine { position: absolute; top: 0; bottom: 0; left: 19px; width: 2px; overflow: hidden; }
.spine-track { position: absolute; inset: 0; background: var(--line); mask-image: linear-gradient(transparent 0%, #000 8% 92%, transparent 100%); }
.spine-fill { position: absolute; left: 0; right: 0; top: 0; height: 0; border-radius: 999px; background: linear-gradient(var(--accent), var(--accent-2)); }
.entry { display: flex; align-items: flex-start; gap: 48px; min-height: min(92vh, 820px); padding-bottom: 120px; }
.entry:last-child { min-height: min(70vh, 620px); padding-bottom: 48px; }
.marker { position: sticky; top: 96px; display: flex; align-items: flex-start; gap: 12px; flex-shrink: 0; width: 160px; }
.marker .dot { flex-shrink: 0; width: 14px; height: 14px; margin: 8px 0 0 13px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); transition: background .4s, border-color .4s, box-shadow .4s; }
.entry.active .marker .dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px var(--accent); }
.marker div { display: flex; flex-direction: column; gap: 4px; }
.year { font: 400 28px var(--serif); color: var(--fg-2); }
.mlabel { font: 400 9px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.content { display: flex; flex-direction: column; gap: 32px; align-self: center; max-width: 460px; }
.quote { display: flex; flex-direction: column; margin: 0; font: 400 56px/1.05 var(--serif); letter-spacing: -.02em; }
.quote .qa { color: var(--accent); }
.deck { margin: 0; max-width: 44ch; font: 400 14px/1.7 var(--sans); color: var(--fg-2); }
.deck em { font-family: var(--serif); font-style: italic; color: var(--accent-2); }
.meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.meta li { display: flex; align-items: center; gap: 8px; font: 400 13px var(--mono); letter-spacing: .14em; color: var(--fg-2); }
.ic { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; border: 1px solid var(--line-2); border-radius: 2px; }
.ic svg { width: 13px; height: 13px; fill: none; stroke: var(--fg-2); stroke-width: 1.6; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 4px 12px; border: 1px solid var(--line-2); border-radius: 999px; font: 400 11px var(--sans); letter-spacing: .08em; color: var(--fg-2); transition: color .25s, border-color .25s; }
.chips li:hover { color: var(--accent); border-color: var(--accent); }
.scene.threads { display: flex; align-items: baseline; gap: 8px; }
.scene.threads b { font: 400 60px/1 var(--serif); color: var(--accent); }
.scene.threads span { font: 400 13px var(--sans); color: var(--muted); }
.scene.route svg { width: 100%; height: 64px; overflow: visible; }
.scene.route path { fill: none; stroke: var(--accent); stroke-width: .8; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.scene.route circle { fill: var(--accent); }
.scene.route div { display: flex; justify-content: space-between; margin-top: 8px; font: 400 13px var(--sans); color: var(--muted); }
.scene.term-line { display: flex; align-items: center; gap: 8px; height: 32px; color: var(--accent); font: 400 20px var(--mono); }
.scene.term-line i { width: 12px; height: 26px; background: var(--accent); border-radius: 1px; animation: blink 1s step-end infinite; }

/* projects accordion */
.acc { display: flex; height: 580px; border: 1px solid var(--line-2); overflow: hidden; }
.acc-card { position: relative; overflow: hidden; flex: 0 0 52px; border-right: 1px solid var(--line-2); background: var(--bg); cursor: pointer; transition: flex-basis .6s var(--ease), background .25s; }
.acc-card:last-child { border-right: 0; }
.acc-card:not(.open):hover { background: #c9f55808; }
.acc-card.open { flex: 1 1 auto; cursor: default; }
.acc-col { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 22px 0; transition: opacity .3s; }
.acc-col b { font: 400 24px/1 var(--serif); color: var(--muted); }
.acc-col span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font: 400 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
.acc-card.open .acc-col { opacity: 0; pointer-events: none; }
.acc-open { position: absolute; inset: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); min-width: 0; opacity: 0; transition: opacity .4s .15s; }
.acc-card.open .acc-open { opacity: 1; }
.acc-info { display: flex; flex-direction: column; justify-content: space-between; padding: 30px 26px; border-right: 1px solid var(--line-2); }
.acc-num { font: 400 60px/.9 var(--serif); color: var(--muted); }
.acc-info h3 { margin: 8px 0 0; font: 400 36px/1 var(--serif); letter-spacing: -.02em; }
.acc-role { margin-top: 10px; font: 400 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); }
.acc-blurb { margin: 14px 0; max-width: 42ch; font: 400 13px/1.6 var(--sans); color: var(--fg-2); }
.acc-stack { display: flex; flex-wrap: wrap; gap: 6px; }
.acc-stack span { padding: 4px 8px; border: 1px solid var(--line-2); font: 400 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
.acc-links { display: flex; gap: 18px; margin-top: 14px; font: 400 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.acc-links a:first-child { color: var(--accent); } .acc-links a:last-child { color: var(--muted); }
.pj { position: relative; overflow: hidden; background: linear-gradient(#0f0f0fb3, #080808f2); }
.pj-head { display: flex; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--line); font: 400 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pj-body { position: absolute; inset: 37px 0 0; padding: 24px; }
.upstream { display: grid; grid-template-columns: 1fr auto; gap: 6px 30px; align-items: center; margin-top: 10px; padding: 24px 26px; border: 1px dashed #c9f55859;
  background: linear-gradient(90deg, #c9f5580a, transparent 60%); transition: border-color .25s; }
.upstream:hover { border-color: var(--accent); }
.upstream .kick { grid-column: 1 / -1; color: var(--accent); }
.upstream b { font: 400 28px/1.15 var(--serif); letter-spacing: -.01em; }
.upstream .up-sub { grid-column: 1; font: 400 14px var(--sans); color: var(--fg-2); }
.upstream i { grid-column: 2; grid-row: 2 / 4; font: 400 12px var(--mono); font-style: normal; letter-spacing: .12em; color: var(--accent); }

.contribs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 30px; }
.contribs li { padding: 16px 0; border-top: 1px solid var(--line); }
.contribs .kick { display: block; margin-bottom: 6px; color: var(--accent); font-size: 10px; }
.contribs a { font: 400 20px/1.25 var(--serif); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 5px; }
.contribs a:hover { color: var(--accent); }
.contribs .c-sub { display: block; margin-top: 6px; font: 400 13px/1.5 var(--sans); color: var(--fg-2); }
.c-head { margin-top: 56px !important; }
.c-more { margin: 18px 0 0; font: 400 13px var(--sans); color: var(--muted); }
.c-more a { color: var(--accent); }
.papers.writing li { font-size: 19px; }
@media (max-width: 720px) { .contribs { grid-template-columns: 1fr; } }

/* research */
.papers { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.papers li { padding: 22px 24px; background: #0e0e0d; border-radius: 8px; font: 400 21px/1.3 var(--serif); letter-spacing: -.01em; transition: background .2s; }
.papers li:hover { background: #141412; }
.papers .kick { display: block; margin-bottom: 8px; color: var(--accent); }
.papers a { text-decoration: none; transition: color .2s, text-decoration-color .2s; }
.papers a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.certs { font: 400 11px/1.7 var(--mono); letter-spacing: .08em; color: var(--muted); }

/* footer */
.footer { margin-top: 120px; padding: 120px 24px 48px; border-top: 1px solid var(--line); }
.footer .big { margin: 18px 0 0; font: 400 clamp(64px, 10vw, 160px)/.95 var(--serif); letter-spacing: -.03em; }
.footer .links { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 48px; font: 400 12px var(--mono); letter-spacing: .06em; }
.footer .links a { padding-bottom: 2px; border-bottom: 1px solid transparent; }
.footer .links a:hover { color: var(--accent); border-color: var(--accent); }
.footer .end { display: flex; justify-content: space-between; margin-top: 64px; font: 400 11px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* laptops */
@media (max-width: 1280px) and (min-width: 981px) {
  .hero-spline { left: 54%; transform: translateX(2%); }
  .meta-row, .soc { font-size: 12px; }
  .sub { width: min(450px, 37.8vw); left: calc(80% - min(225px, 18.9vw)); }
}
@media (max-height: 720px) and (min-width: 768px) {
  .hero h1 { font-size: min(clamp(80px, 8.8vw, 134px), 14vh); }
  .manifesto-quote, .manifesto-focus { font-size: clamp(14px, 1.15vw, 18px); }
  .hero-manifesto { gap: clamp(22px, 3.6vh, 36px); }
}
/* tablets */
@media (max-width: 980px) {
  .c-4 { grid-column: span 6; } .card.tas { grid-column: span 12; }
  .acc { flex-direction: column; height: auto; }
  .acc-card { flex: none; border-right: 0; border-bottom: 1px solid var(--line-2); }
  .acc-col { position: relative; flex-direction: row; justify-content: flex-start; gap: 14px; height: 60px; padding: 0 20px; }
  .acc-col span { writing-mode: horizontal-tb; transform: none; }
  .acc-card.open .acc-col { display: none; }
  .acc-open { position: relative; display: none; grid-template-columns: 1fr; min-width: 0; }
  .acc-card.open .acc-open { display: grid; }
  .acc-info { border-right: 0; border-bottom: 1px solid var(--line-2); }
  .pj { height: 300px; }
}
@media (max-width: 980px) and (min-width: 768px) {
  .hero-spline { left: 58%; transform: translateX(2%); }
  .meta-social { margin-right: 0; }
  .sub { width: min(320px, 36vw); left: auto; right: 0; }
  .hero-manifesto { max-width: min(50vw, 460px); }
  .manifesto-block { max-width: min(50vw, 460px); }
  .hero h1 { font-size: clamp(64px, 9vw, 104px); }
  .section-head { grid-template-columns: 72px 1fr auto; gap: 20px; padding-top: 96px; padding-bottom: 40px; }
  .section-head .idx, .journey-header .idx { font-size: 72px; }
  .section-head .title, .journey-header .title { font-size: 42px; }
  .quote { font-size: 48px; }
  .content { max-width: 380px; }
}
/* phones */
@media (max-width: 767px) {
  .hero { position: relative; height: auto; min-height: 100svh; justify-content: flex-start; padding: 14px clamp(16px, 5vw, 20px) 24px; overflow: visible; gap: 22px; }
  .meta-row { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 12px; }
  .meta-mail { display: none; }
  .meta-role { letter-spacing: .06em; }
  .meta-social { gap: 6px; margin-right: 0; }
  .soc { font-size: 11px; letter-spacing: .06em; gap: 6px; padding: 6px 7px; }
  .hero h1 { font-size: clamp(40px, 13vw, 64px); line-height: .94; }
  .headline { white-space: normal; font-size: clamp(13px, 3.6vw, 18px); }
  .manifesto-block, .hero-manifesto { max-width: none; }
  .manifesto-quote, .manifesto-focus { text-align: left; font-size: clamp(13px, 3.4vw, 15px); line-height: 1.5; }
  .hero-bottom { flex-direction: column; gap: 24px; }
  .hero-manifesto { display: contents; }
  .metrics { order: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mf { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "num icon" "label label"; gap: 5px 8px; padding: 11px 12px 12px; }
  .mf-num { grid-area: num; } .mf-icon { grid-area: icon; justify-self: end; } .mf-label { grid-area: label; }
  .hero-spline { position: absolute; inset: auto 0 360px; height: clamp(270px, 36svh, 340px); left: 0; transform: none; z-index: 3; pointer-events: none; }
  .sub { order: 2; position: relative; width: 100%; left: auto; margin-top: clamp(180px, 30svh, 300px); z-index: 4; }
  .manifesto-cta { order: 3; flex-direction: column; text-align: center; }
  .quote-sm { border-left: 0; padding-left: 0; }
  .terminal { -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); background: linear-gradient(#0a0b0b85, #07070799); }
  .term-output { min-height: 96px; }

  .shell { padding: 0 20px; }
  .section-head { grid-template-columns: 52px 1fr; gap: 14px; padding-top: 72px; padding-bottom: 32px; }
  .section-head .idx, .journey-header .idx { font-size: 52px; }
  .section-head .title, .journey-header .title { font-size: 30px; }
  .section-head .right { display: none; }
  .about { padding-top: 40px; }
  .statement { font-size: clamp(28px, 6vw, 48px); max-width: none; }
  .tech-row { gap: clamp(24px, 7vw, 40px); } .tech-row img { width: 38px; height: 38px; }
  .c-6, .c-4, .card.tas { grid-column: span 12; }
  .track { gap: 48px; }

  .wid { height: calc(100svh * 6.2); }
  .wid-pin { height: 100svh; }
  .wid .section-head { padding: 16px 0 16px; }
  .wid { --row: calc(clamp(40px, 12vw, 64px) * .92); }
  .wid-stage { flex: none; display: flex; flex-direction: column; padding: 0; }
  .wid-left { flex: none; height: calc(var(--row) * 3); margin: 0 20px; overflow: hidden; mask-image: linear-gradient(#000 0 42%, #0006 74%, transparent 100%); }
  .wid-word { font-size: clamp(40px, 12vw, 64px); }
  .wid-band { top: 0; width: 100%; }
  .wid-viz { position: relative; top: auto; left: auto; right: auto; height: auto; flex: 1; min-height: 0; margin: 0 20px; }
  .wid-layer { padding: 8px 0 0; justify-content: flex-start; }
  .wid-caption { position: relative; top: auto; left: auto; right: auto; height: auto; padding: 12px 20px 20px; margin-top: auto; }
  .cap-text { font-size: 12.5px; max-width: none; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
  .cap-more { display: inline-flex; margin-top: 8px; font: 400 11px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); pointer-events: auto; }
  .wid-caption.expanded { position: absolute; left: 0; right: 0; bottom: 0; max-height: 68%; padding-top: 40px; background: linear-gradient(to top, var(--bg) 0 62%, #070707db 82%, transparent); }
  .wid-caption.expanded .cap-text { -webkit-line-clamp: unset; display: block; }

  .journey-bg { position: sticky; inset: auto; top: 0; z-index: 2; height: 44svh; }
  .journey-stage { position: relative; height: 100%; background: var(--bg); border-bottom: 1px solid var(--line); }
  .journey-scrim { display: none; }
  .globe-hud { top: 14px; left: 20px; right: auto; }
  .globe-legend { bottom: 12px; left: 20px; right: auto; }
  .journey-track { padding: 48px 20px 0; pointer-events: auto; }
  .journey-header { margin-bottom: 48px; }
  .entry { gap: 18px; min-height: 0; padding-bottom: 72px; flex-direction: column; padding-left: 40px; }
  .marker { position: relative; top: auto; width: auto; margin-left: -40px; }
  .quote { font-size: 30px; line-height: 1.12; }
  .content { gap: 20px; }
  .scene.threads b { font-size: 44px; }
  .meta li { font-size: 12px; letter-spacing: .08em; }

  .upstream { grid-template-columns: 1fr; } .upstream i { grid-column: 1; grid-row: auto; }
  .papers { grid-template-columns: 1fr; } .papers li { font-size: 19px; }
  .footer { padding: 72px 20px 32px; margin-top: 60px; }
  .footer .end { flex-direction: column; gap: 8px; }
  .return-top { top: 14px; right: 12px; }
}

/* viz: mesh */
.vz-dots { position: absolute; inset: 0; background-image: radial-gradient(circle, #ededdf0e 1px, transparent 1px); background-size: 22px 22px;
  mask-image: radial-gradient(90% 75% at 50% 38%, #000 20%, transparent 75%); }
.mesh-edge { fill: none; stroke: var(--line-2); stroke-width: .6; }
.mesh-flow { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 2.5 9; animation: flow .72s linear infinite; stroke: transparent; }
.mesh-flow.lime { stroke: var(--accent); filter: drop-shadow(0 0 2.5px #c9f558d9); }
.mesh-flow.gold { stroke: var(--accent-2); filter: drop-shadow(0 0 2.5px #e8c47ad9); }
@keyframes flow { to { stroke-dashoffset: -11.5; } }
.mesh-node { position: absolute; width: 0; height: 0; }
.mesh-node i { position: absolute; width: 22px; height: 22px; left: -11px; top: -11px; border-radius: 50%; background: var(--bg-2); border: 1.5px solid #c9f55852; box-shadow: 0 0 8px #c9f55829; transition: box-shadow .35s; }
.mesh-node i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; transform: translate(-50%, -50%); border-radius: 50%; background: #c9f55852; }
.mesh-node.hot i { border-color: var(--accent); box-shadow: 0 0 10px #c9f55859; }
.mesh-node.hot i::after { background: #c9f55894; }
.mesh-node.pulse i { box-shadow: 0 0 32px 12px #c9f55821; }
.mesh-node span { position: absolute; left: 16px; top: 0; transform: translateY(-50%); display: flex; gap: 6px; align-items: baseline; white-space: nowrap; }
.mesh-node.left span { left: auto; right: 16px; }
.mesh-node b { font: 500 12px var(--mono); letter-spacing: .14em; color: var(--fg); }
.mesh-node.hot b { color: var(--accent); }
.mesh-node em { font: 400 9px var(--mono); font-style: normal; letter-spacing: .14em; color: var(--accent-2); }
.mesh-pkt { position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 10px #c9f558e6, 0 0 22px #c9f55866; }
.mesh-pkt.gold { background: var(--accent-2); box-shadow: 0 0 10px #e8c47ae6; }
.mesh-tag { position: absolute; transform: translate(-50%, -50%); display: flex; gap: 5px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 2px; background: #070707b3; font: 400 8px var(--mono); letter-spacing: .1em; }
.mesh-tag span { color: var(--muted); }
.mesh-tag b { color: var(--accent); font-weight: 400; }
.mesh-graph { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 300px; display: flex; flex-direction: column; gap: 6px; }
.mg-head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); }
.mg-head span { font-size: 9px; letter-spacing: .18em; color: var(--accent-2); opacity: .8; }
.mg-head b { font-size: 11px; font-weight: 400; letter-spacing: .08em; color: var(--accent); font-variant-numeric: tabular-nums; }
.mesh-graph svg { width: 300px; height: 58px; overflow: visible; }
.mg-ceil { stroke: var(--accent-2); stroke-width: .6; stroke-dasharray: 2 3; opacity: .32; }
.mg-line { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 0 2px #c9f55873); }
.mg-dot { fill: var(--accent); filter: drop-shadow(0 0 3px #c9f558d9); }
.mg-legend { display: flex; justify-content: space-between; font: 400 9px var(--mono); letter-spacing: .08em; color: var(--muted); }

/* viz: data field */
.vz-data { display: flex; flex-direction: column; gap: 14px; }
.dat-field { position: relative; width: 100%; height: clamp(260px, 46vh, 480px); }
.dat-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dat-curve { fill: none; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px #c9f55859); }
.dat-dot { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); transform: translate(-50%, -50%); }
.dat-sweep { position: absolute; top: 0; bottom: 0; width: 1.5px; background: var(--accent); box-shadow: 0 0 12px #c9f55880; }
.dat-sweep::before { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 26px; background: linear-gradient(270deg, #c9f5581f, transparent); }
.dat-meta { display: flex; justify-content: space-between; padding: 0 14px; font: 400 9px var(--mono); letter-spacing: .14em; }
.dat-meta .cnt { color: var(--accent-2); }
.dat-meta .cnt b { color: var(--accent); font-weight: 400; }
.dat-meta .stg { color: var(--muted); }
.dat-meta .stg[data-stage="JUDGING"] { color: var(--accent-2); }
.dat-meta .stg[data-stage="SIGNAL"] { color: var(--accent); }

/* viz: exploded interface */
.vz-ifc { position: relative; height: 100%; min-height: 300px; display: flex; align-items: center; justify-content: center; }
.ifc-glow { position: absolute; inset: 0; background: radial-gradient(at 50% 52%, #c9f55847 0%, #c9f55814 26%, #e8c47a0a 42%, transparent 58%); }
.ifc-stage { position: relative; width: 340px; height: 260px; perspective: 1300px; perspective-origin: 50% 40%; transform: scale(1.15); }
.ifc-card { position: absolute; inset: 0; transform-style: preserve-3d; }
.ifc-layer { position: absolute; inset: 0; border-radius: 3px; backface-visibility: hidden; overflow: hidden; }
.ifc-layer.raw { background: linear-gradient(#070707b8, #07070794); box-shadow: inset 0 1px #ededdf12, 0 6px 16px #00000073; }
.ifc-raw { position: absolute; left: 0; right: 0; top: -32px; height: calc(100% + 64px); opacity: .72; animation: fall 1.4s linear infinite;
  background-image: repeating-linear-gradient(transparent 0 4px, #070707 4px 13px), repeating-linear-gradient(90deg, #c9f55826 0 14px, transparent 14px 20px, #c9f5581a 20px 30px, transparent 30px 38px); }
@keyframes fall { to { transform: translateY(32px); } }
.ifc-tag { position: absolute; left: 8px; bottom: 6px; font: 400 7px var(--mono); letter-spacing: .22em; color: var(--muted); }
.ifc-layer.logic { background: linear-gradient(#0a0a0aa3, #0a0a0a80); box-shadow: inset 0 1px #ededdf17, 0 8px 18px #0000006b; }
.ifc-layer.logic svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ifc-route { fill: none; stroke: var(--line-2); stroke-width: .9; }
.ifc-pulse { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: .15 .85; filter: drop-shadow(0 0 3px #c9f558cc); animation: pulseTravel 1.8s linear infinite; }
@keyframes pulseTravel { to { stroke-dashoffset: -1; } }
.ifc-node { fill: none; stroke: var(--line-2); stroke-width: 1.2; }
.ifc-layer.widgets { background: linear-gradient(#0c0c0c99, #0c0c0c70); box-shadow: inset 0 1px #ededdf1a, 0 10px 22px #00000061; }
.ifc-w { position: absolute; display: flex; flex-direction: column; gap: 3px; font: 400 8px var(--mono); letter-spacing: .2em; color: var(--muted); }
.ifc-w.spark { top: 14%; left: 5%; }
.ifc-w.spark span { color: var(--accent); opacity: .75; }
.ifc-w.spark svg { width: 94px; height: 29px; overflow: visible; }
.ifc-spark { fill: none; stroke: var(--accent); stroke-width: 1.4; filter: drop-shadow(0 0 3px #c9f5588c); }
.ifc-w.counter { top: 14%; right: 8%; align-items: flex-end; }
.ifc-w.counter b { font: 500 21px/1 var(--mono); color: var(--accent); }
.ifc-w.ring { bottom: 12%; right: 6%; flex-direction: row; align-items: center; gap: 8px; }
.ifc-w.ring svg { width: 50px; height: 50px; transform: rotate(-90deg); }
.ifc-w.ring b { display: block; font: 500 13px var(--mono); color: var(--accent-2); }
.ifc-ring-t { fill: none; stroke: var(--line-2); stroke-width: 2.5; }
.ifc-ring-f { fill: none; stroke: var(--accent-2); stroke-width: 2.5; stroke-linecap: round; }
.ifc-layer.glass { background: #0e0e0ed9; border: 1px solid #ededdf2e; box-shadow: inset 0 1px #ededdf33, 0 14px 36px #000000b3; }
.ifc-blob { position: absolute; left: 5%; right: 5%; bottom: 0; height: 65%; background: radial-gradient(at 50% 100%, #c9f5584d 0%, #e8c47a29 28%, #c9f5580f 52%, transparent 72%); }
.ifc-in { position: relative; height: 100%; display: flex; flex-direction: column; gap: 7px; padding: 11px 14px; font-family: var(--mono); }
.ifc-row { display: flex; align-items: center; }
.ifc-row.head { justify-content: space-between; }
.ifc-title { font-size: 10px; letter-spacing: .18em; color: var(--accent); text-shadow: 0 0 8px #c9f55880; }
.ifc-badge { display: flex; gap: 5px; align-items: center; padding: 3px 8px; font-size: 8px; letter-spacing: .14em; color: var(--accent); border: 1px solid #c9f55859; border-radius: 2px; background: #c9f5580a; }
.ifc-badge em { font-style: normal; color: var(--accent-2); animation: pulse 1.3s ease-in-out infinite; }
.ifc-row.metrics { gap: 14px; padding: 7px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ifc-row.metrics b { font-size: 22px; font-weight: 500; color: var(--accent); text-shadow: 0 0 12px #c9f55873; }
.ifc-row.metrics b.gold { color: var(--accent-2); text-shadow: 0 0 10px #e8c47a73; }
.ifc-row.metrics small { margin-left: 4px; font-size: 8.5px; letter-spacing: .14em; color: var(--muted); }
.ifc-row.metrics i { width: 1px; height: 26px; background: var(--line-2); }
.ifc-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ifc-chips span { padding: 2px 7px; font-size: 8px; letter-spacing: .13em; color: var(--fg-2); border: 1px solid var(--line-2); border-radius: 1px; }
.ifc-status { margin-top: auto; }
.ifc-status .st { font-size: 9px; letter-spacing: .16em; color: var(--accent-2); }

/* viz: orbit */
.vz-orbit { position: relative; height: 100%; min-height: 300px; }
.orb-field { position: absolute; inset: 20px 16px 16px; }
.orb-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orb-guide { fill: none; stroke: var(--line-2); stroke-width: .6; stroke-dasharray: 2.5 5; vector-effect: non-scaling-stroke; }
.orb-inner { fill: none; stroke: var(--line); stroke-width: .5; stroke-dasharray: 1.5 4; vector-effect: non-scaling-stroke; }
.orb-core { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; transform: translate(-50%, -50%); }
.orb-core i { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid var(--line-2); transition: border-color .5s, box-shadow .5s; }
.orb-core b { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--accent); opacity: .5; transition: opacity .5s; }
.orb-core.live i { border-color: var(--accent); box-shadow: 0 0 7px #c9f55838; }
.orb-core.live b { opacity: .95; box-shadow: 0 0 9px #c9f55873; }
.orb-node { position: absolute; width: 0; height: 0; }
.orb-node i { position: absolute; width: 10px; height: 10px; left: -5px; top: -5px; border-radius: 50%; border: 1px solid var(--line-2); transition: all .3s; }
.orb-node span { position: absolute; white-space: nowrap; font: 400 clamp(13px, 1.25vw, 18px) var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); opacity: .45; transition: color .3s, opacity .3s; }
.orb-node.top span { top: 12px; left: 0; transform: translateX(-50%); }
.orb-node.rgt span { top: -9px; left: 12px; }
.orb-node.lft span { top: -9px; right: 12px; }
.orb-node.on i { border-color: var(--accent); background: #c9f5581f; box-shadow: 0 0 7px #c9f55861, 0 0 0 10px #c9f55812; }
.orb-node.on span { color: var(--accent); opacity: 1; }
.orb-trav { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px #c9f558a6, 0 0 18px #c9f55833; }
.orb-ctx { position: absolute; transform: translate(-50%, calc(-100% - 14px)); white-space: nowrap; font: 400 12px var(--mono); letter-spacing: .1em; color: #e8c47abf; opacity: 0; transition: opacity .45s; }
.orb-ctx.show { opacity: 1; }

.pj-body svg { width: 100%; height: 100%; font-family: var(--mono); }

@media (max-height: 900px) and (min-width: 981px) {
  .vz-dash { transform: scale(.88); transform-origin: top center; }
  .ifc-stage { transform: scale(1.05); }
}
@media (max-width: 767px) {
  .vz-dash { transform: scale(.72); transform-origin: top left; width: 139%; }
  .vz-mesh { min-height: 0 !important; }
  .mesh-graph { transform: translateX(-50%) scale(.75); transform-origin: bottom center; }
  .dat-field { height: 30svh; }
  .ifc-stage { transform: scale(.75); }
  .vz-orbit { min-height: 0; }
  .orb-node span { font-size: 11px; }
  .wid-layer { padding: 0; }
}


/* about: grouped tools */
.tech-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); }
.tech-group { padding: 26px 24px 30px; border-right: 1px solid var(--line); }
.tech-group:last-child { border-right: 0; }
.tg-name { margin: 0 0 22px; font: 400 11px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.tech-group .tech-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 22px 10px; justify-content: start; }
.tech-group .tech-row img { width: 32px; height: 32px; }
.tech-group .tech-row span { font-size: 10.5px; text-align: center; }

/* giving back */
.give-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.give { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px 24px; border: 1px solid var(--line); background: linear-gradient(160deg, #ffffff0a 0%, #0a0a0af0 40%); transition: border-color .28s; }
.give:hover { border-color: var(--accent); }
.give .kick { color: var(--accent-2); font-size: 10px; letter-spacing: .14em; }
.give h3 { margin: 0; font: 400 36px/1 var(--serif); letter-spacing: -.02em; }
.give p:not(.kick) { margin: 0; font: 400 14px/1.65 var(--sans); color: var(--fg-2); }
.give p b { color: var(--fg); font-weight: 500; }
.give-viz { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.give-viz svg { width: 100%; height: 48px; display: block; }
.give-viz .spec { fill: none; stroke: var(--accent); stroke-width: 1.2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px #c9f55880); }
.give-viz span, .give-link { font: 400 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.give-link { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); color: var(--accent); }

/* credentials */
.edu-list { margin-bottom: 26px; border-top: 1px solid var(--line); }
.edu { display: grid; grid-template-columns: 160px 1fr auto; align-items: baseline; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.edu .kick { color: var(--accent); }
.badges a.badge:hover { color: var(--accent); border-color: var(--accent); }
.edu b { font: 400 26px/1.2 var(--serif); }
.edu span:last-child { font: 400 12px var(--mono); letter-spacing: .08em; color: var(--fg-2); }
.cert-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.cert { display: grid; grid-template-columns: 150px 1fr; align-items: baseline; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); transition: color .2s; }
.cert .c-iss { font: 400 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); }
.cert b { font: 400 17px/1.3 var(--serif); }
.cert .c-kind { grid-column: 2; font: 400 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cert i { grid-column: 3; grid-row: 1 / 3; font: 400 10px var(--mono); font-style: normal; letter-spacing: .12em; color: var(--muted); transition: color .2s; }

.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 28px; }
.badges .badge { padding: 4px 12px; border: 1px solid var(--line-2); border-radius: 999px; font: 400 11px var(--sans); letter-spacing: .06em; color: var(--fg-2); transition: color .2s, border-color .2s; }


@media (max-width: 980px) {
  .tech-groups, .give-grid { grid-template-columns: 1fr; }
  .tech-group { border-right: 0; border-bottom: 1px solid var(--line); }
  .cert-list { grid-template-columns: 1fr; }
  .edu { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 767px) {
  .cert { grid-template-columns: 1fr; }
  .cert .c-iss { grid-column: 1; }
  .cert b, .cert .c-kind { grid-column: 1; }
  .cert i { grid-column: 2; grid-row: 1 / 4; }
}


/* viz: cloud */
.cl-stages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 14px; }
.cl-stage { display: flex; flex-direction: column; gap: 7px; padding: 9px 10px; border: 1px solid var(--line); background: #0707078c; border-radius: 2px; transition: border-color .3s; }
.cl-stage span { font-size: 8px; letter-spacing: .18em; }
.cl-stage i { display: block; height: 4px; background: var(--muted-2); overflow: hidden; }
.cl-stage i b { display: block; height: 100%; width: 0; background: var(--accent); box-shadow: 0 0 6px #c9f55866; }
.cl-stage em { font-style: normal; font-size: 7px; letter-spacing: .14em; }
.cl-stage.run { border-color: #e8c47a80; } .cl-stage.run em { color: var(--accent-2); }
.cl-stage.done em { color: var(--accent); } .cl-stage.done span { color: var(--fg-2); }
.cl-cluster { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); background: #0707078c; border-radius: 2px; }
.cl-cl-head { display: flex; justify-content: space-between; font-size: 8px; letter-spacing: .18em; }
.cl-cl-head .rep { color: var(--accent); }
.cl-nodes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.cl-node { padding: 8px; border: 1px solid var(--line); border-radius: 2px; }
.cl-node span { font-size: 7px; letter-spacing: .16em; }
.cl-pods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 7px; }
.cl-pods i { height: 18px; border-radius: 2px; background: var(--muted-2); transition: background .35s, box-shadow .35s; }
.cl-pods i.sw { background: var(--accent-2); box-shadow: 0 0 8px #e8c47a80; }
.cl-pods i.v2 { background: var(--accent); box-shadow: 0 0 6px #c9f5584d; }
@media (max-width: 767px) { .vz-cloud { transform: scale(.8); transform-origin: top left; width: 125%; } }


/* viz: AI system */
.vz-sys { height: 100%; display: flex; align-items: center; justify-content: center; }
.sys-svg { width: 100%; max-width: 560px; height: 100%; max-height: 62vh; overflow: visible; font-family: var(--mono); }
.sys-box { fill: #0707078c; stroke: var(--line-2); stroke-width: 1; transition: stroke .3s; }
.sys-box.hi { stroke: #c9f55866; }
.sys-panel.on .sys-box { stroke: var(--accent); filter: drop-shadow(0 0 8px #c9f55833); }
.sys-t { font-size: 10px; letter-spacing: .16em; fill: var(--fg); font-weight: 500; }
.sys-tag { font-size: 8px; letter-spacing: .14em; fill: var(--accent-2); }
.sys-q { font-size: 11px; fill: var(--accent); }
.sys-f { font-size: 10px; fill: var(--fg-2); }
.sys-f.stale { fill: var(--accent-2); text-decoration: line-through; }
.sys-dot.ok { fill: var(--accent); } .sys-dot.stale { fill: var(--accent-2); }
.sys-v { font-size: 10px; fill: var(--accent); font-variant-numeric: tabular-nums; }
.sys-bar-bg { fill: var(--muted-2); }
.sys-bar { fill: var(--accent); filter: drop-shadow(0 0 4px #c9f55866); }
.sys-bar.dim { fill: #6e6e66; filter: none; }
.sys-edge { fill: none; stroke: var(--line-2); stroke-width: .8; }
.sys-pkt.lime { fill: var(--accent); filter: drop-shadow(0 0 5px #c9f558e6); }
.sys-pkt.gold { fill: var(--accent-2); filter: drop-shadow(0 0 5px #e8c47ae6); }
.sys-halo { fill: #c9f5580a; transition: fill .4s; }
.sys-ring { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 6; transition: stroke .4s; }
.sys-inner { fill: var(--bg-2); stroke: #c9f55866; stroke-width: 1.5; }
.sys-core-t { font-size: 8.5px; letter-spacing: .06em; fill: var(--accent); font-weight: 500; }
.sys-core.on .sys-halo { fill: #c9f55826; }
.sys-core.on .sys-ring { stroke: var(--accent); }

/* open source strip and employer cards */
.os-strip { list-style: none; margin: 0 0 34px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.os-strip li { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--line); background: linear-gradient(160deg, #ffffff0a 0%, #0a0a0af0 40%); }
.os-strip b { font: 500 28px/1 var(--serif); color: var(--accent); }
.os-strip span { font: 400 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
.os-kick { margin-bottom: 14px; color: var(--accent-2); }
.upstream a { grid-column: 2; grid-row: 2 / 4; font: 400 12px var(--mono); letter-spacing: .12em; color: var(--accent); }
.card.emp::before { background: var(--accent); }
.card.emp .card-logo { height: 40px; }
@media (max-width: 980px) { .os-strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .upstream a { grid-column: 1; grid-row: auto; } .sys-svg { max-height: 44svh; } }


/* journey: code and ticket scenes */
.scene.code { margin: 0; padding: 14px 16px; border: 1px solid var(--line-2); background: #0a0a0ad9; font: 400 13px/1.7 var(--mono); color: var(--fg-2); white-space: pre; }
.scene.code .p { color: var(--muted); } .scene.code .n { color: var(--accent-2); }
.scene.code .cursor { display: inline-block; width: 8px; height: 14px; background: var(--accent); vertical-align: -2px; animation: blink 1s step-end infinite; }
.scene.ticket { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid var(--line-2); background: var(--line); }
.scene.ticket div { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: #0a0a0af2; }
.scene.ticket span { font: 400 9px var(--mono); letter-spacing: .16em; color: var(--muted); }
.scene.ticket b { font: 400 14px var(--mono); color: var(--fg); }
.scene.ticket b.ok { color: var(--accent); } .scene.ticket b.gold { color: var(--accent-2); }

/* off the clock */
.off-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.off { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid var(--line); background: linear-gradient(160deg, #ffffff0a 0%, #0a0a0af0 40%); transition: border-color .28s, transform .28s; }
.off:hover { border-color: var(--accent); transform: translateY(-2px); }
.off h4 { margin: 0; font: 400 26px/1 var(--serif); }
.off p { margin: 0; font: 400 14px/1.6 var(--sans); color: var(--fg-2); }
.off-ic { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 2px; color: var(--accent-2); }
.off:hover .off-ic { color: var(--accent); border-color: #c9f55866; }
.off-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.off.feature { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; padding: 30px; }
.off.feature .off-copy { display: flex; flex-direction: column; gap: 14px; }
.off.feature .kick { color: var(--accent-2); }
.off.feature h3 { margin: 0; font: 400 44px/1 var(--serif); letter-spacing: -.02em; }
.off.feature p b { color: var(--fg); font-weight: 500; }
.tank { display: flex; flex-direction: column; gap: 10px; }
.tank-glass { position: relative; height: 210px; overflow: hidden; border: 1px solid #c9f55859; border-radius: 4px;
  background: linear-gradient(#0e1a14 0%, #08110d 70%, #1a1810 100%); box-shadow: inset 0 0 40px #c9f5581a; }
.tank-glass::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: repeating-linear-gradient(90deg, #2a2618 0 6px, #221f14 6px 11px); }
.cam { position: absolute; right: 10px; top: 8px; font: 400 9px var(--mono); letter-spacing: .14em; color: var(--accent-2); animation: pulse 1.6s ease-in-out infinite; }
.fish { position: absolute; width: 26px; height: 12px; border-radius: 50% 40% 40% 50%; background: var(--accent); box-shadow: 0 0 10px #c9f55880; }
.fish::after { content: ""; position: absolute; right: -9px; top: 1px; border: 5px solid transparent; border-left: 9px solid var(--accent); }
.f1 { top: 60px; animation: swim 9s ease-in-out infinite; }
.f2 { top: 120px; background: var(--accent-2); box-shadow: 0 0 10px #e8c47a80; animation: swim 12s ease-in-out -4s infinite reverse; transform: scale(.8); }
.f2::after { border-left-color: var(--accent-2); }
@keyframes swim { 0% { left: 8%; } 50% { left: 78%; } 100% { left: 8%; } }
.bub { position: absolute; bottom: 22px; width: 6px; height: 6px; border-radius: 50%; border: 1px solid #ededdf55; animation: rise 4s linear infinite; }
.b1 { left: 20%; } .b2 { left: 22%; animation-delay: -1.5s; } .b3 { left: 70%; animation-delay: -2.8s; }
@keyframes rise { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-180px); opacity: 0; } }
.food { position: absolute; left: 50%; top: -6px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent-2); opacity: 0; }
.food.drop { animation: drop 2s ease-in forwards; }
@keyframes drop { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(150px); } }
.tank-hud { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.tank-hud div { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; background: #0a0a0af2; }
.tank-hud span { font: 400 8px var(--mono); letter-spacing: .16em; color: var(--muted); }
.tank-hud b { font: 400 13px var(--mono); color: var(--accent); }
@media (max-width: 980px) {
  .off-grid { grid-template-columns: 1fr 1fr; }
  .off.feature { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .off-grid { grid-template-columns: 1fr; }
  .off.feature h3 { font-size: 32px; }
  .tank-hud { grid-template-columns: 1fr 1fr; }
  .scene.code { font-size: 12px; }
}


/* ask me anything */
.ai-orb { position: fixed; right: 28px; bottom: 28px; z-index: 45; display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; border: 1px solid var(--line-2); border-radius: 999px;
  background: #0a0a0aeb; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; text-align: left; transition: border-color .25s, box-shadow .25s, opacity .25s, transform .25s; }
.ai-orb:hover { border-color: var(--accent); box-shadow: 0 16px 48px #c9f55829; }
.ai-orb.hide { opacity: 0; pointer-events: none; transform: translateY(10px); }
.ai-orb .core { position: relative; width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--accent), #6f9920 60%, #1a2208 100%);
  box-shadow: 0 0 0 1px #c9f55866, 0 0 24px #c9f55873, inset 0 0 16px #fff3; }
.ai-orb .core::after { content: ""; position: absolute; inset: -6px; border: 1px dashed #c9f55859; border-radius: 50%; animation: spin 8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ai-orb .label { font: 400 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
.ai-orb .big { display: block; margin-top: 1px; font: 400 13px var(--sans); letter-spacing: 0; text-transform: none; color: var(--fg); }
.ai-bg { position: fixed; inset: 0; z-index: 60; background: #0000008c; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .3s; }
.ai-bg.open { opacity: 1; pointer-events: auto; }
.ai-drawer { position: fixed; top: 0; right: 0; z-index: 61; width: min(520px, 92vw); height: 100vh; height: 100dvh; display: flex; flex-direction: column; border-left: 1px solid var(--line-2);
  background: linear-gradient(#0d0d0df0, #070707fa); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); transform: translateX(100%); transition: transform .45s var(--ease); }
.ai-drawer.open { transform: none; }
.dr-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--line); font: 400 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
.dr-head .left { display: flex; align-items: center; gap: 10px; }
.dr-head .x { font-size: 20px; color: var(--muted); }
.dr-head .x:hover { color: var(--accent); }
.dr-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px 22px; border-bottom: 1px solid var(--line); font: 400 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.dr-meta b { display: block; margin-top: 2px; font: 500 13px var(--sans); letter-spacing: 0; text-transform: none; color: var(--fg); }
.dr-body { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; overflow-y: auto; scroll-behavior: smooth; }
.bubble { max-width: 90%; padding: 12px 14px; font: 400 14px/1.55 var(--sans); color: var(--fg); white-space: pre-wrap; }
.bubble.user { align-self: flex-end; border: 1px solid var(--line-2); background: #ffffff0a; }
.bubble.ai { position: relative; align-self: flex-start; border: 1px solid var(--accent-dim); background: #c9f5580a; }
.bubble.ai::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--accent); }
.bubble .role { margin-bottom: 6px; font: 400 9px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.bubble.ai .role { color: var(--accent); }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: .2; animation: dot 1.4s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dot { 0%, 60%, 100% { opacity: .2; } 30% { opacity: .9; } }
.dr-suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 18px; border-top: 1px solid var(--line); }
.dr-suggest button { padding: 6px 10px; border: 1px solid var(--line-2); font: 400 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); }
.dr-suggest button:hover { color: var(--accent); border-color: var(--accent); }
.dr-input { display: flex; align-items: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); }
.dr-input .prompt { padding-bottom: 10px; font: 400 14px var(--mono); color: var(--accent); }
.dr-input textarea { flex: 1; min-height: 2.6em; max-height: 120px; padding: 10px 0; resize: none; border: 0; outline: 0; background: none; font: 400 13px var(--mono); color: var(--fg); }
.dr-input textarea::placeholder { color: var(--muted); }
.dr-input .send { margin-bottom: 1px; padding: 8px 12px; border: 1px solid var(--accent-dim); font: 400 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.dr-input .send:hover { background: var(--accent); color: var(--bg); }
.dr-input .send:disabled { color: var(--muted); border-color: var(--line-2); background: none; cursor: not-allowed; }
@media (max-width: 767px) {
  .ai-orb { right: 14px; bottom: 14px; padding: 8px 12px 8px 8px; gap: 10px; }
  .ai-orb .core { width: 30px; height: 30px; }
  .ai-drawer { width: 100vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .hero h1 .ch { opacity: 1; transform: none; filter: none; }
}

.contribs.names{display:flex;flex-wrap:wrap;gap:10px;padding:0;list-style:none}
.contribs.names li{margin:0;padding:0;border:0 !important}
.contribs.names a{font:400 16px/1.2 var(--sans);display:inline-block;padding:10px 16px;background:#0e0e0d;border-radius:8px;text-decoration:none;transition:background .2s,color .2s}
.contribs.names a:hover{background:#141412;color:var(--accent)}
#research .section-head, #offclock .section-head { border-top: 0; }
.dr-body, .dr-input textarea { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.dr-body::-webkit-scrollbar, .dr-input textarea::-webkit-scrollbar { width: 4px; }
.dr-body::-webkit-scrollbar-track, .dr-input textarea::-webkit-scrollbar-track { background: transparent; }
.dr-body::-webkit-scrollbar-thumb, .dr-input textarea::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
.dr-body::-webkit-scrollbar-thumb:hover { background: var(--accent); }