:root{--ink:#5d5148;--paper:#fffaf0;--peach:#f6d7bf;--sage:#dce5cc;--pink:#e9a9a1}*{box-sizing:border-box}body{margin:0;background:#f5eddf;color:var(--ink);font-family:'Trebuchet MS','Apple SD Gothic Neo','Malgun Gothic',sans-serif}body:before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.15;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");z-index:10}.wrap{max-width:1100px;margin:auto;padding:28px 20px 70px}.top{text-align:center}.top h1{font-size:clamp(32px,6vw,57px);margin:10px 0 6px;letter-spacing:-2px}.top p{font-size:15px;margin:0 0 25px}.room{position:relative;border:9px solid #fff9ed;border-radius:30px;box-shadow:0 14px 45px #9c85604a;overflow:hidden;background:#f9e8d6}.room .hotspot{cursor:pointer;outline:none}.room .hotspot:hover{filter:brightness(1.08)}.room .hotspot:focus-visible{stroke:#d57873;stroke-width:5}.tip{text-align:center;font-size:13px;color:#8b7768;margin:14px 0 28px}.section-title{text-align:center;font-size:25px;margin:35px 0 8px}.section-sub{text-align:center;font-size:13px;color:#927f70;margin-bottom:22px}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.photo{background:#fffaf0;border:1px solid #e6d9c5;border-radius:20px;padding:11px;box-shadow:0 5px 0 #e7dccb}.photo-frame{height:220px;background:#e8e9d9;border-radius:13px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}.photo-frame img{width:100%;height:100%;object-fit:cover}.photo-frame .placeholder{font-size:70px;filter:grayscale(.5)}.sticker-layer{position:absolute;inset:0;pointer-events:none}.sticker{position:absolute;font-size:32px;transform:translate(-50%,-50%) rotate(-12deg);filter:drop-shadow(0 2px 1px #0002)}.photo h3{margin:12px 5px 5px;font-size:16px}.photo .meta{font-size:12px;color:#978474;margin:0 5px 12px}.actions{display:flex;gap:8px;flex-wrap:wrap}.btn{border:1.5px solid #ddcbbb;border-radius:30px;background:#fffdf7;padding:9px 13px;color:var(--ink);cursor:pointer;font:inherit;font-size:13px}.btn:hover{background:#f8e4d6}.btn.primary{background:#edc5bb;border-color:#edc5bb}.btn:focus-visible{outline:3px solid #b8796c}.upload{margin:35px auto 0;max-width:630px;text-align:center;background:#fff9ed;border:2px dashed #d9c5a9;border-radius:24px;padding:22px}.upload input{max-width:100%;margin:12px 0}.upload small{display:block;color:#948270;line-height:1.6}.foot{text-align:center;font-size:12px;color:#9b8878;margin-top:45px}.overlay{position:fixed;inset:0;background:#3b312e9c;z-index:20;display:flex;align-items:center;justify-content:center;padding:18px}.overlay[hidden]{display:none}.modal{background:#fffaf0;width:min(460px,100%);border-radius:25px;padding:22px;box-shadow:0 20px 80px #0004;position:relative}.modal h2{margin:0 0 10px}.modal p{font-size:13px;line-height:1.6}.modal .preview{height:300px;border-radius:16px;background:#e5e8d8;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:90px}.modal .preview img{width:100%;height:100%;object-fit:cover}.close{position:absolute;right:16px;top:12px;border:0;background:transparent;font-size:26px;cursor:pointer}.palette{display:flex;gap:8px;margin:14px 0;flex-wrap:wrap}.palette button{font-size:24px;background:#fff;border:1px solid #e2d2be;border-radius:12px;padding:8px;cursor:pointer}.palette button.active{background:#f6d6cc;border-color:#d98d82}.note{font-size:12px;color:#967f6d}.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#5d5148;color:white;padding:11px 19px;border-radius:30px;z-index:40;font-size:13px;display:none}@media(max-width:700px){.wrap{padding:20px 10px 45px}.gallery{grid-template-columns:1fr 1fr;gap:10px}.photo-frame{height:160px}.photo{padding:8px}.photo h3{font-size:14px}.btn{font-size:12px;padding:8px 10px}}@media(max-width:440px){.gallery{grid-template-columns:1fr}.photo-frame{height:260px}}

/* Illustrated bedroom */
body { background: #f8efdf; color: #44392f; }
.wrap { max-width: none; padding: clamp(10px, 2vw, 24px); }
.top { text-align: left; padding-block: 10px 20px; border-bottom: 1px solid #d7c4a8; }
.top h1 {
  font-family: "Batang", "AppleMyungjo", serif;
  font-size: clamp(34px, 4.6vw, 62px);
  letter-spacing: -.065em;
  line-height: 1.1;
  margin: 0 0 10px;
}
.top p { margin: 0 0 12px; }
.room-section h2 { font-size: clamp(18px, 3vw, 24px); margin: 18px 0 10px; }
.room {
  border: clamp(3px, 1vw, 10px) solid #fff8e8;
  border-radius: 9px 13px 8px 11px;
  box-shadow: 0 1px 0 #d0b897, 0 6px 18px #62462024;
}
.room img { display: block; width: 100%; height: auto; }
.room .room-cat {
  position: absolute;
  left: 70%;
  top: 83%;
  width: 14%;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -100%);
}
.room-cat:focus-visible { outline: 3px solid #562e22; }
.room .hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
  padding-inline: clamp(8px, 1.5vw, 16px);
  border: 1px solid #8c735a;
  border-radius: 9px 12px 8px 11px;
  background: #fff6df;
  color: #493725;
  font: 700 clamp(12px, 1.6vw, 15px)/1.2 "Malgun Gothic", sans-serif;
  box-shadow: 0 2px 4px #46362844;
  white-space: nowrap;
}
.room .hotspot:hover { background: #f4dfac; }
.room .hotspot:focus-visible { outline: 3px solid #562e22; outline-offset: 3px; }
.spot-bed { left: 14%; top: 73%; }
.spot-desk { left: 29%; top: 49%; }
.spot-pole { left: 57%; top: 47%; }
.spot-hammock { left: 73%; top: 46%; }
.spot-house { left: 90%; top: 49%; }
.spot-slide { left: 85%; top: 56%; }
.spot-basket { left: 67%; top: 91%; }
.spot-cat { left: 83%; top: 85%; }
.room .spot-cat { background: #f2d48c; }
.tip { margin: 12px 0 30px; color: #655744; line-height: 1.65; text-align: left; }
.section-title { border-top: 1px solid #d7c4a8; padding-top: 24px; text-align: left; }
.section-sub { text-align: left; color: #655744; }
.photo { border-radius: 8px 11px 7px 10px; background: #fff8e8; }
.photo-frame { border-radius: 5px; }
.modal { max-height: 100%; overflow-y: auto; }

.cat-walk-frame {
  display: none;
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  aspect-ratio: 1;
  background: url("./choripong-walk-soft.png") 0 0 / 200% 200%;
  translate: 0 20%;
}
.room-cat[data-motion="walk"] img,
.room-cat[data-motion="jump"] img { visibility: hidden; }
.room-cat[data-motion="walk"] .cat-walk-frame,
.room-cat[data-motion="jump"] .cat-walk-frame { display: block; }
.room-cat[data-motion="walk"] .cat-walk-frame {
  animation: cat-footsteps 480ms step-end infinite;
}
.room-cat[data-facing="left"] .cat-walk-frame,
.room-cat[data-facing="left"][data-motion="slide"] img { scale: -1 1; }
@keyframes cat-footsteps {
  0% { background-position: 0 0; }
  25% { background-position: 100% 0; }
  50% { background-position: 0 100%; }
  75% { background-position: 100% 100%; }
}
@media (max-width: 540px) {
  .room .hotspot { min-height: 32px; padding-inline: 5px; }
  .spot-hammock { left: 72%; }
  .spot-house { left: 89%; }
  .spot-slide { left: 87%; top: 69%; }
  .spot-cat { left: 89%; top: 83%; }
  .spot-basket { top: 88%; }
}

.room .room-homecam {
  position: absolute;
  left: 14%;
  top: 13.3%;
  width: 4.5%;
  transform: translateX(-50%);
}

.room-rug {
  position: absolute;
  left: 51%;
  top: 78%;
  width: 18%;
  height: 22%;
  transform: translate(-50%, -50%);
  border: 2px solid #8e956d;
  border-radius: 50%;
  background: repeating-linear-gradient(112deg, #fff4d52b 0 1px, transparent 1px 4px),
    radial-gradient(ellipse, #b5bb8b 0 64%, #dad4aa 65% 71%, #a6ad7c 72%);
  box-shadow: 0 2px 3px #66482538;
  cursor: pointer;
}
.room-rug span {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 8px;
  border: 1px solid #8e956d;
  border-radius: 8px;
  background: #fff6df;
  color: #493725;
  font: 700 clamp(10px, 1.3vw, 14px)/1.3 "Malgun Gothic", sans-serif;
  white-space: nowrap;
}
.room .cat-roll-frame {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  transform-origin: 50% 78%;
}
.room-cat[data-motion="roll"] > img:first-child { visibility: hidden; }
.room-cat[data-motion="roll"] .cat-roll-frame {
  display: block;
  animation: cat-roll 1.3s ease-in-out both;
}
@keyframes cat-roll {
  0% { transform: translateX(-12%) rotate(-32deg) scale(.86); }
  35% { transform: translateX(12%) rotate(15deg); }
  65% { transform: translateX(-5%) rotate(-9deg); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .room-cat[data-motion="roll"] .cat-roll-frame { animation: none; }
}

.play-wand { margin-top: 12px; min-height: 44px; }
.play-wand:disabled { cursor: default; opacity: .7; }
.room .room-wand {
  position: absolute;
  left: 59%;
  top: 32%;
  width: 27%;
  z-index: 1;
  transform-origin: 88% 78%;
  pointer-events: none;
}
.room .room-wand[hidden] { display: none; }
.room .cat-hunt-frame {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
}
.room-cat[data-motion="hunt"] > img:first-child { visibility: hidden; }
.room-cat[data-motion="hunt"] .cat-hunt-frame { display: block; }