* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: Arial, Helvetica, sans-serif; }
button, input, select, textarea { font: inherit; }
button, a, input, select { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.45; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #ffd43b; outline-offset: 3px; }
.source-page, .source-page body { width: 100%; height: 100%; overflow: hidden; background: transparent; }
.source-page body { display: flex; }
.viewport { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: transparent; }
#stage { width: min(100vw, calc(100vh * 9 / 16)); height: min(100vh, calc(100vw * 16 / 9)); background: transparent; }
.sr-only { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* The shared shell styles the host; canvas geometry and its preview backdrop stay local. */
html.tt-shell .preview-section .preview-wrap {
  background: radial-gradient(circle at 20% 20%, rgba(90, 30, 140, 0.55), transparent 42%),
    radial-gradient(circle at 80% 30%, rgba(20, 80, 120, 0.4), transparent 46%),
    radial-gradient(circle at 50% 80%, rgba(120, 40, 80, 0.28), transparent 40%), #120818;
}
html.tt-shell .preview-section .preview-wrap { position: relative; }
/* Keep a transparent iframe transparent inside the shell's dark colour scheme. */
html.tt-shell .preview-wrap iframe { color-scheme: normal; }
html.tt-shell #mode-label { position: absolute; top: 10px; left: 10px; padding: 3px 8px; border-radius: 6px; background: #252931; color: #f7f7f4; font-size: 14px; }
html.tt-shell .field-row label { min-width: 140px; }