.app{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif}.menu{display:flex;justify-content:center;gap:1rem;padding:1.5rem;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 30px #0000001a;border-bottom:1px solid rgba(255,255,255,.1);position:relative;z-index:100}.menu-item-container{position:relative}.menu-item{padding:.8rem 2rem;font-size:1rem;font-weight:500;color:#fff;background:transparent;border:2px solid rgba(255,255,255,.3);border-radius:50px;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;letter-spacing:.5px;display:flex;align-items:center;gap:8px;white-space:nowrap}.arrow{font-size:12px;transition:transform .3s ease;display:inline-block}.menu-item-container:hover .arrow{transform:rotate(180deg)}.menu-item:hover{background:#ffffff26;border-color:#fffc;transform:translateY(-2px);box-shadow:0 5px 15px #0003}.menu-item.active{background:#fff;color:#667eea;border-color:#fff;box-shadow:0 5px 20px #ffffff4d}.menu-item.active:after{content:"";position:absolute;top:50%;left:50%;width:100%;height:100%;background:#ffffff4d;border-radius:50px;transform:translate(-50%,-50%) scale(0);animation:ripple .6s ease-out}@keyframes ripple{0%{transform:translate(-50%,-50%) scale(0);opacity:1}to{transform:translate(-50%,-50%) scale(2);opacity:0}}.submenu{position:absolute;top:100%;left:50%;transform:translate(-50%);min-width:220px;background:#fff;border-radius:12px;box-shadow:0 15px 40px #0003;padding:.5rem 0;margin-top:12px;z-index:1000;animation:slideDown .3s ease;transform-origin:top;border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffffa}.submenu:before{content:"";position:absolute;top:-8px;left:50%;transform:translate(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid white;filter:drop-shadow(0 -4px 4px rgba(0,0,0,.05))}@keyframes slideDown{0%{opacity:0;transform:translate(-50%) translateY(-15px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.submenu-item{display:block;width:100%;padding:.9rem 1.8rem;text-align:left;background:none;border:none;color:#333;font-size:.95rem;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap;position:relative;overflow:hidden}.submenu-item:hover{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding-left:2.2rem}.submenu-item.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-weight:600;position:relative}.submenu-item.active:before{content:"✓";position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:14px}.category-page{padding:30px;animation:fadeIn .5s ease}.category-page h2{color:#333;margin-bottom:15px;font-size:32px;font-weight:600;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline-block}.category-page p{color:#666;margin-bottom:30px;font-size:18px;line-height:1.6}.submenu-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin:40px 0;animation:slideUp .5s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.submenu-button{padding:18px 25px;background:#fff;color:#667eea;border:2px solid #667eea;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #667eea1a;position:relative;overflow:hidden;text-align:center;letter-spacing:.5px}.submenu-button:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#667eea33;transform:translate(-50%,-50%);transition:width .6s ease,height .6s ease}.submenu-button:hover:before{width:300px;height:300px}.submenu-button:hover{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:transparent;transform:translateY(-5px);box-shadow:0 10px 30px #667eea66}.submenu-button:active{transform:translateY(-2px);box-shadow:0 5px 20px #667eea4d}.submenu-button:after{content:"→";position:absolute;right:20px;top:50%;transform:translateY(-50%);opacity:0;transition:opacity .3s ease,transform .3s ease}.submenu-button:hover:after{opacity:1;transform:translateY(-50%) translate(5px)}.content-placeholder{margin-top:50px;padding:50px;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:20px;text-align:center;border:3px dashed #adb5bd;animation:pulse 2s infinite}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.02)}to{transform:scale(1)}}.content-placeholder p{color:#6c757d;font-size:20px;margin:0;font-weight:500}.content-wrapper{max-width:1200px;margin:3rem auto;padding:2rem;background:#fffffff2;border-radius:20px;box-shadow:0 20px 60px #0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);transition:opacity .3s ease-in-out}.fade-in{animation:fadeIn .3s ease-in-out forwards}.fade-out{animation:fadeOut .3s ease-in-out forwards}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}.content-wrapper h1{color:#333;font-size:2.5rem;margin-bottom:1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.content-wrapper p{color:#666;line-height:1.8;font-size:1.1rem;margin-bottom:1rem}@media(max-width:768px){.menu{flex-direction:column;align-items:stretch;gap:.5rem;padding:1rem}.menu-item-container{width:100%}.menu-item{width:100%;padding:.8rem 1rem;font-size:.9rem;justify-content:space-between}.submenu{position:static;transform:none;width:100%;margin-top:5px;margin-bottom:10px;animation:none;background:#fffffff2}.submenu:before{display:none}.submenu-item{color:#333;padding:.8rem 1.5rem;text-align:center}.submenu-item:hover{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.content-wrapper{margin:1rem;padding:1.5rem}.content-wrapper h1{font-size:2rem}.category-page{padding:20px}.category-page h2{font-size:24px}.category-page p{font-size:16px}.submenu-buttons{grid-template-columns:1fr;gap:15px;margin:30px 0}.submenu-button{padding:15px 20px;font-size:15px}.submenu-button:after{display:none}.content-placeholder{padding:30px;margin-top:30px}.content-placeholder p{font-size:16px}}@media(prefers-color-scheme:dark){.content-wrapper{background:#1e1e1ef2;color:#fff}.content-wrapper h1{background:linear-gradient(135deg,#a8b8ff,#d6a8ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.content-wrapper p{color:#ccc}.category-page h2{color:#fff}.category-page p{color:#ccc}.submenu-button{background:#2d2d2d;color:#a8b8ff;border-color:#a8b8ff;box-shadow:0 4px 15px #a8b8ff1a}.submenu-button:hover{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:transparent}.content-placeholder{background:linear-gradient(135deg,#2d2d2d,#353535);border-color:#4a4a4a}.content-placeholder p{color:#888}.submenu{background:#282828fa;border:1px solid rgba(255,255,255,.1)}.submenu:before{border-bottom-color:#2a2a2a}.submenu-item{color:#fff}.submenu-item:hover{background:linear-gradient(135deg,#667eea,#764ba2)}}.submenu-buttons,.submenu-button{position:relative;z-index:1}.submenu-buttons:hover .submenu-button:not(:hover){opacity:.7;filter:blur(1px)}.submenu-button{animation:buttonAppear .5s ease forwards;animation-delay:calc(var(--button-index, 0) * .1s);opacity:0}@keyframes buttonAppear{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.content-section{margin-top:30px;animation:fadeIn .5s ease}.version-content{padding:20px;background:#ffffff0d;border-radius:15px;animation:slideUp .3s ease}@media(prefers-color-scheme:dark){.version-content{background:#0003}}