/* VamCat. Everything comes from the avatar: a black ground, one pale block, a blue copy of it one step down-left
   and a pink copy one step up-right, red eyes.
   Rule of the page: one pale board with the two copies per screen (.board) holds the main action. The rest is
   pale text and thin lines on black, with no copies and no glow.
   Colours have fixed jobs: blue = locked / sold, pink = only the board's second copy, red = warnings. */

@font-face { font-family: 'Jersey 20'; src: url('fonts/jersey20-latin.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'Onest'; src: url('fonts/onest-latin.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }

:root {
  --ink: #000;
  --paper: #F4F1FF;
  --blue: #2F7BFF;
  --pink: #FF4FB0;
  --red: #FF2A3D;
  --night: #0b0a18;                       /* text on the pale board */
  --soft: rgba(244, 241, 255, .68);       /* second-rank text on black */
  --faint: rgba(244, 241, 255, .42);
  --line: rgba(244, 241, 255, .14);
  --night-soft: rgba(11, 10, 24, .68);
  --night-line: rgba(11, 10, 24, .14);
  --display: 'Jersey 20', 'Onest', system-ui, sans-serif;   /* the name, headings and big numbers only */
  --text: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --n: 12px;                              /* one step of a stepped corner */
  --o: 14px;                              /* how far the two copies sit from the board */
}

* { box-sizing: border-box; }
html { background: var(--ink); color: var(--paper); font: 400 16px/1.55 var(--text); -webkit-font-smoothing: antialiased; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.page { width: 100%; max-width: 1168px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.num { text-align: right; }
.pic { display: block; flex: none; image-rendering: pixelated; }

/* ---- header and footer */
.top { border-bottom: 1px solid var(--line); }
.top__in { display: flex; align-items: center; gap: 44px; height: 72px; }
.brand { display: flex; align-items: center; gap: 4px; font: 400 36px/1 var(--display); letter-spacing: .01em; }
.brand img { display: block; margin-left: -8px; }
.nav { display: flex; gap: 30px; align-self: stretch; }
.nav a { display: flex; align-items: center; color: var(--soft); font-weight: 500; font-size: 15px; }
.nav a:hover { color: var(--paper); }
.nav a[aria-current] { color: var(--paper); box-shadow: inset 0 -3px 0 var(--paper); }
.top__right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.ca { background: none; border: 0; padding: 0; color: var(--soft); font-size: 15px; cursor: pointer; }
.ca:hover { color: var(--paper); }
.foot { border-top: 1px solid var(--line); }
.foot__in { display: flex; align-items: center; gap: 28px; height: 64px; }

/* ---- buttons and links */
.btn-quiet { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; background: none; border: 1px solid var(--faint); color: var(--paper); font-weight: 600; font-size: 15px; white-space: nowrap; cursor: pointer; }
.btn-quiet:hover { border-color: var(--paper); }
.btn-quiet img { width: 20px; height: 20px; margin-right: 8px; border-radius: 4px; }      /* the signed-in account's icon */
.btn-dark { height: 44px; padding: 0 16px; background: var(--night); color: var(--paper); border: 0; font-weight: 600; font-size: 15px; cursor: pointer; }
.btn-dark:hover { background: var(--blue); }
.btn-main { display: flex; align-items: center; justify-content: center; width: 100%; height: 54px; --n: 8px; background: var(--night); color: var(--paper); border: 0; font-weight: 700; font-size: 17px; cursor: pointer; }
.btn-main:hover { background: var(--blue); }
.btn-main:disabled { background: var(--night-line); color: var(--night-soft); cursor: default; }
.link { background: none; border: 0; padding: 0; color: var(--soft); font-size: 15px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.link:hover { color: var(--paper); }

/* ---- the board: the pale block and its two copies. Corners are cut by one step, like the cat's outline. */
.board::before, .board::after, .board__face, .btn-main {
  clip-path: polygon(var(--n) 0, calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n), 100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n)) 100%, var(--n) 100%, var(--n) calc(100% - var(--n)), 0 calc(100% - var(--n)), 0 var(--n), var(--n) var(--n));
}
.board { position: relative; isolation: isolate; }
.board::before, .board::after { content: ''; position: absolute; inset: 0; z-index: -1; transition: transform .42s steps(4, end); }
.board::before { background: var(--blue); }
.board::after { background: var(--pink); }
/* the one piece of motion: when a page opens, the copies step out from behind the board */
.board.is-out::before { transform: translate(calc(var(--o) * -1), var(--o)); }
.board.is-out::after { transform: translate(var(--o), calc(var(--o) * -1)); }
.board.no-move::before, .board.no-move::after { transition: none; }
@media (prefers-reduced-motion: reduce) { .board::before, .board::after { transition: none; } }
.board__face { position: relative; background: var(--paper); color: var(--night); padding: 28px; }
.board__title { font: 400 42px/1 var(--display); margin-bottom: 14px; }
.board__lead { margin-bottom: 18px; color: var(--night-soft); }
.board__note { margin: 14px 0 18px; font-size: 14px; line-height: 1.5; color: var(--night-soft); }
.board .facts { margin-bottom: 18px; }
.board .facts + .board__note { margin-top: -4px; }

/* label on the left, value on the right */
.facts { margin: 0; }
.facts div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--night-line); }
.facts dt { color: var(--night-soft); }
.facts dd { margin: 0; font-weight: 600; text-align: right; }
/* the same list on black, as a row of big numbers */
.facts--wide { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.facts--wide div { display: block; padding: 12px 0 0; border-top: 1px solid var(--line); }
.facts--wide dt { color: var(--soft); font-size: 14px; }
.facts--wide dd { margin-top: 2px; text-align: left; font: 400 36px/1.1 var(--display); }

/* how much of a lock is sold */
.cells { display: inline-flex; gap: 2px; vertical-align: middle; }
.cells i { width: 8px; height: 14px; background: var(--line); }
.cells i.on { background: var(--blue); }
.board .cells i { background: var(--night-line); }
.board .cells i.on { background: var(--blue); }
.sold { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 20px; font-size: 14px; color: var(--night-soft); }
.sold span:last-child { white-space: nowrap; }

/* ---- board page */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 80px; align-items: center; padding-top: 76px; padding-bottom: 92px; }
.hero h1 { font: 400 clamp(52px, 6.3vw, 88px)/.9 var(--display); letter-spacing: .005em; margin-bottom: 26px; }
.hero__say p { max-width: 46ch; margin-bottom: 20px; color: var(--soft); font-size: 18px; }
.coin-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.coin-name { font: 400 46px/1 var(--display); }
.coin-sub { margin-top: 4px; color: var(--night-soft); font-size: 15px; }

.bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 10px; }
.bar h2 { font: 400 42px/1 var(--display); }
.bar p { max-width: 64ch; margin-top: 8px; color: var(--soft); font-size: 15px; }
.pick { display: flex; gap: 22px; }
.pick button { background: none; border: 0; padding: 6px 0; color: var(--soft); font-weight: 500; font-size: 15px; cursor: pointer; }
.pick button:hover { color: var(--paper); }
.pick button[aria-pressed="true"] { color: var(--paper); box-shadow: inset 0 -2px 0 var(--paper); }

/* ---- lists (groups, coins, options): one grid per kind, whole row is the link */
.list { border-top: 1px solid var(--line); margin-bottom: 96px; }
.list__head, .row { display: grid; align-items: center; gap: 16px; padding: 0 8px; }
.list__head { height: 44px; border-bottom: 1px solid var(--line); color: var(--faint); font-size: 14px; }
.row { min-height: 68px; border-bottom: 1px solid var(--line); }
a.row:hover { background: rgba(244, 241, 255, .05); }
.list--groups .list__head, .list--groups .row { grid-template-columns: minmax(200px, 1.6fr) 80px 110px 190px 170px; }
.list--coins .list__head, .list--coins .row { grid-template-columns: 20px minmax(130px, 1fr) 108px 88px 88px 112px; gap: 14px; }
.c-sale small { display: block; margin-top: 4px; color: var(--faint); font-size: 13px; }
.list--options .list__head, .list--options .row { grid-template-columns: minmax(170px, 1.2fr) 80px 120px 120px 70px minmax(200px, 1.3fr) 150px; }
.c-meme { display: flex; align-items: center; gap: 14px; min-width: 0; }
.c-meme b, .c-coin b { display: block; font-weight: 600; }
.c-meme small, .c-coin small { display: block; color: var(--faint); font-size: 13px; }
.rank { color: var(--faint); }
.lock, .stage { color: var(--faint); font-size: 15px; }
.lock.on, .stage.on { color: var(--paper); }
.stage { color: var(--soft); }
.stage.on { font-weight: 600; }
.lock.on::before, .stage.on::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--blue); }
.act { text-align: right; }

/* ---- pages with a board on the right: group, coin, launch */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 60px; align-items: start; padding-top: 56px; padding-bottom: 40px; }
.split__side { position: sticky; top: 28px; padding: 14px 0; }
.solo { padding-top: 56px; }            /* a page that is one list, without a board */
.split .list { margin-bottom: 56px; }
.title { display: flex; align-items: center; gap: 22px; margin-bottom: 40px; }
.title h1 { font: 400 76px/.88 var(--display); margin-bottom: 10px; }
.title p { max-width: 60ch; color: var(--soft); }
.title a { text-decoration: underline; text-underline-offset: 4px; }
.title a:hover { color: var(--paper); }
.copy { margin-right: 12px; padding: 1px 8px; background: none; border: 1px solid var(--faint); color: var(--paper); cursor: pointer; }
.copy:hover { border-color: var(--paper); }

.chart { margin: 40px 0 0; }
.chart svg { display: block; width: 100%; height: auto; }
.chart text { fill: var(--soft); font: 500 13px var(--text); }
.chart text.w { fill: var(--faint); }
.chart .g { stroke: var(--line); }
.chart .area { fill: var(--blue); }
.chart .curve { fill: none; stroke: var(--paper); stroke-width: 2.5; }
.chart .spot { stroke: var(--soft); stroke-width: 1.5; stroke-dasharray: 6 6; }
.chart .mark { fill: var(--paper); }
.chart figcaption { max-width: 72ch; margin-top: 6px; color: var(--faint); font-size: 14px; }

/* what happens in order: a real sequence, so it is drawn as one */
.steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); border-top: 1px solid var(--line); }
.steps li { position: relative; padding: 16px 16px 0 0; }
.steps li::before { content: ''; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; background: var(--ink); border: 1px solid var(--faint); }
.steps li.done::before { background: var(--paper); border-color: var(--paper); }
.steps li.now::before { background: var(--blue); border-color: var(--blue); }
.steps b { display: block; font-weight: 600; }
.steps span { display: block; color: var(--soft); font-size: 14px; line-height: 1.45; }
.steps--plain { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; border-top: 0; }
.steps--plain li { padding: 14px 0 0; border-top: 1px solid var(--line); }
.steps--plain li::before { display: none; }

.dev { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); }
.dev p { max-width: 58ch; color: var(--soft); font-size: 15px; }

/* ---- fields */
.field { display: block; margin-bottom: 16px; }
.field > span:first-child { display: block; margin-bottom: 6px; color: var(--night-soft); font-size: 14px; font-weight: 600; }
.field__box { display: flex; align-items: center; height: 54px; padding: 0 14px; background: #fff; border: 2px solid var(--night); }
.field__box:focus-within { border-color: var(--blue); }
.field__box i { margin-right: 6px; font: 400 32px/1 var(--display); }
.field__box input { flex: 1; min-width: 0; padding: 0; background: none; border: 0; outline: 0; color: var(--night); font: 400 32px/1 var(--display); }
.field__box input::-webkit-outer-spin-button, .field__box input::-webkit-inner-spin-button { -webkit-appearance: none; }
.field--range b { float: right; font: 400 32px/.8 var(--display); color: var(--night); }
.field--range input { display: block; width: 100%; margin: 12px 0 4px; accent-color: var(--blue); }
.choose { display: grid; gap: 8px; margin-bottom: 18px; }
.choose label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.choose input { width: 18px; height: 18px; margin: 0; accent-color: var(--night); }
.choose b { font-weight: 600; margin-right: 6px; }
/* the launch form sits on black */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin-bottom: 44px; }
.form .field > span:first-child { color: var(--soft); }
.form .field__box { background: none; border: 1px solid var(--faint); }
.form .field__box:focus-within { border-color: var(--paper); }
.form .field__box input { color: var(--paper); font: 500 17px/1 var(--text); }
.form .field__box input::placeholder { color: var(--faint); }
.field__file { display: flex; align-items: center; gap: 14px; color: var(--soft); font-size: 15px; }
.field__file img { width: 54px; height: 54px; object-fit: cover; }
.field__file label { cursor: pointer; }
.field__file input { position: absolute; width: 1px; height: 1px; opacity: 0; }       /* the label is the button */
.field__file label:focus-within { outline: 2px solid var(--pink); outline-offset: 3px; }
.form__say { grid-column: 1 / -1; min-height: 24px; color: var(--red); font-weight: 600; }

/* ---- an empty page */
.empty { padding-top: 120px; padding-bottom: 160px; }
.empty h1 { font: 400 76px/.9 var(--display); margin-bottom: 14px; }
.empty p { max-width: 52ch; margin-bottom: 26px; color: var(--soft); }

/* ---- rules window and toast */
.dialog { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; overflow: auto; background: var(--paper); color: var(--night); }
.dialog::backdrop { background: rgba(0, 0, 0, .74); }
.dialog__in { padding: 28px 32px 34px; }
.dialog__top { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 4px; }
.dialog h2 { font: 400 46px/1 var(--display); }
.dialog h3 { margin: 14px 0 0; font-size: 16px; font-weight: 700; }
.dialog p { color: var(--night-soft); }
.dialog .link { color: var(--night-soft); }
.dialog .link:hover { color: var(--night); }
/* the Connect window (Google button, then the wallets this browser has) and the Account window */
.dialog--narrow { width: min(420px, calc(100vw - 32px)); }
.signin__google { display: flex; justify-content: center; min-height: 44px; margin: 16px 0 4px; }
.signin__or, .signin__none { margin: 14px 0 0; color: var(--night-soft); font-size: 14px; }
.signin__or { text-align: center; }
.signin__wallets { list-style: none; margin: 12px 0 0; padding: 0; }
.signin__wallets li { border-top: 1px solid var(--night-line); }
.signin__wallets button, .signin__wallets a { display: flex; align-items: center; gap: 14px; width: 100%; height: 62px; padding: 0 6px; background: none; border: 0; color: var(--night); text-align: left; cursor: pointer; }
.signin__wallets button:hover, .signin__wallets a:hover { background: rgba(11, 10, 24, .05); }
.signin__wallets img { width: 34px; height: 34px; border-radius: 8px; }
.signin__wallets b { flex: 1; font-weight: 600; }
.signin__wallets small { color: var(--night-soft); font-size: 14px; }
.acct__who { display: flex; align-items: center; gap: 14px; margin: 16px 0 22px; }
.acct__who img { width: 44px; height: 44px; border-radius: 8px; }
.acct__who b { display: block; }
.acct__who span { display: block; color: var(--night-soft); font-size: 14px; word-break: break-all; }
.acct__do { display: flex; gap: 12px; }

.toast { position: fixed; left: 50%; bottom: 28px; z-index: 10; padding: 12px 18px; background: var(--paper); color: var(--night); font-weight: 600; opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: opacity .15s, transform .15s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- narrow screens */
@media (max-width: 1000px) {
  .hero, .split { grid-template-columns: minmax(0, 1fr); gap: 52px; }
  .hero { padding-top: 48px; padding-bottom: 72px; }
  .split__side { position: static; }
  .board { max-width: 440px; margin: 0 14px; }
  .list { overflow-x: auto; }
  .list__head, .row { min-width: 760px; }
  .facts--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .top__in { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; gap: 8px 24px; }
  .nav { order: 3; width: 100%; }
  .nav a { padding: 10px 0; }
  .title { align-items: flex-start; }
  .title h1 { font-size: 56px; }
  .form, .steps--plain { grid-template-columns: minmax(0, 1fr); }
  .dev { flex-direction: column; align-items: flex-start; }
}