/* ShareSmartAI — shared functional CSS for container/version21+ (reset + behaviours; each page owns its look) */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,video,svg,canvas{max-width:100%;display:block}
button,input{font:inherit;color:inherit}
.wrap{max-width:var(--w,1160px);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* tabs / story / compare / marquee */
[data-panel]:not(.on){display:none!important}[data-panel].on{animation:pin .5s cubic-bezier(.2,.7,.2,1)}[data-panel].on:not(.pn):not(.grid){display:block}
@keyframes pin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
[data-show]{opacity:0;transform:translateY(14px) scale(.985);transition:opacity .5s,transform .5s;pointer-events:none;position:absolute;inset:0}
[data-show].on{opacity:1;transform:none;pointer-events:auto}
.cmp{position:relative;overflow:hidden;--pos:50%}
.cmp>.a,.cmp>.b{position:absolute;inset:0}.cmp>.b{clip-path:inset(0 0 0 var(--pos))}
.cmp>input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:3}
.cmp>.hd{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;z-index:2;box-shadow:0 0 12px rgba(0,0,0,.35)}
.cmp>.hd:after{content:"↔";position:absolute;top:50%;left:50%;width:36px;height:36px;margin:-18px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;font:600 15px system-ui}
.mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq>div{display:flex;gap:var(--g,48px);width:max-content;animation:mq var(--t,38s) linear infinite}
.mq:hover>div{animation-play-state:paused}
@keyframes mq{to{transform:translateX(calc(-50% - var(--g,48px)/2))}}
.hs{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px}.hs::-webkit-scrollbar{display:none}.hs>*{scroll-snap-align:start;flex:none}
.vid{position:relative;overflow:hidden}.vid>video{width:100%;height:100%;object-fit:cover}
.caret:after{content:"";display:inline-block;width:2px;height:1em;background:currentColor;margin-left:3px;vertical-align:-.12em;animation:bl 1s steps(2) infinite}
@keyframes bl{50%{opacity:0}}
@keyframes float{50%{transform:translateY(-8px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes dash{to{stroke-dashoffset:-60}}
@keyframes blink{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001s!important;animation-iteration-count:1!important}.mq>div{animation:none}}