*{box-sizing:border-box;margin:0;padding:0}html,body{background:#000;width:100%;height:100%;overflow:hidden}#video{object-fit:cover;width:100%;height:100%;position:fixed;inset:0}#canvas{pointer-events:none;width:100%;height:100%;position:fixed;inset:0}#ui{z-index:10;pointer-events:none;position:fixed;inset:0}#top-bar{color:#fff;background:linear-gradient(#000c 0%,#0000 100%);padding:44px 16px 10px;font-family:Helvetica Neue,Arial,sans-serif;position:absolute;top:0;left:0;right:0}#coords-row{text-shadow:0 1px 4px #000000e6;justify-content:center;align-items:center;gap:8px;font-size:15px;font-weight:600;display:flex}#tz-badge{background:#ffffff26;border:1px solid #ffffff40;border-radius:4px;padding:1px 6px;font-size:11px;font-weight:700}#sun-row{text-align:center;color:#ffffffd9;text-shadow:0 1px 3px #000000e6;margin-top:4px;font-size:11px}#crosshair{pointer-events:none;width:48px;height:48px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#crosshair svg{width:100%;height:100%}#compass{width:64px;height:64px;position:absolute;top:80px;right:14px}#compass svg{width:100%;height:100%}#legend{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;background:#0000008c;border:1px solid #ffffff1f;border-radius:10px;padding:8px 10px;font-family:Helvetica Neue,Arial,sans-serif;font-size:11px;position:absolute;top:155px;right:14px}.leg{align-items:center;gap:6px;margin-bottom:4px;display:flex}.leg:last-child{margin-bottom:0}.leg-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px}#orient-warn{color:#fc4;background:#ffa50033;border:1px solid #ffa50073;border-radius:8px;padding:6px 10px;font-family:Helvetica Neue,Arial,sans-serif;font-size:11px;display:none;position:absolute;top:155px;left:14px}#lens-bar{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:all;background:#00000080;border:1px solid #ffffff26;border-radius:24px;gap:6px;padding:4px 10px;display:flex;position:absolute;bottom:118px;left:50%;transform:translate(-50%)}.lens-btn{color:#fff9;cursor:pointer;background:0 0;border:none;border-radius:18px;padding:4px 10px;font-family:Helvetica Neue,Arial,sans-serif;font-size:13px;font-weight:600}.lens-btn.active{color:#ffd740;background:#ffdc0040;border:1px solid #ffdc0066}#debug-bar{text-align:center;pointer-events:none;color:#ffffc8bf;text-shadow:0 1px 3px #000;font-family:monospace;font-size:10px;line-height:1.6;position:absolute;bottom:160px;left:0;right:0}#bottom-bar{pointer-events:all;background:linear-gradient(#0000 0%,#000c 100%);padding:10px 20px 34px;position:absolute;bottom:0;left:0;right:0}#time-label{text-align:center;color:#fff;margin-bottom:6px;font-family:Helvetica Neue,Arial,sans-serif;font-size:15px;font-weight:700}#time-label span{color:#ffd54f}#time-range{appearance:none;cursor:pointer;background:#ffffff40;border-radius:2px;outline:none;width:100%;height:4px}#time-range::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:radial-gradient(circle,#ffe082 0%,#ff8f00 100%);border-radius:50%;width:22px;height:22px;box-shadow:0 0 8px 2px #ffb40099}#reset-btn{color:#fff;cursor:pointer;background:#ffffff1f;border:1px solid #ffffff40;border-radius:20px;margin:8px auto 0;padding:4px 18px;font-size:12px;display:block}@media (orientation:landscape){#top-bar{padding:10px 80px 8px}#bottom-bar{padding:6px 80px 12px}#lens-bar{bottom:78px}#debug-bar{bottom:120px}#compass{top:50px;right:80px}#legend{top:120px;right:80px}#orient-warn{top:120px}}#start-screen{z-index:30;background:radial-gradient(at 50% 30%,#1e2850f2 0%,#000000fa 100%);flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.start-sun{background:radial-gradient(circle,#fff7e0 0%,#ffd740 40%,#ff8f00 75%,#0000 100%);border-radius:50%;width:90px;height:90px;margin-bottom:28px;animation:2.5s ease-in-out infinite pulse-sun;box-shadow:0 0 40px 20px #ffb40059}@keyframes pulse-sun{0%,to{transform:scale(1);box-shadow:0 0 40px 20px #ffb40059}50%{transform:scale(1.06);box-shadow:0 0 60px 30px #ffb40080}}.start-title{color:#fff;text-align:center;margin-bottom:8px;font-family:Helvetica Neue,Arial,sans-serif;font-size:22px;font-weight:700}.start-sub{color:#ffffff8c;text-align:center;margin-bottom:16px;padding:0 30px;font-family:Helvetica Neue,Arial,sans-serif;font-size:13px}.start-note{color:#ffe082;text-align:center;background:#ffc8001f;border:1px solid #ffc8004d;border-radius:10px;max-width:290px;margin-bottom:28px;padding:10px 18px;font-family:Helvetica Neue,Arial,sans-serif;font-size:12px}#start-btn{color:#1a0f00;cursor:pointer;background:linear-gradient(135deg,#ffd740 0%,#ff8f00 100%);border:none;border-radius:30px;padding:15px 44px;font-size:17px;font-weight:700;box-shadow:0 4px 24px #ffa00080}#start-btn:active{transform:scale(.96)}#toast{color:#fff;z-index:50;text-align:center;white-space:pre-line;background:#141414eb;border-radius:10px;max-width:300px;padding:10px 18px;font-family:Helvetica Neue,Arial,sans-serif;font-size:13px;display:none;position:fixed;bottom:220px;left:50%;transform:translate(-50%)}