/* System is the no-JavaScript default too. Light keeps the existing public palette. */
:root {
  color-scheme: light dark;
  --sai-background: light-dark(#fff8f1, #141414);
  --sai-surface: light-dark(#fffdfa, #20201e);
  --sai-control: light-dark(#f7f0e8, #2a2926);
  --sai-text: light-dark(#252a33, #ebe8e1);
  --sai-secondary-text: light-dark(#6f6a63, #bdb7ae);
  --sai-border: light-dark(#e7dcd1, #3c3934);
  --sai-link: light-dark(#bc420f, #ffb07a);
}
html[data-sai-color="light"] { color-scheme: light; }
html[data-sai-color="dark"] { color-scheme: dark; }
html[data-sai-color="dark"] { --sai-hero-blend: normal; }
@media(prefers-color-scheme: dark) { html:not([data-sai-color]) { --sai-hero-blend: normal; } }
html:root { background: var(--sai-background); }
body { color: var(--sai-text); }
.shareai-aurora-background[data-shareai-aurora] { background: light-dark(var(--shareai-aurora-background, #fff8f1), #141414); }
html[data-sai-color="dark"] .shareai-aurora-blob { opacity: calc(var(--shareai-aurora-opacity, .16) * .4); }
.sai-appearance { position: relative; flex: 0 0 auto; color: var(--sai-text); font: 13px/1.4 Inter, "Segoe UI", sans-serif; }
.sai-appearance > summary { list-style: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 7px; cursor: pointer; }
.sai-appearance > summary::-webkit-details-marker { display: none; }
.sai-appearance > summary:hover, .sai-appearance[open] > summary { background: var(--sai-control); }
.sai-appearance-panel { position: fixed; z-index: 1100; width: 166px; padding: 6px; border: 1px solid var(--sai-border); border-radius: 10px; background: var(--sai-surface); box-shadow: 0 12px 34px light-dark(#40291426, #0008); overflow: auto; box-sizing: border-box; }
.sai-appearance-panel button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--sai-text); font: inherit; text-align: left; cursor: pointer; }
.sai-appearance-panel button:hover { background: var(--sai-control); }
.sai-appearance-check { visibility: hidden; color: var(--sai-link); margin-left: auto; }
.sai-appearance [aria-pressed="true"] .sai-appearance-check { visibility: visible; }
.sai-appearance :is(summary,button):focus-visible { outline: 2px solid var(--sai-link); outline-offset: 2px; }
.sai-appearance svg { display: block; flex-shrink: 0; }
.sai-code-tabs { color: var(--sai-text); background: var(--sai-surface); border-color: var(--sai-border); }
.sai-code-toolbar { background: var(--sai-control); border-color: var(--sai-border); }
.sai-code-toolbar button { color: var(--sai-secondary-text); }
.sai-code-toolbar [aria-selected="true"] { color: var(--sai-link); background: var(--sai-surface); }
@media (max-width: 800px) {
  .sai-appearance > summary { width: 44px; height: 44px; }
  .sai-appearance-panel button { min-height: 44px; }
}