:root {
      --page-max: 1400px;
      --panel: rgba(255,255,255,0.82);
      --panel-strong: rgba(255,255,255,0.92);
      --border: rgba(20, 28, 40, 0.14);
      --text: #0f1720;
      --muted: #475467;
      --shadow: 0 24px 80px rgba(15, 23, 32, 0.18);
      --radius: 22px;
      --page-gradient:
        linear-gradient(135deg, rgba(54, 124, 255, 0.18), transparent 28%),
        linear-gradient(180deg, #2d74ff 0%, #dfe9ff 42%, #fffaf5 58%, #ffb36b 100%);
    }

    * { box-sizing: border-box; }
    html, body { min-height: 100%; }
    body {
      margin: 0;
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background: var(--page-gradient);
      background-attachment: fixed;
    }

    .page {
      width: min(var(--page-max), calc(100vw - 32px));
      margin: 0 auto;
      padding: 28px 0 56px;
    }

    .hero {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 22px 24px;
      backdrop-filter: blur(14px);
    }

    .hero h1 {
      margin: 0 0 8px;
      font-size: clamp(24px, 4vw, 40px);
      line-height: 1.05;
    }

    .hero p {
      margin: 0;
      color: var(--muted);
      max-width: 72ch;
    }

    .preview-panel,
    .controls-panel {
      margin-top: 20px;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      backdrop-filter: blur(14px);
    }

    .preview-panel {
      padding: 20px;
    }

    .preview-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    .preview-header strong {
      display: block;
      font-size: 15px;
    }

    .preview-header span {
      display: block;
      color: var(--muted);
      font-size: 13px;
      margin-top: 2px;
    }

    .preview-actions,
    .overlay-toolbar {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .button {
      appearance: none;
      border: 1px solid rgba(15, 23, 32, 0.12);
      border-radius: 999px;
      background: var(--panel-strong);
      color: var(--text);
      padding: 10px 14px;
      font: inherit;
      cursor: pointer;
      transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
      box-shadow: 0 8px 24px rgba(15, 23, 32, 0.08);
    }

    .button:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 28px rgba(15, 23, 32, 0.12);
    }

    .button.primary {
      background: #111827;
      color: white;
      border-color: rgba(17, 24, 39, 0.8);
    }

    .button.secondary {
      background: rgba(255,255,255,0.72);
    }

    .stage-shell {
      width: 100%;
      min-height: 240px;
      display: grid;
      place-items: center;
      padding: 16px;
      border-radius: 18px;
      background: transparent;
      overflow: visible;
    }

    .stage-host {
      width: 100%;
      display: grid;
      place-items: center;
    }

    #inlineStageHost {
      width: min(75vw, 100%);
    }

    #overlayStageHost {
      width: 100%;
    }

    .stage-frame {
      width: 100%;
      display: grid;
      place-items: center;
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid rgba(15, 23, 32, 0.12);
      box-shadow: none;
      background: transparent;
    }

    canvas {
      display: block;
      width: 100%;
      height: 100%;
      background: var(--page-gradient);
      background-attachment: fixed;
    }

    .resolution-note {
      margin-top: 12px;
      font-size: 13px;
      color: var(--muted);
    }

    .controls-panel {
      padding: 22px;
    }

    .controls-panel h2 {
      margin: 0 0 8px;
      font-size: 18px;
    }

    .controls-panel > p {
      margin: 0 0 18px;
      color: var(--muted);
      font-size: 14px;
    }

    .control-grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 14px;
    }

    .control-card {
      grid-column: span 12;
      background: rgba(255,255,255,0.48);
      border: 1px solid rgba(15, 23, 32, 0.08);
      border-radius: 18px;
      padding: 16px;
    }

    .control-card h3 {
      margin: 0 0 12px;
      font-size: 14px;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: #233041;
    }

    .field-grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 12px;
    }

    .field {
      grid-column: span 3;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .field.wide { grid-column: span 12; }
    .field.half { grid-column: span 6; }
    .field.third { grid-column: span 4; }
    .field.two { grid-column: span 2; }

    .field label {
      font-size: 12px;
      color: #334155;
      font-weight: 600;
    }

    .field input,
    .field select,
    .field textarea {
      width: 100%;
      border: 1px solid rgba(15, 23, 32, 0.12);
      border-radius: 12px;
      background: rgba(255,255,255,0.9);
      color: var(--text);
      padding: 10px 12px;
      font: inherit;
    }

    .field textarea {
      min-height: 112px;
      resize: vertical;
      line-height: 1.35;
    }

    .overlay {
      position: fixed;
      inset: 0;
      background: rgba(14, 20, 31, 0.78);
      backdrop-filter: blur(12px);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      z-index: 1000;
    }

    .overlay.is-open {
      display: flex;
    }

    .overlay-shell {
      width: min(100vw - 24px, 1900px);
      max-height: calc(100vh - 24px);
      background: rgba(247, 249, 252, 0.92);
      border: 1px solid rgba(255,255,255,0.45);
      border-radius: 24px;
      box-shadow: 0 36px 120px rgba(0, 0, 0, 0.26);
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .overlay-toolbar {
      justify-content: space-between;
    }

    .overlay-stage-shell {
      flex: 1 1 auto;
      min-height: 0;
      display: grid;
      place-items: center;
      padding: 8px;
      border-radius: 18px;
      background: transparent;
      overflow: auto;
    }

    .loading {
      position: fixed;
      inset: 0;
      display: grid;
      place-items: center;
      background: rgba(20, 28, 40, 0.24);
      backdrop-filter: blur(8px);
      z-index: 1200;
      transition: opacity 0.25s ease;
    }

    .loading.hidden {
      opacity: 0;
      pointer-events: none;
    }

    .loading-card {
      background: rgba(255,255,255,0.9);
      border: 1px solid rgba(15, 23, 32, 0.1);
      border-radius: 18px;
      padding: 18px 22px;
      box-shadow: var(--shadow);
      text-align: center;
    }

    .spinner {
      width: 44px;
      height: 44px;
      border: 3px solid rgba(45, 116, 255, 0.18);
      border-top-color: #2d74ff;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin: 0 auto 12px;
    }

    .loading-card strong {
      display: block;
      margin-bottom: 6px;
      font-size: 15px;
    }

    .loading-card span {
      color: var(--muted);
      font-size: 13px;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    @media (max-width: 980px) {
      .page { width: calc(100vw - 20px); padding-top: 16px; }
      .preview-panel, .controls-panel { padding-left: 14px; padding-right: 14px; }
      .field,
      .field.half,
      .field.third,
      .field.two { grid-column: span 12; }
      .preview-header { flex-direction: column; align-items: flex-start; }
      .overlay-shell { width: calc(100vw - 12px); max-height: calc(100vh - 12px); padding: 12px; }
      .overlay-toolbar { flex-direction: column; align-items: stretch; }
    }

/* Browser Run / server-triggered capture mode.
   Activated with ?headless=1 or ?mode=headless. */
html.is-headless-capture,
html.is-headless-capture body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: transparent;
}

html.is-headless-capture .page {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}

html.is-headless-capture .hero,
html.is-headless-capture .preview-header,
html.is-headless-capture .controls-panel,
html.is-headless-capture .resolution-note,
html.is-headless-capture .overlay {
  display: none !important;
}

html.is-headless-capture .preview-panel {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  backdrop-filter: none;
}

html.is-headless-capture .stage-shell,
html.is-headless-capture .stage-host,
html.is-headless-capture #inlineStageHost,
html.is-headless-capture .stage-frame {
  width: 100vw !important;
  height: 100vh !important;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: hidden;
}

html.is-headless-capture canvas {
  width: 100vw !important;
  height: 100vh !important;
  background: transparent !important;
  background-attachment: scroll;
}

html.is-headless-capture .loading.hidden {
  display: none;
}