:root{-webkit-user-drag:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;--font-primary: "Bodoni Moda", serif;--font-secondary: "Inter", sans-serif;--color-background: hsl(0 0% 95%);--color-surface: #ffffff;--color-text: #1a1a1a;--color-textSecondary: #666666;--color-primary: #00b894;--color-primaryHover: #019875;--color-buttonBg: #2d3436;--color-buttonHover: #636e72;--color-accent: #646cff;--color-accentHover: #535bf2;--shadow-dropShadow: drop-shadow(10px 10px 15px rgba(0, 0, 0, .4));--shadow-boxShadow: 0 4px 12px rgba(0, 0, 0, .15);--shadow-boxShadowHover: 0 6px 20px rgba(0, 0, 0, .2);--transition-fast: .1s ease-in-out;--transition-medium: .4s ease-in-out;--transition-slow: .6s ease-in-out;--transition-layer: .3s ease-in-out;font-family:var(--font-primary);line-height:1.5;font-weight:400;color-scheme:light dark;color:var(--color-text);background-color:var(--color-background);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:var(--color-accent);text-decoration:inherit}a:hover{color:var(--color-accentHover)}body{margin:0;display:flex;place-items:center;justify-content:center;min-width:320px;min-height:100vh;padding:0;background-color:var(--color-background)}h1{font-size:3.2em;font-weight:700;font-style:italic;-webkit-text-stroke-width:.1rem;-webkit-text-stroke-color:var(--color-text);text-shadow:0 0 3rem var(--color-accent);line-height:1.1;color:var(--color-text);font-family:var(--font-primary)}h2{color:var(--color-textSecondary);font-family:var(--font-secondary)}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:var(--font-secondary);background-color:var(--color-buttonBg);color:var(--color-surface);cursor:pointer;transition:all .25s ease}button:hover{background-color:var(--color-buttonHover);transform:translateY(-2px)}button:focus,button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}#root{background-color:var(--color-background)}h1{margin:0;color:var(--color-text);font-family:var(--font-primary);font-size:2.8rem;line-height:1}h2{color:var(--color-textSecondary);font-family:var(--font-secondary);font-size:1.1rem;margin:.4rem 0}.App{text-align:center;background:var(--color-background);height:100vh;padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem;overflow:hidden}.random-btn{background:var(--color-primary);color:var(--color-surface);padding:.6rem 1.4rem;font-size:1rem;border:none;border-radius:2rem;cursor:pointer;margin:.75rem 0;transition:all var(--transition-medium);font-family:var(--font-secondary);font-weight:600;box-shadow:var(--shadow-boxShadow)}.random-btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.random-btn:hover:not(:disabled){background:var(--color-primaryHover);transform:translateY(-3px);box-shadow:var(--shadow-boxShadowHover)}.avatar{display:flex;flex-direction:column;align-items:center;gap:1.5rem;flex:1;justify-content:center;max-height:75vh;min-height:0}.layer{position:relative}.clothes{scale:1.8;object-fit:contain;filter:var(--shadow-dropShadow);transition:opacity var(--transition-layer),filter var(--transition-layer);opacity:1}.clothes.transitioning{opacity:0}.hats{max-height:4rem;z-index:5}.shirts{max-height:7.5rem;z-index:4}.pants{max-height:7.5rem;z-index:3}.shoes{max-height:5rem;z-index:2}.nav-buttons{display:flex;justify-content:center;gap:.5rem;z-index:999;margin-top:.5rem}.nav-buttons button{background-color:var(--color-buttonBg);color:var(--color-surface);border:none;border-radius:4px;padding:.4rem .8rem;cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-secondary);box-shadow:var(--shadow-boxShadow);font-size:.9rem}.nav-buttons button:hover{background-color:var(--color-buttonHover);transform:translateY(-1px);box-shadow:var(--shadow-boxShadowHover)}@media (max-height: 800px){.App{padding:.5rem}h1{font-size:2rem}h2{font-size:.9rem}.avatar{gap:1rem;max-height:55vh}.clothes{scale:1}.hats{max-height:2.5rem}.shirts,.pants{max-height:5rem}.shoes{max-height:3rem}}@media (max-height: 600px){h1{font-size:1.5rem}h2{font-size:.8rem;margin:.25rem 0}.random-btn{padding:.4rem 1rem;font-size:.8rem;margin:.5rem 0}.avatar{gap:.5rem;max-height:50vh}.clothes{scale:.8}.hats{max-height:2rem}.shirts,.pants{max-height:4rem}.shoes{max-height:2.5rem}.nav-buttons button{padding:.2rem .4rem;font-size:.7rem}}@media (max-width: 390px){.nav-buttons{gap:10rem!important;padding:10px!important}}.layer{display:flex;flex-direction:column;gap:-5rem}.nav-buttons{display:flex;gap:20rem}.theme-switcher{position:fixed;top:20px;right:20px;z-index:1000}.theme-selector{position:relative}.theme-selector-btn{background:var(--color-surface);border:2px solid var(--color-primary);border-radius:25px;padding:8px 16px;font-family:var(--font-secondary);font-size:.9rem;color:var(--color-text);cursor:pointer;transition:all var(--transition-medium);box-shadow:var(--shadow-boxShadow);white-space:nowrap}.theme-selector-btn:hover{background:var(--color-primary);color:var(--color-surface);transform:translateY(-2px);box-shadow:var(--shadow-boxShadowHover)}.theme-dropdown{position:absolute;top:100%;right:0;margin-top:8px;background:var(--color-surface);border:2px solid var(--color-primary);border-radius:12px;box-shadow:var(--shadow-boxShadowHover);overflow:hidden;min-width:200px;animation:slideDown .3s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.theme-option{width:100%;padding:12px 16px;background:transparent;border:none;text-align:left;cursor:pointer;display:flex;align-items:center;gap:12px;font-family:var(--font-secondary);color:var(--color-text);transition:all var(--transition-fast)}.theme-option:hover{background:var(--color-primary);color:var(--color-surface)}.theme-option.active{background:var(--color-primary);color:var(--color-surface);font-weight:900}.theme-preview{width:20px;height:20px;border-radius:4px;border:2px solid currentColor;flex-shrink:0}@media (max-width: 768px){.theme-switcher{top:10px;right:10px;gap:8px}.theme-toggle-btn{width:45px;height:45px;font-size:1.3rem}.theme-selector-btn{padding:6px 12px;font-size:.8rem}.theme-dropdown{min-width:180px}}