@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{width:100%;height:100%;margin:0;overflow:hidden}body{background:#06121a;color:#ecf5f3;font-family:DM Sans,sans-serif}canvas{display:block;width:100%;height:100%}.brand,.panel,.info,.attribution{position:absolute;z-index:1}.brand{top:28px;left:34px;max-width:420px}.brand p,.brand span,.attribution{margin:0;color:#bdd1cb;font:500 11px/1.4 DM Mono,monospace;letter-spacing:.09em;text-transform:uppercase}.brand h1{margin:7px 0 9px;font-size:clamp(28px,4vw,52px);line-height:.95;letter-spacing:-.05em}.panel{top:28px;right:32px;width:232px;padding:18px;border:1px solid #52716d88;border-radius:12px;background:#10282ae8;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.panel label{display:flex;justify-content:space-between;font-size:14px;font-weight:500}.panel output{color:#ffcf72;font-family:DM Mono,monospace}input[type=range]{width:100%;margin:13px 0 18px;accent-color:#eeb75a}.switch{margin:12px 0;align-items:center}.switch input{accent-color:#eeb75a}hr{border:0;border-top:1px solid #52716d88;margin:17px 0}.hint{margin:0;color:#bad0cb;font-size:12px;line-height:1.4}.info{left:34px;bottom:31px;display:grid;gap:4px}.info strong{font-size:18px}.info span{color:#d2e0dc;font-size:13px}.attribution{right:34px;bottom:32px;max-width:390px;text-align:right;color:#9fb5b0}@media(max-width:680px){.brand{top:20px;left:20px}.panel{top:auto;right:16px;bottom:16px;width:210px}.info{left:20px;bottom:20px;max-width:calc(100% - 250px)}.attribution{display:none}}