/* OriginKit 特效实验室样式（从 originkit.html 内联 <style> 抽取，供 studio.html 复用）
   注意：本文件含少量全局 body/:root 规则，请在其他页面于本文件之后引入各自样式，以覆盖 body 背景。 */
:root{
  --ok-bg:#f5f6fb; --ok-bg2:#ffffff; --ok-line:rgba(20,26,48,.10);
  --ok-t1:#7df9ff; --ok-t2:#b388ff; --ok-t3:#ff7ad9; --ok-t4:#ffd166;
  --ok-txt:#1b2030; --ok-dim:#565d72;
}
*{box-sizing:border-box}
body{margin:0;background:
    radial-gradient(1200px 600px at 80% -10%,rgba(179,136,255,.12),transparent 60%),
    radial-gradient(1000px 500px at 0% 0%,rgba(125,249,255,.10),transparent 55%),
    var(--ok-bg);
  color:var(--ok-txt);font-family:"Noto Serif SC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}
.ok-loading{padding:60px;text-align:center;color:var(--ok-dim)}
.ok-page{max-width:1240px;margin:0 auto;padding:28px 22px 60px}
.ok-head{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;
  border-bottom:1px solid var(--ok-line);padding-bottom:18px;margin-bottom:18px}
.ok-back{color:var(--ok-dim);text-decoration:none;font-size:13px;padding:6px 12px;
  border:1px solid var(--ok-line);border-radius:999px;transition:.2s;white-space:nowrap}
.ok-back:hover{color:var(--ok-txt);border-color:var(--ok-t2)}
.ok-head-t{flex:1;min-width:240px}
.ok-head-t h1{margin:0 0 4px;font-size:22px;font-weight:800;
  background:linear-gradient(90deg,var(--ok-t1),var(--ok-t2),var(--ok-t3));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.ok-head-t p{margin:0;color:var(--ok-dim);font-size:13px}
.ok-ext{color:var(--ok-t1);text-decoration:none;font-size:13px;padding:6px 12px;
  border:1px solid var(--ok-line);border-radius:999px;white-space:nowrap;transition:.2s}
.ok-ext:hover{border-color:var(--ok-t1);box-shadow:0 0 16px rgba(125,249,255,.25)}
.ok-intro{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  border:1px solid var(--ok-line);border-radius:16px;padding:14px 18px;margin-bottom:22px;font-size:14px;color:var(--ok-dim);line-height:1.7}
.ok-intro b{color:var(--ok-txt)}
.ok-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:18px}
.ok-card{background:var(--ok-bg2);border:1px solid var(--ok-line);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;transition:.25s;backdrop-filter:blur(4px)}
.ok-card:hover{border-color:rgba(179,136,255,.5);transform:translateY(-3px);box-shadow:0 14px 40px rgba(0,0,0,.45)}
.ok-stage{position:relative;height:240px;background:#05060d;overflow:hidden;border-bottom:1px solid var(--ok-line)}
.ok-canvas{width:100%;height:100%;display:block}
.ok-tunnel-wrap{position:relative;width:100%;height:100%}
.ok-mini{position:absolute;right:10px;bottom:10px;z-index:2;font-size:12px;color:var(--ok-txt);
  background:rgba(10,12,22,.7);border:1px solid var(--ok-line);border-radius:8px;padding:5px 10px;cursor:pointer}
.ok-mini:hover{border-color:var(--ok-t1)}
.ok-meta{padding:14px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.ok-title{font-weight:700;font-size:15px;display:flex;align-items:baseline;gap:8px}
.ok-en{font-size:11px;color:var(--ok-dim);font-weight:400;letter-spacing:.04em}
.ok-desc{font-size:12.5px;color:var(--ok-dim);line-height:1.6}
.ok-code{margin-top:4px;position:relative}
.ok-copy{position:absolute;right:8px;top:8px;z-index:2;font-size:11px;color:var(--ok-t1);
  background:rgba(10,12,22,.85);border:1px solid var(--ok-line);border-radius:7px;padding:4px 9px;cursor:pointer}
.ok-copy:hover{border-color:var(--ok-t1)}
.ok-code pre{margin:0;background:#05060d;border:1px solid var(--ok-line);border-radius:10px;
  padding:12px;max-height:150px;overflow:auto;font-size:11px;line-height:1.55;color:#cdd6ee;
  font-family:"SFMono-Regular",Consolas,Menlo,monospace;white-space:pre-wrap;word-break:break-all}
.ok-center{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.ok-gradient-wrap{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.ok-gradient-text{font-size:42px;font-weight:800;letter-spacing:.04em;
  background:linear-gradient(90deg,var(--ok-t1),var(--ok-t2),var(--ok-t3),var(--ok-t4),var(--ok-t1));
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:okShift 6s linear infinite}
@keyframes okShift{0%{background-position:0% 50%}100%{background-position:300% 50%}}
.ok-input{background:#05060d;border:1px solid var(--ok-line);border-radius:8px;color:var(--ok-txt);
  padding:6px 12px;font-size:13px;text-align:center;width:200px}
.ok-glow-btn{position:relative;border:none;cursor:pointer;color:#fff;font-weight:700;font-size:15px;
  padding:12px 26px;border-radius:12px;background:linear-gradient(120deg,var(--ok-t2),var(--ok-t3));
  box-shadow:0 6px 22px rgba(179,136,255,.35);transition:.25s;overflow:hidden}
.ok-glow-btn:hover{transform:translateY(-1px)}
.ok-ghost-btn{background:transparent;border:1px solid var(--ok-line);color:var(--ok-txt);
  font-weight:600;font-size:14px;padding:11px 22px;border-radius:12px;cursor:pointer;transition:.2s}
.ok-ghost-btn:hover{border-color:var(--ok-t1)}
.ok-glass{width:200px;padding:20px;border-radius:16px;transition:transform .12s ease;
  background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.4)}
.ok-glass-h{font-weight:700;font-size:16px;margin-bottom:6px}
.ok-glass-p{font-size:12px;color:var(--ok-dim);line-height:1.6}
.ok-hero{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  overflow:hidden;text-align:center}
.ok-hero-aurora{position:absolute;inset:-40%;background:
    radial-gradient(40% 40% at 30% 30%,rgba(125,249,255,.5),transparent 60%),
    radial-gradient(45% 45% at 70% 60%,rgba(179,136,255,.55),transparent 60%),
    radial-gradient(40% 40% at 50% 80%,rgba(255,122,217,.4),transparent 60%);
  filter:blur(30px);animation:okAur 9s ease-in-out infinite alternate}
@keyframes okAur{0%{transform:translate(-4%,-2%) scale(1)}100%{transform:translate(4%,3%) scale(1.1)}}
.ok-hero-inner{position:relative;z-index:1;padding:0 16px}
.ok-hero-badge{display:inline-block;font-size:11px;color:var(--ok-t1);border:1px solid var(--ok-line);
  border-radius:999px;padding:4px 10px;margin-bottom:10px;background:rgba(10,12,22,.5)}
.ok-hero-title{margin:0 0 8px;font-size:26px;font-weight:800;line-height:1.25;
  background:linear-gradient(90deg,#fff,var(--ok-t1));-webkit-background-clip:text;background-clip:text;color:transparent}
.ok-hero-sub{margin:0 0 14px;font-size:12.5px;color:var(--ok-dim)}
.ok-hero-cta{display:flex;gap:10px;justify-content:center}
.ok-foot{text-align:center;color:var(--ok-dim);font-size:12px;margin-top:34px;padding-top:18px;border-top:1px solid var(--ok-line)}
.ok-more{text-align:center;color:var(--ok-dim);font-size:13px;padding:26px 0 6px;letter-spacing:.05em}
.ok-stage-idle{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:rgba(255,255,255,.35);font-size:12px;background:#06070f;letter-spacing:.08em}
@media (max-width:560px){.ok-hero-title{font-size:21px}.ok-gradient-text{font-size:34px}}
/* ===== 离屏暂停 ===== */
.ok-paused *{animation-play-state:paused !important}
/* ===== 分类导航 ===== */
.ok-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.ok-cat{border:1px solid var(--ok-line);background:transparent;color:var(--ok-dim);border-radius:999px;
  padding:6px 14px;font-size:12.5px;cursor:pointer;transition:.2s}
.ok-cat:hover{color:var(--ok-txt);border-color:var(--ok-t2)}
.ok-cat.active{background:linear-gradient(120deg,var(--ok-t2),var(--ok-t3));color:#fff;border-color:transparent}
/* ===== 渐变背景 GradientScene ===== */
.ok-grad{width:100%;height:100%;background-size:300% 300% !important;animation:okShift 8s linear infinite}
.ok-grad-grid{background-size:22px 22px !important;animation:none}
.ok-grad-mesh,.ok-grad-mesh2,.ok-grad-blobs,.ok-grad-liquid,.ok-grad-liquid2,.ok-grad-rays,.ok-grad-plasma{animation:okMorphGrad 10s ease-in-out infinite}
@keyframes okMorphGrad{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(38deg)}}
/* ===== 文字动效 TextFX ===== */
.ok-text{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:34px;letter-spacing:.03em;text-align:center}
.ok-text-gradent,.ok-text-gradent2,.ok-text-out_line,.ok-text-holographic{background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c4),var(--c1));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:okShift 6s linear infinite}
.ok-text-glitch{color:var(--c1);text-shadow:1.5px 0 var(--c2),-1.5px 0 var(--c3);animation:okGlitch .42s infinite}
@keyframes okGlitch{0%{transform:translate(0)}20%{transform:translate(-2px,1px)}40%{transform:translate(2px,-1px)}60%{transform:translate(-1px,-1px)}80%{transform:translate(1px,1px)}100%{transform:translate(0)}}
.ok-text-typing{color:var(--c1)}
.ok-caret{display:inline-block;width:2px;height:1em;background:var(--c1);margin-left:2px;vertical-align:-2px;animation:okBlink 1s step-end infinite}
@keyframes okBlink{50%{opacity:0}}
.ok-text-neon{color:#fff;text-shadow:0 0 6px var(--c1),0 0 14px var(--c1),0 0 26px var(--c2);animation:okNeon 1.6s ease-in-out infinite alternate}
@keyframes okNeon{0%{opacity:.62}100%{opacity:1;text-shadow:0 0 10px var(--c1),0 0 22px var(--c2),0 0 40px var(--c3)}}
.ok-text-wave span{display:inline-block;color:var(--c1);animation:okWave 1.4s ease-in-out infinite}
@keyframes okWave{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.ok-text-stroke,.ok-text-stroke2{color:transparent;-webkit-text-stroke:1.6px var(--c1);animation:okStroke 4s linear infinite}
@keyframes okStroke{0%{-webkit-text-stroke-color:var(--c1)}50%{-webkit-text-stroke-color:var(--c2)}100%{-webkit-text-stroke-color:var(--c1)}}
.ok-text-shake{color:var(--c1);animation:okShake .4s infinite}
@keyframes okShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px) rotate(-1deg)}75%{transform:translateX(3px) rotate(1deg)}}
.ok-text-melt{color:var(--c1);animation:okMelt 3s ease-in-out infinite}
@keyframes okMelt{0%,100%{filter:blur(0);transform:translateY(0)}50%{filter:blur(2px);transform:translateY(6px);opacity:.8}}
.ok-text-scramble{color:var(--c1);font-family:monospace}
/* ===== 按钮动效 ButtonFX ===== */
.ok-btn{position:relative;border:none;cursor:pointer;color:#fff;font-weight:700;font-size:15px;padding:12px 26px;border-radius:12px;overflow:hidden;transition:.25s;background:linear-gradient(120deg,var(--c1),var(--c2))}
.ok-btn-glow,.ok-btn-glow2{box-shadow:0 6px 22px rgba(0,0,0,.3)}
.ok-btn-glow:hover,.ok-btn-glow2:hover{box-shadow:0 0 30px var(--c1)}
.ok-btn-fillUp,.ok-btn-fillUp2{position:relative;z-index:0}
.ok-btn-fillUp::before,.ok-btn-fillUp2::before{content:'';position:absolute;inset:0;background:var(--c3);transform:translateY(100%);transition:transform .3s;z-index:-1}
.ok-btn-fillUp:hover::before,.ok-btn-fillUp2:hover::before{transform:translateY(0)}
.ok-btn-borderDraw{background:transparent;border:2px solid var(--c1);z-index:0}
.ok-btn-borderDraw::before{content:'';position:absolute;inset:0;border:2px solid var(--c2);clip-path:inset(0 100% 100% 0);transition:.4s;z-index:-1}
.ok-btn-borderDraw:hover::before{clip-path:inset(0 0 0 0)}
.ok-btn-shine::after{content:'';position:absolute;top:0;left:-60%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);animation:okShine 2.4s infinite}
@keyframes okShine{0%{left:-60%}100%{left:120%}}
.ok-btn-ripple:active::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.4);border-radius:50%;animation:okRipple .6s ease-out}
@keyframes okRipple{from{transform:scale(0);opacity:.6}to{transform:scale(3);opacity:0}}
.ok-btn-shake:hover{animation:okShake .4s infinite}
.ok-btn-gradientBorder,.ok-btn-gradientBorder2{background:#0a0a14;border:2px solid transparent;background-image:linear-gradient(#0a0a14,#0a0a14),conic-gradient(from 0deg,var(--c1),var(--c2),var(--c3),var(--c1));background-origin:border-box;background-clip:padding-box,border-box}
.ok-btn-arrow:hover{padding-right:32px}
.ok-btn-pulse{animation:okPulse 1.8s ease-in-out infinite}
@keyframes okPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06);box-shadow:0 0 24px var(--c1)}}
.ok-btn-slideFill::before{content:'';position:absolute;inset:0;background:var(--c2);transform:translateX(-100%);transition:.3s;z-index:-1}
.ok-btn-slideFill:hover::before{transform:translateX(0)}
.ok-btn-rotateIcon:hover{transform:rotate(2deg)}
/* ===== 卡片动效 CardFX ===== */
.ok-glass.ok-card-tilt,.ok-glass.ok-card-spotlight,.ok-glass.ok-card-magnetic{transition:transform .12s ease}
.ok-glass.ok-card-spotlight,.ok-glass.ok-card-shine{overflow:hidden;position:relative}
.ok-glass.ok-card-spotlight::before{content:'';position:absolute;inset:0;background:radial-gradient(150px 150px at var(--mx,50%) var(--my,50%),rgba(255,255,255,.2),transparent 60%);opacity:0;transition:opacity .2s}
.ok-glass.ok-card-spotlight:hover::before{opacity:1}
.ok-glass.ok-card-neonBorder{transition:.25s}
.ok-glass.ok-card-neonBorder:hover{border-color:var(--c1);box-shadow:0 0 22px var(--c1),inset 0 0 12px rgba(255,255,255,.1)}
.ok-glass.ok-card-gradientBorder{border:2px solid transparent;background-image:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.02)),conic-gradient(from 0deg,var(--c1),var(--c2),var(--c3),var(--c1));background-origin:border-box;background-clip:padding-box,border-box}
.ok-glass.ok-card-hoverLift:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(0,0,0,.5)}
.ok-glass.ok-card-shine::before{content:'';position:absolute;top:0;left:-60%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:okShine 3s infinite}
.ok-flip{width:200px;height:130px;perspective:900px}
.ok-flip-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s}
.ok-flip:hover .ok-flip-in{transform:rotateY(180deg)}
.ok-flip-front,.ok-flip-back{position:absolute;inset:0;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);border-radius:16px;display:flex;align-items:center;justify-content:center;font-weight:700;backface-visibility:hidden}
.ok-flip-front{background:linear-gradient(135deg,var(--c1),var(--c2))}
.ok-flip-back{background:linear-gradient(135deg,var(--c2),var(--c3));transform:rotateY(180deg)}
/* ===== 光标动效 CursorFX ===== */
.ok-cursor{position:relative;width:100%;height:100%;overflow:hidden;cursor:none}
.ok-cs-main{position:absolute;width:12px;height:12px;background:var(--c1);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 10px var(--c1);transition:transform .05s linear}
.ok-cs-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--c1);transform:translate(-50%,-50%);pointer-events:none}
.ok-cs-ring{position:absolute;width:34px;height:34px;border:2px solid var(--c1);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;animation:okRing 1.2s ease-out infinite}
@keyframes okRing{0%{opacity:.9;transform:translate(-50%,-50%) scale(.4)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}
.ok-cs-spot{position:absolute;width:150px;height:150px;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;background:radial-gradient(circle,var(--c1),transparent 65%);mix-blend-mode:screen}
.ok-cs-par{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--c1);transform:translate(-50%,-50%);pointer-events:none}
.ok-cs-emoji{position:absolute;transform:translate(-50%,-50%);pointer-events:none;font-size:20px;color:var(--c1)}
.ok-cs-mag{position:absolute;width:40px;height:40px;border:2px dashed var(--c1);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--c1);transform:translate(-50%,-50%);pointer-events:none}
/* ===== 加载动画 LoaderFX ===== */
.ok-loader{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.ok-ld-obj{position:relative;width:54px;height:54px}
.ok-ld-obj i{position:absolute;display:block;background:var(--c1)}
.ok-loader-orbit .ok-ld-obj,.ok-loader-orbit2 .ok-ld-obj{animation:okSpin 1.4s linear infinite}
.ok-loader-orbit .ok-ld-obj i,.ok-loader-orbit2 .ok-ld-obj i{width:10px;height:10px;border-radius:50%;top:50%;left:50%;margin:-5px}
.ok-loader-orbit .ok-ld-obj i:nth-child(1),.ok-loader-orbit2 .ok-ld-obj i:nth-child(1){transform:translate(18px,0)}
.ok-loader-orbit .ok-ld-obj i:nth-child(2),.ok-loader-orbit2 .ok-ld-obj i:nth-child(2){transform:translate(-9px,15px)}
.ok-loader-orbit .ok-ld-obj i:nth-child(3),.ok-loader-orbit2 .ok-ld-obj i:nth-child(3){transform:translate(-9px,-15px)}
.ok-loader-dots .ok-ld-obj,.ok-loader-bars .ok-ld-obj,.ok-loader-wave .ok-ld-obj,.ok-loader-blocks .ok-ld-obj{display:flex;align-items:center;justify-content:center;gap:8px;width:auto;height:auto}
.ok-loader-dots .ok-ld-obj i{position:static;width:10px;height:10px;border-radius:50%;animation:okBlink 1s infinite}
.ok-loader-dots .ok-ld-obj i:nth-child(1){animation-delay:0s}.ok-loader-dots .ok-ld-obj i:nth-child(2){animation-delay:.2s}.ok-loader-dots .ok-ld-obj i:nth-child(3){animation-delay:.4s}.ok-loader-dots .ok-ld-obj i:nth-child(4){animation-delay:.6s}
.ok-loader-bars .ok-ld-obj i,.ok-loader-bars2 .ok-ld-obj i{position:static;width:8px;height:28px;border-radius:4px;animation:okBar 1s ease-in-out infinite}
.ok-loader-bars .ok-ld-obj i:nth-child(1),.ok-loader-bars2 .ok-ld-obj i:nth-child(1){animation-delay:0s}.ok-loader-bars .ok-ld-obj i:nth-child(2),.ok-loader-bars2 .ok-ld-obj i:nth-child(2){animation-delay:.15s}.ok-loader-bars .ok-ld-obj i:nth-child(3),.ok-loader-bars2 .ok-ld-obj i:nth-child(3){animation-delay:.3s}.ok-loader-bars .ok-ld-obj i:nth-child(4),.ok-loader-bars2 .ok-ld-obj i:nth-child(4){animation-delay:.45s}.ok-loader-bars .ok-ld-obj i:nth-child(5),.ok-loader-bars2 .ok-ld-obj i:nth-child(5){animation-delay:.6s}
@keyframes okBar{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
.ok-loader-ring .ok-ld-obj,.ok-loader-ring2 .ok-ld-obj{border:4px solid rgba(255,255,255,.15);border-top-color:var(--c1);border-radius:50%;animation:okSpin 1s linear infinite}
.ok-loader-pulse .ok-ld-obj,.ok-loader-pulse2 .ok-ld-obj{border-radius:50%;background:var(--c1);animation:okPulse2 1.2s ease-in-out infinite}
@keyframes okPulse2{0%{transform:scale(.4);opacity:.85}100%{transform:scale(1.3);opacity:0}}
.ok-loader-wave .ok-ld-obj i{position:static;width:7px;height:32px;border-radius:4px;animation:okWaveBar 1s ease-in-out infinite}
@keyframes okWaveBar{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
.ok-loader-infinity .ok-ld-obj::after{content:'∞';font-size:44px;color:var(--c1)}
.ok-loader-infinity .ok-ld-obj{animation:okSpin 2s linear infinite}
.ok-loader-spinner .ok-ld-obj,.ok-loader-spinner2 .ok-ld-obj{border-radius:50%;background:conic-gradient(var(--c1),transparent 60%);animation:okSpin 1s linear infinite}
.ok-loader-blocks .ok-ld-obj{flex-wrap:wrap;width:44px}
.ok-loader-blocks .ok-ld-obj i{position:static;width:16px;height:16px;border-radius:3px;animation:okBlink 1.2s infinite}
.ok-loader-blocks .ok-ld-obj i:nth-child(1){animation-delay:0s}.ok-loader-blocks .ok-ld-obj i:nth-child(2){animation-delay:.3s}.ok-loader-blocks .ok-ld-obj i:nth-child(3){animation-delay:.6s}.ok-loader-blocks .ok-ld-obj i:nth-child(4){animation-delay:.9s}
.ok-loader-dice .ok-ld-obj{border-radius:12px;background:var(--c1);animation:okSpin 1.4s ease-in-out infinite}
@keyframes okSpin{to{transform:rotate(360deg)}}
/* ===== 跑马灯 MarqueeFX ===== */
.ok-marquee{overflow:hidden;white-space:nowrap;width:90%}
.ok-mq-track{display:inline-flex;animation:okMarq 14s linear infinite}
.ok-mq-item{font-weight:800;font-size:24px;padding-right:24px;background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3));-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes okMarq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.ok-mq-logos .ok-mq-track{animation-direction:reverse}
.ok-mq-vert{height:200px;width:auto;white-space:normal;overflow:hidden}
.ok-mq-vert .ok-mq-track{flex-direction:column;animation:okMarqV 10s linear infinite}
@keyframes okMarqV{0%{transform:translateY(0)}100%{transform:translateY(-50%)}}
/* ===== 柔形形变 MorphFX ===== */
.ok-morph{width:160px;height:160px}
.ok-morph-blob,.ok-morph-blob2{background:linear-gradient(135deg,var(--c1),var(--c2));border-radius:42% 58% 63% 37% / 41% 44% 56% 59%;animation:okBlob 8s ease-in-out infinite}
.ok-morph-blob2{background:linear-gradient(135deg,var(--c3),var(--c4))}
@keyframes okBlob{0%,100%{border-radius:42% 58% 63% 37% / 41% 44% 56% 59%}50%{border-radius:60% 40% 33% 67% / 58% 62% 38% 42%}}
.ok-morph-liq{font-size:60px;font-weight:900;background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c1));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:okShift 5s linear infinite;filter:blur(.4px)}