/* ============================================================
   装机工具箱 · 共享设计系统
   Windows 11 骨架 + Apple Liquid Glass 质感 · 深浅双主题
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
/* 强制 hidden 属性优先于任何 display 声明（如 flex 视图容器） */
[hidden]{display:none !important}
:root{
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-pill:999px;
  --font:"Segoe UI Variable Display","Segoe UI Variable","Segoe UI",system-ui,"Microsoft YaHei UI","PingFang SC",sans-serif;
  --ease:cubic-bezier(.2,.8,.25,1);
}
html[data-theme="light"]{
  --tx:#171a23; --tx-2:#565e73; --tx-3:#848da3;
  --glass:rgba(251,252,255,.5);
  --glass-2:rgba(247,249,255,.66);
  --glass-3:rgba(255,255,255,.75);
  --line:rgba(255,255,255,.9);
  --line-2:rgba(20,30,60,.1);
  --shadow:0 10px 32px rgba(38,54,110,.13),0 2px 8px rgba(38,54,110,.07);
  --shadow-2:0 24px 60px rgba(24,36,80,.22);
  --accent:#0f6fdd; --accent-ink:#ffffff;
  --accent-g1:#35a2ff; --accent-g2:#0d6fe0;
  --ok:#0f9d58; --warn:#d97706; --bad:#e0393e;
  --rec:#ffb020;
  --aur-1:#5b8cff; --aur-2:#38d3f2; --aur-3:#b98cff; --aur-4:#ff8fd0;
}
html[data-theme="dark"]{
  --tx:#eef1f8; --tx-2:#a6aec4; --tx-3:#717a94;
  --glass:rgba(25,29,42,.44);
  --glass-2:rgba(30,35,50,.55);
  --glass-3:rgba(38,43,60,.76);
  --line:rgba(255,255,255,.15);
  --line-2:rgba(255,255,255,.08);
  --shadow:0 10px 32px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.25);
  --shadow-2:0 28px 70px rgba(0,0,0,.55);
  --accent:#4fb3ff; --accent-ink:#06121f;
  --accent-g1:#45a9ff; --accent-g2:#1f6fe8;
  --ok:#34d17b; --warn:#f0a03c; --bad:#ff5c60;
  --rec:#ffb94d;
  --aur-1:#2447c9; --aur-2:#0b6e96; --aur-3:#6b3fcf; --aur-4:#8e3f6e;
}
html,body{height:100%}
body{
  margin:0; color:var(--tx); font-family:var(--font);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-size:15px; line-height:1.55;
  overflow-x:hidden; min-height:100vh;
}
a{color:inherit; text-decoration:none}
button{font-family:inherit}
input,select,textarea{font-family:inherit; color:inherit}
::selection{background:color-mix(in srgb,var(--accent) 30%,transparent)}

/* ---------- 桌面壁纸（Win11 Bloom 风格 Aurora） ---------- */
.desktop-bg{position:fixed; inset:0; z-index:-2; overflow:hidden;
  background:linear-gradient(165deg,#0e1330 0%,#101a40 34%,#0b2747 62%,#141a3c 100%);}
html[data-theme="light"] .desktop-bg{background:linear-gradient(165deg,#b9d4ff 0%,#cfe3ff 30%,#d6e2ff 55%,#e3def7 78%,#f4dcf0 100%)}
html[data-theme="dark"] .desktop-bg{background:linear-gradient(165deg,#0d1129 0%,#111a3c 36%,#0c2440 64%,#171438 100%)}
.desktop-bg i{position:absolute; border-radius:50%; filter:blur(70px); opacity:.75;
  animation:drift 26s var(--ease) infinite alternate; will-change:transform}
html[data-theme="light"] .desktop-bg i{opacity:.6}
.desktop-bg .b1{width:46vmax;height:46vmax; left:-12vmax; top:-14vmax; background:radial-gradient(circle,var(--aur-1),transparent 68%)}
.desktop-bg .b2{width:40vmax;height:40vmax; right:-10vmax; top:-8vmax; background:radial-gradient(circle,var(--aur-3),transparent 66%); animation-delay:-8s}
.desktop-bg .b3{width:42vmax;height:42vmax; left:24vmax; bottom:-20vmax; background:radial-gradient(circle,var(--aur-2),transparent 66%); animation-delay:-16s}
.desktop-bg .b4{width:30vmax;height:30vmax; right:18vmax; bottom:-10vmax; background:radial-gradient(circle,var(--aur-4),transparent 62%); opacity:.4; animation-delay:-4s}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(4vmax,-3vmax,0) scale(1.08)}
  100%{transform:translate3d(-3vmax,4vmax,0) scale(.96)}
}
/* ---------- 科技感背景装饰：网格 / 代码卡 / 符号水印 ---------- */
.desktop-bg .gd{position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(120,165,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,165,255,.055) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 38%, #000 28%, transparent 82%);
  mask-image:radial-gradient(ellipse 78% 62% at 50% 38%, #000 28%, transparent 82%)}
html[data-theme="light"] .desktop-bg .gd{background-image:linear-gradient(rgba(60,105,235,.07) 1px, transparent 1px),
  linear-gradient(90deg, rgba(60,105,235,.07) 1px, transparent 1px)}
.desktop-bg .codelet{position:absolute; pointer-events:none; padding:11px 14px 10px; max-width:52vw;
  font:600 11px/1.75 ui-monospace,"Cascadia Code",Consolas,"SF Mono",Menlo,monospace;
  color:#d9e4ff; letter-spacing:.2px; white-space:pre; text-align:left;
  background:rgba(10,16,42,.34); border:1px solid rgba(160,190,255,.16); border-radius:14px;
  -webkit-backdrop-filter:blur(8px) saturate(1.2); backdrop-filter:blur(8px) saturate(1.2);
  box-shadow:0 10px 26px rgba(8,14,40,.18), inset 0 1px 0 rgba(255,255,255,.16);
  animation:floaty1 22s var(--ease) infinite alternate}
html[data-theme="light"] .desktop-bg .codelet{background:rgba(20,30,70,.28); border-color:rgba(255,255,255,.34);
  box-shadow:0 10px 26px rgba(30,60,140,.14), inset 0 1px 0 rgba(255,255,255,.35)}
.desktop-bg .cl1{right:4.5vmax; top:21%; transform:rotate(-2.5deg); opacity:.72}
.desktop-bg .cl2{left:5vmax; bottom:15%; transform:rotate(2deg); opacity:.6; animation-name:floaty2; animation-delay:-9s}
html[data-theme="dark"] .desktop-bg .cl1,.desktop-bg .cl2{opacity:.5}
.desktop-bg .codelet code{display:block}
.desktop-bg .codelet .p{color:#86b4ff}
.desktop-bg .codelet .f{color:#6fd6ff}
.desktop-bg .codelet .g{color:#7ee08c}
.desktop-bg .codelet .k{color:#c9a4ff}
.desktop-bg .codelet .s{color:#a7e391}
.desktop-bg .codelet .v{color:#ffcf8a}
.desktop-bg .codelet .c{color:rgba(190,205,255,.45)}
.desktop-bg .glyphs{position:absolute; pointer-events:none; font-family:ui-monospace,"Cascadia Code",Consolas,monospace;
  font-weight:800; line-height:1; letter-spacing:.04em; user-select:none;
  color:color-mix(in srgb,var(--tx) 12%,transparent); text-shadow:0 0 24px color-mix(in srgb,#4b7bff 30%,transparent)}
html[data-theme="light"] .desktop-bg .glyphs{color:color-mix(in srgb,#1b3c8f 16%,transparent)}
.desktop-bg .g1{left:8vmax; top:16%; font-size:clamp(52px,7vw,104px); transform:rotate(-8deg)}
.desktop-bg .g2{right:7vmax; bottom:20%; font-size:clamp(15px,1.5vw,22px); font-weight:600;
  letter-spacing:.35em; color:color-mix(in srgb,#59d3ff 22%,transparent); transform:rotate(-4deg)}
.desktop-bg .glyphs .hi{color:color-mix(in srgb,#59d3ff 60%,transparent); text-shadow:0 0 16px rgba(89,211,255,.5)}
/* 点阵纹理 */
.desktop-bg .ndots{position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:radial-gradient(circle, rgba(135,180,255,.2) 1.4px, transparent 1.9px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 72% 62% at 50% 42%, #000 12%, transparent 78%);
  mask-image:radial-gradient(ellipse 72% 62% at 50% 42%, #000 12%, transparent 78%)}
html[data-theme="light"] .desktop-bg .ndots{background-image:radial-gradient(circle, rgba(70,110,230,.26) 1.4px, transparent 1.9px)}
/* 代码雨画布 */
#rainCv{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.85}
html[data-theme="dark"] #rainCv{opacity:1}
html[data-theme="light"] #rainCv{opacity:1; filter:brightness(.72) saturate(1.5)}
/* 迷你代码卡 */
.desktop-bg .codelet.mini{padding:6px 11px 5px; font-size:10px; line-height:1.6; border-radius:10px;
  opacity:.52; animation:none}
html[data-theme="dark"] .desktop-bg .codelet.mini{opacity:.45}
.desktop-bg .m1{right:8vw; top:32%; transform:rotate(1.6deg)}
.desktop-bg .m2{left:9vw; top:44%; transform:rotate(-1.8deg)}
.desktop-bg .m3{right:8vw; bottom:14%; transform:rotate(-1.5deg)}
.desktop-bg .m4{left:9vw; bottom:6%; transform:rotate(2deg)}
/* 更多水印位置与字号 */
.desktop-bg .g3{left:13vw; bottom:9%; font-size:clamp(12px,1.1vw,17px); letter-spacing:.28em}
.desktop-bg .g4{right:22vw; bottom:10%; font-size:clamp(30px,4vw,56px); transform:rotate(-7deg)}
.desktop-bg .g5{right:17vw; top:13%; font-size:clamp(18px,2.4vw,34px); transform:rotate(4deg)}
.desktop-bg .g6{left:6vw; top:30%; font-size:clamp(13px,1.3vw,19px); letter-spacing:.2em}
.desktop-bg .g7{right:6vw; top:8%; font-size:clamp(16px,2.2vw,30px); transform:rotate(-3deg)}
.desktop-bg .g8{right:16vw; bottom:38%; font-size:clamp(13px,1.3vw,19px); transform:rotate(2deg)}
@keyframes floaty1{
  0%{transform:translate3d(0,0,0) rotate(-2.5deg)}
  100%{transform:translate3d(-14px,18px,0) rotate(-2.5deg)}
}
@keyframes floaty2{
  0%{transform:translate3d(0,0,0) rotate(2deg)}
  100%{transform:translate3d(16px,-14px,0) rotate(2deg)}
}
@media (max-width:960px){
  .desktop-bg .codelet,.desktop-bg .glyphs{display:none}
}
/* 细颗粒噪点，弱化渐变条带 */
.grain::after{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:reduce){
  .desktop-bg i{animation:none}
  .desktop-bg .codelet{animation:none}
  #rainCv{display:none}
}

/* ---------- 玻璃面板 ---------- */
.glass{position:relative; border-radius:var(--r-lg);
  background:var(--glass);
  -webkit-backdrop-filter:blur(26px) saturate(1.6);
  backdrop-filter:blur(26px) saturate(1.6);
  border:1px solid var(--line);
  box-shadow:var(--shadow), inset 0 1px 0 color-mix(in srgb,var(--line) 92%,transparent);
}
.glass::before{content:""; position:absolute; inset:1px 1px auto 1px; height:44%; pointer-events:none;
  border-radius:calc(var(--r-lg) - 2px) calc(var(--r-lg) - 2px) 40% 40%;
  background:linear-gradient(180deg,
    color-mix(in srgb,#fff 42%,transparent),
    color-mix(in srgb,#fff 14%,transparent) 42%,
    transparent 100%); opacity:.85}
.glass::after{content:""; position:absolute; left:6%; top:0; height:1px; width:34%; pointer-events:none;
  border-radius:1px; background:linear-gradient(90deg,transparent,#fff,transparent); opacity:.9}
html[data-theme="dark"] .glass::before{background:linear-gradient(180deg,
  color-mix(in srgb,#fff 16%,transparent),
  color-mix(in srgb,#fff 5%,transparent) 42%, transparent 100%)}
html[data-theme="dark"] .glass::after{opacity:.5}

/* ---------- 图标 ---------- */
.ic{width:20px; height:20px; flex:none; display:inline-block; vertical-align:-4px}
.ic svg{width:100%; height:100%}
.ic.use-fill{fill:currentColor}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:0; cursor:pointer; user-select:none; white-space:nowrap;
  font-size:13.5px; font-weight:600; line-height:1; color:var(--tx);
  padding:10px 18px; border-radius:var(--r-sm);
  background:var(--glass-2); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  box-shadow:0 1px 2px rgba(0,0,0,.06), inset 0 1px 0 color-mix(in srgb,var(--line) 70%,transparent);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease), filter .16s var(--ease);
}
.btn:hover{filter:brightness(1.05); box-shadow:0 6px 18px rgba(10,20,50,.12); transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:disabled{opacity:.55; cursor:not-allowed; transform:none}
.btn:focus-visible,.chip:focus-visible,.icon-btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{
  outline:2px solid color-mix(in srgb,var(--accent) 80%,transparent); outline-offset:2px}
.btn-primary{background:linear-gradient(160deg,var(--accent-g1),var(--accent-g2)); color:var(--accent-ink);
  border-color:transparent;
  box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 38%,transparent), inset 0 1px 0 rgba(255,255,255,.35)}
.btn-primary:hover{box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 48%,transparent), inset 0 1px 0 rgba(255,255,255,.4)}
.btn-danger{background:linear-gradient(160deg,#ff7a7c,#e0393e); color:#fff; border-color:transparent}
.btn-ghost{background:transparent; border-color:transparent; box-shadow:none; color:var(--tx-2)}
.btn-ghost:hover{background:color-mix(in srgb,var(--tx) 7%,transparent); filter:none}
.btn-sm{padding:6px 11px; font-size:12.5px; border-radius:8px}
.btn-block{width:100%}
.icon-btn{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
  border-radius:10px; border:1px solid transparent; cursor:pointer; color:var(--tx-2);
  background:transparent; transition:background .15s,color .15s,transform .15s}
.icon-btn:hover{background:color-mix(in srgb,var(--tx) 9%,transparent); color:var(--tx)}
.icon-btn:active{transform:scale(.93)}
.icon-btn.accent-on{color:var(--accent)}
.icon-btn.danger-on:hover{color:var(--bad)}

/* ---------- 输入框 ---------- */
.field{display:flex; flex-direction:column; gap:7px; min-width:0}
.field>label{font-size:12.5px; font-weight:600; color:var(--tx-2); letter-spacing:.2px}
.input,select.input,textarea.input{
  width:100%; padding:10px 13px; font-size:14px; color:var(--tx);
  background:color-mix(in srgb,var(--glass-3) 60%,transparent);
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  outline:none; transition:border-color .15s, box-shadow .15s, background .15s;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.input::placeholder{color:var(--tx-3)}
.input:focus{border-color:color-mix(in srgb,var(--accent) 65%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
textarea.input{resize:vertical; min-height:96px; line-height:1.6}
select.input{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--tx-2) 50%),linear-gradient(135deg,var(--tx-2) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%; background-size:5px 5px; background-repeat:no-repeat;
  padding-right:34px}

/* ---------- 分类 Chip ---------- */
.chip-row{display:flex; gap:9px; flex-wrap:wrap; align-items:center}
.chip{display:inline-flex; align-items:center; gap:6px; padding:8px 16px; cursor:pointer; user-select:none;
  font-size:13.5px; font-weight:600; color:var(--tx-2); border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--glass-2) 55%,transparent); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  transition:all .18s var(--ease)}
.chip .num{font-size:11px; font-weight:700; min-width:18px; height:18px; padding:0 5px; display:inline-flex;
  align-items:center; justify-content:center; border-radius:9px; background:color-mix(in srgb,var(--tx) 10%,transparent)}
.chip:hover{color:var(--tx); background:var(--glass-2); transform:translateY(-1px)}
.chip.active{background:linear-gradient(160deg,var(--accent-g1),var(--accent-g2)); color:var(--accent-ink);
  border-color:transparent; box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 36%,transparent)}
.chip.active .num{background:rgba(255,255,255,.22); color:inherit}

/* ---------- 开关（Win11 风格） ---------- */
.switch{position:relative; display:inline-flex; align-items:center; cursor:pointer; gap:9px; user-select:none}
.switch input{position:absolute; opacity:0; width:0; height:0}
.switch .track{width:42px; height:22px; flex:none; border-radius:11px; position:relative;
  background:color-mix(in srgb,var(--tx) 16%,transparent); border:1px solid var(--line-2);
  transition:background .18s var(--ease)}
.switch .track::after{content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s var(--ease)}
.switch input:checked+.track{background:linear-gradient(160deg,var(--accent-g1),var(--accent-g2)); border-color:transparent}
.switch input:checked+.track::after{transform:translateX(20px)}
.switch .lab{font-size:13px; font-weight:600; color:var(--tx-2)}
.switch input:checked~.lab{color:var(--tx)}

/* ---------- 徽标 ---------- */
.badge{display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; line-height:1;
  padding:4px 8px; border-radius:7px; letter-spacing:.3px}
.badge.rec{color:#fff; background:linear-gradient(135deg,#ffb020,#f07f13);
  box-shadow:0 4px 10px rgba(255,152,32,.35)}
.badge.off{color:var(--tx-2); background:color-mix(in srgb,var(--tx) 10%,transparent)}
.meta-dot{font-size:11.5px; color:var(--tx-3)}

/* ---------- 弹层 ---------- */
.overlay{position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:20px;
  background:color-mix(in srgb,#070b18 34%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  opacity:0; pointer-events:none; transition:opacity .22s var(--ease)}
.overlay.show{opacity:1; pointer-events:auto}
.modal{position:relative; width:100%; max-width:560px; max-height:min(88vh,860px); overflow:auto;
  border-radius:24px; padding:0;
  background:var(--glass-2); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(34px) saturate(1.7); backdrop-filter:blur(34px) saturate(1.7);
  box-shadow:var(--shadow-2), inset 0 1px 0 color-mix(in srgb,var(--line) 90%,transparent);
  transform:scale(.96) translateY(8px); transition:transform .24s var(--ease); overscroll-behavior:contain}
.overlay.show .modal{transform:none}
.modal-head{position:sticky; top:0; z-index:3; display:flex; align-items:center; gap:10px;
  padding:16px 20px; border-bottom:1px solid var(--line-2);
  background:color-mix(in srgb,var(--glass-3) 68%,transparent);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px)}
.modal-title{font-size:15.5px; font-weight:700; flex:1; display:flex; align-items:center; gap:9px}
.modal-body{padding:20px}
.modal-foot{display:flex; justify-content:flex-end; gap:10px; padding:14px 20px; border-top:1px solid var(--line-2);
  background:color-mix(in srgb,var(--glass-3) 46%,transparent); border-radius:0 0 24px 24px}

/* ---------- Toast ---------- */
.toasts{position:fixed; right:18px; bottom:18px; z-index:120; display:flex; flex-direction:column; gap:10px; max-width:min(360px,calc(100vw - 36px))}
.toast{display:flex; align-items:center; gap:10px; padding:12px 15px; border-radius:14px; font-size:13.5px; font-weight:600;
  background:var(--glass-3); border:1px solid var(--line); color:var(--tx);
  box-shadow:var(--shadow-2); backdrop-filter:blur(20px) saturate(1.6);
  animation:toast-in .28s var(--ease)}
.toast.ok{box-shadow:0 14px 34px color-mix(in srgb,var(--ok) 28%,transparent), var(--shadow-2)}
.toast.ok .tick{color:var(--ok)}
.toast.err{box-shadow:0 14px 34px color-mix(in srgb,var(--bad) 30%,transparent), var(--shadow-2)}
.toast.err .tick{color:var(--bad)}
@keyframes toast-in{from{opacity:0; transform:translateY(12px) scale(.95)}to{opacity:1; transform:none}}
.toast.out{opacity:0; transform:translateX(14px); transition:all .3s var(--ease)}

/* ---------- 空状态 / 骨架 ---------- */
.empty{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:56px 20px; color:var(--tx-3); text-align:center}
.empty .ic{width:44px; height:44px; opacity:.5}
.empty b{color:var(--tx-2); font-size:15px}
.empty span{font-size:12.5px}
.skeleton{position:relative; overflow:hidden; background:color-mix(in srgb,var(--tx) 7%,transparent); border-radius:12px}
.skeleton::after{content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,#fff 18%,transparent),transparent);
  animation:shimmer 1.4s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}

/* ---------- 滚动条 ---------- */
*{scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--tx-3) 45%,transparent) transparent}
::-webkit-scrollbar{width:9px; height:9px}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--tx-3) 45%,transparent); border-radius:6px; border:2px solid transparent; background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ---------- 动效 ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important}
}
.fade-in{animation:fadeIn .4s var(--ease) both}
@keyframes fadeIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.rise{animation:rise .5s var(--ease) both}
@keyframes rise{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}