/* do over's colors, and its demo tiles; loaded after the app-showcase
   layout's styles (_layouts/app-showcase.html) to adjust them */
/* the near-black ground and blue rule of the app icon; orange is the app's default accent */
:root { --band: #161618; --band-text: #f2f2f4; }
.band .eyebrow { color: #6cb8ff; }
.band .note { color: #a8a8b0; }
.demo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; max-width: var(--wide); margin: 48px auto 0; }
.demo .tile { padding: 28px; }
.demo pre { margin: 12px 0 0; font: 15px/1.45 ui-monospace, "SF Mono", Menlo, monospace; white-space: pre-wrap; color: var(--text); }
.demo h3 { margin: 0; }
.demo .label { font-size: 13px; color: var(--muted); margin: 14px 0 0; text-transform: uppercase; letter-spacing: 0.04em; }
.demo dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 14px 0 0; font-size: 15px; }
.demo dt { color: var(--muted); }
.demo dd { margin: 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; overflow-wrap: anywhere; }
.demo .tile > p:not(.label) { margin-top: 6px; }