@import"https://fonts.googleapis.com/css2?family=Girassol&display=swap";*{box-sizing:border-box}.sector{display:grid;gap:5px;grid-template-areas:"text text fulltext fulltext" "color fraction reaction delete";grid-template-columns:1fr 1fr 3fr 1fr;grid-auto-rows:.8fr}.text-input{grid-area:text}.fulltext-input{grid-area:fulltext}.color-input{grid-area:color}.reaction-select{grid-area:reaction}.delete-sector{grid-area:delete}.create-panel{grid-area:panel;display:grid;gap:8px;grid-template-areas:"name generate" "add extra" "extra-panel extra-panel" "sector sector";grid-template-columns:repeat(2,1fr);grid-auto-rows:42px 42px auto auto}#app{display:grid;grid-template-areas:"switch" "panel";grid-template-rows:70px auto}.btns-panel{align-self:normal;grid-area:switch;display:grid;gap:4px;grid-template-areas:"sp-switch cr-switch sh-switch";grid-template-columns:repeat(3,2fr)}.app-panel{grid-area:panel;display:grid;gap:8px;grid-template-areas:"name delete-sure" "file delete-sure" "upload . " "select select" "open download" "edit delete";grid-template-columns:repeat(2,188px);grid-auto-rows:1fr}.history-panel{align-items:normal;display:flex;flex-direction:column;max-height:320px;overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none}.history-panel::-webkit-scrollbar{display:none}.delete-sure-panel{grid-area:delete-sure;display:none;gap:8px;grid-template-areas:"input" "delete";grid-auto-rows:1fr}.delete-sure-input{grid-area:input}.delete-sure{grid-area:delete}.edit-wheel{grid-area:edit}.delete-wheel{grid-area:delete}.extra-wheel{grid-area:extra}.wheel-extra{grid-area:extra-panel}.add-sector{grid-area:add}.generate-wheel{grid-area:generate}.create-wheel{grid-area:cr-switch}.spin-wheel{grid-area:sp-switch}.spin-history{grid-area:sh-switch}.name-input{grid-area:name}.fraction-input{grid-area:fraction;max-width:50px}.file-input{grid-area:file}.upload-button{grid-area:upload}.wheel-select{grid-area:select}.open-wheel{grid-area:open}.download-wheel{grid-area:download}.root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#fff788de;background:linear-gradient(to right top,#0c0d2b,#211a02) fixed;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}.btn-switch,.btn-cr{border-radius:.8em;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#301d64;color:#fff788de;cursor:pointer;transition:border-color .25s}.btn-cr:hover{border-color:#fff788de}.btn-cr:focus,.btn-cr:focus-visible{outline:.1em auto -webkit-focus-ring-color}.scrollable-div{grid-area:sector;max-height:170px;overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none}.scrollable-div::-webkit-scrollbar{display:none}html,body{height:100%}body{display:grid;place-items:center;overflow:hidden}.deal-wheel{--size: clamp(250px, 80vmin, 700px);--lg-hs: 0 3%;--lg-stop: 50%;--lg: linear-gradient( hsl(var(--lg-hs) 0%) 0 var(--lg-stop), hsl(var(--lg-hs) 20%) var(--lg-stop) 100% );position:relative;display:grid;grid-gap:calc(var(--size) / 20);align-items:center;grid-template-areas:"trigger spinner" "solo-trigger spinner" "closer spinner";font-family:Girassol,sans-serif;font-size:calc(var(--size) / 21);line-height:1}@media screen and (orientation:portrait){.deal-wheel{--size: clamp(250px, 80vmin, 700px);--lg-hs: 0 3%;--lg-stop: 50%;--lg: linear-gradient( hsl(var(--lg-hs) 0%) 0 var(--lg-stop), hsl(var(--lg-hs) 20%) var(--lg-stop) 100% );position:relative;display:grid;grid-gap:calc(var(--size) / 20);align-items:center;grid-template-areas:"spinner spinner" "trigger solo-trigger" "closer closer";font-family:Girassol,sans-serif;font-size:calc(var(--size) / 21);line-height:1}}.deal-wheel>*{grid-area:spinner}.deal-wheel .btn-solo-spin{grid-area:solo-trigger;justify-self:center}.deal-wheel .btn-spin{grid-area:trigger;justify-self:center}.btn-close{grid-area:closer;justify-self:center}.spinner{position:relative;display:grid;align-items:center;grid-template-areas:"spinner";width:var(--size);height:var(--size);transform:rotate(calc(var(--rotate, 25) * 1deg));border-radius:50%;box-shadow:inset 0 0 0 calc(var(--size) / 40) #0000000f}.spinner *{grid-area:spinner}ul{padding-inline-start:0px}.prize{font-size:.8rem;position:relative;display:flex;align-items:center;padding:0 calc(var(--size) / 6) 0 calc(var(--size) / 20);width:50%;height:50%;transform-origin:center right;transform:rotate(var(--rotate));-webkit-user-select:none;user-select:none}.cap{--cap-size: calc(var(--size) / 4);position:relative;justify-self:center;width:var(--cap-size);height:var(--cap-size)}.alter-cap{--cap-size: calc(var(--size));position:relative;justify-self:center;width:var(--cap-size);height:var(--cap-size);margin:0}.cap select{display:none}.cap svg .not-so-grim{width:100%}.ticker{position:relative;left:calc(var(--size) / -15);width:calc(var(--size) / 10);height:calc(var(--size) / 20);background:var(--lg);z-index:1;clip-path:polygon(20% 0,100% 50%,20% 100%,0% 50%);transform-origin:center left}.btn-spin,.btn-solo-spin,.btn-close{color:#fff;background:var(--lg);border:none;font-family:inherit;font-size:inherit;line-height:inherit;text-transform:inherit;padding:.6rem 2rem 1rem;border-radius:.25rem;cursor:pointer;transition:opacity .2s ease-out}.btn-spin:focus .btn-close:focus{outline-offset:2px}.btn-spin:active .btn-close:active{transform:translateY(1px)}.btn-spin:disabled .btn-close:disabled{cursor:progress;opacity:.25}.is-spinning .spinner{transition:transform 8s cubic-bezier(.1,-.01,0,1)}.is-spinning .ticker{animation:tick .7s cubic-bezier(.34,1.56,.64,1)}@keyframes tick{40%{transform:rotate(-12deg)}}.prize.selected .text{color:#fff;animation:selected .8s ease}@keyframes selected{25%{transform:scale(1.25);text-shadow:1vmin 1vmin 0 hsla(0 0% 0% / .1)}40%{transform:scale(.92);text-shadow:0 0 0 hsla(0 0% 0% / .2)}60%{transform:scale(1.02);text-shadow:.5vmin .5vmin 0 hsla(0 0% 0% / .1)}75%{transform:scale(.98)}85%{transform:scale(1)}}.not-so-grim{width:100%;height:100%;object-fit:cover;display:block}.grim-reaper{overflow:visible}.grim-reaper [data-animate]{transform-origin:center}.grim-reaper[data-reaction=resting] [data-animate]{animation:var(--name) 2.5s ease infinite}.grim-reaper[data-reaction=resting] [data-animate=body]{--name: body-rest}.grim-reaper[data-reaction=resting] [data-animate=head]{--name: head-rest}.grim-reaper[data-reaction=resting] [data-animate=jaw]{--name: jaw-rest}@keyframes body-rest{50%{transform:translateY(-6px)}}@keyframes head-rest{50%{transform:translateY(-10px) rotate(-1deg)}}@keyframes jaw-rest{50%{transform:rotate(3deg)}}.grim-reaper[data-reaction=laughing] [data-animate]{--duration: .22s;--count: 5;animation:var(--name) var(--duration) ease var(--count),var(--name) calc(var(--duration) * 5) calc(var(--duration) * var(--count)) cubic-bezier(.26,1,.3,1) forwards}.grim-reaper[data-reaction=laughing] [data-animate=body]{--name: body-laugh}.grim-reaper[data-reaction=laughing] [data-animate=head]{--name: head-laugh}.grim-reaper[data-reaction=laughing] [data-animate=jaw]{--name: jaw-laugh}@keyframes body-laugh{50%{transform:translateY(6px)}}@keyframes head-laugh{0%,to{transform:rotate(-5deg)}50%{transform:rotate(-10deg)}}@keyframes jaw-laugh{50%{transform:translateY(12px) rotate(10deg)}}.grim-reaper[data-reaction=shocked] [data-animate]{animation:var(--name) .22s ease forwards}.grim-reaper[data-reaction=shocked] [data-animate=body]{--name: body-shock}.grim-reaper[data-reaction=shocked] [data-animate=head]{--name: head-shock}.grim-reaper[data-reaction=shocked] [data-animate=jaw]{--name: jaw-drop}@keyframes body-shock{to{transform:translateY(12px)}}@keyframes head-shock{to{transform:translateY(12px) rotate(-5deg)}}@keyframes jaw-drop{40%{transform:translateY(60px) rotate(20deg)}60%{transform:translateY(30px) rotate(10deg)}80%{transform:translateY(45px) rotate(18deg)}to{transform:translateY(40px) rotate(15deg)}}.grim-reaper[data-reaction=dancing] [data-animate]{animation:var(--name) var(--duration) ease infinite}.grim-reaper[data-reaction=dancing] [data-animate=body]{--name: body-dance;--duration: .5s}.grim-reaper[data-reaction=dancing] [data-animate=head]{--name: head-dance;--duration: 1s}.grim-reaper[data-reaction=dancing] [data-animate=jaw]{--name: jaw-dance;--duration: .5s}@keyframes body-dance{50%{transform:translateY(-6px)}}@keyframes head-dance{25%{transform:scale(1.05) rotate(-2deg)}50%{transform:scale(1) rotate(0)}75%{transform:scale(1.05) rotate(2deg)}}@keyframes jaw-dance{50%{transform:translateY(4px)}}