/* Interface palettes only; media, authored inks and export pixels are untouched. */
:root[data-theme="dark"] { color-scheme:dark; --paper:#171717; --ink:#f4f0ec; color:var(--ink); background:var(--paper); }
:root[data-theme="dark"] textarea::placeholder { color:#aaa5a0; }
:root[data-theme="dark"] #site-links { --link-color:#aaa5a0; }
:root[data-theme="dark"] #site-links .site-link:hover,
:root[data-theme="dark"] #site-links .site-link:focus-visible { color:#f4f0ec; }
.atmosphere-dark { position:absolute; z-index:1; inset:0; background:#192331; opacity:0; transition:opacity .25s ease; }
:root[data-theme="dark"] .atmosphere-dark { opacity:1; }
.atmosphere-dark::before { background:radial-gradient(ellipse at 25% 25%,#363149 0%,transparent 60%),radial-gradient(ellipse at 75% 75%,#213e42 0%,transparent 65%); }
.atmosphere-dark::after { background:radial-gradient(ellipse at 70% 20%,#40382e 0%,transparent 60%),radial-gradient(ellipse at 20% 80%,#24324d 0%,transparent 65%); }
/* Draw is an authored paper surface; its existing inks never invert or disappear. */
.draw-page { --paper:#f4f0ec; --ink:#111; color:var(--ink); }
.draw-page #paper { background:#f4f0ec; }
.draw-page .back { color:#111; }
/* Shared atmosphere stays behind content; the canvas and media pixels are untouched. */
body { isolation:isolate; }
.atmosphere { position:fixed; z-index:-1; inset:0; overflow:hidden; pointer-events:none; opacity:0; background:#b9c9d2; transition:opacity 2.4s ease; }
.atmosphere::before, .atmosphere::after, .atmosphere-dark::before, .atmosphere-dark::after { content:""; position:absolute; inset:-25%; animation:atmosphere-drift 90s ease-in-out infinite alternate; animation-play-state:paused; }
.atmosphere::before { background:radial-gradient(ellipse at 25% 25%,#d6c4d9 0%,transparent 60%),radial-gradient(ellipse at 75% 75%,#93b7ba 0%,transparent 65%); }
.atmosphere::after { background:radial-gradient(ellipse at 70% 20%,#e2d4be 0%,transparent 60%),radial-gradient(ellipse at 20% 80%,#a0b5d3 0%,transparent 65%); animation-duration:117s; animation-direction:alternate-reverse; }
.atmosphere-dark::after { animation-duration:117s; animation-direction:alternate-reverse; }
:root[data-atmosphere] .atmosphere { opacity:1; }
:root[data-atmosphere]:not([data-atmosphere-hidden]) .atmosphere::before,
:root[data-atmosphere]:not([data-atmosphere-hidden]) .atmosphere::after,
:root[data-atmosphere]:not([data-atmosphere-hidden]) .atmosphere-dark::before,
:root[data-atmosphere]:not([data-atmosphere-hidden]) .atmosphere-dark::after { animation-play-state:running; }
:root[data-atmosphere] #answer { background:transparent!important; }
@keyframes atmosphere-drift { from { transform:translate3d(-4%,-3%,0) rotate(-6deg); } to { transform:translate3d(5%,4%,0) rotate(7deg); } }
#appearance-controls { position:fixed; z-index:30; top:max(8px,env(safe-area-inset-top)); right:max(8px,env(safe-area-inset-right)); display:flex; }
#appearance-controls button { width:44px; height:44px; padding:0; display:flex; align-items:center; justify-content:center; border:0; border-radius:0; background:transparent; color:var(--ink); cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
#appearance-controls button[hidden], body:has(#asking[hidden]) #appearance-controls { display:none; }
#theme-toggle { opacity:.35; }
#theme-toggle svg { width:11px; height:11px; pointer-events:none; }
.atmosphere-orb { position:relative; width:10px; height:10px; border:1px solid currentColor; border-radius:50%; overflow:hidden; pointer-events:none; background:transparent; box-shadow:none; opacity:.55; transition:opacity .3s ease; }
.atmosphere-orb::before { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(135deg,#79a4ff 0%,#65d7c0 50%,#b784e8 100%); opacity:0; transition:opacity .3s ease; }
#appearance-controls:has(:focus-visible) .atmosphere-orb { opacity:1; }
#appearance-controls:has(:focus-visible) .atmosphere-orb::before { opacity:1; }
@media(hover:hover) and (pointer:fine) {
  #appearance-controls:hover .atmosphere-orb { opacity:1; }
  #appearance-controls:hover .atmosphere-orb::before { opacity:1; }
}
#appearance-controls button:focus-visible { opacity:1; outline:1px solid currentColor; outline-offset:-8px; }
@media(hover:hover) and (pointer:fine) {
  /* Extra space responds as the pointer approaches, before it reaches a button. */
  #appearance-controls { top:calc(max(8px,env(safe-area-inset-top)) - 32px); right:calc(max(8px,env(safe-area-inset-right)) - 32px); padding:32px; opacity:.25; transition:opacity .45s ease; }
  #appearance-controls:hover, #appearance-controls:has(:focus-visible) { opacity:1; }
  #appearance-controls #theme-toggle { opacity:1; }
}
:root[data-theme-changing], :root[data-theme-changing] :is(body,#answer,textarea,button,a,.actions) { transition:background-color .25s ease,color .25s ease; }
@media(prefers-reduced-motion:reduce) {
  .atmosphere::before, .atmosphere::after, .atmosphere-dark::before, .atmosphere-dark::after { animation:none; }
  .atmosphere, .atmosphere-dark, #appearance-controls, .atmosphere-orb, .atmosphere-orb::before,
  :root[data-theme-changing], :root[data-theme-changing] :is(body,#answer,textarea,button,a,.actions) { transition:none; }
}