:root {
  --glyx-action-fill: #14634f;
  --glyx-action-hover: #19765e;
  --glyx-action-border: #2e8b70;
  --glyx-action-text: #effff8;
}
html[data-ui-custom="true"] {
  --glyx-action-fill: color-mix(in srgb,var(--ui-accent) 35%,#1f252d);
  --glyx-action-hover: color-mix(in srgb,var(--ui-accent) 45%,#1f252d);
  --glyx-action-border: color-mix(in srgb,var(--ui-accent) 60%,#1f252d);
}
@font-face {
  font-family: 'Funnel Display';
  src: url('/assets/fonts/funnel-display/FunnelDisplay-Variable.ttf') format('truetype');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: OpenDyslexic;
  src: url('/assets/fonts/opendyslexic/OpenDyslexic-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: OpenDyslexic;
  src: url('/assets/fonts/opendyslexic/OpenDyslexic-Bold.woff2') format('woff2');
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}
:root { --ui-accent: #00e0a4; --ui-accent-rgb: 0, 224, 164; --ui-accent-secondary-rgb: 0, 184, 148; }
html[data-ui-legacy-font="true"] { --ui-interface-font: 'Inter', sans-serif; }
html[data-ui-text="small"] { font-size: 14px; }
html[data-ui-text="large"] { font-size: 18px; }
html[data-ui-text="xlarge"] { font-size: 20px; }
html[data-ui-font="dyslexic"] body,
html[data-ui-font="dyslexic"] :is(button, input, textarea, select, h1, h2, h3, h4, p, a, label, strong, small, span) {
  font-family: OpenDyslexic, sans-serif !important;
}
html[data-ui-font="dyslexic"] :is(code, pre, kbd, samp) * { font-family: inherit !important; }
.site-lang-dropdown.preferences-trigger { display: flex !important; }
:is(nav.fixed, nav.panel-navbar, .panel-version-footer),
:is(nav.fixed, nav.panel-navbar, .panel-version-footer) :is(button, input, textarea, select) { font-family: var(--ui-interface-font, 'Funnel Display', sans-serif); }
:is(nav, .site-footer) .nav-unix { font-family: 'Inter', sans-serif !important; }
.site-footer { font-family: var(--ui-interface-font, 'Funnel Display', sans-serif); }
.site-footer :is(button, input, select) { font-family: inherit; }
.site-footer .footer-brand-row { display: flex; align-items: center; gap: 8px; }
.site-footer .footer-brand-row > .site-lang-footer-separator { display: flex; align-items: center; align-self: stretch; }
.site-footer .footer-brand-row > #footer-lang-dropdown { margin-left: -8px; transform: translateY(2px); }
.cookie-consent-root { font-family: var(--ui-interface-font, 'Funnel Display', sans-serif); }
.cookie-consent-root :is(button, input, select) { font-family: inherit; }
.site-toast.site-toast-info {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(9px) saturate(1.3); -webkit-backdrop-filter: blur(9px) saturate(1.3);
  border: 1px solid rgb(34,34,48); border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.4);
}
.site-toast.site-toast-auth {
  background: transparent;
  backdrop-filter: blur(18px) saturate(1.14); -webkit-backdrop-filter: blur(18px) saturate(1.14);
  border: 1px solid rgba(255,255,255,.1); border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.34);
}
/* Shared navbar feedback for public pages and all panels. */
/* Only the menus are fixed: a viewport-sized portal can trigger Safari's solid edge fill. */
.navbar-avatar-layer { position: relative; width: 0; height: 0; z-index: 1000; pointer-events: none; font-family: 'Inter', sans-serif; }
/* Avatar menus keep the original interface font, including their controls. */
:is(nav,.navbar-avatar-layer) :is(#user-panel,#mobile-user-panel,.upanel-user-panel) { font-family: 'Inter', sans-serif; }
:is(nav,.navbar-avatar-layer) :is(#user-panel,#mobile-user-panel,.upanel-user-panel) :is(button,input,textarea,select) { font-family: inherit; }
.navbar-avatar-layer :is(#user-panel,#mobile-user-panel,.upanel-user-panel) { position: fixed; right: auto; max-width: calc(100vw - 24px); overflow-y: auto; }
nav :is(.avatar-trigger,.upanel-avatar-trigger) { transition: transform .26s cubic-bezier(.16,1,.3,1); }
nav :is(.avatar-trigger,.upanel-avatar-trigger):active { transform: translateY(0) scale(.94); transition-duration: .1s; }
nav :is(.avatar-trigger,.upanel-avatar-trigger):active img { transform: scale(1); }
nav :is(.avatar-trigger,.upanel-avatar-trigger)[aria-expanded="true"] img { animation: navbarAvatarOpen .36s cubic-bezier(.16,1,.3,1) both; }
@keyframes navbarAvatarOpen {
  0% { transform: scale(.96) rotate(0); }
  60% { transform: scale(1.065) rotate(-1deg); }
  100% { transform: scale(1.045) rotate(-1deg); }
}
:is(nav,.navbar-avatar-layer) :is(#user-panel,#mobile-user-panel,.upanel-user-panel) { transform-origin: top right; transform: translateY(16px) scale(.97); transition: opacity .24s ease, transform .32s cubic-bezier(.16,1,.3,1), visibility 0s linear .32s; }
:is(nav,.navbar-avatar-layer) :is(#user-panel.panel-visible,#mobile-user-panel.panel-visible,.upanel-user-panel.is-open) { transform: translateY(0) scale(1); transition-delay: 0s; }
:is(nav,.navbar-avatar-layer) :is(#user-panel,#mobile-user-panel,.upanel-user-panel),
:is(nav,.navbar-avatar-layer) :is(#user-panel,#mobile-user-panel,.upanel-user-panel):hover {
  top: calc(100% + 6px); margin-top: 0; z-index: 100;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(9px) saturate(1.3); -webkit-backdrop-filter: blur(9px) saturate(1.3);
  border: 1px solid rgb(34,34,48); border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.4);
}
@property --avatar-menu-border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
:is(nav,.navbar-avatar-layer) :is(#user-panel,#mobile-user-panel,.upanel-user-panel)::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--avatar-menu-border-angle),
    transparent 0deg 275deg, rgba(var(--ui-accent-rgb, 0, 224, 164),.25) 310deg,
    rgba(115,255,209,.95) 345deg, transparent 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: avatar-menu-border-orbit 4s linear infinite paused;
}
:is(nav,.navbar-avatar-layer) :is(#user-panel.panel-visible,#mobile-user-panel.panel-visible,.upanel-user-panel.is-open)::before {
  animation-play-state: running;
}
@keyframes avatar-menu-border-orbit {
  to { --avatar-menu-border-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  :is(nav,.navbar-avatar-layer) :is(#user-panel,#mobile-user-panel,.upanel-user-panel)::before { animation: none; }
}
nav :is(.user-arrow,.mobile-user-arrow) {
  top: calc(100% + 1px);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(9px) saturate(1.3); -webkit-backdrop-filter: blur(9px) saturate(1.3);
  border-color: rgb(34,34,48); box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  nav :is(.avatar-trigger,.upanel-avatar-trigger),
  nav :is(.avatar-trigger,.upanel-avatar-trigger) img,
  :is(nav,.navbar-avatar-layer) :is(#user-panel,#mobile-user-panel,.upanel-user-panel) { animation: none !important; transition: none !important; transform: none !important; }
}
.preferences-trigger:has(> .nav-bot-status) { align-items: center; gap: 10px; }
.nav-bot-status { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 28px; padding: 4px 10px; border: 1px solid rgba(148,163,184,.2); border-radius: 9px; background: rgba(148,163,184,.045); color: #ccd6e2; font-size: .78rem; font-weight: 400; line-height: 1.2; white-space: nowrap; }
.nav-bot-status { font-family: var(--ui-interface-font, 'Funnel Display', sans-serif); }
.nav-bot-status, .nav-bot-status * { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; pointer-events: none; cursor: default; }
.nav-bot-status { appearance: none; box-sizing: border-box; min-width: 106px; transition: background .2s, border-color .2s; }
.nav-bot-status[data-status="online"]:not(:disabled) { pointer-events: auto; cursor: pointer; }
.nav-bot-status[data-status="online"]:not(:disabled):hover { background: rgba(148,163,184,.1); border-color: rgba(148,163,184,.35); }
.nav-bot-status:focus-visible { outline: 2px solid var(--ui-accent,#00e0a4); outline-offset: 3px; }
.nav-bot-status [data-nav-bot-label] { display: inline-block; }
@media (prefers-reduced-motion: reduce) { .nav-bot-status { transition: none; } }
.nav-bot-status-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: #7d8999; transition: background .2s ease; }
.nav-bot-status[data-status="online"] .nav-bot-status-dot { background: #00e0a4; }
.nav-bot-status[data-status="offline"] .nav-bot-status-dot { background: #f87171; }
.nav-bot-status[data-status="maintenance"] .nav-bot-status-dot { background: #fb923c; }
.nav-bot-status-mobile { display: none; }
@media (max-width: 767px) {
  .preferences-trigger > .nav-bot-status { display: none; }
  .nav-bot-status-mobile { display: flex; justify-content: center; padding: 8px 0 2px; }
  .preferences-trigger:has(> .nav-bot-status) { gap: 0; }
}
@media (max-width: 640px) {
  .nav-bot-status { min-width: 92px; min-height: 26px; padding: 4px 7px; gap: 5px; font-size: .68rem; }
}
.preferences-trigger + :is(#login-btn:not(.hidden), .discord-login-control:has(> #login-btn:not(.hidden))) { margin-left: 8px !important; }
.preferences-trigger [data-lang-toggle] {
  display: grid; place-items: center; width: 40px !important; height: 40px !important;
  min-height: 40px !important; padding: 0 !important; gap: 0 !important;
  color: #ccd6e2; border: 1px solid rgba(148,163,184,.24) !important; border-radius: 12px;
  background: rgba(148,163,184,.045) !important; box-shadow: inset 0 1px rgba(255,255,255,.035);
  cursor: pointer; transition: background .22s ease, border-color .22s ease;
}
.preferences-trigger [data-lang-toggle]:hover {
  color: #f8fafc; background: rgba(148,163,184,.12) !important;
  border-color: rgba(203,213,225,.38) !important; transform: none;
}
#footer-lang-dropdown.preferences-trigger [data-lang-toggle],
#footer-lang-dropdown.preferences-trigger [data-lang-toggle]:hover {
  background: transparent !important; border-color: transparent !important; box-shadow: none;
}
.preferences-trigger [data-lang-current] { display: grid; place-items: center; width: auto !important; min-height: 0 !important; }
.preferences-trigger [data-lang-current] > svg { width: 21px; height: 21px; transition: transform .24s ease; }
.preferences-trigger [data-lang-toggle]:is(:hover, :focus-visible) [data-lang-current] > svg { transform: scale(1.1); }
.preferences-trigger [data-lang-arrow], .preferences-trigger [data-lang-menu] { display: none !important; }
.site-preferences {
  box-sizing: border-box; width: min(580px, calc(100% - 32px)); height: min(375px, calc(100dvh - 48px));
  max-width: none; max-height: calc(100dvh - 48px); padding: 0; margin: auto;
  border: 1px solid rgb(34,34,48); border-radius: 16px;
  color: #e2e8f0; background: rgba(255,255,255,.04);
  backdrop-filter: blur(9px) saturate(1.3); -webkit-backdrop-filter: blur(9px) saturate(1.3);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.4);
  font-family: var(--ui-interface-font, 'Funnel Display', sans-serif); font-size: .875rem; line-height: 1.5; overflow: hidden;
}
.site-preferences[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: preferencesPanelIn .32s cubic-bezier(.16,1,.3,1) both, preferencesFadeIn .24s ease both; }
.site-preferences[open].is-closing { animation: preferencesPanelOut .32s cubic-bezier(.16,1,.3,1) both, preferencesFadeOut .24s ease both; pointer-events: none; }
.site-preferences::backdrop { background: rgba(0,0,0,.6); backdrop-filter: none; -webkit-backdrop-filter: none; animation: preferencesFadeIn .24s ease both; }
.site-preferences.is-closing::backdrop { animation: preferencesFadeOut .24s ease both; }
@keyframes preferencesPanelIn { from { transform: translateY(16px) scale(.97); } to { transform: translateY(0) scale(1); } }
@keyframes preferencesPanelOut { from { transform: translateY(0) scale(1); } to { transform: translateY(16px) scale(.97); } }
@keyframes preferencesFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes preferencesFadeOut { from { opacity: 1; } to { opacity: 0; } }
.site-preferences *, .site-preferences *::before, .site-preferences *::after { box-sizing: border-box; }
.site-preferences :is(button, input) { font: inherit; }
.site-preferences button { cursor: pointer; }
.site-preferences svg { display: block; width: 16px; height: 16px; flex-shrink: 0; }
.site-preferences button:focus-visible, .site-preferences input:focus-visible, .preferences-content:focus-visible {
  outline: 2px solid var(--ui-accent); outline-offset: 3px;
}
.preferences-header { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid rgba(148,163,184,.13); }
.preferences-header-icon { color: var(--ui-accent); }
.preferences-header h2 { margin: 0; font-size: .875rem; font-weight: 600; line-height: 20px; color: #f8fafc; }
.preferences-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 10px; min-width: 0; }
.preferences-applying { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 400; color: #94a3b8; white-space: nowrap; }
.preferences-applying[hidden] { display: none; }
.preferences-applying-spinner { width: 12px; height: 12px; flex: none; border: 1.5px solid rgba(148,163,184,.25); border-top-color: var(--ui-accent); border-radius: 50%; animation: preferencesApplyingSpin .8s linear infinite; }
.preferences-applying-dots { display: inline-flex; margin-left: -5px; }
.preferences-applying-dots span { animation: preferencesApplyingDot 1s ease-in-out infinite; }
.preferences-applying-dots span:nth-child(2) { animation-delay: .15s; }
.preferences-applying-dots span:nth-child(3) { animation-delay: .3s; }
.site-preferences[aria-busy="true"] [data-pref-language] { cursor: wait; }
@keyframes preferencesApplyingSpin { to { transform: rotate(360deg); } }
@keyframes preferencesApplyingDot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.preferences-language-badge { margin-left: auto; display: flex; align-items: center; gap: 4px; padding: 2px 8px; background: rgba(255,255,255,.045); border: 1px solid rgba(148,163,184,.16); border-radius: 999px; font-size: .6875rem; }
.preferences-language-badge img { width: 16px; height: 12px; object-fit: cover; border-radius: 3px; }
.preferences-icon-button { display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 24px; padding: 0; border: 1px solid transparent; border-radius: 8px; color: #aab6c5; background: transparent; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; }
.preferences-icon-button:hover { color: #f8fafc; background: rgba(148,163,184,.12); border-color: rgba(148,163,184,.2); transform: translateY(-1px); }
.preferences-close:hover svg { transform: rotate(90deg); }
.preferences-close svg { transition: transform .24s ease; }
.preferences-layout { display: grid; grid-template-columns: 144px minmax(0,1fr); min-height: 0; }
.preferences-sidebar { display: flex; flex-direction: column; gap: 12px; padding: 8px; border-right: 1px solid rgba(148,163,184,.13); min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.preferences-tabs { display: flex; flex-direction: column; gap: 4px; }
.preferences-tabs button { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #cbd5e1; text-align: left; font-size: .875rem; font-weight: 500; line-height: 20px; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.preferences-tabs button svg { width: 16px; height: 16px; }
.preferences-tabs button:hover { color: #fff; background: rgba(148,163,184,.08); }
.preferences-tabs button span { min-width: 0; overflow-wrap: anywhere; }
.preferences-tabs button.is-selected { color: #e2e8f0; color: color-mix(in srgb,var(--ui-accent) 65%,white); border-color: rgba(var(--ui-accent-rgb),.35); background: rgba(var(--ui-accent-rgb),.12); }
.preferences-summary { display: grid; gap: 5px; margin-top: auto; padding: 12px 8px 8px; font-size: .6875rem; color: #94a3b8; }
.preferences-summary > span { text-transform: uppercase; letter-spacing: .1em; font-size: .6875rem; }
.preferences-summary strong { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: .875rem; color: #e2e8f0; }
.preferences-versions { display: grid; gap: 3px; margin-top: 3px; font-size: .625rem; font-weight: 400; line-height: 1.4; color: #94a3b8; }
.preferences-swatch { display: inline-block; width: 12px; height: 12px; flex-shrink: 0; border-radius: 50%; }
.preferences-content { min-width: 0; overflow: auto; overscroll-behavior: contain; padding: 16px; scrollbar-width: thin; scrollbar-color: var(--ui-accent) #121b24; }
.preferences-content::-webkit-scrollbar { width: 7px; }
.preferences-content::-webkit-scrollbar-track { background: #121b24; }
.preferences-content::-webkit-scrollbar-thumb { background: var(--ui-accent); border-radius: 10px; }
.preferences-note { margin: 0 0 12px; color: #aab6c5; font-size: .75rem; }
.preferences-content > * { animation: preferencesSectionIn .24s ease both; }
@keyframes preferencesSectionIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.preferences-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; gap: 4px; }
.preferences-choice { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; min-width: 0; padding: 8px 12px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #e2e8f0; text-align: left; transition: background .22s ease, border-color .22s ease, transform .22s ease; }
.preferences-choice:hover { background: rgba(148,163,184,.075); border-color: rgba(148,163,184,.18); transform: translateY(-1px); }
.preferences-choice.is-selected { background: rgba(var(--ui-accent-rgb),.1); border-color: rgba(var(--ui-accent-rgb),.4); }
.preferences-choice > svg { width: 18px; height: 18px; color: var(--ui-accent); }
.preferences-choice-copy { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: .875rem; line-height: 20px; }
.preferences-choice-copy > span { overflow-wrap: anywhere; }
.preferences-choice-copy svg { width: 16px; height: 16px; color: var(--choice-accent, var(--ui-accent)); }
.preferences-choice-copy img { width: 20px; height: 15px; object-fit: cover; border-radius: 3px; }
.preferences-check-space { display: block; width: 18px; flex-shrink: 0; }
.preferences-effects { grid-template-columns: repeat(3,minmax(0,1fr)); }
.preferences-effects .preferences-choice { padding: 16px 10px; justify-content: center; border-color: rgba(148,163,184,.15); }
.preferences-effects .preferences-choice > svg, .preferences-effects .preferences-check-space { display: none; }
.preferences-effects .is-selected { border-color: rgba(var(--ui-accent-rgb),.4); color: var(--ui-accent); }
.preferences-hue { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; margin-top: 16px; padding: 12px; border: 1px solid rgba(148,163,184,.14); border-radius: 16px; background: rgba(148,163,184,.035); font-size: .85rem; }
.preferences-hue input { width: 100%; grid-column: 1 / -1; margin: 0; accent-color: var(--ui-accent); cursor: pointer; }
.preferences-setting { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 12px; border: 1px solid rgba(148,163,184,.14); border-radius: 12px; background: rgba(148,163,184,.035); cursor: pointer; }
.preferences-setting-icon { color: var(--ui-accent); }
.preferences-setting-copy { display: grid; gap: 2px; min-width: 0; }
.preferences-setting-copy strong, .preferences-text-size > strong { color: #f1f5f9; font-size: .875rem; font-weight: 500; }
.preferences-setting-copy small { color: #9ba8ba; font-size: .75rem; line-height: 1.5; }
.preferences-setting input { position: absolute; right: 12px; width: 36px; height: 20px; opacity: 0; }
.preferences-switch { margin-left: auto; flex: 0 0 36px; height: 20px; border-radius: 999px; background: #46505c; border: 1px solid rgba(148,163,184,.15); transition: background .2s ease; }
.preferences-switch::after { content: ''; display: block; width: 14px; height: 14px; margin: 2px; border-radius: 50%; background: #f8fafc; transition: transform .2s ease; }
.preferences-setting input:checked + .preferences-switch { background: var(--ui-accent); }
.preferences-setting input:checked + .preferences-switch::after { transform: translateX(16px); }
.preferences-setting input:focus-visible + .preferences-switch { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
.preferences-text-size { margin-bottom: 12px; padding: 12px; border: 1px solid rgba(148,163,184,.14); border-radius: 12px; background: rgba(148,163,184,.035); }
.preferences-text-size .preferences-choices { margin-top: 12px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.preferences-text-size .preferences-choice { justify-content: center; min-height: 44px; padding: 10px 8px; border-color: rgba(148,163,184,.14); }
.preferences-text-size .preferences-choice-copy { font-size: .86rem; }
.preferences-text-size .preferences-choice > svg, .preferences-text-size .preferences-check-space { display: none; }
.preferences-footer { padding: 8px 20px; border-top: 1px solid rgba(148,163,184,.1); font-size: .6875rem; color: #8290a2; }

/* Avoid global hue filters: photos, logos and platform identity must not shift. */
html[data-ui-custom="true"] :is(.nav-unix, .panel-brand-name, .admin-brand-name) { color: var(--ui-accent); }
html[data-ui-custom="true"] { --glyx-text-gradient: linear-gradient(100deg, color-mix(in srgb,var(--ui-accent) 28%,white) 0%, color-mix(in srgb,var(--ui-accent) 62%,white) 42%, var(--ui-accent) 100%); }
html[data-ui-custom="true"] .nav-unix { background-image: linear-gradient(90deg,var(--accent-primary),var(--accent-secondary),var(--accent-primary)); }
html[data-ui-custom="true"] .btn-primary { background: var(--glyx-action-fill); color: var(--glyx-action-text); border-color: var(--glyx-action-border); }
html[data-ui-custom="true"] .btn-primary:is(:hover,:focus-visible) { background: var(--glyx-action-hover); }
html[data-ui-motion="reduced"] *, html[data-ui-motion="reduced"] *::before, html[data-ui-motion="reduced"] *::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important;
  transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important;
}
html[data-ui-motion="reduced"] .scroll-reveal { opacity: 1; transform: none; }
html[data-ui-motion="reduced"] .command-card-upcoming.scroll-reveal { opacity: .68; }
html[data-ui-motion="reduced"] .site-preferences::backdrop { animation: none; }
html[data-ui-focus="true"] :is(.hero-glow, .hero-orb, .animate-blob, .blur-3xl, .unix-intro-grid, .unix-intro-orb),
html[data-ui-focus="true"] .unix-intro::after { animation-play-state: paused !important; }
html[data-ui-colorblind="true"] .panel-switch input:checked + span { background: rgba(96,165,250,.18); border-color: #60a5fa; }
html[data-ui-colorblind="true"] .panel-switch input:checked + span::after { background: #60a5fa; }
html[data-ui-colorblind="true"] .panel-switch input + span::before { content: '×'; position: absolute; right: 6px; top: 3px; color: #e2e8f0; line-height: 20px; }
html[data-ui-colorblind="true"] .panel-switch input:checked + span::before { content: '✓'; left: 6px; right: auto; }
html[data-ui-colorblind="true"] [data-status="ok"] .setup-status-dot { background: #60a5fa; }
html[data-ui-colorblind="true"] [data-status="error"] .setup-status-dot { background: #fbbf24; }
html[data-ui-colorblind="true"] [data-log-module-state="enabled"] .spanel-log-module-status { color: #93c5fd; }
html[data-ui-colorblind="true"] [data-log-module-state="disabled"] .spanel-log-module-status { color: #fcd34d; }
html[data-ui-colorblind="true"] [data-log-module-state="enabled"] .spanel-log-module-status::before { content: '✓ '; }
html[data-ui-colorblind="true"] [data-log-module-state="disabled"] .spanel-log-module-status::before { content: '× '; }

@media (max-width: 640px) {
  .site-preferences { width: calc(100% - 40px); height: min(460px,calc(100dvh - 32px)); max-height: calc(100dvh - 32px); border-radius: 16px; }
  .preferences-header { padding: 12px; gap: 8px; }
  .preferences-header h2 { font-size: .875rem; }
  .preferences-header-icon { display: none; }
  .preferences-language-badge { padding: 2px 8px; font-size: .6875rem; }
  .preferences-layout { grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr); }
  .preferences-sidebar { padding: 10px; border-right: 0; border-bottom: 1px solid rgba(148,163,184,.13); gap: 0; }
  .preferences-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-content: start; gap: 4px; }
  .preferences-tabs button { min-width: 0; min-height: 50px; padding: 6px 3px; flex-direction: column; justify-content: center; gap: 5px; font-size: .75rem; border-radius: 8px; }
  .preferences-tabs button svg { width: 16px; height: 16px; }
  .preferences-summary { display: none; }
  .preferences-content { padding: 16px; }
  .preferences-choices { gap: 7px; }
  .preferences-choice { padding: 8px 10px; gap: 6px; }
  .preferences-choice-copy { gap: 7px; font-size: .875rem; }
  .preferences-choice-copy .preferences-swatch { width: 13px; height: 13px; }
  .preferences-choice-copy svg { width: 17px; height: 17px; }
  .preferences-setting { padding: 12px; gap: 10px; }
  .preferences-setting-icon { display: none; }
  .preferences-setting input { right: 12px; }
  .preferences-setting-copy strong { font-size: .875rem; }
  .preferences-setting-copy small { font-size: .75rem; }
  .preferences-note { font-size: .75rem; }
  .preferences-effects { grid-template-columns: 1fr; }
  .preferences-footer { padding: 10px 16px; }
}


/* Let touch browsers sample the page instead of forcing opaque chrome bands. */
@media (hover: none) and (pointer: coarse) {
  html[data-panel-canvas] { --panel-bg: #101820; background: #101820; }
  html[data-panel-canvas] body {
    min-height: 100svh; background: #101820;
    /* Extend the canvas under Safari chrome; keep actual content in its safe area. */
    padding-top: env(safe-area-inset-top,0px);
    padding-right: env(safe-area-inset-right,0px);
    padding-bottom: env(safe-area-inset-bottom,0px);
    padding-left: env(safe-area-inset-left,0px);
  }
}