*{box-sizing:border-box}body{margin:0;background:#102b38;color:#e8ede4;font:16px/1.55 system-ui,sans-serif}button,select,input{font:inherit}button,select{border:1px solid #6b8c95;border-radius:10px;background:#193c49;color:#edf3e8;padding:10px 14px;min-height:44px}button{cursor:pointer}button:hover{background:#315868}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #ffd18a;outline-offset:3px}a{color:#cce6d0}#IntroScreen{max-width:1100px;margin:0 auto;padding:66px 42px 28px;position:relative;min-height:100vh;background:radial-gradient(ellipse at 90% 30%,#3d6d78a0,transparent 60%)}.eyebrow{font-size:11px;letter-spacing:.2em;color:#9dc2c3}h1{font-family:Georgia,serif;font-size:clamp(52px,7vw,82px);font-weight:400;line-height:1.05;margin:26px 0 20px;letter-spacing:-.045em}h1 span{display:block;font:italic 30px Georgia,serif;letter-spacing:0;color:#a9c7bb;margin-top:16px}.lede{font-size:22px;color:#d1e1db;line-height:1.5}.start-panel{max-width:420px;margin:34px 0}.start-panel>label{display:block;font-size:12px;margin-bottom:7px;color:#b6cdd1}.start-panel select{width:100%;margin-bottom:12px}#begin{width:100%;background:#dce8bd;color:#183339;border:0;display:flex;justify-content:space-between;font-weight:600;padding:15px 20px}.start-panel p{font-size:13px;color:#a5c4c7}.sky-art{position:absolute;right:5%;top:165px;width:43%;height:280px;border-bottom:2px solid #8aafa1;overflow:hidden;background:linear-gradient(180deg,#234e5f00,#76a69c40);border-radius:50% 50% 0 0}.sky-art i{position:absolute;width:70%;height:70px;border-radius:100%;background:#c8e2d950;left:12%;top:40px;filter:blur(6px)}.sky-art i:nth-child(2){width:48%;top:100px;left:40%;background:#e1e9d970}.sky-art i:nth-child(3){width:50%;height:170px;top:198px;left:0;background:#718d70;transform:rotate(-25deg);filter:none}.sky-art b{width:37px;height:37px;position:absolute;right:35px;top:5px;border-radius:50%;background:#f3dc9c;box-shadow:0 0 80px #eed29a90}.intro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;border-top:1px solid #52717a;padding-top:25px;margin-top:46px}.intro-grid strong{color:#dce8bd;font-size:13px}.intro-grid p{font-size:14px;color:#afc7c7}footer{font-size:11px;color:#9cb6bb;margin-top:35px}#mainCanvas{display:none;position:absolute;left:0;top:0;touch-action:none}#graphCanvas{position:absolute;left:0;top:0;z-index:1;display:none}#dropletInfoCanvas{position:absolute;left:50%;top:50%;z-index:1;display:none}#toolbar{display:none;position:fixed;top:12px;left:12px;right:12px;z-index:4;padding:12px 16px;background:#102c38ed;border:1px solid #6a899680;border-radius:16px;box-shadow:0 8px 30px #0004;backdrop-filter:blur(12px)}body.running{overflow:hidden}body.running #toolbar{display:block}.brand{font:22px Georgia,serif;margin-bottom:8px}.brand span{font:12px system-ui,sans-serif;color:#a8c9c9;margin-left:16px}.controls{display:flex;gap:8px;align-items:end;flex-wrap:wrap}.controls label{font-size:10px;letter-spacing:.04em;color:#b8d0d1;display:flex;flex-direction:column;gap:3px}.controls select{font-size:12px;padding:8px;min-width:160px;max-width:240px}.controls button{font-size:12px;padding:8px 14px}.size-label{max-width:100px}input[type=range]{width:100%;height:44px}#guidePanel{position:fixed;right:20px;top:160px;width:390px;max-width:calc(100% - 40px);max-height:calc(100vh - 185px);overflow:auto;z-index:6;background:#183c49;border:1px solid #739097;border-radius:18px;padding:28px;box-shadow:0 12px 60px #0007}#guidePanel h2{font:30px/1.1 Georgia,serif}#guidePanel p{font-size:13px;color:#c4dad6}#closeGuide{float:right}.dg.ac{z-index:5!important;top:145px!important;right:12px!important}.dg .c input{min-height:0!important}.dg .close-button{position:relative!important}.dg{font-size:12px!important}@media(max-width:700px){#IntroScreen{padding:35px 24px}.sky-art{position:relative;right:auto;top:auto;width:100%;height:130px;margin-top:20px}.sky-art i{top:20px;height:45px}.sky-art i:nth-child(2){top:45px}.sky-art i:nth-child(3){top:85px}.intro-grid{grid-template-columns:1fr;gap:5px;margin-top:25px}.brand span{display:block;margin:4px 0;font-size:10px}.controls{gap:5px}.controls label{flex:1}.controls select{min-width:120px;max-width:100%;width:100%}.controls button{padding:7px 9px}.size-label{display:none!important}#toolbar{padding:8px 10px}.dg.ac{top:215px!important}#guidePanel{top:215px;max-height:calc(100vh - 235px)}.brand{font-size:19px}}

#skyClock{bottom:12px;left:20px;font-size:15px!important;background:#102c38c9;padding:5px 10px;border-radius:8px;pointer-events:none}