/* Figma Animator web branding. Shared by the editor, connection guide and sign-in. */
:root { --brand-bg:#101112; --brand-panel:#191a1c; --brand-border:#303236; --brand-text:#f3f3f1; --brand-muted:#a4a7ac; }
.brand-logo { width:40px; height:40px; flex:none; object-fit:contain; border-radius:10px; }
.brand-wordmark { display:inline-flex; align-items:center; gap:10px; color:var(--brand-text); text-decoration:none; font-weight:650; letter-spacing:-.025em; }
:where(a,button,input,textarea,select,summary):focus-visible { outline:2px solid #e2e3e5; outline-offset:4px; }
/* Editor: preserve control geometry and scroll ownership. */
body.editor { background:var(--brand-bg); color:var(--brand-text); }
.editor header { background:var(--brand-bg); border-color:var(--brand-border); padding:10px 24px; gap:14px; }
.editor header h1.brand-link { display:flex; align-items:center; gap:10px; letter-spacing:-.025em; }
.editor header h1.brand-link:hover { color:#fff; }
.editor .badge { background:#222426; color:#b6b9be; border:1px solid #35373b; letter-spacing:.07em; border-radius:5px; }
.editor .header-mcp-link { margin-left:auto; color:#b9bcc1; text-decoration:none; font-size:12px; padding:8px; }
.editor .header-mcp-link:hover { color:#fff; }
.editor .header-logout-btn { margin-left:0; }
.editor .btn-primary { background:#eeeef0; color:#17181a; }
.editor .btn-primary:hover:not(:disabled) { background:#fff; }
.editor .btn-secondary { background:#202224; border-color:#34363a; color:#d0d2d6; }
.editor .btn-secondary:hover:not(:disabled) { background:#2b2d30; }
.editor .home-kicker { color:#aaaeb4; letter-spacing:.14em; }
.editor .home-title { font-size:clamp(28px,3.7vw,44px); letter-spacing:-.045em; font-weight:650; }
.editor .home-lede { color:#a8abb0; max-width:48em; font-size:15px; }
.editor .home-option-card { background:#191a1c; border-color:#303236; padding:24px; border-radius:14px; }
.editor .home-option-title { font-size:17px; font-weight:600; }
.editor .home-option-desc { color:#a8abb0; font-size:13px; line-height:1.6; }
.editor .home-option-icon { width:32px; height:32px; color:#dddfe2; margin-bottom:18px; }
.editor .home-option-icon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.editor input[type=text],.editor textarea,.editor select,.editor input[type=number] { background:#191b1e; border-color:#383a3e; }
.editor input[type=text]:focus,.editor textarea:focus,.editor select:focus,.editor input[type=number]:focus { border-color:#c4c6ca; }
.editor .home-option-input-row input::placeholder { color:#83878e; }
.editor .custom-scrollbar { scrollbar-color:#494c52 transparent; }
.editor .custom-scrollbar::-webkit-scrollbar-thumb { background-color:#494c52; }
.editor .custom-scrollbar::-webkit-scrollbar-thumb:hover { background-color:#686c73; }
.editor .frame-group-card.selected,.editor .frame-card.selected { background:#242629; border-color:#cccfd4; }
.editor .frame-group-card:hover,.editor .frame-card:hover { background:#202225; border-color:#7c8088; }
.editor .step-label,.editor .back-link,.editor .breadcrumb { color:#b8bbc1; }
@media(max-width:640px) { .editor header { padding:8px 14px; gap:6px; }.editor .brand-logo { width:32px; height:32px; }.editor .header-mcp-link { font-size:11px; white-space:nowrap; padding:6px; }.editor header h1.brand-link { font-size:13px; white-space:nowrap; gap:8px; }.editor .badge { display:none; }.editor .header-logout-btn { padding:7px 9px; white-space:nowrap; }.editor .home-option-card { padding:18px; } }
/* Sign-in keeps the same authentication flow and return target. */
body.brand-login { color-scheme:dark; --login-bg:#101112; --login-panel:#191a1c; --login-text:#f3f3f1; --login-muted:#a4a7ac; --login-border:#393c41; --login-soft-border:#303236; --login-accent:#eeeef0; --login-accent-ink:#17181a; --login-shadow:none; }
.brand-login .login-panel { border-radius:18px; }
.brand-login .login-brand { display:flex; align-items:center; gap:12px; margin-bottom:30px; }
.brand-login .login-brand .eyebrow { margin:0; color:#e8e9eb; letter-spacing:-.02em; text-transform:none; font-size:16px; }
.brand-login .login-footer { display:block; margin-top:24px; color:#a4a7ac; font-size:13px; text-decoration:none; }
.brand-login .login-footer:hover { color:#fff; }