:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);--header-height:100px}
.reading-progress{position:fixed;inset:0 0 auto;height:3px;z-index:20;pointer-events:none;background:#eb462514}
.reading-progress span{display:block;height:100%;background:#eb4625;transform:scaleX(0);transform-origin:left}
.button,.tutorial-image,.preview-close,.back-top{transition:transform 160ms var(--ease-out),background-color 180ms ease}
.button:active,.tutorial-image:active,.preview-close:active,.back-top:active{transform:scale(.97)}
.nav nav a{position:relative;padding:5px 0;transition:color 180ms ease}
.nav nav a:after{content:"";position:absolute;inset:auto 0 -3px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 200ms var(--ease-out)}
.nav nav a[aria-current=page]:after{transform:scaleX(1)}
.tutorial-nav{position:sticky;top:var(--header-height);z-index:4;background:#fff9edf5;backdrop-filter:blur(12px);padding:14px 0;gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
.tutorial-nav a{flex:none;transition:color 180ms ease,background-color 180ms ease,border-color 180ms ease,transform 160ms var(--ease-out)}
.tutorial-nav a[aria-current=location]{background:var(--gold);color:white;border-color:var(--gold)}
.tutorial-nav a:active{transform:scale(.97)}
html{scroll-padding-top:calc(var(--header-height) + 86px)}
.tutorial-card{scroll-margin-top:calc(var(--header-height) + 86px)}
.hero-art img{animation:kx-float 5s ease-in-out infinite;animation-play-state:paused}
.hero-art.is-in-view img{animation-play-state:running}
.motion-paused .hero-art img{animation-play-state:paused}
@keyframes kx-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1deg)}}
.back-top{position:fixed;right:24px;bottom:24px;z-index:6;border:1px solid var(--line);border-radius:50%;width:46px;height:46px;background:white;color:var(--text);box-shadow:0 6px 20px #15345416;font-size:23px;cursor:pointer;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity 180ms ease,transform 200ms var(--ease-out)}
.back-top.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}
@media(hover:hover) and (pointer:fine){
 .button:hover{transform:translateY(-3px)}
 .tutorial-image:hover{transform:translateY(-4px)}
 .tutorial-image img{transition:transform 250ms var(--ease-out)}
 .tutorial-image:hover img{transform:scale(1.015)}
 .nav nav a:hover:after{transform:scaleX(1)}
 .tutorial-nav a:hover{transform:translateY(-2px)}
 .preview-close:hover,.back-top:hover{background:#fff1e9}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .hero-art img{animation:none}
 .button,.tutorial-image,.tutorial-image img,.preview-close,.tutorial-nav a,.back-top{transition:none!important;transform:none!important}
 .nav nav a:after{transition:none}
}
@media(max-width:760px){.back-top{right:14px;bottom:18px;width:42px;height:42px}.tutorial-nav{margin-inline:-18px;padding-inline:18px}.tutorial-nav a{font-size:12px}}