*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font:14px system-ui,sans-serif;color:#18384c;background:#c9e4f3;--header-ink:#17394c;--header-muted:#416477}#stage{position:fixed;inset:0}canvas{display:block;width:100%;height:100%;touch-action:none}header{position:fixed;top:max(20px,env(safe-area-inset-top));left:24px;z-index:1;pointer-events:none;background:transparent;color:var(--header-ink);text-shadow:0 1px 8px #ffffff45}header small{font-size:10px;letter-spacing:.19em;color:var(--header-muted)}h1{font-size:24px;margin:5px 0 7px;line-height:1.1}header p{margin:0;font-size:13px;color:var(--header-ink)}#local-clock{font-variant-numeric:tabular-nums;font-weight:650}.clock-dot{margin:0 7px}#status{font-size:11px;margin-top:5px;color:var(--header-muted)}
.tools{position:fixed;left:16px;top:50%;transform:translateY(-50%);z-index:3;display:flex;flex-direction:column;gap:3px;padding:6px;border:1px solid #ffffff90;border-radius:15px;background:#ffffffb8;backdrop-filter:blur(14px);box-shadow:0 4px 20px #102a4020;max-height:calc(100dvh - 210px);overflow:visible}.tools button,.tools a{position:relative;display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border:0;border-radius:9px;background:transparent;color:#34586e;cursor:pointer;text-decoration:none}.tools svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.tools button:hover,.tools a:hover{background:#d7eafa}.tools button[aria-pressed=true],.tools button[data-active=true]{background:#0b71ac;color:#fff}.tools button:focus-visible,.tools a:focus-visible,summary:focus-visible{outline:2px solid #0789d4;outline-offset:2px}.tooltip{display:none;position:absolute;left:48px;top:50%;transform:translateY(-50%);background:#143449ed;color:white;padding:7px 10px;border-radius:6px;white-space:nowrap;font-size:12px;pointer-events:none}.tools button:hover .tooltip,.tools a:hover .tooltip,.tools button:focus-visible .tooltip,.tools a:focus-visible .tooltip{display:block}
#weather-panel{position:fixed;left:76px;top:50%;transform:translateY(-50%);width:236px;z-index:4;background:#ffffffeb;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid #ffffffa0;border-radius:15px;box-shadow:0 8px 30px #102a4025,0 1px 4px #102a4010;font-size:13px;max-height:calc(100dvh - 40px);overflow-y:auto}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #b6ccd945;background:#ffffff50;border-radius:15px 15px 0 0}.panel-header-title{display:flex;align-items:center;gap:7px;font-weight:650;color:#17394c;min-width:0}.panel-header-icon{width:16px;height:16px;flex:0 0 16px;stroke:#0b71ac;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}#weather-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px}#close-weather{display:grid;place-items:center;width:26px;height:26px;flex:0 0 26px;border:0;border-radius:6px;background:transparent;color:#506879;cursor:pointer;padding:0}#close-weather:hover{background:#d7eafa;color:#0b71ac}#close-weather svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.settings{padding:10px 13px 13px}select{width:100%;font:inherit;color:#17394c;background:#ffffffb0;border:1px solid #b6ccd9;border-radius:7px;padding:9px 7px;margin:1px 0 8px}label{display:block;margin:9px 0}input[type=checkbox]{accent-color:#0878b9;width:16px;height:16px;vertical-align:middle;margin:0 7px 0 0}input[type=range]{width:100%;accent-color:#0878b9}#context-note{font-size:11px;color:#506879;margin:11px 0 0}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}#error{position:fixed;inset:40% 15% auto;text-align:center;background:white;padding:22px;border-radius:12px;z-index:5}footer{position:fixed;bottom:13px;left:50%;transform:translateX(-50%);font-size:12px;pointer-events:none;white-space:nowrap;color:var(--header-muted);text-shadow:0 1px 3px #ffffff50}
@media(max-width:600px){header{top:max(14px,env(safe-area-inset-top));left:14px}header small{font-size:9px}h1{font-size:19px;margin:4px 0 6px}header p{font-size:12px}#status{display:none}#weather-panel{left:60px;top:50%;transform:translateY(-50%);width:min(224px,calc(100vw - 72px));font-size:12px;border-radius:13px;max-height:calc(100dvh - 30px)}.panel-header{padding:9px 10px}.settings{padding:8px 10px 10px}.tools{left:8px;gap:1px;padding:4px;border-radius:13px;max-height:calc(100dvh - 140px);overflow-y:auto;scrollbar-width:none}.tools button,.tools a{width:40px;height:40px;flex-basis:40px}.tools svg{width:19px;height:19px}.tooltip{display:none!important}footer{display:none}}
@media(max-height:620px){.tools{top:118px;bottom:14px;transform:none;max-height:none;overflow-y:auto;scrollbar-width:none}.tooltip{display:none!important}#weather-panel{top:118px;bottom:14px;transform:none;max-height:none}}
@media(max-width:360px){header{left:12px;max-width:150px}h1{font-size:17px}header p{font-size:11px}#weather-panel{left:54px;width:min(195px,calc(100vw - 64px));font-size:11px}}