:root{font-family:Arial,Helvetica,sans-serif;color:#f4f4ef;background:#080d12;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}canvas{display:block;width:100vw;height:100vh;touch-action:none}.frame{position:fixed;inset:10px;border:1px solid #c7ccd622;pointer-events:none;box-shadow:inset 0 0 120px #01030a66}header{position:fixed;top:28px;left:35px;right:35px;display:flex;gap:28px;align-items:center;pointer-events:none}.logo{font-size:27px;font-weight:900;font-style:italic;letter-spacing:-1.5px}.logo span{color:#ff2e9b}.logo small{display:block;font-size:8px;letter-spacing:2.8px;font-style:normal;margin-top:7px;color:#b1bdc7}.tag{font-size:8px;letter-spacing:2px;color:#abb7c1;border-left:1px solid #677384;padding-left:20px}.tag b{display:block;color:#ed75ad;font-size:8px;letter-spacing:1px;margin-top:7px}.district{margin-left:auto;font-size:10px;letter-spacing:2px}.district span{color:#e948a0}.district small{display:block;font-size:7px;margin-top:8px;color:#8c9faf}aside{position:fixed;top:135px;left:35px;pointer-events:none}aside>span{font-size:7px;letter-spacing:2px;color:#94a6b2}aside strong{display:block;font-size:29px;font-style:italic;margin-top:5px}aside small{display:block;font-size:6px;letter-spacing:1.5px;color:#b7a8b0}.caption{position:fixed;left:35px;bottom:112px;pointer-events:none}.eyebrow{font-size:8px;letter-spacing:3px;color:#4de5e7}h1{font-size:69px;letter-spacing:-4px;font-weight:900;font-style:italic;margin:8px 0 0;line-height:1}#subtitle{font-size:10px;letter-spacing:2px;margin-top:10px}.rule{height:2px;background:#e5368c;width:58px;margin:18px 0}#rates{font-size:8px;letter-spacing:1px;color:#f4c6dc}#rates span{display:block;color:#96a8b6;margin-top:6px}.objective{position:fixed;right:35px;top:139px;max-width:205px;padding:14px 15px;border-left:2px solid #e63191;background:linear-gradient(90deg,#070d15c9,transparent);pointer-events:none}.objective b{font-size:7px;letter-spacing:1px;color:#f475b8}.objective p{font-size:12px;line-height:1.7}.objective small{font-size:7px;line-height:1.8;letter-spacing:.4px;color:#9eafb9}#views{position:fixed;bottom:62px;left:35px;display:flex;gap:5px;align-items:center}button{background:#060b13c4;border:1px solid #94a8ba66;color:#e5edef;padding:9px 11px;font:700 8px Arial;letter-spacing:1px;cursor:pointer}button:hover{border-color:#5ae9ed;color:#5ae9ed}label{font-size:7px;margin-left:10px;color:#a8b7c1;letter-spacing:1px}input{accent-color:#e93490;vertical-align:middle}#shift{position:fixed;right:40px;bottom:67px;border:1px solid #f744ad;border-radius:50%;width:94px;height:94px;box-shadow:0 0 25px #ff00aa18}#shift>span{display:block;font-size:40px;color:#ff70b8;line-height:1}#shift small{font-size:7px;display:block;margin-top:6px}footer{position:fixed;bottom:28px;left:35px;right:35px;display:flex;justify-content:space-between;font-size:6px;letter-spacing:1px;color:#8d9da9;pointer-events:none}#loading{position:fixed;top:49%;left:15%;right:15%;text-align:center;font-size:11px;letter-spacing:3px;z-index:10;color:#8ce7e7}#joystick{display:none;position:fixed;left:28px;bottom:78px;width:92px;height:92px;border:1px solid #c1d2da55;border-radius:50%;background:#0a152333;touch-action:none}#joystick i{position:absolute;left:29px;top:29px;width:32px;height:32px;border-radius:50%;background:#a1c2ce77}#camera-pad,#portrait{display:none}body.freeze .rule{background:#74eff0}body.freeze #phase{color:#d8f2ef}@media(pointer:coarse){#joystick{display:block}.caption{left:140px;bottom:105px}#views{left:140px;bottom:64px}#shift{right:26px;bottom:73px;width:78px;height:78px}.objective{right:24px;top:100px;max-width:180px}aside{top:95px;left:25px}header{top:20px;left:25px;right:25px}.logo{font-size:23px}.tag{display:none}h1{font-size:43px}.rule{margin:10px 0}.caption .eyebrow{font-size:6px}#rates,#subtitle{font-size:7px}footer{left:25px;right:25px;bottom:22px;font-size:5px}}@media(max-height:550px){aside{display:none}header{top:20px}.caption{bottom:103px}h1{font-size:46px}.rule{margin:10px 0}.objective{top:105px;max-width:170px}.objective p{font-size:10px}.objective small{font-size:6px}#views button{padding:7px 8px}#views label{font-size:6px;margin-left:3px}.tag{display:none}}@media(orientation:portrait)and (max-width:600px){#portrait{display:block;position:fixed;left:20px;right:20px;top:100px;text-align:center;color:#eeb6d0;font-size:8px;letter-spacing:2px}.district{display:none}.objective{top:145px;right:22px;max-width:170px}.caption{left:25px;bottom:200px}#views{left:25px;bottom:175px;flex-wrap:wrap}footer>span:first-child{max-width:170px}.logo{font-size:24px}aside{display:none}}
