/* <todo-sky> (todo-sky.js): the sky over the to-do list, ported from Daybook's app.css.
   Every rule is scoped under todo-sky; the element's own boxes are .ts-*, the classes inside
   the SVG land (dark, pale, accent, ...) are Daybook's, and keyframes are ts-* (they're global).

   Colours come from the page theme (--sky-top/-mid/-bot, --hill1/2, --sun, --sun-glow, --stars,
   --quick/--medium/--long, --warm, --accent, --line, --fg, --muted, --panel, --bg). Daybook's
   names are defined here in terms of them. */

todo-sky {
  --ink: var(--fg);
  --ink-soft: var(--muted);
  --ink-faint: color-mix(in oklab, var(--muted) 60%, transparent);
  --card: var(--panel);
  --card-hi: color-mix(in oklab, var(--panel) 92%, var(--fg));
  --well: color-mix(in oklab, var(--bg) 94%, var(--fg));
  --bg2: var(--panel);
  --accent-ink: var(--panel);
  --shadow: 0 10px 28px -14px rgba(0, 0, 0, .35);
  --wait: var(--muted);
  --display: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  /* text on a pale sky by day (data-pale and not data-dark); light text otherwise */
  --ts-day-ink: color-mix(in oklab, var(--sky-top) 14%, #16140f);
  --ts-day-ink-soft: color-mix(in oklab, var(--ts-day-ink) 74%, transparent);
  display: block;
  position: relative;
}

/* ---------- the sky ---------- */
todo-sky .ts-sky {
  --night: 0; --golden: 0; --veil: 0;
  position: relative; height: 300px; overflow: hidden; isolation: isolate;
  container-type: inline-size;
  border-radius: 18px; border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 58%, var(--sky-bot) 100%);
  transition: background .8s ease;
  -webkit-tap-highlight-color: transparent;
}
/* time of day and weather, laid over the theme's sky */
todo-sky .ts-tint, todo-sky .ts-tint::before, todo-sky .ts-tint::after { position: absolute; inset: 0; pointer-events: none; content: ""; transition: opacity 2s; }
todo-sky .ts-tint { z-index: 1; background: linear-gradient(180deg, #03041a 0%, #0a0f33 60%, #1a1840 100%); opacity: calc(var(--night) * .72); }
todo-sky .ts-tint::before { background: linear-gradient(180deg, #6f7787, #9aa1ad 70%, #b4b8bf); mix-blend-mode: multiply; opacity: calc(var(--veil) * .55 * (1 - var(--night) * .6)); }
todo-sky .ts-tint::after { background: radial-gradient(70% 90% at 50% 105%, #ff9a5a, rgba(255,120,80,.35) 45%, transparent 75%); mix-blend-mode: screen; opacity: calc(var(--golden) * .75); }
todo-sky .ts-stars { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: calc(var(--night) * (1 - var(--veil) * .85) * var(--stars, 1)); transition: opacity 2s; }
todo-sky .ts-stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; animation: ts-twinkle 4s ease-in-out infinite; }
@keyframes ts-twinkle { 0%,100% { opacity: .15 } 50% { opacity: .9 } }
todo-sky .ts-arc { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; opacity: .6; pointer-events: none; }
todo-sky .ts-arc path { stroke: color-mix(in oklab, #fff 45%, transparent); stroke-width: 1.4; stroke-dasharray: 2 7; vector-effect: non-scaling-stroke; }
todo-sky .ts-sky[data-pale]:not([data-dark]) .ts-arc path { stroke: color-mix(in oklab, var(--ts-day-ink) 35%, transparent); }
todo-sky .ts-sun-track { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
todo-sky .ts-sun {
  position: absolute; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #fff 0 8%, var(--sun) 40%);
  box-shadow: 0 0 30px 10px var(--sun-glow), 0 0 90px 30px var(--sun-glow);
  opacity: calc(1 - var(--veil) * .55);
  pointer-events: auto; cursor: pointer;
  transition: left 2s ease, top 2s ease, opacity 2s, background 2s, box-shadow 2s;
}
todo-sky .ts-sun.ts-moon {
  width: 38px; height: 38px; margin: -19px 0 0 -19px;
  background: radial-gradient(circle at 62% 38%, #fbfbf4 0 30%, #dfe3ea 60%, #c4cad6);
  box-shadow: inset -9px -3px 0 0 rgba(0,0,0,.18), 0 0 26px 6px rgba(220,230,255,.28);
}
todo-sky .ts-clouds { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
todo-sky .ts-cloud { position: absolute; left: 0; border-radius: 999px; background: #fff; filter: blur(9px); pointer-events: auto; animation: ts-drift linear infinite; }
todo-sky .ts-cloud::before, todo-sky .ts-cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
todo-sky .ts-cloud::before { width: 45%; height: 160%; left: 18%; top: -70%; }
todo-sky .ts-cloud::after { width: 32%; height: 120%; left: 52%; top: -45%; }
todo-sky .ts-cloud.ts-grey { background: #aeb4c0; }
todo-sky .ts-sky[data-dark] .ts-clouds { filter: brightness(.45); }
@keyframes ts-drift { from { transform: translateX(-30cqw); } to { transform: translateX(110cqw); } }

/* ---------- the land (todo-sky.js SCENES), colours all from the theme ---------- */
todo-sky .ts-land { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; width: 100%; height: 150px; overflow: visible; }
todo-sky .ts-land .far { fill: color-mix(in oklab, var(--hill2) 55%, var(--sky-mid)); }
todo-sky .ts-land .peak { fill: color-mix(in oklab, var(--hill2) 72%, var(--sky-mid)); }
todo-sky .ts-land .snow { fill: color-mix(in oklab, #fff 78%, var(--sky-mid)); }
todo-sky .ts-land .mid { fill: var(--hill2); }
todo-sky .ts-land .near { fill: var(--hill1); }
todo-sky .ts-land .dark { fill: color-mix(in oklab, var(--hill1) 72%, #000); }
todo-sky .ts-land .water { fill: color-mix(in oklab, var(--sky-bot) 40%, var(--hill2)); }
todo-sky .ts-land .reflect { fill: color-mix(in oklab, var(--hill2) 60%, var(--sky-mid)); opacity: .45; }
todo-sky .ts-land .pale { fill: color-mix(in oklab, #fff 72%, var(--hill2)); }
todo-sky .ts-land .accent { fill: color-mix(in oklab, var(--warm) 70%, var(--hill1)); }
todo-sky .ts-land .trim { fill: none; stroke: color-mix(in oklab, #fff 70%, var(--hill2)); stroke-width: 1.6; }
todo-sky .ts-land .rows { fill: none; stroke: color-mix(in oklab, var(--hill1) 80%, #000); stroke-width: 2; opacity: .45; }
todo-sky .ts-land .stroke { fill: none; stroke: color-mix(in oklab, var(--hill1) 65%, #000); stroke-width: 2; stroke-linecap: round; }
todo-sky .ts-land .cable { fill: none; stroke: color-mix(in oklab, var(--hill1) 65%, #000); stroke-width: 4; }
todo-sky .ts-land .cable.thin { stroke-width: 1.3; }
todo-sky .ts-land .base { filter: brightness(calc(1 - var(--night) * .45)); transition: filter 2s; }
todo-sky .ts-land path, todo-sky .ts-land rect, todo-sky .ts-land circle { transition: fill .8s; }
/* what lights up and moves */
todo-sky .ts-land .light { fill: #ffd98a; opacity: calc(var(--night) * var(--w, 1)); transition: opacity 2s; }
todo-sky .ts-land .blink { fill: #ff5a5a; animation: ts-blink 2.4s steps(1) infinite; }
@keyframes ts-blink { 50% { opacity: .15; } }
todo-sky .ts-land .beam { fill: rgba(255,238,170,.22); opacity: var(--night); animation: ts-sweepbeam 7s ease-in-out infinite alternate; }
@keyframes ts-sweepbeam { from { transform: scaleX(1); } to { transform: scaleX(-1); } }
todo-sky .ts-land .spin { transform-box: view-box; animation: ts-windmill 9s linear infinite; }
@keyframes ts-windmill { to { transform: rotate(360deg); } }
todo-sky .ts-land .wave { fill: none; stroke: color-mix(in oklab, #fff 45%, transparent); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 18 26; animation: ts-wave 6s linear infinite; opacity: calc(.55 - var(--night) * .3); }
@keyframes ts-wave { to { stroke-dashoffset: -88; } }
todo-sky .ts-land .birds { animation: ts-fly 110s linear infinite; }
@keyframes ts-fly { from { transform: translateX(-300px); } 55%, to { transform: translateX(2800px); } }
todo-sky .ts-land .bird { fill: color-mix(in oklab, color-mix(in oklab, var(--hill1) 45%, #000), #000 calc(var(--night) * 40%)); }
/* flap, flap, flap, glide */
todo-sky .ts-land .flap { transform-box: fill-box; transform-origin: 50% 60%; animation: ts-flap 2.6s ease-in-out infinite; }
@keyframes ts-flap { 0%, 24%, 100% { transform: scaleY(1); } 4%, 12%, 20% { transform: scaleY(-.55); } 8%, 16% { transform: scaleY(1); } }
todo-sky .ts-land .flap.fast { animation: ts-flapfast .32s ease-in-out infinite alternate; }
@keyframes ts-flapfast { to { transform: scaleY(-.6); } }
todo-sky .ts-land .flap.glide { animation-duration: 6s; }
todo-sky .ts-land .puff { fill: color-mix(in oklab, #fff 60%, var(--sky-mid)); opacity: 0; transform-box: fill-box; transform-origin: center; animation: ts-puff 8s ease-out infinite; }
@keyframes ts-puff { 0% { opacity: 0; transform: translate(0, 0) scale(1); } 15% { opacity: .55; } 100% { opacity: 0; transform: translate(26px, -70px) scale(4); } }
todo-sky .ts-land .flies { opacity: var(--night); }
todo-sky .ts-land .fly { fill: #e9ff9a; filter: drop-shadow(0 0 3px #e9ff9a); animation: ts-firefly 4s ease-in-out infinite alternate; }
@keyframes ts-firefly { 0% { opacity: 0; transform: translate(0, 0); } 50% { opacity: 1; } 100% { opacity: .1; transform: translate(10px, -8px); } }

/* life in the land: its colours darken with the night like the land's */
todo-sky .ts-land .life { --dk: calc(var(--night) * 45%); }
todo-sky .ts-land .base .life { --dk: 0%; }  /* tucked into the land, which darkens itself */
todo-sky .ts-land .life .dark, todo-sky .ts-land .life .whale { fill: color-mix(in oklab, color-mix(in oklab, var(--hill1) 72%, #000), #000 var(--dk)); }
todo-sky .ts-land .life .mid { fill: color-mix(in oklab, var(--hill2), #000 var(--dk)); }
todo-sky .ts-land .life .pale, todo-sky .ts-land .life .chicken { fill: color-mix(in oklab, color-mix(in oklab, #fff 72%, var(--hill2)), #000 var(--dk)); }
todo-sky .ts-land .life .accent { fill: color-mix(in oklab, color-mix(in oklab, var(--warm) 70%, var(--hill1)), #000 var(--dk)); }
todo-sky .ts-land .life .fox { fill: color-mix(in oklab, color-mix(in oklab, #d9763a 80%, var(--hill1)), #000 var(--dk)); }
todo-sky .ts-land .life .fish { fill: color-mix(in oklab, #dfe6ee 80%, var(--hill2)); }
todo-sky .ts-land .life .crab, todo-sky .ts-land .life .crab-leg { fill: color-mix(in oklab, #e0603c, #000 var(--dk)); stroke: color-mix(in oklab, #e0603c, #000 var(--dk)); }
todo-sky .ts-land .life .crab-leg { fill: none; stroke-width: 1; stroke-linecap: round; }
todo-sky .ts-land .life .oddtree { fill: color-mix(in oklab, color-mix(in oklab, color-mix(in oklab, var(--hill1) 72%, #000) 78%, var(--warm)), #000 var(--dk)); }
todo-sky .ts-land .life .stroke.thin { stroke-width: 1; }
todo-sky .ts-land .life .eye { fill: color-mix(in oklab, #fff 70%, transparent); }
todo-sky .ts-land .life .bottle { fill: color-mix(in oklab, #7fd1b0 70%, transparent); }
todo-sky .ts-land .life .comb, todo-sky .ts-land .life .nose { fill: #e0503c; }
todo-sky .ts-land .life .apple { fill: #d8402e; }
todo-sky .ts-land .life .popcorn { fill: #fff8e4; }
todo-sky .ts-land .life .mound { fill: color-mix(in oklab, #6b4a2e 70%, var(--hill1)); }
todo-sky .ts-land .life .dirt { fill: color-mix(in oklab, #6b4a2e 70%, var(--hill1)); }
todo-sky .ts-land .life .smoke { fill: color-mix(in oklab, #fff 55%, var(--sky-mid)); }
todo-sky .ts-land .life .ash { fill: color-mix(in oklab, #6a6670 80%, var(--sky-mid)); }
todo-sky .ts-land .life .bubble { fill: none; stroke: color-mix(in oklab, #fff 60%, transparent); stroke-width: .6; }
todo-sky .ts-land .life .drop, todo-sky .ts-land .life .spout { fill: color-mix(in oklab, #fff 80%, var(--sky-bot)); }
todo-sky .ts-land .life .ripple { fill: none; stroke: color-mix(in oklab, #fff 55%, transparent); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
todo-sky .ts-land .life .wake { fill: none; stroke: color-mix(in oklab, #fff 40%, transparent); stroke-width: .8; }
todo-sky .ts-land .life .say { font: 700 9px var(--display); fill: color-mix(in oklab, #fff 85%, transparent); }
todo-sky .ts-land .life .say.small { font-size: 7px; }
todo-sky .ts-land .life .flutter { fill: var(--warm); opacity: .95; }
todo-sky .ts-land .life .leafy { fill: color-mix(in oklab, var(--warm) 60%, #c2552d); stroke: color-mix(in oklab, var(--warm) 30%, #7a3018); stroke-width: .4; }
todo-sky .ts-land .life .puffin .bird { fill: #1c1c22; }
todo-sky .ts-land .life .crow .bird { fill: #111; }
todo-sky .ts-land .hit { fill: transparent; }
todo-sky .ts-land .life .win { fill: #ffd98a; opacity: calc(.25 + var(--night) * .75); }
todo-sky .ts-land .life .tail { fill: #ff4d4d; opacity: calc(.3 + var(--night) * .7); }
todo-sky .ts-land .life .glowdot { fill: #fff6c8; opacity: var(--night); }
todo-sky .ts-land .life .lampbeam { fill: rgba(255,246,200,.35); opacity: var(--night); }
todo-sky .ts-land .life .tent-glow { fill: #ffcf7a; opacity: calc(var(--night) * .55); mix-blend-mode: screen; }
todo-sky .ts-land .lamp-window { fill: #ffd98a; opacity: 0; transition: opacity .6s; }
todo-sky .ts-land .lamp-window.on { opacity: 1; }
todo-sky .ts-land .life .owl-eye { fill: #ffe066; filter: drop-shadow(0 0 2px #ffe066); opacity: calc(.2 + var(--night) * .8); }
todo-sky .ts-land .life .blinker { transform-box: fill-box; transform-origin: center; animation: ts-owlblink 3s infinite; }
@keyframes ts-owlblink { 0%, 44%, 52%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.1); } }
/* the gradients (contrail, dust, streak, searchlight) are set as attributes, per element id */
todo-sky .ts-land .life .contrail { opacity: calc(.7 - var(--night) * .7); }
todo-sky .ts-land .life .blinkr { fill: #ff4d4d; animation: ts-blink 1.2s steps(1) infinite; }
todo-sky .ts-land .life .blinkw { fill: #fff; opacity: var(--night); animation: ts-blink 1.6s steps(1) infinite; }
todo-sky .ts-land .life .streak { fill: none; stroke-width: 1.6; stroke-linecap: round; }
todo-sky .ts-land .life .ufo { fill: #9aa3b4; }
todo-sky .ts-land .life .ufo-dome { fill: #bfe8ff; opacity: .8; }
todo-sky .ts-land .life .ufo-l { fill: #a6ffb0; animation: ts-blink .6s steps(1) infinite; }
todo-sky .ts-land .life .ufo-beam { fill: rgba(190,255,200,.25); transition: opacity .4s; }
todo-sky .ts-land .life .nobeam .ufo-beam { opacity: 0; }
todo-sky .ts-land .life .lava-glow { fill: #ff8a3c; filter: blur(6px); mix-blend-mode: screen; }
todo-sky .ts-land .life .lava { fill: none; stroke: #ff7a2e; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1 1; filter: drop-shadow(0 0 3px #ff7a2e); }
todo-sky .ts-land .life .ember { fill: #ffb05c; filter: drop-shadow(0 0 2px #ff7a2e); }
todo-sky .ts-land .life .flash-glow { fill: #fff2b8; filter: blur(8px); }
todo-sky .ts-land .life .flash-beam { fill: rgba(255,240,180,.4); }
todo-sky .ts-land .life .horn { fill: none; stroke: color-mix(in oklab, #fff 70%, transparent); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
todo-sky .ts-land .life .spark-ray { stroke-width: 1.4; stroke-linecap: round; filter: drop-shadow(0 0 2px currentColor); }
todo-sky .ts-land .life .chase { fill: #ffe9a8; filter: drop-shadow(0 0 3px #ffd98a); }
todo-sky .ts-land .life .fishline { fill: none; stroke: color-mix(in oklab, #fff 70%, transparent); stroke-width: .5; stroke-dasharray: 1 1; }
todo-sky .ts-land .life .barn-open { fill: #1a1210; }
todo-sky .ts-land .life .aurora { fill: none; stroke-width: 40; stroke-linecap: round; filter: blur(14px); mix-blend-mode: screen; animation: ts-aurora 7s ease-in-out infinite alternate; }
todo-sky .ts-land .life .aurora.a0 { stroke: rgba(110,255,170,.38); }
todo-sky .ts-land .life .aurora.a1 { stroke: rgba(90,220,255,.28); animation-delay: -2s; }
todo-sky .ts-land .life .aurora.a2 { stroke: rgba(200,120,255,.22); animation-delay: -4s; }
@keyframes ts-aurora { to { transform: translate(40px, 10px) skewX(-8deg); } }
/* poses and gaits: .alt swaps the pose, .graze lowers the head, .trot bobs along */
todo-sky .ts-land .actor .pose-b, todo-sky .ts-land .actor.alt .pose-a { display: none; }
todo-sky .ts-land .actor.alt .pose-b { display: inline; }
todo-sky .ts-land .actor .neck { transform-box: fill-box; transform-origin: 10% 92%; transition: transform .8s ease; }
todo-sky .ts-land .actor.graze .neck { transform: rotate(62deg); }
todo-sky .ts-land .actor.trot .bob { animation: ts-trot .34s ease-in-out infinite alternate; }
todo-sky .ts-land .actor.trot.slow .bob { animation-duration: .5s; }
@keyframes ts-trot { to { transform: translateY(-.9px); } }
todo-sky .ts-land .actor.rock .bob { transform-box: fill-box; transform-origin: 50% 100%; animation: ts-rock 3.4s ease-in-out infinite alternate; }
@keyframes ts-rock { from { transform: rotate(-2.5deg) translateY(.4px); } to { transform: rotate(2.5deg) translateY(-.4px); } }
todo-sky .ts-land .actor.rumble .bob { animation: ts-trot .12s linear infinite alternate; }
todo-sky .ts-land .actor.scuttle .bob { animation: ts-trot .1s linear infinite alternate; }
todo-sky .ts-land .actor.wave .crab:nth-of-type(2), todo-sky .ts-land .actor.wave .crab:nth-of-type(3) { animation: ts-trot .25s ease-in-out infinite alternate; }
todo-sky .ts-land .actor.peck .bob { transform-box: fill-box; transform-origin: 50% 100%; animation: ts-peck .5s ease-in-out infinite alternate; }
@keyframes ts-peck { to { transform: rotate(14deg); } }
todo-sky .ts-land .actor .wheel { animation: ts-windmill 1.4s linear infinite; }
todo-sky .ts-land .actor .spoke { fill: none; stroke: color-mix(in oklab, #fff 40%, transparent); stroke-width: .7; }
todo-sky .ts-land .actor .exhaust { fill: color-mix(in oklab, #fff 50%, transparent); animation: ts-exhaust 1.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ts-exhaust { from { opacity: .7; transform: translate(0, 0) scale(.6); } to { opacity: 0; transform: translate(-8px, -10px) scale(2.4); } }
todo-sky .ts-land .actor .paddle { animation: ts-paddle 1.8s ease-in-out infinite; }
@keyframes ts-paddle { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-35deg); } }
todo-sky .ts-land .actor .oar { animation: ts-paddle 1.3s ease-in-out infinite; }
todo-sky .ts-land .actor .rotor { transform-box: fill-box; transform-origin: center; animation: ts-rotor .12s linear infinite alternate; }
@keyframes ts-rotor { to { transform: scaleX(.15); } }
todo-sky .ts-land .actor .wings { transform-box: fill-box; transform-origin: center; animation: ts-rotor .18s ease-in-out infinite alternate; }
todo-sky .ts-land .actor .mole-head { transform: translateY(5px); transition: transform .3s ease-out; }
todo-sky .ts-land .actor.up .mole-head { transform: translateY(0); }
todo-sky .ts-land .actor.dig .bob { animation: ts-trot .08s linear infinite alternate; }
todo-sky .ts-land [data-poke] { cursor: pointer; }
todo-sky .ts-sky.ts-poking { cursor: pointer; }
todo-sky .ts-sun .ts-shades { position: absolute; inset: 0; width: 100%; height: 100%; }
todo-sky .ts-sun .ts-shades path { fill: #1a1a22; stroke: #1a1a22; stroke-width: 2; stroke-linejoin: round; }
todo-sky .ts-sun .ts-shades .glint { fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; }
todo-sky .ts-moon-cow { position: absolute; left: 0; top: 0; width: 34px; z-index: 3; pointer-events: none; }
todo-sky .ts-moon-cow svg { display: block; width: 100%; overflow: visible; }
todo-sky .ts-moon-cow .pale { fill: #f2f0ea; }
todo-sky .ts-moon-cow .dark { fill: #2a2630; }
todo-sky .ts-cloud-rain { position: absolute; z-index: 3; height: 120px; pointer-events: none; overflow: hidden; transition: opacity .6s; }
todo-sky .ts-cloud-rain i { position: absolute; top: -14px; width: 1.5px; height: 12px; border-radius: 2px; background: linear-gradient(transparent, rgba(220,235,255,.85)); animation: ts-cloudrain .7s linear infinite; }
@keyframes ts-cloudrain { to { transform: translateY(130px); } }

/* ---------- rain, snow, fog, lightning ---------- */
todo-sky .ts-fx { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
todo-sky .ts-fx i { position: absolute; top: -20px; width: 1.5px; height: 18px; border-radius: 2px; background: linear-gradient(transparent, rgba(220,235,255,.85)); transform: rotate(var(--slant)); animation: ts-fall linear infinite; }
@keyframes ts-fall { to { translate: calc(tan(var(--slant)) * -340px) 340px; } }
todo-sky .ts-fx[data-kind="drizzle"] i { height: 10px; width: 1px; }
todo-sky .ts-fx[data-kind="snow"] i { width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px rgba(255,255,255,.7); animation-name: ts-snowfall; }
@keyframes ts-snowfall { 0% { translate: 0 0; } 50% { translate: 18px 160px; } 100% { translate: -6px 330px; } }
todo-sky .ts-fx s { position: absolute; left: -20%; right: -20%; height: 46px; border-radius: 50%; background: rgba(225,230,238,.4); filter: blur(16px); animation: ts-fogdrift 40s ease-in-out infinite alternate; }
todo-sky .ts-fx s:nth-child(1) { bottom: 70px; }
todo-sky .ts-fx s:nth-child(2) { bottom: 36px; animation-duration: 55s; animation-delay: -20s; opacity: .8; }
todo-sky .ts-fx s:nth-child(3) { bottom: 6px; animation-duration: 33s; }
@keyframes ts-fogdrift { to { transform: translateX(12%); } }
todo-sky .ts-fx .ts-flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: ts-flash 9s infinite; }
@keyframes ts-flash { 0%, 61%, 63.5%, 65%, 100% { opacity: 0; } 62%, 64% { opacity: .45; } }

/* ---------- the day on the left; the count, weather and sun's times on the right ---------- */
todo-sky .ts-in { position: relative; z-index: 7; height: 100%; padding: 28px 28px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; pointer-events: none; }
todo-sky .ts-text, todo-sky .ts-wx { color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,.3); }
todo-sky .ts-text { min-width: 0; }
todo-sky .ts-wx { text-align: right; flex: none; }
todo-sky .ts-weekday { font: italic 600 56px/1.05 var(--display); letter-spacing: -.02em; white-space: nowrap; }
todo-sky .ts-date { margin-top: 10px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: color-mix(in oklab, #fff 82%, transparent); white-space: nowrap; }
/* 1/5, 4 to go */
todo-sky .ts-count { font: 600 56px/1 var(--display); letter-spacing: -.02em; font-variant-numeric: lining-nums; white-space: nowrap; }
todo-sky .ts-count span { font-size: .55em; font-weight: 400; opacity: .8; margin-left: .04em; }
todo-sky .ts-togo { margin-top: 6px; font-size: 14px; letter-spacing: .02em; color: color-mix(in oklab, #fff 88%, transparent); }
todo-sky .ts-temp, todo-sky .ts-sunline { margin-top: 10px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: color-mix(in oklab, #fff 82%, transparent); }
todo-sky .ts-temp { cursor: default; }
todo-sky .ts-temp + .ts-sunline { margin-top: 4px; }
todo-sky .ts-sunline span { white-space: nowrap; }
todo-sky .ts-sunline span + span::before { content: " · "; }
todo-sky .ts-sky[data-pale]:not([data-dark]) :is(.ts-text, .ts-wx) { text-shadow: 0 1px 12px color-mix(in oklab, var(--sky-top) 70%, transparent); }
todo-sky .ts-sky[data-pale]:not([data-dark]) :is(.ts-weekday, .ts-count) { color: var(--ts-day-ink); }
todo-sky .ts-sky[data-pale]:not([data-dark]) :is(.ts-date, .ts-togo, .ts-temp, .ts-sunline) { color: var(--ts-day-ink-soft); }

/* ---------- progress styles (todo-sky.js PROGRESS) ---------- */
todo-sky .ts-progress { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
todo-sky .ts-progress > * { pointer-events: auto; }

/* frosted panes: shards over the land that clear as slots are done */
todo-sky .ts-pane-land { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; }
todo-sky .ts-pane { position: absolute; inset: 0; transition: clip-path .7s; }
todo-sky .ts-pane > .ts-land { position: absolute; inset: 0; height: 100%; z-index: auto; filter: blur(8px) grayscale(.7) brightness(.6) contrast(.9); opacity: 1; transition: filter 3.6s ease, opacity 3.6s ease; }
todo-sky .ts-pane.ts-clear > .ts-land { filter: blur(0) grayscale(0) brightness(1) contrast(1); opacity: 0; }
todo-sky .ts-pane.ts-reveal::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%); background-size: 100% 220%; animation: ts-sweep 2.4s ease-out forwards; }
@keyframes ts-sweep { from { background-position: 0 -120%; opacity: 1; } to { background-position: 0 120%; opacity: 0; } }

/* lanterns on a string */
todo-sky .ts-progress .ts-string { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
todo-sky .ts-progress .ts-string path { fill: none; stroke: color-mix(in oklab, #fff 40%, transparent); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
todo-sky .ts-lantern { position: absolute; width: 22px; height: 30px; margin-left: -11px; transform-origin: 50% 0; animation: ts-sway 4s ease-in-out infinite; animation-delay: var(--d); transition: left .7s, top .7s; }
todo-sky .ts-lantern::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 6px; background: color-mix(in oklab, #fff 50%, transparent); }
todo-sky .ts-lantern i { position: absolute; left: 0; right: 0; top: 6px; bottom: 0; border-radius: 9px 9px 11px 11px; border: 1.5px solid color-mix(in oklab, #fff 40%, transparent); background: color-mix(in oklab, #fff 6%, transparent); transition: background 1.2s, box-shadow 1.6s, border-color 1.2s; }
todo-sky .ts-lantern i::before, todo-sky .ts-lantern i::after { content: ""; position: absolute; left: 3px; right: 3px; height: 3px; border-radius: 2px; background: color-mix(in oklab, #fff 35%, transparent); }
todo-sky .ts-lantern i::before { top: -3px; }
todo-sky .ts-lantern i::after { bottom: -3px; }
/* on a pale sky by day, white lines vanish: draw them in the day ink instead */
todo-sky .ts-sky[data-pale]:not([data-dark]) .ts-progress .ts-string path { stroke: color-mix(in oklab, var(--ts-day-ink) 35%, transparent); }
todo-sky .ts-sky[data-pale]:not([data-dark]) .ts-lantern::before { background: color-mix(in oklab, var(--ts-day-ink) 40%, transparent); }
todo-sky .ts-sky[data-pale]:not([data-dark]) .ts-lantern:not(.ts-lit) i { border-color: color-mix(in oklab, var(--ts-day-ink) 35%, transparent); background: color-mix(in oklab, #fff 30%, transparent); }
todo-sky .ts-sky[data-pale]:not([data-dark]) .ts-lantern i::before, todo-sky .ts-sky[data-pale]:not([data-dark]) .ts-lantern i::after { background: color-mix(in oklab, var(--ts-day-ink) 35%, transparent); }
todo-sky .ts-lantern.ts-lit i { border-color: #ffd28a; background: radial-gradient(circle at 50% 45%, #fff3c4, #ffb45c 55%, #e36a3a); box-shadow: 0 0 18px 6px rgba(255,170,80,.55), 0 0 50px 14px rgba(255,150,60,.25); }
todo-sky .ts-lantern.ts-flare { animation: ts-lpop .9s cubic-bezier(.3,1.6,.5,1), ts-sway 4s ease-in-out .9s infinite; }
@keyframes ts-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes ts-lpop { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); } }

/* garden: buds along the front hill that bloom */
todo-sky .ts-flower { --s: 1; position: absolute; width: 0; height: var(--h); transform: rotate(var(--tilt)) scale(var(--s)); transform-origin: 50% 100%; transition: left .7s; }
todo-sky .ts-flower .stem { position: absolute; left: -1px; bottom: 0; width: 2px; height: 100%; border-radius: 2px; background: color-mix(in oklab, var(--quick) 55%, #2b4a2a); }
todo-sky .ts-flower .leaf { position: absolute; left: 0; bottom: 30%; width: 9px; height: 5px; border-radius: 0 100% 0 100%; background: color-mix(in oklab, var(--quick) 50%, #2b4a2a); }
todo-sky .ts-flower .bloom { position: absolute; left: 0; top: 0; width: 0; height: 0; }
todo-sky .ts-flower .bloom b { position: absolute; left: -4px; top: -11px; width: 8px; height: 11px; border-radius: 50% 50% 45% 45%; background: var(--fc); transform-origin: 50% 100%; transform: rotate(calc(var(--n) * 60deg)) scale(.25); opacity: .35; transition: transform 1s cubic-bezier(.3,1.5,.5,1), opacity .8s; transition-delay: calc(var(--n) * 60ms); }
todo-sky .ts-flower .bloom b:nth-child(1) { --n: 0; }
todo-sky .ts-flower .bloom b:nth-child(2) { --n: 1; }
todo-sky .ts-flower .bloom b:nth-child(3) { --n: 2; }
todo-sky .ts-flower .bloom b:nth-child(4) { --n: 3; }
todo-sky .ts-flower .bloom b:nth-child(5) { --n: 4; }
todo-sky .ts-flower .bloom b:nth-child(6) { --n: 5; }
todo-sky .ts-flower .bloom em { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #ffe08a; transform: scale(.4); transition: transform .8s .3s; }
todo-sky .ts-flower:not(.ts-open) .bloom b { background: color-mix(in oklab, var(--quick) 40%, #3a5a3a); }
todo-sky .ts-flower.ts-open .bloom b { transform: rotate(calc(var(--n) * 60deg)) scale(1); opacity: 1; }
todo-sky .ts-flower.ts-open .bloom em { transform: scale(1); }
todo-sky .ts-flower.ts-just { animation: ts-bloomup 1.2s cubic-bezier(.3,1.5,.5,1); }
@keyframes ts-bloomup { 30% { transform: rotate(var(--tilt)) scale(calc(var(--s) * 1.35)); } }

/* ---------- phones ---------- */
@media (max-width: 640px) {
  todo-sky .ts-sky { height: 164px; border-radius: 14px; }
  todo-sky .ts-in { padding: 14px 14px 0; gap: 10px; }
  todo-sky .ts-weekday { font-size: 32px; }
  todo-sky .ts-date { margin-top: 6px; font-size: 10px; letter-spacing: .14em; }
  todo-sky .ts-count { font-size: 32px; }
  todo-sky .ts-togo { margin-top: 3px; font-size: 12px; }
  todo-sky .ts-temp, todo-sky .ts-sunline { margin-top: 5px; font-size: 9.5px; letter-spacing: .1em; line-height: 1.35; }
  todo-sky .ts-temp + .ts-sunline { margin-top: 2px; }
  /* sunrise and sunset on a line each */
  todo-sky .ts-sunline span { display: block; }
  todo-sky .ts-sunline span + span::before { content: none; }
  todo-sky .ts-land, todo-sky .ts-pane-land { height: 96px; }
  todo-sky .ts-pane > .ts-land { height: 100%; }
  todo-sky .ts-sun { width: 40px; height: 40px; margin: -20px 0 0 -20px; box-shadow: 0 0 22px 7px var(--sun-glow), 0 0 60px 20px var(--sun-glow); }
  todo-sky .ts-sun.ts-moon { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
  todo-sky .ts-lantern { width: 16px; height: 22px; margin-left: -8px; }
  todo-sky .ts-lantern::before { height: 4px; }
  todo-sky .ts-lantern i { top: 4px; border-radius: 7px 7px 8px 8px; }
  todo-sky .ts-lantern i::before, todo-sky .ts-lantern i::after { left: 2px; right: 2px; height: 2px; }
  todo-sky .ts-lantern i::before { top: -2px; }
  todo-sky .ts-lantern i::after { bottom: -2px; }
  todo-sky .ts-flower { --s: .72; }
}
@media (max-width: 380px) {
  todo-sky .ts-weekday { font-size: 28px; }
  todo-sky .ts-count { font-size: 28px; }
}