:root{--header-h:75px;--header-bg:#111827;--menu-bg:#3B82F6;--card-max-w:400px;--card-gap:20px;--layer-duration:0.5s;--link-duration:0.35s;--sub-duration:0.4s}*{box-sizing:border-box;margin:0;padding:0}body{background:#fff;color:#000;font-family:'Segoe UI',Helvetica,Arial,sans-serif}body.menu-open{overflow:hidden}.site-header{position:fixed;top:0;left:0;right:0;height:var(--header-h);background:var(--header-bg);display:flex;align-items:center;z-index:1000;box-shadow:0 2px 8px rgba(0,0,0,.25)}.site-title{color:#fff;font-size:1.4rem;font-weight:600;margin-left:16px}.content{padding:calc(var(--header-h) + 30px) 30px 30px;line-height:1.6}.burger{width:48px;height:48px;margin-left:14px;background:0 0;border:0;cursor:pointer;position:absolute;top:12px;right:12px;z-index:2}.burger span{position:absolute;left:10px;width:28px;height:3px;background:var(--menu-bg);border-radius:2px;transition:transform .4s ease,opacity .3s ease,top .4s ease}.burger span:nth-child(1){top:14px}.burger span:nth-child(2){top:23px}.burger span:nth-child(3){top:32px}body.menu-open .burger span:nth-child(1){top:23px;transform:rotate(225deg)}body.menu-open .burger span:nth-child(2){opacity:0;transform:rotate(180deg)}body.menu-open .burger span:nth-child(3){top:23px;transform:rotate(315deg)}.menu{position:fixed;top:var(--header-h);left:0;right:0;bottom:0;z-index:900;overflow:hidden;pointer-events:none}body.menu-open .menu{pointer-events:auto}.layer{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--layer-bg,var(--menu-bg));opacity:.5;transform:var(--start-transform);transition:transform var(--layer-duration) cubic-bezier(.77,0,.175,1);transition-delay:var(--out-delay)}body.menu-open .layer{transform:var(--end-transform);transition-delay:var(--in-delay)}.links{list-style:none;overflow-y:auto;overscroll-behavior:contain;padding-top:var(--links-pad-top,0);padding-bottom:var(--links-pad-bottom,0);transition:padding var(--sub-duration) ease;scrollbar-width:none}.links::-webkit-scrollbar{display:none}.links li{opacity:0;transition:opacity var(--link-duration) ease,transform var(--link-duration) ease;transition-delay:var(--out-delay)}body.menu-open .links>li{opacity:1;transform:none;transition-delay:var(--in-delay)}.links a{display:inline-flex;align-items:center;color:#fff;text-decoration:none;font-size:2rem;font-weight:300;letter-spacing:2px;padding:10px 20px;transition:letter-spacing .25s ease,opacity var(--link-duration) ease,transform var(--link-duration) ease}.links a:hover{letter-spacing:6px}.has-sub>a::after{content:'';width:9px;height:9px;margin-left:14px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s ease}li.expanded>a::after{transform:rotate(225deg) translate(-3px,-3px)}.sub-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--sub-duration) ease}li.expanded>.sub-wrap{grid-template-rows:1fr}.sub{list-style:none;overflow:hidden;min-height:0}.sub li{opacity:0;transform:translateY(12px);transition:opacity .3s ease,transform .3s ease;transition-delay:0s}li.expanded>.sub-wrap .sub li{opacity:1;transform:none;transition-delay:var(--sub-delay)}.sub a{font-size:1.3rem;opacity:.9}.menu.selecting .links{pointer-events:none}.menu.selecting .links a{opacity:0;transition-delay:0s}.menu.selecting .links li.selected>a{opacity:1;letter-spacing:6px}.menu.selecting .has-sub>a::after{opacity:0;transition:opacity .2s ease}.variant-cards .menu.menu{cursor:pointer}.variant-cards .layers{position:absolute;top:var(--card-gap);bottom:var(--card-gap);left:50%;width:calc(100% - var(--card-gap) * 2);max-width:var(--card-max-w);transform:translateX(-50%)}.variant-cards .links{position:absolute;top:var(--card-gap);bottom:var(--card-gap);left:50%;width:calc(100% - var(--card-gap) * 2);max-width:var(--card-max-w);transform:translateX(-50%);cursor:default;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.variant-cards .layer{border-radius:6px}.variant-cards.menu-open .layer{animation:layer-wobble .6s ease-in-out var(--wobble-delay) 1}@keyframes layer-wobble{0%{transform:var(--end-transform)}30%{transform:rotate(calc(var(--rot) + .8deg))}60%{transform:rotate(calc(var(--rot) - .6deg))}100%{transform:var(--end-transform)}}.variant-cards .links>li{transform:translateY(24px)}.variant-cards .sub{text-align:center}.variant-cards .menu.selecting .links a{transform:translateY(24px)}.variant-cards .menu.selecting .links li.selected>a{transform:none}.variant-slide .menu{right:10%}.variant-slide .layers{position:absolute;top:0;left:0;right:0;bottom:0}.variant-slide .links{position:absolute;top:0;left:0;right:0;bottom:0;padding-left:40px;padding-right:40px;--links-pad-top:50px}.variant-slide .links>li{transform:translateX(-50px)}.variant-slide .sub{padding-left:24px}.variant-slide .sub li{transform:translateX(-30px)}.variant-slide li.expanded>.sub-wrap .sub li{transform:none}.variant-slide .menu.selecting .links a{transform:translateX(-40px)}.variant-slide .menu.selecting .links li.selected>a{transform:none}