/* ===== Dictionary demo keyframes ===== */
@keyframes kf-fade-in{from{opacity:0}to{opacity:1}}
@keyframes kf-fade-in-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes kf-fade-in-down{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:none}}
@keyframes kf-fade-in-left{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes kf-fade-in-right{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes kf-fade-in-tl{from{opacity:0;transform:translate(-24px,-24px)}to{opacity:1;transform:none}}
@keyframes kf-slide-in-up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes kf-slide-in-down{from{transform:translateY(-40px);opacity:0}to{transform:none;opacity:1}}
@keyframes kf-slide-in-left{from{transform:translateX(-48px);opacity:0}to{transform:none;opacity:1}}
@keyframes kf-slide-in-right{from{transform:translateX(48px);opacity:0}to{transform:none;opacity:1}}
@keyframes kf-zoom-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes kf-zoom-in-up{from{opacity:0;transform:scale(.6) translateY(32px)}to{opacity:1;transform:none}}
@keyframes kf-bounce-in{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.08)}70%{transform:scale(.95)}100%{transform:scale(1)}}
@keyframes kf-bounce-in-up{0%{opacity:0;transform:translateY(40px)}60%{opacity:1;transform:translateY(-8px)}80%{transform:translateY(4px)}100%{transform:none}}
@keyframes kf-rotate-in{from{opacity:0;transform:rotate(-200deg) scale(.7)}to{opacity:1;transform:none}}
@keyframes kf-rotate-in-dl{from{opacity:0;transform:rotate(-45deg);transform-origin:left bottom}to{opacity:1;transform:none;transform-origin:left bottom}}
@keyframes kf-flip-in-x{from{opacity:0;transform:perspective(400px) rotateX(90deg)}40%{transform:perspective(400px) rotateX(-12deg)}70%{transform:perspective(400px) rotateX(6deg)}to{opacity:1;transform:perspective(400px) rotateX(0)}}
@keyframes kf-flip-in-y{from{opacity:0;transform:perspective(400px) rotateY(90deg)}40%{transform:perspective(400px) rotateY(-12deg)}70%{transform:perspective(400px) rotateY(6deg)}to{opacity:1;transform:perspective(400px) rotateY(0)}}
@keyframes kf-back-in-up{0%{opacity:.7;transform:translateY(80px) scale(.7)}80%{opacity:.7;transform:translateY(0) scale(.7)}100%{opacity:1;transform:scale(1)}}
@keyframes kf-back-in-down{0%{opacity:.7;transform:translateY(-80px) scale(.7)}80%{opacity:.7;transform:translateY(0) scale(.7)}100%{opacity:1;transform:scale(1)}}
@keyframes kf-roll-in{from{opacity:0;transform:translateX(-80%) rotate(-120deg)}to{opacity:1;transform:none}}
@keyframes kf-light{from{opacity:0;transform:translateX(80%) skewX(-30deg)}60%{opacity:1;transform:translateX(-10%) skewX(20deg)}80%{transform:translateX(0) skewX(-5deg)}to{transform:none}}
@keyframes kf-blur-in{from{opacity:0;filter:blur(10px);transform:translateY(8px)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes kf-jack{from{opacity:0;transform:scale(.1) rotate(30deg);transform-origin:center bottom}50%{transform:rotate(-10deg)}70%{transform:rotate(3deg)}to{opacity:1;transform:scale(1)}}
@keyframes kf-fade-out{from{opacity:1}to{opacity:0}}
@keyframes kf-fade-out-up{from{opacity:1}to{opacity:0;transform:translateY(-24px)}}
@keyframes kf-fade-out-left{from{opacity:1}to{opacity:0;transform:translateX(-28px)}}
@keyframes kf-slide-out-right{from{transform:none;opacity:1}to{transform:translateX(48px);opacity:0}}
@keyframes kf-slide-out-up{from{transform:none;opacity:1}to{transform:translateY(-40px);opacity:0}}
@keyframes kf-zoom-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.4)}}
@keyframes kf-bounce-out{20%{transform:scale(.9)}50%,55%{opacity:1;transform:scale(1.08)}to{opacity:0;transform:scale(.3)}}
@keyframes kf-rotate-out{from{opacity:1}to{opacity:0;transform:rotate(200deg) scale(.7)}}
@keyframes kf-flip-out-x{from{transform:perspective(400px) rotateX(0)}to{opacity:0;transform:perspective(400px) rotateX(90deg)}}
@keyframes kf-roll-out{from{opacity:1}to{opacity:0;transform:translateX(80%) rotate(120deg)}}
@keyframes kf-bounce{0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(-16px)}60%{transform:translateY(-8px)}}
@keyframes kf-flash{0%,50%,100%{opacity:1}25%,75%{opacity:0}}
@keyframes kf-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes kf-rubber{from{transform:scaleX(1)}30%{transform:scaleX(1.25) scaleY(.75)}40%{transform:scaleX(.75) scaleY(1.25)}50%{transform:scaleX(1.15) scaleY(.85)}65%{transform:scaleX(.95) scaleY(1.05)}75%{transform:scaleX(1.05) scaleY(.95)}to{transform:scaleX(1)}}
@keyframes kf-shake-x{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@keyframes kf-shake-y{0%,100%{transform:translateY(0)}20%,60%{transform:translateY(-8px)}40%,80%{transform:translateY(8px)}}
@keyframes kf-head{0%{transform:translateX(0)}6.5%{transform:translateX(-6px) rotateY(-9deg)}18.5%{transform:translateX(5px) rotateY(7deg)}31.5%{transform:translateX(-3px) rotateY(-5deg)}43.5%{transform:translateX(2px) rotateY(3deg)}50%{transform:translateX(0)}}
@keyframes kf-swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}to{transform:rotate(0)}}
@keyframes kf-tada{from{transform:scale(1)}10%,20%{transform:scale(.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.08) rotate(3deg)}40%,60%,80%{transform:scale(1.08) rotate(-3deg)}to{transform:scale(1)}}
@keyframes kf-wobble{from{transform:none}15%{transform:translateX(-16%) rotate(-5deg)}30%{transform:translateX(12%) rotate(3deg)}45%{transform:translateX(-8%) rotate(-3deg)}60%{transform:translateX(6%) rotate(2deg)}75%{transform:translateX(-3%) rotate(-1deg)}to{transform:none}}
@keyframes kf-jello{from,11.1%,to{transform:translate3d(0,0,0)}22.2%{transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{transform:skewX(6.25deg) skewY(6.25deg)}44.4%{transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{transform:skewX(.390625deg) skewY(.390625deg)}88.8%{transform:skewX(-.1953125deg) skewY(-.1953125deg)}}
@keyframes kf-heart{0%{transform:scale(1)}14%{transform:scale(1.2)}28%{transform:scale(1)}42%{transform:scale(1.2)}70%{transform:scale(1)}}
@keyframes kf-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes kf-ping{75%,100%{transform:scale(2);opacity:0}}
@keyframes kf-spin{to{transform:rotate(360deg)}}
@keyframes kf-grad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes kf-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes kf-progress{0%{left:-40%}100%{left:100%}}
@keyframes kf-dots{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}
@keyframes kf-text-shimmer{to{background-position:-200% center}}
@keyframes kf-tracking{from{letter-spacing:.8em;opacity:0}to{letter-spacing:.04em;opacity:1}}
@keyframes kf-text-focus{from{filter:blur(12px);opacity:0}to{filter:blur(0);opacity:1}}
@keyframes kf-caret{0%,49%{opacity:1}50%,100%{opacity:0}}

.a-fade-in{animation:kf-fade-in .6s ease both}
.a-fade-in-up{animation:kf-fade-in-up .7s ease both}
.a-fade-in-down{animation:kf-fade-in-down .7s ease both}
.a-fade-in-left{animation:kf-fade-in-left .65s ease both}
.a-fade-in-right{animation:kf-fade-in-right .65s ease both}
.a-fade-in-tl{animation:kf-fade-in-tl .7s ease both}
.a-slide-in-up{animation:kf-slide-in-up .65s cubic-bezier(.22,1,.36,1) both}
.a-slide-in-down{animation:kf-slide-in-down .65s cubic-bezier(.22,1,.36,1) both}
.a-slide-in-left{animation:kf-slide-in-left .65s cubic-bezier(.22,1,.36,1) both}
.a-slide-in-right{animation:kf-slide-in-right .65s cubic-bezier(.22,1,.36,1) both}
.a-zoom-in{animation:kf-zoom-in .55s cubic-bezier(.2,.8,.2,1) both}
.a-zoom-in-up{animation:kf-zoom-in-up .6s cubic-bezier(.2,.8,.2,1) both}
.a-bounce-in{animation:kf-bounce-in .75s both}
.a-bounce-in-up{animation:kf-bounce-in-up .8s both}
.a-rotate-in{animation:kf-rotate-in .7s ease both}
.a-rotate-in-dl{animation:kf-rotate-in-dl .7s ease both}
.a-flip-in-x{animation:kf-flip-in-x .75s ease both;backface-visibility:visible}
.a-flip-in-y{animation:kf-flip-in-y .75s ease both;backface-visibility:visible}
.a-back-in-up{animation:kf-back-in-up .8s both}
.a-back-in-down{animation:kf-back-in-down .8s both}
.a-roll-in{animation:kf-roll-in .8s ease both}
.a-light-speed-in{animation:kf-light .8s ease both}
.a-blur-in{animation:kf-blur-in .7s ease both}
.a-jack-in{animation:kf-jack .9s ease both}
.a-fade-out{animation:kf-fade-out .55s ease both}
.a-fade-out-up{animation:kf-fade-out-up .55s ease both}
.a-fade-out-left{animation:kf-fade-out-left .55s ease both}
.a-slide-out-right{animation:kf-slide-out-right .55s ease both}
.a-slide-out-up{animation:kf-slide-out-up .55s ease both}
.a-zoom-out{animation:kf-zoom-out .5s ease both}
.a-bounce-out{animation:kf-bounce-out .75s both}
.a-rotate-out{animation:kf-rotate-out .65s ease both}
.a-flip-out-x{animation:kf-flip-out-x .6s ease both}
.a-roll-out{animation:kf-roll-out .75s ease both}
.a-bounce{animation:kf-bounce 1.2s infinite}
.a-flash{animation:kf-flash 1.2s infinite}
.a-pulse{animation:kf-pulse 1.4s ease-in-out infinite}
.a-rubber{animation:kf-rubber .9s both}
.a-shake-x{animation:kf-shake-x .5s ease both}
.a-shake-y{animation:kf-shake-y .5s ease both}
.a-head-shake{animation:kf-head .8s ease-in-out both}
.a-swing{transform-origin:top center;animation:kf-swing .9s both}
.a-tada{animation:kf-tada .9s both}
.a-wobble{animation:kf-wobble .9s both}
.a-jello{transform-origin:center;animation:kf-jello .9s both}
.a-heart{animation:kf-heart 1.3s ease-in-out infinite}
.a-float{animation:kf-float 2.4s ease-in-out infinite}
.a-spin{width:36px;height:36px;border-radius:50%;border:3px solid rgba(91,185,255,.2);border-top-color:#5bcbff;background:none;box-shadow:none;animation:kf-spin .8s linear infinite}
.a-dual{width:40px;height:40px;border-radius:50%;border:3px solid transparent;border-top-color:#5bcbff;border-bottom-color:#3ee0c8;background:none;box-shadow:none;animation:kf-spin 1s linear infinite}
.a-grad{background:linear-gradient(120deg,#5bcbff,#5ba9ff,#3ee0c8,#5bcbff);background-size:300% 300%;animation:kf-grad 4s ease infinite}
.a-shimmer{width:160px;height:18px;border-radius:8px;box-shadow:none;background:linear-gradient(90deg,#1a1f2e 25%,#2a3348 50%,#1a1f2e 75%);background-size:200% 100%;animation:kf-shimmer 1.4s linear infinite}
.a-progress{position:relative;height:4px;width:160px;background:#1a1f2e;border-radius:99px;overflow:hidden}
.a-progress i{position:absolute;top:0;height:100%;width:40%;background:linear-gradient(90deg,#5bcbff,#3ee0c8);animation:kf-progress 1.2s ease-in-out infinite}
.a-dots{display:flex;gap:8px}
.a-dots i{width:10px;height:10px;border-radius:50%;background:#5bcbff;animation:kf-dots 1.2s ease-in-out infinite}
.a-dots i:nth-child(2){animation-delay:.15s}
.a-dots i:nth-child(3){animation-delay:.3s}
.demo-ping{position:relative;width:16px;height:16px;background:#5bcbff;border-radius:50%}
.demo-ping span,.demo-ping::before{content:"";position:absolute;inset:0;border-radius:50%;background:#5bcbff;animation:kf-ping 1.2s cubic-bezier(0,0,.2,1) infinite}
.a-text-shimmer{background:linear-gradient(90deg,#8b90a3 0%,#eef0f6 40%,#5bcbff 50%,#eef0f6 60%,#8b90a3 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:kf-text-shimmer 2.4s linear infinite}
.a-tracking{animation:kf-tracking .8s ease both}
.a-text-focus{animation:kf-text-focus .8s ease both}
.a-caret span{display:inline-block;width:2px;height:1em;margin-left:2px;background:#5bcbff;vertical-align:text-bottom;animation:kf-caret 1s step-end infinite}
.a-scroll-view{animation:kf-fade-in-up .7s ease both}
.a-scroll-bar{width:160px;height:4px;background:#1a1f2e;border-radius:99px;overflow:hidden}
.a-scroll-bar i{display:block;height:100%;width:100%;transform-origin:left;background:linear-gradient(90deg,#5bcbff,#3ee0c8);animation:kf-progress 2s ease-in-out infinite}

.h-lift{transition:transform .25s ease,box-shadow .25s ease}
.preview:hover .h-lift{transform:translateY(-6px);box-shadow:0 16px 36px rgba(91,185,255,.4)}
.h-glow{transition:box-shadow .25s ease,transform .25s ease}
.preview:hover .h-glow{transform:scale(1.03);box-shadow:0 0 0 1px rgba(91,185,255,.5),0 0 28px rgba(91,185,255,.45)}
.h-scale{transition:transform .25s ease}
.preview:hover .h-scale{transform:scale(1.08)}
.h-rotate{transition:transform .3s ease}
.preview:hover .h-rotate{transform:rotate(8deg) scale(1.04)}
.h-underline{position:relative;display:inline-block;padding-bottom:5px;font-weight:600}
.h-underline::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:#5bcbff;transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.preview:hover .h-underline::after{transform:scaleX(1)}
.h-bright{transition:filter .25s ease}
.preview:hover .h-bright{filter:brightness(1.25)}
.h-skew{transition:transform .3s ease}
.preview:hover .h-skew{transform:skewX(-8deg)}
.h-border{position:relative;background:linear-gradient(120deg,#5bcbff,#5ba9ff)}
.h-border::before{content:"";position:absolute;inset:-4px;border:2px solid #5bcbff;border-radius:18px;transform:scale(.9);opacity:0;transition:transform .3s ease,opacity .3s ease}
.preview:hover .h-border::before{transform:scale(1);opacity:1}

.spec-preview{text-align:center}
.spec-preview span{display:block;color:#3ee0c8;font-size:.72rem;letter-spacing:.1em;margin-bottom:6px}
.spec-preview strong{font-size:1rem;color:#eef0f6}

/* UI / Gradient demos */
.demo-tabs-wrap,.demo-pills-wrap{display:grid;gap:10px;justify-items:center;width:min(260px,92%)}
.demo-tabs{display:flex;gap:2px;border-bottom:1px solid #252a3a;width:100%}
.demo-tabs button{padding:8px 12px;color:#8b90a3;font-size:.8rem}
.demo-tabs button.is-on{color:#eef0f6;position:relative}
.demo-tabs button.is-on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:linear-gradient(90deg,#5bcbff,#5ba9ff)}
.demo-tab-panels{width:100%;min-height:42px;border:1px solid #252a3a;border-radius:10px;background:#0a0b10;display:grid;place-items:center;font-size:.8rem;color:#8b90a3}
.demo-tab-panels.compact{min-height:36px}
.demo-tab-panels .panel{display:none;padding:10px}
.demo-tab-panels .panel.is-on{display:block;color:#eef0f6}
.demo-pills{display:inline-flex;gap:6px;padding:4px;border-radius:999px;background:#10131a;border:1px solid #252a3a}
.demo-pills button{padding:7px 12px;border-radius:999px;color:#8b90a3;font-size:.78rem}
.demo-pills button.is-on{background:linear-gradient(120deg,#5bcbff,#5ba9ff);color:#061018;font-weight:700}
.demo-seg{position:relative;display:grid;grid-template-columns:1fr 1fr;width:160px;padding:4px;border-radius:12px;background:#10131a;border:1px solid #252a3a}
.demo-seg .thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:8px;background:#1a2130;transition:transform .28s cubic-bezier(.22,1,.36,1)}
.demo-seg button{position:relative;z-index:1;padding:8px;font-size:.78rem;color:#8b90a3}
.demo-seg button.is-on{color:#eef0f6;font-weight:700}
.demo-acc{width:min(260px,90%);border:1px solid #252a3a;border-radius:12px;background:#12151f;padding:10px 12px;font-size:.82rem}
.demo-acc summary{cursor:pointer;font-weight:700;list-style:none}
.demo-acc summary::-webkit-details-marker{display:none}
.demo-acc summary::before{content:"";display:inline-block;width:6px;height:6px;border-right:2px solid #5bcbff;border-bottom:2px solid #5bcbff;transform:rotate(-45deg);margin-right:8px;transition:transform .2s;vertical-align:middle}
.demo-acc[open] summary::before{transform:rotate(45deg)}
.demo-acc p{margin-top:8px;color:#8b90a3;font-size:.78rem}
.demo-toggle{position:relative;display:inline-block;width:48px;height:28px;cursor:pointer}
.demo-toggle input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer;z-index:2}
.demo-toggle span{position:absolute;inset:0;border-radius:999px;background:#3a4158;transition:background .25s ease;pointer-events:none}
.demo-toggle span::before{content:"";position:absolute;width:22px;height:22px;left:3px;top:3px;border-radius:50%;background:#eef0f6;transform:translateX(0);transition:transform .25s cubic-bezier(.22,1,.36,1);box-shadow:0 2px 6px rgba(0,0,0,.35)}
.demo-toggle input:checked + span{background:#5bcbff}
.demo-toggle input:checked + span::before{transform:translateX(20px)}
.demo-tip{border-bottom:1px dashed #5bcbff;font-size:.85rem;position:relative;cursor:help}
.demo-tip::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);padding:6px 10px;border-radius:8px;background:#1a2130;border:1px solid #252a3a;font-size:.72rem;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,transform .2s,visibility .2s}
.demo-tip:hover::after,.demo-tip:focus-visible::after{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.demo-modal{width:min(240px,90%);border-radius:14px;background:rgba(7,8,12,.35);padding:16px;display:grid;place-items:center}
.demo-modal .box{width:100%;padding:14px;border-radius:12px;background:#12151f;border:1px solid #252a3a;font-size:.82rem}
.demo-modal .box p{color:#8b90a3;margin-top:4px}
.demo-modal-live{position:relative;width:min(240px,92%);min-height:90px;display:grid;place-items:center}
.demo-modal-live .backdrop{position:absolute;inset:0;border-radius:12px;background:rgba(7,8,12,.55);display:none;place-items:center;padding:12px;z-index:2}
.demo-modal-live.is-open .backdrop{display:grid}
.demo-modal-live .box{width:100%;padding:14px;border-radius:12px;background:#12151f;border:1px solid #252a3a;font-size:.82rem;text-align:center}
.demo-modal-live .box p{color:#8b90a3;margin:6px 0 10px}
.demo-modal-live .close-modal{padding:6px 12px;border-radius:8px;border:1px solid #252a3a;background:#1a2130;font-size:.75rem}
.demo-drawer{width:min(240px,90%);height:90px;border-radius:12px;background:#0a0b10;border:1px solid #252a3a;position:relative;overflow:hidden}
.demo-drawer .panel{position:absolute;top:0;right:0;height:100%;width:55%;background:#12151f;border-left:1px solid #252a3a;display:grid;place-items:center;font-size:.8rem}
.demo-drawer-live{display:grid;gap:8px;justify-items:center;width:min(240px,92%)}
.demo-drawer-live .stage{width:100%;height:80px;border-radius:12px;background:#0a0b10;border:1px solid #252a3a;position:relative;overflow:hidden}
.demo-drawer-live .panel{position:absolute;top:0;right:0;height:100%;width:55%;background:#12151f;border-left:1px solid #252a3a;display:grid;place-items:center;font-size:.8rem;transform:translateX(105%);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.demo-drawer-live.is-open .panel{transform:none}
.demo-toast{padding:10px 14px;border-radius:10px;background:#151824;border:1px solid #252a3a;font-size:.8rem;box-shadow:0 10px 28px rgba(0,0,0,.3)}
.demo-toast-live{position:relative;width:min(220px,92%);min-height:88px;display:grid;place-items:center}
.demo-toast-live .toast{position:absolute;bottom:8px;left:50%;transform:translateX(-50%) translateY(12px);padding:10px 14px;border-radius:10px;background:#151824;border:1px solid #252a3a;font-size:.8rem;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;visibility:hidden}
.demo-toast-live .toast.is-on{opacity:1;transform:translateX(-50%) translateY(0);visibility:visible}
.demo-slider{position:relative;width:180px;height:72px;border-radius:12px;overflow:hidden}
.demo-slider span{position:absolute;inset:0;animation:slide-fade-demo 6s infinite}
.demo-slider .s1{background:linear-gradient(120deg,#5bcbff,#5ba9ff)}
.demo-slider .s2{background:linear-gradient(120deg,#3ee0c8,#5bcbff);animation-delay:-3s}
@keyframes slide-fade-demo{0%,40%{opacity:1}50%,90%{opacity:0}100%{opacity:1}}
.demo-snap{display:grid;grid-auto-flow:column;grid-auto-columns:70%;gap:8px;width:200px;overflow-x:auto;scroll-snap-type:x mandatory}
.demo-snap::-webkit-scrollbar{height:4px}
.demo-snap div{scroll-snap-align:center;height:64px;border-radius:10px;background:linear-gradient(120deg,#5bcbff,#5ba9ff)}
.demo-snap div:nth-child(2){background:linear-gradient(120deg,#3ee0c8,#5bcbff)}
.demo-snap div:nth-child(3){background:linear-gradient(120deg,#5ba9ff,#3ee0c8)}
.demo-range{width:180px;accent-color:#5bcbff;cursor:pointer}
.g-linear{background:linear-gradient(120deg,#5bcbff,#5ba9ff,#3ee0c8)}
.g-radial{background:radial-gradient(circle at 30% 30%,#5bcbff,#0a0b10 70%)}
.g-conic{background:conic-gradient(from 180deg,#5bcbff,#5ba9ff,#3ee0c8,#5bcbff)}
.g-mesh{background:radial-gradient(80px 50px at 20% 20%,rgba(91,185,255,.55),transparent 70%),radial-gradient(70px 50px at 80% 30%,rgba(62,224,200,.35),transparent 70%),#0a0b10}
.g-text{background:linear-gradient(120deg,#5bcbff,#3ee0c8);-webkit-background-clip:text;background-clip:text;color:transparent}
.g-border{padding:2px;background:linear-gradient(120deg,#5bcbff,#3ee0c8);box-shadow:none}
.g-border span{display:block;width:100%;height:100%;border-radius:12px;background:#12151f}
.g-anim{background:linear-gradient(120deg,#5bcbff,#5ba9ff,#3ee0c8,#5bcbff);background-size:300% 300%;animation:kf-grad 4s ease infinite}
.g-repeat{background:repeating-linear-gradient(135deg,#5bcbff 0 8px,#10131a 8px 16px)}
.g-repeat-rad{background:repeating-radial-gradient(circle at 50%,#5bcbff 0 6px,#10131a 6px 12px)}
.g-repeat-con{background:repeating-conic-gradient(from 0deg,#5bcbff 0 18deg,#10131a 18deg 36deg)}
.g-hard{background:linear-gradient(90deg,#5bcbff 50%,#3ee0c8 50%)}
.g-fade{background:linear-gradient(180deg,#5bcbff,transparent);box-shadow:none}
.g-multi{background:linear-gradient(90deg,#5bcbff,#5ba9ff,#3ee0c8,#ff7aa2,#5bcbff)}
.g-bimg{width:88px;height:88px;border-radius:0;border:8px solid transparent;border-image:linear-gradient(120deg,#5bcbff,#3ee0c8) 1;background:#12151f;box-shadow:none}
.g-maskb{position:relative;background:#12151f;box-shadow:none}
.g-maskb::before{content:"";position:absolute;inset:0;padding:2px;border-radius:inherit;background:linear-gradient(120deg,#5bcbff,#3ee0c8);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.g-under{display:inline-block;padding-bottom:4px;font-weight:800;background-image:linear-gradient(90deg,#5bcbff,#3ee0c8);background-repeat:no-repeat;background-position:0 100%;background-size:100% 3px}
.g-hr{width:168px;height:3px;border-radius:99px;background:linear-gradient(90deg,transparent,#5bcbff,#3ee0c8,transparent);box-shadow:none}
.g-ov{position:relative;width:140px;height:80px;border-radius:12px;overflow:hidden;background:linear-gradient(120deg,#5bcbff,#5ba9ff);box-shadow:none}
.g-ov::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,#07080c)}
.g-vig{background:radial-gradient(circle,#5bcbff 18%,#07080c 72%);box-shadow:none}
.g-var{--c1:#5bcbff;--c2:#3ee0c8;background:linear-gradient(120deg,var(--c1),var(--c2))}
.g-stripe{background:repeating-linear-gradient(90deg,#5bcbff 0 12px,#10131a 12px 24px);background-size:24px 100%;animation:g-stripe 1s linear infinite}
@keyframes g-stripe{to{background-position:24px 0}}
.g-duo{background:linear-gradient(120deg,#5bcbff 0 48%,#3ee0c8 52% 100%)}
.g-ellip{background:radial-gradient(ellipse at 50% 0%,#5bcbff,#0a0b10 68%)}
.g-btn{padding:10px 18px;border-radius:999px;background:linear-gradient(120deg,#5bcbff,#5ba9ff);color:#061018;font-weight:700;border:0;box-shadow:0 8px 20px rgba(91,185,255,.28)}
.g-text-out{font-weight:800;font-size:1.25rem;-webkit-text-stroke:1.2px #5bcbff;background:linear-gradient(120deg,#5bcbff,#3ee0c8);-webkit-background-clip:text;background-clip:text;color:transparent}
.g-hover{width:120px;height:72px;border-radius:14px;background:linear-gradient(120deg,#5bcbff,#3ee0c8);background-size:180% 180%;transition:background-position .4s}
.preview:hover .g-hover,.g-hover:hover{background-position:100% 50%}
.g-glow{width:120px;height:64px;border-radius:14px;background:#12151f;box-shadow:0 12px 28px -8px #5bcbff,0 8px 20px -10px #3ee0c8}
.h-shine{position:relative;overflow:hidden}
.h-shine::after{content:"";position:absolute;top:0;left:-40%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg)}
.preview:hover .h-shine::after{left:120%;transition:left .5s}
.demo-card{padding:16px 20px;border-radius:14px;background:#12151f;border:1px solid #252a3a;font-size:.85rem;transition:transform .25s,box-shadow .25s}
.preview:hover .demo-card{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.3)}
.demo-skel{width:180px;display:grid;gap:8px}
.demo-skel i{display:block;height:10px;border-radius:6px;background:linear-gradient(90deg,#1a1f2e 25%,#2a3348 50%,#1a1f2e 75%);background-size:200% 100%;animation:kf-shimmer 1.4s linear infinite}
.demo-skel i.w{width:70%}
.demo-skel i.s{width:45%}
.demo-badge{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#5bcbff;color:#061018;font-size:.75rem;font-weight:700;animation:kf-pulse 1.4s ease-in-out infinite}
.demo-glass{padding:16px 22px;border-radius:14px;background:rgba(18,21,31,.55);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);font-size:.85rem}
.demo-marquee{width:200px;overflow:hidden;white-space:nowrap;font-size:.78rem;color:#8b90a3}
.demo-marquee span{display:inline-block;padding-right:1em;animation:marquee-demo 8s linear infinite}
@keyframes marquee-demo{to{transform:translateX(-100%)}}
.demo-sticky{padding:10px 14px;border-radius:10px;background:rgba(7,8,12,.8);border:1px solid #252a3a;font-size:.78rem;backdrop-filter:blur(8px)}
.demo-read{width:180px;height:4px;background:#1a1f2e;border-radius:99px;overflow:hidden}
.demo-read i{display:block;height:100%;width:65%;background:linear-gradient(90deg,#5bcbff,#3ee0c8)}

/* border + extra animations */
@keyframes kf-fade-in-tr{from{opacity:0;transform:translate(24px,-24px)}to{opacity:1;transform:none}}
@keyframes kf-fade-in-bl{from{opacity:0;transform:translate(-24px,24px)}to{opacity:1;transform:none}}
@keyframes kf-fade-in-br{from{opacity:0;transform:translate(24px,24px)}to{opacity:1;transform:none}}
@keyframes kf-zoom-in-left{from{opacity:0;transform:scale(.5) translateX(-40px)}to{opacity:1;transform:none}}
@keyframes kf-zoom-in-right{from{opacity:0;transform:scale(.5) translateX(40px)}to{opacity:1;transform:none}}
@keyframes kf-bounce-in-left{0%{opacity:0;transform:translateX(-40px)}60%{opacity:1;transform:translateX(10px)}80%{transform:translateX(-4px)}100%{transform:none}}
@keyframes kf-bounce-in-right{0%{opacity:0;transform:translateX(40px)}60%{opacity:1;transform:translateX(-10px)}80%{transform:translateX(4px)}100%{transform:none}}
@keyframes kf-rotate-in-dr{from{opacity:0;transform:rotate(45deg);transform-origin:right bottom}to{opacity:1;transform:none;transform-origin:right bottom}}
@keyframes kf-hinge{0%{transform-origin:top left}20%,60%{transform:rotate(80deg);transform-origin:top left}40%,80%{transform:rotate(60deg);transform-origin:top left;opacity:1}to{transform:translateY(40px);opacity:0;transform-origin:top left}}
@keyframes kf-vibrate{0%,100%{transform:translate(0)}20%{transform:translate(-2px,2px)}40%{transform:translate(-2px,-2px)}60%{transform:translate(2px,2px)}80%{transform:translate(2px,-2px)}}
@keyframes kf-ken{from{transform:scale(1)}to{transform:scale(1.2) translate(-3%,-2%)}}
@keyframes kf-blur-pulse{0%,100%{filter:blur(0)}50%{filter:blur(3px)}}
@keyframes kf-hue{to{filter:hue-rotate(360deg)}}
@keyframes kf-drop{0%,100%{filter:drop-shadow(0 8px 12px rgba(91,185,255,.25))}50%{filter:drop-shadow(0 14px 24px rgba(91,185,255,.55))}}
@keyframes kf-clip-circle{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(75% at 50% 50%)}}
@keyframes kf-clip-inset{from{clip-path:inset(50% 50% 50% 50%)}to{clip-path:inset(0 0 0 0)}}
@keyframes kf-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes kf-type{from{width:0}to{width:7.5ch}}
@keyframes kf-glitch{0%,100%{transform:none;text-shadow:none}20%{transform:translate(-2px,1px);text-shadow:2px 0 #5bcbff,-2px 0 #3ee0c8}40%{transform:translate(2px,-1px);text-shadow:-2px 0 #5bcbff,2px 0 #3ee0c8}60%{transform:translate(-1px,2px)}80%{transform:translate(1px,-2px)}}
@keyframes kf-neon{0%,19%,21%,23%,25%,54%,56%,100%{text-shadow:0 0 4px #5bcbff,0 0 12px #5bcbff,0 0 24px #5bcbff;opacity:1}20%,24%,55%{text-shadow:none;opacity:.7}}
@keyframes kf-flip-y-loop{to{transform:perspective(400px) rotateY(360deg)}}
@keyframes kf-shadow-pop{from{opacity:0;transform:translateY(8px);box-shadow:0 0 0 rgba(91,185,255,0)}to{opacity:1;transform:none;box-shadow:0 16px 40px rgba(91,185,255,.35)}}
@keyframes kf-border-reveal{to{clip-path:inset(0 0 0 0)}}
@keyframes kf-border-spin{to{transform:rotate(360deg)}}
@keyframes kf-march{to{background-position:12px 0,-12px 100%,0 -12px,100% 12px}}
@keyframes kf-border-glow{0%,100%{box-shadow:0 0 0 1px rgba(91,185,255,.35),0 0 0 0 rgba(91,185,255,.4)}50%{box-shadow:0 0 0 1px rgba(91,185,255,.9),0 0 24px 4px rgba(91,185,255,.35)}}
@keyframes kf-beam-x{to{left:140%}}
@keyframes kf-outline{from{outline-offset:0;outline-color:rgba(91,185,255,.35)}to{outline-offset:8px;outline-color:rgba(91,185,255,0)}}
@keyframes kf-radius{0%,100%{border-radius:16px}33%{border-radius:40% 16px}66%{border-radius:16px 40%}}
@keyframes kf-bcolor{0%{border-color:#5bcbff}33%{border-color:#3ee0c8}66%{border-color:#5ba9ff}100%{border-color:#5bcbff}}
@keyframes kf-double{0%,100%{box-shadow:0 0 0 0 rgba(91,185,255,.5)}50%{box-shadow:0 0 0 6px rgba(91,185,255,0),inset 0 0 0 2px rgba(91,185,255,.35)}}

.a-fade-in-tr{animation:kf-fade-in-tr .7s ease both}
.a-fade-in-bl{animation:kf-fade-in-bl .7s ease both}
.a-fade-in-br{animation:kf-fade-in-br .7s ease both}
.a-zoom-in-left{animation:kf-zoom-in-left .6s cubic-bezier(.2,.8,.2,1) both}
.a-zoom-in-right{animation:kf-zoom-in-right .6s cubic-bezier(.2,.8,.2,1) both}
.a-bounce-in-left{animation:kf-bounce-in-left .8s both}
.a-bounce-in-right{animation:kf-bounce-in-right .8s both}
.a-rotate-in-dr{animation:kf-rotate-in-dr .7s ease both}
.a-hinge{animation:kf-hinge 2s ease both}
.a-vibrate{animation:kf-vibrate .3s linear infinite}
.a-ken{width:120px;height:72px;border-radius:12px;overflow:hidden}
.a-ken i{display:block;width:100%;height:100%;background:linear-gradient(120deg,#5bcbff,#5ba9ff);animation:kf-ken 4s ease-in-out infinite alternate}
.a-blur-pulse{animation:kf-blur-pulse 2s ease-in-out infinite}
.a-hue{animation:kf-hue 4s linear infinite}
.a-drop{animation:kf-drop 1.8s ease-in-out infinite}
.a-clip-circle{animation:kf-clip-circle .7s ease both}
.a-clip-inset{animation:kf-clip-inset .65s cubic-bezier(.22,1,.36,1) both}
.a-wipe{animation:kf-wipe .7s ease both}
.a-type{overflow:hidden;white-space:nowrap;border-right:2px solid #5bcbff;width:0;animation:kf-type 2s steps(8) both,kf-caret 1s step-end infinite}
.a-glitch{animation:kf-glitch .6s both}
.a-neon{animation:kf-neon 2.2s both}
.a-flip-y-loop{animation:kf-flip-y-loop 2.4s linear infinite}
.a-shadow-pop{animation:kf-shadow-pop .6s ease both}

.b-draw{position:relative;width:80px;height:80px;border-radius:14px;background:linear-gradient(120deg,#5bcbff,#5ba9ff)}
.b-draw::before{content:"";position:absolute;inset:-4px;border:2px solid #5bcbff;border-radius:16px;clip-path:inset(0 100% 0 0);animation:kf-border-reveal 1s ease forwards}
.b-spin{position:relative;width:84px;height:84px;border-radius:16px;overflow:hidden;display:grid;place-items:center}
.b-spin::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,#5bcbff,transparent 30%);animation:kf-border-spin 2s linear infinite}
.b-spin i{position:relative;width:72px;height:72px;border-radius:14px;background:#12151f}
.b-dash{width:88px;height:64px;border-radius:12px;background:
  linear-gradient(90deg,#5bcbff 50%,transparent 50%) top/12px 2px repeat-x,
  linear-gradient(90deg,#5bcbff 50%,transparent 50%) bottom/12px 2px repeat-x,
  linear-gradient(#5bcbff 50%,transparent 50%) left/2px 12px repeat-y,
  linear-gradient(#5bcbff 50%,transparent 50%) right/2px 12px repeat-y;
  animation:kf-march .6s linear infinite}
.b-glow{width:80px;height:80px;border-radius:14px;border:1px solid #5bcbff;background:#12151f;animation:kf-border-glow 1.8s ease-in-out infinite}
.b-beam{position:relative;width:140px;height:56px;border:1px solid #252a3a;border-radius:12px;overflow:hidden;background:#12151f}
.b-beam::after{content:"";position:absolute;top:0;left:-40%;width:40%;height:2px;background:linear-gradient(90deg,transparent,#5bcbff,transparent);animation:kf-beam-x 2.4s linear infinite}
.b-outline{outline:2px solid #5bcbff;animation:kf-outline 1.2s ease-out infinite}
.b-radius{animation:kf-radius 3s ease-in-out infinite}
.b-color{width:80px;height:80px;border-radius:14px;border:2px solid #5bcbff;background:#12151f;animation:kf-bcolor 3s linear infinite}
.b-double{width:80px;height:80px;border-radius:14px;border:1px solid #5bcbff;background:#12151f;animation:kf-double 1.6s ease-in-out infinite}
.b-corners{position:relative;width:72px;height:72px}
.b-corners::before,.b-corners::after{content:"";position:absolute;width:16px;height:16px;border:2px solid #5bcbff;transition:width .3s,height .3s}
.b-corners::before{top:0;left:0;border-right:0;border-bottom:0}
.b-corners::after{right:0;bottom:0;border-left:0;border-top:0}
.preview:hover .b-corners::before,.preview:hover .b-corners::after{width:100%;height:100%}
.b-corners span{position:absolute;inset:12px;border-radius:8px;background:linear-gradient(120deg,#5bcbff,#5ba9ff)}

/* Carousel demos */
.demo-carousel-snap{width:min(220px,92%); }
.demo-carousel-snap .track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:12px;scrollbar-width:none}
.demo-carousel-snap .track::-webkit-scrollbar{display:none}
.demo-carousel-snap .slide{scroll-snap-align:center;height:84px;display:grid;place-items:center;font-weight:700;color:#061018}
.demo-carousel-snap .s1{background:linear-gradient(120deg,#5bcbff,#5ba9ff)}
.demo-carousel-snap .s2{background:linear-gradient(120deg,#3ee0c8,#5bcbff)}
.demo-carousel-snap .s3{background:linear-gradient(120deg,#5ba9ff,#3ee0c8)}
.demo-carousel-snap .dots{display:flex;justify-content:center;gap:6px;margin-top:8px}
.demo-carousel-snap .dots i,
.demo-carousel-snap .dots button{width:8px;height:8px;border-radius:50%;background:#3a4158;padding:0;border:0}
.demo-carousel-snap .dots i.on,
.demo-carousel-snap .dots button.on{background:#5bcbff}

.demo-carousel-auto{width:min(220px,92%);overflow:hidden;border-radius:12px}
.demo-carousel-auto .track{display:flex;animation:carousel-auto-demo 8s infinite}
.demo-carousel-auto:hover .track{animation-play-state:paused}
.demo-carousel-auto .slide{flex:0 0 100%;height:84px;display:grid;place-items:center;font-weight:700;color:#061018}
.demo-carousel-auto .s1{background:linear-gradient(120deg,#5bcbff,#5ba9ff)}
.demo-carousel-auto .s2{background:linear-gradient(120deg,#3ee0c8,#5bcbff)}
.demo-carousel-auto .s3{background:linear-gradient(120deg,#5ba9ff,#3ee0c8)}
@keyframes carousel-auto-demo{0%,20%{transform:translateX(0)}25%,45%{transform:translateX(-100%)}50%,70%{transform:translateX(-200%)}75%,100%{transform:translateX(-300%)}}

.demo-carousel-fade{position:relative;width:min(220px,92%);height:84px;border-radius:12px;overflow:hidden}
.demo-carousel-fade .slide{position:absolute;inset:0;display:grid;place-items:center;font-weight:700;color:#061018;opacity:0;animation:carousel-fade-demo 9s infinite}
.demo-carousel-fade .s1{background:linear-gradient(120deg,#5bcbff,#5ba9ff);animation-delay:0s}
.demo-carousel-fade .s2{background:linear-gradient(120deg,#3ee0c8,#5bcbff);animation-delay:-3s}
.demo-carousel-fade .s3{background:linear-gradient(120deg,#5ba9ff,#3ee0c8);animation-delay:-6s}
@keyframes carousel-fade-demo{0%,30%{opacity:1}33%,100%{opacity:0}}

.demo-carousel-peek{width:min(240px,96%);overflow-x:auto;scroll-snap-type:x mandatory;display:grid;grid-auto-flow:column;grid-auto-columns:72%;gap:10px;padding:0 14%;scrollbar-width:none}
.demo-carousel-peek::-webkit-scrollbar{display:none}
.demo-carousel-peek .slide{scroll-snap-align:center;height:84px;border-radius:12px;display:grid;place-items:center;font-weight:700;color:#061018}
.demo-carousel-peek .s1{background:linear-gradient(120deg,#5bcbff,#5ba9ff)}
.demo-carousel-peek .s2{background:linear-gradient(120deg,#3ee0c8,#5bcbff)}
.demo-carousel-peek .s3{background:linear-gradient(120deg,#5ba9ff,#3ee0c8)}

.demo-carousel-3d{width:min(240px,96%);height:110px;perspective:700px;display:grid;place-items:center}
.demo-carousel-3d .stage{position:relative;width:100%;height:90px}
.demo-carousel-3d .card{position:absolute;top:0;width:78px;height:90px;border-radius:12px;display:grid;place-items:center;font-weight:700;color:#061018;left:50%;margin-left:-39px}
.demo-carousel-3d .c1{background:linear-gradient(120deg,#5bcbff,#5ba9ff);transform:translateX(-58px) rotateY(32deg) scale(.86);opacity:.6}
.demo-carousel-3d .c2{background:linear-gradient(120deg,#3ee0c8,#5bcbff);transform:translateX(0) scale(1);z-index:2;box-shadow:0 12px 28px rgba(91,185,255,.3)}
.demo-carousel-3d .c3{background:linear-gradient(120deg,#5ba9ff,#3ee0c8);transform:translateX(58px) rotateY(-32deg) scale(.86);opacity:.6}

.demo-carousel-dots{width:min(220px,92%)}
.demo-carousel-dots .viewport{overflow:hidden;border-radius:12px}
.demo-carousel-dots .track{display:flex;width:300%;transition:transform .45s cubic-bezier(.22,1,.36,1);will-change:transform}
.demo-carousel-dots .slide{flex:0 0 33.333%;height:84px;display:grid;place-items:center;font-weight:700;color:#061018}
.demo-carousel-dots .s1{background:linear-gradient(120deg,#5bcbff,#5ba9ff)}
.demo-carousel-dots .s2{background:linear-gradient(120deg,#3ee0c8,#5bcbff)}
.demo-carousel-dots .s3{background:linear-gradient(120deg,#5ba9ff,#3ee0c8)}
.demo-carousel-dots .labels{display:flex;justify-content:center;gap:8px;margin-top:10px}
.demo-carousel-dots .labels button{width:8px;height:8px;border-radius:50%;background:#3a4158;padding:0;border:0}
.demo-carousel-dots .labels button.on{background:#5bcbff}
.demo-seg[data-i="1"] .thumb{transform:translateX(100%)}
.demo-tabs button,.demo-pills button,.demo-seg button,.demo-carousel-dots .labels button,.demo-carousel-snap .dots button{cursor:pointer}

/* ===== Parts / Buttons / Forms (expanded) ===== */
.p-h-left{padding-left:12px;border-left:3px solid #5bcbff;font-weight:700;font-size:.95rem}
.p-h-under{display:inline-block;padding-bottom:6px;border-bottom:2px solid #5bcbff;font-weight:700}
.p-h-double{display:inline-block;padding-bottom:6px;border-bottom:3px double #5bcbff;font-weight:700}
.p-h-dot{font-weight:700;position:relative;padding-left:14px}
.p-h-dot::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;border-radius:50%;background:#5bcbff;transform:translateY(-50%)}
.p-h-grad{display:inline-block;padding:6px 14px;border-radius:8px;background:linear-gradient(120deg,#5bcbff,#5ba9ff);color:#061018;font-weight:700;font-size:.9rem}
.p-h-brackets{position:relative;display:inline-block;padding:8px 16px;font-weight:700}
.p-h-brackets::before,.p-h-brackets::after{content:"";position:absolute;width:12px;height:12px;border:2px solid #5bcbff}
.p-h-brackets::before{top:0;left:0;border-right:0;border-bottom:0}
.p-h-brackets::after{right:0;bottom:0;border-left:0;border-top:0}
.p-h-ribbon{display:inline-block;padding:8px 18px;background:linear-gradient(120deg,#5bcbff,#5ba9ff);color:#061018;font-weight:700;font-size:.85rem;position:relative}
.p-h-ribbon::after{content:"";position:absolute;left:0;bottom:-10px;border:10px solid transparent;border-left-color:#3a8eb8;border-top-color:#3a8eb8;border-bottom:0;border-right:0}

.p-box{width:min(240px,92%);padding:12px 14px;border-radius:12px;border:1px solid #252a3a;background:#12151f;font-size:.78rem;color:#8b90a3}
.p-box strong{display:block;color:#eef0f6;margin-bottom:4px}
.p-box-tip{border-left:3px solid #5bcbff}
.p-box-warn{border-left:3px solid #ffb454;background:#1a1710}
.p-box-ok{border-left:3px solid #3ee0c8}
.p-box-fill{background:linear-gradient(120deg,rgba(91,185,255,.12),rgba(62,224,200,.08));border-color:#2a4058}
.p-box-shadow{box-shadow:0 10px 28px rgba(0,0,0,.35)}

.p-list{width:min(220px,92%);list-style:none;font-size:.8rem;display:grid;gap:8px;text-align:left}
.p-list li{position:relative;padding-left:18px;color:#c8d0e0}
.p-list-check li::before{content:"";position:absolute;left:0;top:6px;width:10px;height:5px;border-left:2px solid #3ee0c8;border-bottom:2px solid #3ee0c8;transform:rotate(-45deg)}
.p-list-num{counter-reset:n}
.p-list-num li{padding-left:28px}
.p-list-num li::before{content:counter(n);counter-increment:n;position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;background:#1a2130;border:1px solid #5bcbff;color:#5bcbff;font-size:.65rem;display:grid;place-items:center;font-weight:700}
.p-list-dot li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:50%;background:#5bcbff}

.p-quote{width:min(240px,92%);padding:12px 14px 12px 16px;border-left:3px solid #5bcbff;background:#10131a;font-size:.8rem;color:#8b90a3;font-style:italic}
.p-quote cite{display:block;margin-top:8px;font-style:normal;font-size:.72rem;color:#5bcbff}

.p-bubble{position:relative;max-width:200px;padding:10px 14px;border-radius:14px;background:#1a2130;border:1px solid #252a3a;font-size:.78rem}
.p-bubble::after{content:"";position:absolute;left:18px;bottom:-8px;border:8px solid transparent;border-top-color:#1a2130;border-bottom:0}
.p-bubble-r{border-radius:14px 14px 4px 14px;background:linear-gradient(120deg,#5bcbff,#5ba9ff);color:#061018;border:0}
.p-bubble-r::after{left:auto;right:14px;border-top-color:#5ba9ff}

.p-crumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.72rem;color:#8b90a3}
.p-crumb a{color:#5bcbff}
.p-crumb span{opacity:.5}

.p-ribbon{display:inline-block;padding:4px 12px;background:#5bcbff;color:#061018;font-size:.7rem;font-weight:700;position:relative}
.p-ribbon::before,.p-ribbon::after{content:"";position:absolute;top:0;border:11px solid #5bcbff}
.p-ribbon::before{left:-8px;border-left-color:transparent}
.p-ribbon::after{right:-8px;border-right-color:transparent}
.p-tag{display:inline-flex;padding:3px 10px;border-radius:999px;font-size:.7rem;font-weight:600;border:1px solid #2a4058;color:#5bcbff;background:rgba(91,185,255,.08)}
.p-tag-new{background:#5bcbff;color:#061018;border-color:transparent}
.p-sticky{width:120px;padding:14px 12px;background:#1a2130;border:1px solid #252a3a;font-size:.75rem;transform:rotate(-2deg);box-shadow:0 8px 20px rgba(0,0,0,.3)}
.p-sticky::before{content:"";position:absolute;top:-6px;left:50%;width:40px;height:10px;margin-left:-20px;background:rgba(91,185,255,.25);border-radius:2px}
.p-sticky{position:relative}

.p-marker{font-weight:700;background-image:linear-gradient(transparent 58%,rgba(91,185,255,.45) 58%)}
.p-cta{width:min(220px,92%);padding:16px;border-radius:14px;border:1px solid #252a3a;background:radial-gradient(120px 60px at 20% 0%,rgba(91,185,255,.18),transparent 70%),#12151f;text-align:center}
.p-cta p{font-size:.78rem;color:#8b90a3;margin:6px 0 12px}
.p-banner{width:min(240px,92%);padding:14px 16px;border-radius:12px;background:linear-gradient(120deg,#5bcbff,#3ee0c8);color:#061018;font-weight:700;font-size:.85rem;text-align:center}

.p-steps{display:flex;gap:8px;align-items:flex-start;font-size:.7rem;color:#8b90a3}
.p-steps i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#1a2130;border:1px solid #5bcbff;color:#5bcbff;font-style:normal;font-weight:700;margin:0 auto 4px}
.p-steps div{text-align:center;width:56px}
.p-timeline{width:min(200px,90%);border-left:2px solid #252a3a;padding-left:14px;display:grid;gap:12px;text-align:left;font-size:.75rem}
.p-timeline div{position:relative;color:#8b90a3}
.p-timeline div::before{content:"";position:absolute;left:-19px;top:4px;width:8px;height:8px;border-radius:50%;background:#5bcbff}
.p-timeline strong{display:block;color:#eef0f6;font-size:.78rem}

.p-pager{display:flex;gap:6px;align-items:center}
.p-pager a,.p-pager span{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;border:1px solid #252a3a;font-size:.75rem;color:#8b90a3}
.p-pager .on{background:linear-gradient(120deg,#5bcbff,#5ba9ff);color:#061018;border-color:transparent;font-weight:700}

.p-toc{width:min(200px,90%);padding:10px 12px;border-radius:10px;border:1px solid #252a3a;background:#10131a;font-size:.72rem;text-align:left;color:#8b90a3;display:grid;gap:6px}
.p-toc a{color:#5bcbff}

.p-price{width:min(160px,90%);padding:14px;border-radius:14px;border:1px solid #252a3a;background:#12151f;text-align:center}
.p-price .yen{font-size:1.4rem;font-weight:700;background:linear-gradient(120deg,#5bcbff,#3ee0c8);-webkit-background-clip:text;background-clip:text;color:transparent}
.p-price p{font-size:.72rem;color:#8b90a3;margin-top:4px}

.p-table{width:min(240px,94%);border-collapse:collapse;font-size:.72rem}
.p-table th,.p-table td{border:1px solid #252a3a;padding:6px 8px;text-align:center}
.p-table th{background:#1a2130;color:#5bcbff}
.p-table td{color:#c8d0e0}

.btn-flat{padding:10px 18px;border-radius:8px;background:#5bcbff;color:#061018;font-weight:700;font-size:.85rem}
.btn-outline{padding:10px 18px;border-radius:8px;border:1px solid #5bcbff;color:#5bcbff;font-weight:700;font-size:.85rem;background:transparent}
.btn-ghost{padding:10px 18px;border-radius:8px;color:#eef0f6;font-weight:600;font-size:.85rem;background:rgba(255,255,255,.06)}
.btn-3d{padding:10px 18px;border-radius:8px;background:#5bcbff;color:#061018;font-weight:700;font-size:.85rem;box-shadow:0 4px 0 #2a7a9e;transition:transform .12s,box-shadow .12s}
.btn-3d:active{transform:translateY(3px);box-shadow:0 1px 0 #2a7a9e}
.btn-neon{padding:10px 18px;border-radius:999px;border:1px solid #5bcbff;color:#5bcbff;font-weight:700;font-size:.85rem;box-shadow:0 0 12px rgba(91,185,255,.45),inset 0 0 12px rgba(91,185,255,.12)}
.btn-slide{position:relative;padding:10px 18px;border-radius:8px;overflow:hidden;color:#eef0f6;font-weight:700;font-size:.85rem;border:1px solid #252a3a;z-index:0}
.btn-slide::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,#5bcbff,#5ba9ff);transform:translateX(-101%);transition:transform .35s cubic-bezier(.22,1,.36,1);z-index:-1}
.preview:hover .btn-slide::before{transform:none}
.preview:hover .btn-slide{color:#061018;border-color:transparent}
.btn-pulse{padding:10px 18px;border-radius:999px;background:#5bcbff;color:#061018;font-weight:700;font-size:.85rem;animation:kf-btn-pulse 1.6s ease-out infinite}
@keyframes kf-btn-pulse{0%{box-shadow:0 0 0 0 rgba(91,185,255,.55)}70%{box-shadow:0 0 0 14px rgba(91,185,255,0)}100%{box-shadow:0 0 0 0 rgba(91,185,255,0)}}
.btn-arrow{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:8px;background:linear-gradient(120deg,#5bcbff,#5ba9ff);color:#061018;font-weight:700;font-size:.85rem}
.btn-arrow i{display:inline-block;width:8px;height:8px;border-right:2px solid #061018;border-top:2px solid #061018;transform:rotate(45deg);transition:transform .25s}
.preview:hover .btn-arrow i{transform:rotate(45deg) translate(2px,-2px)}
.btn-ripple{position:relative;overflow:hidden;padding:10px 18px;border-radius:8px;background:#1a2130;border:1px solid #5bcbff;color:#5bcbff;font-weight:700;font-size:.85rem}
.btn-ripple::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(91,185,255,.35),transparent 40%);opacity:0;transition:opacity .4s}
.preview:hover .btn-ripple::after{opacity:1}

.form-search{display:flex;width:min(220px,92%);border:1px solid #252a3a;border-radius:10px;overflow:hidden;background:#10131a}
.form-search input{flex:1;padding:8px 10px;border:0;background:transparent;color:#eef0f6;font:inherit;font-size:.8rem;outline:none}
.form-search button{padding:8px 12px;background:#5bcbff;color:#061018;font-weight:700;font-size:.75rem}
.form-select{appearance:none;width:min(200px,90%);padding:8px 32px 8px 12px;border-radius:10px;border:1px solid #252a3a;background:#10131a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%235bcbff' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E") no-repeat right 12px center;color:#eef0f6;font:inherit;font-size:.8rem}
.form-check,.form-radio{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;cursor:pointer;color:#c8d0e0}
.form-check input,.form-radio input{accent-color:#5bcbff;width:16px;height:16px}
.form-check-draw{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;cursor:pointer;color:#c8d0e0}
.form-check-draw input{position:absolute;opacity:0;width:0;height:0}
.form-check-draw i{width:18px;height:18px;border-radius:4px;border:1px solid #5bcbff;display:grid;place-items:center;background:#10131a}
.form-check-draw i::after{content:"";width:10px;height:5px;border-left:2px solid #5bcbff;border-bottom:2px solid #5bcbff;transform:rotate(-45deg) scaleX(0);transform-origin:left;transition:transform .2s}
.form-check-draw input:checked + i{background:rgba(91,185,255,.15)}
.form-check-draw input:checked + i::after{transform:rotate(-45deg) scaleX(1)}

.card-flip{width:140px;height:90px;perspective:600px}
.card-flip .inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.22,1,.36,1)}
.preview:hover .card-flip .inner{transform:rotateY(180deg)}
.card-flip .face{position:absolute;inset:0;backface-visibility:hidden;border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:.85rem}
.card-flip .front{background:linear-gradient(120deg,#5bcbff,#5ba9ff);color:#061018}
.card-flip .back{background:#1a2130;border:1px solid #252a3a;color:#eef0f6;transform:rotateY(180deg)}
.card-media{width:min(200px,90%);border-radius:12px;overflow:hidden;border:1px solid #252a3a;background:#12151f;text-align:left}
.card-media .ph{height:72px;background:linear-gradient(120deg,#5bcbff,#3ee0c8)}
.card-media .body{padding:10px 12px}
.card-media strong{display:block;font-size:.82rem}
.card-media p{font-size:.72rem;color:#8b90a3;margin-top:4px}

.a-stagger span{display:inline-block;opacity:0;transform:translateY(12px);animation:kf-fade-in-up .5s ease forwards}
.a-stagger span:nth-child(1){animation-delay:.05s}
.a-stagger span:nth-child(2){animation-delay:.12s}
.a-stagger span:nth-child(3){animation-delay:.19s}
.a-stagger span:nth-child(4){animation-delay:.26s}
.a-stagger span:nth-child(5){animation-delay:.33s}
.a-text-slide{overflow:hidden;display:inline-block}
.a-text-slide span{display:inline-block;animation:kf-text-slide .7s cubic-bezier(.22,1,.36,1) both}
@keyframes kf-text-slide{from{transform:translateY(110%)}to{transform:none}}
.a-curtain{position:relative;display:inline-block;padding:8px 14px;font-weight:700;overflow:hidden}
.a-curtain::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,#5bcbff,#5ba9ff);transform:translateY(100%);animation:kf-curtain .7s cubic-bezier(.22,1,.36,1) both;z-index:-1}
@keyframes kf-curtain{to{transform:none}}
.a-link-draw{position:relative;font-weight:600;color:#eef0f6}
.a-link-draw::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;background:#5bcbff;transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.preview:hover .a-link-draw::after{transform:scaleX(1)}
.bg-dots{width:120px;height:72px;border-radius:12px;background-color:#10131a;background-image:radial-gradient(#5bcbff 1px,transparent 1px);background-size:10px 10px}
.bg-stripes{width:120px;height:72px;border-radius:12px;background:repeating-linear-gradient(-45deg,#10131a,#10131a 8px,#1a2130 8px,#1a2130 16px)}
.bg-wave{width:140px;height:72px;border-radius:12px;background:linear-gradient(180deg,#10131a 40%,transparent 40%),radial-gradient(circle at 10% 40%,#5bcbff 12px,transparent 13px),radial-gradient(circle at 30% 40%,#5bcbff 12px,transparent 13px),radial-gradient(circle at 50% 40%,#5bcbff 12px,transparent 13px),radial-gradient(circle at 70% 40%,#5bcbff 12px,transparent 13px),radial-gradient(circle at 90% 40%,#5bcbff 12px,transparent 13px),#10131a;background-size:100% 100%,40px 40px,40px 40px,40px 40px,40px 40px,40px 40px;opacity:.9}
.h-img-zoom{width:120px;height:72px;border-radius:12px;overflow:hidden}
.h-img-zoom i{display:block;width:100%;height:100%;background:linear-gradient(120deg,#5bcbff,#3ee0c8);transition:transform .45s ease}
.preview:hover .h-img-zoom i{transform:scale(1.12)}
.a-ripple-dot{width:14px;height:14px;border-radius:50%;background:#5bcbff;position:relative}
.a-ripple-dot::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #5bcbff;animation:kf-ripple-dot 1.4s ease-out infinite}
@keyframes kf-ripple-dot{to{transform:scale(3.2);opacity:0}}

/* ===== W3Schools-style base / layout / W3.CSS ===== */
.w-demo{font-size:.78rem;color:#c8d0e0;text-align:left;width:min(240px,94%)}
.w-box{padding:10px 12px;border:1px solid #252a3a;border-radius:10px;background:#12151f}
.w-row{display:flex;gap:6px;align-items:stretch}
.w-row > *{flex:1;min-height:36px;display:grid;place-items:center;border-radius:8px;background:#1a2130;font-size:.7rem}
.w-sel{padding:6px 10px;border-radius:8px;border:1px dashed #5bcbff;color:#5bcbff;font-size:.75rem}
.w-id{padding:6px 10px;border-radius:8px;border:1px solid #3ee0c8;color:#3ee0c8}
.w-bg-color{width:120px;height:56px;border-radius:10px;background:#5bcbff}
.w-bg-img{width:140px;height:64px;border-radius:10px;background:linear-gradient(120deg,#5bcbff,#3ee0c8) center/cover}
.w-bg-attach{width:140px;height:64px;border-radius:10px;background:radial-gradient(circle at 30% 30%,#5bcbff 0 8px,transparent 9px) 0 0/24px 24px,#10131a}
.w-margin{background:#1a2130;padding:8px}
.w-margin > i{display:block;background:rgba(91,185,255,.2);padding:10px;border:1px dashed #5bcbff}
.w-margin > i b{display:block;background:#5bcbff;color:#061018;padding:8px;text-align:center;font-style:normal}
.w-pad{background:#5bcbff;padding:14px;border-radius:8px;color:#061018;font-weight:700}
.w-pad span{display:block;background:#061018;color:#eef0f6;padding:8px;text-align:center;border-radius:4px;font-weight:600}
.w-boxmodel{width:160px;border:8px solid #3a4158;padding:12px;margin:8px auto;background:#5bcbff;color:#061018;font-weight:700;text-align:center;font-size:.72rem}
.w-outline{outline:2px solid #5bcbff;outline-offset:4px;padding:10px 14px;border-radius:6px}
.w-w-h{width:140px;height:48px;background:#1a2130;border:1px solid #5bcbff;display:grid;place-items:center;font-size:.72rem}
.w-minmax{width:100%;max-width:160px;min-height:40px;background:#1a2130;border:1px solid #252a3a;padding:8px;font-size:.72rem}
.w-text-align{width:180px;text-align:center;border:1px solid #252a3a;padding:8px;border-radius:8px}
.w-text-decor{text-decoration:underline wavy #5bcbff}
.w-text-trans{text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.w-text-shadow{font-size:1.1rem;font-weight:700;text-shadow:0 0 12px rgba(91,185,255,.7)}
.w-font{font-family:Georgia,"Times New Roman",serif;font-size:1rem;font-weight:700;font-style:italic}
.w-link a{color:#5bcbff;transition:color .2s}
.preview:hover .w-link a{color:#3ee0c8;text-decoration:underline}
.w-display{display:inline-block;padding:8px 12px;background:#5bcbff;color:#061018;font-weight:700;margin:2px}
.w-hide-demo .gone{display:none}
.w-overflow{width:140px;height:56px;overflow:auto;border:1px solid #252a3a;padding:6px;font-size:.7rem;background:#10131a}
.w-float::after{content:"";display:table;clear:both}
.w-float i{float:left;width:36px;height:36px;border-radius:8px;background:#5bcbff;margin-right:8px}
.w-pos{position:relative;width:160px;height:70px;border:1px solid #252a3a;background:#10131a}
.w-pos span{position:absolute;right:8px;bottom:8px;padding:4px 8px;background:#5bcbff;color:#061018;font-size:.7rem;font-weight:700;border-radius:6px}
.w-z{position:relative;width:120px;height:70px}
.w-z i,.w-z b{position:absolute;width:64px;height:48px;border-radius:8px;display:grid;place-items:center;font-style:normal;font-size:.7rem;font-weight:700;color:#061018}
.w-z i{left:0;top:10px;background:#5bcbff;z-index:1}
.w-z b{left:28px;top:0;background:#3ee0c8;z-index:2}
.w-units{display:flex;gap:6px;align-items:flex-end;height:64px}
.w-units i{display:block;width:28px;background:linear-gradient(180deg,#5bcbff,#5ba9ff);border-radius:4px 4px 0 0}
.w-units i:nth-child(1){height:40%}
.w-units i:nth-child(2){height:70%}
.w-units i:nth-child(3){height:100%}
.w-calc{width:calc(100% - 40px);max-width:180px;padding:10px;background:#1a2130;border:1px solid #5bcbff;border-radius:8px;text-align:center}
.w-var{--accent:#5bcbff;padding:10px 14px;border-radius:8px;border:1px solid var(--accent);color:var(--accent);font-weight:700}
.w-imp{color:#5bcbff !important;font-weight:700}
.w-table{width:100%;border-collapse:collapse;font-size:.7rem}
.w-table th,.w-table td{border:1px solid #252a3a;padding:5px 7px}
.w-table th{background:#1a2130;color:#5bcbff}
.w-pseudo a{color:#8b90a3}
.preview:hover .w-pseudo a{color:#5bcbff}
.w-before::before{content:"★ ";color:#5bcbff}
.w-attr input[type="text"]{border:1px solid #5bcbff;background:#10131a;color:#eef0f6;padding:6px 8px;border-radius:6px;width:140px}
.w-combo div > span{color:#5bcbff}
.w-counter{counter-reset:sec;list-style:none;padding:0;margin:0;display:grid;gap:4px}
.w-counter li::before{counter-increment:sec;content:counters(sec,".") ". ";color:#5bcbff;font-weight:700}
.w-inline-block span{display:inline-block;width:48px;height:36px;background:#5bcbff;color:#061018;margin:2px;text-align:center;line-height:36px;font-weight:700;border-radius:6px}
.w-opacity{opacity:.45;padding:10px 14px;background:#5bcbff;color:#061018;font-weight:700;border-radius:8px}
.w-filter{width:100px;height:56px;border-radius:10px;background:linear-gradient(120deg,#5bcbff,#3ee0c8);filter:grayscale(.3) contrast(1.1)}
.preview:hover .w-filter{filter:none}
.w-object{width:120px;height:64px;object-fit:cover;border-radius:10px;background:linear-gradient(120deg,#5bcbff 40%,#3ee0c8 40%);display:block}
.w-cols{column-count:2;column-gap:10px;font-size:.7rem;width:200px}
.w-cols p{margin:0 0 6px;break-inside:avoid}
.w-shadow{padding:14px 18px;border-radius:12px;background:#12151f;box-shadow:0 12px 28px rgba(91,185,255,.25)}
.w-trans{padding:10px 16px;border-radius:8px;background:#1a2130;border:1px solid #252a3a;transition:background .35s,transform .35s,border-color .35s}
.preview:hover .w-trans{background:#5bcbff;color:#061018;transform:translateY(-3px);border-color:transparent;font-weight:700}
.w-tf{width:64px;height:64px;border-radius:12px;background:linear-gradient(120deg,#5bcbff,#5ba9ff);transition:transform .4s}
.preview:hover .w-tf-rotate{transform:rotate(25deg)}
.preview:hover .w-tf-scale{transform:scale(1.15)}
.preview:hover .w-tf-skew{transform:skewX(-12deg)}
.preview:hover .w-tf-3d{transform:perspective(400px) rotateY(28deg)}
.w-flex{display:flex;gap:6px;width:200px;justify-content:space-between;align-items:center}
.w-flex > i{flex:0 0 auto;width:36px;height:36px;border-radius:8px;background:#5bcbff;display:grid;place-items:center;font-style:normal;color:#061018;font-weight:700;font-size:.7rem}
.w-flex-col{display:flex;flex-direction:column;gap:4px;width:120px}
.w-flex-col i{height:22px;border-radius:6px;background:#1a2130;border:1px solid #5bcbff}
.w-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;width:180px}
.w-grid > i{height:32px;border-radius:6px;background:#5bcbff;opacity:.85;display:grid;place-items:center;font-style:normal;color:#061018;font-size:.65rem;font-weight:700}
.w-grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;width:200px}
.w-grid-12 .a{grid-column:span 8;height:28px;background:#5bcbff;border-radius:4px}
.w-grid-12 .b{grid-column:span 4;height:28px;background:#3ee0c8;border-radius:4px}
.w-align-c{display:flex;justify-content:center;align-items:center;width:160px;height:64px;border:1px dashed #252a3a}
.w-align-c span{padding:6px 10px;background:#5bcbff;color:#061018;font-weight:700;border-radius:6px;font-size:.72rem}
.w-sticky-demo{width:160px;height:72px;overflow:auto;border:1px solid #252a3a;border-radius:8px;background:#10131a}
.w-sticky-demo header{position:sticky;top:0;background:#5bcbff;color:#061018;padding:4px 8px;font-size:.7rem;font-weight:700}
.w-sticky-demo p{padding:6px 8px;font-size:.68rem;color:#8b90a3;margin:0}
.w-mq{padding:8px 12px;border-radius:8px;border:1px solid #5bcbff;font-size:.72rem}
.w-mq::after{content:" desktop+ ";color:#5bcbff}
@media (max-width:900px){.w-mq::after{content:" tablet/mobile ";color:#3ee0c8}}
.w-drop{position:relative;display:inline-block}
.w-drop > span{padding:8px 12px;background:#1a2130;border:1px solid #252a3a;border-radius:8px;cursor:pointer;font-size:.78rem}
.w-drop ul{position:absolute;left:0;top:110%;min-width:120px;margin:0;padding:6px;list-style:none;background:#12151f;border:1px solid #252a3a;border-radius:8px;opacity:0;visibility:hidden;transform:translateY(4px);transition:.2s}
.w-drop:hover ul,.w-drop:focus-within ul{opacity:1;visibility:visible;transform:none}
.w-drop li{padding:6px 8px;font-size:.72rem;color:#8b90a3;border-radius:6px}
.w-drop li:hover{background:#1a2130;color:#eef0f6}
.w-nav{display:flex;gap:2px;background:#10131a;border:1px solid #252a3a;border-radius:8px;padding:4px;font-size:.72rem}
.w-nav a{padding:6px 10px;border-radius:6px;color:#8b90a3}
.w-nav a.on{background:#5bcbff;color:#061018;font-weight:700}
.w-form input{width:160px;padding:8px 10px;border-radius:8px;border:1px solid #252a3a;background:#10131a;color:#eef0f6;outline:none;transition:border-color .2s,box-shadow .2s}
.w-form input:focus{border-color:#5bcbff;box-shadow:0 0 0 3px rgba(91,185,255,.2)}
.w-gallery{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;width:160px}
.w-gallery i{display:block;aspect-ratio:1;border-radius:6px;background:linear-gradient(120deg,#5bcbff,#5ba9ff)}
.w-gallery i:nth-child(2){background:linear-gradient(120deg,#3ee0c8,#5bcbff)}
.w-gallery i:nth-child(3){background:linear-gradient(120deg,#5ba9ff,#3ee0c8)}
.w-sprite{width:48px;height:48px;border-radius:8px;background:linear-gradient(#5bcbff 50%,#3ee0c8 50%);background-size:100% 200%;background-position:0 0;transition:background-position .2s}
.preview:hover .w-sprite{background-position:0 100%}
.w-ui-resize{width:120px;height:56px;resize:both;overflow:auto;border:1px solid #5bcbff;border-radius:8px;padding:6px;font-size:.7rem;background:#10131a}
.w-aspect{width:120px;aspect-ratio:16/9;border-radius:10px;background:linear-gradient(120deg,#5bcbff,#3ee0c8);display:grid;place-items:center;color:#061018;font-weight:700;font-size:.7rem}

/* W3.CSS-inspired notes / panels */
.w3-panel{width:min(240px,94%);padding:10px 12px;border-radius:8px;font-size:.75rem;text-align:left;background:#1a2130;border:1px solid #252a3a;color:#c8d0e0}
.w3-panel strong{display:block;margin-bottom:4px;color:#eef0f6}
.w3-note{background:#1a2130;border-left:4px solid #8b90a3}
.w3-info{background:rgba(91,185,255,.1);border-left:4px solid #5bcbff}
.w3-success{background:rgba(62,224,200,.1);border-left:4px solid #3ee0c8}
.w3-warning{background:rgba(255,180,84,.1);border-left:4px solid #ffb454}
.w3-danger{background:rgba(255,90,90,.1);border-left:4px solid #ff5a5a}
.w3-panel-pale{background:#151824;border:1px solid #2a3348}
.w3-panel-round{border-radius:14px}
.w3-panel-bars{border-left:4px solid #5bcbff;border-right:4px solid #5bcbff}
.w3-panel-topbot{border-top:3px solid #ffb454;border-bottom:3px solid #ffb454;background:rgba(255,180,84,.08)}
.w3-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#5bcbff;color:#061018;font-size:.7rem;font-weight:700}
.w3-tag{display:inline-block;padding:3px 8px;background:#5bcbff;color:#061018;font-size:.7rem;font-weight:700;border-radius:3px}
.w3-bar{display:flex;width:min(220px,92%);background:#10131a;border:1px solid #252a3a;border-radius:8px;overflow:hidden;font-size:.72rem}
.w3-bar a{flex:1;padding:8px;text-align:center;color:#8b90a3}
.w3-bar a.on{background:#5bcbff;color:#061018;font-weight:700}
.w3-container{width:min(220px,92%);padding:12px;background:#12151f;border:1px solid #252a3a;border-radius:10px;font-size:.75rem}
.w3-card{width:min(180px,90%);padding:12px;background:#12151f;border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.35);font-size:.75rem}
.w3-progress{width:160px;height:10px;background:#1a1f2e;border-radius:99px;overflow:hidden}
.w3-progress i{display:block;height:100%;width:65%;background:linear-gradient(90deg,#5bcbff,#3ee0c8)}
.w3-alert{width:min(220px,92%);padding:10px 12px;border-radius:8px;background:rgba(91,185,255,.12);border:1px solid #5bcbff;font-size:.75rem;text-align:left}
.w3-animate{animation:w3-top .55s ease both}
@keyframes w3-top{from{transform:translateY(-16px);opacity:0}to{transform:none;opacity:1}}
.w3-round{border-radius:12px}
.w3-round-xlarge{border-radius:20px}
.w3-border{border:1px solid #5bcbff}
.w3-margin{margin:8px}
.w3-padding{padding:12px}
.w3-ul{list-style:none;padding:0;margin:0;width:min(200px,90%);border:1px solid #252a3a;border-radius:8px;overflow:hidden;font-size:.75rem}
.w3-ul li{padding:8px 10px;border-bottom:1px solid #252a3a;background:#12151f}
.w3-ul li:last-child{border-bottom:0}
.w3-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.7rem;padding:8px 10px;background:#0a0c12;border-left:3px solid #5bcbff;border-radius:0 8px 8px 0;color:#c8d0e0;text-align:left;width:min(220px,92%)}
.w3-quote{font-size:.85rem;font-style:italic;color:#eef0f6}
.w3-quote::before{content:"“";color:#5bcbff;font-size:1.4rem;margin-right:4px}
.w3-sidebar-demo{position:relative;width:180px;height:70px;border:1px solid #252a3a;border-radius:8px;overflow:hidden;background:#0a0b10}
.w3-sidebar-demo aside{position:absolute;left:0;top:0;bottom:0;width:42%;background:#12151f;border-right:1px solid #252a3a;display:grid;place-items:center;font-size:.7rem}
.w3-input{width:160px;padding:8px 10px;border:none;border-bottom:1px solid #5bcbff;background:transparent;color:#eef0f6;outline:none}
.w3-btn{padding:8px 14px;background:#5bcbff;color:#061018;font-weight:700;border-radius:4px;font-size:.78rem;border:0}
.w3-btn-block{display:block;width:min(180px,90%);text-align:center}
.w3-btn-outline{background:transparent;border:1px solid #5bcbff;color:#5bcbff}
.w3-ripple{position:relative;overflow:hidden}
.w3-ripple::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.35),transparent 50%);opacity:0;transition:opacity .35s}
.preview:hover .w3-ripple::after{opacity:1}
.w3-display-container{position:relative;width:160px;height:70px;background:#10131a;border:1px solid #252a3a;border-radius:8px}
.w3-display-middle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:4px 8px;background:#5bcbff;color:#061018;font-size:.7rem;font-weight:700;border-radius:4px}
.w3-row-padding{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:180px}
.w3-row-padding > div{padding:10px;background:#12151f;border:1px solid #252a3a;border-radius:8px;font-size:.7rem;text-align:center}
.w3-responsive{width:180px;overflow-x:auto;border:1px solid #252a3a;border-radius:8px}
.w3-responsive table{width:260px;border-collapse:collapse;font-size:.68rem}
.w3-responsive td{border:1px solid #252a3a;padding:4px 6px;white-space:nowrap}
.w3-tooltip{position:relative;border-bottom:1px dotted #5bcbff;cursor:help;font-size:.8rem}
.w3-tooltip .text{visibility:hidden;opacity:0;position:absolute;left:50%;bottom:125%;transform:translateX(-50%);background:#1a2130;border:1px solid #252a3a;padding:4px 8px;border-radius:6px;font-size:.68rem;white-space:nowrap;transition:.2s}
.w3-tooltip:hover .text{visibility:visible;opacity:1}

/* ===== Web UI parts (DDP original) ===== */
.bk{position:relative;max-width:200px;padding:10px 14px;border-radius:14px;background:#1a2130;border:1px solid #252a3a;font-size:.78rem;text-align:left}
.bk::after{content:"";position:absolute;width:0;height:0;border:8px solid transparent}
.bk-l::after{left:16px;bottom:-12px;border-top-color:#1a2130;border-bottom:0}
.bk-r{background:linear-gradient(120deg,#5bcbff,#5ba9ff);color:#061018;border:0;border-radius:14px 14px 4px 14px}
.bk-r::after{right:14px;left:auto;bottom:-10px;border-top-color:#5ba9ff;border-bottom:0}
.bk-t::after{left:50%;bottom:auto;top:-12px;margin-left:-8px;border-bottom-color:#1a2130;border-top:0}
.bk-b::after{left:50%;top:auto;bottom:-12px;margin-left:-8px;border-top-color:#1a2130;border-bottom:0}
.bk-think{border-radius:20px}
.bk-think::before{content:"";position:absolute;left:18px;bottom:-18px;width:10px;height:10px;border-radius:50%;background:#1a2130;border:1px solid #252a3a}
.bk-think::after{left:10px;bottom:-28px;width:6px;height:6px;border-radius:50%;background:#1a2130;border:1px solid #252a3a;border-width:1px}
.bk-flat{border-radius:4px;background:#12151f}
.bk-flat::after{left:12px;bottom:-8px;border-top-color:#12151f;border-width:8px 6px 0 6px}
.bk-border{background:transparent;border:2px solid #5bcbff;color:#5bcbff}
.bk-border::after{left:16px;bottom:-10px;border-top-color:#5bcbff;border-bottom:0;filter:drop-shadow(0 2px 0 #07080c)}
.bk-shadow{box-shadow:0 10px 24px rgba(0,0,0,.35)}
.bk-shadow::after{left:20px;bottom:-10px;border-top-color:#1a2130}
.bk-tail-l{border-radius:14px 14px 14px 4px}
.bk-tail-l::after{left:-6px;bottom:10px;border-right-color:#1a2130;border-left:0;border-top-color:transparent;border-bottom-color:transparent}
.bk-pair{display:grid;gap:10px;width:min(220px,92%)}
.bk-pair .me{justify-self:end}

.fm{display:grid;gap:8px;width:min(220px,92%);text-align:left}
.fm label{font-size:.72rem;color:#8b90a3}
.fm-text,.fm-area{width:100%;padding:8px 10px;border-radius:8px;border:1px solid #252a3a;background:#10131a;color:#eef0f6;font:inherit;font-size:.8rem;outline:none}
.fm-text:focus,.fm-area:focus{border-color:#5bcbff;box-shadow:0 0 0 3px rgba(91,185,255,.15)}
.fm-area{min-height:64px;resize:vertical}
.fm-under{border:0;border-bottom:1px solid #5bcbff;border-radius:0;background:transparent}
.fm-search{display:flex;border:1px solid #252a3a;border-radius:999px;overflow:hidden;background:#10131a}
.fm-search input{flex:1;border:0;background:transparent;padding:8px 12px;color:#eef0f6;font:inherit;font-size:.8rem;outline:none}
.fm-search button{padding:8px 14px;background:#5bcbff;color:#061018;font-weight:700;font-size:.75rem;border:0}
.fm-search-box{display:flex;border:1px solid #252a3a;border-radius:10px;overflow:hidden}
.fm-search-box input{flex:1;border:0;background:#10131a;padding:8px 10px;color:#eef0f6;font:inherit;font-size:.8rem;outline:none}
.fm-search-box button{padding:8px 12px;background:#1a2130;color:#5bcbff;border:0;font-size:.75rem}
.fm-select{width:100%;appearance:none;padding:8px 32px 8px 12px;border-radius:10px;border:1px solid #252a3a;background:#10131a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%235bcbff' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E") no-repeat right 12px center;color:#eef0f6;font:inherit;font-size:.8rem}
.fm-select-line{border-radius:0;border:0;border-bottom:1px solid #5bcbff;background-color:transparent}
.fm-check2{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;cursor:pointer;color:#c8d0e0}
.fm-check2 input{accent-color:#5bcbff;width:16px;height:16px}
.fm-check3{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;cursor:pointer;color:#c8d0e0;position:relative}
.fm-check3 input{position:absolute;opacity:0}
.fm-check3 i{width:18px;height:18px;border-radius:4px;border:1px solid #5bcbff;background:#10131a}
.fm-check3 input:checked + i{background:#5bcbff}
.fm-check3 input:checked + i::after{content:"";display:block;width:10px;height:5px;margin:4px 0 0 3px;border-left:2px solid #061018;border-bottom:2px solid #061018;transform:rotate(-45deg)}
.fm-radio2{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;cursor:pointer;color:#c8d0e0;margin-right:10px}
.fm-radio2 input{accent-color:#5bcbff}
.fm-radio3{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;cursor:pointer;color:#c8d0e0;margin-right:8px}
.fm-radio3 input{position:absolute;opacity:0}
.fm-radio3 i{width:16px;height:16px;border-radius:50%;border:1px solid #5bcbff;display:grid;place-items:center}
.fm-radio3 input:checked + i::after{content:"";width:8px;height:8px;border-radius:50%;background:#5bcbff}
.tg2{position:relative;display:inline-block;width:52px;height:28px;cursor:pointer}
.tg2 input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}
.tg2 span{position:absolute;inset:0;border-radius:999px;background:#3a4158;border:1px solid #5bcbff;pointer-events:none;transition:.25s}
.tg2 span::before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;border-radius:50%;background:#eef0f6;transition:transform .25s}
.tg2 input:checked + span{background:#5bcbff;border-color:#5bcbff}
.tg2 input:checked + span::before{transform:translateX(24px)}
.tg3{position:relative;display:inline-flex;width:64px;height:30px;border-radius:8px;background:#10131a;border:1px solid #252a3a;cursor:pointer;overflow:hidden}
.tg3 input{position:absolute;inset:0;opacity:0;cursor:pointer;z-index:2}
.tg3 b{flex:1;display:grid;place-items:center;font-size:.65rem;color:#8b90a3;position:relative;z-index:1;pointer-events:none}
.tg3 i{position:absolute;top:2px;bottom:2px;left:2px;width:calc(50% - 2px);border-radius:6px;background:#5bcbff;transition:transform .25s;pointer-events:none}
.tg3 input:checked + i{transform:translateX(100%)}
.tg3 input:checked ~ b.on,.tg3 input:not(:checked) ~ b.off{color:#061018;font-weight:700}

.hd2{font-weight:700;font-size:.95rem;padding-bottom:6px;background:linear-gradient(transparent 60%,rgba(91,185,255,.35) 60%)}
.hd3{font-weight:700;display:flex;align-items:center;gap:8px}
.hd3::before{content:"";width:4px;height:1em;background:#5bcbff;border-radius:2px}
.hd4{font-weight:700;text-align:center;position:relative;padding:0 12px}
.hd4::before,.hd4::after{content:"";position:absolute;top:50%;width:28px;height:1px;background:#5bcbff}
.hd4::before{right:100%}
.hd4::after{left:100%}
.hd5{font-weight:700;padding:8px 12px;border-top:2px solid #5bcbff;border-bottom:2px solid #5bcbff}
.hd6{font-weight:700;padding:6px 0 6px 12px;border-left:4px double #5bcbff}
.hd7{display:inline-block;font-weight:700;padding:6px 14px;background:#1a2130;border:1px solid #5bcbff;transform:skewX(-8deg)}
.hd7 span{display:inline-block;transform:skewX(8deg)}

.bx2{width:min(230px,92%);padding:12px;border-radius:12px;font-size:.75rem;text-align:left;color:#8b90a3;background:#12151f;border:1px solid #252a3a}
.bx2 strong{display:block;color:#eef0f6;margin-bottom:4px}
.bx-dash{border-style:dashed}
.bx-title{border:0;background:#1a2130;position:relative;margin-top:10px}
.bx-title strong{position:absolute;top:-10px;left:12px;background:#1a2130;padding:0 6px;font-size:.72rem;color:#5bcbff}
.bx-paper{background:#151824;box-shadow:0 1px 0 #252a3a,0 8px 20px rgba(0,0,0,.25)}
.bx-grad{border:0;background:linear-gradient(120deg,rgba(91,185,255,.15),rgba(62,224,200,.1));border:1px solid #2a4058}

.ls{width:min(210px,92%);list-style:none;margin:0;padding:0;display:grid;gap:6px;text-align:left;font-size:.78rem}
.ls li{padding-left:16px;position:relative;color:#c8d0e0}
.ls-arrow li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-right:2px solid #5bcbff;border-top:2px solid #5bcbff;transform:rotate(45deg)}
.ls-line li{padding-left:12px;border-left:2px solid #5bcbff}
.ls-card{gap:8px}
.ls-card li{padding:8px 10px;border:1px solid #252a3a;border-radius:8px;background:#12151f}

.ld-spin2{width:36px;height:36px;border-radius:50%;border:3px solid #252a3a;border-top-color:#5bcbff;animation:ld-rot 0.8s linear infinite}
.ld-spin3{width:36px;height:36px;border-radius:50%;border:3px solid transparent;border-top-color:#5bcbff;border-bottom-color:#3ee0c8;animation:ld-rot 0.9s linear infinite}
@keyframes ld-rot{to{transform:rotate(360deg)}}
.ld-bars{display:flex;gap:4px;align-items:flex-end;height:28px}
.ld-bars i{width:5px;height:100%;background:#5bcbff;border-radius:2px;animation:ld-bar .8s ease-in-out infinite}
.ld-bars i:nth-child(2){animation-delay:.1s}
.ld-bars i:nth-child(3){animation-delay:.2s}
.ld-bars i:nth-child(4){animation-delay:.3s}
@keyframes ld-bar{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
.ld-pulse{width:28px;height:28px;border-radius:50%;background:#5bcbff;animation:ld-pulse 1s ease-in-out infinite}
@keyframes ld-pulse{0%,100%{transform:scale(.7);opacity:.5}50%{transform:scale(1);opacity:1}}
.ld-dots{display:flex;gap:6px}
.ld-dots i{width:8px;height:8px;border-radius:50%;background:#5bcbff;animation:ld-dot 1s infinite}
.ld-dots i:nth-child(2){animation-delay:.15s}
.ld-dots i:nth-child(3){animation-delay:.3s}
@keyframes ld-dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-6px)}}

.qa{width:min(240px,94%);border:1px solid #252a3a;border-radius:12px;overflow:hidden;text-align:left;font-size:.78rem;background:#12151f}
.qa details{border-bottom:1px solid #252a3a}
.qa details:last-child{border-bottom:0}
.qa summary{padding:10px 12px;cursor:pointer;font-weight:700;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa p{padding:0 12px 10px;color:#8b90a3;margin:0}
.acc2{width:min(240px,94%);text-align:left;font-size:.78rem}
.acc2 details{margin-bottom:6px;border:1px solid #252a3a;border-radius:10px;background:#12151f;padding:8px 10px}
.acc2 summary{cursor:pointer;font-weight:700;list-style:none}
.acc2 p{margin:6px 0 0;color:#8b90a3}

.crumb2{display:flex;flex-wrap:wrap;gap:0;font-size:.72rem;align-items:center}
.crumb2 a{color:#5bcbff;padding:4px 8px;background:#1a2130;border-radius:6px;margin-right:6px}
.crumb2 span{color:#8b90a3}
.crumb3{display:flex;gap:0;font-size:.72rem}
.crumb3 a,.crumb3 span{padding:6px 12px;background:#1a2130;color:#8b90a3;position:relative}
.crumb3 a{color:#5bcbff}
.crumb3 a:not(:last-child)::after,.crumb3 span:not(:last-child)::after{content:"";position:absolute;right:-6px;top:50%;transform:translateY(-50%) rotate(45deg);width:10px;height:10px;border-right:1px solid #252a3a;border-top:1px solid #252a3a;background:#1a2130;z-index:1}

.tip2{position:relative;font-size:.8rem;border-bottom:1px dotted #5bcbff;cursor:help}
.tip2::after{content:attr(data-tip);position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);padding:5px 8px;background:#1a2130;border:1px solid #252a3a;border-radius:6px;font-size:.68rem;white-space:nowrap;opacity:0;visibility:hidden;transition:.2s}
.tip2:hover::after{opacity:1;visibility:visible}
.tip3{position:relative;font-size:.8rem;color:#5bcbff;cursor:help}
.tip3::before{content:attr(data-tip);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);padding:5px 8px;background:#5bcbff;color:#061018;border-radius:6px;font-size:.68rem;white-space:nowrap;opacity:0;visibility:hidden;transition:.2s;font-weight:700}
.tip3:hover::before{opacity:1;visibility:visible}

.qt2{width:min(230px,92%);padding:12px;border:1px solid #252a3a;border-radius:12px;font-size:.8rem;font-style:italic;color:#8b90a3;text-align:left;background:#10131a}
.qt2::before{content:"“";font-size:1.6rem;color:#5bcbff;line-height:0;vertical-align:-.3em;margin-right:4px}
.qt3{width:min(230px,92%);padding:14px;background:#1a2130;border-radius:0 12px 12px 0;border-left:4px solid #3ee0c8;font-size:.8rem;color:#c8d0e0;text-align:left}

.rm{width:min(220px,92%);text-align:left;font-size:.78rem;color:#8b90a3}
.rm .clamp{-webkit-line-clamp:2;line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.rm[open] .clamp,.rm.is-on .clamp{display:block;-webkit-line-clamp:unset;line-clamp:unset;overflow:visible}
.rm summary,.rm .more{cursor:pointer;color:#5bcbff;font-weight:700;margin-top:6px;list-style:none}
.rm summary::-webkit-details-marker{display:none}

.foot{width:min(240px,94%);border-top:1px solid #252a3a;padding:12px;font-size:.7rem;color:#8b90a3;background:#0a0c12;text-align:left}
.foot .row{display:flex;justify-content:space-between;gap:8px;margin-bottom:8px}
.foot a{color:#5bcbff}
.foot-fix{position:relative;width:min(240px,94%);height:48px}
.foot-fix .bar{position:absolute;left:0;right:0;bottom:0;display:flex;gap:8px;justify-content:center;padding:8px;background:rgba(18,21,31,.95);border:1px solid #252a3a;border-radius:10px;font-size:.72rem}
.foot-center{text-align:center;padding:14px;border:1px solid #252a3a;border-radius:12px;width:min(220px,92%);font-size:.72rem;color:#8b90a3}

.fusen2{width:110px;padding:12px 10px;background:#1f2a3d;border:1px solid #2a4058;font-size:.72rem;transform:rotate(3deg);box-shadow:0 8px 18px rgba(0,0,0,.3);position:relative;text-align:left}
.fusen2::after{content:"";position:absolute;right:0;bottom:0;border:12px solid transparent;border-left-color:#151d2a;border-top-color:#151d2a}
.fusen3{width:110px;padding:12px;background:#243044;font-size:.72rem;transform:rotate(-2deg);box-shadow:2px 2px 0 #5bcbff;text-align:left}

.pg2{display:flex;gap:4px}
.pg2 a{min-width:28px;height:28px;display:grid;place-items:center;border-radius:999px;border:1px solid #252a3a;font-size:.72rem;color:#8b90a3}
.pg2 .on{background:#5bcbff;color:#061018;border-color:transparent;font-weight:700}
.pg3{display:flex;gap:6px;align-items:center;font-size:.75rem}
.pg3 a{color:#5bcbff}
.pg-ellip{display:flex;gap:4px;align-items:center}
.pg-ellip a,.pg-ellip span{min-width:28px;height:28px;padding:0 6px;display:grid;place-items:center;border-radius:8px;border:1px solid #252a3a;font-size:.72rem;color:#8b90a3}
.pg-ellip .on{background:linear-gradient(120deg,#5bcbff,#5ba9ff);color:#061018;border-color:transparent;font-weight:700}
.pg-ellip .dots{border:0;color:#5a6178;min-width:18px}

.pg-outline{display:flex;gap:6px;align-items:center}
.pg-outline a{min-width:30px;height:30px;display:grid;place-items:center;border-radius:8px;border:1px solid transparent;font-size:.75rem;color:#8b90a3}
.pg-outline a:hover{color:#eef0f6}
.pg-outline .on{border-color:#5bcbff;color:#5bcbff;font-weight:700}

.pg-ghost{display:flex;gap:10px;align-items:center;font-size:.8rem}
.pg-ghost a{color:#8b90a3;padding:4px 2px;border-bottom:2px solid transparent}
.pg-ghost .on{color:#5bcbff;border-bottom-color:#5bcbff;font-weight:700}

.pg-bar{display:inline-flex;padding:4px;border-radius:999px;background:#10131a;border:1px solid #252a3a;gap:2px}
.pg-bar a{min-width:28px;height:28px;display:grid;place-items:center;border-radius:999px;font-size:.72rem;color:#8b90a3}
.pg-bar .on{background:#5bcbff;color:#061018;font-weight:700}

.pg-icons{display:flex;gap:4px;align-items:center}
.pg-icons a{min-width:28px;height:28px;display:grid;place-items:center;border-radius:8px;border:1px solid #252a3a;font-size:.75rem;color:#8b90a3}
.pg-icons .on{background:#1a2130;color:#5bcbff;border-color:#3a4a66;font-weight:700}
.pg-icons .dis{opacity:.35;pointer-events:none}

.pg-jump{display:flex;gap:8px;align-items:center;font-size:.75rem;color:#8b90a3}
.pg-jump a{color:#5bcbff}
.pg-jump input{width:42px;height:28px;border-radius:8px;border:1px solid #252a3a;background:#0a0b10;color:#eef0f6;text-align:center;font:inherit}

.pg-compact{display:flex;gap:2px}
.pg-compact a{min-width:24px;height:24px;display:grid;place-items:center;border-radius:6px;font-size:.68rem;color:#8b90a3;border:1px solid #1e2433}
.pg-compact .on{background:#5bcbff;color:#061018;border-color:transparent;font-weight:700}

.pg-split{display:flex;align-items:center;justify-content:space-between;width:min(260px,94%);gap:8px}
.pg-split .pages{display:flex;gap:4px}
.pg-split a{min-width:28px;height:28px;display:grid;place-items:center;border-radius:8px;border:1px solid #252a3a;font-size:.72rem;color:#8b90a3}
.pg-split .on{background:linear-gradient(120deg,#5bcbff,#5ba9ff);color:#061018;border-color:transparent;font-weight:700}
.pg-split .nav{padding:0 10px;width:auto}

.pg-more{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid #252a3a;background:#12151f;color:#eef0f6;font-size:.78rem;font-weight:600}
.pg-more:hover{border-color:#3a4a66;color:#5bcbff}
.pg-more i{font-style:normal;color:#5bcbff}

.pg-arrows{display:flex;gap:10px;align-items:center}
.pg-arrows a{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;border:1px solid #252a3a;color:#8b90a3;font-size:.9rem}
.pg-arrows a:hover{border-color:#5bcbff;color:#5bcbff}
.pg-arrows .meta{font-size:.75rem;color:#8b90a3;min-width:4.5em;text-align:center}

.pg-block{display:flex;border:1px solid #252a3a;border-radius:10px;overflow:hidden}
.pg-block a{min-width:32px;height:32px;display:grid;place-items:center;font-size:.75rem;color:#8b90a3;border-right:1px solid #252a3a}
.pg-block a:last-child{border-right:0}
.pg-block .on{background:#5bcbff;color:#061018;font-weight:700}

.pg-dots{display:flex;gap:8px;align-items:center}
.pg-dots button{width:8px;height:8px;border-radius:50%;background:#3a4158;border:0;padding:0;cursor:pointer}
.pg-dots .on{width:18px;border-radius:999px;background:#5bcbff}

.toc2{width:min(210px,92%);padding:10px;border-left:3px solid #5bcbff;background:#10131a;font-size:.72rem;text-align:left;display:grid;gap:5px}
.toc2 a{color:#8b90a3}
.toc2 a:hover{color:#5bcbff}
.toc3{width:min(210px,92%);padding:10px;border:1px solid #252a3a;border-radius:10px;font-size:.72rem;text-align:left}
.toc3 ol{margin:6px 0 0;padding-left:18px;color:#8b90a3}

.chart-bar{display:flex;align-items:flex-end;gap:8px;height:90px;width:160px}
.chart-bar i{flex:1;background:linear-gradient(180deg,#5bcbff,#5ba9ff);border-radius:4px 4px 0 0;animation:chart-grow 1s ease both;transform-origin:bottom}
.chart-bar i:nth-child(1){height:45%}
.chart-bar i:nth-child(2){height:75%;animation-delay:.08s}
.chart-bar i:nth-child(3){height:55%;animation-delay:.16s}
.chart-bar i:nth-child(4){height:90%;animation-delay:.24s}
@keyframes chart-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.chart-bar2{display:grid;gap:6px;width:170px;text-align:left;font-size:.68rem;color:#8b90a3}
.chart-bar2 div{display:grid;grid-template-columns:36px 1fr;gap:6px;align-items:center}
.chart-bar2 b{display:block;height:10px;border-radius:99px;background:linear-gradient(90deg,#5bcbff,#3ee0c8);animation:chart-w 1s ease both}
@keyframes chart-w{from{width:0!important}}
.chart-pie{width:84px;height:84px;border-radius:50%;background:conic-gradient(#5bcbff 0 40%,#3ee0c8 40% 70%,#5ba9ff 70% 100%);box-shadow:inset 0 0 0 18px #12151f}
.chart-pie2{width:84px;height:84px;border-radius:50%;background:conic-gradient(#5bcbff 0 55%,#252a3a 55% 100%)}
.chart-donut{width:84px;height:84px;border-radius:50%;background:conic-gradient(#5bcbff 0 35%,#3ee0c8 35% 65%,#5ba9ff 65% 85%,#252a3a 85% 100%);mask:radial-gradient(circle at center,#0000 42%,#000 43%);-webkit-mask:radial-gradient(circle at center,#0000 42%,#000 43%)}
.chart-radar{width:100px;height:100px;position:relative}
.chart-radar svg{width:100%;height:100%;overflow:visible}
.tl2{width:min(210px,90%);display:grid;gap:0;text-align:left;font-size:.72rem}
.tl2 .item{display:grid;grid-template-columns:14px 1fr;gap:10px}
.tl2 .item i{width:10px;height:10px;border-radius:50%;background:#5bcbff;margin-top:4px;box-shadow:0 0 0 6px rgba(91,185,255,.12)}
.tl2 .item:not(:last-child) i{position:relative}
.tl2 .item:not(:last-child) i::after{content:"";position:absolute;left:4px;top:12px;width:2px;height:28px;background:#252a3a}
.tl2 strong{display:block;color:#eef0f6;font-size:.78rem}
.tl2 span{color:#8b90a3}

.tabs2{width:min(230px,92%)}
.tabs2 .nav{display:flex;gap:0;border-bottom:1px solid #252a3a}
.tabs2 .nav button{flex:1;padding:8px;font-size:.75rem;color:#8b90a3}
.tabs2 .nav button.is-on{color:#eef0f6;box-shadow:inset 0 -2px 0 #5bcbff}
.tabs2 .panels{padding:10px;border:1px solid #252a3a;border-top:0;border-radius:0 0 10px 10px;font-size:.75rem;min-height:40px;color:#8b90a3}
.tabs2 .panels .panel{display:none}
.tabs2 .panels .panel.is-on{display:block;color:#eef0f6}

.modal2{width:min(220px,92%);text-align:center}
.modal2 .sheet{margin-top:8px;padding:12px;border-radius:12px;background:#12151f;border:1px solid #252a3a;font-size:.78rem;display:none}
.modal2.is-open .sheet{display:block}

/* ===== Web parts variants ===== */
.hx{font-weight:700;font-size:.92rem;color:#eef0f6}
.hx-1{padding-left:10px;border-left:4px solid #3ee0c8}
.hx-2{display:inline-block;padding-bottom:4px;border-bottom:3px solid #5bcbff}
.hx-3{padding:6px 10px;background:#1a2130;border-left:3px solid #5bcbff}
.hx-4{letter-spacing:.12em;text-transform:uppercase;font-size:.75rem;color:#5bcbff}
.hx-5{display:flex;align-items:center;gap:8px}
.hx-5::after{content:"";flex:1;height:1px;background:#252a3a}
.hx-6{padding:8px 12px;background:linear-gradient(90deg,rgba(91,185,255,.2),transparent)}
.hx-7{position:relative;padding-left:18px}
.hx-7::before{content:"§";position:absolute;left:0;color:#5bcbff}
.hx-8{border:1px solid #5bcbff;padding:6px 12px;border-radius:999px;font-size:.8rem}
.hx-9{text-shadow:0 0 18px rgba(91,185,255,.45)}
.hx-10{background:linear-gradient(120deg,#5bcbff,#3ee0c8);-webkit-background-clip:text;background-clip:text;color:transparent}
.hx-11{padding-bottom:6px;border-bottom:1px dashed #5bcbff}
.hx-12{display:inline-block;padding:4px 10px;background:#5bcbff;color:#061018;clip-path:polygon(0 0,100% 0,92% 100%,0 100%)}
.hx-13{outline:1px solid #5bcbff;outline-offset:4px;padding:4px 8px}
.hx-14{font-size:1rem;border-bottom:4px double #5bcbff;padding-bottom:4px}
.hx-15{padding:6px 0;box-shadow:inset 0 -2px 0 #3ee0c8}
.hx-16{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center}
.hx-16 i{width:8px;height:8px;background:#5bcbff;transform:rotate(45deg)}
.hx-17{padding:8px 12px;border-radius:8px;border:1px solid #252a3a;background:#12151f}
.hx-18{font-style:italic;border-left:2px solid #8b90a3;padding-left:10px;color:#c8d0e0}
.hx-19{display:inline-block;transform:rotate(-2deg);padding:6px 10px;background:#1a2130;border:1px solid #5bcbff}
.hx-20{padding:6px 10px;background:#10131a;box-shadow:4px 4px 0 #5bcbff}
.hx-21{position:relative;padding:8px 12px}
.hx-21::before,.hx-21::after{content:"";position:absolute;width:10px;height:10px;border:2px solid #5bcbff}
.hx-21::before{top:0;left:0;border-right:0;border-bottom:0}
.hx-21::after{right:0;bottom:0;border-left:0;border-top:0}
.hx-22{padding:6px 12px;border-radius:4px;background:#1a2130;border-top:2px solid #5bcbff}
.hx-23{letter-spacing:.2em}
.hx-24{display:inline-flex;gap:6px;align-items:baseline}
.hx-24 small{font-size:.65rem;color:#5bcbff;font-weight:700}
.hx-25{padding:8px 0;background:linear-gradient(#5bcbff,#5bcbff) left/3px 100% no-repeat,linear-gradient(#5bcbff,#5bcbff) right/3px 100% no-repeat;padding-inline:12px}
.hx-26{font-size:.85rem;opacity:.9;border-bottom:1px solid #252a3a;padding-bottom:6px}

.btx{padding:9px 16px;font-weight:700;font-size:.82rem;border:0;cursor:pointer;border-radius:8px}
.btx-1{background:#3ee0c8;color:#061018}
.btx-2{background:transparent;border:1px dashed #5bcbff;color:#5bcbff;border-radius:8px}
.btx-3{border-radius:4px;background:#5ba9ff;color:#061018}
.btx-4{border-radius:999px;background:#1a2130;border:1px solid #5bcbff;color:#5bcbff}
.btx-5{background:#10131a;color:#eef0f6;border:1px solid #252a3a;box-shadow:inset 0 -3px 0 #5bcbff}
.btx-6{background:linear-gradient(180deg,#7ad7ff,#5bcbff);color:#061018;border-radius:10px}
.btx-7{background:#5bcbff;color:#061018;clip-path:polygon(8% 0,100% 0,92% 100%,0 100%)}
.btx-8{background:#12151f;color:#5bcbff;border:2px solid #5bcbff;border-radius:0}
.btx-9{background:#5bcbff;color:#061018;border-radius:0 12px 0 12px}
.btx-10{background:rgba(62,224,200,.15);color:#3ee0c8;border:1px solid #3ee0c8}
.btx-11{background:#1a2130;color:#eef0f6;border-left:4px solid #5bcbff;border-radius:0 8px 8px 0}
.btx-12{background:#5bcbff;color:#061018;letter-spacing:.08em;text-transform:uppercase;font-size:.72rem}
.btx-13{background:#0a0c12;border:1px solid #5bcbff;color:#5bcbff;box-shadow:0 0 16px rgba(91,185,255,.35)}
.btx-14{background:#252a3a;color:#eef0f6;border-radius:6px}
.btx-15{background:linear-gradient(90deg,#5bcbff,#3ee0c8);color:#061018;border-radius:999px}
.btx-16{display:inline-flex;align-items:center;gap:8px;background:#1a2130;color:#eef0f6;border:1px solid #252a3a}
.btx-16::after{content:"";width:6px;height:6px;border-right:2px solid #5bcbff;border-top:2px solid #5bcbff;transform:rotate(45deg)}

.bxx{width:min(220px,92%);padding:12px;font-size:.75rem;color:#8b90a3;text-align:left;background:#12151f}
.bxx strong{display:block;color:#eef0f6;margin-bottom:4px}
.bxx-1{border:2px dotted #5bcbff;border-radius:12px}
.bxx-2{border-radius:16px;border:1px solid #252a3a;box-shadow:inset 0 0 0 1px #1a2130}
.bxx-3{border-radius:8px;background:#1a2130;border-top:3px solid #5bcbff}
.bxx-4{border-radius:8px;border:1px solid #3ee0c8;background:rgba(62,224,200,.06)}
.bxx-5{border-radius:0;border:1px solid #252a3a;border-left-width:6px;border-left-color:#5bcbff}

.ldx-grid{display:grid;grid-template-columns:repeat(3,10px);gap:4px;width:38px}
.ldx-grid i{width:10px;height:10px;background:#5bcbff;animation:ldx-g 1s infinite}
.ldx-grid i:nth-child(2){animation-delay:.1s}
.ldx-grid i:nth-child(3){animation-delay:.2s}
.ldx-grid i:nth-child(4){animation-delay:.3s}
.ldx-grid i:nth-child(5){animation-delay:.4s}
.ldx-grid i:nth-child(6){animation-delay:.5s}
.ldx-grid i:nth-child(7){animation-delay:.6s}
.ldx-grid i:nth-child(8){animation-delay:.7s}
.ldx-grid i:nth-child(9){animation-delay:.8s}
@keyframes ldx-g{0%,100%{opacity:.2}50%{opacity:1}}
.ldx-ring{width:40px;height:40px;border-radius:50%;border:2px solid #252a3a;border-right-color:#5bcbff;animation:ld-rot .7s linear infinite}
.ldx-bounce{width:12px;height:12px;border-radius:50%;background:#5bcbff;animation:ldx-b .6s ease-in-out infinite alternate}
@keyframes ldx-b{to{transform:translateY(-12px)}}
.ldx-wave{display:flex;gap:3px;align-items:center;height:24px}
.ldx-wave i{width:4px;height:16px;background:#5bcbff;border-radius:2px;animation:ldx-w .7s ease-in-out infinite}
.ldx-wave i:nth-child(2){animation-delay:.1s}
.ldx-wave i:nth-child(3){animation-delay:.2s}
.ldx-wave i:nth-child(4){animation-delay:.3s}
.ldx-wave i:nth-child(5){animation-delay:.4s}
@keyframes ldx-w{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
.ldx-orbit{width:40px;height:40px;position:relative}
.ldx-orbit i{position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:#5bcbff;animation:ld-rot 1s linear infinite}
.ldx-orbit b{position:absolute;inset:8px;border-radius:50%;border:2px solid transparent;border-top-color:#3ee0c8;animation:ld-rot .7s linear infinite reverse}
.ldx-text{font-size:.75rem;color:#5bcbff;letter-spacing:.2em;animation:ldx-t 1.2s steps(4) infinite}
@keyframes ldx-t{0%{content:"Load"}to{opacity:.4}}

.lsx{width:min(210px,92%);list-style:none;margin:0;padding:0;display:grid;gap:6px;text-align:left;font-size:.78rem;color:#c8d0e0}
.lsx li{position:relative;padding-left:18px}
.lsx-star li::before{content:"★";position:absolute;left:0;color:#5bcbff;font-size:.7rem}
.lsx-plus li::before{content:"+";position:absolute;left:0;color:#3ee0c8;font-weight:700}
.lsx-step{counter-reset:s}
.lsx-step li{padding-left:26px}
.lsx-step li::before{content:counter(s);counter-increment:s;position:absolute;left:0;width:16px;height:16px;border-radius:4px;background:#1a2130;border:1px solid #5bcbff;color:#5bcbff;font-size:.65rem;display:grid;place-items:center}
.lsx-sep li{padding:8px 0;border-bottom:1px dashed #252a3a;padding-left:0}
.lsx-sep li:last-child{border-bottom:0}
.lsx-pill li{padding:6px 10px;padding-left:10px;border-radius:999px;background:#1a2130;border:1px solid #252a3a}

.accx{width:min(240px,94%);text-align:left;font-size:.78rem}
.accx details{border:1px solid #252a3a;background:#12151f;margin-bottom:6px;border-radius:8px;overflow:hidden}
.accx summary{padding:8px 10px;cursor:pointer;font-weight:700;list-style:none;background:#10131a}
.accx summary::-webkit-details-marker{display:none}
.accx p{margin:0;padding:8px 10px;color:#8b90a3}
.accx-plus summary::before{content:"+ ";color:#5bcbff}
.accx-plus details[open] summary::before{content:"− "}
.accx-left details{border-left:3px solid #5bcbff;border-radius:0 8px 8px 0}
.accx-card details{box-shadow:0 6px 16px rgba(0,0,0,.25);border:0;background:#1a2130}
.accx-soft details{background:#0f1218;border-color:#1e2433}
.accx-row{display:grid;gap:6px}
.accx-fill summary{background:linear-gradient(90deg,rgba(91,185,255,.15),transparent)}

.srx{display:flex;width:min(220px,92%);gap:0;border:1px solid #5bcbff;border-radius:8px;overflow:hidden}
.srx input{flex:1;border:0;background:#10131a;padding:8px 10px;color:#eef0f6;font:inherit;font-size:.8rem;outline:none}
.srx button{border:0;background:#5bcbff;color:#061018;padding:0 12px;font-weight:700;font-size:.75rem}
.srx2{display:grid;grid-template-columns:1fr auto;gap:6px;width:min(220px,92%)}
.srx2 input{padding:8px 10px;border-radius:8px;border:1px solid #252a3a;background:#10131a;color:#eef0f6;font:inherit;font-size:.8rem}
.srx2 button{padding:8px 12px;border-radius:8px;background:#1a2130;border:1px solid #5bcbff;color:#5bcbff;font-size:.75rem}
.srx3{position:relative;width:min(220px,92%)}
.srx3 input{width:100%;padding:8px 36px 8px 10px;border-radius:999px;border:1px solid #252a3a;background:#10131a;color:#eef0f6;font:inherit;font-size:.8rem}
.srx3 button{position:absolute;right:4px;top:4px;bottom:4px;width:28px;border:0;border-radius:999px;background:#5bcbff;color:#061018;font-weight:700}
.srx4{display:flex;flex-direction:column;gap:6px;width:min(220px,92%);text-align:left}
.srx4 input{padding:8px 10px;border:0;border-bottom:2px solid #5bcbff;background:transparent;color:#eef0f6;font:inherit}

.crx{display:flex;gap:4px;font-size:.7rem;align-items:center;flex-wrap:wrap}
.crx a{color:#061018;background:#5bcbff;padding:4px 8px;border-radius:4px}
.crx span{color:#8b90a3}
.crx2{font-size:.72rem;color:#8b90a3}
.crx2 a{color:#5bcbff;text-decoration:underline}

.tbx{width:min(220px,92%);display:grid;gap:6px;text-align:left}
.tbx input,.tbx textarea{width:100%;padding:10px;border-radius:12px;border:1px solid #252a3a;background:#0a0c12;color:#eef0f6;font:inherit;font-size:.8rem}
.tbx-ghost input{background:transparent;border:1px dashed #5bcbff}

.tpx{position:relative;font-size:.8rem;color:#5bcbff;cursor:help;border-bottom:1px solid #5bcbff}
.tpx .box{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);padding:6px 8px;background:#5bcbff;color:#061018;border-radius:6px;font-size:.68rem;font-weight:700;white-space:nowrap;opacity:0;visibility:hidden;transition:.2s}
.tpx:hover .box{opacity:1;visibility:visible}

.qax{width:min(240px,94%);text-align:left;font-size:.78rem}
.qax .q{padding:8px 10px;background:#1a2130;border-radius:8px 8px 0 0;font-weight:700;border:1px solid #252a3a;border-bottom:0}
.qax .a{padding:8px 10px;background:#12151f;border-radius:0 0 8px 8px;color:#8b90a3;border:1px solid #252a3a;margin-bottom:8px}
.qax2 details{border-bottom:1px solid #252a3a;padding:6px 0}
.qax2 summary{cursor:pointer;font-weight:700;list-style:none;color:#5bcbff}
.qax2 p{margin:4px 0 0;color:#8b90a3;font-size:.75rem}

.rdx{width:100px;height:100px}
.rdx svg{width:100%;height:100%}
.piex{width:88px;height:88px;border-radius:50%;position:relative}
.piex-1{background:conic-gradient(#5bcbff 0 25%,#3ee0c8 25% 55%,#5ba9ff 55% 80%,#252a3a 80% 100%)}
.piex-2{background:conic-gradient(#5bcbff 0 70%,#1a2130 70% 100%);box-shadow:inset 0 0 0 14px #12151f}
.piex-3{background:conic-gradient(#3ee0c8 0 33%,#5bcbff 33% 66%,#5ba9ff 66% 100%)}
.piex-4{background:conic-gradient(#5bcbff 0 20%,#3ee0c8 20% 45%,#5ba9ff 45% 60%,#8b90a3 60% 75%,#252a3a 75% 100%);mask:radial-gradient(circle,#0000 38%,#000 39%);-webkit-mask:radial-gradient(circle,#0000 38%,#000 39%)}
.piex-gauge{background:conic-gradient(from 180deg,#5bcbff 0 120deg,#252a3a 120deg 180deg,#12151f 0);border-radius:88px 88px 0 0/88px;height:44px;width:88px}
.barx{display:flex;align-items:flex-end;gap:6px;height:96px;width:170px}
.barx i{flex:1;border-radius:4px 4px 0 0;background:#5bcbff;animation:chart-grow .9s ease both}
.barx i:nth-child(1){height:30%;background:#5ba9ff}
.barx i:nth-child(2){height:60%}
.barx i:nth-child(3){height:85%;background:#3ee0c8;animation-delay:.08s}
.barx i:nth-child(4){height:50%;animation-delay:.16s}
.barx i:nth-child(5){height:95%;background:#5bcbff;animation-delay:.24s}
.barx2{display:grid;gap:5px;width:180px}
.barx2 div{display:grid;grid-template-columns:28px 1fr 28px;gap:6px;align-items:center;font-size:.65rem;color:#8b90a3}
.barx2 b{height:8px;border-radius:99px;background:linear-gradient(90deg,#5bcbff,#3ee0c8);justify-self:stretch}

.rmx{width:min(230px,92%);text-align:left;font-size:.78rem;color:#8b90a3}
.rmx .c{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.rmx[open] .c{display:block;-webkit-line-clamp:unset;line-clamp:unset}
.rmx summary{color:#5bcbff;cursor:pointer;margin-top:6px;font-weight:700;list-style:none}
.rmx2{border:1px solid #252a3a;border-radius:10px;padding:10px;background:#12151f}
.tgx{position:relative;width:56px;height:30px;display:inline-block}
.tgx input{position:absolute;inset:0;opacity:0;cursor:pointer;z-index:2;margin:0}
.tgx span{position:absolute;inset:0;border-radius:6px;background:#3a4158;pointer-events:none;transition:.25s}
.tgx span::before{content:"OFF";position:absolute;inset:2px;border-radius:4px;background:#10131a;display:grid;place-items:center;font-size:.6rem;font-weight:700;color:#8b90a3;width:calc(50% - 2px);transition:transform .25s,background .25s,color .25s}
.tgx input:checked + span{background:#5bcbff}
.tgx input:checked + span::before{content:"ON";transform:translateX(100%);background:#eef0f6;color:#061018}

/* ===== extra button / box variants ===== */

.btz{padding:9px 16px;font-weight:700;font-size:.82rem;border:0;cursor:pointer;border-radius:8px;color:#061018}
.btz-1{background:#5bcbff;border-radius:0;box-shadow:4px 4px 0 #1a2130}
.btz-2{background:transparent;color:#eef0f6;border:1px solid #eef0f6;border-radius:999px}
.btz-3{background:#3ee0c8;border-radius:20px 4px}
.btz-4{background:#1a2130;color:#5bcbff;border:1px solid #5bcbff;border-radius:4px;text-decoration:underline;text-underline-offset:3px}
.btz-5{background:linear-gradient(135deg,#5bcbff 50%,#5ba9ff 50%);color:#061018}
.btz-6{background:#5bcbff;color:#061018;position:relative}
.btz-6::after{content:"→";margin-left:6px}
.bzz{width:min(220px,92%);padding:12px;font-size:.75rem;color:#8b90a3;text-align:left;background:#12151f;border-radius:10px}
.bzz strong{display:block;color:#eef0f6;margin-bottom:4px}
.bzz-1{border:1px solid #252a3a;background:repeating-linear-gradient(-45deg,transparent,transparent 6px,rgba(91,185,255,.05) 6px,rgba(91,185,255,.05) 12px)}
.bzz-2{border:1px solid #5bcbff;border-radius:20px}
.bzz-3{border:0;background:#1a2130;box-shadow:0 0 0 1px #252a3a,0 10px 24px rgba(0,0,0,.3)}
.bzz-4{border:1px solid #252a3a;border-bottom-width:4px;border-bottom-color:#5bcbff}
.bzz-5{border:1px solid #252a3a;display:grid;grid-template-columns:4px 1fr;gap:10px;padding:0}
.bzz-5 i{background:#5bcbff;border-radius:10px 0 0 10px}
.bzz-5 div{padding:12px 12px 12px 0}
.lsz{width:min(210px,92%);list-style:none;margin:0;padding:0;font-size:.78rem;color:#c8d0e0;text-align:left}
.lsz li{padding:6px 0 6px 20px;position:relative;border-bottom:1px solid #1a2130}
.lsz li::before{content:"";position:absolute;left:0;top:12px;width:8px;height:2px;background:#5bcbff}
.qtz{width:min(230px,92%);padding:14px;font-size:.8rem;color:#c8d0e0;text-align:left;background:#10131a;border-radius:12px;border:1px solid #252a3a;position:relative}
.qtz::before{content:"QUOTE";position:absolute;top:-8px;left:12px;font-size:.65rem;font-weight:700;color:#5bcbff;background:#10131a;padding:0 6px;letter-spacing:.08em}

@media (prefers-reduced-motion:reduce){
  .dict-card{opacity:1!important;transform:none!important;transition:none!important}
}

.demo-tbx2{display:grid;gap:6px;width:min(220px,90%)}
.demo-tbx2 span{font-size:.72rem;color:#8b90a3}
.demo-tbx2 input{border:0;border-bottom:2px solid #3a4158;background:transparent;color:#eef0f6;padding:8px 2px;outline:none;font:inherit}
.demo-tbx2 input:focus{border-bottom-color:#5bcbff}
.demo-tbx3{display:flex;align-items:center;gap:8px;width:min(240px,90%);padding:10px 12px;border:1px solid #2a3144;border-radius:10px;background:#0d1018}
.demo-tbx3 i{width:14px;height:14px;border-radius:3px;background:#5bcbff;opacity:.7;flex:none}
.demo-tbx3 input{flex:1;border:0;background:transparent;color:#eef0f6;outline:none;font:inherit}
.demo-tbx4{display:grid;gap:6px;width:min(240px,90%)}
.demo-tbx4 input{padding:10px 12px;border:1px solid #ff6b8a;border-radius:10px;background:#180e14;color:#eef0f6;outline:none;font:inherit}
.demo-tbx4 small{color:#ff6b8a;font-size:.72rem}

.demo-selx1 select{appearance:none;padding:10px 36px 10px 14px;border-radius:999px;border:1px solid #2a3144;background:#10131a;color:#eef0f6;font:inherit}
.demo-selx2{display:grid;gap:6px;padding:12px;border:1px solid #2a3144;border-radius:12px;background:#10131a;width:min(200px,90%)}
.demo-selx2 span{font-size:.72rem;color:#8b90a3}
.demo-selx2 select{border:0;background:transparent;color:#eef0f6;font:inherit}
.demo-selx3{display:flex;border:1px solid #2a3144;border-radius:10px;overflow:hidden;width:min(200px,90%)}
.demo-selx3 button{padding:10px 12px;background:#1a2233;color:#5bcbff;border-right:1px solid #2a3144}
.demo-selx3 select{flex:1;border:0;background:#10131a;color:#eef0f6;padding:10px;font:inherit}

.demo-tbx2{display:grid;gap:6px;width:min(220px,90%)}
.demo-tbx2 span{font-size:.72rem;color:#8b90a3}
.demo-tbx2 input{border:0;border-bottom:2px solid #3a4158;background:transparent;color:#eef0f6;padding:8px 2px;outline:none;font:inherit}
.demo-tbx2 input:focus{border-bottom-color:#5bcbff}
.demo-tbx3{display:flex;align-items:center;gap:8px;width:min(240px,90%);padding:10px 12px;border:1px solid #2a3144;border-radius:10px;background:#0d1018}
.demo-tbx3 i{width:14px;height:14px;border-radius:3px;background:#5bcbff;opacity:.7;flex:none}
.demo-tbx3 input{flex:1;border:0;background:transparent;color:#eef0f6;outline:none;font:inherit}
.demo-tbx4{display:grid;gap:6px;width:min(240px,90%)}
.demo-tbx4 input{padding:10px 12px;border:1px solid #ff6b8a;border-radius:10px;background:#180e14;color:#eef0f6;outline:none;font:inherit}
.demo-tbx4 small{color:#ff6b8a;font-size:.72rem}
.demo-tbx5{position:relative;display:block;width:min(220px,90%)}
.demo-tbx5 input{width:100%;padding:14px 12px 8px;border:1px solid #2a3144;border-radius:10px;background:#10131a;color:#eef0f6;outline:none;font:inherit}
.demo-tbx5 span{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#8b90a3;pointer-events:none;transition:.2s;font-size:.85rem}
.demo-tbx5 input:focus+span,.demo-tbx5 input:not(:placeholder-shown)+span{top:6px;transform:none;font-size:.65rem;color:#5bcbff}
.demo-selx1 select{appearance:none;padding:10px 36px 10px 14px;border-radius:999px;border:1px solid #2a3144;background:#10131a;color:#eef0f6;font:inherit}
.demo-selx2{display:grid;gap:6px;padding:12px;border:1px solid #2a3144;border-radius:12px;background:#10131a;width:min(200px,90%)}
.demo-selx2 span{font-size:.72rem;color:#8b90a3}
.demo-selx2 select{border:0;background:transparent;color:#eef0f6;font:inherit}
.demo-selx3{display:flex;border:1px solid #2a3144;border-radius:10px;overflow:hidden;width:min(200px,90%)}
.demo-selx3 button{padding:10px 12px;background:#1a2233;color:#5bcbff;border-right:1px solid #2a3144}
.demo-selx3 select{flex:1;border:0;background:#10131a;color:#eef0f6;padding:10px;font:inherit}

/* ===== Play / force-hover / cues ===== */
.preview{cursor:pointer}
.preview.is-playing{outline:1px solid rgba(91,185,255,.45);outline-offset:0}
.preview .play-cue{position:absolute;right:8px;bottom:8px;z-index:2;font-size:.65rem;letter-spacing:.04em;padding:3px 8px;border-radius:999px;border:1px solid #2a3348;background:rgba(7,8,12,.75);color:#8b90a3;pointer-events:none}
.preview[data-mode="hover"] .play-cue{color:#3ee0c8;border-color:#2a4050}
.preview[data-mode="interactive"] .play-cue{color:#5bcbff;border-color:#2a4058}
.preview[data-mode="static"]{cursor:default}
.preview[data-mode="static"] .play-cue{opacity:.7}

.preview.is-force-hover .h-lift,
.preview.is-force-hover .h-glow,
.preview.is-force-hover .h-scale,
.preview.is-force-hover .h-rotate,
.preview.is-force-hover .h-bright,
.preview.is-force-hover .h-skew,
.preview.is-force-hover .demo-card,
.preview.is-force-hover .h-img-zoom i,
.preview.is-force-hover .btn-slide,
.preview.is-force-hover .btn-arrow i,
.preview.is-force-hover .card-flip .inner,
.preview.is-force-hover .a-link-draw,
.preview.is-force-hover .w-link a,
.preview.is-force-hover .w-pseudo a,
.preview.is-force-hover .w-filter,
.preview.is-force-hover .w-trans,
.preview.is-force-hover .w-tf-rotate,
.preview.is-force-hover .w-tf-scale,
.preview.is-force-hover .w-tf-skew,
.preview.is-force-hover .w-tf-3d,
.preview.is-force-hover .w-sprite,
.preview.is-force-hover .w3-ripple,
.preview.is-force-hover .b-corners,
.preview.is-force-hover .h-shine,
.preview.is-force-hover .h-border{transition-duration:.01ms}
.preview.is-force-hover .h-lift{transform:translateY(-6px);box-shadow:0 16px 36px rgba(91,185,255,.4)}
.preview.is-force-hover .h-glow{transform:scale(1.03);box-shadow:0 0 0 1px rgba(91,185,255,.5),0 0 28px rgba(91,185,255,.45)}
.preview.is-force-hover .h-scale{transform:scale(1.08)}
.preview.is-force-hover .h-rotate{transform:rotate(8deg) scale(1.04)}
.preview.is-force-hover .h-underline::after{transform:scaleX(1)}
.preview.is-force-hover .h-bright{filter:brightness(1.25)}
.preview.is-force-hover .h-skew{transform:skewX(-8deg)}
.preview.is-force-hover .h-border::before{transform:scale(1);opacity:1}
.preview.is-force-hover .h-shine::after{left:120%;transition:left .5s}
.preview.is-force-hover .demo-card{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.3)}
.preview.is-force-hover .btn-slide::before{transform:none}
.preview.is-force-hover .btn-slide{color:#061018;border-color:transparent}
.preview.is-force-hover .btn-arrow i{transform:rotate(45deg) translate(2px,-2px)}
.preview.is-force-hover .btn-ripple::after{opacity:1}
.preview.is-force-hover .card-flip .inner{transform:rotateY(180deg)}
.preview.is-force-hover .a-link-draw::after{transform:scaleX(1)}
.preview.is-force-hover .h-img-zoom i{transform:scale(1.12)}
.preview.is-force-hover .b-corners::before,.preview.is-force-hover .b-corners::after{width:100%;height:100%}
.preview.is-force-hover .w-link a{color:#3ee0c8;text-decoration:underline}
.preview.is-force-hover .w-pseudo a{color:#5bcbff}
.preview.is-force-hover .w-filter{filter:none}
.preview.is-force-hover .w-trans{background:#5bcbff;color:#061018;transform:translateY(-3px);border-color:transparent;font-weight:700}
.preview.is-force-hover .w-tf-rotate{transform:rotate(25deg)}
.preview.is-force-hover .w-tf-scale{transform:scale(1.15)}
.preview.is-force-hover .w-tf-skew{transform:skewX(-12deg)}
.preview.is-force-hover .w-tf-3d{transform:perspective(400px) rotateY(28deg)}
.preview.is-force-hover .w-sprite{background-position:0 100%}
.preview.is-force-hover .w3-ripple::after{opacity:1}

/* Fix demos where animation is on children / missing */
.a-ken i{display:block;width:100%;height:100%;background:linear-gradient(120deg,#5bcbff,#5ba9ff);transform-origin:center;animation:kf-ken 4s ease-in-out infinite alternate}
.a-progress>i{display:block;height:100%;width:40%;background:linear-gradient(90deg,#5bcbff,#3ee0c8);animation:kf-progress 1.4s ease-in-out infinite}
.a-scroll-bar>i{display:block;height:100%;width:35%;background:#5bcbff;animation:kf-progress 1.6s ease-in-out infinite}
.a-dots span{width:8px;height:8px;border-radius:50%;background:#5bcbff;animation:kf-dots 1.2s ease-in-out infinite}
.a-dots span:nth-child(2){animation-delay:.15s}
.a-dots span:nth-child(3){animation-delay:.3s}
.a-caret span{display:inline-block;width:2px;height:1em;margin-left:2px;background:#5bcbff;vertical-align:text-bottom;animation:kf-blink 1s step-end infinite}
.a-curtain::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,#5bcbff,#5ba9ff);transform-origin:left;animation:kf-curtain .9s cubic-bezier(.16,1,.3,1) both}
.a-ripple-dot{position:relative}
.a-ripple-dot::before,.a-ripple-dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(91,185,255,.55);animation:kf-ping 1.4s cubic-bezier(0,0,.2,1) infinite}
.a-ripple-dot::after{animation-delay:.45s}
.a-stagger{display:inline-flex;gap:2px}
.a-stagger span{display:inline-block;opacity:0;transform:translateY(12px);animation:kf-fade-in-up .5s ease forwards}
.a-stagger span:nth-child(1){animation-delay:.05s}
.a-stagger span:nth-child(2){animation-delay:.12s}
.a-stagger span:nth-child(3){animation-delay:.19s}
.a-stagger span:nth-child(4){animation-delay:.26s}
.a-stagger span:nth-child(5){animation-delay:.33s}
.a-text-slide span{display:inline-block;animation:kf-text-slide .7s cubic-bezier(.22,1,.36,1) both}
.a-link-draw::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;background:#5bcbff;transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.demo-ping{position:relative;width:16px;height:16px;background:#5bcbff;border-radius:50%}
.demo-ping::before{content:"";position:absolute;inset:0;border-radius:50%;background:#5bcbff;animation:kf-ping 1.2s cubic-bezier(0,0,.2,1) infinite}
@keyframes kf-curtain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes kf-ken{from{transform:scale(1)}to{transform:scale(1.18)}}
@keyframes kf-text-slide{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
@keyframes kf-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.ping-run::before{content:"";position:absolute;inset:0;border-radius:50%;background:#5bcbff;animation:kf-ping 1.2s cubic-bezier(0,0,.2,1) infinite}
.demo-ping{position:relative;width:16px;height:16px;background:#5bcbff;border-radius:50%}

.is-replaying,.is-replaying::before,.is-replaying::after{animation:none!important;transition:none!important}
.play-cue{box-shadow:0 0 0 1px rgba(91,185,255,.15)}
.preview.is-playing .play-cue{color:#061018;background:linear-gradient(120deg,#5bcbff,#5ba9ff);border-color:transparent;font-weight:700}
.preview[data-mode="play"]{box-shadow:inset 0 0 0 1px rgba(91,185,255,.08)}
.b-beam[data-anim],.b-corners[data-anim],.b-spin[data-anim],.b-draw[data-anim]{display:block}

/* extra pack */
.nx-u-center{position:relative;font-weight:700}
.nx-u-center::after{content:"";position:absolute;left:50%;bottom:-3px;width:0;height:2px;background:var(--accent);transition:width .25s,left .25s}
.preview:hover .nx-u-center::after,.nx-u-center:hover::after{width:100%;left:0}
.nx-fill-up{position:relative;z-index:0;padding:10px 18px;border-radius:999px;border:1px solid var(--accent);color:var(--accent);font-weight:700;overflow:hidden}
.nx-fill-up::before{content:"";position:absolute;inset:0;background:var(--grad);transform:translateY(101%);transition:transform .35s var(--ease);z-index:-1}
.preview:hover .nx-fill-up::before,.nx-fill-up:hover::before{transform:none}
.preview:hover .nx-fill-up,.nx-fill-up:hover{color:#061018}
.nx-tilt{width:140px;padding:14px;border-radius:14px;border:1px solid var(--border);background:#12151f;transition:transform .35s var(--ease);transform-style:preserve-3d}
.preview:hover .nx-tilt,.nx-tilt:hover{transform:perspective(420px) rotateX(8deg) rotateY(-12deg)}
.nx-icon-nudge{display:inline-flex;align-items:center;gap:8px;font-weight:700}
.nx-icon-nudge i{display:inline-block;transition:transform .25s var(--ease)}
.preview:hover .nx-icon-nudge i,.nx-icon-nudge:hover i{transform:translateX(6px)}
.nx-blur-card{width:150px;padding:14px;border-radius:14px;border:1px solid var(--border);background:#12151f;filter:blur(3px);opacity:.7;transition:filter .35s,opacity .35s}
.preview:hover .nx-blur-card,.nx-blur-card:hover{filter:none;opacity:1}
.nx-stroke{font-weight:800;font-size:1.4rem;letter-spacing:.04em;-webkit-text-stroke:1px #5bcbff;color:transparent}
.nx-gmove{font-weight:800;font-size:1.2rem;background:linear-gradient(90deg,#5bcbff,#3ee0c8,#5ba9ff,#5bcbff);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:nx-gmove 2.8s linear infinite}
@keyframes nx-gmove{to{background-position:-220% center}}
.nx-mask{font-weight:800;font-size:1.15rem;clip-path:inset(0 100% 0 0);animation:nx-mask .9s var(--ease) both}
@keyframes nx-mask{to{clip-path:inset(0 0 0 0)}}
.nx-drop::first-letter{float:left;font-size:2.4rem;line-height:.8;padding-right:6px;color:#5bcbff;font-weight:800}
.nx-drop{width:180px;font-size:.78rem;color:var(--dim);text-align:left;line-height:1.55}
.nx-balance{width:190px;text-wrap:balance;font-weight:700;line-height:1.4;text-align:center}
.nx-hint{width:18px;height:18px;border-right:2px solid #5bcbff;border-bottom:2px solid #5bcbff;transform:rotate(45deg);animation:nx-hint 1.2s ease-in-out infinite}
@keyframes nx-hint{0%,100%{transform:rotate(45deg) translate(0)}50%{transform:rotate(45deg) translate(0,6px)}}
.nx-check{width:36px;height:36px}
.nx-check path{fill:none;stroke:#3ee0c8;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:36;stroke-dashoffset:36;animation:nx-draw .6s .15s ease forwards}
@keyframes nx-draw{to{stroke-dashoffset:0}}
.nx-typing{display:flex;gap:5px;align-items:center;height:28px;padding:0 10px;border-radius:999px;background:#1a2130}
.nx-typing i{width:7px;height:7px;border-radius:50%;background:#5bcbff;animation:nx-type 1s ease-in-out infinite}
.nx-typing i:nth-child(2){animation-delay:.15s}
.nx-typing i:nth-child(3){animation-delay:.3s}
@keyframes nx-type{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-5px);opacity:1}}
.nx-eq{display:flex;align-items:flex-end;gap:3px;height:36px}
.nx-eq i{width:4px;background:#5bcbff;border-radius:2px;animation:nx-eq .8s ease-in-out infinite alternate}
.nx-eq i:nth-child(2){animation-delay:.1s}
.nx-eq i:nth-child(3){animation-delay:.2s}
.nx-eq i:nth-child(4){animation-delay:.15s}
.nx-eq i:nth-child(5){animation-delay:.05s}
@keyframes nx-eq{from{height:8px}to{height:32px}}
.nx-flip{perspective:200px;font-weight:800;font-size:1.6rem}
.nx-flip b{display:inline-block;min-width:1.1em;padding:4px 6px;border-radius:8px;background:#1a2130;animation:nx-flip 1.6s ease-in-out infinite;transform-origin:bottom}
@keyframes nx-flip{0%,40%{transform:rotateX(0)}50%,90%{transform:rotateX(-90deg)}100%{transform:rotateX(0)}}
.nx-blob{width:72px;height:72px;background:linear-gradient(120deg,#5bcbff,#3ee0c8);border-radius:60% 40% 50% 50%/50% 60% 40% 50%;animation:nx-blob 4s ease-in-out infinite}
@keyframes nx-blob{0%,100%{border-radius:60% 40% 50% 50%/50% 60% 40% 50%}50%{border-radius:40% 60% 50% 60%/60% 40% 60% 40%}}
.nx-spot{width:150px;padding:16px;border-radius:14px;border:1px solid var(--border);background:radial-gradient(120px 80px at var(--x,50%) var(--y,20%),rgba(91,185,255,.28),transparent 60%),#12151f;transition:background .2s}
.nx-zoom{width:120px;height:72px;border-radius:10px;overflow:hidden}
.nx-zoom i{display:block;width:100%;height:100%;background:linear-gradient(120deg,#5bcbff,#3ee0c8);transition:transform .45s var(--ease)}
.preview:hover .nx-zoom i,.nx-zoom:hover i{transform:scale(1.35)}
.nx-ham{position:relative;width:28px;height:20px;display:block;cursor:pointer}
.nx-ham input{position:absolute;inset:0;opacity:0;cursor:pointer}
.nx-ham span,.nx-ham span::before,.nx-ham span::after{position:absolute;left:0;width:100%;height:2px;background:#eef0f6;border-radius:2px;transition:.25s}
.nx-ham span{top:9px}
.nx-ham span::before,.nx-ham span::after{content:""}
.nx-ham span::before{top:-8px}
.nx-ham span::after{top:8px}
.nx-ham input:checked + span{background:transparent}
.nx-ham input:checked + span::before{top:0;transform:rotate(45deg)}
.nx-ham input:checked + span::after{top:0;transform:rotate(-45deg)}
.nx-fab{width:44px;height:44px;border-radius:50%;background:var(--grad);color:#061018;font-weight:800;font-size:1.4rem;display:grid;place-items:center;box-shadow:0 10px 24px rgba(91,185,255,.35)}
.nx-btns{display:inline-flex;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.nx-btns button{padding:8px 12px;background:#12151f;color:var(--dim);font-size:.78rem;border-right:1px solid var(--border)}
.nx-btns button:last-child{border-right:0}
.nx-btns button.is-on,.nx-btns button:hover{color:#061018;background:var(--grad)}
.nx-iconb{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:#12151f;color:#5bcbff;display:grid;place-items:center}
.nx-split{display:inline-flex;border-radius:10px;overflow:hidden}
.nx-split b{padding:8px 12px;background:var(--grad);color:#061018;font-size:.78rem;font-weight:700}
.nx-split i{padding:8px 8px;background:#3aa8d6;color:#061018;font-style:normal;font-size:.7rem}
.nx-dropm{position:relative}
.nx-dropm summary{list-style:none;padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:#12151f;cursor:pointer;font-size:.8rem}
.nx-dropm summary::-webkit-details-marker{display:none}
.nx-dropm ul{position:absolute;left:0;right:0;top:calc(100% + 4px);margin:0;padding:6px;border:1px solid var(--border);border-radius:8px;background:#12151f;z-index:3}
.nx-dropm li{padding:6px 8px;font-size:.75rem;color:var(--dim);border-radius:6px}
.nx-dropm li:hover{background:#1a2130;color:var(--text)}
.nx-stars{display:flex;gap:2px;flex-direction:row-reverse;justify-content:center}
.nx-stars input{position:absolute;opacity:0;pointer-events:none}
.nx-stars label{font-size:1.2rem;color:#3a4158;cursor:pointer}
.nx-stars input:checked ~ label,.nx-stars label:hover,.nx-stars label:hover ~ label{color:#5bcbff}
.nx-qty{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:999px;overflow:hidden}
.nx-qty button{width:32px;height:32px;background:#12151f;color:var(--text)}
.nx-qty span{min-width:28px;text-align:center;font-weight:700;font-size:.85rem}
.nx-otp{display:flex;gap:6px}
.nx-otp input{width:28px;height:36px;text-align:center;border-radius:8px;border:1px solid var(--border);background:#12151f;color:var(--text);font-weight:700}
.nx-otp input:focus{outline:1px solid #5bcbff}
.nx-pw{display:flex;align-items:center;border:1px solid var(--border);border-radius:10px;background:#12151f;padding:0 8px 0 10px}
.nx-pw input[data-pw]{width:110px;background:transparent;border:0;color:var(--text);padding:8px 0;font-size:.8rem}
.nx-pw button{color:var(--dim);font-size:.7rem;padding:6px}
.nx-pw button.is-on{color:#5bcbff}
.nx-dz{width:min(210px,92%);padding:18px 12px;border-radius:12px;border:1px dashed #3a4158;background:#10131a;text-align:center;color:var(--dim);font-size:.75rem}
.nx-dz strong{display:block;color:var(--text);margin-bottom:4px}
.nx-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:220px}
.nx-chips button{padding:5px 10px;border-radius:999px;border:1px solid var(--border);background:#12151f;color:var(--dim);font-size:.72rem}
.nx-chips button.is-on{color:#061018;background:var(--grad);border-color:transparent}
.nx-swatch{display:flex;gap:8px}
.nx-swatch i{width:18px;height:18px;border-radius:50%;border:2px solid transparent;box-shadow:inset 0 0 0 1px #252a3a}
.nx-swatch i:nth-child(1){background:#5bcbff}
.nx-swatch i:nth-child(2){background:#3ee0c8}
.nx-swatch i:nth-child(3){background:#5ba9ff}
.nx-swatch i.on{border-color:#eef0f6}
.nx-ba{position:relative;width:160px;height:90px;border-radius:12px;overflow:hidden;--p:50%}
.nx-ba .a,.nx-ba .b{position:absolute;inset:0}
.nx-ba .a{background:linear-gradient(120deg,#5bcbff,#5ba9ff)}
.nx-ba .b{background:linear-gradient(120deg,#3ee0c8,#10131a);clip-path:inset(0 0 0 var(--p))}
.nx-ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.nx-ba i{position:absolute;top:0;bottom:0;left:var(--p);width:2px;background:#fff;transform:translateX(-50%);pointer-events:none}
.nx-tabsbar{display:flex;gap:0;width:min(230px,92%);border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#12151f}
.nx-tabsbar button{flex:1;padding:8px 0 6px;font-size:.62rem;color:var(--dim)}
.nx-tabsbar button.is-on{color:#5bcbff;background:#1a2130}
.nx-tabsbar b{display:block;font-size:.95rem;line-height:1}
.nx-cmd{width:min(220px,92%);padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:#12151f;display:flex;align-items:center;gap:8px;color:var(--dim);font-size:.78rem}
.nx-cmd kbd{margin-left:auto;padding:2px 6px;border-radius:6px;border:1px solid var(--border);font-size:.65rem}
.nx-theme{position:relative;width:48px;height:26px;border-radius:999px;background:#1a2130;border:1px solid var(--border);display:block;cursor:pointer}
.nx-theme input{position:absolute;inset:0;opacity:0}
.nx-theme i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#5bcbff;transition:transform .25s}
.nx-theme input:checked + i{transform:translateX(22px);background:#3ee0c8}
.nx-cookie{width:min(230px,92%);padding:12px;border-radius:12px;border:1px solid var(--border);background:#12151f;font-size:.72rem;color:var(--dim);text-align:left}
.nx-cookie strong{display:block;color:var(--text);margin-bottom:6px}
.nx-cookie .row{display:flex;gap:6px;margin-top:8px}
.nx-cookie .row span{padding:5px 8px;border-radius:999px;font-size:.68rem}
.nx-cookie .ok{background:var(--grad);color:#061018;font-weight:700}
.nx-cookie .ng{border:1px solid var(--border)}
.nx-view{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.nx-view button{width:32px;height:28px;background:#12151f;color:var(--dim);font-size:.75rem}
.nx-view button.is-on{color:#061018;background:var(--grad)}
.nx-ring{width:64px;height:64px;border-radius:50%;background:conic-gradient(#5bcbff var(--p,72%),#252a3a 0);display:grid;place-items:center}
.nx-ring span{width:44px;height:44px;border-radius:50%;background:#0d1018;display:grid;place-items:center;font-size:.72rem;font-weight:700}
.nx-wiz{display:flex;align-items:center;gap:0;width:min(220px,92%)}
.nx-wiz i{width:22px;height:22px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;font-size:.65rem;color:var(--dim);background:#12151f;z-index:1}
.nx-wiz i.on{background:var(--grad);color:#061018;border-color:transparent;font-weight:700}
.nx-wiz b{flex:1;height:2px;background:#252a3a}
.nx-meter{width:160px;height:8px;border-radius:99px;background:#1a2130;overflow:hidden}
.nx-meter i{display:block;height:100%;width:65%;background:linear-gradient(90deg,#5bcbff,#3ee0c8)}
.nx-kbd{display:inline-flex;gap:6px}
.nx-kbd kbd{padding:6px 8px;border-radius:6px;border:1px solid #3a4158;background:#1a2130;box-shadow:0 2px 0 #252a3a;font-size:.72rem}
.nx-code{width:min(220px,92%);border-radius:10px;border:1px solid var(--border);overflow:hidden;background:#0b0e16;text-align:left}
.nx-code .bar{display:flex;gap:5px;padding:8px 10px;background:#12151f}
.nx-code .bar i{width:8px;height:8px;border-radius:50%;background:#3a4158}
.nx-code pre{margin:0;padding:8px 10px 12px;color:#9ec9ff;font-size:.68rem}
.nx-term{width:min(220px,92%);border-radius:10px;background:#071018;border:1px solid #1a3040;padding:10px;text-align:left;font-size:.7rem;color:#3ee0c8}
.nx-term b{color:#5bcbff}
.nx-avs{display:flex;padding-left:8px}
.nx-avs i{width:28px;height:28px;border-radius:50%;margin-left:-8px;border:2px solid #0d1018;background:linear-gradient(120deg,#5bcbff,#5ba9ff)}
.nx-avs i:nth-child(2){background:linear-gradient(120deg,#3ee0c8,#5bcbff)}
.nx-avs i:nth-child(3){background:linear-gradient(120deg,#5ba9ff,#3ee0c8)}
.nx-avs i:nth-child(4){background:#1a2130;color:#eef0f6;font-size:.55rem;display:grid;place-items:center;font-weight:700}
.nx-online{position:relative;width:32px;height:32px;border-radius:50%;background:linear-gradient(120deg,#5bcbff,#5ba9ff)}
.nx-online::after{content:"";position:absolute;right:0;bottom:0;width:9px;height:9px;border-radius:50%;background:#3ee0c8;border:2px solid #0d1018}
.nx-empty{width:min(210px,92%);padding:16px 12px;border:1px dashed #3a4158;border-radius:12px;color:var(--dim);font-size:.75rem}
.nx-empty strong{display:block;color:var(--text);margin-bottom:4px}
.nx-kpi{width:120px;padding:12px;border-radius:12px;border:1px solid var(--border);background:#12151f;text-align:left}
.nx-kpi b{display:block;font-size:1.25rem;letter-spacing:-.03em}
.nx-kpi span{color:var(--dim);font-size:.65rem}
.nx-pay{width:168px;height:96px;border-radius:12px;padding:12px;background:linear-gradient(135deg,#5bcbff,#5ba9ff);color:#061018;text-align:left;font-size:.68rem;display:flex;flex-direction:column;justify-content:space-between;font-weight:700}
.nx-pay span{letter-spacing:.12em}
.nx-coupon{width:170px;padding:10px 14px;background:#12151f;border:1px dashed #5bcbff;border-radius:8px;position:relative;font-weight:700}
.nx-coupon::before,.nx-coupon::after{content:"";position:absolute;width:12px;height:12px;background:#0a0c12;border-radius:50%;top:50%;transform:translateY(-50%)}
.nx-coupon::before{left:-7px}
.nx-coupon::after{right:-7px}
.nx-bento{display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:36px 36px;gap:6px;width:160px}
.nx-bento i{border-radius:8px;background:#1a2130}
.nx-bento i:first-child{grid-row:1/3;background:linear-gradient(120deg,#5bcbff,#5ba9ff)}
.nx-logos{display:flex;gap:10px;opacity:.7;font-weight:800;letter-spacing:.04em;font-size:.78rem;color:var(--dim)}
.nx-voice{width:min(210px,92%);padding:12px;border-radius:12px;border:1px solid var(--border);background:#12151f;text-align:left;font-size:.72rem;color:var(--dim)}
.nx-voice b{display:block;color:var(--text);margin-bottom:4px}
.nx-by{font-size:.72rem;color:var(--dim)}
.nx-by strong{color:var(--text)}
.nx-share{display:flex;gap:6px}
.nx-share i{width:28px;height:28px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;font-size:.65rem;color:#5bcbff}
.nx-mail{width:min(220px,92%);display:flex;border:1px solid var(--border);border-radius:999px;overflow:hidden}
.nx-mail span{flex:1;padding:8px 10px;font-size:.72rem;color:var(--dim);background:#12151f;text-align:left}
.nx-mail b{padding:8px 12px;background:var(--grad);color:#061018;font-size:.72rem}
.nx-or{display:flex;align-items:center;gap:8px;width:180px;color:var(--dim);font-size:.7rem}
.nx-or::before,.nx-or::after{content:"";flex:1;height:1px;background:#252a3a}
.nx-404{text-align:center}
.nx-404 b{display:block;font-size:1.8rem;letter-spacing:-.04em}
.nx-404 span{color:var(--dim);font-size:.72rem}
.nx-bn{position:relative;width:32px;height:32px;border-radius:8px;background:#1a2130}
.nx-bn i{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:#ff7aa2;color:#061018;font-size:.58rem;font-weight:800;display:grid;place-items:center}
.nx-prod{width:140px;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:#12151f;text-align:left}
.nx-prod .ph{height:64px;background:linear-gradient(120deg,#5bcbff,#3ee0c8)}
.nx-prod p{margin:0;padding:8px 10px 10px;font-size:.72rem}
.nx-prod strong{display:block;color:var(--text)}
.nx-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;width:160px}
.nx-cal i{aspect-ratio:1;border-radius:4px;background:#1a2130;font-size:.55rem;display:grid;place-items:center;color:var(--dim)}
.nx-cal i.on{background:var(--grad);color:#061018;font-weight:700}
.nx-cmt{width:min(210px,92%);text-align:left;font-size:.72rem}
.nx-cmt p{margin:0;padding:8px;border-radius:8px;background:#12151f;border:1px solid var(--border);color:var(--dim)}
.nx-cmt p + p{margin:6px 0 0 16px}
.nx-win{width:min(210px,92%);border-radius:10px;border:1px solid var(--border);overflow:hidden}
.nx-win .bar{height:22px;background:#1a2130;display:flex;align-items:center;gap:5px;padding:0 8px}
.nx-win .bar i{width:8px;height:8px;border-radius:50%}
.nx-win .bar i:nth-child(1){background:#ff7aa2}
.nx-win .bar i:nth-child(2){background:#e0d36a}
.nx-win .bar i:nth-child(3){background:#3ee0c8}
.nx-win .body{height:48px;background:linear-gradient(120deg,#10131a,#1a2130)}
.nx-grain{width:140px;height:72px;border-radius:12px;background:linear-gradient(120deg,#10131a,#1a2130);position:relative;overflow:hidden}
.nx-grain::after{content:"";position:absolute;inset:0;opacity:.18;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.nx-aurora{width:140px;height:72px;border-radius:12px;background:
  radial-gradient(80px 40px at 20% 80%,rgba(91,185,255,.45),transparent 70%),
  radial-gradient(70px 40px at 80% 20%,rgba(62,224,200,.35),transparent 70%),
  #0a0c12;animation:nx-aurora 5s ease-in-out infinite alternate}
@keyframes nx-aurora{to{filter:hue-rotate(25deg)}}
.nx-fluid{font-size:clamp(.7rem,4vw,1.1rem);font-weight:800}
.nx-sel{font-weight:700}
.nx-sel::selection,.preview .nx-sel::selection{background:#5bcbff;color:#061018}
.nx-scroll{width:90px;height:72px;overflow:auto;border:1px solid var(--border);border-radius:8px;padding:8px;font-size:.65rem;color:var(--dim);text-align:left}
.nx-scroll::-webkit-scrollbar{width:6px}
.nx-scroll::-webkit-scrollbar-thumb{background:#3a4158;border-radius:99px}
.nx-focus a{padding:8px 12px;border-radius:8px;border:1px solid var(--border);color:var(--text);font-size:.8rem}
.nx-focus a:focus-visible{outline:2px solid #5bcbff;outline-offset:3px}
.nx-maskf{width:140px;height:56px;border-radius:12px;background:linear-gradient(120deg,#5bcbff,#3ee0c8);-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
.nx-blend{width:140px;height:56px;border-radius:12px;background:linear-gradient(90deg,#5bcbff,#ff7aa2);display:grid;place-items:center;font-weight:800;font-size:1.1rem;mix-blend-mode:screen;color:#fff}
.nx-kanban{display:flex;gap:8px;width:180px}
.nx-kanban div{flex:1;background:#12151f;border:1px solid var(--border);border-radius:8px;padding:6px;min-height:64px}
.nx-kanban span{display:block;height:14px;border-radius:4px;background:#1a2130;margin-bottom:4px}
.nx-log{width:min(210px,92%);text-align:left;font-size:.7rem;color:var(--dim)}
.nx-log b{color:#5bcbff;margin-right:6px}
.nx-spark{display:flex;align-items:flex-end;gap:2px;height:36px}
.nx-spark i{width:6px;background:#5bcbff;border-radius:2px 2px 0 0}
.nx-pin{width:18px;height:18px;background:#5bcbff;border-radius:50% 50% 50% 0;transform:rotate(-45deg);position:relative}
.nx-pin::after{content:"";position:absolute;inset:4px;background:#0d1018;border-radius:50%}
.nx-play{width:44px;height:44px;border-radius:50%;background:var(--grad);display:grid;place-items:center}
.nx-play i{width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent #061018;margin-left:3px}
.nx-lang{display:inline-flex;border:1px solid var(--border);border-radius:999px;overflow:hidden;font-size:.7rem}
.nx-lang span{padding:6px 10px;color:var(--dim)}
.nx-lang span.on{background:var(--grad);color:#061018;font-weight:700}
.nx-sold{position:relative;width:120px;height:64px;border-radius:10px;background:linear-gradient(120deg,#5bcbff,#3ee0c8)}
.nx-sold b{position:absolute;top:8px;right:-6px;padding:2px 8px;background:#ff7aa2;color:#061018;font-size:.62rem;transform:rotate(12deg)}
.nx-skip{padding:6px 10px;border-radius:6px;background:#5bcbff;color:#061018;font-size:.72rem;font-weight:700}
.nx-count{width:180px;text-align:left;font-size:.75rem;color:var(--dim)}
.nx-count b{float:right;color:#5bcbff}
.nx-count span{display:block;height:4px;margin-top:6px;border-radius:99px;background:#1a2130}
.nx-count i{display:block;width:70%;height:100%;background:#5bcbff;border-radius:99px}
@media(prefers-reduced-motion:reduce){
  .nx-gmove,.nx-mask,.nx-hint,.nx-check path,.nx-typing i,.nx-eq i,.nx-flip b,.nx-blob,.nx-aurora,.g-stripe{animation:none}
}