/* blink.
 *
 * Technical, but not somebody else's technical. The reference was navy, electric blue and
 * hot pink in a bitmap face; this is warm near-black, bone and one acid green, set in a
 * wide technical mono. Same discipline, different room.
 *
 * Rules it keeps to: no rounded corners, no drop shadows, one accent doing all the
 * emphasis, rust reserved for anything that costs you money.
 */
:root{
  --ink:#0b0a09;            /* warm near-black, not navy */
  --ink-2:#121110;
  --panel:#151312;
  --panel-2:#1b1917;
  --line:#282523;
  --line-2:#3a3633;

  --bone:#ebe6dc;
  --bone-dim:#a8a196;
  --bone-faint:#6e675e;

  --acid:#c9f24b;           /* the one accent */
  --acid-deep:#8fae2a;
  --rust:#d4573a;           /* only ever for things that cost you */

  /* Mono is for figures, addresses and labels. Setting body copy in it is what makes a
     page look like a dev tool somebody generated rather than a thing somebody designed. */
  --display:"Bricolage Grotesque",Georgia,serif;
  --text:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--text);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* a paper-grain wash rather than a glowing grid: warm, quiet, and it does not hum */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.045'/></svg>");
}
main,header,footer{position:relative;z-index:2}

a{color:inherit;text-decoration:none}
button,input{font:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* ---- labels ------------------------------------------------------------------------ */
/* Labels sit in the text face, not the mono one. Three typefaces on a page is one system
   too many, and caps-mono-with-huge-tracking is the house style of every generated site. */
.lab{font-family:var(--text);font-size:11.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bone-dim)}
.lab.on{color:var(--acid)}
.lab.bad{color:var(--rust)}

/* ---- header: spans the window, nothing centred ------------------------------------- */
.top{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;
  background:rgba(11,10,9,.9);backdrop-filter:blur(10px);
  display:flex;align-items:center;gap:28px;height:66px;padding:0 22px}
.logo{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.05em;
  color:var(--bone);display:flex;align-items:center;gap:9px}

/* the mark blinks, because of course it does */
/* the mark is an eye, so it blinks rather than pulses */
.eye{width:30px;height:30px;display:block;transform-origin:center;
  animation:wink 6.5s infinite}
@keyframes wink{
  0%,90%,100%{transform:scaleY(1)}
  93%{transform:scaleY(.06)}
  96%{transform:scaleY(1)}
}
@media(prefers-reduced-motion:reduce){ .eye{animation:none} }

.nav{display:flex;gap:22px}
.nav a{font-size:14px;color:var(--bone-dim);padding-bottom:2px;
  border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.nav a:hover{color:var(--bone);border-bottom-color:var(--acid)}
.tools{margin-left:auto;display:flex;align-items:center;gap:10px}
.xlink{display:grid;place-items:center;width:34px;height:34px;color:var(--bone-dim);
  border:1px solid transparent;transition:color .18s,border-color .18s}
.xlink svg{width:15px;height:15px}
.xlink:hover{color:var(--acid);border-color:var(--line-2)}

/* buttons: a sweep on hover rather than a colour swap */
.btn{position:relative;overflow:hidden;background:none;border:1px solid var(--line-2);
  color:var(--bone);padding:10px 18px;font-family:var(--text);font-size:12.5px;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  transition:color .2s,border-color .2s}
.btn::before{content:"";position:absolute;inset:0;background:var(--acid);
  transform:translateY(101%);transition:transform .28s cubic-bezier(.22,.61,.36,1);z-index:-1}
.btn:hover{color:var(--ink);border-color:var(--acid)}
.btn:hover::before{transform:none}
.btn > *{position:relative}
.btn.solid{background:var(--acid);border-color:var(--acid);color:var(--ink);font-weight:700}
.btn.solid::before{background:var(--bone)}
.btn.solid:hover{border-color:var(--bone)}

/* ---- panels: hairline boxes, no fill where possible --------------------------------- */
.box{border:1px solid var(--line);background:var(--panel)}
.box-h{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;
  align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.box-b{padding:22px 18px}

/* ---- hero: full bleed, the field behind everything ---------------------------------- */
.hero{position:relative;min-height:86vh;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden;border-bottom:1px solid var(--line)}
#field{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
/* the generated wash sits under the field, barely there, just to stop the black being flat */
.wash{position:absolute;inset:0;z-index:0;opacity:.20;mix-blend-mode:screen;
  background:url("art/wash.jpg") center/cover no-repeat;
  mask-image:radial-gradient(120% 85% at 70% 40%,#000 10%,transparent 72%);
  -webkit-mask-image:radial-gradient(120% 85% at 70% 40%,#000 10%,transparent 72%)}
.hero-in{position:relative;z-index:2;padding:80px 24px 60px}

h1{font-family:var(--display);font-weight:800;font-size:clamp(58px,12vw,164px);
  line-height:.86;letter-spacing:-.06em;margin:0;color:var(--bone)}
.lede{max-width:46ch;margin:26px 0 0;font-size:18px;line-height:1.6;color:var(--bone-dim)}
.lede b{color:var(--bone);font-weight:400;border-bottom:1px solid var(--acid)}

.enter{display:inline-flex;gap:0;margin:32px 0 0;border:1px solid var(--line-2);
  background:rgba(11,10,9,.72);backdrop-filter:blur(6px)}
.enter{align-items:center}
/* the unit is not decoration: people need to know what they are sending */
.enter .unit{padding:0 16px 0 4px;font-family:var(--mono);font-size:15px;font-weight:700;
  letter-spacing:.04em;color:var(--acid)}
.enter input{width:130px;background:transparent;border:0;color:var(--bone);
  padding:15px 4px 15px 18px;font-size:19px;outline:none;font-family:var(--mono)}
.enter input::placeholder{color:var(--bone-faint)}
.enter .btn{border:0;border-left:1px solid var(--line-2)}
.fine{margin:14px 0 0;font-size:13px;color:var(--bone-faint)}

/* the readout runs along the foot of the hero, not as tiles */
.readout{position:relative;z-index:2;border-top:1px solid var(--line);
  background:rgba(11,10,9,.66);backdrop-filter:blur(6px)}
.readout .wrap{display:flex;gap:0;padding:0 24px}
.readout div{flex:1;padding:16px 0;display:flex;align-items:baseline;gap:12px}
.readout b{margin-left:auto;margin-right:26px;font-family:var(--mono);font-weight:700;
  font-size:17px;letter-spacing:-.03em}
.readout div + div{border-left:1px solid var(--line);padding-left:22px}

/* ---- log ----------------------------------------------------------------------------- */
.log div{display:flex;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);
  color:var(--bone-dim);font-size:13px;flex-wrap:wrap}
.log div:last-child{border-bottom:0}
.log .in{color:var(--acid)}
.log .out{color:var(--rust)}
.empty{padding:30px 4px;color:var(--bone-faint);font-size:14px;line-height:1.7}
.empty b{display:block;font-family:var(--mono);color:var(--bone-dim);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;margin:0 0 10px}

/* ---- sections -------------------------------------------------------------------------- */
.sec{padding:82px 0;border-top:1px solid var(--line)}
.sec h2{font-family:var(--display);font-weight:800;font-size:clamp(34px,5.2vw,62px);
  letter-spacing:-.045em;line-height:1.02;margin:18px 0 22px;color:var(--bone)}
.sec > .wrap > p{color:var(--bone-dim);max-width:58ch;margin:0 0 16px;font-size:17px}
.sec > .wrap > p b{color:var(--bone);font-weight:400;border-bottom:1px solid var(--acid)}

/* deliberately uneven. two equal columns is the shape every generated page arrives in. */
.pair{display:grid;grid-template-columns:1.35fr 1fr;gap:0;margin:40px 0 0;
  border-top:1px solid var(--line)}
.pair.flip{grid-template-columns:1fr 1.35fr}
.pair > div{padding:34px 34px 34px 0}
.pair > div:last-child{padding-left:34px;border-left:1px solid var(--line)}
.num{font-family:var(--text);font-weight:600;font-size:12px;letter-spacing:.1em;
  color:var(--acid)}
.step h3{margin:16px 0 12px;font-family:var(--display);font-size:22px;font-weight:700;
  letter-spacing:-.03em;color:var(--bone)}
.step p{margin:0 0 13px;color:var(--bone-dim);font-size:15.5px;max-width:46ch}
.step p:last-of-type{margin:0}
.note{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}

/* the week shape, drawn as a ruled chart rather than fat bars */
.bars{display:flex;align-items:flex-end;gap:6px;height:96px;margin:8px 0 0;
  border-bottom:1px solid var(--line-2)}
.bars i{flex:1;background:var(--line-2);display:block}
.bars i.hot{background:var(--acid)}

/* ---- token ------------------------------------------------------------------------------ */
.nots{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--line)}
.nots li{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;padding:16px 0;
  border-bottom:1px solid var(--line)}
.nots s{font-size:17px;color:var(--bone-faint);
  text-decoration-color:var(--rust);text-decoration-thickness:1px}
.nots em{font-style:normal;font-size:14px;color:var(--bone-faint);margin-left:auto;
  text-align:right}

.capsule{display:inline-flex;align-items:center;gap:14px;margin:26px 0 0;
  border:1px solid var(--line-2);padding:6px 6px 6px 16px}

footer{border-top:1px solid var(--line);padding:30px 0 52px;color:var(--bone-faint);
  font-size:13.5px}
footer .wrap{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
footer a:hover{color:var(--acid)}

@media(max-width:900px){
  .hero-grid,.pair,.pair.flip{grid-template-columns:1fr}
  .pair > div{padding:28px 0}
  .pair > div:last-child{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .nav{display:none}
}

/* the readout flinches when the field does */
@keyframes tick{0%{color:var(--acid)}100%{color:var(--bone)}}
.ticked{animation:tick .9s ease-out}

@media(max-width:760px){
  .readout .wrap{flex-wrap:wrap}
  .readout div{flex:1 1 50%}
  .readout div + div{border-left:0}
  .enter{width:100%}
  .enter input{flex:1;width:auto}
}

.status{margin:14px 0 0;font-size:13.5px;color:var(--acid);max-width:46ch}
.status.bad{color:var(--rust)}

/* ---- scroll motion ------------------------------------------------------------------- */
[data-in]{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
[data-in].in{opacity:1;transform:none}
[data-tilt]{transform-style:preserve-3d;will-change:transform,opacity;
  transition:opacity .3s linear}

/* ---- the maths ------------------------------------------------------------------------ */
.eqs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:44px 0 0;
  border-top:1px solid var(--line)}
.eqs .eq{padding:30px 26px 30px 0}
.eqs .eq + .eq{padding-left:26px;border-left:1px solid var(--line)}

.formula{font-family:var(--mono);font-size:clamp(22px,2.6vw,30px);letter-spacing:-.03em;
  color:var(--bone);margin:16px 0 14px;white-space:nowrap}
.formula b{color:var(--acid);font-weight:700}
.formula em{font-style:normal;color:var(--bone-faint);padding:0 2px}
.formula sub{font-size:.6em;color:var(--bone-faint)}
.eq p{margin:0;font-size:14.5px;color:var(--bone-dim);max-width:34ch}

/* ---- the plate -------------------------------------------------------------------------- */
.plate-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.plate figure{margin:0;border:1px solid var(--line);overflow:hidden;position:relative}
.plate figure img{display:block;width:100%;height:auto}
/* the image opens rather than just fading: a shutter lifting off it */
.plate figure::after{content:"";position:absolute;inset:0;background:var(--ink);
  transform-origin:bottom;transition:transform 1.1s cubic-bezier(.16,.84,.44,1)}
.plate figure.in::after{transform:scaleY(0)}
.plate h2{margin-top:14px}
.plate p{color:var(--bone-dim);margin:0 0 14px;max-width:44ch;font-size:16px}
.plate p b{color:var(--acid);font-weight:400}

@media(max-width:860px){
  .eqs{grid-template-columns:1fr}
  .eqs .eq{padding:26px 0}
  .eqs .eq + .eq{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .plate-grid{grid-template-columns:1fr;gap:28px}
}

/* ---- the headline arrives a word at a time ------------------------------------------- */
/* The mask has to be as tall as the type it hides, with room for descenders, or the words
   slide up into a two pixel slot and the headline is a row of slivers. */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;
  line-height:.92;padding:.06em .02em .14em}
.split .w > i{display:block;font-style:normal;transform:translateY(110%);
  transition:transform .85s cubic-bezier(.16,.84,.44,1)}
.split.in .w > i{transform:none}
@media(prefers-reduced-motion:reduce){ .split .w > i{transform:none} }

/* the exit line: hidden until you actually have a stake, so the default hero stays
   one input and one button rather than a dashboard */
.fine.mine{color:var(--bone);margin-top:10px}
.fine.mine b{font-family:var(--mono);font-weight:500;color:var(--acid)}
.fine.mine #leaveCost{color:var(--bone-dim);margin-left:6px}
.link{background:none;border:0;padding:0;font:inherit;color:var(--bone);cursor:pointer;
  border-bottom:1px solid var(--acid)}
.link:hover{color:var(--acid)}
.link:disabled{opacity:.5;cursor:default}

/* ---- the doc page ------------------------------------------------------------------- */
/* the first section carries no top rule, so the page opens on the headline rather than
   on a line left over from a header that is no longer above it */
.doc-top{border-top:0;padding-top:70px}
.doc-h1{font-family:var(--display);font-weight:800;letter-spacing:-.045em;line-height:.94;
  font-size:clamp(38px,6.4vw,78px);margin:14px 0 22px}

/* the constants, as a table that is a grid so it can collapse on a phone without
   turning into a horizontally scrolling mess */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin:38px 0 0;
  border-top:1px solid var(--line)}
.facts > div{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:15px 0;border-bottom:1px solid var(--line)}
.facts > div:nth-child(odd){padding-right:28px;border-right:1px solid var(--line)}
.facts > div:nth-child(even){padding-left:28px}
.facts b{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--bone);
  text-align:right}
.facts b[data-live]{color:var(--acid)}

.ca{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:30px;
  padding:18px 20px;border:1px solid var(--line);background:rgba(255,255,255,.015)}
.ca code{font-family:var(--mono);font-size:13px;color:var(--bone);word-break:break-all}
.ca .btn{margin-left:auto}

#draw code{font-family:var(--mono);font-size:.92em;color:var(--acid)}

/* the way through to the doc page, now that there is no nav to carry it */
a.more{color:var(--bone);border-bottom:1px solid var(--acid);white-space:nowrap}
a.more:hover{color:var(--acid)}
.fine a.more{margin-left:4px}

@media(max-width:760px){
  .facts{grid-template-columns:1fr}
  .facts > div:nth-child(odd){padding-right:0;border-right:0}
  .facts > div:nth-child(even){padding-left:0}
}