.container{width:300px;min-height:200px}.lore-text{margin-bottom:15px;text-align:center}.body{width:100vw;position:relative;overflow:hidden}.body,.page{height:100vh;display:flex;flex-direction:column;justify-content:flex-start;align-items:center}.page{gap:16px;padding-top:40px;z-index:1}.container{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;background-color:rgba(9,9,9,.78);border-radius:20px;box-shadow:0 -2px 0 0 rgba(255,255,255,.32),0 1px 40px 0 rgba(191,0,0,.66);color:#ffffff;padding:20px}.lore-text{margin:10px 0;font-size:16px;line-height:1.5}.class-item{position:relative;width:158px;height:191px;border-radius:16px;box-shadow:inset 0 0 0 3px rgba(231,209,97,.2);background:rgba(0,0,0,0);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:8px;transition:background-color .3s ease}.class-item:hover{box-shadow:inset 0 0 0 3px rgba(231,209,97,.3);background:rgba(0,0,0,.1)}.class-item.selected{box-shadow:inset 0 0 0 3px rgba(255,191,139,1);background:rgba(0,0,0,.4)}.class-title{font-family:Bayon,sans-serif;color:rgba(255,227,203,1);font-size:20px;font-weight:400;letter-spacing:.05em;text-align:center}.class-image{position:absolute;width:133px;bottom:10px;opacity:.7;transition:opacity .3s ease}.class-item:hover .class-image{opacity:.8}.class-item.selected .class-image{opacity:1}.class-item .radio-icon{position:absolute;right:10px;bottom:10px;box-shadow:inset 0 0 0 3px rgba(255,191,139,.2);background:none;width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center}.class-item.selected .radio-icon{box-shadow:inset 0 0 0 2px rgba(255,191,139,1);background:rgba(0,0,0,1)}.class-item .radio-icon .check{width:10px;height:10px;border-radius:5px;background:rgba(255,191,139,1);opacity:0;transition:opacity .3s ease}.class-item.selected .radio-icon .check{opacity:1}.class-selector{width:508px;height:216px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.class-selector p{font-family:Bayon,sans-serif;color:rgba(255,255,255,1);font-size:18px;font-weight:400;letter-spacing:.05em;text-align:center}.class-selector .class-list{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:16px}.creator-container{width:534px;height:396px;padding-top:16px;gap:24px}.name-input{width:506px;height:48px;border-radius:16px;border:3px solid #ffbf8b;background-color:rgba(26,25,25,1);text-align:center;font-family:Bayon,sans-serif;color:rgba(255,255,255,1);font-size:20px;font-weight:400;letter-spacing:.05em;text-transform:uppercase}.name-input::-moz-placeholder{color:rgba(255,255,255,.5)}.name-input::placeholder{color:rgba(255,255,255,.5)}.create-button{width:506px;height:48px}.create-button:disabled{opacity:.5;cursor:not-allowed}