.study-tree{
  --study-tree-growth:0;
  --study-tree-image-scale:0.82;
  --study-tree-ground-scale:0.72;
  position:fixed;
  inset:0;
  z-index:2;
  overflow:hidden;
  pointer-events:none;
  visibility:hidden;
  opacity:0;
  isolation:isolate;
  transition:opacity 0.42s ease,visibility 0s linear 0.42s;
}

:root[data-theme="light"] .study-tree{
  visibility:visible;
  opacity:1;
  transition-delay:0s;
}

.study-tree__art{
  position:absolute;
  right:auto;
  bottom:clamp(-18px,-1.2vh,-6px);
  left:50%;
  width:min(76vw,1000px);
  aspect-ratio:7 / 6;
  opacity:0.94;
  transform-origin:50% 100%;
  transform:translateX(-50%);
  transition:opacity 0.42s ease;
}

.study-tree__image{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:50% 100%;
  opacity:0;
  filter:drop-shadow(0 20px 18px rgba(34,65,43,0.15));
  pointer-events:none;
  user-select:none;
  transform:scale(var(--study-tree-image-scale));
  transform-origin:50% 100%;
  transition:opacity 0.45s ease,transform 1.1s cubic-bezier(0.16,1,0.3,1);
  will-change:opacity;
}

.study-tree__image--base{
  opacity:1;
}

.study-tree__ground{
  position:absolute;
  right:auto;
  bottom:clamp(-12px,-1vh,-4px);
  left:50%;
  width:min(56vw,650px);
  height:26px;
  border-radius:50%;
  opacity:0.45;
  background:radial-gradient(ellipse,rgba(37,72,48,0.28),rgba(37,72,48,0) 70%);
  filter:blur(7px);
  transform:translateX(-50%) scaleX(var(--study-tree-ground-scale));
  transform-origin:50% 50%;
  transition:opacity 0.42s ease,transform 0.42s cubic-bezier(0.16,1,0.3,1);
}

.study-tree__focus-ui,
.study-tree__return{
  position:fixed;
  z-index:4;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.24s ease,visibility 0s linear 0.24s;
}

.study-tree__focus-ui{
  top:clamp(84px,9vh,118px);
  left:50%;
  max-width:min(780px,calc(100vw - 32px));
  padding:10px 22px 12px;
  border-radius:16px;
  background:rgba(249,253,254,0.72);
  box-shadow:0 7px 20px rgba(91,132,146,0.11);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  text-align:center;
  transform:translateX(-50%);
}

.study-tree__countdown{
  margin:0;
  color:rgba(12,48,59,0.98);
  font-size:clamp(1.4rem,3vw,2.25rem);
  font-weight:800;
  line-height:1.4;
  letter-spacing:0.02em;
  text-shadow:0 1px 0 rgba(255,255,255,0.96),0 2px 18px rgba(187,218,231,0.5);
}

.study-tree__return{
  top:clamp(200px,22vh,272px);
  left:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transform:translateX(-50%);
  min-width:74px;
  min-height:34px;
  padding:0 12px;
  border:1px solid rgba(42,99,117,0.54);
  border-radius:999px;
  color:rgba(18,58,70,0.98);
  background:rgba(248,253,254,0.92);
  box-shadow:0 7px 22px rgba(64,108,128,0.22),inset 0 1px 0 rgba(255,255,255,0.92);
  cursor:pointer;
  font:700 0.78rem/1 "Manrope","Noto Sans SC","Segoe UI",sans-serif;
  letter-spacing:0;
  backdrop-filter:blur(10px) saturate(125%);
  -webkit-backdrop-filter:blur(10px) saturate(125%);
}

.study-tree__return::before{
  content:"<";
  margin-right:5px;
  font-size:1rem;
  line-height:1;
}

.study-tree__return:hover{
  border-color:rgba(42,111,127,0.42);
  background:rgba(249,253,254,0.78);
}

.study-tree__return:focus-visible{
  outline:2px solid color-mix(in srgb,var(--accent) 62%,transparent);
  outline-offset:3px;
}

body.is-study-tree-focus .study-tree{
  z-index:4;
}

body.is-study-tree-focus .study-tree__art{
  right:auto;
  bottom:clamp(0px,3vh,34px);
  left:50%;
  width:min(94vw,1097px);
  opacity:1;
  transform:translateX(-50%);
}

body.is-study-tree-focus .study-tree__ground{
  right:auto;
  bottom:clamp(3px,3vh,36px);
  left:50%;
  width:min(76vw,700px);
  transform:translateX(-50%) scaleX(var(--study-tree-ground-scale));
}

body.is-study-tree-focus .study-tree__focus-ui,
body.is-study-tree-focus .study-tree__return{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transition-delay:0s;
}

body.is-study-tree-focus .study-tree__focus-ui,
body.is-study-tree-focus .study-tree__return{
  z-index:81;
}

body.is-study-tree-focus [data-pjax-root],
body.is-study-tree-focus .site-footer,
body.is-study-tree-focus .page-loader,
body.is-study-tree-focus .galaxy-intro,
body.is-study-tree-focus #ambient-glow,
body.is-study-tree-focus #glowfield,
body.is-study-tree-focus .theme-transition-fallback{
  display:none !important;
}

body.is-study-tree-focus #starfield{
  visibility:hidden !important;
}

body.is-study-tree-focus .site-topbar,
body.is-study-tree-focus .ambient-music.is-ready{
  opacity:1;
  pointer-events:auto;
  transform:none;
}

body.is-study-tree-focus .ambient-music.is-ready{
  --music-y:0px;
  --music-scale:1;
}

@media (max-width:720px){
  .study-tree__art{
    right:auto;
    left:50%;
    bottom:-12px;
    width:min(130vw,650px);
  }

  .study-tree__ground{
    right:auto;
    left:50%;
    bottom:-14px;
    width:min(84vw,410px);
  }

  body.is-study-tree-focus .study-tree__art{
    bottom:clamp(18px,4vh,36px);
    width:min(142vw,720px);
  }

  body.is-study-tree-focus .study-tree__ground{
    bottom:10px;
    width:min(80vw,440px);
  }

  .study-tree__focus-ui{
    top:156px;
    left:16px;
    max-width:calc(100vw - 106px);
  }

  .study-tree__countdown{
    max-width:19em;
    font-size:0.9rem;
  }

  .study-tree__return{
    top:208px;
    left:16px;
  }
}

@media (max-width:390px){
  .study-tree__focus-ui{top:168px}
  .study-tree__return{top:220px}
}

@media (prefers-reduced-motion:reduce){
  .study-tree,
  .study-tree__art,
  .study-tree__image,
  .study-tree__ground,
  .study-tree__focus-ui,
  .study-tree__return{
    transition:none;
  }
}