/* A product panel framed on the homepage: the app's markup on the app's own canvas colour. A panel wider
   than its frame scrolls sideways in the frame. */
html{overflow-y:hidden}
html,body{margin:0;background:transparent}
.product{display:grid;gap:16px;padding:12px;background:rgb(var(--brand-canvas, 243 244 246))}
[data-ref="canvas"]{min-height:320px}
/* A frame of phone width gives the app the same side room it has on a phone. */
@media (max-width:430px){.product{padding:8px}}

/* AAA contrast on the homepage: the app's grey and tinted text and its badge fills, darkened until every line
   reads at 7:1 or more on the background it sits on. Only colours change; the app's markup stays as exported. */
:root{--brand-ink:31 41 55;--brand-muted:55 65 81}
.product .text-gray-400,.product .text-gray-500,.product .text-gray-600,.product .text-slate-400,
.product .text-meta,.product .text-muted,.product .yt-downline,.product .yt-action-label,
.product .fs-markdown li{color:#374151}
.product .yt-level-badge{color:#1E293B}
.product .text-blue-400,.product .text-blue-700{color:#1E40AF}
.product .text-green-400{color:#14532D}
.product .text-red-400,.product .text-red-700{color:#991B1B}
.product .text-purple-550,.product .text-purple-600{color:#4C1D95}
.product .text-amber-800{color:#78350F}
.product .bg-blue-500{background-color:#1E40AF}
.product [style*="#E5484D"]{background:#9B1C1C!important}
.product [style*="#3E63DD"]{background:#1E3A8A!important}
.product [style*="#B02730"]{color:#7F1D1D!important}
.product [style*="#2849A8"]{color:#1E3A8A!important}