/* Supersymbol v2: shared platform identity, isolated from rendered artwork. */
:root{
  color-scheme:light;
  --ink:var(--sb-ink,#0E0F11);--chalk:var(--sb-chalk,#F4F4F1);
  --klein:var(--sb-still,#0A2FD6);--klein-lit:var(--sb-still-on-dark,#4A66FF);--orange:var(--sb-beat,#FF5A1F);
  --bg:var(--chalk);--card:#FBFBF8;--fg:var(--ink);--muted:#626360;--line:#D6D6D0;--line-2:#E5E5E0;--field:#ECECE8;
  --dot:var(--klein);--sb-point-color:var(--dot);--sb-playhead:var(--dot);--sb-cut-accent:var(--orange);
  --ok:#266B49;--warn:#7B5A16;--err:#B53B32;
}
:root[data-theme=dark]{color-scheme:dark;--bg:var(--ink);--card:#1B1C1F;--fg:var(--chalk);--muted:#A5A5A1;--line:#343538;--line-2:#292A2D;--field:#232428;--dot:var(--klein-lit);--ok:#77C795;--warn:#DDB665;--err:#FF8F84}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--bg:var(--ink);--card:#1B1C1F;--fg:var(--chalk);--muted:#A5A5A1;--line:#343538;--line-2:#292A2D;--field:#232428;--dot:var(--klein-lit);--ok:#77C795;--warn:#DDB665;--err:#FF8F84}}
body.on-upload,body.on-brand-film{
  --film-ink:var(--ink);--film-paper:var(--chalk);--film-surface:#FBFBF8;--film-on-ink:var(--chalk);
  --film-muted:#626360;--film-secondary:#424340;--film-ash:#7A7A78;--film-line:#D6D6D0;--film-hover:#E5E5E1;
  --film-field:#ECECE8;--film-stage:#E4E4DF;--film-selected:var(--ink);--dot:var(--klein);--sb-point-color:var(--dot);
}
:root[data-theme=dark] body:is(.on-upload,.on-brand-film){--film-ink:var(--chalk);--film-paper:var(--ink);--film-surface:#1B1C1F;--film-on-ink:var(--ink);--film-muted:#A5A5A1;--film-secondary:#C6C6C1;--film-ash:#92928E;--film-line:#343538;--film-hover:#292A2D;--film-field:#232428;--film-stage:#151619;--film-selected:var(--chalk);--film-shadow:#00000040;--film-swatch-line:#F4F4F140;--dot:var(--klein-lit)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) body:is(.on-upload,.on-brand-film){--film-ink:var(--chalk);--film-paper:var(--ink);--film-surface:#1B1C1F;--film-on-ink:var(--ink);--film-muted:#A5A5A1;--film-secondary:#C6C6C1;--film-ash:#92928E;--film-line:#343538;--film-hover:#292A2D;--film-field:#232428;--film-stage:#151619;--film-selected:var(--chalk);--film-shadow:#00000040;--film-swatch-line:#F4F4F140;--dot:var(--klein-lit)}}
.sb-identity{color:var(--fg);--sb-point-color:var(--dot)}
[data-sb-asset]{display:block;line-height:0}
[data-sb-asset]>.sb-logo{display:block;width:100%;height:auto}
.top>.brand{flex:none;width:166px;min-width:0;gap:0;line-height:0}
.top>.brand>[data-sb-asset],.login .brand>[data-sb-asset]{width:100%}
.login .brand{width:208px;gap:0}
body.on-upload .top,body.on-brand-film .top{gap:32px}
.topnav .pill{border-radius:3px}
body.on-upload #screen-upload{padding:24px 46px 36px;align-items:flex-start}
body.on-upload .upload-wrap{row-gap:28px;column-gap:72px}
.bf-identity-hero{grid-column:1/-1;grid-row:1;border-bottom:1px solid var(--line);padding:0 0 20px;margin-bottom:5px}
.bf-identity-hero>[data-sb-asset]{width:min(100%,950px);margin:auto}
body.on-upload .upload-copy{grid-row:2;padding-top:12px;align-self:start}
body.on-upload .upload-copy .eyebrow{margin-bottom:20px;letter-spacing:.12em}
body.on-upload .upload-copy h1{font-size:clamp(44px,4.4vw,64px);letter-spacing:-.045em;line-height:1.13;font-weight:500;font-variation-settings:"wdth" 112,"wght" 500}
body.on-upload .upload-copy .lead{margin:20px 0;max-width:35em}
body.on-upload #btn-open-library{height:52px;padding:0 23px;font-size:12px;letter-spacing:.015em}
body.on-upload #btn-open-library:hover:not(:disabled){opacity:.84}
.bf-start{display:flex;align-items:flex-start;flex-direction:column;gap:9px;margin-top:24px}
.bf-start-meta{font:9px/1.5 var(--mono);letter-spacing:.035em;color:var(--muted)}
#bf-upload-status{min-height:1.5em;font:10px/1.5 var(--mono);color:var(--fg)}
#bf-upload-status:empty{display:none}
body.on-upload .bf-welcome-preview{grid-row:2;max-width:340px;align-self:start}
body.on-upload .bf-welcome-foot{grid-row:3}
body.on-upload #screen-upload{position:relative}
body.on-upload #screen-upload.is-dragging::after{content:"松开以上传 SVG";position:absolute;inset:18px;z-index:60;display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 92%,transparent);border:1px solid var(--fg);font:12px var(--mono);letter-spacing:.08em;color:var(--fg);pointer-events:none}
.bf-ready{display:flex;align-items:center;justify-content:flex-end;gap:9px;min-width:0}
#bf-busy-mark{width:27px;flex:none;color:var(--fg)}
#bf-busy-mark[hidden]{display:none}
#bf-upload-busy{display:none;width:28px;color:var(--film-on-ink);--sb-point-color:var(--klein-lit)}
#screen-upload[aria-busy=true] #bf-upload-busy{display:block}
#screen-upload[aria-busy=true] .bf-upload-arrow{display:none}
#screen-upload:not([aria-busy=true]) #bf-upload-busy .sb-half{animation:none}
.project-restore-progress{align-content:center;gap:20px}
.project-restore-progress>[data-sb-asset]{width:72px}
.bf-score-legend .bf-score-head{background:var(--sb-playhead,var(--dot));width:6px;height:6px}
.bf-score-legend .bf-score-accent{background:var(--sb-cut-accent,var(--orange));box-shadow:0 0 0 1px var(--fg)}
body.on-brand-film .timeline-card .play{color:var(--film-on-ink)}
body.on-brand-film .bf-choice-row button[aria-pressed=true]{border-color:var(--film-selected)}
.bf-control-label,.bf-scale-label{letter-spacing:.015em}
input,select,textarea{transition:none}
.bf-music select{
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px;background-repeat:no-repeat;
}
.toast{width:max-content;max-width:calc(100vw - 32px);overflow-wrap:anywhere;border-radius:3px;line-height:1.6}
.shot.run .st,.badge.run,#pipeline-status,.grp-tag,.spin{color:var(--muted)}
.grp-tag{border-color:var(--line)}
.mt-thumb .qa{background:var(--warn);color:var(--bg)}
.acc-notice{border-left-color:var(--fg)}
.eyebrow i{background:var(--dot)}

/* The optional workspaces share the shell; image/canvas colors stay authored. */
body.on-material,body.on-atelier,body.on-campaign{background:var(--bg)}
#atelier-studio{--at-ink:var(--fg);--at-muted:var(--muted);--at-line:var(--line);--at-paper:var(--bg);font-family:var(--body)}
#campaign-studio{--cp-ink:var(--fg);--cp-muted:var(--muted);--cp-line:var(--line);background:var(--bg);font-family:var(--body)}
#atelier-studio :is(button,input):focus-visible{outline-color:var(--fg)}
#atelier-studio .at-button{border-color:var(--line)}
#atelier-studio .at-button:hover{background:var(--field)}
#atelier-studio .at-button-dark,#campaign-studio button.primary{background:var(--fg);border-color:var(--fg);color:var(--bg)}
#atelier-studio .at-button-dark:hover{background:var(--fg);color:var(--bg);opacity:.85}
.ms-topbar,.ms-controls,.ms-section{color:var(--fg)}
.ms-action,.ms-option{color:var(--fg);border-color:var(--line);background:transparent}
.ms-action:hover:not(:disabled),.ms-option:hover:not(:disabled){background:var(--field);border-color:var(--fg);color:var(--fg)}
.ms-action-primary,.ms-option.is-active{color:var(--bg);background:var(--fg);border-color:var(--fg)}
.ms-action-primary:hover:not(:disabled){color:var(--bg);background:var(--fg)}
.ms-section{border-color:var(--line)}
.ms-label{color:var(--fg)}
.ms-eyebrow,.ms-note,.ms-label output,.ms-color-field span:last-child{color:var(--muted)}

@media(max-width:1050px){body.on-upload .upload-wrap{column-gap:38px}body.on-upload #screen-upload{padding:22px 30px 32px}.top>.brand{width:150px}}
@media(max-width:760px){
  /* Hero lockup requires a 40px cap height; use the primary lockup on small screens. */
  .bf-identity-hero{display:none}
  .top>.brand{width:128px}
  header.top,body.on-upload .top,body.on-brand-film .top{padding:0 12px;gap:8px}
  .film-nav{gap:10px}.film-nav>button{font-size:11px}.more-tools{font-size:10px}.more-tools>summary{gap:4px}
  body.on-upload .film-nav,body.on-brand-film .film-nav{gap:10px}
  body.on-upload #screen-upload{padding:28px 22px}
  body.on-upload .upload-wrap{gap:24px}
  body.on-upload .upload-copy{grid-row:1;padding-top:0}
  body.on-upload .upload-copy h1{font-size:48px}
  body.on-upload .bf-welcome-preview{grid-row:2;max-width:310px;justify-self:center}
  body.on-upload .bf-welcome-foot{grid-row:3}
  .bf-ready{gap:5px}#bf-busy-mark{width:22px}
}
@media(max-width:360px){body.on-upload .upload-copy h1{font-size:43px}}