/* Renoda Labs site stylesheet. Extracted from final/index.html (Round 3 A, CRT Console,
   Phosphor Monogram) and generalised for the multi-page build. Phosphor palette lives in
   custom properties so html.amber can swap the whole set. html.reduce mirrors
   prefers-reduced-motion. @media print at the end renders every page as a spec sheet. */

:root{
  --ground:#050A07;
  --ground-2:#0A140D;
  --screen:#06110A;
  --rule:#1E3A28;
  --rule-2:#173021;
  --phos:#33FF66;
  --phos-rgb:51,255,102;
  --phos-dim:#8FD3A3;
  --body:#C8F5D4;
  --ink:#050A07;
  --flash:#DFFFE8;
  --hi:200,245,212;
  --bezel-a:#141E17;
  --bezel-b:#0B130E;
  --vt:'VT323','Courier New',monospace;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --step:steps(5,end);
  --line:26px;
  --head:72px;
  --pad:clamp(20px,4vw,48px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--body);
  font:400 17px/var(--line) var(--sans);
  overflow-x:hidden;min-width:320px;
}
body::before{
  content:"";position:fixed;inset:0;z-index:40;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px);
}
img{max-width:100%;display:block}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--pad)}
[id]{scroll-margin-top:calc(var(--head) + 12px)}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* labels and buttons */
.mono{font:400 13px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--phos-dim)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 22px;
  font:400 22px/1 var(--vt);letter-spacing:.03em;text-transform:uppercase;
  border:1px solid var(--phos);border-radius:4px;text-decoration:none;
  transition:background-color .15s steps(3,end),color .15s steps(3,end),transform .1s steps(2,end),translate .1s steps(4,end);
}
.btn--solid{background:var(--phos);color:var(--ink)}
.btn--solid:hover{background:var(--ground);color:var(--phos)}
.btn--ghost{background:transparent;color:var(--phos)}
.btn--ghost:hover{background:rgba(var(--phos-rgb),.16)}
.btn--ink{background:var(--ink);color:var(--phos);border-color:var(--ink)}
.btn--ink:hover{background:transparent;color:var(--ink)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--phos);outline-offset:3px}
.btn--ink:focus-visible{outline-color:var(--ink)}
.btn--sm{min-height:44px;padding:0 16px;font-size:20px}

/* header, fixed over the screen */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:30;
  background:color-mix(in srgb,var(--ground) 90%,transparent);
  border-bottom:1px solid var(--rule);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.site-head .wrap{max-width:none;padding-inline:var(--pad)}
.site-head__row{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;min-height:64px;padding-block:8px}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--phos);padding:4px 0}
.brand__mark{
  width:32px;height:32px;flex:none;display:block;background:var(--phos);
  -webkit-mask:url(img/renoda-labs-mark-source.png) center/contain no-repeat;mask:url(img/renoda-labs-mark-source.png) center/contain no-repeat;
  transform-origin:50% 50%;will-change:transform;print-color-adjust:exact;-webkit-print-color-adjust:exact;
}
.brand__name{font:400 28px/1 var(--vt);letter-spacing:.01em}
.brand:hover .brand__name{text-decoration:underline;text-underline-offset:.12em}
.brand:focus-visible{outline:2px solid var(--phos);outline-offset:3px}
.nav{display:flex;gap:clamp(12px,2vw,28px);margin-left:auto}
.nav a{
  display:inline-block;padding:16px 2px;
  font:400 13px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;
  color:var(--phos-dim);text-decoration:none;border-bottom:1px solid transparent;
  transition:color .12s steps(2,end),border-color .12s steps(2,end);
}
.nav a:hover{color:var(--phos);border-bottom-color:var(--phos)}
.nav a:active{color:var(--body)}
.nav a:focus-visible{outline:2px solid var(--phos);outline-offset:-2px}
.nav a[aria-current="page"]{color:var(--phos);border-bottom-color:var(--phos)}
@media (max-width:900px){
  :root{--head:118px}
  .site-head__row{gap:8px 16px}
  .site-head .btn--sm{margin-left:auto}
  .nav{order:3;flex-basis:100%;margin-left:0;justify-content:space-between;gap:6px;border-top:1px solid var(--rule-2)}
  .nav a{padding:15px 0}
}
@media (max-width:560px){
  :root{--head:108px}
  .site-head__row{gap:8px 10px;min-height:56px;padding-block:6px}
  .brand{gap:9px}
  .brand__name{font-size:24px}
  .site-head .btn--sm{padding:0 11px;font-size:18px;letter-spacing:.02em}
}
@media (max-width:400px){
  .nav a{font-size:12px;letter-spacing:.04em}
}

/* program rail (desktop only, built by site.js from [data-prg] sections) */
.rail{
  display:none;position:fixed;z-index:25;top:50%;translate:0 -50%;
  left:calc(max(0px,(100vw - 1440px) / 2) + 40px);width:168px;
  padding:14px 0 10px;background:color-mix(in srgb,var(--ground) 86%,transparent);border:1px solid var(--rule);border-radius:6px;
  font:400 13px/20px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--phos-dim);
}
.rail__hd{padding:0 14px 10px;border-bottom:1px solid var(--rule-2);color:var(--phos)}
.rail a{
  display:flex;gap:10px;align-items:center;min-height:44px;padding:12px 14px;
  text-decoration:none;color:var(--phos-dim);border-left:2px solid transparent;
  transition:color .12s steps(2,end),border-color .12s steps(2,end);
}
.rail a::before{content:"  ";white-space:pre;color:var(--phos)}
.rail a:hover{color:var(--phos)}
.rail a:active{color:var(--body)}
.rail a:focus-visible{outline:2px solid var(--phos);outline-offset:-2px}
.rail a.visited{
  color:var(--phos-dim);
  text-shadow:0 0 6px rgba(var(--phos-rgb),.38),1px 0 0 rgba(var(--phos-rgb),.16);
}
.rail a.visited::before{color:var(--phos-dim);opacity:.55}
.rail a.is-active{color:var(--phos);border-left-color:var(--phos);text-shadow:none}
.rail a.is-active::before{content:"> ";color:var(--phos);opacity:1}
.rail__ln{margin-top:8px;padding:10px 14px 0;border-top:1px solid var(--rule-2);color:var(--phos)}
.rail__ln span{display:block}
.rail__ln b{font-weight:400;color:var(--phos-dim);margin-right:.6em}
@media (min-width:1180px){
  .js .rail.is-ready{display:block}
  html.has-rail .wrap{max-width:1440px;padding-left:240px;padding-right:56px}
  html.has-rail .site-head .wrap{padding-left:var(--pad);padding-right:var(--pad)}
}

/* program switch flash: two frames of phosphor over the target section */
[data-prg]{position:relative}
[data-prg].is-flash::after{
  content:"";position:absolute;inset:0;z-index:20;pointer-events:none;
  background:rgba(var(--phos-rgb),.22);
}

/* hero: the screen */
.hero{position:relative;height:calc(100svh + 80vh);margin:0}
.stage{
  position:sticky;top:0;min-height:100svh;overflow:hidden;
  background:var(--screen);
}
.stage__scene{position:absolute;inset:0;z-index:0;background:var(--screen)}
.stage__scene{clip-path:inset(0);animation:power-on .2s steps(6,end) 1 both}
.stage__fallback{position:absolute;inset:0;width:100%;height:100%}
.stage__fallback rect{fill:var(--screen)}
.stage__fallback g{stroke:var(--rule)}
.stage__fallback polyline{stroke:var(--phos)}
.stage__canvas{position:absolute;inset:0;width:100%!important;height:100%!important;opacity:0;transition:opacity .3s steps(4,end)}
.stage.is-live .stage__canvas{opacity:1}
.stage__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage.is-fallback .stage__fallback{display:none}
.stage__flash{
  position:absolute;z-index:1;left:4%;right:4%;top:50%;height:2px;margin-top:-1px;
  background:var(--flash);box-shadow:0 0 14px 4px rgba(var(--phos-rgb),.9);
  transform-origin:center;animation:flash .34s steps(6,end) 1 both;pointer-events:none;
}
.stage__scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--ground) 82%,transparent) 0%,color-mix(in srgb,var(--ground) 55%,transparent) 42%,color-mix(in srgb,var(--ground) 8%,transparent) 72%,transparent 100%);
}
.stage__bezel{
  position:absolute;inset:10px;z-index:3;pointer-events:none;border-radius:18px;
  border:1px solid var(--rule);
  box-shadow:inset 0 0 70px 12px rgba(0,0,0,.55),inset 0 1px 0 rgba(var(--hi),.06);
}
.stage__copy{
  position:relative;z-index:4;
  padding-top:calc(var(--head) + clamp(16px,3vh,40px));padding-bottom:64px;
  translate:0 calc(var(--p,0) * -48px);
}
.panel{
  max-width:680px;padding:clamp(18px,2.4vw,30px) clamp(18px,2.4vw,32px);
  background:color-mix(in srgb,var(--ground) 84%,transparent);border:1px solid var(--rule);border-radius:8px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.boot{
  font:400 clamp(18px,1vw + 13px,21px)/1.35 var(--vt);text-transform:uppercase;
  color:var(--phos);margin-bottom:clamp(18px,2.6vw,30px);
}
.boot li{min-height:1.35em;white-space:pre-wrap}
.boot li::before{content:"> ";color:var(--phos-dim)}
.cursor{
  display:inline-block;width:.55em;height:.9em;margin-left:.15em;
  background:var(--phos);vertical-align:-.1em;
  animation:blink 1s step-end infinite;
}
.hero__h1{
  font:400 clamp(44px,6.4vw,84px)/.95 var(--vt);letter-spacing:-.01em;
  color:var(--phos);margin-bottom:clamp(16px,2vw,24px);max-width:16ch;
  text-shadow:1px 0 rgba(255,96,96,.38),-1px 0 rgba(96,224,255,.38),0 0 18px rgba(var(--phos-rgb),.28);
  opacity:.12;transition:opacity .2s steps(3,end);
}
.hero.is-booted .hero__h1,.no-js .hero__h1{opacity:1}
.hero__deck{
  font-size:clamp(19.5px,1vw + 14px,21.5px);line-height:1.45;
  max-width:52ch;margin-bottom:clamp(22px,3vw,32px);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.stage__plate{
  position:absolute;z-index:4;left:0;right:0;bottom:18px;pointer-events:none;
  display:flex;align-items:center;gap:10px;
  font:400 13px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--phos-dim);
}
.stage__plate .led{width:8px;height:8px;border-radius:50%;background:var(--phos);box-shadow:0 0 8px var(--phos)}
.stage__plate .spacer{flex:1}
.stage__plate span{background:color-mix(in srgb,var(--ground) 70%,transparent);padding:6px 2px}

/* record strip: the hairline the trace lands on */
.record{background:var(--ground-2);border-top:1px solid var(--phos);border-bottom:1px solid var(--rule);position:relative;z-index:5}
.record.is-degauss{animation:degauss .32s steps(8,end) 1 both}
.record__grid{display:grid;grid-template-columns:repeat(3,1fr)}
.record__cell{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;padding:22px clamp(16px,3vw,40px) 22px 0}
.record__cell + .record__cell{border-left:1px solid var(--rule);padding-left:clamp(16px,3vw,40px)}
.record__num{font:400 clamp(44px,4.6vw,72px)/1 var(--vt);color:var(--phos)}
.record__key{font:400 13px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--phos-dim);max-width:16ch}

/* programs (sections) */
.sec{position:relative;background:var(--ground)}
.prg{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-bottom:clamp(22px,3vw,36px);
  font:400 13px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--phos-dim);
}
.prg__id{color:var(--phos)}
.prg__rule{flex:1 1 40px;height:0;border-top:1px dashed var(--rule);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--step)}
.sec.in .prg__rule,.no-js .prg__rule{transform:scaleX(1)}
.sec__h2{font:400 clamp(36px,2.2vw + 22px,56px)/1 var(--vt);color:var(--phos);margin-bottom:12px}
.sec__h2.typing::after{content:"";display:inline-block;width:.5em;height:.82em;margin-left:.08em;background:var(--phos);vertical-align:-.04em}
.sec__deck{font-size:clamp(19.5px,1vw + 14px,21.5px);line-height:1.45;max-width:56ch}
.sec__head{margin-bottom:clamp(28px,4vw,56px)}
.sec__head--split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 48px;align-items:end}
.sec__head--split .sec__deck{margin-bottom:6px}
h3{font:500 22px/1.25 var(--sans);color:var(--body);margin-bottom:8px}
.sec p{max-width:62ch}

/* work: horizontal band of screens */
.sec--work{padding-block:clamp(72px,9vw,128px)}
.band{
  position:relative;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;padding:4px 4px 18px;margin:0 -4px;
  scrollbar-width:thin;scrollbar-color:var(--phos) var(--rule-2);
}
.band:focus-visible{outline:2px solid var(--phos);outline-offset:2px}
.band::-webkit-scrollbar{height:6px}
.band::-webkit-scrollbar-track{background:var(--rule-2)}
.band::-webkit-scrollbar-thumb{background:var(--phos)}
.track{position:relative;display:flex;gap:16px;width:max-content}
.track__canvas{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .3s steps(4,end)}
.track.is-live .track__canvas{opacity:1}
.scr{
  position:relative;flex:0 0 min(78vw,400px);scroll-snap-align:start;
  padding:clamp(10px,1.4vw,14px);
  background:linear-gradient(160deg,var(--bezel-a),var(--bezel-b));
  border:1px solid var(--rule);border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(var(--hi),.06),0 12px 30px rgba(0,0,0,.4);
}
.scr__screen{
  height:100%;padding:clamp(18px,2.4vw,26px);
  background:var(--screen);border-radius:10px / 14px;
  box-shadow:inset 0 0 40px 6px rgba(0,0,0,.6),inset 0 0 0 1px #000;
}
.scr__glyph{
  position:relative;z-index:3;height:190px;margin-bottom:18px;pointer-events:none;
  border-bottom:1px solid var(--rule-2);
}
.scr__glyph svg{position:absolute;inset:0;width:100%;height:100%;padding:18px;stroke:var(--phos)}
.track.is-live .scr__glyph svg{display:none}
.scr__glyph::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 2px),
             radial-gradient(60% 60% at 50% 50%,transparent 40%,rgba(0,0,0,.55) 100%);
}
.scr__fmt{
  display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;
  font:400 13px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--phos);
}
.scr__code{font:400 22px/1.2 var(--vt);text-transform:uppercase}
.scr__code small{font:400 13px/1.4 var(--mono);letter-spacing:.08em;color:var(--phos-dim);margin-left:.5em}
.status{display:inline-flex;align-items:center;gap:10px;color:var(--phos)}
.blk{width:12px;height:12px;flex:none;border:1px solid var(--phos);background:transparent}
.blk--on{background:var(--phos);box-shadow:0 0 8px rgba(var(--phos-rgb),.6)}
.blk--half{background:linear-gradient(90deg,var(--phos) 50%,transparent 50%)}
.scr p{max-width:40ch}
.band__ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;margin-top:14px}
.band__nav{display:none;gap:8px}
.js .band__nav{display:flex}
.band__btn{
  min-width:44px;min-height:44px;padding:0 14px;cursor:pointer;
  background:transparent;color:var(--phos);border:1px solid var(--rule);border-radius:4px;
  font:400 20px/1 var(--vt);letter-spacing:.03em;text-transform:uppercase;
  transition:border-color .12s steps(2,end),background-color .12s steps(2,end);
}
.band__btn:hover{border-color:var(--phos);background:rgba(var(--phos-rgb),.12)}
.band__btn:active{transform:translateY(1px)}
.band__btn:focus-visible{outline:2px solid var(--phos);outline-offset:3px}
.legend{display:flex;flex-wrap:wrap;gap:8px 28px;font:400 13px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--phos-dim)}
.legend span{display:inline-flex;align-items:center;gap:10px}
@media (max-width:900px){
  .band{overflow:visible;padding:0;margin:0;scroll-snap-type:none}
  .track{display:grid;grid-template-columns:1fr;width:auto}
  .scr{flex:none;width:auto}
  .scr__glyph{height:150px}
  .band__nav{display:none!important}
}

/* capabilities: two-column readout */
.sec--cap{padding-block:clamp(56px,7vw,96px);background:var(--ground-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.readout{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,4vw,64px);border-top:1px solid var(--rule)}
.readout li{display:grid;grid-template-columns:7ch minmax(0,1fr);gap:6px 18px;padding:26px 0;border-bottom:1px solid var(--rule)}
.readout__idx{font:400 22px/1.25 var(--vt);color:var(--phos);text-transform:uppercase}
.readout h3,.readout p{grid-column:2}
.readout p{max-width:44ch}

/* engagement: bezelled cells */
.sec--eng{padding-block:clamp(48px,6vw,80px)}
.cells{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cell{
  padding:clamp(10px,1.4vw,16px);
  background:linear-gradient(160deg,var(--bezel-a),var(--bezel-b));
  border:1px solid var(--rule);border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(var(--hi),.06),0 12px 30px rgba(0,0,0,.4);
}
.cell__screen{
  height:100%;padding:clamp(20px,2.6vw,30px);
  background:var(--screen);border-radius:10px / 14px;
  box-shadow:inset 0 0 40px 6px rgba(0,0,0,.6),inset 0 0 0 1px #000;
}
.cell__fmt{
  display:flex;justify-content:space-between;gap:12px;margin-bottom:22px;
  font:400 13px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--phos);
}
.cell__fmt span:last-child{color:var(--phos-dim);text-align:right}
.cell p{max-width:44ch}

/* about */
.sec--about{padding-block:clamp(80px,10vw,140px)}
.about__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,6vw,96px)}
.about__role{font:400 13px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--phos-dim);margin-top:6px}
.about__lede{font:400 clamp(28px,1.6vw + 18px,40px)/1.1 var(--vt);color:var(--phos);margin:22px 0 24px;max-width:28ch}
.about__body p + p{margin-top:16px}
.about__pull{font:400 clamp(28px,1.6vw + 18px,40px)/1 var(--vt);color:var(--phos);margin-top:32px}
.kv{border-top:1px solid var(--phos);align-self:start}
.kv div{display:grid;grid-template-columns:11ch minmax(0,1fr);gap:8px 12px;padding:16px 0;border-bottom:1px solid var(--rule)}
.kv dt{font:400 13px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--phos-dim)}
.kv dd{font:400 22px/1.2 var(--vt);color:var(--phos);text-transform:uppercase}

/* contact band */
.contact{background:var(--phos);color:var(--ink);padding-block:clamp(56px,7vw,96px)}
.contact__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 48px;align-items:end}
.contact .prg,.contact .prg__id,.contact .sec__h2,.contact__deck{color:var(--ink)}
.contact .prg__rule{border-top-color:color-mix(in srgb,var(--ink) 45%,transparent)}
.contact .sec__h2{text-shadow:none}
.contact .sec__h2.typing::after{background:var(--ink)}
.contact.is-flash::after{background:rgba(255,255,255,.35)}
.contact__deck{max-width:48ch}
.contact__actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.contact__mail{
  display:inline-block;padding:8px 0;
  font:400 clamp(20px,1vw + 14px,26px)/1.3 var(--vt);color:var(--ink);
  text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:2px;
  overflow-wrap:anywhere;
}
.contact__mail:hover{text-decoration-thickness:3px}
.contact__mail:active{opacity:.75}
.contact__mail:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* footer and telemetry */
.foot{border-top:1px solid var(--rule);padding:32px 0 40px;font:400 13px/1.7 var(--mono);color:var(--phos-dim)}
.foot__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 40px}
.foot__line{max-width:60ch}
.foot nav{display:flex;flex-wrap:wrap;gap:0 24px;grid-column:1 / -1;margin-top:4px}
.foot a{display:inline-block;padding:11px 0;color:var(--phos-dim);text-decoration:underline;text-underline-offset:.2em}
.foot a:hover{color:var(--phos)}
.foot a:active{color:var(--body)}
.foot a:focus-visible{outline:2px solid var(--phos);outline-offset:2px}
.tele{
  grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;
  margin-top:18px;padding-top:14px;border-top:1px solid var(--rule-2);
  font:400 13px/1.7 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--phos-dim);
}
.tele > span{display:inline-flex;align-items:baseline;gap:.6em;white-space:nowrap}
.tele b{font-weight:400;color:var(--phos-dim)}
.tele [data-tele]{color:var(--phos);font-variant-numeric:tabular-nums}
.tele__btn{
  margin-left:auto;min-height:44px;padding:0 14px;cursor:pointer;
  background:transparent;color:var(--phos);border:1px solid var(--rule);border-radius:4px;
  font:400 13px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;
  transition:border-color .12s steps(2,end),background-color .12s steps(2,end);
}
.tele__btn:hover{border-color:var(--phos);background:rgba(var(--phos-rgb),.12)}
.tele__btn:active{transform:translateY(1px)}
.tele__btn:focus-visible{outline:2px solid var(--phos);outline-offset:3px}
.tele__btn[aria-pressed="true"]{background:var(--phos);color:var(--ink);border-color:var(--phos)}
@media (max-width:560px){
  .tele{gap:4px 16px}
  .tele__btn{margin-left:0;flex-basis:100%;margin-top:6px}
}

/* reveals and motion */
.rv{opacity:.12;transition:opacity .45s var(--step)}
.rv.in,.no-js .rv{opacity:1}
.stagger>:nth-child(2).rv{transition-delay:.08s}
.stagger>:nth-child(3).rv{transition-delay:.16s}
.stagger>:nth-child(4).rv{transition-delay:.24s}
.stagger>:nth-child(5).rv{transition-delay:.32s}
.stagger>:nth-child(6).rv{transition-delay:.4s}
@keyframes power-on{0%{clip-path:inset(50% 0 50% 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes flash{0%{opacity:1;transform:scaleX(.25)}30%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes degauss{
  0%{transform:translate(0,0) skewX(0)}
  15%{transform:translate(-7px,2px) skewX(-3deg)}
  35%{transform:translate(6px,-2px) skewX(2.4deg)}
  55%{transform:translate(-4px,1px) skewX(-1.4deg)}
  75%{transform:translate(2px,0) skewX(.6deg)}
  100%{transform:translate(0,0) skewX(0)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.hero__h1{opacity:1;transition:none}
  .stage__scene,.stage__flash,.record.is-degauss{animation:none}
  .stage__flash{display:none}
  .cursor{animation:none}
  .btn,.nav a,.rail a,.band__btn,.tele__btn,.prg__rule,.stage__canvas,.track__canvas{transition:none}
  .prg__rule{transform:none}
  .stage__copy{translate:none}
  .brand__mark{transform:none!important}
  [data-prg].is-flash::after{display:none}
}
html.reduce{scroll-behavior:auto}
html.reduce .rv,html.reduce .hero__h1{opacity:1;transition:none}
html.reduce .stage__scene,html.reduce .stage__flash,html.reduce .record.is-degauss{animation:none}
html.reduce .stage__flash{display:none}
html.reduce .cursor{animation:none}
html.reduce .btn,html.reduce .nav a,html.reduce .rail a,html.reduce .band__btn,html.reduce .tele__btn,html.reduce .prg__rule,html.reduce .stage__canvas,html.reduce .track__canvas{transition:none}
html.reduce .prg__rule{transform:none}
html.reduce .stage__copy{translate:none}
html.reduce .brand__mark{transform:none!important}
html.reduce [data-prg].is-flash::after{display:none}

/* responsive */
@media (max-width:900px){
  .hero{height:calc(100svh + 50vh)}
  .stage__scrim{background:linear-gradient(180deg,color-mix(in srgb,var(--ground) 70%,transparent),color-mix(in srgb,var(--ground) 50%,transparent) 60%,color-mix(in srgb,var(--ground) 20%,transparent))}
  .about__grid,.contact__grid,.sec__head--split{grid-template-columns:1fr}
  .about__lede{max-width:none}
}
@media (max-width:760px){
  .readout{grid-template-columns:1fr}
  .cells{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
}
@media (max-width:700px){
  .record__grid{grid-template-columns:1fr}
  .record__cell{padding:12px 0}
  .record__cell + .record__cell{border-left:0;border-top:1px solid var(--rule);padding-left:0}
  .record__num{font-size:44px}
}
@media (max-width:560px){
  body{font-size:16px}
  .hero__deck,.sec__deck{font-size:20px}
  .panel{padding:16px}
  .boot{font-size:17px}
  .stage__copy{padding-bottom:56px}
  .stage__bezel{inset:6px;border-radius:12px}
}

/* print: a one-page black-on-white spec sheet. The hero and the record span the sheet,
   the programs flow in two columns, interface chrome (boot lines, program banners, legend,
   telemetry, rail, canvases) is dropped, headings and copy stay, links print their URL. */
@media print{
  @page{margin:9mm}
  :root{--ground:#fff;--ground-2:#fff;--screen:#fff;--rule:#000;--rule-2:#888;--phos:#000;--phos-rgb:0,0,0;--phos-dim:#333;--body:#000;--ink:#000;--head:0px;--line:14px;--pad:0px}
  html{scroll-behavior:auto;zoom:.9}
  body{background:#fff;color:#000;font-size:8.5pt;line-height:1.28;overflow:visible}
  body::before{display:none}
  canvas,.stage__scene,.stage__flash,.stage__scrim,.stage__bezel,.stage__plate,.stage__img,.rail,.tele,.band__nav,.legend,.cursor,.scr__glyph,.site-head .btn,.foot a[href="#top"],.boot,.prg,.foot__line,.about__role{display:none!important}
  .site-head{position:static;background:none;border-bottom:1px solid #000;backdrop-filter:none}
  .site-head__row{min-height:0;padding:0 0 4px}
  .brand__mark{background:#000;transform:none!important}
  .brand__name{color:#000;font-size:18px}
  .nav{gap:12px}
  .nav a{padding:0;color:#000;border:0;font-size:8pt}
  .wrap{max-width:none;padding:0}
  main{columns:2;column-gap:7mm}
  .hero,.record{column-span:all}
  .hero{height:auto}
  .stage{position:static;min-height:0;overflow:visible;background:none}
  .stage__copy{padding:8px 0 0;translate:none}
  .panel{max-width:none;padding:0;background:none;border:0;box-shadow:none}
  .hero__h1{font-size:22pt;color:#000;text-shadow:none;opacity:1;margin:0 0 4px;max-width:none}
  .hero__deck,.sec__deck,.contact__deck{font-size:9.5pt;line-height:1.3;margin-bottom:4px;max-width:none}
  .hero__cta{gap:12px;margin-bottom:6px}
  .record{background:none;border-top:1px solid #000;border-bottom:1px solid #000;animation:none;margin-bottom:6px}
  .record__grid{grid-template-columns:repeat(3,1fr)!important}
  .record__cell{padding:4px 10px 4px 0}
  .record__cell + .record__cell{border-left:1px solid #000!important;border-top:0!important;padding-left:10px!important}
  .record__num{font-size:15pt;color:#000}
  .record__key{color:#000}
  .sec,.sec--cap,.sec--work,.sec--eng,.sec--about,.contact{padding-block:4px!important;background:none;border:0}
  .sec__h2{font-size:13pt;color:#000;margin-bottom:2px;min-height:0!important}
  .sec__h2.typing::after{display:none}
  .sec__h2 .sr{position:static!important;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal}
  .sec__h2 .h2__type{display:none}
  .sec__head{margin-bottom:3px}
  .sec__head--split{display:block!important}
  h3{font-size:9.5pt;color:#000;margin-bottom:0;break-after:avoid}
  p{max-width:none!important}
  .band{overflow:visible;padding:0;margin:0}
  .track{display:grid;grid-template-columns:1fr!important;gap:0;width:auto}
  .scr,.cell{flex:none;width:auto;padding:0;background:none;border:0;box-shadow:none;border-radius:0}
  .scr__screen,.cell__screen{padding:2px 0;background:none;box-shadow:none;border-top:1px solid #888}
  .scr__fmt,.cell__fmt{margin-bottom:1px;color:#000}
  .scr__code{font-size:9.5pt}
  .blk{border-color:#000}
  .blk--on{background:#000;box-shadow:none}
  .readout,.cells{grid-template-columns:1fr!important;gap:0!important;border-top:1px solid #000}
  .readout li{padding:2px 0;border-bottom:1px solid #888;gap:0 8px}
  .readout__idx{font-size:9.5pt;color:#000}
  .about__grid{grid-template-columns:1fr!important;gap:4px!important}
  .about__lede{font-size:10.5pt;color:#000;margin:3px 0}
  .about__body p + p{margin-top:3px}
  .about__pull{font-size:10.5pt;color:#000;margin-top:4px}
  .kv{border-top:1px solid #000}
  .kv div{padding:1px 0;border-bottom:1px solid #888}
  .kv dt{color:#000}
  .kv dd{color:#000;font-size:9.5pt}
  .contact{color:#000;border-top:1px solid #000}
  .contact__grid{display:block}
  .contact__actions{gap:2px}
  .contact__mail{color:#000;font-size:9.5pt;padding:0}
  .btn,.tele__btn,.band__btn{
    display:inline;min-height:0;padding:0;border:0;border-radius:0;background:none!important;color:#000!important;
    font:400 8.5pt/1.3 var(--mono);text-transform:none;letter-spacing:0;text-decoration:underline;
  }
  a[href^="http"]::after,a[href^="mailto:"]::after{content:" (" attr(href) ")";font:400 7.5pt/1.3 var(--mono);color:#000;text-decoration:none}
  .foot{column-span:all;border-top:1px solid #000;padding:3px 0 0;color:#000;font-size:8pt}
  .foot__grid{display:block}
  .foot nav{margin-top:0;gap:0 14px}
  .foot a{padding:0;color:#000}
  .rv,.hero__h1{opacity:1!important;transition:none}
  [data-prg].is-flash::after{display:none}
}

/* terminal fields */
/* Text fields as terminal lines: a mono ">" prompt, a transparent field over one phosphor
   hairline, and a block cursor placed by features/terminal-fields.js. Fields keep their own
   id, name, classes and attributes; the script adds .tl__field and data-tl only. Vars the
   script sets on each .tl: --tl-fs (font size), --tl-lh (line height), --tl-pt (text top),
   --tl-cw (one cell), --tl-font (a hosted field, the palette prompt, keeps its own face). */
.tl{
  position:relative;display:flex;align-items:flex-start;min-width:0;flex:1 1 auto;
  border-bottom:1px solid rgba(var(--phos-rgb),.45);
  transition:border-color .12s steps(2,end);
}
.tl:hover{border-bottom-color:rgba(var(--phos-rgb),.7)}
.tl:focus-within{border-bottom-color:var(--phos)}
.tl:has(> [aria-invalid="true"]){border-bottom-style:dashed;border-bottom-color:var(--phos)}
.tl--hosted{border-bottom:0}
.tl__gt{
  flex:none;padding-top:var(--tl-pt,0);
  font:400 var(--tl-fs,1em)/var(--tl-lh,1.5) var(--mono);color:var(--phos-dim);
  white-space:pre;user-select:none;-webkit-user-select:none;
  transition:color .12s steps(2,end);
}
.tl:focus-within .tl__gt,.tl:has(> [aria-invalid="true"]) .tl__gt{color:var(--phos)}
.tl > input.tl__field,.tl > textarea.tl__field,.tl > select.tl__field{
  display:block;flex:1 1 0%;min-width:0;width:auto;margin:0;
  padding-left:0;padding-right:var(--tl-cw,.6em);
  font-family:var(--tl-font,var(--mono));color:var(--body);
  background:transparent;border:0;border-radius:0;box-shadow:none;
  caret-color:transparent;transition:none;
}
.tl > input.tl__field:focus-visible,.tl > textarea.tl__field:focus-visible,.tl > select.tl__field:focus-visible{outline:none}
.tl:has(> :focus-visible){outline:2px solid var(--phos);outline-offset:3px}
.tl--hosted:has(> :focus-visible){outline-offset:-2px}
@supports not selector(:has(a)){
  .tl:focus-within{outline:2px solid var(--phos);outline-offset:3px}
}
.tl > .tl__field::placeholder{color:var(--phos-dim);opacity:1;font-family:var(--tl-font,var(--mono))}
.tl > .tl__field::selection{background:var(--phos);color:var(--ink)}
.tl > input.tl__field:-webkit-autofill{-webkit-text-fill-color:var(--body);box-shadow:inset 0 0 0 100px var(--ground);caret-color:transparent}
.tl > textarea.tl__field{resize:none;overflow:hidden}
.tl__cursor{
  display:none;position:absolute;left:0;top:0;z-index:2;pointer-events:none;overflow:hidden;
  width:var(--tl-cw,.6em);height:var(--tl-lh,1.5em);
  background:var(--phos);color:var(--ink);
  font:400 var(--tl-fs,1em)/var(--tl-lh,1.5em) var(--tl-font,var(--mono));
  white-space:pre;text-align:left;
}
.tl:focus-within > .tl__cursor{display:block;animation:blink 1s steps(1,end) infinite}
.tl.is-typing > .tl__cursor{animation:none;opacity:1}
.tl__mirror{position:fixed;top:0;left:0;z-index:-1;visibility:hidden;pointer-events:none;margin:0;border:0}

/* select: prompt on the left, a mono "v" on the right, native control kept */
.tl--select{align-items:center}
.tl > select.tl__field{appearance:none;-webkit-appearance:none;padding-right:2.2em;cursor:pointer}
.tl__v{position:absolute;right:.5em;top:50%;translate:0 -50%;font:400 var(--tl-fs,1em)/1 var(--mono);color:var(--phos-dim);pointer-events:none;user-select:none;-webkit-user-select:none}
.tl:focus-within .tl__v,.tl:hover .tl__v{color:var(--phos)}
:has(> .tl.tl--select)::after{display:none}

/* checkbox: native box visually hidden, still focusable and labelled; brackets carry the state */
.tl-check{position:relative;display:inline-flex;align-items:center;flex:none}
.tl-check > input.tl__cb{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;opacity:0;appearance:none;-webkit-appearance:none;box-shadow:none}
.tl-check > input.tl__cb:focus-visible{outline:none}
.tl__box{font:400 1em/1 var(--mono);color:var(--phos-dim);white-space:pre;user-select:none;-webkit-user-select:none;transition:color .12s steps(2,end)}
.tl__box::before{content:"[ ]"}
.tl-check > input.tl__cb:checked + .tl__box{color:var(--phos)}
.tl-check > input.tl__cb:checked + .tl__box::before{content:"[x]"}
.tl-check:hover .tl__box,label:hover > .tl-check .tl__box{color:var(--phos)}
.tl-check > input.tl__cb:focus-visible + .tl__box{color:var(--phos);outline:2px solid var(--phos);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .tl:focus-within > .tl__cursor{animation:none;opacity:1}
  .tl,.tl__gt,.tl__v,.tl__box{transition:none}
}
html.reduce .tl:focus-within > .tl__cursor{animation:none;opacity:1}
html.reduce .tl,html.reduce .tl__gt,html.reduce .tl__v,html.reduce .tl__box{transition:none}
@media print{
  .tl__cursor,.tl__mirror{display:none}
  .tl{border-bottom:1px solid #000}
}

/* status readouts: bracketed mono, three brightness levels, no marks */
.status{display:inline-flex;align-items:center;gap:0;font-family:var(--mono,'IBM Plex Mono',monospace);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.status::before{content:"[ "}.status::after{content:" ]"}
.status::before,.status::after{color:var(--phos-dim,#8FD3A3);opacity:.7}
.status[data-state="deployed"]{color:var(--phos,#33FF66);text-shadow:0 0 6px rgba(51,255,102,.35)}
.status[data-state="in-progress"]{color:var(--body,#C8F5D4)}
.status[data-state="experimental"]{color:var(--phos-dim,#8FD3A3)}
.status[data-state="deployed"]{text-shadow:0 0 6px rgba(var(--phos-rgb,51,255,102),.35)}
.status .blk{display:none}

/* easter eggs */
/* the boot block as a console: once egg lines arrive it becomes a nine-line window that follows the typing */
.boot.boot--tty{max-height:calc(9 * 1.35em);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--phos) var(--rule-2)}
.boot.boot--tty::-webkit-scrollbar{width:6px}
.boot.boot--tty::-webkit-scrollbar-track{background:var(--rule-2)}
.boot.boot--tty::-webkit-scrollbar-thumb{background:var(--phos)}
.boot li a{color:var(--phos);text-decoration:underline;text-underline-offset:.15em}
.boot li a:hover{text-decoration-thickness:2px}
.boot li a:focus-visible{outline:2px solid var(--phos);outline-offset:2px}
/* the console panel on sub pages: non-modal, bottom left, the deploy overlay's material */
.rl-egg{
  position:fixed;left:16px;bottom:16px;z-index:36;
  width:min(560px,calc(100vw - 32px));max-height:min(60vh,520px);display:flex;flex-direction:column;
  background:var(--ground);border:1px solid var(--phos);border-radius:0;
  box-shadow:0 0 28px rgba(var(--phos-rgb),.18),0 24px 60px rgba(0,0,0,.6);
  animation:egg-on .18s steps(6,end) both;
}
.rl-egg[hidden]{display:none}
.rl-egg__hd{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:4px 4px 4px 16px;
  border-bottom:1px solid var(--rule);font:400 13px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--phos-dim);
}
.rl-egg__x{
  min-width:44px;min-height:44px;padding:0 10px;cursor:pointer;
  background:transparent;border:1px solid var(--rule);border-radius:0;color:var(--phos-dim);
  font:400 13px/1 var(--mono);letter-spacing:.08em;
}
.rl-egg__x:hover{border-color:var(--phos);color:var(--phos)}
.rl-egg__x:active{transform:translateY(1px)}
.rl-egg__x:focus-visible{outline:2px solid var(--phos);outline-offset:-2px}
.rl-egg__lines{
  margin:0;padding:12px 16px 14px;list-style:none;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--phos) var(--rule-2);
  font:400 clamp(18px,1vw + 13px,21px)/1.35 var(--vt);text-transform:uppercase;color:var(--phos);
}
.rl-egg__lines li{min-height:1.35em;white-space:pre-wrap;overflow-wrap:anywhere}
.rl-egg__lines li::before{content:"> ";color:var(--phos-dim)}
.rl-egg__lines a{color:var(--phos);text-decoration:underline;text-underline-offset:.15em}
.rl-egg__lines a:focus-visible{outline:2px solid var(--phos);outline-offset:2px}
@keyframes egg-on{0%{clip-path:inset(50% 0 50% 0)}100%{clip-path:inset(0 0 0 0)}}
/* power off: the picture collapses to a line, the line to a point; then black; then the stage's own power-on */
@keyframes egg-power-off{
  0%{clip-path:inset(0 0 0 0)}
  60%{clip-path:inset(calc(50% - 1px) 0 calc(50% - 1px) 0)}
  100%{clip-path:inset(calc(50% - 1px) 50% calc(50% - 1px) 50%)}
}
.stage.is-off .stage__scene{animation:egg-power-off .42s steps(9,end) 1 both}
.stage.is-off .stage__copy,.stage.is-off .stage__plate,.stage.is-off .stage__bezel,.stage.is-off .stage__scrim{opacity:0}
.stage.is-black{background:#000}
.stage.is-black .stage__scene,.stage.is-black .stage__flash,.stage.is-black .stage__copy,.stage.is-black .stage__plate,.stage.is-black .stage__bezel,.stage.is-black .stage__scrim{visibility:hidden}
.rl-pwr{pointer-events:auto;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}
.rl-pwr.is-held{color:var(--phos)}
/* degauss on demand: the record strip's keyframes over the page's blocks (never body: fixed chrome would jump) */
html.rl-degauss main,html.rl-degauss .site-head,html.rl-degauss .foot,html.rl-degauss .rail{animation:degauss .32s steps(8,end) 1 both}
/* night mode: a dim over everything with a slightly warmer scanline */
html.night body::after{
  content:"";position:fixed;inset:0;z-index:41;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(64,32,0,.22) 0 1px,transparent 1px 3px),rgba(0,0,0,.55);
}
/* telemetry bar: END OF TAPE, the clickable counters, the build link, the sparkline */
.tele__tape{color:var(--phos);text-shadow:0 0 8px rgba(var(--phos-rgb),.6)}
.tele .rl-ln,.rail .rl-ln{cursor:pointer}
.tele .rl-ln:focus-visible,.rail .rl-ln:focus-visible{outline:2px solid var(--phos);outline-offset:2px}
.tele a[data-tele="build"]{padding:0;color:var(--phos);text-decoration:underline;text-underline-offset:.2em}
.tele a[data-tele="build"]:not([href]){text-decoration:none;cursor:default}
.tele .rl-spark{display:inline-block;width:120px;height:22px;vertical-align:middle;margin-left:.4em}
/* the portrait re-dither canvas sits over the image and under the screen's scanlines */
.rl-dither{position:absolute;inset:0;width:100%;height:100%;display:block}
.portrait__screen.rl-dither-host{cursor:pointer}
@media (max-width:560px){
  .boot.boot--tty{max-height:calc(7 * 1.35em)}
}
@media (prefers-reduced-motion:reduce){
  .rl-egg,.stage.is-off .stage__scene,html.rl-degauss main,html.rl-degauss .site-head,html.rl-degauss .foot,html.rl-degauss .rail{animation:none}
}
html.reduce .rl-egg,html.reduce .stage.is-off .stage__scene,html.reduce.rl-degauss main,html.reduce.rl-degauss .site-head,html.reduce.rl-degauss .foot,html.reduce.rl-degauss .rail{animation:none}
@media print{
  .rl-egg,.rl-dither,.rl-spark,.tele__tape{display:none!important}
  html.night body::after{display:none}
  .foot::after{content:"Printed from a CRT. Phosphor not included.";display:block;margin-top:3px;font:400 8pt/1.3 var(--mono);color:#000}
}

/* build hash link target */
a[data-tele="build"]{display:inline-flex;align-items:center;min-height:32px}