/* Export shell only. Widget/template CSS lives verbatim in source/. */
html, body { margin: 0; background: var(--background); }
body { padding: 0; }
#studio-root { padding: 12px; max-width: 1440px; margin: 0 auto; }
.hbp { --hbp-off: 34px; }
/* Studio's editing/storyboard controls are hosted by the marketing page. */
#studio-root > .demo-shell > :is(.dev-row, .demo-top, .mode-desc, .transport, .stepcard, .storyboard) { display: none; }

/* Selected native template block; source/ stays verbatim. Keep HBT's dialog
   host and widget controls, remove only the surrounding panel layout. */
.template-widget #studio-root { padding: 26px 12px 12px; max-width: none; }
.template-widget .hbp { display: block; width: 100%; aspect-ratio: auto; border: 0; border-radius: 0; background: none; }
.template-widget :is(.hbp-side, .hbp-top, .hbp-cur) { display: none; }
.template-widget .hbp-main { padding: 0; overflow: visible; }
.template-widget .hbp-grid { display: block; }
.template-widget .demo-shell { border: 0; padding: 0; box-shadow: none; background: none; }
.template-widget .hbp-cell.is-widget .stage-box { outline: 2px solid var(--primary); outline-offset: -2px; transition: none; }
.template-widget .hbp-cell.is-chart { height: calc(100vh - 38px); min-height: 300px; }
.template-widget .hbp-cell.is-chart > .w { border: 2px solid var(--primary); }
.template-widget .hbp-over { border-radius: 12px; }
.template-widget .hbp-over .dlg { max-width: calc(100% - 24px); max-height: calc(100% - 24px); overflow-y: auto; }