:root { color-scheme: dark; --viewport-height: 100vh; --scene-aspect: 0.75; --scene-ratio: 3 / 4; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #0b0b09; }
body { display: flex; align-items: center; justify-content: center; min-height: var(--viewport-height); }
#browser-shell { width: 100%; height: var(--viewport-height); display: grid; grid-template-rows: minmax(0, 1fr);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#scene-viewport { position: relative; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#stage { position: relative; width: min(100%, calc(var(--scene-available-height, var(--viewport-height)) * var(--scene-aspect)));
  aspect-ratio: var(--scene-ratio); overflow: hidden; touch-action: none; background: #0b0b09;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.scene-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
[hidden] { display: none !important; }
body[data-preview="instagram"] { background: #181816; }
body[data-preview="instagram"] #browser-shell {
  --preview-height: min(var(--viewport-height), calc(100vw * 1536 / 706), 1536px);
  height: var(--preview-height); width: calc(var(--preview-height) * 706 / 1536);
  grid-template-rows: 13.28125% minmax(0, 1fr) 10.286458333%; padding: 0; background: #0b0b09;
  box-shadow: 0 0 0 1px #393935, 0 12px 50px #0008; }
.preview-chrome { min-height: 0; color: #fbfbfc; background: #181d20; font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
.preview-status { height: 52.94117647%; display: flex; justify-content: space-between; align-items: flex-start;
  padding: calc(var(--preview-height) * 40 / 1536) 11.614731%; font-size: calc(var(--preview-height) * 30 / 1536); font-weight: 600; }
.status-time, .status-indicators { display: flex; align-items: center; gap: calc(var(--preview-height) * 10 / 1536); }
.preview-status svg { width: calc(var(--preview-height) * 28 / 1536); height: calc(var(--preview-height) * 28 / 1536); fill: currentColor; }
.preview-status .stroke-icon { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.status-battery { position: relative; border-radius: calc(var(--preview-height) * 6 / 1536); background: #fbfbfc; color: #181d20;
  font-size: calc(var(--preview-height) * 22 / 1536); line-height: 1.15; padding: 0 calc(var(--preview-height) * 5 / 1536); }
.status-battery::after { content: ''; position: absolute; top: 28%; right: calc(var(--preview-height) * -5 / 1536);
  width: calc(var(--preview-height) * 3 / 1536); height: 45%; border-radius: 2px; background: #8f9396; }
.preview-address { display: flex; align-items: center; justify-content: space-between; height: 47.05882353%; padding: 0 3.9660057%; gap: 2%; }
.preview-identity { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: calc(var(--preview-height) * 7 / 1536); }
.preview-host { display: flex; align-items: center; gap: calc(var(--preview-height) * 10 / 1536); font-weight: 600;
  white-space: nowrap; font-size: calc(var(--preview-height) * 26 / 1536); }
.preview-host svg { width: calc(var(--preview-height) * 20 / 1536); height: calc(var(--preview-height) * 20 / 1536); fill: currentColor; }
.preview-browser { color: #a4a9b3; font-size: calc(var(--preview-height) * 22 / 1536); }
.chrome-button { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0;
  width: calc(var(--preview-height) * 78 / 1536); height: calc(var(--preview-height) * 78 / 1536);
  border: 1px solid #52585f; border-radius: 50%; color: #fbfbfc; background: linear-gradient(145deg, #3b4148, #30363c);
  box-shadow: inset 0 1px 0 #ffffff0d; opacity: 1; }
.chrome-button svg { width: 55%; height: 55%; fill: none; stroke: currentColor; stroke-width: 3.7; stroke-linecap: round; stroke-linejoin: round; }
.chrome-button .dots-icon { fill: currentColor; stroke: none; }
.chrome-button.is-muted { color: #737a80; }
footer.preview-chrome { display: flex; align-items: flex-start; }
.preview-actions { width: 100%; display: flex; justify-content: space-between; padding: calc(var(--preview-height) * 18 / 1536) 3.9660057% 0; }
.preview-actions .chrome-button { width: calc(var(--preview-height) * 84 / 1536); height: calc(var(--preview-height) * 84 / 1536); }
.activity-ring { stroke-dasharray: 53 6 1 6 1 6 1 6 1 6; }
#preview-note { position: absolute; right: 3%; top: 2%; color: #afa68b; font: 10px system-ui; letter-spacing: 0.1em; }
#debug { position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 5; padding: 12px;
  color: #eee; background: #15151def; border: 1px solid #555; font: 12px system-ui; max-height: 35vh; overflow: auto; }
#debug button { padding: 7px 9px; margin: 3px; border: 1px solid #666; background: #272733; color: #fff; border-radius: 4px; }
#debug button:disabled { opacity: 0.35; cursor: not-allowed; }
#debug output { display: block; padding-bottom: 6px; }