/* Site-wide semantic palette. Content artwork and brand marks keep their own colors. */
:root {
  color-scheme: light;
  --theme-page:#fff; --theme-surface:#fff; --theme-elevated:#fff;
  --theme-subtle:#f5f6f8; --theme-hover:#eceef2; --theme-selected:#e8e9f2;
  --theme-ink:#24272e; --theme-text:#3b414c; --theme-muted:#626b7a; --theme-faint:#687181;
  --theme-border:#e5e7ec; --theme-border-strong:#b8bec9;
  --theme-accent:#5944d6; --theme-accent-soft:#f0edfc; --theme-accent-hover:#4634bb;
  --theme-primary:#5746e8; --theme-on-primary:#fff;
  --theme-danger:#a33949; --theme-danger-soft:#fff0f2; --theme-danger-border:#eac3cb;
  --theme-warning:#815b26; --theme-warning-soft:#fff7ea; --theme-warning-border:#e8d5b9;
  --theme-success:#28674e; --theme-success-soft:#eaf5ef; --theme-success-border:#bbdcca;
  --theme-overlay:rgb(22 25 36 / 48%); --theme-shadow:0 12px 32px rgb(26 30 44 / 14%);
  --theme-scroll:#b6bdc9; --theme-selection:#e6ddff;
  --theme-focus:#69717c;
  --theme-surface-muted:var(--theme-subtle); --theme-surface-hover:var(--theme-hover);
  --theme-text-secondary:var(--theme-text); --theme-text-muted:var(--theme-muted);
  --motion-press:120ms; --motion-feedback:180ms; --motion-surface:220ms;
  --motion-ease-out:cubic-bezier(.22,1,.36,1);
  --motion-ease-settle:cubic-bezier(.32,.72,0,1);
}
html[data-theme="dark"] {
  color-scheme:dark;
  --theme-page:#0b0f1a; --theme-surface:#191f35; --theme-elevated:#232a47;
  --theme-subtle:#101728; --theme-hover:#232a47; --theme-selected:#2b2c50;
  --theme-ink:#f5f7ff; --theme-text:#cfd7ea; --theme-muted:#abb7ce; --theme-faint:#9ca9c2;
  --theme-border:#303854; --theme-border-strong:#64749b;
  --theme-accent:#c1b6ff; --theme-accent-soft:#292644; --theme-accent-hover:#d5ccff;
  --theme-primary:#6a56d6;
  --theme-danger:#ffabb7; --theme-danger-soft:#3c252e; --theme-danger-border:#75414e;
  --theme-warning:#f4c879; --theme-warning-soft:#302a22; --theme-warning-border:#6c5533;
  --theme-success:#9ddac0; --theme-success-soft:#22372f; --theme-success-border:#416752;
  --theme-overlay:rgb(3 5 14 / 72%); --theme-shadow:0 16px 44px rgb(2 5 16 / 44%);
  --theme-scroll:#53617e; --theme-selection:#4c4072;
  --theme-focus:#b3baff;
  /* Night Exploration: shared by classic, deferred and React surfaces. */
  --night-sidebar:#111729; --night-blue:#548fff; --night-violet:#7868f7; --night-cyan:#4fd5ef;
  --night-brand-gradient:linear-gradient(110deg,#4c9eff 0%,#7267f9 55%,#aa58f4 100%);
  /* The action variant keeps white, small control text above AA contrast. */
  --night-action-gradient:linear-gradient(110deg,#3265ad 0%,#6550c8 55%,#8742b9 100%);
  --night-border-lit:#5a628f;
  --night-shadow:0 8px 22px rgb(2 5 16 / 28%);
  --night-glass:linear-gradient(115deg,rgb(45 43 77 / 76%),rgb(23 28 49 / 84%) 48%,rgb(43 40 72 / 72%));
  --night-glass-border:rgb(135 126 205 / 38%);
  --night-glass-shadow:inset 0 1px 0 rgb(200 206 255 / 9%),inset 0 -1px 0 rgb(119 121 197 / 8%),0 7px 22px rgb(1 4 15 / 22%);
  --night-gold-glass:linear-gradient(115deg,rgb(111 87 59 / 36%),rgb(48 40 37 / 65%) 48%,rgb(132 102 62 / 32%));
  --night-duration:220ms; --night-ease:cubic-bezier(.22,1,.36,1);
  --tag-neutral-bg:#202a40; --tag-neutral-ink:#bcc9e1; --tag-neutral-border:#3d4962;
  --tag-skill-bg:#2a2646; --tag-skill-ink:#c8bcff; --tag-skill-border:#514673;
  --tag-prompt-bg:#30243e; --tag-prompt-ink:#dbc0f3; --tag-prompt-border:#60476d;
  --tag-tool-bg:#182e45; --tag-tool-ink:#a7d2ff; --tag-tool-border:#355875;
  --tag-data-bg:#17313c; --tag-data-ink:#a1daeb; --tag-data-border:#345b69;
  --tag-note-bg:#1d332f; --tag-note-ink:#b1dacb; --tag-note-border:#3b6158;
}
/* Safe first paint without JavaScript; explicit light always wins. */
@media(prefers-color-scheme:dark){html:not([data-theme]){color-scheme:dark;background:#0b0f1a;color:#f5f7ff}}
html,body {background:var(--theme-page);color:var(--theme-text)}
html {scrollbar-color:var(--theme-scroll) var(--theme-page)}
::selection {background:var(--theme-selection);color:var(--theme-ink)}
input,textarea {caret-color:var(--theme-ink)}
[data-theme-selector] {display:inline-flex;align-items:center;gap:8px;color:var(--theme-muted);font:inherit;min-width:0}
[data-theme-selector] svg {width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7}
[data-theme-select] {min-height:40px;max-width:100%;padding:6px 28px 6px 10px;border:1px solid var(--theme-border);border-radius:9px;background:var(--theme-surface);color:var(--theme-text);font:inherit;cursor:pointer;color-scheme:inherit}
[data-theme-select]:focus-visible {outline:2px solid var(--theme-border-strong);outline-offset:3px}
[data-theme-select] option {background:var(--theme-surface);color:var(--theme-text);font-size:14px}
@media(forced-colors:active){[data-theme-select]:focus-visible{outline:2px solid Highlight}}

/* One interaction policy for the React site, community and deferred dialogs.
   Brand selection stays inside controls. Focus never adds a purple outer ring.
   The important color/reset intentionally wins legacy route-specific rules. */
@media(forced-colors:none){
  :root :focus:not(:focus-visible){outline:none!important}
  :root[data-input-method="pointer"] :is(:focus,:focus-within),:root[data-input-method="pointer"] input:focus-visible+span{outline:none!important}
  /* Set the resting color too: legacy outline transitions otherwise briefly
     interpolate from purple when focus moves between adjacent fields. */
  :root :not([aria-invalid="true"]),:root ::before,:root ::after{outline-color:var(--theme-focus)!important}
  :root :is(button,a,summary,[role="button"],input,textarea,select):focus{box-shadow:none!important}
  :root :is(input,textarea,select):focus:not([aria-invalid="true"]){border-color:var(--theme-focus)}
  :root :is([data-field-shell],.search,.global-search,.wd-search,.comment-input-wrap,.social-composer,.related-search,.dm-directory-search,.pd-upload,.pr-upload):focus-within{outline:none!important;border-color:var(--theme-focus)!important;box-shadow:none!important}
}
:root :is(button,a,summary,input,textarea,select,[role="button"]){-webkit-tap-highlight-color:transparent}

/* Shared craft for native pages and community. Never delay a form submission. */
:where(button,a[role="button"],summary){touch-action:manipulation}
:where(h1,h2,h3){text-wrap:pretty}
:where(button,input,textarea,select){font-variant-numeric:tabular-nums}
:where(input,textarea,select)[aria-invalid="true"]{border-color:var(--theme-danger);outline-color:var(--theme-danger)!important}
:where(button,[role="button"])[aria-busy="true"]{cursor:progress}
:where(.primary-button,.secondary-button,.download-button){transition:scale var(--motion-press) var(--motion-ease-out),background-color var(--motion-feedback) ease,border-color var(--motion-feedback) ease}
:where(.primary-button,.secondary-button,.download-button):active:not(:disabled):not([aria-busy="true"]){scale:.98}
:where(.primary-button,.secondary-button,.download-button):focus-visible{outline:2px solid var(--theme-focus);outline-offset:3px}
:where(main,dialog) :where(input,textarea,select):focus-visible{scroll-margin-block:96px}
@media(pointer:coarse){:where(.primary-button,.secondary-button,.download-button){min-height:44px}}
@media(prefers-reduced-motion:reduce){
 :where(.primary-button,.secondary-button,.download-button){transition:none!important;scale:1!important}
 :root{scroll-behavior:auto!important}
}
html[data-input-method="keyboard"] :where(.primary-button,.secondary-button,.download-button){transition:none;scale:1}