*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;font-family:system-ui,-apple-system,Segoe UI,sans-serif}#app{position:fixed;top:0;right:0;bottom:0;left:0}#app canvas{display:block;touch-action:none}#mobile-actions,#mobile-backdrop,#fullscreen-hint{display:none}#ui{position:fixed;top:16px;left:16px;width:238px;padding:14px;border-radius:12px;background:#1c2026d1;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#f2f4f6;display:flex;flex-direction:column;gap:10px;z-index:10}#ui h1{font-size:15px;font-weight:600}.render-mode{display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:9px;background:#00000038}#ui .render-mode button{padding:6px 8px;border-radius:6px;text-align:center;background:transparent;color:#f2f4f6b8;transition:background-color .16s ease,color .16s ease}#ui .render-mode button.active{background:#ffffff2e;color:#fff}.group{display:flex;flex-direction:column;gap:4px}#ui button{padding:7px 10px;border:none;border-radius:7px;background:#ffffff1f;color:inherit;font-size:13px;text-align:left;cursor:pointer}#ui button:hover{background:#ffffff38}#ui button:disabled{cursor:wait;opacity:.5}#ui button:focus-visible,#ui input:focus-visible{outline:3px solid #9bc8ff;outline-offset:2px}#ui button.active{background:#4b8bd4}.environment-controls{display:grid;gap:6px;padding:9px;border-radius:8px;background:#0000002e;font-size:12px}.environment-controls input[type=date]{width:100%;min-width:0;padding:6px 7px;border:0;border-radius:6px;background:#ffffff21;color:inherit;color-scheme:dark;font:inherit}.time-heading{display:flex;justify-content:space-between;align-items:baseline}#time-output{color:#9bc8ff;font-variant-numeric:tabular-nums;font-weight:650}#time-slider{width:100%;accent-color:#4b8bd4;cursor:pointer}#camera-buttons{flex-direction:row;flex-wrap:wrap}#camera-buttons button{flex:1 1 45%;text-align:center}.toggle{font-size:13px;display:flex;align-items:center;gap:7px;cursor:pointer}.toggle:has(input:disabled){cursor:not-allowed;opacity:.48}#reset,#screenshot{text-align:center!important}.asset-credit{color:#f2f4f68f;font-size:10px;line-height:1.3;text-align:center;text-decoration:none}.asset-credit a{color:inherit}.asset-credit:hover{color:#fff;text-decoration:underline}#status{position:fixed;bottom:18px;left:50%;transform:translate(-50%);padding:8px 16px;border-radius:8px;background:#1c2026d9;color:#fff;font-size:13px;z-index:20;min-width:min(320px,calc(100vw - 28px));display:grid;gap:7px;text-align:center}#status.error{background:#a33}#status.photo-status{padding-left:38px}#status.photo-status:before{content:"";position:absolute;left:14px;top:50%;width:10px;height:10px;margin-top:-5px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:status-spin .8s linear infinite}.status-progress{position:relative;display:block;width:100%;height:3px;overflow:hidden;border-radius:999px;background:#ffffff2e}.status-progress>span{display:block;height:100%;border-radius:inherit;background:#9bc8ff;transition:width .18s ease}.status-progress.indeterminate>span{width:34%!important;animation:progress-indeterminate 1.2s ease-in-out infinite}.status-progress.hidden{display:none}@keyframes status-spin{to{transform:rotate(360deg)}}@keyframes progress-indeterminate{0%{transform:translate(-110%)}to{transform:translate(300%)}}#status.hidden{display:none}@media(max-width:720px){#mobile-actions{position:fixed;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));display:flex;gap:8px;z-index:40}.mobile-action{width:46px;height:46px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:#181c22b8;box-shadow:0 8px 24px #0000002e;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;cursor:pointer;transition:background-color .18s ease,transform .18s ease}.mobile-action:active{transform:scale(.94)}.mobile-action:focus-visible{outline:3px solid #9bc8ff;outline-offset:2px}.mobile-action .icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.icon-close,.icon-compress,.controls-open .icon-options,.fullscreen-active .icon-expand{display:none}.controls-open .icon-close,.fullscreen-active .icon-compress{display:block}#mobile-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;display:block;visibility:hidden;opacity:0;background:#070a0e5c;pointer-events:none;z-index:20;transition:opacity .18s ease,visibility 0s linear .18s}.controls-open #mobile-backdrop{visibility:visible;opacity:1;pointer-events:auto;transition-delay:0s}#ui{top:auto;bottom:0;left:0;right:0;width:100%;border-radius:18px 18px 0 0;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;padding:14px max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));max-height:min(78dvh,calc(100dvh - 82px));overflow-y:auto;overscroll-behavior:contain;visibility:hidden;opacity:0;transform:translateY(calc(100% + 24px));pointer-events:none;z-index:30;transition:transform .18s ease,opacity .18s ease,visibility 0s linear .18s}.controls-open #ui{visibility:visible;opacity:1;transform:translateY(0);pointer-events:auto;transition-delay:0s}#ui h1{flex:1 0 100%;font-size:14px;color:#f2f4f6b8}.render-mode{min-width:154px}.environment-controls{flex:1 1 220px;grid-template-columns:auto minmax(130px,1fr);align-items:center}.environment-controls .time-heading{display:contents}#time-slider{grid-column:1 / -1}.asset-credit{display:none}.group{flex-direction:row;flex-wrap:wrap;gap:4px}#ui button{font-size:12px;padding:6px 8px}.toggle{font-size:12px}#status{bottom:auto;top:max(70px,calc(env(safe-area-inset-top) + 64px));z-index:50}#fullscreen-hint{position:fixed;top:max(70px,calc(env(safe-area-inset-top) + 64px));right:max(12px,env(safe-area-inset-right));display:block;width:min(290px,calc(100vw - 24px));padding:10px 12px;border-radius:10px;background:#181c22e0;box-shadow:0 10px 28px #00000038;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;font-size:12px;line-height:1.4;opacity:0;transform:translateY(-6px);visibility:hidden;pointer-events:none;z-index:45;transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}#fullscreen-hint.visible{opacity:1;transform:translateY(0);visibility:visible;transition-delay:0s}.focus-mode #controls-toggle,.focus-mode #mobile-backdrop,.focus-mode #ui{display:none}}@media(prefers-reduced-motion:reduce){#ui .render-mode button,#ui,#mobile-backdrop,#fullscreen-hint,.mobile-action{transition:none}#status.photo-status:before{animation-duration:1.6s}.status-progress>span{transition:none}}