:root{--animation-duration:5s;--base-font-size:16px;--base-font-color:#000000;--wheel-font-size:30px}
body,html{margin:0;padding:0;font-family:sans-serif;background-color:#f9fafb;color:#333;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:100vh;width:100vw;box-sizing:border-box;scroll-behavior:smooth;font-size:var(--base-font-size)}
.main{min-width:100vw;display:flex;justify-content:center;}
.main-content{display:flex;justify-content:space-between;width:100vw;box-sizing:border-box}
.spintitle{padding:10px 0 0 0;font-size:32px;color:#333;text-shadow:2px 2px 4px rgba(34,34,34,.7);max-width:380px;border:none;background-color:transparent;overflow:hidden;resize:none;white-space:nowrap;word-wrap:normal;text-align:center}
.spinner-section{position:relative;flex:1;display:flex;justify-content:center;align-items:center;width:50vw;min-width:40vw;box-sizing:border-box}
#spin-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#333;color:#fff;border:none;border-radius:50%;width:10vw;height:6vh;font-size:16px;cursor:pointer;box-shadow:0 4px 8px rgba(0,0,0,.1)}
#spin-btn:hover{background-color:#555}
.inputs-section{background-color:#fff;border-radius:10px;padding:20px;box-shadow:0 4px 8px rgba(0,0,0,.1);width:45vw;max-width:50vw;margin-left:20px;margin-right:20px;box-sizing:border-box}
.tabs{display:flex;justify-content:space-between;margin-bottom:8px}
.tab{background-color:#f5f5f5;border:none;padding:10px 15px;cursor:pointer;font-size:16px;border-radius:5px 5px 0 0;box-sizing:border-box;color:#1f1f1f}
.tab.active{background-color:#fff;border-bottom:2px solid #333;color:#1f1f1f}
.tab span{background-color:#e0e0e0;border-radius:50%;padding:2px 8px;margin-left:5px;font-size:12px;color:#666}
.input-controls{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:15px}
.checklabel{border:none;cursor:pointer;font-size:14px;display:flex;align-items:center;box-sizing:border-box}
.action-btn{background-color:#f5f5f5;border:none;padding:6px;margin-right:3px;cursor:pointer;font-size:14px;display:flex;align-items:center;border-radius:5px;box-sizing:border-box;color:#1f1f1f}
.action-btn i{margin-right:5px}
.action-btn svg{margin-right:5px}
.action-btn:hover{background-color:#e0e0e0;color:#1f1f1f}
.input-list{width:100%;border:1px solid #797979;border-radius:5px;resize:vertical;min-height:50vh;max-height:60vh;font-size:16px;background-color:transparent;color:#333;outline:0;box-sizing:border-box;padding:10px;background-color:#fcfdff}
.container{text-align:center}
.wheel{width:400px;height:400px;position:relative;background-color:#b9b9b9;border-radius:50%;overflow:hidden;box-shadow:0 0 8px rgba(0,0,0,.5)}
.prize{width:100%;height:50%;position:absolute;color:var(--base-font-color);top:0;left:0;display:flex;writing-mode:vertical-rl;align-items:center;box-sizing:border-box;transform-origin:center bottom;padding-top:10px}
.wheelfont{font-size:var(--wheel-font-size)}
.spinpar{display:flex;position:relative;width:410px;height:410px;align-items:center;justify-content:center}
.spin{background-color:#003545;color:#fff;padding:10px 20px;border-radius:50%;cursor:pointer;font-size:14px;width:80px;height:80px;position:absolute;left:calc(50% - 40px);top:calc(50% - 40px);border:2px solid #fff}
.spin svg{width:30px;height:30px;position:absolute;left:calc(50% - 15px);top:-28px}
.spin svg polyline{stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.spin svg polygon{fill:#003545}
.myraffle{animation:raffle var(--animation-duration) cubic-bezier(.76,.01,.21,.99);animation-fill-mode:forwards}
@keyframes raffle{form{transform:rotate(0)}
to{transform:rotate(var(--final-rotate))}
}
.presetAnime{animation:preani 60s linear;animation-iteration-count:infinite;animation-fill-mode:forwards}
@keyframes preani{form{transform:rotate(0)}
to{transform:rotate(360deg)}
}
@keyframes breathingAnimation{0%,100%{transform:scale(1)}
50%{transform:scale(1.2)}
}
.breathing{animation-name:breathingAnimation;animation-duration:3s;animation-iteration-count:infinite;animation-timing-function:ease-in-out}
dialog{border:none;border-radius:8px;padding:20px;box-shadow:0 4px 8px rgba(0,0,0,.2);background-color:#fff;text-align:center;position:relative}
.close-btn{position:absolute;top:0;right:20px;font-size:24px;font-weight:700;color:#333;cursor:pointer}
.close-btn:hover{color:red}
.modal-body{margin:10px 0}
#result-box{background-color:#f1f3f4;border-radius:10px;padding:40px;box-shadow:0 2px 5px rgba(0,0,0,.1)}
.resulttext{font-weight:700;color:#202124;margin:0;word-wrap: break-word;white-space: normal;}
.textsize{font-size:48px;}.textsize2{font-size:35px;}.textsize3{font-size:20px;}
.modal-footer{display:flex;justify-content:space-around;padding-top:20px}
.modal-footer .btn{padding:8px;border:none;border-radius:5px;cursor:pointer;font-size:14px;color:#fff;margin:0 10px;background-color:#4b8df8;transition:transform .3s ease,background-color .3s ease}
.modal-footer .btn:hover{background-color:#4a90e2;transform:scale(1.05)}
#spin-again-btn{background-color:#4b8df8}
#done-btn{background-color:#4285f4}
#fireworksCanvas{position:fixed;top:0;left:0;z-index:1;width:100vw;height:100vh;pointer-events:none}
.side-tab{position:absolute;top:100px;right:0;width:30px;height:100px;background-color:#fff;padding:20px;box-sizing:border-box;border-top-left-radius:10px;border-bottom-left-radius:10px;display:flex;align-items:center;justify-content:center;writing-mode:vertical-lr;text-orientation:mixed;font-size:16px;text-align:center;z-index:1000;box-shadow:-4px 0 8px #ffa845;font-size:14px}
.centered{justify-content:center}
.settingpanel{width:90vw;height:70vh;background-color:#ebebeb}
.settingtitle{display:flex;align-items:center;font-size:28px;font-weight:700;color:#202124;margin:5px;text-align:left}
.settingbody{margin:10px 0;display:flex;background-color:#f4f3f1;border-radius:10px;padding:20px 10px 20px 0;box-shadow:0 2px 5px rgba(0,0,0,.1)}
.setting-footer{display:flex;justify-content:flex-end;padding-top:20px;position:absolute;bottom:20px;right:20px}
.setting-footer .btn{padding:10px 30px;border:none;border-radius:5px;cursor:pointer;font-size:14px;color:#fff;margin:0 10px;background-color:#4b8df8;transition:transform .3s ease,background-color .3s ease}
.setting-footer .btn:hover{background-color:#4a90e2;transform:scale(1.05)}
.column{padding:5px}
.column-left{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-around;font-weight:700;border-radius:3px;max-width:30vw}
.column-left div{border:none;border-radius:3px}
.buttonselected{font-weight:700}
.column-right{display:flex;background-color:#fff;border-radius:10px;width:55vw}
.content-group{display:none;margin:0}
.active{display:block}
.theme{display:flex;align-items:center;padding:10px;flex-wrap:wrap}
.color-card{display:flex;flex-direction:row;align-items:stretch;justify-content:space-between;width:7vh;height:7vh;border-radius:10px;cursor:pointer;margin:5px}
.color-swatch{flex:1;height:7vh}
.selected{border:2px solid #ffa845}
.slider-container{margin:20px;width:45vw}
.content-label{font-size:18px;margin-bottom:10px;margin-top:10px}
.slider{width:45vw;-webkit-appearance:none;height:10px;background:#d3d3d3;outline:0;opacity:.7;-webkit-transition:.2s;transition:opacity .2s}
.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#692e70;cursor:pointer}
.imgpanel{display:flex;flex-wrap:wrap}
.img-card{display:flex;flex-direction:row;align-items:center;justify-content:center;width:7vh;height:7vh;border-radius:10px;box-sizing:border-box;cursor:pointer;margin:5px}
.imgcon{width:7vh;height:7vh}
.spinbtn{padding:none;border:none;background:0 0;cursor:pointer;font-size:14px;width:100px;height:100px;position:absolute;left:calc(50% - 40px);top:calc(50% - 50px)}
.btn{display:flex;justify-content:center}
.soundgroup{display:flex}
.soundcontent{display:flex;flex-direction:column;align-items:flex-start}
.soundDiv{display:flex;width:7vh;height:7vh;margin-left:10px;background-image:linear-gradient(to right,rgba(196,175,226,.5),rgba(123,136,201,.7));border-radius:50%;box-sizing:border-box;justify-content:center;align-items:center}
.soundplaybtn{border:none;background-color:transparent;display:flex;justify-content:center;align-items:center}
.article-section{margin:40px auto;padding:20;background-color:#fff;color:#333;display:flex;flex-direction:column;align-items:left;justify-content:flex-start;min-height:100vh;width:60%;box-sizing:border-box}
.titlegroup{display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column;z-index:1;position:relative}
.editbutton{display:flex;position:static}
#edittitle ion-icon{color:grey}
.show{display:flexbox}
.hide{display:none}
#savetitle ion-icon{color:green}
#cancleedit ion-icon{color:#951c1c}
ion-icon{font-size:20px}
.editable{border:2px solid #ffa845;border-radius:20px;cursor:text}
.preview{display:flex;background-color:#fff6ee;color:#000;border-radius:5px;height:60px;text-align:center;align-items:center;justify-content:center;font-size:var(--wheel-font-size)}
.preview p{margin:0}
.size-labels{display:flex;justify-content:space-between}
/*#navimg{flex:1;border:2px;border-color:#333}
#navbtngroup{flex:1;font-size:12px}
#navbtn{cursor:pointer;color:#fff;background-color:#f4b400;border-radius:10px;padding:10px}*/
.ai-button{position:relative;width:300px;height:40px;padding:0;border-radius:20px;background:linear-gradient(45deg,#673ab7,#3f51b5,#ec407a);color:#fff;font-size:16px;font-weight:400;text-align:center;line-height:40px;cursor:pointer;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out;border:none;box-shadow:0 4px 6px rgba(0,0,0,.2);overflow:hidden}
.ai-button:active{transform:translateY(1px);box-shadow:0 2px 5px rgba(0,0,0,.2)}
.dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;z-index:100;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.dialog-overlay.active{opacity:1;visibility:visible}
.dialog{background-color:#fff;border-radius:12px;box-shadow:0 10px 25px rgba(0,0,0,.2);width:90%;max-width:500px;max-height:650px;padding:24px;position:relative;transform:translateY(20px);transition:transform .3s}
.dialog-overlay.active .dialog{transform:translateY(0)}
.dialog-close{position:absolute;top:16px;right:16px;background:0 0;border:none;font-size:24px;line-height:1;cursor:pointer;color:#999}
.dialog-title{font-size:24px;font-weight:700;margin:0 0 16px 0;color:#333;text-align:center;background:linear-gradient(45deg,#673ab7,#3f51b5,#ec407a);-webkit-background-clip:text;background-clip:text;color:transparent}
.dialog-description{margin-bottom:24px;color:#666;line-height:1.5;text-align:center}
.form-group{margin-bottom:16px}
.form-label{display:block;margin-bottom:8px;font-weight:700;color:#555}
.form-input{width:100%;padding:10px;border:1px solid rgb(255, 253, 215);border-radius:8px;font-size:16px;box-sizing:border-box}
.form-input:focus{outline:0;border-color:#3f51b5;box-shadow:0 0 0 2px rgba(63,81,181,.2)}
@media screen and (min-width:1001px){.color-card{width:12vh;height:12vh}
.img-card{width:12vh;height:12vh}
.color-swatch{height:12vh}
.settingbody{width:86vw;height:45vh;min-height:40vh;justify-content:space-between}
.column-left div:hover{background-color:#e5e5e5;font-weight:700}
.column-right{width:75vw;margin-right:1vw}
.imgcon{width:12vh;height:12vh}
.main-content{padding:0 10vh}
.spinner-section{max-width:55vw;min-width:55vw;margin-top:70px}
.spinpar{transform-origin:center center;transform:scale(1.2)}
.inputs-section{max-width:30vw;min-width:30vw;margin-right:50px;margin-top:90px}
.article-section{margin-top:160px}
#cancleedit,#edittitle,#savetitle{margin-bottom:33px}
.ai-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.3)}
}
@media screen and (max-width:1000px){.header-title h1{font-size:20px}
.header-title p{font-size:12px}
.main-content{align-items:center;flex-wrap:wrap;justify-content:center}
.inputs-section,.spinner-section{max-width:96vw;min-width:96vw;transition:transform .3s ease;transform-origin:top left}
.spinner-section{margin-top:60px}
.inputs-section{margin-top:20px}
.article-section{width:90vw}
.spinpar{transform-origin:center center;transform:scale(.9)}
.theme{padding:0}
.settingpanel{width:95vw;height:65vh;box-sizing:content-box}
.checklabel{display:none}
.settingbody{width:88vw;height:40vh}
.column-left{min-width:25vw}
.ai-button{width:270px;font-size:14px}
.dialog{padding:16px}
.dialog-title{font-size:20px}
}

.ww{color:#fada83}