html, body { height: 100%; overflow: hidden; }
.gel-page { height: 100vh; display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; padding: 24px 24px 20px; gap: 16px; }
.gel-host { width: min(100%, calc((100vh - 110px) * 2.26)); aspect-ratio: 2.26 / 1; }
.gel-host canvas { display: block; width: 100%; height: 100%; }
.gel-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.gel-seg { display: inline-flex; gap: 4px; margin-right: 8px; }
.gel-note { flex-basis: 100%; margin: 0; text-align: center; font-size: 12px; line-height: 16px; color: var(--rd-ink3); }
.gel-note:empty { display: none; }
/* the bar is drawn for the ground under it: the black ground takes the dark inks */
html.gel-dark { --rd-ink: #f2f1ee; --rd-ink2: #c3c2b7; --rd-ink3: #8f8e89; --rd-line-strong: rgb(255 255 255 / 22%); --rd-hover: rgb(255 255 255 / 8%); --rd-paper: #0b0b0b; color-scheme: dark; }
html:not(.gel-dark) { --rd-ink: #0b0b0b; --rd-ink2: #52514e; --rd-ink3: #6c6b69; --rd-line-strong: rgb(11 11 11 / 20%); --rd-hover: rgb(11 11 11 / 5%); --rd-paper: #fcfcfb; color-scheme: light; }
@media (max-width: 639px) { .gel-host { width: calc(100% - 8px); aspect-ratio: 1 / 1.15; max-height: calc(100vh - 120px); } }