/* Quodara 小红书小工具 · 离线 H5
   配色取自主站 dark 主题（docs/frontend.md「配色」一节），小工具容器不支持 CSS 变量之外的
   主题切换，这里固定深色一套：小红书内跳进来是全屏沉浸式阅读，深色比暖灰底更稳。 */

:root {
  --canvas: #080a0c;
  --panel: #161a1d;
  --panel-muted: #1b2024;
  --panel-strong: #20262a;
  --heading: #f1f3f4;
  --body: #d2d6d9;
  --subtle: #a8afb5;
  --faint: #7d878f;
  --line-soft: rgba(255, 255, 255, .08);
  --line: rgba(255, 255, 255, .14);
  --line-strong: rgba(255, 255, 255, .24);
  --accent: #6ea8fe;
  --accent-2: #8cb9ff;
  --success: #52c98b;
  --warning: #e0a04b;
  --purple: #aa98ff;
  --on-accent: #07111f;
  --safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { touch-action: manipulation; }

body {
  background: var(--canvas);
  color: var(--body);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
               "Helvetica Neue", "Microsoft YaHei", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  overflow-x: hidden;
}

.page {
  padding-bottom: calc(var(--safe-bottom) + 24px);
}

/* 顶部阅读进度 */
.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(255, 255, 255, .06);
  z-index: 30;
}
.progress i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--purple));
  transition: width .12s linear;
}

/* ---------- 首屏 ---------- */

.hero {
  position: relative;
  padding: calc(var(--safe-top) + 46px) 22px 34px;
  overflow: hidden;
}
.hero-glow {
  position: absolute;
  top: -180px; left: 50%;
  width: min(140%, 520px); height: 420px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(110, 168, 254, .30), rgba(110, 168, 254, 0));
  pointer-events: none;
}
.hero-logo {
  position: relative;
  width: 62px; height: 62px;
  border-radius: 16px;
  display: block;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
}
.eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 5px 12px 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--subtle);
  font-size: 12px;
  letter-spacing: .04em;
}
.eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(110, 168, 254, .16);
}
.hero-title {
  position: relative;
  margin-top: 16px;
  font-size: 40px;
  line-height: 1.16;
  letter-spacing: -.01em;
  font-weight: 700;
  color: var(--heading);
}
.hero-sub {
  position: relative;
  margin-top: 14px;
  font-size: 16px;
  color: var(--subtle);
  max-width: 19em;
}

/* 对话演示 */
.mock {
  position: relative;
  margin-top: 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .38);
}
.mock-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--panel-muted);
}
.mock-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
}
.mock-title {
  margin-left: 8px;
  font-size: 12px;
  color: var(--faint);
}
.mock-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.mock-msg {
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.6;
}
.mock-user {
  align-self: flex-end;
  max-width: 88%;
  background: #1b2227;
  border: 1px solid var(--line-soft);
  color: var(--heading);
  border-bottom-right-radius: 5px;
}
.mock-agent {
  align-self: flex-start;
  max-width: 94%;
  background: #111518;
  border: 1px solid var(--line-soft);
  border-bottom-left-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.mock-step {
  color: var(--body);
  opacity: 0;
  transform: translateY(6px);
  animation: step-in .5s ease forwards;
}
.mock-step:nth-child(1) { animation-delay: .35s; }
.mock-step:nth-child(2) { animation-delay: 1.15s; }
.mock-step:nth-child(3) { animation-delay: 1.95s; }
.mock-step:nth-child(4) { animation-delay: 2.75s; }
.mock-step:nth-child(4) { color: var(--success); }
@keyframes step-in { to { opacity: 1; transform: none; } }

.mock-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-top: 1px solid var(--line-soft);
  background: var(--panel-muted);
}
.mock-hint {
  flex: 1;
  font-size: 13px;
  color: var(--faint);
}
.mock-caret {
  display: inline-block;
  width: 1px; height: 12px;
  margin-left: 2px;
  background: var(--accent);
  vertical-align: -2px;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.mock-send {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 模型条 */
.models {
  position: relative;
  margin-top: 22px;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(110, 168, 254, .07), rgba(110, 168, 254, 0));
}
.models-label { font-size: 13px; color: var(--subtle); }
.models-list {
  list-style: none;
  display: flex;
  gap: 8px;
  margin: 12px 0 10px;
}
.models-list li {
  flex: 1;
  min-width: 0;
  padding: 10px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.model-use { font-size: 11px; color: var(--faint); }
.model-name {
  font-size: 12px;
  color: var(--accent-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-word;
}
.models-foot { font-size: 12px; color: var(--faint); }

.scroll-hint {
  margin-top: 26px;
  font-size: 12px;
  color: var(--faint);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.scroll-hint i {
  width: 8px; height: 8px;
  border-right: 1px solid var(--faint);
  border-bottom: 1px solid var(--faint);
  transform: rotate(45deg);
  animation: nudge 1.6s ease-in-out infinite;
}
@keyframes nudge {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50% { transform: rotate(45deg) translate(3px, 3px); }
}

/* ---------- 通用区块 ---------- */

.sec { padding: 40px 22px 8px; }
.sec-head { margin-bottom: 20px; }
.sec-index {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--accent);
  letter-spacing: .1em;
}
.sec-index i {
  flex: 1;
  height: 1px;
  background: var(--line-soft);
}
.sec-title {
  margin-top: 12px;
  font-size: 24px;
  line-height: 1.34;
  font-weight: 700;
  color: var(--heading);
}
.sec-sub {
  margin-top: 8px;
  font-size: 14px;
  color: var(--subtle);
}
.note {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--faint);
}
.disclaimer {
  margin-top: 16px;
  font-size: 11px;
  line-height: 1.7;
  color: var(--faint);
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.is-in { opacity: 1; transform: none; }

/* 01 基础能力 */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.cap-card {
  padding: 13px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--panel);
}
.cap-card h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--heading);
}
.cap-card p {
  margin-top: 3px;
  font-size: 12px;
  color: var(--faint);
}

/* 02 解决方案 */
.feat-grid { display: flex; flex-direction: column; gap: 10px; }
.feat-card {
  padding: 15px 16px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--panel);
}
.feat-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--heading);
}
.feat-card p {
  margin-top: 4px;
  font-size: 13px;
  color: var(--subtle);
}
.feat-get {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px dashed var(--line-soft);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--heading);
}
.feat-get b {
  flex: none;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 13%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--panel));
}

/* 03 你的业务 */
.pipe {
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--panel);
  padding: 16px 14px;
}
.pipe-cases {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pipe-cases-label {
  flex: none;
  font-size: 12px;
  color: var(--faint);
}
.pipe-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.pipe-tabs::-webkit-scrollbar { display: none; }
.pipe-tab {
  flex: none;
  padding: 6px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--panel-muted);
  color: var(--subtle);
  font-size: 13px;
  font-family: inherit;
  line-height: 1.4;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.pipe-tab.is-active {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--panel));
  background: color-mix(in srgb, var(--accent) 13%, var(--panel));
}
.pipe-top {
  margin-top: 16px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.pipe-prompt { font-size: 13px; color: var(--faint); }
.pipe-goal {
  font-size: 19px;
  font-weight: 700;
  color: var(--heading);
}
.pipe-caret {
  display: inline-block;
  width: 2px; height: 17px;
  background: var(--accent);
  vertical-align: -2px;
  animation: blink 1.1s steps(1) infinite;
}
.pipe-steps {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pipe-step {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--panel-muted);
  opacity: 0;
  transform: translateY(8px);
  animation: step-in .42s ease forwards;
}
.pipe-step:nth-child(1) { animation-delay: .04s; }
.pipe-step:nth-child(2) { animation-delay: .12s; }
.pipe-step:nth-child(3) { animation-delay: .2s; }
.pipe-step:nth-child(4) { animation-delay: .28s; }
.pipe-no {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--faint);
  padding-top: 2px;
}
.pipe-do {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--heading);
}
.pipe-meta {
  margin-top: 7px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 12px;
}
.pipe-uses, .pipe-gets {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--subtle);
}
.pipe-meta em {
  font-style: normal;
  color: var(--faint);
}
.pipe-gets { color: var(--success); }
.pipe-foot {
  margin-top: 14px;
  font-size: 12px;
  color: var(--faint);
}

/* 04 案例 */
.story-list { display: flex; flex-direction: column; gap: 12px; }
.story-card {
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--panel);
}
.story-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--faint);
}
.story-type {
  padding: 2px 8px;
  border-radius: 6px;
  color: var(--purple);
  background: color-mix(in srgb, var(--purple) 13%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--purple) 34%, var(--panel));
}
.story-quote {
  margin-top: 10px;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 700;
  color: var(--heading);
}
.story-body {
  margin-top: 9px;
  font-size: 13px;
  color: var(--subtle);
}

/* 05 先做，再想 */
.flip {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.flip-col {
  flex: 1;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--panel);
}
.flip-col.is-now {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--panel));
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
}
.flip-when {
  font-size: 12px;
  color: var(--faint);
}
.flip-col.is-now .flip-when { color: var(--accent); }
.flip-col ol {
  list-style: none;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.flip-col li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--heading);
}
.flip-col b {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 400;
  color: var(--faint);
}
.flip-swap {
  flex: none;
  width: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  color: var(--faint);
  writing-mode: vertical-rl;
}
.flip-swap i {
  flex: 1;
  width: 1px;
  background: var(--line-soft);
}
.shift {
  margin-top: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  overflow: hidden;
}
.shift-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 14px;
  background: var(--panel);
}
.shift-row + .shift-row { border-top: 1px solid var(--line-soft); }
.shift-before, .shift-after {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
}
.shift-before { color: var(--faint); }
.shift-after { color: var(--heading); }
.shift-tag {
  flex: none;
  width: 30px;
  font-size: 11px;
  color: var(--faint);
}
.shift-after .shift-tag { color: var(--accent); }

/* 06 去哪儿用 */
.sec-end {
  position: relative;
  padding-bottom: 34px;
  overflow: hidden;
}
.end-glow {
  position: absolute;
  bottom: -160px; left: 50%;
  width: min(140%, 520px); height: 380px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(110, 168, 254, .22), rgba(110, 168, 254, 0));
  pointer-events: none;
}
.end-foot {
  position: relative;
  margin-top: 22px;
  text-align: center;
  font-size: 14px;
  line-height: 1.9;
  color: var(--subtle);
}
.tail { height: 8px; }

.touchable:active { opacity: .72; }

@media (max-width: 340px) {
  .hero-title { font-size: 34px; }
  .cap-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .mock-step, .pipe-step { animation: none; opacity: 1; transform: none; }
  .reveal { transition: none; opacity: 1; transform: none; }
  .mock-caret, .pipe-caret, .scroll-hint i { animation: none; }
}