:root{--color-primary: #ff5722;--color-secondary: #03a9f4;--color-text: #212121;--color-bg-light: #f1f8e9;--color-anatomy-header: #9c27b0;--color-function-header: #4caf50;--color-fun-fact: #d84315;--color-fun-fact-bg: #fff3e0}@keyframes bounceIn{0%,20%,40%,60%,80%,to{transition-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:scale3d(.3,.3,.3)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}to{opacity:1;transform:scaleZ(1)}}@keyframes cardEntrance{0%{opacity:0;transform:scale(.8) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%{transform:translate(0) rotate(0)}50%{transform:translate(15px,20px) rotate(3deg)}to{transform:translate(0) rotate(0)}}@keyframes float2{0%{transform:translate(0) rotate(0)}50%{transform:translate(-10px,-15px) rotate(-5deg)}to{transform:translate(0) rotate(0)}}body{font-family:Comic Sans MS,Arial,sans-serif;margin:0;padding:0;background-color:var(--color-bg-light);background-image:radial-gradient(#dce775 .5px,transparent .5px);background-size:15px 15px;color:var(--color-text);overflow-x:hidden}.main-header,.main-footer{background-color:var(--color-secondary);color:#fff;padding:18px 20px;text-align:center;font-weight:800;letter-spacing:1px;box-shadow:0 2px 4px #0000001a}.page-container{padding:20px;max-width:1100px;margin:0 auto;text-align:center}.main-content-wrapper{position:relative;overflow:hidden;min-height:85vh}.anatomy-page-container{padding:20px;max-width:1100px;margin:0 auto;text-align:center}.main-content-wrapper:before,.main-content-wrapper:after,.main-content-wrapper [class^=decoration-]{position:absolute;border-radius:50%;z-index:-1;filter:blur(10px)}.main-content-wrapper:before{content:"";opacity:.15;top:50px;left:50px;width:150px;height:150px;background-color:var(--color-secondary);animation:float 10s ease-in-out infinite;animation-delay:0s}.main-content-wrapper:after{content:"";opacity:.1;bottom:50px;right:50px;width:100px;height:100px;background-color:var(--color-primary);animation:float2 12s ease-in-out infinite;animation-delay:5s}.main-content-wrapper .decoration-top-right{top:20px;right:20px;width:80px;height:80px;background-color:#ffb74d;opacity:.18;animation:float 8s ease-in-out infinite;filter:blur(12px);animation-delay:2s}.main-content-wrapper .decoration-bottom-left{bottom:30px;left:30px;width:120px;height:120px;background-color:#81c784;opacity:.12;animation:float2 14s ease-in-out infinite;filter:blur(9px);animation-delay:7s}.main-content-wrapper .decoration-center{top:50%;left:50%;transform:translate(-50%,-50%) rotate(0);width:60px;height:60px;background-color:#64b5f6;opacity:.1;animation:float 9s ease-in-out infinite;filter:blur(7px);animation-delay:3s}.main-content-wrapper .decoration-extra-1{top:10%;right:40%;width:40px;height:40px;background-color:#f06292;opacity:.2;animation:float2 7s ease-in-out infinite;filter:blur(5px);animation-delay:1s}.main-content-wrapper .decoration-extra-2{bottom:10%;left:45%;width:90px;height:90px;background-color:#ffd54f;opacity:.15;animation:float 11s ease-in-out infinite;filter:blur(8px);animation-delay:4s}.main-content-wrapper .decoration-extra-3{top:70%;left:80%;width:50px;height:50px;background-color:#4db6ac;opacity:.1;animation:float2 9s ease-in-out infinite;filter:blur(6px);animation-delay:6s}.main-content-wrapper .decoration-extra-4{bottom:75%;right:85%;width:140px;height:140px;background-color:#7986cb;opacity:.08;animation:float 13s ease-in-out infinite;filter:blur(14px);animation-delay:8s}.anatomy-page-container h1{color:var(--color-primary);font-size:3rem;margin-bottom:5px;text-shadow:3px 3px 0px #fff,5px 5px 0px rgba(0,0,0,.1);animation:bounceIn 1s ease-out}.subtitle{font-size:1.3rem;color:#616161;margin-bottom:40px;animation:fadeIn 1.5s ease-out forwards;opacity:0;animation-delay:.5s}.separator-line{width:150px;height:5px;background-color:var(--color-primary);border-radius:5px;margin:15px auto 40px;box-shadow:0 2px 4px #0003;transform:rotate(-1deg);animation:fadeIn .8s ease-out forwards;animation-delay:1s;opacity:0}.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;padding:20px 0}.card-link{text-decoration:none;color:inherit;display:block;animation:cardEntrance .6s ease-out forwards;opacity:0}.cards-grid .card-link:nth-child(1){animation-delay:1.2s}.cards-grid .card-link:nth-child(2){animation-delay:1.4s}.cards-grid .card-link:nth-child(3){animation-delay:1.6s}.card{border-radius:12px;background-color:#fff;box-shadow:0 4px 8px #0000001a,0 6px 20px #00000014;overflow:hidden;transition:transform .3s cubic-bezier(.25,.8,.25,1),box-shadow .3s cubic-bezier(.25,.8,.25,1);text-align:left}.card:hover{transform:translateY(-8px);box-shadow:0 12px 24px #00000038,0 8px 8px #00000047;cursor:pointer}.card-header{padding:15px 20px;border-bottom:1px solid rgba(0,0,0,.1)}.card-body{padding:20px;background-color:#ffffffe6}.card-title-container{display:flex;align-items:center;gap:10px}.system-icon-circle{width:35px;height:35px;border-radius:50%;background-color:#fff;display:flex;justify-content:center;align-items:center;box-shadow:0 2px 5px #0000001a}.icon-emoji{font-size:18px;line-height:1}.card-header h2{margin:0;color:var(--color-text);font-size:1.6rem}.gif-container{max-height:200px;height:200px;overflow:hidden;display:flex;justify-content:center;align-items:center;background-color:#fafafa;padding:10px}.system-gif{max-width:100%;max-height:100%;width:auto;height:auto;display:block;border-radius:8px;object-fit:contain}.button-more{background-color:var(--color-primary);color:#fff;padding:10px;border-radius:8px;text-align:center;font-weight:700;margin-top:10px;box-shadow:0 3px #d84315;transition:all .1s}.button-more:active{transform:translateY(3px);box-shadow:none}.detail-page-content{max-width:900px;margin:0 auto;padding:20px;position:relative}.back-button{background-color:var(--color-secondary);color:#fff;padding:12px 20px;border:none;border-radius:25px;cursor:pointer;transition:background-color .3s,transform .1s;position:absolute;top:20px;left:20px;box-shadow:0 2px 4px #0003;animation:fadeIn .8s ease-out forwards;animation-delay:.2s;opacity:0}.back-button:hover{background-color:#0288d1;transform:scale(1.05)}.detail-header{padding:25px 30px;border-radius:15px;margin-top:50px;margin-bottom:30px;color:#fff;box-shadow:0 10px 20px #0003;background-image:linear-gradient(135deg,var(--color-primary),#ff9100);animation:slideInUp .8s ease-out forwards;animation-delay:.4s;opacity:0}.detail-header h1{color:#fff;font-size:2.8rem;text-shadow:1px 1px 3px rgba(0,0,0,.4)}.detail-gif-container{max-width:100%;margin:30px auto;border-radius:20px;overflow:hidden;box-shadow:0 10px 30px #0000004d;background-color:#fff;animation:fadeIn 1s ease-out forwards;animation-delay:.6s}.detail-system-gif{width:100%;height:auto;display:block}.detail-info-box{text-align:left;background-color:#fff;padding:25px;border-radius:15px;box-shadow:0 6px 15px #0000001a;margin:40px 0;border-left:8px solid;animation:slideInUp .8s ease-out forwards;opacity:0}.detail-info-box:nth-of-type(1){animation-delay:.8s}.detail-info-box:nth-of-type(2){animation-delay:1s}.detail-info-box h2{font-size:1.8rem;padding-bottom:0;margin-bottom:10px;border:none;padding-left:0}.detail-info-box h2.anatomy{color:var(--color-anatomy-header);border-color:var(--color-anatomy-header)}.detail-info-box h2.function{color:var(--color-function-header);border-color:var(--color-function-header)}.main-description{font-size:1.15rem;line-height:1.7;padding-left:10px}.detail-fun-fact{background-color:var(--color-fun-fact-bg);padding:25px;border-radius:15px;font-size:1.2rem;font-weight:700;color:var(--color-fun-fact);border:3px solid var(--color-fun-fact);box-shadow:0 4px 10px #0000001a;animation:bounceIn 1s ease-out forwards;animation-delay:1.2s;opacity:0}.call-to-action{font-size:1.6rem;margin-top:30px;font-style:italic;color:var(--color-primary);font-weight:800;animation:fadeIn 1s ease-out forwards;animation-delay:1.4s;opacity:0}.bg-pink-100{background-image:linear-gradient(135deg,#e91e63,#ff6f9f)}.bg-blue-100{background-image:linear-gradient(135deg,#0288d1,#4fc3f7)}.bg-yellow-100{background-image:linear-gradient(135deg,#ffb300,#ffeb3b)}
