@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");
/* Celestial's design language (system/celestial/web/style.css): deep navy, brass, warm white. */
:root {
  --bg: #0D1320; --panel: #141B2A; --raised: #1B2437; --line: #222C40; --line2: #2A3550; --line3: #3A4868;
  --text: #ECE7DA; --text2: #AEB6C6; --text3: #8C95A8; --dim: #5B6478;
  --brass: #E3B062; --brass-ink: #1A1306; --grey: #9AA9B4; --bad: #F0626B;
  --serif: Fraunces, Georgia, serif; --mono: "IBM Plex Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: "IBM Plex Sans", system-ui, sans-serif; }
button { font-family: inherit; cursor: pointer; }
.btn { min-height: 48px; padding: 0 26px; border: 0; border-radius: 26px; background: var(--brass); color: var(--brass-ink); font-size: 18px; font-weight: 700; }
.btn.big { min-height: 72px; border-radius: 36px; font-size: 24px; width: 100%; }
.h1 { font-family: var(--serif); font-weight: 600; margin: 0; }
.muted { color: var(--text2); }
canvas.floor { display: block; width: 100%; height: 100%; }
.info { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line3); background: transparent; color: var(--text2); font-size: 13px; font-weight: 700; padding: 0; position: relative; }
.info:hover::after, .info:focus::after { content: attr(data-tip); position: absolute; left: 30px; top: -6px; width: 280px; z-index: 5; text-align: left;
  background: var(--raised); border: 1px solid var(--line3); border-radius: 8px; padding: 10px 12px; font-size: 13px; font-weight: 400; color: var(--text); line-height: 1.4; }