@font-face { font-family: Jua; src: url("fonts/jua-Jua-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Gowun Dodum"; src: url("fonts/gowundodum-GowunDodum-Regular.ttf") format("truetype"); font-display: swap; }
/* 다시 우리 · 햇살이 머무는 정원 */ @import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&family=Noto+Sans+KR:wght@400;500;600;700&display=swap');
:root {
  --sky:#f8f7f2;
  --paper:#fffefa;
  --ink:#344b40;
  --muted:#788279;
  --line:#e4e6dc;
  --star:#ddb667;
  --rose:#ad7669;
  --soft:#f0f2e9;
  --display:'Noto Sans KR',sans-serif;
  --body:'Noto Sans KR',sans-serif;
  --serif:'Gowun Batang',serif
}
[hidden] {
  display:none!important
}
body {
  background:var(--sky);
  font-size:14px;
  letter-spacing:-.025em
}
button {
  font-size:14px;
  font-weight:500
}
h1,h2,h3 {
  font-weight:600
}
button,a,input,textarea {
  -webkit-tap-highlight-color:transparent
}
button,a {
  touch-action:manipulation
}
button {
  transition:background .2s,box-shadow .2s,transform .2s
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible {
  outline:3px solid #b3914d;
  outline-offset:4px
}
button:hover {
  filter:brightness(.985)
}
.app {
  max-width:1100px;
  padding:28px 32px 110px;
  gap:28px
}
.brand {
  align-items:center;
  gap:20px;
  padding-bottom:22px;
  border-bottom:1px solid var(--line)
}
.brand-lockup {
  display:flex;
  align-items:center;
  gap:10px
}
.brand-mark {
  position:relative;
  width:40px;
  height:40px;
  flex:none
}
.brand-mark img {
  position:absolute;
  top:50%;
  left:50%;
  width:150%;
  height:150%;
  object-fit:contain;
  transform:translate(-50%,-56%)
}
.brand-text {
  display:flex;
  flex-direction:column;
  gap:3px
}
.brand h1 {
  font-family:var(--serif);
  font-weight:700;
  font-size:25px;
  line-height:1.1;
  letter-spacing:-.07em
}
.brand-text span {
  font-size:10px;
  line-height:1.3;
  letter-spacing:.08em
}
.brand-caption {
  margin-left:auto;
  font-size:12px!important
}
.profile-button {
  width:40px;
  height:40px;
  flex:none;
  border:1px solid var(--line);
  border-radius:50%;
  background:#eeeede;
  overflow:hidden;
  padding:4px
}
#profile-pet {
  display:block;
  width:100%;
  height:100%
}
.profile-button .example-pet-art {
  object-fit:contain;
  transform:scale(1.18)
}
.profile-button :where(#profile-pet) > svg,.profile-button :where(#profile-pet) > img {
  width:100%;
  height:100%;
  object-fit:cover
}
.eyebrow {
  display:block;
  color:#7f8e79;
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em
}
.view {
  gap:24px
}
#view-park.on {
  display:grid;
  grid-template-columns:minmax(0,1fr) 258px;
  align-items:start;
  gap:20px
}
.reunion-hero {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  min-height:260px;
  background:#e9edde;
  border:1px solid #e3e8d7;
  overflow:hidden;
  border-radius:24px;
  position:relative
}
.hero-copy {
  position:relative;
  padding:32px 36px;
  z-index:1
}
.hero-copy h2 {
  font-family:var(--serif);
  font-size:34px;
  line-height:1.5;
  letter-spacing:-.065em;
  font-weight:400;
  margin:13px 0 10px
}
.hero-copy p {
  font-size:12px;
  color:#71806f;
  margin:0 0 24px;
  line-height:1.8
}
.btn {
  border-radius:12px;
  padding:13px 18px;
  font-weight:500;
  background:#edf0e5;
  min-height:44px;
  line-height:1.5
}
.btn.primary {
  background:#405d49;
  color:#fff;
  box-shadow:0 4px 10px #3b594513
}
.hero-copy .btn {
  display:inline-flex;
  align-items:center;
  gap:32px;
  font-size:12px
}
.hero-garden {
  position:relative;
  align-self:stretch;
  display:flex;
  justify-content:center;
  align-items:center;
  isolation:isolate
}
.reunion-hero.has-companion .hero-garden::before {
  content:"";
  position:absolute;
  inset:0 0 0 -32%;
  background:url("hero-remembrance-garden.png") right bottom / cover no-repeat;
  mask-image:linear-gradient(to right, transparent, #000 30%);
  z-index:-1
}
.hero-pet {
  width:158px;
  height:180px;
  display:flex;
  align-items:flex-end;
  filter:drop-shadow(0 10px 14px #53634915);
  z-index:2
}
.hero-pet svg {
  width:100%;
  height:100%
}
.garden-caption {
  position:absolute;
  bottom:22px;
  left:0;
  right:0;
  text-align:center;
  font-family:var(--serif);
  font-size:12px;
  color:#667b5e;
  z-index:3
}
.note {
  grid-column:1/-1;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  padding:0 2px 14px;
  font-size:11px;
  gap:8px;
  color:#839078
}
.note>span {
  display:flex;
  align-items:center;
  gap:5px
}
.demo-dot {
  width:5px;
  height:5px;
  background:#94a286;
  border-radius:50%;
  margin-right:3px
}
.note button {
  font-size:11px;
  text-decoration:none;
  color:#6b7b5d;
  padding:5px
}
.yardwrap {
  gap:14px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--paper)
}
.hall-head {
  align-items:center
}
.hall-head h2 {
  font-size:19px;
  font-weight:600;
  letter-spacing:-.055em
}
.hall-head p {
  font-size:10px;
  line-height:1.7;
  margin-top:5px
}
.visit {
  font-size:9px;
  padding:5px 8px;
  background:#f1f4e9;
  color:#728363
}
.visit::before {
  width:5px;
  height:5px;
  background:#8fa66d;
  margin-right:4px
}
.yard {
  height:420px;
  border-radius:14px;
  box-shadow:none;
  border:1px solid #dbe7ce
}
.yardwrap>.hint {
  font-size:10px;
  line-height:1.8;
  color:#8c9485;
  text-align:center
}
.decobar {
  gap:7px
}
.decobar button {
  border:1px solid #e9ebdf!important;
  background:#fafbf5!important;
  border-radius:12px!important;
  padding:8px 3px!important;
  font-size:10px!important;
  gap:3px!important
}
.decobar .di {
  width:28px!important;
  height:28px!important
}
.world .lbl {
  font-family:var(--body);
  font-size:11px;
  background:#435644d9;
  padding:4px 10px
}
.av .tag {
  font-family:var(--body);
  font-size:10px;
  font-weight:500
}
.av.me .tag {
  background:#e6c789
}
.yact {
  border:1px solid #dce3d2;
  border-radius:12px;
  box-shadow:0 4px 16px #263c2a18
}
.yact button {
  font-size:11px;
  padding:10px
}
.yact .tx {
  font-size:11px
}
.yact .tx b {
  font-size:13px
}
.memory-panel {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:20px;
  padding:22px 20px;
  background:#fffefa;
  text-align:center;
  min-width:0
}
.section-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  font-size:11px;
  color:#8c957e;
  padding-bottom:18px;
  border-bottom:1px solid var(--line)
}
.section-label>span:last-child {
  font-size:20px;
  color:#c2a66c
}
.memory-portrait {
  width:108px;
  height:128px;
  margin-top:15px;
  border-radius:60px 60px 6px 6px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:#f3eddd;
  border:5px solid #fff;
  outline:1px solid #e7dfca;
  overflow:hidden
}
.memory-portrait > svg {
  width:100%;
  height:auto
}
.memory-portrait img {
  width:100%;
  height:100%;
  object-fit:cover
}
.memory-portrait .example-pet-art {
  object-fit:contain;
  transform:translateY(5%) scale(1.08)
}
.memory-panel h3 {
  font-family:var(--serif);
  font-size:25px;
  margin-top:9px
}
.memory-dates {
  font-size:9px;
  color:#9a9e91;
  letter-spacing:.03em;
  margin:0
}
.memory-line {
  font-family:var(--serif);
  font-size:13px;
  color:#8c947d;
  line-height:1.9;
  margin:11px 0
}
.memory-panel>.btn {
  display:flex;
  justify-content:space-between;
  width:100%;
  font-size:11px
}
.letter-preview {
  margin-top:16px;
  padding-top:22px;
  border-top:1px solid var(--line);
  text-align:left;
  width:100%
}
.letter-preview .eyebrow {
  font-size:9px
}
.letter-preview p {
  font-family:var(--serif);
  font-size:13px;
  line-height:2;
  overflow-wrap:anywhere
}
.letter-sign {
  display:block;
  text-align:right;
  color:#a3a790;
  font-size:9px
}
.text-link {
  border:0;
  background:transparent;
  padding:12px 0;
  color:#728366;
  font-size:12px;
  min-height:44px
}
.memory-panel>.text-link {
  margin-top:10px;
  font-size:10px
}
.hall {
  grid-column:1/-1;
  padding:24px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  gap:18px
}
.wall {
  background:#d9d4c7;
  border-radius:14px;
  padding:18px;
  gap:14px;
  box-shadow:inset 0 2px 12px #574c2a0b;
  grid-template-columns:repeat(6,1fr)
}
.floor {
  max-width:400px
}
.floor button {
  background:#efeee6;
  border-radius:9px;
  font-size:12px;
  padding:12px
}
.floor button[aria-pressed=true] {
  background:#607453
}
.niche {
  border-radius:6px;
  box-shadow:0 2px 4px #574c2a15
}
.niche .plate b {
  font-family:var(--body);
  font-size:12px
}
.niche .plate {
  padding:7px 3px
}
.niche .plate span {
  font-size:9px
}
.niche.me {
  box-shadow:0 0 0 2px #b89655
}
.niche .mytag {
  font-family:var(--body);
  font-size:9px;
  background:#778861
}
.mine {
  background:#edf0e5;
  color:var(--ink);
  padding:16px
}
.mine small {
  color:#8e987e
}
.mine .tag {
  background:#76875f;
  font-size:9px
}
.mine .go {
  background:#dce5cb;
  color:#526640;
  font-size:11px
}
.mine b {
  font-size:16px
}
.head {
  padding:12px 0 4px;
  gap:10px
}
.head h2 {
  font-family:var(--serif);
  font-size:30px;
  line-height:1.6;
  font-weight:400
}
.head p {
  font-size:13px
}
.meter {
  height:5px;
  background:#e6e8dd
}
.meter i {
  background:#9bac80
}
.grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px
}
.bk {
  padding:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:none;
  gap:0;
  align-items:stretch;
  text-align:left
}
.bk:hover {
  transform:translateY(-3px);
  box-shadow:0 10px 24px #47583c12
}
.bk-art {
  display:block;
  width:100%;
  height:150px;
  position:relative;
  overflow:hidden;
  background:#e4eadc
}
.bk-art>svg {
  width:100%;
  height:100%;
  display:block;
  opacity:.83
}
.bk-pet {
  position:absolute;
  width:86px;
  height:90px;
  bottom:6px;
  left:calc(50% - 43px);
  filter:drop-shadow(0 4px 4px #0001)
}
.bk-pet > svg {
  width:100%;
  height:100%
}
.bk-pet img {
  width:76px;
  height:84px;
  border-radius:45px 45px 6px 6px;
  object-fit:cover
}
.bk .num {
  left:12px;
  top:10px;
  color:#536a51;
  font-family:var(--serif);
  font-size:13px;
  background:#fff9;
  padding:3px 8px;
  border-radius:20px;
  z-index:1
}
.bk-body {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  padding:16px
}
.bk .t {
  font-family:var(--body);
  font-size:13px;
  font-weight:500;
  line-height:1.7
}
.bk .st,.bk.play .st {
  padding:0;
  background:none;
  color:#8b9879;
  font-size:10px;
  width:100%;
  display:flex;
  justify-content:space-between
}
.bk.done {
  box-shadow:0 0 0 1px #8b9c6f
}
.bk.done .st {
  background:none;
  color:#60734a
}
.seg {
  padding:5px;
  background:#eeefe5;
  border-radius:12px;
  max-width:420px
}
.seg button {
  font-size:13px;
  border-radius:9px;
  min-height:42px
}
.seg button[aria-selected=true] {
  background:#fffefa;
  box-shadow:0 2px 8px #53654008
}
.agrid {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px
}
.ac {
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:none;
  background:var(--paper)
}
.ac b {
  font-size:13px
}
.ac.empty {
  min-height:250px;
  background:#f0f2e8;
  border:1px dashed #d0d8c1
}
.ac.empty .im {
  font-family:var(--serif);
  color:#93a07f;
  background:transparent;
  font-size:45px
}
.ac.empty b {
  font-family:var(--serif);
  font-weight:400
}
.atag {
  background:#e9eddc;
  color:#829270
}
.canvasbox {
  max-width:420px;
  margin:auto
}
.frames,.row,.layersel {
  max-width:520px;
  width:100%;
  margin-left:auto;
  margin-right:auto
}
.sheet {
  max-width:500px;
  padding:28px;
  border-radius:24px 24px 0 0;
  background:#fffefa;
  box-shadow:0 -10px 80px #1c301522;
  padding-bottom:max(28px,env(safe-area-inset-bottom))
}
.modal {
  background:#27362acc;
  backdrop-filter:blur(5px)
}
.sheet h2 {
  font-size:22px;
  line-height:1.65
}
.sheet .hint {
  font-size:12px;
  line-height:1.9
}
.sheet input,.sheet textarea {
  background:#f8f9f3;
  border-color:var(--line);
  font-size:14px;
  min-height:44px
}
.sheet .btn.star {
  background:#617954;
  color:#fff
}
.stepn {
  background:#eff2e5!important;
  color:#82916d!important;
  font-size:10px!important;
  align-self:flex-start
}
.lk .sw button {
  width:28px;
  height:28px
}
.lk .opts button {
  border-radius:10px!important
}
.welcome-intro {
  text-align:center;
  padding:22px 4px 8px;
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:stretch
}
.welcome-intro h2 {
  font-family:var(--serif);
  font-size:28px;
  font-weight:400
}
.welcome-intro p {
  color:#8c9580;
  font-size:13px;
  line-height:2.1;
  margin:0 0 8px
}
.welcome-pet {
  width:125px;
  height:145px;
  border-radius:80px 80px 12px 12px;
  background:#edf0df;
  margin:5px auto;
  display:grid;
  place-items:center;
  overflow:hidden
}
.welcome-pet .welcome-pet-art {
  width:122px;
  height:122px;
  margin-top:14px;
  object-fit:contain;
  border-radius:0;
  box-shadow:none
}
.toast {
  border-radius:12px;
  font-size:12px;
  line-height:1.7;
  max-width:90%;
  white-space:normal;
  text-align:center;
  background:#40533deF;
  padding:12px 20px
}
.scene {
  background:#33473d
}
.scene .top,.scene .sh,.scene .foot {
  max-width:520px
}
.scene .foot {
  padding-bottom:max(20px,env(safe-area-inset-bottom))
}
.scene .sh,.scene .foot p {
  color:#e0e8d5
}
.scene .stage {
  box-shadow:0 20px 60px #14221833
}
.nav-brand,.nav-note {
  display:none
}
nav.tabs {
  border-color:var(--line);
  background:#fffefaed;
  backdrop-filter:blur(18px)
}
nav.tabs .in {
  max-width:580px
}
nav.tabs a {
  font-family:var(--serif);
  font-size:12px;
  padding:10px 12px max(11px,env(safe-area-inset-bottom));
  gap:4px;
  font-weight:700;
  position:relative;
  color:#697460
}
nav.tabs a > .nav-painted-icon {
  display:block;
  flex:none;
  width:28px;
  height:28px;
  overflow:hidden;
  opacity:.82
}
nav.tabs a[aria-current=page] {
  color:#3e5640
}
nav.tabs a[aria-current=page] .nav-painted-icon {
  opacity:1
}
nav.tabs a[aria-current=page]::before {
  content:'';
  width:28px;
  height:3px;
  border-radius:3px;
  background:#7a9165;
  position:absolute;
  top:0
}
@media(min-width:1200px) {
  .app {
    margin-left:240px;
    margin-right:auto;
    max-width:1180px;
    padding:34px 56px 60px;
    gap:28px
  }
  nav.tabs {
    inset:0 auto 0 0;
    width:240px;
    flex-direction:column;
    justify-content:flex-start;
    border-top:0;
    border-right:1px solid var(--line);
    background:#f2f3e9;
    padding:48px 24px 28px
  }
  .nav-brand {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    padding-bottom:44px
  }
  .nav-brand>span {
    font-size:44px;
    line-height:1;
    color:#81976b
  }
  .nav-brand b {
    font-family:var(--serif);
    font-size:28px;
    font-weight:700;
    letter-spacing:-.07em
  }
  .nav-brand small {
    font-size:10px;
    letter-spacing:.02em;
    color:#8e9a7d
  }
  .nav-note {
    display:block;
    margin-top:auto;
    color:#909a81;
    text-align:center;
    font-size:11px;
    line-height:2
  }
  .nav-note>span {
    font-size:25px;
    color:#acb69b
  }
  .nav-note small {
    font-size:8px;
    letter-spacing:.15em;
    color:#a3ab98
  }
  nav.tabs .in {
    display:flex;
    flex-direction:column;
    gap:10px
  }
  nav.tabs a {
    flex-direction:row;
    gap:13px;
    justify-content:flex-start;
    min-height:52px;
    padding:14px 20px;
    border-radius:12px;
    font-size:13px
  }
  nav.tabs a[aria-current=page] {
    background:#e2e8d5;
    font-weight:600
  }
  nav.tabs a[aria-current=page]::before {
    display:none
  }
  .brand-lockup {
    display:none
  }
  .brand {
    padding-bottom:20px
  }
  .brand::before {
    content:'우리의 기억을 돌보는 시간';
    font-family:var(--serif);
    font-size:15px;
    color:#839077
  }
  .brand-caption {
    margin-left:auto
  }
  .sheet {
    align-self:center;
    border-radius:24px;
    max-height:88dvh
  }
  .yard {
    height:440px
  }
  .hero-copy h2 {
    font-size:38px
  }
}
@media(min-width:1600px) {
  .app {
    margin-left:max(240px,calc((100vw - 1050px)/2));
    max-width:1130px
  }
}
@media(max-width:850px) {
  .app {
    padding:22px 22px 110px;
    gap:22px
  }
  .brand-caption {
    display:none
  }
  .profile-button {
    margin-left:auto
  }
  #view-park.on {
    grid-template-columns:minmax(0,1fr) 220px;
    gap:14px
  }
  .hero-copy {
    padding:26px
  }
  .hero-copy h2 {
    font-size:30px
  }
  .hero-copy .btn {
    gap:15px
  }
  .hero-pet {
    width:130px;
    height:150px
  }
  .memory-panel {
    padding:18px 14px
  }
  .yardwrap {
    padding:16px
  }
  .yard {
    height:380px
  }
  .hall-head {
    flex-wrap:wrap;
    gap:7px
  }
  .wall {
    grid-template-columns:repeat(4,1fr)
  }
  .grid,.agrid {
    gap:12px
  }
  .bk-art {
    height:130px
  }
  .bk-body {
    padding:12px
  }
  .bk .t {
    font-size:12px
  }
}
@media(max-width:600px) {
  .app {
    padding:18px 18px calc(92px + env(safe-area-inset-bottom));
    gap:20px
  }
  .brand {
    padding-bottom:16px
  }
  .brand h1 {
    font-size:23px
  }
  .brand-mark {
    width:34px;
    height:34px
  }
  .brand-lockup {
    gap:7px
  }
  .brand-text span {
    font-size:9px
  }
  .profile-button {
    width:36px;
    height:36px
  }
  #view-park.on {
    display:flex;
    flex-direction:column;
    gap:16px
  }
  .reunion-hero {
    width:100%;
    min-height:242px;
    border-radius:20px;
    grid-template-columns:1.3fr .85fr
  }
  .hero-copy {
    padding:25px 0 24px 22px
  }
  .hero-copy .eyebrow {
    font-size:9px
  }
  .hero-copy h2 {
    font-size:27px;
    line-height:1.55;
    margin:14px 0 10px
  }
  .hero-copy p {
    font-size:10px;
    line-height:1.9;
    max-width:185px;
    margin-bottom:19px
  }
  .hero-copy .btn {
    font-size:10px;
    padding:11px 12px;
    gap:14px;
    min-height:40px
  }
  .hero-garden {
    margin-left:-12px
  }
  .hero-pet {
    width:108px;
    height:125px;
    margin-top:15px
  }
  .garden-caption {
    font-size:9px;
    bottom:22px
  }
  .note {
    width:100%;
    padding-bottom:13px;
    font-size:10px
  }
  .note button {
    font-size:10px
  }
  .yardwrap {
    width:100%;
    padding:16px;
    gap:12px;
    border-radius:18px
  }
  .hall-head {
    flex-wrap:nowrap;
    align-items:flex-start
  }
  .hall-head h2 {
    font-size:18px
  }
  .hall-head p {
    font-size:9px;
    max-width:210px
  }
  .visit {
    font-size:8px;
    margin-top:2px
  }
  .yard {
    height:clamp(300px,48dvh,420px)
  }
  .decobar .di {
    width:25px!important;
    height:25px!important
  }
  .decobar button {
    font-size:9px!important
  }
  .memory-panel {
    width:100%;
    display:grid;
    grid-template-columns:76px 1fr;
    gap:5px 18px;
    text-align:left;
    padding:20px
  }
  .section-label {
    grid-column:1/-1;
    margin-bottom:9px;
    padding-bottom:12px;
    font-size:10px
  }
  .memory-portrait {
    grid-column:1;
    grid-row:2/6;
    width:72px;
    height:86px;
    margin:0
  }
  .memory-panel h3 {
    font-size:22px;
    margin:0;
    align-self:end
  }
  .memory-dates {
    font-size:8px
  }
  .memory-line {
    display:none
  }
  .memory-panel>.btn {
    font-size:10px;
    min-height:36px;
    padding:9px 12px
  }
  .letter-preview {
    grid-column:1/-1;
    margin-top:15px;
    padding-top:18px
  }
  .letter-preview p {
    font-size:12px;
    line-height:1.9
  }
  .memory-panel>.text-link {
    grid-column:1/-1;
    text-align:left;
    margin:0;
    padding-bottom:0
  }
  .head {
    gap:8px
  }
  .head h2 {
    font-size:26px
  }
  .head .eyebrow {
    font-size:10px
  }
  .head p {
    font-size:12px
  }
  .grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:13px
  }
  .bk-art {
    height:135px
  }
  .bk-body {
    padding:13px;
    gap:9px
  }
  .bk .t {
    font-size:12px
  }
  .bk .st {
    font-size:9px
  }
  .bk-pet {
    width:80px;
    height:85px;
    left:calc(50% - 40px)
  }
  .agrid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px
  }
  .hall {
    padding:16px;
    width:100%
  }
  .wall {
    padding:12px;
    gap:9px;
    grid-template-columns:repeat(4,minmax(0,1fr))
  }
  .niche .plate b {
    font-size:10px
  }
  .niche .plate span {
    font-size:8px
  }
  .niche .mytag {
    font-size:8px
  }
  .sheet {
    padding:24px 20px;
    max-height:92dvh
  }
  .scene .top h2 {
    font-size:16px
  }
  .scene .sh {
    font-size:12px
  }
  .scene .top button {
    font-size:12px
  }
  .yact {
    flex-wrap:wrap;
    gap:6px
  }
  .yact .tx {
    min-width:50%
  }
  .yact .bt {
    margin-left:auto
  }
  .toast {
    bottom:100px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}
.yard-locations {
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap
}
.yard-locations button {
  padding:7px 10px;
  font-size:10px;
  border:1px solid #e1e7d8;
  border-radius:8px;
  background:#f8faf3;
  min-height:36px;
  color:#6d805c
}
.yard-locations #hall-enter {
  background:#6d805c;
  color:#fff;
  border-color:#6d805c;
  margin-right:auto
}
.yard-locations button:hover {
  background:#e7eddb;
  color:#4a6240
}
.yard-locations button:focus-visible {
  outline-offset:2px
}
@media(max-width:600px) {
  .yard-locations {
    gap:5px
  }
  .yard-locations button {
    font-size:9px;
    padding:6px 8px
  }
  .yard-locations #hall-enter {
    margin-right:0
  }
  .sheet .row {
    flex-wrap:wrap
  }
  .sheet .row label {
    min-width:125px;
    flex:1
  }
  .sheet .row input {
    min-width:0;
    width:100%
  }
}
.seg button[aria-selected="true"] {
  color:#40583e
}
@media(min-width:601px) {
  .bk .t {
    font-size:14px
  }
  .bk .st {
    font-size:11px
  }
  .hall-head p {
    font-size:11px
  }
  .memory-dates {
    font-size:10px
  }
  .brand-caption {
    font-size:12px!important
  }
}

/* 재회 · 햇살 아래 함께 머무는 시간 */
.scene.reunion-scene {background:#edf0e6;color:#344b40}
.reunion-scene .top {max-width:560px;padding-top:max(16px,env(safe-area-inset-top))}
.reunion-scene .top h2 {font-family:var(--serif);font-size:21px;font-weight:700}
.reunion-scene .top button {background:#dfe5d6;color:#405743}
.reunion-scene .sh {color:#66765d;min-height:54px;max-width:500px;font-size:13px;line-height:1.8;padding:12px 24px}
.reunion-scene .stage {box-shadow:0 15px 55px #4d67401c;border:1px solid #ffffffa6;border-radius:140px 140px 24px 24px}
.reunion-scene .foot {max-width:500px;padding-bottom:max(20px,env(safe-area-inset-bottom));gap:14px}
.reunion-scene .foot .meter {display:none}
.reunion-scene .foot p {color:#53634c;font-family:var(--serif);font-size:15px;min-height:25px}
.reunion-actions {display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.reunion-actions button {border:1px solid #cdd6c2;border-radius:30px;background:#fffdf5;color:#4d6345;padding:11px 15px;min-height:44px;font-size:13px}
.reunion-actions button:nth-child(2) {background:linear-gradient(#5d7755,#496344);color:#fff;border-color:#496344;box-shadow:0 2px 5px #42593c26}
.bucket-filters button:focus-visible {outline:2px solid #526b4b;outline-offset:2px}
.reunion-actions button:disabled {opacity:.45;cursor:default}
.reunion-note {position:absolute;top:25%;left:0;right:0;text-align:center;font-family:var(--serif);font-size:13px;letter-spacing:.06em;color:#596c4d;pointer-events:none}
.garden-dust {position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 25% 35%,#fff8cf 0 2px,transparent 3px),radial-gradient(circle at 75% 40%,#fff8cf 0 2px,transparent 3px),radial-gradient(circle at 55% 55%,#fff8cf 0 1px,transparent 3px);animation:garden-drift 8s ease-in-out infinite alternate}
.reunion-dog:before {content:"";position:absolute;left:22%;right:15%;height:7%;bottom:2%;background:#475e3e26;filter:blur(3px);border-radius:50%}
.reunion-dog.breathing .body-svg {transform-origin:50% 95%;animation:pet-breathe 3.7s ease-in-out infinite}
.reunion-dog .pet-head {transform-origin:100px 120px;transition:transform .65s ease-in-out}
.reunion-dog.noticing .pet-head {transform:rotate(-12deg)}
.reunion-dog.leaning .pet-head {transform:translate(-5px,4px) rotate(-9deg)}
.reunion-dog.resting .body-svg {transform-origin:50% 95%;animation:pet-rest 4.5s ease-in-out infinite}
.reunion-dog.resting .tail {animation-duration:2.6s}
.reunion-dog.walk .body-svg {animation:reunion-step .32s ease-in-out infinite alternate}
@keyframes pet-breathe {0%,100%{transform:scale(1,1)}50%{transform:scale(1.012,1.025)}}
@keyframes pet-rest {0%,100%{transform:translate(-4%,3%) rotate(-6deg) scale(1,.94)}50%{transform:translate(-4%,3%) rotate(-6deg) scale(1.012,.96)}}
@keyframes reunion-step {from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-4%) rotate(3deg)}}
@keyframes garden-drift {from{transform:translateY(0);opacity:.4}to{transform:translateY(-18px);opacity:1}}
@media(prefers-reduced-motion:reduce){.garden-dust,.reunion-dog.breathing .body-svg,.reunion-dog.walk .body-svg,.reunion-dog.resting .body-svg,.reunion-dog .tail {animation:none!important}.reunion-dog .pet-head {transition:none}.reunion-dog.resting .body-svg {transform:translate(-4%,3%) rotate(-6deg) scale(1,.94)}}
@media(max-height:650px){.reunion-scene .sh {min-height:0;padding:5px 18px}.reunion-scene .foot {padding-top:8px;gap:6px}.reunion-note {font-size:11px}}

/* 우리 아이의 체형과 버릇 */
.identity-options {display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 16px}
.identity-options button {background:#f5f5ed;border:1px solid #dce2d4;border-radius:18px;padding:10px 13px;color:#57684e;min-height:44px;font-size:13px}
.identity-options button[aria-pressed=true] {background:#526b4b;border-color:#526b4b;color:#fff}
.preview-directions {justify-content:center}
.lk .lkpv {background:radial-gradient(ellipse at 50% 75%,#e2e9d6,transparent 65%),#f8f8f0;border-radius:22px}
.reunion-dog.walk .pet-leg {transform-box:fill-box;transform-origin:50% 0;animation:pet-stride .38s ease-in-out infinite alternate}
.reunion-dog.walk .pet-leg.rear {animation-direction:alternate-reverse}
.reunion-dog.walk .pet-leg.leg-far {animation-delay:-.38s}
@keyframes pet-stride {from{transform:rotate(-17deg)}to{transform:rotate(17deg)}}
@media(prefers-reduced-motion:reduce){.reunion-dog.walk .pet-leg {animation:none!important}}
.identity-preview {position:sticky;top:-20px;z-index:3;display:flex;align-items:center;justify-content:center;gap:30px;background:#fffefaf5;padding:12px;border-bottom:1px solid #e4e6dc;backdrop-filter:blur(12px)}
.identity-preview .lkpv {width:130px;height:130px;margin:0;flex:none}
.identity-preview .preview-directions {flex-direction:column;gap:4px;margin:0}
.identity-preview .preview-directions button {min-height:32px;padding:6px 14px;font-size:12px}

/* 공 하나와, 함께 뛰어놀 오후 */
.ball-scene .stage {border-radius:100px 100px 24px 24px}
.ball-scene .sh {min-height:56px}
.ball-scene .person {filter:drop-shadow(0 5px 3px #40523820)}
.ball-scene .person .pf {transform-origin:50% 90%;transition:transform .6s}
.ball-scene .person.welcoming .pf {transform:translateY(5%) rotate(8deg) scaleY(.93)}
.ball-dog .body-svg {filter:drop-shadow(1px 4px 3px #58472c18)}
.ball-dog.face-right .flip {transform:scaleX(-1)}
.ball-dog .pet-head {transform-origin:100px 120px}
.ball-dog:not(.walk) .pet-head {transform:translate(10px,14px) scale(.9)}
.ball-dog.sniffing .pet-head {transform:translate(5px,20px) rotate(-18deg) scale(.9)}
.ball-dog.play-bow .body-svg {animation:play-invitation .55s ease-in-out infinite alternate}
.ball-dog .mouthball {left:10%;top:46%;width:13%;height:13%;background:none;pointer-events:none}
.ball-scene .keepsake-ball {z-index:4;filter:drop-shadow(0 2px 2px #34452e38);pointer-events:none;will-change:transform}
@keyframes play-invitation {from{transform:rotate(-5deg) translateY(2%)}to{transform:rotate(2deg) translateY(-2%)}}
@media(prefers-reduced-motion:reduce){.ball-dog.play-bow .body-svg {animation:none}.ball-scene .person .pf {transition:none}}

/* 버킷리스트: 할 일 목록보다, 함께할 시간 */
.bucket-intro {padding:20px 24px;border:1px solid #dce3d4;border-radius:18px;background:#eef2e7;color:#53654b}
.bucket-intro>span {font-family:var(--serif);font-size:18px;font-weight:700}
.bucket-intro p {margin:8px 0 0;font-size:13px;line-height:1.8;color:#75806e}
.bucket-filters {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin:18px 0 12px;
}
.bucket-filters button {border:1px solid #dfe5d7;background:#fffdf7;border-radius:12px;color:#52634d;padding:8px;min-height:44px;font-size:13px;word-break:keep-all}
.bucket-filters button[aria-pressed=true] {background:linear-gradient(#5d7755,#496344);color:#fff;border-color:#496344;box-shadow:0 2px 5px #42593c26}
.bucket-filters button:focus-visible {outline:2px solid #526b4b;outline-offset:2px}
#bucket-results {margin-bottom:18px}
.bucket-card {min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:19px;overflow:hidden;display:flex;flex-direction:column}
.bucket-card .bk {width:100%;border:0;border-radius:0;flex:1;box-shadow:none}
.bucket-card .bk-body {gap:8px;min-height:154px}
.bucket-card .bk .t {font-size:15px;font-weight:600;color:#40513b}
.bk-description {font-size:12px;color:#7d8777;line-height:1.8;text-align:left}
.bucket-card .bk .st {font-size:12px;margin-top:auto;color:#617b51}
.bucket-card .bk .num {font-family:var(--body);font-size:10px;letter-spacing:0}
.bk-memory {border:0;border-top:1px solid #e8ebdf;background:#f5f6ef;color:#75816c;min-height:44px;font-size:11px;padding:10px 14px;text-align:left}
.bk-memory span {float:right}
.scene.reunion-scene .stage {border-radius:65px 65px 22px 22px}
.scene.reunion-scene .sh {min-height:48px}
.scene.reunion-scene .foot {max-width:540px;gap:10px}
.scene.reunion-scene .foot p {font-size:14px;line-height:1.8}
.dog.face-right .flip {transform:scaleX(-1)}
.dog.sniffing .pet-head {transform-origin:100px 120px;transform:translateY(10px) rotate(-15deg)}
.cat-moment.cat-crouch .body-svg {animation:cat-ready .18s ease-in-out infinite alternate}
.cat-moment.cat-stretch .body-svg {transform-origin:50% 95%;animation:cat-long 1.3s ease-in-out}
.cat-brush {pointer-events:none;z-index:5}
@keyframes cat-ready {from{transform:scale(1.03,.9) translateY(6%)}to{transform:scale(1.04,.89) translate(1%,6%)}}
@keyframes cat-long {50%{transform:scale(1.06,.94) translateY(3%)}}
@media(max-width:600px){.bucket-card .bk-body {min-height:158px;padding:13px}.bucket-card .bk .t {font-size:14px}.bk-description {font-size:11px}.bucket-intro {padding:18px}.bucket-filters {grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.bucket-filters button {font-size:12px}}
@media(prefers-reduced-motion:reduce){.cat-moment.cat-crouch .body-svg,.cat-moment.cat-stretch .body-svg {animation:none!important}}

/* 작은 몸짓: 반응 문구와 실제 동작을 함께 */
.dog.reaction-shake .body-svg {animation:pet-shake .14s ease-in-out 8 alternate!important}
.dog.reaction-sniff .pet-head {transform-origin:100px 116px;animation:pet-sniff .45s ease-in-out 3 alternate}
.dog.reaction-look .pet-head {transform-origin:100px 120px;animation:pet-listen 1.4s ease-in-out}
.dog.reaction-eat .pet-head {transform-origin:100px 120px;animation:pet-nibble .28s ease-in-out 5 alternate}
.dog.reaction-nuzzle .pet-head {transform-origin:100px 120px;animation:pet-nuzzle 1.6s ease-in-out}
.dog.reaction-knead .front-paw {transform-box:fill-box;transform-origin:50% 100%;animation:knead-paw .65s ease-in-out infinite alternate}
.dog.reaction-knead .paw-right {animation-delay:-.65s}
.dog.reaction-sleep .body-svg {transform-origin:50% 96%;animation:sleep-breath 4s ease-in-out infinite!important}
.dog.reaction-sleep .tail {animation-duration:4s}
.dog.reaction-bounce .body-svg {animation:pet-joy .45s ease-in-out 3 alternate!important}
.person.resting-person .pf {transform-origin:50% 100%;transform:translateY(4%) rotate(-8deg) scaleY(.85);transition:transform 1.5s}
@keyframes pet-shake {from{transform:translateX(-3%) rotate(-5deg)}to{transform:translateX(3%) rotate(5deg)}}
@keyframes pet-sniff {from{transform:translateY(6px) rotate(-8deg)}to{transform:translateY(9px) rotate(-12deg)}}
@keyframes pet-listen {40%,70%{transform:rotate(-12deg) translateY(-3px)}}
@keyframes pet-nibble {from{transform:translateY(4px) rotate(-2deg)}to{transform:translateY(7px) rotate(2deg)}}
@keyframes pet-nuzzle {45%,70%{transform:translate(-8px,6px) rotate(-13deg)}}
@keyframes knead-paw {from{transform:translateY(0) scaleY(1)}to{transform:translateY(-6px) scaleY(.85)}}
@keyframes sleep-breath {0%,100%{transform:rotate(-10deg) scale(1.05,.76) translateY(12%)}50%{transform:rotate(-10deg) scale(1.06,.79) translateY(12%)}}
@keyframes pet-joy {to{transform:translateY(-6%) rotate(-3deg)}}
@media(prefers-reduced-motion:reduce){.dog[class*="reaction-"] .body-svg,.dog[class*="reaction-"] .pet-head,.dog[class*="reaction-"] .front-paw,.dog.reaction-sleep .tail {animation:none!important}.dog.reaction-sleep .body-svg {transform-origin:50% 96%;transform:rotate(-10deg) scale(1.05,.76) translateY(12%)}.person.resting-person .pf {transition:none}}
.window-flurry {overflow:hidden;pointer-events:none}
.window-flurry i {position:absolute;top:-12px;animation:window-fall 6s linear infinite}
.window-snow {width:4px;height:4px;border-radius:50%;background:#fff;opacity:.85}
.window-petal {width:9px;height:5px;border-radius:70% 20% 70% 20%;background:#e8aeb9;opacity:.85}
@keyframes window-fall {to{transform:translate(25px,240px) rotate(170deg)}}
@media(prefers-reduced-motion:reduce){.window-flurry i,.cat-moment.cat-window-curious .body-svg {animation:none}.window-flurry {display:none}}

/* 구름 너머 별빛 동산 */
#yardwrap {background:linear-gradient(150deg,#faf6f6,#f2eef5 52%,#f5f3e8);border-color:#e4dfeb}
#yard {height:auto;aspect-ratio:3/4;min-height:440px;max-height:760px;background:#d9dfc2;border:1px solid #e4e4d3;border-radius:100px 100px 26px 26px;box-shadow:inset 0 0 28px #fff6,0 12px 38px #9a8fa51c}
#yard .world {width:1200px;height:1400px}
#yard.is-overview {background:linear-gradient(150deg,#eee8ed,#e3e9d7)}
#yard.is-overview .dream-world {border-radius:24px}
.dream-world {position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#yard .st .garden-sprite,#yard .st .garden-detail {position:absolute;inset:0;pointer-events:none}
#yard .landmark-tally {margin-inline-start:5px;padding-inline-start:6px;border-inline-start:1px solid #dcd2bd;color:#65583e}
#yard .garden-sprite {filter:drop-shadow(0 3px 3px #52654424)}
#yard .garden-count {position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:#fff8e9;color:#695e4e;border:1px solid #e9dbc0;border-radius:20px;padding:2px 8px;white-space:nowrap;font-size:10px}
#yard .av .fl > svg {display:block;width:100%;height:100%;filter:drop-shadow(0 2px 2px #58644821)}
#yardwrap .decobar {
  gap:10px
}
#yardwrap .decobar button {
  flex-direction:row;
  justify-content:center;
  min-height:70px;
  padding:9px 10px!important;
  gap:10px!important;
  border:1px solid #e5dfd4!important;
  border-radius:16px!important;
  background:linear-gradient(145deg,#fffdf7,#f8f5eb)!important;
  box-shadow:0 2px 4px #6c625713;
  font-family:var(--serif);
  font-size:14px!important;
  font-weight:700;
  line-height:1.3;
  color:#405546
}
#yardwrap .decobar button:hover {
  border-color:#aab69e!important;
  box-shadow:0 3px 8px #56684e20
}
#yardwrap .decobar .di {
  display:grid;
  place-items:center;
  flex:none;
  width:44px!important;
  height:44px!important;
  padding:4px;
  border-radius:50%;
  background:#ecefdf
}
#yardwrap #di-me {background:#f0e8ec}
#yardwrap #di-niche {background:#f0e7d8}
#yardwrap .decobar img {display:block;width:100%;height:100%;object-fit:contain}
.dream-mote {animation:dream-twinkle 4.8s ease-in-out infinite alternate}
.world .lbl {background:#fff9ecf5;color:#495743;border:1px solid #e5dcc8;box-shadow:0 2px 8px #8f799518;font-size:11px}
.world .av .tag {background:#fff9eddb;color:#8f7d91;box-shadow:none;font-size:10px}
.world .av.me .tag {background:#f2dfb7;color:#8a775a}
.world .garden-companion {position:absolute;pointer-events:auto;cursor:pointer;filter:drop-shadow(0 3px 3px #8f84a333);border-radius:50%;outline-offset:0}
.garden-companion .tail {animation-duration:1.5s}
.garden-companion.walk .body-svg {animation:reunion-step .35s ease-in-out infinite alternate}
#yardwrap .hall-head h2 {font-family:var(--serif);color:#796883}
#yardwrap .visit {background:#ebe9dc;color:#5f6f58}
#yardwrap .yard-locations {
  gap:8px;
  justify-content:space-between
}
#yardwrap .yard-destinations {
  display:flex;
  flex:1;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px
}
#yardwrap .yard-locations button {
  min-height:35px;
  border-radius:22px;
  padding:6px 11px;
  background:#fcf9f0;
  border-color:#e3ddce;
  color:#526449;
  font-size:11px
}
#yardwrap .yard-destinations button {
  border-radius:10px;
  box-shadow:0 1px 2px #6c625711
}
#yardwrap .yard-locations #hall-enter {
  margin-right:0;
  background:#e0e8d7;
  border-color:#cdd9c4;
  color:#3e5942;
  font-weight:600
}
#yardwrap .yard-locations button:hover,
#yardwrap #yard-overview[aria-pressed=true] {
  background:#e9eddf;
  border-color:#c9d5bf;
  color:#425740
}
@media(max-width:600px) {
  #yardwrap .decobar {gap:6px}
  #yardwrap .decobar button {
    flex-direction:column;
    gap:4px!important;
    min-height:70px;
    font-size:11px!important
  }
  #yardwrap .decobar .di {width:36px!important;height:36px!important}
  #yardwrap .yard-destinations {order:1;flex-basis:100%;justify-content:flex-start}
  #yardwrap .yard-locations button {font-size:10px;padding-inline:9px}
}
.reunion-hero {background:linear-gradient(125deg,#f1e7ef,#eceaf5 48%,#f5efdf);border-color:#e8e0eb}
.reunion-hero:not(.has-companion) {
  background-image:url("hero-candle-garden.png");
  background-size:cover;
  background-position:right 91%
}
@media(max-width:600px) {
  .reunion-hero:not(.has-companion) {background-position:right bottom}
}
.garden-caption {color:#58664f}
@keyframes dream-twinkle {0%,15%{opacity:.2}75%,100%{opacity:.95}}
@media(max-width:600px){#yardwrap{padding:14px}#yard {border-radius:80px 80px 22px 22px;min-height:440px}#yardwrap .hall-head h2 {font-size:19px}}
@media(prefers-reduced-motion:reduce){.dream-mote,.garden-companion .tail,.garden-companion.walk .body-svg {animation:none!important}.dream-mote{opacity:.75}}
.world .av:not(.me) {pointer-events:auto;cursor:pointer}
.world .av:not(.me) .tag {opacity:0;transition:opacity .2s;pointer-events:none}
.world .av:not(.me):hover .tag {opacity:1}
.world .av.me .tag {opacity:1}
@media(prefers-reduced-motion:reduce){.world .av .tag {transition:none}}

/* 촛불로 시작하는 동행과 넓은 동산 */
#view-park.on {grid-template-columns:minmax(0,1fr)}
#yard {height:clamp(500px,65vw,720px);aspect-ratio:auto;max-height:none}
#world {width:1200px;height:1400px}
#memory-panel {max-width:none}
.outing-status,.bucket-companion {display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:15px 18px;background:#f2ebf7;border:1px solid #e1d5eb;border-radius:16px;color:#81708e}
.outing-status:not([hidden]) {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
}
.outing-status > span {grid-column:1/-1;word-break:keep-all}
.outing-status > button {word-break:keep-all;text-wrap:balance}
.outing-status b,.outing-status small {display:block}
.outing-status b {font-size:13px;font-weight:500}
.outing-status small {margin-top:5px;font-size:11px;line-height:1.7;color:#a08eaa}
.outing-status button,.bucket-companion button {border:1px solid #d7c7e2;background:#fffaf4;color:#8a7499;border-radius:22px;padding:10px 13px;min-height:44px;font-size:12px}
.bucket-companion {margin-bottom:18px;font-size:13px;line-height:1.8}
.bucket-companion span {flex:1;min-width:200px}
.spirit-reunion {display:flex;flex-direction:column;gap:15px;text-align:center;padding:10px 4px}
.spirit-reunion h2 {font-family:var(--serif);color:#85718f}
.spirit-reunion p {font-size:14px;line-height:1.9;color:#8e8299;margin:0}
.spirit-reunion .eyebrow {color:#b39aba}
.spirit-choice {display:flex;flex-direction:column;gap:10px}
.spirit-reunion button:disabled {opacity:.45}
.summoning-art {height:240px;position:relative;isolation:isolate;background:radial-gradient(ellipse at 50% 65%,#fff4d8,#eee3f266 48%,transparent 70%);overflow:hidden;border-radius:100px}
.summoned-pet {position:absolute;width:165px;height:165px;left:calc(50% - 82px);top:20px;filter:drop-shadow(0 0 12px #fff9eb);animation:spirit-appear 1.6s ease-out both}
.spirit-rays {position:absolute;inset:0;background:conic-gradient(from 0deg at 50% 80%,transparent,#fff9e87a,transparent,#f6e5f170,transparent);filter:blur(12px);animation:spirit-rays 5s ease-in-out infinite alternate}
.summon-candle {position:absolute;bottom:14px;left:calc(50% - 13px);width:26px;height:50px;border-radius:5px;background:linear-gradient(90deg,#f5e6c9,#fffaf0,#f1dec4);box-shadow:0 2px 12px #b7a4bb30}
.summon-candle span {position:absolute;width:13px;height:24px;left:7px;top:-27px;border-radius:70% 30% 60% 40%;background:linear-gradient(#e9bc66,#fff7d2);box-shadow:0 0 23px 8px #ffe4a86b;animation:flick 1.4s ease-in-out infinite alternate}
.summon-spark {position:absolute;color:#eed49d;font-size:24px;animation:dream-twinkle 2s ease-in-out infinite alternate}
.spark-a {left:22%;top:35%}.spark-b {right:20%;top:15%;animation-delay:-1s}
.spirit-portrait {width:160px;height:160px;align-self:center;filter:drop-shadow(0 0 16px #f6dfb9);opacity:.85}
.spirit-sleep {transform-origin:center bottom;transform:rotate(-9deg) scaleY(.8)}
.world .spirit-companion {opacity:.78;filter:drop-shadow(0 0 7px #fff9e5) drop-shadow(0 0 12px #e8d9f7)}
.spirit-companion:not(.walk) .body-svg {animation:spirit-hover 4s ease-in-out infinite}
@keyframes spirit-appear {0%{opacity:0;transform:translateY(65px) scale(.4);filter:blur(14px)}65%{opacity:.65;filter:blur(2px)}100%{opacity:.87;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes spirit-rays {to{opacity:.55;transform:rotate(8deg)}}
@keyframes spirit-hover {50%{transform:translateY(-5px)}}
@media(max-width:600px){#yard {height:540px;min-height:500px}.outing-status {padding:12px}.outing-status button {font-size:11px}.summoning-art {height:220px}}
@media(prefers-reduced-motion:reduce){.summoned-pet,.spirit-rays,.summon-spark,.summon-candle span,.spirit-companion:not(.walk) .body-svg {animation:none!important}.summoned-pet{opacity:.87}}

/* Close framing leaves the changing silhouette and hand contact readable. */
.rest-portrait{position:absolute;inset:0;touch-action:none;user-select:none;overflow:hidden;border-radius:24px;background:#e8e5c8}
.rest-portrait>svg{display:block;width:100%;height:100%;object-fit:cover}
#stage:has(.rest-portrait){box-shadow:0 16px 45px #6b795629}

.beach-ripples {z-index:4;pointer-events:none}
.stage:has(.beach-surf) .drop {z-index:5}


.birthday-glow {position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 52% 72%,#fff2a5b0,transparent 52%);transition:opacity .25s}
.birthday-flame {transform-box:fill-box;transform-origin:center bottom;animation:birthday-flicker .7s ease-in-out infinite alternate}
@keyframes birthday-flicker {to{transform:scale(.86,1.12);opacity:.8}}
.birthday-serving {z-index:6;cursor:pointer}
.birthday-serving-bite {position:absolute;top:3%;left:18%;width:30%;height:70%}
.birthday-serving-bite + .birthday-serving-bite {left:53%}
.dog.birthday-bend:not(.birthday-eating-painted) .body-svg {transform-origin:50% 90%;transform:rotate(-12deg) scaleY(.91);transition:transform .24s ease-in-out}
.dog.birthday-chewing:not(.birthday-eating-painted) .body-svg {animation:birthday-chew .18s ease-in-out 4 alternate}
.dog.birthday-eating-painted .flip {transform:none}
@keyframes birthday-chew {to{transform:rotate(-14deg) scaleY(.89)}}
@media(prefers-reduced-motion:reduce){
  .birthday-glow,.dog.birthday-bend:not(.birthday-eating-painted) .body-svg {transition:none}
  .birthday-flame,.dog.birthday-chewing:not(.birthday-eating-painted) .body-svg {animation:none}
}
.birthday-cake-served {transform:translate(-13%,-16%) scale(.86);transform-origin:left bottom}

.camp-prop,.camp-blanket-target {cursor:pointer}
.camp-flame,.camp-lantern-light {visibility:hidden}
.camp-lit .camp-flame,.camp-lit .camp-lantern-light {visibility:visible}
.camp-lit .camp-flame {transform-origin:50% 75%;animation:camp-fire .62s ease-in-out infinite alternate}
.camp-lit .camp-lantern-glass {fill:#ffe0a0}
.camp-star-lines {pointer-events:none}
@keyframes camp-fire {to{transform:scale(.91,1.06);opacity:.85}}
@media(prefers-reduced-motion:reduce){.camp-lit .camp-flame{animation:none}}

.bath-tub {z-index:2;pointer-events:none;transition:transform .35s,opacity .35s}
.bath-empty-tub {transform:translate(14%,-75%) scale(.85);opacity:.82;z-index:0}
.bath-mat {pointer-events:none;z-index:0}
.stage:has(.bath-tub) .dog,.stage:has(.bath-tub) .person {z-index:1}
.bath-foam {z-index:3;pointer-events:none}
.bath-tool {z-index:4;pointer-events:none}
.bath-tool-motion {animation:bath-scrub .29s ease-in-out infinite alternate}
@keyframes bath-scrub {from{transform:translate(-2px,0)}to{transform:translate(2px,1px)}}
@media(prefers-reduced-motion:reduce){.bath-tool-motion{animation:none}.bath-tub{transition:none}}

.bath-tool {z-index:5}
.bath-water {animation:bath-flow .3s linear infinite alternate}
@keyframes bath-flow {to{stroke-dasharray:6 4;opacity:.55}}
.bath-foam-rinsed {animation:bath-rinse .44s ease-in forwards}
@keyframes bath-rinse {to{transform:translateY(14px) scale(.78);opacity:0}}
.dog.bath-lift-left .paw-left,.dog.bath-lift-right .paw-right {transform:translate(2px,-27px);transition:transform .24s}
.dog.bath-ear-twitch .pet-head {transform-origin:50% 60%;animation:bath-twitch .4s ease-in-out alternate 2}
@keyframes bath-twitch {to{transform:rotate(6deg)}}
@media(prefers-reduced-motion:reduce){
  .dog.bath-lift-left .paw-left,.dog.bath-lift-right .paw-right{transition:none}
  .bath-water,.bath-foam-rinsed,.dog.bath-ear-twitch .pet-head{animation:none}
}

.nap-guardian,.nap-pet {cursor:pointer}
.nap-guardian > painted-guardian {transform-origin:50% 85%}
.nap-patting > painted-guardian {animation:nap-pat .42s ease-in-out alternate 2}
@keyframes nap-pat {to{transform:rotate(3deg) translateX(2px)}}
.nap-pet > svg {overflow:visible}
.nap-breathing > svg {transform-origin:50% 88%;animation:nap-breathe 3.2s ease-in-out infinite}
@keyframes nap-breathe {50%{transform:scaleY(1.045)}}
.nap-kneading svg,.nap-settling svg {animation:nap-settle .72s ease-in-out}
@keyframes nap-settle {35%{transform:translate(2px,-3px)}70%{transform:translate(-2px,1px)}}
.nap-shade {opacity:0;background:#524769;pointer-events:none;transition:opacity 1.8s}
.nap-shade-on {opacity:.18}
@media(prefers-reduced-motion:reduce){.nap-patting > painted-guardian,.nap-pet > svg{animation:none}.nap-shade{transition:none}}

.guardian-reaching .pf {transform-origin:50% 95%;animation:guardian-reach .42s ease-in-out alternate 2}
@keyframes guardian-reach {to{transform:translateX(4%) rotate(7deg)}}
.nap-kneading .rest-paw-near,.nap-kneading .rest-paw-far {animation:nap-knead .38s ease-in-out alternate 2}
.nap-kneading .rest-paw-far {animation-delay:.19s}
@keyframes nap-knead {to{transform:translate(-10px,5px)}}
@media(prefers-reduced-motion:reduce){.guardian-reaching .pf,.nap-kneading .rest-paw-near,.nap-kneading .rest-paw-far{animation:none}}

/* Illustrated destinations and memorial controls */
#yardwrap .yard-destinations {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));width:100%;order:1;flex-basis:100%;gap:7px}
#yardwrap .yard-locations #hall-enter,
#yardwrap .yard-locations #yard-overview,
#yardwrap .yard-destinations button {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:69px;
  padding:7px 5px;
  border-radius:13px;
  background:linear-gradient(145deg,#fffdf7,#f8f5eb);
  border:1px solid #e5dfd4;
  font-family:var(--serif);
  font-size:12px;
  font-weight:700;
  line-height:1.3;
  word-break:keep-all
}
#yardwrap .yard-locations #hall-enter,
#yardwrap .yard-locations #yard-overview {flex-direction:row;min-height:43px;padding:5px 12px}
#yardwrap .yard-locations #hall-enter {background:#e9efdf}
#yardwrap .yard-locations #yard-overview[aria-pressed="true"] {background:#e9eddf;border-color:#c9d5bf;color:#425740}
#yardwrap .yard-locations .place-art {
  display:grid;
  place-items:center;
  position:relative;
  width:37px;
  height:37px;
  padding:4px;
  border-radius:50%;
  flex:none;
  background:#ecefdf
}
#yardwrap .yard-destinations button:nth-child(3n+2) .place-art {background:#f2e9e9}
#yardwrap .yard-destinations button:nth-child(3n) .place-art {background:#f1eadb}
.place-art > svg {width:100%;height:100%;display:block}

#yardwrap .yard-locations #hall-enter .place-art {width:29px;height:29px;padding:3px;background:#f8f6eb}
#yardwrap .yard-locations button:hover {border-color:#abb89d;background:#edf1e4}
@media(max-width:650px) {
  #yardwrap .yard-destinations {grid-template-columns:repeat(3,minmax(0,1fr))}
}

.sheet h2 {font-family:var(--serif);color:#3f5545}
.sheet h2[tabindex="-1"]:focus {outline:none}
.sheet {scrollbar-color:#c0c7b4 transparent}
.memorial-detail,.avatar-editor {display:flex;flex-direction:column;gap:12px}
.memorial-hero {
  display:grid;
  justify-items:center;
  gap:10px;
  padding:17px 14px;
  border:1px solid #ece3d4;
  border-radius:19px;
  background:linear-gradient(150deg,#f4edf4,#fffaf0 64%,#edf1e3)
}
.memorial-detail .big {
  width:148px;
  height:169px;
  margin:0;
  border:4px solid #fffdf5;
  outline:1px solid #dfd4b9;
  box-shadow:0 5px 14px #6c62571a;
  background:linear-gradient(#f2eddd,#e8edda);
  border-radius:78px 78px 11px 11px
}
.memorial-detail .big img {border-radius:0;box-shadow:none}
.memorial-detail .big .example-pet-art {object-fit:contain;transform:translateY(5%)}
.memorial-detail .who h2 {font-size:27px;line-height:1.25;margin:0 0 6px}
.memorial-detail .who p {font-size:12px;line-height:1.7}
.memorial-customize {border:1px solid #dfd9c8;border-radius:20px;padding:6px 13px;background:#fffaf0;color:#52624a;font-size:12px}
.memorial-detail .tally {margin:0;color:#5d6c58}
.memorial-detail .actions button {font-size:13px;min-height:48px;word-break:keep-all}
.memorial-detail .letter {background:#f8f2e6;border-left:3px solid #c7a268;color:#435746;line-height:1.8}
.memorial-detail .sec {font-family:var(--serif);color:#425643}
.memorial-detail .comforts li {background:#f0f1e8;color:#4f624f}
.memorial-detail textarea {padding:12px;border-radius:12px;line-height:1.6}
.decoed .dtabs {border:1px solid #e6e2d5;background:#f2efe6}
.decoed .dtabs button {font-family:var(--serif);font-weight:700;font-size:14px;min-height:40px}
.decoed .ditems button {background:#f7f4ec;border:1px solid #e7e1d3;padding:5px 4px 9px}
.decoed .ditems button[aria-pressed=true] {background:#fcfaf4;border-color:#7e9274;box-shadow:0 0 0 1px #7e9274}
.decoed .ditems .th {background:#f2ecdf}
.avatar-editor .avpv {
  width:100%;
  height:183px;
  margin:0;
  padding:10px;
  border:1px solid #ece3d4;
  border-radius:19px;
  background:radial-gradient(ellipse at 50% 62%,#fcf4db 5%,#edf0e3 60%,#f1e9f1)
}
.avatar-editor .avpv > svg {display:block;margin:auto;max-width:130px;filter:drop-shadow(0 4px 4px #6d685530)}
.avatar-editor .avrow {padding:7px 9px;background:#faf7ef;border:1px solid #eee6d8;border-radius:11px}
.avatar-editor .hint {margin:0}
.hall .wall {background:#eee7da;border-color:#e3d8c3;grid-template-columns:repeat(3,minmax(0,1fr))}
.hall .niche {min-width:0}
:is(.hall,.decoed) .niche .glass {aspect-ratio:4/3;width:100%}
@media(max-width:1199px) {.hall .wall {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:390px) {.hall .wall {grid-template-columns:minmax(0,1fr)}}
:is(.hall,.decoed) .niche {border-radius:12px 12px 7px 7px;background:#e4d9c4}
.decoed .dpv {width:min(100%,390px);margin:0 auto}
:is(.hall,.decoed) .niche .plate {background:linear-gradient(#f1e4c8,#e2d1aa);color:#594d32}
:is(.hall,.decoed) .niche .plate b {font-family:var(--serif);font-size:14px;font-weight:700}
:is(.hall,.decoed) .niche .plate span {font-size:11px}
.mine .ph .example-pet-art {object-fit:contain;background:#edf0df}
.summoned-pet .example-pet-art {width:100%;height:100%;object-fit:contain;box-shadow:none}

.memorial-detail .memorial-offerings {
  min-height:94px;
  margin:0;
  gap:10px;
  padding:8px 12px;
  border:1px solid #ece5d5;
  border-radius:15px;
  background:radial-gradient(ellipse at 45% 105%,#eceddb,#fcf8ef 72%)
}
.memorial-candle {width:66px;height:75px;flex:none}
.memorial-candle > svg,.memorial-offerings .flowers > svg,.memorial-letter-label > svg,.memorial-summon-candle > svg {display:block;width:100%;height:100%}
.memorial-offerings .flowers {min-height:55px}
.memorial-offerings .flowers > svg {width:42px;height:55px;transform:rotate(9deg)}
.memorial-letter-label {display:flex;align-items:center;gap:8px;font-family:var(--serif);font-weight:700;color:#4b614f}
.memorial-letter-label > svg {width:27px;height:24px}
.memorial-summon-candle {position:absolute;bottom:7px;left:calc(50% - 30px);width:60px;height:65px;z-index:2}
.avatar-editor .avpv > svg {width:100%;height:100%}
.decoed .ditems .th {padding:5px}
.decoed .ditems .th > .garden-sprite {max-width:90%;margin:auto}
.bucket-card .bk-art > svg {opacity:1}
.bucket-card .bk-pet .example-pet-art {width:100%;height:100%;object-fit:contain;border-radius:0}
#view-studio .ac.empty .im {background:linear-gradient(145deg,#f1e9ee,#eeefe1);display:grid;place-items:center}
#view-studio .ac.empty .im > svg {width:42px;height:42px;overflow:hidden}
#view-studio .seg button {font-family:var(--serif);font-weight:700}
#view-studio .canvasbox {border-color:#e8dfcf;background:#f7f2e8}

.niche-frame[data-tone="wood"] {filter:sepia(.35) saturate(1.45) brightness(.76)}
.niche-frame[data-tone="white"] {filter:grayscale(.92) brightness(1.12)}
.niche-frame[data-tone="pink"] {filter:sepia(.14) hue-rotate(308deg) saturate(1.38)}
.memorial-offerings .flowers > svg + svg {margin-left:-16px}
.memorial-offerings .flowers > svg:nth-of-type(even) {transform:rotate(-8deg) scale(.93)}

painted-guardian {display:block;width:100%;height:100%}
painted-guardian > svg,painted-guardian > img {display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.sheet painted-guardian > img {border-radius:0;box-shadow:none}
.avatar-editor .avpv > painted-guardian {max-width:130px;margin:auto;filter:drop-shadow(0 4px 4px #6d685530)}
@media(prefers-reduced-motion:reduce) {.av.walk .fl > *,.person.walk .pf > * {animation:none}}

#yardwrap > .yact {
  position:relative;
  inset:auto;
  flex-wrap:wrap;
  min-width:0;
  padding:12px 15px;
  background:#fdfaf1;
  border:1px solid #e8dfce;
  border-radius:16px;
  box-shadow:0 2px 6px #655a4314
}
#yardwrap > .yact .tx {min-width:min(160px,100%);word-break:keep-all;overflow-wrap:anywhere}
#yardwrap > .yact .tx b {font-family:var(--serif);font-weight:700}
#yardwrap > .yact .bt {flex-wrap:wrap;max-width:100%}
#yardwrap > .yact button {max-width:100%;white-space:normal;word-break:keep-all}
#yardwrap #di-me {position:relative;overflow:hidden;display:block}
#yardwrap #di-me > painted-guardian {position:absolute;top:10%;left:50%;width:93%;height:182%;transform:translateX(-50%)}
#yardwrap #di-me > painted-guardian > img {object-position:center top}
#yardwrap #di-me > painted-guardian > svg {transform:translateY(-6%)}
:is(.hall,.decoed) .niche:not(.empty) {border:2px solid #c9b78f;align-items:stretch}
:is(.hall,.decoed) .niche:not(.empty) .glass {border:0;border-radius:0}
:is(.hall,.decoed) .niche .glass::after {opacity:.32}
:is(.hall,.decoed) .niche .plate {display:block;border-top:1px solid #ffffff7a}
.memorial-detail .letter,.memorial-detail textarea,#memory-letter {white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere}
.example-letter-note {white-space:nowrap}
.decoed .dpv .glass > svg {touch-action:none}
.decoed [data-niche-piece] {cursor:grab}
.decoed [data-niche-piece][data-dragging] {cursor:grabbing}
.decoed [data-niche-piece]:focus-visible,
.decoed [data-niche-piece][data-dragging] {outline:none;filter:drop-shadow(0 0 1.4px #587851)}
.decoed .niche-drag-hint {margin:-3px 0 0;text-align:center}

.hall .niche.empty {
  align-items:stretch;
  justify-content:flex-start;
  background:linear-gradient(145deg,#f5eee1,#eae9d9);
  border:2px solid #ded1b6;
  color:#6e745d
}
.hall .niche.empty .glass {
  display:grid;
  width:100%;
  place-items:center;
  border:0;
  border-radius:0
}
.hall .niche.empty .glass img {width:100%;height:100%;object-fit:contain;padding:6% 0}
.hall .niche.empty .plate {flex:1;display:grid;place-items:center;min-height:38px;background:#eee5d0;color:#6c715a}
.desk .storybook-info-room {
  height:auto;
  aspect-ratio:2/1;
  border:1px solid #e6dac6;
  border-radius:16px;
  background:#f2e5d3
}
.desk .storybook-info-room img {display:block;width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none}
.desk .storybook-info-room .sign {margin:0;background:#fffaf0ed;border:1px solid #e2d5bd;color:#435846;font-family:var(--serif);font-weight:700;font-size:15px}
.desk .say {background:#f7f2e6;border:1px solid #ede4d2;box-shadow:none;line-height:1.7;color:#455c4c}
.desk .say b {color:#6c805c}
.desk .qs button {background:#fcfaf2;border-color:#e8dfce;color:#465c49;font-family:var(--serif);font-weight:700;word-break:keep-all;min-height:44px}
.desk .qs button[aria-pressed="true"] {background:#e9efdf;border-color:#98ab8e}
.pet-editor {display:grid;gap:13px}
#lk {
  --pet-tile-size:62px;
  --pet-tile-gap:6px;
  --pet-grid-inset:4px;
  min-width:0;
  gap:0;
}
#lk .identity-preview {
  top:0;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  align-items:stretch;
  gap:clamp(8px,3vw,14px);
  padding:12px;
  border:1px solid #e7e2d2;
  border-radius:16px;
  background:linear-gradient(145deg,#faf6ef,#edf0e3);
}
#lk .lkpv {
  position:relative;
  isolation:isolate;
  display:grid;
  place-items:center;
  width:100%;
  height:auto;
  min-height:126px;
  aspect-ratio:auto;
  background:#fff;
  border:1px solid #dbe4d1;
  border-radius:56px 56px 13px 13px;
  box-shadow:inset 0 2px 8px #63765015;
  overflow:hidden;
}
#lk .lkpv {
  background:radial-gradient(ellipse at 36% 22%,#faf7e8,#e7edda 75%);
}
#lk .lkpv::before {
  content:"";
  position:absolute;
  z-index:-1;
  bottom:8%;
  width:68%;
  height:16%;
  border-radius:50%;
  background:linear-gradient(#faf3df,#ddd3b6);
  box-shadow:0 3px 0 #c9bfa3,0 6px 9px #51604426;
}
#lk .lkpv > .painted-pet {
  position:absolute;
  inset:4% 5% 10%;
  width:90%;
  height:86%;
  filter:drop-shadow(2px 4px 3px #57493235);
}
#lk .preview-directions {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:repeat(3,1fr);
  gap:6px;
}
#lk .preview-directions button {
  width:100%;
  height:auto;
  min-height:38px;
  padding:4px;
  box-shadow:0 2px 3px #52634616;
}
#lk .preview-directions button[aria-pressed="true"] {
  background:linear-gradient(#5c7759,#48644a);
  box-shadow:inset 0 1px 0 #ffffff29,0 2px 4px #3e584536;
}
#lk .seg {max-width:none;margin:8px 0 0;grid-template-columns:repeat(2,minmax(0,1fr))}
#lk .lkh {font-family:var(--serif);font-weight:700;color:#4b624f;font-size:14px;margin:18px 0 6px}
#lk .lkrow {
  display:grid;
  grid-template-columns:repeat(auto-fill,var(--pet-tile-size));
  grid-auto-rows:var(--pet-tile-size);
  gap:var(--pet-tile-gap);
  padding:var(--pet-grid-inset);
  overflow-x:hidden
}
#lk .preset-grid {
  justify-content:center;
  max-height:calc(2 * var(--pet-tile-size) + var(--pet-tile-gap) + 2 * var(--pet-grid-inset));
  overflow-y:auto;
  scrollbar-color:#aeb99c #ede9db;
  scrollbar-gutter:stable;
  scroll-snap-type:y mandatory;
  scroll-padding-top:var(--pet-grid-inset)
}
#lk .preset-grid .lkb {scroll-snap-align:start}
#lk .lkb {
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  padding:0;
  background:linear-gradient(145deg,#fcf9ef,#edf0e3);
  border:1px solid #e0e4d5;
  border-radius:12px;
  overflow:hidden
}
#lk .lkb[aria-pressed="true"] {border-color:#6b8266;box-shadow:0 0 0 1px #6b8266;background:#f8faef}
#lk .lkb > .painted-pet {width:92%;height:92%;min-width:0;min-height:0;overflow:hidden}
#lk .identity-options button {border-radius:12px;background:#fbf8ee;word-break:keep-all}
#lk .identity-options button[aria-pressed="true"] {background:#526e52}
#lk .sw {margin:0;padding:7px;border:1px solid #e6dfd1;border-radius:11px;background:#f8f4e9}

@media(max-width:1199px) {#yardwrap > .yact {scroll-margin-bottom:calc(88px + env(safe-area-inset-bottom))}}

.painted-pet {display:block;width:100%;height:100%}

.guardian-gesture {z-index:4;pointer-events:none}
.cat-moment.cat-window-curious .body-svg {transform-origin:50% 95%;animation:cat-window-look .65s ease-in-out}
@keyframes cat-window-look {45%{transform:translateY(-3%) rotate(-7deg)}}
.drop {position:absolute;z-index:5;pointer-events:none;border-radius:55% 55% 62% 62%;background:linear-gradient(135deg,#fffdf3,#b7dce0);box-shadow:0 0 1px #668e8d55;animation:water-arc .53s linear both}
@keyframes water-arc {
  0% {opacity:.92;transform:translate(-50%,-50%) scale(.72)}
  42% {opacity:.9;transform:translate(var(--peak-x),var(--peak-y)) rotate(26deg)}
  78% {opacity:.53}
  100% {opacity:0;transform:translate(var(--land-x),var(--land-y)) rotate(50deg) scale(.6)}
}
.beach-ripples > svg {transform-origin:50% 53%;animation:shore-ripple 1.15s ease-out infinite}
@keyframes shore-ripple {from{opacity:.8;transform:scale(.72,.64)}to{opacity:.13;transform:scale(1.06,.97)}}
@media(prefers-reduced-motion:reduce) {.beach-ripples > svg {animation:none}}

/* The painted stride is held one frame at a time with a fixed foot baseline. */
.dog .gait-svg {display:none;position:absolute;inset:0;pointer-events:none}
.dog .gait-svg > svg {display:block;width:100%;height:100%}
.dog.has-gait.walk .gait-svg {display:block}
.dog.has-gait.walk .body-svg {display:none;animation:none}
.dog .gait-frame {opacity:0;animation:painted-gait .56s steps(1,end) infinite;animation-delay:var(--frame-delay)}
@keyframes painted-gait {0%{opacity:1}25%,100%{opacity:0}}
.bath-foam {opacity:.86;z-index:3}
.bath-towel {z-index:4;pointer-events:none}
.bath-stream {stroke-dasharray:3 3;animation:bath-stream .34s linear infinite}
@keyframes bath-stream {to{stroke-dashoffset:-12}}
@media (prefers-reduced-motion: reduce) {
  .dog.has-gait.walk .gait-svg {display:none}
  .dog.has-gait.walk .body-svg {display:block}
  .bath-stream {animation:none}
}

.picnic-bite {z-index:4;pointer-events:none}

.picnic-bento {z-index:3;cursor:pointer}
.bath-air {stroke-dasharray:8 5;animation:bath-air .36s linear infinite}
@keyframes bath-air {to{stroke-dashoffset:-13}}
.bath-drying .body-svg {transform-origin:50% 92%;animation:bath-fur-dry .21s ease-in-out 4}
@keyframes bath-fur-dry {25%{transform:rotate(-2deg) scale(1.025,.99)}75%{transform:rotate(2deg) scale(.995,1.018)}}
@media(prefers-reduced-motion:reduce){.bath-air,.bath-drying .body-svg {animation:none}}

.nap-quilt {z-index:2;pointer-events:none;transform-origin:45% 85%}
.nap-guardian {z-index:1}
.nap-pet {z-index:3}
.nap-shade {z-index:4}
.nap-lift .nap-quilt-edge {animation:nap-quilt-lift .82s ease-in-out}
.nap-quilt-breathing .nap-quilt-edge {animation:nap-quilt-breathe 3.4s ease-in-out infinite}
@keyframes nap-quilt-lift {42%{d:path("M0 366 Q48 343 73 332 Q111 315 156 318 Q185 316 219 335 L360 350 L360 480 H0Z")}}
@keyframes nap-quilt-breathe {50%{d:path("M0 366 Q48 343 73 335 Q111 324 156 320 Q185 316 219 335 L360 350 L360 480 H0Z")}}
.drive-cabin,.drive-wheels {pointer-events:none}
.drive-wheels {z-index:51}
@media(prefers-reduced-motion:reduce){.nap-lift .nap-quilt-edge,.nap-quilt-breathing .nap-quilt-edge,.nap-breathing > svg{animation:none}}

.reunion-scene .stage .cheer {
  width:max-content;max-width:calc(100% - 36px);box-sizing:border-box;
  padding:9px 17px;border:1px solid #e1d4ba;border-radius:15px;
  background:#fffbf1ee;color:#495b47;box-shadow:0 3px 12px #674c3223;
  font-family:var(--serif);font-size:clamp(14px,3.9vw,17px);font-weight:700;line-height:1.45;
  text-align:center;white-space:normal;word-break:keep-all;
}

#view-studio input#size {
  --size-fill:40%;
  appearance:none;width:100%;height:32px;margin:7px 0 0;padding:0;
  background:none;border:0;box-shadow:none;cursor:pointer;
}
#view-studio #size::-webkit-slider-runnable-track {
  height:7px;border-radius:99px;border:1px solid #d5decc;
  background:linear-gradient(90deg,#728c70 var(--size-fill),#e5eadc var(--size-fill));
}
#view-studio #size::-webkit-slider-thumb {
  appearance:none;width:19px;height:19px;margin-top:-7px;border:2px solid #6c876b;
  border-radius:50%;background:#fffcf1;box-shadow:0 2px 4px #53674d38;
}
#view-studio #size::-moz-range-track {height:6px;border-radius:99px;background:#e5eadc}
#view-studio #size::-moz-range-progress {height:6px;border-radius:99px;background:#728c70}
#view-studio #size::-moz-range-thumb {width:15px;height:15px;border:2px solid #6c876b;border-radius:50%;background:#fffcf1}
#view-studio #size:focus-visible {outline:2px solid #6c876b;outline-offset:3px;border-radius:8px}

#view-studio .studio-size:focus-within {outline:none}

.bucket-companion,.outing-status {
  background:linear-gradient(150deg,#f8f1fa,#efe7f4);
  border-color:#e2d6e8;
  box-shadow:inset 0 1px #ffffffb3,0 2px 0 #e9e0ee,0 7px 16px #67537212;
}
.bucket-companion button,.outing-status button {
  background:linear-gradient(#fffdf9,#f7f0e7);
  box-shadow:inset 0 1px #fff,0 2px 3px #67537212;
}
.bucket-intro {
  background:linear-gradient(148deg,#f4f7ec,#e9efe1);
  box-shadow:inset 0 1px #fffc,0 2px 0 #e1e8d9,0 7px 17px #56664d11;
}
.bucket-card {
  box-shadow:0 2px 0 #e1e4d6,0 7px 16px #40523814;
  transition:box-shadow .18s ease,transform .18s ease;
}
.bucket-card .bk-body {background:linear-gradient(#fffdf7,#f9f7ef)}
.bucket-card:focus-within {outline:2px solid #7e9979;outline-offset:2px}
@media(hover:hover) {
  .bucket-card:hover {transform:translateY(-2px);box-shadow:0 2px 0 #e1e4d6,0 10px 18px #40523823}
}
@media(prefers-reduced-motion:reduce) {
  .bucket-card {transition:none}
  .bucket-card:hover {transform:none}
}
#to-album {
  background:linear-gradient(#fffdf7,#f5f4eb);
  box-shadow:0 2px 5px #4052380f;
  font-family:var(--serif);
  font-size:14px;
  font-weight:700;
  color:#697460;
  word-break:keep-all;
  text-wrap:balance;
}
.jeju-fruit {
  position:absolute;z-index:8;transform:translate(-50%,-50%);display:grid;place-items:center;
  width:38px;height:38px;padding:3px;border:0;border-radius:50%;background:none;
}
.jeju-fruit[hidden] {display:none}
.jeju-fruit > svg {width:100%;height:100%;filter:drop-shadow(0 2px 2px #59432943)}
.jeju-fruit:hover:not(:disabled),.jeju-fruit:focus-visible {background:#fff1cb55}
.jeju-fruit:disabled {cursor:default}
.jeju-fruit.plucking > svg {animation:jeju-pluck .32s ease-in-out}
.jeju-reach,.jeju-picked,.jeju-filled,.jeju-stored-fruit,.jeju-basket {pointer-events:none}
.jeju-reach {z-index:7}
.jeju-picked {z-index:9}
.jeju-filled {z-index:5}
.jeju-basket {z-index:6}
@keyframes jeju-pluck {38%{transform:rotate(8deg)}70%{transform:rotate(-10deg) translateY(2px)}}
@media(prefers-reduced-motion:reduce){.jeju-fruit.plucking > svg {animation:none}}

.avatar-hair-styles {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.avatar-hair-styles button {
  display:grid;justify-items:center;align-content:start;gap:5px;
  min-width:0;padding:7px 3px 8px;border:1px solid #e4e3d5;border-radius:12px;
  background:#faf8ef;color:#51654e;font-family:var(--serif);font-size:12px;font-weight:700;line-height:1.25;
  word-break:keep-all;
}
.avatar-hair-styles button[aria-pressed="true"] {border-color:#80977b;background:#eef2e6;box-shadow:inset 0 0 0 1px #9aab91}
.av-style-portrait {display:block;width:46px;height:47px;position:relative;overflow:hidden;pointer-events:none}
.av-style-portrait > painted-guardian {position:absolute;left:50%;top:0;width:55px;height:86px;transform:translateX(-50%)}

.av-wardrobe {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:7px}
.av-wardrobe > div {display:flex;gap:5px}
.av-wardrobe button {
  min-height:40px;padding:6px 12px;border:1px solid #e1e3d4;border-radius:11px;
  background:#faf8ef;color:#526450;font-family:var(--serif);font-size:13px;font-weight:700;
}
.av-wardrobe button[aria-pressed="true"] {border-color:#80977b;background:#eaf0e2;box-shadow:inset 0 0 0 1px #9aab91}

.yard-bridge-stone {
  position:absolute;width:26px;height:17px;transform:translate(-50%,-50%) rotate(-16deg);
  border-radius:55% 44% 47% 47%;pointer-events:none;
  background:radial-gradient(ellipse at 34% 27%,#e0dac0,#b9b79b 75%);
  box-shadow:0 2px 2px #667b6f52,inset 0 1px #f0e5c070;
}

/* Mask the front rail from the painted map so the deck stays behind walkers. */
.yard-bridge-front {
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:905;
  clip-path:path("M930 889 C968 866 999 852 1041 852 C1068 852 1093 859 1108 868 Q1113 870 1110 874 C1087 865 1065 860 1042 860 C1000 859 966 876 935 896 Q929 896 930 889 Z M936 892 L942 889 L944 918 L937 923 Z M978 874 L984 871 L986 900 L979 903 Z M1014 861 L1020 859 L1021 893 L1015 894 Z M1046 858 L1052 858 L1053 891 L1047 891 Z M1069 861 L1075 862 L1077 893 L1070 892 Z M1105 870 L1111 871 L1112 900 L1106 898 Z M930 919 C963 903 994 890 1034 887 C1062 887 1091 893 1112 901 L1116 908 C1094 901 1064 895 1033 895 C992 897 957 911 939 930 Q933 932 930 926 Z");
}

#memory-panel:not([hidden]) {
  display:grid;
  grid-template-columns:clamp(68px,22%,108px) minmax(0,1fr);
  align-items:center;
  gap:10px 16px;
  padding:clamp(16px,3vw,26px);
  text-align:left;
  border-color:#e1dccb;
  background:linear-gradient(#fcfaf2a8,#fcfaf2a8),#fffaf0 url("memory-card-paper.webp") center / cover no-repeat;
  box-shadow:0 5px 16px #5e614514,inset 0 1px #fff;
}
#memory-panel .section-label,
#memory-panel .letter-preview,
#memory-panel > #memory-bucket {grid-column:1/-1}
#memory-panel .section-label {margin:0;padding-bottom:10px;color:#5d7058}
#memory-panel .memory-portrait {
  grid-column:1;
  grid-row:2/5;
  width:100%;
  height:auto;
  aspect-ratio:5/6;
  margin:0;
  box-shadow:0 4px 9px #79684d29;
}
#memory-panel h3 {grid-column:2;margin:0;align-self:end}
#memory-panel .memory-dates {grid-column:2;color:#64705d;font-size:11px}
#memory-panel .memory-line {display:none}
#memory-panel .letter-preview {
  margin:6px 0 0;
  padding:14px;
  border:1px solid #e4decd;
  border-radius:12px;
  background:#fffefaab;
}
#memory-panel .letter-preview p {margin:7px 0}
#memory-panel .letter-sign {color:#62745e}
#memory-panel > button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  min-height:44px;
  margin:0;
  padding:8px 12px;
  border:1px solid #d9dfce;
  border-radius:10px;
  color:#3d553f;
  background:#f4f5ea;
  font-size:12px;
  font-weight:700;
}
#memory-panel > #memory-visit {grid-column:2;background:#e7eddd}
#memory-panel > button:hover {background:#dce7d3}
#memory-panel > button:focus-visible {outline:2px solid #567454;outline-offset:2px}

#hall #mine {
  gap:12px;
  padding:14px;
  border:1px solid #e1dccb;
  background:#fffaf0 url("memory-card-paper.webp") right center / cover no-repeat;
  box-shadow:0 3px 10px #5e614518;
}
#hall #mine .ph {box-shadow:0 3px 7px #79684d29}
#hall #mine small {color:#5e6e55;line-height:1.5}
#hall #mine .go {flex:none;white-space:nowrap}
#hall #deco-open,
#hall .search {
  min-height:44px;
  border:1px solid #d9dfce;
  border-radius:10px;
}
#hall #deco-open {margin-top:0;background:#e7eddd;color:#3d553f}
#hall .search {background:#fffdf7;color:#64745f}
#hall .search:focus-within {outline:2px solid #567454;outline-offset:2px}

.memorial-detail .actions {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.memorial-detail .actions .btn {margin:0;min-height:58px;border-radius:13px}
.memorial-detail #n-candle {display:block;text-align:center;line-height:1.4}
.memorial-detail .memorial-letter-section {
  display:grid;
  gap:10px;
  padding:clamp(12px,4vw,20px);
  border:1px solid #e7decb;
  border-radius:16px;
  background:#fffaf0 url("memory-card-paper.webp") center / cover;
}
.memorial-letter-section > .hint,
.memorial-letter-section > .letter {margin:0}
.memorial-letter-section textarea {width:100%;min-height:86px;background:#fffdf7;resize:vertical}
.memorial-letter-section #n-write {margin:0;min-height:44px;border-radius:11px}
.memorial-visits {padding:12px 0;border-bottom:1px solid #e4e7db}
.memorial-visits .sec {margin:0 0 8px}
.memorial-visits .comforts {margin:0}
.memorial-footer {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px}
.memorial-footer #n-edit {width:auto;border:0;padding:10px 4px;color:#52674f}
.memorial-footer #n-close {width:auto;margin:0 0 0 auto;padding-inline:20px;min-height:44px}

.bucket-card .bk {
  min-height:0;
  justify-content:flex-start;
  background:linear-gradient(#fffdf7,#f7f5ed);
}
.bucket-card .bk:hover {transform:none}
.bucket-card .bk-art {
  height:auto;
  aspect-ratio:4/3;
  flex:none;
}
.bucket-card .bk-body {
  flex:1;
  min-height:0;
  gap:6px;
  padding:12px clamp(9px,3vw,16px);
  background:none;
}
.bucket-card .bk .t {line-height:1.4;word-break:keep-all}
.bucket-card .bk-description {line-height:1.55;word-break:keep-all;overflow-wrap:anywhere;color:#63715e}
.bucket-card .bk .st {padding-top:8px}
.bucket-card .bk-memory {
  background:#f0f2e8;
  line-height:1.4;
  padding:8px clamp(9px,3vw,16px);
  word-break:keep-all;
}

.studio-controls {
  display:grid;
  gap:12px;
  margin-top:10px;
  padding:clamp(12px,4vw,20px);
  border:1px solid #e4dfd0;
  border-radius:16px;
  background:#fffdf5 url("memory-card-paper.webp") right center / cover;
}
.studio-controls .row,
.studio-controls .layersel {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.studio-controls .layersel > span {grid-column:1/-1;color:#53654f;font-size:12px}
.studio-controls .filebtn,
.studio-controls .layersel button {
  min-height:44px;
  padding:8px 5px;
  border:1px solid #dce3d2;
  border-radius:10px;
  background:#fffdf6;
  color:#3d553f;
  font-size:13px;
  word-break:keep-all;
}
.studio-controls .layersel button[aria-pressed="true"] {background:#506b50;border-color:#506b50;color:#fff}
.studio-controls .studio-size {margin:0;color:#53654f;font-size:12px}
.studio-controls #size {width:100%;min-height:34px;margin:0}
.studio-controls #btn-make {margin:0;min-height:44px;border-radius:10px}
.studio-controls .filebtn:focus-within,
.studio-controls button:focus-visible {outline:2px solid #567454;outline-offset:2px}

.studio-controls .filebtn,
.studio-controls .layersel button {
  background:linear-gradient(#fffefa,#f0f2e6);
  box-shadow:inset 0 1px #fff,0 3px 0 #d5ddca,0 5px 8px #475b4220;
}
.studio-controls .layersel button[aria-pressed="true"] {
  background:linear-gradient(#617d5f,#496349);
  box-shadow:inset 0 1px #ffffff45,0 3px 0 #3b523c,0 5px 8px #354b322b;
}
.studio-controls #btn-make {
  background:linear-gradient(#50725d,#395645);
  box-shadow:inset 0 1px #ffffff45,0 4px 0 #2b4436,0 7px 11px #354b3230;
}
.studio-controls .filebtn:active,
.studio-controls .layersel button:active,
.studio-controls #btn-make:active {
  transform:translateY(2px);
  box-shadow:inset 0 1px 3px #263c3026,0 1px 2px #354b3230;
}

#memory-panel > button {
  background:linear-gradient(#fdfbf4,#f0f0e5);
  border-color:#dedfd0;
  box-shadow:inset 0 1px #fff,0 2px 0 #dedfd1,0 4px 7px #53584418;
}
#memory-panel > #memory-visit {background:linear-gradient(#f7f8ef,#e8eddf)}
#memory-panel > button:hover,
#memory-panel > #memory-visit:hover {background:linear-gradient(#f8f9ef,#e5eadc)}
#memory-panel > button:active {
  transform:translateY(2px);
  box-shadow:inset 0 1px 3px #263c3026,0 1px 2px #354b3230;
}

/* Keep Korean words intact in explanatory copy. */
:is(#view-park,#view-bucket,#view-studio,#modal,#scene) p,
#yard-hint,
.bucket-card .bk-description {
  word-break:keep-all;
  overflow-wrap:anywhere;
  text-wrap:pretty;
}
#yard-hint,
.bucket-card .bk-description {
  text-wrap:balance;
}

#hall {
  padding:clamp(14px,4vw,26px);
  background:linear-gradient(150deg,#fffdf8,#f6f5ec);
}
#hall > #hall-back {
  align-self:flex-start;
  min-height:44px;
  padding:8px 14px;
  border:1px solid #dce2d2;
  border-radius:11px;
  background:linear-gradient(#fffefa,#eef1e6);
  color:#40583f;
  box-shadow:0 2px 0 #dce2d2;
  text-align:left;
  word-break:keep-all;
}
#hall > .hall-head {padding:5px 0 2px}
#hall > .floor {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#hall > .floor button {
  min-height:44px;
  border:1px solid #dce2d2;
  border-radius:11px;
  background:linear-gradient(#fffefa,#edf0e5);
  color:#4c634b;
  box-shadow:0 2px 0 #dce2d2;
}
#hall > .floor button[aria-pressed="true"] {
  border-color:#4b6449;
  background:linear-gradient(#647e5e,#4a6549);
  color:#fff;
  box-shadow:inset 0 1px #fff4,0 2px 0 #3d543c;
}
#hall > #hall-back:active,
#hall > .floor button:active {transform:translateY(1px)}
#hall .wall {
  padding:clamp(8px,2.5vw,15px);
  gap:clamp(8px,2vw,14px);
  background:linear-gradient(#eae5d8,#f4efe4);
}
#hall .niche:not(.empty) {
  border:1px solid #c9b991;
  border-radius:12px;
  box-shadow:0 2px 0 #c8ba9a,0 4px 7px #66533424;
}
#hall .niche.me:not(.empty) {
  border-color:#a88342;
  box-shadow:0 0 0 2px #c9aa6b,0 4px 8px #6653342b;
}
#hall .niche:not(.empty) .plate {
  padding:7px 4px 8px;
  background:linear-gradient(#faf1dc,#e9dbbc);
}
#hall :is(#hall-back,.floor button,.niche):focus-visible {
  outline:2px solid #567454;
  outline-offset:2px;
}

.date-field {display:grid;gap:7px;min-width:0;color:#53654f;font-size:13px}
.date-trigger {
  display:flex;align-items:center;justify-content:space-between;gap:5px;
  min-height:44px;padding:8px 10px;border:1px solid #d9dfce;border-radius:11px;
  background:linear-gradient(#fffefa,#eef1e6);color:#3d553f;
  box-shadow:0 2px 0 #dce2d2;font:inherit;
}
.date-trigger[aria-expanded="true"] {border-color:#789174}
.date-calendar {
  display:grid;gap:10px;padding:12px;margin:8px 0;
  border:1px solid #e1dccb;border-radius:15px;
  background:#fffaf0 url("memory-card-paper.webp") right center / cover;
  box-shadow:0 4px 12px #53654f22;
}
.date-calendar-head {display:flex;justify-content:center;gap:8px}
.date-calendar-grid {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;text-align:center;align-items:center}
.date-calendar-grid > span {font-size:12px;color:#53654f}
.date-calendar :is(button,select) {
  min-height:36px;border:1px solid #dce2d2;border-radius:8px;
  background:#fffdf5;color:#40583f;padding:4px;font:inherit;
}
.date-calendar button[aria-pressed="true"] {background:#506b50;color:#fff}
.date-calendar-footer {display:flex;justify-content:space-between;gap:8px}
.date-calendar-head select {
  appearance:none;
  min-width:76px;
  padding:6px 30px 6px 12px;
  border-radius:12px;
  background:
    linear-gradient(45deg,transparent 50%,#61765a 50%) right 16px center / 5px 5px no-repeat,
    linear-gradient(135deg,#61765a 50%,transparent 50%) right 11px center / 5px 5px no-repeat,
    linear-gradient(#fffef8,#edf1e3);
  box-shadow:0 2px 0 #dbe2cf;
  font-weight:700;
}
.date-calendar-grid {gap:5px}
.date-calendar-grid button {
  border-color:#e2e4d5;
  border-radius:10px;
  background:linear-gradient(#fffef8,#f6f5eb);
  box-shadow:0 1px 2px #46594017;
  font-variant-numeric:tabular-nums;
}
.date-calendar-grid button[aria-pressed="true"] {
  border-color:#456045;
  background:linear-gradient(#64805d,#496449);
  box-shadow:inset 0 1px #fff4,0 2px 0 #3b543b;
}
.date-calendar .date-calendar-footer button {
  min-width:84px;
  min-height:40px;
  padding:6px 12px;
  border-radius:10px;
  background:linear-gradient(#fffdf7,#f3eee1);
  box-shadow:inset 0 1px #fff,0 2px 0 #ddd8c8;
  font-size:13px;
  font-weight:600;
}
.date-calendar .date-calendar-footer button:last-child {
  background:linear-gradient(#f2f6e9,#e1ead6);
  box-shadow:inset 0 1px #fff,0 2px 0 #cad7bf;
}
.date-calendar .date-calendar-footer button:hover {background:#e8eedf}
.date-calendar .date-calendar-footer button:active {box-shadow:inset 0 1px 3px #40583f25}
.date-calendar button:not([aria-pressed="true"]):hover {background:#e8eedf}
.date-calendar :is(button,select):focus-visible {outline:2px solid #658360;outline-offset:2px}
.date-calendar button:active {transform:translateY(1px)}

.date-icon {
  position:relative;
  flex:0 0 18px;
  height:17px;
  margin:2px 2px 0;
  border:1.5px solid #61795e;
  border-radius:4px;
  background:linear-gradient(#dbe6d3 0 5px,#fffdf6 5px);
}
.date-icon::before {
  content:"";
  position:absolute;
  top:-4px;
  left:3px;
  width:2px;
  height:5px;
  border-radius:2px;
  background:#61795e;
  box-shadow:7px 0 #61795e;
}
.date-icon i {
  position:absolute;
  top:8px;
  left:3px;
  width:2px;
  height:2px;
  border-radius:50%;
  background:#61795e;
  box-shadow:4px 0 #61795e,8px 0 #61795e,0 4px #61795e,4px 4px #61795e;
}

#yardwrap .yard-destinations button {
  min-height:84px;
  gap:6px;
  background:linear-gradient(155deg,#fffdf7,#f1eee3);
  box-shadow:inset 0 1px #fff,0 2px 0 #e3dccd,0 4px 8px #62574712;
}
#yardwrap .yard-destinations .place-art {
  width:54px;
  height:47px;
  padding:3px;
  border-radius:45% 45% 32% 32%;
  background:radial-gradient(ellipse at 50% 75%,#d7ddc7 0%,#eff0e3 60%,transparent 74%);
}
#yardwrap .yard-destinations .place-art > svg {
  filter:drop-shadow(0 2px 2px #62523b35);
}
#world .st > svg {
  filter:drop-shadow(2px 5px 3px #494a343d);
}

.desk {gap:14px}
.desk .say {
  padding:12px 16px;
  text-align:center;
  background:#fffaf0 url("memory-card-paper.webp") right center / cover;
  word-break:keep-all;
  overflow-wrap:anywhere;
  text-wrap:pretty;
}
.desk .say::before {border-bottom-color:#fffaf0}
.desk .qs {grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.desk .qs button {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
  text-align:center;
  text-wrap:balance;
  background:linear-gradient(#fffdf6,#f3f0e4);
  box-shadow:0 2px 0 #e8e0cf;
}
.desk .qs button[aria-pressed="true"] {background:linear-gradient(#eef4e6,#e1ead8)}
.desk > .btn {margin:0;background:linear-gradient(#f3f6ec,#e6eddc);box-shadow:0 2px 0 #d9e2d1}
.desk :is(.qs button,.btn):active {transform:translateY(1px)}

.pebble-dialog {
  display:grid;
  gap:14px;
  padding:clamp(12px,3vw,20px);
  border:1px solid #e7decb;
  border-radius:16px;
  background:#fffaf0 url("memory-card-paper.webp") center / cover;
  text-align:center;
}
.pebble-dialog .hint {margin:0;text-wrap:balance}
.pebble-dialog #pb-chips {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin:0;
}
.pebble-dialog #pb-chips button {
  grid-column:span 2;
  min-height:44px;
  padding:6px;
  border-radius:11px;
  background:linear-gradient(#fffdf6,#f3f0e4);
  box-shadow:0 2px 0 #e8e0cf;
  word-break:keep-all;
  text-wrap:balance;
}
.pebble-dialog #pb-chips button:last-child {grid-column:2 / span 2}
.pebble-dialog #pb-close {
  margin:0;
  background:linear-gradient(#f3f6ec,#e6eddc);
  box-shadow:0 2px 0 #d9e2d1;
}

.flower-offering-art {width:88px;height:96px;justify-self:center}
.flower-offering-art svg {display:block;width:100%;height:100%}
.flower-offering .btn {margin:0}

.memorial-detail .memorial-offerings {
  background:radial-gradient(ellipse at 50% 24%,#fff8e6,transparent 72%),linear-gradient(#faf7ec,#eaeedc);
  box-shadow:inset 0 1px #fff,0 3px 0 #e5dfcb,0 6px 12px #52634c12;
}
.memorial-offerings :is(.memorial-candle,.flowers) > svg {
  filter:drop-shadow(0 3px 2px #66543b32);
}
.memorial-detail .tally {text-wrap:balance;word-break:keep-all}
.memorial-detail :is(.actions .btn,#n-write,#n-close) {
  background:linear-gradient(#fafcf3,#e6eddd);
  border:1px solid #d9e2d1;
  color:#395443;
  box-shadow:inset 0 1px #fff,0 3px 0 #d4ddca,0 5px 9px #42563e17;
}
.memorial-detail :is(#n-candle,#n-write) {
  background:linear-gradient(#5b775d,#3c5948);
  border-color:#48644f;
  color:#fff;
  box-shadow:inset 0 1px #ffffff45,0 3px 0 #304938,0 5px 9px #344a3626;
}
.memorial-detail :is(.actions .btn,#n-write,#n-close):active {
  transform:translateY(2px);
  box-shadow:inset 0 1px 3px #263c3026;
}
.memorial-detail .memorial-letter-section {box-shadow:0 3px 9px #79684d14}
.memorial-detail textarea {border-color:#ddd8c9;box-shadow:inset 0 2px 4px #79684d12}
.memorial-detail .memorial-visits {
  padding:12px;
  border:1px solid #e2e7d9;
  border-radius:13px;
  background:#f7f8f0;
}

.offering-bloom {position:relative}
.offering-bloom::after {
  content:"✿";
  position:absolute;
  top:12%;
  right:5%;
  color:#ad6079;
  font-size:24px;
  text-shadow:0 1px 4px #fff;
}
@media(prefers-reduced-motion:no-preference) {
  .offering-bloom::after {animation:offering-bloom .5s ease-out both}
}
@keyframes offering-bloom {
  from {opacity:0;transform:scale(.4)}
  to {opacity:1;transform:scale(1)}
}

#memory-panel > #memory-days {grid-column:1/-1}
.together-days article {
  padding:12px;
  border:1px solid #e7decb;
  border-radius:12px;
  background:#fffdf6e8;
  text-align:left;
}
.together-days time {color:#52674f;font-weight:700}
.together-days ul {margin:6px 0 0;padding-inline-start:1.2em;line-height:1.6;word-break:keep-all}
.together-days .btn {margin:0}

.pebble-dialog {
  box-shadow:inset 0 1px #fff,0 3px 0 #e6decc,0 7px 16px #63543a17;
}
.flower-offering-art {
  position:relative;
  isolation:isolate;
  width:108px;
  height:108px;
  padding:4px 8px 11px;
}
.flower-offering-art::before {
  content:"";
  position:absolute;
  inset:auto 2px 4px;
  height:18px;
  z-index:-1;
  border-radius:50%;
  background:linear-gradient(#f7eed6,#dbd4b6);
  box-shadow:0 3px 0 #cbc1a3,0 5px 8px #675d3d24;
}
.flower-offering-art svg {filter:drop-shadow(0 3px 2px #67553b30)}
.pebble-dialog > .btn:not(.primary) {
  background:linear-gradient(#fafcf3,#e6eddd);
  box-shadow:inset 0 1px #fff,0 3px 0 #d4ddca;
}
.pebble-dialog > .btn.primary {
  background:linear-gradient(#5b775d,#3c5948);
  box-shadow:inset 0 1px #fff4,0 3px 0 #304938;
}
.pebble-dialog > .btn.primary:disabled {
  background:linear-gradient(#e8efe0,#dbe5d3);
  color:#405840;
  opacity:1;
  box-shadow:inset 0 1px #fff,0 2px 0 #cbd7c2;
}
.pebble-dialog button:not(:disabled):active {transform:translateY(2px)}

.memorial-detail .memorial-guest-letter > .letter {
  border:1px solid #e9ddc5;
  background:linear-gradient(155deg,#fffdf7,#f9f1e1);
  box-shadow:inset 0 1px #fff,0 2px 4px #79684d12;
  line-height:1.65;
}
.memorial-guest-letter > .sec {
  margin:4px 0 0;
  text-align:center;
}
.memorial-guest-letter #n-chips {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.memorial-guest-letter #n-chips button {
  min-height:44px;
  padding:7px 5px;
  border:1px solid #dce2d2;
  border-radius:12px;
  background:linear-gradient(#fffdf8,#edf1e4);
  box-shadow:inset 0 1px #fff,0 2px 0 #d5ddca;
  font-size:13px;
  word-break:keep-all;
}
.memorial-guest-letter #n-chips button:active {
  transform:translateY(2px);
  box-shadow:inset 0 1px 3px #344a3626;
}
.memorial-detail .memorial-visits {
  background:linear-gradient(155deg,#fafbf5,#edf1e5);
  box-shadow:inset 0 1px #fff,0 2px 5px #344a3610;
}
.memorial-visits .comforts li {
  border:1px solid #e0e6d8;
  background:#fffdf8;
}
.memorial-visits .comfort-text {min-width:0;word-break:keep-all;overflow-wrap:anywhere}
.memorial-visits .comforts .pb {
  width:14px;
  height:10px;
  background:radial-gradient(ellipse at 33% 28%,#fbf7fe,#c6bed6);
  box-shadow:0 1px 2px #4e45652c;
}
@media (max-width:420px) {
  .memorial-guest-letter #n-chips {grid-template-columns:repeat(2,minmax(0,1fr))}
}

.camp-glow,.camp-embers {visibility:hidden}
.camp-lit :is(.camp-glow,.camp-embers) {visibility:visible}
.camp-lit .camp-flame {transform-origin:50% 69%;animation:camp-flicker .72s ease-in-out infinite alternate}
.camp-lit .camp-embers {animation:camp-embers 1.65s ease-out infinite}
.star.next .camp-star-halo {opacity:.46}
.star.next:has(.camp-star-halo) {animation:camp-star-glow 1.25s ease-in-out infinite alternate}
@keyframes camp-flicker {to{transform:skewX(4deg) scale(.93,1.05)}}
@keyframes camp-embers {from{opacity:.85}to{opacity:0;transform:translate(5px,-16px)}}
@keyframes camp-star-glow {from{filter:drop-shadow(0 0 2px #fff0bf)}to{filter:drop-shadow(0 0 7px #fff0bf)}}
@media(prefers-reduced-motion:reduce){
  .camp-lit :is(.camp-flame,.camp-embers),.star.next:has(.camp-star-halo) {animation:none}
}

/* Keep the guardian grounded as the illustrated pose changes. */
.person .pf {
  position: relative;
  transform-origin: 50% 95%;
}
.person-contact {
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 2%;
  height: 5%;
  border-radius: 50%;
  background: #3a3923;
  opacity: .17;
  filter: blur(2px);
}
.ball-scene .person.welcoming .pf {
  transform: translate(4%, 1%) rotate(4deg) scaleY(.96);
}
.person.walk .pf > * {
  animation: guardian-step .44s ease-in-out infinite;
  transform-origin: 50% 94%;
}
@keyframes guardian-step {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  25%, 75% { transform: translateY(-2.5%) rotate(0); }
  50% { transform: translateY(0) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .person.walk .pf > *, .person.throw .pf { animation: none; }
}

/* Painted gestures already contain the bend. Keep the feet in place. */
.guardian-reaching .pf {
  animation: guardian-weight-shift .42s ease-in-out alternate 2;
}
@keyframes guardian-weight-shift {
  to { transform: translateX(1.5%) scaleY(.985); }
}
@media (prefers-reduced-motion: reduce) {
  .guardian-reaching .pf { animation: none; }
}

.walking-art { display:none; position:absolute; inset:0; }
.walking-art > div { position:absolute; inset:0; }
.walk-torso { clip-path:inset(0 0 23%); }
.walk-leg.near {
  clip-path:inset(76% 50% 0 0);
  transform:translate(var(--stride-x, 0px),var(--near-lift, 0px));
}
.walk-leg.far {
  clip-path:inset(76% 0 0 50%);
  transform:translate(calc(-1 * var(--stride-x, 0px)),var(--far-lift, 0px));
}
@media (prefers-reduced-motion:no-preference) {
  .person.walk:has(.walking-art) .pf { visibility:hidden; }
  .person.walk .walking-art { display:block; }
  .person.walk.left .walking-art { transform:scaleX(-1); }
}
@media (prefers-reduced-motion:no-preference) {
  .person.walk:not(.tracked-stride) .walk-leg.near { animation: guardian-foot .46s ease-in-out infinite; }
  .person.walk:not(.tracked-stride) .walk-leg.far { animation: guardian-foot .46s ease-in-out -.23s infinite; }
}
@keyframes guardian-foot {
  0%, 100% { transform:translate(-4%,0); }
  50% { transform:translate(4%,-4%); }
}

.profile-walk {
  background-image:url("guardian-walk-profile.webp");
  background-repeat:no-repeat;
  background-size:400% 200%;
  background-position:calc(var(--walk-frame, 0) * 100% / 3) 0;
}
.profile-walk.long-hair { background-position-y:100%; }
@media (prefers-reduced-motion:no-preference) {
  .person.walk:not(.tracked-stride) .profile-walk { animation:profile-stride .68s steps(1) infinite; }
}
@keyframes profile-stride {
  0% { background-position-x:0; }
  25% { background-position-x:33.333%; }
  50% { background-position-x:66.667%; }
  75% { background-position-x:100%; }
}

/* Keep the wardrobe portrait above the animated stride. */
.walking-art .walk-profile-top {
  z-index:1;
  clip-path:inset(0 0 53%);
}
.walking-art .profile-walk {
  clip-path:inset(70% 0 0);
}
.walking-art .profile-walk {
  background-color:var(--walk-color);
  background-blend-mode:luminosity;
  mask: url("guardian-walk-profile.webp") no-repeat;
  mask-size:400% 200%;
  mask-position:calc(var(--walk-frame, 0) * 100% / 3) 0;
}
@media (prefers-reduced-motion:no-preference) {
  .person.walk:not(.tracked-stride) .profile-walk { animation:profile-colored-stride .68s steps(1) infinite; }
}
@keyframes profile-colored-stride {
  0% { background-position-x:0; mask-position-x:0; }
  25% { background-position-x:33.333%; mask-position-x:33.333%; }
  50% { background-position-x:66.667%; mask-position-x:66.667%; }
  75% { background-position-x:100%; mask-position-x:100%; }
}

.walking-art .walk-shirt { clip-path:inset(46% 0 30%); }
.walking-art .walk-pants { clip-path:inset(70% 0 0); }
.person.profile-rest:not(.walk) .profile-walk {
  background-position-x:0;
  mask-position-x:0;
}
@media (prefers-reduced-motion:no-preference) {
  .person.profile-rest:not(.walk) .pf { visibility:hidden; }
  .person.profile-rest:not(.walk) .walking-art { display:block; }
  .person.profile-rest.left .walking-art { transform:scaleX(-1); }
}

.walking-art .walk-profile-top {
  clip-path:polygon(0 0,100% 0,100% 47%,44% 47%,44% 60%,0 60%);
}
.walking-art .walk-shirt {
  transform-origin:54% 49%;
  transform:rotate(var(--arm-swing, 0deg));
}
.person.profile-rest:not(.walk) .walk-shirt { transform:none; }
.person.profile-rest:not(.walk) .walk-pants {
  background-position-x:100%;
  mask-position-x:100%;
}
.person.profile-rest:not(.walk) .walk-shirt {
  background-position-x:100%;
  mask-position-x:100%;
}