/* ânia · home page */
body{margin:0}
/* keycap: hover lifts the cap, press sinks it into a dark well and it springs back */
.kc svg>*,#ania-gate .agk svg>*{transition:transform .26s cubic-bezier(.34,1.7,.5,1);transform-box:view-box}
.kc svg>polygon:first-of-type,#ania-gate .agk svg>polygon:first-of-type{transform-box:fill-box;transform-origin:50% 100%}
.kc .kl{transition:transform .26s cubic-bezier(.34,1.7,.5,1)}
.kc:hover,.kc:active,#ania-gate .agk:hover,#ania-gate .agk:active{transform:none !important}
.kc:hover svg>path[fill="#fff"],.kc:hover svg>path[fill="#fff"]~*,#ania-gate .agk:hover svg>path[fill="#fff"],#ania-gate .agk:hover svg>path[fill="#fff"]~*{transform:translateY(-7px)}
.kc:hover svg>polygon:first-of-type,#ania-gate .agk:hover svg>polygon:first-of-type{transform:scaleY(1.14)}
.kc:hover .kl{transform:translateY(-3.5%)}
.kc:active svg>path[fill="#fff"],.kc:active svg>path[fill="#fff"]~*,#ania-gate .agk:active svg>path[fill="#fff"],#ania-gate .agk:active svg>path[fill="#fff"]~*{transform:translateY(16px);transition-duration:.05s;transition-timing-function:ease-out}
.kc:active svg>polygon:first-of-type,#ania-gate .agk:active svg>polygon:first-of-type{transform:scaleY(.62);transition-duration:.05s;transition-timing-function:ease-out}
.kc:active .kl{transform:translateY(8%);transition-duration:.05s;transition-timing-function:ease-out}
@media (hover: none){.kc:hover svg>*,.kc:hover .kl,#ania-gate .agk:hover svg>*{transform:none}}
@media (prefers-reduced-motion: reduce){.kc svg>*,.kc .kl,#ania-gate .agk svg>*{transition:none}}
/* navbar: one line always; the call button only shows when it fits */
.navbar,.nav2{flex-wrap:nowrap !important}
.navlinks,.nlinks{flex-wrap:nowrap !important;white-space:nowrap}
@media (max-width: 1240px){.navcta,.ncta{display:none !important}}
@media (max-width: 760px){.qv-ld{grid-template-columns:repeat(2,minmax(0,1fr)) !important}.qv-2{grid-template-columns:minmax(0,1fr) !important}}
/* logo snapped to whole pixels so the vector stays sharp on 1x screens */
.nk{height:54px !important}
/* call button: blue on hover, keycap press on click */
.navcta,.ncta{position:relative;box-shadow:0 0 0 #000010;transition:background-color .18s ease,color .18s ease,transform .22s cubic-bezier(.3,1.7,.5,1),box-shadow .22s ease;will-change:transform}
.navcta:hover,.ncta:hover,.navcta:focus-visible,.ncta:focus-visible{background:#4A86D9 !important;color:#FFFFFF !important;transform:translateY(-3px);box-shadow:0 3px 0 #000010}
.navcta:active,.ncta:active{transform:translateY(1px) scale(.95);box-shadow:0 0 0 #000010;transition-duration:.06s}
@media (prefers-reduced-motion: reduce){.navcta,.ncta{transition:background-color .18s ease}.navcta:hover,.ncta:hover,.navcta:active,.ncta:active{transform:none}}
@media (min-width: 761px) and (max-width: 1060px){.navlinks,.nlinks{gap:10px !important;font-size:13px !important}}
@media (min-width: 761px) and (max-width: 900px){.navlinks,.nlinks{gap:6px !important;font-size:12px !important}.nw{display:none !important}}
@media (max-width: 760px){.sfx-pill{left:auto !important;right:16px !important}}
.ncs{position:relative;display:inline-block}
.ncs-menu{display:none;position:absolute;top:100%;left:-14px;padding-top:12px;z-index:70}
.ncs:hover .ncs-menu,.ncs:focus-within .ncs-menu{display:block}
.ncs-menu a:hover,.ncs-menu a:focus{background:#E4EAF4}
/* videos always fully visible: never cropped, never taller than the screen */
video{object-fit:contain !important}
[style*="aspect-ratio"]:has(video){max-height:calc(100svh - 110px)}
@media (max-width: 760px){[style*="aspect-ratio"]:has(video){max-height:calc(100svh - 90px)}}
a{color:#12121F}a:hover{color:#2F6BC4}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.grid{background-color:#FFFFFF;background-image:linear-gradient(rgba(74,134,217,.32) 1px,transparent 1px),linear-gradient(90deg,rgba(74,134,217,.32) 1px,transparent 1px);background-size:64px 64px}
.ph{background:#E4EAF4;border:3px solid #12121F;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;color:#2B2B3A;text-align:center;padding:10px;box-sizing:border-box}
.key{display:inline-flex;align-items:center;justify-content:center;background:#FFFFFF;border:3px solid #12121F;border-radius:16px;box-shadow:0 9px 0 #4A86D9,0 9px 0 3px #12121F;font-family:'Montserrat',sans-serif;font-weight:800;color:#12121F;box-sizing:border-box}
.key-a{background:#4A86D9;box-shadow:0 9px 0 #12121F,0 9px 0 3px #12121F}
.sel{position:relative;border:2px solid #12121F;box-sizing:border-box}
.sel>.h{position:absolute;width:16px;height:16px;background:#FFFFFF;border:3px solid #12121F;box-sizing:border-box}
@keyframes press{0%,60%,100%{transform:translateY(0);box-shadow:0 12px 0 #4A86D9,0 12px 0 3px #12121F}75%{transform:translateY(9px);box-shadow:0 3px 0 #4A86D9,0 3px 0 3px #12121F}}
.pressloop{animation:press 1.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-14deg)}50%{transform:translateY(-10px) rotate(-14deg)}}
.bob{animation:bob 3.2s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.pressloop,.bob{animation:none}}
.svc{outline:none}
.svc-paper{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.svc-front{transform-origin:50% 100%;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.svc:hover .svc-paper,.svc:focus .svc-paper{transform:translateY(-34%)}
.svc:hover .svc-front,.svc:focus .svc-front{transform:perspective(900px) rotateX(-16deg)}
.svc:focus-visible .svc-art{outline:3px solid #2F6BC4;outline-offset:6px}
@keyframes kpress{0%,60%,100%{transform:translateY(0) rotate(0deg)}75%{transform:translateY(10px) rotate(-2deg)}}
.kpress{animation:kpress 1.6s ease-in-out infinite}
@keyframes flt{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.flt{animation:flt 3.2s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.flt{animation:none}}
@media (prefers-reduced-motion: reduce){.kpress{animation:none}}
.kc{position:relative;display:inline-block;flex:none;padding:0;border:0;background:none;cursor:pointer;font-family:'Montserrat',sans-serif;font-weight:800;color:#12121F;transition:transform .12s ease}
.kc:hover{transform:translateY(-2px)}
.kc:active{transform:translateY(3px)}
.kc svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.kc .kl{position:absolute;left:10%;right:10%;top:2%;height:80%;display:flex;align-items:center;justify-content:center;line-height:1;white-space:nowrap}
.kw-stage{position:relative;height:680px}
.kw-note{position:absolute;left:var(--l);top:var(--t);width:25%;transition:transform .3s ease,box-shadow .3s ease}
.kw-note::before{content:'';position:absolute;left:0;right:0;top:0;height:22px;background:rgba(0,0,16,.07);border-bottom:1px dashed rgba(0,0,16,.22)}
.kw-note::after{content:'';position:absolute;right:0;bottom:0;width:46px;height:46px;border-bottom-right-radius:22px;background:linear-gradient(315deg,rgba(0,0,16,.16) 0%,rgba(0,0,16,0) 55%);pointer-events:none}
.navmenu{display:none}
.mobmenu{display:none}
.hx-hint-mob{display:none}
@media (max-width: 760px){
.navbar{padding:12px 16px !important;gap:10px !important;flex-wrap:nowrap !important}
.navlinks,.navword{display:none !important}
.navmenu{display:inline-flex !important}
.mobmenu{display:flex !important}
.navcta{display:none !important}
.hx-stage{flex:1 1 auto !important;height:auto !important;min-height:0 !important}
.hx-pin{display:flex !important;flex-direction:column !important;top:66px !important;height:calc(100svh - 66px) !important}
.hx-origin{top:var(--hxt, calc(50% - 50px)) !important}
.hx-scrub{display:none !important}
.hx-panel{flex:none !important;position:relative !important;right:auto !important;top:auto !important;transform:none !important;width:auto !important;max-width:none !important;margin:0 12px 12px !important;padding:12px 14px !important;gap:6px !important}
.hx-panel a,.hx-panel button:not(.kc){padding:9px 14px !important;font-size:13px !important}
.hx-panel .kc{width:44px !important;height:43px !important}
.hx-panel > div{padding-top:6px !important}
.hx-name{font-size:22px !important}
.hx-notes{display:none !important}
.hx-hint-desk{display:none !important}
.hx-hint-mob{display:inline !important}
.kw-stage{height:820px !important}
.kw-note{left:var(--ml) !important;top:var(--mt) !important;width:62% !important;height:auto !important;aspect-ratio:1/1.08}
.reelplay{width:84px !important;height:83px !important;font-size:13px !important}
}
@media (max-width: 760px){
.nk{width:40px !important;height:44px !important}
.nw{height:28px !important}
.nback{display:none !important}
.cta-long{display:none !important}
.cta-short{display:inline !important}
.nav2{padding:10px 16px !important;gap:10px !important;flex-wrap:nowrap !important}
.navcta,.ncta{padding:10px 14px !important;font-size:13px !important;white-space:nowrap}
}
.cta-short{display:none}