@font-face{font-family:DM Sans;font-style:normal;font-weight:400 700;font-display:swap;src:url(/stylized-dioramas/asia/fonts/dm-sans-latin.woff2) format("woff2")}@font-face{font-family:Manrope;font-style:normal;font-weight:400 700;font-display:swap;src:url(/stylized-dioramas/asia/fonts/manrope-latin.woff2) format("woff2")}:root{font-family:DM Sans,sans-serif;color:#36483e;background:#e8e9e1;font-synthesis:none;--ink:#36483e;--muted:#7b8578;--paper:#f4f3eaf0;--line:#52644922}*{box-sizing:border-box}body{margin:0;overflow:hidden;width:100vw;height:100dvh;transition:color 1.6s,background 1.6s}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #668468;outline-offset:5px}button{border:0;background:none}svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}#scene{position:fixed;inset:0}#scene canvas{display:block;width:100%;height:100%;outline:none;cursor:grab;touch-action:none}#scene canvas:active{cursor:grabbing}header{position:absolute;top:35px;left:43px;right:38px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.brand{display:flex;gap:13px;align-items:center;color:inherit;text-decoration:none;pointer-events:auto;font-family:Manrope,sans-serif;font-size:13px;letter-spacing:2.2px;font-weight:700}.seal{width:40px;height:43px;border:1px solid #53614c6b;border-radius:3px;display:grid;place-items:center;font-size:28px;font-family:serif;font-weight:400;letter-spacing:0}.brand small{display:block;font-size:7.6px;letter-spacing:2px;font-weight:600;margin-top:5px;color:var(--muted)}.header-actions{display:flex;align-items:center;gap:23px;pointer-events:auto}.quiet-button{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.3px;opacity:.8;transition:opacity .2s}.quiet-button:hover{opacity:1}.quiet-button svg{width:18px}.sound-waves{display:none}.sound-on .sound-waves{display:block}.sound-on .sound-off{display:none}.icon-button{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;transition:background .2s,transform .2s}.icon-button:hover{background:#70896918}.icon-button:active,.tool-button:active{transform:scale(.95)}.intro{position:absolute;top:19.5%;left:46px;pointer-events:none}.eyebrow{display:flex;align-items:center;gap:9px;font-size:9px;font-weight:600;letter-spacing:1.8px}.eyebrow>span{width:19px;height:1px;background:#829174}.eyebrow i{font-size:9px;font-style:normal;color:#8f998a;margin-left:7px}h1{font-family:Georgia,Times New Roman,serif;font-weight:400;font-size:clamp(42px,4.45vw,70px);line-height:1.02;letter-spacing:-2.7px;margin:24px 0 22px}h1 em{font-weight:400;color:#708265}.intro p{font-size:12px;line-height:1.85;letter-spacing:.15px;color:#7c8475;margin:0}.japanese{font-family:serif;font-size:17px;letter-spacing:5px;display:flex;align-items:center;gap:12px;margin-top:29px;color:#6f7e65}.japanese span{font-family:DM Sans,sans-serif;font-size:10px;letter-spacing:1px;font-style:italic;color:#8a9183}.scene-caption{position:absolute;right:42px;top:45%;display:flex;align-items:flex-start;gap:12px;writing-mode:vertical-rl;font-size:10px;letter-spacing:1.5px;line-height:1.8;color:#6d7b66;pointer-events:none}.caption-line{height:28px;width:1px;background:#7b8a6666;margin:0 4px 8px}.scene-caption small{font-size:8px;letter-spacing:.7px;color:#8a9480}.toolbar{position:absolute;bottom:77px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:8px;background:var(--paper);border:1px solid #ffffffaa;box-shadow:0 6px 30px #26372a0a,0 1px 3px #26372a08;border-radius:13px;padding:8px 11px;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);white-space:nowrap}.time-controls{display:flex;align-items:center;gap:1px;background:#60724c0a;border-radius:8px;padding:3px}.time-button{height:34px;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:6px;padding:0 10px;color:#84907c;font-size:10px;transition:background .3s,color .3s,box-shadow .3s}.time-button svg{width:17px;height:17px}.time-button.active{background:#fffef6;color:#475a3c;box-shadow:0 1px 5px #324e3410}.time-button:not(.active) span{display:none}.time-button:hover{color:#475a3c}.divider{height:20px;width:1px;background:var(--line);margin:0 4px}.tool-button{display:flex;align-items:center;gap:8px;padding:0 8px;height:38px;font-size:11px;transition:transform .2s,opacity .2s}.tool-button svg{width:22px}.tool-button:hover{opacity:.65}.toolbar .icon-button{width:32px;height:34px;border-radius:7px}.toolbar .icon-button svg{width:18px;height:18px}.play-icon{display:none}.paused .play-icon{display:block}.paused .pause-icon{display:none}footer{position:absolute;bottom:29px;left:45px;right:42px;display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#828a7b;pointer-events:none}.live-label{display:flex;align-items:center;gap:7px;font-size:8px;letter-spacing:1.5px}.live-label>span{width:5px;height:5px;background:#81966d;border-radius:50%;box-shadow:0 0 0 3px #81966d14}.instructions{display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:.2px}.instructions svg{width:15px;height:15px;margin-right:3px;opacity:.8}.instructions b{font-weight:400;opacity:.5;margin:0 2px}.made-with{font-family:Georgia,serif;font-style:italic;font-size:11px;opacity:.9}#toast{position:absolute;bottom:155px;left:50%;transform:translate(-50%,8px);padding:10px 18px;border-radius:30px;font-size:11px;letter-spacing:.2px;background:var(--paper);box-shadow:0 4px 20px #26372a06;opacity:0;transition:opacity .4s,transform .4s;pointer-events:none;white-space:nowrap}#toast.visible{opacity:1;transform:translate(-50%)}#loading{position:fixed;inset:0;z-index:20;background:#e8e9e1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity .8s,visibility .8s;font-size:11px;letter-spacing:1.3px;color:#7c8872}#loading.loaded{opacity:0;visibility:hidden}.loading-seal{border:1px solid #53614c6b;border-radius:4px;padding:5px 12px;font-family:serif;font-size:36px;animation:breathe 2s ease-in-out infinite}@keyframes breathe{50%{opacity:.4;transform:translateY(-3px)}}dialog{max-width:430px;width:calc(100vw - 40px);padding:44px;background:#f2f2e8;color:#46583d;border:1px solid #fff7;border-radius:15px;box-shadow:0 20px 100px #1b2d2a26}dialog::backdrop{background:#26382c35;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}dialog .close{position:absolute;right:14px;top:14px}dialog .eyebrow{font-size:8px;letter-spacing:2px}dialog h2{font-family:serif;font-weight:400;font-size:39px;letter-spacing:9px;margin:28px 0 5px}dialog h3{font-family:Georgia,serif;font-style:italic;font-size:23px;font-weight:400;margin:0 0 26px}dialog p{font-size:12px;line-height:1.9;color:#79826f}dialog small{display:block;font-size:9px;color:#9b9f92;line-height:1.6;margin-top:24px}.about-instructions{display:grid;grid-template-columns:1fr 1.65fr;gap:12px;font-size:10px;border-top:1px solid #74806620;margin-top:25px;padding-top:23px}.about-instructions span:nth-child(2n){color:#8a907e}body.night{--ink:#d9ddd0;--muted:#929ea8;--paper:#263642ed;--line:#bacbcb22;color:var(--ink)}.night h1 em,.night .japanese{color:#abb69f}.night .intro p,.night footer,.night .scene-caption{color:#9dadae}.night .eyebrow>span{background:#a5b696}.night .time-button{color:#9ba9b0}.night .time-button.active{background:#53615f;color:#e6e7ce}.night .toolbar{border-color:#b2c8c321}.night .seal{border-color:#c1cab35c}.night #toast{color:#d9ddd0}.night .japanese span,.night .scene-caption small{color:#8c9c9e}@media(min-width:1600px){.intro{left:4.5vw;top:23%}header{left:4.5vw;right:4vw}footer{left:4.5vw;right:4vw}.scene-caption{right:4vw}}@media(max-width:1050px){.intro{top:17%;left:30px}h1{font-size:48px}.intro p{font-size:10px}.eyebrow{font-size:8px;letter-spacing:1px}.scene-caption{right:22px}.made-with{display:none}header{left:30px;right:25px}footer{left:30px;right:30px}.japanese{font-size:14px;margin-top:23px}}@media(max-width:700px){header{top:23px;left:23px;right:19px}.brand{font-size:11px;gap:10px;letter-spacing:1.8px}.brand small{font-size:6px;letter-spacing:1.6px}.seal{width:34px;height:36px;font-size:25px}.header-actions{gap:9px}.quiet-button{padding:8px}.quiet-button span{display:none}.intro{top:109px;left:25px}.eyebrow{font-size:7px;letter-spacing:1.2px}h1{font-size:43px;line-height:1.02;letter-spacing:-1.8px;margin:16px 0 13px}h1 br{display:none}h1 em{margin-left:6px}.intro p{font-size:10px;line-height:1.7}.intro p br,.japanese,.scene-caption{display:none}.toolbar{bottom:76px;padding:7px 8px;gap:3px;border-radius:12px;max-width:calc(100vw - 24px)}.tool-button{font-size:10px;padding:0 5px;gap:6px}.time-button{padding:0 8px;font-size:9px}.toolbar .icon-button{width:29px}.divider{margin:0 3px}.toolbar .time-button svg{width:16px}footer{bottom:29px;justify-content:center;left:10px;right:10px}.live-label{display:none}.instructions{font-size:8px;gap:6px}#toast{font-size:10px;bottom:146px}.intro .eyebrow i{margin-left:1px}#capture{display:none}}@media(max-height:650px)and (min-width:701px){.intro{top:22%}h1{font-size:45px;margin:17px 0}.intro p{font-size:10px}.japanese{display:none}.toolbar{bottom:57px}footer{bottom:20px}header{top:24px}.scene-caption{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
