html, body { width: 100%; min-height: 100%; margin: 0; }
body { overflow: hidden; background: radial-gradient(circle at 50% 0%, #17213b, var(--page-bg) 62%); color: var(--text-inverse); }
.presentation-shell {
  height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 16px;
  padding: 16px;
  overflow: hidden;
}
.device-stage { display: grid; place-items: center; min-width: 0; min-height: 0; position: relative; }
.device-shell {
  height: min(900px, calc(100dvh - 32px));
  max-width: min(480px, calc(100vw - 32px));
  aspect-ratio: 10 / 19;
  overflow: hidden;
  border: 8px solid var(--device);
  border-radius: 36px;
  background: var(--surface);
  box-shadow: var(--shadow-device);
  position: relative;
}
.device-shell::before { content: ""; position: absolute; z-index: 60; top: 7px; left: 50%; width: 26%; height: 5px; transform: translateX(-50%); border-radius: 999px; background: rgba(3,7,18,.82); }
.context-panel { min-width: 0; overflow: auto; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; border: 1px solid rgba(131,148,194,.18); border-radius: var(--radius-xl); background: rgba(17,26,45,.9); box-shadow: 0 18px 52px rgba(0,0,0,.22); }
body.context-open .context-panel { opacity: 1; visibility: visible; transform: none; }
body.focus-mode .presentation-shell { grid-template-columns: auto; justify-content: center; }
body.focus-mode .context-panel { display: none; }
.prototype-label { position: fixed; z-index: 100; top: 18px; left: 18px; margin: 0; padding: 7px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(17,26,45,.92); color: rgba(241,244,250,.82); font-size: 12px; white-space: nowrap; }
.context-toggle { position: fixed; z-index: 100; right: 18px; top: 18px; min-height: var(--touch); padding: 8px 14px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(17,26,45,.92); color: var(--text-inverse); font-weight: 750; }