/* Shared interface: public pages, account, forms and operational workspaces. */
.experience-page {
  --paper: #f7f8f4;
  --ink: #20271f;
  --muted: #596254;
  --surface: #fff;
  --surface-raised: #edf1e7;
  --line: #dde2d7;
  --accent: #405a2b;
  --accent-hover: #283e18;
  --action-bg: #d8ff58;
  --action-hover: #c8ed43;
  --action-ink: #20271f;
  --control-border: #87947d;
  --selected-bg: #e5eddc;
  --success: #355b2d;
  --success-bg: #edf5e8;
  --success-border: #afc6a2;
  --danger: #9d3028;
  --danger-hover: #78231d;
  --danger-bg: #fff0ed;
  --danger-border: #d9978e;
  --warning: #795018;
  --warning-bg: #fff5df;
  --warning-border: #d5b676;
  --info: #37596a;
  --info-bg: #edf4f8;
  --viewer-bg: #121a22;
  --viewer-ink: #f4f6ef;
  --viewer-border: #3a4856;
  --viewer-gradient: radial-gradient(ellipse at 50% 38%, #374453 0%, #202b36 44%, #121a22 100%);
  --viewer-shadow: inset 0 0 90px #090e1555;
  --orange: var(--accent);
  --green: var(--success-bg);
  --ivory: var(--surface-raised);
  --radius: 10px;
  --control-radius: 7px;
  font-family: Inter, system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  color-scheme: light;
}
.experience-page ::selection { background: var(--selected-bg); color: var(--ink); }
.experience-page a { color: var(--accent); }
.experience-page a:hover { color: var(--accent-hover); }
.experience-page :focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.experience-page .skip:focus { color: var(--ink); background: var(--surface); }
.experience-page .brand { color: var(--ink); }
.experience-page .brand-icon { color: var(--accent); background: transparent; }
.experience-page .site-header nav a:not(.button), .experience-page .site-header .text-button { color: var(--accent); }
.experience-page .button, .experience-page .site-header nav .button {
  background: var(--action-bg); color: var(--action-ink);
  border: 1px solid transparent; border-radius: var(--control-radius);
  min-height: 48px; padding: 12px 16px; font-size: 14px; gap: 12px; box-shadow: none;
}
.experience-page .button:hover, .experience-page .site-header nav .button:hover {
  background: var(--action-hover); color: var(--action-ink); border-color: var(--accent); box-shadow: none;
}
.experience-page .button.small { min-height: 44px; padding: 10px 16px; }
.experience-page .button.danger { background: var(--danger); color: #fff; }
.experience-page .button.danger:hover { background: var(--danger-hover); color: #fff; border-color: var(--danger-hover); }
.experience-page button:disabled, .experience-page fieldset:disabled { opacity: .6; }
.experience-page button:disabled { cursor: not-allowed; }
.experience-page .button[aria-disabled=true] { opacity: .6; cursor: not-allowed; }
.experience-page .text-button { color: var(--accent); }
.experience-page button.secondary { background: var(--surface); border-color: var(--control-border); color: var(--accent); }
.experience-page button.secondary:hover:not(:disabled) { background: var(--surface-raised); }
.experience-page .pill { color: var(--accent); background: var(--surface-raised); border-color: var(--control-border); }
.experience-page .eyebrow { color: var(--accent); }
.experience-page .field input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),
.experience-page .field select, .experience-page .field textarea {
  background: var(--surface); color: var(--ink); border-color: var(--control-border); border-radius: var(--control-radius); color-scheme: light;
}
.experience-page .field input::placeholder, .experience-page .field textarea::placeholder { color: var(--muted); opacity: 1; }
.experience-page .error-summary { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.experience-page .error-summary a, .experience-page .error-summary p, .experience-page .errorlist { color: var(--danger); }
.experience-page .notice { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.experience-page .notice p { color: inherit; }
.experience-page .notice.error { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.experience-page .notice.warning { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.experience-page .notice.info { background: var(--info-bg); color: var(--info); }
.experience-page table { color: var(--ink); background: var(--surface); }
.experience-page th { color: var(--muted); background: var(--paper); }
.experience-page tbody tr:hover { background: var(--surface-raised); }
.experience-page .danger-area a { color: var(--danger); }
.experience-page .model-visual { color: var(--ink); }
.experience-page .model-stage { background: var(--viewer-bg); border-color: var(--viewer-border); }
.experience-page .model-stage[aria-busy=true]::before { color: var(--viewer-ink); }
.experience-page .model-stage canvas { background: var(--viewer-bg); }
.experience-page .model-stage[data-model-style="sports-realistic"],
.experience-page .model-stage[data-model-style="sports-realistic"] canvas { background: var(--viewer-gradient); }
.experience-page .model-camera-controls button[aria-pressed=true], .experience-page .zone-button[aria-pressed=true] {
  background: var(--selected-bg); color: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent);
}
.experience-page.workspace-page h1 { font-size: clamp(2rem, 3.6vw, 2.8rem); }
.experience-page .footer { color: var(--muted); }
.experience-page .footer-brand { color: var(--ink); }
@media (max-width: 600px) {
  .experience-page.workspace-page h1 { font-size: 30px; }
  .experience-page .button { min-height: 46px; }
}