.demo-ux-research .ux-persona-stack{display:flex;flex-direction:column;gap:14px;width:100%;max-width:360px}.demo-ux-research .ux-persona-card{display:flex;align-items:center;gap:14px;padding:14px 18px;background:#f43f5e14;border:1px solid rgba(244,63,94,.18);border-radius:14px;opacity:0;transform:translateY(16px)}.demo-ux-research.in-view .ux-persona-card--1{animation:ux-slide-up .5s ease-out .3s forwards}.demo-ux-research.in-view .ux-persona-card--2{animation:ux-slide-up .5s ease-out .6s forwards}.demo-ux-research.in-view .ux-persona-card--3{animation:ux-slide-up .5s ease-out .9s forwards}.demo-ux-research .ux-persona-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.demo-ux-research .ux-persona-avatar svg{width:22px;height:22px}.demo-ux-research .ux-persona-info{display:flex;flex-direction:column;gap:2px}.demo-ux-research .ux-persona-name{font-size:15px;font-weight:800;color:#fff;letter-spacing:.01em}.demo-ux-research .ux-persona-insight{font-size:13px;font-weight:600;color:#fda4af;font-style:italic}.demo-ux-wireframe .ux-wire-layout{width:100%;max-width:380px;display:flex;flex-direction:column;gap:10px;position:relative}.demo-ux-wireframe .ux-wire-nav{height:10px;background:#94a3b840;border-radius:3px}.demo-ux-wireframe .ux-wire-hero{height:80px;background:#94a3b81f;border:1.5px dashed rgba(148,163,184,.3);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px}.demo-ux-wireframe .ux-wire-line{height:5px;background:#94a3b84d;border-radius:2px}.demo-ux-wireframe .ux-wire-line--long{width:80%}.demo-ux-wireframe .ux-wire-line--med{width:55%}.demo-ux-wireframe .ux-wire-line--short{width:35%}.demo-ux-wireframe .ux-wire-line--full{width:100%}.demo-ux-wireframe .ux-wire-cards{display:flex;gap:8px}.demo-ux-wireframe .ux-wire-card{flex:1;height:48px;background:#94a3b81f;border:1.5px dashed rgba(148,163,184,.25);border-radius:6px}.demo-ux-wireframe .ux-wire-content{display:flex;flex-direction:column;gap:5px}.demo-ux-wireframe .ux-wire-pin{position:absolute;width:26px;height:26px;border-radius:50%;background:#64748b;color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #64748b66;opacity:0;transform:scale(0);z-index:3}.demo-ux-wireframe .ux-wire-pin--1{top:0;right:8px}.demo-ux-wireframe .ux-wire-pin--2{top:105px;right:-6px}.demo-ux-wireframe .ux-wire-pin--3{bottom:20px;left:8px}.demo-ux-wireframe.in-view .ux-wire-pin--1{animation:ux-pop .4s ease-out .5s forwards}.demo-ux-wireframe.in-view .ux-wire-pin--2{animation:ux-pop .4s ease-out 1s forwards}.demo-ux-wireframe.in-view .ux-wire-pin--3{animation:ux-pop .4s ease-out 1.5s forwards}.demo-ux-prototype .demo-window-content{display:flex;align-items:center;justify-content:center}.demo-ux-prototype .ux-proto-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}.demo-ux-prototype .ux-proto-phone{width:160px;height:200px;border:2.5px solid rgba(139,92,246,.5);border-radius:20px;background:#8b5cf60f;position:relative;overflow:hidden}.demo-ux-prototype .ux-proto-notch{width:50px;height:6px;background:#8b5cf64d;border-radius:0 0 6px 6px;margin:0 auto}.demo-ux-prototype .ux-proto-screen{position:absolute;inset:10px 8px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;opacity:0;transition:opacity .5s ease}.demo-ux-prototype .ux-proto-screen.active{opacity:1}.demo-ux-prototype .ux-proto-screen-label{font-size:11px;font-weight:800;color:#c4b5fd;text-transform:uppercase;letter-spacing:.1em}.demo-ux-prototype .ux-proto-input{width:85%;height:14px;background:#8b5cf626;border:1px solid rgba(139,92,246,.25);border-radius:4px}.demo-ux-prototype .ux-proto-btn{width:85%;padding:5px 0;background:#8b5cf6;color:#fff;font-size:10px;font-weight:800;text-align:center;border-radius:5px;margin-top:2px}.demo-ux-prototype .ux-proto-bars{display:flex;align-items:flex-end;gap:6px;height:70px;padding:0 10px;width:100%}.demo-ux-prototype .ux-proto-bar{flex:1;background:#a78bfa;border-radius:3px 3px 0 0}.demo-ux-prototype .ux-proto-list-row{width:85%;height:16px;background:#8b5cf61f;border:1px solid rgba(139,92,246,.18);border-radius:4px}.demo-ux-prototype .ux-proto-arrows{width:200px;height:20px}.demo-ux-prototype .ux-proto-arrows svg{width:100%;height:100%}.demo-ux-prototype .ux-proto-dots{display:flex;gap:6px}.demo-ux-prototype .ux-proto-dot{width:7px;height:7px;border-radius:50%;background:#8b5cf64d;transition:background .3s,transform .3s}.demo-ux-prototype .ux-proto-dot.active{background:#8b5cf6;transform:scale(1.3)}.demo-ux-system .ux-sys-library{display:flex;flex-direction:column;gap:20px;width:100%;max-width:380px}.demo-ux-system .ux-sys-tokens-label{font-size:11px;font-weight:800;color:#6ee7b7;text-transform:uppercase;letter-spacing:.15em;padding:4px 12px;background:#10b9811f;border-radius:6px;align-self:flex-start;opacity:0}.demo-ux-system.in-view .ux-sys-tokens-label{animation:ux-fade-in .4s ease-out .2s forwards}.demo-ux-system .ux-sys-row{display:flex;align-items:center;gap:12px;opacity:0;transform:translate(-16px)}.demo-ux-system.in-view .ux-sys-row--colors{animation:ux-slide-right .5s ease-out .4s forwards}.demo-ux-system.in-view .ux-sys-row--buttons{animation:ux-slide-right .5s ease-out .7s forwards}.demo-ux-system.in-view .ux-sys-row--type{animation:ux-slide-right .5s ease-out 1s forwards}.demo-ux-system .ux-sys-swatch{width:36px;height:36px;border-radius:50%;box-shadow:0 2px 8px #10b9814d}.demo-ux-system .ux-sys-btn-primary{padding:8px 22px;background:#10b981;color:#fff;font-size:13px;font-weight:800;border-radius:8px}.demo-ux-system .ux-sys-btn-secondary{padding:8px 22px;background:transparent;color:#34d399;font-size:13px;font-weight:800;border-radius:8px;border:2px solid rgba(52,211,153,.5)}.demo-ux-system .ux-sys-type-xl{font-size:32px;font-weight:800;color:#fff}.demo-ux-system .ux-sys-type-md{font-size:22px;font-weight:700;color:#ffffffb3}.demo-ux-system .ux-sys-type-sm{font-size:15px;font-weight:600;color:#ffffff73}.demo-ux-testing .ux-test-wrap{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%;max-width:380px}.demo-ux-testing .ux-test-screen{width:100%;aspect-ratio:16 / 10;background:#f59e0b0f;border:1.5px solid rgba(245,158,11,.2);border-radius:10px;overflow:hidden;position:relative}.demo-ux-testing .ux-test-screen-nav{height:10px;background:#f59e0b26}.demo-ux-testing .ux-test-screen-body{position:relative;width:100%;height:calc(100% - 10px)}.demo-ux-testing .ux-heat-dot{position:absolute;border-radius:50%;background:radial-gradient(circle,#f59e0bb3,#f59e0b00 70%);transform:scale(0)}.demo-ux-testing.in-view .ux-heat-dot--1{animation:ux-heat-pop .6s ease-out .4s forwards}.demo-ux-testing.in-view .ux-heat-dot--2{animation:ux-heat-pop .6s ease-out .7s forwards}.demo-ux-testing.in-view .ux-heat-dot--3{animation:ux-heat-pop .6s ease-out 1s forwards}.demo-ux-testing.in-view .ux-heat-dot--4{animation:ux-heat-pop .6s ease-out 1.3s forwards}.demo-ux-testing.in-view .ux-heat-dot--5{animation:ux-heat-pop .6s ease-out 1.6s forwards}.demo-ux-testing.in-view .ux-heat-dot--6{animation:ux-heat-pop .6s ease-out 1.9s forwards}.demo-ux-testing .ux-test-metric{display:flex;align-items:center;gap:10px;width:100%}.demo-ux-testing .ux-test-label{font-size:13px;font-weight:700;color:#fbbf24;white-space:nowrap}.demo-ux-testing .ux-test-bar-track{flex:1;height:10px;background:#f59e0b1f;border-radius:5px;overflow:hidden}.demo-ux-testing .ux-test-bar-fill{height:100%;width:0;background:linear-gradient(90deg,#f59e0b,#fbbf24);border-radius:5px;transition:width 1.5s cubic-bezier(.25,.46,.45,.94) .5s}.demo-ux-testing .ux-test-bar-fill.ux-fill-active{width:87%}.demo-ux-testing .ux-test-value{font-size:18px;font-weight:800;color:#fde68a;font-variant-numeric:tabular-nums}.demo-ux-a11y .ux-a11y-wrap{display:flex;flex-direction:column;align-items:center;gap:22px;width:100%;max-width:360px}.demo-ux-a11y .ux-a11y-rows{display:flex;flex-direction:column;gap:10px;width:100%}.demo-ux-a11y .ux-a11y-row{display:flex;align-items:center;gap:14px;padding:12px 18px;background:#3b82f61a;border-radius:12px;opacity:0;transform:translate(-12px)}.demo-ux-a11y.in-view .ux-a11y-row--1{animation:ux-a11y-row-in .5s ease-out .3s forwards}.demo-ux-a11y.in-view .ux-a11y-row--2{animation:ux-a11y-row-in .5s ease-out .7s forwards}.demo-ux-a11y.in-view .ux-a11y-row--3{animation:ux-a11y-row-in .5s ease-out 1.1s forwards}.demo-ux-a11y.in-view .ux-a11y-row--4{animation:ux-a11y-row-in .5s ease-out 1.5s forwards}.demo-ux-a11y .ux-a11y-tick{width:30px;height:30px;border-radius:50%;background:#ffffff1a;display:flex;align-items:center;justify-content:center;color:transparent;flex-shrink:0}.demo-ux-a11y .ux-a11y-tick svg{width:16px;height:16px}.demo-ux-a11y .ux-a11y-text{font-size:15px;font-weight:700;color:#93c5fd}.demo-ux-a11y.in-view .ux-a11y-row--1 .ux-a11y-tick{animation:ux-tick-fill .5s ease-out .6s forwards}.demo-ux-a11y.in-view .ux-a11y-row--2 .ux-a11y-tick{animation:ux-tick-fill .5s ease-out 1s forwards}.demo-ux-a11y.in-view .ux-a11y-row--3 .ux-a11y-tick{animation:ux-tick-fill .5s ease-out 1.4s forwards}.demo-ux-a11y.in-view .ux-a11y-row--4 .ux-a11y-tick{animation:ux-tick-fill .5s ease-out 1.8s forwards}.demo-ux-a11y .ux-a11y-badge{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 24px;background:#3b82f626;border:1.5px solid rgba(59,130,246,.3);border-radius:14px;opacity:0;transform:scale(.8)}.demo-ux-a11y.in-view .ux-a11y-badge{animation:ux-pop .5s ease-out 2s forwards}.demo-ux-a11y .ux-a11y-badge-value{font-size:28px;font-weight:800;color:#60a5fa;font-variant-numeric:tabular-nums}.demo-ux-a11y .ux-a11y-badge-label{font-size:12px;font-weight:700;color:#60a5fa99;text-transform:uppercase;letter-spacing:.08em}@keyframes ux-slide-up{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes ux-fade-in{0%{opacity:0}to{opacity:1}}@keyframes ux-pop{0%{opacity:0;transform:scale(0)}60%{transform:scale(1.15)}to{opacity:1;transform:scale(1)}}@keyframes ux-slide-right{0%{opacity:0;transform:translate(-16px)}to{opacity:1;transform:translate(0)}}@keyframes ux-heat-pop{0%{transform:scale(0);opacity:0}50%{opacity:1}to{transform:scale(1)}}@keyframes ux-a11y-row-in{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}@keyframes ux-tick-fill{0%{background:#ffffff1a;color:transparent;transform:scale(1)}50%{transform:scale(1.3)}to{background:#3b82f6;color:#fff;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.demo-ux-research .ux-persona-card,.demo-ux-wireframe .ux-wire-pin,.demo-ux-system .ux-sys-tokens-label,.demo-ux-system .ux-sys-row,.demo-ux-testing .ux-heat-dot,.demo-ux-a11y .ux-a11y-row,.demo-ux-a11y .ux-a11y-badge{animation:none!important;opacity:1!important;transform:none!important}.demo-ux-a11y .ux-a11y-tick{animation:none!important;background:#3b82f6!important;color:#fff!important}.demo-ux-testing .ux-test-bar-fill{transition:none!important;width:87%!important}}@media(max-width:639px){.demo-ux-research .ux-persona-stack{max-width:100%}.demo-ux-research .ux-persona-card{padding:10px 14px}.demo-ux-research .ux-persona-avatar{width:36px;height:36px}.demo-ux-research .ux-persona-avatar svg{width:18px;height:18px}.demo-ux-research .ux-persona-name{font-size:13px}.demo-ux-research .ux-persona-insight{font-size:11px}.demo-ux-wireframe .ux-wire-layout{max-width:100%}.demo-ux-wireframe .ux-wire-hero{height:60px}.demo-ux-wireframe .ux-wire-card{height:36px}.demo-ux-wireframe .ux-wire-pin{width:22px;height:22px;font-size:10px}.demo-ux-prototype .ux-proto-phone{width:130px;height:170px}.demo-ux-system .ux-sys-library{max-width:100%;gap:14px}.demo-ux-system .ux-sys-swatch{width:28px;height:28px}.demo-ux-system .ux-sys-btn-primary,.demo-ux-system .ux-sys-btn-secondary{padding:6px 16px;font-size:11px}.demo-ux-system .ux-sys-type-xl{font-size:26px}.demo-ux-system .ux-sys-type-md{font-size:18px}.demo-ux-testing .ux-test-wrap{max-width:100%}.demo-ux-testing .ux-test-label{font-size:11px}.demo-ux-testing .ux-test-value{font-size:15px}.demo-ux-a11y .ux-a11y-wrap{max-width:100%}.demo-ux-a11y .ux-a11y-row{padding:10px 14px}.demo-ux-a11y .ux-a11y-text{font-size:13px}.demo-ux-a11y .ux-a11y-tick{width:26px;height:26px}.demo-ux-a11y .ux-a11y-badge-value{font-size:22px}}