/* ═══════════════════════════════════════════════════════════
   UI 模式词典 · 演示舞台基础与通用工具类
   所有演示样式均限定在 .s 舞台内，固定色板不随站点主题变化
   ═══════════════════════════════════════════════════════════ */

.s{
  /* 固定演示色板 */
  --i-bg:#ffffff;
  --i-bg2:#f4f4f7;
  --i-bg3:#e9eaef;
  --i-line:#e4e4ea;
  --i-line2:#d2d3dc;
  --i-tx:#17171b;
  --i-tx2:#60606c;
  --i-tx3:#9a9aa6;
  --i-br:#4f46e5;
  --i-br2:#7c3aed;
  --i-br3:#c026d3;
  --i-gd:linear-gradient(135deg,#4f46e5 0%,#7c3aed 55%,#c026d3 100%);
  --i-gd2:linear-gradient(120deg,#06b6d4,#4f46e5 60%,#a855f7);
  --i-gd3:linear-gradient(135deg,#f59e0b,#ef4444);
  --i-ok:#10b981;
  --i-warn:#f59e0b;
  --i-err:#ef4444;
  --i-sh:0 1px 2px rgba(16,17,26,.06),0 10px 26px -12px rgba(16,17,26,.2);
  --i-sh-s:0 1px 2px rgba(16,17,26,.06),0 4px 12px -6px rgba(16,17,26,.14);
  --i-sh-l:0 26px 60px -20px rgba(16,17,26,.32);
  position:relative;
  width:100%;max-width:100%;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  font-size:11.5px;line-height:1.5;color:var(--i-tx);
  -webkit-font-smoothing:antialiased;
}
.s *{box-sizing:border-box}
.s h1,.s h2,.s h3,.s h4,.s h5,.s h6,.s p,.s ul,.s ol,.s figure,.s blockquote{margin:0;padding:0}
.s ul,.s ol{list-style:none}
.s button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;line-height:inherit}
.s input,.s select,.s textarea{font-family:inherit;font-size:inherit;color:inherit}
.s img,.s svg,.s video{display:block;max-width:100%}
.s table{border-collapse:collapse;width:100%}
.s a{color:inherit;text-decoration:none}

/* 满铺变体：演示占满整个舞台 */
.s--abs{position:absolute;inset:0;width:auto;height:auto}

/* 文案层级 */
.d-h1{font-size:23px;line-height:1.14;letter-spacing:-.033em;font-weight:770}
.d-h2{font-size:17px;line-height:1.22;letter-spacing:-.024em;font-weight:720}
.d-h3{font-size:13.5px;line-height:1.3;letter-spacing:-.014em;font-weight:680}
.d-h4{font-size:12px;font-weight:650;letter-spacing:-.005em}
.d-sub{font-size:11.5px;color:var(--i-tx2);line-height:1.6}
.d-tiny{font-size:10px;color:var(--i-tx3)}
.d-eyebrow{display:inline-flex;align-items:center;gap:5px;padding:3.5px 9px;border:1px solid var(--i-line);border-radius:99px;background:var(--i-bg);font-size:9.5px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--i-br)}
.d-eyebrow--solid{background:var(--i-bg3);border-color:transparent;color:var(--i-tx2)}

/* 通用按钮 */
.d-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:28px;padding:0 13px;border-radius:8px;font-size:11px;font-weight:620;white-space:nowrap;transition:all .18s cubic-bezier(.4,0,.2,1)}
.d-btn--p{background:#17171b;color:#fff;box-shadow:0 5px 14px -5px rgba(23,23,27,.55)}
.d-btn--p:hover{background:#33333d}
.d-btn--gd{background:var(--i-gd);color:#fff;box-shadow:0 6px 16px -6px rgba(99,102,241,.65)}
.d-btn--g{background:var(--i-bg);color:var(--i-tx);border:1px solid var(--i-line);box-shadow:var(--i-sh-s)}
.d-btn--ghost{background:transparent;color:var(--i-tx2)}
.d-btn--link{height:auto;padding:0;color:var(--i-br);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.d-btn--pill{border-radius:99px}
.d-btn--sm{height:24px;padding:0 10px;font-size:10.5px}
.d-btn--lg{height:33px;padding:0 17px;font-size:12px}
.d-btn--block{width:100%}

/* 通用卡片 */
.d-card{border:1px solid var(--i-line);border-radius:12px;background:var(--i-bg);box-shadow:var(--i-sh-s)}
.d-card__bd{padding:12px}
.d-card__hd{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--i-line)}

/* 通用头像 / 徽章 / 标签 */
.d-av{display:grid;place-items:center;width:24px;height:24px;border-radius:99px;background:var(--i-gd);color:#fff;font-size:9.5px;font-weight:700;flex:0 0 auto;overflow:hidden}
.d-av--sq{border-radius:7px}
.d-av--sm{width:19px;height:19px;font-size:8px}
.d-av--lg{width:34px;height:34px;font-size:12px}
.d-badge{display:inline-flex;align-items:center;gap:4px;padding:2.5px 7px;border-radius:6px;background:var(--i-bg3);color:var(--i-tx2);font-size:9.5px;font-weight:600}
.d-badge--b{background:#eef2ff;color:#4338ca}
.d-badge--g{background:#dcfce7;color:#047857}
.d-badge--r{background:#fee2e2;color:#b91c1c}
.d-badge--y{background:#fef3c7;color:#b45309}
.d-dot{width:6px;height:6px;border-radius:99px;background:var(--i-ok);flex:0 0 auto}
.d-dot--pulse{box-shadow:0 0 0 0 rgba(16,185,129,.6);animation:d-pulse 1.9s infinite}
@keyframes d-pulse{70%{box-shadow:0 0 0 7px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}

/* 通用布局 */
.d-row{display:flex;align-items:center;gap:7px}
.d-row--between{justify-content:space-between}
.d-col{display:flex;flex-direction:column}
.d-grid{display:grid;gap:8px}
.d-spacer{flex:1}
.d-center{display:flex;align-items:center;justify-content:center}
.d-circle{display:grid;place-items:center;border-radius:99px}

/* 通用图标位（用色块代替图标，保持演示清爽） */
.d-ico{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--i-bg3);color:var(--i-tx2);font-size:11px;flex:0 0 auto}
.d-ico--gd{background:var(--i-gd);color:#fff}
.d-ico--b{background:#eef2ff;color:#4f46e5}
.d-ico--g{background:#dcfce7;color:#047857}
.d-ico--y{background:#fef3c7;color:#b45309}
.d-ico--r{background:#fee2e2;color:#b91c1c}

/* 通用输入 */
.d-input{display:flex;align-items:center;gap:7px;height:30px;padding:0 10px;border:1px solid var(--i-line);border-radius:8px;background:var(--i-bg);font-size:11px;color:var(--i-tx2)}
.d-input--focus{border-color:var(--i-br);box-shadow:0 0 0 3px rgba(79,70,229,.14)}
.d-input__ph{color:var(--i-tx3)}

/* 用色块模拟图片的占位 */
.d-img{border-radius:9px;background:var(--i-gd);background-size:cover;flex:0 0 auto}
.d-img--gray{background:linear-gradient(135deg,#e6e7ee,#d3d5e0)}
.d-img--warm{background:linear-gradient(135deg,#fbbf24,#f97316 55%,#ec4899)}
.d-img--cool{background:linear-gradient(135deg,#22d3ee,#3b82f6 55%,#8b5cf6)}
.d-img--green{background:linear-gradient(135deg,#34d399,#059669 60%,#065f46)}
.d-img--dark{background:linear-gradient(135deg,#1f2937,#4c1d95 60%,#0f172a)}

/* ═══════════════════════════════════════════════════════════
   01 · 首屏 Hero Section
   ═══════════════════════════════════════════════════════════ */

/* 01 居中英雄区 Centered Hero */
.d-hero-c{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:4px 0}
.d-hero-c .d-h1{background:linear-gradient(180deg,#17171b 35%,#5c5c6c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.d-hero-c .d-sub{max-width:222px}
.d-hero-c__cta{display:flex;gap:7px;margin-top:2px}

/* 02 分栏英雄区 Split Hero */
.d-hero-split{display:grid;grid-template-columns:1.05fr 1fr;gap:14px;align-items:center}
.d-hero-split__copy{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.d-hero-split__art{position:relative;aspect-ratio:4/3.4;border-radius:12px;background:var(--i-gd);box-shadow:var(--i-sh);overflow:hidden}
.d-hero-split__art::after{content:'';position:absolute;inset:0;background:radial-gradient(80% 60% at 70% 15%,rgba(255,255,255,.45),transparent 60%)}
.d-hero-split__float{position:absolute;left:9px;bottom:9px;right:22px;padding:7px 8px;border-radius:8px;background:rgba(255,255,255,.94);box-shadow:var(--i-sh-s);display:flex;align-items:center;gap:6px;font-size:9.5px;font-weight:600}

/* 03 全出血英雄区 Full-bleed Hero */
.d-hero-bleed{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:9px;padding:24px 20px;background:linear-gradient(135deg,#1e1b4b 0%,#4c1d95 48%,#831843 100%);color:#fff;overflow:hidden}
.d-hero-bleed::before{content:'';position:absolute;inset:0;background:radial-gradient(50% 60% at 20% 15%,rgba(255,255,255,.22),transparent 65%)}
.d-hero-bleed>*{position:relative}
.d-hero-bleed .d-h1{color:#fff}
.d-hero-bleed .d-sub{color:rgba(255,255,255,.78);max-width:230px}
.d-hero-bleed .d-btn--p{background:#fff;color:#1e1b4b;box-shadow:0 8px 20px -8px rgba(0,0,0,.6)}
.d-hero-bleed .d-btn--g{background:rgba(255,255,255,.13);color:#fff;border-color:rgba(255,255,255,.3);backdrop-filter:blur(6px)}
.d-hero-bleed .d-eyebrow{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.26);color:#fff;backdrop-filter:blur(6px)}

/* 04 极光渐变首屏 Aurora Hero */
.d-hero-aurora{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:9px;padding:24px;background:#07070c;color:#fff;overflow:hidden}
.d-hero-aurora__glow{position:absolute;inset:-45%;background:
  radial-gradient(36% 40% at 24% 30%,rgba(99,102,241,.9),transparent 62%),
  radial-gradient(32% 36% at 76% 24%,rgba(217,70,239,.62),transparent 60%),
  radial-gradient(38% 42% at 56% 84%,rgba(6,182,212,.55),transparent 62%);
  filter:blur(26px);animation:d-aurora 16s ease-in-out infinite alternate}
@keyframes d-aurora{to{transform:translate3d(5%,-4%,0) scale(1.12) rotate(7deg)}}
.d-hero-aurora__noise{position:absolute;inset:0;opacity:.28;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.d-hero-aurora>*{position:relative;z-index:1}
.d-hero-aurora .d-h1{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.4)}
.d-hero-aurora .d-sub{color:rgba(255,255,255,.72);max-width:228px}
.d-hero-aurora .d-btn--p{background:#fff;color:#0b0b12}
.d-hero-aurora .d-btn--g{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.24)}

/* 05 便当格首屏 Bento Hero */
.d-hero-bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:42px;gap:6px}
.d-hero-bento__cell{display:flex;flex-direction:column;justify-content:flex-end;gap:3px;padding:8px;border:1px solid var(--i-line);border-radius:9px;background:var(--i-bg);font-size:9px;color:var(--i-tx3)}
.d-hero-bento__cell b{font-size:15px;font-weight:750;color:var(--i-tx);letter-spacing:-.02em;line-height:1}
.d-hero-bento__cell--w{grid-column:span 2}
.d-hero-bento__cell--h{grid-row:span 2}
.d-hero-bento__cell--main{grid-column:span 2;grid-row:span 2;justify-content:center;background:var(--i-gd);border-color:transparent;color:#fff;padding:11px}
.d-hero-bento__cell--main b{color:#fff;font-size:14px;letter-spacing:-.02em}

/* 06 浏览器样机首屏 Browser Chrome Mockup */
.d-hero-browser{display:flex;flex-direction:column;gap:9px}
.d-hero-browser__win{border:1px solid var(--i-line2);border-radius:11px;background:#fff;overflow:hidden;box-shadow:var(--i-sh)}
.d-hero-browser__bar{display:flex;align-items:center;gap:4px;padding:6px 8px;background:var(--i-bg2);border-bottom:1px solid var(--i-line)}
.d-hero-browser__dot{width:6px;height:6px;border-radius:99px;background:#ff5f57}
.d-hero-browser__dot:nth-child(2){background:#febc2e}
.d-hero-browser__dot:nth-child(3){background:#28c840}
.d-hero-browser__url{flex:1;margin-left:5px;height:14px;display:flex;align-items:center;padding:0 8px;border:1px solid var(--i-line);border-radius:99px;background:#fff;font-size:7.5px;color:var(--i-tx3)}
.d-hero-browser__body{display:grid;grid-template-columns:38% 1fr;gap:8px;padding:10px}
.d-hero-browser__side{display:flex;flex-direction:column;gap:5px}
.d-hero-browser__ln{height:5px;border-radius:99px;background:var(--i-bg3)}
.d-hero-browser__main{display:flex;flex-direction:column;gap:5px}

/* 07 眉题 + 巨号标题 Eyebrow + Display Headline */
.d-hero-display{display:flex;flex-direction:column;gap:9px}
.d-hero-display .d-h1{font-size:28px;line-height:1.06;letter-spacing:-.042em}
.d-hero-display .d-h1 em{font-style:normal;background:var(--i-gd);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.d-hero-display__meta{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--i-tx3);padding-top:6px;border-top:1px solid var(--i-line)}

/* 08 双 CTA 首屏 Dual CTA Hero */
.d-hero-dual{display:flex;flex-direction:column;gap:9px;text-align:center;align-items:center}
.d-hero-dual__btns{display:flex;gap:7px}
.d-hero-dual__micro{display:flex;align-items:center;gap:5px;font-size:9.5px;color:var(--i-tx3)}

/* 09 邮箱招募首屏 Email Capture Hero */
.d-hero-email{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
.d-hero-email__form{display:flex;gap:5px;width:100%;max-width:238px;padding:4px;border:1px solid var(--i-line);border-radius:11px;background:#fff;box-shadow:var(--i-sh-s)}
.d-hero-email__form input{flex:1;min-width:0;border:0;outline:none;background:none;font-size:10.5px;padding-left:7px;color:var(--i-tx)}
.d-hero-email__form input::placeholder{color:var(--i-tx3)}
.d-hero-email__note{font-size:9px;color:var(--i-tx3)}

/* 10 视频背景首屏 Video Background Hero */
.d-hero-video{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;color:#fff;overflow:hidden;background:linear-gradient(150deg,#0f172a,#312e81 55%,#701a75);padding:24px}
.d-hero-video::before{content:'';position:absolute;inset:0;background:
  radial-gradient(50% 60% at 30% 25%,rgba(56,189,248,.35),transparent 60%),
  radial-gradient(45% 55% at 75% 70%,rgba(244,114,182,.35),transparent 60%);animation:d-aurora 18s ease-in-out infinite alternate}
.d-hero-video__play{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:99px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(8px);color:#fff;font-size:12px}
.d-hero-video__play::after{content:'';position:absolute;inset:-7px;border-radius:99px;border:1px solid rgba(255,255,255,.28);animation:d-ripple 2.4s ease-out infinite}
@keyframes d-ripple{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.4);opacity:0}}
.d-hero-video>*{position:relative;z-index:1}
.d-hero-video .d-h1{color:#fff}
.d-hero-video .d-sub{color:rgba(255,255,255,.75)}

/* ═══════════════════════════════════════════════════════════
   02 · 导航 Navigation
   ═══════════════════════════════════════════════════════════ */

/* 11 吸顶模糊导航 Sticky Blur Header */
.d-navblur__page{position:absolute;inset:0;padding:52px 14px 14px;display:flex;flex-direction:column;gap:7px;background:
  radial-gradient(60% 70% at 12% 10%,#c7d2fe,transparent 62%),
  radial-gradient(55% 65% at 88% 24%,#fbcfe8,transparent 60%),
  linear-gradient(170deg,#f8fafc,#eef2ff)}
.d-navblur__art{height:56px;border-radius:9px;background:var(--i-gd);opacity:.9}
.d-navblur__bar{position:absolute;top:0;left:0;right:0;height:42px;display:flex;align-items:center;gap:10px;padding:0 14px;background:rgba(255,255,255,.62);backdrop-filter:blur(14px) saturate(1.8);border-bottom:1px solid rgba(255,255,255,.6);box-shadow:0 4px 16px -10px rgba(16,17,26,.3);font-size:10.5px}
.d-navblur__logo{font-weight:750;letter-spacing:-.02em;font-size:11px}
.d-navblur__link{color:var(--i-tx2)}
.d-navblur__link.is-on{color:var(--i-tx);font-weight:650}

/* 12 超级菜单 Mega Menu */
.d-mega{display:flex;flex-direction:column;gap:8px}
.d-mega__bar{display:flex;align-items:center;gap:11px;padding:7px 11px;border:1px solid var(--i-line);border-radius:9px;background:#fff;font-size:10.5px;box-shadow:var(--i-sh-s)}
.d-mega__bar .is-on{color:var(--i-br);font-weight:650}
.d-mega__panel{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:11px;padding:12px;border:1px solid var(--i-line);border-radius:11px;background:#fff;box-shadow:var(--i-sh)}
.d-mega__col{display:flex;flex-direction:column;gap:7px}
.d-mega__cap{font-size:8.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--i-tx3)}
.d-mega__item{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--i-tx2)}
.d-mega__promo{display:flex;flex-direction:column;justify-content:space-between;gap:6px;padding:9px;border-radius:9px;background:var(--i-gd);color:#fff}
.d-mega__promo b{font-size:10.5px}
.d-mega__promo span{font-size:8.5px;opacity:.85}

/* 13 命令面板 Command Palette */
.d-cmdk{display:flex;flex-direction:column;gap:0;border:1px solid var(--i-line2);border-radius:11px;background:rgba(255,255,255,.97);backdrop-filter:blur(20px);box-shadow:var(--i-sh-l);overflow:hidden}
.d-cmdk__input{display:flex;align-items:center;gap:7px;padding:10px 11px;border-bottom:1px solid var(--i-line);font-size:11px;color:var(--i-tx)}
.d-cmdk__input .d-tiny{margin-left:auto;padding:1.5px 5px;border:1px solid var(--i-line);border-radius:4px;background:var(--i-bg2);font-size:8.5px}
.d-cmdk__list{padding:5px;display:flex;flex-direction:column;gap:1px}
.d-cmdk__cap{padding:5px 8px 3px;font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--i-tx3)}
.d-cmdk__item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;font-size:10.5px;color:var(--i-tx2)}
.d-cmdk__item.is-on{background:var(--i-br);color:#fff}
.d-cmdk__item.is-on .d-ico{background:rgba(255,255,255,.2);color:#fff}
.d-cmdk__kbd{margin-left:auto;font-family:ui-monospace,Menlo,monospace;font-size:8.5px;color:var(--i-tx3)}
.d-cmdk__item.is-on .d-cmdk__kbd{color:rgba(255,255,255,.8)}

/* 14 全屏遮罩菜单 Fullscreen Overlay Menu */
.d-overlay{position:absolute;inset:0;display:flex;flex-direction:column;padding:16px;background:rgba(12,12,18,.94);backdrop-filter:blur(16px);color:#fff;overflow:hidden}
.d-overlay::before{content:'';position:absolute;inset:0;background:radial-gradient(50% 50% at 80% 15%,rgba(124,58,237,.5),transparent 62%)}
.d-overlay>*{position:relative}
.d-overlay__top{display:flex;align-items:center;justify-content:space-between;font-size:10.5px;font-weight:700}
.d-overlay__nav{flex:1;display:flex;flex-direction:column;justify-content:center;gap:6px}
.d-overlay__item{font-size:19px;font-weight:730;letter-spacing:-.03em;color:rgba(255,255,255,.9);display:flex;align-items:baseline;gap:8px}
.d-overlay__item small{font-size:9px;font-weight:500;color:rgba(255,255,255,.4);font-family:ui-monospace,Menlo,monospace}
.d-overlay__item.is-on{background:linear-gradient(90deg,#818cf8,#e879f9);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.d-overlay__foot{display:flex;gap:9px;font-size:9px;color:rgba(255,255,255,.5)}

/* 15 面包屑 Breadcrumbs */
.d-breadcrumb{display:flex;align-items:center;gap:6px;padding:8px 11px;border:1px solid var(--i-line);border-radius:99px;background:#fff;font-size:10.5px;box-shadow:var(--i-sh-s);flex-wrap:wrap}
.d-breadcrumb__sep{color:var(--i-tx3);font-size:9px}
.d-breadcrumb__item{color:var(--i-tx2)}
.d-breadcrumb__item--cur{color:var(--i-tx);font-weight:650}

/* 16 标签页 Tabs */
.d-tabs{display:flex;flex-direction:column;gap:9px}
.d-tabs__bar{display:flex;gap:2px;padding:3px;border-radius:10px;background:var(--i-bg3)}
.d-tabs__tab{flex:1;text-align:center;padding:6px 8px;border-radius:7px;font-size:10.5px;color:var(--i-tx2);font-weight:560;transition:.18s}
.d-tabs__tab.is-on{background:#fff;color:var(--i-tx);font-weight:660;box-shadow:var(--i-sh-s)}
.d-tabs__panel{display:flex;flex-direction:column;gap:6px}
.d-tabs__line{height:6px;border-radius:99px;background:var(--i-bg3)}
.d-tabs__line--a{background:linear-gradient(90deg,var(--i-br),var(--i-br2));height:8px}

/* 17 分段控制器 Segmented Control */
.d-seg{display:flex;flex-direction:column;gap:8px;align-items:center}
.d-seg__track{position:relative;display:flex;padding:3px;border:1px solid var(--i-line);border-radius:10px;background:var(--i-bg2);font-size:10px}
.d-seg__opt{position:relative;padding:5px 13px;color:var(--i-tx3);font-weight:600;z-index:1;transition:.2s}
.d-seg__opt.is-on{color:var(--i-tx)}
.d-seg__thumb{position:absolute;top:3px;left:3px;bottom:3px;width:52px;border-radius:7px;background:#fff;box-shadow:var(--i-sh-s);transition:transform .26s cubic-bezier(.32,.72,0,1)}
.d-seg--2 .d-seg__thumb{width:62px}
.d-seg--3 .d-seg__thumb{width:52px}

/* 18 侧边栏导航 Sidebar Nav */
.d-sidenav{position:absolute;inset:0;display:flex;background:#fff}
.d-sidenav__rail{width:132px;border-right:1px solid var(--i-line);padding:11px 9px;display:flex;flex-direction:column;gap:3px;background:#fcfcfd}
.d-sidenav__brand{display:flex;align-items:center;gap:6px;padding:0 5px 9px;font-size:10.5px;font-weight:730;letter-spacing:-.02em}
.d-sidenav__sec{padding:8px 6px 3px;font-size:8px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--i-tx3)}
.d-sidenav__item{display:flex;align-items:center;gap:7px;padding:6px 7px;border-radius:7px;font-size:10.5px;color:var(--i-tx2)}
.d-sidenav__item.is-on{background:#eef2ff;color:var(--i-br);font-weight:650}
.d-sidenav__main{flex:1;padding:13px;display:flex;flex-direction:column;gap:7px}
.d-sidenav__crumb{font-size:9px;color:var(--i-tx3)}

/* 19 阅读进度条 Reading Progress Bar */
.d-prog{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff}
.d-prog__top{height:3px;background:var(--i-bg3);position:relative}
.d-prog__fill{position:absolute;inset:0 auto 0 0;width:46%;background:linear-gradient(90deg,#4f46e5,#c026d3)}
.d-prog__head{display:flex;align-items:center;justify-content:space-between;padding:9px 13px;border-bottom:1px solid var(--i-line);font-size:9.5px;color:var(--i-tx3)}
.d-prog__body{flex:1;padding:12px 13px;display:flex;flex-direction:column;gap:7px}
.d-prog__ln{height:6px;border-radius:99px;background:var(--i-bg3)}

/* 20 锚点滚动监听 Scrollspy Nav */
.d-spy{display:grid;grid-template-columns:74px 1fr;gap:12px;align-items:start}
.d-spy__nav{display:flex;flex-direction:column;gap:2px;border-left:2px solid var(--i-line)}
.d-spy__item{padding:5px 9px;font-size:10px;color:var(--i-tx3);margin-left:-2px;border-left:2px solid transparent}
.d-spy__item.is-on{color:var(--i-br);font-weight:650;border-left-color:var(--i-br)}
.d-spy__body{display:flex;flex-direction:column;gap:7px}
.d-spy__ln{height:6px;border-radius:99px;background:var(--i-bg3)}

/* 21 悬浮胶囊导航 Floating Pill Dock */
.d-dock{display:flex;flex-direction:column;gap:10px;align-items:center;position:relative;padding-bottom:8px}
.d-dock__bg{height:64px;width:100%;border-radius:11px;background:linear-gradient(135deg,#eef2ff,#fce7f3)}
.d-dock__bar{position:absolute;bottom:0;display:flex;align-items:center;gap:3px;padding:5px;border-radius:99px;background:rgba(255,255,255,.85);backdrop-filter:blur(14px) saturate(1.8);border:1px solid rgba(255,255,255,.8);box-shadow:0 12px 26px -12px rgba(16,17,26,.35)}
.d-dock__item{display:grid;place-items:center;width:28px;height:28px;border-radius:99px;font-size:12px;color:var(--i-tx2);transition:.2s}
.d-dock__item.is-on{background:var(--i-gd);color:#fff}

/* 22 公告条 Announcement Bar */
.d-announce{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff}
.d-announce__bar{display:flex;align-items:center;justify-content:center;gap:7px;padding:7px 11px;font-size:10px;color:#fff;background:linear-gradient(90deg,#4f46e5,#7c3aed 60%,#c026d3);position:relative}
.d-announce__bar b{font-weight:700;padding:1.5px 6px;border-radius:99px;background:rgba(255,255,255,.22);font-size:8.5px;letter-spacing:.04em}
.d-announce__x{position:absolute;right:9px;opacity:.75;font-size:11px}
.d-announce__page{flex:1;padding:12px;display:flex;flex-direction:column;gap:7px}
.d-announce__ln{height:6px;border-radius:99px;background:var(--i-bg3)}

/* ═══════════════════════════════════════════════════════════
   03 · 布局 Layout
   ═══════════════════════════════════════════════════════════ */

/* 01 便当格布局 Bento Grid */
.d-bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:52px;gap:7px}
.d-bento__c{border:1px solid var(--i-line);border-radius:10px;background:#fff;padding:9px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;font-size:9px;color:var(--i-tx3);overflow:hidden}
.d-bento__c b{font-size:13px;font-weight:730;color:var(--i-tx);letter-spacing:-.02em;line-height:1.1}
.d-bento__c--2x2{grid-column:span 2;grid-row:span 2;justify-content:space-between;background:var(--i-gd);border-color:transparent;color:rgba(255,255,255,.8)}
.d-bento__c--2x2 b{color:#fff;font-size:15px}
.d-bento__c--2x1{grid-column:span 2}
.d-bento__c--img{padding:0;position:relative}
.d-bento__c--img .d-img{position:absolute;inset:0;border-radius:0}

/* 02 瀑布流 Masonry */
.d-masonry{columns:2;column-gap:7px}
.d-masonry__c{break-inside:avoid;margin-bottom:7px;border:1px solid var(--i-line);border-radius:10px;background:#fff;overflow:hidden;box-shadow:var(--i-sh-s)}
.d-masonry__c .d-img{border-radius:0}
.d-masonry__c__bd{padding:7px 9px;display:flex;flex-direction:column;gap:4px}
.d-masonry__ln{height:5px;border-radius:99px;background:var(--i-bg3)}

/* 03 Z 型布局 Z-Pattern */
.d-zpat{display:grid;grid-template-columns:1fr 1fr;gap:9px 10px;align-items:center}
.d-zpat__t{display:flex;flex-direction:column;gap:5px}
.d-zpat__t b{font-size:11.5px;font-weight:680;letter-spacing:-.015em}
.d-zpat__t span{font-size:9.5px;color:var(--i-tx2);line-height:1.5}
.d-zpat__v{aspect-ratio:16/9;border-radius:9px;position:relative;overflow:hidden;box-shadow:var(--i-sh-s)}
.d-zpat__flow{grid-column:span 2;display:flex;align-items:center;gap:6px;font-size:8.5px;color:var(--i-tx3);font-family:ui-monospace,Menlo,monospace}
.d-zpat__flow i{flex:1;height:1px;background:repeating-linear-gradient(90deg,var(--i-line2) 0 4px,transparent 4px 8px)}

/* 04 分屏布局 Split Screen */
.d-split{display:grid;grid-template-columns:1fr 1fr;min-height:150px;border-radius:11px;overflow:hidden;box-shadow:var(--i-sh)}
.d-split__l{background:#141418;color:#fff;padding:14px;display:flex;flex-direction:column;justify-content:space-between;gap:8px}
.d-split__r{background:#fff;padding:14px;display:flex;flex-direction:column;justify-content:space-between;gap:8px;border:1px solid var(--i-line);border-left:0}
.d-split__l b,.d-split__r b{font-size:12.5px;font-weight:700;letter-spacing:-.02em}
.d-split__l span{font-size:9.5px;opacity:.7;line-height:1.5}
.d-split__r span{font-size:9.5px;color:var(--i-tx2);line-height:1.5}

/* 05 粘性侧栏 Sticky Sidebar */
.d-sticky{display:grid;grid-template-columns:88px 1fr;gap:10px;align-items:start}
.d-sticky__side{position:sticky;top:0;display:flex;flex-direction:column;gap:5px;padding:9px;border:1px solid var(--i-line);border-radius:10px;background:#fff;box-shadow:var(--i-sh-s)}
.d-sticky__side b{font-size:10px;font-weight:700}
.d-sticky__side span{font-size:8.5px;color:var(--i-tx3)}
.d-sticky__main{display:flex;flex-direction:column;gap:6px}
.d-sticky__ln{height:6px;border-radius:99px;background:var(--i-bg3)}

/* 06 杂志式排版 Editorial Layout */
.d-editorial{display:flex;flex-direction:column;gap:8px}
.d-editorial__rule{height:2px;background:var(--i-tx);width:34px}
.d-editorial h4{font-size:15px;font-weight:760;letter-spacing:-.03em;line-height:1.16}
.d-editorial__cols{column-count:2;column-gap:11px;font-size:9.5px;line-height:1.65;color:var(--i-tx2);text-align:justify}
.d-editorial__cols b{color:var(--i-tx);font-weight:700}
.d-editorial__quote{border-left:2px solid var(--i-br);padding-left:8px;font-size:10px;font-style:italic;color:var(--i-tx2);line-height:1.5}

/* 07 12 栅格系统 Grid System */
.d-grid12{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:3px;padding:10px;border:1px solid var(--i-line);border-radius:10px;background:#fff;overflow:hidden;min-height:104px;grid-template-rows:1fr 1fr}
.d-grid12__cols{position:absolute;inset:10px;display:grid;grid-template-columns:repeat(12,1fr);gap:3px;pointer-events:none}
.d-grid12__cols i{background:rgba(79,70,229,.07);border-radius:3px}
.d-grid12__a{grid-column:span 5;grid-row:1;background:var(--i-gd);border-radius:6px;padding:8px;color:#fff;font-size:9px;font-weight:600;display:flex;align-items:flex-end}
.d-grid12__b{grid-column:span 4;grid-row:1;background:#17171b;border-radius:6px}
.d-grid12__c{grid-column:span 3;grid-row:1;background:#e9eaef;border-radius:6px}
.d-grid12__d{grid-column:span 8;grid-row:2;background:#eef2ff;border-radius:6px;border:1px dashed rgba(79,70,229,.4)}

/* 08 左右交替行 Zigzag Rows */
.d-zigzag{display:flex;flex-direction:column;gap:7px}
.d-zigzag__row{display:grid;grid-template-columns:1fr 1.2fr;gap:9px;align-items:center}
.d-zigzag__row:nth-child(even){direction:rtl}
.d-zigzag__row:nth-child(even)>*{direction:ltr}
.d-zigzag__art{aspect-ratio:16/10;border-radius:9px;box-shadow:var(--i-sh-s)}
.d-zigzag__txt{display:flex;flex-direction:column;gap:4px}
.d-zigzag__txt b{font-size:10.5px;font-weight:680}
.d-zigzag__txt span{font-size:9px;color:var(--i-tx2);line-height:1.5}

/* 09 三栏卡片 Tri-column */
.d-tricol{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.d-tricol__c{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid var(--i-line);border-radius:10px;background:#fff;box-shadow:var(--i-sh-s)}
.d-tricol__c b{font-size:10.5px;font-weight:680}
.d-tricol__c span{font-size:9px;color:var(--i-tx2);line-height:1.5}

/* 10 全出血区块 Full-bleed Section */
.d-fbs{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff}
.d-fbs__strip{height:46px;background:linear-gradient(120deg,#0f172a,#4c1d95 60%,#831843);display:flex;align-items:center;justify-content:center;gap:12px;color:#fff}
.d-fbs__strip b{font-size:14px;font-weight:770;letter-spacing:-.03em}
.d-fbs__strip i{width:1px;height:15px;background:rgba(255,255,255,.3)}
.d-fbs__strip span{font-size:9.5px;opacity:.8}
.d-fbs__body{flex:1;padding:12px;display:flex;flex-direction:column;gap:6px}

/* ═══════════════════════════════════════════════════════════
   04 · 卡片 Card
   ═══════════════════════════════════════════════════════════ */

/* 11 毛玻璃卡片 Glassmorphism Card */
.d-glass{position:relative;width:100%;padding:15px;border-radius:11px;background:linear-gradient(135deg,#4f46e5,#7c3aed 40%,#db2777 75%,#f59e0b);overflow:hidden;display:flex;align-items:center;justify-content:center}
.d-glass__blob{position:absolute;border-radius:99px;filter:blur(14px)}
.d-glass__blob--1{width:74px;height:74px;left:8%;top:6%;background:rgba(56,189,248,.85)}
.d-glass__blob--2{width:60px;height:60px;right:9%;bottom:9%;background:rgba(253,224,71,.8)}
.d-glass__card{position:relative;width:100%;padding:12px;border-radius:11px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(12px) saturate(1.6);color:#fff;box-shadow:0 10px 26px -12px rgba(0,0,0,.4)}
.d-glass__card b{font-size:11.5px;font-weight:680;display:block}
.d-glass__card span{font-size:9.5px;opacity:.85;display:block;margin-top:3px;line-height:1.5}

/* 12 新拟态卡片 Neumorphism */
.d-neu{padding:18px;border-radius:14px;background:#eceef3;display:flex;align-items:center;justify-content:center}
.d-neu__card{width:100%;padding:13px;border-radius:12px;background:#eceef3;box-shadow:6px 6px 14px rgba(163,177,198,.55),-6px -6px 14px rgba(255,255,255,.9)}
.d-neu__card b{font-size:11.5px;font-weight:680;display:block;color:#3a3f4b}
.d-neu__card span{font-size:9.5px;color:#7b8296;display:block;margin-top:3px}
.d-neu__pill{margin-top:9px;display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:99px;background:#eceef3;box-shadow:3px 3px 7px rgba(163,177,198,.6),-3px -3px 7px rgba(255,255,255,.95);font-size:9.5px;color:#5a6072;font-weight:600}

/* 13 渐变描边卡片 Gradient Border Card */
.d-gbc{padding:1.5px;border-radius:13px;background:linear-gradient(135deg,#4f46e5,#c026d3 50%,#06b6d4);box-shadow:0 10px 24px -14px rgba(99,102,241,.7)}
.d-gbc__in{padding:13px;border-radius:11.5px;background:#fff;display:flex;flex-direction:column;gap:5px}
.d-gbc__in b{font-size:11.5px;font-weight:690}
.d-gbc__in span{font-size:9.5px;color:var(--i-tx2);line-height:1.55}

/* 14 光标光斑卡片 Spotlight Card */
.d-spot{position:relative;padding:14px;border:1px solid var(--i-line);border-radius:12px;background:#fff;overflow:hidden;transition:border-color .25s}
.d-spot::before{content:'';position:absolute;width:160px;height:160px;left:var(--mx,50%);top:var(--my,50%);transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(79,70,229,.22),transparent 68%);opacity:0;transition:opacity .3s;pointer-events:none}
.d-spot:hover{border-color:rgba(79,70,229,.4)}
.d-spot:hover::before{opacity:1}
.d-spot>*{position:relative}
.d-spot b{font-size:11.5px;font-weight:690;display:block}
.d-spot span{font-size:9.5px;color:var(--i-tx2);display:block;margin-top:4px;line-height:1.55}

/* 15 3D 倾斜卡片 3D Tilt Card */
.d-tilt{perspective:600px}
.d-tilt__card{padding:14px;border-radius:12px;background:#fff;border:1px solid var(--i-line);box-shadow:var(--i-sh);transform:rotateX(9deg) rotateY(-11deg);transform-style:preserve-3d;transition:transform .45s cubic-bezier(.34,1.4,.5,1)}
.d-tilt:hover .d-tilt__card{transform:rotateX(0) rotateY(0)}
.d-tilt__card b{font-size:11.5px;font-weight:690;display:block;transform:translateZ(14px)}
.d-tilt__card span{font-size:9.5px;color:var(--i-tx2);display:block;margin-top:4px;transform:translateZ(8px)}
.d-tilt__chip{margin-top:9px;display:inline-block;padding:4px 9px;border-radius:99px;background:var(--i-gd);color:#fff;font-size:9px;font-weight:600;transform:translateZ(20px)}

/* 16 悬停揭示卡片 Hover Reveal Card */
.d-reveal{position:relative;border-radius:12px;overflow:hidden;box-shadow:var(--i-sh)}
.d-reveal__img{height:106px;background:var(--i-gd2);transition:transform .5s cubic-bezier(.32,.72,0,1)}
.d-reveal__ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:12px;background:linear-gradient(180deg,transparent 25%,rgba(10,10,16,.86));color:#fff;transform:translateY(30%);transition:transform .42s cubic-bezier(.32,.72,0,1)}
.d-reveal:hover .d-reveal__ov{transform:none}
.d-reveal:hover .d-reveal__img{transform:scale(1.07)}
.d-reveal__ov b{font-size:11.5px;font-weight:690}
.d-reveal__ov p{font-size:9.5px;line-height:1.5;opacity:0;max-height:0;transition:all .4s .05s;margin:0}
.d-reveal:hover .d-reveal__ov p{opacity:.88;max-height:44px;margin-top:4px}

/* 17 数据卡 Stat / KPI Card */
.d-stat{display:flex;flex-direction:column;gap:9px;padding:13px;border:1px solid var(--i-line);border-radius:12px;background:#fff;box-shadow:var(--i-sh-s)}
.d-stat__top{display:flex;align-items:center;justify-content:space-between}
.d-stat__top span{font-size:9.5px;color:var(--i-tx3);font-weight:600;letter-spacing:.02em}
.d-stat__val{font-size:25px;font-weight:780;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.d-stat__val i{font-style:normal;font-size:12px;font-weight:650;color:var(--i-ok)}
.d-stat__foot{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:9.5px;color:var(--i-tx3)}
.d-stat__spark{display:flex;align-items:flex-end;gap:2px;height:20px;width:64px}
.d-stat__spark i{flex:1;border-radius:2px 2px 0 0;background:rgba(79,70,229,.26)}
.d-stat__spark i:last-child{background:var(--i-br)}

/* 18 高亮定价卡 Featured Pricing Card */
.d-pricef{padding:1.5px;border-radius:14px;background:var(--i-gd);box-shadow:0 18px 40px -20px rgba(99,102,241,.9)}
.d-pricef__in{padding:14px;border-radius:12.5px;background:#12121a;color:#fff;display:flex;flex-direction:column;gap:7px}
.d-pricef__tag{align-self:flex-start;padding:2.5px 8px;border-radius:99px;background:rgba(255,255,255,.16);font-size:8.5px;font-weight:650;letter-spacing:.05em}
.d-pricef__num{font-size:27px;font-weight:780;letter-spacing:-.04em;line-height:1}
.d-pricef__num small{font-size:10px;font-weight:500;opacity:.6;letter-spacing:0}
.d-pricef__list{display:flex;flex-direction:column;gap:4px;font-size:9.5px;opacity:.82;margin:0}
.d-pricef__list li{display:flex;align-items:center;gap:5px}

/* 19 评价卡 Testimonial Card */
.d-testi{display:flex;flex-direction:column;gap:9px;padding:13px;border:1px solid var(--i-line);border-radius:12px;background:#fff;box-shadow:var(--i-sh-s)}
.d-testi__stars{display:flex;gap:1.5px;color:#f59e0b;font-size:10px;letter-spacing:1px}
.d-testi__quote{font-size:10.5px;line-height:1.62;color:var(--i-tx)}
.d-testi__who{display:flex;align-items:center;gap:7px;padding-top:9px;border-top:1px solid var(--i-line)}
.d-testi__who b{font-size:10px;font-weight:660;display:block}
.d-testi__who span{font-size:8.5px;color:var(--i-tx3);display:block}

/* 20 博客卡 Blog Post Card */
.d-blog{border:1px solid var(--i-line);border-radius:12px;background:#fff;overflow:hidden;box-shadow:var(--i-sh-s)}
.d-blog__img{height:72px}
.d-blog__bd{padding:10px 11px;display:flex;flex-direction:column;gap:5px}
.d-blog__meta{display:flex;align-items:center;gap:6px;font-size:8.5px;color:var(--i-tx3)}
.d-blog__bd b{font-size:11px;font-weight:680;line-height:1.35}
.d-blog__bd p{font-size:9.5px;color:var(--i-tx2);line-height:1.5;margin:0}

/* 21 团队卡 Team Member Card */
.d-team{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:14px 12px;border:1px solid var(--i-line);border-radius:12px;background:#fff;box-shadow:var(--i-sh-s)}
.d-team__av{width:42px;height:42px;border-radius:99px;background:var(--i-gd);display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px}
.d-team b{font-size:11px;font-weight:680}
.d-team span{font-size:9px;color:var(--i-tx3)}
.d-team__social{display:flex;gap:4px;margin-top:2px}
.d-team__social i{display:grid;place-items:center;width:18px;height:18px;border-radius:6px;background:var(--i-bg2);font-size:8.5px;color:var(--i-tx2);font-style:normal}

/* 22 产品卡 Product Card */
.d-prod{border:1px solid var(--i-line);border-radius:12px;background:#fff;overflow:hidden;box-shadow:var(--i-sh-s)}
.d-prod__img{height:74px;position:relative}
.d-prod__badge{position:absolute;left:8px;top:8px;padding:2.5px 7px;border-radius:99px;background:#fff;font-size:8.5px;font-weight:650;color:var(--i-tx);box-shadow:var(--i-sh-s)}
.d-prod__bd{padding:10px 11px;display:flex;flex-direction:column;gap:7px}
.d-prod__bd b{font-size:10.5px;font-weight:680}
.d-prod__row{display:flex;align-items:center;justify-content:space-between}
.d-prod__price{font-size:13px;font-weight:760;letter-spacing:-.02em}
.d-prod__price s{font-size:9px;color:var(--i-tx3);font-weight:500;margin-left:4px}

/* 23 流光边框卡片 Conic Border Card */
@property --d-spin-a{syntax:'<angle>';initial-value:0deg;inherits:false}
.d-conic{position:relative;padding:14px;border-radius:13px;background:#fff;z-index:0}
.d-conic::before{content:'';position:absolute;inset:-1.5px;border-radius:14.5px;background:conic-gradient(from var(--d-spin-a),#4f46e5,#06b6d4,#c026d3,#f59e0b,#4f46e5);z-index:-1;animation:d-spinanim 4.5s linear infinite}
@keyframes d-spinanim{to{--d-spin-a:360deg}}
.d-conic b{font-size:11.5px;font-weight:690;display:block}
.d-conic span{font-size:9.5px;color:var(--i-tx2);display:block;margin-top:4px;line-height:1.55}

/* 24 贴纸徽章卡 Sticker / Badge Card */
.d-sticker{position:relative;padding:16px;border-radius:12px;background:#fff;border:1px solid var(--i-line);box-shadow:var(--i-sh-s)}
.d-sticker__tag{position:absolute;top:-9px;left:12px;padding:3.5px 9px;border-radius:99px;background:var(--i-gd3);color:#fff;font-size:8.5px;font-weight:700;letter-spacing:.04em;box-shadow:0 5px 12px -5px rgba(239,68,68,.8);transform:rotate(-3deg)}
.d-sticker__step{display:flex;align-items:center;gap:7px}
.d-sticker__num{display:grid;place-items:center;width:20px;height:20px;border-radius:7px;background:var(--i-bg3);font-size:9.5px;font-weight:700;flex:0 0 auto}
.d-sticker b{font-size:11.5px;font-weight:690}
.d-sticker p{font-size:9.5px;color:var(--i-tx2);line-height:1.55;margin:6px 0 0}

/* ═══════════════════════════════════════════════════════════
   05 · 按钮 Button
   ═══════════════════════════════════════════════════════════ */

/* 01 按钮层级体系 Button Hierarchy */
.d-btnsys{display:flex;flex-direction:column;gap:8px;align-items:center}
.d-btnsys__row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center}
.d-btnsys__cap{font-size:9px;color:var(--i-tx3);font-family:ui-monospace,Menlo,monospace}

/* 02 胶囊按钮 Pill Button */
.d-pillwrap{display:flex;gap:7px;align-items:center}

/* 03 渐变发光按钮 Gradient Glow Button */
.d-glowbtn{position:relative;display:inline-flex;align-items:center;height:30px;padding:0 15px;border-radius:9px;background:var(--i-gd);color:#fff;font-size:11px;font-weight:650;transition:transform .2s,box-shadow .25s}
.d-glowbtn:hover{transform:translateY(-1px);box-shadow:0 8px 22px -6px rgba(124,58,237,.75),0 0 0 1px rgba(124,58,237,.35)}
.d-glowbtn::after{content:'';position:absolute;inset:-3px;border-radius:12px;background:var(--i-gd);filter:blur(12px);opacity:.45;z-index:-1;transition:opacity .25s}
.d-glowbtn:hover::after{opacity:.8}

/* 04 光泽扫过按钮 Shine Sweep Button */
.d-shinebtn{position:relative;display:inline-flex;align-items:center;height:30px;padding:0 15px;border-radius:9px;background:#17171b;color:#fff;font-size:11px;font-weight:650;overflow:hidden}
.d-shinebtn::after{content:'';position:absolute;top:-4px;bottom:-4px;width:38%;left:-55%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-18deg);transition:left .55s ease}
.d-shinebtn:hover::after{left:125%}

/* 05 磁吸按钮 Magnetic Button */
.d-magnet{display:flex;flex-direction:column;gap:8px;align-items:center;padding:6px 0}
.d-magnet__btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 20px;border-radius:99px;background:#fff;border:1px solid var(--i-line2);font-size:11.5px;font-weight:650;box-shadow:var(--i-sh-s);transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.d-magnet:hover .d-magnet__btn{transform:translate(3px,-2px) scale(1.05);box-shadow:0 12px 26px -10px rgba(16,17,26,.3)}

/* 06 加载态按钮 Loading Button */
.d-loadwrap{display:flex;gap:10px;align-items:center}
.d-loadbtn{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 14px;border-radius:9px;background:#17171b;color:#fff;font-size:11px;font-weight:650;opacity:.75}
.d-loadbtn__spin{width:12px;height:12px;border-radius:99px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;animation:d-rot .7s linear infinite}
@keyframes d-rot{to{transform:rotate(360deg)}}
.d-donebtn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 14px;border-radius:9px;background:var(--i-ok);color:#fff;font-size:11px;font-weight:650}

/* 07 图标按钮 Icon Button */
.d-iconrow{display:flex;gap:8px;align-items:center}
.d-iconbtn2{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;border:1px solid var(--i-line);background:#fff;color:var(--i-tx2);font-size:12px;transition:.18s}
.d-iconbtn2:hover{background:var(--i-bg2);color:var(--i-tx);border-color:var(--i-line2)}
.d-iconbtn2--gd{background:var(--i-gd);color:#fff;border-color:transparent}
.d-iconbtn2--soft{background:var(--i-bg3);border-color:transparent}

/* 08 按钮组 Button Group */
.d-btngroup{display:inline-flex;border:1px solid var(--i-line2);border-radius:9px;overflow:hidden;background:#fff;box-shadow:var(--i-sh-s)}
.d-btngroup button{padding:6px 12px;font-size:10.5px;color:var(--i-tx2);border-right:1px solid var(--i-line);transition:.15s}
.d-btngroup button:last-child{border-right:0}
.d-btngroup button:hover{background:var(--i-bg2);color:var(--i-tx)}
.d-btngroup button.is-on{background:var(--i-bg3);color:var(--i-tx);font-weight:650}

/* 09 复制反馈按钮 Copy Button */
.d-copydemo{display:flex;gap:9px;align-items:center;padding:9px 11px;border:1px dashed var(--i-line2);border-radius:9px;background:var(--i-bg);font-family:ui-monospace,Menlo,monospace;font-size:10px;color:var(--i-tx2)}
.d-copybtn{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:7px;background:#17171b;color:#fff;font-size:9.5px;font-weight:600;transition:.2s}
.d-copybtn.is-done{background:var(--i-ok)}

/* 10 涟漪按钮 Ripple Button */
.d-rippledemo{display:flex;gap:10px;align-items:center}
.d-ripplebtn{position:relative;display:inline-flex;align-items:center;height:30px;padding:0 15px;border-radius:9px;background:var(--i-br);color:#fff;font-size:11px;font-weight:650;overflow:hidden}
.d-ripplebtn::after{content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:99px;background:rgba(255,255,255,.5);transform:translate(-50%,-50%) scale(0);animation:d-ripple2 1.6s ease-out infinite}
@keyframes d-ripple2{0%{transform:translate(-50%,-50%) scale(0);opacity:.9}100%{transform:translate(-50%,-50%) scale(14);opacity:0}}

/* 11 描边填充按钮 Border Fill Button */
.d-fillwrap{display:flex;gap:8px;align-items:center}
.d-fillbtn{position:relative;display:inline-flex;align-items:center;height:30px;padding:0 15px;border:1.5px solid #17171b;border-radius:9px;color:#17171b;background:#fff;font-size:11px;font-weight:650;overflow:hidden;z-index:0;transition:color .28s}
.d-fillbtn::before{content:'';position:absolute;inset:0;background:#17171b;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.32,.72,0,1);z-index:-1}
.d-fillbtn:hover{color:#fff}
.d-fillbtn:hover::before{transform:scaleX(1)}
.d-fillbtn--b{border-color:var(--i-br);color:var(--i-br)}
.d-fillbtn--b::before{background:var(--i-br)}

/* 12 分割按钮 Split Button */
.d-splitbtn{display:inline-flex;border-radius:9px;overflow:hidden;box-shadow:var(--i-sh-s)}
.d-splitbtn__main{display:inline-flex;align-items:center;height:30px;padding:0 13px;background:#17171b;color:#fff;font-size:11px;font-weight:650}
.d-splitbtn__arrow{display:grid;place-items:center;width:26px;height:30px;background:#33333d;color:#fff;font-size:9px;border-left:1px solid rgba(255,255,255,.18)}

/* ═══════════════════════════════════════════════════════════
   06 · 表单 Form & Input
   ═══════════════════════════════════════════════════════════ */

/* 13 浮动标签输入 Floating Label Input */
.d-fl{position:relative;width:100%;max-width:210px}
.d-fl input{width:100%;height:38px;padding:14px 11px 4px;border:1px solid var(--i-line2);border-radius:9px;background:#fff;font-size:11px;outline:none;transition:.2s;color:var(--i-tx)}
.d-fl input:focus{border-color:var(--i-br);box-shadow:0 0 0 3px rgba(79,70,229,.13)}
.d-fl label{position:absolute;left:11px;top:11px;font-size:11px;color:var(--i-tx3);pointer-events:none;transition:.18s cubic-bezier(.32,.72,0,1)}
.d-fl input:focus + label,.d-fl input:not(:placeholder-shown) + label{top:4.5px;font-size:8px;color:var(--i-br);letter-spacing:.03em}

/* 14 图标前后缀输入 Icon Affix Input */
.d-affixwrap{display:flex;flex-direction:column;gap:7px;width:100%;max-width:210px}
.d-affix{display:flex;align-items:center;gap:7px;height:32px;padding:0 10px;border:1px solid var(--i-line2);border-radius:9px;background:#fff;font-size:10.5px;color:var(--i-tx3)}
.d-affix__ic{font-size:11px;color:var(--i-tx3)}
.d-affix__suffix{margin-left:auto;padding:1.5px 6px;border-radius:5px;background:var(--i-bg3);font-size:8.5px;color:var(--i-tx3)}

/* 15 校验状态 Input Validation States */
.d-validwrap{display:flex;flex-direction:column;gap:7px;width:100%;max-width:210px}
.d-valid{display:flex;flex-direction:column;gap:4px}
.d-valid input{height:30px;padding:0 10px;border:1px solid var(--i-line2);border-radius:8px;font-size:10.5px;outline:none;background:#fff;color:var(--i-tx)}
.d-valid--err input{border-color:var(--i-err);box-shadow:0 0 0 3px rgba(239,68,68,.12)}
.d-valid--ok input{border-color:var(--i-ok);box-shadow:0 0 0 3px rgba(16,185,129,.12)}
.d-valid__msg{display:flex;align-items:center;gap:4px;font-size:9px}
.d-valid--err .d-valid__msg{color:var(--i-err)}
.d-valid--ok .d-valid__msg{color:var(--i-ok)}

/* 16 验证码格子 OTP Input */
.d-otp{display:flex;gap:6px;align-items:center}
.d-otp input{width:30px;height:36px;text-align:center;border:1px solid var(--i-line2);border-radius:9px;background:#fff;font-size:15px;font-weight:700;color:var(--i-tx);outline:none}
.d-otp input:focus{border-color:var(--i-br);box-shadow:0 0 0 3px rgba(79,70,229,.13)}
.d-otp input.filled{border-color:var(--i-br);background:#f7f7ff}
.d-otp__dash{color:var(--i-tx3);font-weight:700}

/* 17 分步表单 Multi-step Wizard */
.d-wizard{display:flex;flex-direction:column;gap:10px;width:100%}
.d-wizard__steps{display:flex;align-items:center}
.d-wizard__dot{display:grid;place-items:center;width:20px;height:20px;border-radius:99px;background:var(--i-bg3);color:var(--i-tx3);font-size:9px;font-weight:700;flex:0 0 auto}
.d-wizard__dot.is-done{background:var(--i-br);color:#fff}
.d-wizard__dot.is-cur{box-shadow:0 0 0 3px rgba(79,70,229,.18);background:var(--i-br);color:#fff}
.d-wizard__bar{flex:1;height:2px;background:var(--i-bg3);margin:0 4px;position:relative;overflow:hidden;border-radius:99px}
.d-wizard__bar i{position:absolute;inset:0 auto 0 0;width:55%;background:var(--i-br)}
.d-wizard__panel{display:flex;flex-direction:column;gap:5px;padding:10px;border:1px solid var(--i-line);border-radius:10px;background:#fff}
.d-wizard__panel b{font-size:10.5px;font-weight:670}
.d-wizard__panel span{font-size:9px;color:var(--i-tx3)}

/* 18 开关 Toggle Switch */
.d-toggles{display:flex;flex-direction:column;gap:8px;width:100%;max-width:200px}
.d-tg{display:flex;align-items:center;justify-content:space-between;gap:10px}
.d-tg span{font-size:10.5px;color:var(--i-tx2)}
.d-tg__sw{position:relative;width:34px;height:19px;border-radius:99px;background:var(--i-bg3);transition:.22s;flex:0 0 auto}
.d-tg__sw::after{content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:99px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .22s cubic-bezier(.32,.72,0,1)}
.d-tg__sw.is-on{background:var(--i-ok)}
.d-tg__sw.is-on::after{transform:translateX(15px)}
.d-tg__sw.is-on--br{background:var(--i-br)}

/* 19 自定义勾选 Checkbox & Radio */
.d-checks{display:flex;flex-direction:column;gap:8px;width:100%;max-width:190px}
.d-ck{display:flex;align-items:center;gap:8px;font-size:10.5px;color:var(--i-tx2);cursor:pointer}
.d-ck__box{width:15px;height:15px;border-radius:4.5px;border:1.5px solid var(--i-line2);background:#fff;display:grid;place-items:center;flex:0 0 auto;transition:.15s}
.d-ck__box.is-on{background:var(--i-br);border-color:var(--i-br)}
.d-ck__box.is-on::after{content:'✓';color:#fff;font-size:9px;font-weight:800}
.d-ck__box.is-on--g{background:var(--i-ok);border-color:var(--i-ok)}
.d-ck__radio{width:15px;height:15px;border-radius:99px;border:1.5px solid var(--i-line2);background:#fff;position:relative;flex:0 0 auto}
.d-ck__radio.is-on{border-color:var(--i-br);border-width:4.5px}

/* 20 区间滑块 Range Slider */
.d-range{width:100%;max-width:200px;display:flex;flex-direction:column;gap:8px;position:relative;padding-top:20px}
.d-range__track{position:relative;height:5px;border-radius:99px;background:linear-gradient(90deg,var(--i-br) 0 62%,var(--i-bg3) 62%)}
.d-range__thumb{position:absolute;left:62%;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:99px;background:#fff;border:2px solid var(--i-br);box-shadow:0 2px 6px rgba(79,70,229,.35)}
.d-range__bubble{position:absolute;left:62%;top:-6px;transform:translateX(-50%);padding:2px 7px;border-radius:6px;background:#17171b;color:#fff;font-size:9px;font-weight:650}
.d-range__bubble::after{content:'';position:absolute;left:50%;bottom:-3px;width:6px;height:6px;background:#17171b;transform:translateX(-50%) rotate(45deg)}
.d-range__ends{display:flex;justify-content:space-between;font-size:8.5px;color:var(--i-tx3)}

/* 21 拖拽上传 Dropzone */
.d-drop{width:100%;max-width:210px;padding:16px 12px;border:1.5px dashed var(--i-line2);border-radius:12px;background:var(--i-bg);display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;transition:.2s}
.d-drop__ic{display:grid;place-items:center;width:30px;height:30px;border-radius:99px;background:#eef2ff;color:var(--i-br);font-size:13px}
.d-drop b{font-size:10.5px;font-weight:650}
.d-drop span{font-size:9px;color:var(--i-tx3)}
.d-drop u{font-size:9.5px;color:var(--i-br);font-weight:600;text-underline-offset:2px}

/* 22 自动补全 Combobox */
.d-combo{position:relative;width:100%;max-width:210px}
.d-combo__input{display:flex;align-items:center;gap:7px;height:31px;padding:0 10px;border:1px solid var(--i-br);border-radius:9px;background:#fff;font-size:10.5px;color:var(--i-tx);box-shadow:0 0 0 3px rgba(79,70,229,.13)}
.d-combo__cur{margin-left:auto;color:var(--i-tx3);font-size:9px}
.d-combo__list{position:absolute;top:calc(100% + 4px);left:0;right:0;padding:4px;border:1px solid var(--i-line2);border-radius:9px;background:#fff;box-shadow:var(--i-sh);display:flex;flex-direction:column;gap:1px;z-index:2}
.d-combo__item{display:flex;align-items:center;gap:7px;padding:5.5px 8px;border-radius:6px;font-size:10px;color:var(--i-tx2)}
.d-combo__item.is-on{background:var(--i-br);color:#fff}

/* 23 搜索下拉 Search Dropdown */
.d-searchdd{width:100%;max-width:210px}
.d-searchdd__box{display:flex;align-items:center;gap:7px;height:31px;padding:0 10px;border:1px solid var(--i-line2);border-radius:9px;background:#fff;font-size:10.5px;color:var(--i-tx)}
.d-searchdd__box b{color:var(--i-br);font-weight:600}
.d-searchdd__res{margin-top:4px;padding:4px;border:1px solid var(--i-line2);border-radius:9px;background:#fff;box-shadow:var(--i-sh-s);display:flex;flex-direction:column}
.d-searchdd__r{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:6px;font-size:10px;color:var(--i-tx2)}
.d-searchdd__r em{font-style:normal;color:var(--i-br);font-weight:650}
.d-searchdd__r.is-on{background:var(--i-bg2)}

/* 24 星级评分 Star Rating Input */
.d-starsdemo{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.d-stars{display:flex;gap:3px;font-size:19px;line-height:1}
.d-stars i{font-style:normal;color:var(--i-line2);transition:.15s}
.d-stars i.is-on{color:#f59e0b}
.d-stars i:hover{transform:scale(1.15)}
.d-starsdemo__hint{font-size:9.5px;color:var(--i-tx2)}

/* ═══════════════════════════════════════════════════════════
   07 · 滚动动效 Scroll Effect
   ═══════════════════════════════════════════════════════════ */

/* 01 滚动入场揭示 Scroll Reveal */
.d-scrrev{display:flex;flex-direction:column;gap:7px}
.d-scrrev__el{opacity:0;transform:translateY(14px);animation:d-rise .9s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(var(--i,0) * .22s)}
.d-scrrev__el:nth-child(3){animation-iteration-count:infinite;animation-duration:3.6s}
@keyframes d-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.d-scrrev__ln{height:8px;border-radius:99px;background:var(--i-bg3)}
.d-scrrev__ln--a{background:linear-gradient(90deg,var(--i-br),var(--i-br2))}
.d-scrrev__tag{font-size:9px;color:var(--i-tx3);font-family:ui-monospace,Menlo,monospace}

/* 02 视差滚动 Parallax Scrolling */
.d-parallax{position:relative;height:100%;min-height:150px;overflow:hidden;background:linear-gradient(180deg,#c7d2fe,#fce7f3);display:flex;align-items:center;justify-content:center}
.d-parallax__mid{position:absolute;left:14%;bottom:22%;width:54px;height:54px;border-radius:14px;background:rgba(79,70,229,.55);animation:d-float1 7s ease-in-out infinite alternate}
.d-parallax__front{position:absolute;right:12%;bottom:10%;width:74px;height:74px;border-radius:18px;background:rgba(219,39,119,.5);animation:d-float2 9s ease-in-out infinite alternate}
.d-parallax__card{position:relative;padding:11px 14px;border-radius:10px;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);box-shadow:var(--i-sh);font-size:10.5px;font-weight:650;animation:d-float1 5s ease-in-out infinite alternate-reverse;z-index:1}
@keyframes d-float1{to{transform:translateY(-14px)}}
@keyframes d-float2{to{transform:translateY(-26px) rotate(4deg)}}
.d-parallax__tag{position:absolute;left:10px;top:10px;font-size:8.5px;color:rgba(23,23,27,.5);font-family:ui-monospace,Menlo,monospace}

/* 03 滚动驱动动画 Scroll-linked Animation */
.d-scrolldrive{display:flex;flex-direction:column;gap:10px;padding:4px 0}
.d-scrolldrive__rail{position:relative;height:8px;border-radius:99px;background:var(--i-bg3)}
.d-scrolldrive__fill{position:absolute;inset:0 auto 0 0;width:60%;border-radius:inherit;background:linear-gradient(90deg,var(--i-br),var(--i-br3))}
.d-scrolldrive__knob{position:absolute;left:60%;top:50%;transform:translate(-50%,-50%);width:18px;height:18px;border-radius:99px;background:#fff;border:2px solid var(--i-br);box-shadow:0 2px 8px rgba(79,70,229,.4)}
.d-scrolldrive__bar{display:flex;align-items:flex-end;gap:5px;height:44px}
.d-scrolldrive__bar i{flex:1;border-radius:4px 4px 0 0;background:var(--i-bg3);transform-origin:bottom;animation:d-grow 2.8s cubic-bezier(.22,1,.36,1) infinite alternate}
.d-scrolldrive__bar i:nth-child(-n+3){background:var(--i-br);opacity:.85}
@keyframes d-grow{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.d-scrolldrive__tag{font-size:9px;color:var(--i-tx3);font-family:ui-monospace,Menlo,monospace;text-align:center}

/* 04 横向滚动区 Horizontal Scroll Section */
.d-hscroll{width:100%;overflow-x:auto;display:flex;gap:8px;padding:6px 2px 10px;scroll-snap-type:x mandatory;scrollbar-width:none}
.d-hscroll::-webkit-scrollbar{display:none}
.d-hscroll__card{scroll-snap-align:center;flex:0 0 132px;height:112px;border-radius:11px;padding:10px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;box-shadow:var(--i-sh-s)}
.d-hscroll__card b{font-size:11px;font-weight:690}
.d-hscroll__card span{font-size:8.5px;opacity:.85}
.d-hscroll__tag{font-size:9px;color:var(--i-tx3);text-align:center;font-family:ui-monospace,Menlo,monospace}

/* 05 粘性滚动叙事 Sticky Scroll Storytelling */
.d-sticky{--x:0}
.d-story{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.d-story__left{display:flex;flex-direction:column;gap:6px;padding-top:4px}
.d-story__step{padding:8px;border-radius:9px;font-size:9.5px;color:var(--i-tx3);transition:.3s}
.d-story__step.is-on{background:#fff;border:1px solid var(--i-line);color:var(--i-tx);font-weight:650;box-shadow:var(--i-sh-s)}
.d-story__stage{position:sticky;top:0;height:128px;border-radius:11px;background:var(--i-gd);display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:750;box-shadow:var(--i-sh)}

/* 06 无缝跑马灯 Infinite Marquee */
.d-marquee{position:relative;width:100%;overflow:hidden;padding:12px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.d-marquee__track{display:flex;gap:8px;width:max-content;animation:d-mq 14s linear infinite}
.d-marquee:hover .d-marquee__track{animation-play-state:paused}
@keyframes d-mq{to{transform:translateX(-50%)}}
.d-marquee__chip{display:flex;align-items:center;gap:5px;padding:6px 12px;border:1px solid var(--i-line);border-radius:99px;background:#fff;font-size:10px;font-weight:620;white-space:nowrap;box-shadow:var(--i-sh-s)}
.d-marquee__cap{position:absolute;left:0;right:0;bottom:-4px;text-align:center;font-size:8.5px;color:var(--i-tx3);font-family:ui-monospace,Menlo,monospace}

/* 07 滚动吸附 Scroll Snap */
.d-snap{width:100%;display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none}
.d-snap::-webkit-scrollbar{display:none}
.d-snap__page{scroll-snap-align:start;scroll-snap-stop:always;flex:0 0 100%;height:96px;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#fff;box-shadow:var(--i-sh-s)}
.d-snap__page b{font-size:13px;font-weight:720}
.d-snap__page span{font-size:9.5px;opacity:.85}
.d-snap__dots{display:flex;gap:5px;justify-content:center}
.d-snap__dots i{width:5px;height:5px;border-radius:99px;background:var(--i-line2)}
.d-snap__dots i:first-child{background:var(--i-br);width:14px}

/* 08 数字滚动计数 Odometer / Count-up */
.d-odowrap{display:flex;flex-direction:column;align-items:center;gap:7px}
.d-odometer{display:flex;height:34px;overflow:hidden;font-size:26px;font-weight:790;letter-spacing:-.03em;color:var(--i-tx);font-variant-numeric:tabular-nums}
.d-odometer__d{width:15px;height:34px;overflow:hidden;position:relative}
.d-odometer__c{position:absolute;left:0;top:0;display:flex;flex-direction:column;line-height:34px;text-align:center;animation:d-odo 2.4s cubic-bezier(.22,1,.36,1) forwards}
.d-odometer__c span{height:34px}
@keyframes d-odo{from{transform:translateY(0)}to{transform:translateY(var(--ty,0))}}
.d-odowrap__sub{font-size:9.5px;color:var(--i-tx3)}

/* 09 文字乱码解密 Text Scramble */
.d-scramble{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;height:100%;justify-content:center}
.d-scramble__word{position:relative;font-family:ui-monospace,Menlo,monospace;font-size:21px;font-weight:700;letter-spacing:.06em;color:var(--i-br)}
.d-scramble__word span{position:absolute;left:50%;top:0;transform:translateX(-50%);white-space:nowrap;opacity:0;animation:d-scram 5.4s infinite}
.d-scramble__word span:nth-child(1){animation-delay:0s}
.d-scramble__word span:nth-child(2){animation-delay:1.8s}
.d-scramble__word span:nth-child(3){animation-delay:3.6s}
@keyframes d-scram{0%,2%{opacity:0}6%,30%{opacity:1}34%,100%{opacity:0}}
.d-scramble__bar{width:56px;height:2px;background:var(--i-line);position:relative;overflow:hidden}
.d-scramble__bar::after{content:'';position:absolute;inset:0;background:var(--i-br);animation:d-scan 5.4s linear infinite}
@keyframes d-scan{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* 10 图片缩放进场 Zoom-in Reveal */
.d-zoomrev{position:relative;width:100%;height:118px;border-radius:12px;overflow:hidden;box-shadow:var(--i-sh)}
.d-zoomrev__img{position:absolute;inset:0;background:var(--i-gd2);animation:d-zoomin 4.5s ease-in-out infinite alternate;transform-origin:center}
@keyframes d-zoomin{from{transform:scale(1)}to{transform:scale(1.16)}}
.d-zoomrev__cap{position:absolute;left:0;right:0;bottom:0;padding:20px 12px 10px;background:linear-gradient(180deg,transparent,rgba(8,8,14,.75));color:#fff;font-size:10px;font-weight:600}

/* 11 粘性叠层卡片 Sticky Stacking Cards */
.d-stack{display:flex;flex-direction:column;gap:5px;justify-content:center}
.d-stack__card{position:relative;height:44px;border-radius:10px;padding:9px 11px;display:flex;align-items:center;gap:8px;border:1px solid var(--i-line);background:#fff;box-shadow:0 -8px 22px -14px rgba(16,17,26,.35)}
.d-stack__card:nth-child(1){transform:scale(.94);opacity:.75}
.d-stack__card:nth-child(2){transform:scale(.97);opacity:.9}
.d-stack__card b{font-size:10.5px;font-weight:670}
.d-stack__card span{font-size:9px;color:var(--i-tx3);margin-left:auto}
.d-stack__tag{font-size:8.5px;color:var(--i-tx3);text-align:center;font-family:ui-monospace,Menlo,monospace}

/* 12 滚动缩放过渡 Scroll Zoom Transition */
.d-scrollzoom{position:relative;width:100%;height:118px;border-radius:12px;overflow:hidden;background:#0b0b12;display:flex;align-items:center;justify-content:center}
.d-scrollzoom__halo{position:absolute;width:150px;height:150px;border-radius:99px;background:radial-gradient(circle,rgba(124,58,237,.7),transparent 65%);filter:blur(12px);animation:d-halo 5s ease-in-out infinite alternate}
@keyframes d-halo{from{transform:scale(.55)}to{transform:scale(1.15)}}
.d-scrollzoom__word{position:relative;color:#fff;font-size:19px;font-weight:790;letter-spacing:-.03em;animation:d-wordzoom 5s ease-in-out infinite alternate}
@keyframes d-wordzoom{from{transform:scale(.82);opacity:.55}to{transform:scale(1.12);opacity:1}}

/* ═══════════════════════════════════════════════════════════
   08 · 反馈与浮层 Feedback & Overlay
   ═══════════════════════════════════════════════════════════ */

/* 13 Toast 轻提示 */
.d-toastwrap{position:relative;display:flex;flex-direction:column;gap:7px;width:100%;max-width:212px}
.d-toast{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;background:#fff;border:1px solid var(--i-line);box-shadow:var(--i-sh);font-size:10.5px;font-weight:600;animation:d-toastin 3.2s cubic-bezier(.22,1,.36,1) infinite}
.d-toast:nth-child(2){animation-delay:.15s}
@keyframes d-toastin{0%{opacity:0;transform:translateY(-10px) scale(.96)}6%,88%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
.d-toast__ic{display:grid;place-items:center;width:17px;height:17px;border-radius:99px;color:#fff;font-size:9px;flex:0 0 auto}
.d-toast__ic--ok{background:var(--i-ok)}
.d-toast__ic--err{background:var(--i-err)}
.d-toast span{flex:1}

/* 14 模态框 Modal / Dialog */
.d-modalstage{position:relative;width:100%;height:100%;min-height:150px;border-radius:11px;background:linear-gradient(160deg,#e8ebf5,#dde2f0);display:flex;align-items:center;justify-content:center;overflow:hidden}
.d-modalstage::before{content:'';position:absolute;inset:0;background:rgba(12,12,20,.45)}
.d-modal{position:relative;width:88%;padding:14px;border-radius:13px;background:#fff;box-shadow:var(--i-sh-l);display:flex;flex-direction:column;gap:7px;animation:d-modalin 3.6s cubic-bezier(.22,1,.36,1) infinite}
@keyframes d-modalin{0%{opacity:0;transform:scale(.92) translateY(10px)}8%,90%{opacity:1;transform:none}100%{opacity:0}}
.d-modal__x{position:absolute;right:10px;top:10px;font-size:11px;color:var(--i-tx3)}
.d-modal b{font-size:12.5px;font-weight:700}
.d-modal p{font-size:10px;color:var(--i-tx2);line-height:1.55}
.d-modal__btns{display:flex;gap:6px;justify-content:flex-end;margin-top:3px}

/* 15 抽屉 Drawer / Sheet */
.d-drawerstage{position:relative;width:100%;height:100%;min-height:150px;border-radius:11px;overflow:hidden;background:linear-gradient(160deg,#e8ebf5,#dde2f0)}
.d-drawerstage::before{content:'';position:absolute;inset:0;background:rgba(12,12,20,.35)}
.d-drawer2{position:absolute;right:0;top:0;bottom:0;width:62%;background:#fff;border-radius:12px 0 0 12px;box-shadow:var(--i-sh-l);padding:13px;display:flex;flex-direction:column;gap:7px;animation:d-drawerslide 4.2s cubic-bezier(.32,.72,0,1) infinite}
@keyframes d-drawerslide{0%{transform:translateX(102%)}10%,88%{transform:none}100%{transform:translateX(102%)}}
.d-drawer2__hd{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;font-weight:700}
.d-drawer2__hd span{font-size:11px;color:var(--i-tx3)}
.d-drawer2__ln{height:6px;border-radius:99px;background:var(--i-bg3)}

/* 16 气泡浮层 Popover */
.d-popstage{position:relative;display:flex;justify-content:center;padding-top:34px}
.d-pop{position:absolute;top:0;left:50%;transform:translateX(-50%);width:86%;padding:11px;border-radius:11px;background:#fff;border:1px solid var(--i-line);box-shadow:var(--i-sh-l)}
.d-pop::after{content:'';position:absolute;left:50%;bottom:-5px;width:9px;height:9px;background:#fff;border-right:1px solid var(--i-line);border-bottom:1px solid var(--i-line);transform:translateX(-50%) rotate(45deg)}
.d-pop b{font-size:11px;font-weight:680;display:block}
.d-pop p{font-size:9.5px;color:var(--i-tx2);margin:4px 0 8px;line-height:1.5}
.d-popstage__btn{margin-top:86px}

/* 17 工具提示 Tooltip */
.d-tipstage{display:flex;gap:14px;align-items:center;justify-content:center;padding:24px 0 10px}
.d-tip{position:relative}
.d-tip__bubble{position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);padding:5px 9px;border-radius:7px;background:#17171b;color:#fff;font-size:9.5px;white-space:nowrap;animation:d-tipin 3s ease infinite}
.d-tip__bubble::after{content:'';position:absolute;left:50%;top:100%;width:6px;height:6px;background:#17171b;transform:translateX(-50%) rotate(45deg)}
@keyframes d-tipin{0%{opacity:0}10%,85%{opacity:1}95%,100%{opacity:0}}
.d-tip__bubble--light{background:#fff;color:var(--i-tx);border:1px solid var(--i-line);box-shadow:var(--i-sh-s)}
.d-tip__bubble--light::after{background:#fff;border-right:1px solid var(--i-line);border-bottom:1px solid var(--i-line)}

/* 18 骨架屏 Skeleton Loading */
.d-skel{width:100%;max-width:200px;display:flex;flex-direction:column;gap:8px}
.d-skel__row{display:flex;gap:8px;align-items:center}
.d-skel__av{width:26px;height:26px;border-radius:99px;flex:0 0 auto}
.d-skel__ln{height:8px;border-radius:99px;flex:1}
.d-skel__img{height:52px;border-radius:9px}
.d-skel__ln,.d-skel__av,.d-skel__img{background:linear-gradient(90deg,#e7e8ee 25%,#f4f5f8 42%,#e7e8ee 58%);background-size:200% 100%;animation:d-shimmer 1.5s linear infinite}
@keyframes d-shimmer{to{background-position:-200% 0}}

/* 19 进度条 Progress Bar */
.d-progwrap{display:flex;flex-direction:column;gap:10px;width:100%;max-width:200px}
.d-progbar{display:flex;flex-direction:column;gap:5px}
.d-progbar__top{display:flex;justify-content:space-between;font-size:9.5px;color:var(--i-tx2)}
.d-progbar__top b{font-weight:650;color:var(--i-tx)}
.d-progbar__track{height:7px;border-radius:99px;background:var(--i-bg3);overflow:hidden}
.d-progbar__fill{height:100%;border-radius:inherit;animation:d-progfill 3.2s cubic-bezier(.22,1,.36,1) infinite alternate}
.d-progbar__fill--a{width:72%;background:linear-gradient(90deg,var(--i-br),var(--i-br2))}
.d-progbar__fill--b{width:46%;background:var(--i-ok);animation-name:d-progfill2}
@keyframes d-progfill{from{width:52%}to{width:78%}}
@keyframes d-progfill2{from{width:34%}to{width:52%}}
.d-progbar__fill--striped{background-image:linear-gradient(45deg,rgba(255,255,255,.28) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.28) 75%,transparent 75%);background-size:12px 12px;animation:d-stripe .7s linear infinite,d-progfill 3.2s ease infinite alternate}
@keyframes d-stripe{to{background-position:12px 0}}

/* 20 步骤条 Stepper */
.d-stepwrap{display:flex;flex-direction:column;gap:12px;width:100%;max-width:210px}
.d-stepper{display:flex;align-items:center}
.d-stepper__dot{display:grid;place-items:center;width:22px;height:22px;border-radius:99px;font-size:9.5px;font-weight:700;flex:0 0 auto}
.d-stepper__dot--done{background:var(--i-br);color:#fff}
.d-stepper__dot--cur{background:#fff;color:var(--i-br);border:2px solid var(--i-br);box-shadow:0 0 0 3px rgba(79,70,229,.16)}
.d-stepper__dot--todo{background:var(--i-bg3);color:var(--i-tx3)}
.d-stepper__line{flex:1;height:2px;margin:0 5px;background:var(--i-bg3);position:relative}
.d-stepper__line--done{background:var(--i-br)}
.d-stepper__labels{display:flex;justify-content:space-between;font-size:9px;color:var(--i-tx3)}
.d-stepper__labels span:first-child{color:var(--i-br);font-weight:650}

/* 21 空状态 Empty State */
.d-emptystate{width:100%;max-width:212px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;padding:12px 0}
.d-emptyart{width:58px;height:58px;border-radius:16px;background:linear-gradient(150deg,#eef2ff,#fdf2f8);display:grid;place-items:center;font-size:22px;margin-bottom:2px}
.d-emptystate b{font-size:12px;font-weight:690}
.d-emptystate p{font-size:9.5px;color:var(--i-tx3);line-height:1.55;margin:0}
.d-emptystate .d-btn{margin-top:4px}

/* 22 彩带庆祝 Confetti */
.d-confettistage{position:relative;width:100%;height:100%;min-height:150px;border-radius:11px;background:linear-gradient(160deg,#eef2ff,#fdf2f8);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;overflow:hidden}
.d-confetti{position:absolute;top:-12px;width:7px;height:10px;border-radius:2px;animation:d-fall 2.6s linear infinite}
.d-confetti:nth-child(odd){border-radius:99px}
@keyframes d-fall{to{transform:translateY(190px) rotate(560deg);opacity:.6}}
.d-confettistage__ic{display:grid;place-items:center;width:38px;height:38px;border-radius:99px;background:var(--i-ok);color:#fff;font-size:16px;box-shadow:0 10px 24px -8px rgba(16,185,129,.7)}
.d-confettistage b{font-size:12px;font-weight:700}

/* 23 撤销提示 Snackbar with Undo */
.d-snackbar{position:relative;width:100%;max-width:216px;display:flex;align-items:center;gap:9px;padding:10px 13px;border-radius:10px;background:#1c1c24;color:#fff;font-size:10.5px;box-shadow:var(--i-sh-l)}
.d-snackbar u{margin-left:auto;color:#a5b4fc;font-weight:650;text-underline-offset:2px}
.d-snackbar span{opacity:.9}

/* 24 加载指示器 Spinner / Loader */
.d-loaders{display:flex;gap:14px;align-items:center;justify-content:center;padding:8px 0}
.d-loader{width:22px;height:22px;position:relative}
.d-loader--ring{border-radius:99px;border:2.5px solid var(--i-bg3);border-top-color:var(--i-br);animation:d-rot .8s linear infinite}
.d-loader--dots{display:flex;gap:3px;align-items:center;height:22px}
.d-loader--dots i{width:6px;height:6px;border-radius:99px;background:var(--i-br);animation:d-bounce 1s ease-in-out infinite}
.d-loader--dots i:nth-child(2){animation-delay:.15s}
.d-loader--dots i:nth-child(3){animation-delay:.3s}
@keyframes d-bounce{0%,100%{transform:translateY(4px);opacity:.4}50%{transform:none;opacity:1}}
.d-loader--bar{width:22px;height:22px;display:grid;place-items:center}
.d-loader--bar i{width:14px;height:14px;border-radius:3px;background:var(--i-br);animation:d-flip 1.1s cubic-bezier(.45,0,.55,1) infinite}
@keyframes d-flip{50%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}

/* ═══════════════════════════════════════════════════════════
   09 · 社会证明 Social Proof
   ═══════════════════════════════════════════════════════════ */

/* 01 Logo 云 Logo Cloud */
.d-logocloud{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:100%}
.d-logocloud__cell{display:grid;place-items:center;height:34px;border:1px solid var(--i-line);border-radius:8px;background:#fff;font-size:10px;font-weight:700;color:var(--i-tx3);letter-spacing:-.01em;filter:grayscale(1);opacity:.75;transition:.2s}
.d-logocloud__cell:hover{filter:none;opacity:1;color:var(--i-tx);border-color:var(--i-line2)}
.d-logocloud__cap{grid-column:span 4;text-align:center;font-size:9px;color:var(--i-tx3);letter-spacing:.1em;text-transform:uppercase}

/* 02 Logo 跑马灯 Logo Marquee */
.d-logomq{position:relative;width:100%;overflow:hidden;padding:10px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.d-logomq__track{display:flex;gap:26px;width:max-content;animation:d-mq 16s linear infinite;align-items:center}
.d-logomq__logo{font-size:12px;font-weight:750;color:var(--i-tx3);letter-spacing:-.02em;white-space:nowrap;display:flex;align-items:center;gap:5px}

/* 03 评价轮播 Testimonial Carousel */
.d-testicaro{width:100%;max-width:212px}
.d-testicaro__card{padding:11px;border:1px solid var(--i-line);border-radius:11px;background:#fff;box-shadow:var(--i-sh-s)}
.d-testicaro__q{font-size:10px;line-height:1.6;color:var(--i-tx)}
.d-testicaro__who{display:flex;align-items:center;gap:6px;margin-top:8px}
.d-testicaro__who b{font-size:9.5px;display:block}
.d-testicaro__who span{font-size:8px;color:var(--i-tx3);display:block}
.d-testicaro__nav{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:9px}
.d-testicaro__arr{display:grid;place-items:center;width:20px;height:20px;border-radius:99px;border:1px solid var(--i-line);background:#fff;font-size:9px;color:var(--i-tx2)}
.d-testicaro__dots{display:flex;gap:4px}
.d-testicaro__dots i{width:4.5px;height:4.5px;border-radius:99px;background:var(--i-line2)}
.d-testicaro__dots i:first-child{width:13px;background:var(--i-br)}

/* 04 星级评分展示 Star Rating Display */
.d-starshow{display:flex;flex-direction:column;gap:7px;align-items:center;text-align:center}
.d-starshow__row{display:flex;align-items:center;gap:6px}
.d-starshow__num{font-size:22px;font-weight:790;letter-spacing:-.03em}
.d-starshow__stars{color:#f59e0b;font-size:13px;letter-spacing:1.5px}
.d-starshow__meta{font-size:9px;color:var(--i-tx3)}

/* 05 安全徽章 Trust Badge */
.d-trustbadges{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.d-tbadge{display:flex;align-items:center;gap:5px;padding:5px 9px;border:1px solid var(--i-line);border-radius:8px;background:#fff;font-size:8.5px;font-weight:650;color:var(--i-tx2)}
.d-tbadge i{font-style:normal;font-size:10px}

/* 06 媒体报道条 Press Bar */
.d-pressbar{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}
.d-pressbar__logos{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:center}
.d-pressbar__logo{font-size:11px;font-weight:750;font-style:italic;color:var(--i-tx3);letter-spacing:-.01em}
.d-pressbar__quote{font-size:9.5px;color:var(--i-tx2);font-style:italic}
.d-pressbar__quote b{color:var(--i-tx);font-style:normal}

/* 07 客户案例卡 Case Study Card */
.d-casecard{width:100%;border:1px solid var(--i-line);border-radius:12px;overflow:hidden;background:#fff;box-shadow:var(--i-sh-s)}
.d-casecard__top{height:58px;background:linear-gradient(120deg,#0f172a,#312e81);display:flex;align-items:center;padding:0 12px;color:#fff;font-weight:750;font-size:11px;letter-spacing:-.01em}
.d-casecard__bd{padding:11px;display:flex;flex-direction:column;gap:6px}
.d-casecard__row{display:flex;justify-content:space-between;align-items:baseline}
.d-casecard__row b{font-size:14px;font-weight:760;letter-spacing:-.02em;color:var(--i-br)}
.d-casecard__row span{font-size:8.5px;color:var(--i-tx3)}

/* 08 实时数据计数器 Live Counter */
.d-livecounter{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px;border:1px solid var(--i-line);border-radius:12px;background:#fff;box-shadow:var(--i-sh-s)}
.d-livecounter__num{display:flex;align-items:baseline;gap:6px}
.d-livecounter__num b{font-size:24px;font-weight:790;letter-spacing:-.035em;color:var(--i-ok);font-variant-numeric:tabular-nums}
.d-livecounter__live{display:flex;align-items:center;gap:4px;font-size:8.5px;color:var(--i-tx3)}

/* 09 头像堆叠 Avatar Stack */
.d-avstack{display:flex;flex-direction:column;align-items:center;gap:8px}
.d-avstack__row{display:flex}
.d-avstack__row .d-av{width:27px;height:27px;font-size:10px;border:2px solid #fff;margin-left:-8px;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.d-avstack__row .d-av:first-child{margin-left:0}
.d-avstack__row .d-av--more{background:#17171b;font-size:8px}
.d-avstack__grad1{background:linear-gradient(135deg,#f472b6,#c026d3)}
.d-avstack__grad2{background:linear-gradient(135deg,#34d399,#059669)}
.d-avstack__grad3{background:linear-gradient(135deg,#fbbf24,#f97316)}
.d-avstack__grad4{background:linear-gradient(135deg,#60a5fa,#4f46e5)}
.d-avstack__cap{font-size:9.5px;color:var(--i-tx2)}
.d-avstack__cap b{color:var(--i-tx)}

/* 10 数据里程碑带 Stat Band */
.d-statband{display:flex;align-items:stretch;border:1px solid var(--i-line);border-radius:12px;background:#fff;overflow:hidden;box-shadow:var(--i-sh-s)}
.d-statband__cell{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:13px 6px;border-right:1px solid var(--i-line)}
.d-statband__cell:last-child{border-right:0}
.d-statband__cell b{font-size:17px;font-weight:780;letter-spacing:-.03em}
.d-statband__cell span{font-size:8px;color:var(--i-tx3);letter-spacing:.02em}

/* ═══════════════════════════════════════════════════════════
   10 · 转化 CTA
   ═══════════════════════════════════════════════════════════ */

/* 11 底部悬浮 CTA 条 Sticky Bottom CTA */
.d-stickycta{position:absolute;left:8px;right:8px;bottom:10px;display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:11px;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border:1px solid var(--i-line);box-shadow:var(--i-sh)}
.d-stickycta__txt{display:flex;flex-direction:column;min-width:0}
.d-stickycta__txt b{font-size:10.5px;font-weight:680;white-space:nowrap}
.d-stickycta__txt span{font-size:8.5px;color:var(--i-tx3);white-space:nowrap}

/* 12 退出意图弹窗 Exit-intent Modal */
.d-exitstage{position:relative;width:100%;height:100%;min-height:150px;border-radius:11px;background:linear-gradient(160deg,#e9ecf6,#dfe4f2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.d-exitstage::before{content:'';position:absolute;inset:0;background:rgba(12,12,20,.5)}
.d-exitcard{position:relative;width:86%;padding:13px;border-radius:12px;background:#fff;text-align:center;display:flex;flex-direction:column;gap:6px;box-shadow:var(--i-sh-l);animation:d-modalin 4.4s ease infinite}
.d-exitcard__tag{align-self:center;padding:2.5px 9px;border-radius:99px;background:var(--i-gd3);color:#fff;font-size:8.5px;font-weight:700;letter-spacing:.05em}
.d-exitcard b{font-size:12.5px;font-weight:720}
.d-exitcard p{font-size:9.5px;color:var(--i-tx2);margin:0}
.d-exitcard u{font-size:9px;color:var(--i-tx3)}

/* 13 内联订阅框 Inline Newsletter */
.d-newsl{display:flex;flex-direction:column;gap:9px}
.d-newsl__form{display:flex;gap:5px}
.d-newsl__input{flex:1;height:29px;padding:0 10px;border:1px solid var(--i-line2);border-radius:8px;background:#fff;font-size:10.5px;color:var(--i-tx3)}
.d-newsl__meta{display:flex;align-items:center;gap:9px;font-size:9px;color:var(--i-tx3)}
.d-newsl__meta span{display:flex;align-items:center;gap:3px}

/* 14 免费试用 CTA Free Trial CTA */
.d-trialcta{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:13px;border:1px solid var(--i-line);border-radius:13px;background:linear-gradient(160deg,#fff, #f4f2ff)}
.d-trialcta b{font-size:13.5px;font-weight:730;letter-spacing:-.02em}
.d-trialcta p{font-size:10px;color:var(--i-tx2);margin:0}
.d-trialcta__micro{font-size:8.5px;color:var(--i-tx3)}

/* 15 稀缺性徽章 Scarcity Badge */
.d-scarce{display:flex;flex-direction:column;gap:8px;align-items:center}
.d-scarce__badge{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:99px;background:linear-gradient(90deg,#dc2626,#f97316);color:#fff;font-size:9.5px;font-weight:700;box-shadow:0 5px 14px -6px rgba(220,38,38,.7);animation:d-breathe 1.8s ease-in-out infinite}
@keyframes d-breathe{50%{transform:scale(1.05)}}
.d-scarce__bar{width:150px;height:6px;border-radius:99px;background:var(--i-bg3);overflow:hidden}
.d-scarce__bar i{display:block;height:100%;width:86%;border-radius:inherit;background:linear-gradient(90deg,#f97316,#dc2626)}
.d-scarce__cap{font-size:9px;color:var(--i-tx2)}

/* 16 对比表 Comparison Table */
.d-compare{width:100%;border:1px solid var(--i-line);border-radius:11px;overflow:hidden;background:#fff;box-shadow:var(--i-sh-s);font-size:9.5px}
.d-compare__row{display:grid;grid-template-columns:1.3fr 1fr 1fr;border-bottom:1px solid var(--i-line)}
.d-compare__row:last-child{border-bottom:0}
.d-compare__cell{padding:6px 9px;display:flex;align-items:center;gap:4px}
.d-compare__row:first-child .d-compare__cell{background:var(--i-bg2);font-weight:680;font-size:9px}
.d-compare__cell.is-win{background:#f0fdf4;color:#047857;font-weight:650}
.d-compare__name{color:var(--i-tx2)}

/* 17 常见问题手风琴 FAQ Accordion */
.d-faq{display:flex;flex-direction:column;gap:5px;width:100%}
.d-faq__item{border:1px solid var(--i-line);border-radius:9px;background:#fff;overflow:hidden}
.d-faq__q{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;font-size:10.5px;font-weight:640;cursor:pointer}
.d-faq__item.is-open{border-color:rgba(79,70,229,.4);box-shadow:0 0 0 1px rgba(79,70,229,.15)}
.d-faq__item.is-open .d-faq__q{color:var(--i-br)}
.d-faq__a{padding:0 10px 9px;font-size:9.5px;color:var(--i-tx2);line-height:1.6}
.d-faq__chev{font-size:9px;color:var(--i-tx3);transition:.25s}
.d-faq__item.is-open .d-faq__chev{transform:rotate(180deg);color:var(--i-br)}

/* 18 在线客服气泡 Chat Widget */
.d-chatwrap{position:relative;width:100%;height:100%;min-height:150px}
.d-chatcard{position:absolute;right:6px;bottom:44px;width:150px;padding:10px;border-radius:12px;border:1px solid var(--i-line);background:#fff;box-shadow:var(--i-sh-l);display:flex;flex-direction:column;gap:7px;animation:d-chatpop 4.5s cubic-bezier(.34,1.4,.64,1) infinite}
@keyframes d-chatpop{0%,6%{opacity:0;transform:translateY(10px) scale(.95)}12%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
.d-chatcard__msg{padding:7px 9px;border-radius:9px 9px 9px 3px;background:var(--i-bg2);font-size:9px;line-height:1.5;color:var(--i-tx)}
.d-chatcard__msg--me{background:var(--i-br);color:#fff;border-radius:9px 9px 3px 9px;align-self:flex-end}
.d-chatbubble{position:absolute;right:6px;bottom:6px;width:34px;height:34px;border-radius:99px;background:var(--i-gd);display:grid;place-items:center;color:#fff;font-size:13px;box-shadow:0 10px 22px -8px rgba(99,102,241,.8)}
.d-chatbubble::after{content:'';position:absolute;top:2px;right:2px;width:8px;height:8px;border-radius:99px;background:#22c55e;border:2px solid #fff}

/* 19 Cookie 同意条 Cookie Consent */
.d-cookie{position:absolute;left:8px;right:8px;bottom:10px;display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:11px;background:#17171b;color:#fff;box-shadow:var(--i-sh-l);font-size:9.5px}
.d-cookie__ic{font-size:14px}
.d-cookie__txt{flex:1;line-height:1.45;opacity:.85}
.d-cookie__btns{display:flex;gap:5px;flex-direction:column}
.d-cookie__ok{padding:4px 10px;border-radius:7px;background:#fff;color:#17171b;font-size:9px;font-weight:650}
.d-cookie__no{padding:2px 10px;font-size:8.5px;opacity:.65}

/* 20 价值主张清单 Value Prop List */
.d-valueprop{display:flex;flex-direction:column;gap:6px;width:100%}
.d-vp{display:flex;gap:7px;align-items:flex-start;font-size:10px;color:var(--i-tx2);line-height:1.5}
.d-vp__check{display:grid;place-items:center;width:14px;height:14px;border-radius:99px;background:#dcfce7;color:#047857;font-size:8px;font-weight:800;flex:0 0 auto;margin-top:1px}
.d-vp b{color:var(--i-tx);font-weight:650}

/* 21 退款保证徽章 Money-back Guarantee */
.d-guarantee{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px dashed #86efac;border-radius:11px;background:#f0fdf4}
.d-guarantee__shield{display:grid;place-items:center;width:32px;height:32px;border-radius:99px;background:#dcfce7;color:#047857;font-size:14px;flex:0 0 auto}
.d-guarantee b{font-size:10.5px;font-weight:690;display:block;color:#065f46}
.d-guarantee span{font-size:9px;color:#15803d;display:block}

/* 22 限额进度条 Limited Spots Progress */
.d-spotbar{display:flex;flex-direction:column;gap:6px;width:100%;max-width:200px}
.d-spotbar__top{display:flex;justify-content:space-between;font-size:9px;color:var(--i-tx2)}
.d-spotbar__top b{color:#dc2626;font-weight:700}
.d-spotbar__track{height:7px;border-radius:99px;background:var(--i-bg3);overflow:hidden}
.d-spotbar__fill{height:100%;width:87%;border-radius:inherit;background:linear-gradient(90deg,#f97316,#dc2626);animation:d-progfill 3s ease infinite alternate}

/* ═══════════════════════════════════════════════════════════
   11 · 定价 Pricing
   ═══════════════════════════════════════════════════════════ */

/* 23 三档定价 Three-tier Pricing */
.d-tier{display:grid;grid-template-columns:1fr 1.08fr 1fr;gap:6px;align-items:end;width:100%}
.d-tier__card{padding:10px 9px;border:1px solid var(--i-line);border-radius:11px;background:#fff;display:flex;flex-direction:column;gap:5px}
.d-tier__card--hot{padding:12px 9px;background:#12121a;color:#fff;border:1.5px solid transparent;background-clip:padding-box;position:relative;box-shadow:0 14px 30px -14px rgba(99,102,241,.8)}
.d-tier__card--hot::before{content:'';position:absolute;inset:-1.5px;border-radius:12.5px;background:var(--i-gd);z-index:-1}
.d-tier__name{font-size:9px;font-weight:650;color:var(--i-tx3);letter-spacing:.04em;text-transform:uppercase}
.d-tier__card--hot .d-tier__name{color:rgba(255,255,255,.6)}
.d-tier__price{font-size:16px;font-weight:780;letter-spacing:-.03em}
.d-tier__price small{font-size:8px;font-weight:500;opacity:.55}
.d-tier__feat{font-size:8.5px;color:var(--i-tx3);line-height:1.5}
.d-tier__card--hot .d-tier__feat{color:rgba(255,255,255,.75)}
.d-tier__btn{height:22px;display:grid;place-items:center;border-radius:6px;font-size:8.5px;font-weight:650;background:var(--i-bg2);color:var(--i-tx2)}
.d-tier__card--hot .d-tier__btn{background:var(--i-gd);color:#fff}

/* 24 月付年付切换 Billing Toggle */
.d-billtoggle{display:flex;flex-direction:column;align-items:center;gap:8px}
.d-billtoggle__row{display:flex;align-items:center;gap:9px;font-size:10.5px;font-weight:620;color:var(--i-tx3)}
.d-billtoggle__row .is-on{color:var(--i-tx)}
.d-billtoggle__sw{position:relative;width:40px;height:22px;border-radius:99px;background:var(--i-br)}
.d-billtoggle__sw::after{content:'';position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:99px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.d-billtoggle__save{padding:2px 7px;border-radius:99px;background:#dcfce7;color:#047857;font-size:8.5px;font-weight:700}
.d-billtoggle__delta{font-size:9px;color:var(--i-tx3)}

/* 25 功能对比表 Feature Comparison */
.d-featcmp{width:100%;border:1px solid var(--i-line);border-radius:11px;overflow:hidden;background:#fff;font-size:9px;box-shadow:var(--i-sh-s)}
.d-featcmp table{table-layout:fixed}
.d-featcmp th,.d-featcmp td{padding:6px 7px;text-align:center;border-bottom:1px solid var(--i-line)}
.d-featcmp th{background:var(--i-bg2);font-weight:680;font-size:8.5px}
.d-featcmp th:first-child,.d-featcmp td:first-child{text-align:left;color:var(--i-tx2)}
.d-featcmp tr:last-child td{border-bottom:0}
.d-featcmp .col-hot{background:#f7f7ff}
.d-featcmp .yes{color:var(--i-ok);font-weight:700}
.d-featcmp .no{color:var(--i-line2)}

/* 26 用量滑块定价 Usage Slider Pricing */
.d-usageslider{display:flex;flex-direction:column;gap:8px;width:100%;max-width:200px;padding:11px;border:1px solid var(--i-line);border-radius:11px;background:#fff;box-shadow:var(--i-sh-s)}
.d-usageslider__top{display:flex;justify-content:space-between;align-items:baseline}
.d-usageslider__top span{font-size:9.5px;color:var(--i-tx2)}
.d-usageslider__top b{font-size:15px;font-weight:770;letter-spacing:-.03em}
.d-usageslider__note{font-size:8.5px;color:var(--i-tx3)}

/* 27 单一定价卡 Single Plan Card */
.d-singleplan{display:flex;flex-direction:column;gap:7px;width:100%;max-width:200px;padding:13px;border:1px solid var(--i-line);border-radius:13px;background:#fff;box-shadow:var(--i-sh-s)}
.d-singleplan__top{display:flex;justify-content:space-between;align-items:center}
.d-singleplan__price{font-size:25px;font-weight:790;letter-spacing:-.04em}
.d-singleplan__price small{font-size:9.5px;font-weight:500;color:var(--i-tx3)}
.d-singleplan__list{display:flex;flex-direction:column;gap:4px;font-size:9.5px;color:var(--i-tx2);margin:0}
.d-singleplan__list li{display:flex;align-items:center;gap:5px}

/* 28 企业定制卡 Enterprise Card */
.d-enterprise{display:flex;flex-direction:column;gap:6px;width:100%;padding:13px;border-radius:13px;background:linear-gradient(150deg,#0f172a,#1e1b4b);color:#fff;box-shadow:var(--i-sh)}
.d-enterprise__row{display:flex;align-items:center;gap:7px}
.d-enterprise__row b{font-size:12px;font-weight:700;letter-spacing:-.01em}
.d-enterprise p{font-size:9.5px;opacity:.75;margin:0;line-height:1.55}
.d-enterprise__tags{display:flex;gap:4px;flex-wrap:wrap}
.d-enterprise__tags i{font-style:normal;padding:2px 7px;border-radius:99px;background:rgba(255,255,255,.14);font-size:8px}

/* 29 价格锚点 Price Anchoring */
.d-anchor{display:flex;flex-direction:column;gap:8px;width:100%;max-width:200px;padding:12px;border:1px solid var(--i-line);border-radius:12px;background:#fff;box-shadow:var(--i-sh-s)}
.d-anchor__row{display:flex;align-items:baseline;gap:8px}
.d-anchor__now{font-size:25px;font-weight:790;letter-spacing:-.04em}
.d-anchor__was{font-size:12px;color:var(--i-tx3);text-decoration:line-through}
.d-anchor__off{margin-left:auto;padding:2px 7px;border-radius:6px;background:#fee2e2;color:#b91c1c;font-size:9px;font-weight:700}
.d-anchor__cap{font-size:9px;color:var(--i-tx3)}

/* 30 免费增值卡 Freemium Card */
.d-freemium{display:flex;flex-direction:column;gap:6px;width:100%;padding:12px;border:1px solid var(--i-line);border-radius:12px;background:linear-gradient(160deg,#fff,#f0fdf4);box-shadow:var(--i-sh-s)}
.d-freemium__row{display:flex;align-items:center;justify-content:space-between}
.d-freemium__row b{font-size:13px;font-weight:730}
.d-freemium__row .d-tier__price{font-size:19px}
.d-freemium p{font-size:9px;color:var(--i-tx2);margin:0;line-height:1.5}
.d-freemium__bar{display:flex;justify-content:space-between;font-size:8.5px;color:var(--i-tx3);padding-top:5px;border-top:1px dashed var(--i-line2)}

/* ═══════════════════════════════════════════════════════════
   12 · 数据可视化 Data Visualization
   ═══════════════════════════════════════════════════════════ */

/* 01 柱状图 Bar Chart */
.d-barchart{display:flex;flex-direction:column;gap:7px;width:100%;max-width:210px}
.d-bar__plot{display:flex;align-items:flex-end;gap:7px;height:84px;padding:0 2px;border-bottom:1px solid var(--i-line)}
.d-bar__col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:0;border-radius:5px 5px 0 0;background:linear-gradient(180deg,#818cf8,#4f46e5);transform-origin:bottom;animation:d-grow2 1.4s cubic-bezier(.22,1,.36,1) backwards}
.d-bar__col--dim{background:var(--i-bg3);animation-name:d-grow2}
.d-bar__col--hot{background:linear-gradient(180deg,#c026d3,#7c3aed)}
@keyframes d-grow2{from{transform:scaleY(0)}}
.d-bar__labels{display:flex;gap:7px;padding:4px 2px 0}
.d-bar__labels span{flex:1;text-align:center;font-size:8px;color:var(--i-tx3)}

/* 02 折线图 Line Chart */
.d-linechart{width:100%;max-width:210px}
.d-linechart svg{width:100%;height:auto}
.d-linechart__meta{display:flex;justify-content:space-between;font-size:8px;color:var(--i-tx3);padding:4px 2px 0}

/* 03 环形图 Donut Chart */
.d-donutwrap{display:flex;align-items:center;gap:12px}
.d-donut{position:relative;width:78px;height:78px;border-radius:99px;background:conic-gradient(#4f46e5 0 52%,#c026d3 52% 78%,#f59e0b 78% 92%,#e9eaef 92% 100%);display:grid;place-items:center}
.d-donut::after{content:'';position:absolute;width:48px;height:48px;border-radius:99px;background:#fff}
.d-donut b{position:relative;z-index:1;font-size:13px;font-weight:760;letter-spacing:-.02em}
.d-donut__legend{display:flex;flex-direction:column;gap:4px;font-size:8.5px;color:var(--i-tx2)}
.d-donut__legend i{display:inline-block;width:7px;height:7px;border-radius:2.5px;margin-right:4px;vertical-align:-.5px}

/* 04 迷你趋势线 Sparkline */
.d-spark{display:flex;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--i-line);border-radius:11px;background:#fff;box-shadow:var(--i-sh-s)}
.d-spark__info{display:flex;flex-direction:column;gap:2px}
.d-spark__info b{font-size:16px;font-weight:770;letter-spacing:-.03em}
.d-spark__info span{font-size:8.5px;color:var(--i-tx3)}
.d-spark__up{color:var(--i-ok);font-size:9px;font-weight:650}
.d-spark svg{width:84px;height:30px}

/* 05 热力图 Heatmap */
.d-heat{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;width:100%;max-width:200px}
.d-heat i{aspect-ratio:1;border-radius:3px;background:rgba(79,70,229,var(--v,.08))}
.d-heat__cap{grid-column:span 12;font-size:8px;color:var(--i-tx3);text-align:right}

/* 06 仪表盘 Gauge */
.d-gauge{position:relative;width:130px;height:74px;overflow:hidden}
.d-gauge svg{display:block}
.d-gauge__val{position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:16px;font-weight:780;letter-spacing:-.03em}
.d-gauge__val small{display:block;font-size:8px;font-weight:500;color:var(--i-tx3)}

/* 07 进度环 Progress Ring */
.d-ringwrap{display:flex;gap:12px;align-items:center}
.d-ring{position:relative;width:74px;height:74px}
.d-ring svg{transform:rotate(-90deg)}
.d-ring__track{stroke:var(--i-bg3)}
.d-ring__fill{stroke:url(#d-ring-grad);stroke-linecap:round;animation:d-ringdash 2.2s cubic-bezier(.22,1,.36,1) forwards}
@keyframes d-ringdash{from{stroke-dashoffset:207}to{stroke-dashoffset:56}}
.d-ring__num{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;font-weight:760;letter-spacing:-.02em}
.d-ring__info{display:flex;flex-direction:column;gap:3px;font-size:9.5px;color:var(--i-tx2)}
.d-ring__info b{font-size:11px;color:var(--i-tx)}

/* 08 堆叠条形图 Stacked Bar */
.d-stackbar{display:flex;flex-direction:column;gap:8px;width:100%}
.d-stackbar__row{display:flex;flex-direction:column;gap:4px}
.d-stackbar__cap{display:flex;justify-content:space-between;font-size:9px;color:var(--i-tx2)}
.d-stackbar__track{display:flex;height:12px;border-radius:6px;overflow:hidden;gap:2px}
.d-stackbar__seg{border-radius:3px;transform-origin:left;animation:d-barx 1.3s cubic-bezier(.22,1,.36,1) backwards}
@keyframes d-barx{from{transform:scaleX(0)}}
.d-stackbar__legend{display:flex;gap:10px;font-size:8.5px;color:var(--i-tx3)}
.d-stackbar__legend i{display:inline-block;width:7px;height:7px;border-radius:2.5px;margin-right:4px;vertical-align:-.5px}

/* 09 水平排行条 Horizontal Ranking Bar */
.d-rank{display:flex;flex-direction:column;gap:7px;width:100%}
.d-rank__row{display:flex;align-items:center;gap:8px;font-size:9.5px}
.d-rank__pos{width:14px;text-align:center;font-weight:700;color:var(--i-tx3);font-size:8.5px}
.d-rank__name{width:44px;color:var(--i-tx2);white-space:nowrap}
.d-rank__track{flex:1;height:10px;border-radius:99px;background:var(--i-bg3);overflow:hidden}
.d-rank__fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,#818cf8,#4f46e5);transform-origin:left;animation:d-barx 1.2s cubic-bezier(.22,1,.36,1) backwards}
.d-rank__row:first-child .d-rank__fill{background:linear-gradient(90deg,#c026d3,#7c3aed)}
.d-rank__val{width:32px;text-align:right;font-weight:650;font-variant-numeric:tabular-nums}

/* 10 漏斗图 Funnel Chart */
.d-funnel{display:flex;flex-direction:column;gap:4px;align-items:center;width:100%}
.d-funnel__stage{height:17px;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:8.5px;font-weight:650;animation:d-barx 1.1s cubic-bezier(.22,1,.36,1) backwards}
.d-funnel__drop{font-size:8px;color:var(--i-err)}

/* 11 雷达图 Radar Chart */
.d-radarwrap{display:flex;align-items:center;gap:10px}
.d-radarwrap svg{width:104px;height:104px}
.d-radar__legend{display:flex;flex-direction:column;gap:5px;font-size:8.5px;color:var(--i-tx2)}
.d-radar__legend b{font-size:10px;color:var(--i-tx)}
.d-radar__legend i{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:4px;vertical-align:-.5px}

/* 12 图表卡片容器 Chart Card Container */
.d-chartcard{width:100%;max-width:210px;border:1px solid var(--i-line);border-radius:13px;background:#fff;box-shadow:var(--i-sh-s);overflow:hidden}
.d-chartcard__hd{display:flex;align-items:center;justify-content:space-between;padding:9px 11px;border-bottom:1px solid var(--i-line)}
.d-chartcard__hd b{font-size:10.5px;font-weight:670}
.d-chartcard__hd .d-tiny{font-size:8.5px}
.d-chartcard__bd{padding:11px;display:flex;align-items:flex-end;gap:14px}
.d-chartcard__big{font-size:22px;font-weight:780;letter-spacing:-.035em;line-height:1}
.d-chartcard__up{color:var(--i-ok);font-size:9px;font-weight:650;margin-top:4px}
.d-chartcard svg{margin-left:auto}

/* ═══════════════════════════════════════════════════════════
   13 · 排版 Typography
   ═══════════════════════════════════════════════════════════ */

/* 13 巨号标题 Display Heading */
.d-typedisp{display:flex;flex-direction:column;gap:6px}
.d-typedisp__big{font-size:30px;line-height:1.02;font-weight:830;letter-spacing:-.048em;color:var(--i-tx)}
.d-typedisp__spec{font-size:8.5px;color:var(--i-tx3);font-family:ui-monospace,Menlo,monospace;line-height:1.7}

/* 14 渐变文字 Gradient Text */
.d-gradtext{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}
.d-gradtext__t{font-size:26px;font-weight:800;letter-spacing:-.04em;background:var(--i-gd);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.d-gradtext__t--anim{background:linear-gradient(90deg,#4f46e5,#c026d3,#06b6d4,#4f46e5);background-size:280% 100%;animation:d-gradmove 5s linear infinite}
@keyframes d-gradmove{to{background-position:280% 0}}
.d-gradtext__t--vert{background:linear-gradient(180deg,#17171b 25%,#7c3aed)}

/* 15 图片填充文字 Text Mask Image */
.d-textmask{display:flex;flex-direction:column;gap:7px;align-items:center}
.d-textmask__t{font-size:34px;font-weight:830;letter-spacing:-.04em;background:var(--i-gd2) center/cover;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.d-textmask__cap{font-size:9px;color:var(--i-tx3)}

/* 16 荧光笔标记 Marker Highlight */
.d-markerdemo{display:flex;flex-direction:column;gap:9px;font-size:11.5px;line-height:1.7;color:var(--i-tx);max-width:210px}
.d-marker{background:linear-gradient(180deg,transparent 55%,#fef08a 55%);padding:0 2px;font-weight:600}
.d-marker--b{background:linear-gradient(180deg,transparent 55%,#bfdbfe 55%)}
.d-marker--g{background:linear-gradient(180deg,transparent 55%,#bbf7d0 55%)}
.d-marker--anim{background:linear-gradient(180deg,transparent 55%,#fde68a 55%);background-size:0% 100%;background-repeat:no-repeat;animation:d-markerdraw 2.6s ease infinite alternate}
@keyframes d-markerdraw{to{background-size:100% 100%}}

/* 17 逐字入场 Text Reveal Animation */
.d-textreveal{display:flex;flex-direction:column;align-items:center;gap:8px}
.d-textreveal__line{display:flex;gap:.14em;font-size:19px;font-weight:770;letter-spacing:-.03em}
.d-textreveal__line span{opacity:0;transform:translateY(12px);animation:d-charin 3.2s cubic-bezier(.22,1,.36,1) infinite;animation-delay:calc(var(--i) * .07s)}
@keyframes d-charin{0%{opacity:0;transform:translateY(12px)}8%,80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}

/* 18 眉题 Kicker / Eyebrow Label */
.d-kickerdemo{display:flex;flex-direction:column;gap:9px;align-items:flex-start;width:100%;max-width:200px}
.d-kicker{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--i-br)}
.d-kicker::before{content:'';width:16px;height:2px;background:var(--i-br)}
.d-kicker--line2::before{width:26px}
.d-kicker--pill{padding:3px 10px;border:1px solid var(--i-line);border-radius:99px;background:#fff;letter-spacing:.08em;font-size:9px}
.d-kickerdemo__t{font-size:15px;font-weight:740;letter-spacing:-.025em}

/* 19 首字下沉 Drop Cap */
.d-dropcapdemo{column-count:1;font-size:10px;line-height:1.7;color:var(--i-tx2);max-width:210px}
.d-dropcapdemo::first-letter{float:left;font-size:34px;line-height:.85;font-weight:800;color:var(--i-br);margin:2px 7px 0 0}

/* 20 引文块 Blockquote */
.d-blockquote{position:relative;max-width:200px;padding:4px 0 4px 14px;border-left:3px solid var(--i-br)}
.d-blockquote p{font-size:11.5px;line-height:1.7;font-style:italic;color:var(--i-tx)}
.d-blockquote cite{display:block;margin-top:7px;font-size:9px;font-style:normal;color:var(--i-tx3)}
.d-blockquote__q{position:absolute;right:-4px;top:-14px;font-size:44px;font-family:Georgia,serif;color:var(--i-br);opacity:.12;line-height:1}

/* 21 平衡换行与断行 Balanced Text */
.d-balanced{display:flex;flex-direction:column;gap:9px;max-width:210px}
.d-balanced h4{font-size:14.5px;font-weight:730;letter-spacing:-.02em;line-height:1.3}
.d-balanced h4.balanced{text-wrap:balance;color:var(--i-br)}
.d-balanced p{font-size:9.5px;color:var(--i-tx3);margin:0;line-height:1.6}
.d-balanced p.pretty{text-wrap:pretty;color:var(--i-tx2)}

/* 22 行内代码与代码块 Inline Code & Code Block */
.d-codedemo{display:flex;flex-direction:column;gap:8px;width:100%;max-width:210px}
.d-codeinline{padding:1.5px 6px;border-radius:5px;background:var(--i-bg3);font-family:ui-monospace,Menlo,monospace;font-size:10px;color:#be185d}
.d-codeblock{padding:10px 12px;border-radius:10px;background:#17171b;font-family:ui-monospace,Menlo,monospace;font-size:9.5px;line-height:1.75;color:#e4e4e7;position:relative;overflow:hidden}
.d-codeblock .c-k{color:#c4b5fd}
.d-codeblock .c-s{color:#86efac}
.d-codeblock .c-f{color:#7dd3fc}
.d-codeblock .c-c{color:#6b7280}
.d-codeblock__copy{position:absolute;right:7px;top:7px;padding:2px 7px;border-radius:5px;background:rgba(255,255,255,.12);color:#d4d4d8;font-size:8px}

/* 23 数字大字 Numeric Display */
.d-numdisp{display:flex;gap:12px;align-items:flex-end}
.d-numdisp__item{display:flex;flex-direction:column;gap:2px}
.d-numdisp__item b{font-size:27px;font-weight:800;letter-spacing:-.045em;font-variant-numeric:tabular-nums;line-height:1}
.d-numdisp__item b small{font-size:13px;font-weight:650;color:var(--i-br)}
.d-numdisp__item span{font-size:8.5px;color:var(--i-tx3)}

/* 24 衬线混排 Serif Mixing */
.d-serifmix{display:flex;flex-direction:column;gap:7px;max-width:210px}
.d-serifmix__t{font-family:Georgia,"Songti SC",serif;font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.d-serifmix__t em{font-style:italic;color:var(--i-br)}
.d-serifmix__t i{font-family:-apple-system,"PingFang SC",sans-serif;font-style:normal;font-size:12px;font-weight:600;color:var(--i-tx3);vertical-align:2px;margin-left:2px}
.d-serifmix__cap{font-size:9px;color:var(--i-tx3)}

/* ═══════════════════════════════════════════════════════════
   14 · 背景与装饰 Background & Decor
   ═══════════════════════════════════════════════════════════ */

/* 01 噪点颗粒 Noise / Grain Overlay */
.d-noisebg{position:relative;width:100%;height:100%;min-height:150px;border-radius:11px;overflow:hidden;background:linear-gradient(135deg,#6366f1,#a855f7 55%,#ec4899);display:flex;align-items:center;justify-content:center;color:#fff}
.d-noisebg::after{content:'';position:absolute;inset:0;opacity:.35;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
.d-noisebg b{position:relative;font-size:13px;font-weight:720;letter-spacing:-.01em}
.d-noisebg__tag{position:absolute;left:10px;bottom:8px;font-size:8.5px;opacity:.8;font-family:ui-monospace,Menlo,monospace}

/* 02 网格背景 Grid Background */
.d-gridbg{position:relative;width:100%;height:100%;min-height:150px;border-radius:11px;overflow:hidden;background-color:#fbfbfd;background-image:linear-gradient(#e6e7ee 1px,transparent 1px),linear-gradient(90deg,#e6e7ee 1px,transparent 1px);background-size:26px 26px;display:flex;align-items:center;justify-content:center}
.d-gridbg::after{content:'';position:absolute;inset:0;background:radial-gradient(58% 70% at 50% 42%,transparent 30%,#fbfbfd 88%)}
.d-gridbg b{position:relative;font-size:12.5px;font-weight:700;letter-spacing:-.01em;color:var(--i-tx)}

/* 03 点阵背景 Dot Grid */
.d-dotbg{position:relative;width:100%;height:100%;min-height:150px;border-radius:11px;overflow:hidden;background-color:#fbfbfd;background-image:radial-gradient(#d5d6df 1.3px,transparent 1.3px);background-size:18px 18px;display:flex;align-items:center;justify-content:center}
.d-dotbg b{position:relative;padding:9px 15px;border-radius:10px;background:rgba(255,255,255,.9);box-shadow:var(--i-sh);font-size:12px;font-weight:700}

/* 04 极光光斑 Aurora Glow */
.d-aurorabg{position:relative;width:100%;height:100%;min-height:150px;border-radius:11px;overflow:hidden;background:#0a0a12;display:flex;align-items:center;justify-content:center}
.d-aurorabg__g{position:absolute;width:150px;height:150px;border-radius:99px;filter:blur(34px);opacity:.8;animation:d-blob 9s ease-in-out infinite alternate}
.d-aurorabg__g--1{left:-30px;top:-24px;background:#6366f1}
.d-aurorabg__g--2{right:-24px;bottom:-30px;background:#c026d3;animation-delay:-4s}
.d-aurorabg b{position:relative;color:#fff;font-size:12.5px;font-weight:700}

/* 05 径向聚光 Radial Spotlight */
.d-spotbg{position:relative;width:100%;height:100%;min-height:150px;border-radius:11px;overflow:hidden;background:radial-gradient(62% 78% at 50% 20%,#312e81 0%,#0b0b12 62%);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;color:#fff}
.d-spotbg b{font-size:13px;font-weight:720}
.d-spotbg span{font-size:9.5px;opacity:.6}

/* 06 有机形状 Blob Shapes */
.d-blobbg{position:relative;width:100%;height:100%;min-height:150px;border-radius:11px;overflow:hidden;background:#fdf7f2;display:flex;align-items:center;justify-content:center}
.d-blobbg__b{position:absolute;border-radius:62% 38% 55% 45% / 48% 60% 40% 52%}
.d-blobbg__b--1{width:110px;height:110px;left:-26px;top:-30px;background:linear-gradient(135deg,#fcd34d,#fb923c);opacity:.85;animation:d-morph 10s ease-in-out infinite alternate}
.d-blobbg__b--2{width:90px;height:90px;right:-18px;bottom:-26px;background:linear-gradient(135deg,#a5b4fc,#818cf8);opacity:.8;animation:d-morph 12s ease-in-out infinite alternate-reverse}
@keyframes d-morph{to{border-radius:42% 58% 38% 62% / 56% 42% 58% 44%;transform:rotate(14deg) scale(1.08)}}
.d-blobbg b{position:relative;font-size:12px;font-weight:700;color:#7c2d12}

/* 07 圆锥渐变 Conic Gradient */
.d-conicbg{position:relative;width:100%;height:100%;min-height:150px;border-radius:11px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.d-conicbg::before{content:'';position:absolute;inset:-40%;background:conic-gradient(from 0deg,#4f46e5,#06b6d4,#c026d3,#f59e0b,#4f46e5);animation:d-rot2 9s linear infinite}
.d-conicbg::after{content:'';position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 50%,rgba(10,10,18,.82),#0a0a14)}
@keyframes d-rot2{to{transform:rotate(360deg)}}
.d-conicbg b{position:relative;color:#fff;font-size:12.5px;font-weight:700;z-index:1}

/* 08 网格淡出蒙版 Grid Fade Mask */
.d-gridfade{position:relative;width:100%;height:100%;min-height:150px;border-radius:11px;overflow:hidden;background:#fafafc;display:flex;align-items:flex-start;justify-content:center;padding-top:26px}
.d-gridfade__g{position:absolute;inset:0;background-image:linear-gradient(#e3e4ec 1px,transparent 1px),linear-gradient(90deg,#e3e4ec 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:radial-gradient(70% 62% at 50% 0%,#000 30%,transparent 78%);mask-image:radial-gradient(70% 62% at 50% 0%,#000 30%,transparent 78%)}
.d-gridfade__glow{position:absolute;top:-40px;left:50%;transform:translateX(-50%);width:180px;height:90px;background:radial-gradient(50% 60% at 50% 50%,rgba(99,102,241,.4),transparent 70%);filter:blur(14px)}
.d-gridfade b{position:relative;font-size:12px;font-weight:700}

/* 09 光束射线 Light Rays */
.d-raysbg{position:relative;width:100%;height:100%;min-height:150px;border-radius:11px;overflow:hidden;background:#0b0b12;display:flex;align-items:center;justify-content:center}
.d-raysbg__rays{position:absolute;inset:-30%;background:conic-gradient(from 178deg at 50% -8%,transparent 0deg,rgba(255,255,255,.09) 4deg,transparent 9deg,rgba(255,255,255,.07) 13deg,transparent 18deg,rgba(255,255,255,.1) 24deg,transparent 30deg,rgba(255,255,255,.06) 35deg,transparent 42deg)}
.d-raysbg__sun{position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:170px;height:120px;background:radial-gradient(50% 55% at 50% 60%,rgba(255,224,170,.5),transparent 72%);filter:blur(10px)}
.d-raysbg b{position:relative;color:#fff;font-size:12.5px;font-weight:700}

/* 10 波浪分隔 Wave Divider */
.d-wavebg{position:relative;width:100%;height:100%;min-height:150px;border-radius:11px;overflow:hidden;display:flex;flex-direction:column}
.d-wavebg__top{flex:1;background:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--i-tx2)}
.d-wavebg__bottom{height:64px;background:var(--i-gd);position:relative}
.d-wavebg__bottom svg{position:absolute;top:-24px;left:0;width:100%;height:25px}
.d-wavebg__cap{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:9px;color:rgba(255,255,255,.85)}

/* 11 斜切分隔 Diagonal Divider */
.d-diabg{position:relative;width:100%;height:100%;min-height:150px;border-radius:11px;overflow:hidden;display:flex;flex-direction:column}
.d-diabg__top{flex:1;background:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--i-tx2)}
.d-diabg__bottom{height:70px;background:#0f172a;position:relative}
.d-diabg__bottom::before{content:'';position:absolute;top:-22px;left:-5%;width:110%;height:24px;background:#0f172a;clip-path:polygon(0 100%,100% 0,100% 100%)}
.d-diabg__cap{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:9px;color:rgba(255,255,255,.85)}

/* 12 半调网点 Halftone Pattern */
.d-halfbg{position:relative;width:100%;height:100%;min-height:150px;border-radius:11px;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center}
.d-halfbg::before{content:'';position:absolute;right:-24px;bottom:-24px;width:150px;height:150px;background-image:radial-gradient(#4f46e5 1.6px,transparent 1.7px);background-size:11px 11px;-webkit-mask-image:radial-gradient(circle at 100% 100%,#000 30%,transparent 72%);mask-image:radial-gradient(circle at 100% 100%,#000 30%,transparent 72%);opacity:.85}
.d-halfbg::after{content:'';position:absolute;left:-20px;top:-20px;width:110px;height:110px;background-image:radial-gradient(#f59e0b 1.4px,transparent 1.5px);background-size:9px 9px;-webkit-mask-image:radial-gradient(circle at 0 0,#000 30%,transparent 70%);mask-image:radial-gradient(circle at 0 0,#000 30%,transparent 70%)}
.d-halfbg b{position:relative;font-size:12px;font-weight:700}

/* ═══════════════════════════════════════════════════════════
   15 · 图片与媒体 Image & Media
   ═══════════════════════════════════════════════════════════ */

/* 01 滚动揭示图 Image Reveal (clip-path) */
.d-imgreveal{width:100%;height:118px;border-radius:12px;overflow:hidden;position:relative;background:var(--i-gd2);animation:d-unveil 3.4s cubic-bezier(.76,0,.24,1) infinite alternate}
@keyframes d-unveil{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.d-imgreveal__cap{position:absolute;left:10px;bottom:8px;color:#fff;font-size:9.5px;font-weight:600;opacity:.9}

/* 02 前后对比滑块 Before/After Slider */
.d-ba{position:relative;width:100%;height:122px;border-radius:12px;overflow:hidden;box-shadow:var(--i-sh)}
.d-ba__after{position:absolute;inset:0;background:var(--i-gd)}
.d-ba__before{position:absolute;inset:0;width:50%;background:linear-gradient(135deg,#52525b,#27272a);overflow:hidden}
.d-ba__before::after{content:'BEFORE';position:absolute;left:10px;top:10px;font-size:8.5px;font-weight:700;color:#a1a1aa;letter-spacing:.08em}
.d-ba__after::after{content:'AFTER';position:absolute;right:10px;top:10px;font-size:8.5px;font-weight:700;color:rgba(255,255,255,.85);letter-spacing:.08em}
.d-ba__line{position:absolute;left:50%;top:0;bottom:0;width:2.5px;background:#fff;transform:translateX(-50%)}
.d-ba__knob{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:99px;background:#fff;box-shadow:var(--i-sh);display:grid;place-items:center;font-size:9px;color:var(--i-tx2);letter-spacing:-1px}

/* 03 悬停放大图 Hover Zoom */
.d-hzoom{width:100%;height:116px;border-radius:12px;overflow:hidden;position:relative;background:var(--i-gd3);cursor:pointer}
.d-hzoom__inner{position:absolute;inset:0;background:linear-gradient(135deg,#fbbf24,#f97316 55%,#ec4899);transition:transform .7s cubic-bezier(.22,1,.36,1)}
.d-hzoom:hover .d-hzoom__inner{transform:scale(1.12)}
.d-hzoom__tag{position:absolute;left:10px;bottom:8px;color:#fff;font-size:9.5px;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.4)}

/* 04 渐变蒙层图 Gradient Overlay Image */
.d-imgov{position:relative;width:100%;height:118px;border-radius:12px;overflow:hidden;background:var(--i-gd2)}
.d-imgov::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(8,8,16,.88))}
.d-imgov__txt{position:absolute;left:12px;right:12px;bottom:10px;color:#fff;z-index:1}
.d-imgov__txt b{font-size:12.5px;font-weight:700;display:block}
.d-imgov__txt span{font-size:9px;opacity:.8}

/* 05 设备样机 Device Mockup */
.d-device{position:relative;display:flex;gap:10px;align-items:center}
.d-device__phone{width:64px;height:126px;border-radius:14px;background:#17171b;padding:4px;box-shadow:var(--i-sh);flex:0 0 auto}
.d-device__screen{width:100%;height:100%;border-radius:10.5px;background:linear-gradient(160deg,#eef2ff,#fdf2f8);overflow:hidden;position:relative}
.d-device__notch{position:absolute;top:3px;left:50%;transform:translateX(-50%);width:18px;height:4px;border-radius:99px;background:#17171b;z-index:1}
.d-device__appbar{height:16px;background:#fff;display:flex;align-items:center;padding:0 6px;gap:3px}
.d-device__appbar i{width:12px;height:3px;border-radius:99px;background:var(--i-bg3)}
.d-device__appbar i:first-child{width:8px;height:8px;border-radius:3px;background:var(--i-br)}
.d-device__body{padding:6px;display:flex;flex-direction:column;gap:4px}
.d-device__body i{height:4px;border-radius:99px;background:var(--i-bg3)}
.d-device__hero{height:26px;border-radius:6px;background:var(--i-gd)}
.d-device__side{display:flex;flex-direction:column;gap:5px}
.d-device__side b{font-size:10px;font-weight:690}
.d-device__side span{font-size:8.5px;color:var(--i-tx3);line-height:1.5}

/* 06 画廊网格 Image Gallery Grid */
.d-gallery{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:44px;gap:5px;width:100%}
.d-gallery__item{border-radius:8px;overflow:hidden;position:relative}
.d-gallery__item--w{grid-column:span 2}
.d-gallery__item--h{grid-row:span 2}
.d-gallery__cap{position:absolute;left:0;right:0;bottom:0;padding:12px 7px 5px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));color:#fff;font-size:7.5px}

/* 07 灯箱 Lightbox */
.d-lightstage{position:relative;width:100%;height:100%;min-height:150px;border-radius:11px;overflow:hidden;background:rgba(10,10,16,.9);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px}
.d-lightstage__img{width:66%;height:64px;border-radius:9px;background:var(--i-gd2);box-shadow:0 20px 50px -18px rgba(0,0,0,.8)}
.d-lightstage__cap{color:#fff;font-size:9.5px}
.d-lightstage__nav{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.6);font-size:10px}
.d-lightstage__x{position:absolute;right:9px;top:7px;color:rgba(255,255,255,.7);font-size:12px}

/* 08 懒加载 Blur-up */
.d-blurup{width:100%;height:114px;border-radius:12px;overflow:hidden;position:relative}
.d-blurup__blur{position:absolute;inset:0;background:var(--i-gd2);filter:blur(14px) saturate(1.4);transform:scale(1.15);animation:d-unblur 3.6s ease-in-out infinite alternate}
.d-blurup__img{position:absolute;inset:0;background:var(--i-gd2);opacity:0;animation:d-showimg 3.6s ease-in-out infinite alternate}
@keyframes d-unblur{from{filter:blur(14px) saturate(1.4)}to{filter:blur(0) saturate(1)}}
@keyframes d-showimg{from{opacity:0}to{opacity:1}}
.d-blurup__tag{position:absolute;left:10px;bottom:8px;color:#fff;font-size:9px;opacity:.9;text-shadow:0 1px 4px rgba(0,0,0,.4)}

/* 09 图片堆叠 Image Stack */
.d-imgstack{position:relative;width:150px;height:112px;margin:6px auto}
.d-imgstack__p{position:absolute;inset:0;border-radius:11px;background:var(--i-gd2);box-shadow:var(--i-sh);border:3px solid #fff}
.d-imgstack__p:nth-child(1){transform:rotate(-6deg) translate(-10px,4px);background:linear-gradient(135deg,#fbbf24,#f97316)}
.d-imgstack__p:nth-child(2){transform:rotate(4deg) translate(8px,2px);background:linear-gradient(135deg,#34d399,#0891b2)}
.d-imgstack__p:nth-child(3){transform:rotate(-1deg);background:linear-gradient(135deg,#818cf8,#c026d3)}
.d-imgstack:hover .d-imgstack__p:nth-child(1){transform:rotate(-13deg) translate(-22px,8px)}
.d-imgstack:hover .d-imgstack__p:nth-child(2){transform:rotate(10deg) translate(20px,4px)}

/* 10 拼贴画廊 Collage Grid */
.d-collage{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr;gap:5px;width:100%;height:118px}
.d-collage__item{border-radius:10px;overflow:hidden}
.d-collage__item:first-child{grid-row:span 2}

/* ═══════════════════════════════════════════════════════════
   16 · 交互进阶 Interaction
   ═══════════════════════════════════════════════════════════ */

/* 01 自定义光标 Custom Cursor */
.d-cursorstage{position:relative;width:100%;height:100%;min-height:150px;border-radius:11px;overflow:hidden;background:#0b0b12;display:flex;align-items:center;justify-content:center;cursor:none}
.d-cursorstage b{color:#fff;font-size:12px;font-weight:700}
.d-cursorstage span{position:absolute;color:rgba(255,255,255,.4);font-size:9px;bottom:10px}
.d-cursor__dot{position:absolute;width:8px;height:8px;border-radius:99px;background:#fff;pointer-events:none;left:38%;top:40%}
.d-cursor__ring{position:absolute;width:30px;height:30px;border-radius:99px;border:1.5px solid rgba(255,255,255,.5);pointer-events:none;left:36%;top:36%;transition:transform .18s ease,border-color .18s}
.d-cursorstage:hover .d-cursor__ring{transform:scale(1.5);border-color:#818cf8}

/* 02 文字选中样式 ::selection */
.d-seldemo{max-width:200px;font-size:11px;line-height:1.8;color:var(--i-tx)}
.d-seldemo .sel-brand::selection{background:#4f46e5;color:#fff}
.d-seldemo .sel-yellow::selection{background:#fef08a;color:#713f12}
.d-seldemo .sel-pink::selection{background:#fbcfe8;color:#831843}
.d-seldemo__tip{font-size:9px;color:var(--i-tx3);margin-top:6px}

/* 03 纵向时间线 Timeline */
.d-timeline{position:relative;padding-left:16px;display:flex;flex-direction:column;gap:9px;width:100%}
.d-timeline::before{content:'';position:absolute;left:4px;top:4px;bottom:4px;width:1.5px;background:var(--i-line2)}
.d-tl__item{position:relative}
.d-tl__item::before{content:'';position:absolute;left:-15.5px;top:4px;width:8px;height:8px;border-radius:99px;background:#fff;border:2px solid var(--i-line2)}
.d-tl__item.is-now::before{border-color:var(--i-br);background:var(--i-br);box-shadow:0 0 0 3px rgba(79,70,229,.18)}
.d-tl__item.is-now .d-tl__date{color:var(--i-br)}
.d-tl__date{font-size:8.5px;color:var(--i-tx3);font-family:ui-monospace,Menlo,monospace}
.d-tl__item b{font-size:10.5px;font-weight:660;display:block;margin:1px 0 2px}
.d-tl__item span{font-size:9px;color:var(--i-tx2);line-height:1.5;display:block}

/* 04 拖拽滚动 Drag to Scroll */
.d-dragscroll{display:flex;gap:7px;overflow-x:auto;padding:4px 2px 8px;cursor:grab;scrollbar-width:none;user-select:none}
.d-dragscroll::-webkit-scrollbar{display:none}
.d-dragscroll:active{cursor:grabbing}
.d-dragscroll__c{flex:0 0 74px;height:88px;border-radius:10px;display:flex;flex-direction:column;justify-content:flex-end;padding:8px;color:#fff;font-size:9px;font-weight:650;box-shadow:var(--i-sh-s)}
.d-dragscroll__tag{text-align:center;font-size:8.5px;color:var(--i-tx3);font-family:ui-monospace,Menlo,monospace}

/* 05 下划线动画标签 Animated Underline Tabs */
.d-ultabs{display:flex;flex-direction:column;gap:9px}
.d-ultabs__bar{display:flex;gap:16px;border-bottom:1.5px solid var(--i-line);position:relative}
.d-ultabs__tab{padding:7px 1px;font-size:11px;color:var(--i-tx3);font-weight:560;position:relative}
.d-ultabs__tab.is-on{color:var(--i-tx);font-weight:680}
.d-ultabs__tab.is-on::after{content:'';position:absolute;left:0;right:0;bottom:-1.5px;height:2.5px;border-radius:99px;background:var(--i-br);animation:d-uline .35s cubic-bezier(.22,1,.36,1)}
@keyframes d-uline{from{transform:scaleX(.3);opacity:0}to{transform:none;opacity:1}}

/* 06 看板拖拽 Kanban Board */
.d-kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%}
.d-kanban__col{background:var(--i-bg2);border-radius:9px;padding:6px;display:flex;flex-direction:column;gap:5px;min-height:104px}
.d-kanban__cap{font-size:8px;font-weight:700;color:var(--i-tx3);letter-spacing:.06em;text-transform:uppercase;padding:0 2px 1px}
.d-kanban__card{padding:6px 7px;border-radius:7px;background:#fff;box-shadow:var(--i-sh-s);font-size:8.5px;font-weight:600;color:var(--i-tx)}
.d-kanban__card--drag{transform:rotate(2.5deg);box-shadow:var(--i-sh-l);outline:1.5px dashed var(--i-br);outline-offset:2px}
.d-kanban__card i{display:block;font-style:normal;font-weight:500;color:var(--i-tx3);font-size:7.5px;margin-top:2px}

/* 07 分页 Pagination */
.d-pagi{display:flex;align-items:center;gap:5px}
.d-pagi__btn{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;border:1px solid var(--i-line);background:#fff;color:var(--i-tx2);font-size:10px}
.d-pagi__n{min-width:24px;height:24px;display:grid;place-items:center;border-radius:7px;font-size:10px;color:var(--i-tx2);border:1px solid transparent}
.d-pagi__n.is-on{background:var(--i-br);color:#fff;font-weight:650}
.d-pagi__n.is-gap{border:none;color:var(--i-tx3)}
.d-pagi__meta{font-size:9px;color:var(--i-tx3)}

/* 08 筛选标签 Filter Chips */
.d-chips2{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.d-chip2{padding:4.5px 11px;border-radius:99px;border:1px solid var(--i-line);background:#fff;font-size:10px;color:var(--i-tx2);font-weight:560;transition:.18s}
.d-chip2:hover{border-color:var(--i-line2)}
.d-chip2.is-on{background:var(--i-tx);border-color:var(--i-tx);color:var(--i-bg);font-weight:620}
.d-chip2.is-on::after{content:'✕';font-size:8px;margin-left:5px;opacity:.7}

/* 09 通知堆叠 Notification Stack */
.d-notifstack{position:relative;width:100%;max-width:200px;display:flex;flex-direction:column;gap:5px}
.d-notifstack__n{display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:10px;background:#fff;border:1px solid var(--i-line);box-shadow:var(--i-sh-s);font-size:9.5px;font-weight:600}
.d-notifstack__n:nth-child(2){transform:scale(.96);opacity:.75}
.d-notifstack__n:nth-child(3){transform:scale(.92);opacity:.5}
.d-notifstack__n i{font-style:normal;font-size:11px}
.d-notifstack__t{font-size:8px;color:var(--i-tx3);margin-left:auto}

/* 10 卡片滑动删除 Swipe to Delete */
.d-swipe{position:relative;width:100%;max-width:200px;height:38px;border-radius:10px;overflow:hidden;background:#fee2e2}
.d-swipe__bg{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#dc2626;font-size:9.5px;font-weight:700;display:flex;align-items:center;gap:4px}
.d-swipe__card{position:absolute;inset:0;padding:0 12px;display:flex;align-items:center;gap:8px;border-radius:10px;background:#fff;box-shadow:var(--i-sh-s);font-size:10px;font-weight:620;transform:translateX(-34%)}
.d-swipe__tag{font-size:8px;color:var(--i-tx3);margin-left:auto;font-weight:500}

/* 11 无限滚动 Infinite Scroll */
.d-infscroll{width:100%;max-width:200px;display:flex;flex-direction:column;gap:5px}
.d-infscroll__row{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--i-line);border-radius:9px;background:#fff;font-size:9.5px;color:var(--i-tx2)}
.d-infscroll__row b{font-weight:650;color:var(--i-tx)}
.d-infscroll__loading{display:flex;align-items:center;justify-content:center;gap:6px;padding:7px;font-size:9px;color:var(--i-tx3)}
.d-infscroll__spin{width:11px;height:11px;border-radius:99px;border:2px solid var(--i-bg3);border-top-color:var(--i-br);animation:d-rot .8s linear infinite}

/* 12 快捷键提示 Keyboard Hints */
.d-kbdhints{display:flex;flex-direction:column;gap:6px;width:100%;max-width:200px}
.d-kbdrow{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--i-tx2)}
.d-kbdrow kbd{padding:2px 6px;border:1px solid var(--i-line2);border-bottom-width:2px;border-radius:5px;background:#fff;font-family:ui-monospace,Menlo,monospace;font-size:9px;color:var(--i-tx)}
.d-kbdrow .keys{display:flex;gap:3px}

/* ═══════════════════════════════════════════════════════════
   17 · 移动端 Mobile UI
   ═══════════════════════════════════════════════════════════ */

/* 01 底部标签栏 Bottom Tab Bar */
.d-phoneframe{position:relative;width:132px;height:100%;min-height:150px;margin:0 auto;border-radius:16px;background:#fff;border:1px solid var(--i-line2);box-shadow:var(--i-sh);overflow:hidden;flex:0 0 auto}
.d-phoneframe__body{position:absolute;inset:0 0 44px;padding:10px;display:flex;flex-direction:column;gap:5px}
.d-phoneframe__ln{height:5px;border-radius:99px;background:var(--i-bg3)}
.d-tabbar{position:absolute;left:0;right:0;bottom:0;height:44px;display:flex;align-items:stretch;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-top:1px solid var(--i-line)}
.d-tabbar__tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:7.5px;color:var(--i-tx3)}
.d-tabbar__tab i{font-style:normal;font-size:12px}
.d-tabbar__tab.is-on{color:var(--i-br);font-weight:650}
.d-tabbar__tab.is-on i{transform:translateY(-1px) scale(1.1)}

/* 02 悬浮按钮 FAB */
.d-fabwrap{position:relative;width:100%;height:100%;min-height:150px}
.d-fab{position:absolute;right:10px;bottom:12px;width:38px;height:38px;border-radius:16px;background:var(--i-gd);display:grid;place-items:center;color:#fff;font-size:16px;box-shadow:0 10px 24px -8px rgba(99,102,241,.8)}
.d-fab--mini{width:28px;height:28px;border-radius:12px;right:15px;bottom:60px;background:#fff;color:var(--i-tx2);border:1px solid var(--i-line);font-size:12px;box-shadow:var(--i-sh-s)}
.d-fabwrap__hint{position:absolute;left:12px;bottom:14px;font-size:9px;color:var(--i-tx3);max-width:110px;line-height:1.5}

/* 03 Peek 轮播 Peek Carousel */
.d-peekcaro{display:flex;gap:7px;overflow-x:auto;padding:2px 0 8px;scroll-snap-type:x mandatory;scrollbar-width:none;width:100%}
.d-peekcaro::-webkit-scrollbar{display:none}
.d-peekcaro__card{scroll-snap-align:center;flex:0 0 76%;height:98px;border-radius:12px;padding:10px;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;color:#fff;box-shadow:var(--i-sh-s)}
.d-peekcaro__card b{font-size:11.5px;font-weight:700}
.d-peekcaro__card span{font-size:8.5px;opacity:.85}

/* 04 下拉刷新 Pull to Refresh */
.d-pullwrap{position:relative;width:132px;height:100%;min-height:150px;margin:0 auto;border-radius:16px;border:1px solid var(--i-line2);background:#fff;overflow:hidden;box-shadow:var(--i-sh);flex:0 0 auto}
.d-pullwrap__spinner{position:absolute;top:7px;left:50%;transform:translate(-50%,0);width:16px;height:16px;border-radius:99px;border:2px solid var(--i-bg3);border-top-color:var(--i-br);animation:d-rot .8s linear infinite}
.d-pullwrap__list{position:absolute;inset:28px 0 0;padding:8px 10px;display:flex;flex-direction:column;gap:5px}
.d-pullwrap__ln{height:6px;border-radius:99px;background:var(--i-bg3)}

/* 05 安全区适配 Safe Area */
.d-safe{position:relative;width:100%;height:100%;min-height:150px;display:flex;flex-direction:column;justify-content:flex-end}
.d-safe__notchbar{position:absolute;top:0;left:0;right:0;height:22px;display:flex;justify-content:space-between;align-items:center;padding:0 10px;font-size:7.5px;color:var(--i-tx3);background:rgba(255,255,255,.9)}
.d-safe__homebar{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:64px;height:4px;border-radius:99px;background:#17171b;opacity:.8}
.d-safe__cta{margin:0 10px 16px;padding:8px;border-radius:10px;background:var(--i-br);color:#fff;text-align:center;font-size:10px;font-weight:650}
.d-safe__cap{position:absolute;top:30px;left:0;right:0;text-align:center;font-size:9px;color:var(--i-tx3)}

/* 06 横滑筛选 Chips Scrollable Chips */
.d-mchips{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none;width:100%}
.d-mchips::-webkit-scrollbar{display:none}
.d-mchip{flex:0 0 auto;padding:5px 12px;border-radius:99px;border:1px solid var(--i-line);background:#fff;font-size:10px;color:var(--i-tx2);white-space:nowrap}
.d-mchip.is-on{background:#17171b;color:#fff;border-color:#17171b;font-weight:620}

/* 07 触摸反馈 Touch Feedback */
.d-touchfb{display:flex;flex-direction:column;gap:8px;align-items:center}
.d-touchfb__row{display:flex;gap:8px}
.d-tfb{width:74px;height:34px;border-radius:10px;background:#fff;border:1px solid var(--i-line);display:grid;place-items:center;font-size:9.5px;color:var(--i-tx2);font-weight:600;transition:transform .12s}
.d-tfb--press{transform:scale(.94);background:var(--i-bg3)}
.d-tfb--gd{background:var(--i-br);color:#fff;border-color:transparent}
.d-tfb__hint{font-size:8.5px;color:var(--i-tx3)}

/* 08 数字键盘适配 Input Mode */
.d-kbdadapt{display:flex;flex-direction:column;gap:8px;width:100%;max-width:200px}
.d-kbdf{display:flex;align-items:center;justify-content:space-between;gap:8px}
.d-kbdf span{font-size:9.5px;color:var(--i-tx2)}
.d-kbdf .d-input{width:104px;height:28px;font-size:10.5px}
.d-kbdnote{font-size:8.5px;color:var(--i-tx3);line-height:1.6;padding:7px 9px;border-radius:8px;background:var(--i-bg2)}

/* ═══════════════════════════════════════════════════════════
   18 · 设计系统 Design System
   ═══════════════════════════════════════════════════════════ */

/* 01 暗色模式切换 Dark Mode Toggle */
.d-darktoggle{display:flex;flex-direction:column;align-items:center;gap:9px}
.d-dt__card{width:170px;border-radius:13px;padding:12px;display:flex;align-items:center;gap:9px;transition:background .35s}
.d-dt__card--light{background:#fff;border:1px solid var(--i-line);color:#17171b}
.d-dt__card--dark{background:#1c1c24;border:1px solid #34343e;color:#f4f4f6}
.d-dt__avatar{width:26px;height:26px;border-radius:99px;background:var(--i-gd);flex:0 0 auto}
.d-dt__lines{flex:1;display:flex;flex-direction:column;gap:4px}
.d-dt__lines i{height:5px;border-radius:99px;opacity:.35;background:currentColor}
.d-dt__sw{position:relative;width:38px;height:22px;border-radius:99px;background:linear-gradient(90deg,#f59e0b,#f97316);flex:0 0 auto;transition:.3s}
.d-dt__sw::after{content:'☀';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:99px;background:#fff;display:grid;place-items:center;font-size:9px;transition:.3s cubic-bezier(.32,.72,0,1)}
.d-dt__sw.is-night{background:linear-gradient(90deg,#312e81,#1e1b4b)}
.d-dt__sw.is-night::after{content:'☾';transform:translateX(16px)}

/* 02 语义色板 Semantic Color Tokens */
.d-palette{width:100%;display:flex;flex-direction:column;gap:6px}
.d-pal__row{display:flex;gap:5px}
.d-pal__sw{flex:1;height:26px;border-radius:7px;position:relative}
.d-pal__sw span{position:absolute;left:5px;bottom:3px;font-size:7px;font-weight:700;color:rgba(255,255,255,.9)}
.d-pal__sw.is-light span{color:rgba(0,0,0,.55)}
.d-pal__cap{font-size:8.5px;color:var(--i-tx3)}

/* 03 流体排版 Fluid Typography */
.d-fluid{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}
.d-fluid__t1{font-size:26px;font-weight:800;letter-spacing:-.04em;line-height:1.05}
.d-fluid__t2{font-size:16px;font-weight:650;letter-spacing:-.02em;color:var(--i-tx2)}
.d-fluid__code{font-family:ui-monospace,Menlo,monospace;font-size:8.5px;color:var(--i-br);background:#eef2ff;padding:3px 8px;border-radius:6px}

/* 04 间距刻度 Spacing Scale */
.d-spscale{display:flex;flex-direction:column;gap:6px;width:100%;max-width:200px}
.d-sps{display:flex;align-items:center;gap:8px}
.d-sps b{width:34px;font-family:ui-monospace,Menlo,monospace;font-size:8.5px;color:var(--i-tx3);text-align:right}
.d-sps i{height:12px;border-radius:4px;background:linear-gradient(90deg,#818cf8,#4f46e5)}

/* 05 圆角体系 Radius Scale */
.d-radscale{display:flex;gap:7px;align-items:flex-end;justify-content:center}
.d-rad{width:44px;height:44px;background:#fff;border:1.5px solid var(--i-br);display:grid;place-items:center;font-size:7.5px;color:var(--i-br);font-family:ui-monospace,Menlo,monospace}

/* 06 阴影层级 Elevation Scale */
.d-elev{display:flex;gap:9px;align-items:flex-end;justify-content:center;padding:4px 0 6px}
.d-el{width:46px;height:44px;border-radius:10px;background:#fff;display:flex;align-items:flex-end;justify-content:center;font-size:7.5px;color:var(--i-tx3);padding-bottom:3px;font-family:ui-monospace,Menlo,monospace}

/* 07 缓动曲线 Easing Curves */
.d-easing{display:flex;flex-direction:column;gap:8px;width:100%;max-width:200px}
.d-easing__row{display:flex;align-items:center;gap:8px}
.d-easing__lane{flex:1;height:14px;border-radius:99px;background:var(--i-bg2);position:relative}
.d-easing__ball{position:absolute;top:1.5px;left:1.5px;width:11px;height:11px;border-radius:99px;background:var(--i-br);animation:d-slide 2.2s var(--ease,cubic-bezier(.4,0,.2,1)) infinite alternate}
@keyframes d-slide{to{left:calc(100% - 12.5px)}}
.d-easing__cap{width:58px;font-family:ui-monospace,Menlo,monospace;font-size:7.5px;color:var(--i-tx3)}

/* 08 容器查询 Container Queries */
.d-cqdemo{display:flex;flex-direction:column;gap:7px;width:100%}
.d-cq__card{container-type:inline-size;border:1px solid var(--i-line);border-radius:11px;background:#fff;padding:9px;display:flex;gap:9px;align-items:center}
.d-cq__av{width:30px;height:30px;border-radius:99px;background:var(--i-gd);flex:0 0 auto}
.d-cq__info{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.d-cq__info i{height:5px;border-radius:99px;background:var(--i-bg3)}
.d-cq__card--wide .d-cq__info{flex-direction:row;align-items:center}
.d-cq__card--wide .d-cq__info i{height:7px}
.d-cq__btn{flex:0 0 auto;padding:4px 9px;border-radius:7px;background:var(--i-br);color:#fff;font-size:8.5px;font-weight:650}
.d-cq__cap{font-size:8.5px;color:var(--i-tx3);text-align:center}

/* 09 无障碍焦点环 Focus Ring */
.d-focusdemo{display:flex;flex-direction:column;gap:9px;align-items:center}
.d-focusbtn{padding:7px 15px;border-radius:9px;background:var(--i-br);color:#fff;font-size:11px;font-weight:650;position:relative}
.d-focusbtn.is-focused::after{content:'';position:absolute;inset:-4.5px;border-radius:12.5px;border:2px solid var(--i-br);opacity:.55}
.d-focusinput{width:150px;height:30px;border:1.5px solid var(--i-line2);border-radius:8px;background:#fff;font-size:10.5px;color:var(--i-tx3);padding:0 10px}
.d-focusinput.is-focused{border-color:var(--i-br);box-shadow:0 0 0 4px rgba(79,70,229,.16)}

/* 10 减弱动效 Reduced Motion */
.d-rmdemo{display:flex;flex-direction:column;gap:8px;align-items:center;width:100%}
.d-rm__ballwrap{width:170px;height:20px;border-radius:99px;background:var(--i-bg2);position:relative}
.d-rm__ball{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:99px;background:var(--i-br);animation:d-slide 1.8s ease-in-out infinite alternate}
.d-rm__code{font-family:ui-monospace,Menlo,monospace;font-size:8.5px;line-height:1.7;color:var(--i-tx2);background:var(--i-bg2);border-radius:8px;padding:7px 10px;align-self:stretch}
.d-rm__code b{color:#be185d;font-weight:600}

/* ═══════════════════════════════════════════════════════════
   UI 模式词典 · 演示 9
   动效特效 Motion Effect · 文字动效 Text Effect
   命名体系参考：ReactBits / Aceternity UI / Magic UI / Uiverse
   ═══════════════════════════════════════════════════════════ */

/* ───────── 01 Border Beam 边框光束 ───────── */
.m-beam{position:relative;display:grid;place-items:center;width:158px;height:76px;border-radius:12px;background:#fff;border:1px solid var(--i-line);overflow:hidden;font-size:10.5px;font-weight:650;color:var(--i-tx2)}
.m-beam::before,.m-beam::after{content:'';position:absolute;z-index:0}
.m-beam::before{inset:-70%;background:conic-gradient(from 0deg,transparent 0 296deg,#4f46e5 328deg,#c026d3 350deg,transparent 360deg);animation:m-spin 3.2s linear infinite}
.m-beam::after{inset:1.5px;border-radius:10.5px;background:#fff}
.m-beam>span{position:relative;z-index:2;display:grid;place-items:center;gap:3px;text-align:center;line-height:1.3}
.m-beam b{font-size:12px;color:var(--i-tx)}
@keyframes m-spin{to{transform:rotate(360deg)}}

/* ───────── 02 Moving Border 流动边框按钮 ───────── */
.m-mvborder{position:relative;display:grid;place-items:center;width:150px;height:38px;border-radius:99px;overflow:hidden;color:#fff;font-size:10.5px;font-weight:640}
.m-mvborder::before,.m-mvborder::after{content:'';position:absolute;z-index:0}
.m-mvborder::before{inset:-70%;background:conic-gradient(from 180deg,transparent 0 296deg,#4f46e5 330deg,#06b6d4 350deg,transparent 360deg);animation:m-spin 2.6s linear infinite}
.m-mvborder::after{inset:1.5px;border-radius:99px;background:#17171b}
.m-mvborder>em{font-style:normal;position:relative;z-index:2}

/* ───────── 03 Shine Border 流光描边 ───────── */
.m-shine{position:relative;width:158px;height:80px;border-radius:12px;overflow:hidden;background:#fff}
.m-shine::before{content:'';position:absolute;inset:-50%;background:conic-gradient(from 0deg,#f59e0b,#ec4899,#8b5cf6,#22d3ee,#f59e0b);animation:m-spin 4s linear infinite}
.m-shine__in{position:absolute;inset:2px;border-radius:10px;background:#fff;display:grid;place-items:center;text-align:center;padding:8px}
.m-shine__in b{display:block;font-size:12.5px;color:var(--i-tx)}
.m-shine__in span{font-size:9.5px;color:var(--i-tx3)}

/* ───────── 04 Background Beams 背景光束 ───────── */
.m-beams{position:relative;width:100%;height:130px;border-radius:11px;background:#08080c;overflow:hidden;display:grid;place-items:center}
.m-beams svg{position:absolute;inset:0;width:100%;height:100%}
.m-beams__t{position:relative;z-index:2;text-align:center;color:#fff}
.m-beams__t b{font-size:15px;font-weight:700;letter-spacing:-.02em;display:block}
.m-beams__t span{font-size:9.5px;color:rgba(255,255,255,.5)}
.m-beams path{animation:m-beamFlow 5s linear infinite}
@keyframes m-beamFlow{from{stroke-dashoffset:260}to{stroke-dashoffset:0}}

/* ───────── 05 Tracing Beam 滚动追踪光束 ───────── */
.m-tracing{position:relative;padding-left:20px;width:170px}
.m-tracing::before{content:'';position:absolute;left:5px;top:4px;bottom:4px;width:1.5px;background:linear-gradient(#e4e4ea,#4f46e5,#c026d3);border-radius:2px}
.m-tracing__dot{position:absolute;left:1.5px;width:9px;height:9px;border-radius:99px;background:radial-gradient(circle,#fff 18%,#7c3aed);box-shadow:0 0 12px 3px rgba(124,58,237,.55);animation:m-trace 3.4s cubic-bezier(.5,0,.5,1) infinite}
@keyframes m-trace{0%{top:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:calc(100% - 9px);opacity:0}}
.m-tracing__i{margin-bottom:11px}
.m-tracing__i b{display:block;font-size:11px;font-weight:650}
.m-tracing__i span{font-size:9.5px;color:var(--i-tx3)}

/* ───────── 06 Meteors 流星雨 ───────── */
.m-meteors{position:relative;width:100%;height:130px;border-radius:11px;background:radial-gradient(120% 90% at 70% 0%,#1e1b4b,#08080c 70%);overflow:hidden;display:grid;place-items:center}
.m-meteors i{position:absolute;top:-14px;width:2px;height:2px;border-radius:99px;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.5);transform:rotate(215deg);animation:m-meteor 3.2s linear infinite}
.m-meteors i::after{content:'';position:absolute;top:50%;right:-2px;width:56px;height:1px;transform:translateY(-50%);background:linear-gradient(90deg,rgba(255,255,255,.75),transparent)}
@keyframes m-meteor{0%{transform:rotate(215deg) translateX(0);opacity:1}72%{opacity:1}100%{transform:rotate(215deg) translateX(-260px);opacity:0}}
.m-meteors__t{position:relative;z-index:2;color:#fff;font-size:12px;font-weight:650;letter-spacing:-.01em}

/* ───────── 07 Shooting Stars 流星划过 ───────── */
.m-shoot{position:relative;width:100%;height:128px;border-radius:11px;background:#0b0b12;overflow:hidden;display:grid;place-items:center}
.m-shoot i{position:absolute;width:3px;height:3px;border-radius:99px;background:#fff;animation:m-twinkle 2.4s ease-in-out infinite}
.m-shoot i::after{content:'';position:absolute;top:1px;left:1px;width:64px;height:1px;background:linear-gradient(90deg,#fff,transparent);transform:rotate(-42deg);transform-origin:left}
@keyframes m-twinkle{0%,100%{opacity:0;transform:translate(0,0) scale(.4)}45%{opacity:1;transform:translate(-22px,20px) scale(1.2)}}
.m-shoot__t{position:relative;z-index:2;color:#fff;font-size:12px;font-weight:650}

/* ───────── 08 Lamp Effect 灯罩打光 ───────── */
.m-lamp{position:relative;width:100%;height:134px;border-radius:11px;background:#0a0a0f;overflow:hidden}
.m-lamp__glow{position:absolute;top:-56px;left:50%;transform:translateX(-50%);width:190px;height:110px;background:radial-gradient(50% 100% at 50% 100%,rgba(99,102,241,.85),rgba(99,102,241,0) 72%);filter:blur(6px)}
.m-lamp__bar{position:absolute;top:52px;left:50%;transform:translateX(-50%);width:172px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#c7d2fe,#fff,#c7d2fe,transparent);box-shadow:0 0 18px 5px rgba(129,140,248,.75)}
.m-lamp__cone{position:absolute;top:54px;left:50%;transform:translateX(-50%);width:150px;height:74px;background:conic-gradient(from 180deg at 50% 0,transparent 42%,rgba(199,210,254,.4) 50%,transparent 58%);filter:blur(5px)}
.m-lamp__t{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#fff;font-size:12.5px;font-weight:680;letter-spacing:-.01em}

/* ───────── 09 Spotlight 聚光灯 ───────── */
.m-spot{position:relative;width:100%;height:132px;border-radius:11px;background:#0a0a0f;overflow:hidden;display:grid;place-items:center}
.m-spot::before{content:'';position:absolute;top:-90px;left:50%;transform:translateX(-50%);width:300px;height:230px;background:radial-gradient(closest-side,rgba(255,255,255,.3),rgba(99,102,241,.16) 45%,transparent 78%)}
.m-spot__t{position:relative;z-index:2;text-align:center}
.m-spot__t b{display:block;font-size:17px;font-weight:760;letter-spacing:-.03em;background:linear-gradient(#fff,rgba(255,255,255,.4));-webkit-background-clip:text;background-clip:text;color:transparent}
.m-spot__t span{font-size:9.5px;color:rgba(255,255,255,.45)}

/* ───────── 10 Sparkles 星点闪烁 ───────── */
.m-sparkles{position:relative;width:100%;height:126px;border-radius:11px;background:#0c0c14;overflow:hidden;display:grid;place-items:center}
.m-sparkles i{position:absolute;color:#fff;font-size:9px;line-height:1;animation:m-spark 2.1s ease-in-out infinite;color:#c7d2fe}
@keyframes m-spark{0%,100%{opacity:.12;transform:scale(.5) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(90deg)}}
.m-sparkles__t{position:relative;z-index:2;color:#fff;font-size:13px;font-weight:700;letter-spacing:-.01em}

/* ───────── 11 Vortex 旋涡隧道 ───────── */
.m-vortex{position:relative;width:132px;height:132px;display:grid;place-items:center}
.m-vortex i{position:absolute;border:1.5px solid #c7d2fe;border-radius:99px;animation:m-vortex 3.4s ease-in-out infinite}
.m-vortex i:nth-child(1){width:126px;height:126px;animation-delay:0s}
.m-vortex i:nth-child(2){width:98px;height:98px;animation-delay:.22s;border-color:#a5b4fc}
.m-vortex i:nth-child(3){width:70px;height:70px;animation-delay:.44s;border-color:#818cf8}
.m-vortex i:nth-child(4){width:42px;height:42px;animation-delay:.66s;border-color:#6366f1}
.m-vortex i:nth-child(5){width:16px;height:16px;animation-delay:.88s;border-color:#4f46e5;background:#4f46e5}
@keyframes m-vortex{0%{transform:rotate(0) scale(1);opacity:1}100%{transform:rotate(220deg) scale(.1);opacity:0}}

/* ───────── 12 Retro Grid 复古透视网格 ───────── */
.m-retro{position:relative;width:100%;height:130px;border-radius:11px;background:linear-gradient(#0b0b14,#170f2e);overflow:hidden;display:grid;place-items:center;perspective:180px}
.m-retro__g{position:absolute;bottom:-40%;left:-50%;right:-50%;top:36%;background-image:linear-gradient(rgba(168,85,247,.65) 1px,transparent 1px),linear-gradient(90deg,rgba(168,85,247,.65) 1px,transparent 1px);background-size:26px 22px;transform:rotateX(76deg);animation:m-retroMove 2.6s linear infinite}
@keyframes m-retroMove{from{background-position:0 0}to{background-position:0 22px}}
.m-retro__t{position:relative;z-index:2;color:#fff;font-size:14px;font-weight:740;letter-spacing:.02em;text-shadow:0 0 14px rgba(168,85,247,.8)}

/* ───────── 13 Interactive Grid 交互网格 ───────── */
.m-igrid{position:relative;display:grid;grid-template-columns:repeat(9,1fr);gap:3px;padding:9px;border-radius:11px;background:#0b0b12;width:170px}
.m-igrid i{aspect-ratio:1;border-radius:2.5px;background:#23233a;animation:m-igrid 2.8s ease-in-out infinite;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes m-igrid{0%,100%{background:#23233a}45%{background:#6366f1}}

/* ───────── 14 Glare Hover 金属流光扫过 ───────── */
.m-glare{position:relative;width:156px;height:84px;border-radius:12px;background:linear-gradient(150deg,#1f2937,#111827);overflow:hidden;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:640;cursor:pointer}
.m-glare::after{content:'';position:absolute;top:-60%;bottom:-60%;width:52px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg) translateX(-160px);animation:m-glare 2.8s ease-in-out infinite}
@keyframes m-glare{0%,55%{transform:skewX(-18deg) translateX(-160px)}100%{transform:skewX(-18deg) translateX(190px)}}

/* ───────── 15 Click Spark 点击星火 ───────── */
.m-cspark{position:relative;width:156px;height:88px;border-radius:12px;background:var(--i-bg2);display:grid;place-items:center;overflow:hidden}
.m-cspark__ctr{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:99px;background:var(--i-br)}
.m-cspark__ctr i{position:absolute;left:50%;top:50%;width:2.5px;height:2.5px;margin:-1.25px 0 0 -1.25px;border-radius:99px;background:var(--i-br3);animation:m-cspark 1.8s ease-out infinite}
@keyframes m-cspark{0%{transform:translate(0,0) scale(1);opacity:1}70%{opacity:.85}100%{transform:translate(var(--tx,30px),var(--ty,0)) scale(.2);opacity:0}}
.m-cspark span{position:absolute;bottom:11px;font-size:9.5px;color:var(--i-tx3)}

/* ───────── 16 Sticker Peel 贴纸撕起 ───────── */
.m-peel{position:relative;width:118px;height:104px;border-radius:10px;background:linear-gradient(135deg,#fbbf24,#f97316);box-shadow:var(--i-sh);overflow:hidden}
.m-peel::after{content:'';position:absolute;right:0;bottom:0;width:52px;height:52px;background:linear-gradient(315deg,#fff 47%,#cbd5e1 48%,#e2e8f0 58%,rgba(0,0,0,.16) 100%);box-shadow:-6px -6px 14px -6px rgba(0,0,0,.35);border-radius:0 0 10px 0;transform:translate(0,0);animation:m-peel 3.6s ease-in-out infinite}
@keyframes m-peel{0%,60%{border-top-left-radius:0}78%,100%{border-top-left-radius:46px}}
.m-peel__t{position:absolute;left:11px;top:11px;color:#fff;font-size:12px;font-weight:740}

/* ───────── 17 Pixel Transition 像素转场 ───────── */
.m-pixel{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;width:160px}
.m-pixel i{aspect-ratio:1;border-radius:1.5px;background:var(--i-br);animation:m-pixel 2.6s ease-in-out infinite;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes m-pixel{0%,100%{opacity:.12;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}

/* ───────── 18 Ripple 水面涟漪 ───────── */
.m-ripple{position:relative;width:150px;height:110px;display:grid;place-items:center;overflow:hidden}
.m-ripple i{position:absolute;width:38px;height:38px;border:1.5px solid var(--i-br);border-radius:99px;opacity:0;animation:m-ripple 3s ease-out infinite}
@keyframes m-ripple{0%{transform:scale(.35);opacity:.85}100%{transform:scale(3.4);opacity:0}}
.m-ripple b{position:relative;z-index:2;font-size:12px;font-weight:680;color:var(--i-tx)}

/* ───────── 19 3D Marquee 立体跑马灯 ───────── */
.m-mq3d{position:relative;width:100%;height:128px;overflow:hidden;display:grid;place-items:center;perspective:420px}
.m-mq3d__row{position:absolute;left:0;right:-40%;display:flex;gap:8px;transform:rotateY(-22deg) rotateX(6deg)}
.m-mq3d__row--a{animation:m-mqL 7s linear infinite}
.m-mq3d__row--b{animation:m-mqR 7s linear infinite;opacity:.72}
@keyframes m-mqL{from{transform:translateX(0) rotateY(-22deg) rotateX(6deg)}to{transform:translateX(-50%) rotateY(-22deg) rotateX(6deg)}}
@keyframes m-mqR{from{transform:translateX(-50%) rotateY(-22deg) rotateX(6deg)}to{transform:translateX(0) rotateY(-22deg) rotateX(6deg)}}
.m-mq3d__c{flex:0 0 auto;width:74px;height:38px;border-radius:8px;background:var(--i-bg);border:1px solid var(--i-line);box-shadow:var(--i-sh-s);display:grid;place-items:center;font-size:9px;font-weight:620;color:var(--i-tx2)}

/* ───────── 20 Icon Cloud 3D 图标云 ───────── */
.m-cloud{position:relative;width:136px;height:122px;display:grid;place-items:center}
.m-cloud__r{position:absolute;border:1px dashed rgba(79,70,229,.3);border-radius:99px}
.m-cloud__r--a{width:126px;height:64px;transform:rotate(-18deg);animation:m-orbit 9s linear infinite}
.m-cloud__r--b{width:98px;height:112px;transform:rotate(28deg);animation:m-orbit 12s linear infinite reverse}
@keyframes m-orbit{to{transform:rotate(342deg)}}
.m-cloud__c{position:absolute;width:22px;height:22px;border-radius:7px;background:#fff;border:1px solid var(--i-line);box-shadow:var(--i-sh-s);display:grid;place-items:center;font-size:10px}
.m-cloud__core{position:relative;z-index:3;width:38px;height:38px;border-radius:12px;background:var(--i-gd);display:grid;place-items:center;color:#fff;font-size:9px;font-weight:700;box-shadow:0 8px 22px -8px rgba(99,102,241,.8)}

/* ───────── 21 Lens / Loupe 放大镜 ───────── */
.m-lens{position:relative;width:158px;height:96px;border-radius:10px;background:repeating-linear-gradient(45deg,#e9eaef 0 7px,#dcdde6 7px 14px);overflow:hidden}
.m-lens::after{content:'';position:absolute;left:52px;top:16px;width:62px;height:62px;border-radius:99px;border:2.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.12),0 10px 22px -8px rgba(0,0,0,.45),inset 0 0 22px rgba(255,255,255,.5);background:repeating-linear-gradient(45deg,#f8f9fc 0 14px,#eceef4 14px 28px);backdrop-filter:blur(1px)}
.m-lens__t{position:absolute;left:11px;bottom:10px;font-size:9.5px;font-weight:640;color:var(--i-tx2)}

/* ───────── 22 Link Preview 链接悬浮预览 ───────── */
.m-linkpv{position:relative;width:auto;display:inline-flex;flex-direction:column;align-items:flex-start;gap:0}
.m-linkpv__a{font-size:12px;font-weight:640;color:var(--i-br);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:4px}
.m-linkpv__card{margin-top:8px;width:150px;border:1px solid var(--i-line);border-radius:10px;overflow:hidden;background:#fff;box-shadow:var(--i-sh);opacity:0;transform:translateY(-5px) scale(.96);transition:.28s cubic-bezier(.4,0,.2,1);transform-origin:top left}
.m-linkpv:hover .m-linkpv__card{opacity:1;transform:none}
.m-linkpv__img{height:44px;background:var(--i-gd2)}
.m-linkpv__bd{padding:7px 9px}
.m-linkpv__bd b{display:block;font-size:10.5px;font-weight:650}
.m-linkpv__bd span{font-size:9px;color:var(--i-tx3)}

/* ───────── 23 Progressive Blur 渐进模糊 ───────── */
.m-pblur{position:relative;width:100%;height:118px;border-radius:11px;overflow:hidden}
.m-pblur__bg{position:absolute;inset:0;background:linear-gradient(135deg,#6366f1,#ec4899 55%,#f59e0b)}
.m-pblur__mask{position:absolute;inset:0;background:linear-gradient(to top,#fff 4%,rgba(255,255,255,.92) 26%,rgba(255,255,255,.35) 54%,transparent 76%);backdrop-filter:blur(0)}
.m-pblur__t{position:absolute;left:12px;bottom:11px;font-size:12.5px;font-weight:730;color:var(--i-tx);letter-spacing:-.015em}
.m-pblur__t span{display:block;font-size:9.5px;font-weight:500;color:var(--i-tx2)}

/* ───────── 24 Animated List 逐条入场列表 ───────── */
.m-alist{display:flex;flex-direction:column;gap:6px;width:168px}
.m-alist__i{display:flex;align-items:center;gap:7px;padding:6px 8px;border:1px solid var(--i-line);border-radius:9px;background:#fff;box-shadow:var(--i-sh-s);opacity:0;animation:m-alist 3.6s ease-out infinite}
.m-alist__i:nth-child(1){animation-delay:0s}
.m-alist__i:nth-child(2){animation-delay:.28s}
.m-alist__i:nth-child(3){animation-delay:.56s}
@keyframes m-alist{0%{opacity:0;transform:translateY(-11px) scale(.95)}14%,72%{opacity:1;transform:none}100%{opacity:0;transform:translateY(6px) scale(.97)}}
.m-alist__i b{font-size:10px;font-weight:640}
.m-alist__i span{font-size:8.5px;color:var(--i-tx3)}

/* ═══════════════════════════════════════════
   文字动效 Text Effect
   ═══════════════════════════════════════════ */

/* 01 Split Text 逐字拆分入场 */
.tx-split{display:flex;gap:2px;font-size:26px;font-weight:780;letter-spacing:-.03em}
.tx-split i{font-style:normal;animation:tx-split 3.2s cubic-bezier(.2,.9,.2,1) infinite}
@keyframes tx-split{0%{opacity:0;transform:translateY(16px) rotate(-8deg)}16%,74%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px)}}

/* 02 Blur Text 模糊聚焦入场 */
.tx-blur{font-size:25px;font-weight:780;letter-spacing:-.035em;color:var(--i-tx)}
.tx-blur i{font-style:normal;display:inline-block;animation:tx-blur 3.4s ease-out infinite}
@keyframes tx-blur{0%{filter:blur(9px);opacity:0}18%,72%{filter:blur(0);opacity:1}100%{filter:blur(7px);opacity:0}}

/* 03 Typewriter 打字机 */
.tx-type{font-size:14px;font-weight:620;color:var(--i-tx);display:flex;align-items:center;gap:0}
.tx-type__t{overflow:hidden;white-space:nowrap;border-right:0;width:0;animation:tx-typeW 4.4s steps(var(--n,15)) infinite}
.tx-type__c{width:2px;height:16px;background:var(--i-br);animation:tx-caret .9s step-end infinite}
@keyframes tx-typeW{0%{width:0}42%,76%{width:var(--w,15ch)}100%{width:0}}
@keyframes tx-caret{50%{opacity:0}}

/* 04 Glitch Text 故障文字 */
.tx-glitch{position:relative;font-size:25px;font-weight:800;letter-spacing:-.02em;color:var(--i-tx)}
.tx-glitch::before,.tx-glitch::after{content:attr(data-t);position:absolute;inset:0}
.tx-glitch::before{color:#ef4444;animation:tx-gl1 2.4s steps(2) infinite;clip-path:inset(0 0 58% 0)}
.tx-glitch::after{color:#06b6d4;animation:tx-gl2 2.4s steps(2) infinite;clip-path:inset(56% 0 0 0)}
@keyframes tx-gl1{0%,100%{transform:translate(0)}25%{transform:translate(-2.5px,-1.5px)}50%{transform:translate(2px,1px)}75%{transform:translate(-1.5px,2px)}}
@keyframes tx-gl2{0%,100%{transform:translate(0)}25%{transform:translate(2.5px,1.5px)}50%{transform:translate(-2px,-1px)}75%{transform:translate(1.5px,-2px)}}

/* 05 Morphing Text 变形文字 */
.tx-morph{font-size:23px;font-weight:780;letter-spacing:-.03em;height:32px;display:grid;place-items:center;overflow:hidden}
.tx-morph i{font-style:normal;grid-area:1/1;animation:tx-morph 5.4s cubic-bezier(.4,0,.2,1) infinite}
.tx-morph i:nth-child(2){animation-delay:1.8s}
.tx-morph i:nth-child(3){animation-delay:3.6s}
@keyframes tx-morph{0%{opacity:0;filter:blur(8px);transform:scale(.85)}10%,28%{opacity:1;filter:blur(0);transform:none}34%,100%{opacity:0;filter:blur(8px);transform:scale(1.12)}}

/* 06 Kinetic Text 字重动画 */
.tx-kinetic{font-size:24px;letter-spacing:-.03em;color:var(--i-tx);display:flex;gap:1px}
.tx-kinetic i{font-style:normal;animation:tx-kin 2.6s ease-in-out infinite}
@keyframes tx-kin{0%,100%{font-weight:300}50%{font-weight:850}}

/* 07 Animated Gradient Text 流动渐变文字 */
.tx-grad{font-size:26px;font-weight:800;letter-spacing:-.04em;background:linear-gradient(90deg,#4f46e5,#c026d3,#06b6d4,#4f46e5);background-size:280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:tx-grad 4.2s linear infinite}
@keyframes tx-grad{to{background-position:-280% 0}}

/* 08 Neon Text 霓虹灯管文字 */
.tx-neon{padding:12px 16px;border-radius:11px;background:#08080e;font-size:19px;font-weight:700;letter-spacing:.02em;color:#e0e7ff;text-shadow:0 0 5px #a5b4fc,0 0 14px #6366f1,0 0 30px #4f46e5;animation:tx-neon 2.7s ease-in-out infinite}
@keyframes tx-neon{0%,100%{text-shadow:0 0 5px #a5b4fc,0 0 14px #6366f1,0 0 30px #4f46e5}50%{text-shadow:0 0 3px #c7d2fe,0 0 8px #818cf8,0 0 16px #6366f1}}

/* 09 Outline Text 描边文字 */
.tx-outline{font-size:28px;font-weight:800;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.4px var(--i-br);text-stroke:1.4px var(--i-br)}

/* 10 Flip Words 翻转词 */
.tx-flip{font-size:13px;font-weight:650;display:flex;align-items:center;gap:5px}
.tx-flip__w{position:relative;width:84px;height:19px;overflow:hidden}
.tx-flip__w i{font-style:normal;position:absolute;inset:0;display:grid;place-items:center;background:var(--i-bg3);border-radius:5px;color:var(--i-br);animation:tx-flip 4.5s cubic-bezier(.4,0,.2,1) infinite}
.tx-flip__w i:nth-child(2){animation-delay:1.5s}
.tx-flip__w i:nth-child(3){animation-delay:3s}
@keyframes tx-flip{0%{transform:rotateX(-92deg) translateY(9px);opacity:0}8%,26%{transform:none;opacity:1}34%,100%{transform:rotateX(92deg) translateY(-9px);opacity:0}}

/* 11 Text Path 路径文字 */
.tx-path{width:176px;height:74px}
.tx-path text{font-size:15px;font-weight:700;letter-spacing:-.01em;fill:var(--i-tx)}

/* 12 Spinning Text 环形旋转文字 */
.tx-spin{position:relative;width:118px;height:118px;display:grid;place-items:center}
.tx-spin svg{position:absolute;inset:0;animation:m-spin 12s linear infinite}
.tx-spin text{font-size:9.5px;font-weight:650;letter-spacing:.08em;fill:var(--i-tx2)}
.tx-spin__c{width:36px;height:36px;border-radius:99px;background:var(--i-gd);display:grid;place-items:center;color:#fff;font-size:14px}

/* 13 Highlighter 记号笔高亮 */
.tx-hl{font-size:16px;font-weight:640;line-height:1.7;color:var(--i-tx);text-align:center}
.tx-hl em{font-style:normal;position:relative;white-space:nowrap}
.tx-hl em::after{content:'';position:absolute;left:-2px;right:-2px;bottom:1px;height:9px;border-radius:2px;background:linear-gradient(100deg,rgba(250,204,21,.4),rgba(250,204,21,.8));transform-origin:left;animation:tx-hl 3.4s cubic-bezier(.5,0,.5,1) infinite;z-index:1;mix-blend-mode:multiply}
@keyframes tx-hl{0%{transform:scaleX(0)}26%,74%{transform:scaleX(1)}100%{transform:scaleX(0)}}

/* 14 Line Shadow Text 移动线影 */
.tx-lshadow{position:relative;font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--i-tx)}
.tx-lshadow::after{content:attr(data-t);position:absolute;left:0;top:0;color:transparent;-webkit-text-stroke:1px rgba(79,70,229,.45);animation:tx-ls 3.2s cubic-bezier(.4,0,.2,1) infinite}
@keyframes tx-ls{0%,100%{transform:translateX(-5px);opacity:.2}50%{transform:translateX(7px);opacity:1}}

/* ═══════════════════════════════════════════════════════════
   UI 模式词典 · 演示 10
   微交互 Micro-interaction · 产品流程 Product Lifecycle · 页脚与骨架 Footer & Shell
   ═══════════════════════════════════════════════════════════ */

/* ───────── 微交互 Micro-interaction ───────── */

/* 01 Error Shake 错误抖动 */
.mi-shake{display:flex;flex-direction:column;gap:6px;width:168px}
.mi-shake__f{display:flex;align-items:center;height:30px;padding:0 10px;border:1.5px solid var(--i-err);border-radius:8px;background:#fff;font-size:10.5px;color:var(--i-tx2);box-shadow:0 0 0 3px rgba(239,68,68,.12);animation:mi-shake 2.6s cubic-bezier(.36,.07,.19,.97) infinite}
@keyframes mi-shake{0%,72%,100%{transform:translateX(0)}76%{transform:translateX(-6px)}80%{transform:translateX(5px)}84%{transform:translateX(-4px)}88%{transform:translateX(3px)}92%{transform:translateX(-1.5px)}}
.mi-shake__msg{display:flex;align-items:center;gap:4px;font-size:9.5px;font-weight:600;color:var(--i-err)}

/* 02 Success Checkmark 成功打勾 */
.mi-check{display:flex;flex-direction:column;align-items:center;gap:9px}
.mi-check__c{width:52px;height:52px;border-radius:99px;background:#dcfce7;display:grid;place-items:center;animation:mi-pop 2.8s cubic-bezier(.2,1.5,.4,1) infinite}
@keyframes mi-pop{0%{transform:scale(.3);opacity:0}14%,80%{transform:scale(1);opacity:1}100%{transform:scale(.85);opacity:0}}
.mi-check__c svg{width:26px;height:26px}
.mi-check__c path{stroke:#059669;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:mi-draw 2.8s ease-out infinite}
@keyframes mi-draw{0%{stroke-dashoffset:30}22%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
.mi-check span{font-size:10.5px;font-weight:640;color:#047857}

/* 03 Add to Cart Fly 加购飞入 */
.mi-fly{position:relative;width:172px;height:104px}
.mi-fly__cart{position:absolute;right:0;top:0;width:27px;height:27px;border-radius:8px;background:#17171b;display:grid;place-items:center;color:#fff;font-size:12px}
.mi-fly__cart i{position:absolute;top:-4px;right:-4px;min-width:14px;height:14px;padding:0 3px;border-radius:99px;background:var(--i-err);color:#fff;font-size:8.5px;font-weight:700;display:grid;place-items:center;font-style:normal;animation:mi-bump 2.8s ease-out infinite}
@keyframes mi-bump{0%,40%{transform:scale(1)}48%{transform:scale(1.5)}56%,100%{transform:scale(1)}}
.mi-fly__p{position:absolute;left:0;bottom:0;width:78px;padding:7px;border:1px solid var(--i-line);border-radius:9px;background:#fff;box-shadow:var(--i-sh-s)}
.mi-fly__p b{display:block;font-size:10px;font-weight:640}
.mi-fly__p span{font-size:9px;color:var(--i-tx3)}
.mi-fly__btn{margin-top:6px;height:21px;border-radius:6px;background:#17171b;color:#fff;font-size:9px;font-weight:640;display:grid;place-items:center}
.mi-fly__ghost{position:absolute;left:44px;bottom:44px;width:22px;height:26px;border-radius:5px;background:var(--i-gd);transform-origin:center;animation:mi-fly 2.8s cubic-bezier(.45,.05,.55,.95) infinite}
@keyframes mi-fly{0%,36%{transform:translate(0,0) scale(1);opacity:0}42%{opacity:1}72%{transform:translate(74px,-46px) scale(.42);opacity:1}80%,100%{transform:translate(96px,-60px) scale(.15);opacity:0}}

/* 04 Like Pop 点赞心动 */
.mi-like{display:flex;align-items:center;gap:9px}
.mi-like__b{position:relative;width:46px;height:46px;border-radius:99px;background:#fff5f5;border:1px solid #fecaca;display:grid;place-items:center}
.mi-like__b svg{width:22px;height:22px;fill:none;stroke:#f43f5e;stroke-width:1.9}
.mi-like__b.is-on svg{fill:#f43f5e;stroke:#f43f5e;animation:mi-heart 1.4s cubic-bezier(.2,1.6,.4,1) infinite}
@keyframes mi-heart{0%{transform:scale(1)}26%{transform:scale(1.45)}48%{transform:scale(.92)}70%,100%{transform:scale(1.12)}}
.mi-like__b::after{content:'';position:absolute;inset:-6px;border-radius:99px;border:1.5px solid #fda4af;animation:mi-ring 1.4s ease-out infinite}
@keyframes mi-ring{0%{transform:scale(.72);opacity:.85}100%{transform:scale(1.34);opacity:0}}
.mi-like__n{font-size:11px;font-weight:650;color:var(--i-tx2)}

/* 05 Haptic Feedback 触感反馈 */
.mi-haptic{position:relative;display:grid;place-items:center}
.mi-haptic__ph{width:62px;height:100px;border-radius:12px;background:#17171b;padding:4px;box-shadow:var(--i-sh)}
.mi-haptic__sc{height:100%;border-radius:9px;background:linear-gradient(160deg,#312e81,#0f172a);display:grid;place-items:center;color:#fff;font-size:16px}
.mi-haptic__ph{animation:mi-buzz 2.2s ease-in-out infinite}
@keyframes mi-buzz{0%,86%,100%{transform:translateX(0) rotate(0)}88%{transform:translateX(-1.6px) rotate(-.5deg)}91%{transform:translateX(1.8px) rotate(.5deg)}94%{transform:translateX(-1.2px)}97%{transform:translateX(1px)}}
.mi-haptic__w{position:absolute;left:50%;top:50%;width:62px;height:100px;border-radius:12px;border:1.5px solid rgba(99,102,241,.55);transform:translate(-50%,-50%);animation:mi-wave 2.2s ease-out infinite}
@keyframes mi-wave{0%,84%{opacity:0;transform:translate(-50%,-50%) scale(1)}88%{opacity:.9}100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}

/* 06 Hamburger Morph 汉堡 ↔ 关闭 */
.mi-burger{display:flex;flex-direction:column;align-items:center;gap:11px}
.mi-burger__b{width:42px;height:36px;border-radius:9px;background:#fff;border:1px solid var(--i-line);box-shadow:var(--i-sh-s);display:grid;place-items:center}
.mi-burger__i{position:relative;width:20px;height:14px}
.mi-burger__i i{position:absolute;left:0;width:20px;height:2px;border-radius:2px;background:var(--i-tx);animation:mi-bg1 3.2s cubic-bezier(.4,0,.2,1) infinite}
.mi-burger__i i:nth-child(1){top:0}
.mi-burger__i i:nth-child(2){top:6px;animation-name:mi-bg2}
.mi-burger__i i:nth-child(3){top:12px;animation-name:mi-bg3}
@keyframes mi-bg1{0%,42%{top:0;transform:rotate(0)}56%,88%{top:6px;transform:rotate(45deg)}100%{top:0;transform:rotate(0)}}
@keyframes mi-bg2{0%,42%{opacity:1}50%,88%{opacity:0}100%{opacity:1}}
@keyframes mi-bg3{0%,42%{top:12px;transform:rotate(0)}56%,88%{top:6px;transform:rotate(-45deg)}100%{top:12px;transform:rotate(0)}}
.mi-burger span{font-size:9.5px;color:var(--i-tx3)}

/* 07 Page Transition 页面转场 */
.mi-page{position:relative;width:168px;height:112px;border-radius:10px;overflow:hidden;border:1px solid var(--i-line);background:#fff}
.mi-page__a,.mi-page__b{position:absolute;inset:0;padding:11px}
.mi-page__a{background:#fff;animation:mi-pgA 3.6s cubic-bezier(.4,0,.2,1) infinite}
.mi-page__b{background:var(--i-gd);color:#fff;animation:mi-pgB 3.6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes mi-pgA{0%,38%{transform:translateX(0);opacity:1}52%,100%{transform:translateX(-24%);opacity:0}}
@keyframes mi-pgB{0%,38%{transform:translateX(100%);opacity:1}54%,100%{transform:translateX(0);opacity:1}}
.mi-page b{display:block;font-size:11.5px;font-weight:680;margin-bottom:5px}
.mi-page__l{height:5px;border-radius:3px;background:var(--i-bg3);margin-bottom:5px}
.mi-page__b .mi-page__l{background:rgba(255,255,255,.32)}
.mi-page__l--s{width:62%}

/* 08 Typing Indicator 正在输入 */
.mi-typing{display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:99px 99px 99px 4px;background:#fff;border:1px solid var(--i-line);box-shadow:var(--i-sh-s)}
.mi-typing i{width:5.5px;height:5.5px;border-radius:99px;background:var(--i-tx3);animation:mi-td 1.3s ease-in-out infinite}
.mi-typing i:nth-child(2){animation-delay:.18s}
.mi-typing i:nth-child(3){animation-delay:.36s}
@keyframes mi-td{0%,60%,100%{transform:translateY(0);opacity:.42}30%{transform:translateY(-4.5px);opacity:1}}

/* 09 Optimistic Update 乐观更新 */
.mi-opt{display:flex;align-items:center;gap:9px;width:172px;padding:9px 10px;border:1px solid var(--i-line);border-radius:10px;background:#fff;box-shadow:var(--i-sh-s)}
.mi-opt__body{flex:1;min-width:0}
.mi-opt__body b{display:block;font-size:10px;font-weight:640}
.mi-opt__body span{font-size:8.5px;color:var(--i-tx3)}
.mi-opt__tg{position:relative;width:33px;height:19px;border-radius:99px;background:var(--i-ok);flex:0 0 auto}
.mi-opt__tg i{position:absolute;top:2px;left:16px;width:15px;height:15px;border-radius:99px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);animation:mi-tgl 3s cubic-bezier(.4,0,.2,1) infinite}
@keyframes mi-tgl{0%,42%{left:16px}52%,92%{left:2px}100%{left:16px}}
.mi-opt__sp{width:12px;height:12px;border-radius:99px;border:1.8px solid var(--i-bg3);border-top-color:var(--i-br);opacity:0;animation:mi-svp 3s linear infinite}
@keyframes mi-svp{0%,42%{opacity:0}46%{opacity:1;transform:rotate(0)}66%{opacity:1;transform:rotate(360deg)}70%,100%{opacity:0}}

/* 10 Long Press 长按 */
.mi-long{display:flex;flex-direction:column;align-items:center;gap:9px}
.mi-long__b{position:relative;width:54px;height:54px;border-radius:99px;background:#fff;border:1px solid var(--i-line);box-shadow:var(--i-sh-s);display:grid;place-items:center;font-size:17px}
.mi-long__b svg{position:absolute;inset:-3px;width:60px;height:60px;transform:rotate(-90deg)}
.mi-long__b circle{fill:none;stroke:var(--i-br);stroke-width:2.4;stroke-dasharray:176;stroke-dashoffset:176;animation:mi-longp 3.2s cubic-bezier(.4,0,.2,1) infinite;stroke-linecap:round}
@keyframes mi-longp{0%{stroke-dashoffset:176}58%{stroke-dashoffset:0}60%,100%{stroke-dashoffset:0}}
.mi-long span{font-size:9.5px;color:var(--i-tx3)}

/* 11 Double Tap 双击点赞 */
.mi-dtap{position:relative;width:140px;height:104px;border-radius:10px;background:linear-gradient(140deg,#a5b4fc,#e9d5ff 60%,#fbcfe8);display:grid;place-items:center;overflow:hidden}
.mi-dtap__h{font-size:34px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.25));animation:mi-dt 2.6s ease-out infinite;color:#fff;text-shadow:0 3px 12px rgba(244,63,94,.6)}
@keyframes mi-dt{0%{transform:scale(0) rotate(-24deg);opacity:0}14%{transform:scale(1.28) rotate(6deg);opacity:1}30%,74%{transform:scale(1) rotate(0);opacity:1}100%{transform:scale(.9) translateY(-14px);opacity:0}}

/* 12 Attention Pulse 注意力脉冲 */
.mi-pulse{position:relative;display:inline-grid;place-items:center}
.mi-pulse__b{position:relative;z-index:2;height:34px;padding:0 17px;border-radius:99px;background:var(--i-gd);color:#fff;font-size:11px;font-weight:660;display:grid;place-items:center;box-shadow:0 8px 20px -8px rgba(99,102,241,.9)}
.mi-pulse::before,.mi-pulse::after{content:'';position:absolute;inset:0;border-radius:99px;border:1.5px solid rgba(124,58,237,.6);animation:mi-attn 2.2s ease-out infinite}
.mi-pulse::after{animation-delay:1.1s}
@keyframes mi-attn{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.42,1.85);opacity:0}}

/* ───────── 产品流程 Product Lifecycle ───────── */

/* 01 Onboarding Checklist 上手清单 */
.lc-check{width:178px;padding:11px;border:1px solid var(--i-line);border-radius:11px;background:#fff;box-shadow:var(--i-sh-s)}
.lc-check__hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.lc-check__hd b{font-size:11px;font-weight:680}
.lc-check__hd span{font-size:9px;font-weight:660;color:var(--i-br);background:#eef2ff;padding:2px 6px;border-radius:99px}
.lc-check__bar{height:4px;border-radius:99px;background:var(--i-bg3);margin-bottom:9px;overflow:hidden}
.lc-check__bar i{display:block;height:100%;border-radius:99px;background:var(--i-gd);width:33%;animation:lc-bar 4.5s cubic-bezier(.4,0,.2,1) infinite}
@keyframes lc-bar{0%{width:0}22%{width:33%}48%{width:66%}74%,100%{width:100%}}
.lc-check__i{display:flex;align-items:center;gap:7px;padding:4px 0;font-size:10px;color:var(--i-tx2)}
.lc-check__i em{font-style:normal;width:15px;height:15px;border-radius:99px;border:1.5px solid var(--i-line2);display:grid;place-items:center;font-size:8.5px;color:transparent;flex:0 0 auto}
.lc-check__i.is-done{color:var(--i-tx3);text-decoration:line-through}
.lc-check__i.is-done em{background:var(--i-ok);border-color:var(--i-ok);color:#fff}

/* 02 Product Tour / Coachmark 功能引导 */
.lc-tour{position:relative;width:180px;height:118px;border-radius:11px;background:#fff;border:1px solid var(--i-line);padding:11px;overflow:hidden}
.lc-tour__bar{display:flex;gap:5px;margin-bottom:9px}
.lc-tour__bar i{width:16px;height:5px;border-radius:3px;background:var(--i-bg3)}
.lc-tour__bar i:first-child{background:var(--i-br);width:24px}
.lc-tour__blk{height:7px;border-radius:4px;background:var(--i-bg2);margin-bottom:6px}
.lc-tour__blk--s{width:58%}
.lc-tour__hl{position:absolute;right:10px;bottom:26px;width:44px;height:26px;border-radius:7px;box-shadow:0 0 0 2px var(--i-br),0 0 0 99px rgba(23,23,27,.42);background:transparent;animation:lc-hl 4s ease-in-out infinite}
@keyframes lc-hl{0%,100%{box-shadow:0 0 0 2px var(--i-br),0 0 0 99px rgba(23,23,27,.42)}50%{box-shadow:0 0 0 3px var(--i-br2),0 0 0 99px rgba(23,23,27,.5)}}
.lc-tour__tip{position:absolute;left:10px;bottom:9px;width:100px;padding:7px 8px;border-radius:8px;background:#17171b;color:#fff}
.lc-tour__tip b{display:block;font-size:9px;font-weight:670;margin-bottom:2px}
.lc-tour__tip span{font-size:8px;color:rgba(255,255,255,.62);line-height:1.45;display:block}
.lc-tour__tip em{position:absolute;top:-5px;right:10px;width:9px;height:9px;background:#17171b;transform:rotate(45deg);border-radius:1.5px}
.lc-tour__step{position:absolute;right:9px;top:9px;font-size:8px;font-weight:650;color:var(--i-tx3)}

/* 03 Blank Slate 首用引导 */
.lc-blank{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;width:170px}
.lc-blank__ico{width:46px;height:46px;border-radius:14px;background:linear-gradient(140deg,#eef2ff,#faf5ff);border:1px dashed #c7d2fe;display:grid;place-items:center;font-size:20px}
.lc-blank b{font-size:11.5px;font-weight:680}
.lc-blank p{font-size:9.5px;color:var(--i-tx3);line-height:1.5;max-width:150px}
.lc-blank__acts{display:flex;gap:6px;margin-top:1px}

/* 04 Paywall 付费墙 */
.lc-paywall{position:relative;width:180px;height:124px;border-radius:11px;background:#fff;border:1px solid var(--i-line);overflow:hidden}
.lc-paywall__bg{padding:11px;filter:blur(2.4px);opacity:.5}
.lc-paywall__blk{height:7px;border-radius:4px;background:var(--i-bg3);margin-bottom:6px}
.lc-paywall__blk--s{width:64%}
.lc-paywall__lock{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.4),#fff 62%);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:12px;gap:6px;text-align:center}
.lc-paywall__badge{width:26px;height:26px;border-radius:99px;background:var(--i-gd3);display:grid;place-items:center;color:#fff;font-size:12px;box-shadow:0 6px 16px -6px rgba(245,158,11,.9)}
.lc-paywall__lock b{font-size:11px;font-weight:690}
.lc-paywall__lock span{font-size:8.5px;color:var(--i-tx3)}

/* 05 Contextual Upgrade Gate 情境升级门槛 */
.lc-gate{width:180px;padding:11px;border:1px solid #fcd34d;border-radius:11px;background:linear-gradient(160deg,#fffbeb,#fff);box-shadow:var(--i-sh-s)}
.lc-gate__hd{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.lc-gate__hd em{font-style:normal;font-size:13px}
.lc-gate__hd b{font-size:11px;font-weight:690;color:#b45309}
.lc-gate p{font-size:9.5px;color:var(--i-tx2);line-height:1.5;margin-bottom:9px}
.lc-gate__row{display:flex;align-items:center;gap:6px}
.lc-gate__u{flex:1;height:4px;border-radius:99px;background:#fde68a;position:relative;overflow:hidden}
.lc-gate__u i{position:absolute;inset:0 12% 0 0;background:#f59e0b;border-radius:99px}
.lc-gate__btn{height:23px;padding:0 10px;border-radius:7px;background:#17171b;color:#fff;font-size:9.5px;font-weight:640;display:grid;place-items:center}

/* 06 Upsell / Cross-sell 追加推荐 */
.lc-upsell{width:180px;padding:10px 11px;border:1px solid var(--i-line);border-radius:11px;background:#fff;box-shadow:var(--i-sh-s)}
.lc-upsell__t{font-size:9px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--i-tx3);margin-bottom:8px}
.lc-upsell__i{display:flex;align-items:center;gap:8px;padding:6px;border-radius:8px;background:var(--i-bg2);margin-bottom:6px}
.lc-upsell__i:last-child{margin-bottom:0}
.lc-upsell__i em{font-style:normal;width:26px;height:26px;border-radius:7px;background:var(--i-gd2);flex:0 0 auto;display:grid;place-items:center;color:#fff;font-size:12px}
.lc-upsell__i b{display:block;font-size:10px;font-weight:640}
.lc-upsell__i span{font-size:8.5px;color:var(--i-tx3)}
.lc-upsell__add{margin-left:auto;width:20px;height:20px;border-radius:99px;background:var(--i-br);color:#fff;display:grid;place-items:center;font-size:12px;line-height:1;flex:0 0 auto}

/* 07 Referral 邀请推荐 */
.lc-ref{width:180px;padding:11px;border-radius:11px;background:linear-gradient(150deg,#4f46e5,#7c3aed 58%,#c026d3);color:#fff;box-shadow:0 14px 30px -14px rgba(79,70,229,.85)}
.lc-ref b{display:block;font-size:12px;font-weight:700;letter-spacing:-.015em;margin-bottom:3px}
.lc-ref p{font-size:9px;color:rgba(255,255,255,.78);line-height:1.5;margin-bottom:9px}
.lc-ref__code{display:flex;align-items:center;gap:6px;height:28px;padding:0 4px 0 10px;border-radius:8px;background:rgba(255,255,255,.16);border:1px dashed rgba(255,255,255,.45)}
.lc-ref__code span{flex:1;font-size:10.5px;font-weight:680;letter-spacing:.11em}
.lc-ref__code em{font-style:normal;padding:4px 8px;border-radius:6px;background:#fff;color:#4f46e5;font-size:9px;font-weight:680}

/* 08 Waitlist 候补名单 */
.lc-wait{width:174px;padding:12px;border:1px solid var(--i-line);border-radius:11px;background:#fff;box-shadow:var(--i-sh-s);text-align:center}
.lc-wait__n{font-size:24px;font-weight:790;letter-spacing:-.03em;background:var(--i-gd);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.1}
.lc-wait__n em{font-style:normal;font-size:11px;font-weight:600;color:var(--i-tx3);background:none;-webkit-text-fill-color:var(--i-tx3)}
.lc-wait p{font-size:9.5px;color:var(--i-tx3);margin:4px 0 9px}
.lc-wait__f{display:flex;gap:5px}
.lc-wait__f i{flex:1;height:28px;border-radius:8px;background:var(--i-bg2);border:1px solid var(--i-line);display:grid;place-items:center;font-size:9.5px;color:var(--i-tx3);font-style:normal}
.lc-wait__f em{font-style:normal;width:64px;height:28px;border-radius:8px;background:#17171b;color:#fff;font-size:9.5px;font-weight:640;display:grid;place-items:center}
.lc-wait__p{display:flex;align-items:center;gap:6px;margin-top:9px}
.lc-wait__p i{flex:1;height:4px;border-radius:99px;background:var(--i-bg3);overflow:hidden;font-style:normal}
.lc-wait__p i b{display:block;height:100%;width:72%;background:var(--i-gd);border-radius:99px}
.lc-wait__p span{font-size:8.5px;color:var(--i-tx3);white-space:nowrap}

/* 09 Streak 连续打卡 */
.lc-streak{display:flex;flex-direction:column;align-items:center;gap:8px;width:176px;padding:11px;border:1px solid var(--i-line);border-radius:11px;background:#fff;box-shadow:var(--i-sh-s)}
.lc-streak__n{display:flex;align-items:baseline;gap:4px}
.lc-streak__n b{font-size:25px;font-weight:790;color:#f59e0b;letter-spacing:-.03em;line-height:1}
.lc-streak__n span{font-size:9.5px;color:var(--i-tx3)}
.lc-streak__days{display:flex;gap:4px}
.lc-streak__days i{width:19px;height:19px;border-radius:6px;display:grid;place-items:center;font-size:8px;font-style:normal;font-weight:640;background:var(--i-bg3);color:var(--i-tx3)}
.lc-streak__days i.is-on{background:linear-gradient(135deg,#fbbf24,#f97316);color:#fff}
.lc-streak__days i.is-today{box-shadow:0 0 0 2px #fde68a}

/* 10 Achievement Badge 成就徽章 */
.lc-badge{display:flex;flex-direction:column;align-items:center;gap:8px}
.lc-badge__b{position:relative;width:62px;height:62px;border-radius:99px;background:conic-gradient(from 200deg,#fde68a,#f59e0b,#fbbf24,#fde68a);display:grid;place-items:center;box-shadow:0 10px 24px -10px rgba(245,158,11,.95)}
.lc-badge__b::after{content:'';position:absolute;inset:5px;border-radius:99px;background:#fff;box-shadow:inset 0 2px 6px rgba(0,0,0,.08)}
.lc-badge__b em{position:relative;z-index:2;font-size:24px;font-style:normal}
.lc-badge__sh{position:absolute;inset:0;border-radius:99px;overflow:hidden}
.lc-badge__sh::after{content:'';position:absolute;top:-40%;bottom:-40%;width:24px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);transform:skewX(-20deg);animation:m-glare 3s ease-in-out infinite}
.lc-badge b{font-size:11px;font-weight:680}
.lc-badge span{font-size:8.5px;color:var(--i-tx3);margin-top:-5px}

/* 11 Leaderboard 排行榜 */
.lc-lb{width:176px;padding:10px;border:1px solid var(--i-line);border-radius:11px;background:#fff;box-shadow:var(--i-sh-s)}
.lc-lb__r{display:flex;align-items:center;gap:7px;padding:5px 6px;border-radius:7px;font-size:10px}
.lc-lb__r.is-me{background:#eef2ff}
.lc-lb__r em{font-style:normal;width:15px;font-weight:700;color:var(--i-tx3);text-align:center;flex:0 0 auto}
.lc-lb__r b{font-weight:620;flex:1}
.lc-lb__r span{font-weight:680;color:var(--i-br)}
.lc-lb__r:nth-child(1) em{color:#f59e0b}

/* 12 Notification Center 通知中心 */
.lc-notif{width:180px;padding:9px;border:1px solid var(--i-line);border-radius:11px;background:#fff;box-shadow:var(--i-sh)}
.lc-notif__hd{display:flex;align-items:center;justify-content:space-between;padding:0 3px 8px;border-bottom:1px solid var(--i-line);margin-bottom:6px}
.lc-notif__hd b{font-size:11px;font-weight:680}
.lc-notif__hd em{font-style:normal;font-size:8.5px;font-weight:660;color:#fff;background:var(--i-err);padding:2px 6px;border-radius:99px}
.lc-notif__i{display:flex;gap:8px;padding:6px 3px;border-radius:7px}
.lc-notif__i.is-new{background:#f5f3ff}
.lc-notif__i em{font-style:normal;width:22px;height:22px;border-radius:7px;flex:0 0 auto;display:grid;place-items:center;font-size:10px;background:var(--i-bg3)}
.lc-notif__i b{display:block;font-size:9.5px;font-weight:640}
.lc-notif__i span{font-size:8.5px;color:var(--i-tx3)}

/* 13 Activity Feed 动态流 */
.lc-feed{position:relative;width:178px;padding-left:17px}
.lc-feed::before{content:'';position:absolute;left:5px;top:6px;bottom:6px;width:1.5px;background:var(--i-line)}
.lc-feed__i{position:relative;padding-bottom:10px}
.lc-feed__i:last-child{padding-bottom:0}
.lc-feed__i::before{content:'';position:absolute;left:-16px;top:3px;width:8px;height:8px;border-radius:99px;background:#fff;border:2px solid var(--i-br)}
.lc-feed__i:first-child::before{background:var(--i-br);box-shadow:0 0 0 0 rgba(79,70,229,.5);animation:d-pulse 2s infinite}
.lc-feed__i b{font-size:10px;font-weight:640}
.lc-feed__i span{font-size:8.5px;color:var(--i-tx3)}

/* 14 Auth Screen 登录页 */
.lc-auth{display:flex;width:186px;height:132px;border-radius:11px;overflow:hidden;border:1px solid var(--i-line);box-shadow:var(--i-sh-s);background:#fff}
.lc-auth__side{width:64px;background:linear-gradient(160deg,#4f46e5,#c026d3);display:grid;place-items:center;color:#fff;font-size:9px;font-weight:640;text-align:center;padding:8px;line-height:1.5}
.lc-auth__form{flex:1;padding:11px 10px;display:flex;flex-direction:column;gap:6px}
.lc-auth__form b{font-size:11.5px;font-weight:700;letter-spacing:-.015em}
.lc-auth__f{height:24px;border:1px solid var(--i-line);border-radius:7px;display:flex;align-items:center;padding:0 8px;font-size:9px;color:var(--i-tx3)}
.lc-auth__go{height:25px;border-radius:7px;background:#17171b;color:#fff;font-size:9.5px;font-weight:640;display:grid;place-items:center;margin-top:1px}
.lc-auth__sep{display:flex;align-items:center;gap:5px;font-size:8px;color:var(--i-tx3)}
.lc-auth__sep::before,.lc-auth__sep::after{content:'';flex:1;height:1px;background:var(--i-line)}
.lc-auth__soc{display:flex;gap:5px}
.lc-auth__soc i{flex:1;height:22px;border:1px solid var(--i-line);border-radius:7px;display:grid;place-items:center;font-size:10px;font-style:normal}

/* 15 404 Error Page */
.lc-404{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;width:176px}
.lc-404__n{font-size:44px;font-weight:800;letter-spacing:-.05em;line-height:1;background:linear-gradient(180deg,#4f46e5,#c026d3);-webkit-background-clip:text;background-clip:text;color:transparent}
.lc-404 b{font-size:12px;font-weight:680}
.lc-404 p{font-size:9.5px;color:var(--i-tx3);line-height:1.5}
.lc-404__f{display:flex;gap:5px;width:150px;margin-top:2px}
.lc-404__f i{flex:1;height:25px;border-radius:7px;border:1px solid var(--i-line);background:var(--i-bg2);display:grid;place-items:center;font-size:9px;color:var(--i-tx3);font-style:normal}
.lc-404__f em{font-style:normal;width:58px;height:25px;border-radius:7px;background:#17171b;color:#fff;font-size:9px;font-weight:640;display:grid;place-items:center}

/* ───────── 页脚与骨架 Footer & Shell ───────── */

/* 01 Mega Footer 巨型页脚 */
.sh-mega{width:100%;padding:13px 14px 11px;border-radius:11px;background:#0e0e13;color:#fff}
.sh-mega__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:12px;padding-bottom:11px;border-bottom:1px solid rgba(255,255,255,.1)}
.sh-mega__bd p{font-size:8.5px;color:rgba(255,255,255,.5);line-height:1.55;margin-top:5px}
.sh-mega__logo{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700}
.sh-mega__logo i{width:16px;height:16px;border-radius:5px;background:var(--i-gd);font-style:normal}
.sh-mega__col b{display:block;font-size:9px;font-weight:660;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:7px}
.sh-mega__col a{display:block;font-size:9px;color:rgba(255,255,255,.72);margin-bottom:5px}
.sh-mega__bot{display:flex;align-items:center;justify-content:space-between;padding-top:9px;font-size:8.5px;color:rgba(255,255,255,.42)}
.sh-mega__soc{display:flex;gap:5px}
.sh-mega__soc i{width:18px;height:18px;border-radius:99px;background:rgba(255,255,255,.1);display:grid;place-items:center;font-size:9px;font-style:normal}

/* 02 Minimal Footer 极简页脚 */
.sh-mini{display:flex;align-items:center;justify-content:space-between;width:100%;padding:11px 13px;border-radius:11px;border:1px solid var(--i-line);background:#fff;box-shadow:var(--i-sh-s)}
.sh-mini__l{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:680}
.sh-mini__l i{width:15px;height:15px;border-radius:5px;background:var(--i-gd);font-style:normal}
.sh-mini__nav{display:flex;gap:11px;font-size:9.5px;color:var(--i-tx2)}
.sh-mini__cp{font-size:9px;color:var(--i-tx3)}

/* 03 Footer with CTA 带 CTA 页脚 */
.sh-fcta{width:100%;border-radius:11px;overflow:hidden;border:1px solid var(--i-line);background:#fff;box-shadow:var(--i-sh-s)}
.sh-fcta__c{padding:13px;background:linear-gradient(120deg,#eef2ff,#faf5ff 60%,#ecfeff);text-align:center}
.sh-fcta__c b{display:block;font-size:13px;font-weight:730;letter-spacing:-.02em;margin-bottom:3px}
.sh-fcta__c p{font-size:9.5px;color:var(--i-tx2);margin-bottom:9px}
.sh-fcta__c em{font-style:normal;display:inline-grid;place-items:center;height:26px;padding:0 14px;border-radius:99px;background:#17171b;color:#fff;font-size:10px;font-weight:650}
.sh-fcta__b{display:flex;align-items:center;justify-content:space-between;padding:9px 13px;border-top:1px solid var(--i-line);font-size:9px;color:var(--i-tx3)}

/* 04 Newsletter Footer 订阅页脚 */
.sh-news{width:100%;padding:13px;border-radius:11px;background:#17171b;color:#fff}
.sh-news b{display:block;font-size:12px;font-weight:700;letter-spacing:-.015em;margin-bottom:3px}
.sh-news p{font-size:9px;color:rgba(255,255,255,.55);margin-bottom:9px;line-height:1.5}
.sh-news__f{display:flex;gap:5px}
.sh-news__f i{flex:1;height:28px;border-radius:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;font-size:9px;color:rgba(255,255,255,.42);font-style:normal}
.sh-news__f em{font-style:normal;padding:0 12px;height:28px;border-radius:8px;background:#fff;color:#17171b;font-size:9.5px;font-weight:660;display:grid;place-items:center}
.sh-news__note{font-size:8px;color:rgba(255,255,255,.35);margin-top:7px}

/* 05 Multi-column Footer 多列页脚 */
.sh-cols{width:100%;padding:12px 13px;border-radius:11px;border:1px solid var(--i-line);background:#fff}
.sh-cols__g{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding-bottom:10px;border-bottom:1px solid var(--i-line)}
.sh-cols__c b{display:block;font-size:9px;font-weight:680;margin-bottom:6px}
.sh-cols__c a{display:block;font-size:8.5px;color:var(--i-tx3);margin-bottom:4px}
.sh-cols__bot{display:flex;align-items:center;justify-content:space-between;padding-top:9px;font-size:8.5px;color:var(--i-tx3)}
.sh-cols__lang{display:flex;align-items:center;gap:4px;border:1px solid var(--i-line);border-radius:6px;padding:2px 6px}

/* 06 App Shell 应用骨架 */
.sh-app{display:flex;width:100%;height:134px;border-radius:11px;overflow:hidden;border:1px solid var(--i-line);background:#fff;box-shadow:var(--i-sh-s)}
.sh-app__side{width:44px;background:#0e0e13;display:flex;flex-direction:column;align-items:center;gap:7px;padding:9px 0}
.sh-app__side i{width:20px;height:20px;border-radius:6px;background:rgba(255,255,255,.12);display:grid;place-items:center;font-size:10px;font-style:normal}
.sh-app__side i.is-on{background:var(--i-gd)}
.sh-app__main{flex:1;display:flex;flex-direction:column;min-width:0}
.sh-app__top{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--i-line)}
.sh-app__top b{font-size:10.5px;font-weight:680;flex:1}
.sh-app__top i{width:18px;height:18px;border-radius:99px;background:var(--i-bg3);font-style:normal}
.sh-app__bd{padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:7px;flex:1}
.sh-app__w{height:100%;border-radius:8px;background:var(--i-bg2);border:1px solid var(--i-line)}

/* 07 Dashboard Layout 仪表盘布局 */
.sh-dash{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:26px 1fr 1fr;gap:6px;width:100%;height:132px}
.sh-dash__hd{grid-column:1/-1;border-radius:8px;background:#17171b;display:flex;align-items:center;padding:0 9px;gap:5px}
.sh-dash__hd b{font-size:9.5px;font-weight:660;color:#fff;flex:1}
.sh-dash__hd i{width:36px;height:5px;border-radius:3px;background:rgba(255,255,255,.22);font-style:normal}
.sh-dash__kpi{border-radius:8px;background:#fff;border:1px solid var(--i-line);padding:7px}
.sh-dash__kpi b{display:block;font-size:14px;font-weight:760;letter-spacing:-.03em}
.sh-dash__kpi span{font-size:8px;color:var(--i-tx3)}
.sh-dash__kpi em{font-style:normal;font-size:8px;font-weight:660;color:var(--i-ok)}
.sh-dash__mid{grid-column:1/3;border-radius:8px;background:#fff;border:1px solid var(--i-line);padding:7px;display:flex;flex-direction:column}
.sh-dash__side{grid-column:3;grid-row:2/4;border-radius:8px;background:#fff;border:1px solid var(--i-line);padding:7px}
.sh-dash__bars{display:flex;align-items:flex-end;gap:3px;flex:1;margin-top:6px}
.sh-dash__bars i{flex:1;border-radius:2px 2px 0 0;background:var(--i-gd);font-style:normal}
.sh-dash__ln{height:5px;border-radius:3px;background:var(--i-bg3);margin-bottom:5px}

/* 08 Three-column Docs 三栏文档布局 */
.sh-docs{display:flex;width:100%;height:134px;border-radius:11px;overflow:hidden;border:1px solid var(--i-line);background:#fff;box-shadow:var(--i-sh-s);font-size:9px}
.sh-docs__l,.sh-docs__r{width:46px;padding:9px 8px;background:var(--i-bg2)}
.sh-docs__r{border-left:1px solid var(--i-line)}
.sh-docs__l{border-right:1px solid var(--i-line)}
.sh-docs__l b,.sh-docs__r b{display:block;font-size:8px;font-weight:660;color:var(--i-tx3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.sh-docs__l a,.sh-docs__r a{display:block;font-size:8.5px;color:var(--i-tx2);margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-docs__l a.is-on{color:var(--i-br);font-weight:660}
.sh-docs__m{flex:1;padding:10px;overflow:hidden}
.sh-docs__m h4{font-size:11px;font-weight:720;letter-spacing:-.015em;margin-bottom:6px}
.sh-docs__m i{display:block;height:5px;border-radius:3px;background:var(--i-bg3);margin-bottom:5px;font-style:normal}
.sh-docs__m i.w60{width:60%}
.sh-docs__m i.w82{width:82%}

/* 09 Holy Grail Layout 圣杯布局 */
.sh-holy{display:grid;grid-template-columns:44px 1fr 40px;grid-template-rows:26px 1fr 22px;gap:5px;width:100%;height:132px}
.sh-holy__hd{grid-column:1/-1;border-radius:7px;background:#17171b;display:grid;place-items:center;color:#fff;font-size:9px;font-weight:660}
.sh-holy__nav{border-radius:7px;background:#fff;border:1px solid var(--i-line);padding:6px;display:flex;flex-direction:column;gap:5px}
.sh-holy__nav i{height:5px;border-radius:3px;background:var(--i-bg3);font-style:normal}
.sh-holy__nav i.is-on{background:var(--i-br)}
.sh-holy__main{border-radius:7px;background:#fff;border:1px solid var(--i-line);padding:8px;display:flex;flex-direction:column;gap:5px}
.sh-holy__main b{font-size:10px;font-weight:680}
.sh-holy__main i{height:5px;border-radius:3px;background:var(--i-bg2);font-style:normal}
.sh-holy__aside{border-radius:7px;background:var(--i-bg2);border:1px solid var(--i-line)}
.sh-holy__ft{grid-column:1/-1;border-radius:7px;background:var(--i-bg2);border:1px solid var(--i-line);display:grid;place-items:center;font-size:8.5px;color:var(--i-tx3)}

/* ═══════════════════════════════════════════════════════════
   UI 模式词典 · 演示 11
   数据表格 Data Table · 无障碍 Accessibility · 现代 CSS Modern CSS
   ═══════════════════════════════════════════════════════════ */

/* ───────── 数据表格 Data Table ───────── */
.tb{width:100%;border:1px solid var(--i-line);border-radius:10px;overflow:hidden;background:#fff;font-size:9.5px;box-shadow:var(--i-sh-s)}
.tb__row{display:grid;align-items:center;gap:6px;padding:0 9px;height:25px;border-bottom:1px solid var(--i-line);min-width:0}
.tb__row:last-child{border-bottom:0}
.tb__row--hd{height:23px;background:var(--i-bg2);font-weight:660;color:var(--i-tx3);font-size:8.5px;text-transform:uppercase;letter-spacing:.03em}
.tb__row--on{background:#f5f3ff}
.tb__c{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tb__u{display:flex;align-items:center;gap:5px;min-width:0}
.tb__u em{font-style:normal;width:17px;height:17px;border-radius:99px;background:var(--i-gd);color:#fff;font-size:7.5px;font-weight:700;display:grid;place-items:center;flex:0 0 auto}
.tb__badge{display:inline-flex;align-items:center;gap:3px;padding:1.5px 5px;border-radius:99px;font-size:8px;font-weight:640;background:#dcfce7;color:#047857;white-space:nowrap}
.tb__badge--y{background:#fef3c7;color:#b45309}
.tb__badge--g{background:var(--i-bg3);color:var(--i-tx2)}
.tb__num{text-align:right;font-variant-numeric:tabular-nums;font-weight:620}

/* 02 列排序 */
.tb__sort{display:inline-flex;align-items:center;gap:3px;cursor:pointer}
.tb__sort i{font-style:normal;font-size:7px;color:var(--i-br);animation:tb-sort 2.2s ease-in-out infinite}
@keyframes tb-sort{0%,100%{transform:translateY(-1px)}50%{transform:translateY(1px)}}

/* 03 行选择 */
.tb__cb{width:12px;height:12px;border-radius:3.5px;border:1.5px solid var(--i-line2);flex:0 0 auto}
.tb__cb.is-on{background:var(--i-br);border-color:var(--i-br);position:relative}
.tb__cb.is-on::after{content:'';position:absolute;left:3px;top:.5px;width:4px;height:7px;border:1.4px solid #fff;border-top:0;border-left:0;transform:rotate(42deg)}

/* 04 批量操作条 */
.tb-bulk{display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:9px;background:#17171b;color:#fff;font-size:9.5px;box-shadow:var(--i-sh)}
.tb-bulk b{font-weight:660}
.tb-bulk__sp{flex:1}
.tb-bulk em{font-style:normal;padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.14);font-size:9px;font-weight:620}
.tb-bulk em.is-dg{background:#ef4444}

/* 05 列固定 */
.tb__pin{position:relative}
.tb__pin::after{content:'';position:absolute;right:-4px;top:0;bottom:0;width:4px;background:linear-gradient(90deg,rgba(0,0,0,.06),transparent)}

/* 06 展开行 */
.tb__exp{background:var(--i-bg2);padding:8px 9px;border-bottom:1px solid var(--i-line);font-size:9px;color:var(--i-tx2);line-height:1.55}
.tb__exp b{color:var(--i-tx);font-weight:660}
.tb__caret{display:inline-block;font-size:8px;color:var(--i-br);transition:transform .2s}
.tb__caret.is-on{transform:rotate(90deg)}

/* 07 行内编辑 */
.tb__edit{display:flex;align-items:center;gap:3px;height:18px;padding:0 6px;border:1.5px solid var(--i-br);border-radius:5px;background:#fff;font-size:9px;box-shadow:0 0 0 2.5px rgba(79,70,229,.14)}
.tb__edit::after{content:'';width:1px;height:9px;background:var(--i-br);animation:tx-caret 1s step-end infinite}

/* 08 筛选条件构建器 */
.tb-filter{width:100%;padding:9px;border:1px solid var(--i-line);border-radius:10px;background:#fff;box-shadow:var(--i-sh-s)}
.tb-filter__r{display:flex;align-items:center;gap:5px;margin-bottom:6px}
.tb-filter__r:last-child{margin-bottom:0}
.tb-filter__r i{font-style:normal;height:22px;border:1px solid var(--i-line);border-radius:6px;display:flex;align-items:center;padding:0 7px;font-size:9px;color:var(--i-tx2);background:var(--i-bg2);white-space:nowrap}
.tb-filter__r i.is-f{background:#eef2ff;border-color:#c7d2fe;color:#4338ca;font-weight:640}
.tb-filter__r em{font-style:normal;height:22px;border:1px solid var(--i-line);border-radius:6px;display:grid;place-items:center;width:22px;font-size:11px;color:var(--i-br);flex:0 0 auto}
.tb-filter__join{font-size:8px;font-weight:680;color:var(--i-tx3);letter-spacing:.06em;padding-left:2px}

/* 09 虚拟滚动 */
.tb-virt{position:relative;width:100%;height:112px;border:1px solid var(--i-line);border-radius:10px;background:#fff;overflow:hidden;padding:5px 0}
.tb-virt__r{display:flex;align-items:center;gap:6px;padding:0 9px;height:22px;font-size:9.5px;border-bottom:1px solid var(--i-bg3)}
.tb-virt__r em{font-style:normal;width:15px;color:var(--i-tx3);font-size:8.5px;text-align:right}
.tb-virt__scroll{position:absolute;right:3px;top:5px;width:3px;height:34px;border-radius:3px;background:rgba(23,23,27,.28);animation:tb-scroll 3.6s ease-in-out infinite}
@keyframes tb-scroll{0%,100%{transform:translateY(0)}50%{transform:translateY(62px)}}
.tb-virt__fade{position:absolute;left:0;right:0;bottom:0;height:24px;background:linear-gradient(transparent,#fff)}

/* 10 表格空状态 */
.tb-empty{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;width:170px}
.tb-empty__i{width:42px;height:42px;border-radius:12px;background:var(--i-bg2);border:1px dashed var(--i-line2);display:grid;place-items:center;font-size:17px}
.tb-empty b{font-size:11px;font-weight:660}
.tb-empty p{font-size:9.5px;color:var(--i-tx3);line-height:1.5}

/* ───────── 无障碍 Accessibility ───────── */

/* 01 Skip Link 跳转链接 */
.a11y-skip{position:relative;width:100%;height:104px;border-radius:10px;border:1px solid var(--i-line);background:#fff;overflow:hidden}
.a11y-skip__nav{height:22px;background:var(--i-bg2);display:flex;align-items:center;gap:8px;padding:0 9px;font-size:9px;color:var(--i-tx2)}
.a11y-skip__link{position:absolute;left:8px;top:4px;padding:5px 10px;border-radius:7px;background:var(--i-br);color:#fff;font-size:9.5px;font-weight:650;box-shadow:var(--i-sh);animation:a11y-skip 3.4s ease-in-out infinite}
@keyframes a11y-skip{0%,58%{transform:translateY(-140%);opacity:0}68%,92%{transform:translateY(0);opacity:1}100%{transform:translateY(-140%);opacity:0}}
.a11y-skip__bd{padding:10px;font-size:9px;color:var(--i-tx3)}
.a11y-skip__bd i{display:block;height:5px;border-radius:3px;background:var(--i-bg3);margin-bottom:5px;font-style:normal}

/* 02 Screen Reader Only */
.a11y-sr{width:100%;border:1px solid var(--i-line);border-radius:10px;background:#fff;padding:11px;box-shadow:var(--i-sh-s)}
.a11y-sr__i{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--i-bg3)}
.a11y-sr__i:last-child{border-bottom:0}
.a11y-sr__ico{width:22px;height:22px;border-radius:7px;background:var(--i-bg3);display:grid;place-items:center;font-size:11px;flex:0 0 auto}
.a11y-sr__t{flex:1;font-size:9.5px;color:var(--i-tx3)}
.a11y-sr__code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:8.5px;background:#f5f3ff;color:#4338ca;padding:2px 6px;border-radius:5px;white-space:nowrap}

/* 03 Focus Trap 焦点锁定 */
.a11y-trap{position:relative;width:160px;height:118px;border-radius:10px;background:rgba(23,23,27,.5);display:grid;place-items:center}
.a11y-trap__m{width:126px;padding:11px;border-radius:10px;background:#fff;box-shadow:var(--i-sh-l)}
.a11y-trap__m b{display:block;font-size:10.5px;font-weight:680;margin-bottom:3px}
.a11y-trap__m p{font-size:8.5px;color:var(--i-tx3);line-height:1.5;margin-bottom:9px}
.a11y-trap__b{display:flex;gap:5px}
.a11y-trap__b i{flex:1;height:23px;border-radius:7px;border:1px solid var(--i-line);display:grid;place-items:center;font-size:9px;color:var(--i-tx2);font-style:normal}
.a11y-trap__b i.is-focus{border-color:var(--i-br);box-shadow:0 0 0 2.5px rgba(79,70,229,.2);color:var(--i-br);font-weight:640}
.a11y-trap__b i.is-p{background:#17171b;color:#fff;border-color:#17171b}

/* 04 ARIA Live Region 实时播报 */
.a11y-live{width:174px}
.a11y-live__ann{display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:9px;background:#17171b;color:#fff;font-size:9.5px;margin-bottom:7px}
.a11y-live__ann em{font-style:normal;width:15px;height:15px;border-radius:99px;background:var(--i-ok);display:grid;place-items:center;font-size:9px;flex:0 0 auto}
.a11y-live__tg{display:flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid var(--i-line);border-radius:9px;background:#fff}
.a11y-live__tg b{font-size:9.5px;font-weight:640;flex:1}
.a11y-live__tg i{font-style:normal;font-family:ui-monospace,Menlo,monospace;font-size:8px;color:var(--i-br);background:#eef2ff;padding:2px 5px;border-radius:4px}

/* 05 Roving Tabindex 漫游焦点 */
.a11y-roving{display:flex;gap:6px;padding:6px;border:1px solid var(--i-line);border-radius:10px;background:#fff}
.a11y-roving i{width:30px;height:30px;border-radius:8px;background:var(--i-bg2);display:grid;place-items:center;font-size:13px;font-style:normal;border:1.5px solid transparent}
.a11y-roving i.is-on{border-color:var(--i-br);box-shadow:0 0 0 3px rgba(79,70,229,.16);background:#eef2ff}
.a11y-roving__hint{font-size:9px;color:var(--i-tx3);margin-top:8px;text-align:center;display:block}
.a11y-roving kbd{font-family:ui-monospace,Menlo,monospace;font-size:8.5px;background:var(--i-bg3);border-radius:4px;padding:1px 5px;border-bottom:1.5px solid var(--i-line2)}

/* 06 Color Contrast 对比度 */
.a11y-contrast{width:172px}
.a11y-contrast__r{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:8px;margin-bottom:6px;font-size:10px;font-weight:640}
.a11y-contrast__r--bad{background:#9ca3af;color:#cbd5e1}
.a11y-contrast__r--good{background:#4f46e5;color:#fff}
.a11y-contrast__r em{font-style:normal;font-family:ui-monospace,Menlo,monospace;font-size:8.5px;padding:2px 5px;border-radius:4px;background:rgba(255,255,255,.28)}
.a11y-contrast__r--good em{background:rgba(255,255,255,.2)}

/* 07 Landmarks 语义地标 */
.a11y-land{display:flex;flex-direction:column;gap:4px;width:176px;font-size:8.5px}
.a11y-land__b{padding:6px 9px;border-radius:7px;border:1px dashed var(--i-line2);background:#fff;display:flex;align-items:center;gap:6px}
.a11y-land__b em{font-style:normal;font-family:ui-monospace,Menlo,monospace;font-size:8px;font-weight:650;background:#eef2ff;color:#4338ca;padding:1.5px 5px;border-radius:4px}
.a11y-land__b span{color:var(--i-tx3)}
.a11y-land__b--main{border-style:solid;border-color:var(--i-br);background:#f5f3ff}

/* 08 Touch Target 触摸目标 */
.a11y-touch{display:flex;align-items:flex-end;gap:11px}
.a11y-touch__i{display:flex;flex-direction:column;align-items:center;gap:6px}
.a11y-touch__b{width:44px;height:44px;border-radius:11px;background:var(--i-bg2);border:1px solid var(--i-line);display:grid;place-items:center;font-size:16px}
.a11y-touch__b.is-ok{background:linear-gradient(135deg,#dcfce7,#bbf7d0);border-color:#86efac}
.a11y-touch__b.is-bad{width:24px;height:24px;font-size:10px;background:#fee2e2;border-color:#fca5a5}
.a11y-touch__i span{font-size:8.5px;font-weight:640}
.a11y-touch__i span.is-ok{color:#047857}
.a11y-touch__i span.is-bad{color:#b91c1c}
.a11y-touch__i em{font-style:normal;font-family:ui-monospace,Menlo,monospace;font-size:8px;color:var(--i-tx3)}

/* ───────── 现代 CSS Modern CSS ───────── */
.mc{display:flex;flex-direction:column;gap:8px;width:100%;align-items:flex-start}
.mc__code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:8.5px;line-height:1.75;background:#0e0e13;color:#c7d2fe;padding:8px 10px;border-radius:9px;width:100%;white-space:pre;overflow:hidden}
.mc__code b{color:#f0abfc;font-weight:600}
.mc__code i{color:#7dd3fc;font-style:normal}
.mc__live{width:100%}

/* 01 :has() 父选择器 */
.mc-has{border:1.5px solid var(--i-line);border-radius:10px;padding:10px;background:#fff;transition:.25s}
.mc-has:has(.mc-has__cb.is-on){border-color:var(--i-br);background:#f5f3ff;box-shadow:0 0 0 4px rgba(79,70,229,.1)}
.mc-has__hd{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.mc-has__cb{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--i-line2);position:relative;flex:0 0 auto}
.mc-has__cb.is-on{background:var(--i-br);border-color:var(--i-br)}
.mc-has__cb.is-on::after{content:'';position:absolute;left:3.5px;top:1px;width:5px;height:8px;border:1.5px solid #fff;border-top:0;border-left:0;transform:rotate(42deg)}
.mc-has__hd b{font-size:10px;font-weight:650}
.mc-has__l{height:6px;border-radius:3px;background:var(--i-bg3);margin-bottom:5px}
.mc-has__l--s{width:56%}

/* 02 aspect-ratio 宽高比 */
.mc-ar{display:flex;gap:8px;align-items:flex-start}
.mc-ar__i{display:flex;flex-direction:column;gap:4px;align-items:center}
.mc-ar__b{border-radius:7px;background:var(--i-gd2)}
.mc-ar__b--16x9{width:74px;aspect-ratio:16/9}
.mc-ar__b--1x1{width:44px;aspect-ratio:1}
.mc-ar__b--4x5{width:36px;aspect-ratio:4/5}
.mc-ar__i em{font-style:normal;font-family:ui-monospace,Menlo,monospace;font-size:8px;color:var(--i-tx3)}

/* 03 subgrid 子网格 */
.mc-sg{border:1px solid var(--i-line);border-radius:10px;background:#fff;padding:9px;width:100%}
.mc-sg__r{display:grid;grid-template-columns:auto 1fr auto;gap:6px 9px;font-size:9.5px;align-items:center}
.mc-sg__r i{font-style:normal;width:15px;height:15px;border-radius:5px;background:var(--i-gd);color:#fff;font-size:7.5px;font-weight:700;display:grid;place-items:center}
.mc-sg__r b{font-weight:640}
.mc-sg__r em{font-style:normal;font-size:9px;color:var(--i-br);font-weight:650}
.mc-sg__r span{grid-column:2;font-size:8.5px;color:var(--i-tx3)}

/* 04 Scroll-Driven Animations */
.mc-sd{position:relative;width:100%;height:104px;border-radius:10px;border:1px solid var(--i-line);background:#fff;overflow:hidden;padding:9px}
.mc-sd__bar{height:5px;border-radius:3px;background:var(--i-line);overflow:hidden;margin-bottom:9px}
.mc-sd__bar i{display:block;height:100%;width:0;background:var(--i-gd);animation:mc-sd 3.4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes mc-sd{0%{width:0}100%{width:100%}}
.mc-sd__c{display:flex;gap:7px}
.mc-sd__c i{flex:1;height:58px;border-radius:8px;background:var(--i-bg2);border:1px solid var(--i-line);opacity:.15;transform:translateY(14px);font-style:normal}
.mc-sd__c i:nth-child(1){animation:mc-sdIn 3.4s cubic-bezier(.4,0,.2,1) infinite}
.mc-sd__c i:nth-child(2){animation:mc-sdIn 3.4s cubic-bezier(.4,0,.2,1) .28s infinite}
.mc-sd__c i:nth-child(3){animation:mc-sdIn 3.4s cubic-bezier(.4,0,.2,1) .56s infinite}
@keyframes mc-sdIn{0%,10%{opacity:.15;transform:translateY(14px)}34%,88%{opacity:1;transform:none}100%{opacity:.15;transform:translateY(14px)}}

/* 05 View Transitions */
.mc-vt{position:relative;width:100%;height:100px;border-radius:10px;overflow:hidden;border:1px solid var(--i-line);background:#fff;display:grid;place-items:center}
.mc-vt__a,.mc-vt__b{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;font-weight:700}
.mc-vt__a{background:var(--i-gd);color:#fff;animation:mc-vtA 3.6s cubic-bezier(.4,0,.2,1) infinite}
.mc-vt__b{background:#fff;color:var(--i-tx);animation:mc-vtB 3.6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes mc-vtA{0%,38%{clip-path:circle(140% at 50% 50%)}58%,100%{clip-path:circle(0% at 78% 22%)}}
@keyframes mc-vtB{0%,38%{clip-path:circle(0% at 78% 22%);opacity:0}40%{opacity:1}58%,100%{clip-path:circle(140% at 78% 22%);opacity:1}}

/* 06 Anchor Positioning 锚点定位 */
.mc-anchor{position:relative;width:100%;height:106px;border-radius:10px;border:1px solid var(--i-line);background:#fff;padding:11px}
.mc-anchor__btn{display:inline-grid;place-items:center;height:26px;padding:0 11px;border-radius:7px;background:#17171b;color:#fff;font-size:9.5px;font-weight:640}
.mc-anchor__tip{position:absolute;left:11px;top:47px;width:104px;padding:7px 9px;border-radius:8px;background:var(--i-br);color:#fff;font-size:8.5px;line-height:1.5;box-shadow:var(--i-sh)}
.mc-anchor__tip::before{content:'';position:absolute;left:14px;top:-4px;width:8px;height:8px;background:var(--i-br);transform:rotate(45deg);border-radius:1px}
.mc-anchor__tip b{display:block;font-weight:660;margin-bottom:1px}

/* 07 Popover API */
.mc-pop{position:relative;width:100%;height:106px;border-radius:10px;border:1px solid var(--i-line);background:#fff;padding:11px}
.mc-pop__card{width:118px;padding:9px 10px;border-radius:9px;background:#fff;border:1px solid var(--i-line);box-shadow:var(--i-sh);margin-top:6px}
.mc-pop__card b{display:block;font-size:9.5px;font-weight:660;margin-bottom:2px}
.mc-pop__card span{font-size:8.5px;color:var(--i-tx3);line-height:1.45}
.mc-pop__row{display:flex;align-items:center;gap:7px;padding:5px 0;border-bottom:1px solid var(--i-bg3);font-size:9px}
.mc-pop__row:last-child{border-bottom:0}
.mc-pop__row i{font-style:normal;font-size:10px}

/* 08 <dialog> 原生弹层 */
.mc-dlg{position:relative;width:100%;height:108px;border-radius:10px;background:rgba(23,23,27,.42);display:grid;place-items:center}
.mc-dlg__b{width:130px;padding:11px;border-radius:11px;background:#fff;box-shadow:var(--i-sh-l)}
.mc-dlg__b b{display:block;font-size:10.5px;font-weight:680;margin-bottom:3px}
.mc-dlg__b p{font-size:8.5px;color:var(--i-tx3);line-height:1.5;margin-bottom:9px}
.mc-dlg__f{display:flex;gap:5px;justify-content:flex-end}
.mc-dlg__f i{font-style:normal;height:21px;padding:0 9px;border-radius:6px;border:1px solid var(--i-line);display:grid;place-items:center;font-size:8.5px;color:var(--i-tx2)}
.mc-dlg__f i.is-p{background:#17171b;color:#fff;border-color:#17171b}

/* 09 details/summary */
.mc-det{width:100%;border:1px solid var(--i-line);border-radius:10px;background:#fff;overflow:hidden}
.mc-det__s{display:flex;align-items:center;gap:7px;padding:9px 11px;font-size:10px;font-weight:640;border-bottom:1px solid var(--i-line)}
.mc-det__s i{font-style:normal;font-size:9px;color:var(--i-br)}
.mc-det__b{padding:9px 11px;font-size:9px;color:var(--i-tx2);line-height:1.55}

/* 10 accent-color */
.mc-accent{width:100%;border:1px solid var(--i-line);border-radius:10px;background:#fff;padding:11px;display:flex;flex-direction:column;gap:9px}
.mc-accent__r{display:flex;align-items:center;gap:8px;font-size:9.5px;color:var(--i-tx2)}
.mc-accent__cb{width:15px;height:15px;border-radius:4px;background:var(--i-br);position:relative;flex:0 0 auto}
.mc-accent__cb::after{content:'';position:absolute;left:4px;top:1.5px;width:5px;height:8px;border:1.6px solid #fff;border-top:0;border-left:0;transform:rotate(42deg)}
.mc-accent__rd{width:15px;height:15px;border-radius:99px;border:4.5px solid var(--i-br);background:#fff;flex:0 0 auto}
.mc-accent__rg{position:relative;flex:1;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--i-br) 58%,var(--i-bg3) 58%)}
.mc-accent__rg::after{content:'';position:absolute;left:58%;top:-5.5px;width:16px;height:16px;border-radius:99px;background:#fff;border:2px solid var(--i-br);transform:translateX(-50%)}

/* 11 color-mix() */
.mc-mix{display:flex;gap:0;width:100%;border-radius:10px;overflow:hidden;border:1px solid var(--i-line)}
.mc-mix i{flex:1;height:56px;font-style:normal}
.mc-mix__n{font-size:8.5px;color:var(--i-tx3);text-align:center;display:flex;width:100%;font-family:ui-monospace,Menlo,monospace}
.mc-mix__n span{flex:1}

/* 12 OKLCH 色彩空间 */
.mc-oklch{display:flex;flex-direction:column;gap:6px;width:100%}
.mc-oklch__row{display:flex;gap:0;border-radius:9px;overflow:hidden;border:1px solid var(--i-line)}
.mc-oklch__row i{flex:1;height:26px;font-style:normal}
.mc-oklch__lb{font-size:8.5px;color:var(--i-tx3);font-family:ui-monospace,Menlo,monospace;display:flex;justify-content:space-between}

/* 13 mask / clip-path */
.mc-mask{display:flex;gap:9px;width:100%}
.mc-mask__i{flex:1;aspect-ratio:1.35;border-radius:9px;background:var(--i-gd2)}
.mc-mask__i--blob{-webkit-mask:radial-gradient(circle at 40% 40%,#000 58%,transparent 62%);mask:radial-gradient(circle at 40% 40%,#000 58%,transparent 62%)}
.mc-mask__i--tri{clip-path:polygon(50% 4%,96% 96%,4% 96%)}
.mc-mask__i--grad{-webkit-mask:linear-gradient(to bottom,#000 26%,transparent);mask:linear-gradient(to bottom,#000 26%,transparent)}

/* 14 mix-blend-mode 混合模式 */
.mc-blend{position:relative;width:100%;height:104px;border-radius:10px;overflow:hidden;background:#0e0e13;display:grid;place-items:center}
.mc-blend__t{position:relative;z-index:2;font-size:26px;font-weight:800;letter-spacing:-.04em;color:#fff;mix-blend-mode:difference}
.mc-blend__o{position:absolute;width:52px;height:52px;border-radius:99px;background:#6366f1;filter:blur(1px);animation:mc-blend 4s ease-in-out infinite}
.mc-blend__o:nth-of-type(2){background:#ec4899;animation-delay:-1.4s;animation-direction:reverse}
@keyframes mc-blend{0%,100%{transform:translate(-40px,-14px) scale(1)}50%{transform:translate(46px,16px) scale(1.25)}}
.mc-blend span{position:absolute;bottom:8px;font-size:8.5px;color:rgba(255,255,255,.45);z-index:3}