
:root[data-season="autumn"]{
  --s-brand:#6b2f18; --s-brand-ink:#fff8ee;
  --s-accent:#e3a23f; --s-accent-ink:#1e1b16;
  --s-link:#9a3d17;
  --s-mark:#f2b24c; --s-mark-2:#8a3a17;     
  --s-ico:#d68a2a;  --s-ico-2:#8a3a17;      
  --s-sky-1:#f0c985; --s-sky-2:#fcf1de;
  --s-sun:#f19b3f; --sun-x:1548; --sun-y:198;
  --s-hill-far:#ddb67e; --s-hill-mid:#c38f4e; --s-hill-near:#8c6b33; --s-ground:#6b5025;
  --s-trunk:#4a3021; --s-bird:#3d2a1e;
  --s-c1:#f0c15a; --s-c2:#e39a35; --s-c3:#c8602a; --s-c4:#a3401d;
  --pt-c1:#f0b13f; --pt-c2:#d2662b; --pt-c3:#a8441e;
  --pt-move:pt-fall; --pt-spin:pt-tumble; --pt-dur:18s; --pt-spin-dur:3.45s; --pt-size:20px;
  --pt-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8c6.3 4.9 9.2 9.4 9.2 13.5 0 4.5-3.9 7.5-8.8 6.8C7.6 21.4 4.4 17.7 4.8 13.4 5.2 8.9 7.9 5.4 12 1.8z'/%3E%3C/svg%3E");
  --pt-shape-2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2 5 4-2-1 5h5l-3 3 3 3h-6l1 4-4-3-.4 7h-1.2L11 16l-4 3 1-4H2l3-3-3-3h5L6 4l4 2z'/%3E%3C/svg%3E");
}
:root[data-season="winter"]{
  --s-brand:#22405c; --s-brand-ink:#f3f7fb;
  --s-accent:#b8322a; --s-accent-ink:#fff;
  --s-link:#1d5785;
  --s-mark:#eef5fb; --s-mark-2:#9fc3e2;
  --s-ico:#4f86b8;  --s-ico-2:#4f86b8;
  --s-sky-1:#b7cce0; --s-sky-2:#edf2f7;
  --s-sun:#fff1d6; --sun-x:1556; --sun-y:238;
  --s-hill-far:#d3dfeb; --s-hill-mid:#e4ecf3; --s-hill-near:#f8fbfd; --s-ground:#e9f0f6;
  --s-trunk:#3e3638; --s-bird:#2b2d33;
  --s-c1:#ffffff; --s-c2:#2a5d47; --s-c3:#1d4434; --s-c4:#c73a2e;
  --pt-c1:#ffffff; --pt-c2:#ffffff; --pt-c3:#f2f7fc;
  --pt-move:pt-snow; --pt-spin:pt-sway; --pt-dur:22.5s; --pt-spin-dur:4.8s; --pt-size:9px;
  --pt-shape:radial-gradient(circle,#000 0 50%,transparent 68%);
  --pt-shape-2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17L20.7 7M12 6.5 9.6 4M12 6.5 14.4 4M12 17.5 9.6 20M12 17.5 14.4 20'/%3E%3C/svg%3E");
}
:root[data-season="spring"]{
  --s-brand:#2b5a3b; --s-brand-ink:#f4faf3;
  --s-accent:#f2a6b8; --s-accent-ink:#1e1b16;
  --s-link:#2a6a43;
  --s-mark:#f8c9d5; --s-mark-2:#f4c542;
  --s-ico:#e5869f;  --s-ico-2:#e9b730;
  --s-sky-1:#a8d3ec; --s-sky-2:#f0f8ef;
  --s-sun:#ffd96b; --sun-x:1540; --sun-y:140;
  --s-hill-far:#c9e1b2; --s-hill-mid:#a3cd85; --s-hill-near:#7bb562; --s-ground:#62a04f;
  --s-trunk:#5b4535; --s-bird:#1f2a3a; --s-water:#86c4e2;
  --s-c1:#ffffff; --s-c2:#fbe1e8; --s-c3:#f4b9c8; --s-c4:#b4d88a;
  --pt-c1:#f9d6df; --pt-c2:#ffffff; --pt-c3:#f2b0c2;
  --pt-move:pt-drift; --pt-spin:pt-flutter; --pt-dur:21s; --pt-spin-dur:2.55s; --pt-size:14px;
  --pt-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6 16 5 9 8.5 4c1.5 2 2.5 2.5 3.5 1 1-1.5 2-2 3.5-1C19 9 18 16 12 22z'/%3E%3C/svg%3E");
  --pt-shape-2:var(--pt-shape);
}
:root[data-season="summer"]{
  --s-brand:#18546f; --s-brand-ink:#f2f9fc;
  --s-accent:#f3b53a; --s-accent-ink:#1e1b16;
  --s-link:#1a6284;
  --s-mark:#fffaf0; --s-mark-2:#f3b53a;
  --s-ico:#8f7f62;  --s-ico-2:#5f523d;
  --s-sky-1:#7dbfe6; --s-sky-2:#e4f4fb;
  --s-sun:#ffd23f; --sun-x:1530; --sun-y:98;
  --s-hill-far:#a6d18b; --s-hill-mid:#75b45b; --s-hill-near:#4e9345; --s-ground:#3e7f39;
  --s-trunk:#4d3826; --s-bird:#2b2d33;
  --s-c1:#5aa64e; --s-c2:#3f8a40; --s-c3:#2f6f34; --s-c4:#d8462f;
  --pt-c1:#ffffff; --pt-c2:#fffdf3; --pt-c3:#ffffff;
  --pt-move:pt-rise; --pt-spin:pt-bob; --pt-dur:27s; --pt-spin-dur:3.9s; --pt-size:26px;
  --pt-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M12 11v11M12 11 4.2 6.2M12 11 6.4 3.6M12 11 9.4 2M12 11V1.6M12 11 14.6 2M12 11 17.6 3.6M12 11 19.8 6.2'/%3E%3C/g%3E%3Cellipse cx='12' cy='22.2' rx='1.3' ry='1.8'/%3E%3C/svg%3E");
  --pt-shape-2:var(--pt-shape);
}
:root,.hero,.mast,.game{
  --ico:var(--s-ico); --ico-2:var(--s-ico-2);
  --c-sun:color-mix(in oklab,var(--s-sun),#eef0f6 var(--moonness));
  --c-hill-far:color-mix(in oklab,color-mix(in oklab,var(--s-hill-far),var(--w-tint) var(--w-land)),var(--night) var(--nightness));
  --c-hill-mid:color-mix(in oklab,color-mix(in oklab,var(--s-hill-mid),var(--w-tint) var(--w-land)),var(--night) var(--nightness));
  --c-hill-near:color-mix(in oklab,color-mix(in oklab,var(--s-hill-near),var(--w-tint) var(--w-land)),var(--night) var(--nightness));
  --c-ground:color-mix(in oklab,color-mix(in oklab,var(--s-ground),var(--w-tint) var(--w-land)),var(--night) var(--nightness));
  --c-trunk:color-mix(in oklab,var(--s-trunk),var(--night) calc(var(--nightness) * .5));
  --c-bird:color-mix(in oklab,var(--s-bird),var(--night) calc(var(--nightness) * .3));
  --c-c1:color-mix(in oklab,color-mix(in oklab,var(--s-c1),var(--w-tint) calc(var(--w-land) * .6)),var(--night) calc(var(--nightness) * .7));
  --c-c2:color-mix(in oklab,color-mix(in oklab,var(--s-c2),var(--w-tint) calc(var(--w-land) * .6)),var(--night) calc(var(--nightness) * .7));
  --c-c3:color-mix(in oklab,color-mix(in oklab,var(--s-c3),var(--w-tint) calc(var(--w-land) * .6)),var(--night) calc(var(--nightness) * .7));
  --c-c4:color-mix(in oklab,color-mix(in oklab,var(--s-c4),var(--w-tint) calc(var(--w-land) * .6)),var(--night) calc(var(--nightness) * .7));
  --c-snow:color-mix(in oklab,#fff,var(--night) calc(var(--nightness) * .45));
  --c-shade:color-mix(in oklab,#c3d3e3,var(--night) var(--nightness));
  --c-water:color-mix(in oklab,var(--s-water,#86c4e2),var(--night) var(--nightness));
  --c-wood:color-mix(in oklab,#7a5536,var(--night) calc(var(--nightness) * .6));
  --c-paper:color-mix(in oklab,#fffdf6,var(--night) calc(var(--nightness) * .5));
  --c-wind:color-mix(in oklab,color-mix(in oklab,var(--s-brand),#fff var(--moonness)) 50%,transparent);
  --c-pt1:color-mix(in oklab,var(--pt-c1),var(--night) calc(var(--nightness) * .4));
  --c-pt2:color-mix(in oklab,var(--pt-c2),var(--night) calc(var(--nightness) * .4));
  --c-pt3:color-mix(in oklab,var(--pt-c3),var(--night) calc(var(--nightness) * .4));
  --c-cloud:color-mix(in oklab,var(--w-cloud,#fff),var(--night) calc(var(--nightness) * 1.12));
  --c-rain:color-mix(in oklab,#5b6f86,#dfe8f3 var(--moonness));
  --c-fog:color-mix(in oklab,var(--w-fog,#eef1f4),#5d6b80 var(--moonness));
}
[data-s]{display:none}
:root[data-season="autumn"] [data-s~="autumn"],
:root[data-season="winter"] [data-s~="winter"],
:root[data-season="spring"] [data-s~="spring"],
:root[data-season="summer"] [data-s~="summer"]{display:revert}
.fx{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;container-type:size}
.pt{position:absolute;top:0;left:calc(var(--x) * 1% - 12%);
  width:calc(var(--pt-size) * var(--s) * var(--k,1));aspect-ratio:1;
  opacity:calc(.5 + var(--s) * .4);
  animation:var(--pt-move) calc(var(--pt-dur) * var(--t)) linear calc(var(--d) * 1.5s) infinite}
.pt::before{content:"";position:absolute;inset:0;background:var(--c-pt1);
  -webkit-mask:var(--pt-shape) center/contain no-repeat;mask:var(--pt-shape) center/contain no-repeat;
  animation:var(--pt-spin) calc(var(--pt-spin-dur) * var(--t)) ease-in-out calc(var(--d) * 1.5s) infinite alternate}
.pt:nth-child(3n+2)::before{background:var(--c-pt2)}
.pt:nth-child(3n)::before{background:var(--c-pt3)}
.pt:nth-child(4n+1)::before{-webkit-mask-image:var(--pt-shape-2);mask-image:var(--pt-shape-2)}
:root[data-season="winter"] .pt:nth-child(4n+1){--k:2.2}
:root[data-season="winter"] .pt{opacity:calc(.55 + var(--s) * .45)}
:root[data-season="spring"] .pt{left:0;top:calc(var(--x) * .8% - 6%)}
:root[data-season="summer"] .pt{top:auto;bottom:0;left:calc(var(--x) * 1% - 20%)}
@keyframes pt-fall{from{translate:0 -12cqh}to{translate:28cqw 112cqh}}
@keyframes pt-snow{from{translate:0 -8cqh}to{translate:9cqw 108cqh}}
@keyframes pt-drift{0%{translate:-10cqw 0}45%{translate:46cqw 16cqh}100%{translate:112cqw 4cqh}}
@keyframes pt-rise{0%{translate:0 0}100%{translate:38cqw -108cqh}}
@keyframes pt-tumble{from{transform:translateX(-16px) rotate(-35deg) rotateX(0)}to{transform:translateX(16px) rotate(55deg) rotateX(68deg)}}
@keyframes pt-sway{from{transform:translateX(-12px)}to{transform:translateX(12px)}}
@keyframes pt-flutter{from{transform:rotate(-25deg) rotateY(0)}to{transform:rotate(35deg) rotateY(70deg)}}
@keyframes pt-bob{from{transform:translateX(-8px) rotate(-14deg)}to{transform:translateX(8px) rotate(12deg)}}
.pt:nth-child(n+17){display:none}
:root[data-season="winter"] .pt:nth-child(n+17){display:block}
@media (max-width:720px){
  .pt:nth-child(n+11){display:none}
  :root[data-season="winter"] .pt:nth-child(n+11){display:block}
  :root[data-season="winter"] .pt:nth-child(n+19){display:none}
}
:root[data-season="winter"] .bk__c::after{top:calc(100% - 6px);height:17px;
  background:
    radial-gradient(ellipse 62% 100% at 50% 100%,var(--c-snow) 96%,transparent 100%) 0 1px/23px 6px repeat-x,
    radial-gradient(ellipse 60% 100% at 50% 100%,var(--c-snow) 96%,transparent 100%) 11px 3px/31px 4px repeat-x,
    linear-gradient(var(--c-snow) 0 3px,var(--c-shade) 3px 4px,var(--wood) 4px) 0 6px/100% 11px no-repeat;
  box-shadow:0 6px 10px -6px rgba(40,28,16,.5)}
.shelf__rest{position:absolute;right:calc(var(--g) / -2 + 6px);top:calc(100% - 9px);width:22px;height:14px;
  background:var(--c-pt1);-webkit-mask:var(--pt-shape) center/contain no-repeat;mask:var(--pt-shape) center/contain no-repeat;
  rotate:-70deg;pointer-events:none}
:root[data-season="summer"] .shelf__rest{background:var(--ico);rotate:-62deg;width:24px;height:24px;top:calc(100% - 22px)}
@media (prefers-reduced-motion:reduce){
  .fx{display:none}
  .scene *,.mast img,.go__ico use,.sub__big *{animation:none!important;transition:none!important}
}
:root.rm .fx{display:none}
:root.rm .scene *,:root.rm .mast img,:root.rm .go__ico use,:root.rm .sub__big *{animation:none!important;transition:none!important}
