@import"https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;700&display=swap";*{box-sizing:border-box}html,body,#app{height:100%;width:100%;margin:0;overflow:hidden}body{background:#b9dce1;color:#17373a;font-family:DM Sans,sans-serif}canvas{width:100%;height:100%;display:block}.brand,.control,.explanation,.source,.caveat{position:absolute;z-index:1}.brand{left:clamp(20px,4vw,52px);top:clamp(20px,4vw,42px)}.brand p,.source{color:#24494e;font:500 11px/1.4 DM Mono,monospace;letter-spacing:.09em;text-transform:uppercase}.brand h1{color:#10292d;text-shadow:0 1px #ffffff99;font-size:clamp(42px,7vw,88px);letter-spacing:-.07em;line-height:.82;margin:9px 0 12px}.brand .subtitle{margin:0;color:#935e13;font-size:12px}.control{width:min(470px,calc(100% - 40px));left:50%;bottom:30px;transform:translate(-50%);padding:19px 21px 14px;border:1px solid #52716dcc;border-radius:14px;background:#f4faf8ef;box-shadow:0 16px 45px #163f4544;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.control label{display:flex;justify-content:space-between;color:#17373a;font-size:15px;font-weight:700}.control output{color:#9d5d06;font:500 17px DM Mono,monospace}input[type=range]{width:100%;margin:15px 0 7px;accent-color:#d98d16}.range{display:flex;justify-content:space-between;color:#52716d;font-size:11px}.divider{height:1px;background:#9eb8b3;margin:15px 0}.toggle{align-items:center;margin:10px 0 5px;font-weight:500!important}.toggle span{display:flex;align-items:center}.toggle i{display:inline-block;width:24px;border-top:2px solid #294c48;margin-right:7px}.toggle b{display:inline-block;width:24px;height:10px;margin-right:7px;background:linear-gradient(30deg,transparent 44%,#294c48 46%,#294c48 54%,transparent 56%),linear-gradient(150deg,transparent 44%,#294c48 46%,#294c48 54%,transparent 56%);background-size:8px 8px}.toggle input{accent-color:#d98d16}.legend{margin:6px 0 0;color:#52716d;font-size:11px}.legend i{display:inline-block;width:24px;border-top:3px solid #ffcf61;vertical-align:middle;margin-right:7px}.explanation{max-width:310px;left:clamp(20px,4vw,52px);bottom:43px;display:grid;gap:6px;text-shadow:0 1px #ffffff99}.explanation strong{color:#10292d;font-size:17px}.explanation span,.caveat{color:#28494d;font-size:13px;line-height:1.4}.source{right:32px;bottom:32px;max-width:420px;text-align:right}.caveat{top:42px;right:clamp(20px,4vw,52px);max-width:290px;margin:0;padding:13px 15px;border-left:2px solid #c77b12;background:#eff8f6dd;box-shadow:0 5px 22px #163f4522}@media(max-width:700px){.brand{top:24px}.caveat{top:155px;right:20px;max-width:230px}.explanation,.source{display:none}.control{bottom:20px}}