*{box-sizing:border-box}body{margin:0;background:#9cb1aa;color:#fff5df;font-family:DM Sans,sans-serif;overflow:hidden}canvas{display:block;width:100vw;height:100vh;outline:none}body:after{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,#10251f66 0,transparent 48%),linear-gradient(0deg,#10231e99 0,transparent 30%);z-index:1}.grain{position:fixed;inset:-50%;z-index:2;pointer-events:none;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .25s steps(2) infinite}@keyframes grain{25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}}header,aside,nav,footer{position:fixed;z-index:3}header{top:35px;left:42px;right:42px;display:flex;justify-content:space-between;align-items:start;pointer-events:none}.wordmark{font-size:23px;font-weight:700;letter-spacing:4px}.wordmark i{font-family:Fraunces,serif;font-weight:500;letter-spacing:1px}.wordmark small{display:block;font-size:9px;letter-spacing:3px;margin-top:9px}.live{font-size:10px;letter-spacing:2px;border:1px solid #fff5df55;border-radius:30px;padding:11px 17px;background:#17343177;box-shadow:0 12px 50px #10231e55}aside{top:23%;left:42px;pointer-events:none;text-shadow:0 2px 28px #16352baa}.eyebrow{font-size:10px;letter-spacing:3px;color:#ffd798}h1{font-family:Fraunces,serif;font-size:clamp(38px,5vw,76px);font-weight:500;line-height:.99;letter-spacing:-2.5px;margin:20px 0}aside p{font-size:12px;letter-spacing:.4px;opacity:.88}button{cursor:pointer;color:inherit;font:inherit;border:1px solid #fff5df44;background:#183b3877;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border-radius:4px;padding:13px 20px;transition:.2s ease}button:hover,button:focus-visible{background:#fff5df;color:#213e37;outline:2px solid #f2ba72;transform:translateY(-1px)}button:disabled{opacity:.35;cursor:not-allowed}aside button{pointer-events:auto;font-size:11px}.presets{display:flex;gap:8px;margin-top:20px}.presets button:first-child{background:#f5e4be;color:#263b31;border-color:#f5e4be}.disclaimer{font-size:10px;line-height:1.7;opacity:.67;margin-top:18px;max-width:320px}nav{bottom:124px;left:50%;transform:translate(-50%);display:flex;background:#143731cc;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid #fff3;border-radius:8px;padding:5px;gap:4px;white-space:nowrap;box-shadow:0 18px 60px #071d1a66}nav button{border:0;background:none;font-size:10px;color:#e3ddcb88;padding:15px 22px}nav b{font-size:12px;margin-left:10px;font-weight:500;color:#f4e9d6}nav .active{background:#f5e4be;color:#31443a;box-shadow:0 4px 18px #081b1755}nav .active b{color:#263b31}footer{bottom:25px;left:42px;right:42px;border-top:1px solid #fff4;padding-top:17px;display:flex;justify-content:space-between;align-items:center}footer strong{font-size:35px;font-weight:400;font-variant-numeric:tabular-nums}footer span{font-size:10px;opacity:.7}footer small{display:block;font-size:9px;letter-spacing:2px}.telemetry{min-width:180px}.telemetry #trick{color:#ffd28b;height:13px;margin-top:3px}footer button{font-size:11px}.keys{font-size:10px;line-height:2;opacity:.85}kbd{font:inherit;border:1px solid #fff5;padding:2px 5px;border-radius:3px;background:#10251f55}dialog{background:#18382f;color:#fff0d3;border:1px solid #efd5a477;border-radius:12px;max-width:510px;padding:38px;line-height:1.8;box-shadow:0 30px 100px #071d1acc}dialog::backdrop{background:#071d1aaa;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}dialog h2{font-family:Fraunces,serif;font-size:34px;margin:12px 0}dialog p{font-size:13px}dialog button{margin-top:8px}@media(max-width:700px){header{top:20px;left:20px;right:20px}.wordmark{font-size:16px}.live{display:none}aside{left:20px;top:13%}aside h1{font-size:40px}aside p,.disclaimer{max-width:230px}.presets{flex-direction:column;align-items:flex-start;gap:6px}.presets button{padding:10px 13px}nav{bottom:104px;width:95%;justify-content:center}nav button{padding:12px 9px}nav b{margin-left:4px;font-size:10px}footer{left:20px;right:20px}.keys,.grain{display:none}}@media(prefers-reduced-motion:reduce){.grain{animation:none}button{transition:none}}