/* Layout only. What you see is drawn by the board renderer from this layout: the text below is the
   real text of the page, kept transparent on top of the canvas so it can be selected, searched,
   read aloud and followed. If the renderer cannot start, these same rules show a plain page. */
@font-face{font-family:Mono;src:url('/assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');font-weight:400;font-display:block}
@font-face{font-family:Space;src:url('/assets/fonts/space-grotesk-500-latin.woff2') format('woff2');font-weight:500 700;font-display:swap}   /* one variable file serves both weights */

:root{
  /* the working column: it widens on a broad monitor so a 16:9 screen is used, not just centred on */
  --colw:clamp(1120px,80vw,1560px);
  --rail:max(20px,calc((100vw - var(--colw)) / 2));
  --tw:.09;            /* trace width of the lettering, in em */
  --ink:au;            /* au: exposed gold copper · ko: knocked out of a gold pad · cu: under the mask · silk: white ink */
  --gold:#e0bd6e;
  --gap:44px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:#090909;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:40px}
body{margin:0;color:var(--gold);font:400 16px/1.75 Mono,ui-monospace,Menlo,Consolas,monospace;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
a.plain,.pad,.brand{text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip:focus{position:fixed;z-index:50;top:12px;left:12px;background:#e2b961;color:#0b140e;padding:12px 16px;border-radius:6px}
:focus-visible{outline:2px solid #ffffff;outline-offset:6px;border-radius:8px}

#pcb{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;display:block;opacity:0;transition:opacity 1.1s ease}
#board{position:relative;z-index:1;padding:0 var(--rail)}
/* what the camera adds: falloff towards the corners and a little sensor grain */
.lens{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity 1.1s ease;background:radial-gradient(ellipse 115% 105% at 48% 44%,transparent 52%,rgba(0,0,0,.42) 100%)}
.lens::after{content:"";position:absolute;inset:0;opacity:.11;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}
.pcb-on .lens{opacity:1}
.col{max-width:var(--colw);margin:0 auto}
.w{white-space:nowrap}
.t{font:inherit;letter-spacing:0;font-kerning:none;font-variant-ligatures:none;transition:color .25s ease}
.display img{transition:opacity .4s ease}
.still *,.still *::after{transition:none!important}
.part{display:block;pointer-events:none;flex:none}

/* while the renderer starts, hold the plain page back and show a single power LED instead */
.boot #board{opacity:0}
.boot .name{color:transparent}   /* the board cuts the name in itself; without this the page's own lettering would show for a moment first */
.boot body::before{content:"";position:fixed;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:#ffd27a;box-shadow:0 0 18px 4px rgba(255,200,110,.45);animation:led 1.2s ease-in-out infinite}
@keyframes led{50%{opacity:.25}}

/* the renderer is running: the canvas carries the look, the DOM carries the meaning */
.pcb-on #pcb{opacity:1}
.pcb-on .t,.pcb-on .t a{color:transparent;text-decoration-color:transparent}
.pcb-on .display img{opacity:0}
.pcb-on ::selection{background:rgba(255,226,150,.32);color:transparent}

/* a pad: exposed, gold-plated copper with the label knocked out of it */
.pad{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 28px;border-radius:26px;font-size:17px;line-height:1;text-transform:uppercase;white-space:nowrap;cursor:pointer;--ink:ko;--tw:.11}
html:not(.pcb-on) .pad{background:#d9b560;color:#0b140e}
.pad.slim{height:40px;padding:0 18px;font-size:13px;border-radius:20px}
.acts{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px}

.small{font-size:13px;line-height:1.7}
.fcc{font-size:13px;line-height:1.6;max-width:66ch;--ink:silk}
.note{font-size:14.5px;line-height:1.7;max-width:60ch}
.status{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;font-size:13px;text-transform:uppercase}
.ledslot{width:34px;height:18px;margin-right:-6px}
.sum{font-size:16.5px;max-width:52ch}
.cap{font-size:13px;margin-top:14px;max-width:58ch}
.tps{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:26px;font-size:13px;text-transform:uppercase}
.tps li{padding-left:30px}
.tps.stackcol{flex-direction:column;gap:14px;margin-top:0}
.shot{display:block}
.bay{position:relative;height:226px}
.fpcslot{position:absolute;left:calc(50% - 20px);top:52px;width:40px;height:40px}

/* ---------- top ---------- */
/* the strip above the nav pads is routing space: the nav chip's inputs and outputs run there */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding-top:48px;min-height:114px}
.brand{font-size:17px;text-transform:uppercase;--tw:.1}
.nav{display:flex;gap:12px}
.nav .pad{height:42px;padding:0 20px;font-size:14px;border-radius:21px}

/* ---------- hero: Relay docked in the board, with the name and its summary beside it ----------
   The dock is sized from the height of the window, so on a 16:9 screen the whole device is in view. */
.hero{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:var(--gap);align-items:start;padding:46px 0 96px}
.dock{grid-column:1;grid-row:1/-1;min-width:0;margin-right:28px}   /* room beside the dock for the name's nets to stand clear of the lettering */
.dockbox{position:relative;height:clamp(440px,calc(100vh - 262px),980px);aspect-ratio:53415/85020}
@media(min-width:980px) and (max-width:1099px){.dockbox{height:clamp(440px,calc(100vh - 262px),880px)}}   /* a tall, narrow window must not let the dock squeeze the name's column */
.dock .cap{--ink:silk;text-transform:uppercase;font-size:11px;line-height:1.65;margin-top:28px;width:0;min-width:100%;max-width:none}
.relayslot{position:absolute;inset:0}
.dockfig,.sdfig,.modelfig{display:none}
/* a device's picture stands in for its dock on a plain page, or if its model cannot load */
.nodock .dockfig{display:flex;position:absolute;inset:0;align-items:center}
.mcu{grid-column:2;grid-row:1;width:100%;height:216px}
.name{grid-column:2;grid-row:2;margin-top:54px;font-size:clamp(48px,min(7.3vw,13.5vh),118px);line-height:1.04;text-transform:uppercase;--tw:.104}
.name .ln{display:block}
.name .ln+.ln{margin-top:.08em}
.tagline{grid-column:2;grid-row:3;margin-top:80px;font-size:13px;text-transform:uppercase}
.lead{grid-column:2;grid-row:4;margin-top:30px;min-width:0}
.lead h2,.feature h2{font-size:clamp(34px,3.2vw,52px);line-height:1.1;text-transform:uppercase;--tw:.104;margin:14px 0 18px}
.lead .sum{font-size:16px}
.lead .fcc{margin-top:22px}
.lead .acts{margin-top:26px;align-items:center}
.lead .acts .pad{margin-bottom:28px}
/* the tiny window onto the product's own site */
.sitewin{display:flex;flex-direction:column;gap:8px;cursor:pointer}
.mini{width:232px;aspect-ratio:16/10;overflow:hidden}
.mini img{width:100%;height:100%;object-fit:cover;object-position:top}
.sitewin .tag{text-transform:uppercase;font-size:11.5px}

/* a wide monitor: the Relay block moves up beside the name, so the first screen holds all of it */
@media(min-width:1700px){
  .hero{grid-template-columns:auto minmax(0,1.02fr) minmax(0,1fr);column-gap:56px}
  .name{font-size:clamp(72px,4.75vw,96px)}
  .lead{grid-column:3;grid-row:2/-1;margin-top:54px}
}

/* ---------- section titles ---------- */
.sec{font-size:clamp(34px,4.4vw,60px);line-height:1.1;text-transform:uppercase;--tw:.104;padding-top:40px}
.sub{font-size:21px;line-height:1.3;text-transform:uppercase;--tw:.105;margin-top:56px}
.rule{display:block;height:14px;margin:12px 0 26px}
.sec+.rule{margin:18px 0 0}

/* ---------- a second docked device ---------- */
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,clamp(420px,36vw,640px));column-gap:72px;align-items:center;padding:70px 0 40px}
.ftxt{min-width:0}
.sddock{position:relative;aspect-ratio:293/302;min-width:0}
.sdslot{position:absolute;inset:0}
.nosd .sdfig{display:flex;position:absolute;inset:0;align-items:center}
.nosd .sdslot{display:none}
.file{margin-top:26px}
.fname{font-size:12px;text-transform:uppercase;--ink:silk;margin-bottom:8px}
.code{font-size:13px;line-height:1.75;white-space:pre-wrap}
.feature .acts{margin-top:24px}

/* ---------- the smaller hardware: one panel of breakaway boards ---------- */
.mods{padding-top:30px}
.mods.soft{padding-top:70px}
.mods>.note{margin:24px 0 0}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:64px var(--gap);margin-top:52px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.cell,.mod{min-width:0;display:flex;flex-direction:column}
/* when the last row of the panel is short, a test coupon fills what is left of it */
.cell.more{grid-column:span var(--fill,1)}
.coupon{width:100%;flex:1;min-height:150px}
.mod .display,.bay3d{aspect-ratio:4/3;overflow:hidden}
.grid.two .mod .display,.soft .mod .display,.linkbay{aspect-ratio:16/9}
.mod .display img{width:100%;height:100%;object-fit:cover}
.bay3d,.linkbay{position:relative}
.modelslot,.linkslot{position:absolute;inset:0}
.nomodel .modelfig{display:block;position:absolute;inset:0}
.nomodel .modelslot{display:none}
.mod .status{margin-top:22px;font-size:12px;gap:4px 16px}
.mod h3{font-size:22px;line-height:1.2;text-transform:uppercase;--tw:.105;margin:12px 0 10px}
.mod .sum{font-size:14px;line-height:1.65}
.mfoot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;padding-top:20px}
.figslot{width:64px;height:64px}

/* ---------- films: an OLED panel, its keys and the reel ---------- */
.films{padding-top:70px}
.deck{display:grid;grid-template-columns:minmax(0,clamp(420px,34vw,620px)) minmax(0,1fr);column-gap:72px;align-items:center;margin-top:52px}
.oledwrap{position:relative;aspect-ratio:1/1;min-width:0}
.oledslot{position:absolute;inset:0}
.oledwrap video{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:contain;background:#000}
.pcb-on .oledwrap video:not(:fullscreen){opacity:0;pointer-events:none}
.scr{position:absolute;inset:0;border-radius:10px}
html:not(.pcb-on) .scr{display:none}
.side{min-width:0}
.reel{display:flex;flex-direction:column;gap:22px}
.reel a{display:grid;grid-template-columns:auto minmax(0,auto) auto;justify-content:start;align-items:start;column-gap:16px;font-size:17px;text-transform:uppercase;cursor:pointer}
.reel a .ledslot{margin-top:.38em}
.reel .small{margin:4px 0 0 44px;max-width:46ch}
.keys{display:flex;flex-wrap:wrap;gap:10px;margin-top:44px}
.key{display:flex;flex-direction:column;align-items:center;gap:6px;width:104px}
.keyslot{width:104px;height:104px}
.klabel{font-size:11px;text-transform:uppercase;--ink:silk;--tw:.12}
/* plain page only: while the board is starting (.boot) the keys must already sit where the board will draw them */
html:not(.pcb-on):not(.boot) .key{width:auto;padding:10px 16px;border:1px solid #d9b560;border-radius:8px}

/* ---------- about ---------- */
.about{padding:70px 0 40px}
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:72px;padding-top:44px}
.about .big{font-size:22px;line-height:1.6;max-width:34ch}
.about p+p{margin-top:18px}
.about p{max-width:60ch}
.about .acts{margin-top:34px}
.diagram{width:100%;max-width:560px;height:112px;margin-top:44px}
/* the token readout: a block of seven-segment digits beside the figure it starts from (the digits are drawn by the board, never set in the page) */
.tally{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"a t" "c t";grid-template-rows:auto 1fr;column-gap:72px;align-items:start;padding-top:76px}
.tallybox{grid-area:a;min-width:0;container-type:inline-size}
.counterslot{width:100%;max-width:520px;height:176px;height:calc(90px + min(86px,17.5cqw))}
/* beside the readout the three figures stand at the foot of the words, below the level of its terminals, so each can be wired into it */
.tallytxt{grid-area:t;min-width:0;display:flex;flex-direction:column;min-height:304px}
.tally .sub{margin-top:0}
.tally .sub+p{margin-top:14px}
.tally .tps{flex-direction:column;gap:14px;margin-top:auto;padding-top:24px}
/* its caption, printed under it like a figure's: kept clear of the three terminals at its right-hand end, which the figures' traces leave by */
.tally .how{grid-area:c;font-size:13px;line-height:1.6;text-transform:uppercase;--ink:silk;margin-top:12px;max-width:min(416px,calc(100% - 104px))}

/* ---------- footer ---------- */
.foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 34px;padding:110px 0 150px}
.foot .fid{width:48px;height:48px}
.foot .stack{width:104px;height:22px;margin-left:auto}
.foot .legal{flex-basis:100%;margin:0;max-width:none}

/* ---------- datasheet ---------- */
.sheet-head{display:grid;grid-template-columns:minmax(0,1fr) 250px;column-gap:40px;align-items:center;padding:56px 0 30px}
.back{display:inline-block;font-size:13px;text-transform:uppercase;margin-bottom:40px}
.title{font-size:clamp(40px,6.6vw,100px);line-height:1.06;text-transform:uppercase;--tw:.104}
.sheet-head .lede{margin-top:26px;max-width:54ch;font-size:18px}
.sheet-head .acts{margin-top:30px}
.sheet-head .fcc{margin-top:22px}
.chipbig{width:250px;height:250px}
.spec{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;padding:34px 0 20px}
.spec div{padding-left:30px}
.spec dt{text-transform:uppercase}
.spec dd{font-size:17px;line-height:1.5}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px 56px;padding-top:44px}
.fig.first{grid-column:1/-1;max-width:1120px}
.fig .bay{height:150px}
.fig .fpcslot{top:50px}
.fig figcaption{margin-top:20px;text-transform:uppercase}
.fig.first figcaption{margin-top:0}
.body{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:76px;padding-top:20px}
.body p+p{margin-top:18px}
.body .main p{font-size:16.5px;max-width:66ch}
.facts li{padding-left:34px;max-width:66ch}
.facts li+li{margin-top:16px}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding-top:110px}
.pager div{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.pager div+div{align-items:flex-end;text-align:right}

/* ---------- no board: nothing needs room for parts ---------- */
html.plain .bay,html.plain .mcu,html.plain .chipbig,html.plain .ledslot,html.plain .foot .part,html.plain .coupon,html.plain .figslot,html.plain .diagram,html.plain .keyslot,html.plain .linkbay{display:none}
html.plain .relayslot,html.plain .sdslot,html.plain .modelslot,html.plain .oledslot{display:none}
html.plain .hero{display:flex;flex-direction:column;align-items:flex-start}
html.plain .name{order:1}html.plain .tagline{order:2}html.plain .lead{order:3}
html.plain .dock{order:4;width:min(100%,720px);margin-top:44px}
html.plain .dockbox{height:auto;aspect-ratio:auto}
html.plain .dock .cap{width:auto;min-width:0;text-transform:none;font-size:13px}
html.plain .dockfig,html.plain .sdfig,html.plain .modelfig{display:block;position:static}
html.plain .sddock,html.plain .bay3d,html.plain .oledwrap{aspect-ratio:auto}
html.plain .oledwrap video{position:static;width:100%;height:auto;opacity:1}
html.plain .name,html.plain .tagline{margin-top:24px}
html.plain .sheet-head{grid-template-columns:minmax(0,1fr)}
html.plain .tps li,html.plain .spec div,html.plain .facts li{padding-left:0}
html.plain .facts li{list-style:disc;margin-left:1.2em}
html.plain .reel .small{margin-left:0}
html.plain .reel a{display:block}
/* controls that only the board wires up: on the plain page the video has its own, and the first pattern file is simply shown */
html.plain .keys,html.plain #sd-next{display:none}
/* the readout exists only on the board; the plain page keeps the measured figure and leaves out the line that explains the readout */
html.plain .tallybox,html.plain .tally .how,html.plain #tk-now{display:none}
html.plain .tally{display:block;padding-top:44px}
html.plain .tallytxt{display:block;min-height:0}
html.plain .tally .tps{padding-top:0;margin-top:22px}

/* ---------- narrower screens ---------- */
@media(max-width:1100px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cell.more{display:none}}
@media(max-width:979px){
  .hero{grid-template-columns:minmax(0,1fr);grid-template-rows:none;padding:58px 0 70px}
  .mcu{grid-column:1;grid-row:1;height:200px}
  .name{grid-column:1;grid-row:2;margin-top:88px;font-size:clamp(46px,15.6vw,120px)}
  .tagline{grid-column:1;grid-row:3;margin-top:92px}
  .dock{grid-column:1;grid-row:4;margin:44px 0 0;width:min(100%,520px);justify-self:center}
  .dockbox{height:auto;width:100%}
  .lead{grid-column:1;grid-row:5;margin-top:44px}
  .feature{grid-template-columns:minmax(0,1fr);row-gap:40px;padding:50px 0 30px}
  .sddock{order:-1;width:min(100%,520px);justify-self:center}
  .deck{grid-template-columns:minmax(0,1fr);row-gap:40px}
  .oledwrap{width:min(100%,520px);justify-self:center}
  .bay{height:130px}
  .about-grid,.body{grid-template-columns:minmax(0,1fr);gap:34px}
  .tally{grid-template-columns:minmax(0,1fr);grid-template-areas:"a" "c" "t";grid-template-rows:none;padding-top:56px}
  .tallytxt{min-height:0;margin-top:26px}
  .tally .tps{margin-top:0}
  .tally .how{margin-top:14px;max-width:60ch}
  .sheet-head{grid-template-columns:minmax(0,1fr)}
  .chipbig{display:none}
  .spec{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery{grid-template-columns:minmax(0,1fr)}
  .pager{padding-top:70px}
}
@media(max-width:700px){
  .nav{flex-basis:100%}
  .top{row-gap:38px}
  .grid,.grid.two{grid-template-columns:minmax(0,1fr);gap:56px}
  .keys{gap:6px;justify-content:space-between}
  .key{width:calc((100% - 24px) / 5)}
  .keyslot{width:100%;height:auto;aspect-ratio:1/1}
  .klabel{font-size:10px}
  .reel a{font-size:15px}
}
@media(max-width:520px){
  .nav .pad{padding:0 13px;font-size:12.5px;height:40px}
  .nav{gap:7px}
  .pad{height:48px;padding:0 22px;font-size:15px}
  .pager{grid-template-columns:1fr}
  .pager div+div{align-items:flex-start;text-align:left}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}#pcb{transition:none}}
/* solder-mask swatches: a fab's colour chart at the edge of the board */
.masks{position:fixed;left:6px;top:50%;transform:translateY(-50%);z-index:6;display:flex;flex-direction:column;gap:0;padding:5px 0;border-radius:16px;background:rgba(9,9,10,.86);box-shadow:0 0 0 1px rgba(201,162,74,.42),0 6px 18px rgba(0,0,0,.5)}
.masks[hidden]{display:none}
.masks button{width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center;border-radius:50%;-webkit-tap-highlight-color:transparent}
.masks button::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--m);box-shadow:0 0 0 2px #c9a24a,0 0 0 3px rgba(0,0,0,.6),inset 0 1px 1px rgba(255,255,255,.3),inset 0 -2px 3px rgba(0,0,0,.5);transition:transform .16s ease,box-shadow .16s ease}
.masks button:hover::before{transform:scale(1.14)}
.masks button[aria-pressed="true"]::before{box-shadow:0 0 0 2px #f8e3a3,0 0 0 5px rgba(248,227,163,.28),inset 0 1px 1px rgba(255,255,255,.3),inset 0 -2px 3px rgba(0,0,0,.5)}
.masks button:focus-visible{outline:2px solid #f8e3a3;outline-offset:-3px}
.masks [data-mask=black]{--m:#131315}.masks [data-mask=green]{--m:#1a6c3a}.masks [data-mask=blue]{--m:#12408f}.masks [data-mask=red]{--m:#93191b}.masks [data-mask=purple]{--m:#421f78}
html.plain .masks{display:none}
/* where the margin is too narrow to stand beside the text, the swatches lie along the bottom edge instead */
@media(max-width:1199px){.masks{left:50%;top:auto;bottom:calc(10px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);flex-direction:row;padding:0 6px;border-radius:17px}.masks button{width:30px;height:32px}}
@media(prefers-reduced-motion:reduce){.masks button::before{transition:none}}
@media print{.masks,.lens,#pcb,.part,.bay,.linkbay,.scr,.keys,#sd-next,.tallybox,.tally .how{display:none}.tally{display:block}.tallytxt{display:block;min-height:0}.pcb-on .t,.pcb-on .t a{color:#000}.pcb-on .display img{opacity:1}html{background:#fff}body{color:#000}
  /* paper gets the plain page's pictures in place of the docks and models */
  .dockfig,.sdfig,.modelfig{display:block;position:static}.dockbox{height:auto;aspect-ratio:auto}.sddock,.bay3d,.oledwrap{aspect-ratio:auto}.oledwrap video{position:static;width:100%;height:auto;opacity:1}}