:root {
  color-scheme: light dark;  /* системные поля (время, галочки) тоже в тёмной теме */
  --bg: #f6f1ea; --card: #fffdf9; --ink: #2b2620; --muted: #8a8074;
  --line: #e6ddd1; --accent: #c4673a; --accent-ink: #fff; --today: #c4673a;
  --ok: #2f7d4f; --err: #b3261e; --cell: #efe8de; --radius: 12px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1a17; --card: #26231f; --ink: #ede6dc; --muted: #a39887;
    --line: #3a352f; --accent: #e08a5c; --accent-ink: #1c1a17; --today: #e08a5c;
    --ok: #7cc79a; --err: #ff8a80; --cell: #2d2924;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
main { max-width: 760px; margin: 0 auto; padding: 8px 16px 40px; }
a { color: var(--accent); }
h1 { font-size: 1.4rem; margin: 0; font-weight: 650; }
h2 { font-size: 1.1rem; margin: 0 0 8px; }
.muted { color: var(--muted); }
.center { text-align: center; }
.hint { color: var(--muted); font-size: .85rem; margin: -6px 0 12px; }
.ok { color: var(--ok); }
.error { color: var(--err); }

.top { display: flex; justify-content: flex-end; align-items: center; min-height: 52px;
       max-width: 760px; margin: 0 auto; padding: 12px 16px 4px; }
.top a { text-decoration: none; color: var(--muted); font-size: .95rem; }
.top .brand { color: var(--ink); font-weight: 650; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
        padding: 16px; margin: 16px 0; }
.narrow { max-width: 380px; margin: 15vh auto 0; }
.login h1 { margin-bottom: 16px; }
label { display: block; margin-bottom: 12px; font-weight: 500; }
input[type=text], input[type=password], textarea {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px; font: inherit; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
}
textarea { resize: vertical; }
.field-title { font-weight: 500; margin: 0 0 6px; }
.filebtn { display: inline-block; position: relative; padding: 10px 18px; border-radius: 8px; cursor: pointer;
           border: 1px solid var(--line); background: var(--bg); font-weight: 500; margin: 0 8px 12px 0; }
.filebtn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.filebtn:focus-within { outline: 2px solid var(--accent); }
.filename { font-size: .9rem; word-break: break-all; }
.emoji-input { max-width: 6em; font-size: 1.4rem !important; text-align: center; }
label.check { display: flex; gap: 8px; align-items: center; font-weight: 400; }
button { font: inherit; padding: 10px 18px; border-radius: 8px; cursor: pointer;
         border: 1px solid var(--line); background: var(--card); color: var(--ink); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
code { font-size: .85em; word-break: break-all; }

.month-head, .day-head { display: flex; align-items: center; gap: 12px; margin: 8px 0 12px; }
.month-head { justify-content: space-between; }
.day-head p { margin: 0; }
.nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
           border-radius: 50%; text-decoration: none; font-size: 1.6rem; color: var(--ink);
           background: var(--card); border: 1px solid var(--line); flex: none; }

.grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.wd { text-align: center; font-size: .75rem; color: var(--muted); padding: 4px 0; }
.cell { position: relative; aspect-ratio: 1; border-radius: 8px; background: var(--cell);
        overflow: hidden; text-decoration: none; color: var(--ink); display: block; }
.cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cell .num { position: absolute; top: 3px; left: 5px; font-size: .8rem; font-weight: 600; z-index: 1; }
.cell.has-photo .num { color: #fff; text-shadow: 0 0 3px rgba(0,0,0,.7); }
.cell .emo { position: absolute; right: 3px; bottom: 1px; font-size: 1.05rem; z-index: 1; line-height: 1.2; }
.cell:not(.has-photo) .emo { right: 50%; bottom: 50%; transform: translate(50%, 60%); font-size: 1.5rem; }
.cell .dot { position: absolute; left: 50%; bottom: 8px; width: 6px; height: 6px; margin-left: -3px;
             border-radius: 50%; background: var(--accent); }
.cell.blank { background: transparent; }
.cell.future { opacity: .5; }
.cell.today { outline: 2px solid var(--today); outline-offset: -2px; }

.photo { margin: 0 0 8px; }
.photo img { display: block; width: 100%; max-height: 75vh; object-fit: contain;
             border-radius: var(--radius); background: var(--cell); }
.preview { display: block; max-width: 100%; max-height: 240px; border-radius: 8px; margin-bottom: 12px; }

@media (min-width: 600px) {
  .grid { gap: 6px; }
  .cell .num { font-size: .9rem; top: 5px; left: 7px; }
  .cell .emo { font-size: 1.3rem; }
  .cell:not(.has-photo) .emo { font-size: 2rem; }
}

/* --- итерация 2 --- */
a.plain { color: inherit; text-decoration: none; }
.top nav { display: flex; gap: 16px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.time-input { display: block; margin-top: 6px; padding: 8px 10px; font: inherit; color: var(--ink);
              background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
/* ряды кнопок: равный зазор и аккуратный перенос на узком экране */
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.actions button[hidden] { display: none; }
.actions + .hint { margin: 12px 0 0; }

/* видео в клетке месяца */
.cell video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.photo video { display: block; width: 100%; max-height: 75vh; border-radius: var(--radius); background: #000; }
video.preview { display: block; max-width: 100%; max-height: 240px; border-radius: 8px; margin-bottom: 12px; }
.processing { text-align: center; }

/* прогресс загрузки */
.progress { position: relative; height: 28px; border-radius: 8px; background: var(--cell); overflow: hidden; margin-bottom: 12px; }
.progress .bar { height: 100%; width: 0; background: var(--accent); opacity: .35; transition: width .2s; }
.progress .pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .9rem; }

/* «В этот день» */
.memories { margin: 8px 0 16px; }
.memories h2 { font-size: 1rem; margin: 0 0 8px; }
.mem-strip { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.mem { flex: 0 0 auto; width: 132px; scroll-snap-align: start; text-decoration: none; color: var(--ink);
       background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; position: relative; }
.mem img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.mem .mem-emoji { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; font-size: 2.6rem; background: var(--cell); }
.mem .badge { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.55); color: #fff; border-radius: 50%;
              width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: .7rem; }
.mem-cap { display: block; padding: 6px 8px; font-size: .8rem; line-height: 1.3; }

/* вид «год» */
.year { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 14px; }
.ymonth h2 { font-size: .95rem; margin: 0 0 6px; }
.ygrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.yc { aspect-ratio: 1; border-radius: 3px; background: var(--cell); display: flex; align-items: center;
      justify-content: center; font-size: .6rem; line-height: 1; text-decoration: none; overflow: hidden; }
.yc.blank { background: transparent; }
.yc.filled { background: color-mix(in srgb, var(--accent) 35%, var(--cell)); }
.yc.media { background: var(--accent); }
.yc.today { outline: 2px solid var(--ink); outline-offset: -1px; }
.yc.future { opacity: .5; }
@media (min-width: 600px) {
  .year { grid-template-columns: repeat(3, 1fr); }
  .yc { font-size: .75rem; }
}

/* ================= Лесная сцена ================= */
.hero { position: relative; margin: -60px -16px 4px; padding: 64px 16px 0; height: clamp(300px, 86vw, 420px);
        overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; }
.hero .scene-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
               background: linear-gradient(to bottom, transparent 90%, var(--bg)); }
.hero-content { position: relative; z-index: 2; }
.hero .month-head { margin: 0; }
.hero h1 { padding: 4px 16px; border-radius: 999px; font-size: 1.3rem;
           background: color-mix(in srgb, var(--card) 78%, transparent); backdrop-filter: blur(6px); }
.hero .nav-btn { background: color-mix(in srgb, var(--card) 82%, transparent); backdrop-filter: blur(6px); }
body.has-hero .top { position: relative; z-index: 3; }
body.has-hero .top a { padding: 3px 10px; border-radius: 999px; color: var(--ink);
                       background: color-mix(in srgb, var(--card) 70%, transparent); backdrop-filter: blur(6px); }
body.has-hero .top nav { gap: 6px; }
.under-hero { margin-top: 4px; }

/* --- палитра по умолчанию (лето) --- */
.scene {
  --sky-top: #7ec0ee; --sky-mid: #b9def5; --sky-bottom: #e6f4fb;
  --glow: #fff6c8; --sun: #fff3b0; --moon: #f3f1e6;
  --tint: #0a1430; --tint-a: 0;
  --ridge-far: #9cbfa9; --ridge-mid: #7da57d; --ground: #86b865; --ground-shade: #74a656;
  --fir-far: #4f7d63; --fir-mid: #2f6347; --fir-near: #24503a; --trunk: #5b4636;
  --crown-1: #6aa84f; --crown-2: #7fbb5c; --crown-3: #5b9a45; --birch: #f4f1ea; --mark: #2b2b2b;
  --snow: #fbfdff; --cloud: #ffffff; --cloud-a: .85;
}
.scene .sky-top { stop-color: var(--sky-top); } .scene .sky-mid { stop-color: var(--sky-mid); }
.scene .sky-bottom { stop-color: var(--sky-bottom); }
.scene .glow-in { stop-color: var(--glow); stop-opacity: .8; } .scene .glow-out { stop-color: var(--glow); stop-opacity: 0; }
.scene .ridge-far { fill: var(--ridge-far); } .scene .ridge-mid { fill: var(--ridge-mid); }
.scene .ground { fill: var(--ground); } .scene .ground-shade { fill: var(--ground-shade); }
.scene .fir.far { fill: var(--fir-far); } .scene .fir.mid { fill: var(--fir-mid); } .scene .fir.near { fill: var(--fir-near); }
.scene .trunk { fill: var(--trunk); }
.scene .birch-trunk { fill: var(--birch); } .scene .birch-mark { fill: var(--mark); }
.scene .branch { stroke: var(--trunk); stroke-width: 1.2; fill: none; stroke-linecap: round; display: none; }
.scene .crown-1 { fill: var(--crown-1); } .scene .crown-2 { fill: var(--crown-2); } .scene .crown-3 { fill: var(--crown-3); }
.scene .snowcap { fill: var(--snow); display: none; }
.scene .cloud ellipse { fill: var(--cloud); opacity: var(--cloud-a); }
.scene .tint { opacity: var(--tint-a); transition: opacity 2s; }
.scene .tint-stop { stop-color: var(--tint); }
.scene .sun-disc { fill: var(--sun); } .scene .moon-disc { fill: var(--moon); }
.scene .moon-crater { fill: #d9d5c3; } .scene .star { fill: #fff; }
.scene .stem { stroke: #4f8a3a; stroke-width: .8; }
.scene .fl-0 { fill: #fff; } .scene .fl-1 { fill: #f6d743; } .scene .fl-2 { fill: #f29cc2; } .scene .fl-3 { fill: #8fb6f2; }
.scene .berry { fill: #c8283a; }
.scene .mush-stem { fill: #f1e6d0; } .scene .mush-cap { fill: #b5482a; }
.scene .fox-body, .scene .fox-tail, .scene .fox-ear { fill: #d9692a; } .scene .fox-tip, .scene .fox-chest { fill: #fff; }
.scene .fox-leg { fill: #3a2a20; }
.scene .hare-body, .scene .hare-ear { fill: #f4f4f2; } .scene .hare-tail { fill: #fff; } .scene .hare-eye { fill: #222; }
.scene .owl-body { fill: #7a6048; } .scene .owl-eye { fill: #f5d76e; }
.scene .bf-wing { fill: #f39c3d; }
.scene .firefly { fill: #f8f39a; }
.scene .flake { fill: #fff; }
.scene .leaf-c0 { fill: #e39a2a; } .scene .leaf-c1 { fill: #c8502a; } .scene .leaf-c2 { fill: #f0c24a; }
.scene .meteor { stroke: #fff; stroke-width: 1.2; stroke-linecap: round; }

/* --- что видно когда --- */
.scene .stars, .scene .moon, .scene .owl, .scene .fireflies, .scene .meteors { opacity: 0; transition: opacity 2s; }

/* --- сезоны и месяцы --- */
.scene.season-winter {
  --ridge-far: #c9d7e4; --ridge-mid: #dfe8f1; --ground: #f3f7fb; --ground-shade: #e3ebf3;
  --fir-far: #6c8794; --fir-mid: #3b5a5c; --fir-near: #2c4646; --sky-top: #9cc4e6; --sky-mid: #cfe2f2; --sky-bottom: #eef4fa;
}
.scene.season-winter .snowcap, .scene.season-winter .branch { display: inline; }
.scene.season-winter .crown, .scene.month-3 .crown, .scene.month-11 .crown { display: none; }
.scene.month-3 .branch, .scene.month-11 .branch { display: inline; }
.scene.month-3 { --ground: #e7ece9; --ground-shade: #b9a88f; --ridge-mid: #c9d3cf; --ridge-far: #b7c6c7; }
.scene.month-4 { --ground: #a7c47b; --ground-shade: #8fb066; --crown-1: #b6d77a; --crown-2: #c7e08d; --crown-3: #a5cc6a; }
.scene.month-5 { --crown-1: #8cc964; --crown-2: #f4f1ea; --crown-3: #9fd36f; } /* черёмуха цветёт */
.scene.month-8 { --ground: #9bb862; --ground-shade: #86a64f; --crown-1: #6f9e45; --crown-2: #8bb24f; }
.scene.month-9 { --ground: #b7aa5e; --ground-shade: #a5974d; --crown-1: #e9c23d; --crown-2: #d9a531; --crown-3: #9db04a; }
.scene.month-10 { --ground: #c28a4a; --ground-shade: #a97538; --ridge-mid: #b77e45; --ridge-far: #b29a78;
                  --crown-1: #e0892a; --crown-2: #c9502a; --crown-3: #f0b43a; }
.scene.month-11 { --ground: #b8b0a2; --ground-shade: #a19787; --ridge-mid: #9c9586; --ridge-far: #a8aeb2; }

/* --- время суток --- */
.scene.tod-dawn { --sky-top: #5e6aa8; --sky-mid: #e3a3a8; --sky-bottom: #f8d6a2; --glow: #ffd7a0; --sun: #ffd28a;
                  --tint: #4a3a6a; --tint-a: .18; --cloud: #f7c8c4; }
.scene.tod-dusk { --sky-top: #3a3c78; --sky-mid: #e17e62; --sky-bottom: #f7c47c; --glow: #ffb36b; --sun: #ffb35c;
                  --tint: #5a2a4a; --tint-a: .24; --cloud: #f2a58e; }
.scene.tod-night { --sky-top: #0a1430; --sky-mid: #18284f; --sky-bottom: #2a3c66; --glow: #cfd9ff;
                   --tint: #0a1430; --tint-a: .58; --cloud: #3a4a72; --cloud-a: .5; }
.scene.season-winter.tod-night { --sky-bottom: #33507c; --tint-a: .45; } /* снег светлее ночью */
.scene.tod-night .stars, .scene.tod-night .moon, .scene.tod-night .owl { opacity: 1; }
.scene.tod-dusk .stars, .scene.tod-dawn .stars { opacity: .35; }
.scene.tod-dusk .moon { opacity: .6; }
.scene.tod-night .fireflies, .scene.tod-dusk .fireflies { opacity: 1; }
.scene.tod-night .meteors { opacity: 1; }
.scene.tod-night .sun, .scene.tod-night .butterfly { display: none; }
.scene .sun { transform: translate(110px, 50px); transition: transform 2s; }
.scene.tod-dawn .sun { transform: translate(70px, 168px); }
.scene.tod-dusk .sun { transform: translate(320px, 168px); }

/* --- анимации --- */
@keyframes fall { to { transform: translate(24px, 620px); } }
.scene .flake { animation: fall 18s linear infinite; }
.scene .fk-1 { animation-duration: 14s; animation-delay: -5s; } .scene .fk-2 { animation-duration: 22s; animation-delay: -11s; }
.scene .fk-3 { animation-duration: 16s; animation-delay: -8s; } .scene .fk-4 { animation-duration: 20s; animation-delay: -3s; }
.scene .fk-5 { animation-duration: 25s; animation-delay: -15s; }
@keyframes leaf { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(18px, 80px) rotate(120deg); }
                  50% { transform: translate(-6px, 160px) rotate(220deg); } 75% { transform: translate(20px, 240px) rotate(330deg); }
                  100% { transform: translate(4px, 330px) rotate(420deg); } }
.scene .leaf { animation: leaf 13s linear infinite; transform-box: fill-box; transform-origin: center; }
.scene .lf-1 { animation-duration: 11s; animation-delay: -4s; } .scene .lf-2 { animation-duration: 16s; animation-delay: -9s; }
.scene .lf-3 { animation-duration: 12s; animation-delay: -2s; } .scene .lf-4 { animation-duration: 15s; animation-delay: -12s; }
.scene .lf-5 { animation-duration: 18s; animation-delay: -6s; }
@keyframes drift { to { transform: translateX(34px); } }
.scene .cloud { animation: drift 45s ease-in-out infinite alternate; }
.scene .cl-1 { animation-duration: 60s; } .scene .cl-2 { animation-duration: 38s; animation-delay: -12s; }
@keyframes twinkle { 50% { opacity: .25; } }
.scene .star { animation: twinkle 3.2s ease-in-out infinite; }
.scene .tw-1 { animation-delay: -1s; animation-duration: 4.1s; } .scene .tw-2 { animation-delay: -2s; animation-duration: 2.7s; }
.scene .tw-3 { animation: none; }
@keyframes glowpulse { 0%, 100% { opacity: .15; transform: translate(0, 0); } 50% { opacity: 1; transform: translate(4px, -5px); } }
.scene .firefly { animation: glowpulse 3.5s ease-in-out infinite; }
.scene .ff-1 { animation-delay: -1.2s; animation-duration: 4.2s; } .scene .ff-2 { animation-delay: -2.1s; animation-duration: 2.9s; }
.scene .ff-3 { animation-delay: -.6s; animation-duration: 5s; }
@keyframes flap { to { transform: scaleX(.25); } }
.scene .flap { animation: flap .22s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes flutter { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(30px, -14px); }
                     50% { transform: translate(60px, -4px); } 75% { transform: translate(26px, 8px); } }
.scene .butterfly > .flap { animation: flap .22s ease-in-out infinite alternate; }
.scene .bf-0 { animation: none; }
@keyframes run { 0% { transform: translateX(-70px); } 35% { transform: translateX(470px); } 100% { transform: translateX(470px); } }
.scene .fox { animation: run 28s linear infinite; animation-delay: 3s; transform: translateX(-70px); }
@keyframes bob { to { transform: translateY(-2px); } }
.scene .fox .bob { animation: bob .18s ease-in-out infinite alternate; }
@keyframes hop { 0%, 86%, 100% { transform: translateY(0); } 92% { transform: translateY(-6px); } }
.scene .hare { animation: hop 5s ease-in-out infinite; }
@keyframes meteor { 0%, 90% { stroke-dasharray: 0 60; stroke-dashoffset: 0; opacity: 0; }
                    92% { opacity: 1; } 100% { stroke-dasharray: 30 60; stroke-dashoffset: -50; opacity: 0; } }
.scene .meteor { animation: meteor 9s linear infinite; } .scene .m-1 { animation-delay: -4s; animation-duration: 13s; }

.scene.paused * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .scene * { animation: none !important; transition: none !important; }
  .scene .fox { transform: translateX(150px); }
  .scene .leaf, .scene .flake { display: none; }
}

/* --- шапка: только шестерёнка; кнопка «записать сегодня» --- */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
            border-radius: 50%; color: var(--ink); background: var(--card); border: 1px solid var(--line); }
body.has-hero .top .icon-btn { padding: 0; border: 0; color: #fff;
  background: rgba(0, 0, 0, .22); backdrop-filter: blur(6px); }
body.has-hero .top a.icon-btn { padding: 0; }
.fab { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom));
       z-index: 10; width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
       background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.fab:active { transform: scale(.94); }
main { padding-bottom: 96px; } /* чтобы «+» не закрывал последние дни */

/* заголовок месяца прямо на небе */
.hero h1 { background: none; backdrop-filter: none; padding: 0; font-size: 1.6rem; color: #2b2620;
           text-shadow: 0 1px 8px rgba(255, 255, 255, .7); }
.hero h1 a { color: inherit; }
.scene.tod-night h1, .scene.tod-dusk h1 { color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }
.hero .nav-btn { background: rgba(255, 255, 255, .28); border: 0; color: #2b2620; width: 38px; height: 38px; font-size: 1.4rem; }
.scene.tod-night .nav-btn, .scene.tod-dusk .nav-btn { background: rgba(0, 0, 0, .22); color: #fff; }

/* шапка поверх сцены, без полоски над небом */
body.has-hero .top { position: absolute; top: 0; left: 0; right: 0; max-width: 760px; margin: 0 auto; }
body.has-hero .hero { margin-top: -8px; }
body:not(.has-hero) main { padding-top: 16px; }

/* --- приметы месяцев --- */
.scene .thaw { fill: #a8987c; opacity: .55; }
.scene .puddle { fill: #9cc7e6; opacity: .85; } .scene .puddle-shine { fill: #fff; opacity: .7; }
.scene .glint { stroke: #fff; stroke-width: .8; stroke-linecap: round; opacity: 0; animation: glint 2.6s ease-in-out infinite; }
.scene .gl-1 { animation-delay: -.9s; } .scene .gl-2 { animation-delay: -1.7s; animation-duration: 3.4s; }
@keyframes glint { 45%, 55% { opacity: 1; } }
.scene .bulb-0 { fill: #ff5a4f; } .scene .bulb-1 { fill: #ffd84a; } .scene .bulb-2 { fill: #5ad1ff; } .scene .bulb-3 { fill: #8cff6a; }
.scene .bulb { animation: blink 2.4s steps(2, jump-none) infinite; }
.scene .bulb-1 { animation-delay: -.6s; } .scene .bulb-2 { animation-delay: -1.2s; } .scene .bulb-3 { animation-delay: -1.8s; }
@keyframes blink { 50% { opacity: .25; } }
.scene .bf-back, .scene .bf-tail { fill: #5c6670; } .scene .bf-breast { fill: #e0483a; } .scene .bf-head { fill: #1d1d1f; }
.scene .bf-beak { fill: #1d1d1f; }
.scene .rook-body { fill: #1f1f24; } .scene .rook-beak { fill: #cfc9c0; }
.scene .bird-v { stroke: #2a2a30; stroke-width: 1; fill: none; stroke-linecap: round; }
.scene .flock { animation: flock 40s linear infinite; }
@keyframes flock { from { transform: translateX(-160px); } to { transform: translateX(420px); } }
.scene .hh-spines { fill: #6b5442; } .scene .hh-face { fill: #c9a982; } .scene .hh-nose, .scene .hh-eye { fill: #1d1d1f; }
.scene .hedgehog { animation: sniff 7s ease-in-out infinite; }
@keyframes sniff { 0%, 70%, 100% { transform: translateX(0); } 80%, 90% { transform: translateX(4px); } }
.scene .sq-tail, .scene .sq-body { fill: #b8642e; } .scene .sq-nut { fill: #7a5230; }
.scene .sq-tail { animation: tail 3s ease-in-out infinite; transform-box: fill-box; transform-origin: 100% 100%; }
@keyframes tail { 0%, 80%, 100% { transform: rotate(0); } 88% { transform: rotate(-12deg); } }
.scene .fog-band { fill: #eef1f3; opacity: .55; }
.scene.tod-night .fog-band { opacity: .14; } .scene.tod-dusk .fog-band, .scene.tod-dawn .fog-band { opacity: .3; }
.scene .fb-0 { animation: drift 30s ease-in-out infinite alternate; }
.scene .fb-1 { animation: drift 42s ease-in-out infinite alternate-reverse; }
/* метель: быстрее и наискосок */
@keyframes blizzard { to { transform: translate(140px, 620px); } }
.scene .snow-bz .flake { animation: blizzard 6s linear infinite; }
.scene .bz-1 { animation-duration: 4.5s !important; animation-delay: -2s !important; }
.scene .bz-2 { animation-duration: 7s !important; animation-delay: -4s !important; }
.scene .bz-3 { animation-duration: 5s !important; animation-delay: -1s !important; }
.scene .bz-4 { animation-duration: 8s !important; animation-delay: -6s !important; }
.scene .bz-5 { animation-duration: 5.5s !important; animation-delay: -3s !important; }
/* небо по месяцам: февраль пасмурный, декабрь сизый, ноябрь серый, январь ясный */
.scene.month-2.tod-day { --sky-top: #a9b6c4; --sky-mid: #c9d2dc; --sky-bottom: #e1e6ec; --sun: #f4f1e2; --glow: #f6f3e8; --cloud: #e9edf1; }
.scene.month-12.tod-day { --sky-top: #9fb5cc; --sky-mid: #c7d5e3; --sky-bottom: #e8eef4; }
.scene.month-11.tod-day { --sky-top: #a7b8c6; --sky-mid: #cdd6dd; --sky-bottom: #e4e8eb; --sun: #f7f1d6; }
.scene.month-1.tod-day { --sky-top: #6fa9e0; --sky-mid: #b6d6f2; --sky-bottom: #eaf3fb; }
.scene.month-3 { --ground: #eef2f3; --ground-shade: #dfe6e9; }
.scene.month-9 .leaf-c0 { fill: #f0c24a; } .scene.month-9 .leaf-c1 { fill: #e3b02f; } .scene.month-9 .leaf-c2 { fill: #c9b04a; }
.scene.month-6 { --ground: #7dbb5c; --ground-shade: #6aa94b; --crown-1: #5fa646; --crown-2: #74b752; }
.scene .fl-4 { fill: #fff; }

/* «вернуться к текущему месяцу» — маленькая кнопка под названием, в стиле стрелок */
.back-now { margin: 6px 0 0; text-align: center; }
.back-now a { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .9rem; text-decoration: none;
              color: #2b2620; background: rgba(255, 255, 255, .35); backdrop-filter: blur(6px); }
.scene.tod-night .back-now a, .scene.tod-dusk .back-now a { color: #fff; background: rgba(0, 0, 0, .25); }

/* выбор отрезка длинного видео */
.trim { margin: -4px 0 12px; }
.trim-track { position: relative; height: 52px; border-radius: 8px; overflow: hidden; touch-action: none;
              background: var(--cell, var(--bg)); border: 1px solid var(--line); cursor: grab; user-select: none;
              -webkit-user-select: none; }
.trim-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.trim-strip { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.trim-win { position: absolute; top: 0; bottom: 0; min-width: 10px; box-sizing: border-box;
            border: 3px solid var(--accent); border-radius: 8px; background: color-mix(in srgb, var(--accent) 12%, transparent);
            box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); }
.trim-h { position: absolute; top: 50%; width: 4px; height: 22px; margin-top: -11px; border-radius: 2px;
          background: var(--accent-ink); opacity: .9; }
.trim-h.l { left: 2px; } .trim-h.r { right: 2px; }
.trim-info { margin: 8px 0 0; font-size: .9rem; }
.trim-range { font-variant-numeric: tabular-nums; }
video.preview { cursor: pointer; }