:root{--orange:#ff6600;--dark:#1b2c37;--gray:#eef1f5;--duration:.32s;--blur:12px}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:var(--orange);text-decoration:none}
ul{list-style:none;margin:0;padding:0}
nav{position:sticky;top:0;z-index:1000;background:rgba(27,44,55,.75);color:#fff;font-size:14px;font-weight:600;backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border-bottom:1px solid rgba(255,255,255,.08)}
.nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;height:56px;padding:0 1rem}
.logo{margin-right:auto;font-size:20px;letter-spacing:.5px;color:#fff}
.menu{display:flex;align-items:center}
.menu>li{position:relative;margin:0 2px}
.menu>li>a{display:block;padding:0 1.2rem;line-height:56px;color:#fff;transform:skewX(-20deg) translateZ(0);transition:color var(--duration);backface-visibility:hidden;-webkit-backface-visibility:hidden;outline:1px solid transparent;position:relative;overflow:hidden;background:0 0}
.menu>li>a::before{content:'';position:absolute;left:0;right:0;bottom:0;height:100%;background:var(--orange);transform:translateY(100%);transition:transform var(--duration) cubic-bezier(.4, 0, .2, 1);z-index:-1}
.menu>li:hover>a::before{transform:translateY(0)}
.menu>li>a>span{display:inline-block;transform:skewX(20deg) translateZ(0);position:relative;z-index:1}
.sub{position:absolute;left:50%;top:100%;width:200px;background:var(--gray);color:#222;opacity:0;visibility:hidden;transform:translateX(-50%) translateY(10px) skewX(-10deg) translateZ(0);transition:all var(--duration);border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.15);overflow:hidden}
.sub a{display:block;padding:.75rem 1rem;transform:skewX(10deg) translateZ(0);transition:color var(--duration),transform var(--duration);position:relative;backface-visibility:hidden;-webkit-backface-visibility:hidden;outline:1px solid transparent;overflow:hidden;z-index:1}
.sub a::before{content:'';position:absolute;inset:0;background:var(--orange);opacity:0;transition:opacity .1s ease,transform var(--duration);z-index:-1;transform:skewX(10deg);transform-origin:center}
.sub a:hover::before{opacity:1;transform:skewX(0)}
.sub a::after{content:'';position:absolute;top:0;right:0;width:100px;height:100%;background:linear-gradient(90deg,transparent 0,rgba(255,255,255,0) 20%,rgba(255,255,255,.7) 50%,rgba(255,255,255,0) 80%,transparent 100%);clip-path:polygon(30% 0%,100% 0%,70% 100%,0% 100%);transform:translateX(150%) skewX(-15deg);opacity:0;z-index:0;pointer-events:none}
.sub a:hover::after{animation:shineSlide .8s cubic-bezier(.4,0,.2,1) forwards;animation-delay:20ms}
@keyframes shineSlide{0%{transform:translateX(150%) skewX(-15deg);opacity:0}
15%{opacity:1}
85%{opacity:1}
100%{transform:translateX(-200%) skewX(-15deg);opacity:0}
}
.sub a:hover{color:#fff;transform:skewX(0) translateZ(0);background:0 0}
.menu>li:hover .sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0) skewX(-10deg) translateZ(0)}
.theme-btn{margin-left:1rem;padding:0 1.2rem;line-height:56px;color:#fff;background:0 0;border:none;cursor:pointer;font:inherit;font-size:14px;transform:skewX(-20deg) translateZ(0);transition:color var(--duration);backface-visibility:hidden;-webkit-backface-visibility:hidden;outline:1px solid transparent;position:relative;overflow:hidden}
.theme-btn::before{content:'';position:absolute;left:0;right:0;bottom:0;height:100%;background:var(--orange);transform:translateY(100%);transition:transform var(--duration) cubic-bezier(.4, 0, .2, 1);z-index:-1}
.theme-btn:hover::before{transform:translateY(0)}
.theme-btn span{display:inline-block;transform:skewX(20deg) translateZ(0);position:relative;z-index:1}
.burger{display:none;flex-direction:column;justify-content:center;width:24px;height:24px;cursor:pointer;margin-left:auto}
.burger span{height:2px;background:#fff;margin:3px 0;transition:all var(--duration)}
@media(max-width:900px){.menu{display:none}
.burger{display:flex}
}
.drawer{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:opacity var(--duration),visibility var(--duration);z-index:2000}
.drawer-inner{width:280px;height:100%;background:var(--dark);position:absolute;right:0;top:0;transform:translateX(100%);transition:transform var(--duration);overflow-y:auto;margin-top:56px}
.drawer.show{opacity:1;visibility:visible}
.drawer.show .drawer-inner{transform:translateX(0)}
.drawer-nav{margin-top:1rem}
.drawer-nav a{display:block;padding:.9rem 1.5rem;color:#fff;font-size:16px;border-bottom:1px solid rgba(255,255,255,.08);transition:background var(--duration)}
.drawer-nav a:hover{background:rgba(255,255,255,.08)}
.drawer-nav li{position:relative}
.drawer-nav .arrow{position:absolute;right:1.2rem;top:.9rem;width:12px;height:12px;fill:#fff;pointer-events:none;transition:transform var(--duration)}
.drawer-nav input[type=checkbox]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.drawer-nav .sub-menu{max-height:0;overflow:hidden;transition:max-height var(--duration);background:rgba(0,0,0,.25)}
.drawer-nav input:checked~.sub-menu{max-height:200px}
.drawer-nav input:checked~.arrow{transform:rotate(180deg)}
.drawer-nav .sub-menu a{padding-left:2.5rem;font-size:14px}