/* PAIRD — the design system.
   ---------------------------------------------------------------------------
   One idea runs through every surface: a pair has two sides, and they do not
   look alike. The stock side is PAPER — warm cream, a serif, engraved rules,
   the language of a share certificate. The coin side is SCREEN — neon green,
   monospace, sharp. Nothing on this site is coloured decoratively; a cream
   thing is always the security and a green thing is always the coin.

   Layout is a fixed left rail and a column of rounded panels, so a page is a
   stack of surfaces rather than a scroll of sections.
*/

/* ---------------------------------------------------------------- tokens -- */
:root{
  --bg:#08090b;
  --surface:#0e1014;
  --raised:#14171c;
  --sunken:#0a0c0f;
  --line:rgba(238,241,244,.075);
  --line-2:rgba(238,241,244,.14);

  --ink:#eef1f4;
  --muted:#98a1ad;
  --dim:#6b747f;
  --faint:#4a525d;

  --coin:#16e08a;            /* the coin side. never used for a stock. */
  --coin-ink:#03170e;
  --coin-wash:rgba(22,224,138,.12);
  --paper:#e9dfc9;           /* the stock side. never used for a coin. */
  --paper-ink:#20190c;
  --paper-wash:rgba(233,223,201,.10);

  --up:#16e08a;
  --down:#ff5b6e;

  --r:16px; --r-md:11px; --r-sm:7px;
  --rail:236px;
  --pad:18px;

  /* One sans for everything with words in it, one mono for everything with
     digits in it. General Sans is the closest open face to the PP Mori that
     Bankr sets its product UI in; PP Mori itself is licensed and not shippable.
     Display weight is 600 with the tracking pulled in. */
  --sans:"General Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:var(--sans);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
/* a display rule on a class beats the [hidden] attribute, so say it louder once
   here rather than remembering to guard every component that sets hidden */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:14.5px;line-height:1.55;letter-spacing:-.008em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
img,svg{display:block;max-width:100%}
::selection{background:rgba(22,224,138,.28)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#252a31;border-radius:99px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#333a43}
:focus-visible{outline:2px solid var(--coin);outline-offset:2px;border-radius:4px}

/* Numbers are tabular everywhere. A board where the digits shift column as the
   price ticks is the single loudest tell that nobody looked at it twice. */
.num,.mono,table td.r,.stat b{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ------------------------------------------------------------------ rail -- */
.shell{display:flex;min-height:100vh}
.rail{
  width:var(--rail);flex:0 0 var(--rail);position:fixed;inset:0 auto 0 0;z-index:80;
  display:flex;flex-direction:column;padding:16px 11px 13px;
  background:#0a0b0e;border-right:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;padding:3px 7px 4px}
.brand svg{width:27px;height:27px;flex:none}
/* The mark is a glow on black, so it is pasted onto the rail's own ground rather than
   given a tile of its own. Blend mode keeps the black square from showing as a patch. */
.brand .mark{width:30px;height:30px;flex:none;mix-blend-mode:screen;image-rendering:auto}
.brand .nm{font-size:16px;font-weight:600;letter-spacing:-.035em}
.navlab{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);padding:17px 8px 6px;
}
.rail nav{display:flex;flex-direction:column;gap:1px}
.rail nav a{
  display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:var(--r-sm);
  color:var(--muted);font-size:13.5px;cursor:pointer;transition:background .12s,color .12s;
}
.rail nav a svg{width:15px;height:15px;flex:none;opacity:.72}
.rail nav a:hover{background:var(--raised);color:var(--ink)}
.rail nav a.on{background:var(--raised);color:var(--ink)}
.rail nav a.on svg{opacity:1;color:var(--coin)}
.rail nav a .ext{margin-left:auto;opacity:.4;width:11px;height:11px}
.grow{flex:1;min-height:14px}
.railcta{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--coin);color:var(--coin-ink);font-weight:600;font-size:13.5px;
  padding:10px;border-radius:var(--r-sm);margin:0 1px;transition:filter .12s,transform .12s;
}
.railcta:hover{filter:brightness(1.07)}
.railcta:active{transform:translateY(1px)}
.railcta svg{width:13px;height:13px;fill:currentColor}
main{margin-left:var(--rail);flex:1;min-width:0;padding:12px 14px 72px;display:flex;flex-direction:column;gap:12px}

/* --------------------------------------------------------------- panels -- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.phead{
  display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;
  padding:16px var(--pad) 13px;border-bottom:1px solid var(--line);
}
.phead h2{font-weight:600;font-size:22px;letter-spacing:-.021em;line-height:1.18}
.phead .sub{font-size:12.5px;color:var(--dim);margin-top:2px}
.phead .right{margin-left:auto;display:flex;align-items:center;gap:7px}
.pbody{padding:var(--pad)}

.eyebrow{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
}

/* ------------------------------------------------------------- controls -- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--coin);color:var(--coin-ink);border:1px solid transparent;
  font-weight:600;font-size:13.5px;padding:10px 16px;border-radius:var(--r-sm);
  cursor:pointer;transition:filter .12s,transform .12s;white-space:nowrap;
}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:default;filter:none;transform:none}
.btn svg{width:13px;height:13px;fill:currentColor;flex:none}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--raised);filter:none}
.btn.sm{padding:7px 12px;font-size:12.5px}

.seg{display:inline-flex;gap:2px;background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-sm);padding:2px}
.seg button{
  background:transparent;border:0;cursor:pointer;color:var(--dim);
  font-family:var(--mono);font-size:11px;letter-spacing:.02em;padding:5px 10px;border-radius:5px;
  transition:background .12s,color .12s;
}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--raised);color:var(--ink)}

.field{display:block;margin-bottom:12px}
.field label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.field input,.field select,textarea{
  width:100%;background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:10px 11px;font-size:14px;transition:border-color .12s;
}
.field input:focus,.field select:focus,textarea:focus{outline:0;border-color:var(--line-2)}
.field input::placeholder,textarea::placeholder{color:var(--faint)}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}

/* -------------------------------------------------------------- the two -- */
/* A pair is always drawn as coin-side then stock-side, in that order, with a
   slash between. Consistency here is what makes the board readable at a glance. */
.pairname{display:flex;align-items:center;gap:8px;min-width:0}
.pairname .sym{font-family:var(--mono);font-size:13px;color:var(--ink)}
.pairname .slash{color:var(--faint);font-family:var(--mono)}
.pairname .qsym{font-weight:600;font-size:13.5px;color:var(--paper);letter-spacing:-.01em}
.pairname .qsym.coinside{font-family:var(--mono);font-size:13px;color:var(--coin);letter-spacing:0}

.chip-coin,.chip-paper{
  display:inline-flex;align-items:center;gap:5px;border-radius:5px;padding:2px 7px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;
}
.chip-coin{background:var(--coin-wash);color:var(--coin)}
.chip-paper{background:var(--paper-wash);color:var(--paper)}

.up{color:var(--up)} .down{color:var(--down)} .flat{color:var(--dim)}

/* ---------------------------------------------------------------- hero --- */
.hero{position:relative;display:flex;align-items:center;min-height:452px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.hero-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(150,168,190,.075) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(150,168,190,.075) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(115% 95% at 74% 38%,#000 18%,transparent 72%);
          mask-image:radial-gradient(115% 95% at 74% 38%,#000 18%,transparent 72%);
  animation:drift 26s linear infinite;
}
@keyframes drift{to{background-position:-34px 34px,-34px 34px}}
.hero-wash{position:absolute;inset:0;
  background:radial-gradient(58% 66% at 76% 34%,rgba(22,224,138,.20),transparent 64%),
             radial-gradient(46% 54% at 62% 76%,rgba(233,223,201,.075),transparent 66%);
  animation:breathe 9s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.85}50%{opacity:1}}

.hero-copy{position:relative;z-index:4;padding:48px 10px 52px 34px;display:flex;flex-direction:column;justify-content:center;flex:0 0 auto;width:57%;max-width:690px}
.hero-copy h1{
  /* sized so the longer of the two lines fits the copy column at 1440 without
     the browser choosing its own break point. Measured, not guessed. */
  font-weight:600;font-size:clamp(27px,2.75vw,39px);
  line-height:1.14;letter-spacing:-.03em;margin:0;
}
.hero-copy h1 .paper{color:var(--paper)}
.hero-copy h1 .coin{color:var(--coin)}
.hero-copy .lede{color:var(--muted);font-size:15px;line-height:1.62;margin-top:17px;max-width:46ch}
.hero-copy .ctas{display:flex;gap:9px;flex-wrap:wrap;margin-top:26px}
/* the overlay. It sits between the background and the art and is what stops the
   two reading as separate pictures: a soft green cast pulled from the art, plus a
   vignette that darkens the corners so the art has somewhere to fall off into. */
.hero-veil{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(70% 78% at 72% 40%,rgba(22,224,138,.10),transparent 60%),
             radial-gradient(120% 120% at 50% 50%,transparent 42%,rgba(8,9,11,.72) 100%)}

/* ---- the art, on top of both --------------------------------------------
   An isometric plane with the two halves of a pair standing proud of it. It is
   built out of boxes on a rotated 3D plane rather than shipped as a picture, so
   it loops seamlessly, stays sharp at any size, costs nothing to download, and
   cannot invent a word that is not there.

   The plane is rotated once on .iso and every piece inherits that, so a node
   only ever says where it sits (--x, --y) and how high it floats (--z). */
.hero-art{position:absolute;inset:0 0 0 45%;z-index:3;pointer-events:none;
  overflow:hidden;perspective:1400px}
.iso{
  position:absolute;top:53%;left:53%;width:520px;height:340px;
  transform-style:preserve-3d;
  transform:translate(-50%,-50%) scale(1.12) rotateX(58deg) rotateZ(-40deg);
  animation:isodrift 26s ease-in-out infinite;
}
@keyframes isodrift{
  0%,100%{transform:translate(-50%,-50%) scale(1.12) rotateX(58deg) rotateZ(-40deg)}
  50%    {transform:translate(-50%,-54%) scale(1.16) rotateX(55deg) rotateZ(-33deg)}
}

/* the board the pieces sit on: hairline cells, nothing filled in */
.plane{position:absolute;inset:0;transform-style:preserve-3d}
.plane .cell{
  position:absolute;width:150px;height:104px;border-radius:9px;
  border:1px solid rgba(160,178,200,.26);
  left:calc(var(--c) * 172px);top:calc(var(--r) * 122px);
}
.plane .cell:nth-child(3n){border-color:rgba(160,178,200,.15)}
.plane .cell:nth-child(4n){border-style:dashed;border-color:rgba(22,224,138,.22)}

.node{position:absolute;left:var(--x);top:var(--y);transform-style:preserve-3d;
  transform:translateZ(var(--z))}
.bob{transform-style:preserve-3d;animation:bob 7.5s ease-in-out infinite;
  animation-delay:var(--d,0s)}
@keyframes bob{0%,100%{transform:translateZ(0)}50%{transform:translateZ(16px)}}

/* A slab is one side of a pair. It is a real box, not a rectangle with a shadow:
   .top is the face and the four .w are its walls, each folded up ninety degrees
   from an edge. Whichever two face the camera are the ones you see, so the piece
   stays solid as the scene turns. */
.slab{position:relative;transform-style:preserve-3d}
.slab .top{position:absolute;inset:0;border-radius:13px;padding:14px;
  transform:translateZ(var(--t));transform-style:preserve-3d}
/* Each wall is folded down from an edge of the top face, so it spans exactly the
   gap between the face at height --t and the plane at 0. The translateZ has to
   come first in the list, which in CSS means it is written first and applied
   last: fold the strip about its edge, then lift the whole thing to the face. */
.slab .w{position:absolute;background:var(--side);backface-visibility:hidden}
.slab .w.n{left:0;right:0;top:0;height:var(--t);transform-origin:top;
  transform:translateZ(var(--t)) rotateX(-90deg)}
.slab .w.s{left:0;right:0;bottom:0;height:var(--t);transform-origin:bottom;
  transform:translateZ(var(--t)) rotateX(90deg)}
.slab .w.w{top:0;bottom:0;left:0;width:var(--t);transform-origin:left;
  transform:translateZ(var(--t)) rotateY(90deg)}
.slab .w.e{top:0;bottom:0;right:0;width:var(--t);transform-origin:right;
  transform:translateZ(var(--t)) rotateY(-90deg)}

.slab.paper{--t:15px;--side:#9c9077;width:136px;height:94px}
.slab.paper .top{background:linear-gradient(150deg,#f6efdd,#ddd2b6);
  box-shadow:0 30px 44px -20px rgba(0,0,0,.9)}
/* The coin. Its thickness is nine stacked discs rather than folded walls: a wall
   is a flat rectangle and a round face has no flat edges to fold one onto, which
   is what left a green fin sticking out of the side. */
.disc{position:relative;width:108px;height:108px;transform-style:preserve-3d}
.disc>i{position:absolute;inset:0;border-radius:50%;background:#0b7d4a;
  transform:translateZ(calc(var(--i) * 3.2px))}
.disc>i:nth-child(n+7){background:#0e9459}
.disc .face{position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(150deg,#57f7b1,#0fb46b);
  transform:translateZ(28px);
  box-shadow:0 34px 52px -18px rgba(0,0,0,.9),0 0 74px rgba(22,224,138,.42)}


/* The debossed detail stops at rules and a ring. Anything that tries to be
   lettering at this size turns into noise, which is exactly what we do not want. */
.rule{display:block;height:7px;width:var(--w);border-radius:99px;
  background:rgba(58,47,22,.22);margin-bottom:10px}
.seal-dot{position:absolute;right:14px;bottom:12px;width:24px;height:24px;border-radius:50%;
  border:3px solid rgba(58,47,22,.2)}
.ring{position:absolute;inset:18px;border-radius:50%;border:5px solid rgba(5,72,42,.3)}

.pill{border-radius:99px;box-shadow:0 20px 28px -14px rgba(0,0,0,.85)}
.pill.coin{width:58px;height:22px;background:linear-gradient(150deg,#57f7b1,#12c97c);
  box-shadow:0 20px 28px -14px rgba(0,0,0,.85),0 0 36px rgba(22,224,138,.38)}
.pill.paper{width:46px;height:19px;background:linear-gradient(150deg,#f2e9d5,#cfc4a7)}
.dot{border-radius:50%;box-shadow:0 18px 24px -14px rgba(0,0,0,.85)}
.dot.coin{width:24px;height:24px;background:#33e79a;box-shadow:0 0 32px rgba(22,224,138,.55)}
.dot.paper{width:18px;height:18px;background:#e9dfc9}
.bars{display:flex;align-items:flex-end;gap:6px;height:38px}
.bars i{width:10px;border-radius:3px;background:rgba(233,223,201,.45)}
.bars i:nth-child(1){height:40%}
.bars i:nth-child(2){height:100%;background:var(--coin)}
.bars i:nth-child(3){height:68%}

/* the light the scene sits in, under everything it lights */
.isoglow{position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(52% 46% at 56% 58%,rgba(22,224,138,.34),transparent 70%);
  animation:breathe 9s ease-in-out infinite}



@media(max-width:1080px){
  .hero{flex-direction:column;align-items:stretch;min-height:0}
  .hero-copy{padding:32px 22px 20px;width:100%;max-width:none}
  /* reading order on a narrow screen is copy, then the art, then the figures */
  .hero-copy{order:1}
  .hero-art{position:relative;inset:auto;height:300px;order:2}
  .iso{transform:translate(-50%,-50%) scale(.78) rotateX(58deg) rotateZ(-40deg)}
  @keyframes isodrift{
    0%,100%{transform:translate(-50%,-50%) scale(.78) rotateX(58deg) rotateZ(-40deg)}
    50%    {transform:translate(-50%,-54%) scale(.78) rotateX(55deg) rotateZ(-34deg)}
  }

}

/* ---------------------------------------------------------- board cards -- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:11px;padding:var(--pad)}
.card{
  background:var(--raised);border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px;display:flex;flex-direction:column;gap:11px;cursor:pointer;
  transition:border-color .14s,transform .14s var(--ease);
}
.card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.card .top{display:flex;align-items:center;gap:10px;min-width:0}
.av{
  width:36px;height:36px;flex:none;border-radius:9px;overflow:hidden;background:var(--sunken);
  display:grid;place-items:center;font-family:var(--mono);font-size:12px;color:var(--dim);
  border:1px solid var(--line);
}
.av img{width:100%;height:100%;object-fit:cover}
.card .who{min-width:0;flex:1}
.card .who .n{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .who .p{margin-top:1px}
.card .chg{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;margin-left:auto;flex:none}
.card .nums{display:grid;grid-template-columns:1fr 1fr;gap:9px;border-top:1px solid var(--line);padding-top:11px}
.card .nums div span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint)}
.card .nums div b{display:block;font-family:var(--mono);font-size:13px;font-weight:400;
  font-variant-numeric:tabular-nums;margin-top:2px}
.card .foot{display:flex;align-items:center;gap:6px}
.buys{display:flex;gap:5px;flex:1}
.buys a{
  flex:1;text-align:center;background:var(--sunken);border:1px solid var(--line);border-radius:5px;
  font-family:var(--mono);font-size:11px;padding:5px 0;color:var(--muted);
  transition:background .12s,color .12s,border-color .12s;
}
.buys a:hover{background:var(--coin-wash);color:var(--coin);border-color:rgba(22,224,138,.3)}
.lock{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;padding:3px 7px;border-radius:5px;
  border:1px solid var(--line);color:var(--dim);flex:none;
}
.lock.on{color:var(--coin);border-color:rgba(22,224,138,.28);background:var(--coin-wash)}

/* ------------------------------------------------------------- the table - */
.tscroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);font-weight:400;text-align:left;padding:10px var(--pad);
  border-bottom:1px solid var(--line);white-space:nowrap;
}
tbody td{padding:12px var(--pad);border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr{cursor:pointer;transition:background .12s}
tbody tr:hover{background:var(--raised)}
tbody tr:last-child td{border-bottom:0}
th.r,td.r{text-align:right}
td.rank{font-family:var(--mono);color:var(--faint);width:1%;white-space:nowrap}

/* --------------------------------------------------------- empty states -- */
/* An empty board must not read as a broken one. It says what would be here and
   draws the shape of it, rather than apologising in grey text. */
.empty{grid-column:1/-1;padding:56px 24px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:5px}
.empty svg{margin-bottom:12px;opacity:.9}
.empty b{font-weight:600;font-size:17px;letter-spacing:-.02em}
.empty span{font-size:13px;color:var(--dim);max-width:42ch}
.empty .btn{margin-top:14px}
td .empty{padding:44px 20px}

.skel{background:linear-gradient(90deg,var(--raised) 0%,#1b1f26 50%,var(--raised) 100%);
  background-size:220% 100%;animation:sweep 1.25s linear infinite;border-radius:5px;color:transparent}
@keyframes sweep{to{background-position:-220% 0}}

/* ---------------------------------------------------------- the composer - */
.composer{display:grid;grid-template-columns:1.15fr .85fr;gap:1px;background:var(--line)}
@media(max-width:900px){.composer{grid-template-columns:1fr}}
.composer>div{background:var(--surface);padding:var(--pad)}
.twbox{position:relative}
.twbox textarea{
  min-height:104px;resize:vertical;font-family:var(--mono);font-size:13.5px;line-height:1.6;
  background:var(--sunken);
}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:11px}
.chip{
  font-family:var(--mono);font-size:11px;color:var(--muted);background:var(--sunken);
  border:1px solid var(--line);border-radius:99px;padding:4px 10px;cursor:pointer;
  transition:background .12s,color .12s,border-color .12s;
}
.chip:hover{background:var(--raised);color:var(--ink);border-color:var(--line-2)}
.readout{
  background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:13px;font-family:var(--mono);font-size:12.5px;line-height:1.85;min-height:104px;
}
.readout .k{color:var(--faint);display:inline-block;min-width:88px}
.readout .v{color:var(--ink)}
.readout .bad{color:var(--down)}
.readout .ok{color:var(--coin)}

/* ------------------------------------------------------------- how steps - */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
@media(max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{background:var(--surface);padding:20px var(--pad)}
.step .n{font-family:var(--mono);font-size:20px;color:var(--faint);line-height:1;letter-spacing:-.02em}
.step h3{font-size:14px;font-weight:600;margin-top:9px;letter-spacing:-.015em}
.step p{font-size:13px;color:var(--muted);margin-top:5px;line-height:1.6}
.step .fine{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:8px}

/* -------------------------------------------------------------- quotes ---- */
.assets{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
@media(max-width:900px){.assets{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.assets{grid-template-columns:1fr}}
.asset{background:var(--surface);padding:16px var(--pad);display:flex;align-items:center;gap:13px}
.seal{
  width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-weight:600;font-size:11.5px;color:var(--paper);letter-spacing:-.01em;
  background:var(--paper-wash);border:1px solid rgba(233,223,201,.22);letter-spacing:.02em;
}
.seal.coinside{font-family:var(--mono);font-size:10px;color:var(--coin);border-radius:10px;
  background:var(--coin-wash);border-color:rgba(22,224,138,.24)}
.asset .nm{font-weight:600;font-size:14.5px;color:var(--paper);letter-spacing:-.015em}
.asset .nm.coinside{font-family:var(--mono);font-weight:400;font-size:13px;color:var(--coin)}
.asset .lb{font-size:12px;color:var(--dim);margin-top:1px}
.asset .px{margin-left:auto;text-align:right}
.asset .px b{display:block;font-family:var(--mono);font-size:14px;font-weight:400}
.asset .px span{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}

/* -------------------------------------------------------------- status --- */
.status{display:none;font-family:var(--mono);font-size:12px;line-height:1.6;
  border-radius:var(--r-sm);padding:10px 12px;margin-top:11px;border:1px solid var(--line)}
.status.on{display:block}
.status.work{color:var(--muted);background:var(--sunken)}
.status.ok{color:var(--coin);background:var(--coin-wash);border-color:rgba(22,224,138,.25)}
.status.err{color:var(--down);background:rgba(255,91,110,.08);border-color:rgba(255,91,110,.24)}
.note{font-size:12px;color:var(--dim);line-height:1.65;margin-top:12px}

/* ------------------------------------------------------------- footer ---- */
.foot{
  border-top:1px solid var(--line);padding:22px var(--pad);display:flex;gap:20px;
  flex-wrap:wrap;align-items:center;font-size:12px;color:var(--faint);
}
.foot a:hover{color:var(--muted)}
.foot .sp{flex:1}

/* --------------------------------------------------------------- prose --- */
.prose{max-width:70ch;padding:26px var(--pad) 34px}
.prose h1{font-weight:600;font-size:33px;letter-spacing:-.032em;line-height:1.12}
.prose h2{font-weight:600;font-size:20px;margin:32px 0 10px;letter-spacing:-.022em}
.prose p{color:var(--muted);margin-bottom:12px;line-height:1.72}
.prose ul{color:var(--muted);margin:0 0 12px 18px;line-height:1.72}
.prose li{margin-bottom:5px}
.prose code{font-family:var(--mono);font-size:12.5px;background:var(--sunken);
  border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--ink)}
.prose strong{color:var(--ink);font-weight:600}
.prose .lede{font-size:16px;color:var(--muted);margin-top:12px}
.prose pre{font-family:var(--mono);font-size:12.5px;line-height:1.75;background:var(--sunken);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:14px;overflow-x:auto;
  color:var(--ink);margin:0 0 14px}
.prose h2+p,.prose h1+p{margin-top:0}
.prose .warn{border-left:2px solid var(--down);background:rgba(255,91,110,.06);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:13px 15px;margin:18px 0}
.prose .warn p{margin:0;color:var(--ink);font-size:13.5px}

/* -------------------------------------------------------------- mobile --- */
@media(max-width:980px){
  :root{--rail:0px;--pad:15px}
  .shell{flex-direction:column}
  .rail{position:sticky;top:0;width:100%;flex:none;flex-direction:row;align-items:center;
    gap:8px;padding:9px 12px;border-right:0;border-bottom:1px solid var(--line);
    background:rgba(10,11,14,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .brand{padding:0}
  .navlab,.grow{display:none}
  .rail nav{flex-direction:row;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1}
  .rail nav::-webkit-scrollbar{display:none}
  .rail nav a{white-space:nowrap;padding:6px 10px;font-size:13px}
  .rail nav a .ext{display:none}
  .railcta{margin:0;padding:8px 13px;font-size:12.5px;flex:none}
  .railcta .lbl{display:none}
  main{margin-left:0;padding:10px 10px 44px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .ticker{animation:none}
}

/* ------------------------------------------------------------- console ---
   A launcher pinned bottom right and the panel it opens. The panel is a shell
   around the bot's own parser, so it is styled like the readout it descends
   from: mono, left-labelled, one accent. */
.dock-open{
  position:fixed;right:18px;bottom:18px;z-index:90;
  display:flex;align-items:center;gap:9px;
  background:var(--raised);color:var(--ink);border:1px solid var(--line-2);
  border-radius:99px;padding:10px 14px;font-size:13px;cursor:pointer;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.8);
  transition:transform .14s var(--ease),border-color .14s,background .14s;
}
.dock-open:hover{transform:translateY(-2px);border-color:var(--coin);background:#171b21}
.dock-open svg{width:15px;height:15px;color:var(--coin)}
.dock-open kbd{
  font-family:var(--mono);font-size:10px;color:var(--dim);
  border:1px solid var(--line);border-radius:4px;padding:1px 5px;
}

.dock{
  position:fixed;right:18px;bottom:18px;z-index:91;
  width:min(392px,calc(100vw - 24px));max-height:min(560px,calc(100vh - 36px));
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);
  box-shadow:0 26px 60px -16px rgba(0,0,0,.9);
  animation:dockin .18s var(--ease);
}
@keyframes dockin{from{opacity:0;transform:translateY(10px) scale(.985)}}
.dock header{
  display:flex;align-items:center;gap:9px;padding:12px 14px;
  border-bottom:1px solid var(--line);font-size:13px;
}
.dock header .dot{width:7px;height:7px;border-radius:50%;background:var(--coin);flex:none;
  box-shadow:0 0 0 3px var(--coin-wash)}
.dock header b{font-family:var(--mono);font-weight:400;font-size:12.5px}
.dock header .mode{font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);margin-left:auto}
.dock header .x{background:none;border:0;color:var(--dim);cursor:pointer;padding:2px;display:grid}
.dock header .x:hover{color:var(--ink)}
.dock header .x svg{width:15px;height:15px}

.log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:11px;min-height:180px}
.msg{max-width:92%;font-size:13px;line-height:1.6}
.msg.you{align-self:flex-end;background:var(--coin-wash);color:var(--ink);
  border:1px solid rgba(22,224,138,.24);border-radius:11px 11px 3px 11px;
  padding:8px 11px;font-family:var(--mono);font-size:12px}
.msg.bot{align-self:flex-start;background:var(--raised);border:1px solid var(--line);
  border-radius:11px 11px 11px 3px;padding:10px 12px}
.msg.bot .k{font-family:var(--mono);font-size:11px;color:var(--faint);
  display:inline-block;min-width:92px}
.msg.bot .v{font-family:var(--mono);font-size:11.5px;color:var(--ink)}
.msg.bot .ok{color:var(--coin);font-family:var(--mono);font-size:11.5px}
.msg.bot .bad{color:var(--down);font-family:var(--mono);font-size:11.5px}
.msg.bot a.act{
  display:inline-flex;align-items:center;gap:6px;margin-top:9px;
  background:var(--coin);color:var(--coin-ink);border-radius:6px;
  padding:6px 11px;font-size:12px;font-weight:600;
}
.msg.bot a.act:hover{filter:brightness(1.07)}
.msg.bot .rowlist{margin-top:7px;display:flex;flex-direction:column;gap:4px}
.msg.bot .rowlist span{display:flex;justify-content:space-between;gap:12px;
  font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.msg.bot .rowlist span b{font-weight:400;color:var(--ink)}

.sug{display:flex;gap:5px;flex-wrap:wrap;padding:0 14px 11px}
.sug button{
  font-family:var(--mono);font-size:10.5px;color:var(--muted);background:var(--sunken);
  border:1px solid var(--line);border-radius:99px;padding:4px 9px;cursor:pointer;
}
.sug button:hover{color:var(--ink);border-color:var(--line-2)}

.ask{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line)}
.ask input{
  flex:1;background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:9px 11px;font-family:var(--mono);font-size:12px;
}
.ask input:focus{outline:0;border-color:var(--line-2)}
.ask button{
  background:var(--coin);color:var(--coin-ink);border:0;border-radius:var(--r-sm);
  width:38px;display:grid;place-items:center;cursor:pointer;flex:none;
}
.ask button:hover{filter:brightness(1.07)}
.ask button svg{width:15px;height:15px}

@media(max-width:640px){
  .dock{right:8px;left:8px;bottom:8px;width:auto;max-height:calc(100vh - 90px)}
  .dock-open{right:12px;bottom:12px}
  .dock-open kbd{display:none}
}

/* ---------------------------------------------------------- launch card ---
   The form reads as a settings sheet rather than a stack of inputs: a labelled
   group, the controls, then a line of grey saying what the default does. The
   only controls present are ones POST /launch actually accepts; anything the
   contract fixes is a locked row, because a switch you cannot move is worse
   than a sentence. */
.launchcard{overflow:visible}
.lc-head{display:flex;align-items:flex-start;gap:15px;padding:20px var(--pad);
  border-bottom:1px solid var(--line)}
.applogo{
  width:52px;height:52px;flex:none;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(150deg,#57f7b1,#0fb46b);
  box-shadow:0 8px 20px -8px rgba(22,224,138,.6);
}
.applogo svg{width:29px;height:29px}
.lc-title h2{font-size:20px;font-weight:600;letter-spacing:-.024em;line-height:1.25}
.lc-title p{font-size:13.5px;color:var(--dim);margin-top:3px}
.lc-help{margin-left:auto;width:32px;height:32px;flex:none;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:9px;color:var(--dim)}
.lc-help:hover{color:var(--ink);border-color:var(--line-2)}
.lc-help svg{width:15px;height:15px}

.lc-body{padding:4px var(--pad) 0}
.optrow{padding:20px 0;border-bottom:1px solid var(--line)}
.optrow.last{border-bottom:0}
.opthead h3{font-size:15px;font-weight:600;letter-spacing:-.014em}
.opthelp{font-size:12.5px;color:var(--dim);line-height:1.6;margin-top:11px;max-width:74ch}

/* a row of equal-width options, exactly one lit */
.choice{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}
.choice button{
  flex:1 1 0;min-width:132px;background:transparent;cursor:pointer;
  border:1px solid var(--line-2);border-radius:10px;
  padding:12px 14px;font-size:14px;font-weight:500;color:var(--ink);
  display:flex;align-items:center;justify-content:center;gap:7px;
  transition:border-color .13s,color .13s,background .13s;
}
.choice button em{font-style:normal;font-size:11.5px;color:var(--dim);font-weight:400}
.choice button:hover{border-color:var(--dim)}
.choice button.on{border-color:var(--coin);color:var(--coin);background:var(--coin-wash)}
.choice button.on em{color:var(--coin);opacity:.7}

/* the instruments inside the chosen group. Same visual language as .choice so
   the two rows read as one control, just at a smaller size. */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:9px;margin-top:9px}
.tile{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  background:var(--sunken);border:1px solid var(--line);border-radius:10px;padding:11px 13px;
  transition:border-color .13s,background .13s;
}
.tile:hover{border-color:var(--dim)}
.tile.on{border-color:var(--coin);background:var(--coin-wash)}
.tile b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.012em}
.tile.on b{color:var(--coin)}
.tile small{display:block;font-size:11.5px;color:var(--dim);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.switchrow{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:14px}
.switchrow span{font-weight:500}
.switch{
  margin-left:auto;width:46px;height:26px;flex:none;border-radius:99px;cursor:pointer;
  background:var(--sunken);border:1px solid var(--line-2);position:relative;
  transition:background .16s,border-color .16s;
}
.switch i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:var(--dim);transition:transform .16s var(--ease),background .16s}
.switch[aria-checked="true"]{background:var(--coin-wash);border-color:var(--coin)}
.switch[aria-checked="true"] i{transform:translateX(20px);background:var(--coin)}

.idgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;margin-top:12px}
.idgrid .wide{grid-column:1/-1}
@media(max-width:620px){.idgrid{grid-template-columns:1fr}}

/* the things you cannot change, said once and plainly */
.locked{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}
@media(max-width:820px){.locked{grid-template-columns:1fr}}
.locked div{background:var(--sunken);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.locked b{display:block;font-family:var(--mono);font-size:13px;font-weight:400;color:var(--ink)}
.locked span{display:block;font-size:12px;color:var(--dim);margin-top:3px;line-height:1.5}

.lc-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:16px var(--pad);border-top:1px solid var(--line)}
.lc-cost{font-size:12.5px;color:var(--dim)}
.lc-cost b{color:var(--ink);font-family:var(--mono);font-weight:400}
.lc-foot .btn{margin-left:auto;padding:12px 28px;font-size:14px}
@media(max-width:560px){.lc-foot .btn{margin-left:0;width:100%}}


/* ---- the chosen pairs ----------------------------------------------------
   A coin can open against several stocks, so the picker shows what is currently
   selected and lets any of them be dropped. One pair must always remain. */
.picked{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.picked .chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);
  font-size:12px;padding:5px 10px;border-radius:99px;border:1px solid var(--line-2);
  color:var(--muted);cursor:pointer}
.picked .chip.on{border-color:rgba(22,224,138,.42);color:var(--coin);background:var(--coin-wash)}
.picked .chip.on:hover{border-color:var(--coin)}
.picked .chip i{font-style:normal;opacity:.6}
.picked .chip.on:hover i{opacity:1}
.picked .chip.ghost{cursor:default;color:var(--faint);border-style:dashed}

/* a pair count on a board row, when a coin trades against more than one stock */
.morepairs{font-family:var(--mono);font-size:10.5px;color:var(--dim);
  border:1px solid var(--line-2);border-radius:99px;padding:1px 6px;margin-left:6px}

/* a quote Pons will not accept as a pair token: visible, so the catalogue does not look
   arbitrarily short, but plainly not selectable */
.tile.off{opacity:.38;cursor:not-allowed}
.tile.off:hover{border-color:var(--line);background:var(--sunken)}