.kinetic-page{background:var(--touchlab-module-background);color:#304b42;height:100svh;min-height:780px;position:relative;overflow:hidden}.kinetic-stage{position:absolute;inset:80px 250px 65px 60px}.kinetic-stage canvas{width:100%;height:100%;display:block}.kinetic-intro{pointer-events:none;position:absolute;top:150px;left:4.5%}.kinetic-intro>span,.kinetic-label{color:#7b8982;font:11px monospace}.kinetic-intro h1{margin:22px 0;font-size:46px;font-weight:500;line-height:1.3}.kinetic-intro em{color:#97a49a;font-style:normal}.kinetic-intro p{margin-top:30px;font:11px monospace}.kinetic-panel{width:222px;position:absolute;top:24%;right:4%}.kinetic-panel h2{margin:14px 0 35px;font-size:21px;font-weight:500}.kinetic-row{justify-content:space-between;margin:20px 0;font-size:12px;display:flex}.kinetic-row>span:last-child{color:#7c8c82}.kinetic-swatches{gap:15px;margin-bottom:35px;display:flex}.kinetic-swatches button{cursor:pointer;border:4px solid #f3f5f3;border-radius:50%;outline:1px solid #0000;width:30px;height:30px}.kinetic-swatches button[aria-pressed=true]{outline-color:#456757}.kinetic-meter{background:#dce2dc;height:2px;margin-bottom:32px}.kinetic-meter i{background:#7fa28b;height:100%;transition:width .3s;display:block}.kinetic-command{color:#fff;cursor:pointer;background:#35594a;border:0;border-radius:5px;justify-content:space-between;align-items:center;width:100%;padding:15px;font-size:13px;display:flex}.kinetic-command:disabled{opacity:.45;cursor:default}.kinetic-reset{color:#61776a;cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;gap:9px;margin:18px auto;font-size:12px;display:flex}.kinetic-tools{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fffc;border:1px solid #e0e5df;border-radius:8px;align-items:center;gap:6px;padding:8px;display:flex;position:absolute;bottom:94px;left:46%;transform:translate(-50%)}.kinetic-tools button{color:#789082;cursor:pointer;background:0 0;border:0;border-radius:5px;place-items:center;width:42px;height:42px;display:grid;position:relative}.kinetic-tools button[aria-pressed=true]{color:#2f5943;background:#e6ede5}.kinetic-tools button span{white-space:nowrap;color:#fff;background:#35594a;border-radius:4px;padding:6px 9px;font-size:12px;display:none;position:absolute;bottom:54px}:is(.kinetic-tools button:hover span,.kinetic-tools button:focus-visible span){display:block}.kinetic-tools>i{background:#dce2dc;width:1px;height:24px;margin:0 5px}.kinetic-footer{color:#7c8b82;border-top:1px solid #dfe5df;justify-content:space-between;align-items:center;height:60px;font:10px monospace;display:flex;position:absolute;bottom:0;left:4.5%;right:4.5%}.kinetic-footer a{align-items:center;gap:8px;font-size:12px;display:flex}.kinetic-error{background:#fff;border-radius:8px;padding:30px;position:absolute;inset:30%}@media (min-width:1500px){.kinetic-stage{inset:80px 280px 65px 140px}}@media (max-width:900px){.kinetic-intro h1{font-size:34px}.kinetic-stage{inset:100px 140px 90px 0}.kinetic-panel{width:180px;right:3%}.kinetic-intro{top:120px}}@media (max-width:650px){.kinetic-page{height:auto;min-height:980px}.kinetic-intro{top:104px;left:24px}.kinetic-intro h1{margin:12px 0;font-size:28px}.kinetic-intro p{display:none}.kinetic-stage{height:390px;inset:190px 0 auto}.kinetic-panel{grid-template-columns:1fr 1fr;gap:8px 24px;width:auto;display:grid;top:664px;left:24px;right:24px}.kinetic-label,.kinetic-panel h2,.kinetic-meter{display:none}.kinetic-row{grid-column:1/-1;margin:5px 0}.kinetic-swatches{margin:7px 0}.kinetic-command{grid-area:2/2/4;align-self:center}.kinetic-reset{justify-content:flex-start;margin:6px 0}.kinetic-tools{top:585px;bottom:auto;left:50%}.kinetic-footer{bottom:12px}.kinetic-footer>span:last-child{display:none}}