/* 小刀官网：和管理器同一套二次元风格（樱花粉配色、寒蝉全圆体 + 站酷快乐体、小刀酱、看板娘）。颜色都用下面的变量。 */
:root {
  --accent: #ee5b9c;
  --accent-strong: #c93a7c;
  --accent-soft: #ffe8f2;
  --accent-light: #ffaed0;
  --accent-2: #a77af4;
  --glow: 238 91 156;
  --grad: linear-gradient(135deg, #f2629f 0%, #a979f2 100%);
  --grad-hover: linear-gradient(135deg, #e44b90 0%, #9563ea 100%);
  --grad-night: linear-gradient(160deg, #2b2160 0%, #4a2f86 55%, #7a3f9e 100%);
  --text: #3b2943;
  --text-2: #5b4566;
  --muted: #7e6889;
  --ink: #4a2c5a;
  --line: #f1d9e7;
  --card: #ffffff;
  --tint: #fff7fb;
  --bg: #fdf3f8;
  --blob-1: #ffd5ea;
  --blob-2: #e8dbff;
  --blob-3: #d8ebff;
  --ok: #2fc48a;
  --gold: #f2b134;
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 1px 2px rgb(var(--glow) / 0.06), 0 10px 30px rgb(var(--glow) / 0.12);
  --shadow-pop: 0 18px 44px rgb(var(--glow) / 0.24), 0 2px 8px rgb(var(--glow) / 0.1);
  --sparkle-tile: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><path d='M40 36Q40 46 50 46Q40 46 40 56Q40 46 30 46Q40 46 40 36ZM168 24Q168 30 174 30Q168 30 168 36Q168 30 162 30Q168 30 168 24ZM122 115Q122 128 135 128Q122 128 122 141Q122 128 109 128Q122 128 122 115ZM196 171Q196 178 203 178Q196 178 196 185Q196 178 189 178Q196 178 196 171ZM54 171Q54 176 59 176Q54 176 54 181Q54 176 49 176Q54 176 54 171Z'/><circle cx='96' cy='62' r='2.2'/><circle cx='24' cy='120' r='2.6'/><circle cx='184' cy='104' r='1.8'/><circle cx='150' cy='206' r='2.4'/><circle cx='12' cy='204' r='1.6'/><circle cx='210' cy='70' r='2'/></svg>");
  --star: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  --font-body: '寒蝉全圆体', 'Microsoft YaHei UI', 'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', system-ui, sans-serif;
  --font-title: 'ZCOOL KuaiLe', var(--font-body);
  --wrap: 1160px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}
/* Pastel clouds behind everything, and the sparkles over them. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(42vw 42vw at 8% 6%, var(--blob-1), transparent 70%),
    radial-gradient(38vw 38vw at 96% 18%, var(--blob-2), transparent 70%),
    radial-gradient(46vw 46vw at 70% 96%, var(--blob-3), transparent 70%),
    var(--bg);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--accent-light);
  opacity: 0.35;
  -webkit-mask: var(--sparkle-tile) repeat;
  mask: var(--sparkle-tile) repeat;
  pointer-events: none;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-strong); }
h1, h2, h3 { font-family: var(--font-title); font-weight: 400; line-height: 1.25; margin: 0; color: var(--ink); }
p { margin: 0; }
.wrap { width: min(var(--wrap), 100% - 32px); margin: 0 auto; }
.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.mascot { overflow: visible; }

/* Keyboard focus shows; the skip link appears when tabbed to. */
:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; border-radius: 10px; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; text-decoration: none; transition: top 0.2s; }
.skip-link:focus { top: 12px; }

/* Buttons: pills, the main one in the palette's gradient. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 26px;
  border-radius: 999px;
  border: 2px solid var(--line);
  background: rgb(255 255 255 / 0.85);
  color: var(--accent-strong);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-primary { border: 0; background: var(--grad); color: #fff; box-shadow: 0 8px 22px rgb(var(--glow) / 0.35); }
.btn-primary:hover { background: var(--grad-hover); box-shadow: 0 12px 28px rgb(var(--glow) / 0.42); }
.btn-small { min-height: 38px; padding: 0 18px; font-size: 14px; }
.btn .icon { font-size: 18px; }

/* Header. */
.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgb(255 255 255 / 0.72);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgb(255 255 255 / 0.8);
  box-shadow: 0 6px 24px rgb(var(--glow) / 0.08);
}
.head-row { display: flex; align-items: center; gap: 18px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-logo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.brand-name { font-family: var(--font-title); font-size: 22px; line-height: 1; }
.brand-name small { display: block; margin-top: 4px; font-family: var(--font-body); font-size: 12px; color: var(--muted); letter-spacing: 0.08em; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a { padding: 8px 14px; border-radius: 999px; color: var(--text-2); text-decoration: none; font-weight: 700; font-size: 15px; transition: background 0.15s, color 0.15s; }
.nav a:hover, .nav a.active { background: var(--accent-soft); color: var(--accent-strong); }
.nav-simple { display: flex; }
.nav .btn { margin-left: 8px; color: #fff; }
.menu-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; border-radius: 14px; background: var(--accent-soft); color: var(--accent-strong); font-size: 22px; cursor: pointer; }

/* Hero. */
.hero { position: relative; padding: 64px 0 40px; }
.hero-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 40px; align-items: center; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.8);
  border: 1px solid var(--line);
  color: var(--accent-strong);
  font-weight: 700;
  font-size: 14px;
  box-shadow: var(--shadow);
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgb(47 196 138 / 0.18); }
.hero h1 { margin-top: 20px; font-size: clamp(38px, 5.4vw, 64px); }
.hero h1 .grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-lead { margin-top: 18px; font-size: 18px; color: var(--text-2); max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; padding: 0; list-style: none; }
.hero-tags li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: rgb(255 255 255 / 0.7); border: 1px solid var(--line); font-size: 14px; color: var(--text-2); }
.hero-tags .icon { color: var(--accent); }

.hero-art { position: relative; min-height: 470px; }
.hero-halo {
  position: absolute;
  inset: 6% 6% 4% 10%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #fff 0%, #ffe3f0 45%, #e6d8ff 75%, transparent 76%);
  box-shadow: inset 0 0 60px rgb(255 255 255 / 0.9);
}
.hero-halo::after {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 2px dashed rgb(var(--glow) / 0.28);
  animation: spin 60s linear infinite;
}
.kanban-btn { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.kanban { position: absolute; left: 50%; bottom: 0; width: min(310px, 72%); transform: translateX(-50%); filter: drop-shadow(0 18px 30px rgb(var(--glow) / 0.28)); animation: float 5s ease-in-out infinite; transition: filter 0.2s; }
.kanban-btn:hover .kanban { filter: drop-shadow(0 18px 30px rgb(var(--glow) / 0.42)) brightness(1.03); }
.kanban.hop { animation: hop 0.6s cubic-bezier(0.3, 1.6, 0.5, 1); }
/* What the girl says when clicked: a bubble over her head. */
.kanban-say {
  position: absolute; right: -2%; top: -6%; z-index: 5; width: max-content; max-width: 240px; padding: 12px 18px; border-radius: 20px 20px 20px 6px;
  background: #fff; border: 2px solid var(--accent-light); color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.6; box-shadow: var(--shadow-pop);
  animation: pop 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.gift-chip { z-index: 2; }
.sparkle { position: absolute; width: 22px; height: 22px; background: #fff; clip-path: var(--star); filter: drop-shadow(0 0 6px #fff); animation: twinkle 2.6s ease-in-out infinite; }
.sparkle.s1 { top: 8%; left: 14%; }
.sparkle.s2 { top: 22%; right: 6%; width: 16px; height: 16px; animation-delay: 0.8s; background: var(--accent-light); }
.sparkle.s3 { bottom: 26%; left: 2%; width: 14px; height: 14px; animation-delay: 1.4s; background: #cdb6ff; }
.sparkle.s4 { bottom: 10%; right: 12%; animation-delay: 0.3s; }

/* 礼物 → 整蛊 bubbles floating around the girl. */
.gift-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 10px;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-pop);
  font-size: 14px;
  white-space: nowrap;
  animation: float 6s ease-in-out infinite;
}
.gift-chip .gift { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: var(--grad); color: #fff; font-size: 18px; }
.gift-chip b { color: var(--ink); }
.gift-chip small { display: block; font-size: 12px; color: var(--muted); }
.gift-chip .arrow { margin: 0 6px; color: var(--accent); font-weight: 700; font-style: normal; }
.gift-chip.c1 { top: 4%; left: -4%; }
.gift-chip.c2 { top: 40%; right: -6%; animation-delay: -2s; }
.gift-chip.c3 { bottom: 12%; left: -8%; animation-delay: -4s; }
.gift-chip.c2 .gift { background: linear-gradient(135deg, #ff9a6b, #f2629f); }
.gift-chip.c3 .gift { background: linear-gradient(135deg, #5bc7f2, #a979f2); }

/* The numbers under the hero. */
.stats { margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat { padding: 20px 22px; border-radius: var(--radius); background: rgb(255 255 255 / 0.82); border: 1px solid #fff; box-shadow: var(--shadow); }
.stat b { display: block; font-family: var(--font-title); font-weight: 400; font-size: 30px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.2; }
.stat span { color: var(--muted); font-size: 14px; }

/* Sections. */
.section { padding: 88px 0 0; }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 44px; }
.section-head .kicker { display: block; margin-bottom: 8px; color: var(--accent); font-weight: 700; letter-spacing: 0.18em; font-size: 13px; }
.section-head h2 { font-size: clamp(30px, 4vw, 42px); position: relative; display: inline-block; }
.section-head h2::before, .section-head h2::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  background: var(--grad);
  clip-path: var(--star);
  transform: translateY(-50%);
}
.section-head h2::before { left: -30px; }
.section-head h2::after { right: -30px; }
.section-head p { margin-top: 14px; color: var(--text-2); font-size: 17px; }

/* Feature cards. */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.feature {
  position: relative;
  padding: 26px 22px 24px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid #fff;
  box-shadow: var(--shadow);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  overflow: hidden;
}
.feature::after {
  content: '';
  position: absolute;
  right: -30px;
  top: -30px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--accent-soft);
  opacity: 0.7;
  transition: transform 0.3s ease;
}
.feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-pop); }
.feature:hover::after { transform: scale(1.4); }
.feature-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--grad); color: #fff; font-size: 26px; box-shadow: 0 8px 18px rgb(var(--glow) / 0.3); }
.feature:nth-child(4n + 2) .feature-icon { background: linear-gradient(135deg, #ff9a6b 0%, #f2629f 100%); }
.feature:nth-child(4n + 3) .feature-icon { background: linear-gradient(135deg, #5bc7f2 0%, #a979f2 100%); }
.feature:nth-child(4n + 4) .feature-icon { background: linear-gradient(135deg, #3fd1a8 0%, #4a86ec 100%); }
.feature h3 { position: relative; z-index: 1; margin-top: 18px; font-size: 21px; }
.feature p { position: relative; z-index: 1; margin-top: 8px; font-size: 14.5px; color: var(--text-2); line-height: 1.75; }

/* 通用整蛊 / 深度支持的游戏: a heading over each group of cards. */
.group-title { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 24px; }
.group-title .icon { display: grid; place-items: center; width: 40px; height: 40px; padding: 9px; border-radius: 14px; background: #fff; color: var(--accent); box-shadow: var(--shadow); }
.features + .perks, .perks + .group-title { margin-top: 26px; }
.perks + .group-title { margin-top: 56px; }
.perks { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 22px 0 0; list-style: none; }
.perks li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: rgb(255 255 255 / 0.85); border: 1px solid var(--line); color: var(--text-2); font-size: 14.5px; font-weight: 700; }
.perks .icon { color: var(--accent); font-size: 17px; }
.features-game .feature { background: linear-gradient(180deg, #fff 0%, #fff8fc 100%); }
.games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.game-card { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; padding: 16px 18px; border-radius: 18px; background: rgb(255 255 255 / 0.7); border: 1px dashed var(--accent-light); }
.game-card .icon { grid-row: span 2; font-size: 26px; color: var(--accent); }
.game-card b { color: var(--ink); }
.game-card span { font-size: 13.5px; color: var(--muted); }

/* How it flows: 礼物 → 玩法 → 游戏. */
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; position: relative; }
.flow::before { content: ''; position: absolute; top: 46px; left: 16%; right: 16%; border-top: 3px dashed rgb(var(--glow) / 0.3); }
.flow-step { position: relative; text-align: center; padding: 0 12px; }
.flow-num {
  position: relative;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin: 0 auto;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-pop);
  color: var(--accent);
  font-size: 38px;
}
.flow-num::after { content: attr(data-n); position: absolute; top: -4px; right: -4px; width: 30px; height: 30px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 15px; line-height: 30px; font-weight: 700; font-family: var(--font-body); }
.flow-step h3 { margin-top: 20px; font-size: 22px; }
.flow-step p { margin-top: 8px; color: var(--text-2); font-size: 15px; }

/* Screenshots: a manager window with tabs. */
.shots-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.shots-tabs button { min-height: 42px; padding: 0 22px; border-radius: 999px; border: 2px solid var(--line); background: rgb(255 255 255 / 0.85); color: var(--text-2); font: inherit; font-weight: 700; cursor: pointer; transition: all 0.18s; }
.shots-tabs button[aria-selected='true'] { border-color: transparent; background: var(--grad); color: #fff; box-shadow: 0 8px 20px rgb(var(--glow) / 0.3); }
.window { max-width: 1000px; margin: 0 auto; border-radius: 20px; background: #fff; box-shadow: 0 30px 70px rgb(var(--glow) / 0.25), 0 4px 12px rgb(var(--glow) / 0.1); overflow: hidden; border: 1px solid #fff; }
.window-bar { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; background: linear-gradient(90deg, #fff0f7, #f3ecff); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.window-bar i { width: 12px; height: 12px; border-radius: 50%; background: #ff8fb4; }
.window-bar i:nth-child(2) { background: #ffd36b; }
.window-bar i:nth-child(3) { background: #7fe0b4; }
.window-bar span { margin-left: 10px; }
.window img { width: 100%; height: auto; }
.shot-panel[hidden] { display: none; }
.shot-caption { text-align: center; margin-top: 18px; color: var(--text-2); }

/* Getting started. */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; }
.step { position: relative; padding: 26px 24px 24px 24px; border-radius: var(--radius); background: rgb(255 255 255 / 0.9); border: 1px solid #fff; box-shadow: var(--shadow); }
.step::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: var(--grad);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  box-shadow: 0 6px 14px rgb(var(--glow) / 0.3);
}
.step h3 { margin-top: 14px; font-size: 20px; }
.step p { margin-top: 8px; font-size: 14.5px; color: var(--text-2); }
.step .tip { margin-top: 10px; padding: 8px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-strong); font-size: 13px; }
.needs { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 26px; padding: 18px 24px; border-radius: var(--radius); background: rgb(255 255 255 / 0.7); border: 1px dashed var(--accent-light); color: var(--text-2); font-size: 15px; }
.needs b { color: var(--ink); }
.needs span { display: inline-flex; align-items: center; gap: 8px; }
.needs .icon { color: var(--accent); }

/* Price. */
.price-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 920px; margin: 0 auto; }
.price-card { position: relative; padding: 34px 32px; border-radius: 28px; background: #fff; box-shadow: var(--shadow-pop); overflow: hidden; }
.price-card.main { background: var(--grad-night); color: #fff; }
.price-card.main h3, .price-card.main .price { color: #fff; }
.price-card .ribbon { position: absolute; top: 22px; right: -36px; transform: rotate(45deg); padding: 4px 44px; background: var(--gold); color: #5a3a00; font-size: 13px; font-weight: 700; }
.price-card h3 { font-size: 26px; }
.price { margin-top: 12px; font-family: var(--font-title); font-size: 40px; color: var(--accent-strong); }
.price small { font-size: 16px; font-family: var(--font-body); opacity: 0.8; }
.price-card ul { margin: 20px 0 26px; padding: 0; list-style: none; display: grid; gap: 10px; }
.price-card li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.price-card li::before { content: ''; flex: none; width: 14px; height: 14px; margin-top: 6px; background: var(--accent-light); clip-path: var(--star); }
.price-card.main li::before { background: #ffd36b; }
.price-card.main .btn { width: 100%; }
.price-card .note { font-size: 13px; color: var(--muted); }
.price-card.main .note { color: rgb(255 255 255 / 0.75); }

/* FAQ. */
.faq { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { border-radius: 18px; background: #fff; box-shadow: var(--shadow); border: 1px solid #fff; overflow: hidden; }
.faq summary { display: flex; align-items: center; gap: 12px; padding: 18px 22px; cursor: pointer; list-style: none; font-weight: 700; color: var(--ink); font-size: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: 'Q'; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--grad); color: #fff; font-size: 15px; font-weight: 700; }
.faq summary .icon { margin-left: auto; color: var(--accent); transition: transform 0.2s; }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq details p { padding: 0 22px 20px 64px; color: var(--text-2); font-size: 15px; }

/* Contact. */
.contact {
  position: relative;
  margin-top: 96px;
  padding: 54px 40px;
  border-radius: 32px;
  background: var(--grad);
  color: #fff;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 30px;
  align-items: center;
  box-shadow: 0 24px 60px rgb(var(--glow) / 0.35);
}
.contact::before { content: ''; position: absolute; inset: 0; background: #fff; opacity: 0.18; -webkit-mask: var(--sparkle-tile) repeat; mask: var(--sparkle-tile) repeat; }
.contact > * { position: relative; }
.contact h2 { color: #fff; font-size: clamp(28px, 3.6vw, 40px); }
.contact p { margin-top: 12px; color: rgb(255 255 255 / 0.9); }
.contact-list { display: grid; gap: 12px; }
.contact-item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 18px; background: rgb(255 255 255 / 0.92); color: var(--ink); }
.contact-item .icon { font-size: 22px; color: var(--accent); }
.contact-item b { display: block; font-size: 13px; color: var(--muted); font-weight: 400; }
.contact-item span { font-weight: 700; font-size: 18px; letter-spacing: 0.03em; }
.contact-item > div { flex: 1; min-width: 0; }
.copy-btn { flex: none; padding: 7px 16px; border: 1px solid var(--accent-light); border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.copy-btn:hover { background: var(--accent-light); }

/* Footer. */
.site-foot { margin-top: 90px; padding: 40px 0 34px; background: rgb(255 255 255 / 0.65); border-top: 1px solid #fff; font-size: 14px; color: var(--muted); }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.foot-row nav { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-left: auto; }
.foot-row nav a { color: var(--text-2); text-decoration: none; }
.foot-row nav a:hover { color: var(--accent-strong); }
.foot-note { margin-top: 18px; font-size: 13px; line-height: 1.8; }

/* Legal and other text pages. */
.doc { max-width: 860px; margin: 48px auto 0; padding: 44px 48px; border-radius: 28px; background: #fff; box-shadow: var(--shadow); }
.doc h1 { font-size: 36px; }
.doc .updated { margin-top: 8px; color: var(--muted); font-size: 14px; }
.doc h2 { margin-top: 34px; font-size: 24px; }
.doc p, .doc li { margin-top: 10px; color: var(--text-2); font-size: 15.5px; }
.doc ul { padding-left: 1.3em; }
.doc.lost { display: flex; align-items: center; gap: 36px; }
.lost-girl { width: 170px; flex: none; animation: float 5s ease-in-out infinite; }
.doc.lost .btn { margin-top: 12px; }
@media (max-width: 560px) { .doc.lost { flex-direction: column; text-align: center; gap: 12px; } .lost-girl { width: 130px; } }
.doc pre { white-space: pre-wrap; padding: 18px; border-radius: 16px; background: var(--tint); font-size: 13px; line-height: 1.6; color: var(--text-2); }

/* 为什么选小刀: a screen of the manager beside what it does, alternating sides. */
.hl-row { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; margin-top: 64px; }
.section-head + .hl-row { margin-top: 0; }
.hl-row.flip .hl-media { order: 2; }
.hl-media { display: grid; gap: 14px; min-width: 0; }
.hl-media .window { max-width: none; margin: 0; }
.hl-tag { display: inline-block; padding: 4px 14px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; }
.hl-text h3 { margin-top: 14px; font-size: clamp(26px, 3vw, 34px); }
.hl-text p { margin-top: 14px; color: var(--text-2); font-size: 16px; }
.hl-list { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.hl-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--text); font-size: 15px; }
.hl-list li::before { content: ''; flex: none; width: 14px; height: 14px; margin-top: 6px; background: var(--grad); clip-path: var(--star); }
.hl-shot { border-radius: 16px; }
/* The drag-and-key demo: a "video" on a game picture. */
.placer { position: relative; aspect-ratio: 16 / 9; overflow: hidden; touch-action: none; }
.vid { position: absolute; left: 30%; top: 12%; width: 32%; aspect-ratio: 300 / 487; display: grid; place-items: end center; border: 2px dashed transparent; border-radius: 10px; cursor: grab; transition: background-color 0.3s, border-color 0.2s; }
.vid:hover, .vid.dragging { border-color: #fff; box-shadow: 0 0 0 1px rgb(var(--glow) / 0.6); }
.vid.dragging { cursor: grabbing; }
.vid.green { background: #2fd36b; }
.vid img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.vid-tag { position: absolute; left: 6px; top: 6px; padding: 1px 8px; border-radius: 6px; background: rgb(0 0 0 / 0.45); color: #fff; font-size: 11px; }
.vid:not(.green) .vid-tag { background: rgb(var(--glow) / 0.75); }
.placer-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; border-top: 1px solid var(--line); background: #fff; font-size: 14px; color: var(--text-2); }
.key-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.key-toggle .knob { position: relative; width: 40px; height: 22px; border-radius: 999px; background: var(--line); transition: background 0.2s; }
.key-toggle .knob::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.2); transition: left 0.2s; }
.key-toggle[aria-pressed='true'] .knob { background: var(--grad); }
.key-toggle[aria-pressed='true'] .knob::after { left: 21px; }
.size-field { display: inline-flex; align-items: center; gap: 8px; }
.size-field input { width: 120px; accent-color: var(--accent); }
.center-btn { margin-left: auto; padding: 4px 14px; border: 2px solid var(--line); border-radius: 999px; background: #fff; color: var(--accent-strong); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.center-btn:hover { border-color: var(--accent-light); }
.more-good { margin-top: 64px; }
.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.mini-grid li { padding: 18px 20px; border-radius: 18px; background: rgb(255 255 255 / 0.85); border: 1px solid #fff; box-shadow: var(--shadow); }
.mini-grid b { display: block; font-family: var(--font-title); font-weight: 400; font-size: 19px; color: var(--ink); }
.mini-grid span { display: block; margin-top: 4px; font-size: 14px; color: var(--text-2); }

/* 试一试: a little live picture, the gifts and what happened. */
.play { display: grid; grid-template-columns: 1.25fr 1fr; gap: 22px; align-items: start; }
.stage-window { max-width: none; margin: 0; }
.live-dot { margin-left: auto; padding: 1px 10px; border-radius: 999px; background: #ff5f8f; color: #fff; font-size: 11px; letter-spacing: 0.12em; animation: twinkle 1.6s ease-in-out infinite; }
.stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #ffe9f3; cursor: default; }
.stage:focus-visible { outline-offset: -4px; }
.stage.sealed { cursor: crosshair; }
.scene { position: absolute; inset: 0; background: linear-gradient(180deg, #ffd9ec 0%, #f1e3ff 55%, #e3f0ff 100%); transform-origin: 50% 60%; }
.sun { position: absolute; top: 12%; right: 14%; width: 13%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff7d6 0%, #ffd36b 70%); box-shadow: 0 0 40px #ffe39a; }
.cloud { position: absolute; height: 9%; border-radius: 999px; background: #fff; opacity: 0.9; animation: drift 18s linear infinite; }
.cloud::before { content: ''; position: absolute; left: 22%; top: -60%; width: 42%; height: 130%; border-radius: 50%; background: #fff; }
.cloud.k1 { top: 14%; left: 8%; width: 20%; }
.cloud.k2 { top: 28%; left: 52%; width: 14%; animation-duration: 26s; animation-delay: -8s; }
.hill { position: absolute; bottom: 24%; border-radius: 50% 50% 0 0; }
.hill.h1 { left: -8%; width: 58%; height: 30%; background: #c9b4ff; }
.hill.h2 { right: -10%; width: 64%; height: 24%; background: #ffb8d6; }
.road { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: #5b4475; overflow: hidden; }
.lane { position: absolute; left: 0; top: 46%; width: 200%; height: 6%; background: repeating-linear-gradient(90deg, #fff 0 6%, transparent 6% 12%); animation: lane 1.2s linear infinite; }
.car { position: absolute; left: 50%; bottom: 10%; width: 26%; transform: translateX(-50%); animation: bob 0.5s ease-in-out infinite alternate; overflow: visible; }
.car .wheel { transform-box: fill-box; transform-origin: center; }
.fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.stage-toast { position: absolute; left: 50%; top: 10px; z-index: 4; padding: 6px 16px; border-radius: 999px; background: rgb(74 44 90 / 0.86); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; transform: translateX(-50%); opacity: 0; transition: opacity 0.25s; pointer-events: none; }
.stage-toast.on { opacity: 1; }
/* The pranks' pieces, made by site.js. */
.sticker { position: absolute; font-family: var(--font-title); color: #fff; -webkit-text-stroke: 2px var(--accent-strong); paint-order: stroke; text-shadow: 0 4px 0 rgb(var(--glow) / 0.35); white-space: nowrap; }
.heart-pop { position: absolute; width: 26px; height: 26px; background: #ff6fae; clip-path: path('M13 24 L3 13 A6 6 0 0 1 13 5 A6 6 0 0 1 23 13 Z'); }
.coil { position: absolute; left: 50%; top: -30%; width: 15%; aspect-ratio: 1; margin-left: -7.5%; border-radius: 50%; background: radial-gradient(circle, #3c3448 0 22%, #c7c3d4 23% 30%, #8b84a0 31% 60%, #c7c3d4 61% 66%, #6f6888 67%); box-shadow: 0 8px 18px rgb(0 0 0 / 0.25); }
.boom { position: absolute; left: 50%; bottom: 22%; font-size: clamp(28px, 6vw, 54px); transform: translateX(-50%); }
.flash { position: absolute; inset: 0; background: #fff; }
.chains { position: absolute; inset: -20%; display: grid; place-items: center; }
.chains i { position: absolute; width: 160%; height: 9%; background: repeating-linear-gradient(90deg, #8e86a6 0 18px, #d9d4e6 18px 22px, #6f6888 22px 40px, transparent 40px 44px); border: 2px solid #4a2c5a; border-radius: 999px; box-shadow: 0 6px 16px rgb(0 0 0 / 0.3); }
.chains i:nth-child(1) { transform: rotate(24deg); }
.chains i:nth-child(2) { transform: rotate(-24deg); }
.seal-lock { position: absolute; left: 50%; top: 50%; padding: 10px 18px; border-radius: 18px; background: #fff; border: 3px solid var(--accent); color: var(--ink); font-weight: 700; text-align: center; transform: translate(-50%, -50%); box-shadow: var(--shadow-pop); }
.seal-lock b { display: block; font-family: var(--font-title); font-weight: 400; font-size: clamp(20px, 3.4vw, 30px); color: var(--accent-strong); }
.seal-lock small { display: block; font-size: 12.5px; color: var(--muted); }
.slash { position: absolute; width: 60%; height: 6px; border-radius: 3px; background: linear-gradient(90deg, transparent, #fff, transparent); box-shadow: 0 0 12px #fff; }
.beat-bars { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; display: flex; align-items: flex-end; justify-content: center; gap: 2%; padding: 0 6%; }
.beat-bars i { flex: 1; height: 100%; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #ffd36b, #f2629f); opacity: 0.85; transform-origin: bottom; }

.play-side { display: grid; gap: 16px; }
.gift-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gift-btn { display: grid; justify-items: center; gap: 2px; padding: 14px 8px 12px; border-radius: 18px; border: 2px solid #fff; background: rgb(255 255 255 / 0.92); box-shadow: var(--shadow); color: var(--ink); font: inherit; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s; }
.gift-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); border-color: var(--accent-light); }
.gift-btn:active { transform: scale(0.95); }
.gift-btn b { font-size: 14.5px; }
.gift-btn small { font-size: 12px; color: var(--muted); }
.g-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 6px; border-radius: 14px; background: var(--grad); color: #fff; font-size: 20px; }
.gift-btn:nth-child(2) .g-icon { background: linear-gradient(135deg, #ff9a6b, #f2629f); }
.gift-btn:nth-child(3) .g-icon { background: linear-gradient(135deg, #5bc7f2, #a979f2); }
.gift-btn:nth-child(4) .g-icon { background: linear-gradient(135deg, #3fd1a8, #4a86ec); }
.gift-btn:nth-child(5) .g-icon { background: linear-gradient(135deg, #ffcf5c, #ff8a6b); }
.play-feed { padding: 16px 18px; border-radius: var(--radius); background: rgb(255 255 255 / 0.9); border: 1px solid #fff; box-shadow: var(--shadow); }
.feed-head { display: flex; align-items: center; gap: 10px; }
.feed-head b { font-family: var(--font-title); font-weight: 400; font-size: 18px; color: var(--ink); }
.feed-tip { font-size: 12.5px; color: var(--muted); }
.stop-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #ff6787, #ee3f66); color: #fff; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 14px rgb(238 63 102 / 0.3); }
.feed { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; max-height: 210px; overflow-y: auto; }
.feed li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 12px; border-radius: 14px; background: var(--tint); font-size: 14px; animation: pop 0.3s ease; }
.feed li b { color: var(--accent-strong); }
.feed .feed-empty { color: var(--muted); background: none; padding-left: 0; }
.feed .st { margin-left: auto; padding: 1px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.st.wait { background: #fff3dc; color: #84470a; }
.st.run { background: var(--accent-soft); color: var(--accent-strong); }
.st.done { background: #dcf7ea; color: #17714a; }
.st.stop { background: #ffe8ed; color: #a1203f; }

/* 小刀酱 in the corner. */
.pet { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; transition: transform 0.35s cubic-bezier(0.3, 1.3, 0.5, 1); }
.pet-btn { position: relative; display: grid; place-items: center; width: 68px; height: 68px; padding: 0; border: 3px solid #fff; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff 0%, #ffe3f0 70%); box-shadow: var(--shadow-pop); cursor: pointer; animation: float 4s ease-in-out infinite; }
.pet-btn:hover { animation-play-state: paused; transform: scale(1.06) rotate(-6deg); }
.pet-svg { width: 52px; height: 52px; overflow: visible; }
.pet-eyes { transition: transform 0.12s ease-out; }
.pet-eyes ellipse { transform-box: fill-box; transform-origin: center; animation: blink 4.6s infinite; }
.pet-hide { position: absolute; right: -4px; bottom: 52px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--muted); font-size: 14px; line-height: 22px; cursor: pointer; box-shadow: var(--shadow); opacity: 0; transition: opacity 0.2s; }
.pet:hover .pet-hide, .pet-hide:focus-visible { opacity: 1; }
.pet-bubble { position: relative; width: min(280px, calc(100vw - 40px)); padding: 14px 16px 12px; border-radius: 20px 20px 6px 20px; background: #fff; box-shadow: var(--shadow-pop); animation: pop 0.3s cubic-bezier(0.3, 1.5, 0.5, 1); }
.pet-say { color: var(--ink); font-size: 14.5px; line-height: 1.7; }
.pet-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pet-actions a { padding: 3px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: 12.5px; font-weight: 700; text-decoration: none; }
.pet-actions a:hover { background: var(--accent-light); }
.pet.tucked { transform: translateX(62px); }
.pet.tucked .pet-btn { animation: none; opacity: 0.85; }
.pet.tucked .pet-hide, .pet.tucked .pet-bubble { display: none; }
.pet.spin .pet-btn { animation: spinOnce 0.7s ease; }
body.shook { animation: shake 0.5s ease; }

/* Little stars where you click. */
.spark { position: fixed; z-index: 60; width: 12px; height: 12px; margin: -6px 0 0 -6px; clip-path: var(--star); pointer-events: none; }

/* Appear as they scroll in (only hidden when the script runs, so the page reads without it). */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .reveal.shown { opacity: 1; transform: none; }

@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes hop { 0% { translate: 0 0; } 40% { translate: 0 -26px; } 100% { translate: 0 0; } }
@keyframes pop { from { opacity: 0; scale: 0.8; } to { opacity: 1; scale: 1; } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
@keyframes drift { from { translate: 0 0; } to { translate: 480% 0; } }
@keyframes lane { to { transform: translateX(-12%); } }
@keyframes bob { to { translate: 0 -2px; } }
@keyframes spinOnce { to { transform: rotate(360deg); } }
@keyframes shake { 0%, 100% { translate: 0 0; } 20% { translate: -8px 2px; } 40% { translate: 7px -2px; } 60% { translate: -5px 1px; } 80% { translate: 4px 0; } }
@keyframes twinkle { 0%, 100% { opacity: 0.35; transform: scale(0.75); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1000px) {
  .features { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .menu-toggle { display: grid; place-items: center; }
  .nav { display: none; position: absolute; top: 68px; left: 16px; right: 16px; flex-direction: column; align-items: stretch; padding: 12px; border-radius: 20px; background: #fff; box-shadow: var(--shadow-pop); }
  .nav.open { display: flex; }
  .nav .btn { margin: 6px 0 0; }
  .hero { padding-top: 36px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { min-height: 400px; }
  .gift-chip.c1 { left: 0; }
  .gift-chip.c2 { right: 0; }
  .gift-chip.c3 { left: 0; }
  .games { grid-template-columns: 1fr; }
  .play { grid-template-columns: 1fr; }
  .hl-row { grid-template-columns: 1fr; gap: 24px; margin-top: 48px; }
  .hl-row.flip .hl-media { order: 0; }
  .mini-grid { grid-template-columns: repeat(2, 1fr); }
  .nav-simple { display: flex; position: static; flex-direction: row; padding: 0; background: none; box-shadow: none; }
  .flow { grid-template-columns: 1fr; gap: 34px; }
  .flow::before { display: none; }
  .price-wrap { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; padding: 40px 24px; }
  .doc { padding: 30px 22px; }
}
@media (max-width: 560px) {
  body { font-size: 15px; }
  .features, .steps, .stats { grid-template-columns: 1fr; }
  .hero-lead { font-size: 16px; }
  .gift-chip { padding: 8px 12px 8px 8px; font-size: 13px; }
  .gift-chip .gift { width: 28px; height: 28px; font-size: 15px; }
  .section { padding-top: 64px; }
  .section-head h2::before, .section-head h2::after { display: none; }
  .faq details p { padding-left: 22px; }
  .foot-row nav { margin-left: 0; }
  .gift-grid { grid-template-columns: repeat(2, 1fr); }
  .mini-grid { grid-template-columns: 1fr; }
  .center-btn { margin-left: 0; }
  .pet { right: 12px; bottom: 12px; }
  .pet-btn { width: 58px; height: 58px; }
  .pet-svg { width: 44px; height: 44px; }
  .pet-hide { opacity: 1; bottom: 44px; }
  .kanban-say { font-size: 14px; max-width: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}