@import"https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap";@import"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0";:root{--primary: #FF9EB5;--primary-hover: #FF85A1;--secondary: #fffffcdc;--accent: #FFF9F5;--background-light: #ffffe0dc;--background-dark: #2D2426;--surface: #FFFFFF;--surface-dark: #3D2E38;--text-main: #5D4E52;--text-muted: #9CA3AF;--font-display: "Lexend", sans-serif;--shadow-soft: 0 10px 25px -5px rgba(255, 158, 181, .3);--shadow-glow: 0 0 15px rgba(255, 158, 181, .5);--shadow-primary: 0 0 10px rgba(255, 158, 181, .6);--radius-lg: .5rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--radius-full: 9999px}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:var(--font-display);background-color:var(--background-light);color:var(--text-main);-webkit-font-smoothing:antialiased;overflow-x:hidden}#root{width:100%;min-height:100vh;display:flex;flex-direction:column}.container{width:100%;max-width:480px;margin:0 auto;min-height:100vh;background-color:var(--background-light);display:flex;flex-direction:column;position:relative;overflow:hidden}.header{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem .25rem;z-index:10}.icon-btn{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:var(--radius-full);border:none;background:transparent;color:var(--text-main);cursor:pointer;transition:background-color .2s}.icon-btn:hover{background-color:#ff9eb51a}.header-title{font-size:1.125rem;font-weight:700;text-align:center;flex:1}.progress-bar-container{padding:.5rem 1.5rem}.progress-info{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:.5rem}.progress-text{font-size:.875rem;font-weight:500;text-transform:uppercase;color:#5d4e52b3;letter-spacing:.05em}.progress-badge{color:var(--primary);font-weight:700;font-size:.875rem;background-color:#ff9eb51a;padding:.125rem .5rem;border-radius:var(--radius-full)}.track{height:.75rem;width:100%;border-radius:var(--radius-full);background-color:#fefefd;overflow:hidden}.indicator{height:100%;border-radius:var(--radius-full);background-color:var(--primary);box-shadow:var(--shadow-primary);transition:width .5s ease-out}.content-area{flex:1;overflow-y:auto;padding-bottom:8rem;scrollbar-width:none;-ms-overflow-style:none}.content-area::-webkit-scrollbar{display:none}.question-area{padding:.25rem 1.5rem;text-align:center}.question-text{font-size:1.25rem;font-weight:700;line-height:1.2;margin:0}.grid-area{padding:.25rem}.grid-container{display:grid;gap:.5rem;width:100%;max-width:100%;margin:0 auto;background-color:transparent;padding:0;border-radius:var(--radius-2xl);border:none}.grid-item{position:relative;overflow:hidden;border-radius:var(--radius-xl);background-color:#f3f4f6;aspect-ratio:1}.grid-image{width:100%;height:100%;background-size:cover;background-position:center;transition:transform .7s}.grid-item:hover .grid-image{transform:scale(1.1)}.zoom-hint{display:flex;justify-content:center;margin-top:1.5rem}.zoom-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border-radius:var(--radius-full);background-color:#fff;font-size:.75rem;font-weight:500;color:#5d4e52b3;box-shadow:0 2px 4px #0000000d}.footer{position:absolute;bottom:0;left:0;width:100%;background-color:var(--background-light);border-top:none;padding:1rem 1rem 1.5rem;z-index:20}.input-wrapper{position:relative;width:100%;max-width:448px;margin:0 auto;margin-bottom:.5rem}.input-icon{position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:var(--primary);pointer-events:none;display:flex;align-items:center}.quiz-input{display:block;width:100%;border-radius:var(--radius-xl);border:1px solid rgba(255,158,181,.2);background-color:var(--surface);color:var(--text-main);padding:1rem 1.25rem;font-size:1.125rem;font-weight:500;box-shadow:0 1px 2px #0000000d;transition:all .2s;box-sizing:border-box}.quiz-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px #ff9eb533}.submit-btn{width:100%;max-width:100%;box-sizing:border-box;margin:0 auto;background-color:var(--primary);color:#fff;font-size:1rem;font-weight:700;padding:.875rem 1rem;border-radius:var(--radius-xl);border:none;box-shadow:0 4px 14px #ff9eb580;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all .2s}.submit-btn:hover{background-color:var(--primary-hover);box-shadow:0 6px 20px #ff9eb599}.submit-btn:active{transform:scale(.98)}.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}.fade-in{animation:fadeIn .5s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.material-symbols-outlined{font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24}