.cs-board { width: 100%; min-width: 0; margin: 0; display: grid; gap: 7px; }
.cs-board-canvas { width: 100%; aspect-ratio: 27 / 15; display: block; }
.cs-board figcaption { overflow: hidden; color: var(--text); font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cs-board--dark figcaption { color: #F2EEE6; }
.cs-board--light figcaption { color: #1C1B19; }
.cs-board--full, .cs-board--now { padding: 8px; border: 1px solid var(--cs-border); border-radius: 8px; background: #070808; }
.cs-board--full.cs-board--light, .cs-board--now.cs-board--light { background: #E2DDD0; }
.cs-board--thumbnail { padding: 2px; border-radius: 3px; background: #0B0B0B; }
.cs-board--thumbnail.cs-board--light { background: #E8E4DA; }
@font-face { font-family: Barlow; src: url("/assets/fonts/Barlow-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: Barlow; src: url("/assets/fonts/Barlow-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: Barlow; src: url("/assets/fonts/Barlow-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }