*{box-sizing:border-box}body{margin:0;background:#060b13;color:#e4ebf3;font:14px system-ui,sans-serif;overflow:hidden}canvas{position:fixed;inset:0;width:100%;height:100%;touch-action:none}header{position:absolute;top:36px;left:42px;pointer-events:none}h1{font-size:58px;letter-spacing:-3px;margin:7px 0}h1 span{color:#ebb86a}header p{color:#93a1b4;margin:0}.eyebrow{font-size:10px;letter-spacing:2px;color:#8a9bae}aside{position:absolute;right:30px;top:35px;width:260px;padding:22px;background:#0b1420dd;border:1px solid #273445;border-radius:14px}aside p{font-size:12px;color:#9baabd;line-height:1.7}label{display:block;margin:12px 0}input{accent-color:#e8b975}select,button{color:#e6edf5;background:#131f2e;border:1px solid #334154;border-radius:7px;padding:10px;font:inherit}select{max-width:100%}aside select{width:100%;margin-top:13px}button{cursor:pointer}button:hover{border-color:#e8b975}details{border-top:1px solid #263445;padding-top:14px;margin-top:20px;font-size:12px}summary{cursor:pointer}a{color:#e8b975}footer{position:absolute;bottom:20px;left:30px;right:30px;display:flex;align-items:center;gap:35px;background:#0c1522eb;border:1px solid #2b384a;border-radius:16px;padding:20px 24px}.control>div{display:flex;align-items:center;gap:8px;margin-top:10px}#zoom{width:110px}.time{flex:1}b{font-weight:400;letter-spacing:0;color:#e8b975;margin-left:10px}.clock{min-width:210px}#date{margin-top:10px;font-variant-numeric:tabular-nums}small{color:#7d90a8}#tip{display:none;position:absolute;width:260px;background:#101b2af2;border:1px solid #61708a;border-radius:12px;padding:18px;pointer-events:none;z-index:4;box-shadow:0 15px 50px #0008}#tip h2{margin:4px 0 14px;font-size:23px}#tip dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:9px;font-size:12px}dt{color:#96a7bb}dd{margin:0}#viewnote{position:absolute;bottom:140px;left:42px;font-size:9px;letter-spacing:2px;color:#708297}@media(max-width:800px){header{left:20px;top:20px}h1{font-size:40px}header p{display:none}aside{right:15px;top:20px;width:180px;padding:12px}aside>p,aside label,aside details{display:none}footer{left:10px;right:10px;bottom:10px;padding:12px;gap:12px;flex-wrap:wrap}.clock{width:100%;display:flex;justify-content:space-between;font-size:11px}.clock .eyebrow{display:none}#date{margin:0}.time{flex:auto}#zoom{width:70px}#rate{width:155px}#viewnote{left:20px;bottom:160px}}