:root{--color-white: #f9f9f9;--color-yellow: #ffeb3b;--color-yellow-light: #fff59d;--color-blue: #1e90ff;--color-blue-dark: #1565c0;--color-black: #000000;--color-gray: #757575;--font-family-title: "Gochi Hand", cursive;--font-family-body: "Poppins", sans-serif;--transition-fast: .2s ease;--transition-smooth: .3s ease;--transition-slow: .5s ease;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 4px 8px rgba(0, 0, 0, .15);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .2);--shadow-xl: 0 12px 24px rgba(0, 0, 0, .25);font-display:swap}*{box-sizing:border-box;margin:0;padding:0}body{margin:0;padding:0;display:flex;place-items:center;min-width:320px;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);background-attachment:fixed}html,body{width:100%;height:100%;font-size:16px;scroll-behavior:smooth}#app,.app-container{width:100%;animation:fadeIn .6s ease-in-out;height:100%}.app-container{display:flex;flex-direction:column}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.app-header{display:flex;justify-content:space-between;align-items:center;margin:.5rem;margin-bottom:0;padding:1rem 2rem;background:linear-gradient(135deg,var(--color-yellow) 0%,var(--color-yellow-light) 100%);box-shadow:var(--shadow-lg);border-radius:3rem;position:sticky;top:.5rem;z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:var(--transition-smooth)}.app-header:hover{box-shadow:var(--shadow-xl),0 0 40px #ffeb3b66;transform:translateY(-2px)}.app-title{font-size:3.2rem;color:var(--color-black);font-weight:700;font-family:var(--font-family-title);text-shadow:2px 2px 4px rgba(0,0,0,.1),0 0 20px rgba(255,235,59,.3);animation:bounce 1s ease-in-out}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.app-nav{display:flex;gap:1rem;flex-wrap:wrap}.app-button{padding:.75rem 1.5rem;background-color:var(--color-white);color:var(--color-black);border:2px solid var(--color-black);border-radius:3rem;cursor:pointer;font-family:var(--font-family-body);font-size:1.1rem;font-weight:500;box-shadow:var(--shadow-md);text-shadow:1px 1px 2px rgba(0,0,0,.1);transition:transform var(--transition-fast),box-shadow var(--transition-fast);position:relative;overflow:hidden;will-change:transform}.app-button:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);transition:width .6s,height .6s}.app-button:hover:before{width:300px;height:300px}.app-button:hover{transform:translateY(-3px) scale(1.05);box-shadow:var(--shadow-lg)}.app-button:active{transform:translateY(-1px) scale(1.02)}.button-active{background:linear-gradient(135deg,var(--color-blue) 0%,var(--color-blue-dark) 100%);border:2px solid var(--color-white);color:var(--color-white);box-shadow:var(--shadow-lg);animation:pulse 2s infinite}@keyframes pulse{0%,to{box-shadow:0 0 #1e90ffb3}50%{box-shadow:0 0 0 10px #1e90ff00}}.app-main{flex:1;padding:1.5rem;font-family:var(--font-family-body)}.section-container{opacity:1;transform:translateY(0);transition:opacity .3s ease,transform .3s ease}.app-section{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-auto-rows:1fr;gap:1rem;animation:slideUp .5s ease-out;grid-auto-flow:dense;contain:layout style}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.section-card{background:linear-gradient(135deg,var(--color-yellow) 0%,var(--color-yellow-light) 100%);border-radius:2rem;padding:1rem 1.5rem 1.5rem;box-shadow:var(--shadow-md);display:flex;flex-direction:column;align-items:center;text-align:center;transition:transform var(--transition-smooth),box-shadow var(--transition-smooth),border-color var(--transition-smooth);cursor:pointer;position:relative;overflow:hidden;animation:cardFadeIn .6s ease-out backwards;border:2px solid transparent;will-change:transform;contain:layout style paint}@keyframes cardFadeIn{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.section-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#ffffff4d,#fff0);opacity:0;transition:opacity var(--transition-smooth)}.section-card:hover{transform:translateY(-10px) scale(1.03) rotate(-1deg);box-shadow:var(--shadow-xl),0 0 30px #1e90ff4d;border-color:var(--color-blue)}@media(hover:hover)and (pointer:fine){.section-card:hover{transform:translateY(-10px) scale(1.03) rotate(-1deg)}}.section-card:hover:before{opacity:1}.section-card:active{transform:translateY(-5px) scale(1.01);transition:all .1s ease}.section-card:nth-child(1){animation-delay:.05s}.section-card:nth-child(2){animation-delay:.1s}.section-card:nth-child(3){animation-delay:.15s}.section-card:nth-child(4){animation-delay:.2s}.section-card:nth-child(5){animation-delay:.25s}.section-card:nth-child(6){animation-delay:.3s}.section-card:nth-child(7){animation-delay:.35s}.section-card:nth-child(8){animation-delay:.4s}.section-card:nth-child(9){animation-delay:.45s}.section-card:nth-child(10){animation-delay:.5s}.section-card:nth-child(n+11){animation-delay:.55s}.section-card-title{position:absolute;bottom:-1rem;padding:1rem;font-size:1.6rem;background:linear-gradient(135deg,var(--color-yellow) 0%,var(--color-yellow-light) 100%);box-shadow:var(--shadow-lg);border-top-left-radius:1.5rem;border-top-right-radius:1.5rem;margin-bottom:1rem;color:var(--color-black);font-family:var(--font-family-title);text-shadow:1px 1px 2px rgba(0,0,0,.1);transition:all var(--transition-fast);z-index:1}.section-card:hover .section-card-title{transform:scale(1.1) rotate(-2deg);color:var(--color-blue-dark);text-shadow:2px 2px 8px rgba(30,144,255,.5)}.section-card .section-card-text{font-size:.95rem;color:var(--color-gray);font-weight:500;z-index:1;position:absolute;top:0rem;left:0rem;padding:.5rem;background-color:var(--color-white);border-bottom-right-radius:1rem;transition:all var(--transition-fast)}.section-card:hover .section-card-text{background-color:var(--color-blue);color:var(--color-white);transform:scale(1.05)}.section-card img{max-width:100%;height:100%;object-fit:cover;border-radius:1rem;background-color:var(--color-white);transition:transform var(--transition-smooth),box-shadow var(--transition-smooth);box-shadow:var(--shadow-sm);animation:imageLoad .5s ease-out;will-change:transform;content-visibility:auto}.section-card:hover img{transform:scale(1.05);box-shadow:var(--shadow-md)}.modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:none;align-items:center;justify-content:center;animation:fadeIn var(--transition-smooth)}.modal-open{display:flex}.modal-open .modal-content{animation:modalSlideIn .4s cubic-bezier(.34,1.56,.64,1)}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-50px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000c;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:fadeIn var(--transition-smooth)}.modal-content{position:relative;background:linear-gradient(135deg,var(--color-white) 0%,#e8eaf6 100%);border-radius:2rem;max-width:900px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-xl),0 0 50px #0000004d;z-index:1001;scrollbar-width:thin;scrollbar-color:var(--color-yellow) transparent;border:3px solid var(--color-yellow);will-change:transform,opacity;contain:layout style paint}.modal-content::-webkit-scrollbar{width:8px}.modal-content::-webkit-scrollbar-track{background:transparent}.modal-content::-webkit-scrollbar-thumb{background:var(--color-yellow);border-radius:4px}.modal-close{position:absolute;top:1rem;right:1rem;background:var(--color-yellow);border:2px solid var(--color-black);border-radius:50%;width:40px;height:40px;font-size:1.8rem;line-height:1;cursor:pointer;transition:transform var(--transition-fast),background var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast);z-index:1002;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);font-weight:700;will-change:transform}.modal-close:hover{transform:rotate(90deg) scale(1.2);background:var(--color-blue);color:var(--color-white);box-shadow:var(--shadow-lg),0 0 20px #1e90ff80}.modal-close:active{transform:rotate(90deg) scale(1.1)}.modal-body{display:grid;grid-template-columns:1fr 1.5fr;gap:2rem;padding:2rem}.modal-image-container{position:sticky;top:2rem;height:fit-content}.modal-image{width:100%;height:auto;border-radius:1.5rem;box-shadow:var(--shadow-lg);background:var(--color-white);transition:transform var(--transition-smooth),box-shadow var(--transition-smooth);animation:fadeInUp .5s ease-out .1s backwards;will-change:transform;backface-visibility:hidden;transform:translateZ(0)}.modal-image:hover{transform:scale(1.05) rotate(2deg);box-shadow:var(--shadow-xl),0 0 30px #1e90ff66}.modal-info{display:flex;flex-direction:column;gap:1.5rem}.modal-title{font-size:2.5rem;color:var(--color-black);font-family:var(--font-family-title);text-shadow:2px 2px 4px rgba(0,0,0,.1);margin-bottom:.5rem;animation:fadeInUp .5s ease-out}.modal-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;background:var(--color-yellow-light);padding:1.5rem;border-radius:1rem;box-shadow:var(--shadow-sm);animation:fadeInUp .5s ease-out .2s backwards}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-detail-item{display:flex;flex-direction:column;gap:.25rem;transition:transform var(--transition-fast);padding:.5rem;border-radius:.5rem}.modal-detail-item:hover{transform:translateY(-2px);background:#ffffff80}.modal-label{font-size:.9rem;font-weight:600;color:var(--color-gray);text-transform:uppercase;letter-spacing:.5px}.modal-value{font-size:1.1rem;font-weight:500;color:var(--color-black)}.modal-description{height:fit-content}.modal-description,.modal-phrases{background:var(--color-white);padding:1.5rem;border-radius:1rem;box-shadow:var(--shadow-sm);animation:fadeInUp .5s ease-out .3s backwards}.modal-subtitle{font-size:1.5rem;color:var(--color-black);font-family:var(--font-family-title);margin-bottom:1rem;border-bottom:3px solid var(--color-yellow);padding-bottom:.5rem;transition:all var(--transition-fast)}.modal-subtitle:hover{color:var(--color-blue);border-bottom-color:var(--color-blue);transform:translate(5px)}.modal-text{font-size:1rem;line-height:1.6;color:var(--color-gray)}.modal-phrases-list{list-style:none;display:flex;flex-direction:column;gap:.75rem}.modal-phrase-item{font-size:1rem;color:var(--color-black);padding:.75rem 1rem;background:var(--color-yellow-light);border-radius:.75rem;border-left:4px solid var(--color-blue);box-shadow:var(--shadow-sm);font-style:italic;transition:all var(--transition-fast);position:relative;overflow:hidden}.modal-phrase-item:before{content:'"';position:absolute;font-size:4rem;color:var(--color-blue);opacity:.1;top:-10px;left:10px;font-family:Georgia,serif;transition:all var(--transition-fast)}.modal-phrase-item:hover:before{opacity:.3;transform:scale(1.2)}.modal-phrase-item:hover{transform:translate(10px) scale(1.02);box-shadow:var(--shadow-md);background:var(--color-yellow);border-left-width:6px}.pagination{display:flex;justify-content:center;align-items:center;gap:1rem;margin:2rem 0}.pagination-btn{padding:.75rem 1.5rem;border:2px solid var(--color-black);background:var(--color-white);border-radius:3rem;cursor:pointer;font-size:1rem;font-family:var(--font-family-body);font-weight:600;transition:all var(--transition-fast);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}.pagination-btn:hover{background-color:var(--color-blue);transition:width .5s,height .5s;transform:translate(-50%,-50%)}.pagination-btn:hover:not(:disabled):before{width:300px;height:300px}.pagination-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-md);color:var(--color-black);border-color:var(--color-blue)}.pagination-btn>*{position:relative;z-index:1}.pagination-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.page-info{font-weight:700;font-family:var(--font-family-body);color:var(--color-black);background:var(--color-yellow-light);padding:.75rem 1.5rem;border-radius:3rem;box-shadow:var(--shadow-sm);border:2px solid var(--color-black);animation:fadeIn .3s ease-in-out}.app-footer{text-align:center;padding:1rem;font-size:.9rem;color:var(--color-gray);font-family:var(--font-family-body);background:linear-gradient(135deg,var(--color-yellow) 0%,var(--color-yellow-light) 100%);box-shadow:var(--shadow-md);border-top-left-radius:2rem;border-top-right-radius:2rem;width:fit-content;margin:0 auto;transition:all var(--transition-fast)}.app-footer:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}.footer-text{margin:0;transition:all var(--transition-fast)}.app-footer:hover .footer-text{color:var(--color-blue-dark);font-weight:600}@media(min-width:768px){.app-header{margin:1rem;margin-bottom:0}.app-nav{gap:1.5rem}.app-button{padding:.85rem 1.75rem;font-size:1.2rem}.app-main{padding:2rem;padding-bottom:0}.app-section{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}}@media(max-width:768px){.modal-content{width:95%;max-height:95vh}.modal-body{grid-template-columns:1fr;gap:1.5rem;padding:3rem 1.5rem 1.5rem}.modal-image-container{position:relative;top:0}.modal-title{font-size:2rem}.modal-details{grid-template-columns:1fr;padding:1rem}.modal-close{width:36px;height:36px;font-size:1.5rem}}@media(min-width:1200px){.app-section{grid-template-columns:repeat(auto-fill,minmax(350px,1fr))}}@media(max-width:767px){.app-header{flex-direction:column;gap:1rem;border-radius:2rem;position:relative;top:0}.app-nav{width:100%;justify-content:center}.app-button{padding:.6rem 1rem;font-size:1rem;flex:1;min-width:90px}.app-main{padding:1rem}.app-section{grid-template-columns:1fr;gap:1.5rem}}@media(max-width:480px){.app-title{font-size:1.8rem}.app-button{padding:.5rem .75rem;font-size:.9rem;min-width:80px}.app-section{gap:1rem}.modal-content{border-radius:1rem}.modal-body{padding:2.5rem 1rem 1rem}.modal-title{font-size:1.6rem}.modal-subtitle{font-size:1.2rem}.modal-description,.modal-phrases{padding:1rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.loading-container{display:flex;justify-content:center;align-items:center;min-height:400px;animation:fadeIn .3s ease-in-out}.spinner{width:60px;height:60px;border:5px solid var(--color-yellow-light);border-top-color:var(--color-blue);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.section-card.loading{animation:skeleton-loading 1.5s infinite;pointer-events:none}@keyframes skeleton-loading{0%,to{opacity:.5}50%{opacity:.8}}.section-card img{animation:imageLoad .5s ease-out}@keyframes imageLoad{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.app-button:focus-visible{outline:3px solid var(--color-blue);outline-offset:3px}.section-card:focus-visible{outline:3px solid var(--color-blue);outline-offset:5px}