*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#a5adc3;color:#f8f3e8;font-family:Arial,sans-serif}canvas{display:block;width:100%;height:100%;touch-action:none}#scene{position:absolute;inset:0}header{position:absolute;top:36px;left:40px;pointer-events:none;text-shadow:0 2px 22px #36424a55}.eyebrow{font-size:10px;letter-spacing:.26em;opacity:.8}h1{font-family:Georgia,serif;font-size:38px;font-weight:400;letter-spacing:-.035em;margin:10px 0 6px}header p{font-size:12px;letter-spacing:.06em;opacity:.85;margin:0}footer{position:absolute;bottom:27px;left:40px;display:flex;gap:22px;font-size:11px;letter-spacing:.025em;text-shadow:0 1px 8px #102030}#photo{position:absolute;right:30px;bottom:22px;border:1px solid #ffffff40;background:#25303928;backdrop-filter:blur(14px);color:inherit;border-radius:30px;padding:10px 14px;cursor:pointer;font-size:11px}#photo span{margin-left:14px;opacity:.6}.hidden header,.hidden footer,.hidden #photo{opacity:0;pointer-events:none}#loading{position:absolute;inset:0;display:grid;place-content:center;background:#929cae;color:#f9f4eb;font-family:Georgia,serif;font-size:24px;transition:opacity .8s}#loading span{height:1px;width:100%;background:#fff7;margin-top:18px;animation:pulse 1s infinite alternate}@keyframes pulse{to{transform:scaleX(.4);opacity:.3}}@media(max-width:700px){header{left:22px;top:24px}h1{font-size:29px}footer{left:22px;bottom:24px;display:block;max-width:230px;line-height:1.8}footer span{display:block}#photo{right:18px;bottom:24px;font-size:0}#photo span{font-size:12px;margin:0}}

#details-toggle{position:absolute;right:30px;top:28px;background:#17222f66;border:1px solid #ffffff35;border-radius:20px;color:#eee9df;padding:9px 13px;font-size:11px;cursor:pointer}#details{position:absolute;right:30px;top:66px;color:#f3eee4;font:11px/1.8 monospace;background:#132030bb;backdrop-filter:blur(12px);padding:14px 17px;border-radius:8px;margin:0;pointer-events:none}.hidden #details,.hidden #details-toggle{opacity:0;pointer-events:none}

#details{pointer-events:auto;max-width:340px}#metrics{white-space:pre-line}#details details{margin-top:8px}#details summary{cursor:pointer;opacity:.7}#diagnostics{max-height:200px;overflow:auto;font-size:10px;white-space:pre-wrap}

#scene-pause{position:absolute;right:149px;top:28px;background:#17222f66;border:1px solid #ffffff35;border-radius:20px;color:#eee9df;padding:9px 13px;font-size:11px;cursor:pointer}.hidden #scene-pause{opacity:0;pointer-events:none}

.dev-badge{display:inline-block;background:#c8dbde;color:#172e38;letter-spacing:.1em;padding:4px 6px;margin-right:8px;border-radius:3px}
#details{width:310px;max-width:calc(100vw - 36px);max-height:calc(100dvh - 160px);overflow:auto}
#dev-render-scale{display:block;width:100%;margin:5px 0 9px;padding:8px;color:#f3eee4;background:#203542;border:1px solid #71858e;border-radius:5px;font:12px Arial,sans-serif;cursor:pointer}
.dev-hint{font:11px/1.5 Arial,sans-serif;color:#c3d0d5;margin:0 0 12px}
@media(max-width:700px){header{top:72px}header h1{font-size:25px}header p{display:none}#details-toggle{top:20px;right:18px}#scene-pause{top:20px;right:137px}#details{right:18px;top:138px;max-height:calc(100dvh - 270px)}}

.fog-controls{border-top:1px solid #ffffff30;padding:7px 0}.fog-controls label{display:block;margin:5px 0}.fog-controls select{color:#f3eee4;background:#203542;border:1px solid #71858e;padding:5px;border-radius:4px;width:100%}.fog-controls input{accent-color:#bdd1d5}

#visibility-metrics{white-space:pre-line;border-left:2px solid #9bb6c1;padding-left:9px;margin:8px 0}

#details>label{display:block;margin:10px 0 6px}#dev-quality{display:block;width:100%;padding:9px 10px;border:1px solid #788b92;border-radius:7px;background:#2b3b43;color:#f5f6f3;font:inherit;margin-bottom:10px}