:root{color-scheme:light;font-family:"Segoe UI",system-ui,-apple-system,sans-serif;color:#3d4543;background:#f1f0ec;font-synthesis:none}
*{box-sizing:border-box}
html,body{margin:0;min-width:280px;min-height:100%;-webkit-font-smoothing:antialiased}
body{min-height:100svh;background:radial-gradient(ellipse at 50% 35%,#faf9f6 0%,#f1f0ec 80%)}
.holding{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:38px 30px 32px}
.scene{position:relative;width:min(1120px,100%,calc((100svh - 175px)*1.5));aspect-ratio:3/2;overflow:hidden;background:#e2ded5;isolation:isolate;border-radius:3px;box-shadow:0 24px 64px -30px #302a272b;touch-action:pan-y}
.room,#living-photo{display:block;position:absolute;width:100%;height:100%;inset:0;object-fit:cover;object-position:50% 50%}
.room{transform:scale(1.035);transition:transform 1.3s cubic-bezier(.22,.61,.36,1)}
.scene.fallback .room{transform:scale(1.035) translate(calc(var(--x,0)*-5px),calc(var(--y,0)*-4px))}
#living-photo{opacity:0;transition:opacity .8s;pointer-events:none}
.scene.ready #living-photo{opacity:1}
.photo-shade{position:absolute;inset:60% 0 0;background:linear-gradient(transparent,#211b161c);pointer-events:none}
.controls{position:absolute;left:22px;bottom:21px;display:flex;align-items:center;gap:14px;padding:5px 14px 5px 5px;border:1px solid #ffffff6b;border-radius:40px;background:#fff9;backdrop-filter:blur(16px);box-shadow:0 2px 12px #00000004;color:#404e49}
button{font:inherit;color:inherit;cursor:pointer}button:disabled,input:disabled{cursor:default}
#breeze{border:0;border-radius:30px;background:transparent;display:flex;align-items:center;gap:8px;min-height:38px;padding:8px 10px;font-size:12px;letter-spacing:.1px;transition:background .2s}
#breeze:hover{background:#ffffff80}.wind-icon{width:20px;height:20px;stroke:currentColor;stroke-width:1.35;stroke-linecap:round}#play-state{font-size:11px;opacity:.65;margin-left:3px;min-width:9px;text-align:center}
.speed{display:flex;align-items:center;gap:10px;border-left:1px solid #b5c0b859;padding-left:14px;font-size:10px;color:#56635d}
input[type=range]{appearance:none;-webkit-appearance:none;background:transparent;width:72px;height:25px;margin:0;cursor:pointer;accent-color:#526b60}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:#9eaea39c;border-radius:2px}
input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:#546b60;margin-top:-4px;box-shadow:0 0 0 3px #ffffff61}
input[type=range]::-moz-range-track{height:2px;background:#9eaea39c;border-radius:2px}
input[type=range]::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:#546b60}
button:focus-visible,input:focus-visible{outline:2px solid #315f50;outline-offset:4px}
.pointer-hint{position:absolute;right:24px;bottom:35px;font-size:10px;letter-spacing:.2px;color:#fff;text-shadow:0 1px 8px #0008}
.caption{text-align:center;padding-top:27px}.status{font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:#7b817b;margin:0 0 9px}h1{font-size:clamp(20px,2.3vw,28px);font-weight:400;letter-spacing:-.6px;line-height:1.25;margin:0}.no-script{font-size:11px;color:#727772}
@media(max-width:640px){.holding{padding:18px 14px 24px;justify-content:center}.scene{width:min(100%,480px);height:auto;min-height:0;aspect-ratio:1/1;border-radius:2px}.room{object-position:52% 50%}.caption{padding-top:23px}.status{font-size:9px;letter-spacing:1.5px}h1{font-size:23px}.controls{left:50%;transform:translateX(-50%);bottom:18px;white-space:nowrap;gap:9px;padding-right:12px}#breeze{font-size:11px;gap:7px}.speed{padding-left:10px;gap:8px}.pointer-hint{display:none}}
@media(max-height:520px) and (min-width:641px){.holding{padding:16px 24px;flex-direction:row;gap:28px}.scene{width:auto;height:calc(100svh - 32px);aspect-ratio:3/2}.caption{padding:0;flex-shrink:0}h1{font-size:20px}.pointer-hint{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.scene.fallback .room{transform:scale(1.035)}.pointer-hint{display:none}}
@media(pointer:coarse){.pointer-hint{display:none}}
