/* Portfolio presentation only; the simulation and renderer are unchanged. */
html[data-embed="true"] #app { display: block; }
html[data-embed="true"], html[data-embed="true"] body { overflow: hidden; }
html[data-embed="true"] #stage { height: calc(100% - 88px); }
html[data-embed="true"] #side { display: none; }
html[data-embed="true"] canvas#hud { display: none; width: 200px; height: 275px; }
html[data-embed="true"] canvas#hud[data-visible="true"] { display: block; }
html[data-embed="true"] #error { padding: 16px; overflow: auto; }
html[data-embed="true"] #error .note { display: none; }
html[data-embed="true"] #preview-controls {
  position: absolute; inset: auto 0 0; height: 88px; padding: 9px 12px;
  display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 6px;
  border-top: 1px solid #232838; background: #11141c;
}
#preview-controls button { min-height: 32px; font-size: 11px; }
#preview-controls button:focus-visible { outline: 2px solid #ffb020; outline-offset: 2px; }
#preview-controls p { width: 100%; text-align: center; font-size: 10px; margin: 0; }
#preview-loading { position: absolute; inset: 0; display: grid; place-items: center; color: #98a1b5; pointer-events: none; }
@media (max-width: 600px) {
  html[data-embed="true"] #stage { height: calc(100% - 112px); }
  html[data-embed="true"] #preview-controls { height: 112px; }
}
@media (max-width: 700px) {
  html[data-embed="false"] #app { display: block; height: auto; }
  html[data-embed="false"] #stage { height: 70vh; min-height: 360px; }
  html[data-embed="false"] #side { border-left: none; border-top: 1px solid #232838; }
  html[data-embed="false"] canvas#hud { width: 160px; height: 220px; }
}