body{flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:relative;overflow:hidden}.controls{position:absolute;top:20px;left:20px}.checkbox-label{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;font-size:1rem;display:flex}.checkbox-label input[type=checkbox]{cursor:pointer;width:18px;height:18px}.message{color:#333;text-align:center;padding:0 20px;font-size:1.5rem;font-weight:700;position:absolute;top:5%}span{padding-left:4px}.process-bar{--process:0%;--angle:0deg;color:#000;width:40vw;max-width:100vh;height:100px;max-height:90vw;transform:rotate(var(--angle));transform-origin:50%;cursor:grab;background:#f5f5f5;border:none;border-radius:16px;transition:transform .1s ease-out;position:relative;overflow:hidden;box-shadow:0 4px 20px #0000001a,inset 0 2px 4px #0000000d}.liquid{height:100%;width:var(--process);background:#4287f5;border-radius:14px 0 0 14px;transition:width .15s ease-out;position:absolute;top:0;left:0}.fill{z-index:1;justify-content:center;align-items:center;width:100%;height:100%;font-size:1.1rem;font-weight:600;display:flex;position:relative}