/* The page is dark by design; saying so asks phone browsers not to repaint it with their own dark mode */
:root {
  color-scheme: dark;
  --black: #050607;
  --white: #EDF1EE;
  --muted: #A9B2AD;
  --line: #2A2F2C;
  --panel: rgba(0, 0, 0, .3);
  --green: #5BE584;
  --blue: #8FA8FF;
  --red: #FF8F73;
  --yellow: #F2D64B;
  --mono: "DM Mono", ui-monospace, Consolas, monospace;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 3.4vw, 48px);
  --gap-section: clamp(96px, 11vw, 168px);
  --gap-half: clamp(52px, 6vw, 96px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font: 400 17px/1.5 var(--sans);
  overflow-x: hidden;
  transition: background-color .9s ease;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--white); text-underline-offset: 4px; }
a:hover { color: var(--green); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; }

h1, h2 { font-weight: 500; font-stretch: 75%; }
h1 { font-size: clamp(60px, 11.2vw, 168px); line-height: .92; letter-spacing: -.015em; }
h2 { font-size: clamp(38px, 4.6vw, 66px); line-height: 1; text-wrap: balance; }

.mono { font-family: var(--mono); font-size: 13px; line-height: 1.5; }
.muted { color: var(--muted); }
.strong { font-weight: 600; }
.green { color: var(--green); }
.yellow { color: var(--yellow); }
.red { color: var(--red); }
.blue { color: var(--blue); }
.link { display: inline-flex; align-items: center; min-height: 44px; }

.top {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 28px;
  padding: 6px var(--gutter); font: 400 13px/1.4 var(--mono);
}
.top-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; }
.top-links a { display: inline-flex; align-items: center; min-height: 44px; }

/* Side rail: where you are in the work */
.rail {
  position: fixed; right: 14px; top: 50%; z-index: 20; display: flex; flex-direction: column;
  transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity .3s;
}
.rail.show { opacity: 1; pointer-events: auto; }
.rail a { position: relative; display: flex; align-items: center; justify-content: flex-end; width: 44px; height: 44px; text-decoration: none; }
.rail a::after { content: ""; width: 14px; height: 2px; background: #4A524D; transition: width .25s, background .25s; }
.rail a.on::after { width: 26px; background: var(--green); }
.rail a span {
  position: absolute; right: 40px; padding: 3px 8px; background: #0C0F0E; border: 1px solid var(--line);
  font: 400 12px/1.3 var(--mono); white-space: nowrap; opacity: 0; transform: translateX(6px);
  transition: opacity .2s, transform .2s; pointer-events: none;
}
.rail a:hover span, .rail a:focus-visible span { opacity: 1; transform: none; }

/* Hero: the reel that turns one project into the next */
.reel-wrap { position: relative; isolation: isolate; height: clamp(440px, 74vh, 800px); overflow: hidden; background: var(--black); }
/* Vignette and film static over the hero, drawn by the browser rather than by the canvas every frame */
.reel-wrap::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(3, 3, 3, 0) var(--v0, 200px), rgba(3, 3, 3, .7) var(--v1, 900px));
}
.reel-static {
  position: absolute; inset: -128px; z-index: 3; pointer-events: none; opacity: .085;
  background-size: 128px 128px; will-change: transform; animation: static .333s steps(1) infinite;
}
@keyframes static {
  0% { transform: translate(0, 0); } 12.5% { transform: translate(37px, 59px); } 25% { transform: translate(74px, 118px); }
  37.5% { transform: translate(111px, 49px); } 50% { transform: translate(20px, 108px); } 62.5% { transform: translate(57px, 39px); }
  75% { transform: translate(94px, 98px); } 87.5% { transform: translate(3px, 29px); }
}
.reel-canvas { display: block; width: 100%; height: 100%; }
.hero-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 32px; padding-right: var(--gutter); }
.plate {
  position: relative; width: fit-content; max-width: 100%;
  margin-top: calc(-1 * clamp(76px, 12.4vw, 186px));
  padding: clamp(14px, 2vw, 26px) clamp(24px, 4vw, 60px) 0 var(--gutter);
  background: var(--black);
}
.plate-small { margin-top: calc(-1 * clamp(52px, 8vw, 118px)); }
.plate-small h2 { font-size: clamp(48px, 7.4vw, 108px); line-height: .96; margin-top: 6px; }
.reel-ctl { display: flex; flex-direction: column; gap: 4px; flex: 0 1 470px; min-width: min(100%, 300px); padding-top: 18px; }
.reel-kicker { color: var(--muted); }
.reel-title { font-size: 19px; font-weight: 500; line-height: 1.3; min-height: 2.6em; text-wrap: balance; }
.reel-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.pips { display: flex; flex-wrap: wrap; }
.pip { position: relative; width: 32px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.pip::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: #3A413D; transition: background .3s, transform .3s, box-shadow .3s;
}
.pip:hover::after { background: var(--muted); }
.pip[aria-pressed="true"]::after { background: var(--green); transform: scale(1.35); box-shadow: 0 0 10px var(--green); }
.reel-pause { min-width: 84px; }
.lede { max-width: 980px; padding: clamp(28px, 3.4vw, 44px) var(--gutter) 0; font-size: clamp(24px, 2.8vw, 38px); line-height: 1.2; text-wrap: pretty; }

/* Sections: a hairline and a little more air between projects */
.plate-x, .story, .site { margin-top: var(--gap-half); padding-top: var(--gap-half); border-top: 1px solid rgba(237, 241, 238, .07); }
.plate-x {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px clamp(32px, 4vw, 64px);
  align-items: start; padding-left: var(--gutter); padding-right: var(--gutter);
}
.head { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; position: sticky; top: 24px; }
.head p { text-wrap: pretty; }
.tag { display: block; }

.inst { position: relative; min-width: 0; border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 40%, rgba(237, 241, 238, .03) 0%, rgba(0, 0, 0, .35) 70%); }
.inst canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.inst canvas:active { cursor: grabbing; }
.basket-stage { position: relative; height: clamp(440px, 46vw, 680px); }
.aisles { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 10px 14px 12px; border-top: 1px solid var(--line); color: var(--muted); }
@media (max-width: 520px) { .chip .wide { display: none; } }
.aisles span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--c); }
/* A finger on the graph turns it in any direction; the page scrolls from anywhere outside it */
[data-inst="basket"] canvas { touch-action: none; }
.hint { position: absolute; left: 14px; bottom: 10px; color: var(--muted); pointer-events: none; }
.inst-legend { position: absolute; left: 12px; top: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--line); background: rgba(5, 6, 7, .72); color: var(--white);
  font: 500 13px/1 var(--sans); cursor: pointer; backdrop-filter: blur(4px);
}
.chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.chip .mono { color: var(--muted); font-size: 12px; }
.chip[aria-pressed="true"] { border-color: var(--c); }
.chip:hover { border-color: var(--muted); }
.card {
  position: absolute; right: 12px; bottom: 44px; width: min(270px, calc(100% - 24px));
  padding: 12px; border: 1px solid #3A413D; background: rgba(8, 10, 9, .92); backdrop-filter: blur(6px); pointer-events: none;
}
.card-title { font-weight: 600; line-height: 1.25; }
.card-sub { color: var(--muted); padding-top: 4px; }
.card-list { padding-top: 8px; display: flex; flex-direction: column; gap: 2px; }

.ghost {
  min-height: 44px; padding: 0 16px; border: 1px solid var(--line); background: transparent;
  color: var(--white); font: 500 14px/1 var(--sans); cursor: pointer;
}
.ghost:hover { border-color: var(--muted); }
.ghost[aria-pressed="true"] { border-color: var(--green); color: var(--green); }
.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px;
  border: 0; background: var(--yellow); color: var(--black); font-weight: 600; text-decoration: none; cursor: pointer;
}
.button:hover { background: var(--white); color: var(--black); }

/* 01 Protein classifier: four stains stacked per field, switched live */
.micro { overflow: hidden; }
.stage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #000; }
.field { position: relative; isolation: isolate; aspect-ratio: 1 / 1; width: 100%; overflow: hidden; background: #000; }
.ch { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; transition: opacity .32s ease; }
.stage[data-off~="green"] .ch-green,
.stage[data-off~="blue"] .ch-blue,
.stage[data-off~="red"] .ch-red,
.stage[data-off~="yellow"] .ch-yellow { opacity: 0; }
.channel-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 12px; border-top: 1px solid var(--line); }
.channel-buttons button {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  font: 500 14px/1 var(--sans); cursor: pointer; transition: border-color .2s, color .2s;
}
.channel-buttons button:hover { border-color: var(--muted); color: var(--white); }
.channel-buttons i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; transition: background .2s; }
[data-channel="green"] i { color: #2BFF5E; }
[data-channel="blue"] i { color: #6C8BFF; }
[data-channel="red"] i { color: #FF4D2E; }
[data-channel="yellow"] i { color: #FFCD00; }
.channel-buttons button[aria-pressed="true"] { color: var(--white); border-color: #4A524D; }
.channel-buttons button[aria-pressed="true"] i { background: currentColor; }

/* 02 Dissertation: a replay with play, pause and scrub */
.story { padding-left: var(--gutter); padding-right: var(--gutter); }
.story-head { display: flex; flex-direction: column; gap: 12px; max-width: 980px; }
.story-head h2 { font-size: clamp(34px, 4vw, 58px); }
.story-lede { color: var(--muted); max-width: 720px; text-wrap: pretty; }
.story-box { margin-top: 24px; border: 1px solid var(--line); background: var(--panel); }
.story-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--muted); }
.story-legend span::before { content: ""; display: inline-block; vertical-align: middle; margin: -2px 8px 0 0; }
.lg-bars::before { width: 12px; height: 10px; background: linear-gradient(90deg, #FF6E5A 50%, #5BE584 50%); }
.lg-news::before { width: 18px; height: 2px; background: #EDF1EE; }
.lg-cover::before { width: 18px; height: 2px; background: #F2D64B; }
.lg-dot::before { width: 10px; height: 10px; border-radius: 50%; background: #5BE584; box-shadow: 0 0 8px #5BE584; }
.story-canvas { height: clamp(360px, 42vw, 580px); }
.story-canvas canvas { display: block; width: 100%; height: 100%; cursor: ew-resize; touch-action: pan-y; }
.story-ctl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 16px; padding: 12px 14px; border-top: 1px solid var(--line); }
.play {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; min-width: 112px; padding: 0 16px;
  border: 1px solid var(--green); background: rgba(91, 229, 132, .1); color: var(--white); font: 600 15px/1 var(--sans); cursor: pointer;
}
.play:hover { background: rgba(91, 229, 132, .2); }
.play svg { width: 13px; height: 13px; fill: currentColor; }
.play .i-pause, .play.is-playing .i-play { display: none; }
.play.is-playing .i-pause { display: block; }
.story-ctl input { width: 100%; min-height: 44px; accent-color: var(--green); cursor: pointer; }
.story-ctl output { min-width: 11ch; text-align: right; font-size: 17px; color: var(--white); }
/* Each reading keeps a fixed six-character slot, the longest it reaches, so ticking numbers never shift or rewrap the line */
.story-read { display: flex; flex-wrap: wrap; gap: 4px 26px; padding: 0 14px 14px; color: var(--muted); }
.story-read b { display: inline-block; min-width: 6ch; margin-left: 6px; color: var(--white); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
/* All captions share one grid cell, so the box is as tall as the longest and the page below never jumps */
.story-caption { display: grid; max-width: 840px; padding-top: 18px; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.35; text-wrap: pretty; }
.story-caption > span { grid-area: 1 / 1; }
.story-caption .cap-size { visibility: hidden; }
.results { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px 32px; align-items: center; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.results dl { display: grid; grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); gap: 14px 22px; }
.results dt { font: 400 12px/1.4 var(--mono); color: var(--muted); }
.results dd { font: 500 22px/1.2 var(--sans); font-stretch: 75%; font-variant-numeric: tabular-nums; }
.results .r-main dd { color: var(--green); }
.results p { color: var(--muted); font-size: 15px; text-wrap: pretty; }

/* 03 Cryptorefills lanes */
.lanes { display: block; width: 100%; height: auto; }
.lanes .track { stroke: #222825; stroke-width: 2; stroke-dasharray: 3 6; fill: none; }
.lanes rect { fill: rgba(12, 16, 14, .9); stroke: #39413C; transition: stroke .25s, fill .25s; }
.lanes text { fill: var(--white); font: 500 17px var(--sans); text-anchor: middle; }
.lanes .note { fill: var(--muted); font: 400 14px var(--mono); opacity: 0; transition: opacity .25s; }
.lanes .pkt { fill: var(--red); filter: drop-shadow(0 0 6px var(--red)); }
.lanes .lane { outline: none; transition: opacity .25s; }
.lanes:hover .lane, .lanes:focus-within .lane { opacity: .35; }
.lanes .lane:hover, .lanes .lane:focus { opacity: 1; }
.lanes .lane:hover rect, .lanes .lane:focus rect { stroke: var(--red); fill: #1A0F0C; }
.lanes .lane:hover .note, .lanes .lane:focus .note { opacity: 1; }
[data-inst="crypto"] .hint { position: static; padding: 0 14px 12px; }
.speed { display: flex; flex-direction: column; gap: 8px; width: 100%; padding-top: 6px; }
.speed div { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.speed .bar { display: block; height: 10px; background: #3A413D; transform-origin: left; }
.speed .bar-slow { width: 100%; }
.speed .bar-fast { width: 16%; background: var(--red); box-shadow: 0 0 12px rgba(255, 143, 115, .6); }
.speed b { color: var(--red); font-weight: 500; }
.speed.go .bar { animation: grow 1.2s cubic-bezier(.2, .7, .2, 1) both; }
.speed.go .bar-fast { animation-duration: .5s; animation-delay: .5s; }
@keyframes grow { from { transform: scaleX(0); } }

/* 04 Sithara: devices in 3D */
.site-head { display: flex; flex-direction: column; gap: 6px; padding: 0 var(--gutter); }
.site-head h2 { font-size: clamp(48px, 7.4vw, 108px); line-height: .96; }
.bleed { width: 100%; object-fit: cover; }
.dawn { height: clamp(240px, 34vw, 490px); }
.site-grid {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px clamp(28px, 4vw, 56px);
  align-items: center; padding: clamp(24px, 3vw, 40px) var(--gutter) 0;
}
.site-grid .copy { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.big { font-size: clamp(21px, 2vw, 26px); line-height: 1.28; }
.steps { display: flex; flex-wrap: wrap; gap: 6px; counter-reset: step; }
.steps li {
  counter-increment: step; padding: 6px 10px; border: 1px solid var(--line);
  font: 400 12px/1.3 var(--mono); color: var(--muted); transition: color .3s, border-color .3s, background .3s;
}
.steps li::before { content: counter(step) " "; color: var(--yellow); }
.steps li.on { color: var(--black); background: var(--yellow); border-color: var(--yellow); }
.steps li.on::before { color: var(--black); }
/* Each device is one flat plane turned in perspective. No preserve-3d and no moving layer inside a clipped box: iOS Safari
   mis-clips and flickers both. Sizes are in cqw, hundredths of the devices box, so bezels stay in proportion at any width. */
.devices { --rx: 8deg; --ry: -16deg; container-type: inline-size; position: relative; height: clamp(320px, 36vw, 540px); perspective: 1600px; }
.laptop, .phone { position: absolute; }
.laptop { left: 7%; top: 5%; width: 78%; transform: rotateX(var(--rx)) rotateY(var(--ry)); }
/* Laptop: an aluminium rim round a thin black bezel, a camera, glass glare, and the front of the deck with its notch */
.lid {
  position: relative; padding: 1.5cqw 1.1cqw 1.9cqw; background: #08090A; border-radius: 1.5cqw 1.5cqw .45cqw .45cqw;
  box-shadow: inset 0 0 0 max(1px, .12cqw) #202326, 0 0 0 max(1px, .16cqw) #A9AEB4, 0 0 0 max(1.5px, .28cqw) #4B4F55, 0 3cqw 6cqw rgba(0, 0, 0, .7);
}
.lid::before { content: ""; position: absolute; top: .48cqw; left: 50%; width: max(3px, .55cqw); height: max(3px, .55cqw); transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #3B5468, #0B1218 70%); }
.screen { position: relative; aspect-ratio: 1424 / 860; overflow: hidden; border-radius: .35cqw; background: #F3F2EE; }
.screen::after, .phone-screen::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 26%, rgba(255, 255, 255, 0) 42%);
}
.base {
  position: relative; height: 2.9cqw; margin: 0 -6.5%;
  border-radius: .25cqw .25cqw 2.4cqw 2.4cqw / .25cqw .25cqw 1.2cqw 1.2cqw;
  background: linear-gradient(180deg, #F1F2F4 0%, #D3D6DA 22%, #BEC2C7 48%, #A3A7AC 78%, #73777C 100%);
  box-shadow: inset 0 max(1px, .1cqw) 0 rgba(255, 255, 255, .7), 0 1.4cqw 2.4cqw -.6cqw rgba(0, 0, 0, .75);
}
.base::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 12%; height: 42%; transform: translateX(-50%);
  border-radius: 0 0 1.1cqw 1.1cqw / 0 0 .9cqw .9cqw; background: linear-gradient(#9A9EA3, #C4C7CB);
  box-shadow: inset 0 max(1px, .08cqw) max(1px, .15cqw) rgba(0, 0, 0, .25);
}
.laptop::after { content: ""; position: absolute; z-index: -1; left: -4%; right: -4%; bottom: -3cqw; height: 4.5cqw; background: radial-gradient(50% 50% at 50% 35%, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); }
/* Phone: a thin titanium frame, a slim bezel, the status bar with its camera island, and the side buttons */
.phone {
  right: 2%; bottom: 2%; width: 23%; transform: translateZ(80px) rotateX(var(--rx)) rotateY(calc(var(--ry) * 1.4));
  padding: .5cqw; border: max(1px, .3cqw) solid transparent; border-radius: 3.4cqw;
  background: linear-gradient(#030304, #030304) padding-box, linear-gradient(150deg, #A4A8AE, #3B3E43 32%, #858A90 58%, #2C2F33 80%, #959AA0) border-box;
  box-shadow: 0 3cqw 6cqw rgba(0, 0, 0, .75);
}
.phone::before, .phone::after { content: ""; position: absolute; width: max(1.5px, .26cqw); border-radius: 1px; background: linear-gradient(90deg, #4A4E54, #8E9298); }
.phone::before { left: calc(-1 * max(1px, .3cqw) - max(1.5px, .26cqw)); top: 21%; height: 9%; }
.phone::after { right: calc(-1 * max(1px, .3cqw) - max(1.5px, .26cqw)); top: 27%; height: 13%; }
.phone-screen { position: relative; aspect-ratio: 375 / 812; overflow: hidden; border-radius: 2.6cqw; background: #F3F2EE; }
.phone-screen::before { content: ""; position: absolute; z-index: 3; top: 1.2%; left: 50%; width: 31%; height: 3.9%; transform: translateX(-50%); border-radius: 999px; background: #000; }
.phone-bar {
  position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 6%; display: flex; align-items: center; justify-content: space-between;
  padding: 0 9% 0 11%; background: #F3F2EE; color: #111; font: 600 max(4px, 1cqw)/1 var(--sans);
}
.phone-icons { display: flex; align-items: center; gap: .3cqw; }
.phone-icons i { display: block; }
.sig {
  width: 1.1cqw; height: .66cqw;
  background: linear-gradient(#111, #111) 0 100% / 19% 40% no-repeat, linear-gradient(#111, #111) 33.3% 100% / 19% 60% no-repeat,
    linear-gradient(#111, #111) 66.7% 100% / 19% 80% no-repeat, linear-gradient(#111, #111) 100% 100% / 19% 100% no-repeat;
}
.bat { position: relative; width: 1.55cqw; height: .72cqw; padding: .08cqw; border: max(.5px, .07cqw) solid rgba(17, 17, 17, .5); border-radius: .2cqw; background: linear-gradient(90deg, #111 80%, transparent 80%) content-box; }
.bat::after { content: ""; position: absolute; right: -.22cqw; top: 30%; width: .12cqw; height: 40%; border-radius: 0 1px 1px 0; background: rgba(17, 17, 17, .5); }
/* Each screenshot is three screens stacked. object-position steps through them, so nothing moves inside the clipped screen. */
.reel { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; animation: reel 18s cubic-bezier(.65, 0, .35, 1) infinite; }
/* Under the status bar the phone shows 94% of a screen, so its stops sit at 1 and 2 screens of the 2.06 it can travel */
.phone .reel { top: 6%; height: 94%; animation-name: reel-phone; animation-delay: -2s; }
@keyframes reel {
  0%, 24% { object-position: 50% 0; }
  33%, 57% { object-position: 50% 50%; }
  66%, 90% { object-position: 50% 100%; }
  100% { object-position: 50% 0; }
}
@keyframes reel-phone {
  0%, 24% { object-position: 50% 0; }
  33%, 57% { object-position: 50% 48.54%; }
  66%, 90% { object-position: 50% 97.09%; }
  100% { object-position: 50% 0; }
}
.paused .reel { animation-play-state: paused; }

/* 05 Driving school: the licence panels, in the site's own sign language */
.school { --cond: "Barlow Condensed", "Arial Narrow", sans-serif; --asphalt: #15171B; --sign-red: #D0261C; --road: #F4C21B; }
.panels { display: flex; gap: 6px; height: clamp(520px, 46vw, 660px); min-width: 0; }
.pnl {
  position: relative; isolation: isolate; flex: 1 1 0; min-width: 0; border-radius: 14px; overflow: hidden;
  background: var(--ph); transition: flex-grow .65s cubic-bezier(.2, .75, .25, 1), filter .5s;
}
.pnl::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 9px); }
.pnl::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(21, 23, 27, .9) 0%, rgba(21, 23, 27, .25) 55%, rgba(21, 23, 27, .45) 100%); transition: background .5s; }
.panels:not(.has-open) .pnl:hover { flex-grow: 1.35; }
.panels.has-open .pnl { flex-grow: .5; }
.panels.has-open .pnl.is-open { flex-grow: 5; }
.panels.has-open .pnl:not(.is-open) { filter: grayscale(.55) brightness(.8); }
.pnl.is-open::after { background: linear-gradient(90deg, rgba(21, 23, 27, .95) 0%, rgba(21, 23, 27, .84) 55%, rgba(21, 23, 27, .4) 100%); }
.pnl-h { font: inherit; }
.pnl-btn {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  padding: 16px; border: 0; background: transparent; color: #fff; text-align: left; cursor: pointer;
}
.pnl-letter { order: 2; font: 800 clamp(56px, 5.4vw, 96px)/.8 var(--cond); transition: font-size .4s; }
.pnl-name { order: 1; writing-mode: vertical-rl; transform: rotate(180deg); max-height: 58%; font: 800 clamp(18px, 1.6vw, 24px)/1.05 var(--cond); letter-spacing: .04em; text-transform: uppercase; }
.school .age {
  order: 0; position: relative; display: grid; place-items: center; align-content: center; width: 52px; height: 52px; border-radius: 50%;
  background: #fff; color: var(--asphalt); box-shadow: inset 0 0 0 5px var(--sign-red), 0 8px 20px -8px rgba(0, 0, 0, .6);
  font: 800 21px/.9 var(--cond); flex: none;
}
.school .age small { font: 700 8px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
/* The cross is a text glyph on a dark disc: a phone's forced dark mode keeps light text light, where it would darken white bars */
.pnl-x { display: none; color: #fff; font: 400 30px/1 var(--sans); }
.pnl-x::before { content: "\00D7"; }
.panels.has-open .pnl:not(.is-open) .pnl-btn { padding: 14px 4px; align-items: center; }
.panels.has-open .pnl:not(.is-open) .pnl-letter { font-size: clamp(24px, 2.3vw, 34px); }
.panels.has-open .pnl:not(.is-open) .age { width: 42px; height: 42px; font-size: 17px; }
.panels.has-open .pnl:not(.is-open) .age small { display: none; }
.panels.has-open .pnl:not(.is-open) .pnl-name { opacity: 0; }
.pnl.is-open .pnl-btn {
  inset: 14px 14px auto auto; width: 46px; height: 46px; min-height: 0; padding: 0 0 3px; border-radius: 50%;
  background: rgba(12, 13, 15, .85); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55), 0 4px 14px rgba(0, 0, 0, .45);
  align-items: center; justify-content: center;
}
.pnl.is-open .pnl-btn:hover { background: #2A2D33; }
.pnl.is-open .pnl-btn > :not(.pnl-x) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pnl.is-open .pnl-x { display: block; }
.pnl-content {
  position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head head" "facts notes";
  align-content: end; gap: 22px 30px; padding: 32px; opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s, transform .4s, visibility 0s .3s; color: #fff;
}
.pnl.is-open .pnl-content { opacity: 1; visibility: visible; transform: none; transition: opacity .4s .35s, transform .5s .35s, visibility 0s; }
/* Room on the right for the close button, so the licence name never runs under it */
.pc-head { grid-area: head; display: flex; align-items: flex-end; gap: 20px; padding-right: 56px; }
.pc-letter { font: 800 clamp(84px, 8.4vw, 136px)/.78 var(--cond); }
.pc-kicker { display: block; font: 700 16px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--road); }
.pc-name { display: block; margin-top: 6px; font: 800 clamp(28px, 3vw, 44px)/.95 var(--cond); text-transform: uppercase; }
.pc-facts { grid-area: facts; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-content: start; }
.pc-facts div { padding: 12px 14px; border-radius: 10px; background: #fff; color: var(--asphalt); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px var(--asphalt); }
.pc-facts .f-age { grid-row: span 2; display: grid; place-items: center; align-content: center; gap: 8px; padding: 14px 18px; }
.pc-facts .f-age .age { width: 72px; height: 72px; font-size: 30px; box-shadow: inset 0 0 0 7px var(--sign-red); }
.pc-facts .f-age .age small { font-size: 10px; }
.pc-facts dt { font: 700 13px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: #5E636B; }
.pc-facts dd { margin-top: 4px; font: 800 20px/1.05 var(--cond); text-transform: uppercase; }
.pc-notes { grid-area: notes; align-self: start; }
.pc-notes li { position: relative; padding: 10px 0 10px 26px; border-bottom: 1px dashed rgba(255, 255, 255, .22); font-size: 15.5px; line-height: 1.35; }
.pc-notes li:last-child { border-bottom: 0; }
.pc-notes li::before {
  content: ""; position: absolute; left: 2px; top: 14px; width: 12px; height: 6px;
  border-left: 2.5px solid var(--road); border-bottom: 2.5px solid var(--road); transform: rotate(-45deg);
}

/* 06 Codex protocol */
.proto { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: stretch; }
.proto svg { display: block; width: 100%; height: auto; }
.proto .link-line { stroke: #2C332F; stroke-width: 2; }
.proto .link-label { fill: var(--muted); font: 400 11px var(--mono); }
.proto .node rect { fill: rgba(14, 18, 16, .92); stroke: #3A413D; }
.proto .node text { fill: var(--white); font: 600 15px var(--sans); text-anchor: middle; }
.proto .node .sub { fill: var(--muted); font: 400 11px var(--mono); }
.proto .node.hit rect { stroke: var(--red); }
.proto .server rect { stroke: var(--red); }
.proto .pk circle { filter: drop-shadow(0 0 6px currentColor); }
.proto .pk text { font: 500 11px var(--mono); text-anchor: middle; }
.proto-side { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-left: 1px solid var(--line); min-width: 0; }
.proto-log { display: flex; flex-direction: column; gap: 3px; flex: 1; min-height: 220px; overflow: hidden; font-size: 12px; }
.proto-log li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); animation: logIn .35s ease both; }
.proto-log li b { color: var(--white); font-weight: 500; }
.proto-log li:first-child { color: var(--white); }
@keyframes logIn { from { opacity: 0; transform: translateY(-6px); } }
.ring { position: relative; width: 120px; height: 120px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 9; }
.ring-bg { stroke: #1F2522; }
.ring-fg { stroke: var(--red); stroke-linecap: round; stroke-dasharray: 314.16; stroke-dashoffset: calc(314.16 * (1 - var(--p) / 100)); transition: stroke-dashoffset 1.4s cubic-bezier(.2, .7, .2, 1); filter: drop-shadow(0 0 6px rgba(255, 143, 115, .6)); }
.ring.wait .ring-fg { stroke-dashoffset: 314.16; }
.ring span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring b { font: 600 28px/1 var(--sans); }
.ring i { font-style: normal; font-size: 11px; color: var(--muted); }

/* 08 Diabetes */
[data-inst="diabetes"] canvas { height: clamp(240px, 26vw, 340px); cursor: default; }
.slider { display: grid; grid-template-columns: auto minmax(0, 1fr) 56px auto; align-items: center; gap: 10px 16px; padding: 14px; border-top: 1px solid var(--line); }
.slider input { width: 100%; accent-color: var(--green); min-height: 44px; }
.slider output { color: var(--green); font-size: 16px; }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.metrics div { padding: 14px; }
.metrics div + div { border-left: 1px solid var(--line); }
.metrics dt { font: 400 12px/1.4 var(--mono); color: var(--muted); }
.metrics dd { font: 500 clamp(26px, 3vw, 40px)/1.1 var(--sans); font-stretch: 75%; font-variant-numeric: tabular-nums; }

/* 09 Digital logic */
.vhdl { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.fsm { display: flex; flex-wrap: wrap; gap: 6px; }
.fsm span { padding: 6px 10px; border: 1px solid var(--line); color: var(--muted); transition: all .2s; }
.fsm span.on { color: var(--black); background: var(--red); border-color: var(--red); box-shadow: 0 0 14px rgba(255, 143, 115, .5); }
.mem { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.cell { display: flex; flex-direction: column; border: 1px solid var(--line); font: 400 12px/1 var(--mono); text-align: center; min-width: 0; transition: border-color .2s, background .2s; }
.cell span { padding: 7px 0; }
.cell span + span { border-top: 1px solid var(--line); color: var(--muted); }
.cell.read { border-color: var(--blue); background: rgba(143, 168, 255, .08); }
.cell.write { border-color: var(--red); background: rgba(255, 143, 115, .1); }
.cell .filled { color: var(--red); }
.cell .cred { color: var(--yellow); }
.vhdl canvas.wave { width: 100%; height: 150px; border: 1px solid var(--line); background: var(--panel); cursor: default; }
.vhdl-ctl { display: flex; flex-wrap: wrap; gap: 8px; }

/* 10 Public health tool: stage boxes in step with the terminal and the chart */
.stages { display: flex; flex-direction: column; gap: 6px; width: 100%; counter-reset: stage; }
.stages li { counter-increment: stage; }
.stages button {
  position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; gap: 0 10px; width: 100%;
  min-height: 56px; padding: 9px 12px; border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  text-align: left; cursor: pointer; overflow: hidden; transition: border-color .3s, color .3s;
}
.stages button::before { content: counter(stage, decimal-leading-zero); grid-row: 1 / 3; align-self: center; font: 400 13px var(--mono); color: #6E7772; }
.stages b { font-weight: 600; color: inherit; }
.stages span { font: 400 12px/1.35 var(--mono); }
.stages button::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; }
.stages button:hover { color: var(--white); }
.stages button.done { color: #C8D0CB; }
.stages button.done::after { transform: scaleX(1); opacity: .35; }
.stages button[aria-pressed="true"] { color: var(--white); border-color: var(--blue); background: rgba(143, 168, 255, .07); }
.stages button[aria-pressed="true"]::before { color: var(--blue); }
.stages button[aria-pressed="true"]::after { animation: pass 3.4s linear both; }
@keyframes pass { to { transform: scaleX(1); } }
.health { display: grid; grid-template-rows: auto auto auto; }
.term {
  height: 190px; margin: 0; padding: 12px 14px; overflow: hidden; border-bottom: 1px solid var(--line);
  background: rgba(1, 2, 1, .75); color: #9FE8B8; font-size: 12.5px; line-height: 1.45; white-space: pre-wrap;
}
.term .c { color: #7E8782; }
.term .cur { display: inline-block; width: 7px; height: 1em; background: #9FE8B8; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
[data-inst="health"] canvas { height: clamp(300px, 30vw, 420px); cursor: default; }
.health-note { min-height: 3.2em; padding: 10px 14px 14px; border-top: 1px solid var(--line); color: var(--muted); }

.contact { margin-top: var(--gap-half); padding-top: var(--gap-half); }
.contact-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 40px; padding: 16px var(--gutter) 10px; }
.email { display: inline-flex; align-items: center; min-height: 44px; font-size: clamp(21px, 2.2vw, 30px); }
.credit { padding: 0 var(--gutter) 28px; color: #7E8782; }

@media (max-width: 1100px) {
  .plate-x, .site-grid { grid-template-columns: minmax(0, 1fr); }
  .head { position: static; }
  .rail { display: none; }
  .proto { grid-template-columns: minmax(0, 1fr); }
  .proto-side { border-left: 0; border-top: 1px solid var(--line); }
  .proto-log { min-height: 150px; }
  .pnl-content { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "facts" "notes"; gap: 16px; padding: 24px; }
  /* Single column: the boxes sit straight above the terminal and chart they follow */
  .stages { order: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
}

@media (max-width: 900px) {
  .hero-foot { flex-wrap: wrap; padding-left: var(--gutter); }
  .plate:not(.plate-small) { margin-left: calc(-1 * var(--gutter)); }
  .reel-ctl { flex: 1 1 100%; }
  .results { grid-template-columns: minmax(0, 1fr); }
  .results dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .stages { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .stages button { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 4px; min-height: 64px; padding: 8px 4px 8px 6px; }
  .stages button::before { grid-row: auto; align-self: start; font-size: 11px; }
  .stages b { font-size: 11px; line-height: 1.15; }
  .stages span { display: none; }
  .panels { flex-direction: column; height: auto; }
  .pnl, .panels.has-open .pnl, .panels.has-open .pnl.is-open { flex: none; }
  .pnl { min-height: 84px; }
  .pnl-btn, .panels.has-open .pnl:not(.is-open) .pnl-btn { position: relative; inset: auto; flex-direction: row; align-items: center; gap: 14px; min-height: 84px; padding: 16px; }
  .pnl-letter, .panels.has-open .pnl:not(.is-open) .pnl-letter { order: 0; min-width: 64px; font-size: 50px; }
  .pnl-name, .panels.has-open .pnl:not(.is-open) .pnl-name { order: 1; flex: 1; writing-mode: horizontal-tb; transform: none; max-height: none; font-size: 19px; opacity: 1; }
  .school .age, .panels.has-open .pnl:not(.is-open) .age { order: 2; width: 46px; height: 46px; font-size: 18px; }
  .panels.has-open .pnl:not(.is-open) .age small { display: block; font-size: 7px; }
  .panels.has-open .pnl:not(.is-open) { filter: none; }
  .pnl.is-open .pnl-btn { position: absolute; }
  .pnl.is-open .pnl-content { position: relative; }
  .pnl-content { position: absolute; padding: 24px 18px; }
  .pnl.is-open { min-height: 0; }
}

@media (max-width: 680px) {
  .slider { grid-template-columns: minmax(0, 1fr) 56px; }
  .slider label, .slider .ghost { grid-column: 1 / -1; }
  .story-ctl { grid-template-columns: auto minmax(0, 1fr); }
  .story-ctl output { grid-column: 1 / -1; grid-row: 1; text-align: left; }
  /* One reading per line, label on the left and number on the right */
  .story-read { display: grid; gap: 4px; }
  .story-read > span { display: flex; justify-content: space-between; }
  .metrics dd { font-size: 26px; }
  .mem { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .devices { height: 300px; }
  .channel-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .term { height: 170px; font-size: 11.5px; }
}

@media (max-width: 620px) {
  .stage { grid-template-columns: minmax(0, 1fr); }
  .field:not(:first-child) { display: none; }
  .results dl { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { transition: none; }
  .ch, .channel-buttons button, .channel-buttons i, .pnl, .pnl-content, .pip::after { transition: none; }
  .reel, .stages button::after, .proto-log li, .term .cur { animation: none; }
  .ring-fg { transition: none; }
}