/* Optional studio accents. Brand artwork and generated scenes keep their own palettes. */
.logo-mark{display:block;width:28px;height:28px;flex:none;background:#f6f6f6;mask-image:url('/assets/framebox-logo.svg');mask-mode:alpha;mask-size:contain;mask-position:center;mask-repeat:no-repeat}
@property --studio-accent{syntax:'<color>';inherits:true;initial-value:#9ebfff}
html{--studio-accent:#bcbcc4}html[data-accents=pastel]{animation:studio-accent-cycle 24s ease-in-out infinite}
[data-accents=pastel] .logo-mark{background:var(--studio-accent)}
@keyframes studio-accent-cycle{0%,100%{--studio-accent:#9ebfff}25%{--studio-accent:#f0aaa4}50%{--studio-accent:#ebd18a}75%{--studio-accent:#9bceb1}}
[data-accents=pastel] #framebox-pixel-motion .recent{border-left:2px solid color-mix(in srgb,var(--project-accent) 55%,transparent);border-radius:0 5px 5px 0}
[data-accents=pastel] #framebox-pixel-motion .recent svg{color:var(--project-accent);opacity:.8}
[data-accents=pastel] #framebox-pixel-motion .recent.selected,[data-accents=pastel] #framebox-pixel-motion .recent:hover{border-left-color:var(--project-accent);background:color-mix(in srgb,var(--project-accent) 7%,#09090b)}
[data-accents=pastel] .member-avatar,[data-accents=pastel] #framebox-pixel-motion .fb-avatar{color:var(--member-accent);background:color-mix(in srgb,var(--member-accent) 13%,#111113);border:1px solid color-mix(in srgb,var(--member-accent) 25%,transparent)}
[data-accents=pastel] .fb-create,[data-accents=pastel] .primary,[data-accents=pastel] .auth-submit{transition:box-shadow .25s,background .25s;--press-accent:#9ebfff}
[data-accents=pastel] .fb-create:hover,[data-accents=pastel] .primary:hover{box-shadow:0 0 23px #9ebfff25,0 0 1px #9ebfff80}
[data-accents=pastel] .accent-click{animation:studio-click .65s ease-out}
@keyframes studio-click{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--press-accent) 40%,transparent),0 0 22px color-mix(in srgb,var(--press-accent) 20%,transparent)}100%{box-shadow:0 0 0 9px transparent,0 0 30px transparent}}
.accent-swatches{display:flex;gap:6px;margin:18px 0 0}.accent-swatches i{display:block;width:14px;height:14px;border-radius:50%}
[data-accents=mono] .accent-swatches{filter:grayscale(1)}
#framebox-pixel-motion.collapsed .logo-mark{width:28px;height:28px}
@media(prefers-reduced-motion:reduce){[data-accents=pastel] .logo-mark{animation:none;background:#9ebfff}[data-accents=pastel] .accent-click{animation:none}[data-accents=pastel] .fb-create,[data-accents=pastel] .primary{transition:none}}
@media(max-width:620px){.logo-mark{width:26px;height:26px}}

#framebox-pixel-motion .recent .recent-client-icon{width:16px;height:16px;object-fit:cover;flex:none;border-radius:4px}

#framebox-pixel-motion .recent-client-initial{display:grid;place-items:center;width:16px;height:16px;border-radius:4px;background:#242427;color:#dedee2;font-size:9px;flex:none}
@media(max-width:620px){#framebox-pixel-motion .fb-avatar{display:grid;margin-bottom:12px}}

/* A hairline focus edge and a shared, softly shifting accent. */
:is(#framebox-pixel-motion,#dialog) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select):focus{outline:none!important;border-color:color-mix(in srgb,var(--studio-accent) 42%,transparent)!important;box-shadow:0 0 0 1px color-mix(in srgb,var(--studio-accent) 6%,transparent),0 0 16px color-mix(in srgb,var(--studio-accent) 13%,transparent)!important}
@media(prefers-reduced-motion:reduce){html[data-accents=pastel]{animation:none;--studio-accent:#9ebfff}}
/* Filled actions share the same slow colour cycle. */
html[data-accents=pastel] :is(#framebox-pixel-motion,#dialog) :is(.primary,.fb-create,.auth-submit){background:var(--studio-accent);border-color:var(--studio-accent);color:#101114}
html[data-accents=pastel] :is(#framebox-pixel-motion,#dialog) :is(.primary,.fb-create,.auth-submit):hover:not(:disabled){background:color-mix(in srgb,var(--studio-accent) 92%,white);box-shadow:0 0 20px color-mix(in srgb,var(--studio-accent) 16%,transparent)}

/* The Create composer receives focus as one surface. */
#framebox-pixel-motion .fb-composer{transition:border-color .2s,box-shadow .2s}
#framebox-pixel-motion .fb-composer:focus-within{border-color:color-mix(in srgb,var(--studio-accent) 38%,#29292d);box-shadow:0 0 0 1px color-mix(in srgb,var(--studio-accent) 5%,transparent),0 0 25px color-mix(in srgb,var(--studio-accent) 11%,transparent)}
#framebox-pixel-motion .fb-composer #brief:focus{border-color:transparent!important;box-shadow:none!important;outline:none!important}