:root{
  color-scheme:light;
  --ink:#15251f;
  --muted:rgba(21,37,31,.58);
  --glass:rgba(247,255,251,.66);
  --line:rgba(21,37,31,.12);
  --leaf:#4d9b67;
  --leaf-dark:#225f43;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#dcefe8}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Mincho ProN","Yu Mincho",serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  touch-action:none;
  overscroll-behavior:none;
}
button,a{font:inherit;color:inherit}
button{border:0}
.app{position:fixed;inset:0;overflow:hidden;background:linear-gradient(#eff8f3,#c9e9e4)}
#world{position:absolute;inset:0;width:100%;height:100%;display:block}
.hud{
  position:absolute;z-index:10;left:0;right:0;top:0;
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:max(14px,env(safe-area-inset-top)) 14px 0;
  pointer-events:none;
  mix-blend-mode:multiply;
}
.home{
  pointer-events:auto;text-decoration:none;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:9px;font-weight:900;letter-spacing:.16em;padding:8px 10px;border:1px solid var(--line);
  border-radius:999px;background:rgba(255,255,255,.28);backdrop-filter:blur(8px)
}
.life{
  opacity:0;transform:translateY(-8px);transition:.35s ease;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  display:flex;align-items:baseline;gap:4px;margin-left:auto;padding:7px 9px;border-radius:999px;
  background:rgba(255,255,255,.26);backdrop-filter:blur(8px)
}
body.playing .life{opacity:1;transform:none}
.life-label{font-size:8px;font-weight:800;letter-spacing:.12em;margin-right:4px;color:var(--muted)}
.life-time{font-size:17px;font-weight:900;letter-spacing:-.04em}
.life-unit{font-size:8px;font-weight:800;color:var(--muted)}
.motion-btn{
  pointer-events:auto;border:1px solid rgba(21,37,31,.16);background:rgba(255,255,255,.5);
  backdrop-filter:blur(10px);border-radius:999px;padding:8px 10px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:9px;font-weight:900;letter-spacing:.05em
}
.layer{
  position:absolute;z-index:8;inset:0;display:flex;flex-direction:column;
  pointer-events:none;opacity:0;visibility:hidden;transition:opacity .65s ease,visibility .65s ease;
}
.layer.is-visible{opacity:1;visibility:visible;pointer-events:auto}
.intro{justify-content:flex-end;padding:0 22px calc(31px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(233,247,239,.03) 0%,rgba(235,247,239,.14) 46%,rgba(239,248,242,.84) 78%,rgba(242,249,244,.96) 100%)}
.intro-copy{margin-bottom:22px}
.eyebrow{
  margin:0 0 11px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:9px;font-weight:950;letter-spacing:.22em;color:rgba(21,37,31,.54)
}
h1{
  margin:0;font-size:clamp(72px,23vw,126px);font-weight:500;line-height:.77;
  letter-spacing:-.09em;text-shadow:0 2px 0 rgba(255,255,255,.35)
}
.lead{margin:24px 0 0;font-size:15px;line-height:1.65;letter-spacing:.02em;color:rgba(21,37,31,.75)}
.primary{
  width:100%;min-height:66px;border-radius:22px;padding:0 21px;
  display:flex;align-items:center;justify-content:space-between;
  background:#183d2e;color:#f7fff9;box-shadow:0 14px 30px rgba(26,77,53,.2);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;font-weight:900;letter-spacing:.03em;
  transition:transform .16s ease,filter .16s ease
}
.primary:active{transform:scale(.985);filter:brightness(.92)}
.primary b{font-size:21px}
.primary.quiet{margin-top:26px;background:rgba(21,37,31,.9)}
.hint{
  margin:11px 0 0;text-align:center;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:9px;font-weight:800;letter-spacing:.08em;color:rgba(21,37,31,.47)
}
.moment{
  position:absolute;z-index:12;left:14px;right:14px;top:calc(max(58px,env(safe-area-inset-top) + 52px));
  display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid rgba(255,255,255,.46);
  background:rgba(241,251,246,.72);backdrop-filter:blur(18px);
  border-radius:18px;box-shadow:0 12px 34px rgba(38,83,61,.09);
  opacity:0;transform:translateY(-12px) scale(.98);pointer-events:none;
  transition:opacity .35s ease,transform .35s ease
}
.moment.show{opacity:1;transform:none}
.moment-mark{width:33px;height:33px;display:grid;place-items:center;border-radius:50%;background:rgba(37,113,71,.1);font-size:15px}
.moment-title{margin:0 0 2px;font-size:12px;font-weight:700}
.moment-text{margin:0;font-size:9px;line-height:1.55;color:rgba(21,37,31,.57);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.ending{
  z-index:14;justify-content:flex-end;padding:24px 21px calc(28px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(223,242,236,.05) 0%,rgba(236,246,241,.42) 32%,rgba(240,247,242,.94) 64%,#f0f6f1 100%)
}
.ending-inner{width:100%;max-width:500px;margin:0 auto}
.ending-reason{
  margin:0 0 22px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:rgba(21,37,31,.48)
}
.poem{display:flex;flex-direction:column;align-items:flex-start;font-size:clamp(31px,9vw,46px);line-height:1.3;letter-spacing:.06em}
.poem span:nth-child(2){margin-left:12vw}
.poem span:nth-child(3){margin-left:33vw}
.result{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:27px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
.result div{padding:12px 10px;border-top:1px solid rgba(21,37,31,.14)}
.result strong{display:block;font-size:22px;letter-spacing:-.05em}
.result span{display:block;margin-top:5px;font-size:8px;font-weight:800;color:rgba(21,37,31,.48);line-height:1.35}
.legacy{text-align:center;margin:10px 0 0;font-size:9px;line-height:1.6;color:rgba(21,37,31,.5);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.gesture{
  position:absolute;z-index:7;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;border-radius:999px;padding:8px 12px;background:rgba(255,255,255,.44);
  backdrop-filter:blur(12px);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:9px;font-weight:800;letter-spacing:.04em;color:rgba(21,37,31,.6);
  opacity:0;transition:.35s ease
}
.gesture-hand{font-size:17px;animation:gesture 1.65s ease-in-out infinite}
body.playing:not(.touched) .gesture{opacity:1}
@keyframes gesture{0%,100%{transform:translate(-5px,4px) rotate(-10deg)}50%{transform:translate(7px,-5px) rotate(4deg)}}
@media(min-width:760px){
  .intro{padding-left:max(6vw,28px);padding-right:max(6vw,28px)}
  .intro-copy,.primary,.hint{width:min(480px,100%)}
  .ending{align-items:center}
  .poem span:nth-child(2){margin-left:70px}.poem span:nth-child(3){margin-left:190px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition-duration:.01ms!important}
}