/* Warm Studio surface: keep the same paper, ink, and soft green language as the gallery. */
body[data-current-screen="three"] {
  background: var(--gallery-paper, #f3f0e8);
  background-image: none;
  color: var(--gallery-ink, #28332d);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body[data-current-screen="three"] .sidebar {
  background: rgba(243, 240, 232, .97);
  border-right-color: #a8afa7;
  backdrop-filter: none;
}
body[data-current-screen="three"] .brand-name { color: var(--gallery-ink, #28332d); }
body[data-current-screen="three"] .brand-name span { color: var(--gallery-accent, #a14e32); }
body[data-current-screen="three"] .brand-mark {
  background: var(--gallery-ink, #28332d);
  box-shadow: none;
}
body[data-current-screen="three"] .brand-caption,
body[data-current-screen="three"] .nav-label,
body[data-current-screen="three"] .user-plan { color: var(--gallery-muted, #566158); }
body[data-current-screen="three"] .nav-btn { color: #46534a; }
body[data-current-screen="three"] .nav-btn:hover { background: #e7ece6; color: var(--gallery-ink, #28332d); }
body[data-current-screen="three"] .nav-btn.active {
  background: var(--gallery-soft, #e7ece6);
  border-color: #89968c;
  color: var(--gallery-ink, #28332d);
  box-shadow: inset 3px 0 var(--gallery-ink, #28332d);
}
body[data-current-screen="three"] .nav-btn svg,
body[data-current-screen="three"] .nav-btn.active svg { color: #536355; }
body[data-current-screen="three"] .nav-pill {
  border-color: #a8afa7;
  color: #566158;
  background: #fbfaf6;
}
body[data-current-screen="three"] .local-note {
  border-color: #b9c1b8;
  background: #e7ece6;
  color: #46534a;
}
body[data-current-screen="three"] .user-card { border-top-color: #a8afa7; }
body[data-current-screen="three"] .user-name { color: var(--gallery-ink, #28332d); }
body[data-current-screen="three"] .main { color: var(--gallery-ink, #28332d); }
body[data-current-screen="three"] .topbar { border-bottom-color: #a8afa7; }
body[data-current-screen="three"] .crumb,
body[data-current-screen="three"] .crumb strong { color: #566158; }
body[data-current-screen="three"] .saved { color: #566158; }
body[data-current-screen="three"] .saved svg { color: #486552; }

body[data-current-screen="three"] #screen-three .workspace-title h1 {
  color: var(--gallery-ink, #28332d);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(27px, 3vw, 36px);
  letter-spacing: -.035em;
}
body[data-current-screen="three"] #screen-three .workspace-title p,
body[data-current-screen="three"] #screen-three .three-poc-intro {
  color: var(--gallery-muted, #566158);
}
body[data-current-screen="three"] #screen-three .eyebrow { color: var(--gallery-accent, #a14e32); }
body[data-current-screen="three"] #screen-three .eyebrow:before { background: var(--gallery-accent, #a14e32); }
body[data-current-screen="three"] #screen-three .status-badge {
  border-color: #839587;
  background: #e7ece6;
  color: #34483b;
}
body[data-current-screen="three"] #screen-three .status-badge i { background: #486552; }

body[data-current-screen="three"] #screen-three .panel,
body[data-current-screen="three"] #screen-three .three-poc-assets,
body[data-current-screen="three"] #screen-three .three-poc-code-panel,
body[data-current-screen="three"] #screen-three .three-poc-preview-panel {
  border-color: #a8afa7;
  background: var(--gallery-surface, #fbfaf6);
  color: var(--gallery-ink, #28332d);
  box-shadow: 0 4px 16px rgba(40, 51, 45, .045);
}
body[data-current-screen="three"] #screen-three .panel-head {
  border-bottom-color: #c8cec6;
  color: var(--gallery-ink, #28332d);
}
body[data-current-screen="three"] #screen-three .panel-head strong,
body[data-current-screen="three"] #screen-three .three-poc-file-head,
body[data-current-screen="three"] #screen-three .three-poc-export-head strong {
  color: var(--gallery-ink, #28332d);
}
body[data-current-screen="three"] #screen-three .panel-head span,
body[data-current-screen="three"] #screen-three .panel-head small,
body[data-current-screen="three"] #screen-three .three-poc-file-head small,
body[data-current-screen="three"] #screen-three .three-poc-file-name,
body[data-current-screen="three"] #screen-three .three-poc-export-head small,
body[data-current-screen="three"] #screen-three .three-poc-runtime-note {
  color: var(--gallery-muted, #566158);
}
body[data-current-screen="three"] #screen-three .three-poc-file,
body[data-current-screen="three"] #screen-three .three-poc-export {
  border-color: #c0c8be;
  background: #f3f0e8;
  color: var(--gallery-ink, #28332d);
}
body[data-current-screen="three"] #screen-three .three-poc-thumb {
  border-color: #a8afa7;
  background: #e7ece6;
}
body[data-current-screen="three"] #screen-three .three-poc-local-note {
  border-color: #a8b6a7;
  background: #e7ece6;
  color: #34483b;
}

body[data-current-screen="three"] #screen-three .code-toolbar .btn,
body[data-current-screen="three"] #screen-three .three-poc-file-actions .tiny-btn,
body[data-current-screen="three"] #screen-three .three-poc-assets .tiny-btn,
body[data-current-screen="three"] #screen-three .three-poc-transport .btn {
  border-color: #68746a;
  background: #fbfaf6;
  color: var(--gallery-ink, #28332d);
  box-shadow: none;
}
body[data-current-screen="three"] #screen-three .code-toolbar .btn:hover,
body[data-current-screen="three"] #screen-three .three-poc-file-actions .tiny-btn:hover,
body[data-current-screen="three"] #screen-three .three-poc-assets .tiny-btn:hover,
body[data-current-screen="three"] #screen-three .three-poc-transport .btn:hover {
  border-color: #3b5144;
  background: #e7ece6;
}
body[data-current-screen="three"] #screen-three .btn.primary,
body[data-current-screen="three"] #screen-three .three-poc-file-actions .asset-upload-btn,
body[data-current-screen="three"] #screen-three .three-poc-assets .btn {
  border-color: var(--gallery-ink, #28332d);
  background: var(--gallery-ink, #28332d);
  color: #fff;
  box-shadow: none;
}
body[data-current-screen="three"] #screen-three .btn.primary:hover,
body[data-current-screen="three"] #screen-three .three-poc-file-actions .asset-upload-btn:hover,
body[data-current-screen="three"] #screen-three .three-poc-assets .btn:hover {
  border-color: #3b5144;
  background: #3b5144;
}
body[data-current-screen="three"] #screen-three .code-editor,
body[data-current-screen="three"] #screen-three .ai-prompt-text {
  border-color: #8c978d;
  background: #f3f0e8;
  color: #28332d;
  caret-color: #a14e32;
}
body[data-current-screen="three"] #screen-three .code-editor:focus,
body[data-current-screen="three"] #screen-three .ai-prompt-text:focus {
  border-color: #526653;
  outline: 2px solid #526653;
}
body[data-current-screen="three"] #screen-three .code-hint {
  border-color: #c0c8be;
  background: #f3f0e8;
  color: #46534a;
}
body[data-current-screen="three"] #screen-three .code-hint strong,
body[data-current-screen="three"] #screen-three .ai-prompt-head strong {
  color: var(--gallery-ink, #28332d);
}
body[data-current-screen="three"] #screen-three .code-hint small,
body[data-current-screen="three"] #screen-three .ai-prompt-head small,
body[data-current-screen="three"] #screen-three .ai-prompt-foot {
  color: var(--gallery-muted, #566158);
}
body[data-current-screen="three"] #screen-three .ai-prompt-box {
  border-color: #c0a99a;
  background: #f7eee7;
}
body[data-current-screen="three"] #screen-three .ai-prompt-text { background: #fbfaf6; }
body[data-current-screen="three"] #screen-three .three-poc-transport {
  border-color: #c0c8be;
  background: #f3f0e8;
}
body[data-current-screen="three"] #screen-three .three-poc-transport .timecode,
body[data-current-screen="three"] #screen-three .remotion-preview-top {
  color: #46534a;
}
body[data-current-screen="three"] #screen-three .three-poc-transport input[type="range"] { accent-color: #486552; }
body[data-current-screen="three"] #screen-three .stage-pill {
  border-color: #a8afa7;
  background: #f3f0e8;
  color: #46534a;
}
body[data-current-screen="three"] #screen-three .remotion-status {
  border-color: #9cae9d;
  background: #e7ece6;
  color: #34483b;
}
body[data-current-screen="three"] #screen-three .three-poc-export-status { color: #34483b; }
body[data-current-screen="three"] #screen-three .three-poc-export-status.error { color: #9a2e3c; }
body[data-current-screen="three"] #screen-three .three-poc-progress { accent-color: #486552; }

/* The preview is the artwork, so it remains dark and undisturbed by the paper UI. */
body[data-current-screen="three"] #screen-three .three-poc-stage,
body[data-current-screen="three"] #screen-three .three-poc-stage iframe {
  background: #101a1b;
}
body[data-current-screen="three"] #screen-three .three-poc-stage { border-color: #68746a; }

body[data-current-screen="three"] .footer {
  border-top-color: #a8afa7;
  color: var(--gallery-muted, #566158);
  font-size: 11px;
}
body[data-current-screen="three"] .footer strong { color: var(--gallery-ink, #28332d); }
body[data-current-screen="three"] .footer .visitor-count,
body[data-current-screen="home"] .footer .visitor-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid #68746a;
  border-radius: 5px;
  background: #e7ece6;
  color: #28332d;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}
body[data-current-screen="three"] .footer #visitorCount,
body[data-current-screen="home"] .footer #visitorCount {
  min-width: 0;
  color: #28332d !important;
  font-weight: 750;
}

body[data-current-screen="three"] .mobile-bottom-nav {
  border-top-color: #a8afa7;
  background: var(--gallery-paper, #f3f0e8);
}
body[data-current-screen="three"] .mobile-nav-btn {
  border-color: #68746a;
  background: var(--gallery-surface, #fbfaf6);
  color: var(--gallery-ink, #28332d);
}
body[data-current-screen="three"] .mobile-nav-btn:hover { background: #e7ece6; }
body[data-current-screen="three"] .mobile-nav-btn:active { background: #dce5dc; }
body[data-current-screen="three"] .mobile-nav-btn[aria-current="page"] {
  border-color: var(--gallery-ink, #28332d);
  background: var(--gallery-ink, #28332d);
  color: #fff;
}
body[data-current-screen="three"] .mobile-nav-btn:focus-visible {
  outline-color: var(--gallery-accent, #a14e32);
}
body[data-current-screen="three"] button:focus-visible,
body[data-current-screen="three"] input:focus-visible,
body[data-current-screen="three"] select:focus-visible,
body[data-current-screen="three"] textarea:focus-visible {
  outline-color: var(--gallery-accent, #a14e32);
}

@media (max-width: 620px) {
  body[data-current-screen="three"] .topbar { border-bottom-color: #a8afa7; }
  body[data-current-screen="three"] .mobile-brand { color: var(--gallery-ink, #28332d); }
  body[data-current-screen="three"] .mobile-brand .brand-mark {
    background: var(--gallery-ink, #28332d);
    box-shadow: none;
  }
  body[data-current-screen="three"] .topbar .btn.primary {
    border-color: var(--gallery-ink, #28332d);
    background: var(--gallery-ink, #28332d);
    color: #fff;
    box-shadow: none;
  }
  body[data-current-screen="three"] #screen-three .workspace-title { align-items: flex-start; }
  body[data-current-screen="three"] #screen-three .workspace-title p { line-height: 1.55; }
  body[data-current-screen="three"] #screen-three .three-poc-export-head { align-items: flex-start; }
  body[data-current-screen="three"] #screen-three .three-poc-export-foot { align-items: flex-start; }
  body[data-current-screen="three"] .footer .visitor-count,
  body[data-current-screen="home"] .footer .visitor-count { white-space: normal; }
}

/* The live Studio mounts its visual editor in #screen-three. */
body[data-current-screen="three"] #screen-three .studio-mode-tabs {
  border-color: #a8afa7;
  background: #e7ece6;
}
body[data-current-screen="three"] #screen-three .studio-mode-tabs button {
  color: #46534a;
}
body[data-current-screen="three"] #screen-three .studio-mode-tabs button small {
  color: #566158;
}
body[data-current-screen="three"] #screen-three .studio-mode-tabs button[aria-selected="true"] {
  border-color: #68746a;
  background: #fbfaf6;
  color: #28332d;
  box-shadow: 0 2px 8px rgba(40, 51, 45, .08);
}
body[data-current-screen="three"] #screen-three .studio-mode-tabs button[aria-selected="true"] small {
  color: #566158;
}
body[data-current-screen="three"] #screen-three .vs {
  --vs-line: #a8afa7;
  --vs-accent: #486552;
  --vs-muted: #566158;
  color: #28332d;
}
body[data-current-screen="three"] #screen-three .vs-card {
  border-color: #a8afa7;
  background: #fbfaf6;
  color: #28332d;
  box-shadow: 0 4px 16px rgba(40, 51, 45, .045);
}
body[data-current-screen="three"] #screen-three .vs-section-head h2,
body[data-current-screen="three"] #screen-three .vs-projectbar strong {
  color: #28332d;
}
body[data-current-screen="three"] #screen-three .vs-section-head > span:first-child {
  border-color: #a8afa7;
  background: #e7ece6;
  color: #34483b;
}
body[data-current-screen="three"] #screen-three .vs-projectbar #visualSaveStatus,
body[data-current-screen="three"] #screen-three .vs-preview-head,
body[data-current-screen="three"] #screen-three .vs-preview-head > span,
body[data-current-screen="three"] #screen-three .vs-transport > span {
  color: #566158;
}
body[data-current-screen="three"] #screen-three .vs-template {
  border-color: #a8afa7;
  background: #f3f0e8;
  color: #28332d;
}
body[data-current-screen="three"] #screen-three .vs-template:hover {
  border-color: #526653;
  background: #e7ece6;
}
body[data-current-screen="three"] #screen-three .vs-template[aria-pressed="true"] {
  border-color: #526653;
  background: #e7ece6;
  box-shadow: inset 3px 0 #486552;
}
body[data-current-screen="three"] #screen-three .vs-template[aria-pressed="true"] strong,
body[data-current-screen="three"] #screen-three .vs-template[aria-pressed="true"] small {
  color: #28332d;
}
body[data-current-screen="three"] #screen-three .vs-template small,
body[data-current-screen="three"] #screen-three .vs-help,
body[data-current-screen="three"] #screen-three .vs-file-summary {
  color: #566158;
}
body[data-current-screen="three"] #screen-three .vs-field {
  color: #34483b;
}
body[data-current-screen="three"] #screen-three .vs-field output {
  color: #486552;
}
body[data-current-screen="three"] #screen-three .vs input[type="text"],
body[data-current-screen="three"] #screen-three .vs textarea,
body[data-current-screen="three"] #screen-three .vs select {
  border-color: #8c978d;
  background: #fffdf8;
  color: #28332d;
}
body[data-current-screen="three"] #screen-three .vs input:focus,
body[data-current-screen="three"] #screen-three .vs textarea:focus,
body[data-current-screen="three"] #screen-three .vs select:focus {
  border-color: #526653;
  box-shadow: 0 0 0 2px rgba(82, 102, 83, .16);
}
body[data-current-screen="three"] #screen-three .vs input[type="range"],
body[data-current-screen="three"] #screen-three .vs progress {
  accent-color: #486552;
}
body[data-current-screen="three"] #screen-three .vs-palette[aria-pressed="true"] {
  box-shadow: 0 0 0 2px #fbfaf6, 0 0 0 4px #486552;
}
body[data-current-screen="three"] #screen-three .vs-file-pick {
  border-color: #68746a;
  background: #f3f0e8;
  color: #34483b;
}
body[data-current-screen="three"] #screen-three .vs-file-pick:hover {
  border-color: #486552;
  background: #e7ece6;
}
body[data-current-screen="three"] #screen-three .vs-text-button {
  color: #34483b;
}
body[data-current-screen="three"] #screen-three .vs-text-button:hover { color: #1f2923; }
body[data-current-screen="three"] #screen-three .vs-play {
  border-color: #28332d;
  background: #28332d;
  color: #fff;
}
body[data-current-screen="three"] #screen-three .vs-status {
  border-color: #9cae9d;
  background: #e7ece6;
  color: #34483b;
}
body[data-current-screen="three"] #screen-three .vs-status.error {
  border-color: #c48783;
  background: #f7e9e6;
  color: #852f2c;
}
body[data-current-screen="three"] #screen-three .vs-export-options .vs-field {
  color: #34483b;
}
body[data-current-screen="three"] #screen-three .vs-local-chip {
  border-color: #a8afa7;
  background: #e7ece6;
  color: #34483b !important;
}
body[data-current-screen="three"] #screen-three .vs-checkbox { color: #34483b; }
body[data-current-screen="three"] #screen-three .vs-stage {
  border-color: #68746a;
  background: #101a1b;
}
body[data-current-screen="three"] #screen-three .vs .btn:not(.primary) {
  border-color: #68746a;
  background: #fbfaf6;
  color: #28332d;
  box-shadow: none;
}
body[data-current-screen="three"] #screen-three .vs .btn:not(.primary):hover {
  border-color: #3b5144;
  background: #e7ece6;
}
body[data-current-screen="three"] #screen-three .vs .btn.primary {
  border-color: #28332d;
  background: #28332d;
  color: #fff;
}
body[data-current-screen="three"] #screen-three .vs .btn.primary:hover {
  border-color: #3b5144;
  background: #3b5144;
}

body[data-current-screen="three"] .topbar .btn.primary {
  border-color: #28332d;
  background: #28332d;
  color: #fff;
  box-shadow: none;
}
body[data-current-screen="three"] .topbar .btn.primary:hover {
  border-color: #3b5144;
  background: #3b5144;
}