/* ClaudeCats: a cat café after dark. Warm cream-grey room; the cats sit on a window sill, the
   numbers sit on round coasters, the scanner is the menu board, open trades are order tickets and
   closed ones print as receipts. Fredoka for titles, Nunito for sentences, VT323 for anything the
   desk reads off a screen. Colour has jobs: green = gains, red = losses, amber = warnings,
   blue = buys and info, butter = money in. */
:root {
  --bg: #2a2724;          /* the room */
  --bg-2: #34302c;        /* cards */
  --bg-3: #3e3a35;        /* raised, hover */
  --well: #24211e;        /* insets inside cards */
  --board: #1f2422;       /* the chalkboard */
  --line: #48433d;
  --line-soft: rgba(239, 230, 216, 0.07);
  --cream: #efe6d8;
  --cream-2: #cbbfae;
  --cream-3: #9b9083;
  --paper: #f4ecdf;       /* receipts */
  --paper-ink: #2c2622;
  --peach: #ffb08f;       /* the brand accent */
  --peach-lo: #e98f6c;
  --lilac: #c4b3ff;
  --butter: #ffe08a;
  --gain: #8fe6a2;
  --loss: #ff9090;
  --warn: #ffc97a;
  --info: #93d6ff;
  --pixel: 'VT323', ui-monospace, Menlo, Consolas, monospace;
  --sans: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --round: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.75), 0 2px 6px rgba(0, 0, 0, 0.18);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  /* a few faint paw prints wandering across the room */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='%23efe6d8' fill-opacity='0.035'%3E%3Cg transform='translate(34 40) rotate(-18)'%3E%3Cellipse cx='0' cy='7' rx='8' ry='6.5'/%3E%3Ccircle cx='-9' cy='-4' r='3.2'/%3E%3Ccircle cx='-3.5' cy='-10' r='3.2'/%3E%3Ccircle cx='3.5' cy='-10' r='3.2'/%3E%3Ccircle cx='9' cy='-4' r='3.2'/%3E%3C/g%3E%3Cg transform='translate(116 112) rotate(16)'%3E%3Cellipse cx='0' cy='7' rx='8' ry='6.5'/%3E%3Ccircle cx='-9' cy='-4' r='3.2'/%3E%3Ccircle cx='-3.5' cy='-10' r='3.2'/%3E%3Ccircle cx='3.5' cy='-10' r='3.2'/%3E%3Ccircle cx='9' cy='-4' r='3.2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0 / 160px 160px,
    radial-gradient(1100px 520px at 50% -8%, rgba(255, 176, 143, 0.09), transparent 70%),
    var(--bg);
  color: var(--cream);
  font: 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.hidden { display: none !important; }
.gain, .up { color: var(--gain); }
.loss, .down { color: var(--loss); }
.warn { color: var(--warn); }
.dim { color: var(--cream-2); }

/* ─────────────────────────────────────── header */
.top {
  display: flex; align-items: center; gap: 26px; padding: 12px 28px;
  position: sticky; top: 0; z-index: 10;
  background: rgba(42, 39, 36, 0.86); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-word { font: 600 23px/1 var(--round); letter-spacing: -0.01em; }
.brand-mark {
  font: 21px/1 var(--pixel); color: #2a1a12; background: var(--peach); padding: 5px 10px 6px; border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 4px 12px -6px rgba(255, 176, 143, 0.6);
}
.top nav { display: flex; gap: 6px; margin-right: auto; font: 500 15px/1 var(--round); }
.top nav a { text-decoration: none; color: var(--cream-3); white-space: nowrap; padding: 8px 13px; border-radius: 999px; }
.top nav a:hover { color: var(--cream); }
.top nav a.active { color: var(--cream); background: var(--bg-2); }
.mode, .paper-tag {
  font: 600 12px/1 var(--round); letter-spacing: .08em; padding: 7px 12px; border-radius: 999px;
  background: var(--bg-3); color: var(--butter); text-transform: uppercase;
}
.mode.live, .paper-tag.live { color: #2a1414; background: var(--loss); }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 28px; }

/* ─────────────────────────────────────── the café window: centred */
.hero { text-align: center; padding: 42px 28px 8px; }
.kicker {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 7px 14px; border-radius: 999px;
  background: var(--bg-2); color: var(--cream-2); font: 600 12px/1 var(--round); letter-spacing: .1em; text-transform: uppercase;
}
.kicker .led { width: 8px; height: 8px; border-radius: 50%; background: var(--gain); box-shadow: 0 0 10px var(--gain); }
.hero h1 { font: 600 clamp(48px, 6.4vw, 84px)/0.95 var(--round); margin: 0 0 12px; letter-spacing: -0.025em; }
.hero h1 em { font-style: normal; color: var(--peach); }
.explain { font-size: 19px; line-height: 1.45; color: var(--cream-2); margin: 0 auto; max-width: 40ch; }

/* the cats sit on a sill */
.sill-wrap { position: relative; max-width: 1080px; margin: 0 auto; }
.shelf { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; padding: 84px 10px 0; position: relative; z-index: 1; }
.sill {
  /* runs right under the sprites (shelf padding + six text lines of art) */
  position: absolute; left: 0; right: 0; top: calc(84px + 6.1 * 1.04 * var(--cat-size, 17px) + 2px); z-index: 0;
  height: 18px; border-radius: 999px;
  background: linear-gradient(180deg, #5a4d42, #42382f); box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.09);
}
.cat { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding-bottom: 6px; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.cat.talking { transform: translateY(-6px); }
.cat { cursor: pointer; border-radius: 18px; outline: none; }
.cat:hover .cat-name b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cat:focus-visible { box-shadow: 0 0 0 2px var(--peach); }
.buddy { position: relative; height: 6.1lh; display: flex; justify-content: center; align-items: flex-end; font: var(--cat-size, 17px)/1.04 var(--pixel); }
.buddy-sprite { margin: 0 0 0 1ch; font: inherit; line-height: inherit; white-space: pre; transition: transform .12s steps(2); text-shadow: 0 0 8px currentColor; }
.buddy-fx { position: absolute; inset: 0.4lh 0 0 50%; transform: translateX(-7.5ch); width: 16ch; pointer-events: none; }
.buddy-fx span { position: absolute; white-space: pre; text-shadow: 0 0 6px currentColor; }
.cat-name { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 30px; }
.cat-name b { font: 600 16px/1 var(--round); }
.role {
  font: 700 10px/1 var(--round); padding: 4px 8px; border-radius: 999px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c, var(--cream)); background: color-mix(in srgb, var(--c, var(--cream)) 16%, transparent);
}
.pc-stat { margin-top: 5px; color: var(--cream-3); font: 16px/1 var(--pixel); }
.pc-stat b { font-weight: 400; color: var(--cream-2); }
/* what the cat just said, as a bubble while it talks */
.say {
  position: absolute; bottom: calc(100% - 2px); left: 50%; z-index: 3; width: max-content; max-width: min(240px, 46vw);
  margin: 0; padding: 9px 13px; border-radius: 16px;
  background: var(--cream); color: #2a2522; font: 600 13px/1.35 var(--sans); text-align: left;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.7);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  opacity: 0; transform: translate(-50%, 6px) scale(.96); transform-origin: 50% 100%; pointer-events: none;
  transition: opacity .25s ease, transform .3s cubic-bezier(.3, 1.4, .5, 1);
}
.cat.talking .say { opacity: 1; transform: translate(-50%, 0) scale(1); }
/* the cats at either end of the sill keep their bubble on the page */
.cat:nth-child(6n+1) .say { left: 0; transform: translateY(6px) scale(.96); transform-origin: 15% 100%; }
.cat:nth-child(6n) .say { left: auto; right: 0; transform: translateY(6px) scale(.96); transform-origin: 85% 100%; }
.cat:nth-child(6n+1).talking .say, .cat:nth-child(6n).talking .say { transform: none; }

/* the numbers, on coasters */
.coasters { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 16px; margin: 40px auto 10px; }
.coaster {
  width: 146px; height: 146px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: radial-gradient(circle at 50% 35%, var(--bg-3), var(--bg-2) 70%);
  box-shadow: var(--shadow), inset 0 0 0 6px var(--bg), inset 0 0 0 7px var(--line);
}
.coaster > span { font: 600 11px/1 var(--round); letter-spacing: .08em; text-transform: uppercase; color: var(--cream-3); }
.coaster b { font: 400 32px/1 var(--pixel); color: var(--cream); margin: 4px 0 2px; }
.coaster em { font: 15px/1 var(--pixel); font-style: normal; color: var(--cream-3); max-width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coaster.big { width: 196px; height: 196px; background: radial-gradient(circle at 50% 35%, #4a3f37, #3a322c 70%); box-shadow: var(--shadow), inset 0 0 0 7px var(--bg), inset 0 0 0 9px var(--peach-lo); }
.coaster.big b { font-size: 48px; text-shadow: 0 0 16px color-mix(in srgb, currentColor 35%, transparent); }
.coaster.big .paper-tag { margin-top: 6px; font-size: 9px; padding: 4px 8px; }
.chip { font-size: 18px; padding: 1px 8px 2px; border-radius: 999px; color: #1f1b18; background: var(--cream-3); }
.chip.up { background: var(--gain); }
.chip.down { background: var(--loss); }
.paused { margin: 10px auto 0; display: inline-block; padding: 7px 14px; border-radius: 999px; background: rgba(255, 201, 122, 0.12); color: var(--warn); font: 600 13px/1.2 var(--round); }
/* the coin: "coming soon" until it launches, then its address and a buy link */
.token-spot {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin: 14px auto 0; padding: 7px 8px 7px 16px; border-radius: 999px;
  background: var(--bg-2); border: 1px dashed color-mix(in srgb, var(--peach) 45%, transparent);
}
.token-spot.live { border-style: solid; border-color: color-mix(in srgb, var(--peach) 35%, transparent); }
.ts-sym { font: 600 17px/1 var(--round); color: var(--peach); }
.ts-soon { font: 600 13px/1 var(--round); color: var(--cream-2); padding: 7px 12px; border-radius: 999px; background: var(--well); }
.ts-live { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ts-live code { font: 19px/1 var(--pixel); color: var(--cream); }
.ts-live button, .ts-buy {
  font: 600 13px/1 var(--round); border: 0; border-radius: 999px; padding: 8px 13px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.ts-live button { color: var(--cream); background: var(--bg-3); }
.ts-live button:hover { background: var(--line); }
.ts-buy { color: #2a1a12; background: var(--peach); }
.ts-buy:hover { background: #ffc2a8; }
.ts-live button:focus-visible, .ts-buy:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.ts-note { margin: 8px 0 0; color: var(--cream-3); font-size: 13px; }

/* ─────────────────────────────────────── the board: main column + a sidebar */
.board { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; padding-top: 34px; padding-bottom: 40px; }
.board-main { display: grid; gap: 22px; min-width: 0; }
.board-side { display: grid; gap: 22px; position: sticky; top: 76px; min-width: 0; }
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; align-items: start; }

.card {
  background: var(--bg-2); color: var(--cream); border: 1px solid var(--line-soft); border-radius: 26px; min-width: 0;
  font: 20px/1.15 var(--pixel); display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow);
}
.card-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 18px 12px;
  color: var(--cream-2); font: 600 14px/1 var(--round); letter-spacing: .02em;
}
.card-head .title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cream); }
.card-head .count { color: var(--cream-3); font-weight: 500; }
.live-led { color: var(--gain); }
/* little segmented switches */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--well); }
.seg button { font: 600 12px/1 var(--round); color: var(--cream-3); background: none; border: 0; padding: 6px 11px; border-radius: 999px; cursor: pointer; }
.seg button:hover { color: var(--cream); }
.seg button.active { background: var(--cream); color: #1f1b18; }
.seg button:focus-visible { outline: 2px solid var(--peach); outline-offset: 2px; }

/* the window onto the chart */
.chart-tools { display: flex; align-items: center; gap: 12px; flex: none; white-space: nowrap; }
.monitor-open { color: var(--cream-2); text-decoration: none; }
.monitor-open:hover { color: var(--peach); }
.monitor-status { display: flex; align-items: center; gap: 8px; padding: 0 18px 12px; font-size: 21px; color: var(--cream-2); }
.monitor-status b { font-weight: 400; color: var(--cream); }
.mode-chip { margin-left: auto; font: 700 10px/1 var(--round); letter-spacing: .08em; padding: 5px 9px; border-radius: 999px; text-transform: uppercase; color: #1f1b18; }
.mode-chip.scouting { background: var(--lilac); }
.mode-chip.buying { background: var(--info); }
.mode-chip.holding { background: var(--butter); }
.mode-chip.selling { background: var(--cream); }
.mode-chip.peek { background: var(--cream-3); }
/* the chart, edge to edge: nothing framing or covering it */
.window { border-radius: 18px; }
.monitor-screen { position: relative; min-height: 480px; background: var(--well); }
.monitor-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .5s ease; }
.monitor-screen iframe.on { opacity: 1; }
.coin-card {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 10px; text-align: center; padding: 20px;
  background: var(--well); transition: opacity .5s ease; z-index: 1;
}
.coin-card.gone { opacity: 0; pointer-events: none; }
.coin-card .sym { font-size: 52px; line-height: 1; }
.coin-card .px { font-size: 30px; color: var(--cream-2); }
.coin-card .facts { font-size: 20px; color: var(--cream-3); }
.coin-card .skel { display: flex; gap: 6px; align-items: flex-end; justify-content: center; height: 54px; margin-top: 6px; }
.coin-card .skel i { width: 10px; background: var(--bg-3); border-radius: 3px; animation: skel 1.4s ease-in-out infinite; }
@keyframes skel { 50% { background: var(--line); } }

/* fund over time */
.fund-plot { position: relative; }
.fundline .chart { width: 100%; height: 120px; display: block; padding: 0 12px 14px; }
.chart-empty {
  position: absolute; inset: 0 12px 14px; margin: 0; display: grid; place-items: center; text-align: center;
  border: 1px dashed var(--line); border-radius: 14px; color: var(--cream-3); font: 14px/1.4 var(--sans);
}

/* the menu board (scanner) */
.menu {
  min-width: 0; padding: 18px 16px 14px; border-radius: 22px; color: #e8efe9;
  background:
    radial-gradient(120% 80% at 30% 0%, rgba(255, 255, 255, 0.05), transparent 60%),
    var(--board);
  box-shadow: var(--shadow), inset 0 0 0 8px #3b2f26, inset 0 0 0 10px #2a211b;
  font: 20px/1.15 var(--pixel);
}
.menu-head { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 10px 10px; }
.menu-head span { font: 600 22px/1 var(--round); letter-spacing: .01em; }
.menu-head small { font: 13px/1 var(--sans); color: #9fb0a6; }
.screen-list { list-style: none; margin: 0; padding: 0 4px; display: grid; gap: 2px; overflow-y: auto; max-height: 470px; }
.screen-list li {
  display: grid; grid-template-columns: 26px auto minmax(12px, 1fr) auto; gap: 2px 8px; align-items: center;
  padding: 7px 8px; border-radius: 12px; cursor: pointer;
}
.screen-list li:hover { background: rgba(255, 255, 255, 0.05); }
.screen-list li.on-screen { background: rgba(255, 176, 143, 0.12); }
.screen-list img, .screen-list .ph { width: 26px; height: 26px; border-radius: 50%; background: #2c3330; object-fit: cover; grid-row: span 2; }
.screen-list .m-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.screen-list .sym { font-size: 23px; }
.screen-list .dots { height: 0; border-bottom: 2px dotted rgba(232, 239, 233, 0.25); align-self: center; margin-top: 6px; }
.screen-list .sub { color: #9fb0a6; font-size: 17px; grid-column: 2 / 5; }
.screen-list li.empty { display: block; color: #9fb0a6; cursor: default; }
.verdict { font: 700 10px/1 var(--round); letter-spacing: .06em; padding: 5px 8px; border-radius: 999px; text-transform: uppercase; white-space: nowrap; justify-self: end; }
.verdict.pass { background: var(--gain); color: #1f1b18; }
.verdict.warn { color: var(--warn); background: rgba(255, 201, 122, 0.12); }
.verdict.neutral { color: #9fb0a6; background: rgba(255, 255, 255, 0.06); }

/* open positions: order tickets with a perforated edge */
.tickets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 4px 16px 16px; }
.ticket {
  position: relative; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 12px 20px; text-decoration: none;
  background: var(--well); border-radius: 12px;
  /* punched holes down the left edge */
  -webkit-mask: radial-gradient(circle 4px at 0 12px, transparent 98%, #000) 0 0 / 100% 16px repeat-y;
          mask: radial-gradient(circle 4px at 0 12px, transparent 98%, #000) 0 0 / 100% 16px repeat-y;
}
.ticket:hover { background: var(--bg-3); }
.ticket .t-sym { font-size: 22px; color: var(--cream); }
.ticket b { font-weight: 400; font-size: 30px; line-height: 1; margin-bottom: 4px; }
.t-row { display: flex; justify-content: space-between; gap: 8px; font-size: 17px; color: var(--cream-2); }
.t-row span { color: var(--cream-3); }
.empty { color: var(--cream-3); margin: 6px 0; font: 14px/1.4 var(--sans); }
.tickets .empty, .receipts .empty { grid-column: 1 / -1; }

/* closed trades: printed receipts with a torn edge */
.receipts { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 16px; padding: 4px 18px 22px; }
.receipt {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 20px; color: var(--paper-ink);
  background: var(--paper); border-radius: 6px 6px 0 0; font: 18px/1.2 var(--pixel);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 8px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 8px repeat-x;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.35));
}
.receipt header { display: flex; justify-content: space-between; align-items: baseline; font-size: 21px; border-bottom: 1px dashed #b9ad9b; padding-bottom: 4px; margin-bottom: 2px; }
.receipt header time { font-size: 15px; color: #7a6f62; }
.receipt b { font-weight: 400; font-size: 34px; line-height: 1.1; }
.receipt.win b { color: #2f8a46; }
.receipt.loss b { color: #c2412f; }
.r-line { display: flex; justify-content: space-between; gap: 8px; font-size: 16px; }
.r-line span:first-child { color: #7a6f62; }
.receipt footer { margin-top: 6px; padding-top: 5px; border-top: 1px dashed #b9ad9b; font-size: 15px; color: #7a6f62; text-align: center; }
.receipt footer a { color: var(--paper-ink); }

/* the desk log: a kitchen printer */
.legend { display: flex; gap: 10px; font: 600 12px/1 var(--round); }
.legend i { font-style: normal; }
.k-buy { color: var(--info); }
.k-win { color: var(--gain); }
.k-loss { color: var(--loss); }
.k-warn { color: var(--warn); }
.term-body { height: 300px; overflow-y: auto; margin: 0 12px 12px; padding: 8px; border-radius: 16px; background: var(--well); font-size: 18px; line-height: 1.2; display: flex; flex-direction: column; gap: 3px; }
.ev { display: grid; grid-template-columns: 5ch 1fr auto; gap: 8px; padding: 4px 8px; border-radius: 10px; color: var(--cream-3); border-left: 3px solid transparent; }
.ev time { color: #7a7065; }
.ev .n { color: var(--cream-2); background: var(--bg-3); border-radius: 999px; padding: 0 7px; font-size: 16px; align-self: center; }
.ev a { color: inherit; }
.ev.scan, .ev.sys { color: var(--cream-3); }
.ev.call { color: var(--cream); }
.ev.buy { color: var(--info); background: rgba(147, 214, 255, 0.07); border-left-color: var(--info); }
.ev.sell-win, .ev.exit-win { color: var(--gain); background: rgba(143, 230, 162, 0.07); border-left-color: var(--gain); }
.ev.sell-loss, .ev.exit-loss { color: var(--loss); background: rgba(255, 144, 144, 0.08); border-left-color: var(--loss); }
.ev.warn { color: var(--warn); border-left-color: var(--warn); }
.ev.deposit { color: var(--butter); background: rgba(255, 224, 138, 0.07); border-left-color: var(--butter); }

/* ─────────────────────────────────────── the sidebar */
/* the tip jar: where anyone can send SOL to fund the desk */
.jar { position: relative; padding-top: 12px; }
.jar-lid {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1; white-space: nowrap;
  padding: 6px 20px 5px; border-radius: 10px 10px 6px 6px;
  background: linear-gradient(180deg, var(--peach), var(--peach-lo)); box-shadow: 0 6px 12px -6px rgba(0, 0, 0, 0.6);
  font: 700 11px/1 var(--round); letter-spacing: .14em; text-transform: uppercase; color: #3a1f12;
}
.jar-body {
  padding: 22px 18px 18px; border-radius: 34px 34px 46px 46px; color: var(--cream-2); font: 18px/1.15 var(--pixel);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02) 40%), var(--bg-2);
  border: 1px solid rgba(239, 230, 216, 0.12); box-shadow: var(--shadow), inset 0 -18px 30px -18px rgba(255, 224, 138, 0.18);
}
.tr-top, .tr-note { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tr-label { font: 700 12px/1 var(--round); color: var(--butter); text-transform: uppercase; letter-spacing: .1em; }
.tr-bal b { font-weight: 400; color: var(--cream); font-size: 26px; }
.tr-addr { display: flex; align-items: center; gap: 8px; margin: 10px 0 9px; padding: 7px 7px 7px 12px; background: var(--well); border-radius: 14px; }
.tr-addr code { flex: 1; min-width: 0; font: 17px/1.1 var(--pixel); color: var(--cream); word-break: break-all; user-select: all; }
.tr-addr button {
  flex: none; font: 600 13px/1 var(--round); color: #2a1a12; background: var(--peach); border: 0; border-radius: 999px;
  padding: 7px 13px; cursor: pointer;
}
.tr-addr button:hover { background: #ffc2a8; }
.tr-addr button:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.tr-note { font: 13px/1.35 var(--sans); color: var(--cream-3); }
.tr-note a { flex: none; color: var(--cream-2); text-decoration: none; font-weight: 600; }
.tr-note a:hover { color: var(--peach); }

/* the room: a chat with bubbles */
.room-body { overflow-y: auto; height: min(640px, calc(100vh - 330px)); min-height: 380px; padding: 4px 14px 16px; display: flex; flex-direction: column; gap: 12px; font: 15px/1.45 var(--sans); }
.msg { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; align-items: start; animation: pop-in .3s ease-out; }
.ava {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; margin-top: 2px;
  font: 600 14px/1 var(--round); color: #1f1b18; background: var(--c, var(--cream-3));
}
.bub { background: var(--bg-3); padding: 8px 12px 9px; border-radius: 4px 16px 16px 16px; min-width: 0; }
.msg .who { display: flex; align-items: baseline; gap: 7px; }
.msg .who b { font: 600 13px/1 var(--round); color: var(--c, var(--cream)); }
.msg .who span { color: var(--cream-3); font-size: 11px; }
.msg .who time { margin-left: auto; color: var(--cream-3); font: 14px/1 var(--pixel); }
.msg p { margin: 3px 0 0; color: var(--cream); overflow-wrap: anywhere; }
.trade-card { margin-top: 7px; border: 1px solid var(--line); background: var(--well); padding: 7px 11px; display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; align-items: center; border-radius: 12px; font: 18px/1.15 var(--pixel); }
.trade-card .side { padding: 1px 8px 2px; color: #1f1b18; background: var(--cream); border-radius: 999px; }
.trade-card.buy { border-color: color-mix(in srgb, var(--info) 55%, transparent); }
.trade-card.buy .side { background: var(--info); }
.trade-card.win { border-color: color-mix(in srgb, var(--gain) 55%, transparent); }
.trade-card.loss { border-color: color-mix(in srgb, var(--loss) 55%, transparent); }
.trade-card .amt { grid-column: 1 / -1; color: var(--cream-2); font-size: 16px; }
.trade-card a { color: var(--cream-2); font-size: 16px; }
@keyframes pop-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* a cat's profile */
.profile {
  width: min(420px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 28px; color: var(--cream);
  background: var(--bg-2); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--line-soft);
}
.profile::backdrop { background: rgba(20, 17, 15, 0.6); backdrop-filter: blur(3px); }
.profile[open] { animation: pf-in .28s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes pf-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.pf-inner { position: relative; padding: 22px 24px 24px; text-align: center; }
.pf-close {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--bg-3); color: var(--cream-2); font: 600 20px/1 var(--round);
}
.pf-close:hover { color: var(--cream); background: var(--line); }
.pf-close:focus-visible { outline: 2px solid var(--peach); outline-offset: 2px; }
.pf-cat {
  height: 6.1lh; display: flex; justify-content: center; align-items: flex-end; margin: 4px auto 10px;
  font: 24px/1.04 var(--pixel); border-bottom: 10px solid #4a3f35; border-radius: 0 0 8px 8px; width: 15ch;
}
.profile h2 { margin: 0; font: 600 28px/1.1 var(--round); color: var(--c); }
.profile .role { display: inline-block; margin-top: 6px; }
.pf-bio { margin: 12px auto 0; max-width: 32ch; color: var(--cream-2); font-size: 15px; }
.pf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 4px; }
.pf-stats div { background: var(--well); border-radius: 16px; padding: 10px 6px; }
.pf-stats b { display: block; font: 400 24px/1 var(--pixel); color: var(--cream); }
.pf-stats span { font: 600 10px/1.2 var(--round); letter-spacing: .06em; text-transform: uppercase; color: var(--cream-3); }
.profile h3 { margin: 16px 0 8px; text-align: left; font: 600 12px/1 var(--round); letter-spacing: .08em; text-transform: uppercase; color: var(--cream-3); }
.pf-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.pf-lines li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; padding: 8px 12px; border-radius: 14px; background: var(--bg-3); font-size: 14px; }
.pf-lines time { font: 15px/1 var(--pixel); color: var(--cream-3); }
.pf-lines .empty { display: block; background: none; padding: 0; }

/* phones: tabs over the board */
.mtabs { display: none; }

/* footer */
.foot { border-top: 1px solid var(--line-soft); color: var(--cream-3); font-size: 14px; padding: 22px 28px 30px; display: flex; justify-content: space-between; gap: 6px 24px; flex-wrap: wrap; }
.foot p { margin: 0; }
.foot a { color: var(--cream-2); }

/* ─────────────────────────────────────── "is it real?" */
.panel {
  position: relative; min-width: 0; padding: 0 12px 12px;
  background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 28px; box-shadow: var(--shadow);
}
.screen { position: relative; background: var(--well); color: var(--cream); border-radius: 20px; font: 21px/1.15 var(--pixel); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 8px 11px; font: 600 14px/1 var(--round); color: var(--cream-2); letter-spacing: .02em; }
.panel > .screen { padding: 18px 20px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 20px; }
th { text-align: left; color: var(--cream-3); font: 600 12px/1 var(--round); letter-spacing: .04em; text-transform: uppercase; padding: 10px 12px 10px 0; white-space: nowrap; }
td { padding: 7px 12px 7px 0; border-top: 1px dashed var(--line); white-space: nowrap; }
td a { text-decoration: none; color: var(--cream); }
td a:hover { color: var(--peach); }
.doc { max-width: 900px; margin: 0 auto; padding: 44px 28px 72px; }
.doc h1 { font: 600 clamp(42px, 5.6vw, 60px)/1 var(--round); margin: 0 0 14px; letter-spacing: -0.02em; }
.doc h1 em { font-style: normal; color: var(--peach); }
.doc .lede { color: var(--cream-2); font-size: 18px; max-width: 62ch; }
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 28px 0 10px; }
.flow div { background: var(--bg-2); color: var(--cream); border: 1px solid var(--line-soft); border-radius: 20px; padding: 14px 16px; font: 15px/1.4 var(--sans); }
.flow b { display: block; font: 600 15px/1.2 var(--round); color: var(--peach); margin-bottom: 4px; }
.flow span { color: var(--cream-2); }
.claim { margin-top: 18px; }
.claim .panel-head .n { color: #2a1a12; background: var(--peach); padding: 3px 8px; border-radius: 999px; margin-right: 4px; }
.claim .screen { padding: 18px 20px; }
.claim h3 { margin: 0; font: 600 20px/1.2 var(--round); color: var(--cream); }
.claim p { color: var(--cream-2); margin: 10px 0 0; font: 15px/1.55 var(--sans); }
.claim p b { color: var(--cream); font-weight: 700; }
.claim a { color: var(--peach); }
.books { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.books div { background: var(--bg-2); border-radius: 16px; padding: 12px; }
.books b { font-weight: 400; font-size: 27px; display: block; }
.books span { color: var(--cream-3); font: 13px/1.35 var(--sans); }
.rulebook { margin: 12px 0 0; padding-left: 20px; color: var(--cream-2); font: 15px/1.55 var(--sans); }
.rulebook li { margin: 4px 0; }
.tag-chip { font: 700 10px/1 var(--round); letter-spacing: .06em; padding: 5px 9px; border-radius: 999px; background: var(--butter); color: #1f1b18; text-transform: uppercase; }
.tag-chip.warn { background: var(--warn); }

/* ─────────────────────────────────────── responsive */
@media (max-width: 1180px) {
  .board { grid-template-columns: minmax(0, 1fr) 340px; }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 76px; }
  .sill { display: none; }
  .cat-name { margin-top: 8px; }
  .buddy { border-bottom: 8px solid #4a3f35; border-radius: 0 0 6px 6px; }
  .cat:nth-child(3n+1) .say { left: 0; right: auto; transform: translateY(6px) scale(.96); transform-origin: 15% 100%; }
  .cat:nth-child(3n) .say { left: auto; right: 0; transform: translateY(6px) scale(.96); transform-origin: 85% 100%; }
  .cat:nth-child(3n+1).talking .say, .cat:nth-child(3n).talking .say { transform: none; }
  .board { grid-template-columns: 1fr; }
  .board-side { position: static; order: -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; }
  .room-body { height: 460px; }
  .flow { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .board { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
  .board-main, .board-side, .split { display: contents; }
  .jar { order: 0; }
  .mtabs {
    order: 1; display: flex; gap: 4px; padding: 5px; border-radius: 999px; position: sticky; top: 62px; z-index: 6;
    background: rgba(52, 48, 44, 0.92); backdrop-filter: blur(10px); box-shadow: var(--shadow);
  }
  .mtabs button {
    flex: 1; position: relative; padding: 10px 6px; border: 0; border-radius: 999px; background: none; cursor: pointer;
    font: 600 14px/1 var(--round); color: var(--cream-3);
  }
  .mtabs button.active { background: var(--cream); color: #1f1b18; }
  .mtabs button:focus-visible { outline: 2px solid var(--peach); outline-offset: 2px; }
  .mtabs .dot { display: none; position: absolute; top: 7px; right: 14%; width: 7px; height: 7px; border-radius: 50%; background: var(--peach); }
  .mtabs button.new .dot { display: block; }
  [data-tab] { order: 2; }
  .board[data-mtab="chart"] [data-tab]:not([data-tab="chart"]),
  .board[data-mtab="room"] [data-tab]:not([data-tab="room"]),
  .board[data-mtab="menu"] [data-tab]:not([data-tab="menu"]),
  .board[data-mtab="trades"] [data-tab]:not([data-tab="trades"]) { display: none; }
  .room-body { height: calc(100vh - 220px); min-height: 420px; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .top { padding: 10px 16px; gap: 10px; }
  .top nav a[data-x], .top nav a[href="/"] { display: none; }
  .brand-word { display: none; }
  .hero { padding: 28px 16px 4px; }
  .explain { font-size: 17px; }
  .shelf { gap: 8px; row-gap: 54px; padding: 64px 0 0; }
  .buddy { --cat-size: 12.5px; }
  .cat-name { flex-direction: column; gap: 4px; }
  .say { max-width: 62vw; }
  .coasters { gap: 10px; margin-top: 30px; }
  .coaster { width: 104px; height: 104px; }
  .coaster > span { font-size: 9px; }
  .coaster b { font-size: 24px; }
  .coaster em { font-size: 13px; max-width: 84px; }
  .coaster.big { width: 196px; height: 196px; }
  .monitor-screen { min-height: 360px; }
  .receipts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 4px 14px 18px; }
  .flow { grid-template-columns: 1fr; }
  .doc { padding: 28px 16px 56px; }
  .foot { padding: 20px 16px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}