/* Widen mdBook's default content column so demo canvases have real room. mdBook's default is ~750px; bump to 1200 for prose and let demos go wider. */ main { max-width: 1200px !important; } .demo { /* Break out of the prose column into the available page width. */ width: min(1500px, calc(100vw - 340px)); margin-left: 50%; transform: translateX(-50%); margin-top: 1.25rem; margin-bottom: 1.25rem; padding: 0.75rem; border: 1px solid rgba(128, 128, 128, 0.35); border-radius: 6px; background: rgba(128, 128, 128, 0.05); } /* When the sidebar is hidden mdBook adds `.sidebar-hidden` to ; then we can use nearly the full viewport width. */ html.sidebar-hidden .demo { width: min(1500px, calc(100vw - 40px)); } .demo canvas { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 8 / 3; background: #111; border-radius: 4px; } .demo-controls { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; font-family: var(--mono-font, monospace); font-size: 0.9rem; } .demo-controls button { min-width: 3.5rem; padding: 0.25rem 0.5rem; cursor: pointer; } .demo-controls input[type="range"] { flex: 1; } .demo-controls .time-readout { min-width: 6.5rem; text-align: right; opacity: 0.75; } .playground-header { display: flex; align-items: center; gap: 0.5rem; margin: 1rem 0 0.5rem; } .playground-demo canvas { aspect-ratio: 8 / 3; }