/* Comic Compiler / Studio Air v4.2
   Playground-inspired light creative surfaces; original product identity.
   CSS-only successor. 3D scene pixels, pose logic, artboards, source
   authority, capture code, and all existing DOM IDs are unchanged.
*/
:root {
  --air-bg:#f7f8f6;
  --air-paper:#ffffff;
  --air-surface:#fcfdfb;
  --air-board:#f0f3f0;
  --air-grid:rgba(115,141,121,.13);
  --air-line:#e4e9e4;
  --air-border:#dce5dd;
  --air-ink:#212622;
  --air-secondary:#606e64;
  --air-muted:#7e8981;
  --air-violet:#7d6cc6;
  --air-violet-soft:#f0edff;
  --air-blue:#4d91b6;
  --air-blue-soft:#e7f3fa;
  --air-coral:#ec8d8b;
  --air-green:#4d9978;
  --air-shadow:0 12px 38px rgba(45,65,49,.075);
  --air-raise:0 18px 48px rgba(40,57,43,.10);
  color-scheme:light;
}
html, body {background:var(--air-bg)!important}
.creator-ui.focus-workspace {
  --hy-shell:var(--air-bg);
  --hy-pane:var(--air-paper);
  --hy-tint:var(--air-board);
  --hy-text:var(--air-ink);
  --hy-mid:var(--air-secondary);
  --hy-muted:var(--air-muted);
  --hy-line:var(--air-line);
  --hy-line-bold:var(--air-border);
  --hy-olive:#596b61;
  --v4-cream:#fff;
  background:var(--air-bg)!important;
  color:var(--air-ink)!important;
}
.creator-ui.focus-workspace .topbar {
  background:rgba(255,255,255,.96)!important;
  border-bottom:1px solid var(--air-line)!important;
  box-shadow:0 2px 18px rgba(56,72,58,.035)!important;
}
.creator-ui.focus-workspace .mark {
  border-radius:13px!important;
  background:#222826!important;
  color:white!important;
}
.creator-ui.focus-workspace .workflow-nav {
  background:#f1f3f0!important;
  border-color:#e9ece7!important;
  border-radius:15px!important;
}
.creator-ui.focus-workspace .workflow-step.active {
  background:#fff!important;
  box-shadow:0 3px 11px rgba(66,79,67,.11)!important;
}
.creator-ui.focus-workspace .chrome-button {
  border-color:#e1e6df!important;
  background:#fff!important;
  color:#354139!important;
}
.creator-ui.focus-workspace .export-button {
  background:#262c29!important;color:#fff!important;
}
.creator-ui.focus-workspace .workspace,
.creator-ui.focus-workspace .stage-panel {
  background:var(--air-bg)!important;
}
.creator-ui.focus-workspace .stage-head {
  background:var(--air-bg)!important;
  border-color:transparent!important;
  padding-top:18px!important;
  padding-bottom:14px!important;
}
.creator-ui.focus-workspace .creative-stage-title {
  background:#fff!important;
  border:1px solid #e7ece7!important;
  box-shadow:0 8px 28px rgba(51,67,56,.045)!important;
  border-radius:17px!important;
}
.creator-ui.focus-workspace .artist-toolbar {
  background:#fff!important;
  border-color:#e5eae5!important;
  box-shadow:0 8px 28px rgba(48,64,52,.055)!important;
}
.creator-ui.focus-workspace .camera-tools button.active {
  color:#fff!important;
  background:#333e37!important;
  box-shadow:0 4px 13px rgba(44,58,47,.14)!important;
}
.creator-ui.focus-workspace .stage-kicker {color:#6d7b76!important}
.creator-ui.focus-workspace .stage-title h2 {color:#25312a!important}
.creator-ui.focus-workspace .canvas-wrap {
  background:var(--air-bg)!important;
  padding:4px clamp(13px,1.8vw,28px) 0!important;
}
/* The old 'black hole' is not part of the scene: it comes from the
   off-panel WebGL clear and a dark 9999px outside shadow. Panel Frame
   is the precise existing computed 4:5 crop, therefore a light outside
   box-shadow masks ONLY the matte, retaining original WebGL pixels
   INSIDE the frame and preserving hit testing/dragging. */
.creator-ui.focus-workspace #viewport {
  background:var(--air-board)!important;
  border:1px solid var(--air-border)!important;
  border-radius:25px!important;
  box-shadow:0 15px 42px rgba(43,65,49,.075)!important;
  isolation:isolate;
}
.creator-ui.focus-workspace #viewport.panel-mode .panel-frame {
  display:block;
  border:1px solid rgba(99,116,104,.18)!important;
  box-shadow:0 0 0 9999px #f4f6f3!important;
  border-radius:4px!important;
  background:transparent;
  pointer-events:none!important;
}
.creator-ui.focus-workspace #viewport.panel-mode .panel-frame span {
  top:12px;left:12px;
  color:#53665b!important;
  background:rgba(255,255,255,.94)!important;
  border:1px solid rgba(172,184,175,.42)!important;
  box-shadow:0 2px 10px rgba(40,56,42,.085)!important;
  border-radius:10px!important;
  font-size:11px!important;
  font-weight:740;
  letter-spacing:1.25px!important;
  padding:9px 13px!important;
}
/* Refined director cards: distinct white sheets, NOT dark glass. */
.creator-ui.focus-workspace #viewport .creative-hud {
  width:min(252px,21vw)!important;
  max-width:252px!important;
  top:clamp(30px,6vh,75px)!important;
  padding:20px 19px 18px!important;
  background:rgba(255,255,255,.97)!important;
  border:1px solid rgba(215,225,216,.96)!important;
  border-radius:20px!important;
  box-shadow:0 14px 36px rgba(42,59,45,.075)!important;
  backdrop-filter:blur(12px);
  color:#24332a!important;
  opacity:1!important;
  text-align:left;
  pointer-events:none;
}
.creator-ui.focus-workspace #viewport:hover .creative-hud{
  opacity:1!important;transform:none!important;
}
.creator-ui.focus-workspace .creative-hud.hud-left {left:clamp(17px,2.6vw,40px)!important}
.creator-ui.focus-workspace .creative-hud.hud-right {right:clamp(17px,2.6vw,40px)!important}
.creator-ui.focus-workspace .creative-hud .hud-section-label span {
  color:#739184!important;
  font-size:10px!important;
  letter-spacing:1.6px!important;
}
.creator-ui.focus-workspace .creative-hud .hud-section-label em {
  color:#697970!important;font-size:11px!important;
}
.creator-ui.focus-workspace .creative-hud .hud-main-title {
  color:#24342b!important;
  font-size:20px!important;
  font-weight:730!important;
  letter-spacing:-.5px!important;
  line-height:1.16!important;
  margin:9px 0 5px!important;
}
.creator-ui.focus-workspace .creative-hud p {
  font-size:12px!important;
  color:#56685d!important;
  line-height:1.55!important;
}
.creator-ui.focus-workspace .creative-hud .hud-divider {
  border-color:#e6ebe6!important;
  background:#e6ebe6!important;
  opacity:1!important;
}
.creator-ui.focus-workspace .creative-hud .hud-detail-row span {
  color:#87968d!important;
  font-size:10px!important;
  letter-spacing:1px!important;
}
.creator-ui.focus-workspace .creative-hud .hud-detail-row b {
  color:#3c4b42!important;
  font-size:11px!important;
}
.creator-ui.focus-workspace .creative-hud>small {
  color:#7f8b82!important;
  font-size:11px!important;
}
/* Floating creator prompt becomes an inviting white composer. */
.creator-ui.focus-workspace .creative-prompt-dock {
  width:min(665px,calc(100% - 64px))!important;
  bottom:clamp(35px,5vh,59px)!important;
}
.creator-ui.focus-workspace .creative-prompt-dock>button {
  min-height:78px!important;
  border-radius:22px!important;
  padding:14px 17px!important;
  background:rgba(255,255,255,.985)!important;
  border:1px solid #dce5dc!important;
  color:#232d26!important;
  box-shadow:0 18px 45px rgba(48,67,53,.13)!important;
  backdrop-filter:blur(18px);
  transform:none;
}
.creator-ui.focus-workspace .creative-prompt-dock>button:hover {
  background:#fff!important;
  border-color:#bbb6e2!important;
  box-shadow:0 20px 55px rgba(72,65,133,.14)!important;
  transform:translateY(-2px)!important;
}
.creator-ui.focus-workspace .creative-prompt-spark {
  width:46px!important;height:46px!important;
  border-radius:15px!important;
  background:linear-gradient(145deg,#e9e8ff,#f5e9f1)!important;
  color:#775ac0!important;
  font-size:22px!important;
}
.creator-ui.focus-workspace .creative-prompt-copy b {
  color:#28312a!important;
  font-size:16px!important;
  font-weight:700!important;
  letter-spacing:-.3px;
}
.creator-ui.focus-workspace .creative-prompt-copy small {
  color:#78867c!important;
  font-size:11px!important;
  letter-spacing:0;
}
.creator-ui.focus-workspace .creative-prompt-dock kbd {
  color:#5a695f!important;
  background:#f5f6f3!important;
  border:1px solid #e1e6e0!important;
  border-radius:9px!important;
  font-size:11px!important;
  padding:8px 9px!important;
}
.creator-ui.focus-workspace .empty-state b{color:#26322a!important}
.creator-ui.focus-workspace .empty-state span{color:#7a8a80!important}
.creator-ui.focus-workspace .canvas-footer,
.creator-ui.focus-workspace .cast-legend span,
.creator-ui.focus-workspace .canvas-hint {
  color:#637367!important;
}
.creator-ui.focus-workspace .timeline-wrap{
  margin-top:4px;
  background:#f8faf7!important;
  border-top:1px solid #e8ece7!important;
  padding-top:20px!important;
}
.creator-ui.focus-workspace .timeline-head>div:first-child b{color:#26312a!important}
.creator-ui.focus-workspace .beat-card {
  background:#fff!important;
  border:1px solid #e3e9e3!important;
  border-left:3px solid #c4d2c6!important;
  border-radius:17px!important;
  box-shadow:0 8px 23px rgba(51,67,56,.055)!important;
}
.creator-ui.focus-workspace .beat-card:hover {
  background:#fcfdfb!important;
  border-color:#b7cbbb!important;
  transform:translateY(-2px)!important;
}
.creator-ui.focus-workspace .beat-card.active {
  background:#f3f9f3!important;
  border-color:#9ebba5!important;
  border-left-color:#5c9676!important;
}
.creator-ui.focus-workspace .beat-frame-mark {
  background:linear-gradient(145deg,#eef2f0,#e5e9f0)!important;
  border-color:#dde8e1!important;
}
.creator-ui.focus-workspace .beat-frame-mark strong {color:#53675b!important}
.creator-ui.focus-workspace .beat-frame-mark em {color:#82958a!important}
/* Draw/Edit and Page are creative tools as well: lighten the studio
   backing, but retain actual white/cream artboard source pixels. */
.draw-stage,.page-stage {
  background-color:#edf1ed!important;
  background-image:
    radial-gradient(circle,rgba(131,151,134,.16) .8px,transparent 1px),
    radial-gradient(ellipse at center,rgba(255,255,255,.35),transparent 67%)!important;
  background-size:22px 22px,100% 100%!important;
}
.draw-artboard,.page-paper-wrap {
  border-color:#d5ded4!important;
  box-shadow:0 22px 60px rgba(42,63,46,.17),0 2px 9px rgba(45,66,49,.08)!important;
}
/* Important: no canvas filters or forced color transformations. */
/* Tablet keeps clear card sizes without overlap with portrait panel. */
@media(max-width:1120px) {
  .creator-ui.focus-workspace #viewport .creative-hud {
    width:min(205px,23vw)!important;
    padding:14px!important;
    border-radius:16px!important;
  }
  .creator-ui.focus-workspace .creative-hud .hud-main-title{font-size:16px!important}
  .creator-ui.focus-workspace .creative-hud p{font-size:10px!important}
  .creator-ui.focus-workspace .creative-prompt-dock{bottom:30px!important}
}
@media(max-width:900px) {
  .creator-ui.focus-workspace #viewport .creative-hud {
    width:155px!important;max-width:155px!important;
    top:66px!important;padding:10px!important;
  }
  .creator-ui.focus-workspace .creative-hud .hud-main-title{font-size:13px!important}
  .creator-ui.focus-workspace .creative-hud p{font-size:9px!important}
  .creator-ui.focus-workspace .creative-prompt-dock{width:calc(100% - 22px)!important}
  .creator-ui.focus-workspace .creative-prompt-dock>button{min-height:63px!important}
  .creator-ui.focus-workspace .creative-prompt-copy b{font-size:12px!important}
}
@media(max-width:620px) {
  .creator-ui.focus-workspace #viewport .creative-hud{display:none!important}
  .creator-ui.focus-workspace .creative-prompt-dock{bottom:21px!important}
  .creator-ui.focus-workspace .creative-prompt-dock>button{min-height:60px!important;padding:9px!important}
  .creator-ui.focus-workspace .creative-prompt-spark{width:39px!important;height:39px!important}
  .creator-ui.focus-workspace .creative-prompt-copy small{display:none!important}
  .creator-ui.focus-workspace #viewport{border-radius:16px!important}
}
/* Do not obstruct or restyle intentional full-screen Focus editing. */
.creator-ui.focus-workspace.immersive-workspace #viewport {
  border:0!important;
  border-radius:0!important;
}
.creator-ui.focus-workspace.immersive-workspace #viewport .creative-hud {
  display:none!important;
}
@media(prefers-reduced-motion:reduce){
  .creator-ui.focus-workspace .creative-prompt-dock>button:hover,
  .creator-ui.focus-workspace .beat-card:hover{transform:none!important}
}

/* Lightweight Playground-like dot texture ONLY outside the precise
   authoritative 4:5 WebGL panel. Four pointer-transparent surfaces
   follow the existing panel frame; no tint/dots inside saved art. */
.creator-ui.focus-workspace #viewport .air-grid-plane {
  display:none;
  position:absolute;
  z-index:4;
  pointer-events:none!important;
  background-image:radial-gradient(circle,rgba(114,146,123,.29) .9px,transparent 1px);
  background-size:24px 24px;
  background-position:12px 12px;
  opacity:.56;
}
.creator-ui.focus-workspace #viewport.panel-mode .air-grid-plane {
  display:block;
}
.creator-ui.focus-workspace.immersive-workspace #viewport .air-grid-plane {
  display:none!important;
}
@media(max-width:620px){
  .creator-ui.focus-workspace #viewport .air-grid-plane {
    opacity:.38;
    background-size:22px 22px;
  }
}