/* Comic Compiler | ATELIER V4 — full creative-workspace redesign
   Visual-only CSS overlay. Preserve every existing DOM authority and engine.
   Design: paper-and-ink, breathing room, tactile tools, quiet movement. */
:root {
  --v4-bg:#161919;--v4-deep:#101313;--v4-panel:#202423;
  --v4-raised:#282b29;--v4-ink:#f1eee5;--v4-muted:#a4aaa5;
  --v4-quiet:#858d87;--v4-line:rgba(240,237,223,.115);
  --v4-strong:rgba(245,242,225,.20);--v4-gold:#d8b78c;
  --v4-cream:#f2ecdf;--v4-teal:#8abbaa;--v4-lav:#b8acd7;
  --v4-ease:cubic-bezier(.19,1,.22,1);
}
html {color-scheme:dark}
body,.app {background:var(--v4-bg);color:var(--v4-ink)}
body {background:var(--v4-bg)!important}
button, input, textarea, select {font-family:inherit}
button,a,summary,[role=button] {-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:2px solid var(--v4-gold)!important;outline-offset:3px
}
button {transition:background .22s var(--v4-ease),color .22s,border-color .22s,box-shadow .24s var(--v4-ease),transform .24s var(--v4-ease)}
button:disabled {cursor:not-allowed;filter:saturate(.35)}
[hidden] {display:none!important}
.creator-ui.focus-workspace {
  --creative-bg:#171b1b;
  --bg:#161919;--chrome:#191d1c;--panel:#232725;--paper:#f2ecdf;
  --ink:#f1eee5;--muted:#a4aaa5;--dim:#8d968e;--accent:#d8b78c;
  --line:#464b44;--line-soft:#313630;--accent-soft:#3b3328;
  --a:#e2c59a;--b:#9fb6cf;--mint:#92cab1;
  --prop:#8fbab0
}
.creator-ui.focus-workspace .topbar {
  height:76px!important;min-height:76px;padding:0 clamp(18px,2vw,36px);
  gap:clamp(12px,1.4vw,26px);
  background:rgba(24,28,27,.95);border-bottom:1px solid var(--v4-line);
  backdrop-filter:blur(20px);box-shadow:0 1px 0 rgba(255,255,255,.028);
}
.creator-ui.focus-workspace .brand {gap:12px!important;min-width:230px!important}
.creator-ui.focus-workspace .mark {
  width:43px;height:43px;border-radius:13px;letter-spacing:-1.3px;
  background:var(--v4-cream);color:#292e2c;font-size:16px;font-weight:850;
  box-shadow:0 3px 12px #0004,inset 0 1px 0 #fff8;
}
.creator-ui.focus-workspace .brand-copy b {
  font-weight:750;font-size:14px!important;letter-spacing:-.32px;color:var(--v4-ink);
}
.creator-ui.focus-workspace .brand-copy small {
  display:block!important;font-size:10px;color:#8e958f;letter-spacing:.1px;margin-top:3px
}
.creator-ui.focus-workspace .workflow-nav {
  height:44px;min-height:44px;gap:2px;margin:auto;padding:4px;
  border:1px solid var(--v4-line);background:#232725;border-radius:14px;
  box-shadow:inset 0 1px 1px rgba(0,0,0,.24)
}
.creator-ui.focus-workspace .workflow-step {
  min-height:34px;height:34px;padding:8px clamp(9px,1vw,17px);
  border-radius:10px;color:#a9ada7!important;position:relative;
  font-size:11px;white-space:nowrap
}
.creator-ui.focus-workspace .workflow-step b {
  font-size:11px!important;line-height:17px;font-weight:580;
}
.creator-ui.focus-workspace .workflow-step:hover {
  color:#fff7e9!important;background:#343934!important
}
.creator-ui.focus-workspace .workflow-step.active {
  color:#252a28!important;background:var(--v4-cream)!important;
  box-shadow:0 3px 12px #0003!important
}
.creator-ui.focus-workspace .workflow-step.active b{font-weight:780}
.creator-ui.focus-workspace .topbar-actions{gap:8px;flex-shrink:0}
.creator-ui.focus-workspace .chrome-button,
.creator-ui.focus-workspace .export-button {
  min-height:38px;padding:0 14px!important;
  border:1px solid var(--v4-line);border-radius:11px;
  color:#d0d2c9;background:#292d2a;
  font-size:11px!important;font-weight:650;line-height:1.2
}
.creator-ui.focus-workspace .chrome-button:hover,
.creator-ui.focus-workspace .chrome-button.active {
  background:#383d38!important;border-color:#7c857b!important;color:#fff9eb!important
}
.creator-ui.focus-workspace .export-button {
  background:var(--v4-cream)!important;border-color:var(--v4-cream)!important;
  color:#262b28!important;font-weight:800!important;
  padding:0 21px!important;box-shadow:0 5px 18px #0003
}
.creator-ui.focus-workspace .export-button:not(:disabled):hover {transform:translateY(-1px);box-shadow:0 8px 25px #0005}
.creator-ui.focus-workspace .status {
  width:34px;height:34px;min-width:34px;justify-content:center;
  border:1px solid var(--v4-line);background:#222725!important;
  padding:0;border-radius:11px
}
.creator-ui.focus-workspace .status .dot {
  width:8px;height:8px;background:var(--v4-teal);
  box-shadow:0 0 0 4px rgba(138,187,170,.1)
}
.creator-ui.focus-workspace .project-popover {
  width:345px;padding:16px;gap:10px;
  border:1px solid var(--v4-strong);background:#262a27;
  border-radius:18px;box-shadow:0 28px 90px #0009
}
.creator-ui.focus-workspace .project-popover>b{font-size:21px;letter-spacing:-.5px}
.creator-ui.focus-workspace .project-popover>small,
.creator-ui.focus-workspace .project-popover>span {font-size:11px}
.creator-ui.focus-workspace .project-popover button,
.creator-ui.focus-workspace .project-popover select,
.creator-ui.focus-workspace .project-saved-label{font-size:11px}
.creator-ui.focus-workspace .project-popover button{min-height:36px}
.creator-ui.focus-workspace .workspace,
.creator-ui.focus-workspace .stage-panel {background:var(--v4-bg)!important}
.creator-ui.focus-workspace .stage-panel{min-width:0}
.creator-ui.focus-workspace .stage-head {
  height:83px;min-height:83px;padding:14px clamp(15px,2vw,30px) 8px;
  align-items:center;gap:22px;position:relative;z-index:18
}
.creator-ui.focus-workspace .creative-stage-title {
  display:flex;align-items:center;gap:14px;
  min-width:270px;max-width:530px;
  border:1px solid var(--v4-line);border-radius:16px;
  background:#242926;padding:8px 14px 8px 9px;
  box-shadow:0 6px 20px #0002
}
.creator-ui.focus-workspace .beat-nav-buttons{gap:5px}
.creator-ui.focus-workspace .beat-nav {
  width:36px;height:36px;min-width:36px;background:#343936;
  border:1px solid rgba(255,255,255,.06);border-radius:11px;
  color:#e8e3d8;font-size:17px
}
.creator-ui.focus-workspace .beat-nav:hover:not(:disabled) {
  background:#49514a;border-color:#8d938a;transform:translateY(-1px)
}
.creator-ui.focus-workspace .beat-title-copy{min-width:0}
.creator-ui.focus-workspace .stage-kicker {display:block!important;
  font-size:9px!important;letter-spacing:1.45px!important;color:var(--v4-gold)!important;
  margin-bottom:4px
}
.creator-ui.focus-workspace .stage-title h2 {
  font-size:16px!important;font-weight:720;letter-spacing:-.38px;
  max-width:270px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--v4-ink);margin:0
}
.creator-ui.focus-workspace .beat-readiness-line {font-size:10px!important;color:var(--v4-muted)!important;gap:7px;margin-top:2px!important}
.creator-ui.focus-workspace .beat-status-badge {font-size:9px!important;padding:4px 7px!important;border-radius:6px!important}
.creator-ui.focus-workspace .artist-toolbar {
  max-width:min(57vw,780px);
  border:1px solid var(--v4-line);border-radius:16px;background:#242926;
  padding:6px;box-shadow:0 8px 26px #0002
}
.creator-ui.focus-workspace .camera-tools button {
  min-height:38px;height:38px;padding:0 clamp(11px,1vw,16px);
  font-size:11px!important;font-weight:650;border-radius:11px;
  color:#c0c5bd!important;background:transparent
}
.creator-ui.focus-workspace .camera-tools button.active {
  background:var(--v4-cream)!important;color:#252a28!important;
  box-shadow:0 4px 14px #0003!important;font-weight:750
}
.creator-ui.focus-workspace .camera-tools button:hover:not(.active) {
  background:#383f39!important;color:#fff8ec!important
}
.creator-ui.focus-workspace .artist-toolbar .secondary-tools {
  padding:9px;min-width:345px;top:calc(100% + 12px);
  border:1px solid var(--v4-strong);border-radius:16px;
  background:#252b28;box-shadow:0 24px 60px #0009
}
.creator-ui.focus-workspace .artist-toolbar .tool-label {
  color:var(--v4-gold)!important;font-size:9px!important;letter-spacing:1px
}
.creator-ui.focus-workspace .canvas-wrap {
  padding:3px clamp(14px,1.9vw,29px) 0!important;background:transparent;
  position:relative
}
.creator-ui.focus-workspace #viewport {
  min-height:570px;border:1px solid rgba(235,232,216,.12);
  border-radius:23px!important;
  background:
    radial-gradient(ellipse at 49% 31%,rgba(166,165,146,.085),transparent 47%),
    linear-gradient(155deg,rgba(78,86,79,.065),transparent 58%),
    #111515!important;
  box-shadow:0 28px 78px rgba(3,5,3,.27),inset 0 1px 0 rgba(255,255,255,.05);
}
.creator-ui.focus-workspace .panel-frame {
  border-color:rgba(226,215,189,.65)!important;
  box-shadow:0 0 0 9999px rgba(3,6,5,.36),0 15px 55px #0008!important
}
.creator-ui.focus-workspace .panel-frame span {
  font-size:10px!important;letter-spacing:1.2px!important;
  background:rgba(30,34,31,.94)!important;color:#f2e9d6!important;
  border:1px solid rgba(226,215,189,.25);padding:7px 10px
}
.creator-ui.focus-workspace .empty-state {
  z-index:5;max-width:min(470px,82%);text-align:center;
}
.creator-ui.focus-workspace .empty-state b{
  font-family:Georgia,serif;font-size:clamp(23px,3vw,42px);font-weight:450;
  letter-spacing:-1.2px;color:#f1ebdf;line-height:1.1
}
.creator-ui.focus-workspace .empty-state span{
  display:block;margin-top:12px;font-size:13px;line-height:1.6;color:#acb4ab;
  max-width:360px
}
.creator-ui.focus-workspace .creative-hud {
  top:81px!important;max-width:230px!important;width:230px!important;
  padding:15px!important;border-radius:15px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:rgba(30,34,31,.83)!important;
  backdrop-filter:blur(18px)!important;
  box-shadow:0 12px 42px #0004!important;
  opacity:.83;transition:opacity .25s,transform .25s
}
.creator-ui.focus-workspace #viewport:hover .creative-hud {opacity:.96}
.creator-ui.focus-workspace .creative-hud .hud-section-label span {font-size:9px!important;color:var(--v4-gold)!important}
.creator-ui.focus-workspace .creative-hud .hud-section-label em{font-size:10px}
.creator-ui.focus-workspace .creative-hud .hud-main-title{font-size:17px!important;font-weight:700!important}
.creator-ui.focus-workspace .creative-hud p {font-size:11px!important;line-height:1.45!important;color:#b9c0b8!important}
.creator-ui.focus-workspace .creative-hud .hud-detail-row span{font-size:9px!important}
.creator-ui.focus-workspace .creative-hud .hud-detail-row b{font-size:11px!important}
.creator-ui.focus-workspace .creative-hud>small{font-size:10px!important;line-height:1.4!important}
.creator-ui.focus-workspace .creative-hud.hud-left {left:22px!important}
.creator-ui.focus-workspace .creative-hud.hud-right {right:22px!important}

/* High-value creative actions float near the work, not in dense sidebars. */
.creative-prompt-dock {bottom:47px!important;width:min(630px,calc(100% - 100px))!important}
.creative-prompt-dock>button {
  min-height:70px!important;padding:12px 15px!important;gap:14px!important;
  border-radius:19px!important;background:rgba(36,42,38,.95)!important;
  border:1px solid rgba(238,230,207,.20)!important;
  box-shadow:0 23px 63px #0009,inset 0 1px 0 rgba(255,255,255,.065)!important;
  backdrop-filter:blur(26px) saturate(115%)!important;
}
.creative-prompt-dock>button:hover {background:#333d36!important;transform:translateY(-3px)!important;border-color:#bba783!important}
.creative-prompt-spark {
  width:43px!important;height:43px!important;border-radius:13px!important;
  background:linear-gradient(145deg,#eee0bf,#c9ab80)!important;
  color:#343229!important;font-size:22px!important
}
.creative-prompt-copy b{font-size:14px!important;letter-spacing:-.22px!important;font-weight:700!important;color:#f2f2eb!important}
.creative-prompt-copy small{font-size:11px!important;color:#a1afa4!important}
.creative-prompt-dock kbd{font-size:10px!important;padding:6px 8px!important;border-radius:7px!important;color:#c3c5bd!important;border-color:#586157!important}
.creator-ui.focus-workspace .canvas-footer {
  height:43px!important;padding:0 6px!important;color:#989e95!important;font-size:11px!important
}
.creator-ui.focus-workspace .cast-legend{gap:16px!important}
.creator-ui.focus-workspace .cast-legend span{font-size:11px!important}
.creator-ui.focus-workspace .swatch{width:9px!important;height:9px!important}
.creator-ui.focus-workspace .canvas-hint{font-size:10px!important;color:#818a83!important}
.creator-ui.focus-workspace .timeline-wrap {
  padding:13px clamp(15px,2vw,30px) 20px!important;
  background:#181d1b!important;border-top:1px solid var(--v4-line)!important
}
.creator-ui.focus-workspace .timeline-head{
  margin-bottom:11px!important;min-height:30px!important
}
.creator-ui.focus-workspace .timeline-head>div:first-child .dock-kicker{
  display:inline!important;font-size:9px!important;color:var(--v4-gold)!important
}
.creator-ui.focus-workspace .timeline-head>div:first-child b{
  font-size:15px!important;color:#eeeae0!important;
  letter-spacing:-.3px
}
.creator-ui.focus-workspace .timeline-head>div:first-child span:last-child {
  font-size:11px!important;color:#9fa9a0!important
}
.creator-ui.focus-workspace .timeline-key {opacity:.8;font-size:10px!important;color:#a6ada5!important}
.creator-ui.focus-workspace .timeline {gap:12px!important;padding:1px 0 8px!important;scrollbar-color:#535b52 transparent}
.creator-ui.focus-workspace .beat-card {
  min-width:255px!important;max-width:286px!important;
  min-height:112px;padding:9px!important;
  border:1px solid rgba(241,233,216,.12)!important;
  border-left:3px solid rgba(241,233,216,.19)!important;
  border-radius:15px!important;
  background:#232925!important;
  box-shadow:0 6px 15px rgba(0,0,0,.10);
  transition:transform .23s var(--v4-ease),border-color .2s,background .2s,box-shadow .2s
}
.creator-ui.focus-workspace .beat-card.native{border-left-color:#76b69a!important}
.creator-ui.focus-workspace .beat-card.review{border-left-color:#d6a76e!important}
.creator-ui.focus-workspace .beat-card:hover {
  background:#303832!important;transform:translateY(-3px)!important;
  border-color:rgba(221,198,160,.43)!important;box-shadow:0 10px 27px #0004
}
.creator-ui.focus-workspace .beat-card.active {
  background:#34392e!important;border-color:rgba(230,200,155,.72)!important;
  border-left-color:#e2bb85!important;
  box-shadow:inset 0 0 0 1px rgba(226,187,133,.25),0 11px 28px #0005!important
}
.creator-ui.focus-workspace .beat-thumb{height:82px!important;border-radius:10px!important}
.creator-ui.focus-workspace .beat-card .beat-copy{gap:4px}
.creator-ui.focus-workspace .beat-card b{font-size:12px!important;line-height:1.25!important}
.creator-ui.focus-workspace .beat-card small{font-size:10px!important;color:#a6b0a7!important}
.creator-ui.focus-workspace .beat-copy>span:not(.beat-lock){font-size:10px!important;line-height:1.4!important}
.creator-ui.focus-workspace .beat-native-tag{font-size:8px!important;padding:4px 7px!important;border-radius:999px!important}
.creator-ui.focus-workspace .beat-lock{font-size:9px!important}
.creator-ui.focus-workspace .input-panel,
.creator-ui.focus-workspace .inspector{
  top:88px;bottom:18px;width:min(415px,calc(100vw - 32px))!important;
  background:rgba(30,36,33,.98)!important;
  border:1px solid rgba(235,223,197,.2)!important;
  border-radius:22px!important;
  box-shadow:0 26px 90px rgba(0,0,0,.55)!important;
  backdrop-filter:blur(25px);overflow:hidden;
}
.creator-ui.focus-workspace .input-panel{left:18px}
.creator-ui.focus-workspace .inspector{right:18px}
.creator-ui.focus-workspace .panel-scroll,
.creator-ui.focus-workspace .inspector-scroll{
  padding:25px 25px 30px!important;
  overscroll-behavior:contain
}
.creator-ui.focus-workspace .dock-kicker {font-size:10px!important;letter-spacing:1.4px!important}
.creator-ui.focus-workspace .dock-heading h1 {
  font-family:Georgia,serif;font-size:38px!important;line-height:1.12;
  letter-spacing:-1.1px;font-weight:450;color:#f2ede3
}
.creator-ui.focus-workspace .dock-heading p{
  font-size:13px!important;line-height:1.6!important;color:#a8b3a8!important
}
.creator-ui.focus-workspace label {font-size:12px!important;margin:16px 0 8px!important}
.creator-ui.focus-workspace input,
.creator-ui.focus-workspace textarea,
.creator-ui.focus-workspace select{
  font-size:13px!important;background:#161d19!important;
  border:1px solid rgba(236,227,204,.19)!important;
  border-radius:11px!important;min-height:44px;line-height:1.5;
  padding:11px 14px!important;color:#f2ede5!important
}
.creator-ui.focus-workspace textarea{min-height:170px!important}
.creator-ui.focus-workspace input:focus,
.creator-ui.focus-workspace textarea:focus,
.creator-ui.focus-workspace select:focus{
  border-color:#d6b98c!important;box-shadow:0 0 0 3px rgba(214,185,140,.12)!important
}
.creator-ui.focus-workspace .preset-row{grid-template-columns:1fr 45px!important;gap:9px!important}
.creator-ui.focus-workspace .icon-button{height:44px!important;font-size:18px;background:#303730;border-radius:11px}
.creator-ui.focus-workspace .compile-cta {
  min-height:53px;border-radius:12px;
  padding:0 19px!important;margin-top:18px;
  background:var(--v4-cream)!important;color:#272b27!important;
  font-size:13px!important;font-weight:750!important;box-shadow:0 9px 25px #0003
}
.creator-ui.focus-workspace .compile-cta:hover{transform:translateY(-2px);box-shadow:0 13px 30px #0005}
.creator-ui.focus-workspace .export-actions small{font-size:10px!important;line-height:1.5!important}
.creator-ui.focus-workspace .dock-disclosure>summary,
.creator-ui.focus-workspace .inspector-disclosure>summary{font-size:12px!important;min-height:44px}
.creator-ui.focus-workspace .readiness-card,
.creator-ui.focus-workspace .review-card,
.creator-ui.focus-workspace .direction-card,
.creator-ui.focus-workspace .hero-inspector,
.creator-ui.focus-workspace .creator-state-card{
  border:1px solid var(--v4-line)!important;background:#262e28!important;
  border-radius:15px!important;padding:15px!important;margin-bottom:11px
}
.creator-ui.focus-workspace .inspector-heading .beat-index{font-size:12px!important}
.creator-ui.focus-workspace .direction-card-head span,
.creator-ui.focus-workspace .hero-primitive span,
.creator-ui.focus-workspace .hero-route span{font-size:10px!important;color:#a8b4a8}
.creator-ui.focus-workspace .hero-primitive b{font-size:18px!important}
.creator-ui.focus-workspace .hero-route b{font-size:13px!important}
.creator-ui.focus-workspace .execution-profile{font-size:15px!important}
.creator-ui.focus-workspace .execution-grid span,
.creator-ui.focus-workspace .creator-state-card span{font-size:10px!important}
.creator-ui.focus-workspace .execution-grid b,
.creator-ui.focus-workspace .creator-state-card b{font-size:12px!important}
.creator-ui.focus-workspace .direction-card p,
.creator-ui.focus-workspace .prototype-note p{font-size:12px!important;line-height:1.5}
.creator-ui.focus-workspace .metric-row b{font-size:20px!important}
.creator-ui.focus-workspace .metric-row span{font-size:10px!important}
.creator-ui.focus-workspace .info-block span{font-size:10px!important}
.creator-ui.focus-workspace .info-block p{font-size:12px!important;line-height:1.65!important}
.creator-ui.focus-workspace .prototype-note{opacity:.75}
/* Keep input regions interactive even with the canvas-centered presentation. */
.creator-ui.focus-workspace.scene-open .input-panel,
.creator-ui.focus-workspace.direction-open .inspector{z-index:55}

/* Draw/Edit: Procreate-style unencumbered artboard, tactile tools,
   floating semantic layers, and real drawing interactions left untouched. */
.draw-studio,.page-studio {
  --paper:#f2ecdf;--accent:#d8b78c;--mint:#92cab1;
  background:#171b1a!important;color:#f1eee5!important;
}
.draw-topbar,.page-topbar{
  flex-basis:77px!important;min-height:77px!important;
  grid-template-columns:minmax(175px,.77fr) minmax(0,2.5fr) minmax(275px,1fr)!important;
  gap:clamp(9px,1.1vw,20px)!important;padding:8px 22px!important;
  border-bottom:1px solid var(--v4-line)!important;
  background:rgba(27,32,29,.98)!important;box-shadow:0 2px 15px #0002!important
}
.draw-topbar-start,.draw-topbar-end,.page-topbar-start,.page-topbar-end{gap:8px!important;min-width:0}
.draw-topbar-end,.page-topbar-end{flex-wrap:nowrap}
.draw-back,.draw-secondary,.draw-done,.draw-toolstrip button,
.page-topbar-end button,.page-export-menu>summary{
  min-height:38px!important;padding:9px 13px!important;
  border:1px solid rgba(245,235,214,.12)!important;border-radius:11px!important;
  background:#303631!important;color:#cbd1c7!important;
  font-size:11px!important;line-height:1.15!important;font-weight:600!important;
  white-space:nowrap
}
.draw-back:hover,.draw-secondary:hover,.draw-toolstrip button:hover:not(:disabled),
.page-topbar-end button:hover{background:#454c43!important;color:#fff4e4!important}
.draw-done,.page-export-menu>summary {
  background:var(--v4-cream)!important;color:#252a26!important;
  border-color:var(--v4-cream)!important;font-weight:770!important;padding-inline:18px!important
}
.draw-document span {font-size:10px!important;color:var(--v4-gold)!important;letter-spacing:1.4px!important;font-weight:750}
.draw-document b{font-size:15px!important;color:var(--v4-ink)!important;margin-top:4px!important;font-weight:660}
.draw-toolstrip {
  height:51px;min-height:51px;border:1px solid var(--v4-line)!important;
  border-radius:14px!important;background:#262c28!important;
  gap:4px!important;padding:5px!important;scrollbar-width:thin;scrollbar-color:#526058 transparent
}
.draw-toolstrip button{
  height:38px;flex:0 0 auto;
  background:transparent!important;border-color:transparent!important;
  color:#bbc2b9!important;padding-inline:12px!important
}
.draw-toolstrip button.active{
  background:#ebe5d9!important;color:#222923!important;
  box-shadow:0 4px 12px #0004!important
}
.draw-toolstrip button:hover:not(.active){background:#3a433b!important;color:#f4ece0!important}
.draw-size-control,.draw-preset-control,.draw-color-control{
  font-size:11px!important;color:#bac3b8!important;
  gap:9px!important;padding-inline:10px!important
}
.draw-size-control input{width:75px!important;accent-color:#d8b78c}
.draw-preset-control select {
  height:34px!important;min-width:95px;width:auto!important;
  font-size:10px!important;padding:5px 24px 5px 9px!important;
  border-color:var(--v4-line)!important;background:#1a201c!important;color:#e4e3d9!important
}
.draw-color-control input{width:30px!important;height:30px!important;border-radius:10px!important}
.draw-workspace,.page-workspace {
  background:#171b1a!important;min-height:0!important
}
.draw-stage,.page-stage {
  background:
    radial-gradient(ellipse at 49% 45%,rgba(157,166,151,.10),transparent 48%),
    linear-gradient(145deg,rgba(255,255,255,.015),transparent 50%),
    #171b1a!important
}
.draw-stage{padding:19px 326px 11px 22px!important}
.draw-studio.layers-hidden .draw-stage{padding-right:22px!important}
.draw-artboard {
  max-height:calc(100vh - 135px)!important;
  height:min(calc(100vh - 135px),calc((100vw - 385px)*1.25))!important;
  max-width:calc(100vw - 385px)!important;
  border:1px solid #a19a85!important;border-radius:3px!important;
  box-shadow:0 32px 90px rgba(0,0,0,.39),0 5px 22px rgba(0,0,0,.17)!important;
  background:#f2ede3!important
}
.draw-studio.layers-hidden .draw-artboard{
  height:min(calc(100vh - 135px),calc((100vw - 95px)*1.25))!important;
  max-width:calc(100vw - 95px)!important
}
.draw-layers {
  width:286px!important;top:17px!important;right:17px!important;bottom:17px!important;
  padding:18px 14px!important;
  border:1px solid var(--v4-strong)!important;
  background:rgba(34,40,35,.97)!important;
  box-shadow:0 22px 70px #0007!important;
  border-radius:20px!important;
  backdrop-filter:blur(22px)!important
}
.draw-studio.layers-hidden .draw-layers{transform:translateX(calc(100% + 28px))!important}
.draw-dock-heading span{font-size:10px!important;letter-spacing:1.5px!important;color:var(--v4-gold)!important}
.draw-dock-heading b{font-size:21px!important;letter-spacing:-.48px!important;font-weight:580!important}
.draw-layer-row {
  grid-template-columns:31px minmax(0,1fr) auto!important;gap:10px!important;
  min-height:52px;padding:8px 10px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:12px!important;background:#292f29!important;
  margin-bottom:7px!important;overflow:hidden
}
.draw-layer-row:hover{background:#363e36!important;border-color:#7a8176!important}
.draw-layer-row.active,.draw-layer-row.active-layer {
  background:#3b3b30!important;border-color:#b7a278!important;
  box-shadow:inset 0 0 0 1px rgba(220,185,133,.12)!important
}
.draw-layer-swatch {width:31px!important;height:31px!important;border-radius:9px!important}
.draw-layer-row span{min-width:0}
.draw-layer-row span b{font-size:12px!important;line-height:1.35!important}
.draw-layer-row span small {
  font-size:10px!important;color:#9dab9c!important;line-height:1.35!important;
  overflow:hidden;text-overflow:ellipsis
}
.draw-layer-eye{width:29px!important;height:29px!important;font-size:13px!important;border-radius:8px!important}
.draw-opacity-control,.draw-blend-control {
  font-size:10px!important;color:#acb9ae!important;line-height:1.55
}
.draw-opacity-control input{accent-color:#d8b78c}
.draw-source-layer-group{
  background:#1e251f!important;border-color:var(--v4-line)!important;
  border-radius:12px!important;padding:11px 8px!important
}
.draw-source-heading span,.draw-source-layer-group>summary span{font-size:10px!important}
.draw-source-heading small{font-size:9px!important}
.draw-layer-note {
  margin-top:14px!important;background:#222a23!important;border-color:var(--v4-line)!important;
  border-radius:12px!important;padding:11px!important
}
.draw-layer-note b {font-size:11px!important}
.draw-layer-note p{font-size:10px!important;line-height:1.55!important;color:#a8b3a7!important}
.draw-statusbar,.page-statusbar{font-size:10px!important;color:#a7ada4!important;padding-top:11px!important}
.draw-statusbar kbd{font-size:10px!important}
.draw-viewport-controls{
  right:31px!important;bottom:33px!important;padding:6px!important;
  background:#2d342e!important;border:1px solid var(--v4-strong)!important;
  border-radius:13px!important;box-shadow:0 16px 48px #0007!important
}
.draw-viewport-controls button{height:35px!important;min-width:35px!important;font-size:11px!important;border-radius:8px!important;color:#e5e6db!important}
.draw-viewport-controls small{font-size:10px!important}
.draw-selection-actions,.draw-ai-fix-panel{
  border:1px solid var(--v4-strong)!important;border-radius:15px!important;
  background:rgba(35,41,36,.97)!important;
  box-shadow:0 22px 70px #0007!important
}
.draw-selection-actions button{font-size:11px!important;padding:9px!important;min-height:35px}
.draw-selection-actions>span{font-size:10px!important;color:var(--v4-gold)!important}
.draw-runtime-panel-picker{
  top:91px!important;width:min(650px,calc(100vw - 42px))!important;
  padding:21px!important;border:1px solid var(--v4-strong)!important;
  background:#252b26!important;border-radius:19px!important;
  box-shadow:0 28px 90px #0009!important
}
.draw-runtime-panel-picker-head span b{font-size:19px!important}
.draw-runtime-panel-picker-head span small{font-size:11px!important}
.draw-runtime-panel-picker>p{font-size:11px!important}
.draw-runtime-generate-area{
  background:#1f271f!important;border-color:var(--v4-line)!important;padding:13px!important
}
.draw-runtime-generate-head span b{font-size:12px!important}
.draw-runtime-generate-head span small{font-size:10px!important}
.draw-runtime-panel-option span b,.draw-runtime-generate-option span b{font-size:11px!important}
.draw-runtime-panel-option span small,.draw-runtime-generate-option span small{font-size:10px!important}
.draw-runtime-panel-option em,.draw-runtime-generate-option button{font-size:10px!important}
/* Page composition: use the same visual language, but paper is hero. */
.page-controls {
  min-height:52px;background:#262c28!important;border:1px solid var(--v4-line)!important;
  border-radius:13px!important;padding:5px 9px!important;gap:9px!important
}
.page-controls label {
  font-size:10px!important;color:#aab8a9!important;margin:0!important;gap:6px
}
.page-controls select {
  height:36px!important;min-width:130px!important;
  font-size:11px!important;background:#171e19!important;
  color:#f2ebdc!important;border:1px solid var(--v4-line)!important;
  border-radius:9px!important;padding:6px 25px 6px 10px!important
}
.page-paper-wrap {
  height:min(calc(100vh - 140px),850px)!important;
  max-width:min(calc(100vw - 140px),565px)!important;
  border:1px solid #e0d8c9!important;border-radius:3px!important;
  box-shadow:0 32px 90px #0007!important
}
.page-panel-dock,.page-authority-dock {
  width:299px!important;top:17px!important;bottom:17px!important;
  border:1px solid var(--v4-strong)!important;border-radius:20px!important;
  background:rgba(34,40,35,.97)!important;padding:17px 15px!important;
  box-shadow:0 25px 70px #0007!important;backdrop-filter:blur(22px)!important
}
.page-panel-dock{left:17px!important}.page-authority-dock{right:17px!important}
.page-document-toolbar>div:first-child span{font-size:10px!important;color:var(--v4-gold)!important}
.page-document-toolbar>div:first-child b{font-size:16px!important;margin-top:5px}
.page-document-actions button,.page-panel-choice,.page-document-list button,
.page-panel-dock select,.page-authority-card b{font-size:11px!important}
.page-document-actions button{min-height:35px!important}
.page-panel-choice{border-radius:12px!important;padding:11px!important}
.page-export-popover {
  width:275px!important;padding:13px!important;background:#29312b!important;
  border:1px solid var(--v4-strong)!important;border-radius:15px!important;
  box-shadow:0 25px 70px #0008!important
}
.page-export-popover button{min-height:42px!important;font-size:11px!important}
.page-export-popover small{font-size:10px!important}
.page-authority-card{padding:12px!important;background:#272f28!important}
.page-authority-card span{font-size:9px!important}
.page-authority-card b{font-size:12px!important}
.page-authority-card small,.page-authority-card code{font-size:10px!important;line-height:1.45!important}

/* Progressive disclosure: five core artistic tools visible, optional utilities
   available from More Tools without moving or rewriting their handlers. */
.draw-toolstrip .atelier-advanced{display:none!important}
.draw-toolstrip.atelier-tools-expanded .atelier-advanced{
  display:flex!important;align-items:center
}
.draw-toolstrip #drawAdvancedToolsToggle{
  display:inline-flex!important;align-items:center;justify-content:center;
  border:1px solid rgba(214,184,140,.36)!important;
  background:#373b31!important;color:#e9cfab!important;
  margin-left:5px;font-size:11px!important;font-weight:720!important
}
.draw-toolstrip.atelier-tools-expanded #drawAdvancedToolsToggle{
  background:var(--v4-cream)!important;color:#262b28!important
}
.draw-toolstrip.atelier-tools-expanded{
  background:#303930!important;box-shadow:inset 0 0 0 1px rgba(219,191,155,.08)
}
.draw-toolstrip .atelier-advanced[hidden]{display:none!important}
/* The working artboard and any panel remain in the same DOM and state. */
.creator-ui.focus-workspace.immersive-workspace .canvas-wrap{padding:0!important}
.creator-ui.focus-workspace.immersive-workspace #viewport{
  border:0!important;border-radius:0!important;height:100vh!important
}
.creator-ui.focus-workspace.immersive-workspace .focus-exit{
  padding:12px 16px!important;border-radius:13px!important;font-size:12px!important;
  background:rgba(32,38,33,.92)!important
}
@media(min-width:981px) and (max-height:780px){
  .creator-ui.focus-workspace .topbar{height:64px!important;min-height:64px!important}
  .creator-ui.focus-workspace .stage-head{height:68px!important;min-height:68px!important;padding-top:6px!important;padding-bottom:6px!important}
  .creator-ui.focus-workspace #viewport{min-height:450px!important}
  .creator-ui.focus-workspace .creative-hud{top:70px!important}
  .creator-ui.focus-workspace .timeline-wrap{padding-top:7px!important;padding-bottom:9px!important}
  .creator-ui.focus-workspace .beat-card{min-height:87px!important}
  .creator-ui.focus-workspace .beat-thumb{height:62px!important}
  .creative-prompt-dock{bottom:29px!important}
}
@media(max-width:1370px){
  .creator-ui.focus-workspace .brand{min-width:175px!important}
  .creator-ui.focus-workspace .topbar{gap:10px!important;padding-inline:15px!important}
  .creator-ui.focus-workspace .workflow-step{padding-inline:9px!important}
  .creator-ui.focus-workspace .workflow-step b{font-size:10px!important}
  .creator-ui.focus-workspace .chrome-button{padding-inline:10px!important}
  .creator-ui.focus-workspace .creative-stage-title{min-width:225px;max-width:400px}
  .creator-ui.focus-workspace .beat-readiness-line #currentExecutionDetail{display:none}
  .creator-ui.focus-workspace .artist-toolbar{max-width:58vw}
}
@media(max-width:1090px){
  .creator-ui.focus-workspace .topbar{height:auto!important;min-height:70px!important;flex-wrap:wrap!important;justify-content:space-between!important;padding:10px 13px!important;row-gap:9px!important}
  .creator-ui.focus-workspace .brand{min-width:0!important}
  .creator-ui.focus-workspace .workflow-nav{
    order:3!important;flex:1 0 100%!important;width:100%!important;
    justify-content:center!important;max-width:100%!important;margin:0!important;
    overflow-x:auto;scrollbar-width:none
  }
  .creator-ui.focus-workspace .topbar-actions{margin-left:auto!important}
  .creator-ui.focus-workspace #focusToggle{display:none}
  .creator-ui.focus-workspace .stage-head{height:auto!important;min-height:80px!important;flex-wrap:wrap!important}
  .creator-ui.focus-workspace .creative-stage-title{min-width:0!important;max-width:100%;flex:1 1 270px}
  .creator-ui.focus-workspace .artist-toolbar{max-width:100%!important;overflow-x:auto;overflow-y:visible}
  .creator-ui.focus-workspace .camera-tools button{min-width:max-content}
  .creator-ui.focus-workspace .creative-hud{width:195px!important;max-width:195px!important;padding:11px!important}
  .creator-ui.focus-workspace .input-panel,
  .creator-ui.focus-workspace .inspector{top:133px!important;bottom:10px!important;width:min(390px,92vw)!important}
  .draw-topbar,.page-topbar {
    grid-template-columns:auto minmax(0,1fr) auto!important;
    gap:7px!important;padding:8px 12px!important
  }
  .draw-document{display:none}
  .draw-stage{padding-right:282px!important}
  .draw-layers{width:256px!important}
  .draw-artboard{max-width:calc(100vw - 325px)!important}
  .draw-studio.layers-hidden .draw-artboard{max-width:calc(100vw - 70px)!important}
}
@media(max-width:900px){
  .creator-ui.focus-workspace .topbar-actions .status{display:none}
  .creator-ui.focus-workspace .brand-copy b{font-size:13px!important}
  .creator-ui.focus-workspace .brand-copy small{font-size:9px!important}
  .creator-ui.focus-workspace .canvas-wrap{padding-inline:9px!important}
  .creator-ui.focus-workspace #viewport{min-height:480px!important;border-radius:18px!important}
  .creator-ui.focus-workspace .creative-hud{opacity:.62;width:155px!important;max-width:155px!important;top:72px!important}
  .creator-ui.focus-workspace .creative-hud .hud-main-title{font-size:14px!important}
  .creator-ui.focus-workspace .creative-hud p,
  .creator-ui.focus-workspace .creative-hud>small{font-size:9px!important}
  .creator-ui.focus-workspace .beat-card{min-width:232px!important}
  .draw-topbar,.page-topbar{
    flex-basis:auto!important;grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"start end" "tools tools"!important;
    min-height:118px!important
  }
  .draw-toolstrip{grid-area:tools!important;width:100%;justify-content:flex-start!important}
  .draw-topbar-start{grid-area:start}.draw-topbar-end{grid-area:end}
  .draw-stage,.draw-studio.layers-hidden .draw-stage{padding:15px 10px!important}
  .draw-layers{
    width:min(320px,90vw)!important;right:9px!important;top:9px!important;bottom:9px!important
  }
  .draw-artboard,.draw-studio.layers-hidden .draw-artboard{
    height:min(calc(100vh - 175px),calc(96vw*1.25))!important;
    max-width:96vw!important
  }
  .page-topbar-start{grid-area:start}.page-topbar-end{grid-area:end}
  .page-controls{grid-area:tools;max-width:100%;width:100%;overflow-x:auto}
  .page-panel-dock,.page-authority-dock{width:min(320px,90vw)!important}
  .page-paper-wrap{max-width:min(90vw,565px)!important;height:min(calc(100vh - 190px),780px)!important}
}
@media(max-width:620px){
  .creator-ui.focus-workspace .topbar{padding:9px!important}
  .creator-ui.focus-workspace .mark{width:36px;height:36px;font-size:14px}
  .creator-ui.focus-workspace .topbar-actions{gap:5px!important}
  .creator-ui.focus-workspace .topbar-actions .chrome-button,
  .creator-ui.focus-workspace .export-button{min-height:34px;font-size:10px!important;padding:0 9px!important}
  .creator-ui.focus-workspace .topbar-actions a[href*="contact-qa"]{display:none}
  .creator-ui.focus-workspace .workflow-nav{justify-content:space-between!important;padding:3px}
  .creator-ui.focus-workspace .workflow-step{min-width:0!important;flex:1 0 auto;padding-inline:8px!important;font-size:10px!important}
  .creator-ui.focus-workspace .workflow-step b{font-size:10px!important}
  .creator-ui.focus-workspace .stage-head{padding:10px 9px!important;gap:8px}
  .creator-ui.focus-workspace .creative-stage-title{padding:7px!important;max-width:100%}
  .creator-ui.focus-workspace .artist-toolbar{width:100%;overflow-x:auto;border-radius:13px}
  .creator-ui.focus-workspace .camera-tools button{font-size:10px!important;padding-inline:11px!important}
  .creator-ui.focus-workspace #viewport{min-height:445px!important}
  .creator-ui.focus-workspace .creative-hud{display:none!important}
  .creative-prompt-dock{bottom:26px!important;width:calc(100% - 23px)!important}
  .creative-prompt-dock>button{min-height:61px!important;padding:10px!important}
  .creative-prompt-copy b{font-size:12px!important}
  .creative-prompt-copy small{display:none!important}
  .creator-ui.focus-workspace .canvas-hint{display:none}
  .creator-ui.focus-workspace .timeline-wrap{padding-inline:10px!important}
  .creator-ui.focus-workspace .beat-card{min-width:220px!important}
  .draw-topbar,.page-topbar{padding:6px 8px!important}
  .draw-back,.draw-secondary,.draw-done,.draw-toolstrip button,
  .page-topbar-end button,.page-export-menu>summary{
    font-size:10px!important;padding:7px 9px!important
  }
  #drawClear{display:none}
  .draw-viewport-controls{right:12px!important;bottom:13px!important}
  .draw-statusbar,.page-statusbar{font-size:9px!important}
  .page-controls{padding:4px!important}
  .page-controls select{min-width:110px!important}
  .page-topbar-end{gap:4px!important}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* Interactions should never become illegible on overlays or artboards. */
.draw-toolstrip button:disabled{opacity:.38}
.draw-studio:not(.open),.page-studio:not(.open){display:none!important}

/* Full-width centering for the WebGL-unavailable fall-back. */
.creator-ui.focus-workspace .empty-state {
  inset:0!important;width:100%!important;max-width:none!important;
  justify-items:center!important;align-content:center!important;
  padding:28px!important
}
.creator-ui.focus-workspace .empty-state b{max-width:520px}
.creator-ui.focus-workspace .empty-state span{max-width:400px}

/* Avoid the original 12px anchored stage-header width spilling off
   mid-size tablets when the Page/Draw studio overlay is open. */
@media(max-width:900px){
  .creator-ui.focus-workspace .stage-head{
    left:0!important;right:0!important;width:100%!important;
    max-width:100%!important;margin:0!important;
    padding-left:10px!important;padding-right:10px!important
  }
  html,body{max-width:100%;overflow-x:clip}
}