/* Functional appearance UI. All colours come from the active design tokens. */
@media(max-width:600px){.public-menu-toggle{justify-self:end}}
.appearance-trigger{display:inline-flex;gap:8px;align-items:center;justify-content:center;padding:10px 14px;min-height:44px;border:1px solid var(--line-strong,#695361);border-radius:var(--control-radius,12px);background:var(--surface,#241d29);color:var(--ink,#f6eef2);font:600 14px/1.4 var(--font,system-ui);cursor:pointer;white-space:normal}.appearance-trigger svg{width:20px;height:20px;flex:none}.appearance-trigger:hover{border-color:var(--accent,#d995af)}
.appearance-panel{position:fixed;inset:16px 16px 16px auto;width:min(520px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 32px);height:calc(100dvh - 32px);margin:0;padding:28px;border:1px solid var(--line-strong);border-radius:var(--radius,24px);background:var(--panel);color:var(--ink);box-shadow:0 24px 100px #0006;overflow:auto;overscroll-behavior:contain;z-index:10000}.appearance-panel::backdrop{background:#08070c99;backdrop-filter:blur(3px)}.appearance-panel[open]{display:flex;flex-direction:column;gap:20px}.appearance-panel p{margin:0;line-height:1.6;color:var(--muted)}.appearance-panel-heading{display:flex;align-items:start;justify-content:space-between;gap:16px}.appearance-panel-heading h2{font:650 28px/1.2 var(--font);margin:0;max-width:14ch}.appearance-close{flex:none;font-size:13px;padding:8px 12px;min-height:40px;background:var(--surface);border:1px solid var(--line-strong);color:var(--ink)}
.appearance-carousel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;min-height:0;flex-shrink:0;padding:4px;touch-action:pan-y}.appearance-choice{flex:0 0 calc(100% - 12px);display:block;text-align:left;background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius);padding:8px;min-width:0;max-width:none;cursor:pointer}.appearance-choice[aria-checked=true]{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:0}.appearance-choice img{width:100%;height:auto;aspect-ratio:1.44;object-fit:contain;display:block;background:var(--bg);border-radius:calc(var(--radius) - 5px)}.appearance-choice-caption{font-size:14px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;padding:10px 4px 4px}.appearance-badge{font-size:12px;color:var(--muted)}.appearance-controls{display:flex;justify-content:space-between;gap:12px;align-items:center}.appearance-controls h3{font:650 20px/1.3 var(--font);margin:0}.appearance-controls button{padding:8px 12px;font-size:13px;min-height:44px}.appearance-saved-state{font-weight:600;color:var(--accent)!important}.appearance-account-note{font-size:14px}.appearance-feedback:empty{display:none}.appearance-panel-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto;padding-top:20px;border-top:1px solid var(--line)}.appearance-panel-actions button{flex:1 1 110px;min-height:46px}.appearance-panel :focus-visible{outline:2px solid var(--focus);outline-offset:4px}.appearance-open{scrollbar-gutter:stable}.appearance-panel[aria-busy=true] .appearance-close{opacity:.6}
@media(max-width:600px){.appearance-panel{inset:8px;width:calc(100% - 16px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px);padding:20px}.appearance-panel-heading h2{font-size:25px}.appearance-trigger{font-size:13px;padding:8px 12px}.appearance-panel-actions{gap:8px}.appearance-panel-actions button{flex-basis:90px}.appearance-carousel{gap:12px}.appearance-choice{flex-basis:calc(100% - 8px)}}
@media(prefers-reduced-motion:reduce){.appearance-panel *{scroll-behavior:auto!important;transition:none!important}}

.autumn-scene{display:none}
/* Both hero compositions share the functional sections below them. Inactive
   compositions are removed from layout and the accessibility tree by display. */
html[data-design=vaeros] [data-home-appearance=modern],html:not([data-design=vaeros]) [data-home-appearance=vaeros]{display:none!important}
/* The original palette is unchanged. These tokens support the added selector. */
:root[data-design=vaeros]{--control-radius:12px;--accent-soft:#182c48;--focus:#89ace9;--positive:#a3d9bb;--positive-soft:#17352b;--negative:#f3a8b3;--negative-soft:#432731;--warning:#e8c692;--warning-soft:#403323;--shadow-color:#000000}
/* Appearance is the only extra control added to the restored navigation. */
html[data-design=vaeros] .public-header{grid-template-columns:auto minmax(0,1fr) auto auto;gap:16px}
@media(max-width:900px){html[data-design=vaeros] .public-header{grid-template-columns:minmax(0,1fr) auto auto auto;gap:12px}html[data-design=vaeros] .public-menu-toggle{grid-column:2;grid-row:1}html[data-design=vaeros] .public-header .appearance-trigger{grid-column:3;grid-row:1}html[data-design=vaeros] .public-login{grid-column:4;grid-row:1}html[data-design=vaeros] .public-header nav{grid-column:1/-1;grid-row:2}}
@media(max-width:600px){html[data-design=vaeros] .public-header{grid-template-columns:minmax(0,1fr) auto}html[data-design=vaeros] .public-menu-toggle{grid-column:2;grid-row:1}html[data-design=vaeros] .public-header .appearance-trigger{grid-column:1;grid-row:2;justify-self:start}html[data-design=vaeros] .public-login{grid-column:2;grid-row:2;max-width:170px}html[data-design=vaeros] .public-header nav{grid-row:3}}