:root {
  --bg: #121a21;
  --surface: #17222b;
  --raise: #1e2b36;
  --line: #24323d;
  --paper: #ece6da;
  --soft: #cfd6db;
  --muted: #8b98a3;
  --bid: #2bb39b;
  --ask: #f0705a;
  --you: #f3d36b;
  --bid-bar: rgba(43, 179, 155, 0.16);
  --ask-bar: rgba(240, 112, 90, 0.16);
  --display: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  --text: "IBM Plex Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--paper); color-scheme: dark; }
body { margin: 0; font: 16px/1.55 var(--text); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--you); outline-offset: 3px; border-radius: 4px; }

/* layout */
.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 64px 48px 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(460px, 540px);
  grid-template-areas: "intro market";
  column-gap: 72px;
  min-height: 100vh;
  align-items: center;
}
.intro { grid-area: intro; }
.market { grid-area: market; }

/* intro */
.name { width: fit-content; }
.photo { display: block; width: 120px; height: 120px; margin: 0 auto 28px; object-fit: cover; object-position: 50% 15%; border-radius: 50%; }
h1 {
  margin: 0;
  font: 800 clamp(64px, 9.5vw, 132px)/0.86 var(--display);
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.035em;
}
.bio { margin: 28px 0 0; max-width: 32ch; font-size: 21px; line-height: 1.45; color: var(--paper); }
.how { margin: 14px 0 0; max-width: 42ch; font-size: 16px; color: var(--muted); }

/* order book */
.market {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.mk-head { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 22px 12px; }
.mk-head h2 { margin: 0; font: 600 20px var(--display); font-variation-settings: "opsz" 24; letter-spacing: -0.01em; }
.mk-sub { margin: 0; font-size: 14px; color: var(--muted); }
.mk-sub::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--muted); vertical-align: 1px; }
.mk-sub.live::before { background: var(--bid); box-shadow: 0 0 0 3px rgba(43, 179, 155, 0.18); }

.cols, .lvl { display: grid; grid-template-columns: 92px 64px minmax(0, 1fr); align-items: center; }
.cols { padding: 6px 22px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cols span:nth-child(2) { text-align: right; }

.side { position: relative; }
.lvl {
  position: relative;
  min-height: 58px;
  padding: 8px 22px;
  text-decoration: none;
  isolation: isolate;
}
.lvl + .lvl { border-top: 1px solid rgba(36, 50, 61, 0.6); }
.lvl i { position: absolute; z-index: -1; top: 6px; bottom: 6px; right: 0; width: 0; border-radius: 6px 0 0 6px; transition: width 0.5s ease-out; }
.asks .lvl i { background: var(--ask-bar); }
.bids .lvl i { background: var(--bid-bar); }
.px { justify-self: start; margin-left: -6px; padding: 1px 6px; border-radius: 5px; font: 600 17px var(--text); }
.asks .px { color: var(--ask); }
.bids .px { color: var(--bid); }
.sz { text-align: right; color: var(--muted); font-size: 15px; }
.what { padding-left: 24px; min-width: 0; }
.what b { display: block; font: 600 20px/1.2 var(--display); font-variation-settings: "opsz" 24; letter-spacing: -0.01em; }
.what em { display: block; font-style: normal; font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lvl:hover { background: var(--raise); }
.lvl:hover b { color: var(--you); }
.lvl:active { background: #23323f; }

.mid { display: flex; justify-content: space-between; gap: 16px; padding: 9px 22px; font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #141e26; }
#tape { color: var(--soft); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* a fill: the level flashes when anyone opens it */
.lvl.print { animation: print 1s ease-out; }
.lvl.print .px { animation: printpx 1s ease-out; }
@keyframes print { from { background: rgba(236, 230, 218, 0.14); } }
@keyframes printpx { from { color: var(--you); } }
/* a requote: the price ticks up or down */
.px.up { animation: tickup 0.9s ease-out; }
.px.down { animation: tickdn 0.9s ease-out; }
@keyframes tickup { from { background: rgba(43, 179, 155, 0.28); } }
@keyframes tickdn { from { background: rgba(240, 112, 90, 0.28); } }

/* visitors' resting orders: quieter rows between the links */
.lvl.vis { min-height: 40px; }
.lvl.vis .px { font-size: 15px; }
.lvl.vis .what b { font: 500 14px/1.2 var(--text); color: var(--muted); }
.lvl.vis.yours .what b { color: var(--you); }
.lvl.vis:hover { background: none; }

/* coins, top right */
.wallet { position: absolute; top: 18px; right: 24px; z-index: 2; display: flex; align-items: center; gap: 14px; font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wallet[hidden], .ticket[hidden], .mine[hidden], .field[hidden] { display: none; }
.coins { padding: 2px 6px; border-radius: 5px; }
.coins b { color: var(--paper); font-weight: 600; }
.coins.up { animation: tickup 0.9s ease-out; }
.coins.down { animation: tickdn 0.9s ease-out; }
.refill { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--soft); text-decoration: none; font-weight: 500; transition: border-color 0.15s, color 0.15s; }
.refill:hover { border-color: var(--you); color: var(--you); }

/* trade ticket */
.ticket button, .ticket input, .refill { touch-action: manipulation; }
.ticket { padding: 18px 22px 20px; border-top: 1px solid var(--line); background: #141e26; }
.tk-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.tk-row + .tk-row { margin-top: 12px; }
.seg { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--bg); border: 1px solid var(--line); }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: block; padding: 6px 14px; border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--muted); transition: background 0.15s, color 0.15s; }
.seg input:checked + span { background: var(--raise); color: var(--paper); }
.side-seg input[value="buy"]:checked + span { color: var(--bid); }
.side-seg input[value="sell"]:checked + span { color: var(--ask); }
.seg input:focus-visible + span { outline: 2px solid var(--you); outline-offset: 1px; }
.field { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.field input { width: 104px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--paper); font: 500 16px var(--text); font-variant-numeric: tabular-nums; }
.field input:focus { outline: none; border-color: var(--soft); }
.cents { position: relative; display: block; }
.cents input { width: 84px; padding-right: 22px; }
.cents i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--muted); pointer-events: none; }
.go { flex: 1; min-width: 150px; padding: 10px 16px; border: 0; border-radius: 8px; font: 600 16px var(--text); color: #0d1418; cursor: pointer; transition: filter 0.15s, transform 0.1s; }
.go.buy { background: var(--bid); }
.go.sell { background: var(--ask); }
.go:hover { filter: brightness(1.08); }
.go:active { transform: translateY(1px); }
.go:disabled { background: var(--raise); color: var(--muted); cursor: not-allowed; filter: none; transform: none; }
.tk-note { display: flex; justify-content: space-between; gap: 12px; margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.tk-msg { min-height: 20px; margin: 4px 0 0; font-size: 14px; color: var(--soft); }
.tk-msg.bad { color: var(--ask); }
.mine { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; }
.mine p { margin: 0; color: var(--soft); }
.mine ul { list-style: none; margin: 6px 0 0; padding: 0; }
.mine li { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; color: var(--muted); }
.mine li button { padding: 3px 10px; border: 1px solid var(--line); border-radius: 6px; background: none; color: var(--soft); font: 500 13px var(--text); cursor: pointer; }
.mine li button:hover { border-color: var(--ask); color: var(--ask); }

::selection { background: rgba(243, 211, 107, 0.3); }

@media (max-width: 980px) {
  .page { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "market"; grid-template-rows: none; padding: 32px 20px; align-items: start; }
  .market { margin-top: 36px; }
  .bio { font-size: 19px; }
  .wallet { position: static; justify-content: flex-end; padding: 14px 20px 0; }
}
@media (max-width: 480px) {
  .cols, .lvl { grid-template-columns: 70px 44px minmax(0, 1fr); }
  .lvl, .cols, .mk-head, .mid { padding-left: 16px; padding-right: 16px; }
  .what { padding-left: 16px; }
  .what b { font-size: 18px; }
  .what em { white-space: normal; }
  .px { font-size: 15px; }
  .ticket { padding: 16px; }
  .go { min-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}