:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.6;font-weight:400;background:linear-gradient(135deg,#ffd6e8,#d6e4ff);color:#2a2a2a}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:flex;justify-content:center;align-items:center}#app{width:100%;padding:2rem}.center{text-align:center}.mt-1{margin-block-start:1em}.mt-2{margin-block-start:4em}.roll-enter-active,.roll-leave-active{transition:all .06s ease-in-out}.roll-enter-from{transform:translateY(-50%) scale(.6)}.roll-leave-to{transform:translateY(50%) scale(.6)}.container{width:fit-content;max-width:none;min-width:500px;margin:0 auto;padding-block-start:20vh;padding-inline:2rem;padding:3rem 2rem;border-radius:20px;box-shadow:0 20px 40px #00000014;display:flex;flex-direction:column;align-items:center;gap:1.5rem;text-align:center;position:relative}div{margin:0}p{display:flex;flex-direction:column}h1{font-size:min(4rem,15vw);margin:0;font-weight:bolder;-webkit-background-clip:text;background-clip:text;color:#c594e3;display:inline-block;max-width:min-content;padding-inline-end:.2em;letter-spacing:-.1em;word-spacing:.2em;line-height:1}.machine{--radius: .25rem;width:fit-content;max-width:none;padding:3rem min(10rem,20vw);margin-top:4rem;margin-bottom:2rem;background:#deb7e1;border:#fef0ff solid 2px;border-radius:2rem;box-shadow:#2a2a2a26 13px 13px 20px;position:relative;overflow:hidden}.machine.pause-animation{--play-state: paused}.machine:before,.machine:after{content:"";border-radius:.25rem;display:block;background-image:var(--gradient);background-origin:border-box;background-size:200% 200%;position:absolute;inset:0;pointer-events:none;animation-duration:2s;animation-iteration-count:infinite;animation-name:rotateGradient;animation-direction:normal;animation-timing-function:linear;animation-play-state:var(--play-state, running)}.machine:before{filter:blur(.5rem);z-index:-1}.machine:after{position:absolute;border:2px solid transparent;-webkit-mask:linear-gradient(#fff 0,#fff 0) padding-box exclude,linear-gradient(#fff 0,#fff 0);mask:linear-gradient(#fff 0,#fff 0) padding-box exclude,linear-gradient(#fff 0,#fff 0)}.slots{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-block:2rem}.slots .slot{border-radius:2px;box-shadow:0 0 2px #0009,inset 0 0 2px #0009;position:relative;overflow:hidden;background-color:#fff}.slots .slot:before{content:"";width:200%;height:100%;position:absolute;top:0;left:-50%;box-shadow:inset 0 0 1.5rem #0006,inset 0 0 .25rem #0003}.slots .slot span{width:4rem;font-size:2rem;line-height:5rem;display:inline-block;text-align:center}button{border:none;padding:.7rem 1.5rem;margin:2rem;font-size:.95rem;font-weight:600;border-radius:999px;background:#c594e3;color:#fff;cursor:pointer;transition:all .2s ease}button:hover{transform:translateY(-2px)}button:active{transform:translateY(0);box-shadow:none}button:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}@keyframes rotateGradient{0%{background-position:100% 100%}25%{background-position:0 100%}50%{background-position:0 0}75%{background-position:100% 0}to{background-position:100% 100%}}@media(hover:hover){a:hover{background-color:#00bd7e33}}.row{width:100%}.machine{display:flex;flex-direction:column;align-items:center;gap:1.5rem}.machine h1{margin:0;font-size:2.2rem;font-weight:700;color:#2a2a2a}.mode{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}.mode label{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .7rem;border-radius:999px;border:1px solid rgba(160,196,255,.7);background:#fff;cursor:pointer}.mode label.selected{background:#ffe4f0}.slots{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;gap:.5rem;width:100%}.slots .slot{flex:0 0 auto;width:100px;height:100px;display:flex;align-items:center;justify-content:center;font-size:3rem;background:linear-gradient(135deg,#ffe4f0,#e4f0ff);border-radius:16px;overflow:hidden;box-shadow:0 8px 16px #00000014;border:2px solid rgba(255,139,171,.2);transition:transform .2s ease,box-shadow .2s ease}.slots .slot:hover{box-shadow:0 8px 16px #00000014}.slots .slot span{display:flex;align-items:center;justify-content:center}.roll-enter-active{animation:roll .12s linear}.history{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.4rem}.list-move,.list-enter-active,.list-leave-active{transition:all .5s ease}.list-enter-from,.list-leave-to{opacity:0;transform:translate(30px)}.list-leave-active{position:absolute}@keyframes roll{0%{transform:translateY(-50%)}to{transform:translateY(50%)}}