:root{
  --ink:#f4efe6;--muted:#a39d91;--dim:#6f6a62;
  --bg:#151513;--chrome:#1b1b18;--panel:#20201c;--panel2:#26251f;
  --line:#38362f;--line-soft:#2b2a25;--paper:#ece5d8;
  --accent:#e7b86b;--accent-soft:#3a2f1c;--mint:#7fd0ad;--review:#d7a65e;
  --a:#e5be79;--b:#99afd4;--prop:#70aef3;
  --shadow:0 18px 50px rgba(0,0,0,.28)
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input,textarea,select{font:inherit}button{cursor:pointer}
body{background:
  radial-gradient(circle at 14% -20%,rgba(231,184,107,.08),transparent 32%),
  radial-gradient(circle at 84% 0%,rgba(132,157,190,.06),transparent 25%),
  var(--bg)}
button{border:0}
.app{min-height:100vh}

.topbar{height:62px;display:flex;align-items:center;gap:18px;padding:0 18px;border-bottom:1px solid var(--line-soft);background:rgba(20,20,18,.96);backdrop-filter:blur(18px);position:sticky;top:0;z-index:30}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-width:208px}
.mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--paper);color:#22201b;font-weight:900;font-size:9px;letter-spacing:-.4px}
.brand-copy b,.brand-copy small{display:block}.brand-copy b{font-size:12px;letter-spacing:-.15px}.brand-copy small{font-size:8px;color:var(--muted);margin-top:2px}
.mode-crumb{display:flex;align-items:center;gap:7px;margin:auto;color:#716d65;font-size:8px;letter-spacing:.45px;text-transform:uppercase}
.mode-crumb i{font-style:normal;color:#4c4943}.mode-crumb .active{color:var(--accent);font-weight:800}
.topbar-actions{display:flex;align-items:center;gap:8px}
.status{display:flex;align-items:center;gap:6px;color:#9f9a90;font-size:7px;padding:6px 8px;border-radius:999px;border:1px solid var(--line);background:#191916;white-space:nowrap}
.dot{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px rgba(127,208,173,.45)}
.export-button{padding:8px 12px;border-radius:9px;background:var(--paper);color:#201e19;font-size:8px;font-weight:800}
.export-button:disabled{opacity:.38;cursor:not-allowed}
.truth{display:none}

/* Editable creator-project package. One compact menu keeps file actions out of the artboard. */
.project-menu{position:relative}.project-menu>summary{list-style:none;display:flex;align-items:center}.project-menu>summary::-webkit-details-marker{display:none}.project-menu[open]>summary{border-color:#6d5a39;color:#e7c78f;background:#292319}
.project-popover{position:absolute;right:0;top:calc(100% + 9px);z-index:60;width:284px;padding:11px;border:1px solid var(--line);border-radius:12px;background:#1a1a17;box-shadow:0 18px 52px rgba(0,0,0,.44);display:grid;gap:7px}
.project-popover>b{font-family:Georgia,"Times New Roman",serif;font-size:14px;font-weight:500}.project-popover>small{font-size:7px;line-height:1.5;color:#817a71;margin-bottom:2px}.project-popover button{display:flex;align-items:center;justify-content:space-between;gap:9px;width:100%;padding:8px 9px;border:1px solid #38362f;border-radius:8px;background:#20201c;color:#d8d1c7;font-size:8px;text-align:left}.project-popover button:hover:not(:disabled){border-color:#6d5a39;color:#f0ca85}.project-popover button:disabled{opacity:.42;cursor:not-allowed}.project-popover button>small{font-size:6px;color:#817a71}.project-popover kbd{font:inherit;font-size:6.5px;color:#827b72;border:1px solid #3d3a34;border-radius:5px;padding:2px 4px;background:#171714}.project-popover>span{min-height:14px;padding-top:3px;border-top:1px solid #2c2a25;color:#746e66;font-size:6.5px;line-height:1.45}.project-popover>span.ready{color:var(--mint)}.project-popover>span.error{color:#e49b9b}
.project-saved-label{margin:3px 0 -2px;font-size:6px;letter-spacing:.65px;text-transform:uppercase;color:#756f66}.project-popover select{padding:8px 9px;border-radius:8px;font-size:7px;background-position:calc(100% - 13px) 12px,calc(100% - 9px) 12px}.project-file-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding-top:7px;border-top:1px solid #2c2a25}.project-file-actions button{font-size:7px;padding:7px}.project-file-actions kbd{font-size:5.8px}
@media(max-width:980px){.project-menu{display:none}}

.workspace{display:grid;grid-template-columns:286px minmax(640px,1fr) 284px;min-height:calc(100vh - 208px)}
.input-panel,.inspector{background:rgba(25,25,22,.93);min-width:0}
.input-panel{border-right:1px solid var(--line-soft)}.inspector{border-left:1px solid var(--line-soft)}
.panel-scroll,.inspector-scroll{height:100%;overflow:auto;padding:18px}
.dock-heading{margin-bottom:19px}.dock-kicker,.stage-kicker{font-size:7px;letter-spacing:1.45px;color:var(--accent);font-weight:800}
.dock-heading h1{font-family:Georgia,"Times New Roman",serif;font-weight:500;font-size:27px;line-height:1;margin:8px 0 8px;letter-spacing:-1px}
.dock-heading p{margin:0;color:var(--muted);font-size:8.5px;line-height:1.55;max-width:240px}
label{display:flex;align-items:center;justify-content:space-between;font-size:7px;color:#d5cfc5;font-weight:750;margin:12px 0 6px;letter-spacing:.25px}
label span{color:#777169;font-weight:500}
input,textarea,select{width:100%;border:1px solid var(--line);background:#161613;color:var(--ink);border-radius:10px;padding:10px 11px;outline:none}
input:focus,textarea:focus,select:focus{border-color:#756a57;box-shadow:0 0 0 3px rgba(231,184,107,.08)}
textarea{height:168px;resize:vertical;line-height:1.55;font-size:8.5px}
select{font-size:8px;appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8e887f 50%),linear-gradient(135deg,#8e887f 50%,transparent 50%);background-position:calc(100% - 14px) 14px,calc(100% - 10px) 14px;background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.preset-row{display:grid;grid-template-columns:1fr 38px;align-items:end;gap:7px}.preset-field label{margin-bottom:6px}
.icon-button{height:37px;border:1px solid var(--line);background:#1c1c19;color:#cfc8be;border-radius:10px;font-size:13px}
.compile-cta{margin-top:10px;width:100%;display:flex;align-items:center;justify-content:space-between;padding:11px 13px;border-radius:10px;background:linear-gradient(180deg,#efc77f,#dda95d);color:#231d13;font-size:9px;font-weight:850;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.compile-cta b{font-size:11px}.compile-cta:hover{filter:brightness(1.04)}
.export-actions{margin-top:7px}.export-actions small{color:#656159;font-size:6.5px;line-height:1.45}

.dock-disclosure,.pipeline-disclosure,.inspector-disclosure{margin-top:15px;border-top:1px solid var(--line-soft)}
.dock-disclosure>summary,.pipeline-disclosure>summary,.inspector-disclosure>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:12px 0;color:#b9b2a8;font-size:8px;font-weight:750}
.dock-disclosure>summary::-webkit-details-marker,.pipeline-disclosure>summary::-webkit-details-marker,.inspector-disclosure>summary::-webkit-details-marker{display:none}
.dock-disclosure>summary::after,.pipeline-disclosure>summary::after,.inspector-disclosure>summary::after{content:"+";font-size:13px;color:#777169;font-weight:400}
.dock-disclosure[open]>summary::after,.pipeline-disclosure[open]>summary::after,.inspector-disclosure[open]>summary::after{content:"–"}
.dock-disclosure summary em{font-style:normal;color:var(--mint);font-size:7px}

.readiness-card{padding:11px;border:1px solid var(--line);border-radius:11px;background:#1a1a17}
.section-title-row{display:flex;justify-content:space-between;gap:8px}.section-title-row>div>b{display:block;font-size:8px;margin-top:3px}.eyebrow{font-size:6px;letter-spacing:1px;color:#857d70}.readiness-percent{font-size:15px;font-weight:800}
.readiness-bar{height:3px;background:#11110f;border-radius:99px;margin:9px 0;overflow:hidden}.readiness-bar i{display:block;height:100%;background:var(--mint);width:0}
.primitive-readiness{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.primitive-pill{display:flex;align-items:center;justify-content:space-between;gap:5px;padding:5px 6px;border-radius:7px;border:1px solid #313129;background:#171713;font-size:5.7px}
.primitive-pill span{font-size:5.2px;text-transform:uppercase}.primitive-pill.native{border-color:#2b5647}.primitive-pill.native span{color:var(--mint)}.primitive-pill.review{border-color:#5a4726}.primitive-pill.review span{color:#e2bd78}.primitive-pill.pending{opacity:.65}
.readiness-note{font-size:6.3px;line-height:1.45;color:#777169;margin:8px 0 0}

.review-card{margin-top:7px;padding:9px;border:1px solid #524226;border-radius:11px;background:#1c1913;display:grid;grid-template-columns:32px 1fr auto;gap:8px;align-items:center}
.review-icon{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:#332812;color:#e5bd72;border:1px solid #5a4726;font-size:7px;font-weight:900}
.review-copy span,.review-copy b,.review-copy small{display:block}.review-copy span{font-size:5.3px;color:#9d8150;letter-spacing:.7px}.review-copy b{font-size:7px;margin:2px 0}.review-copy small{font-size:5.7px;color:#81796d;line-height:1.35}
.review-card a{font-size:6px;color:#e5bd72;text-decoration:none;border:1px solid #5a4726;border-radius:7px;padding:5px 6px}
.comfy-release-card{grid-template-columns:32px minmax(0,1fr) auto}
.comfy-release-badge{font-size:5.4px;font-weight:900;letter-spacing:.55px;border:1px solid #51472f;border-radius:999px;padding:5px 7px;color:#c8b58d;background:#292419}
.comfy-release-badge.ready{border-color:#48664b;color:#a8d5a9;background:#17251a}.comfy-release-badge.blocked{border-color:#6b4538;color:#e0a58f;background:#2b1c17}
.comfy-release-stacks{grid-column:1/-1;display:grid;gap:5px}
.comfy-release-stack{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px;padding:6px 7px;border:1px solid #383329;border-radius:8px;background:#15140f}
.comfy-release-stack b,.comfy-release-stack small{display:block}.comfy-release-stack b{font-size:6.2px}.comfy-release-stack small{font-size:5.4px;color:#81796d;line-height:1.35}.comfy-release-stack em{font-size:5.2px;font-style:normal;color:#c8b58d;align-self:start}
.review-thumbs{grid-column:1/-1;display:flex;gap:5px;padding-top:7px;border-top:1px solid rgba(90,71,38,.55)}
.review-thumb{display:flex;align-items:center;gap:5px;padding:4px 5px;border:1px solid #44371f;border-radius:7px;background:#161512;min-width:0}.review-thumb img{width:26px;height:36px;object-fit:contain;background:#ddd7cb;border-radius:4px}.review-thumb span,.review-thumb b,.review-thumb small{display:block}.review-thumb span{font-size:5.2px;color:#a78d60}.review-thumb b{font-size:6px;margin:1px 0}.review-thumb small{font-size:4.8px;color:#6f685f}.review-thumb .safe{color:var(--mint)}

.scope{padding-top:10px}.scope>b{font-size:7px}.scope small{display:block;margin-top:6px;color:#69635b;font-size:5.7px;line-height:1.5}
.chips{display:flex;flex-wrap:wrap;gap:3px;margin-top:6px}.chips span{padding:4px 5px;border:1px solid var(--line);border-radius:99px;font-size:5.1px;color:#999289}.chips span.native{border-color:#315848;color:#9cd6bc}.chips span.review{border-color:#5a4726;color:#d7b77b}
.metric-row{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:9px}.metric-row>div{padding:7px;border:1px solid var(--line-soft);border-radius:8px;background:#171713}.metric-row b,.metric-row span{display:block}.metric-row b{font-size:11px}.metric-row span{font-size:5.4px;color:#6d675f;margin-top:2px}
.stage-panel{min-width:0;background:#141412;position:relative;display:flex;flex-direction:column}
.stage-head{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 14px;border-bottom:1px solid var(--line-soft);background:rgba(22,22,19,.95)}
.stage-title{min-width:220px}.stage-title h2{font-size:13px;margin:3px 0 0;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.beat-readiness-line{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:6.5px;color:#706b63;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.beat-status-badge{flex:0 0 auto;padding:3px 5px;border-radius:999px;border:1px solid var(--line);font-size:5.5px;font-weight:850;text-transform:uppercase;letter-spacing:.5px}
.beat-status-badge.native{color:var(--mint);border-color:#2f5c4a;background:#15251f}.beat-status-badge.review{color:#e0bc79;border-color:#594725;background:#221d13}.beat-status-badge.pending,.beat-status-badge.idle{color:#969087}.beat-status-badge.unsupported{color:#e49b9b;border-color:#66403e}.beat-status-badge.visual-fail{color:#f2b2aa;border-color:#7d413b;background:#2a1715}

.camera-tools{display:flex;gap:5px;align-items:stretch;justify-content:flex-end}
.tool-cluster{padding:5px;border:1px solid #302f29;border-radius:9px;background:#181815}.tool-label{display:block;margin:0 0 4px 2px;font-size:5px;letter-spacing:1px;color:#5e5a53;font-weight:850}
.tool-row{display:flex;gap:3px;flex-wrap:wrap}.camera-tools button{padding:6px 7px;border-radius:7px;border:1px solid #34332d;background:#20201c;color:#bdb6ac;font-size:6.5px;font-weight:700}
.camera-tools button:hover{border-color:#5a554d;color:#efe8de}.camera-tools button.active{border-color:#8a7044;color:#f0ca85;background:#2a2317}.camera-tools .edit-toggle.active,.camera-tools .mode-toggle.active{border-color:#3e6e5b;color:#9ddcbe;background:#16261f}.camera-tools button:disabled{opacity:.34;cursor:not-allowed}

.canvas-wrap{flex:1;display:flex;flex-direction:column;min-height:0;padding:12px 14px 0}
#viewport{position:relative;flex:1;min-height:500px;overflow:hidden;border:1px solid #34312a;border-radius:14px;background:
  radial-gradient(circle at 50% 38%,rgba(255,255,255,.03),transparent 36%),
  #0f0f0e;box-shadow:var(--shadow)}
#viewport canvas{display:block;width:100%!important;height:100%!important}
.panel-frame{display:none;position:absolute;z-index:3;border:1px solid rgba(231,184,107,.68);box-shadow:0 0 0 9999px rgba(6,6,5,.42);pointer-events:none;border-radius:2px}.panel-mode .panel-frame{display:block}.panel-frame span{position:absolute;top:7px;left:8px;font-size:5px;letter-spacing:1.1px;color:#e7c88f;background:rgba(18,17,14,.8);padding:4px 6px;border-radius:6px}
.empty-state{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:5px;color:#6c675f;pointer-events:none}.empty-state b{font-family:Georgia,serif;font-weight:500;font-size:16px;color:#a7a095}.empty-state span{font-size:7px}
.stage-hud{position:absolute;z-index:5;top:12px;padding:6px 8px;border-radius:8px;border:1px solid rgba(66,62,54,.75);background:rgba(20,20,17,.72);backdrop-filter:blur(9px);max-width:180px;pointer-events:none}.hud-left{left:12px}.hud-right{right:12px;text-align:right}.stage-hud span,.stage-hud b,.stage-hud small{display:block}.stage-hud span{font-size:4.8px;letter-spacing:1px;color:#676158}.stage-hud b{font-size:7px;margin:2px 0}.stage-hud small{font-size:5.4px;color:#817a70}.stage-hud.native{border-color:#315848}.stage-hud.review{border-color:#5a4726}
.canvas-footer{height:36px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#716b63;font-size:5.8px}
.cast-legend{display:flex;align-items:center;gap:10px}.cast-legend span{display:flex;align-items:center;gap:4px}.swatch{width:6px;height:6px;border-radius:50%}.swatch.a{background:var(--a)}.swatch.b{background:var(--b)}.swatch.prop{background:var(--prop)}
.canvas-hint{text-align:right}

.pipeline-disclosure{margin:0 14px 9px}.pipeline-disclosure>summary{padding:8px 0;font-size:6px;color:#57534d}.execution-rail{display:flex;align-items:center;gap:7px;padding:7px 8px 9px}.execution-rail>em{height:1px;flex:1;background:#312f2a;max-width:44px}.rail-step{display:flex;align-items:center;gap:6px;color:#787269}.rail-step>i{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;border:1px solid #3a3832;font-style:normal;font-size:6px}.rail-step b,.rail-step small{display:block;white-space:nowrap}.rail-step b{font-size:6px}.rail-step small{font-size:5px;color:#5d5851;margin-top:1px}.rail-step.done>i{border-color:#315848;color:var(--mint)}.rail-step.active>i{border-color:#7e653d;color:var(--accent)}.rail-step.review>i{border-color:#5a4726;color:#d8b671}

.inspector-scroll{padding:18px}
.inspector-heading{margin-bottom:11px}.beat-index{font-family:Georgia,serif;font-size:16px;margin-top:6px}
.hero-inspector{padding:11px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(145deg,#24231e,#1b1b18);margin-bottom:7px}
.hero-primitive span,.hero-route span{display:block;font-size:5.5px;letter-spacing:.8px;color:#756e64;text-transform:uppercase}.hero-primitive b{display:block;font-size:17px;letter-spacing:-.6px;margin-top:3px;overflow-wrap:anywhere}.hero-route{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:7px;margin-top:12px;padding-top:9px;border-top:1px solid #35332c}.hero-route b{display:block;font-size:8px;margin-top:2px}.hero-route i{font-style:normal;color:#5c574f;padding-bottom:1px}
.direction-card{padding:11px;border:1px solid var(--line);border-radius:12px;background:#1b1b18;margin-bottom:7px}.direction-card-head{display:flex;align-items:center;justify-content:space-between;font-size:6px;color:#8c857a}.execution-state{font-size:5.3px;font-weight:850;letter-spacing:.5px;padding:3px 5px;border-radius:999px;border:1px solid var(--line);text-transform:uppercase}.execution-state.native{color:var(--mint);border-color:#315848}.execution-state.review{color:#e2bd78;border-color:#5a4726}.execution-state.unsupported{color:#e49b9b;border-color:#66403e}
.execution-profile{display:block;font-size:9px;margin:8px 0 4px}.direction-card>p{margin:0 0 9px;color:#928b81;font-size:6.5px;line-height:1.45}
.execution-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}.execution-grid>div{padding-top:6px;border-top:1px solid #302f29}.execution-grid span,.execution-grid b{display:block}.execution-grid span{font-size:5px;color:#6b655d;text-transform:uppercase;letter-spacing:.6px}.execution-grid b{font-size:6.4px;margin-top:2px;overflow-wrap:anywhere}
.creator-state-card{display:grid;grid-template-columns:1.3fr .8fr .8fr;gap:5px;margin-bottom:7px}.creator-state-card>div{padding:8px;border:1px solid var(--line-soft);border-radius:9px;background:#181815}.creator-state-card span,.creator-state-card b{display:block}.creator-state-card span{font-size:5px;color:#6c665e;text-transform:uppercase}.creator-state-card b{font-size:6.3px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inspector-disclosure{margin-top:8px}.info-block{padding:8px;border:1px solid var(--line-soft);border-radius:9px;background:#181815;margin-bottom:5px}.info-block>span{display:block;font-size:5px;letter-spacing:.75px;text-transform:uppercase;color:#6d675f;margin-bottom:4px}.info-block p{font-size:6.5px;line-height:1.45;color:#a29b90;margin:0}
.rule-trace-block.creator-hidden{display:none}.rule-summary{font-size:6px;color:#81796e;margin-bottom:5px}.rules{display:grid;gap:3px}.rules em{font-size:6px;color:#6f685f}.rule-row{padding:5px;border:1px solid #302e29;border-radius:7px;font-size:5.6px}.rule-row.pass{border-color:#315848}.rule-row.fail{border-color:#66403e}.rule-row.cost{border-color:#5a4726}.rule-row.na{opacity:.62}
.prototype-note{display:flex;gap:7px;align-items:flex-start;padding:9px 2px;color:#6c665e}.prototype-note p{font-size:6px;line-height:1.5;margin:0}.tiny-dot{width:5px;height:5px;border-radius:50%;background:var(--mint);margin-top:2px;flex:0 0 auto}
.timeline-wrap{border-top:1px solid var(--line-soft);background:#171714;padding:10px 14px 13px}
.timeline-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:8px}.timeline-head>div:first-child .dock-kicker,.timeline-head>div:first-child b,.timeline-head>div:first-child span{display:block}.timeline-head>div:first-child b{font-family:Georgia,serif;font-size:12px;margin-top:2px}.timeline-head>div:first-child span:last-child{font-size:5.8px;color:#6f685f;margin-top:2px}
.timeline-key{display:flex;gap:8px}.timeline-key span{display:flex;align-items:center;gap:4px;font-size:5.7px;color:#716b63}.timeline-key i{width:6px;height:6px;border-radius:2px}.timeline-key i.native{background:var(--mint)}.timeline-key i.review{background:var(--review)}
.timeline{display:flex;gap:7px;overflow-x:auto;padding-bottom:3px}
.beat-card{position:relative;min-width:188px;max-width:220px;padding:10px;border-radius:10px;border:1px solid #302f29;background:#1c1c18;color:var(--ink);text-align:left;transition:.15s ease}
.beat-card:hover{background:#23221e;transform:translateY(-1px)}.beat-card.active{border-color:#8b7044;background:#252117;box-shadow:0 0 0 1px rgba(231,184,107,.08)}
.beat-card.native{border-left:3px solid #4ea982}.beat-card.review{border-left:3px solid #c3904d}.beat-card.unsupported{border-left:3px solid #a66363}
.beat-card{display:grid;grid-template-columns:42px minmax(0,1fr);gap:9px;align-items:stretch}.beat-frame-mark{border:1px solid #3a382f;border-radius:8px;background:linear-gradient(160deg,#2d2b24,#171713);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:58px}.beat-frame-mark strong{font-family:Georgia,serif;font-size:17px;font-weight:500;color:#d7cdbf}.beat-frame-mark em{font-style:normal;font-size:5px;color:#7c756b;margin-top:2px}.beat-copy{min-width:0;display:flex;flex-direction:column;justify-content:center}.beat-copy small,.beat-copy b,.beat-copy span{display:block}.beat-copy small{font-size:5.2px;color:#756f66;padding-right:45px}.beat-copy>b{font-size:8px;margin:4px 0}.beat-copy>span:not(.beat-lock){font-size:6px;line-height:1.35;color:#999188;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.beat-native-tag{position:absolute;right:7px;top:7px;padding:3px 4px;border-radius:99px;border:1px solid #3b3932;color:#807a71!important;font-size:4.8px!important;font-weight:850;text-transform:uppercase}.beat-card.native .beat-native-tag{color:#8cd2b4!important;border-color:#315848}.beat-card.review .beat-native-tag{color:#d9b673!important;border-color:#5a4726}.beat-card.visual-fail{border-left:3px solid #b95f54}.beat-card.visual-fail .beat-native-tag{color:#efaaa1!important;border-color:#7d413b;background:#251614}
.beat-lock{margin-top:5px!important;color:#c9a769!important;font-size:5px!important}

#viewport.edit-mode canvas{cursor:grab}#viewport.edit-mode.dragging canvas{cursor:grabbing}

@media(max-width:1220px){
  .workspace{grid-template-columns:260px minmax(560px,1fr) 258px}.brand{min-width:180px}.mode-crumb{display:none}
  .camera-tools{max-width:530px;overflow-x:auto}
}
@media(max-width:980px){
  .workspace{grid-template-columns:250px 1fr}.inspector{grid-column:1/-1;border-left:0;border-top:1px solid var(--line-soft)}
  .inspector-scroll{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:7px}.inspector-heading,.hero-inspector,.prototype-note{grid-column:1/-1}.direction-card,.creator-state-card{margin:0}
}
@media(max-width:720px){
  .topbar{height:58px;padding:0 11px}.brand-copy small,.status{display:none}.topbar-actions{margin-left:auto}
  .workspace{display:block}.input-panel,.inspector{border:0;border-bottom:1px solid var(--line-soft)}.panel-scroll,.inspector-scroll{height:auto}
  .stage-head{display:block}.camera-tools{margin-top:9px;max-width:none;overflow:visible;display:grid;grid-template-columns:1fr}.tool-row{flex-wrap:wrap}
  .canvas-wrap{padding:9px 9px 0}#viewport{min-height:56vh}.inspector-scroll{display:block}
  .timeline-wrap{padding:9px}.review-card{grid-template-columns:32px 1fr}.review-card a{grid-column:1/-1;text-align:center}
}

/* Creator benchmark pass: canvas-first focus workspace */
.document-title{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;pointer-events:none}
.document-title b{font-size:8px;font-weight:750;color:#c7c1b7;max-width:300px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.document-mode{font-size:5.5px;letter-spacing:1.15px;color:#777169;font-weight:850}
.chrome-button{padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:#191916;color:#9d978f;font-size:7px;font-weight:750}
.chrome-button:hover{border-color:#5a554d;color:#f0ebe3}.chrome-button.active{color:#f1c77e;border-color:#715a36;background:#241e14}
.topbar-actions{margin-left:auto}.topbar .status{width:22px;height:22px;padding:0;display:grid;place-items:center}.topbar .status .dot{margin:0}.topbar .status #runtimeBadgeText{display:none}

.creator-ui.focus-workspace .workspace{grid-template-columns:1fr}
.creator-ui.focus-workspace .stage-panel{grid-column:1}
.creator-ui.focus-workspace .input-panel,
.creator-ui.focus-workspace .inspector{
  position:fixed;top:62px;bottom:132px;width:302px;z-index:26;
  box-shadow:0 20px 50px rgba(0,0,0,.42);
  transition:transform .2s ease,opacity .2s ease;
  opacity:.98
}
.creator-ui.focus-workspace .input-panel{left:0;transform:translateX(-102%);border-right:1px solid var(--line)}
.creator-ui.focus-workspace .inspector{right:0;transform:translateX(102%);border-left:1px solid var(--line)}
.creator-ui.focus-workspace.scene-open .input-panel{transform:translateX(0)}
.creator-ui.focus-workspace.direction-open .inspector{transform:translateX(0)}
.creator-ui.focus-workspace .panel-scroll,.creator-ui.focus-workspace .inspector-scroll{height:100%}

.creator-ui.focus-workspace .stage-head{min-height:58px;padding:7px 14px;background:#171714}
.creator-ui.focus-workspace .stage-title h2{font-size:12px}
.creator-ui.focus-workspace .beat-readiness-line{margin-top:4px}
.artist-toolbar{position:relative;overflow:visible}
.artist-toolbar .core-tools{padding:3px;background:#1d1d19;border-color:#34322c;box-shadow:0 8px 24px rgba(0,0,0,.22)}
.artist-toolbar .core-tools .tool-row{flex-wrap:nowrap}
.artist-toolbar .core-tools button{min-width:44px}
.artist-toolbar .core-tools #moreToggle{min-width:34px;padding-left:8px;padding-right:8px}
.artist-toolbar .secondary-tools{
  display:none;position:absolute;right:0;top:calc(100% + 7px);z-index:25;
  width:242px;padding:8px;background:#20201c;border-color:#464239;
  box-shadow:0 14px 36px rgba(0,0,0,.42)
}
.artist-toolbar.more-open .secondary-tools{display:block}
.artist-toolbar .secondary-tools .tool-row{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}
.artist-toolbar .secondary-tools button{width:100%}
.creator-ui.focus-workspace .canvas-wrap{padding:8px 12px 0}
.creator-ui.focus-workspace #viewport{min-height:600px;border-radius:10px}
.creator-ui.focus-workspace .pipeline-disclosure{margin-bottom:4px}
.creator-ui.focus-workspace .timeline-wrap{position:relative;z-index:20}
.creator-ui.focus-workspace .timeline{padding-bottom:1px}

@media(min-width:1221px){
  .creator-ui.focus-workspace #viewport{height:calc(100vh - 250px)}
}
@media(max-width:980px){
  .creator-ui.focus-workspace .input-panel,.creator-ui.focus-workspace .inspector{top:58px;bottom:0;width:min(88vw,330px)}
}

/* Storyboard thumbnails inspired by dedicated storyboard workspaces */
.timeline-wrap{padding-top:8px;padding-bottom:10px}
.timeline-head{margin-bottom:6px}
.beat-card{min-width:252px;max-width:282px;grid-template-columns:96px minmax(0,1fr);gap:9px;padding:7px}
.beat-thumb{position:relative;width:96px;height:60px;border-radius:8px;overflow:hidden;border:1px solid #3b3932;background:#121210;align-self:center}
.beat-thumb svg{display:block;width:100%;height:100%}
.thumb-number{position:absolute!important;left:5px;top:5px;width:auto!important;padding:2px 4px;border-radius:5px;background:rgba(18,18,16,.72);color:#eee7dc!important;font-family:Georgia,serif;font-size:8px!important;line-height:1!important}
.beat-copy{min-width:0}
.beat-copy small{padding-right:38px}
.beat-card.active .beat-thumb{border-color:#a9864d;box-shadow:0 0 0 1px rgba(231,184,107,.12)}

/* Art-direction pass: keep the panel cinematic without turning the workspace into a render console. */
#viewport::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  box-shadow:inset 0 0 90px rgba(0,0,0,.22);
  background:linear-gradient(180deg,rgba(255,255,255,.012),transparent 24%,transparent 78%,rgba(0,0,0,.05));
}
.panel-frame{box-shadow:0 16px 44px rgba(0,0,0,.28),0 0 0 9999px rgba(6,6,5,.34)}

/* Creator readability pass: creative apps stay compact, but never rely on microtext. */
.creator-ui.focus-workspace .document-mode{font-size:7px;letter-spacing:1.2px}
.creator-ui.focus-workspace .chrome-button{font-size:9px;padding:7px 10px}
.creator-ui.focus-workspace .export-button{font-size:9px;padding:8px 13px}
.creator-ui.focus-workspace .stage-kicker{font-size:8px;letter-spacing:1.35px}
.creator-ui.focus-workspace .stage-title h2{font-size:16px;line-height:1.15}
.creator-ui.focus-workspace .beat-readiness-line{font-size:8px;gap:7px}
.creator-ui.focus-workspace .beat-status-badge{font-size:6.8px;padding:3px 6px}
.creator-ui.focus-workspace .camera-tools button{font-size:8.5px;padding:7px 9px}
.creator-ui.focus-workspace .panel-frame span{font-size:6.5px;letter-spacing:1.05px;padding:4px 6px}
.creator-ui.focus-workspace .stage-hud span{font-size:6px}
.creator-ui.focus-workspace .stage-hud b{font-size:8.5px;margin:3px 0}
.creator-ui.focus-workspace .stage-hud small{font-size:6.5px;line-height:1.3}
.creator-ui.focus-workspace .canvas-footer{font-size:7px}
.creator-ui.focus-workspace .timeline-head>div:first-child b{font-size:14px}
.creator-ui.focus-workspace .timeline-head>div:first-child span:last-child{font-size:7px}
.creator-ui.focus-workspace .timeline-key span{font-size:7px}
.creator-ui.focus-workspace .beat-card{min-width:270px;max-width:300px}
.creator-ui.focus-workspace .beat-card b{font-size:8.5px}
.creator-ui.focus-workspace .beat-card small{font-size:7px;line-height:1.35}
@media(max-width:980px){
  .creator-ui.focus-workspace .stage-title h2{font-size:14px}
  .creator-ui.focus-workspace .camera-tools button{font-size:8px;padding:6px 7px}
}

/* Desktop creative-workspace geometry: canvas and storyboard stay visible together. */
@media(min-width:981px){
  .creator-ui.focus-workspace{
    --creator-timeline-h:118px;
    height:100vh;min-height:0;overflow:hidden;
    display:flex;flex-direction:column
  }
  .creator-ui.focus-workspace .topbar{flex:0 0 62px}
  .creator-ui.focus-workspace .workspace{
    flex:1 1 auto;min-height:0;height:auto;
    grid-template-columns:1fr
  }
  .creator-ui.focus-workspace .stage-panel{min-height:0;height:100%}
  .creator-ui.focus-workspace .canvas-wrap{min-height:0;flex:1 1 auto}
  .creator-ui.focus-workspace #viewport{
    min-height:0;height:auto!important;flex:1 1 auto
  }
  .creator-ui.focus-workspace .timeline-wrap{
    flex:0 0 var(--creator-timeline-h);height:var(--creator-timeline-h);
    min-height:0;overflow:hidden
  }
  .creator-ui.focus-workspace .input-panel,
  .creator-ui.focus-workspace .inspector{bottom:var(--creator-timeline-h)}
}

/* Balance persistent storyboard with a still-dominant artboard. */
@media(min-width:981px){
  .creator-ui.focus-workspace{--creator-timeline-h:104px}
  .creator-ui.focus-workspace .stage-head{min-height:52px;padding-top:5px;padding-bottom:5px}
  .creator-ui.focus-workspace .canvas-footer{height:24px}
  .creator-ui.focus-workspace .pipeline-disclosure{margin:0 14px 2px}
  .creator-ui.focus-workspace .pipeline-disclosure>summary{padding:3px 0;font-size:6px;min-height:17px}
  .creator-ui.focus-workspace .timeline-wrap{padding-top:5px;padding-bottom:6px}
  .creator-ui.focus-workspace .timeline-head{margin-bottom:4px}
  .creator-ui.focus-workspace .beat-card{padding:5px;min-width:262px;max-width:292px}
  .creator-ui.focus-workspace .beat-thumb{height:54px}
}

/* Compact storyboard header: one creator-readable line instead of stacked metadata. */
@media(min-width:981px){
  .creator-ui.focus-workspace .timeline-head{align-items:center;min-height:18px}
  .creator-ui.focus-workspace .timeline-head>div:first-child{
    display:flex;align-items:center;gap:8px;min-width:0
  }
  .creator-ui.focus-workspace .timeline-head>div:first-child .dock-kicker,
  .creator-ui.focus-workspace .timeline-head>div:first-child b,
  .creator-ui.focus-workspace .timeline-head>div:first-child span:last-child{
    display:inline-block;margin:0;white-space:nowrap
  }
  .creator-ui.focus-workspace .timeline-head>div:first-child b{font-size:12px}
  .creator-ui.focus-workspace .timeline-head>div:first-child span:last-child{
    overflow:hidden;text-overflow:ellipsis;max-width:220px
  }
}

/* True canvas-only focus, following creative-app canvas modes rather than a dashboard "focus" state. */
.focus-exit{display:none}
@media(min-width:981px){
  .creator-ui.focus-workspace.immersive-workspace{
    --creator-timeline-h:0px;height:100vh;min-height:0;overflow:hidden
  }
  .creator-ui.focus-workspace.immersive-workspace .topbar,
  .creator-ui.focus-workspace.immersive-workspace .stage-head,
  .creator-ui.focus-workspace.immersive-workspace .timeline-wrap,
  .creator-ui.focus-workspace.immersive-workspace .canvas-footer,
  .creator-ui.focus-workspace.immersive-workspace .pipeline-disclosure,
  .creator-ui.focus-workspace.immersive-workspace .stage-hud{display:none!important}
  .creator-ui.focus-workspace.immersive-workspace .workspace{height:100vh;flex:1 1 100vh}
  .creator-ui.focus-workspace.immersive-workspace .stage-panel{height:100vh}
  .creator-ui.focus-workspace.immersive-workspace .canvas-wrap{padding:0;position:relative}
  .creator-ui.focus-workspace.immersive-workspace #viewport{border:0;border-radius:0;height:100vh!important}
  .creator-ui.focus-workspace.immersive-workspace .panel-frame span{opacity:.72}
  .creator-ui.focus-workspace.immersive-workspace .focus-exit{
    display:flex;align-items:center;gap:7px;position:absolute;right:14px;top:14px;z-index:12;
    border:1px solid rgba(115,109,97,.55);border-radius:9px;background:rgba(21,21,18,.78);
    color:#bdb6aa;padding:7px 9px;font-size:8px;font-weight:750;backdrop-filter:blur(10px)
  }
  .creator-ui.focus-workspace.immersive-workspace .focus-exit span{
    color:#777168;border-left:1px solid #46423b;padding-left:7px;font-size:7px
  }
}

/* Comic-aware composition guides: creator aid, never part of exported scene geometry. */
.panel-frame.guides-visible::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(90deg,transparent calc(33.333% - .5px),rgba(250,241,220,.34) 33.333%,transparent calc(33.333% + .5px)),
    linear-gradient(90deg,transparent calc(66.666% - .5px),rgba(250,241,220,.34) 66.666%,transparent calc(66.666% + .5px)),
    linear-gradient(0deg,transparent calc(33.333% - .5px),rgba(250,241,220,.30) 33.333%,transparent calc(33.333% + .5px)),
    linear-gradient(0deg,transparent calc(66.666% - .5px),rgba(250,241,220,.30) 66.666%,transparent calc(66.666% + .5px))
}
.panel-frame.guides-visible::after{
  content:"";position:absolute;inset:6%;pointer-events:none;z-index:1;
  border:1px dashed rgba(250,241,220,.30);border-radius:1px
}
.panel-frame.guides-visible span{z-index:2}

/* Short-laptop tuning keeps the board readable without sacrificing the storyboard. */
@media(min-width:981px) and (max-height:700px){
  .creator-ui.focus-workspace .topbar{height:54px;flex-basis:54px;padding-left:14px;padding-right:14px}
  .creator-ui.focus-workspace .brand .mark{width:30px;height:30px}
  .creator-ui.focus-workspace .stage-head{min-height:50px;padding-top:4px;padding-bottom:4px}
  .creator-ui.focus-workspace .stage-title h2{font-size:15px}
  .creator-ui.focus-workspace .canvas-footer{height:20px}
  .creator-ui.focus-workspace .pipeline-disclosure{display:none}
  .creator-ui.focus-workspace{--creator-timeline-h:98px}
  .creator-ui.focus-workspace .timeline-wrap{padding-top:4px;padding-bottom:4px}
  .creator-ui.focus-workspace .beat-thumb{height:50px}
}

/* Illustration Studio v0 — panel-first draw/edit workspace. */
.draw-studio{
  position:fixed;inset:0;z-index:90;display:none;flex-direction:column;
  background:#121210;color:var(--ink)
}
.draw-studio.open{display:flex}
.draw-topbar{
  flex:0 0 58px;display:grid;grid-template-columns:minmax(220px,1fr) auto minmax(240px,1fr);
  align-items:center;gap:14px;padding:0 14px;border-bottom:1px solid #302e29;
  background:rgba(20,20,18,.98);box-shadow:0 10px 30px rgba(0,0,0,.20)
}
.draw-topbar-start,.draw-topbar-end{display:flex;align-items:center;gap:9px}.draw-topbar-end{justify-content:flex-end}
.draw-back,.draw-secondary,.draw-done,.draw-toolstrip button{
  border:1px solid #3b3831;border-radius:8px;background:#1b1b18;color:#bdb6ac;
  padding:7px 9px;font-size:8px;font-weight:750
}
.draw-back:hover,.draw-secondary:hover,.draw-toolstrip button:hover{border-color:#5a554d;color:#f1ebe2}
.draw-done{background:var(--paper);color:#211f1a;border-color:transparent;padding-left:14px;padding-right:14px}
.draw-document span,.draw-document b{display:block}.draw-document span{font-size:5.8px;letter-spacing:1.15px;color:#756f66;font-weight:850}.draw-document b{font-size:11px;margin-top:2px}
.draw-toolstrip{display:flex;align-items:center;gap:5px;padding:4px;border:1px solid #302e29;border-radius:10px;background:#181815}
.draw-toolstrip button.active{border-color:#92713d;color:#f0ca85;background:#2b2418}
.draw-size-control{display:flex;align-items:center;gap:7px;margin:0 3px;padding:0 7px;font-size:7px;color:#8d867d;white-space:nowrap}
.draw-size-control input{width:88px;padding:0;border:0;background:transparent;box-shadow:none}
.draw-preset-control{display:flex;align-items:center;gap:5px;margin:0 1px;padding:0 4px;color:#8d867d;font-size:7px;white-space:nowrap}.draw-preset-control select{width:74px;height:27px;padding:3px 18px 3px 6px;border:1px solid #37342e;border-radius:7px;background:#171714;color:#b8b0a5;font-size:7px}.draw-preset-control select:disabled{opacity:.38}
.draw-runtime-panel-picker{position:absolute;z-index:35;top:66px;left:50%;transform:translateX(-50%);width:min(430px,calc(100vw - 32px));max-height:min(620px,calc(100vh - 96px));overflow:auto;padding:11px;border:1px solid #4a4438;border-radius:12px;background:rgba(20,19,16,.985);box-shadow:0 22px 70px rgba(0,0,0,.52)}
.draw-runtime-panel-picker[hidden]{display:none!important}.draw-runtime-panel-picker-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.draw-runtime-panel-picker-head span b,.draw-runtime-panel-picker-head span small{display:block}.draw-runtime-panel-picker-head span b{font-family:Georgia,serif;font-size:14px;font-weight:500}.draw-runtime-panel-picker-head span small{margin-top:2px;color:#8f8577;font-size:6px}.draw-runtime-panel-picker-head button{width:28px;height:28px;border:1px solid #3c3932;border-radius:7px;background:#191815;color:#aaa196;font-size:14px}.draw-runtime-panel-picker>p{margin:9px 2px;color:#897f71;font-size:6.5px;line-height:1.5}.draw-runtime-generate-area{display:grid;gap:6px;margin:0 2px 10px;padding:8px;border:1px solid #3a352c;border-radius:9px;background:#17150f}.draw-runtime-generate-head span b,.draw-runtime-generate-head span small{display:block}.draw-runtime-generate-head span b{font-size:7.4px;color:#c8b99e}.draw-runtime-generate-head span small{margin-top:2px;color:#81786d;font-size:6px;line-height:1.45}.draw-runtime-generate-list{display:grid;gap:5px}.draw-runtime-generate-option{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:7px;border:1px solid #373229;border-radius:8px;background:#1c1913}.draw-runtime-generate-option span b,.draw-runtime-generate-option span small{display:block}.draw-runtime-generate-option span b{font-size:7px}.draw-runtime-generate-option span small{margin-top:2px;color:#82786c;font-size:5.8px}.draw-runtime-generate-option button{min-width:74px;height:28px;padding:4px 10px;border:1px solid #725c39;border-radius:7px;background:#2a2115;color:#d7bf96;font-size:6.6px;font-weight:700}.draw-runtime-generate-option button:hover:not(:disabled){background:#352817;border-color:#987848}.draw-runtime-generate-option button:disabled{opacity:.45;cursor:not-allowed}.draw-runtime-run-control{display:grid!important;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;margin:0 2px 9px!important;color:#887e70!important;font-size:6.2px!important}.draw-runtime-run-control[hidden]{display:none!important}.draw-runtime-run-control select{height:28px;padding:4px 22px 4px 7px;border:1px solid #3d3932;border-radius:7px;background:#151411;color:#bdb3a5;font-size:6.5px}.draw-runtime-panel-list{display:grid;gap:6px}.draw-runtime-panel-option{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:8px;border:1px solid #34312b;border-radius:9px;background:#181714;color:#c8c0b5;text-align:left}.draw-runtime-panel-option:hover{border-color:#68583f;background:#211d16}.draw-runtime-panel-thumb{width:96px;height:68px;display:block;object-fit:cover;border:1px solid #332f28;border-radius:6px;background:#0f0f0d}.draw-runtime-panel-option span b,.draw-runtime-panel-option span small{display:block}.draw-runtime-panel-option span b{font-size:8px}.draw-runtime-panel-option span small{margin-top:2px;color:#81786d;font-size:6px}.draw-runtime-panel-option em{font-style:normal;color:#a88a5c;font-size:6px;white-space:nowrap}
.draw-workspace{flex:1;min-height:0;display:grid;grid-template-columns:230px 1fr;background:#10100e}
.draw-layers{padding:16px 13px;border-right:1px solid #302e29;background:#171714;overflow:auto}
.draw-dock-heading{padding:2px 4px 12px}.draw-dock-heading span,.draw-dock-heading b{display:block}.draw-dock-heading span{font-size:6px;letter-spacing:1.2px;color:#776f64;font-weight:850}.draw-dock-heading b{font-family:Georgia,serif;font-size:15px;font-weight:500;margin-top:4px}
.draw-layer-row{width:100%;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;text-align:left;padding:8px;border:1px solid #302e29;border-radius:10px;background:#1b1b18;color:#bdb6ac;margin-bottom:6px}
.draw-layer-row.active{border-color:#6b5431;background:#241f16}.draw-layer-row span b,.draw-layer-row span small{display:block}.draw-layer-row span b{font-size:8px}.draw-layer-row span small{font-size:6px;color:#746e66;margin-top:2px}.draw-layer-row em{font-style:normal;color:#8b8379;font-size:8px}
.draw-layer-swatch{width:28px;height:28px;border-radius:8px;border:1px solid #403d35;display:block}.draw-layer-swatch.ink{background:linear-gradient(145deg,#3c3933,#181715)}.draw-layer-swatch.reference{background:linear-gradient(145deg,#d8bb7d,#89abc9)}
.draw-source-layer-group{margin-top:11px;padding:9px 8px 5px;border:1px solid #2e2c27;border-radius:11px;background:#141411}.draw-source-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 3px 8px}.draw-source-heading span{font-size:5.6px;letter-spacing:.9px;color:#8c7652;font-weight:850}.draw-source-heading small{font-size:5.6px;color:#676159}.draw-source-layer{margin-bottom:4px;background:#181815}.draw-source-layer span small{color:#746d63}.draw-source-opacity{margin:1px 3px 8px!important}.draw-reference-master{margin-top:9px}.draw-layer-swatch.background{background:linear-gradient(145deg,#92bca8,#d9c494)}.draw-layer-swatch.character-a{background:linear-gradient(145deg,#e1bd75,#7f6846)}.draw-layer-swatch.character-b{background:linear-gradient(145deg,#9fb7dd,#5b7196)}
.draw-opacity-control{display:block!important;margin:12px 3px 0!important;color:#7f786f!important;font-size:6.5px!important}.draw-opacity-control input{display:block;width:100%;padding:0;margin-top:7px;border:0;background:transparent;box-shadow:none}
.draw-layer-note{margin-top:16px;padding:10px;border:1px solid #2c2a25;border-radius:10px;background:#141411}.draw-layer-note b{font-size:7px}.draw-layer-note p{margin:5px 0 0;color:#716b63;font-size:6.3px;line-height:1.5}
.draw-stage{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 18px 8px;overflow:hidden;background:radial-gradient(circle at 50% 40%,#24231f,#11110f 58%)}
.draw-artboard{position:relative;height:min(calc(100vh - 112px),calc((100vw - 310px)*1.25));aspect-ratio:4/5;max-width:calc(100vw - 310px);overflow:hidden;background:#e8e0d2;border:1px solid #4a453b;box-shadow:0 20px 70px rgba(0,0,0,.44);transform-origin:50% 50%;will-change:transform}
.draw-artboard img,.draw-artboard canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.draw-artboard img{object-fit:cover;pointer-events:none}.draw-artboard canvas{touch-action:none;cursor:crosshair}
.draw-viewport-controls{position:absolute;right:16px;bottom:36px;z-index:12;display:flex;align-items:center;gap:4px;padding:5px;border:1px solid #3a3730;border-radius:10px;background:rgba(24,24,21,.94);box-shadow:0 10px 28px rgba(0,0,0,.28);backdrop-filter:blur(10px)}
.draw-viewport-controls button{min-width:28px;height:27px;padding:0 7px;border:1px solid #3b3831;border-radius:7px;background:#1c1c19;color:#bbb3a8;font-size:8px;font-weight:800}
.draw-viewport-controls button:hover{border-color:#6b5a3e;color:#efc67d}.draw-viewport-controls #drawZoomFit{min-width:48px}.draw-viewport-controls small{padding:0 5px;color:#746e65;font-size:5.8px;white-space:nowrap}
.draw-artboard.viewport-pan-ready #drawCanvas{cursor:grab!important}.draw-artboard.viewport-panning #drawCanvas{cursor:grabbing!important}
.draw-artboard.eraser #drawCanvas{cursor:cell}.draw-artboard.ink-hidden #drawCanvas{visibility:hidden}.draw-artboard.color-hidden #drawColorCanvas{visibility:hidden}.draw-artboard.reference-hidden #drawBase{visibility:hidden}
.draw-statusbar{width:min(100%,780px);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:8px 2px 0;color:#6f685f;font-size:6.5px}.draw-statusbar kbd{font:inherit;border:1px solid #3b3831;border-bottom-color:#504b42;border-radius:4px;padding:1px 4px;color:#a49c91;background:#191916}
.draw-statusbar #drawStatus.saved{color:var(--mint)}
body.draw-studio-open{overflow:hidden}
@media(max-width:900px){
  .draw-topbar{grid-template-columns:1fr auto;grid-template-areas:"start end" "tools tools";height:auto;padding:7px 9px}.draw-topbar-start{grid-area:start}.draw-topbar-end{grid-area:end}.draw-toolstrip{grid-area:tools;justify-content:center}
  .draw-workspace{grid-template-columns:1fr}.draw-layers{display:none}.draw-artboard{height:min(calc(100vh - 150px),calc(100vw * 1.25));max-width:96vw}.draw-statusbar{padding-left:5px;padding-right:5px}
}

/* Illustration Studio semantic layer controls. */
.draw-layer-eye{width:24px;height:24px;padding:0;border:1px solid #3a3730;border-radius:7px;background:#171714;color:#9f978c;font-size:8px;display:grid;place-items:center}
.draw-layer-eye[aria-pressed="false"]{color:#5e5952;background:#141411}
.draw-ink-opacity{margin-top:2px!important;margin-bottom:11px!important}
.draw-artboard.ink-hidden #drawCanvas{visibility:hidden}
.draw-flow-control input{width:68px}

/* Illustration Studio Color semantic layer. */
.draw-layer-swatch.color{background:linear-gradient(145deg,#f6c96f,#d86c78 52%,#698fd2)}
.draw-color-opacity{margin-top:2px!important;margin-bottom:11px!important}
.draw-layer-swatch.imported-reference{background:linear-gradient(145deg,#4d6179,#bd9f6b 54%,#293442)}
.draw-imported-reference-opacity{margin-top:2px!important;margin-bottom:6px!important}
.draw-imported-reference-provenance{display:grid;gap:2px;margin:0 3px 7px;padding:7px 8px;border:1px solid #3c4f3f;border-radius:8px;background:#121a14}
.draw-imported-reference-provenance[hidden]{display:none!important}.draw-imported-reference-provenance b{font-size:6.6px;color:#91c79b}.draw-imported-reference-provenance small{font-size:6px;line-height:1.35;color:#9c9489;overflow-wrap:anywhere}.draw-imported-reference-provenance code{font:5.7px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;color:#7d9d84;overflow-wrap:anywhere}
.draw-imported-reference-transform{display:grid;gap:5px;margin:0 3px 7px;padding:7px;border:1px solid #332e28;border-radius:8px;background:#15130f}
.draw-imported-reference-transform[hidden]{display:none!important}.draw-imported-reference-transform label{display:grid!important;grid-template-columns:32px minmax(0,1fr) 32px;align-items:center;gap:5px;margin:0!important;color:#81776d!important;font-size:6px!important}.draw-imported-reference-transform label input{width:100%;margin:0;padding:0;border:0;background:transparent;box-shadow:none}.draw-imported-reference-transform label span{text-align:right;color:#9b8e7e;font-size:5.8px}.draw-imported-reference-transform>div{display:flex;justify-content:flex-end;gap:5px}.draw-imported-reference-transform button{border:1px solid #443a2e;border-radius:6px;background:#211b14;color:#bda783;padding:4px 7px;font-size:6px}.draw-imported-reference-transform button.active{border-color:#8c7049;background:#342719;color:#f0c98a}
.draw-artboard.reference-move-active:not(.viewport-pan-ready):not(.viewport-panning) #drawCanvas{cursor:move!important}.draw-artboard.reference-moving #drawCanvas{cursor:grabbing!important}
.draw-imported-reference-actions{display:flex;justify-content:flex-end;margin:0 3px 11px}
.draw-imported-reference-actions[hidden]{display:none!important}
.draw-imported-reference-actions button{border:1px solid #453a31;border-radius:7px;background:#211a16;color:#bf9c83;padding:5px 7px;font-size:6.5px}
.draw-layer-swatch.effects{background:radial-gradient(circle at 35% 35%,#fff4bd 0 9%,#d3a6ef 12% 20%,#6488c8 38%,#201d2d 72%)}
.draw-effects-opacity{margin-top:2px!important;margin-bottom:7px!important}.draw-blend-control{display:grid!important;grid-template-columns:auto 1fr;align-items:center;gap:8px;margin:0 3px 11px!important;color:#7f786f!important;font-size:6.5px!important}.draw-blend-control select{width:100%;height:28px;padding:4px 22px 4px 7px;border:1px solid #38352f;border-radius:7px;background:#151513;color:#a8a097;font-size:7px}
.draw-artboard.effects-hidden #drawEffectsCanvas{visibility:hidden}
.draw-color-control{display:flex;align-items:center;gap:6px;margin:0 2px!important;padding:0 4px;color:#8d867d!important;font-size:7px!important;white-space:nowrap}
.draw-color-control input{width:26px;height:24px;padding:2px;border:1px solid #3b3831;border-radius:6px;background:#171714;box-shadow:none}
#drawBase{z-index:1}
.draw-semantic-reference{z-index:1;pointer-events:none;object-fit:cover}
.draw-semantic-reference[hidden]{display:none}
.draw-source-layer.semantic-unavailable{opacity:.45}
.draw-artboard.semantic-split-active{outline:1px solid rgba(141,118,82,.22)}
#drawImportedReference{z-index:2;pointer-events:none;object-fit:cover;transform-origin:50% 50%;will-change:transform}
#drawImportedReference[hidden]{display:none}
#drawColorCanvas{z-index:3;pointer-events:none}
#drawAiResult{z-index:4;pointer-events:none;object-fit:cover}
#drawAiResult[hidden]{display:none}
#drawCanvas{z-index:5}
#drawEffectsCanvas{z-index:6;pointer-events:none}
#drawBubbleCanvas{z-index:7;pointer-events:none}
#drawTextCanvas{z-index:8;pointer-events:none}
#drawSelectionCanvas{z-index:9;pointer-events:none}
.draw-layer-row.active-layer{border-color:#8a6840;background:#282015}
.draw-artboard.fill #drawCanvas{cursor:copy}
.draw-artboard.lasso #drawCanvas{cursor:crosshair}

.draw-artboard.move-selection #drawCanvas{cursor:move}
.draw-artboard.free-transform-active #drawCanvas{cursor:grabbing}

/* Contextual transform controls stay out of the primary drawing toolbar. */
.draw-selection-actions{
  display:none;position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:9;
  align-items:center;gap:4px;padding:5px;border:1px solid #3a3730;border-radius:10px;
  background:rgba(24,24,21,.94);box-shadow:0 10px 28px rgba(0,0,0,.34);backdrop-filter:blur(10px)
}
.draw-selection-actions.open{display:flex}
.draw-selection-actions>span{padding:0 6px;color:#8b8379;font-size:6.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase}
.draw-selection-actions button{border:1px solid #3b3831;border-radius:7px;background:#1c1c19;color:#bdb6ac;padding:6px 8px;font-size:8px;font-weight:750}
.draw-selection-actions button:hover:not(:disabled){border-color:#6b5a3e;color:#f0ca85}
.draw-selection-actions button:disabled{opacity:.36;cursor:not-allowed}

/* H38-compatible manual Lettering v0 semantic layers. */
.draw-layer-swatch.speech{background:radial-gradient(ellipse at center,#f4efe6 0 58%,#5b554c 60% 64%,#1a1917 66%)}
.draw-layer-swatch.text{background:linear-gradient(145deg,#f4efe6,#f4efe6 48%,#24211d 49% 56%,#f4efe6 57%)}
.draw-bubble-opacity,.draw-text-opacity{margin-top:2px!important;margin-bottom:11px!important}
.draw-artboard.bubble-hidden #drawBubbleCanvas{visibility:hidden}
.draw-artboard.text-hidden #drawTextCanvas{visibility:hidden}
.draw-artboard.bubble-tool #drawCanvas{cursor:move}
.draw-artboard.lettering-resize-active #drawCanvas{cursor:nwse-resize}
.draw-lettering-queue{display:grid;gap:4px;margin:7px 0 10px;padding:7px;border:1px solid #302d27;border-radius:9px;background:#15140f}
.draw-lettering-queue[hidden]{display:none!important}
.draw-lettering-queue button{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 7px;align-items:center;width:100%;padding:6px 7px;border:1px solid #302e29;border-radius:7px;background:#1b1a16;color:#aaa298;text-align:left}
.draw-lettering-queue button b{font-size:6.7px;color:#c0b5a4}.draw-lettering-queue button small{grid-column:1/-1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:5.8px;color:#756e65}
.draw-lettering-queue button.active{border-color:#7a6038;background:#261f15}.draw-lettering-queue button.active b{color:#efc67d}.draw-lettering-queue button:hover{border-color:#5d503a}
.draw-lettering-editor{margin:10px 0 12px;padding:9px;border:1px solid #3b3328;border-radius:10px;background:#1b1813}
.draw-lettering-editor>span{display:block;font-size:5.8px;letter-spacing:1px;color:#a88957;font-weight:850;margin-bottom:7px}
.draw-lettering-editor textarea{width:100%;min-height:62px;resize:vertical;border:1px solid #3c3932;border-radius:8px;background:#141411;color:#eee7dc;padding:8px;font-size:8px;line-height:1.45}
.draw-lettering-editor label{display:block!important;margin:8px 0 0!important;color:#8c8478!important;font-size:6.5px!important}
.draw-lettering-editor label[hidden]{display:none!important}
.draw-lettering-editor label input{width:100%;padding:0;margin-top:6px;border:0;background:transparent;box-shadow:none}
.draw-lettering-editor label select{width:100%;margin-top:6px;padding:6px 24px 6px 7px;border:1px solid #3c3932;border-radius:7px;background:#141411;color:#eee7dc;font-size:7px}
.draw-lettering-editor div{display:flex;justify-content:flex-end;margin-top:8px}
.draw-lettering-editor button{border:1px solid #4a3830;border-radius:7px;background:#241915;color:#d8a195;padding:6px 8px;font-size:7px;font-weight:750}
.draw-lettering-editor .draw-lettering-order-actions{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:7px;margin-top:9px;padding:7px;border:1px solid #302d27;border-radius:8px;background:#171611}
.draw-lettering-order-actions small{text-align:center;color:#81786b;font-size:6.1px;line-height:1.35}.draw-lettering-order-actions button{color:#c9b184;border-color:#4b4130;background:#211d16}.draw-lettering-order-actions button:disabled{opacity:.38;cursor:not-allowed}
.draw-lettering-editor .draw-lettering-layout-actions{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;justify-content:stretch;gap:8px;margin-top:9px;padding:8px;border:1px solid #3a342b;border-radius:8px;background:#16140f}
.draw-lettering-layout-actions button{border-color:#6b5736;background:#282014;color:#efc67d;white-space:nowrap}.draw-lettering-layout-actions button:hover:not(:disabled){border-color:#9a7541;color:#ffe0a4}.draw-lettering-layout-actions button:disabled{opacity:.45;cursor:not-allowed}
.draw-lettering-layout-actions small{display:block;color:#81786b;font-size:6.1px;line-height:1.4}
.draw-lettering-editor .draw-lettering-record-actions{gap:6px;flex-wrap:wrap}

/* Page Composition v0 — authoritative layout consumer. */
.page-studio{
  display:none;position:fixed;inset:0;z-index:70;flex-direction:column;
  background:#11110f;color:var(--ink)
}
.page-studio.open{display:flex}
.page-topbar{
  flex:0 0 58px;display:grid;grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr);
  align-items:center;gap:14px;padding:0 14px;border-bottom:1px solid #302e29;
  background:rgba(20,20,18,.98);box-shadow:0 10px 30px rgba(0,0,0,.20)
}
.page-topbar-start,.page-topbar-end{display:flex;align-items:center;gap:9px}.page-topbar-end{justify-content:flex-end}
.page-export-menu{position:relative}.page-export-menu>summary{list-style:none;cursor:pointer;padding:7px 11px;border:1px solid #514735;border-radius:8px;background:#f0ebe1;color:#28231b;font-size:7.5px;font-weight:800;letter-spacing:.15px}.page-export-menu>summary::-webkit-details-marker{display:none}.page-export-menu[open]>summary{border-color:#9d7b43;box-shadow:0 0 0 1px rgba(228,180,95,.12)}
.page-export-popover{position:absolute;right:0;top:calc(100% + 8px);z-index:20;width:238px;padding:9px;border:1px solid #403a31;border-radius:11px;background:#181815;box-shadow:0 18px 44px rgba(0,0,0,.42);display:grid;gap:5px}.page-export-popover>span{padding:4px 4px 2px;color:#756d62;font-size:5.5px;font-weight:800;letter-spacing:.9px}.page-export-popover>button{display:grid;grid-template-columns:1fr;gap:2px;padding:8px 9px;border:1px solid #302e29;border-radius:8px;background:#1e1e1a;color:#bdb5a9;text-align:left}.page-export-popover>button:hover{border-color:#7a6038;background:#252016;color:#efc67d}.page-export-popover>button b{font-size:7.5px}.page-export-popover>button small{font-size:5.8px;color:#756e65;line-height:1.3}.page-export-popover>button:hover small{color:#a99b88}
.page-controls{display:flex;align-items:end;gap:8px;padding:4px;border:1px solid #302e29;border-radius:10px;background:#181815}
.page-controls label{display:grid;gap:3px;margin:0!important;padding:0 4px;font-size:6px!important;color:#777067!important;letter-spacing:.3px}
.page-controls select{min-width:112px;padding:6px 24px 6px 8px;border-radius:7px;font-size:7.5px;background-color:#1c1c19}
.page-hero-control{display:none!important}.page-hero-control.visible{display:grid!important}
.page-workspace{flex:1;min-height:0;display:grid;grid-template-columns:226px minmax(0,1fr) 226px;background:#10100e}
.page-panel-dock,.page-authority-dock{padding:15px 13px;overflow:auto;background:#171714}.page-panel-dock{border-right:1px solid #302e29}.page-authority-dock{border-left:1px solid #302e29}
.page-document-toolbar{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px;margin-bottom:8px;padding-bottom:9px;border-bottom:1px solid #302e29}.page-document-toolbar>div:first-child span,.page-document-toolbar>div:first-child b{display:block}.page-document-toolbar>div:first-child span{font-size:5.6px;letter-spacing:.8px;color:#766f65}.page-document-toolbar>div:first-child b{margin-top:2px;font-size:8px}.page-document-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}.page-document-toolbar button{padding:5px 7px;border:1px solid #37342e;border-radius:7px;background:#1d1d1a;color:#aaa298;font-size:6.5px}.page-document-toolbar button:hover:not(:disabled){border-color:#7a6038;color:#efc67d}.page-document-toolbar button:disabled{opacity:.35;cursor:not-allowed}#pageMoveUp,#pageMoveDown{min-width:25px;padding-inline:6px}
.page-document-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-bottom:13px}.page-document-list button{display:grid;gap:2px;padding:7px;border:1px solid #302e29;border-radius:8px;background:#1a1a17;color:#8f887e;text-align:left}.page-document-list button b{font-size:7.5px}.page-document-list button small{font-size:5.8px;color:#716b63}.page-document-list button.active{border-color:#7a6038;background:#261f15;color:#efc67d}.page-panels-heading{margin-top:4px}
.page-dock-note{margin:-4px 4px 12px;color:#766f66;font-size:6.5px;line-height:1.5}
.page-panel-list{display:grid;gap:6px}.page-panel-entry{display:grid;gap:4px}
.page-panel-choice{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:8px;width:100%;padding:8px;border:1px solid #302e29;border-radius:10px;background:#1b1b18;color:#bdb6ac;text-align:left}
.page-panel-choice.selected{border-color:#7a6038;background:#241f16}.page-panel-choice input{width:14px;height:14px;margin:0;accent-color:#d8aa63}.page-panel-choice span b,.page-panel-choice span small{display:block}.page-panel-choice span b{font-size:8px}.page-panel-choice span small{font-size:6px;color:#776f66;margin-top:2px}.page-panel-choice em{font-style:normal;font-family:Georgia,serif;font-size:11px;color:#8c8478}.page-crop-choice{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:7px;padding:5px 7px 6px;margin:0 4px;border-left:1px solid #4b4030;color:#82796d;font-size:6px}.page-crop-choice select{min-width:0;width:100%;height:25px;padding:3px 20px 3px 6px;border:1px solid #38352f;border-radius:6px;background:#151513;color:#aaa197;font-size:6.3px}.page-crop-choice select:focus{outline:1px solid #9a7541;border-color:#8a6a3c}
.page-stage{min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 18px 7px;background:radial-gradient(circle at 50% 42%,#282721,#11110f 60%)}
.page-paper-wrap{height:min(calc(100vh - 106px),calc((100vw - 520px)*1.5));aspect-ratio:2/3;max-width:calc(100vw - 520px);background:#fff;box-shadow:0 22px 76px rgba(0,0,0,.48);border:1px solid #4a453b;overflow:hidden}
#pageCanvas{display:block;width:100%;height:100%;background:#fff}
.page-statusbar{width:min(100%,760px);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:7px 2px 0;color:#716b63;font-size:6.3px}.page-statusbar #pageStatus.ready{color:var(--mint)}.page-statusbar #pageStatus.error{color:#e49b9b}
.page-authority-card{margin-bottom:7px;padding:9px;border:1px solid #302e29;border-radius:9px;background:#1b1b18}.page-authority-card span,.page-authority-card b,.page-authority-card code,.page-authority-card small{display:block}.page-authority-card span{font-size:5.6px;letter-spacing:.75px;color:#766f65;text-transform:uppercase}.page-authority-card b{font-size:8px;margin-top:4px;overflow-wrap:anywhere}.page-authority-card code{font-size:6px;line-height:1.4;color:#9b948a;margin-top:5px;overflow-wrap:anywhere}.page-authority-card small{font-size:6.2px;line-height:1.45;color:#716b63;margin-top:4px}
body.page-studio-open{overflow:hidden}
@media(max-width:980px){
  .page-topbar{grid-template-columns:1fr auto;grid-template-areas:"start end" "controls controls";height:auto;padding:7px 9px}.page-topbar-start{grid-area:start}.page-topbar-end{grid-area:end}.page-controls{grid-area:controls;justify-content:center}
  .page-workspace{grid-template-columns:1fr}.page-panel-dock,.page-authority-dock{display:none}.page-paper-wrap{height:min(calc(100vh - 150px),calc(96vw * 1.5));max-width:96vw}
}

/* ========================================================================== */
/* Creative Studio Shell v3 — product-level redesign for comic creators.      */
/* Blocking is one stage in Story → Draw/Edit → Lettering → Page, not the app. */
/* ========================================================================== */
.creator-ui{
  --creator-gold:#e4b45f;
  --creator-gold-soft:rgba(228,180,95,.13);
  --creator-surface:#181816;
  --creator-surface-2:#20201d;
  --creator-border:#34322c;
  --creator-paper:#f2ede3;
}
.creator-ui .topbar{
  height:68px;padding:0 20px;gap:16px;
  background:rgba(16,16,15,.975);border-bottom-color:#302e29;
  box-shadow:0 10px 34px rgba(0,0,0,.16)
}
.creator-ui .brand{min-width:205px;gap:11px}
.creator-ui .mark{
  width:38px;height:38px;border-radius:11px;
  background:linear-gradient(145deg,#f5dfae,#d9a84d);color:#1c1913;
  box-shadow:inset 0 1px rgba(255,255,255,.45),0 7px 22px rgba(0,0,0,.24);
  font-size:11px
}
.creator-ui .brand-copy b{font-size:14px;letter-spacing:-.25px}
.creator-ui .brand-copy small{font-size:9px;color:#918a7f}
.workflow-nav{
  display:flex;align-items:center;gap:3px;margin:0 auto;padding:4px;
  border:1px solid #302e29;border-radius:12px;background:#151513
}
.workflow-step{
  min-width:78px;height:42px;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:0 11px;border:1px solid transparent;border-radius:9px;background:transparent;color:#8f887e;
  transition:.18s ease
}
.workflow-step span{font-size:7px;color:#615c54;font-weight:800;letter-spacing:.5px}
.workflow-step b{font-size:10px;font-weight:720;white-space:nowrap}
.workflow-step:hover{color:#e6dfd5;background:#1e1e1a}
.workflow-step.active{
  color:#f0c777;border-color:#7f6236;background:linear-gradient(180deg,#2d2618,#211d15);
  box-shadow:inset 0 1px rgba(255,226,170,.08),0 0 0 1px rgba(228,180,95,.04)
}
.workflow-step.active span{color:#b98940}
.creative-document-title{display:none}
.creator-ui .topbar-actions{gap:6px}
.creator-ui .chrome-button,.creator-ui .export-button{
  height:36px;padding:0 11px;border-radius:9px;font-size:9px
}
.creator-ui .chrome-secondary{color:#aaa399;background:#181816;border-color:#302f2a}
.creator-ui #sceneDockToggle{display:none}
.creator-ui .export-button{padding-inline:15px;background:var(--creator-paper)}

.creator-ui.focus-workspace .stage-head{
  min-height:68px;padding:9px 18px;border-bottom-color:#2e2c27;
  background:linear-gradient(180deg,#181816,#161614)
}
.creative-stage-title{display:flex;align-items:center;gap:11px;min-width:310px!important}
.beat-nav-buttons{display:flex;gap:4px}
.beat-nav{
  width:32px;height:32px;border:1px solid #37342d;border-radius:9px;background:#1d1d1a;color:#a79f94;
  font-size:12px
}
.beat-nav:hover:not(:disabled){border-color:#75603c;color:#f0c777;background:#292319}
.beat-nav:disabled{opacity:.28;cursor:default}
.beat-title-copy{min-width:0}
.creator-ui.focus-workspace .stage-kicker{font-size:8px;letter-spacing:1.55px}
.creator-ui.focus-workspace .stage-title h2{font-size:18px;letter-spacing:-.45px;margin-top:3px}
.creator-ui.focus-workspace .beat-readiness-line{font-size:9px;margin-top:5px;color:#817b72}
.creator-ui.focus-workspace .beat-status-badge{font-size:7px;padding:3px 7px}
.creator-ui.focus-workspace .camera-tools{align-items:center}
.creator-ui.focus-workspace .tool-cluster{padding:5px;border-radius:11px;background:#1a1a17}
.creator-ui.focus-workspace .camera-tools button{font-size:9.5px;padding:8px 10px;border-radius:8px}
.creator-ui.focus-workspace .camera-tools button.active{box-shadow:inset 0 0 0 1px rgba(228,180,95,.1)}

.creator-ui.focus-workspace .canvas-wrap{padding:10px 12px 0}
.creator-ui.focus-workspace #viewport{
  min-height:0;border-radius:16px;border:1px solid #37342e;
  background:
    radial-gradient(circle at 50% 42%,rgba(228,180,95,.055),transparent 35%),
    linear-gradient(135deg,#11110f,#151512 52%,#10100e);
  box-shadow:0 20px 65px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.018)
}
.creator-ui.focus-workspace .panel-frame{
  border:1px solid rgba(236,190,107,.85);border-radius:4px;
  box-shadow:0 0 0 9999px rgba(6,6,5,.35),0 24px 80px rgba(0,0,0,.48),0 0 0 4px rgba(228,180,95,.035)
}
.creator-ui.focus-workspace .panel-frame span{
  top:10px;left:10px;font-size:7px;letter-spacing:1.2px;padding:5px 8px;
  color:#eed09a;background:rgba(21,19,15,.84);border:1px solid rgba(228,180,95,.18)
}
.creative-hud{
  width:220px;max-width:220px!important;top:22px!important;padding:13px 14px!important;
  border:1px solid rgba(69,65,57,.78)!important;border-radius:12px!important;
  background:linear-gradient(155deg,rgba(30,30,27,.92),rgba(20,20,18,.84))!important;
  box-shadow:0 14px 40px rgba(0,0,0,.26);backdrop-filter:blur(16px)!important;text-align:left!important
}
.creative-hud.hud-left{left:22px!important}.creative-hud.hud-right{right:22px!important}
.hud-section-label{display:flex;align-items:center;justify-content:space-between;gap:8px}
.creative-hud .hud-section-label span{font-size:7px!important;letter-spacing:1.25px!important;color:#8a8175!important}
.creative-hud .hud-section-label em{font-style:normal;font-size:8px;color:#c0b6a8}
.creative-hud .hud-main-title{font-family:Georgia,"Times New Roman",serif;font-size:18px!important;font-weight:500!important;letter-spacing:-.3px;margin:7px 0 5px!important;color:#f0ebe2}
.creative-hud p{margin:0;color:#aaa298;font-size:9px;line-height:1.48}
.hud-divider{height:1px;background:#38352e;margin:12px 0 10px}
.hud-detail-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.creative-hud .hud-detail-row span{font-size:7px!important;color:#746d64!important;letter-spacing:1px!important}
.creative-hud .hud-detail-row b{font-size:9px!important;margin:0!important;text-align:right;color:#d7d0c6}
.creative-hud>small{font-size:8px!important;line-height:1.4!important;margin-top:5px;color:#756e65!important}
.creative-hud.native{border-color:rgba(64,112,91,.7)!important}
.creative-hud.review{border-color:rgba(123,93,48,.74)!important}
.creator-ui.focus-workspace .canvas-footer{height:30px;font-size:8px;color:#716b63;padding:0 3px}
.creator-ui.focus-workspace .cast-legend{gap:13px}.creator-ui.focus-workspace .swatch{width:7px;height:7px}

/* Storyboard should feel like an editing timeline, not a diagnostic table. */
.creator-ui.focus-workspace .timeline-wrap{
  --timeline-card-bg:#1c1c19;
  padding:8px 12px 10px;background:#141412;border-top-color:#302e29
}
.creator-ui.focus-workspace .timeline-head{align-items:center;margin-bottom:7px;min-height:24px}
.creator-ui.focus-workspace .timeline-head>div:first-child{display:flex!important;align-items:baseline;gap:9px!important}
.creator-ui.focus-workspace .timeline-head>div:first-child .dock-kicker{font-size:7px!important}
.creator-ui.focus-workspace .timeline-head>div:first-child b{font-family:Inter,-apple-system,sans-serif;font-size:12px!important;font-weight:720;margin:0!important}
.creator-ui.focus-workspace .timeline-head>div:first-child span:last-child{font-size:8px!important;margin:0!important;color:#756f66}
.creator-ui.focus-workspace .timeline{gap:7px}
.creator-ui.focus-workspace .beat-card{
  min-width:230px;max-width:280px;padding:6px;border-radius:11px;
  border-color:#34322d;background:var(--timeline-card-bg);box-shadow:none;transition:.16s ease
}
.creator-ui.focus-workspace .beat-card:hover{transform:translateY(-1px);border-color:#514c43;background:#20201d}
.creator-ui.focus-workspace .beat-card.active{border-color:#a07a3d;background:#262117;box-shadow:inset 0 0 0 1px rgba(228,180,95,.14),0 5px 22px rgba(0,0,0,.18)}
.creator-ui.focus-workspace .beat-thumb{height:52px;border-radius:7px}
.creator-ui.focus-workspace .beat-card b{font-size:9.5px!important;letter-spacing:-.1px}
.creator-ui.focus-workspace .beat-card small{font-size:7.5px!important;line-height:1.35;color:#827b72}

@media(min-width:1180px){
  .creator-ui.focus-workspace{--creator-timeline-h:112px}
}
@media(max-width:1179px){
  .workflow-step{min-width:0;padding-inline:8px}.workflow-step span{display:none}.workflow-step b{font-size:9px}
  .creative-hud{width:180px;max-width:180px!important;padding:10px!important}
  .creative-hud .hud-main-title{font-size:15px!important}
}
@media(max-width:980px){
  .workflow-nav{order:3;width:100%;overflow:auto;justify-content:flex-start;margin:0}
  .creator-ui .topbar{height:auto;min-height:60px;flex-wrap:wrap;padding:8px 10px}
  .creator-ui #sceneDockToggle{display:inline-flex}
  .creative-hud{display:none}
}


/* Local AI Fix v0 — contextual, non-destructive preview with explicit accept-to-layer. */
.draw-layer-swatch.ai{background:radial-gradient(circle at 28% 28%,#d6c28d 0 16%,#647ca6 38%,#30273c 74%)}
.draw-ai-layer{border-style:dashed}.draw-ai-layer.preview{border-style:dashed}.draw-ai-layer.accepted{border-style:solid;border-color:#4d715f;background:#17201b}.draw-ai-layer.accepted small{color:#8fcfb4!important}.draw-ai-layer small{color:#8b7ea0!important}.draw-ai-opacity{margin-top:2px!important;margin-bottom:11px!important}#drawAiLayer[hidden],#drawAiOpacityControl[hidden]{display:none!important}
.draw-artboard.ai-hidden #drawAiResult{visibility:hidden}
.draw-ai-fix-trigger{border-color:#5c4968!important;color:#cfb8df!important;background:#241d29!important}
.draw-ai-fix-trigger:hover:not(:disabled){border-color:#8a6d99!important;color:#eadbf2!important}
.draw-ai-fix-panel{
  display:none;position:absolute;right:14px;top:14px;z-index:11;width:286px;max-height:calc(100% - 28px);overflow:auto;
  padding:12px;border:1px solid #493d50;border-radius:12px;background:rgba(24,21,26,.97);box-shadow:0 18px 52px rgba(0,0,0,.46);backdrop-filter:blur(12px)
}
.draw-ai-fix-panel.open{display:block}
.draw-ai-fix-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}.draw-ai-fix-head span,.draw-ai-fix-head b{display:block}.draw-ai-fix-head span{font-size:5.8px;letter-spacing:1.1px;color:#9d83ac;font-weight:850}.draw-ai-fix-head b{font-family:Georgia,serif;font-size:14px;font-weight:500;margin-top:3px}.draw-ai-fix-head button{width:25px;height:25px;padding:0;border:1px solid #494048;border-radius:7px;background:#191619;color:#a99ca7;font-size:15px}
.draw-ai-fix-panel>p{margin:0 0 9px;padding:7px 8px;border:1px solid #3a343b;border-radius:8px;background:#171518;color:#817782;font-size:6.7px;line-height:1.45}.draw-ai-fix-panel>p.ready{color:#8fcfb4;border-color:#365447}.draw-ai-fix-panel>p.offline{color:#d49a9a;border-color:#5b3e43}
.draw-ai-fix-panel>label{display:block!important;margin:9px 0 0!important;color:#a49aa5!important;font-size:7px!important}.draw-ai-fix-panel textarea{width:100%;min-height:66px;margin-top:6px;resize:vertical;border:1px solid #403943;border-radius:8px;background:#131214;color:#eee8ef;padding:8px;font-size:8px;line-height:1.45}.draw-ai-fix-panel textarea:focus{border-color:#796184;box-shadow:0 0 0 3px rgba(132,101,145,.10)}
.draw-ai-fix-row{display:grid;grid-template-columns:1.3fr .7fr;gap:8px;margin-top:8px}.draw-ai-fix-row label{display:block!important;margin:0!important;color:#8e838e!important;font-size:6.6px!important}.draw-ai-fix-row input{width:100%;margin-top:5px}.draw-ai-fix-row input[type="range"]{padding:0;border:0;background:transparent;box-shadow:none}.draw-ai-fix-row input[type="number"]{height:29px;padding:5px 7px;border:1px solid #403943;border-radius:7px;background:#131214;color:#ddd5df}.draw-ai-fix-row span{display:block;margin-top:2px;color:#706771;font-size:6px}
.draw-ai-fix-panel>small{display:block;margin-top:9px;color:#766c77;font-size:6.2px;line-height:1.45}
.draw-ai-fix-actions,.draw-ai-result-actions{display:flex;gap:6px;margin-top:10px}.draw-ai-fix-actions button,.draw-ai-result-actions button{flex:1;border:1px solid #443b46;border-radius:8px;background:#1b181c;color:#b9acba;padding:7px 8px;font-size:7px;font-weight:750}.draw-ai-fix-actions button.primary,#drawAiFixAccept{background:#695076;border-color:#80618f;color:#fff4ff}.draw-ai-fix-actions button:disabled{opacity:.38;cursor:not-allowed}
.draw-ai-fix-status{margin-top:9px;min-height:30px;padding:7px 8px;border-radius:8px;background:#151316;color:#7c727d;font-size:6.5px;line-height:1.45}.draw-ai-fix-status.busy{color:#d6bf8d}.draw-ai-fix-status.ready{color:#89ceb0}.draw-ai-fix-status.error{color:#d89494}
.draw-ai-result-actions[hidden]{display:none}
@media(max-width:900px){.draw-ai-fix-panel{right:8px;top:8px;width:min(286px,calc(100vw - 16px));max-height:calc(100% - 16px)}}

/* Character Reference: intentional Preview -> Accept, never automatic. */
.draw-character-reference-preview[hidden]{display:none!important}
.draw-character-reference-preview{display:grid;grid-template-columns:125px minmax(0,1fr);align-items:center;gap:9px;padding:8px;border:1px solid #6a5031;border-radius:8px;background:linear-gradient(110deg,#1e1912,#262017)}
.draw-character-reference-preview img{grid-row:span 2;width:125px;max-height:180px;object-fit:contain;border-radius:6px;background:#0e0d0a}
.draw-character-reference-preview p{font-size:7px;line-height:1.5;color:#b3a28c;margin:0}
.draw-character-reference-actions{display:flex;gap:7px;flex-wrap:wrap}
.draw-character-reference-actions button{border:1px solid #8b714a;border-radius:7px;padding:8px 10px;background:#44321b;color:#f3d9ae;font-size:7px;font-weight:700}
.draw-character-reference-actions button:last-child{background:#211b16;border-color:#55463a;color:#b9aea0}
.draw-character-reference-actions button:disabled{opacity:.45;cursor:not-allowed}

.draw-artist-qa[hidden]{display:none!important}
.draw-artist-qa{grid-column:1/-1;display:grid;gap:8px;padding:9px;border:1px solid #3b4657;border-radius:8px;background:#11151b}
.draw-artist-qa-head span{display:grid;gap:2px}.draw-artist-qa-head b{font-size:8px;color:#e5e9ef}.draw-artist-qa-head small{font-size:6.7px;line-height:1.4;color:#8f9bad}
.draw-artist-qa label{display:grid;gap:4px;font-size:6.7px;color:#aab4c2}
.draw-artist-qa input,.draw-artist-qa select,.draw-artist-qa textarea{width:100%;box-sizing:border-box;border:1px solid #303947;border-radius:7px;background:#090c11;color:#edf1f7;padding:7px;font:inherit}
.draw-artist-qa textarea{resize:vertical;min-height:48px}
.draw-artist-qa-scores{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.draw-artist-qa-scores label{min-width:0}.draw-artist-qa-scores span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.draw-artist-qa-selects{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.draw-artist-qa-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.draw-artist-qa-actions button{border:1px solid #51647d;border-radius:7px;padding:8px 10px;background:#1c2b3e;color:#dcecff;font-size:7px;font-weight:700}.draw-artist-qa-actions button:disabled{opacity:.45;cursor:not-allowed}.draw-artist-qa-actions small{font-size:6.5px;color:#77869a}

.draw-artist-qa-evidence-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.draw-artist-qa-evidence-card{display:grid;gap:4px;padding:8px;border:1px solid #3b4655;border-radius:8px;background:#0d1118}
.draw-artist-qa-evidence-card b{font-size:7.5px;color:#ecf1f7}
.draw-artist-qa-evidence-card small{font-size:6.5px;line-height:1.45;color:#8f9bac}
.draw-artist-qa-evidence-card em{font-style:normal;font-size:9px;font-weight:800;color:#d9b56d}

.draw-artist-qa-campaign{display:grid;gap:7px;margin-top:9px;padding-top:9px;border-top:1px solid #2b3441}
.draw-artist-qa-campaign>span{display:grid;gap:2px}
.draw-artist-qa-campaign>span b{font-size:7.5px;color:#ecf1f7}
.draw-artist-qa-campaign>span small{font-size:6.5px;line-height:1.45;color:#8794a6}
.draw-artist-qa-evidence-card.complete{border-color:#50685f}
.draw-artist-qa-evidence-card.collecting{border-color:#5e513b}

/* Creative Shell v3 — canvas-first workspace inspired by modern AI design tools.
   Authority/IDs stay unchanged; this section only reshapes interaction hierarchy. */
.creator-ui.focus-workspace{
  --creative-bg:#0c0c0e;
  --creative-surface:#151518;
  --creative-raised:#1b1b1f;
  --creative-line:#2a2a30;
  --creative-muted:#8f8f99;
  --creative-text:#f4f4f5;
  --creative-accent:#b7a4ff;
  --creative-accent-soft:rgba(183,164,255,.14);
  background:var(--creative-bg)
}
.creator-ui.focus-workspace .topbar{
  height:58px;flex-basis:58px;padding:0 14px;gap:10px;
  border-bottom:1px solid rgba(255,255,255,.055);
  background:rgba(12,12,14,.92);backdrop-filter:blur(24px) saturate(130%);
  box-shadow:0 1px 0 rgba(255,255,255,.025);z-index:80
}
.creator-ui.focus-workspace .brand{min-width:auto;gap:8px}
.creator-ui.focus-workspace .mark{
  width:30px;height:30px;border-radius:9px;background:#f2f2f3;color:#101012;
  box-shadow:0 0 0 1px rgba(255,255,255,.15);font-size:8px
}
.creator-ui.focus-workspace .brand-copy b{font-size:10px;font-weight:720;color:#ececef}
.creator-ui.focus-workspace .brand-copy small{display:none}
.creator-ui.focus-workspace .creative-document-title{display:none}
.creator-ui.focus-workspace .workflow-nav{
  margin:auto;display:flex;align-items:center;gap:2px;padding:3px;
  border:1px solid rgba(255,255,255,.07);border-radius:999px;
  background:rgba(255,255,255,.035);box-shadow:inset 0 1px 0 rgba(255,255,255,.025)
}
.creator-ui.focus-workspace .workflow-step{
  min-width:0;padding:7px 11px;border:0;border-radius:999px;background:transparent;
  color:#7f7f89;transition:background .16s ease,color .16s ease,box-shadow .16s ease
}
.creator-ui.focus-workspace .workflow-step span{display:none}
.creator-ui.focus-workspace .workflow-step b{font-size:8px;font-weight:650;letter-spacing:0}
.creator-ui.focus-workspace .workflow-step:hover{color:#d8d8de;background:rgba(255,255,255,.045)}
.creator-ui.focus-workspace .workflow-step.active{
  color:#111115;background:#f2f2f4;box-shadow:0 3px 12px rgba(0,0,0,.28)
}
.creator-ui.focus-workspace .topbar-actions{gap:5px}
.creator-ui.focus-workspace .chrome-button,
.creator-ui.focus-workspace .export-button{
  min-height:32px;padding:7px 10px;border-radius:9px;font-size:8px;font-weight:650
}
.creator-ui.focus-workspace .chrome-button{
  border:1px solid rgba(255,255,255,.07);background:#17171a;color:#a6a6af
}
.creator-ui.focus-workspace .chrome-button:hover,
.creator-ui.focus-workspace .chrome-button.active{border-color:#494954;color:#f2f2f4;background:#202025}
.creator-ui.focus-workspace .export-button{background:#f1f1f3;color:#111114}
.creator-ui.focus-workspace .status{
  width:30px;height:30px;padding:0;display:grid;place-items:center;border-color:rgba(255,255,255,.07);
  background:#17171a
}
.creator-ui.focus-workspace .status>span:not(.dot){display:none}
.creator-ui.focus-workspace .status .dot{width:7px;height:7px}

/* Drawers behave like floating creative sheets, not permanent admin sidebars. */
.creator-ui.focus-workspace .input-panel,
.creator-ui.focus-workspace .inspector{
  position:fixed;top:70px;bottom:126px;width:350px;z-index:70;
  border:1px solid rgba(255,255,255,.085)!important;border-radius:18px;
  background:rgba(21,21,24,.96);backdrop-filter:blur(26px) saturate(125%);
  box-shadow:0 24px 70px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.035);
  overflow:hidden;transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .18s ease;opacity:.99
}
.creator-ui.focus-workspace .input-panel{left:12px;transform:translateX(calc(-100% - 24px))}
.creator-ui.focus-workspace .inspector{right:12px;transform:translateX(calc(100% + 24px))}
.creator-ui.focus-workspace.scene-open .input-panel{transform:translateX(0)}
.creator-ui.focus-workspace.direction-open .inspector{transform:translateX(0)}
.creator-ui.focus-workspace .panel-scroll,
.creator-ui.focus-workspace .inspector-scroll{padding:18px 18px 22px;height:100%}
.creator-ui.focus-workspace .dock-heading{margin-bottom:16px}
.creator-ui.focus-workspace .dock-heading h1{
  font-family:Inter,-apple-system,sans-serif;font-size:22px;font-weight:690;letter-spacing:-.65px
}
.creator-ui.focus-workspace .dock-heading p{font-size:8px;color:#8c8c96}
.creator-ui.focus-workspace input,
.creator-ui.focus-workspace textarea,
.creator-ui.focus-workspace select{
  border-color:#303037;background:#111114;color:#efeff1;border-radius:11px
}
.creator-ui.focus-workspace input:focus,
.creator-ui.focus-workspace textarea:focus,
.creator-ui.focus-workspace select:focus{
  border-color:#686178;box-shadow:0 0 0 3px rgba(183,164,255,.10)
}
.creator-ui.focus-workspace .compile-cta{
  background:#efeff1;color:#111114;border-radius:11px;box-shadow:none
}

/* Canvas owns the screen. Context floats above it instead of reserving layout bands. */
.creator-ui.focus-workspace .workspace{background:var(--creative-bg)}
.creator-ui.focus-workspace .stage-panel{background:var(--creative-bg)}
.creator-ui.focus-workspace .stage-head{
  position:absolute;top:12px;left:12px;right:12px;z-index:18;min-height:0;
  padding:0;border:0;background:transparent;pointer-events:none
}
.creator-ui.focus-workspace .creative-stage-title,
.creator-ui.focus-workspace .artist-toolbar{pointer-events:auto}
.creator-ui.focus-workspace .creative-stage-title{
  max-width:min(38vw,430px);padding:9px 11px;border:1px solid rgba(255,255,255,.07);
  border-radius:13px;background:rgba(18,18,21,.78);backdrop-filter:blur(18px);
  box-shadow:0 12px 34px rgba(0,0,0,.22)
}
.creator-ui.focus-workspace .stage-kicker{display:none}
.creator-ui.focus-workspace .stage-title h2{font-size:13px;line-height:1.15;letter-spacing:-.25px}
.creator-ui.focus-workspace .beat-readiness-line{font-size:7px;margin-top:4px}
.creator-ui.focus-workspace .beat-status-badge{font-size:6px;padding:3px 6px}
.creator-ui.focus-workspace .artist-toolbar{
  display:flex;gap:5px;padding:4px;border:1px solid rgba(255,255,255,.075);
  border-radius:13px;background:rgba(18,18,21,.78);backdrop-filter:blur(18px);
  box-shadow:0 12px 34px rgba(0,0,0,.22)
}
.creator-ui.focus-workspace .tool-cluster{padding:0;border:0;background:transparent}
.creator-ui.focus-workspace .camera-tools button{
  min-height:32px;padding:7px 10px;border:0;border-radius:9px;background:transparent;
  color:#9a9aa4;font-size:8px
}
.creator-ui.focus-workspace .camera-tools button:hover{background:#25252b;color:#f0f0f3}
.creator-ui.focus-workspace .camera-tools button.active{
  border:0;background:#f0f0f2;color:#111114;box-shadow:none
}
.creator-ui.focus-workspace .artist-toolbar .secondary-tools{
  position:absolute;right:0;top:calc(100% + 7px);min-width:310px;padding:5px;
  border:1px solid rgba(255,255,255,.08);border-radius:12px;background:#19191d;
  box-shadow:0 18px 45px rgba(0,0,0,.42)
}
.creator-ui.focus-workspace .canvas-wrap{
  position:relative;padding:8px 8px 0;min-height:0;background:var(--creative-bg)
}
.creator-ui.focus-workspace #viewport{
  min-height:600px;border:1px solid rgba(255,255,255,.06);border-radius:20px;
  background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.025),transparent 38%),#09090b;
  box-shadow:0 26px 80px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.02)
}
.creator-ui.focus-workspace .panel-frame{
  border-color:rgba(255,255,255,.36);
  box-shadow:0 0 0 9999px rgba(3,3,5,.40),0 12px 50px rgba(0,0,0,.30)
}
.creator-ui.focus-workspace .panel-frame span{
  color:#d6d6dd;background:rgba(15,15,18,.74);border-color:rgba(255,255,255,.08)
}
.creator-ui.focus-workspace .creative-hud{
  width:190px;max-width:190px!important;top:70px!important;padding:10px!important;
  border-color:rgba(255,255,255,.055)!important;border-radius:11px!important;
  background:rgba(17,17,20,.55)!important;box-shadow:none;backdrop-filter:blur(14px)!important;
  opacity:.38;transition:opacity .18s ease,transform .18s ease
}
.creator-ui.focus-workspace #viewport:hover .creative-hud{opacity:.90}
.creator-ui.focus-workspace .creative-hud .hud-main-title{
  font-family:Inter,-apple-system,sans-serif;font-size:13px!important;font-weight:650!important
}
.creator-ui.focus-workspace .creative-hud p{font-size:7px}
.creator-ui.focus-workspace .creative-hud.hud-left{left:18px!important}
.creator-ui.focus-workspace .creative-hud.hud-right{right:18px!important}

/* Playground-style prompt launcher: opens the real Story composer, no parallel prompt authority. */
.creative-prompt-dock{
  position:absolute;left:50%;bottom:42px;z-index:16;transform:translateX(-50%);
  width:min(560px,calc(100% - 180px));pointer-events:none
}
.creative-prompt-dock>button{
  pointer-events:auto;width:100%;min-height:52px;display:grid;grid-template-columns:30px 1fr auto;
  align-items:center;gap:10px;padding:8px 10px;border:1px solid rgba(255,255,255,.09);
  border-radius:15px;background:rgba(24,24,28,.90);color:#ededf1;text-align:left;
  box-shadow:0 18px 50px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(22px) saturate(130%);transition:transform .15s ease,border-color .15s ease,background .15s ease
}
.creative-prompt-dock>button:hover{
  transform:translateY(-1px);border-color:rgba(183,164,255,.32);background:rgba(29,29,34,.96)
}
.creative-prompt-spark{
  width:30px;height:30px;display:grid;place-items:center;border-radius:9px;
  color:#d8cdff;background:linear-gradient(145deg,rgba(183,164,255,.18),rgba(127,208,173,.10));
  font-size:13px
}
.creative-prompt-copy{min-width:0;display:grid;gap:2px}
.creative-prompt-copy b{font-size:9px;font-weight:650;letter-spacing:-.1px}
.creative-prompt-copy small{font-size:6.5px;color:#85858f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.creative-prompt-dock kbd{
  padding:4px 6px;border:1px solid #3b3b42;border-radius:6px;background:#121215;color:#777781;
  font:inherit;font-size:6px
}
.creator-ui.focus-workspace .canvas-footer{height:34px;color:#666671}
.creator-ui.focus-workspace .pipeline-disclosure{display:none}

/* Storyboard becomes a compact visual tray rather than another dashboard. */
.creator-ui.focus-workspace .timeline-wrap{
  border-top:1px solid rgba(255,255,255,.055);background:#0f0f11;padding:7px 10px 9px
}
.creator-ui.focus-workspace .timeline-head{margin-bottom:5px;min-height:18px}
.creator-ui.focus-workspace .timeline-head>div:first-child .dock-kicker{display:none!important}
.creator-ui.focus-workspace .timeline-head>div:first-child b{font-size:10px!important;color:#cfcfd5}
.creator-ui.focus-workspace .timeline-head>div:first-child span:last-child{font-size:6.5px!important;color:#676770}
.creator-ui.focus-workspace .timeline-key{opacity:.55}
.creator-ui.focus-workspace .timeline{gap:6px}
.creator-ui.focus-workspace .beat-card{
  min-width:210px;max-width:250px;padding:5px;border-radius:10px;border-color:#29292e;background:#151518
}
.creator-ui.focus-workspace .beat-card:hover{background:#1b1b1f;border-color:#414149}
.creator-ui.focus-workspace .beat-card.active{
  border-color:#70678e;background:#1c1a23;box-shadow:inset 0 0 0 1px rgba(183,164,255,.10)
}
.creator-ui.focus-workspace .beat-thumb{height:46px}
.creator-ui.focus-workspace .beat-card b{font-size:8px!important}
.creator-ui.focus-workspace .beat-card small{font-size:6.4px!important}
.creator-ui.focus-workspace.immersive-workspace .creative-prompt-dock{display:none}

@media(max-width:1179px){
  .creative-prompt-dock{width:min(520px,calc(100% - 48px));bottom:38px}
  .creative-prompt-copy small{display:none}
}
@media(max-width:980px){
  .creator-ui.focus-workspace .workflow-nav{order:2;width:auto;max-width:calc(100vw - 220px);overflow:auto}
  .creator-ui.focus-workspace .topbar{flex-wrap:nowrap}
  .creator-ui.focus-workspace .input-panel,
  .creator-ui.focus-workspace .inspector{top:66px;bottom:14px;width:min(92vw,350px)}
  .creative-prompt-dock{width:calc(100% - 30px)}
}

/* Creative Shell v3 · Draw/Edit surface. */
.draw-studio{
  background:#0b0b0d;color:#f2f2f4
}
.draw-topbar{
  flex:0 0 60px;grid-template-columns:minmax(180px,.8fr) minmax(0,1.9fr) minmax(260px,1fr);
  gap:10px;padding:0 12px;border-bottom:1px solid rgba(255,255,255,.055);
  background:rgba(12,12,14,.94);backdrop-filter:blur(22px) saturate(125%);box-shadow:none
}
.draw-back,.draw-secondary,.draw-done,.draw-toolstrip button{
  min-height:32px;border:1px solid rgba(255,255,255,.07);border-radius:9px;
  background:#17171a;color:#a8a8b0;padding:7px 9px;font-size:7.5px;font-weight:650
}
.draw-back:hover,.draw-secondary:hover,.draw-toolstrip button:hover{
  border-color:#45454f;background:#202025;color:#f2f2f4
}
.draw-done{border-color:transparent;background:#f2f2f4;color:#111114;padding-inline:14px}
#drawLayersToggle.active{background:#232129;color:#dcd4ff;border-color:#514a66}
.draw-document span{font-size:5.4px;color:#73737d}
.draw-document b{font-size:10px;color:#e8e8ec}
.draw-toolstrip{
  min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  display:flex;align-items:center;justify-content:flex-start;gap:3px;padding:3px;
  border:1px solid rgba(255,255,255,.07);border-radius:12px;background:#151518;
  white-space:nowrap
}
.draw-toolstrip::-webkit-scrollbar{display:none}
.draw-toolstrip button{flex:0 0 auto;border-color:transparent;background:transparent}
.draw-toolstrip button.active{border-color:transparent;background:#f0f0f2;color:#111114}
.draw-size-control,.draw-preset-control,.draw-color-control{
  flex:0 0 auto;margin:0 2px!important;padding:0 5px;color:#888893!important
}
.draw-size-control input{width:58px}
.draw-preset-control select{height:28px;background:#101013;border-color:#303037;color:#bdbdc5}
.draw-color-control input{border-color:#35353c;background:#101013}

.draw-workspace{
  position:relative;display:block;min-height:0;background:#0b0b0d
}
.draw-stage{
  width:100%;height:100%;padding:14px 308px 10px 18px;
  background:
    radial-gradient(circle at 50% 38%,rgba(255,255,255,.035),transparent 34%),
    radial-gradient(circle at 24% 78%,rgba(183,164,255,.025),transparent 32%),
    #0b0b0d;
  transition:padding-right .22s cubic-bezier(.2,.8,.2,1)
}
.draw-layers{
  position:absolute;top:12px;right:12px;bottom:12px;z-index:18;width:280px;
  padding:13px 11px;border:1px solid rgba(255,255,255,.075);border-radius:16px;
  background:rgba(22,22,25,.95);backdrop-filter:blur(22px) saturate(120%);
  box-shadow:0 22px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.03);
  overflow:auto;transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .18s ease
}
.draw-studio.layers-hidden .draw-layers{
  transform:translateX(calc(100% + 22px));opacity:0;pointer-events:none
}
.draw-studio.layers-hidden .draw-stage{padding-right:18px}
.draw-dock-heading{padding:2px 4px 10px}
.draw-dock-heading span{color:#73737d}
.draw-dock-heading b{
  font-family:Inter,-apple-system,sans-serif;font-size:13px;font-weight:680;letter-spacing:-.2px
}
.draw-layer-row{
  grid-template-columns:26px 1fr auto;gap:7px;padding:7px;margin-bottom:5px;
  border-color:#2d2d33;border-radius:9px;background:#18181c;color:#c2c2c9
}
.draw-layer-row:hover{border-color:#414149;background:#1c1c21}
.draw-layer-row.active,.draw-layer-row.active-layer{
  border-color:#605676;background:#211e2a;box-shadow:inset 0 0 0 1px rgba(183,164,255,.06)
}
.draw-layer-swatch{width:26px;height:26px;border-radius:7px;border-color:#3b3b43}
.draw-layer-row span b{font-size:7.5px}
.draw-layer-row span small{font-size:5.8px;color:#73737d}
.draw-layer-eye{
  width:22px;height:22px;border-color:#34343b;background:#131316;color:#898993
}
.draw-opacity-control{margin:7px 3px 9px!important;color:#73737d!important}
.draw-opacity-control input{margin-top:5px}
.draw-source-layer-group{
  margin-top:10px;padding:8px 7px 4px;border-color:#2a2a30;border-radius:10px;background:#121215
}
.draw-source-heading span{color:#817b92}.draw-source-heading small{color:#61616b}
.draw-layer-note{
  margin-top:12px;padding:9px;border-color:#29292f;border-radius:9px;background:#111114
}
.draw-layer-note p{color:#6f6f79}
.draw-imported-reference-provenance,
.draw-imported-reference-transform,
.draw-lettering-queue,
.draw-lettering-editor{
  border-color:#313138!important;background:#121216!important
}

.draw-artboard{
  height:min(calc(100vh - 112px),calc((100vw - 365px)*1.25));
  max-width:calc(100vw - 365px);border:1px solid rgba(255,255,255,.10);
  border-radius:10px;box-shadow:0 30px 90px rgba(0,0,0,.52),0 0 0 1px rgba(0,0,0,.3);
  overflow:hidden
}
.draw-studio.layers-hidden .draw-artboard{
  height:min(calc(100vh - 112px),calc((100vw - 90px)*1.25));
  max-width:calc(100vw - 90px)
}
.draw-statusbar{color:#73737d}
.draw-viewport-controls{
  right:22px;bottom:22px;padding:4px;border-color:rgba(255,255,255,.075);
  border-radius:11px;background:rgba(20,20,23,.88);box-shadow:0 14px 36px rgba(0,0,0,.32)
}
.draw-viewport-controls button{
  border-color:transparent;background:transparent;color:#9a9aa4;border-radius:8px
}
.draw-viewport-controls button:hover{border-color:transparent;background:#29292f;color:#f0f0f2}
.draw-selection-actions{
  border-color:rgba(255,255,255,.075)!important;border-radius:12px!important;
  background:rgba(22,22,25,.92)!important;backdrop-filter:blur(18px);
  box-shadow:0 16px 44px rgba(0,0,0,.35)!important
}
.draw-selection-actions button{
  border-color:transparent;background:transparent;color:#a6a6b0
}
.draw-selection-actions button:hover:not(:disabled){
  border-color:transparent;background:#29292f;color:#f1f1f3
}
.draw-selection-actions>span{color:#777782}

/* Secondary generated/AI panels behave like modal creative surfaces. */
.draw-runtime-panel-picker{
  top:74px;width:min(560px,calc(100vw - 40px));max-height:calc(100vh - 100px);
  padding:13px;border-color:rgba(255,255,255,.085);border-radius:16px;
  background:rgba(20,20,23,.98);box-shadow:0 28px 90px rgba(0,0,0,.58)
}
.draw-runtime-panel-picker-head span b{
  font-family:Inter,-apple-system,sans-serif;font-size:13px;font-weight:680
}
.draw-ai-fix-panel{
  right:16px;top:16px;width:310px;border-color:rgba(183,164,255,.18);
  border-radius:15px;background:rgba(21,20,25,.97);box-shadow:0 24px 70px rgba(0,0,0,.50)
}
.draw-ai-fix-head b{
  font-family:Inter,-apple-system,sans-serif;font-size:13px;font-weight:680
}
.draw-ai-fix-actions button.primary,#drawAiFixAccept{
  background:#f1f1f3;border-color:transparent;color:#111114
}

@media(max-width:1100px){
  .draw-topbar{grid-template-columns:auto minmax(0,1fr) auto}
  .draw-document{display:none}
  .draw-stage{padding-right:270px}
  .draw-layers{width:242px}
  .draw-artboard{height:min(calc(100vh - 112px),calc((100vw - 320px)*1.25));max-width:calc(100vw - 320px)}
}
@media(max-width:900px){
  .draw-topbar{grid-template-columns:1fr auto;grid-template-areas:"start end" "tools tools";height:auto;padding:7px 9px}
  .draw-toolstrip{justify-content:flex-start}
  .draw-layers{display:block;width:min(86vw,300px);top:8px;right:8px;bottom:8px}
  .draw-stage{padding:10px}
  .draw-studio:not(.layers-hidden) .draw-stage{padding-right:10px}
  .draw-artboard,.draw-studio.layers-hidden .draw-artboard{
    height:min(calc(100vh - 150px),calc(100vw * 1.25));max-width:96vw
  }
}

/* Contextual layer density: controls appear when the matching editable layer is active. */
#drawEffectsLayer:not(.active-layer)+.draw-effects-opacity,
#drawColorLayer:not(.active-layer)+.draw-color-opacity,
#drawBubbleLayer:not(.active-layer)+.draw-bubble-opacity,
#drawTextLayer:not(.active-layer)+.draw-text-opacity{display:none!important}
.draw-source-layer-group>summary{
  list-style:none;cursor:pointer;margin:0;padding:3px 3px 7px
}
.draw-source-layer-group>summary::-webkit-details-marker{display:none}
.draw-source-layer-group>summary::after{
  content:"›";margin-left:auto;color:#777781;font-size:12px;transition:transform .15s ease
}
.draw-source-layer-group[open]>summary::after{transform:rotate(90deg)}
.draw-source-layer-group:not([open]){padding-bottom:5px}
.draw-source-layer-group:not([open])>summary{padding-bottom:3px}

/* Creative Shell v3 · Page Composer canvas-first surface. */
.page-studio{
  background:#0b0b0d;color:#f2f2f4
}
.page-topbar{
  flex:0 0 60px;grid-template-columns:minmax(180px,.8fr) minmax(0,1.4fr) minmax(300px,1fr);
  gap:10px;padding:0 12px;border-bottom:1px solid rgba(255,255,255,.055);
  background:rgba(12,12,14,.94);backdrop-filter:blur(22px) saturate(125%);box-shadow:none
}
.page-topbar-start,.page-topbar-end{gap:6px}
.page-controls{
  justify-self:center;min-width:0;gap:3px;padding:3px;
  border:1px solid rgba(255,255,255,.07);border-radius:12px;background:#151518
}
.page-controls label{
  min-width:0;padding:0 4px!important;color:#85858f!important;font-size:5.6px!important
}
.page-controls select{
  min-width:105px;height:29px;padding:4px 21px 4px 7px;border-color:transparent;
  border-radius:8px;background-color:#101013;color:#c5c5cd;font-size:7px
}
.page-topbar-end .draw-secondary.active{
  background:#232129;color:#dcd4ff;border-color:#514a66
}
.page-export-menu>summary{
  min-height:32px;display:flex;align-items:center;padding:7px 11px;
  border:0;border-radius:9px;background:#f1f1f3;color:#111114;font-size:7.5px
}
.page-export-menu[open]>summary{border:0;box-shadow:none}
.page-export-popover{
  top:calc(100% + 10px);width:250px;border-color:rgba(255,255,255,.08);
  border-radius:14px;background:#18181c;box-shadow:0 24px 70px rgba(0,0,0,.50)
}
.page-export-popover>button{
  border-color:#2e2e34;border-radius:9px;background:#1b1b1f;color:#c2c2ca
}
.page-export-popover>button:hover{border-color:#4d465d;background:#222027;color:#ded7ff}

.page-workspace{
  position:relative;display:block;min-height:0;background:#0b0b0d
}
.page-stage{
  width:100%;height:100%;padding:14px 18px 8px;
  background:
    radial-gradient(circle at 50% 42%,rgba(255,255,255,.04),transparent 34%),
    radial-gradient(circle at 70% 82%,rgba(183,164,255,.025),transparent 30%),
    #0b0b0d
}
.page-paper-wrap{
  height:min(calc(100vh - 104px),900px);max-width:min(calc(100vw - 140px),600px);
  border:1px solid rgba(255,255,255,.10);border-radius:8px;
  box-shadow:0 32px 100px rgba(0,0,0,.54),0 0 0 1px rgba(0,0,0,.26)
}
.page-statusbar{color:#73737d}

.page-panel-dock,.page-authority-dock{
  position:absolute;top:12px;bottom:12px;z-index:18;width:280px;padding:13px 11px;
  border:1px solid rgba(255,255,255,.075)!important;border-radius:16px;
  background:rgba(22,22,25,.95);backdrop-filter:blur(22px) saturate(120%);
  box-shadow:0 22px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.03);
  overflow:auto;transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .18s ease
}
.page-panel-dock{left:12px}
.page-authority-dock{right:12px}
.page-studio.panels-hidden .page-panel-dock{
  transform:translateX(calc(-100% - 24px));opacity:0;pointer-events:none
}
.page-studio.authority-hidden .page-authority-dock{
  transform:translateX(calc(100% + 24px));opacity:0;pointer-events:none
}
.page-document-toolbar{
  margin-bottom:9px;padding:2px 2px 10px;border-bottom:1px solid #2c2c32
}
.page-document-toolbar>div:first-child span{color:#73737d}
.page-document-toolbar>div:first-child b{font-size:8px;color:#d7d7dd}
.page-document-toolbar button{
  border-color:#303037;border-radius:8px;background:#18181c;color:#9f9fa8
}
.page-document-toolbar button:hover:not(:disabled){
  border-color:#4c4659;background:#222027;color:#ded7ff
}
.page-document-list{gap:5px}
.page-document-list button{
  border-color:#2d2d33;border-radius:9px;background:#18181c;color:#9898a2
}
.page-document-list button.active{
  border-color:#625878;background:#211e2a;color:#dcd4ff
}
.page-panel-choice{
  border-color:#2d2d33;border-radius:10px;background:#18181c;color:#c0c0c8
}
.page-panel-choice:hover{border-color:#414149;background:#1d1d22}
.page-panel-choice.selected{
  border-color:#625878;background:#211e2a
}
.page-panel-choice input{accent-color:#b7a4ff}
.page-crop-choice{border-left-color:#4b4558;color:#85858f}
.page-crop-choice select{
  border-color:#303037;background:#111114;color:#aaaab4
}
.page-dock-note{color:#71717b}
.page-authority-card{
  border-color:#2d2d33;border-radius:10px;background:#18181c
}
.page-authority-card span{color:#777781}
.page-authority-card b{color:#d2d2d8}
.page-authority-card code,.page-authority-card small{color:#7e7e88}

@media(max-width:1050px){
  .page-topbar{grid-template-columns:auto minmax(0,1fr) auto}
  .page-topbar .draw-document{display:none}
  .page-panel-dock,.page-authority-dock{width:min(86vw,300px)}
  .page-paper-wrap{height:min(calc(100vh - 106px),calc((100vw - 90px)*1.5));max-width:calc(100vw - 90px)}
}
@media(max-width:820px){
  .page-topbar{height:auto;min-height:64px;grid-template-columns:1fr auto;grid-template-areas:"start end" "controls controls";padding:7px 9px}
  .page-topbar-start{grid-area:start}.page-topbar-end{grid-area:end}.page-controls{grid-area:controls;width:100%;justify-content:center}
  .page-panel-dock,.page-authority-dock{top:8px;bottom:8px}
  .page-stage{padding:10px}
  .page-paper-wrap{height:min(calc(100vh - 138px),calc(96vw * 1.5));max-width:96vw}
}

/* Page Composer must sit above the main creative chrome while open. */
.page-studio{z-index:95}