body{margin:0;background:#0e0e0f;font-optical-sizing:auto}
a{color:#ededeb;text-decoration:none}a:hover{color:#ffffff}
@keyframes ak-pop{0%{transform:scale(0)}21.7%{transform:scale(1)}39.1%{transform:scale(1)}60.9%{transform:scale(0)}100%{transform:scale(0)}}
.ak-sq{width:10px;height:10px;border-radius:1.5px;background:#ededeb;transform:scale(0);animation:ak-pop 1.533s linear infinite}
@keyframes ak-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ak-label{animation:ak-in .6s .2s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion: reduce){.ak-sq{animation:none;transform:scale(1);opacity:.6}}
a:focus-visible,button:focus-visible{outline:2px solid #c9cdfc;outline-offset:3px;border-radius:999px}
html{scrollbar-color:#3a3a3f #0e0e0f;caret-color:#c9cdfc}
.num{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{transition-duration:.01ms!important}.ak-sq{animation-iteration-count:1!important}.card:hover,.card:hover .term,.cta:hover{transform:none!important}}
.row{transition:padding-left .4s cubic-bezier(.2,.7,.2,1)}
.row:hover{padding-left:12px}
.seg-thumb{transition:transform .42s linear(0.0000, 0.0416, 0.1356, 0.2502, 0.3669, 0.4760, 0.5729, 0.6560, 0.7257, 0.7830, 0.8295, 0.8669, 0.8965, 0.9199, 0.9383, 0.9526, 0.9637, 0.9723, 0.9789, 0.9839, 0.9878, 0.9908, 0.9930, 0.9947, 0.9960, 0.9970, 0.9978, 0.9983, 1);will-change:transform}
.seg-btn{transition:color .2s ease,transform .12s ease-out;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.seg-btn:active{transform:scale(.96)}
.seg-btn:hover{color:#ededeb!important}
@media (prefers-reduced-motion: reduce){.seg-thumb{transition:none!important}.seg-thumb.at-info,.seg-thumb.at-work{animation:none}.view.on.anim>*{animation:fade .2s ease both!important}@keyframes fade{from{opacity:0}to{opacity:1}}}
/* Liquid-glass, idea adapted from Uiverse.io by mymiamo (MIT) */
.seg,.glass{position:relative;border:1px solid transparent!important;background:linear-gradient(rgba(255,255,255,.06),rgba(255,255,255,.02)) padding-box,linear-gradient(140deg,rgba(255,255,255,.7),rgba(255,255,255,.08) 35%,rgba(255,255,255,.02) 60%,rgba(255,255,255,.45)) border-box!important;-webkit-backdrop-filter:blur(6px) saturate(200%) brightness(1.15)!important;backdrop-filter:blur(6px) saturate(200%) brightness(1.15)!important;box-shadow:inset 0 1px 1px rgba(255,255,255,.45),inset 0 -6px 12px -6px rgba(255,255,255,.18),inset 6px 0 10px -8px rgba(255,255,255,.25),0 12px 30px -10px rgba(0,0,0,.55),0 2px 6px -2px rgba(0,0,0,.4)!important}
.glass::before{content:"";position:absolute;inset:1px 12% auto;height:45%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0));pointer-events:none}
.glass{transition:scale .3s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.2,.8,.2,1)!important}
.glass:active{scale:.92}
.seg-btn{text-shadow:0 1px 2px rgba(0,0,0,.35)}
.seg-thumb{box-sizing:border-box;border:1px solid transparent;background:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.07)) padding-box,linear-gradient(160deg,rgba(255,255,255,.8),rgba(255,255,255,.1) 45%,rgba(255,255,255,.4)) border-box!important;box-shadow:inset 0 1px 2px rgba(255,255,255,.5),inset 0 -4px 8px -4px rgba(255,255,255,.25),0 4px 12px -4px rgba(0,0,0,.5)!important}
.seg-thumb{transition:transform .55s cubic-bezier(.16,1,.3,1)!important;will-change:transform}
@keyframes thumb-a{0%{scale:1 1}35%{scale:1.14 .9}100%{scale:1 1}}
@keyframes thumb-b{0%{scale:1 1}35%{scale:1.14 .9}100%{scale:1 1}}
.seg-thumb.at-info{animation:thumb-a .5s cubic-bezier(.16,1,.3,1)}
.seg-thumb.at-work{animation:thumb-b .5s cubic-bezier(.16,1,.3,1)}
.card{content-visibility:auto;contain-intrinsic-size:auto 480px}
.stage{position:relative}
.view{transition:opacity .4s ease-in-out,visibility 0s linear .4s}
.view.off{position:absolute;top:0;left:0;right:0;opacity:0;visibility:hidden;pointer-events:none}
.view.on{position:relative;opacity:1;visibility:visible;transition:opacity .01s}
@keyframes rise{from{opacity:0;transform:translate3d(0,20px,0)}to{opacity:1;transform:none}}
.view.on.anim>*{animation:rise .9s cubic-bezier(.16,1,.3,1) both}
.view.on.anim>*:nth-child(1){animation-delay:.36s}.view.on.anim>*:nth-child(2){animation-delay:.45s}.view.on.anim>*:nth-child(3){animation-delay:.54s}.view.on.anim>*:nth-child(4){animation-delay:.63s}.view.on.anim>*:nth-child(5){animation-delay:.72s}.view.on.anim>*:nth-child(n+6){animation-delay:.81s}
@media (prefers-reduced-transparency: reduce){.seg,.pill,.glass{background:#1c1c1f!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}
/* Reveal CTA, idea adapted from Uiverse.io by gagan-gv (MIT) */
.rv-face{-webkit-tap-highlight-color:transparent;clip-path:inset(0 0 0 0 round 999px);transition:clip-path .55s cubic-bezier(.16,1,.3,1),opacity .3s ease,transform .12s ease-out}
.rv-face:active{transform:scale(.98)}
.rv.open .rv-face{clip-path:inset(0 50% 0 50% round 999px);opacity:0;pointer-events:none}
.rv-a{width:44px;height:44px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:#0e0e0f!important;opacity:0;transform:scale(.6);transition:opacity .3s ease,transform .5s cubic-bezier(.16,1,.3,1),background .2s ease,color .2s ease}
.rv-a:hover,.rv-a:focus-visible{background:#0e0e0f;color:#ff6b1a!important}
.rv.open .rv-a{opacity:1;transform:none}
.rv.open .rv-a:nth-child(1){transition-delay:.06s}.rv.open .rv-a:nth-child(2){transition-delay:.12s}.rv.open .rv-a:nth-child(3){transition-delay:.18s}
@media (prefers-reduced-motion: reduce){.rv-face,.rv-a{transition:opacity .2s ease!important;transform:none!important}}
/* Shimmer face, idea adapted from Uiverse.io by dexter-st (MIT), recoloured to the site palette */
.sh-ring{position:absolute;left:-120px;top:-200px;width:460px;aspect-ratio:1;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 65% 170%,#ededeb,#1b1b1e,#ededeb,#1b1b1e,#cfcfcc,#1b1b1e,#ededeb,#1b1b1e,#ededeb);opacity:.22;animation:sh-rot 14s linear infinite}
.sh-o{background:radial-gradient(ellipse at 30% -60%,#ff6b1a,transparent 18%,#ff9a52 24%,transparent 34%,#ff6b1a 42%,transparent 52%);opacity:.35;mix-blend-mode:screen;animation-duration:20s;animation-direction:reverse}
.sh-shade{position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 -6px 10px -4px rgba(0,0,0,.55),inset 0 4px 6px -2px rgba(255,255,255,.28)}
.sh-light{position:absolute;top:4px;left:12%;width:76%;height:14px;border-radius:999px;background:rgba(255,255,255,.2);filter:blur(5px);pointer-events:none}
.sh-tx{position:relative;z-index:2;display:flex;align-items:center;gap:10px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
@keyframes sh-rot{to{transform:rotate(360deg)}}
@media (hover: hover){.rv:hover .rv-face,.rv:focus-within .rv-face{clip-path:inset(0 50% 0 50% round 999px);opacity:0;pointer-events:none}.rv:hover .rv-a,.rv:focus-within .rv-a{opacity:1;transform:none}.rv:hover .rv-a:nth-child(1){transition-delay:.06s}.rv:hover .rv-a:nth-child(2){transition-delay:.12s}.rv:hover .rv-a:nth-child(3){transition-delay:.18s}}
@media (prefers-reduced-motion: reduce){.sh-ring{animation:none}}
/* Scroll reveal: content rises into place as it enters the viewport (scroll-driven, no JS) */
@keyframes sr-up{from{opacity:0;translate:0 64px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
@supports (animation-timeline: view()){.sr{animation:sr-up linear both;animation-timeline:view();animation-range:entry 0% cover 30%}}
@media (prefers-reduced-motion: reduce){.sr{animation:none!important}}
.hdr-id:hover span:first-child{opacity:.8}
@media (max-width: 560px){.hdr-role{display:none}.hdr-id span:first-child{font-size:15px!important}}
@media (max-width: 380px){.hdr{gap:8px!important}.hdr-id span:first-child{font-size:14px!important;white-space:normal!important;max-width:64px}}
html{scroll-behavior:smooth}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.down svg{animation:nudge 2.4s cubic-bezier(.45,0,.55,1) infinite}
.down:hover{opacity:.75}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.down svg{animation:none}}
.back{transition:background .2s ease,transform .12s ease-out}.back:hover{background:rgba(60,60,68,.55)!important}.back:active{transform:scale(.97)}
.toc-a{transition:color .25s ease}.toc-a:hover{color:#ededeb!important}
@media (max-width: 1399px){.toc{display:none}}
@media (max-width: 720px){.float{display:none}}
::selection{background:rgba(160,170,255,.35)}
.pill{transition:background .25s ease,color .25s ease}
.pill:hover{color:#ededeb;background:rgba(255,255,255,.05)}
.mi{transition:background .2s ease}.mi:hover{background:rgba(255,255,255,.07)}
.card{transition:transform .6s cubic-bezier(.2,.7,.2,1),border-color .4s ease}
.card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.16)}
.card .go{transition:background .35s ease,color .35s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.card:hover .go,.card:focus-visible .go{background:#ededeb;color:#0e0e0f!important;border-color:#ededeb!important;transform:rotate(-45deg)}
.card .term{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.card:hover .term{transform:translateY(-8px)}
.ul{background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .4s ease}
.ul:hover{background-size:100% 1px}
.cta{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease}
.cta:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(237,237,235,.35)}

/* ---- static-site state (replaces the canvas runtime) ---- */
.ak-loader{opacity:1;visibility:visible}.ak-loader.gone{opacity:0;visibility:hidden}
.seg-thumb{transform:translateX(0)}.v-info .seg-thumb{transform:translateX(92px)}
.seg-btn{color:#9a9a97}.v-work .seg-work,.v-case .seg-work,.v-info .seg-info{color:#ededeb}
.menu-btn{transform:rotate(0deg)}.menu-open .menu-btn{transform:rotate(270deg)}
.ico-at{opacity:1;transform:scale(1) rotate(0deg)}.menu-open .ico-at{opacity:0;transform:scale(.5) rotate(180deg)}
.ico-x{opacity:0;transform:scale(.6)}.menu-open .ico-x{opacity:1;transform:scale(1)}
.menu-panel{opacity:0;visibility:hidden;transform:translateY(-8px) scale(.96)}.menu-open .menu-panel{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.toc-a{color:#8f8f8c;font-weight:400}.toc-a.active{color:#ffffff;font-weight:500}
a[data-case]{cursor:pointer}