*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{background:#AEDADA;color:#16240C}
#base,#mid,#fg{position:fixed;display:block}
#base{z-index:0;inset:auto;object-fit:fill;object-position:0 0;max-width:none;max-height:none}
#mid{z-index:1;inset:0;width:100%;height:100%}
/* слой шире окна на 140 точек влево (FGL в scena.js): у левого края висит ветвь, и её листья выходят за край — в кадрах, где окно главной видно со стороны, они обрезались по ровной линии */
#fg{z-index:2;left:-140px;top:0;width:calc(100% + 140px);height:100%;pointer-events:none}
.entry{z-index:3;position:fixed;left:7vw;top:11vh;max-width:min(31rem,86vw);color:#16240C;isolation:isolate;
  font-family:"New York",ui-serif,"Iowan Old Style",Georgia,serif}
/* светлая дымка под текстом: буквы не теряются на небе и воде */
.entry::before{content:"";position:absolute;inset:-14% -14% -16% -34%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(250,252,242,.86),rgba(250,252,242,.62) 52%,rgba(250,252,242,0))}
.word{position:relative;display:inline-block}
.word h1{position:relative;font-style:italic;font-weight:400;font-size:clamp(4.5rem,13vw,11rem);line-height:.82;letter-spacing:-.035em;color:#1B2E0E}
.word h1 span{display:inline-block;opacity:0;translate:0 .18em;animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.tw{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;will-change:transform}   /* свой слой: листья шевелятся каждый кадр, а слово и кнопка под ними заново не рисуются */
.stem{fill:none;stroke:#6b4a4f;stroke-linecap:round;stroke-linejoin:round}
.leaf{fill:#5a9a57;transform-origin:0 0;scale:0;
  animation:pop .6s cubic-bezier(.3,1.5,.5,1) forwards,flutter 3.4s ease-in-out infinite alternate}
.leaf.b{fill:#a9d15a}
.leaf.c{fill:#3f7a66}
.catkin{fill:#f1eed9;stroke:#8a9160;stroke-width:.8;stroke-dasharray:1 1.6;transform-origin:0 0;scale:0;
  animation:pop .7s cubic-bezier(.3,1.5,.5,1) forwards,flutter 4.6s ease-in-out infinite alternate}
.entry .ipa{margin-top:1.3rem;font-size:clamp(1.2rem,2vw,1.7rem);font-weight:500}
.entry .def{margin-top:.3rem;font-size:clamp(1.15rem,1.8vw,1.55rem);font-weight:500}
.entry .what{margin-top:1.5rem;max-width:25rem;font:500 clamp(1.02rem,1.35vw,1.2rem)/1.45 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:#1B2A10}
.entry .ipa,.entry .def,.entry .what,.cta{opacity:0;animation:rise 1s 1.1s ease-out forwards}
.cta{position:relative;display:inline-block;margin-top:1.9rem}
.btn{position:relative;display:inline-block;background:#3A5A1A;color:#F6FBEA;border-radius:999px;padding:.9rem 1.7rem;
  text-decoration:none;font:600 1.05rem -apple-system,system-ui,sans-serif;box-shadow:0 6px 18px rgba(40,70,20,.22);transition:scale .25s,background .25s}
.cta:hover .btn{scale:1.035;background:#46701F}
.cta:hover .leaf{animation-duration:.6s,.9s}
.btn:focus-visible{outline:3px solid #A9CE55;outline-offset:3px}
.btn:active{translate:0 1px;scale:.985}
@keyframes rise{to{opacity:1;translate:0 0}}
@keyframes grow{to{stroke-dashoffset:0}}
@keyframes pop{to{scale:1}}
@keyframes flutter{from{rotate:-7deg}to{rotate:9deg}}
@media (prefers-reduced-motion:reduce){
  .word h1 span,.entry .ipa,.entry .def,.entry .what,.cta{animation:none;opacity:1;translate:0 0}
  .stem{animation:none!important;stroke-dashoffset:0!important}
  .leaf,.catkin{animation:none;scale:1}
}
@media (max-aspect-ratio:1/1){
  .entry{left:clamp(1rem,5vw,3rem);top:clamp(1rem,3vh,2rem);max-width:calc(100vw - clamp(2rem,10vw,6rem))}
  .entry::before{inset:-8% -10% -8% -14%;background:radial-gradient(closest-side,rgba(250,252,242,.92),rgba(250,252,242,.68) 54%,rgba(250,252,242,0))}
  .word h1{font-size:clamp(4.25rem,13vw,6.4rem);line-height:.86}
  .entry .ipa{margin-top:.9rem;font-size:clamp(1.05rem,2.7vw,1.35rem)}
  .entry .def{font-size:clamp(1rem,2.35vw,1.3rem)}
  .entry .what{margin-top:1.1rem;max-width:34rem;font-size:clamp(.98rem,2vw,1.12rem);line-height:1.38}
  .cta{margin-top:1.2rem}
  .btn{padding:.78rem 1.35rem;font-size:1rem}
}
@media (max-width:520px) and (orientation:portrait){
  .word h1{font-size:clamp(4rem,17vw,5rem)}
  .entry .ipa{margin-top:.75rem}
  .entry .what{margin-top:.9rem;font-size:1rem;line-height:1.32}
  .cta{margin-top:1rem}
  .btn{padding:.72rem 1.18rem;font-size:.94rem}
}
@media (min-width:521px) and (max-width:1120px) and (min-aspect-ratio:1/1){
  .entry{left:5vw;max-width:38vw}
  .word h1{font-size:clamp(5rem,11vw,8rem)}
}
@media (orientation:landscape) and (max-height:520px){
  .entry{left:4vw;top:6vh;max-width:42vw}
  .word h1{font-size:clamp(4rem,12vw,7rem)}
  .entry .what{margin-top:1rem}
  .cta{margin-top:1.15rem}
}
/* свет поверх сцены: тёплый «золотой час» и пасмурность. Текст остаётся над ними и не окрашивается */
#warm,#cool{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0}
#warm{mix-blend-mode:soft-light;background:radial-gradient(130% 100% at var(--sunx,44%) var(--suny,58%),rgba(255,214,120,1),rgba(255,176,84,.8) 42%,rgba(244,140,92,.5))}
#cool{mix-blend-mode:multiply;background:linear-gradient(rgba(150,164,176,.5),rgba(168,180,186,.34))}
/* навигация: маленькая, на светлой подложке, чтобы не спорить со сценой */
.nav{z-index:4;position:fixed;right:max(16px,2vw);top:max(12px,2vh);display:flex;gap:.2rem;padding:.25rem .35rem;border-radius:999px;background:rgba(250,252,242,.78);
  font:600 .86rem -apple-system,BlinkMacSystemFont,system-ui,sans-serif}
.nav a{padding:.36rem .72rem;border-radius:999px;color:#22301a;text-decoration:none}
.nav a:hover{background:rgba(255,255,255,.9)}
.nav a[aria-current="page"]{background:#3A5A1A;color:#F6FBEA}
.nav a:focus-visible{outline:3px solid #A9CE55;outline-offset:2px}
@media (max-aspect-ratio:1/1){.nav{position:absolute;top:.5rem;right:.6rem;font-size:.78rem}.nav a{padding:.32rem .5rem}.entry{margin-top:2.5rem}}
/* музыка: справа внизу значок ноты; по нажатию над ним открывается плеер — название и автор, «играть/пауза», громкость */
.snd{z-index:4;position:fixed;right:max(16px,2vw);bottom:max(14px,2.2vh);width:2.6rem;height:2.6rem;border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:rgba(250,252,242,.88);color:#2B3A1C;box-shadow:0 4px 14px rgba(30,60,20,.2)}
.snd svg,.player svg{width:1.2rem;height:1.2rem;fill:currentColor}
.snd.on{background:#3A5A1A;color:#F6FBEA}
.snd:focus-visible,.player button:focus-visible,.player a:focus-visible,.vr:focus-visible{outline:3px solid #A9CE55;outline-offset:2px}
.player{z-index:4;position:fixed;right:max(16px,2vw);bottom:calc(max(14px,2.2vh) + 3.2rem);display:flex;align-items:center;gap:.6rem;padding:.45rem .6rem;border-radius:999px;
  background:rgba(250,252,242,.94);box-shadow:0 6px 20px rgba(30,60,20,.22);font:500 .8rem/1.25 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:#22301a;max-width:calc(100vw - 32px)}
.player[hidden]{display:none}
.player button{border:0;background:transparent;color:#2B3A1C;cursor:pointer;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;flex:none}
.player .pp{background:#3A5A1A;color:#F6FBEA;position:relative}
/* музыка загружается: вокруг кнопки «играть» и значка ноты бежит дуга */
.muzgruz .player .pp::after,.muzgruz .snd::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(58,90,26,.2);border-top-color:#3A5A1A;animation:muzkrug .8s linear infinite}
@keyframes muzkrug{to{rotate:360deg}}
.player .ti{min-width:0;display:flex;flex-direction:column}
.player .ti b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player .ti a{color:#4a5a3c;text-decoration:none;font-size:.72rem;white-space:nowrap}
.player .ti a:hover{text-decoration:underline}
.player .vol{position:relative;display:flex;align-items:center}
.player .vr{width:5.5rem;margin:0 .3rem 0 .2rem;accent-color:#3A5A1A}