/* Showcase page. Every colour and font comes from brand.css. */
.float-page .lead { max-width: 40rem; }
.stage { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 70vh; border-radius: 1rem; border: 1px solid color-mix(in srgb, var(--brand-text) 15%, transparent); overflow: hidden; margin-bottom: 1rem; }
.stage canvas { display: block; width: 100%; height: 100%; }
.stage-msg[hidden] { display: none; }
.stage-msg { position: absolute; inset: 0; margin: 0; padding: 1rem; display: flex; align-items: center; justify-content: center; text-align: center; }
.scale-note { margin: 0 0 1.25rem; font-size: .95rem; }
.controls { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: end; margin-bottom: 1rem; }
.controls .field { margin: 0; }
input[type="range"] { padding: 0; accent-color: var(--brand-accent); }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.facts h3 { font-size: 1.15rem; margin-bottom: .25rem; }
.facts p { margin: 0; }
@media (min-width: 40rem) { .controls { grid-template-columns: 1fr auto; } .stage { aspect-ratio: 4 / 3; } }
.readout { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin: 0 0 2rem; }
.readout div { border: 1px solid color-mix(in srgb, var(--brand-text) 15%, transparent); border-radius: .75rem; padding: .6rem .8rem; }
.readout dt { font-size: .9rem; }
.readout dd { margin: 0; font-family: var(--brand-font-heading); font-size: 1.25rem; }
@media (min-width: 40rem) { .readout { grid-template-columns: repeat(4, 1fr); } }