/* arcterminal.fun — a cool near-black ground, one cyan accent for action, and
   an arc that is both the brand and the progress indicator.

   THE COLOUR RULE THIS INHERITS FROM hypeterminal, because it was learned the
   expensive way there: THE ACCENT IS INTERACTION AND NOTHING ELSE. On that
   site mint meant both "you can press this" and "this was a buy", because --up
   sat eleven degrees of hue from the accent, and on a board where colour has
   to say two things it says neither.

   So here: --arc is H193 and means press. --up is H148, forty-five degrees
   away, and means the number went up. They cannot be confused at a glance,
   which is the only test that matters on a board of a hundred rows. --amber
   and --down sit a hundred degrees from both.

   THE GROUND IS NOT THE ACCENT. Every neutral below is a cool blue-grey, but
   desaturated far enough that cyan arrives into a neutral room rather than a
   cyan one. The neutrals are ninety-five percent of the pixels; if they carry
   the accent's hue the accent has to shout to register. */
:root{
  --bg:#05080F;
  --bg-2:#080D16;
  --panel:#0B1220;
  --panel-2:#121B29;
  --sunk:#04070C;
  --arc:#4DE1FF;
  --arc-2:#2BC4E6;
  --arc-dim:#1E5A6B;
  --arc-soft:rgba(77,225,255,.10);
  --arc-line:rgba(77,225,255,.30);
  --violet:#8A6CFF;
  --amber:#F5B84D;
  /* H148. See the note above: this is deliberately far from --arc. */
  --up:#3ECF7C;
  --down:#FF7A92;
  --ink:#E6EDF7;
  --ink-2:#8595AB;
  /* Checked against every surface it is used on rather than against --bg
     alone: 7.1 on --bg, 6.6 on --panel, 5.4 on --panel-2. The dimmest text on
     this site sits on cards, not on the page ground. */
  --ink-3:#6B7C94;
  --rule:#1C2738;
  --rule-2:#2A3850;
  --r:14px;
  --r-sm:8px;
  --sans:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  min-height:100vh;min-height:100dvh;
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;
  /* The board scrolls; nothing on this site scrolls sideways. Tables and the
     hero arc each manage their own overflow. */
  overflow-x:hidden;
}
a{color:var(--arc);text-decoration:none}
a:hover{color:#8FEEFF}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--arc-line);outline-offset:2px}
.dim{color:var(--ink-2)}
.faint{color:var(--ink-3)}
.up{color:var(--up)}
.down{color:var(--down)}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.small{font-size:12px}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(5,8,15,.82);
  backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--rule)}
.hdr-in{max-width:1280px;margin:0 auto;padding:0 40px;height:70px;
  display:flex;align-items:center;gap:28px;min-width:0}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink);
  font-size:19px;font-weight:700;letter-spacing:-.6px;flex:0 0 auto}
.brand:hover{color:var(--ink)}
.brand-dim{color:var(--ink-3);font-weight:500}
.hnav{display:flex;gap:24px;align-items:center;font-size:13.5px;font-weight:500}
.nav-item{color:var(--ink-3)}
.nav-item:hover,.nav-item.active{color:var(--ink)}
.chainchip{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;
  border-radius:var(--r-sm);border:1px solid var(--rule);
  font-family:var(--mono);font-size:11.5px;color:var(--ink-2);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.chaindot{width:6px;height:6px;border-radius:50%;background:var(--arc);flex:0 0 auto}
.chaindot.cold{background:var(--ink-3)}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.menu-btn{display:none;background:var(--panel-2);border:0;border-radius:var(--r-sm);
  color:var(--ink);padding:9px 13px;cursor:pointer;font-size:15px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--panel-2);color:var(--ink);border:1px solid var(--rule-2);
  border-radius:var(--r-sm);font-family:var(--sans);font-size:13.5px;font-weight:600;
  padding:0 20px;height:38px;cursor:pointer;white-space:nowrap}
.btn:hover:not(:disabled){border-color:var(--arc-line);color:var(--arc)}
/* Connect, Buy, Launch: the one control on a page meant to be pressed. Flat
   fill, not a gradient -- the hero already carries the only gradient on the
   site and a second one competes with it. */
.btn.primary{background:var(--arc);color:#04121A;border-color:var(--arc);font-weight:700}
.btn.primary:hover:not(:disabled){background:#7FEBFF;border-color:#7FEBFF;color:#04121A}
.btn.ghost{background:transparent}
.btn.lg{height:46px;padding:0 24px;font-size:14.5px;border-radius:9px}
.btn.solid{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:700}
.btn.solid:hover:not(:disabled){background:#fff;border-color:#fff;color:var(--bg)}
.btn.block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
/* A disabled primary must not just be a dimmer accent: at .45 the cyan turns a
   muddy teal that still reads as a button someone should press. Inert, not
   faded. */
.btn.primary:disabled{background:var(--panel-2);color:var(--ink-3);
  border-color:var(--rule);opacity:1}

/* ---------- hero ---------- */
/* THE ARC IS DRAWN, NOT DECORATED. It is the same curve the product is about:
   a token starts bottom-left and graduates top-right, and the dot marks where
   the board's leader sits on it. The two fainter strokes behind it are earlier
   tokens' paths, which is why they are parallel and offset rather than
   randomly placed. */
.hero{position:relative;max-width:1280px;margin:0 auto;width:100%;padding:18px 40px 0;
  min-height:336px}
.hero-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,.22) 42%,#000 74%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,.22) 42%,#000 74%)}
.hero-in{position:relative;z-index:2;max-width:620px}
.hero h1{margin:0;font-size:52px;line-height:1.02;font-weight:700;
  letter-spacing:-2px;text-wrap:pretty}
.hero p{margin:18px 0 0;font-size:15.5px;line-height:1.55;color:var(--ink-2);
  max-width:470px;text-wrap:pretty}
.hero-cta{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}

/* ---------- board ---------- */
.page{flex:1 0 auto;max-width:1280px;margin:0 auto;width:100%;padding:0 40px}
.sec-head{display:flex;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.sec-head h2{margin:0;font-size:17px;font-weight:600;letter-spacing:-.3px}
.filters{display:flex;gap:7px;flex-wrap:wrap}
.filter{padding:6px 13px;border-radius:7px;color:var(--ink-3);
  font-size:12.5px;font-weight:500;cursor:pointer}
.filter:hover{color:var(--ink)}
.filter.active{background:var(--panel-2);color:var(--ink);font-weight:600}
.sec-stat{margin-left:auto;font-family:var(--mono);font-size:11.5px;
  color:var(--ink-3);font-variant-numeric:tabular-nums}

.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.tgrid>*{min-width:0}
.tcard{display:flex;flex-direction:column;align-items:center;min-width:0;
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);
  padding:18px 18px 16px;color:var(--ink);
  transition:border-color .12s,background-color .12s}
.tcard:hover{border-color:var(--arc-line);background:var(--panel-2);color:var(--ink)}
.tname{font-size:15.5px;font-weight:600;margin-top:4px;text-align:center;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tsym{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);
  letter-spacing:.6px;margin-top:3px}
.tmc{display:flex;align-items:baseline;gap:9px;margin-top:12px;flex-wrap:wrap;
  justify-content:center}
.tmc .fig{font-family:var(--mono);font-size:17px;font-weight:600;
  letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.tmc .chg{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums}
.tgo{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:6px;
  font-variant-numeric:tabular-nums;text-align:center}
.tcard .btn{margin-top:14px}

/* ---------- the gauge ---------- */
/* A SEMICIRCLE, NOT A BAR, and the reason is that this is the only figure on
   the card a reader is scanning for. A 4px bar says the same thing in a tenth
   of the ink and gets skipped; at this size the percentage is legible from
   across the grid and the shape is the brand at the same time.

   The arc's length is pi*r = 125.66 at r=40, which is what every dasharray
   here is a fraction of. Set it from JS as (125.66 * pct) + ' 125.66'. */
.gauge{display:block;width:142px;height:82px;max-width:100%}
.gauge-track{fill:none;stroke:var(--rule);stroke-width:7;stroke-linecap:round}
.gauge-fill{fill:none;stroke:var(--arc);stroke-width:7;stroke-linecap:round;
  transition:stroke-dasharray .35s ease}
/* Near the top of the curve the fill turns amber -- the same warning the bar
   carried on hypeterminal, for the same reason: a curve about to fill is the
   one a buyer most needs to notice before they size a trade. */
.gauge-fill.hot{stroke:var(--amber)}
.gauge-fill.done{stroke:var(--up)}
.gauge-label{font-family:var(--mono);font-size:15px;font-weight:600;fill:var(--ink)}
.gauge-label.sm{font-size:13px}

/* ---------- stat strip ---------- */
.stats{display:flex;align-items:center;gap:40px;padding:22px 40px;
  border-top:1px solid var(--rule);max-width:1280px;margin:32px auto 0;
  width:100%;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;gap:4px}
.stat .k{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.9px}
.stat .v{font-size:18px;font-weight:600;letter-spacing:-.4px}
.stat-sep{width:1px;height:32px;background:var(--rule)}
.stats .risk{margin-left:auto;font-size:12px;color:var(--ink-3);
  max-width:330px;text-align:right;line-height:1.45}

/* ---------- loading / empty ---------- */
.loading{display:flex;align-items:center;justify-content:center;gap:10px;
  padding:60px 20px;color:var(--ink-3)}
.spinner{width:14px;height:14px;border:2px solid var(--rule-2);
  border-top-color:var(--arc);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .spinner{animation-duration:2s}
  .gauge-fill{transition:none}
}
.grid-empty{border:1px dashed var(--rule-2);border-radius:18px;padding:38px 20px;
  text-align:center;color:var(--ink-3)}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--rule);margin-top:48px;
  background:var(--bg-2)}
.foot-in{max-width:1280px;margin:0 auto;padding:34px 40px;display:grid;
  grid-template-columns:2fr 1fr 1fr;gap:34px}
.foot-in h3{font-size:12px;letter-spacing:.6px;color:var(--ink-3);
  margin:0 0 12px;font-weight:600}
.foot-col{display:flex;flex-direction:column;gap:9px;font-size:13.5px}
.foot-col a{color:var(--ink-2)}
.foot-col a:hover{color:var(--arc)}
.foot-brand p{color:var(--ink-3);font-size:13px;line-height:1.55;margin:10px 0 0;
  max-width:420px}

/* ---------- responsive ----------
   Most launchpad traffic is a phone held in one hand, so this is not an
   afterthought. Three things change and nothing else needs to: the hero type
   comes down, the arc is allowed to leave the frame, and the header collapses
   to a menu. The card grid is auto-fill and already handles itself. */
@media (max-width:900px){
  .hdr-in,.hero,.page,.stats,.foot-in{padding-left:20px;padding-right:20px}
  .hnav{display:none}
  .hnav.open{display:flex;position:absolute;top:70px;left:0;right:0;
    flex-direction:column;gap:0;background:var(--panel);
    border-bottom:1px solid var(--rule);padding:8px 20px}
  .hnav.open .nav-item{padding:12px 0;font-size:15px}
  .menu-btn{display:inline-flex}
  .chainchip{display:none}
  .foot-in{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:640px){
  .hero{min-height:0;padding-top:24px;padding-bottom:8px}
  .hero h1{font-size:34px;letter-spacing:-1.2px}
  .hero p{font-size:14.5px}
  .hero-art{opacity:.5}
  .hdr-in{height:60px;gap:12px}
  .brand{font-size:16px;letter-spacing:-.4px;min-width:0}
  .brand svg{width:24px;height:24px}
  .hero-cta .btn{flex:1 1 auto}
  .tgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .gauge{width:118px;height:68px}
  .stats{gap:20px 24px;padding:20px}
  .stat-sep{display:none}
  .stats .risk{margin-left:0;text-align:left;max-width:none}
  .foot-in{grid-template-columns:1fr}
}

/* ---------- forms, and the projection beside them ----------
   The launch form is two columns because the projection is not decoration:
   a creator is choosing a target, and the only way to choose one well is to
   see what it does. On a phone it stacks and the projection comes FIRST --
   the numbers are what the choice is about, and burying them under five
   inputs is how a form gets filled in without being read. */
.form-wrap{display:grid;grid-template-columns:minmax(0,560px) 340px;gap:28px;
  align-items:start;justify-content:start}
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;color:var(--ink-2);margin-bottom:7px;line-height:1.4}
.field input[type=text],.field input:not([type]),.field textarea{
  width:100%;background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-sm);
  color:var(--ink);font-family:var(--sans);font-size:14.5px;padding:11px 13px}
.field textarea{resize:vertical;min-height:60px;line-height:1.5}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--arc-line);
  box-shadow:0 0 0 3px var(--arc-soft)}
.rangerow{display:flex;align-items:center;gap:14px}
.rangerow input[type=range]{flex:1;min-width:0;accent-color:var(--arc);height:24px}
.rangerow output{flex:0 0 auto;min-width:78px;text-align:right;font-size:14px;font-weight:600}
.note{font-size:12px;line-height:1.55;margin:10px 0 0}

.preview{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);padding:20px}
.preview h3{margin:0 0 14px;font-size:13px;letter-spacing:.4px;color:var(--ink-3);font-weight:600}
.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--rule);font-size:13px;color:var(--ink-2)}
.kv:last-of-type{border-bottom:0}
.kv b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.curveplot{display:block;width:100%;height:150px;margin-top:16px;
  background:var(--sunk);border-radius:var(--r-sm)}

/* ---------- prose ---------- */
.prose{max-width:680px;font-size:15px;line-height:1.65;color:var(--ink-2)}
.prose h3{color:var(--ink);font-size:17px;font-weight:600;letter-spacing:-.2px;
  margin:30px 0 10px}
.prose h3:first-child{margin-top:0}
.prose p{margin:0 0 14px}
.prose b{color:var(--ink);font-weight:600}
.prose code{font-family:var(--mono);font-size:13px;background:var(--panel);white-space:nowrap;
  border:1px solid var(--rule);border-radius:5px;padding:1px 5px;color:var(--ink)}

@media (max-width:860px){
  .form-wrap{grid-template-columns:1fr}
  /* The projection first: see the note above. */
  .preview{order:-1}
}

/* A setting that is not a setting. It still gets a row, because leaving the
   target out entirely invites the question; stating it and saying it is fixed
   answers it once. */
/* A STATED FACT, NOT A FIELD. This wore the inputs' border, fill and padding,
   so it looked like something you could type into and was not -- the worst
   kind of control, one that invites a click and does nothing. No box now: a
   label, the number, and why it is not yours to change. */
.stated{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.stated .k{font-size:13px;color:var(--ink-2)}
.stated b{font-size:19px;font-weight:600;letter-spacing:-.4px}
.stated .why{font-size:12.5px;color:var(--ink-3);line-height:1.45}

/* ---------- the token mark: the arc cradling the image ----------
   THE IMAGE AND THE GAUGE ARE ONE OBJECT, NOT TWO. An earlier pass had the
   gauge alone on the card and simply had nowhere to put the picture, which on
   a launchpad is the token's identity -- it is what a reader recognises before
   they have read a ticker. Stacking them would have cost a row of card height
   each; nesting them costs nothing and keeps the arc, which is the only shape
   on this site anyone will remember.

   The percentage moves out from inside the arc (the image is there now) to a
   line beneath it, where it is still the second thing read. */
.tmark{position:relative;width:142px;height:96px;flex:0 0 auto}
.tmark .gauge{position:absolute;top:0;left:0}
/* A SQUIRCLE, NOT A CIRCLE. Most token art is square, and a round crop cuts
   the corners off every one of them. 18px of radius reads as round at card
   size and keeps the artwork. */
.tmedia{position:absolute;left:50%;top:34px;width:62px;height:62px;margin-left:-31px;
  border-radius:18px;overflow:hidden;background:var(--panel-2);
  border:2px solid var(--panel);display:flex;align-items:center;justify-content:center}
.tcard:hover .tmedia{border-color:var(--panel-2)}
.tmedia img{width:100%;height:100%;object-fit:cover;display:block}
.tmedia .ph{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--ink-3);
  letter-spacing:-.5px}
.tpct{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--arc);margin-top:2px}
.tpct.hot{color:var(--amber)}
.tpct.done{color:var(--up)}

/* ---------- the image picker on the launch form ---------- */
.imgpick{width:132px;height:132px;flex:0 0 auto;border:1px dashed var(--rule-2);
  border-radius:12px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;color:var(--ink-3);cursor:pointer;overflow:hidden;
  background:var(--panel);position:relative}
.imgpick:hover{border-color:var(--arc-line);color:var(--arc)}
.imgpick img{width:100%;height:100%;object-fit:cover;display:block}
.imgpick span{font-size:11.5px}
.imgrow{display:flex;gap:16px;margin-bottom:18px;align-items:flex-start}
.imgrow .grow{flex:1;min-width:0}
.imgcol{flex:0 0 auto;width:132px;display:flex;flex-direction:column}
/* The note belongs to the picker, not to whatever field happens to sit beside
   it. It used to run full width under the ticker input, where it read as a
   hint about the ticker. */
.imgnote{font-size:11.5px;line-height:1.45;color:var(--ink-3);margin:9px 0 0}
.imgnote.bad{color:var(--down)}
.imgnote.busy{color:var(--arc)}

/* The card preview, which is the whole point of showing a card on a form: a
   creator sees the thing that will sit on the board, not a form they hope
   turns into one. */
.cardprev{display:flex;justify-content:center;padding:18px 0 4px}
.cardprev .tcard{width:232px}

/* ---------- touch targets ----------
   The filter chips are 31px and the fee slider's thumb 24px, which is fine for
   a mouse and under the 44px floor for a finger. Rather than inflate them for
   everyone -- a 44px chip row is heavy on a desktop board -- they grow only
   where the pointer is coarse. A phone is where most of this traffic is. */
@media (pointer: coarse) {
  .filter{padding:11px 15px}
  .rangerow input[type=range]{height:44px}
  .nav-item{padding:6px 0}
  .imgpick{min-height:120px}
}