/* These additions share the visual language of the ADC/PWM demos. */
.rgb-workbench { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 1.25rem 0; }
.rgb-workbench > *, .sleep-workbench > * { min-width: 0; }
.rgb-channel { margin-bottom: 1rem; }
.rgb-channel label { display: inline-block; }
.teaching-demo .rgb-channel input[type=number] { float: right; width: 5rem; }
.rgb-channel input[type=range] { clear: both; }
.rgb-red input[type=range] { accent-color: #b52a36; }
.rgb-green input[type=range] { accent-color: #187342; }
.rgb-blue input[type=range] { accent-color: #245fa8; }
.rgb-swatch { height: 6rem; border: 1px solid #8297a6; border-radius: 8px; }
.rgb-values { margin: .6rem 0; }
.rgb-values > div { display: grid; gap: .15rem; margin-bottom: .5rem; }
.rgb-values dt { font-size: .8rem; font-weight: 500; color: var(--demo-muted); }
.rgb-values dd { margin: 0; font: 600 .95rem ui-monospace, monospace; overflow-wrap: anywhere; }
.teaching-demo .rgb-mixing-figure { display: block; width: 100%; margin: .75rem 0 0; }
.rgb-mixing-figure svg { display: block; width: 100%; max-height: 14rem; }
.rgb-mixing-figure figcaption { color: var(--demo-muted); font-size: .8rem; margin-top: .4rem; }
.rgb-lights { isolation: isolate; }
.rgb-lights circle { mix-blend-mode: screen; }
.rgb-circle-labels { fill: white; font: 700 18px system-ui, sans-serif; text-anchor: middle; }
.rgb-code { min-width: 0; margin: 1rem 0; }
.teaching-demo .rgb-code pre { background: white; border: 1px solid #dce5eb; border-radius: 7px; padding: .8rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.teaching-demo .rgb-code code { padding: 0; color: var(--demo-ink); background: transparent; font-size: .9rem; }
.sleep-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; margin: 1.25rem 0; }
.sleep-control { min-width: 0; }
.sleep-control label span { font-weight: 500; white-space: nowrap; }
.teaching-demo .sleep-control input[type=number] { width: 7rem; max-width: 100%; }
.sleep-budget, .sleep-cycle { font-size: .85rem; color: var(--demo-muted); }
.sleep-bar-active { fill: #b86012; }
.sleep-bar-idle { fill: #17649a; }
.sleep-legend-active { color: #934d08; }
.sleep-legend-idle { color: #17649a; }
.sleep-breakdown svg text { font-size: 18px; }
@media (min-width: 900px) {
  .teaching-demo[data-demo=rgb]:fullscreen { grid-template-areas: "heading heading" "intro intro" "workbench workbench" "presets code" "details details" "note note" "footer footer"; }
  .teaching-demo[data-demo=sleep]:fullscreen { grid-template-areas: "heading heading" "intro intro" "workbench workbench" "presets formula" "details details" "note note" "footer footer"; }
  .teaching-demo:fullscreen .rgb-workbench { grid-area: workbench; margin: .25rem 0; }
  .teaching-demo:fullscreen .rgb-channels { display: grid; align-content: start; gap: .5rem; }
  .teaching-demo:fullscreen .rgb-channel { margin-bottom: 0; }
  .teaching-demo:fullscreen .rgb-result { display: grid; grid-template-columns: .8fr 1fr; gap: .75rem; align-content: start; }
  .teaching-demo:fullscreen .rgb-swatch { height: 7rem; }
  .teaching-demo:fullscreen .rgb-values { grid-column: 1; }
  .teaching-demo:fullscreen .rgb-mixing-figure { grid-column: 2; grid-row: 1 / 3; margin: 0; }
  .teaching-demo:fullscreen .rgb-code { grid-area: code; margin: 0; }
  .teaching-demo:fullscreen .sleep-workbench { grid-area: workbench; display: grid; grid-template-columns: 1fr 1.2fr; gap: 2rem; }
  .teaching-demo:fullscreen .sleep-inputs { margin: .25rem 0; gap: .5rem 1rem; }
  .teaching-demo:fullscreen .sleep-results .demo-stats { margin: .25rem 0; }
  .teaching-demo:fullscreen .sleep-breakdown svg text { font-size: 18px; }
}
@media (max-width: 520px) {
  .rgb-workbench { grid-template-columns: 1fr; }
  .rgb-mixing-figure svg { max-height: none; }
  .sleep-inputs { gap: 1rem .75rem; }
  .sleep-control label { font-size: .85rem; min-height: 2.6em; }
  .sleep-breakdown svg text { font-size: 28px; }
}
@media print {
  .rgb-channels, .sleep-inputs { display: none; }
  .rgb-workbench { display: block; }
  .rgb-swatch, .rgb-mixing-figure, .sleep-breakdown { print-color-adjust: exact; }
}