/* Approved 5K website system. Artwork palettes and renderer output are independent. */
:root{
 --studio-panel-border:0;
 --ds-white:#fff;--ds-wash:#f7f8f9;--ds-stage:#e4e5e7;--ds-line:#d4d5d7;
 --ds-black:#090909;--ds-muted:#636569;--ds-yellow:#ffff61;--ds-panel-radius:22px;--ds-pill:999px;
 --ui-page:var(--ds-white);--ui-panel:var(--ds-white);--ui-raised:var(--ds-wash);--ui-dialog:var(--ds-wash);--ui-field:var(--ds-white);
 --ui-text:var(--ds-black);--ui-muted:var(--ds-muted);--ui-border:var(--ds-line);--ui-accent:var(--ds-yellow);--ui-ink:#090909;
}
/* Borderless Studio side panels keep a light grey surface; fields use their own token. */
:root:not([data-studio-theme=dark]) body.site-design:has(main.studio-main) :is(.studio-settings,.website-treatment,#motion-library,.studio-treatment-library,.motion-library-drawer){--ui-panel:var(--ds-wash)}
body.site-design{background:var(--ui-page);color:var(--ui-text)}
.site-design :is(.workspace-header,.workspace-footer){background:var(--ui-page);border-color:var(--ui-border)}
.site-design .workspace-brand span{color:var(--ui-muted)}
.site-design :is(.workspace-navigation>a,.account-menu>summary,.workspace-modes>a,.studio-theme-toggle){border-radius:var(--ds-pill)}
.site-design :is(.workspace-navigation>a:hover,.account-menu>summary:hover,.account-menu-links>a:hover,.account-menu-links>a:focus-visible){background:var(--ui-raised)}
.site-design :is(.account-menu-links,.save-options>div,.project-menu-content){background:var(--ui-panel);border-color:var(--ui-border);border-radius:16px;box-shadow:0 12px 32px #0000000d}
.site-design :is(.account-menu-links>a,.project-menu-content button,.save-options button){border-radius:10px}
.site-design :is(.workspace-navigation>a[aria-current],.account-menu>summary.current-section,.workspace-modes>a[aria-current=page]){background:var(--ui-accent);color:var(--ui-ink);border-color:transparent}
.site-design :focus-visible{outline:2px solid var(--ui-text);outline-offset:4px}
.site-design :is(.lead,.small,.feature-grid p,.page-intro .lead,.workspace-footer small,.account-intro>p:not(.eyebrow),.form-note,.muted,.billing-message,.fine-print,.billing-details dt,.billing-bottom p:not(.eyebrow),.period-picker small,.billing-row>span,.payment-methods>p,.plan>p:not(.eyebrow),.faq details p,.policy-copy p,.policy-copy li,.projects-intro p:not(.eyebrow),.storage-note,.dashboard-status,.project-kind,.project-details time,.project-empty p,.project-cover span){color:var(--ui-muted)}
.site-design :is(.button,.export-button,.journey-primary,.export-access-actions a){background:var(--ui-accent);color:var(--ui-ink);border:0;border-radius:var(--ds-pill);min-height:48px;padding:13px 22px}

.site-design .button.secondary{background:var(--ui-text);color:var(--ui-page)}

.site-design :is(.account-panel,.billing-card,.plan,.saved-project,.project-empty,.browser-import,.studio,.template-editor,.website-treatment,.journey-assets,.journey-brand,.journey-history-panel){border:1px solid var(--ui-border);border-radius:var(--ds-panel-radius);background:var(--ui-panel)}
.site-design :is(.account-panel,.billing-card,.plan,.journey-assets){background:var(--ui-raised)}
.site-design .plan.featured{background:var(--ui-panel);border-color:var(--ui-text)}
.site-design :is(.plan-badge,.device-label,.sandbox-label){background:var(--ui-raised);color:var(--ui-muted);border:1px solid var(--ui-border);border-radius:var(--ds-pill)}
.site-design .plan-badge{background:var(--ui-accent);border-color:transparent;color:var(--ui-ink)}
.site-design :is(.notice,.return-note,.navigation-context){background:var(--ui-raised);color:var(--ui-text);border-color:var(--ui-accent);border-radius:12px}
.site-design :is(.account-panel input,.account-panel textarea,.project-tools input[type=search],.project-tools select,.billing-card select,.field input[type=text],.field select,.field textarea,.template-editor textarea,.style-select,.journey-shell input:not([type=file]),.journey-shell textarea,.journey-shell select,.journey-publishing input,.journey-publishing textarea){background:var(--ui-field);color:var(--ui-text);border-color:var(--ui-border);border-radius:10px;min-height:44px}
.site-design :is(input,textarea)::placeholder{color:var(--ui-muted);opacity:1}
.site-design :is(input[type=checkbox],input[type=radio]){accent-color:var(--ui-text)}
.site-design :is(.account-panel input[type=checkbox],.journey-shell input[type=checkbox]){min-height:0;border-radius:0}
.site-design :is(.account-tabs,.order-total,.plan-points li,.fine-print,.billing-details>div,.billing-bottom,.billing-toggle label,.period-picker label,.account-navigation,.project-tools,.project-storage-tools,.faq details,.policy-copy section){border-color:var(--ui-border)}
.site-design :is(.billing-toggle label,.period-picker label){background:var(--ui-panel);border-radius:14px}
.site-design :is(.billing-toggle label:has(input:checked),.period-picker label:has(input:checked)){background:var(--ui-panel);border-color:var(--ui-text);box-shadow:inset 0 0 0 1px var(--ui-text)}
.site-design .billing-card .button:disabled{background:var(--ds-stage);color:var(--ds-muted)}
.site-design .account-navigation{border-bottom:0}
.site-design .account-navigation a{color:var(--ui-muted);text-decoration:none}
.site-design .account-navigation a[aria-current]{color:var(--ui-text);box-shadow:none}
.site-design .account-tabs button[aria-pressed=true]{border-color:var(--ui-text)}
.site-design .plan li::marker{color:var(--ui-text)}
.site-design .policy-copy .draft-item{background:var(--ui-panel);border-radius:12px;color:var(--ui-muted)}
.site-design .policy-copy{background:var(--ui-raised);border:1px solid var(--ui-border);border-radius:var(--ds-panel-radius);padding:8px 28px}
.site-design .policy-copy section:first-child{border-top:0}
.site-design:not(.design-pilot) .section{margin:32px 40px;padding:32px;background:var(--ui-raised);border:0;border-radius:var(--ds-panel-radius)}
.site-design:not(.design-pilot) .closing{margin:32px 40px;padding:28px 32px;background:var(--ui-raised);border-radius:var(--ds-panel-radius)}
.site-design .new-projects a{background:var(--ui-raised);border:1px solid var(--ui-border);border-radius:14px}
.site-design .new-projects a:hover{background:var(--ui-accent);color:var(--ui-ink)}
.site-design .project-cover{background:var(--ds-stage);border-radius:21px 21px 0 0}
.site-design .project-card-actions :is(a,button){color:var(--ui-text)}
.site-design :is(.project-actions button,.project-tools button,.project-tools .import-projects,.dialog-actions button,.template-actions button,.template-actions label,.slide-tools button,.copy-import button,.website-original,.website-download,.download-button,.export-access-actions button,.browser-import button){background:var(--ui-raised);color:var(--ui-text);border-color:var(--ui-border);border-radius:var(--ds-pill);min-height:40px}
.site-design :is(.website-download,.download-button,.browser-import button){background:var(--ui-text);color:var(--ui-page)}
.site-design #project-save{background:var(--ui-accent);color:var(--ui-ink);border-color:transparent}
.site-design :is(dialog,.export-access-dialog){border-color:var(--ui-border);border-radius:var(--ds-panel-radius);background:var(--ui-panel);color:var(--ui-text)}
.site-design dialog::backdrop{background:#0006}
.site-design #new-project-dialog{background:var(--ui-panel);color:var(--ui-text);border-color:var(--ui-border)}
.site-design #new-project-dialog>p{color:var(--ui-muted)}
.site-design #rename-name{background:var(--ui-field);color:var(--ui-text);border-color:var(--ui-border);border-radius:10px;min-height:44px}
.site-design #project-save-status{border-radius:12px}
.site-design :is(.preview-wrap,.journey-preview-stage){border-radius:16px}
.site-design #motion-main-preview{background:var(--ui-stage,var(--ui-raised));border-radius:var(--ds-panel-radius)}
.site-design .journey-preview-stage{background:var(--ui-stage,var(--ui-raised))}
.site-design :is(.dropzone,.journey-upload,.outline-card){border-radius:12px}
.site-design :is(.effect-media,.website-screen){border-radius:12px}
.site-design .website-screen{isolation:isolate}
.site-design .motion-export-dock{border:1px solid var(--ui-border);border-radius:20px 20px 0 0;box-shadow:0 -5px 24px #00000008}
.site-design .colour-control{border-radius:10px;min-height:44px}
.site-design :is(.studio-heading,.template-editor-heading,.website-treatment h2){border-radius:21px 21px 0 0}
.site-design :is(.toast,.preview-load-status){border-radius:12px}
.site-design :is(#preview-loading,#project-save-notice){border-radius:14px}
.site-design :is(.effect-use,.play){color:#090909}
@media(max-width:700px){
 .site-design:not(.design-pilot) .section{margin:24px 20px;padding:24px 20px;border-radius:18px}
 .site-design:not(.design-pilot) .closing{margin:24px 20px;padding:24px 20px;border-radius:18px}
 .site-design .policy-copy{padding:4px 20px;border-radius:18px}
 .site-design :is(.account-panel,.billing-card,.studio,.template-editor,.website-treatment){border-radius:18px}
 .site-design .motion-export-dock{border-radius:16px 16px 0 0}
}
body.site-design body{background:var(--ui-page);color:var(--ui-text)}
body.site-design .workspace-header{background:var(--ui-page);border-color:var(--ui-border)}
body.site-design .motion-export-dock{background:var(--ui-dock,var(--ui-page));border-color:var(--ui-border)}
body.site-design :is(.studio,.template-editor,.website-treatment,.outline-card,.journey-brand,.journey-history-panel,.account-menu-links,.save-options>div,.export-access-dialog){background:var(--ui-panel);color:var(--ui-text);border-color:var(--ui-border)}
body.site-design :is(#motion-main-preview,.preview-wrap,.journey-preview-stage,.journey-assets,.journey-message){background:var(--ui-stage,var(--ui-raised));border-color:var(--ui-border)}
body.site-design #motion-main-preview .preview-wrap{background:none}
body.site-design :is(input:not([type=color]):not([type=range]):not([type=file]):not([type=checkbox]),select,textarea){background:var(--ui-field);color:var(--ui-text);border-color:var(--ui-border)}
body.site-design :is(input,textarea)::placeholder{color:var(--ui-muted);opacity:1}
body.site-design :is(.project-file input,.asset-row input){background:transparent}
body.site-design :is(.colour-control,.dropzone,.journey-upload,.add-slide){border-color:var(--ui-border)}
body.site-design :is(.dropzone,.journey-upload){background:var(--ui-field)}
body.site-design :is(.dropzone:hover,.dropzone.dragging,.journey-upload.dragging,.asset-row.is-dragging){background:var(--ui-raised);border-color:var(--ui-accent)}
body.site-design :is(.intro-note,.secondary:not(.button),.effect-duration,.effect-description,.mono,.step-number,.privacy,.format-help,.reorder-help,.contrast-note,.export-note,.export-policy,.preview-loading,.preview-stage .preview-tag,.asset-row button,.project-file label,.style-picker-field p,.template-bar small,.slide-caption small,.template-section-title,.template-note,.template-status,.copy-import p,.journey-steps button span,.journey-utilities>span,.journey-lead,.optional,.journey-help,.journey-assets-header p,.journey-upload>span:last-of-type,.journey-example b,.journey-example p,.journey-section-heading p:not(.eyebrow),.outline-number,.journey-history-panel button small,.website-heading span:last-child,.website-phase,.website-caption,.website-status,.website-beat small,.website-beat p,.website-reference-grid figcaption,.export-access-hint,footer){color:var(--ui-muted)}
body.site-design :is(.dropzone>span:not(.upload-mark),.motion-export-dock #export-note){color:var(--ui-muted)}
body.site-design :is(.workspace-modes,.project-bar,.section-line,.studio-heading,.upload-panel,.preview-caption,.style-picker,.template-bar,.template-editor-heading,.template-divider,.copy-import,.journey-top,.journey-example>div,.journey-history-panel button,.journey-publishing,.website-heading,.website-transport,.website-treatment h2,.website-beat,.website-references,.text-button,footer){border-color:var(--ui-border)}
body.site-design :is(.workspace-navigation>a[aria-current],.account-menu>summary.current-section,.workspace-modes>a[aria-current=page]){background:var(--ui-raised);color:var(--ui-accent);border-color:var(--ui-border)}
body.site-design :is(.workspace-navigation>a:hover,.account-menu>summary:hover,.account-menu-links>a:hover,.account-menu-links>a:focus-visible,.project-actions .save-options button:hover,.studio-theme-toggle:hover){background:var(--ui-raised)}
body.site-design :is(.slide-tools button,.template-actions button,.template-actions label,.copy-import button,.journey-preview-controls button,.website-transport button,.website-original,.website-download,.download-button,.export-access-actions button,.project-actions .save-options button,.asset-row .reorder-handle:hover,.asset-row .reorder-handle:focus-visible,.skip-link){background:var(--ui-raised);color:var(--ui-text);border-color:var(--ui-border)}
body.site-design :is(.export-button,.journey-primary,.export-access-actions a),body.site-design #project-save{background:var(--ui-accent);color:var(--ui-ink);border-color:var(--ui-accent)}

body.site-design .is-exporting .export-button{background:var(--ui-raised);color:var(--ui-text)}
body.site-design #project-save-status{background:var(--ui-raised);color:var(--ui-text);border-color:var(--ui-border)}
body.site-design #project-save-status[data-state=saved]::before{color:var(--ui-accent)}
body.site-design #project-save-status[data-state=saving]::before{border-color:var(--ui-border);border-top-color:var(--ui-accent)}
body.site-design :is(#project-save-status[data-state=error],.template-errors){background:#402a23;color:#ffc4ad;border-color:#b2795d}
body.site-design .slide-caption .slide-error{color:#ffc4ad}
body.site-design :is(.effect-use,.play){color:#090909}
body.site-design :is(.effect-card[aria-pressed=true] .effect-media,.slide-card[aria-pressed=true] canvas){outline-color:var(--ui-accent)}
body.site-design .journey-steps button[aria-current=step]{border-bottom-color:var(--ui-accent)}
body.site-design :is(.website-controls input,.website-transport input){accent-color:var(--ui-accent)}
body.site-design :focus-visible{outline-color:var(--ui-accent)}
body.site-design :is(input:focus,select:focus,textarea:focus){border-color:var(--ui-accent)}
/* Shared preview surrounds match Banners; artwork colours remain independent. */
body.site-design :is(#motion-main-preview,.journey-preview-stage){background:var(--ui-stage,var(--ui-raised))}
body.site-design .journey-assets{background:var(--ui-raised)}
body.site-design :is(.workspace-navigation>a[aria-current],.workspace-modes>a[aria-current=page]){background:var(--ui-accent);color:var(--ui-ink);border-color:transparent}
body.site-design .workspace-modes>a[aria-current=page]{color:var(--ui-ink)}
body.site-design :is(.effect-card[aria-pressed=true] .effect-media,.slide-card[aria-pressed=true] canvas){outline-color:var(--ui-text)}
body.site-design .journey-steps button[aria-current=step]{border-bottom-color:var(--ui-text)}
body.site-design :focus-visible{outline-color:var(--ui-text)}
body.site-design :is(input:focus,select:focus,textarea:focus){border-color:var(--ui-text)}

/* High-contrast utility feedback and dialogs in either theme. */
body.site-design .button.secondary{background:var(--ui-text);color:var(--ui-page)}
body.site-design #progress-text{color:var(--ui-muted)}
body.site-design #preview-loading,body.site-design .toast{background:#090909;color:#fff;border-color:#333}
body.site-design #preview-loading .loading-spinner{border-color:#68696d;border-top-color:#ffff61}
body.site-design #preview-loading[data-state=ready] .loading-spinner::after{color:#ffff61}
body.site-design #project-save-notice{background:#090909;color:#fff;border-color:#333}
body.site-design #project-save-notice[data-state=error]{background:#803f26}
body.site-design #project-save-notice[data-state=saved]::before{color:#ffff61}
body.site-design #new-project-dialog::backdrop{background:#0006}
body.site-design #project-save-status[data-state=saved]::before{color:var(--ui-text)}
body.site-design .account-menu>summary.current-section{background:var(--ui-accent);color:var(--ui-ink)}
body.site-design :is(.website-controls input,.website-transport input,progress){accent-color:var(--ui-text)}
body.site-design .effect-card[aria-pressed=true] .effect-use{background:var(--ui-accent);color:var(--ui-ink)}
body.site-design .effect-number{background:#ffffffed;color:#090909}
body.site-design .effect-preview-note{background:#ffffffed;color:#090909}
body.site-design :is(#project-save-status[data-state=error],.template-errors){background:#fff3eb;color:#803f26;border-color:#ba6a43}
body.site-design .slide-caption .slide-error{color:#9e341e}

/* Yellow actions invert to black; black actions invert to yellow on hover. */
body.site-design .button.secondary{--action-hover-bg:#ffff61;--action-hover-ink:#090909}
body.site-design :is(.button,.export-button,.journey-primary,.export-access-actions a):not(:disabled):not([aria-disabled=true]):hover,
body.site-design #project-save:not(:disabled):hover{background:var(--action-hover-bg,#090909);color:var(--action-hover-ink,#fff);border-color:var(--action-hover-bg,#090909)}
body.site-design .browser-import button:not(:disabled):hover{background:#ffff61;color:#090909}
body.site-design :is(.workspace-navigation>a[aria-current],.workspace-modes>a[aria-current=page],.account-menu>summary.current-section):hover{background:#090909;color:#fff}

/* One foreground/background pair for action labels and nested icons, in either theme. */
body.site-design :is(.button.secondary,.browser-import button){--action-hover-bg:#ffff61;--action-hover-ink:#090909}
html body.site-design :is(button,.button,.export-button,.journey-primary,.export-access-actions a,.feature-grid a,.carousel-intro .text-link,.website-original,.website-download,.download-button,.project-tools .import-projects,.template-actions label):not(.effect-card):not(.slide-card):not(.banner-design-card):not(.carousel-design-card):not(:where(.text-button,.text-link,.auth-links button,.auth-switch button,.feature-grid a)):not(:disabled):not([aria-disabled=true]):hover{background:var(--action-hover-bg,#090909);color:var(--action-hover-ink,#fff);border-color:var(--action-hover-bg,#090909)}
html body.site-design :is(button,.button,.export-button,.journey-primary,.export-access-actions a,.feature-grid a,.carousel-intro .text-link,.website-original,.website-download,.download-button,.project-tools .import-projects,.template-actions label):not(.effect-card):not(.slide-card):not(.banner-design-card):not(.carousel-design-card):not(:where(.text-button,.text-link,.auth-links button,.auth-switch button,.feature-grid a)):not(:disabled):not([aria-disabled=true]):hover :is(span,small,strong,svg){color:inherit}
html body.site-design .effect-card:hover .effect-use{background:#090909;color:#fff}

/* Inline text actions stay transparent, with a subtle colour and underline fade. */
html body.site-design :is(.text-button,.text-link,.auth-links button,.auth-switch button,.feature-grid a){
 background:transparent;color:var(--ui-muted);border:0;
 text-decoration-line:underline;text-decoration-thickness:1px;text-decoration-color:var(--ui-border);text-underline-offset:3px;
 transition:color .18s ease,text-decoration-color .18s ease;
}
html body.site-design :is(.text-button,.text-link,.auth-links button,.auth-switch button,.feature-grid a):not(:disabled):not([aria-disabled=true]):is(:hover,:focus-visible){
 background:transparent;color:var(--ui-text);text-decoration-color:currentColor;
}
@media(prefers-reduced-motion:reduce){
 html body.site-design :is(.text-button,.text-link,.auth-links button,.auth-switch button,.feature-grid a){transition:none}
}

/* A clear, non-flashing next step when Create video needs images. */
html body.site-design #dropzone:focus-within{outline:2px solid var(--ui-text);outline-offset:4px}
html body.site-design #dropzone.upload-attention{background:#ffff61;color:#090909;border-color:#090909;outline:3px solid #ffff61;outline-offset:5px;transition:none}
html body.site-design #dropzone.dropzone.upload-attention :is(strong,span){color:#090909}

/* Official 5K identity: artwork only; the descriptor is never part of the wordmark. */
.site-design .workspace-brand,.site-design .workspace-brandmark{display:inline-flex;align-items:center;min-height:44px;flex-shrink:0;text-decoration:none}
.site-design .workspace-brand .brand-art{width:52px;height:auto;display:block;flex-shrink:0}
.site-design .workspace-brandmark .brand-art{width:44px;height:auto;display:block;flex-shrink:0}
.site-design :is(.workspace-brand,.workspace-brandmark) .brand-dark{display:none}
[data-studio-theme=dark] .site-design :is(.workspace-brand,.workspace-brandmark) .brand-light{display:none}
[data-studio-theme=dark] .site-design :is(.workspace-brand,.workspace-brandmark) .brand-dark{display:block;filter:brightness(0) invert(1)}
@media(max-width:620px){.site-design .workspace-brand .brand-art{width:43px}}