:root{--primary-color: #faed3b;--primary-color-border: #faed3b;--primary-color-hover: #b86cff;--secondary-color: #333;--app-background-color: #1e1e1e;--tabs-background-color: #202020;--tab-background-color: #2a2a2a;--option-background-color: #2a2a2a;--tab-hover-color: #424242;--text-color: #fff;--button-text-color: #000}*{box-sizing:border-box;-webkit-user-select:none;user-select:none}html,body{height:100%;margin:0;background:var(--app-background-color);font-family:Segoe UI,Arial,sans-serif;color:var(--text-color);display:flex;justify-content:center;align-items:center}#app{display:flex;flex-direction:row;width:100vw;height:100vh;background:var(--app-background-color);border:2px solid var(--secondary-color);border-radius:16px;overflow:hidden;position:relative}#preview-area{display:flex;justify-content:center;min-height:300px;align-items:center;background:var(--secondary-color);border-left:2px solid var(--secondary-color);position:relative}#characterCanvas{object-fit:scale-down;max-width:100%;max-height:100%;display:block}#controls{flex-grow:1;display:flex;flex-direction:column;border-right:2px solid var(--secondary-color);min-height:0;position:relative}#controls .planet{position:absolute;inset:0;object-fit:cover;z-index:-1;pointer-events:none}#tabs{display:flex;padding:8px;gap:6px;background:var(--tabs-background-color);border-bottom:1px solid var(--secondary-color);max-height:100px;min-width:315px;scroll-behavior:smooth;flex-wrap:wrap;justify-content:space-around}.tab{display:inline-block;flex:0 0 auto;padding:10px 14px;background:var(--tab-background-color);border:1px solid var(--secondary-color);border-radius:8px;color:var(--text-color);cursor:pointer;font-weight:700;font-size:14px;transition:all .15s ease-in-out;white-space:nowrap;text-transform:uppercase}.tab:hover{background:var(--tab-hover-color)}.tab.active{background:var(--primary-color);color:var(--button-text-color);border-color:var(--primary-color-border)}#options{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));grid-auto-rows:90px;gap:12px;padding:15px;justify-items:center;min-height:0;overflow-y:auto;position:relative}.planet{pointer-events:none;z-index:-100;position:absolute;inset:0}.option{width:90px;height:90px;border-radius:12px;overflow:hidden;border:2px solid var(--secondary-color);cursor:pointer;display:flex;justify-content:center;align-items:center;transition:all .15s ease-in-out}.option:hover{border-color:var(--primary-color);transform:scale(1.05)}.option.selected{border-color:var(--primary-color)}.option img{width:100%;height:100%;object-fit:scale-down}.color-swatch{width:70%;height:70%;border-radius:50%;border:2px solid var(--secondary-color)}#options::-webkit-scrollbar{width:10px}#options::-webkit-scrollbar-thumb{background-color:var(--tab-background-color);border-radius:10px}#options::-webkit-scrollbar-thumb:hover{background-color:var(--tab-hover-color)}.done-button{margin:12px auto 18px;width:80%;max-width:300px;padding:14px 0;font-size:1.2rem;font-weight:700;text-align:center;color:var(--button-text-color);background:var(--primary-color);border:var(--primary-color-border) 2px solid;border-radius:12px;cursor:pointer;transition:all .2s ease-in-out;text-transform:uppercase}.done-button:hover{background:var(--primary-color);transform:scale(1.03)}.option.clear-name{color:red;font-weight:700;font-size:2em;display:flex;align-items:center;justify-content:center;cursor:pointer}.option.clear-name:before{content:"✖"}.option.clear-name:hover{border-color:red;transform:scale(1.05)}.option.clear-name.selected{border-color:red}#characterCanvas{padding-right:50px;padding-top:0}@media(max-width:768px){#app{flex-direction:column;width:100vw;height:100vh}#controls{order:2}#preview-area{order:1}#characterCanvas{padding-right:0;padding-top:50px}}@media(max-width:768px)and (max-height:500px){#app{flex-direction:row}#controls{order:1}#preview-area{order:2}#characterCanvas{padding-right:50px;padding-top:0}}