/* NCFactory primitives, resolved from the supplied .fig, without legacy styles.
 * Source nodes and paints: docs/figma-references/source-manifest.json. */
@font-face { font-family:Onest; src:url('/static/fonts/onest/Onest.ttf') format('truetype'); font-style:normal; font-weight:100 900; font-display:swap; }
:root {
    color-scheme:light; font-family:Onest,Arial,sans-serif; font-size:14px; line-height:1.5;
    color:var(--ncf-main); background:var(--ncf-white);
    --font-ui:Onest,Arial,sans-serif; --ink:var(--ncf-main); --muted:var(--ncf-secondary);
    --surface:var(--ncf-white); --border:var(--ncf-stroke); --rule:var(--ncf-grey-200);
    --blue:var(--ncf-primary-200); --blue-tint:var(--ncf-primary-700);
    --caption-active:var(--ncf-primary-600); --caption-invalid:var(--ncf-alert-400); --caption-gap:var(--ncf-grey-300);
    --ncf-shadow-small:0 2px 8px rgba(26,25,38,.08);
    --ncf-shadow-medium:0 4px 30px rgba(26,25,38,.15);
}
*,*::before,*::after { box-sizing:border-box; }
body { margin:0; }
[hidden],.hidden { display:none!important; }
h1,h2,p { margin:0; }
h1 { font-size:32px; font-weight:600; line-height:1.2; }
h2 { font-size:20px; font-weight:600; line-height:1.2; }
button,input,select,textarea { font:inherit; }
a { color:var(--ncf-primary-200); text-underline-offset:3px; }
a:hover { color:var(--ncf-primary-100); }
/* Button 704:34099 / 34115 / 34101, 48 px; small variants 40 px. */
button { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; min-height:48px; padding:0 24px; border:1.5px solid var(--ncf-stroke); border-radius:12px; color:var(--ncf-main); background:transparent; font-size:14px; font-weight:500; line-height:1.2; cursor:pointer; transition:background-color .08s,color .08s; }
button:hover:not(:disabled) { background:var(--ncf-grey-400); }
button:disabled { cursor:default; color:var(--ncf-stroke); background:transparent; }
button.primary,button.danger { border:0; color:var(--ncf-white); background:var(--ncf-primary-200); }
button.primary:hover:not(:disabled) { background:var(--ncf-primary-100); }
button.danger { background:var(--ncf-alert-200); }
button.danger:hover:not(:disabled) { background:var(--ncf-alert-100); }
button.primary:disabled,button.danger:disabled { background:var(--ncf-stroke); color:var(--ncf-white); }
button.secondary-accent { border-color:var(--ncf-primary-200); color:var(--ncf-primary-200); }
button.secondary-accent:hover:not(:disabled) { background:var(--ncf-primary-700); }
button.secondary-accent:disabled { border-color:var(--ncf-stroke); color:var(--ncf-stroke); }
button.small { height:40px; min-height:40px; padding:0 16px; border-width:1.2px; }
input:not([type=radio]):not([type=checkbox]),select { min-width:0; width:100%; min-height:48px; padding:12px 16px; border:1px solid var(--ncf-stroke); border-radius:12px; color:var(--ncf-main); background:var(--ncf-white); font-size:14px; line-height:1.5; }
input:not([type=radio]):not([type=checkbox]):hover:not(:disabled),select:hover:not(:disabled) { border-color:var(--ncf-grey-100); }
input::placeholder,textarea::placeholder { color:var(--ncf-secondary); opacity:1; }
input:disabled,select:disabled { color:var(--ncf-grey-100); border-color:var(--ncf-grey-200); background:var(--ncf-grey-400); }
input:not([type=radio]):not([type=checkbox]):focus { border-color:var(--ncf-primary-200); outline:none; }
input[aria-invalid=true],input[aria-invalid=true]:focus { border-color:var(--ncf-alert-200); }
input:-webkit-autofill { -webkit-text-fill-color:var(--ncf-main); -webkit-box-shadow:0 0 0 1000px var(--ncf-white) inset; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:2px solid var(--ncf-primary-200); outline-offset:3px; }
.field { display:flex; flex-direction:column; gap:8px; min-width:0; }
.field>label { color:var(--ncf-secondary); font-size:12px; font-weight:400; line-height:1.5; }
/* Exact 24 px vectors from the kit; the masks inherit the action state color. */
.action-icon,.project-symbol { display:inline-block; flex:0 0 24px; width:24px; height:24px; background:currentColor; -webkit-mask:var(--action-icon) center/24px 24px no-repeat; mask:var(--action-icon) center/24px 24px no-repeat; }
.icon-open { --action-icon:url('/static/ui-kit/folder.svg'); }
.icon-delete { --action-icon:url('/static/ui-kit/close.svg'); }
.icon-cancel { --action-icon:url('/static/ui-kit/stop.svg'); }
.icon-new { --action-icon:url('/static/ui-kit/plus.svg'); }
.icon-upload { --action-icon:url('/static/ui-kit/upload.svg'); }
.icon-download { --action-icon:url('/static/ui-kit/download.svg'); }
.icon-file { --action-icon:url('/static/ui-kit/file.svg'); }
.icon-logout { --action-icon:url('/static/ui-kit/logout.svg'); }
.project-row-action,.dialog-close,.clear-language-text,.remove-video { display:inline-flex; align-items:center; justify-content:center; flex:0 0 40px; width:40px; height:40px; min-height:40px; padding:8px; border:0; border-radius:0; background:transparent; color:var(--ncf-secondary); }
.project-row-action:hover:not(:disabled),.dialog-close:hover:not(:disabled) { background:transparent; color:var(--ncf-main); }
.project-row-action:disabled,.dialog-close:disabled { color:var(--ncf-stroke); background:transparent; }
/* Segmented control 704:35135: 48 / 44 px, 10 / 8 px radii, 2 px inset. */
.orientation-toggle { display:inline-flex; width:max-content; max-width:100%; min-width:0; height:48px; padding:2px; margin:0; border:0; border-radius:10px; background:var(--ncf-grey-300); }
.orientation-option { position:relative; display:flex; margin:0; }
.orientation-toggle input[type=radio] { position:absolute; width:1px; height:1px; padding:0; border:0; opacity:0; }
.orientation-segment { display:flex; align-items:center; justify-content:center; height:44px; padding:0 20px; border-radius:8px; color:var(--ncf-secondary); font-weight:500; line-height:1.2; cursor:pointer; }
.orientation-toggle input:checked+.orientation-segment { color:var(--ncf-main); background:var(--ncf-white); box-shadow:var(--ncf-shadow-small); }
.orientation-toggle input:not(:disabled)+.orientation-segment:hover { color:var(--ncf-main); }
.orientation-toggle input:disabled+.orientation-segment { color:var(--ncf-stroke); cursor:default; }
.orientation-toggle input:focus-visible+.orientation-segment { outline:2px solid var(--ncf-primary-200); outline-offset:2px; }
/* Native values remain authoritative for all styled choice controls. */
.choice-select { position:relative; width:100%; min-width:0; }
.choice-trigger { display:flex; justify-content:space-between; width:100%; padding:12px 16px; gap:16px; border-width:1px; background:var(--ncf-white); font-weight:400; line-height:1.5; text-align:left; white-space:nowrap; }
.choice-trigger:hover:not(:disabled) { border-color:var(--ncf-grey-100); background:var(--ncf-white); }
.choice-trigger[aria-expanded=true] { border-color:var(--ncf-primary-200); }
.choice-trigger::after { content:''; display:block; flex:0 0 24px; width:24px; height:24px; background:var(--ncf-secondary); -webkit-mask:url('/static/ui-kit/chevron-down.svg') center/24px 24px no-repeat; mask:url('/static/ui-kit/chevron-down.svg') center/24px 24px no-repeat; }
.choice-trigger[aria-expanded=true]::after { -webkit-mask-image:url('/static/ui-kit/chevron-up.svg'); mask-image:url('/static/ui-kit/chevron-up.svg'); }
.choice-trigger:disabled { color:var(--ncf-grey-100); border-color:var(--ncf-grey-200); background:var(--ncf-grey-400); }
.choice-trigger:disabled::after { background:var(--ncf-grey-100); }
.choice-menu { position:absolute; display:flex; flex-direction:column; gap:1px; left:0; right:auto; width:343px; max-width:calc(100vw - 40px); top:calc(100% + 8px); z-index:30; padding:8px; border:0; border-radius:12px; background:var(--ncf-white); box-shadow:var(--ncf-shadow-medium); }
.choice-hover.is-open { z-index:30; }
.choice-hover.is-open::before { content:''; position:absolute; right:0; top:0; width:343px; max-width:calc(100vw - 40px); height:calc(100% + 8px); }
.choice-hover .choice-trigger { position:relative; z-index:1; }
.choice-option { display:flex; align-items:center; position:relative; min-height:36px; padding:6px 40px 6px 8px; border-radius:8px; font-size:14px; line-height:1.5; cursor:pointer; }
.choice-option:hover,.choice-option.is-active { background:var(--ncf-grey-300); }
.choice-option[aria-selected=true]::after { content:''; position:absolute; right:8px; width:24px; height:24px; background:var(--ncf-main); -webkit-mask:url('/static/ui-kit/check.svg') center/24px 24px no-repeat; mask:url('/static/ui-kit/check.svg') center/24px 24px no-repeat; }
/* Secondary badge variants 704:36049 / 36057 / 36061 / 36063 / 36069. */
.project-state { display:inline-flex; align-items:center; gap:8px; height:22px; padding:4px 8px; border-radius:8px; color:var(--ncf-main); background:var(--ncf-grey-300); font-size:12px; font-weight:500; line-height:1.2; white-space:nowrap; }
.project-state[data-state=unfinished],.project-state[data-state=cancelled],.project-state[data-state=unavailable] { color:var(--ncf-secondary); background:var(--ncf-grey-300); }
.project-state[data-state=ready] { background:var(--ncf-green-400); }
.project-state[data-state=failed] { background:var(--ncf-alert-400); }
.project-state[data-state=queued],.project-state[data-state=preparing],.project-state[data-state=rendering],.project-state[data-state=finalizing],.project-state[data-state=cancelling] { background:var(--ncf-yellow-300); }
/* Alert variants 704:35359 / 35369, using the resolved fill styles. */
.local-test-note,#workspace-message,#server-status,.error { position:relative; min-height:64px; padding:20px 64px 20px 56px; border:0; border-radius:16px; color:var(--ncf-main); background:var(--ncf-grey-300); font-size:14px; line-height:1.5; }
.notice-text { display:flex; align-items:center; min-height:24px; }
.notice-close { position:absolute; top:20px; right:20px; display:flex; width:24px; height:24px; min-height:24px; padding:0; border:0; border-radius:0; color:var(--ncf-secondary); background:transparent; }
.notice-close:hover:not(:disabled) { color:var(--ncf-main); background:transparent; }
.local-test-note::before,#workspace-message::before,#server-status::before,.error::before { content:''; position:absolute; top:20px; left:20px; width:24px; height:24px; background:var(--ncf-secondary); -webkit-mask:url('/static/ui-kit/waiting.svg') center/24px 24px no-repeat; mask:url('/static/ui-kit/waiting.svg') center/24px 24px no-repeat; }
#workspace-message[data-error=true],.error { background:rgba(254,174,174,.3); }
#workspace-message[data-error=true]::before,.error::before { background:var(--ncf-alert-200); -webkit-mask-image:url('/static/ui-kit/warning.svg'); mask-image:url('/static/ui-kit/warning.svg'); }
#server-status { background:var(--ncf-yellow-400); }
/* Modal 704:35915: 584 px, radius 21, header 16/24, body 24. */
.workspace-dialog { width:584px; max-width:calc(100% - 32px); max-height:calc(100dvh - 32px); margin:auto; padding:0; border:0; border-radius:21px; color:var(--ncf-main); background:var(--ncf-white); box-shadow:var(--ncf-shadow-medium); overflow:auto; }
.workspace-dialog::backdrop,#progress-modal { background:rgba(26,25,38,.24); }
.dialog-header { display:flex; align-items:center; gap:24px; padding:16px 24px; border-bottom:1px solid var(--ncf-stroke); }
.dialog-title { flex:1; min-width:0; margin:0; font-size:24px; font-weight:600; line-height:1.2; }
.dialog-close { flex-basis:24px; width:24px; height:24px; min-height:24px; padding:0; color:var(--ncf-main); }
.dialog-content { padding:24px; }
.dialog-description { color:var(--ncf-main); font-size:14px; line-height:1.5; white-space:pre-line; overflow-wrap:anywhere; }
.dialog-actions { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:24px; }
.dialog-actions>button:only-child { margin-left:auto; }
.dialog-actions>button { white-space:nowrap; }
#save-switch-dialog .dialog-actions { gap:12px; }
#progress-modal { display:none; position:fixed; inset:0; z-index:9999; width:100%; height:100%; max-width:none; max-height:none; margin:0; border:0; align-items:center; justify-content:center; padding:16px; background:transparent; }
#progress-modal::backdrop { background:rgba(26,25,38,.24); }
#progress-text { display:block; }
#progress-bar-container { display:flex; align-items:center; gap:8px; height:24px; margin-top:24px; }
#progress-bar { width:24px; height:24px; background:var(--ncf-primary-200); -webkit-mask:url('/static/ui-kit/loader.svg') center/24px 24px no-repeat; mask:url('/static/ui-kit/loader.svg') center/24px 24px no-repeat; animation:kit-spin 1s steps(8) infinite; }
#progress-value { color:var(--ncf-secondary); font-size:12px; line-height:18px; font-variant-numeric:tabular-nums; }
.progress-actions { margin-top:24px; }
/* Tooltip 704:35257; icon-link actions carry the same component on hover/focus. */
[data-tooltip] { position:relative; }
[data-tooltip]:hover::after,[data-tooltip]:focus-visible::after { content:attr(data-tooltip); position:absolute; right:0; bottom:calc(100% + 8px); z-index:50; display:block; width:max-content; max-width:240px; padding:6px 8px; border-radius:8px; color:var(--ncf-white); background:rgba(0,0,0,.8); font-size:12px; font-weight:400; line-height:1.3; text-align:left; white-space:normal; pointer-events:none; }
.workspace-dialog .dialog-close[data-tooltip]::after { top:calc(100% + 8px); bottom:auto; }
@media(max-width:440px) {
    .dialog-actions { flex-direction:column; gap:12px; }
    .dialog-actions>button { width:100%; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:0s!important; animation:none!important; } }