/* The owner's arctic sky stays bounded by the viewport. */
:root{color-scheme:light}
:root[data-theme=night]{--color-positive:var(--color-night-positive);--color-positive-surface:var(--color-night-positive-surface);--color-warning:var(--color-night-warning);--color-warning-surface:var(--color-night-warning-surface);--color-error-surface:var(--color-night-error-surface);color-scheme:dark;--color-paper:var(--color-night-paper);--color-paper-2:var(--color-night-paper-2);--color-surface:var(--color-night-surface);--color-ink:var(--color-night-ink);--color-ink-2:var(--color-night-ink-2);--color-rule:var(--color-night-rule);--color-accent:var(--color-night-accent);--color-accent-ink:var(--color-night-accent-ink);--color-focus:var(--color-night-focus);--color-water:var(--color-night-water);--color-water-deep:var(--color-night-water-deep);--color-error:var(--color-night-error);--color-glass:var(--color-night-glass);--color-lift:var(--color-night-lift);--scene-surface:var(--scene-night-surface);--scene-paper-2:var(--scene-night-paper-2);--scene-sky:var(--scene-night-sky);--scene-fur:var(--scene-night-fur);--scene-fur-shade:var(--scene-night-fur-shade);--scene-fur-line:var(--scene-night-fur-line);--scene-rule:var(--scene-night-rule);--scene-water:var(--scene-night-water);--scene-water-deep:var(--scene-night-water-deep);--scene-cloud:var(--scene-night-cloud)}
.arctic-sky{position:fixed;inset:0;height:100svh;pointer-events:none;z-index:-1;overflow:hidden;contain:strict;background:var(--color-paper)}
.sky-light{position:absolute;inset:0;background:radial-gradient(ellipse at 82% 8%,color-mix(in srgb,var(--sky-glow) 48%,transparent),transparent 60%),linear-gradient(180deg,color-mix(in srgb,var(--sky-top) 64%,var(--color-paper)),var(--color-paper) 86%);transition:opacity 1.6s ease-out} /* taste-skill-ignore: Owner-selected continuous sky, aurora and stars are the scene, not UI decoration. */
[data-theme=night] .sky-light{opacity:.6}
.sky-auroras{position:absolute;inset:0;opacity:var(--sky-aurora);transition:opacity 1.6s ease-out}
.sky-auroras i{position:absolute;top:-100px;right:-80px;width:clamp(360px,70vw,1000px);height:clamp(220px,32vw,440px);border-radius:50%;background:radial-gradient(ellipse at 50% 70%,transparent 39%,var(--color-aurora) 51%,var(--color-aurora-edge) 68%,transparent 74%);filter:blur(22px);transform:rotate(-18deg);animation:aurora-drift 32s ease-in-out infinite alternate;will-change:transform} /* taste-skill-ignore: Owner-selected continuous sky, aurora and stars are the scene, not UI decoration. */
.sky-auroras i:nth-child(2){right:22%;top:10px;opacity:.65;transform:rotate(12deg);animation-duration:43s;animation-delay:-17s}
.sky-auroras i:nth-child(3){right:-10%;top:130px;opacity:.32;animation-duration:51s;animation-delay:-28s}
.sky-stars{position:absolute;inset:0;opacity:calc(var(--sky-aurora)*.62);background-image:radial-gradient(circle at 14% 15%,var(--color-star) 0 1px,transparent 1.5px),radial-gradient(circle at 71% 9%,var(--color-star) 0 1px,transparent 1.5px),radial-gradient(circle at 42% 8%,var(--color-star) 0 1px,transparent 1.5px),radial-gradient(circle at 85% 32%,var(--color-star) 0 1px,transparent 1.5px),radial-gradient(circle at 63% 23%,var(--color-star) 0 1px,transparent 1.5px),radial-gradient(circle at 26% 30%,var(--color-star) 0 1px,transparent 1.5px)} /* taste-skill-ignore: Owner-selected continuous sky, aurora and stars are the scene, not UI decoration. */
@keyframes aurora-drift{to{transform:translate3d(-50px,28px,0) rotate(-8deg) scaleX(1.08)}}
.sky-motion-paused .sky-auroras i{animation-play-state:paused}
.sky-control{position:relative;flex-shrink:0;font:var(--text-sm)/1.5 var(--font-body);color:var(--color-ink)}
.sky-control summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;padding:8px 12px;cursor:pointer;border-radius:var(--radius-pill);color:var(--color-ink-2)}
.sky-control summary::-webkit-details-marker{display:none}
.sky-control summary:hover,.sky-control[open] summary{background:var(--color-paper-2)}
.sky-menu{position:absolute;z-index:210;top:calc(100% + 12px);right:0;width:280px;max-width:calc(100vw - 32px);padding:20px;border-radius:20px;background:var(--color-surface);box-shadow:0 16px 64px var(--color-overlay);color:var(--color-ink)} /* taste-skill-ignore: The sky menu is a floating overlay. */
.sky-control:not([open]) .sky-menu{display:none}
.sky-menu-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.sky-menu-heading strong{font-weight:600}
.sky-menu .sky-close{width:44px;height:44px;margin:-10px -10px -10px 0;border:0;background:transparent;font:24px var(--font-body);color:var(--color-ink);padding:0}
.sky-menu .sky-clock{font-size:var(--text-xs);color:var(--color-ink-2);margin:12px 0 16px;white-space:normal}
.sky-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sky-options button,.sky-menu .sky-motion{min-height:44px;border:0;border-radius:12px;padding:10px;background:var(--color-paper-2);color:var(--color-ink);font:var(--text-xs)/1.5 var(--font-body);cursor:pointer}
.sky-options button:first-child{grid-column:1/-1}
.sky-options button[aria-pressed=true]{background:var(--color-accent);color:var(--color-accent-ink)}
.sky-menu .sky-motion{width:100%;margin-top:12px;background:transparent;color:var(--color-ink-2)}
.sky-menu .sky-motion:disabled{cursor:default}
.login-shell .intro>.sky-control{position:absolute;right:0;top:0}
.writing-shell .sky-control summary{padding-inline:10px}
.writing-shell .sky-menu{font-size:var(--text-sm)}
@media(max-width:680px){.sky-control summary>span{display:none}.sky-control summary{padding-inline:8px}.sky-menu{position:fixed;top:86px;right:16px}.login-shell .intro>.sky-control{top:-4px}}
@media(prefers-reduced-motion:reduce){.sky-auroras i{animation:none;will-change:auto}.sky-light,.sky-auroras{transition:none}}
