:root{--bg-primary: #0f0c29;--bg-secondary: #302b63;--bg-tertiary: #24243e;--accent-primary: #00d2ff;--accent-secondary: #3a7bd5;--text-primary: #ffffff;--text-secondary: #b0b0b0;--glass-bg: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1);--font-family: "Inter", system-ui, -apple-system, sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background:linear-gradient(135deg,var(--bg-primary),var(--bg-secondary),var(--bg-tertiary));background-size:400% 400%;animation:gradientBG 15s ease infinite;color:var(--text-primary);min-height:100vh;overflow-x:hidden}@keyframes gradientBG{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}button{font-family:inherit;cursor:pointer}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:16px;box-shadow:0 4px 30px #0000001a}.btn-primary{background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));border:none;padding:12px 24px;border-radius:8px;color:#fff;font-weight:600;transition:transform .2s,box-shadow .2s;display:flex;align-items:center;gap:.5rem}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 15px var(--accent-primary)}.btn-secondary{background:transparent;border:1px solid var(--glass-border);padding:12px 24px;border-radius:8px;color:var(--text-secondary);transition:all .2s;display:flex;align-items:center;gap:.5rem}.btn-secondary:hover{background:var(--glass-bg);color:var(--text-primary);border-color:var(--text-primary)}h1,h2,h3{font-weight:700;letter-spacing:-.02em}.app-container{display:flex;flex-direction:column;min-height:100vh;padding:1rem}@media(min-width:768px){.app-container{padding:2rem}}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;max-width:1200px;margin-left:auto;margin-right:auto;width:100%}.logo-section{display:flex;align-items:center;gap:.75rem}.logo-icon{width:2.5rem;height:2.5rem;border-radius:50%;background:linear-gradient(to top right,var(--accent-primary),var(--accent-secondary));display:flex;align-items:center;justify-content:center}.logo-text{font-size:1.5rem;background:linear-gradient(to right,white,var(--accent-primary));-webkit-background-clip:text;background-clip:text;color:transparent}.main-content{flex:1;width:100%;max-width:1024px;margin:0 auto;display:flex;flex-direction:column;gap:1.5rem}.grid-layout{display:grid;gap:1rem}.character-grid,.pose-grid{grid-template-columns:repeat(2,1fr)}@media(min-width:768px){.character-grid,.pose-grid{grid-template-columns:repeat(4,1fr)}}.bg-grid{grid-template-columns:repeat(2,1fr)}@media(min-width:768px){.bg-grid{grid-template-columns:repeat(3,1fr)}}.card-btn{position:relative;overflow:hidden;border:none;padding:0;transition:transform .2s;cursor:pointer}.card-btn:hover{transform:scale(1.05);z-index:1;border-color:var(--accent-primary)}.card-image{width:100%;height:100%;object-fit:cover;opacity:.8;transition:opacity .2s}.card-btn:hover .card-image{opacity:1}.card-overlay{position:absolute;bottom:0;left:0;right:0;padding:.75rem;background:linear-gradient(to top,rgba(0,0,0,.9),transparent);color:#fff;font-weight:700;font-size:.875rem;text-align:left}.aspect-portrait{aspect-ratio:3/4}.aspect-square{aspect-ratio:1/1}.aspect-video{aspect-ratio:16/9}.nav-buttons{display:flex;justify-content:space-between;margin-top:2rem}.progress-container{width:100%;height:.5rem;background:#ffffff1a;border-radius:999px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));transition:width .5s ease}.step-title{text-align:center;font-size:2rem;font-weight:700;margin-bottom:1rem}@media(min-width:768px){.step-title{font-size:2.5rem}}.capture-area{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;height:100%;min-height:400px}.camera-placeholder{width:100%;max-width:400px;aspect-ratio:3/4;background:#0003;display:flex;align-items:center;justify-content:center;border-radius:16px;color:#ffffff80}.decorate-area{display:flex;flex-direction:column;gap:1rem;height:100%;min-height:500px}.preview-area{flex:1;display:flex;align-items:center;justify-content:center;min-height:300px;position:relative}.stickers-area{height:auto;padding:1.5rem}.stickers-title{font-size:.875rem;font-weight:700;margin-bottom:.75rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.stickers-scroll{display:flex;gap:1rem;overflow-x:auto;padding-bottom:.5rem}.sticker-btn{font-size:2.5rem;background:none;border:none;padding:.5rem;transition:transform .2s;cursor:pointer}.sticker-btn:hover{transform:scale(1.25)}.action-buttons{display:flex;gap:1rem}.w-full{width:100%}.step-container{display:flex;flex-direction:column;height:100%;height:100dvh;height:100svh;max-height:-webkit-fill-available;width:100%;padding:.5rem;padding-bottom:calc(.5rem + env(safe-area-inset-bottom,0px));overflow:hidden}@media(min-width:768px){.step-container{padding:1rem}}.step-header{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}@media(min-width:480px){.step-header{flex-direction:row;justify-content:space-between;align-items:center;margin-bottom:1.5rem}}.back-btn{display:flex;align-items:center;gap:.5rem;color:var(--accent-primary);background:transparent;border:none;font-size:.875rem;font-weight:500;padding:.75rem 0;min-height:44px;transition:color .2s}@media(min-width:768px){.back-btn{font-size:.9rem;padding:.5rem 0}}.back-btn:hover{color:#fff}.back-btn:active{opacity:.7}.step-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:min-content;gap:.75rem;padding:.25rem;padding-bottom:calc(.5rem + env(safe-area-inset-bottom,16px));overflow-y:auto;flex:1;min-height:0;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--glass-border) transparent}@media(min-width:360px){.step-grid{gap:1rem}}@media(min-width:480px){.step-grid{grid-template-columns:repeat(3,1fr);gap:1rem}}@media(min-width:768px){.step-grid{grid-template-columns:repeat(3,1fr);gap:1.25rem;padding:.5rem}}@media(min-width:1024px){.step-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.5rem}}.step-grid::-webkit-scrollbar{width:6px}.step-grid::-webkit-scrollbar-track{background:transparent}.step-grid::-webkit-scrollbar-thumb{background-color:var(--glass-border);border-radius:20px}.category-grid{display:flex;flex-direction:column;gap:1rem;padding:.5rem;padding-bottom:calc(.5rem + env(safe-area-inset-bottom,16px));flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--glass-border) transparent}@media(min-width:480px){.category-grid{flex-direction:row;gap:1.25rem;padding:1rem}}@media(min-width:768px){.category-grid{gap:1.5rem;padding:1.5rem}}@media(min-width:1024px){.category-grid{gap:2rem;padding:2rem}}.asset-card{position:relative;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:10px;overflow:hidden;cursor:pointer;transition:all .3s cubic-bezier(.25,.8,.25,1);aspect-ratio:3/4;display:flex;flex-direction:column;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;width:100%;height:auto;min-width:0}@media(min-width:768px){.asset-card{border-radius:12px}}@media(hover:hover)and (pointer:fine){.asset-card:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 10px 30px -10px #00000080;border-color:var(--accent-primary);z-index:10}.asset-card:hover img{transform:scale(1.1)}.asset-card:hover .card-overlay{transform:translateY(0)}}.asset-card:active{transform:scale(.97);opacity:.9}.asset-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.card-overlay{position:absolute;bottom:0;left:0;right:0;padding:.75rem;background:linear-gradient(to top,rgba(15,12,41,.95),transparent);transform:translateY(0);transition:transform .3s ease;display:flex;flex-direction:column;gap:.25rem}@media(hover:hover)and (pointer:fine){.card-overlay{transform:translateY(100%)}}@media(min-width:768px){.card-overlay{padding:1rem}}.card-title{color:#fff;font-weight:600;font-size:.75rem;text-transform:capitalize;text-shadow:0 2px 4px rgba(0,0,0,.5);line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}@media(min-width:480px){.card-title{font-size:.875rem}}@media(min-width:768px){.card-title{font-size:1rem}}.skeleton{background:linear-gradient(90deg,#ffffff0d 25%,#ffffff1a,#ffffff0d 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:10px}@media(min-width:768px){.skeleton{border-radius:12px}}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:200px;color:var(--text-secondary);text-align:center;gap:.75rem;padding:1rem;font-size:.875rem}@media(min-width:768px){.empty-state{height:300px;gap:1rem;font-size:1rem}}.category-card-lg{flex:1;min-height:120px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;aspect-ratio:auto!important;width:100%}@media(min-width:480px){.category-card-lg{min-height:200px}}@media(min-width:768px){.category-card-lg{min-height:250px}}@media(min-width:1024px){.category-card-lg{min-height:350px}}.category-title-lg{font-size:1.25rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#fff;z-index:2;text-shadow:0 4px 10px rgba(0,0,0,.5);text-align:center;padding:0 1rem 1rem}@media(min-width:480px){.category-title-lg{font-size:1.5rem;letter-spacing:.08em;padding:0 1rem 1.25rem}}@media(min-width:768px){.category-title-lg{font-size:1.75rem;padding:0 1rem 1.5rem}}@media(min-width:1024px){.category-title-lg{font-size:2rem;letter-spacing:.1em;padding:0 1rem 2rem}}.hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.hide-scrollbar::-webkit-scrollbar{display:none}.safe-area-bottom{padding-bottom:env(safe-area-inset-bottom,0)}.touch-btn{min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center}