@layer forest {
  .hero.scene-enabled { user-select:none; -webkit-user-select:none; touch-action:pan-y pinch-zoom; }
  .scene-canvas { position:absolute; display:block; max-inline-size:none; pointer-events:none; opacity:0; mix-blend-mode:multiply; transition:opacity .8s ease; }
  .hero-art.scene-ready .scene-canvas { opacity:1; }
  .scene-life { position:absolute; display:block; pointer-events:none; opacity:0; transition:opacity 1s ease; }
  .hero-art.scene-ready .scene-life { opacity:1; }
  .hero-art.scene-ready>img { opacity:0; }
  .scene-guide { font:400 13px/1.6 var(--sans); color:#5f6b5e; margin-block-start:13px; letter-spacing:.02em; }
  .scene-controls { display:flex; gap:20px; align-items:center; justify-content:center; letter-spacing:0; flex-wrap:wrap; }
  .scene-controls button { font:500 14px/1.4 var(--sans); min-block-size:44px; padding:8px 2px; color:#394638; text-decoration:underline; text-underline-offset:5px; text-decoration-color:#a9b19c; }
  .scene-controls button:hover { color:#253329; text-decoration-color:currentColor; }
  .scene-controls button:disabled { opacity:.5; }
  .hero-bottom { column-gap:24px; }
  .hero-bottom>span:nth-of-type(2) { display:none; }
  .hero.scene-holding .scene-guide { color:#34432f; }
  @media(max-width:760px) {
    .scene-guide { font-size:12px; margin-block-start:10px; max-inline-size:285px; margin-inline:auto; }
    .hero-bottom { gap:20px; inset-block-end:17px; }
    .hero-bottom>a { font-size:14px; }
    .scene-controls { gap:15px; }
    .scene-controls button { font-size:13px; }
    .hero-bottom { flex-wrap:wrap; justify-content:center; row-gap:0; }
    .hero-bottom>a { flex-basis:100%; justify-content:center; min-block-size:30px; }
    .scene-controls { gap:22px; }
  }
  @media(prefers-reduced-motion:reduce) { .scene-canvas,.scene-life { transition:none; } }
}