/* 风格 9 · 贴纸 Sticker Wall
   奶黄底 + 粗黑描边 + 硬投影 + 高饱和多色；圆体粗字。弹簧砸入、抖动、咔哒。 */
html[data-style="sticker"] {
  --cream: #f5ecd8;
  --ink: #17171b;
  --paper: #fffdf6;
  --yellow: #ffd93b;
  --pink: #ff8fb2;
  --blue: #7cc7ff;
  --green: #9ee493;
  --red: #ff5d5d;
  /* 拉丁圆体在前，紧接简体圆体；不要把 Hiragino Maru Gothic（日文圆体）放在中文字体前面——
     它会用日文字形接管大部分汉字，只把它没有的简体字（设、认、这……）漏给下一款字体，
     结果同一行里字形、粗细、基线全不一致。 */
  --round: "Nunito Variable", "MaokenZhuyuanTi", ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Yuanti SC", YouYuan, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
  /* 猫啃珠圆体只有一个字重：不让浏览器合成加粗把它抹糊；有真字重的回落字体不受影响。 */
  font-synthesis-weight: none;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --bd: 3px solid var(--ink);
  --sh: 6px 6px 0 var(--ink);
  --sh-sm: 4px 4px 0 var(--ink);
  color-scheme: light;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--round);
  font-size: 15.5px;
  line-height: 1.55;
  font-weight: 600;
}
html[data-style="sticker"] body {
  background:
    radial-gradient(circle at 12% 8%, rgb(255 217 59 / .25), transparent 34%),
    radial-gradient(circle at 88% 22%, rgb(255 143 178 / .22), transparent 30%),
    radial-gradient(circle at 70% 85%, rgb(124 199 255 / .22), transparent 36%),
    var(--cream);
}
html[data-style="sticker"] ::selection { background: var(--ink); color: var(--yellow); }

.st-wall { max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px) 160px; }

/* ---- 顶栏：贴纸导航 ---- */
.st-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 26px 0; flex-wrap: wrap; }
.st-logo {
  background: var(--ink); color: var(--yellow); text-decoration: none;
  font-size: 19px; font-weight: 800; padding: 10px 20px; border-radius: 16px;
  border: var(--bd); border-color: var(--ink); box-shadow: var(--sh-sm);
  display: inline-block;
}
.st-head nav { display: flex; gap: 12px; flex-wrap: wrap; }
.st-nav {
  text-decoration: none; padding: 9px 18px; border: var(--bd); border-radius: 999px;
  box-shadow: var(--sh-sm); font-weight: 800; font-size: 14px;
  transition: translate .15s ease, box-shadow .15s ease;
}
.s-y { background: var(--yellow); } .s-p { background: var(--pink); } .s-b { background: var(--blue); } .s-g { background: var(--green); } .s-r { background: var(--red); }

/* ---- 换皮条：一排迷你贴纸，当前风格反白 ---- */
.st-strip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 2px 0 22px; }
.st-strip-label { font-size: 12px; font-weight: 800; letter-spacing: .08em; flex: none; }
.st-stk {
  display: inline-flex; align-items: baseline; gap: 5px; flex: none;
  padding: 5px 13px; border: var(--bd); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink);
  text-decoration: none; color: var(--ink); font-weight: 800; font-size: 12.5px;
  transition: translate .15s ease, box-shadow .15s ease;
}
/* 贴纸上的字一律用满墨：半透明墨在蓝紫色贴纸上会掉到 3–4:1。 */
.st-stk b { font-family: var(--mono); font-size: 10px; }
.st-stk:hover { translate: -2px -2px; box-shadow: 5px 5px 0 var(--ink); }
.st-stk:active { translate: 2px 2px; box-shadow: 1px 1px 0 var(--ink); }
.st-stk[aria-current="page"] { background: var(--ink); color: var(--cream); translate: -2px -2px; box-shadow: 5px 5px 0 rgb(23 23 27 / .35); }
.st-nav:hover { translate: -2px -2px; box-shadow: 6px 6px 0 var(--ink); }
.st-nav:active { translate: 3px 3px; box-shadow: 1px 1px 0 var(--ink); }

/* ---- Hero 拼贴 ---- */
.st-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 40px; padding: clamp(24px, 5vh, 60px) 0 40px; align-items: start; }
.st-hero-l { min-width: 0; }
.st-minis { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.st-title { margin: 0 0 22px; line-height: .95; }
.st-title span {
  display: inline-block; background: var(--yellow); border: var(--bd); border-radius: 22px;
  box-shadow: var(--sh); padding: 6px 26px 10px; margin: 0 12px 12px 0;
  font-size: clamp(2.6rem, 1.6rem + 4.5vw, 5rem); font-weight: 800; letter-spacing: -.03em;
}
.st-title span:nth-child(2) { background: var(--pink); rotate: 1.6deg; }
.st-title span:nth-child(3) { background: var(--blue); rotate: -1.2deg; }
.st-sub {
  display: inline-block; background: var(--paper); border: var(--bd); border-radius: 18px; box-shadow: var(--sh-sm);
  padding: 14px 20px; font-size: 16px; margin: 0 0 26px;
}
.st-minis { display: flex; gap: 14px; flex-wrap: wrap; }
.st-mini {
  display: flex; align-items: baseline; gap: 6px; border: var(--bd); border-radius: 16px; box-shadow: var(--sh-sm);
  padding: 8px 16px; font-size: 13px; font-weight: 800;
}
.st-mini b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }

.st-board { position: relative; background: var(--paper); border: var(--bd); border-radius: 20px; box-shadow: var(--sh); padding: 26px 22px 18px; align-self: start; font-size: 13.5px; font-weight: 500; }
.st-tape { position: absolute; top: -14px; left: 50%; translate: -50% 0; rotate: -3deg; width: 110px; height: 26px; background: rgb(124 199 255 / .75); border: 2px solid rgb(23 23 27 / .25); border-radius: 3px; }
.st-board h2 { margin: 0 0 8px; font-size: 17px; font-weight: 800; }
.st-board p { margin: 0 0 10px; }
.st-board dl { margin: 0 0 10px; border-top: 2px dashed rgb(23 23 27 / .3); padding-top: 8px; }
.st-board dl div { display: flex; gap: 10px; padding: 2px 0; }
.st-board dt { flex: 0 0 3em; color: rgb(23 23 27 / .7); }   /* 6.6:1 on --paper */
.st-board dd { margin: 0; font-weight: 700; }
.st-risk { border-top: 2px dashed rgb(23 23 27 / .3); padding-top: 10px; }

/* ---- 工具条 ---- */
.st-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 12px 0 26px; position: sticky; top: 10px; z-index: 20; }
#st-q { flex: 1 1 260px; border: var(--bd); border-radius: 999px; padding: 12px 22px; font-weight: 700; background: var(--paper); color: var(--ink); box-shadow: var(--sh-sm); }
#st-q::placeholder { color: rgb(23 23 27 / .4); }
#st-q:focus { outline: none; translate: -2px -2px; box-shadow: 6px 6px 0 var(--ink); }
.st-tools select, #st-reset {
  border: var(--bd); border-radius: 999px; padding: 10px 16px; font-weight: 800; font-size: 13.5px;
  background: var(--paper); color: var(--ink); box-shadow: var(--sh-sm);
}
#st-reset { background: var(--red); }
#st-reset:hover { translate: -2px -2px; box-shadow: 6px 6px 0 var(--ink); }
#st-reset:active { translate: 3px 3px; box-shadow: 1px 1px 0 var(--ink); }
.st-hint { font-weight: 800; font-size: 15px; margin: 0 0 14px; }
.st-hint b { background: var(--yellow); border: 2px solid var(--ink); border-radius: 8px; padding: 0 8px; }

/* ---- 域贴纸墙 ---- */
.st-domains { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.st-domain {
  border: var(--bd); border-radius: 22px; box-shadow: var(--sh); text-align: left;
  background: hsl(var(--h) 75% 68%); color: var(--ink);
  padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 4px; min-height: 150px;
}
.st-domain:hover { translate: -3px -3px; box-shadow: 9px 9px 0 var(--ink); }
.st-domain:active { translate: 4px 4px; box-shadow: 2px 2px 0 var(--ink); }
.st-dtop b { font-size: 38px; font-weight: 800; letter-spacing: -.03em; line-height: 1; text-shadow: 2px 2px 0 rgb(255 255 255 / .55); }
.st-dname { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.st-dblurb { font-size: 12px; font-weight: 600; line-height: 1.45; }   /* 满墨：最暗的蓝紫贴纸上 4.9:1 */
.st-dshots { display: flex; gap: 6px; margin-top: auto; padding-top: 8px; }
.st-dshots img { width: 50%; aspect-ratio: 8/5; object-fit: cover; border: 2px solid var(--ink); border-radius: 8px; }

/* ---- 域头 / 小节 ---- */
.st-dhead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 8px; }
.st-dhead h3 {
  margin: 0; font-size: 26px; font-weight: 800; background: hsl(var(--h) 75% 68%);
  border: var(--bd); border-radius: 16px; box-shadow: var(--sh-sm); padding: 6px 18px; rotate: -1deg;
}
.st-dmeta { font-size: 13px; font-weight: 700; opacity: .7; }
.st-back { border: var(--bd); background: var(--paper); border-radius: 999px; padding: 8px 16px; font-weight: 800; box-shadow: var(--sh-sm); }
.st-back:hover { translate: -2px -2px; box-shadow: 6px 6px 0 var(--ink); }
.st-sec { margin: 26px 0; }
.st-sec > header {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  background: var(--ink); color: var(--cream); border: var(--bd); border-radius: 14px;
  box-shadow: var(--sh-sm); padding: 10px 18px; margin-bottom: 14px;
}
.st-sec > header h4 { margin: 0; font-size: 18px; font-weight: 800; }
.st-sec > header span { background: var(--yellow); color: var(--ink); border-radius: 999px; border: 2px solid var(--cream); padding: 0 10px; font-weight: 800; font-size: 13px; }
.st-sec > header p { margin: 0 0 0 auto; font-size: 12.5px; opacity: .75; font-weight: 500; }

/* ---- 条目贴纸行 ---- */
.st-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.st-row a {
  display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  background: var(--paper); border: var(--bd); border-radius: 18px; box-shadow: var(--sh-sm);
  padding: 10px 14px; text-decoration: none;
  transition: translate .15s ease, box-shadow .15s ease;
}
.st-row a:hover { translate: -3px -3px; box-shadow: 8px 8px 0 var(--ink); }
.st-row a:active { translate: 3px 3px; box-shadow: 1px 1px 0 var(--ink); }
.st-thumb { width: 120px; aspect-ratio: 8/5; object-fit: cover; border: 2px solid var(--ink); border-radius: 10px; }
.st-noshot {
  width: 120px; aspect-ratio: 8/5; display: grid; place-items: center;
  background: hsl(var(--h) 75% 68%); border: 2px solid var(--ink); border-radius: 10px;
  font-size: 34px; font-weight: 800;
}
.st-rname { font-weight: 800; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.st-row a:hover .st-rname { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.st-lang { font-style: normal; font-size: 11px; border: 2px solid var(--ink); border-radius: 999px; padding: 0 7px; background: var(--green); }
.st-rdesc { display: block; font-size: 13.5px; font-weight: 500; color: rgb(23 23 27 / .75); margin-top: 2px; }
.st-rmeta { display: block; font-size: 11.5px; color: rgb(23 23 27 / .68); margin-top: 3px; font-weight: 600; }   /* 6.1:1 on --paper; was .5 = 3.4:1 */
.st-badge {
  width: 44px; height: 44px; border-radius: 50%; border: var(--bd); box-shadow: 3px 3px 0 var(--ink);
  display: grid; place-items: center; font-weight: 800; font-size: 17px; rotate: -6deg; flex: none;
}
.s-tS { background: var(--red); color: #fff; }
.s-tA { background: var(--yellow); }
.s-tB { background: var(--paper); }

/* ---- 套件 / 怎么用 ---- */
.st-suite { margin-top: 60px; }
.st-h2 { display: inline-block; font-size: 30px; font-weight: 800; margin: 0 0 8px; background: var(--green); border: var(--bd); border-radius: 18px; box-shadow: var(--sh); padding: 8px 22px; }
.st-suite-lede { font-weight: 600; opacity: .75; margin: 6px 0 18px; }
.st-suite ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.st-skill { background: var(--paper); border: var(--bd); border-radius: 16px; box-shadow: var(--sh-sm); padding: 14px 18px; }
.st-skill a { text-decoration: none; }
.st-skill code { font-family: var(--mono); font-weight: 800; font-size: 13.5px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 8px; padding: 2px 8px; }
.st-skill a:hover code { background: var(--pink); }
.st-skill p { margin: 8px 0 0; font-size: 13px; font-weight: 500; color: rgb(23 23 27 / .75); }

.st-how { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 28px; margin-top: 60px; align-items: start; }
.st-how h2 { font-size: 18px; font-weight: 800; margin: 0 0 14px; }
.st-install pre { background: var(--ink); color: var(--green); border: var(--bd); border-radius: 16px; box-shadow: var(--sh); padding: 18px; font-family: var(--mono); font-size: 12px; line-height: 1.8; overflow-x: auto; margin: 0; }
.st-bubble { background: var(--blue); border: var(--bd); border-radius: 16px 16px 16px 4px; box-shadow: var(--sh-sm); padding: 12px 16px; font-size: 13.5px; font-weight: 600; margin: 0 0 12px; }
.st-mrow { background: var(--paper); border: var(--bd); border-radius: 14px; box-shadow: var(--sh-sm); padding: 12px 16px; margin-bottom: 12px; }
.st-mrow b { font-size: 14px; }
.st-mrow p { margin: 4px 0 0; font-size: 12.5px; font-weight: 500; color: rgb(23 23 27 / .7); }

.st-empty { text-align: center; padding: 40px; background: var(--paper); border: var(--bd); border-radius: 20px; box-shadow: var(--sh); }
.st-empty p { font-size: 20px; font-weight: 800; }
.st-empty button { border: var(--bd); border-radius: 999px; background: var(--yellow); padding: 10px 22px; font-weight: 800; box-shadow: var(--sh-sm); }
.st-foot { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 60px; font-size: 12.5px; font-weight: 600; opacity: .65; }

/* ---- 动效 ---- */
.st-await { opacity: 0; }
/* 砸入：每一帧都写全 opacity，并且只动 rotate 属性、不在 transform 里再转一次——
   否则 100% 帧会插值回 .st-await 的 opacity:0，落地后再跳回来，看起来像播了两遍；
   rotate 叠加 transform 也会让贴纸落在两倍角度上再猛地弹回。 */
.st-slam { animation: st-slam .55s cubic-bezier(.2, 1.4, .35, 1) both; }
@keyframes st-slam {
  0% { opacity: 0; transform: translateY(-46px) scale(1.12); rotate: calc(var(--r, 0deg) * 3); }
  60% { opacity: 1; transform: translateY(6px) scale(.97); rotate: calc(var(--r, 0deg) * -1.2); }
  100% { opacity: 1; transform: translateY(0) scale(1); rotate: var(--r, 0deg); }
}
.st-pop { rotate: var(--r, 0deg); }
.st-wig { animation: st-wig .45s ease !important; animation-delay: 0s !important; }
@keyframes st-wig {
  0%, 100% { rotate: var(--r, 0deg); }
  25% { rotate: calc(var(--r, 0deg) + 2.4deg); }
  55% { rotate: calc(var(--r, 0deg) - 1.8deg); }
  80% { rotate: calc(var(--r, 0deg) + 1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .st-await { opacity: 1; }
  .st-slam, .st-wig { animation: none !important; }
  .st-row a, .st-nav, .st-domain { transition: none; }
}

/* ---- 响应式 ---- */
@media (max-width: 1080px) {
  .st-hero { grid-template-columns: 1fr; }
  .st-board { max-width: 480px; }
  .st-domains { grid-template-columns: repeat(3, 1fr); }
  .st-how { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .st-domains { grid-template-columns: repeat(2, 1fr); }
  .st-suite ol { grid-template-columns: 1fr; }
  .st-row a { grid-template-columns: 84px minmax(0, 1fr); }
  .st-thumb, .st-noshot { width: 84px; }
  .st-badge { position: absolute; margin-left: -58px; margin-top: -8px; width: 34px; height: 34px; font-size: 14px; }
  .st-row { position: relative; }
  .st-row a { position: relative; }
}

/* Entrance overshoot: .st-pop scales past 1 for a moment, and with a wider fallback face the subtitle then reaches
   past the right edge of a 390 px screen. A phone sizes its layout viewport from that moment and keeps the page
   15 px too wide. clip, not hidden, so the sticky strip keeps working. */
html[data-style="sticker"] #app { overflow-x: clip; }