:root {
  --bg: #f7f2eb;
  --wall: #f5efe7;
  --wall-2: #fbf7f1;
  --floor: #ddcab7;
  --floor-line: rgba(83, 59, 38, .12);
  --ink: #201d1a;
  --muted: #70675f;
  --orange: #ef722f;
  --orange-soft: #f8a06d;
  --glass: rgba(255,255,255,.52);
  --sky-top: #9fd5f3;
  --sky-bottom: #f8d9a2;
  --city: #9d9f9f;
  --city-2: #c5b8aa;
  --sun: #ffd86b;
  --shadow: 0 28px 80px rgba(79, 54, 34, .12);
  --soft-shadow: 0 12px 30px rgba(79, 54, 34, .10);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body {
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Noto Sans Thai", Tahoma, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.landing {
  position: relative;
  width: 100vw;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background:
    radial-gradient(1000px 520px at 55% 4%, rgba(255,255,255,.9), transparent 72%),
    linear-gradient(180deg, var(--wall-2), var(--wall));
  isolation: isolate;
  transition: background 1.2s ease, color 1.2s ease;
}

.ambient {
  position: absolute;
  border-radius: 999px;
  filter: blur(10px);
  pointer-events: none;
  opacity: .45;
  z-index: -1;
}
.ambient-a { width: 48vw; height: 48vw; top: -28vw; right: -12vw; background: rgba(239,114,47,.14); }
.ambient-b { width: 34vw; height: 34vw; bottom: -23vw; left: -14vw; background: rgba(239,114,47,.09); }

.condo {
  position: absolute;
  inset: clamp(18px, 3vw, 46px) clamp(18px, 4.2vw, 70px) 54px;
  overflow: hidden;
  border: 1px solid rgba(85,66,50,.08);
  border-radius: clamp(24px, 3vw, 42px);
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.32));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter: blur(14px);
}

.ceiling-line { position: absolute; left: 0; right: 0; top: 12.5%; height: 1px; background: rgba(83,59,38,.08); }
.floor-line { position: absolute; left: 0; right: 0; bottom: 24%; height: 1px; background: var(--floor-line); }
.floor-line::after {
  content: "";
  position: absolute; inset: 0 0 auto;
  height: 250px;
  background: linear-gradient(180deg, transparent, rgba(194,166,139,.18));
}

.window {
  position: absolute;
  width: 35%; height: 52%;
  right: 5.3%; top: 8%;
  border-radius: 28px;
  overflow: hidden;
  border: 10px solid rgba(255,255,255,.72);
  box-shadow: var(--soft-shadow), inset 0 0 0 1px rgba(53,50,47,.08);
  background: linear-gradient(180deg, var(--sky-top), var(--sky-bottom));
  transition: background 1.2s ease;
}
.sky-glow { position:absolute; inset:0; background: radial-gradient(circle at 65% 26%, rgba(255,255,255,.55), transparent 31%); }
.sun-moon {
  position: absolute; width: 54px; height: 54px; border-radius: 50%; right: 14%; top: 14%;
  background: var(--sun); box-shadow: 0 0 60px rgba(255,216,107,.42);
  transition: all 1.2s ease;
}
.city { position:absolute; left:0; right:0; bottom:0; }
.city::before, .city::after { content:""; position:absolute; bottom:0; background: currentColor; }
.city-back { height: 33%; color: var(--city-2); opacity:.72; }
.city-back::before { left: 3%; width: 13%; height: 62%; box-shadow: 78px 14px 0 currentColor, 158px -2px 0 currentColor, 238px 22px 0 currentColor, 316px -9px 0 currentColor; }
.city-back::after { left: 48%; width: 10%; height: 94%; box-shadow: 66px 22px 0 currentColor, 138px 7px 0 currentColor; }
.city-front { height: 23%; color: var(--city); opacity:.86; }
.city-front::before { left: 0; width: 17%; height: 100%; box-shadow: 92px -8px 0 currentColor, 190px 17px 0 currentColor, 286px -2px 0 currentColor, 366px 21px 0 currentColor; }
.window-frame { position:absolute; background: rgba(255,255,255,.65); z-index:2; }
.window-frame-v { width: 6px; top:0; bottom:0; left:50%; transform:translateX(-50%); }
.window-frame-h { height: 6px; left:0; right:0; top:57%; }

.wall-art { position:absolute; border-radius: 22px; border: 8px solid rgba(255,255,255,.65); box-shadow: var(--soft-shadow); }
.wall-art-a { left: 5.5%; top: 10%; width: 11%; height: 18%; background: linear-gradient(145deg,#ef722f 0 34%, #ffccad 35% 68%, #e7d5c3 69%); transform: rotate(-1.5deg); }
.wall-art-b { left: 18.2%; top: 11.5%; width: 8%; height: 13%; background: radial-gradient(circle at 70% 35%,#fff 0 12%,transparent 13%), linear-gradient(145deg,#d7c2ae,#efe3d7); transform: rotate(2deg); }

.shelf { position:absolute; left: 7%; top: 33%; width: 18%; height: 9px; border-radius:9px; background:#b89472; box-shadow:0 8px 15px rgba(72,54,40,.1); }
.book { position:absolute; bottom:9px; width:12px; border-radius:4px 4px 1px 1px; }
.book-1 { left:30%; height:48px; background:#ef722f; transform:rotate(-4deg); }
.book-2 { left:37%; height:39px; background:#d4b99e; }
.book-3 { left:44%; height:44px; background:#6f6a64; transform:rotate(3deg); }

.plant { position:absolute; right: 4.5%; bottom: 21.5%; width: 105px; height: 170px; z-index:3; }
.pot { position:absolute; bottom:0; left:25px; width:62px; height:66px; border-radius:12px 12px 24px 24px; background:#d98955; box-shadow:var(--soft-shadow); }
.leaf { position:absolute; width:42px; height:80px; background:#77926a; border-radius:90% 10% 90% 10%; transform-origin: bottom center; bottom:52px; left:36px; }
.leaf-1 { transform:rotate(-33deg); }
.leaf-2 { transform:rotate(7deg) scale(.92); background:#86a478; }
.leaf-3 { transform:rotate(38deg) scale(.82); }
.leaf-4 { transform:rotate(66deg) scale(.68); background:#9ab08b; }

.sofa { position:absolute; left: 15%; bottom: 18%; width: 41%; height: 24%; z-index:2; }
.sofa-back { position:absolute; left:4%; right:4%; top:0; height:58%; border-radius:38px 38px 18px 18px; background:#e3d4c5; box-shadow:var(--soft-shadow); }
.sofa-seat { position:absolute; left:0; right:0; bottom:0; height:52%; border-radius:20px 20px 32px 32px; background:#d9c7b6; box-shadow:inset 0 1px 0 rgba(255,255,255,.75), var(--soft-shadow); }
.sofa-arm { position:absolute; bottom:0; width:14%; height:53%; border-radius:24px; background:#cfbba9; }
.sofa-arm-l { left:-4%; } .sofa-arm-r { right:-4%; }
.cushion { position:absolute; top:21%; width:21%; height:40%; border-radius:20px; box-shadow:0 8px 18px rgba(77,56,39,.08); }
.cushion-a { left:11%; background:#f1e6db; transform:rotate(-5deg); }
.cushion-b { right:14%; background:#ef8b52; transform:rotate(6deg); }

.side-table { position:absolute; left: 61%; bottom: 21%; width:100px; height:110px; z-index:2; }
.table-top { position:absolute; top:8px; left:0; width:100px; height:15px; border-radius:50%; background:#9b765a; box-shadow:var(--soft-shadow); }
.table-leg { position:absolute; top:20px; left:47px; width:7px; height:78px; background:#8f6a4f; }
.mug { position:absolute; top:-15px; left:50px; width:29px; height:30px; border-radius:7px 7px 10px 10px; background:#fbf6ef; border:1px solid rgba(83,59,38,.1); }
.mug::after { content:""; position:absolute; right:-10px; top:7px; width:11px; height:13px; border:3px solid #fbf6ef; border-left:0; border-radius:0 9px 9px 0; }
.rug { position:absolute; left: 29%; bottom: 5.2%; width: 43%; height: 19%; border-radius:50%; background:rgba(234,157,104,.18); transform:skewX(-3deg); filter:blur(.2px); }

.brand-block {
  position:absolute; z-index:8; left:50%; top:46%; transform:translate(-50%,-50%);
  width:min(680px, 52vw); text-align:center; pointer-events:none;
}
.eyebrow { font-size:10px; font-weight:700; letter-spacing:.32em; color:var(--orange); opacity:.82; margin-bottom:9px; }
h1 { margin:0; font-size:clamp(68px, 8.4vw, 154px); line-height:.87; letter-spacing:-.075em; font-weight:760; color:var(--ink); text-shadow:0 1px 0 rgba(255,255,255,.8); }
.tagline-th { margin:22px 0 0; font-size:clamp(15px,1.12vw,20px); font-weight:590; letter-spacing:-.02em; }
.tagline-en { margin:5px 0 0; font-size:clamp(11px,.8vw,14px); color:var(--muted); letter-spacing:.01em; }
.footer { position:absolute; left:clamp(26px,4.8vw,76px); right:clamp(26px,4.8vw,76px); bottom:18px; display:flex; justify-content:space-between; align-items:center; font-size:10px; color:var(--muted); letter-spacing:.03em; z-index:9; }
.scene-label { opacity:.6; text-transform:uppercase; letter-spacing:.16em; }

/* Cats */
.cat {
  --fur: #8c8174; --fur-dark:#5e554c; --fur-light:#b6a99b; --chest:#efe8df; --nose:#7c5147;
  position:absolute; z-index:6; width:112px; height:104px; cursor:default;
  filter: drop-shadow(0 15px 12px rgba(66,45,29,.12));
  transform-origin: 50% 90%;
  opacity:0;
  animation: catEnter .9s cubic-bezier(.2,.8,.2,1) forwards;
  -webkit-tap-highlight-color:transparent;
}
.cat::after { content:""; position:absolute; left:20%; right:18%; bottom:4px; height:13px; border-radius:50%; background:rgba(75,53,37,.12); filter:blur(5px); z-index:-1; }
.cat .body { position:absolute; left:22px; bottom:13px; width:71px; height:62px; border-radius:52% 48% 44% 42%; background:var(--fur); box-shadow:inset -10px -7px 0 rgba(62,49,38,.08); }
.cat .body::before, .cat .body::after { content:""; position:absolute; width:8px; height:29px; border-radius:8px; background:var(--fur-dark); opacity:.55; transform:rotate(16deg); }
.cat .body::before { left:19px; top:10px; } .cat .body::after { left:39px; top:13px; height:24px; }
.cat .head { position:absolute; left:16px; top:4px; width:72px; height:62px; border-radius:48% 48% 44% 44%; background:var(--fur); box-shadow:inset -8px -5px 0 rgba(62,49,38,.07); z-index:3; }
.ear { position:absolute; width:27px; height:31px; top:-11px; background:var(--fur); clip-path:polygon(50% 0, 100% 100%, 0 100%); }
.ear::after { content:""; position:absolute; width:13px; height:16px; left:7px; top:8px; background:#d79b91; clip-path:polygon(50% 0,100% 100%,0 100%); opacity:.72; }
.ear-l { left:4px; transform:rotate(-8deg); } .ear-r { right:4px; transform:rotate(8deg); }
.eye { position:absolute; top:24px; width:15px; height:13px; border-radius:50%; background:#f7e8a5; box-shadow:inset 0 0 0 1px rgba(41,33,27,.1); overflow:hidden; }
.eye-l { left:14px; } .eye-r { right:14px; }
.pupil { position:absolute; width:5px; height:8px; border-radius:50%; background:#20201d; left:5px; top:3px; transform:translate(var(--eye-x,0),var(--eye-y,0)); transition:transform .08s linear; }
.sleepy-eye { height:4px; top:29px; border-radius:100% 100% 10% 10%; background:#4b4038; }
.sleepy-eye .pupil { display:none; }
.wink { height:3px; top:30px; background:#4b4038; border-radius:50%; }
.wink .pupil { display:none; }
.muzzle { position:absolute; left:26px; top:38px; width:22px; height:16px; border-radius:50%; background:rgba(244,235,225,.88); }
.nose { position:absolute; left:34px; top:39px; width:7px; height:5px; border-radius:60% 60% 70% 70%; background:var(--nose); z-index:2; }
.stripe { position:absolute; background:var(--fur-dark); opacity:.64; border-radius:999px; }
.stripe-head-1 { top:7px; left:31px; width:8px; height:18px; transform:rotate(-5deg); }
.stripe-head-2 { top:8px; left:43px; width:6px; height:15px; transform:rotate(12deg); }
.paw { position:absolute; bottom:7px; width:25px; height:16px; border-radius:50%; background:var(--fur-light); z-index:4; }
.paw-l { left:24px; } .paw-r { left:55px; }
.tail { position:absolute; background:var(--fur); z-index:1; }
.bobtail { width:31px; height:23px; border-radius:60% 55% 50% 60%; right:1px; bottom:23px; transform:rotate(18deg); }
.long-tail { width:70px; height:17px; border-radius:999px; right:-47px; bottom:23px; transform-origin:left center; transform:rotate(-22deg); }
.long-tail::after { content:""; position:absolute; right:7px; top:4px; width:20px; height:5px; border-radius:999px; background:var(--fur-dark); opacity:.55; }
.bent-tail { width:67px; height:16px; border-radius:999px; right:-44px; bottom:25px; transform:rotate(-24deg); }
.bent-tail::after { content:""; position:absolute; right:-7px; top:-8px; width:28px; height:15px; border-radius:999px; background:var(--fur); transform:rotate(55deg); transform-origin:left center; }
.chest { position:absolute; left:42px; top:55px; width:31px; height:34px; background:var(--chest); border-radius:50%; z-index:2; opacity:.82; }
.belly { position:absolute; left:49px; bottom:12px; width:48px; height:42px; border-radius:50%; background:var(--fur-light); z-index:2; opacity:.58; }
.white-patch { position:absolute; left:37px; top:48px; width:39px; height:40px; background:#f7f1e9; border-radius:42% 55% 48% 50%; z-index:2; }
.ruff { position:absolute; left:24px; top:43px; width:67px; height:44px; border-radius:48%; background:var(--fur-light); z-index:2; filter:drop-shadow(0 2px 0 rgba(255,255,255,.2)); }
.brow { position:absolute; top:20px; width:17px; height:3px; border-radius:4px; background:var(--fur-dark); z-index:5; }
.brow-l { left:10px; transform:rotate(13deg); } .brow-r { right:10px; transform:rotate(-13deg); }
.z { position:absolute; color:var(--orange); font-weight:800; opacity:.65; font-size:14px; }
.z1 { left:84px; top:0; animation:floatZ 2.3s ease-in-out infinite; }
.z2 { left:98px; top:-13px; font-size:10px; animation:floatZ 2.3s .8s ease-in-out infinite; }

.cat-jenny { --fur:#9a8875; --fur-dark:#6c5a48; --fur-light:#c2a777; width:132px; height:112px; left:19%; bottom:29%; animation-delay:.15s; transform:translateX(-70px) rotate(-2deg); }
.cat-jenny .body { width:86px; height:67px; }
.cat-jenny .head { left:7px; top:16px; transform:rotate(-8deg); }
.cat-jenny .paw { bottom:6px; }
.cat-jenny .tail { right:4px; bottom:24px; }

.cat-euro { --fur:#aaa9a5; --fur-dark:#70716f; --fur-light:#d7d6d2; left:42%; bottom:36%; transform:translateY(-70px); animation-delay:.42s; }
.cat-huangae { --fur:#535251; --fur-dark:#2e2e2d; --fur-light:#777572; --chest:#aaa7a1; left:16.7%; top:24%; transform:translateY(-70px); animation-delay:.68s; }
.cat-tadiao { --fur:#8e8172; --fur-dark:#554d45; --fur-light:#b7a995; left:59%; bottom:14%; transform:translateX(130px) rotate(4deg); animation-delay:.92s; }
.cat-namphet { --fur:#dd914f; --fur-dark:#9b5b2c; --fur-light:#f4c699; --chest:#fff3e7; left:68%; bottom:31%; transform:translateY(70px); animation-delay:1.16s; }
.cat-namploy { --fur:#e4a061; --fur-dark:#a76c37; --fur-light:#f2c79c; --chest:#f7eee4; right:17%; bottom:17%; transform:translateX(70px); animation-delay:1.38s; }
.cat-namploy .head { width:76px; height:66px; left:13px; }
.cat-hanghak { --fur:#666463; --fur-dark:#3e3d3c; --fur-light:#8f8b88; right:7%; top:33%; transform:translateX(80px); animation-delay:1.62s; }

.cat-sit .body { height:70px; width:62px; left:26px; border-radius:45% 45% 34% 34%; }
.cat-sit .paw { bottom:4px; }

/* idle motions */
.cat-sleepy .body { animation:breathe 3.8s ease-in-out infinite; }
.cat-sleepy .head { animation:sleepHead 5s ease-in-out infinite; }
.cat-euro { animation-name:catEnter, gentleBob; animation-duration:.9s, 6.2s; animation-delay:.42s, 2.2s; animation-timing-function:cubic-bezier(.2,.8,.2,1), ease-in-out; animation-fill-mode:forwards, both; animation-iteration-count:1, infinite; }
.cat-tadiao { animation-name:catEnter, playfulHop; animation-duration:.9s, 5.6s; animation-delay:.92s, 2.4s; animation-timing-function:cubic-bezier(.2,.8,.2,1), cubic-bezier(.4,0,.2,1); animation-fill-mode:forwards, both; animation-iteration-count:1, infinite; }
.cat-tadiao .long-tail { animation:tailWhip 1.6s ease-in-out infinite; }
.cat-huangae { animation-name:catEnter, grumpyShift; animation-duration:.9s, 8s; animation-delay:.68s, 3s; animation-timing-function:cubic-bezier(.2,.8,.2,1), ease-in-out; animation-fill-mode:forwards, both; animation-iteration-count:1, infinite; }
.cat-nuzzle { animation-name:catEnter, nuzzle; animation-duration:.9s, 4.8s; animation-timing-function:cubic-bezier(.2,.8,.2,1), ease-in-out; animation-fill-mode:forwards, both; animation-iteration-count:1, infinite; }
.cat-namphet { animation-delay:1.16s, 2.7s; }
.cat-namploy { animation-delay:1.38s, 3.4s; }
.cat-hanghak { animation-name:catEnter, curiousTilt; animation-duration:.9s, 4.5s; animation-delay:1.62s, 3.6s; animation-timing-function:cubic-bezier(.2,.8,.2,1), ease-in-out; animation-fill-mode:forwards, both; animation-iteration-count:1, infinite; }
.cat-hanghak .bent-tail { animation:tailWhip 2.6s ease-in-out infinite; }

@keyframes catEnter { to { opacity:1; transform:translate(0,0) rotate(0); } }
@keyframes breathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.03,.98)} }
@keyframes sleepHead { 0%,100%{transform:rotate(-8deg) translateY(0)} 50%{transform:rotate(-10deg) translateY(2px)} }
@keyframes gentleBob { 0%,86%,100%{transform:translateY(0)} 91%{transform:translateY(-2px)} 96%{transform:translateY(0)} }
@keyframes playfulHop { 0%,72%,100%{transform:translateY(0) rotate(0)} 77%{transform:translateY(-12px) rotate(-3deg)} 82%{transform:translateY(0) rotate(2deg)} 88%{transform:translateY(-4px) rotate(0)} }
@keyframes grumpyShift { 0%,88%,100%{transform:translateX(0)} 92%{transform:translateX(-3px)} 95%{transform:translateX(2px)} }
@keyframes nuzzle { 0%,72%,100%{transform:translate(0,0) rotate(0)} 78%{transform:translate(-5px,-2px) rotate(-4deg)} 85%{transform:translate(2px,0) rotate(3deg)} }
@keyframes curiousTilt { 0%,66%,100%{transform:rotate(0)} 74%{transform:rotate(5deg)} 82%{transform:rotate(-6deg)} 90%{transform:rotate(0)} }
@keyframes tailWhip { 0%,100%{rotate:0deg} 50%{rotate:14deg} }
@keyframes floatZ { 0%,100%{transform:translate(0,0);opacity:.15} 40%{opacity:.7} 70%{transform:translate(6px,-9px);opacity:.25} }

.cat-toast { position:absolute; left:50%; top:14%; transform:translateX(-50%) translateY(-10px); opacity:0; pointer-events:none; padding:9px 14px; border-radius:999px; background:rgba(255,255,255,.72); box-shadow:var(--soft-shadow); backdrop-filter:blur(12px); font-size:12px; color:var(--ink); z-index:20; transition:.25s ease; }
.cat-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.paw-burst { position:absolute; inset:0; pointer-events:none; z-index:19; }
.paw-pop { position:absolute; font-size:22px; animation:pawPop 1.1s ease-out forwards; }
@keyframes pawPop { 0%{opacity:0;transform:translateY(10px) scale(.6) rotate(0)} 20%{opacity:1} 100%{opacity:0;transform:translateY(-90px) scale(1.25) rotate(28deg)} }

/* scene variants */
.landing[data-scene="2"] .wall-art-a { transform:rotate(3deg); left:6.5%; }
.landing[data-scene="2"] .cat-huangae { left:23%; top:27%; }
.landing[data-scene="2"] .cat-hanghak { right:10%; top:26%; }
.landing[data-scene="2"] .plant { right:8%; }
.landing[data-scene="3"] .shelf { left:10%; width:15%; }
.landing[data-scene="3"] .cat-euro { left:38%; }
.landing[data-scene="3"] .cat-namphet { left:73%; bottom:34%; }
.landing[data-scene="3"] .cat-tadiao { left:56%; bottom:12%; }

/* time themes */
.landing[data-time="morning"] { --wall:#f5efe6; --wall-2:#fffaf3; --sky-top:#bde2f6; --sky-bottom:#fbe4b4; --sun:#ffd772; }
.landing[data-time="day"] { --wall:#f4efe8; --wall-2:#fbf8f4; --sky-top:#8fd0f2; --sky-bottom:#f3d7b2; --sun:#ffe07a; }
.landing[data-time="evening"] { --wall:#e8d7ca; --wall-2:#f6e8df; --sky-top:#d28e87; --sky-bottom:#f4b06e; --sun:#ffb25c; --ink:#2b211d; --muted:#715f56; }
.landing[data-time="night"] { --wall:#1e242a; --wall-2:#262c31; --sky-top:#111b2d; --sky-bottom:#33405a; --sun:#e9edf8; --ink:#f5efe9; --muted:#bbb5ae; --glass:rgba(255,255,255,.08); --floor-line:rgba(255,255,255,.06); --shadow:0 28px 90px rgba(0,0,0,.35); --soft-shadow:0 12px 30px rgba(0,0,0,.22); }
.landing[data-time="night"] .condo { background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03)); border-color:rgba(255,255,255,.08); }
.landing[data-time="night"] .sun-moon { width:43px; height:43px; box-shadow:0 0 45px rgba(231,237,255,.24); }
.landing[data-time="night"] .sun-moon::after { content:""; position:absolute; width:43px; height:43px; border-radius:50%; background:var(--sky-top); left:14px; top:-8px; }
.landing[data-time="night"] .window { border-color:rgba(255,255,255,.16); }
.landing[data-time="night"] .window-frame { background:rgba(255,255,255,.14); }
.landing[data-time="night"] .wall-art { opacity:.72; border-color:rgba(255,255,255,.12); }
.landing[data-time="night"] .sofa-back { background:#5d5b5b; }
.landing[data-time="night"] .sofa-seat { background:#514f50; }
.landing[data-time="night"] .sofa-arm { background:#474647; }
.landing[data-time="night"] .cushion-a { background:#777170; }
.landing[data-time="night"] .side-table, .landing[data-time="night"] .plant { filter:brightness(.75); }
.landing[data-time="night"] .eyebrow { color:#ff9b63; }
.landing[data-time="night"] .tagline-en, .landing[data-time="night"] .footer { color:#c5bfb9; }

/* Mobile */
@media (max-width: 760px) {
  body { overflow:hidden; }
  .landing { min-height:560px; }
  .condo { inset:12px 12px 46px; border-radius:28px; }
  .window { width:57%; height:39%; right:5%; top:6%; border-width:7px; border-radius:21px; }
  .wall-art-a { left:7%; top:8%; width:18%; height:13%; border-width:5px; }
  .wall-art-b, .shelf { display:none; }
  .plant { right:2%; bottom:20%; transform:scale(.68); transform-origin:bottom right; }
  .sofa { left:10%; width:58%; height:20%; bottom:18%; }
  .side-table { left:68%; bottom:19%; transform:scale(.72); transform-origin:bottom left; }
  .rug { left:17%; width:68%; bottom:4%; }
  .brand-block { top:45%; width:88%; }
  .eyebrow { font-size:8px; letter-spacing:.24em; }
  h1 { font-size:clamp(72px,22vw,110px); }
  .tagline-th { margin-top:16px; font-size:14px; }
  .tagline-en { font-size:10px; }
  .cat { transform:scale(.72); transform-origin:bottom center; }
  .cat-jenny { left:8%; bottom:27%; }
  .cat-euro { left:40%; bottom:33%; }
  .cat-huangae { left:8%; top:26%; }
  .cat-tadiao { left:54%; bottom:9%; }
  .cat-namphet { left:62%; bottom:26%; }
  .cat-namploy { right:6%; bottom:14%; }
  .cat-hanghak { right:4%; top:29%; }
  .cat[data-mobile-hidden="true"] { display:none; }
  .footer { left:20px; right:20px; bottom:15px; font-size:9px; }
  .scene-label { display:none; }
}

@media (max-height: 700px) and (min-width: 761px) {
  .condo { inset:16px 30px 45px; }
  .brand-block { top:43%; transform:translate(-50%,-50%) scale(.88); }
  .window { height:48%; }
  .sofa { bottom:13%; transform:scale(.92); transform-origin:bottom left; }
  .cat { transform:scale(.86); }
  .cat-jenny { bottom:23%; }
  .cat-euro { bottom:29%; }
  .cat-namphet { bottom:25%; }
  .cat-namploy { bottom:12%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.15s !important; }
  .cat { opacity:1; transform:none !important; }
  .pupil { transform:none !important; }
  .z { display:none; }
}