/* VC, the app. A dark trading surface like the launchpads people already use: an icon rail, a top bar, a live ticker,
   panels of rows. Monochrome, with the user's component set (Desktop/Kits/ui-kit) inverted for dark: white pills,
   fills that slide in, underlines that grow. Green is a join or a buy, red a kick or a sell; nothing else has colour.
   One easing everywhere. */
@font-face { font-family: Inter; src: url(/assets/fonts/inter.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }
@view-transition { navigation: auto; }
:root {
  --bg: #08090B;
  --panel: #101114;
  --panel-2: #16171B;
  --hover: #1B1C21;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --text: #F5F5F6;
  --dim: #9A9BA1;
  --faint: #5F6067;
  --green: #22C55E;
  --green-soft: rgba(34, 197, 94, 0.12);
  --red: #F04459;
  --red-soft: rgba(240, 68, 89, 0.12);
  --amber: #F59E0B;
  --amber-soft: rgba(245, 158, 11, 0.12);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --r: 14px;
  --rail: 72px;
}
* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body { margin: 0; visibility: visible; background: var(--bg); color: var(--text); font: 400 14px/1.5 Inter, system-ui, sans-serif; font-feature-settings: 'tnum' 1;
  -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { flex: none; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
[hidden] { display: none !important; }
.dim { color: var(--dim); }
.up { color: var(--green); }
.down { color: var(--red); }

/* ---------- buttons, from the kit ---------- */
/* Primary: a white pill that lifts with a soft glow (btn-glow, inverted). */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 20px; border: 0;
  border-radius: 980px; background: var(--text); color: #08090B; font-weight: 600; white-space: nowrap; overflow: hidden;
  transition: transform .2s, box-shadow .3s, opacity .2s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 0 24px rgba(255, 255, 255, 0.18); }
.btn svg { width: 16px; height: 16px; }
.btn.lg { height: 50px; padding: 0 28px; font-size: 15px; }
.btn.block { width: 100%; }
.btn.green { background: var(--green); color: #03140A; }
.btn.green:hover { box-shadow: 0 0 24px rgba(34, 197, 94, 0.3); }
.btn.red { background: var(--red); color: #fff; }
.btn.red:hover { box-shadow: 0 0 24px rgba(240, 68, 89, 0.3); }
.btn:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }
/* Secondary: an outline pill that fills white from the left on hover (btn-slide, inverted). */
.btn.slide { background: none; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line-2); transition: color .3s; }
.btn.slide > * { position: relative; z-index: 1; }
.btn.slide::before { content: ''; position: absolute; inset: 0; background: var(--text); border-radius: 980px; transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease); }
.btn.slide:hover { color: #08090B; transform: none; box-shadow: inset 0 0 0 1.5px var(--text); }
.btn.slide:hover::before { transform: scaleX(1); }
/* Busy: a spinner inside the button (btn-loading). */
.spinner { width: 15px; height: 15px; border: 2px solid rgba(8, 9, 11, 0.25); border-top-color: #08090B; border-radius: 50%; animation: spin .7s linear infinite; }
.btn.slide .spinner, .btn.red .spinner { border-color: rgba(255, 255, 255, 0.3); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }
/* A text link whose underline grows from the middle (btn-ghost). */
.ghost { position: relative; display: inline-flex; align-items: center; gap: 6px; color: var(--dim); font-weight: 500; background: none; border: 0; padding: 4px 0; }
.ghost::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--text); transform: scaleX(0); transition: transform .3s var(--ease); }
.ghost:hover { color: var(--text); }
.ghost:hover::after { transform: scaleX(1); }
.ghost svg { width: 15px; height: 15px; }

/* Badges (pill, from the kit). */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: 100px; font-size: 12px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.badge.live { background: var(--red-soft); color: var(--red); }
.badge.live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.badge.dev { background: var(--green-soft); color: var(--green); }
.badge.out { box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--dim); }
.badge.warn { background: var(--amber-soft); color: var(--amber); }
.badge.solid { background: var(--text); color: #08090B; }

/* Avatar stack with a "+N" (avatar-group). */
.stack { display: inline-flex; }
.stack i, .stack em { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--panel); margin-left: -7px; }
.stack i:first-child { margin-left: 0; }
.stack em { display: grid; place-items: center; background: var(--text); color: #08090B; font: 600 9px/1 Inter; font-style: normal; }

/* Underline tabs and the segmented control (from the kit). */
.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { position: relative; flex: none; white-space: nowrap; height: 44px; padding: 0 14px; border: 0; background: none; color: var(--faint); font-weight: 500; transition: color .2s; }
.tabs button::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--text); transform: scaleX(0); transition: transform .2s var(--ease); }
.tabs button:hover { color: var(--dim); }
.tabs button[aria-selected='true'] { color: var(--text); }
.tabs button[aria-selected='true']::after { transform: scaleX(1); }
.tabs button em { font-style: normal; color: var(--faint); margin-left: 6px; font-size: 12px; }
.segmented { display: inline-flex; padding: 4px; border-radius: 980px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.segmented button { height: 32px; padding: 0 16px; border: 0; border-radius: 980px; background: none; color: var(--dim); font-weight: 600; font-size: 13px; transition: all .2s; }
.segmented button[aria-pressed='true'] { background: var(--text); color: #08090B; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.segmented.buysell button[aria-pressed='true'].buy { background: var(--green); color: #03140A; }
.segmented.buysell button[aria-pressed='true'].sell { background: var(--red); color: #fff; }

/* Toggle (the mic). */
.toggle { width: 52px; height: 28px; border: 0; padding: 0; border-radius: 28px; background: var(--line-2); position: relative; transition: background .25s; }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  transition: transform .25s var(--ease); }
.toggle.on { background: var(--green); }
.toggle.on::after { transform: translateX(24px); }

/* Loading: shimmer lines where rows will be, so nothing pops in (skeleton), and three dots for waits. */
.skel { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #15161A 25%, #1E1F24 50%, #15161A 75%); background-size: 200% 100%;
  animation: shimmer 1.5s infinite; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.dots-load { display: inline-flex; gap: 5px; }
.dots-load i { width: 7px; height: 7px; border-radius: 50%; background: var(--text); animation: bounce .6s infinite alternate; }
.dots-load i:nth-child(2) { animation-delay: .15s; }
.dots-load i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { to { opacity: .15; transform: translateY(-6px); } }

/* ---------- the shell: a plain top bar with words, then the page ---------- */
.topnav { position: sticky; top: 0; z-index: 20; background: rgba(8, 9, 11, 0.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.topnav .bar { max-width: 1280px; margin: 0 auto; height: 64px; padding: 0 20px; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
.brand .logo { width: 34px; height: 34px; }
.topnav .links { display: flex; gap: 4px; }
.topnav .links a { padding: 8px 12px; border-radius: 980px; color: var(--dim); font-weight: 500; transition: color .2s, background .2s; }
.topnav .links a:hover { color: var(--text); }
.topnav .links a[aria-current] { color: var(--text); background: var(--panel-2); }
.topnav .right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topnav .xlink { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--dim); transition: color .15s, background .15s; }
.topnav .xlink:hover { color: var(--text); background: var(--panel-2); }
.topnav .search { width: 240px; }
.search { position: relative; }
.search > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--faint); }
.search input { width: 100%; height: 40px; padding: 0 46px 0 40px; border-radius: 980px; border: 0; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); outline: none; }
.search input:focus { box-shadow: inset 0 0 0 1.5px var(--line-2); }
.search kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 500 11px Inter; color: var(--faint); padding: 2px 7px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line-2); }
.search .results { position: absolute; top: 48px; left: 0; right: 0; max-height: 380px; overflow: auto; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 40px rgba(0, 0, 0, .5);
  border-radius: 14px; padding: 6px; }
.search .results a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; }
.search .results a:hover, .search .results a.on { background: var(--hover); }
.search .results img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; }
.search .results small { color: var(--dim); margin-left: auto; }
.search .results .none { padding: 10px; color: var(--dim); }
.wallet { min-width: 156px; }

.ticker { height: 42px; border-bottom: 1px solid var(--line); overflow: hidden; display: flex; align-items: center; }
.ticker .lane { display: flex; gap: 32px; align-items: center; padding: 0 max(20px, calc((100vw - 1280px) / 2 + 20px)); width: max-content; animation: tick 70s linear infinite; }
.ticker:hover .lane { animation-play-state: paused; }
.ticker .ev { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dim); white-space: nowrap; }
.ticker .ev img { width: 20px; height: 20px; border-radius: 6px; object-fit: cover; }
.ticker .ev b { color: var(--text); font-weight: 600; }
.ticker .ev .k { color: var(--red); font-weight: 600; }
.ticker .ev .j { color: var(--green); font-weight: 600; }
.ticker .idle { padding: 0; color: var(--faint); font-size: 13px; display: flex; gap: 10px; align-items: center; }
@keyframes tick { to { transform: translateX(-50%); } }

.page { max-width: 1280px; margin: 0 auto; padding: 20px; min-width: 0; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 14px; }
.crumbs a { color: var(--faint); transition: color .2s; }
.crumbs a:hover { color: var(--text); }
.crumbs .sep { color: var(--faint); font-size: 10px; }
.crumbs .current { color: var(--text); font-weight: 600; }

/* ---------- panels ---------- */
.panel { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--r); min-width: 0; }
.panel-head { display: flex; align-items: center; gap: 12px; padding: 0 16px; min-height: 52px; border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 0; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.panel-head .end { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ---------- board ---------- */
.board { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.board .col { display: grid; gap: 16px; min-width: 0; }
.board .side { display: grid; gap: 16px; position: sticky; top: 126px; }
.intro { display: flex; align-items: center; gap: 16px; padding: 16px 18px; }
.intro p { margin: 0; color: var(--dim); }
.intro p b { color: var(--text); font-weight: 600; }
.intro .end { margin-left: auto; display: flex; gap: 10px; white-space: nowrap; }

.rows { width: 100%; border-collapse: collapse; }
.rows th { text-align: left; font-weight: 500; font-size: 12px; color: var(--faint); padding: 10px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rows td { height: 64px; padding: 0 16px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.rows tr:last-child td { border-bottom: 0; }
.rows tbody tr.row { cursor: pointer; transition: background .12s; }
.rows tbody tr.row:hover { background: var(--hover); }
.rows .num { text-align: right; }
.coin { display: flex; align-items: center; gap: 12px; min-width: 0; }
.coin img, .coin .ph { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: var(--panel-2); flex: none; }
.coin b { display: block; font-weight: 600; }
.coin span { display: block; color: var(--dim); font-size: 12px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.inn { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.inn.zero { color: var(--faint); font-weight: 400; }
.curve { display: inline-flex; align-items: center; gap: 8px; color: var(--dim); font-size: 12px; }
.curve .bar { width: 64px; height: 4px; border-radius: 4px; background: var(--panel-2); overflow: hidden; }
.curve .bar i { display: block; height: 100%; background: var(--text); border-radius: 4px; }
.rows .join { height: 32px; padding: 0 14px; font-size: 13px; }
.empty-row td { height: auto; padding: 44px 16px; text-align: center; color: var(--dim); white-space: normal; }
.empty-row b { display: block; color: var(--text); font-size: 15px; margin-bottom: 4px; }
.empty-row .btn { margin-top: 14px; }

.stats { display: grid; grid-template-columns: 1fr 1fr; }
.stats > div { padding: 14px 16px; }
.stats > div:nth-child(odd) { border-right: 1px solid var(--line); }
.stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.stats b { display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.stats small { color: var(--dim); font-size: 12px; }

.feed { list-style: none; margin: 0; padding: 6px 0; max-height: 460px; overflow: auto; }
.feed li { display: flex; gap: 10px; padding: 9px 16px; font-size: 13px; color: var(--dim); }
.feed li img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; }
.feed li b { color: var(--text); font-weight: 600; }
.feed li time { display: block; color: var(--faint); font-size: 12px; }
.feed li .k { color: var(--red); font-weight: 600; }
.feed li .j { color: var(--green); font-weight: 600; }
.feed .none { color: var(--faint); padding: 18px 16px; }

/* ---------- the coin page: the room where pump.fun has its chart, the trade box on the right ---------- */
.coinpage { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.coinpage .col { display: grid; gap: 16px; min-width: 0; }
.coinpage .side { display: grid; gap: 16px; position: sticky; top: 126px; }
.coin-head { display: flex; align-items: center; gap: 14px; padding: 16px; flex-wrap: wrap; }
.coin-head > img, .coin-head > .ph { width: 54px; height: 54px; border-radius: 14px; object-fit: cover; background: var(--panel-2); }
.coin-head h1 { margin: 0; font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.coin-head .sub { display: flex; gap: 14px; align-items: center; color: var(--dim); font-size: 13px; margin-top: 3px; flex-wrap: wrap; }
.coin-head .sub button, .coin-head .sub a { background: none; border: 0; padding: 0; color: var(--dim); display: inline-flex; gap: 5px; align-items: center; transition: color .2s; }
.coin-head .sub button:hover, .coin-head .sub a:hover { color: var(--text); }
.coin-head .sub svg { width: 14px; height: 14px; }
.coin-head .figs { margin-left: auto; display: flex; gap: 28px; }
.coin-head .figs small { display: block; color: var(--faint); font-size: 12px; }
.coin-head .figs b { display: block; font-size: 17px; font-weight: 700; }

.stage .panel-head { padding: 0 8px 0 4px; }
.floor { position: relative; aspect-ratio: 2000 / 1400; background: #0D0E11; border-radius: 0 0 var(--r) var(--r); overflow: hidden; }
.floor canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.floor iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.floor .veil { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; background: radial-gradient(ellipse at center, rgba(8, 9, 11, .2), rgba(8, 9, 11, .65)); }
.floor .veil span { padding: 10px 18px; border-radius: 980px; background: rgba(16, 17, 20, .92); box-shadow: inset 0 0 0 1px var(--line-2); font-weight: 500; }
.micbar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 18px;
  background: rgba(16, 17, 20, .95); box-shadow: inset 0 0 0 1px var(--line-2); white-space: nowrap; }
.vbtn { width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--panel-2); color: var(--text); display: grid; place-items: center; transition: background .15s, color .15s; }
.vbtn:hover { background: var(--hover); }
.vbtn svg .slash { display: none; }
.vbtn.off { background: var(--red-soft); color: var(--red); }
.vbtn.off svg .slash { display: inline; }
.vbtn[aria-expanded='true'] { background: var(--text); color: #08090B; }
.micbar .reach { display: grid; padding: 0 8px; font-size: 12px; color: var(--dim); line-height: 1.3; }
.micbar .reach > b { color: var(--text); font-size: 13px; }
.micbar .reach span b { color: var(--text); font-weight: 600; }
.micbar .btn { height: 44px; padding: 0 16px; font-size: 13px; }
.vsettings { position: absolute; right: 0; bottom: 56px; width: 300px; padding: 16px; display: grid; gap: 12px; border-radius: 16px; background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 50px rgba(0, 0, 0, .6); white-space: normal; animation: drop .2s var(--ease); }
.vsettings select { width: 100%; height: 38px; padding: 0 10px; border-radius: 10px; border: 0; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); }
.vsettings .meter .track { height: 4px; }
.vsettings .meter .track i { background: var(--green); transition: width .1s linear; }
.ptt-row { display: flex; align-items: center; gap: 12px; }
.ptt-row b { display: block; font-size: 13px; }
.ptt-row small { color: var(--faint); font-size: 12px; }
.reconnecting { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 980px;
  background: var(--amber-soft); color: var(--amber); font-size: 13px; font-weight: 600; }
.reconnecting .dots-load i { background: var(--amber); }
input[type='range'] { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 4px; background: var(--line-2); outline: none; cursor: pointer; }
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--text); }
input[type='range']::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--text); }
.vsettings input[type='range'] { width: 100%; }

.box { padding: 16px; display: grid; gap: 12px; }
.box h3 { margin: 0; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.box p { margin: 0; color: var(--dim); font-size: 13px; }
.box .out { color: var(--red); }
.amount { display: flex; align-items: center; height: 50px; padding: 0 16px; border-radius: 14px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.amount:focus-within { box-shadow: inset 0 0 0 1.5px var(--line-2); }
.amount input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 18px; font-weight: 600; }
.amount span { color: var(--dim); font-weight: 500; }
.presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.presets button { height: 32px; border-radius: 980px; border: 0; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--dim); font-size: 13px; font-weight: 500; transition: color .2s, box-shadow .2s; }
.presets button:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.note { margin: 0; font-size: 12px; color: var(--faint); }
.note.warn { color: var(--red); }
.meter .track { height: 6px; border-radius: 6px; background: var(--panel-2); overflow: hidden; }
.meter .track i { display: block; height: 100%; background: var(--text); border-radius: 6px; transition: width .6s var(--ease); }
.meter .legend { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--dim); }
.meter .legend b { color: var(--text); }
.alert { padding: 10px 14px; border-radius: 12px; font-size: 13px; background: var(--panel-2); }
.alert.err { background: var(--red-soft); color: #FFB3BD; }
.alert.ok { background: var(--green-soft); color: var(--green); }

.facts { padding: 6px 16px; margin: 0; }
.facts div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.facts div:last-child { border-bottom: 0; }
.facts dt { color: var(--dim); }
.facts dd { margin: 0; text-align: right; }
.facts dd a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.about { padding: 14px 16px; color: var(--dim); font-size: 13px; white-space: pre-wrap; margin: 0; }

.people { list-style: none; margin: 0; padding: 6px 0; }
.people li { display: flex; align-items: center; gap: 12px; padding: 9px 16px; font-size: 13px; }
.people li i { width: 12px; height: 12px; border-radius: 50%; }
.people li .who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.people li .who small { color: var(--faint); }
.people li .st { display: inline-flex; gap: 4px; color: var(--red); }
.people .mine { display: inline-flex; align-items: center; gap: 8px; }
.people .mine input { width: 84px; }
.people li button.one { width: 26px; padding: 0; display: grid; place-items: center; }
.people li button.one[aria-pressed='true'] { color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.people li.talking { background: rgba(255, 255, 255, .05); }
.people li button { height: 26px; padding: 0 10px; border-radius: 980px; border: 0; box-shadow: inset 0 0 0 1px var(--line); background: none; color: var(--dim); font-size: 12px; }
.people li button:hover { color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.people .none { color: var(--faint); padding: 18px 16px; }

/* ---------- launch ---------- */
.launch { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; max-width: 1120px; margin: 0 auto; }
.launch-head { grid-column: 1 / -1; }
.launch h1 { margin: 0 0 4px; font-size: 22px; font-weight: 700; }
.launch .lede { margin: 0; color: var(--dim); max-width: 64ch; }
.form { padding: 18px; display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field > span { display: flex; justify-content: space-between; color: var(--dim); font-size: 13px; font-weight: 500; }
.field > span em { font-style: normal; color: var(--faint); font-weight: 400; }
.input { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.input:focus-within { box-shadow: inset 0 0 0 1.5px var(--line-2); }
.input input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; }
.input .pre { color: var(--faint); }
textarea { width: 100%; min-height: 96px; padding: 12px 14px; border-radius: 12px; border: 0; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); resize: vertical; outline: none; }
textarea:focus { box-shadow: inset 0 0 0 1.5px var(--line-2); }
.identity { display: grid; grid-template-columns: 180px 1fr; gap: 16px; }
/* Name on top, Ticker at the bottom: both line up with the picture box beside them. */
.identity-fields { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.drop { display: grid; place-items: center; align-content: center; gap: 4px; aspect-ratio: 1; padding: 16px; border: 2px dashed var(--line-2); border-radius: 14px; text-align: center;
  cursor: pointer; overflow: hidden; transition: border-color .2s, background .2s; }
.drop:hover, .drop.over { border-color: var(--dim); background: var(--panel-2); }
.drop .icon { font-size: 26px; opacity: .45; line-height: 1; }
.drop .text { font-weight: 500; }
.drop .hint { font-size: 12px; color: var(--faint); }
.drop .hint u { color: var(--text); font-weight: 600; text-underline-offset: 2px; }
.drop.has { padding: 0; border-style: solid; }
.drop.has img { width: 100%; height: 100%; object-fit: cover; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.summary { padding: 18px; display: grid; gap: 16px; position: sticky; top: 126px; }
.summary .preview { display: flex; gap: 12px; align-items: center; }
.summary .pv-pic { width: 52px; height: 52px; border-radius: 12px; background: var(--panel-2) center / cover; flex: none; }
.summary .preview b { display: block; font-size: 16px; }
.summary .preview span { color: var(--dim); font-size: 13px; }
.cost { margin: 0; }
.cost div { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.cost dt { color: var(--dim); }
.cost dd { margin: 0; }
.cost .total { border-bottom: 0; font-weight: 600; }
.gate { padding: 10px 14px; border-radius: 12px; background: var(--amber-soft); color: var(--amber); font-size: 13px; }
.fine { margin: 0; color: var(--faint); font-size: 12px; }

/* Stepper: the transactions a launch signs (from the kit), three equal columns, each label under its number. */
.stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.stepper .step { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; }
.stepper .step + .step::before { content: ''; position: absolute; top: 14px; right: calc(50% + 21px); width: calc(100% - 42px); height: 2px; background: var(--line-2); }
.stepper .circle { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-2); display: grid; place-items: center; font-size: 12px; font-weight: 600;
  color: var(--faint); transition: all .2s; }
.stepper .name { font-size: 12px; color: var(--faint); }
.stepper .step.done .circle { background: var(--text); color: #08090B; box-shadow: none; }
.stepper .step.done + .step::before { background: var(--text); }
.stepper .step.now .circle { box-shadow: inset 0 0 0 2px var(--text); color: var(--text); }
.stepper .step.now .name, .stepper .step.done .name { color: var(--text); }
.stepper .step.bad .circle { box-shadow: inset 0 0 0 2px var(--red); color: var(--red); }

/* ---------- how it works ---------- */
.doc { max-width: 760px; margin: 0 auto; }
.doc h1 { font-size: 26px; margin: 0 0 6px; }
.doc .lede { color: var(--dim); margin: 0 0 18px; font-size: 15px; max-width: 60ch; }
.acc { display: grid; gap: 8px; }
.acc-item { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); border-radius: 14px; overflow: hidden; }
.acc-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border: 0; background: none; font-size: 15px; font-weight: 500;
  text-align: left; transition: background .15s; }
.acc-toggle:hover { background: var(--hover); }
.acc-toggle svg { width: 16px; height: 16px; color: var(--faint); transition: transform .2s var(--ease); }
.acc-item.open .acc-toggle svg { transform: rotate(180deg); }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.acc-item.open .acc-body { grid-template-rows: 1fr; }
.acc-body > div { overflow: hidden; }
.acc-body p { margin: 0; padding: 0 20px 18px; color: var(--dim); line-height: 1.65; }

.docs { display: grid; grid-template-columns: 180px minmax(0, 680px); gap: 64px; justify-content: center; padding: 24px 0 80px; }
.toc { position: sticky; top: 88px; align-self: start; display: grid; gap: 2px; }
.toc a { padding: 7px 12px; border-radius: 10px; color: var(--dim); font-weight: 500; transition: color .15s, background .15s; }
.toc a:hover { color: var(--text); }
.toc a[aria-current] { color: var(--text); background: var(--panel-2); }
.docs section { scroll-margin-top: 88px; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--line); }
.docs section:last-child { border: 0; }
.docs h1 { font-size: 36px; line-height: 1.1; letter-spacing: -.025em; margin: 0 0 12px; }
.docs .lede { font-size: 17px; color: var(--dim); line-height: 1.6; margin: 0 0 20px; }
.docs h2 { font-size: 24px; letter-spacing: -.015em; margin: 0 0 12px; }
.docs h3 { font-size: 16px; margin: 28px 0 8px; }
.docs p, .docs li { color: var(--dim); font-size: 15px; line-height: 1.7; }
.docs p { margin: 0 0 12px; }
.docs b { color: var(--text); font-weight: 600; }
.docs a:not(.toc a) { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.docs ul, .docs ol { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 8px; }
.docs ol.steps { list-style: none; padding: 0; counter-reset: s; }
.docs ol.steps li { counter-increment: s; position: relative; padding-left: 40px; min-height: 26px; }
.docs ol.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); display: grid; place-items: center;
  font-size: 12px; font-weight: 600; color: var(--text); }
.docs table { width: 100%; border-collapse: collapse; margin: 4px 0 16px; font-size: 14px; }
.docs th { text-align: left; font-weight: 500; color: var(--faint); padding: 0 0 10px; border-bottom: 1px solid var(--line-2); }
.docs td { padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--text); }
.docs th + th, .docs td + td { padding-left: 16px; }
.docs kbd { display: inline-block; min-width: 22px; padding: 1px 7px; border-radius: 6px; font: 500 12px/1.6 Inter, sans-serif; color: var(--text); text-align: center;
  background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 -1px 0 var(--line-2); }
.docs code.addr { display: inline-block; margin-top: 4px; padding: 4px 8px; border-radius: 8px; background: var(--panel-2); color: var(--text); font: 500 13px Inter, sans-serif;
  word-break: break-all; cursor: copy; }
.docs .acc { margin-top: 8px; }
.docs code { padding: 1px 6px; border-radius: 6px; background: var(--panel-2); color: var(--text); font: 500 13px/1.6 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
.docs pre { margin: 0 0 16px; padding: 16px 18px; border-radius: 12px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); overflow-x: auto; }
.docs pre code { padding: 0; background: none; font-size: 12.5px; line-height: 1.7; color: var(--dim); white-space: pre; }
.endpoint { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 32px 0 10px; }
.endpoint .method { padding: 2px 8px; border-radius: 6px; background: var(--green-soft); color: var(--green); font-size: 12px; font-weight: 700; }
.endpoint code { font-size: 14px; background: none; padding: 0; word-break: break-all; }
.docs .acc-body p { padding: 0 20px 18px; margin: 0; }

.toast { position: fixed; z-index: 50; top: 76px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px); display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: 980px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-2), 0 12px 30px rgba(0, 0, 0, .5); font-weight: 500;
  animation: drop .3s var(--ease); }
.toast::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.toast.kick::before, .toast.err::before { background: var(--red); }
.toast.ok::before { background: var(--green); }
@keyframes drop { from { opacity: 0; transform: translate(-50%, -6px); } }

/* ---------- phones: the rail becomes a tab bar ---------- */
.tabbar { display: none; }
@media (max-width: 1200px) {
  .board, .coinpage { grid-template-columns: minmax(0, 1fr) 300px; }
  .hide-md { display: none; }
}
@media (max-width: 900px) {
  .docs { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 8px; }
  .toc { display: none; }
  .topnav .bar { padding: 0 12px; gap: 12px; }
  .topnav .links { display: none; }
  .brand span { display: none; }
  .topnav .right { flex: 1; }
  .topnav .xlink { display: none; }
  .topnav .search { flex: 1; width: auto; }
  .search kbd { display: none; }
  .page { padding: 12px 12px 88px; }
  .board, .coinpage, .launch { grid-template-columns: minmax(0, 1fr); }
  .board .side, .coinpage .side, .summary { position: static; }
  .intro { flex-wrap: wrap; }
  .intro .end { margin-left: 0; }
  .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: 66px;
    padding-bottom: env(safe-area-inset-bottom); background: rgba(8, 9, 11, .96); border-top: 1px solid var(--line); }
  .tabbar a { display: grid; place-items: center; align-content: center; gap: 3px; color: var(--faint); font-size: 11px; font-weight: 500; }
  .tabbar a svg { width: 21px; height: 21px; }
  .tabbar a[aria-current] { color: var(--text); }
  .coin-head .figs { margin-left: 0; width: 100%; justify-content: space-between; gap: 12px; }
  .wallet { min-width: 0; }
}
@media (max-width: 640px) {
  .hide-sm { display: none; }
  .loud { gap: 8px; padding: 10px; }
  .loud .cap small { display: none; }
  .rows td, .rows th { padding-left: 12px; padding-right: 12px; }
  .coin span { max-width: 110px; }
  .identity { grid-template-columns: 1fr; }
  .drop { aspect-ratio: auto; height: 150px; }
  .two-col { grid-template-columns: 1fr; }
  .micbar .reach { display: none; }
  .vsettings { width: min(300px, calc(100vw - 32px)); right: -40px; }
  .people .mine input { width: 60px; }
}
@media (prefers-reduced-motion: reduce) { .ticker .lane { animation: none; } *, *::before, *::after { transition: none !important; } }

/* ---------- home: one sentence, then what it looks like ---------- */
.lead { text-align: center; padding: clamp(48px, 9vw, 104px) 0 clamp(32px, 5vw, 48px); }
.lead h1 { margin: 0 auto; max-width: 15ch; font-size: clamp(40px, 6.2vw, 76px); font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
.lead p { margin: 20px auto 0; max-width: 40ch; color: var(--dim); font-size: clamp(17px, 1.6vw, 20px); }
.lead .cta { margin-top: 32px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.call { max-width: 880px; margin: 0 auto; border-radius: 18px; overflow: hidden; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 80px rgba(0, 0, 0, .55); }
.call-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.call-coin { width: 38px; height: 38px; flex: none; }
.call-head b { display: block; font-weight: 600; }
.call-head small { display: block; color: var(--dim); font-size: 12px; }
.call-head .end { margin-left: auto; display: flex; gap: 6px; }
.call-floor { position: relative; aspect-ratio: 16 / 7; background: #0D0E11; }
.call-floor canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.call-toast { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; padding: 8px 14px; border-radius: 980px;
  background: rgba(22, 23, 27, .95); box-shadow: inset 0 0 0 1px rgba(240, 68, 89, .5); font-size: 13px; color: var(--dim); white-space: nowrap; animation: drop .3s var(--ease); }
.call-toast i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-right: 8px; }
.call-toast b { color: var(--text); }
.call-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 13px; }
.call-bar .mic-on { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.call-bar .btn { margin-left: auto; height: 34px; padding: 0 16px; font-size: 13px; pointer-events: none; }

.three { max-width: 880px; margin: 0 auto; padding: clamp(40px, 6vw, 64px) 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; text-align: center; }
.three .n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); font-weight: 600; font-size: 13px; }
.three h2 { margin: 14px 0 6px; font-size: 17px; font-weight: 600; }
.three p { margin: 0; color: var(--dim); font-size: 14px; }

.open-rooms { max-width: 1080px; margin: 0 auto; }

@media (max-width: 640px) {
  .three { grid-template-columns: 1fr; gap: 22px; }
  .call-floor { aspect-ratio: 4 / 3; }
  .call-head .badge.dev { display: none; }
  .call-bar .dim { display: none; }
}