/* ============================================================
   PIXELFANTASIA · base.css —— 设计 token / 基础组件 / 站点外壳
   暗色唯一皮肤。所有页面共用，禁止页面级覆盖 token。
   ============================================================ */

:root{
  /* 底色 */
  --bg:#0B0E17; --bg-deep:#070911; --panel:#141A29; --panel-2:#1B2334;
  --panel-sunken:#0F1420; --panel-disabled:#10141F;
  /* 描边 */
  --line:#232C42; --line-strong:#354263; --line-hi:#4C5C80;
  /* 文本 */
  --text:#E8EEFC; --text-muted:#98A4BE; --text-faint:#7E8AA8; --text-ink:#061A12;
  /* 强调 */
  --mint:#6CFFB5; --mint-hover:#8FFFC7; --mint-active:#45E39A; --mint-shade:#2FA96E;
  --mint-dim:rgba(108,255,181,.14); --mint-line:rgba(108,255,181,.45);
  --rose:#FF6B9D; --rose-hover:#FF8AB2; --rose-active:#E24F81; --rose-dim:rgba(255,107,157,.14);
  --gold:#FFD166; --gold-hover:#FFDD8C; --gold-active:#E6B54A; --gold-dim:rgba(255,209,102,.14);
  --info:#6BA8FF; --info-dim:rgba(107,168,255,.14);
  --ok:#4CE39A; --warn:#FFD166; --danger:#FF6B9D;
  /* 层与光 */
  --scrim:rgba(7,9,17,.78); --veil:rgba(11,14,23,.56);
  --film:rgba(232,238,252,.06); --film-2:rgba(232,238,252,.10);
  --focus:rgba(108,255,181,.45);
  /* 可交互控件边界（3.17:1，达标 1.4.11；--line 仅作装饰 1.3:1） */
  --line-ui:#5A6890; --focus-ring:#8FFFC7; --focus-ring-ink:#070911;
  --st-saving:#6BA8FF; --st-saved:#6CFFB5; --st-paused:#FFD166; --st-error:#FF6B9D;
  --chip-bg:#1B2334; --chip-line:#354263; --chip-text:#8F9BB5;
  --gen-skeleton:#4C5C80; --gen-body:#6CFFB5; --gen-high:#C9FFE4;
  /* 像素底纹 */
  --checker-a:#161C2B; --checker-b:#1B2233; --grid:rgba(232,238,252,.06);
  --grid-major:rgba(232,238,252,.12); --pixel-empty:#202838; --scan:rgba(0,0,0,.16);
  /* 字体 */
  --font-sans:-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",system-ui,sans-serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,"Liberation Mono","Courier New",monospace;
  /* 间距 */
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:24px; --sp6:32px; --sp7:48px; --sp8:64px; --sp9:96px; --sp10:128px;
  /* 圆角 */
  --r0:0; --r1:2px; --r2:4px;
  /* 尺寸 */
  --maxw:1440px; --maxw-content:1180px; --maxw-read:720px;
  --gutter:clamp(16px,3.2vw,40px);
  --topbar-h:56px; --nav-h:72px;
  /* 阴影（零模糊） */
  --sh-1:0 1px 0 #070911; --sh-2:0 2px 0 #070911; --sh-4:0 4px 0 rgba(7,9,17,.5);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-sans); font-size:15px; line-height:1.7;
  letter-spacing:.01em; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
img,canvas,svg{display:block;max-width:100%}
canvas.pixel{image-rendering:pixelated;image-rendering:crisp-edges}
::selection{background:var(--mint);color:var(--text-ink)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;box-shadow:0 0 0 4px var(--bg-deep)}
/* 滚动条 */
*{scrollbar-width:thin;scrollbar-color:var(--line-hi) transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--line-hi);border:2px solid var(--bg)}

/* ---------- 排版 ---------- */
.h1{font-size:clamp(26px,3.2vw,44px);font-weight:700;line-height:1.08;letter-spacing:-.01em}
.h2{font-size:clamp(20px,2vw,28px);font-weight:700;line-height:1.15;letter-spacing:-.005em}
.h3{font-size:16px;font-weight:600;line-height:1.3;letter-spacing:.01em}
.lead{font-size:16px;line-height:1.75;color:var(--text-muted);max-width:var(--maxw-read)}
.muted{color:var(--text-muted)}
.faint{color:var(--text-faint)}
.mono{font-family:var(--font-mono);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.eyebrow{
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  line-height:1;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);
}
.tag{
  display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  color:var(--text-muted);background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r1);
}
.tag--mint{color:var(--mint);border-color:var(--mint-line);background:var(--mint-dim)}
.tag--gold{color:var(--gold);border-color:rgba(255,209,102,.45);background:var(--gold-dim)}
.tag--rose{color:var(--rose);border-color:rgba(255,107,157,.45);background:var(--rose-dim)}
.kbd{
  display:inline-block;min-width:20px;padding:1px 5px;text-align:center;
  font-family:var(--font-mono);font-size:11px;line-height:16px;color:var(--text-muted);
  background:var(--panel-sunken);border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:var(--r1);
}

/* ---------- 布局 ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--sp10) 0}
.section--tight{padding:var(--sp9) 0}
.row{display:flex;align-items:center;gap:var(--sp3)}
.row--between{justify-content:space-between}
.row--wrap{flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:var(--sp3)}
.grow{flex:1 1 auto;min-width:0}
.hr{height:1px;background:var(--line);border:0;margin:0}

/* ---------- 站点顶栏 ---------- */
.topbar{
  position:sticky;top:0;z-index:10;height:var(--nav-h);
  display:flex;align-items:center;
  background:rgba(11,14,23,.92);border-bottom:1px solid var(--line);
}
.topbar__in{display:flex;align-items:center;gap:var(--sp6);width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand__mark{display:flex;align-items:center;flex-shrink:0;height:44px}
.brand__mark img{height:100%;width:auto;display:block;image-rendering:pixelated}
.brand__mark svg{width:16px;height:16px;color:var(--mint)}
.brand__txt{font-family:var(--font-mono);font-size:15px;font-weight:700;letter-spacing:.14em}
.brand__sub{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--text-faint);margin-left:2px}
.nav{display:flex;align-items:center;gap:var(--sp1);margin-left:auto}
.nav__link{
  padding:8px 12px;font-size:13px;color:var(--text-muted);border-radius:var(--r1);
  transition:background-color 90ms steps(2),color 90ms steps(2);
}
.nav__link:hover{background:var(--film);color:var(--text)}
.nav__link[aria-current="page"]{color:var(--text);box-shadow:inset 0 -2px 0 var(--mint)}
.topbar__actions{display:flex;align-items:center;gap:var(--sp2)}
.burger{display:none}

/* ---------- 按钮 ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding:0 20px;border-radius:var(--r1);border:1px solid var(--line-strong);
  background:transparent;color:var(--text);
  font-size:13px;font-weight:600;letter-spacing:.02em;white-space:nowrap;
  transition:background-color 90ms steps(2),border-color 90ms steps(2),transform 140ms cubic-bezier(.2,.8,.2,1),box-shadow 140ms;
}
.btn:hover{background:var(--film);border-color:var(--line-hi)}
.btn:active{background:var(--film-2);transform:translateY(1px)}
.btn:disabled{background:var(--panel-disabled);color:var(--text-faint);border-color:var(--line);transform:none;box-shadow:none;cursor:not-allowed}
.btn--primary{
  position:relative;z-index:0;background:none;color:var(--text-ink);border-color:transparent;
  box-shadow:0 2px 0 var(--mint-shade);
}
.btn--primary::before{
  content:"";position:absolute;inset:-1px;z-index:-1;background:var(--mint);
  border:1px solid var(--mint-active);
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,0 100%);
}
.btn--primary:hover{background:none;border-color:transparent;transform:translateY(-1px);box-shadow:0 3px 0 var(--mint-shade)}
.btn--primary:hover::before{background:var(--mint-hover)}
.btn--primary:active{background:none;transform:translateY(1px);box-shadow:0 0 0 var(--mint-shade)}
.btn--primary:active::before{background:var(--mint-active)}
.btn--primary:disabled{background:none;color:var(--text-faint);border-color:transparent;box-shadow:none}
.btn--primary:disabled::before{background:var(--panel-disabled);border-color:var(--line)}
.btn--sm{height:32px;padding:0 12px;font-size:12px}
.btn--lg{height:48px;padding:0 24px;font-size:14px}
.btn--block{width:100%}
.btn__ico{width:16px;height:16px;flex:0 0 auto}
.btn__ico svg{width:16px;height:16px}

.icon-btn{
  display:inline-grid;place-items:center;width:32px;height:32px;padding:0;
  border:1px solid transparent;border-radius:var(--r1);color:var(--text-muted);
  transition:background-color 90ms steps(2),color 90ms steps(2);
}
.icon-btn:hover{background:var(--film);color:var(--text)}
.icon-btn:active{background:var(--film-2)}
.icon-btn:disabled{opacity:.35;cursor:not-allowed;background:none}
.icon-btn svg{width:20px;height:20px}
.icon-btn--sm{width:28px;height:28px}
.icon-btn--sm svg{width:16px;height:16px}
.icon-btn--lg{width:40px;height:40px}
.icon-btn.is-on{background:var(--mint-dim);color:var(--mint);box-shadow:inset 0 0 0 1px var(--mint-line)}

/* ---------- 卡片 / 面板 ---------- */
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r1);padding:var(--sp5);
  transition:border-color 140ms,transform 140ms cubic-bezier(.2,.8,.2,1),box-shadow 140ms;
}
.card--hover:hover{border-color:#3A4763;transform:translateY(-2px);box-shadow:var(--sh-4)}
.card__meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--text-faint);text-transform:uppercase}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r1);display:flex;flex-direction:column;min-height:0}
.panel__hd{
  height:40px;flex:0 0 40px;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:0 12px;border-bottom:1px solid var(--line);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);
}
.panel__body{padding:12px;overflow:auto;min-height:0}

/* ---------- 标签页 ---------- */
.tabs{display:flex;align-items:stretch;height:36px;border-bottom:1px solid var(--line);flex:0 0 36px}
.tab{
  padding:0 12px;display:inline-flex;align-items:center;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-muted);border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color 90ms steps(2),border-color 90ms steps(2);
}
.tab:hover{color:var(--text)}
.tab[aria-selected="true"]{color:var(--text);border-bottom-color:var(--mint)}
.tab:disabled{opacity:.4;cursor:not-allowed}

/* ---------- 表单 ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field__lb{font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--text-muted);font-family:var(--font-mono);text-transform:uppercase}
.input{
  height:36px;padding:0 10px;width:100%;
  background:var(--panel-sunken);border:1px solid var(--line);border-radius:var(--r1);
  color:var(--text);font-size:13px;outline:none;
  transition:border-color 90ms steps(2),box-shadow 90ms steps(2);
}
.input::placeholder{color:var(--text-faint)}
.input:focus{border-color:var(--mint);box-shadow:0 0 0 2px var(--focus)}
.input:disabled{background:var(--panel-disabled);color:var(--text-faint)}
textarea.input{height:auto;padding:8px 10px;resize:vertical;line-height:1.6;font-family:var(--font-sans)}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);background-position:calc(100% - 14px) 15px,calc(100% - 9px) 15px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:28px}
.input--error{border-color:var(--rose)}
.field__err{font-family:var(--font-mono);font-size:11px;color:var(--rose)}
.range{-webkit-appearance:none;appearance:none;width:100%;height:18px;background:transparent;cursor:pointer}
.range::-webkit-slider-runnable-track{height:4px;background:var(--line);border-radius:0}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:18px;margin-top:-7px;background:var(--text);border:1px solid var(--bg-deep);border-radius:0}
.range::-moz-range-track{height:4px;background:var(--line)}
.range::-moz-range-thumb{width:12px;height:18px;background:var(--text);border:1px solid var(--bg-deep);border-radius:0}
.range:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.switch{position:relative;width:36px;height:20px;border-radius:var(--r1);background:var(--line);border:1px solid transparent;transition:background-color 90ms steps(2);flex:0 0 auto}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;background:var(--text);transition:transform 120ms steps(4)}
.switch[aria-checked="true"]{background:var(--mint)}
.switch[aria-checked="true"]::after{transform:translateX(16px);background:var(--text-ink)}

/* ---------- 提示 / 徽章 ---------- */
.note{
  border:1px solid var(--line);border-left-width:4px;border-radius:var(--r1);
  background:var(--panel);padding:12px 16px;
  font-family:var(--font-mono);font-size:12px;line-height:1.6;color:var(--text-muted);
}
.note--mint{border-left-color:var(--mint)} .note--gold{border-left-color:var(--gold)}
.note--rose{border-left-color:var(--rose)} .note--info{border-left-color:var(--info)}
.badge{display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 6px;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;border:1px solid var(--line);border-radius:var(--r1);color:var(--text-muted)}
.dot{width:6px;height:6px;background:var(--mint);flex:0 0 auto}

/* ---------- 像素底纹工具类 ---------- */
.checker{
  background-color:var(--checker-b);
  background-image:
    linear-gradient(45deg,var(--checker-a) 25%,transparent 25%,transparent 75%,var(--checker-a) 75%),
    linear-gradient(45deg,var(--checker-a) 25%,transparent 25%,transparent 75%,var(--checker-a) 75%);
  background-size:16px 16px;background-position:0 0,8px 8px;
}
.scanlines{position:relative}
.scanlines::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(to bottom,var(--scan) 0 1px,transparent 1px 4px);
}
.dither{
  background-image:radial-gradient(rgba(232,238,252,.045) 1px,transparent 1px),
                   radial-gradient(rgba(232,238,252,.03) 1px,transparent 1px);
  background-size:4px 4px,4px 4px;background-position:0 0,2px 2px;
}
.corner-cut{clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}

/* ---------- 模态 ---------- */
.modal{
  position:fixed;inset:0;z-index:40;display:none;place-items:center;padding:16px;
  background:rgba(5,7,13,.62);
  -webkit-backdrop-filter:blur(7px) saturate(120%);
  backdrop-filter:blur(7px) saturate(120%);
}
.modal[open],.modal.is-open{display:grid;animation:scrimIn 150ms ease-out}
@keyframes scrimIn{from{opacity:0}to{opacity:1}}
.modal__panel{
  position:relative;width:clamp(360px,92vw,560px);max-height:min(88vh,720px);display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--panel-2) 0%,var(--panel) 42%,var(--panel) 100%);
  border:1px solid var(--line-strong);
  box-shadow:0 24px 70px rgba(0,0,0,.62),0 1px 0 rgba(232,238,252,.07) inset,0 0 0 1px rgba(108,255,181,.06) inset;
  animation:modalIn 240ms cubic-bezier(.2,.8,.2,1);
}
.modal__panel::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--mint),transparent);opacity:.55;
}
@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.modal__hd{
  height:52px;flex:0 0 52px;display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(108,255,181,.07),transparent);
}
.modal__hd h2,.modal__hd .modal__tt{font-size:15px;font-weight:650;letter-spacing:.01em}
.modal__bd{padding:18px;overflow:auto}
.modal__ft{height:68px;flex:0 0 68px;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:0 18px;border-top:1px solid var(--line)}

/* ---------- 确认框（替代浏览器原生 confirm/alert） ---------- */
.dlg{
  position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px;
  background:rgba(5,7,13,.7);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  animation:scrimIn 130ms ease-out;
}
.dlg__panel{
  position:relative;width:clamp(300px,92vw,420px);
  background:linear-gradient(180deg,var(--panel-2),var(--panel) 60%);
  border:1px solid var(--line-strong);
  box-shadow:0 26px 70px rgba(0,0,0,.65),0 1px 0 rgba(232,238,252,.08) inset;
  animation:dlgIn 210ms cubic-bezier(.2,.85,.25,1);
}
@keyframes dlgIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.dlg__bar{height:3px;background:repeating-linear-gradient(90deg,var(--mint) 0 6px,transparent 6px 12px);opacity:.65}
.dlg--danger .dlg__bar{background:repeating-linear-gradient(90deg,var(--rose) 0 6px,transparent 6px 12px)}
.dlg__in{padding:20px 20px 6px}
.dlg__kicker{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:8px;display:flex;align-items:center;gap:6px;
}
.dlg__kicker::before{content:"";width:6px;height:6px;background:var(--mint)}
.dlg--danger .dlg__kicker::before{background:var(--rose)}
.dlg__tt{font-size:16px;font-weight:650;line-height:1.4;margin-bottom:8px}
.dlg__bd{font-size:13px;line-height:1.75;color:var(--text-muted)}
.dlg__ft{display:flex;gap:8px;justify-content:flex-end;padding:16px 20px 20px}
.dlg__ft .btn{min-width:84px;justify-content:center}

/* ---------- toast ---------- */
.toast-wrap{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{
  display:flex;align-items:center;gap:8px;max-width:92vw;
  background:var(--panel-2);border:1px solid var(--line-strong);border-left:4px solid var(--mint);
  border-radius:var(--r1);padding:10px 14px;box-shadow:0 4px 0 rgba(7,9,17,.5);
  font-family:var(--font-mono);font-size:12px;color:var(--text);
  animation:toastIn 140ms steps(4);
}
.toast--err{border-left-color:var(--rose)}
.toast--warn{border-left-color:var(--gold)}
@keyframes toastIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- 页脚 ---------- */
.footer{border-top:1px solid var(--line);background:var(--bg-deep);padding:var(--sp8) 0 var(--sp6)}
.footer__grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:var(--sp6)}
.footer__tt{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);margin-bottom:12px}
.footer__lk{display:block;font-size:13px;color:var(--text-muted);padding:4px 0}
.footer__lk:hover{color:var(--mint)}
.footer__btm{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:var(--sp7);padding-top:var(--sp4);border-top:1px solid var(--line);font-family:var(--font-mono);font-size:11px;color:var(--text-faint)}

/* ---------- 入场 ---------- */
.reveal{opacity:0;transform:translateY(12px);transition:opacity 320ms cubic-bezier(.2,.8,.2,1),transform 320ms cubic-bezier(.2,.8,.2,1)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- 响应式外壳 ---------- */
@media (max-width:1023px){
  .topbar{height:64px}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  :root{--nav-h:60px}
  .section{padding:var(--sp8) 0}
  .nav{
    position:fixed;left:0;right:0;top:60px;z-index:20;flex-direction:column;align-items:stretch;gap:2px;
    padding:8px var(--gutter) 16px;background:var(--bg-deep);border-bottom:1px solid var(--line);
    display:none;
  }
  .nav.is-open{display:flex}
  .nav__link{padding:12px;font-size:15px}
  .burger{display:inline-grid}
  .footer__grid{grid-template-columns:1fr;gap:var(--sp5)}
  .btn{height:44px}
  .btn--sm{height:36px}
  .btn--block-sm{width:100%}
}

/* ---------- 修正层（放在最后，覆盖同文件前段的同类选择器） ---------- */
/* .icon-btn 在本文件后段声明 display:inline-grid，会覆盖 .burger{display:none} */
.icon-btn.burger{display:none!important}
@media (max-width:767px){ .icon-btn.burger{display:inline-grid!important} }

/* 入场兜底：即便 IO 未触发（打印、截图、脚本异常），内容也必须可见 */
.reveal{animation:revealSafe 1ms 1400ms forwards}
.reveal.is-in{animation:none}
@keyframes revealSafe{to{opacity:1;transform:none}}

/* ============================================================
   图标：<svg class="i"><use href="#id"></use></svg>
   放在 base 里，别只写在 studio.css —— 拆解页/详解页没引 studio.css，
   SVG 默认 fill:black，剪刀的两个圆环就变成两个实心大黑点。
   ============================================================ */
.i{
  width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;flex:0 0 auto;
}