/* Motion belongs to the presentation layer; product geometry is kept in product.css. */
:root{--ease-out:cubic-bezier(.2,.75,.25,1);--ease-move:cubic-bezier(.4,0,.2,1)}
::selection{background:#b73e2928;color:var(--ink)}
.pill{transition:background-color 180ms,transform 150ms var(--ease-out),box-shadow 180ms}
.pill:active{transform:translateY(1px) scale(.985)}
.accent-link .icon,.platform-grid>a>span>.icon{transition:transform 220ms var(--ease-out)}
.accent-link:hover .icon,.platform-grid>a:hover>span>.icon{transform:translateX(3px)}
.platform-grid>a{transition:background-color 180ms,border-color 180ms,box-shadow 240ms}
.platform-grid>a:hover{border-color:#bcb6a9;box-shadow:0 6px 18px #11111405}
.nav-center>a{position:relative}
.nav-center>a::after{content:'';position:absolute;left:0;right:0;bottom:3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 220ms var(--ease-out)}
.nav-center>a[aria-current]::after{transform:scaleX(1)}
.guide-layout>aside a[aria-current]{color:var(--ink);font-weight:500}
.guide-layout>aside a[aria-current]::before{content:'';width:4px;height:4px;background:var(--red);border-radius:50%;margin-right:9px}
.hero-demo-note{font-size:12px;flex-shrink:0}
.demo-bar{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:28px;border-top:1px solid var(--line);padding-top:8px}
.hero-demo-bar{position:sticky;top:72px;z-index:41;margin:0;padding:8px 0;background:var(--paper);border-top:0;border-bottom:1px solid var(--line)}
.demo-chapters{display:flex;gap:28px;min-width:0}
.demo-chapters>button{position:relative;min-height:52px;padding:12px 0;font-size:14px;color:var(--muted);white-space:nowrap}
.demo-chapters>button>span{font:11px/1.5 Menlo,monospace;margin-right:7px;opacity:.65}
.demo-chapters>button[aria-pressed=true]{color:var(--ink)}
.demo-chapters>button>i{position:absolute;bottom:-9px;left:0;right:0;height:2px;background:var(--ink);transform:scaleX(var(--progress,0));transform-origin:left}
.demo-actions,.inline-demo-controls{display:inline-flex;align-items:center;gap:2px;flex-shrink:0}
.demo-actions button,.inline-demo-controls button{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--muted);transition:color 180ms,background 180ms}
.demo-actions button:hover,.inline-demo-controls button:hover{background:#e3dfd5;color:var(--ink)}
.demo-actions svg,.inline-demo-controls svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.cap-panel figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;margin-top:12px}
.cap-panel:not([hidden]){animation:panel-enter 320ms var(--ease-out) both}
.px-model-menu:not([hidden]){animation:menu-enter 180ms var(--ease-out) both}
.px-cap-detail:not([hidden]){animation:detail-enter 200ms var(--ease-out) both}
.demo-cursor{position:absolute;width:24px;height:28px;left:65%;top:55%;z-index:40;pointer-events:none;opacity:0;transform:translate(-3px,-2px);transition:left 720ms var(--ease-move),top 720ms var(--ease-move),opacity 180ms;filter:drop-shadow(0 2px 2px #11111428)}
.demo-cursor svg{display:block;width:100%;height:100%}
.demo-cursor.is-visible{opacity:1}
.demo-cursor.is-paused{opacity:0}
.demo-cursor::before{content:'';position:absolute;left:-10px;top:-10px;width:23px;height:23px;border:1px solid #11111477;border-radius:50%;opacity:0}
.demo-cursor.is-clicking::before{animation:cursor-click 500ms var(--ease-out)}
.demo-typing{box-shadow:0 1px 0 #857f7277}
.px-cron-dialog .demo-typing{border-color:#857f72;box-shadow:0 0 0 2px #857f7210}
.cap-skills[data-motion-state=playing] .px-cap-row[aria-pressed=true]{transition:background-color 180ms}
.faq details[open]>div{animation:answer-enter 220ms var(--ease-out)}
dialog[open]{animation:dialog-enter 240ms var(--ease-out)}
dialog[open]::backdrop{animation:menu-enter 180ms var(--ease-out)}
.menu-toggle{position:relative}
.menu-toggle .icon{transition:opacity 150ms,transform 220ms var(--ease-out)}
.menu-toggle[aria-expanded=true] .icon{opacity:0;transform:rotate(45deg)}
.menu-toggle::before,.menu-toggle::after{content:'';position:absolute;left:12px;top:21px;width:20px;height:1.5px;background:currentColor;opacity:0;transition:opacity 150ms,transform 220ms var(--ease-out)}
.menu-toggle[aria-expanded=true]::before{opacity:1;transform:rotate(45deg)}
.menu-toggle[aria-expanded=true]::after{opacity:1;transform:rotate(-45deg)}
@media(min-width:901px){.cap-panel{min-height:706px}}
@media(min-width:601px){.model-visual>.px-model-control{transform:scale(1.12);transform-origin:center bottom}}
@media(max-width:760px){.cap-preview.model-visual .px-model-options{left:auto;right:0;bottom:0}}
@keyframes menu-enter{from{opacity:0}to{opacity:1}}
@keyframes detail-enter{from{opacity:.35}to{opacity:1}}
@keyframes panel-enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes answer-enter{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
@keyframes dialog-enter{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes cursor-click{0%{opacity:.6;transform:scale(.35)}100%{opacity:0;transform:scale(1.6)}}
@media(max-width:900px){.mobile-nav{position:absolute;top:100%;left:0;right:0;width:100%;max-height:calc(100dvh - 68px);overflow:auto;padding:12px 28px 24px;background:var(--paper);box-shadow:0 20px 28px #1111140c;border-bottom:1px solid var(--line);animation:answer-enter 200ms var(--ease-out)}.mobile-nav a{min-height:48px}.mobile-nav a:active{color:var(--red)}}
@media(max-width:900px) and (min-width:601px){.hero-demo-bar{top:68px}.demo-chapters{gap:22px}}
@media(max-width:600px){.hero-demo-bar,.hero-demo-note{display:none}.mobile-nav{padding-inline:20px;max-height:calc(100dvh - 64px)}.demo-cursor{width:20px;height:24px}.pill.small{min-height:44px}.cap-panel figcaption{align-items:flex-start}.cap-panel figcaption>span:first-child{padding-top:11px}.cap-panel:not([hidden]){animation-duration:240ms}}
@media(max-width:600px){.cap-skills{height:max(430px,calc((100vw - 40px)*1.425 + 16px))}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.demo-cursor{display:none}.demo-chapters>button>i{transform:none;opacity:0}.demo-chapters>button[aria-pressed=true]>i{opacity:1}}