html[data-cp-appearance]{--navy:var(--cp-primary);--blue:var(--cp-primary);--red:var(--cp-accent);--ink:var(--cp-text);--muted:var(--cp-muted);--line:var(--cp-line)}
html[data-cp-appearance] body{font-family:var(--cp-font);color:var(--cp-text);background:var(--cp-background)}
html[data-cp-appearance] :is(button,input,select,textarea){font-family:var(--cp-font);border-radius:var(--cp-radius)}
html[data-cp-appearance] :is(input,textarea,select){background:var(--cp-surface);color:var(--cp-text);border-color:var(--cp-line)}
html[data-cp-appearance] :is(small,.muted,.subtle,.sub,.hint,.label){color:var(--cp-muted)}
html[data-cp-appearance] :is(button,a,input,select,textarea):focus-visible{outline-color:var(--cp-primary)}
html[data-cp-appearance][data-cp-area=admin] :is(.panel,.stat,.auth,.ad-artwork,.ad-upload-image){background:var(--cp-surface);border-color:var(--cp-line)}
html[data-cp-appearance][data-cp-area=admin] :is(.ad-help,.ad-map,.preview){background:var(--cp-soft);color:var(--cp-text);border-color:var(--cp-line)}
html[data-cp-appearance][data-cp-area=admin] :is(.sidebar,.ad-map-header,#notice){background:var(--cp-primary);color:var(--cp-onprimary)}
html[data-cp-appearance][data-cp-area=admin] .sidebar :is(button,a,small){color:var(--cp-onprimary)}
html[data-cp-appearance][data-cp-area=admin] :is(button,.ad-tabs button){background:var(--cp-surface);color:var(--cp-text);border-color:var(--cp-line)}
html[data-cp-appearance][data-cp-area=admin] :is(button.primary,.ad-tabs button.selected){background:var(--cp-primary);border-color:var(--cp-primary);color:var(--cp-onprimary)}
html[data-cp-appearance][data-cp-area=admin] .sidebar button{background:transparent;border-color:transparent;color:var(--cp-onprimary)}
html[data-cp-appearance][data-cp-area=admin] .sidebar button.selected{background:rgba(255,255,255,.15)}
html[data-cp-appearance][data-cp-area=admin] .brand strong{color:inherit}
html[data-cp-appearance][data-cp-area=admin] a{color:var(--cp-primary)}
html[data-cp-appearance][data-cp-area=admin] :is(.post,.team-row,.ad-campaign,.ad-upload,.ad-table td){border-color:var(--cp-line)}
html[data-cp-appearance][data-cp-area=admin] .ad-table th{background:var(--cp-soft);color:var(--cp-muted)}
html[data-cp-appearance][data-cp-area=admin][data-cp-density=compact] :is(.panel,.stat){padding:18px}
html[data-cp-appearance][data-cp-area=admin][data-cp-density=compact] :is(.post,.team-row,.ad-campaign){padding-top:14px;padding-bottom:14px}
html[data-cp-appearance][data-cp-area=portal] :is(.institutional,.quicklinks,.institutional-form,.reader-form){background:var(--cp-surface);color:var(--cp-text)}
html[data-cp-appearance][data-cp-area=portal] .brand strong{font-family:var(--cp-font);color:var(--cp-primary)}
html[data-cp-appearance][data-cp-area=portal] :is(.brand small,.masthead p,.ticker strong,.ad-map-group>small){letter-spacing:normal}
html[data-cp-appearance][data-cp-area=portal] .primary{background:var(--cp-primary);color:var(--cp-onprimary);border-radius:var(--cp-radius)}
html[data-cp-appearance][data-cp-area=mobile] :is(#app,.top,.page,.editor-body){background:var(--cp-background);color:var(--cp-text)}
html[data-cp-appearance][data-cp-area=mobile] :is(.article,.stat,.login,.nav,.editor-top,.editor-foot,.profile-card,.menu-item,.sheet,.summary,.toggle,.empty){background:var(--cp-surface);color:var(--cp-text)}
html[data-cp-appearance][data-cp-area=mobile] :is(.primary,.hero,.nav .create svg){background:var(--cp-primary);color:var(--cp-onprimary)}
html[data-cp-appearance][data-cp-area=mobile] .hero p{color:var(--cp-onprimary)}
html[data-cp-appearance][data-cp-area=mobile] :is(.secondary,.cover,.avatar){background:var(--cp-soft);color:var(--cp-primary)}
html[data-cp-appearance][data-cp-buttons=glass] :is(button,.primary){background-image:linear-gradient(165deg,rgba(255,255,255,.2),rgba(255,255,255,.03) 55%,rgba(255,255,255,.09));box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(0,0,0,.07),0 1px 3px rgba(15,30,50,.08);backdrop-filter:blur(12px) saturate(130%);-webkit-backdrop-filter:blur(12px) saturate(130%)}
html[data-cp-appearance][data-cp-buttons=glass] :is(button,.primary):hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.52),0 2px 5px rgba(15,30,50,.14)}
@media(prefers-reduced-motion:reduce){html[data-cp-appearance] *{scroll-behavior:auto!important;transition:none!important}}

html[data-cp-appearance][data-cp-area=admin] .sidebar button.selected{box-shadow:inset 3px 0 0 var(--cp-accent)}
html[data-cp-appearance][data-cp-area=admin] .appearance-tabs button[aria-pressed=true]{background:var(--cp-primary);color:var(--cp-onprimary)}

html[data-cp-appearance][data-cp-buttons=glass] :is(button.primary,a.primary,.hero button,.sidebar button,.ad-tabs button.selected,.appearance-tabs button[aria-pressed=true]){background-image:none}