/* Studio 5 — graphite, warm light and a single shared interaction language. */
:root {
  --motion-ease: cubic-bezier(.16,1,.3,1);
  --motion-spring: cubic-bezier(.22,1.15,.36,1);
  --studio-feedback-ring: rgba(235,174,132,.28);
}
html body, html body#studioRoot, html body.studio-secondary {
  --studio-ink:#eceeea; --studio-text:#eceeea; --studio-muted:#a2aaa9; --studio-faint:#788381; --studio-subtle:#929c99;
  --studio-panel:rgba(24,28,29,.96); --studio-card:#202526; --studio-inset:#131718;
  --studio-field:#131718; --studio-control:#212627; --studio-line:rgba(194,211,203,.12);
  --studio-line-strong:rgba(216,230,223,.25); --studio-hover:rgba(206,221,215,.075);
  --studio-accent:#edb38c; --studio-violet:#d7976b; --studio-positive:#86cbb4;
  --bg:#101415; --panel:var(--studio-panel); --surface:var(--studio-control); --surface-hover:var(--studio-hover);
  --text:var(--studio-ink); --ink:var(--studio-ink); --muted:var(--studio-muted); --subtle:var(--studio-subtle);
  --line:var(--studio-line); --line-strong:var(--studio-line-strong); --accent:var(--studio-accent); --accent-ink:#281a11;
  --purple:var(--studio-accent); --focus:var(--studio-accent); --blue:var(--studio-accent); --blue2:#ca885b;
  --wf-text:var(--studio-ink); --wf-muted:var(--studio-muted); --wf-surface:var(--studio-panel);
  --wf-line:var(--studio-line); --wf-field:var(--studio-field); --wf-purple:var(--studio-accent);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-family:"Segoe UI Variable Text","Segoe UI","Microsoft YaHei",sans-serif;
}
html[data-theme="light"] body, html[data-theme="light"] body#studioRoot:not(.auth-locked), html[data-theme="light"] body.studio-secondary {
  --studio-ink:#26332f; --studio-text:#26332f; --studio-muted:#60726b; --studio-faint:#73857c; --studio-subtle:#687c73;
  --studio-panel:rgba(255,255,252,.97); --studio-card:#f6f7f2; --studio-inset:#f1f4ed;
  --studio-field:#f2f5ee; --studio-control:#edf1e9; --studio-line:rgba(48,73,61,.13);
  --studio-line-strong:rgba(48,73,61,.27); --studio-hover:rgba(48,73,61,.065);
  --studio-accent:#a35e35; --studio-positive:#367f67; --bg:#e9eee5; --accent-ink:#fffaf4;
  --studio-feedback-ring:rgba(166,98,55,.2);
}
html[data-studio-background="studio"] { background:#101415; }
html[data-studio-background="studio"][data-theme="light"] { background:#edf1e8; }
html[data-studio-background="studio"] #studioBackdrop::before {
  background-image:radial-gradient(ellipse at 90% 3%,#57402c42,transparent 46%),radial-gradient(ellipse at 5% 88%,#294e4238,transparent 48%),linear-gradient(135deg,#101415,#141918);
  animation:studio-atmosphere 22s ease-in-out infinite alternate; transform-origin:50% 50%;
}
html[data-studio-background="studio"][data-theme="light"] #studioBackdrop::before {
  background-image:radial-gradient(ellipse at 88% 8%,#efd8bc6b,transparent 48%),radial-gradient(ellipse at 0% 100%,#c2d6c967,transparent 55%),linear-gradient(135deg,#f4f5ef,#e9efe6);
}
@keyframes studio-atmosphere { from {transform:scale(1) translate3d(0,0,0)} to {transform:scale(1.035) translate3d(-.6%,.5%,0)} }

/* The navigation is a stable rail; content has more room and less chrome. */
html body#studioRoot { --studio-sidebar:220px; font-size:14px; }
html #studioRoot .studio-sidebar { left:0;top:0;bottom:0;padding:30px 14px 18px;border-radius:0;border-width:0 1px 0 0;box-shadow:none;background:var(--studio-panel);backdrop-filter:none; }
html #studioRoot .studio-brand { padding:0 12px 27px;gap:12px; }
html #studioRoot .studio-brand strong {font-size:19px;letter-spacing:-.5px;font-weight:650}
html #studioRoot .studio-brand small {font-size:10px;color:var(--studio-faint);letter-spacing:.5px}
html #studioRoot .studio-brand-mark {width:35px;height:38px;font-size:31px;flex-basis:35px;color:var(--studio-accent);text-shadow:none;border:1px solid #edb38c38;border-radius:12px;background:linear-gradient(140deg,#edb38c17,transparent)}
html #studioRoot .studio-nav-caption {font-size:10px;letter-spacing:1.5px;padding:25px 14px 11px}
html #studioRoot .studio-nav {gap:5px}
html #studioRoot .studio-nav :is(a,button) {min-height:43px;gap:12px;padding:10px 13px!important;font-size:13px;font-weight:500;border-radius:9px!important}
html #studioRoot .studio-nav a.active {background:#edb38c12!important;color:var(--studio-accent)!important;border-color:transparent!important;box-shadow:none!important}
html #studioRoot .studio-nav a.active .si {stroke-width:2}
html #studioRoot .studio-sidebar-bottom>small {font-size:8px;letter-spacing:1.7px;opacity:.7}
html #studioRoot .app-shell {padding:22px 30px 30px calc(var(--studio-sidebar) + 30px)!important;gap:24px!important}
html #studioRoot .topbar {min-height:62px!important}
html #studioRoot .studio-eyebrow {color:var(--studio-faint);letter-spacing:2.5px;font-size:9px;text-shadow:none;margin-bottom:5px}
html #studioRoot .studio-top-title h1 {color:var(--studio-ink)!important;font-size:25px!important;font-weight:600;text-shadow:none;letter-spacing:-.6px}
html #studioRoot .top-actions {gap:9px!important}
html #studioRoot .topbar .account-entry {background:var(--studio-control)!important;border-color:transparent!important;backdrop-filter:none;font-size:12px}
html #studioRoot .studio-avatar {background:#edb38c1a;color:var(--studio-accent);border:1px solid #edb38c24}
html #studioRoot #creditCard {background:var(--studio-control)!important;border-color:var(--studio-line)!important;color:var(--studio-muted)!important;min-width:134px;backdrop-filter:none}
html #studioRoot #creditCard>span, html #studioRoot #creditDetail {color:var(--studio-muted)!important}
html #studioRoot #creditText {color:var(--studio-positive)!important;font-variant-numeric:tabular-nums;font-weight:600}
html #studioRoot #announcementTicker {background:transparent;border:0;color:var(--studio-muted);font-size:11px}
html #studioRoot :is(.panel,.studio-glass) {border-color:var(--studio-line)!important;box-shadow:0 4px 20px #00000009!important;backdrop-filter:none;-webkit-backdrop-filter:none}
html #studioRoot .app-shell>main.grid>.panel {padding:25px!important}
html #studioRoot .app-shell>main.grid>.prompt-panel {padding-bottom:8px!important;border-radius:18px 18px 0 0!important}
html #studioRoot .app-shell>main.grid>.option-panel {padding-top:10px!important;border-radius:0 0 18px 18px!important}
html #studioRoot .app-shell>main.grid>.task-panel {padding:23px 21px!important;border-radius:18px!important;top:22px!important;height:calc(100dvh - 132px)!important}
html #studioRoot .panel h2 {font-size:18px!important;font-weight:600;letter-spacing:-.3px}
html #studioRoot .studio-section-description {font-size:12px;line-height:1.8;margin-top:6px}
html #studioRoot .prompt-panel .image-shelf {height:178px!important;border-color:var(--studio-line-strong)!important;border-radius:13px!important;background:linear-gradient(160deg,#edb38c04,transparent),var(--studio-inset)!important;transition:border-color .25s,background .25s}
html #studioRoot .prompt-panel .image-shelf:hover {border-color:#edb38c80!important}
html #studioRoot .studio-upload-prompt .si {color:var(--studio-accent);width:29px;height:29px;stroke-width:1.3}
html #studioRoot .studio-upload-prompt strong {font-size:12px;font-weight:500}
html #studioRoot .prompt-panel :is(#prompt,#fixedPrompt), html body :is(input,textarea,select) {caret-color:var(--studio-accent)}
html #studioRoot .prompt-panel :is(#prompt,#fixedPrompt) {border-color:var(--studio-line)!important;border-radius:12px!important;background:var(--studio-field)!important;padding:14px!important;font-size:13px!important;line-height:1.85!important;box-shadow:inset 0 2px 5px #00000008!important}
html #studioRoot .prompt-panel :is(#prompt,#fixedPrompt):focus {border-color:#edb38c80!important;box-shadow:0 0 0 3px #edb38c0d!important}
html #studioRoot .option-panel select {background:var(--studio-control)!important;border-color:var(--studio-line)!important;height:40px!important;font-size:12px!important;border-radius:9px!important}
html #studioRoot .panel button.small {background:var(--studio-control)!important;border-color:var(--studio-line)!important;font-size:11px!important;border-radius:8px!important}
html #studioRoot .studio-task-filters {border:0;background:var(--studio-inset);padding:4px;border-radius:9px}
html #studioRoot .studio-task-filters button {font-size:10px;padding:6px 8px;border-radius:6px}
html #studioRoot .studio-task-filters button.active {color:var(--studio-accent);background:var(--studio-control);box-shadow:0 2px 4px #0002}
html #studioRoot .app-shell>main.grid>.task-panel .task-card {border-radius:12px!important;padding:15px!important}
html #studioRoot .task-card .badge.processing {background:#86cbb414!important;color:var(--studio-positive)!important;border:1px solid #86cbb425}
html #studioRoot .task-card .badge.processing::before {content:"";display:inline-block;width:5px;height:5px;border-radius:50%;margin-right:5px;background:currentColor;animation:studio-status 1.7s ease-in-out infinite}
@keyframes studio-status {50%{opacity:.3}}

/* Shared controls. Geometry of video canvases and positioned preview buttons
   is intentionally owned by the existing media implementation. */
html #studioRoot #generateBtn, html body.studio-secondary .button.primary,
html body :is(#saveConfigBtn,#authRegisterBtn,.workflow-app .primary,.workbench-app .primary),
html #studioRoot .studio-assets-primary {
  background:linear-gradient(115deg,#efbd98,#dda176)!important;border:1px solid #efbd9850!important;
  color:#271b12!important;box-shadow:0 4px 16px #cb8c491a!important;font-weight:650!important;
}
html #studioRoot #generateBtn {min-height:47px!important;border-radius:11px!important;letter-spacing:.4px}
html #studioRoot #generateBtn::before {content:"↗";font-size:22px;margin-right:10px}
html body :is(button,.button,a.account-entry,input,textarea,select) {transition:background-color 180ms ease,border-color 180ms ease,color 180ms ease,box-shadow 180ms ease,opacity 180ms ease}
html body :is(input,textarea,select):focus-visible {outline:2px solid var(--studio-accent);outline-offset:3px}
html body :is(input,textarea)::placeholder {color:var(--studio-faint);opacity:1}
html body :is(.eyebrow,.studio-assets-eyebrow,.studio-section-kicker) {color:var(--studio-accent);font-size:10px;letter-spacing:1.8px}
html body.studio-secondary :is(.panel,.image-topbar,.edit-topbar,.billing-layout),
html body :is(.content-panel,.welcome-panel,.stat-card,.asset-inspector,.workbench-nav,.workbench-header,#workspace,.workflow-nav) {
  background:var(--studio-panel);border-color:var(--studio-line);box-shadow:0 5px 22px #00000009;backdrop-filter:none;
}
html body.studio-secondary .image-app {padding:24px 30px 32px}
html body.studio-secondary .image-topbar {padding:22px 26px}
html body.studio-secondary .image-topbar h1 {font-size:27px;font-weight:600;letter-spacing:-.7px}
html body.studio-secondary-image .image-layout {gap:22px;margin-top:22px}
html body.studio-secondary-image .image-layout>.panel {padding:26px;border-radius:18px}
html body.studio-secondary-image .step {background:#edb38c12;color:var(--studio-accent);border:1px solid #edb38c25;border-radius:10px}
html body.studio-secondary-image .result-grid.empty {border:1px dashed var(--studio-line-strong);border-radius:13px;background:var(--studio-field)}
html body.studio-secondary :is(.button,.account-entry,.studio-theme-entry,.studio-background-entry) {border-radius:9px;border-color:var(--studio-line);background:var(--studio-control);color:var(--studio-ink)}
html body.studio-secondary .step-nav {padding:5px;background:var(--studio-panel);border:1px solid var(--studio-line);border-radius:12px;gap:4px}
html body.studio-secondary .step-nav a {border-radius:8px;border-color:transparent;background:transparent;font-weight:500}
html body.studio-secondary .step-nav [aria-current=page] {background:#edb38c12;color:var(--studio-accent);border-color:transparent}
html .workflow-app {padding:28px 34px;max-width:1700px}
html .workflow-heading {min-height:130px}
html .workflow-heading .brand {letter-spacing:-.5px;color:var(--studio-accent)}
html .workflow-heading h1 {font-size:32px;letter-spacing:-1px;font-weight:600}
html .workflow-layout {gap:22px;grid-template-columns:190px minmax(0,1fr)}
html .workflow-nav {padding:18px 12px;border-radius:14px;gap:7px}
html #workspace {padding:30px;border-radius:18px}
html .project-list {gap:16px; margin-top:28px}
html .project-entry {position:relative;overflow:hidden;background:linear-gradient(145deg,#edb38c07,transparent),var(--studio-field);border:1px solid var(--studio-line);border-radius:14px;padding:26px 22px;min-height:155px;transition:translate .28s var(--motion-ease),border-color .25s,box-shadow .25s}
html .project-entry:hover {translate:0 -4px;border-color:#edb38c70;box-shadow:0 12px 28px #0002}
html .project-entry h3 {font-size:19px;letter-spacing:-.3px;font-weight:600}
html .project-entry::after {content:"↗";position:absolute;right:20px;bottom:16px;color:var(--studio-accent);font-size:22px}
html .welcome-panel {background:radial-gradient(ellipse at 95% 0%,#edb38c13,transparent 60%),var(--studio-panel);border-radius:17px}
html .stat-card strong {color:var(--studio-ink);font-weight:500;font-variant-numeric:tabular-nums}
html .workbench-nav>a[aria-current=page] {background:#edb38c12;color:var(--studio-accent);border-radius:9px}
html .script-asset {border-color:var(--studio-line);border-radius:14px;overflow:hidden}
html .card-visual {background:linear-gradient(150deg,#edb38c08,transparent),var(--studio-field)}
html #studioRoot .studio-model-card {background:var(--studio-panel);border:1px solid var(--studio-line);border-radius:15px;transition:translate .28s var(--motion-ease),border-color .25s,box-shadow .25s}
html #studioRoot .studio-model-card:hover {translate:0 -4px;box-shadow:0 12px 25px #0002;border-color:#edb38c70}
html #studioRoot .studio-model-mark {background:#edb38c14;color:var(--studio-accent);border:1px solid #edb38c25}
html[data-theme] #studioRoot .studio-view-heading h2 {color:var(--studio-ink);text-shadow:none;font-weight:600;letter-spacing:-.6px}
html[data-theme] #studioRoot .studio-view-heading p {color:var(--studio-muted);text-shadow:none;line-height:1.8}
html[data-theme] #studioRoot .studio-section-kicker {color:var(--studio-faint)}
html[data-theme] #studioRoot .studio-nav a.active {color:var(--studio-accent)!important}
html[data-theme] #studioRoot .studio-model-filters button.active {background:#c9956922!important;color:var(--studio-accent)!important;border-color:#c9956940!important;box-shadow:none!important}
html[data-theme] #studioRoot .studio-model-card {box-shadow:0 6px 20px #00000008;backdrop-filter:none}
html[data-theme] #studioRoot .studio-model-card:hover {transform:none;box-shadow:0 12px 25px #00000012}
html[data-theme] #studioRoot .studio-model-card.is-selected {border-color:var(--studio-accent);box-shadow:0 0 0 1px #edb38c30}
html[data-theme] #studioRoot .studio-model-card .studio-model-mark {background:#c9956910;color:var(--studio-accent);border-color:#c9956925}
html[data-theme] #studioRoot .studio-mobile-brand {color:var(--studio-ink);text-shadow:none}
html #studioBackgroundDialog .sbg-presets {grid-template-columns:repeat(5,minmax(0,1fr))}
::view-transition-old(root),::view-transition-new(root) {animation:none;mix-blend-mode:normal}
::view-transition-new(root) {z-index:2}

/* A shared hover rhythm: lift, edge light, then settle on release. */
html body :is(button,a.button,a.account-entry,a.studio-outline-button,label.button,label.file-picker) {
  transition:translate .25s var(--motion-ease),scale .2s var(--motion-spring),background-color .2s,border-color .2s,box-shadow .25s,color .2s,filter .2s;
}
html body :is(.project-entry,.studio-model-card,a.route-card) {
  position:relative;isolation:isolate;
  transition:translate .38s var(--motion-ease),scale .38s var(--motion-ease),border-color .28s,box-shadow .38s;
}
html body :is(.project-entry,.studio-model-card,a.route-card)::before {
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;
  background:radial-gradient(340px circle at var(--hover-x,50%) var(--hover-y,25%),color-mix(in srgb,var(--studio-accent) 15%,transparent),transparent 75%);
  transition:opacity .35s ease;
}
html .project-entry::after {transition:translate .35s var(--motion-ease),color .25s}
html .project-entry h3,html .project-entry>span {transition:translate .35s var(--motion-ease),color .25s}
html body :is(.studio-nav,.workflow-nav,.workbench-nav,.step-nav)>a {transition:background .2s,color .2s,translate .25s var(--motion-ease)}
html body :is(.studio-nav,.workflow-nav,.workbench-nav,.step-nav)>a :is(i,svg) {transition:translate .3s var(--motion-ease),scale .3s var(--motion-spring)}
@media(hover:hover) and (pointer:fine) {
  html body :is(button,a.button,a.account-entry,a.studio-outline-button,label.button,label.file-picker):not(:disabled,[disabled],[aria-disabled=true]):hover {
    translate:0 -2px;filter:brightness(1.08);box-shadow:0 5px 15px #00000018;
  }
  html body :is(.project-entry,.studio-model-card,a.route-card):not([aria-disabled=true]):hover {
    translate:0 -6px;scale:1.012;border-color:color-mix(in srgb,var(--studio-accent) 55%,transparent);
    box-shadow:0 16px 36px #00000026,0 0 0 1px color-mix(in srgb,var(--studio-accent) 8%,transparent)!important;
  }
  html body :is(.project-entry,.studio-model-card,a.route-card):hover::before {opacity:1}
  html .project-entry:hover::after {translate:3px -3px}
  html .project-entry:hover h3 {translate:3px 0;color:var(--studio-accent)}
  html .project-entry:hover>span {translate:3px 0;color:var(--studio-accent)}
  html body :is(.studio-nav,.workflow-nav,.workbench-nav,.step-nav)>a:hover {background:var(--studio-hover);color:var(--studio-accent)}
  html body :is(.studio-nav,.workflow-nav,.workbench-nav,.step-nav)>a:hover :is(i,svg) {translate:2px 0;scale:1.08}
}
html body :is(button,a.button,a.account-entry,a.studio-outline-button,.project-entry,a.route-card):not(:disabled,[disabled],[aria-disabled=true]):active {translate:0 0;scale:.98}
html body :is(.project-entry,a.route-card,button):focus-visible {outline:2px solid var(--studio-accent);outline-offset:4px}

/* Motion decorations have no focus/click behavior and never alter app state. */
.studio-motion-control {position:relative;isolation:isolate}
.studio-ripple-clip {position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:4}
.studio-ripple {position:absolute;display:block;width:140px;height:140px;border-radius:50%;margin:-70px 0 0 -70px;background:radial-gradient(circle,#ffffff3d,transparent 68%);pointer-events:none}
.studio-motion-nav {position:relative;isolation:isolate}
.studio-motion-nav>:is(a,button) {position:relative;z-index:1}
.studio-nav-indicator {position:absolute;z-index:0;pointer-events:none;border:1px solid #edb38c22;border-radius:9px;background:linear-gradient(110deg,#edb38c1a,#edb38c08);transform-origin:0 0;box-sizing:border-box}
html #studioRoot .studio-motion-nav a.active,html .studio-motion-nav [aria-current=page] {background:transparent!important;box-shadow:none!important}
html body :is(dialog,.modal-card,.password-card) {border-color:var(--studio-line-strong);border-radius:18px;box-shadow:0 32px 100px #0005}
html body dialog::backdrop {background:#050b0bcc;backdrop-filter:blur(7px)}
html body dialog:not(.site-confirm) {
  animation:none;opacity:0;translate:0 12px;scale:.97;transform-origin:50% 45%;
  transition:opacity .18s ease,translate .2s ease,scale .2s ease,display .2s allow-discrete,overlay .2s allow-discrete;
}
html body dialog[open]:not(.site-confirm) {
  opacity:1;translate:0 0;scale:1;
  transition:opacity .24s ease,translate .42s var(--motion-spring),scale .42s var(--motion-spring),display .42s allow-discrete,overlay .42s allow-discrete;
}
html body dialog:not(.site-confirm)::backdrop {
  opacity:0;transition:opacity .2s ease,display .2s allow-discrete,overlay .2s allow-discrete;
}
html body dialog[open]:not(.site-confirm)::backdrop {opacity:1}
@starting-style {
  html body dialog[open]:not(.site-confirm) {opacity:0;translate:0 22px;scale:.95}
  html body dialog[open]:not(.site-confirm)::backdrop {opacity:0}
}
/* Legacy account/preview overlays also fade out without delaying app state. */
html body :is(.modal,.password-modal,.image-preview-overlay) {
  transition:opacity .2s ease,display .2s allow-discrete;opacity:1;
}
html body :is(.modal,.password-modal,.image-preview-overlay):is(.hidden,[hidden]) {opacity:0;pointer-events:none}
@starting-style {html body :is(.modal,.password-modal,.image-preview-overlay) {opacity:0}}
html #studioBackgroundDialog {background:var(--studio-panel);--sbg-text:var(--studio-ink);--sbg-muted:var(--studio-muted);--sbg-border:var(--studio-line);--sbg-surface:var(--studio-control)}
html #studioBackgroundDialog .sbg-save {background:#e5ac81!important;color:#271b12!important;border-color:#e5ac81!important}

/* The opening scene is a CSS illustration, not sample customer output. */
html #studioRoot.auth-locked #configModal {padding:60px 48px!important}
html #studioRoot.auth-locked .config-card {grid-template-columns:minmax(0,1.3fr) minmax(340px,410px)!important;gap:85px;max-width:1160px!important}
html #studioRoot.auth-locked .auth-visual {display:flex!important;flex-direction:column;align-items:flex-start;min-height:600px!important;justify-content:center}
html #studioRoot.auth-locked .auth-visual-copy {order:0;text-shadow:none}
html #studioRoot.auth-locked .auth-visual-copy>span {color:#edb38c!important;font-size:11px!important;letter-spacing:3.2px!important;margin-bottom:22px!important;font-weight:500!important}
html #studioRoot.auth-locked .auth-visual-copy>strong {font-size:clamp(36px,3.4vw,54px)!important;line-height:1.3!important;letter-spacing:-1.5px!important;font-weight:550!important;color:#ecede7!important}
html #studioRoot.auth-locked .auth-visual-copy>p {font-size:16px!important;line-height:1.9!important;color:#a5afaa!important;margin-top:18px!important;letter-spacing:.5px!important}
html #studioRoot.auth-locked .auth-visual-copy>p>small {font-size:11px;color:#71857c;letter-spacing:1px}
html #studioRoot.auth-locked .auth-art-canvas {display:none!important}
html #studioRoot.auth-locked .auth-content {background:#191e1df2!important;border:1px solid #bcd2c21c!important;border-radius:22px!important;padding:34px!important;box-shadow:0 30px 90px #0003,inset 0 1px #ffffff05!important;backdrop-filter:blur(28px)}
html #studioRoot.auth-locked .auth-heading {margin:32px 0 10px!important}
html #studioRoot.auth-locked .auth-heading h2 {font-size:27px!important;font-weight:550!important;letter-spacing:-.5px}
html #studioRoot.auth-locked .auth-heading p {color:#94a19b!important;font-size:12px!important}
html #studioRoot.auth-locked .auth-mode-tabs {background:#0e141480!important;border-color:#bcd2c213!important;border-radius:10px!important}
html #studioRoot.auth-locked .auth-mode-tab {color:#9facaa!important;font-weight:500!important}
html #studioRoot.auth-locked .auth-mode-tab.active {background:#303934!important;color:#e8ddce!important;box-shadow:0 2px 8px #0002!important}
html #studioRoot.auth-locked .auth-form label {margin-top:19px!important;color:#bac6be!important;font-size:12px!important;gap:9px!important}
html #studioRoot.auth-locked .auth-form input {background:#111716!important;border-color:#bcd2c221!important;border-radius:9px!important;min-height:47px!important;font-size:13px!important}
html #studioRoot.auth-locked .auth-form input:focus {border-color:#edb38c80!important;box-shadow:0 0 0 3px #edb38c0c!important}
html #studioRoot.auth-locked .studio-auth-background {color:#aebbb3;background:#19221b80;border-color:#bcd2c21c;border-radius:9px;font-size:11px}
html #studioRoot.auth-locked #saveConfigBtn,html #studioRoot.auth-locked #authRegisterBtn {background:linear-gradient(105deg,#efbd98,#dca174)!important;color:#281b11!important;min-height:46px!important;border-radius:10px!important;box-shadow:0 6px 25px #ce8c5020!important}
html[data-theme=light] #studioRoot.auth-locked {--studio-field:#111716;--studio-faint:#73857c}
html[data-theme=light][data-studio-background=studio]:has(#studioRoot.auth-locked) #studioBackdrop::before {background-image:radial-gradient(ellipse at 70% 15%,#57402c42,transparent 46%),radial-gradient(ellipse at 5% 88%,#294e4238,transparent 48%),linear-gradient(135deg,#101415,#141918)}
.cinema-stage {position:relative;width:100%;max-width:580px;height:300px;margin-top:32px;perspective:1000px;order:1}
.cinema-stage::before {content:"";position:absolute;inset:30px 0 0;background:radial-gradient(ellipse,#ad794417,transparent 65%);border-radius:50%}
.cinema-frame {position:absolute;border:1px solid #f4dbc62e;border-radius:12px;overflow:hidden;box-shadow:0 18px 45px #0005;background:#1b2825;will-change:transform}
.cinema-frame--one {width:185px;height:135px;left:0;top:78px;transform:rotate(-9deg);animation:cinema-first 9s ease-in-out infinite}
.cinema-frame--two {width:255px;height:172px;left:19%;top:30px;z-index:2;transform:rotate(-2deg);animation:cinema-focus 9s ease-in-out infinite}
.cinema-frame--three {width:192px;height:136px;right:0;top:90px;transform:rotate(9deg);animation:cinema-last 9s ease-in-out infinite}
.cinema-landscape {position:absolute;inset:0;background:linear-gradient(175deg,#708275,#ceb68e 65%,#303e36);overflow:hidden}
.cinema-landscape::before,.cinema-landscape::after {content:"";position:absolute;inset:25% -10% -10%;clip-path:polygon(0 65%,25% 15%,40% 44%,58% 0,76% 45%,100% 23%,100% 100%,0 100%);background:#1e3d39}
.cinema-landscape::after {inset:52% -10% -10%;background:#142a29;transform:scaleX(-1)}
.cinema-sun {position:absolute;left:57%;top:16%;width:48px;height:48px;border-radius:50%;background:#f4d3a2;box-shadow:0 0 45px #eed2a757}
.cinema-frame--one .cinema-landscape {background:linear-gradient(170deg,#334c4f,#758f8f 65%,#273b36)}
.cinema-frame--one .cinema-landscape::before {background:#36514e}
.cinema-frame--three .cinema-landscape {background:linear-gradient(170deg,#555159,#c69677 70%,#304235)}
.cinema-caption {position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;padding:10px 12px;background:linear-gradient(transparent,#10201de6);color:#efe5d5;font:9px/1.4 "Segoe UI",sans-serif;letter-spacing:1.2px}
.cinema-reticle {position:absolute;inset:15px;border:1px solid #ffffff25;border-radius:4px}
.cinema-reticle::before,.cinema-reticle::after {content:"";position:absolute;background:#ffffff40}
.cinema-reticle::before {width:12px;height:1px;left:calc(50% - 6px);top:50%}
.cinema-reticle::after {width:1px;height:12px;left:50%;top:calc(50% - 6px)}
.cinema-track {position:absolute;bottom:26px;left:12%;width:76%;height:29px;display:flex;gap:5px;transform:perspective(500px) rotateX(12deg)}
.cinema-track i {display:block;flex:1;background:linear-gradient(100deg,#678f7439,#dda97d35);border:1px solid #b4c7b21a;border-radius:4px}
.cinema-track::after {content:"";position:absolute;left:0;top:-5px;width:1px;height:40px;background:#edb38c;box-shadow:0 0 10px #edb38c60;animation:cinema-playhead 9s ease-in-out infinite}
@keyframes cinema-first {0%,100%{transform:translateY(0) rotate(-9deg)}50%{transform:translateY(-9px) rotate(-7deg)}}
@keyframes cinema-focus {0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(1deg)}}
@keyframes cinema-last {0%,100%{transform:translateY(0) rotate(9deg)}50%{transform:translateY(-7px) rotate(6deg)}}
@keyframes cinema-playhead {0%,12%{left:0;opacity:0}18%{opacity:1}82%{opacity:1}95%,100%{left:100%;opacity:0}}
html #startupStatus {background:#101415;color:#eceeea}
html #startupStatus>div {border:0;background:transparent;box-shadow:none}
html #startupStatus>div::before {content:"";display:block;width:32px;height:32px;border:1px solid #edb38c30;border-top-color:#edb38c;border-radius:50%;margin:0 auto 24px;animation:studio-loader 1.2s linear infinite}
html #startupStatus strong {font-size:16px;font-weight:500}
@keyframes studio-loader {to{transform:rotate(360deg)}}
html[data-motion-paused=true] :is(.cinema-frame,.cinema-track,#studioBackdrop)::before,
html[data-motion-paused=true] :is(.cinema-frame,.cinema-track)::after,
html[data-motion-paused=true] .cinema-frame {animation-play-state:paused!important}

@media(min-width:761px) and (max-width:1150px) {
  html #studioRoot .app-shell {padding-left:calc(var(--studio-sidebar) + 20px)!important;padding-right:20px!important}
  html #studioRoot.auth-locked .config-card {gap:40px;grid-template-columns:minmax(0,1fr) minmax(320px,380px)!important}
  .cinema-stage {max-width:470px}.cinema-frame--two {left:15%;width:230px}.cinema-frame--one,.cinema-frame--three {width:155px}
}
@media(min-width:761px) and (max-width:1100px) {
  html body#studioRoot {--studio-sidebar:72px}
  html #studioRoot .studio-sidebar {padding:24px 8px 16px}
  html #studioRoot .studio-brand {padding:0 0 22px}
}
@media(max-width:760px) {
  html #studioRoot .studio-sidebar {position:relative;inset:auto;width:auto;padding:14px;border:1px solid var(--studio-line);border-radius:14px;margin:0}
  html #studioRoot .app-shell {padding:14px!important;gap:16px!important}
  html #studioRoot .topbar {min-height:52px!important}
  html #studioRoot .studio-brand {padding-bottom:14px}
  html #studioRoot .studio-nav-caption {padding-top:12px}
  html #studioRoot .studio-nav :is(a,button) {min-height:39px;font-size:12px}
  html #studioRoot .app-shell>main.grid>.panel {padding:18px!important}
  html #studioRoot .app-shell>main.grid>.task-panel {height:auto!important;min-height:320px!important;padding:18px!important;position:relative!important;top:0!important}
  html body.studio-secondary .image-app {padding:14px}
  html body.studio-secondary .image-topbar,html body.studio-secondary-image .image-layout>.panel {padding:18px}
  html .workflow-app {padding:14px}html .workflow-layout {grid-template-columns:56px minmax(0,1fr);gap:10px}
  html .workflow-nav {padding:12px 5px}html #workspace {padding:16px}html .workflow-heading h1 {font-size:24px}
  html #studioRoot.auth-locked #configModal {padding:72px 24px 28px!important}
  html #studioRoot.auth-locked .config-card {display:flex!important;flex-direction:column;gap:26px;width:min(460px,100%)!important}
  html #studioRoot.auth-locked .auth-visual {min-height:0!important;align-self:stretch}
  html #studioRoot.auth-locked .auth-visual-copy>strong {font-size:32px!important}
  html #studioRoot.auth-locked .auth-visual-copy>span {font-size:9px!important;margin-bottom:12px!important}
  html #studioRoot.auth-locked .auth-visual-copy>p {font-size:13px!important;margin-top:10px!important}
  html #studioRoot.auth-locked .auth-content {width:100%;padding:24px!important}
  .cinema-stage {height:190px;max-width:370px;margin-top:8px;align-self:center}
  .cinema-frame--one {width:125px;height:95px;top:48px}.cinema-frame--two {width:180px;height:123px;left:22%;top:20px}.cinema-frame--three {width:125px;height:95px;top:55px}
  .cinema-track {bottom:8px;height:17px}.cinema-track::after {height:27px}.cinema-caption{font-size:7px;padding:7px}
}
@media(prefers-reduced-motion:reduce) {
  html body *,html body *::before,html body *::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html body :is(button,a.button,a.account-entry,a.studio-outline-button,label.button,label.file-picker,.project-entry,.studio-model-card,a.route-card),
  html .project-entry::after,html .project-entry h3,html .project-entry>span,
  html body :is(.studio-nav,.workflow-nav,.workbench-nav,.step-nav)>a :is(i,svg) {translate:none!important;scale:none!important}
  .cinema-frame {will-change:auto}
}
@media(max-width:480px) {html #studioBackgroundDialog .sbg-presets{grid-template-columns:repeat(3,minmax(0,1fr))}}