/* ============================================================
   首屏演示窗口（四步连播）
   ============================================================ */
.visual {
  position: relative;
}
.device {
  position: relative;
  border-radius: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  aspect-ratio: 16 / 10.4;
}
.titlebar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  background: oklch(0.185 0.009 250);
  border-bottom: 1px solid var(--border-soft);
}
.titlebar .tdot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.titlebar .tdot:nth-child(1) {
  background: oklch(0.65 0.16 25);
}
.titlebar .tdot:nth-child(2) {
  background: oklch(0.82 0.13 85);
}
.titlebar .tdot:nth-child(3) {
  background: oklch(0.72 0.12 150);
}
.titlebar .ttitle {
  margin-left: 8px;
  font-size: 11px;
  color: var(--muted-2);
}

.screens {
  position: relative;
  height: calc(100% - 34px);
  font-size: 11px;
}
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.5s var(--ease),
    visibility 0.5s var(--ease);
}
.screens[data-screen="1"] [data-s="1"],
.screens[data-screen="2"] [data-s="2"],
.screens[data-screen="3"] [data-s="3"],
.screens[data-screen="4"] [data-s="4"],
.screens[data-screen="5"] [data-s="5"] {
  opacity: 1;
  visibility: visible;
}

/* 模拟光标 */
.cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
  width: 22px;
  height: 22px;
  margin: -2px 0 0 -2px;
  opacity: 0;
  pointer-events: none;
  color: #fff;
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 55%));
  transition: transform 0.6s var(--ease);
}
.device.anim .cursor {
  opacity: 1;
}
.device.anim .cursor.hide {
  opacity: 0;
}
.cursor::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--primary-strong);
  opacity: 0;
}
.cursor.click::after {
  animation: ring 0.42s var(--ease);
}
@keyframes ring {
  0% {
    opacity: 0.9;
    transform: scale(0.25);
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

/* 渐进显现（仅动画模式下隐藏初始态） */
.device.anim .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.45s var(--ease),
    transform 0.45s var(--ease);
}
.device.anim .reveal.show {
  opacity: 1;
  transform: none;
}

/* 输入框打字 */
.ph .typed {
  color: var(--fg);
}
.ph .hint {
  color: var(--muted-2);
}
.ph.has-text .hint {
  display: none;
}
.auto-task-tags {
  --composer-task-tag-height: 24px;
  display: none;
  flex: none;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  margin-right: 5px;
  opacity: 0;
  transform: translateY(2px);
  transition:
    opacity 0.3s var(--ease),
    transform 0.3s var(--ease);
}
.auto-task-tags.show {
  display: inline-flex;
  opacity: 1;
  transform: none;
}
.task-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: var(--composer-task-tag-height);
  min-height: var(--composer-task-tag-height);
  max-width: min(100%, 190px);
  padding: 0 4px;
  border: 1px solid color-mix(in oklab, var(--primary) 28%, var(--border));
  border-radius: 4px;
  color: var(--primary);
  background: color-mix(in oklab, var(--primary) 7%, var(--card));
  font-size: 10px;
  line-height: 1;
}
.task-tag .tag-body {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-tag .tag-remove {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  flex: none;
  color: inherit;
}
.task-tag .tag-remove svg {
  width: 11px;
  height: 11px;
}

/* ---- 步骤指示条 ---- */
.demo-steps {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.demo-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  font-family: inherit;
  text-align: left;
  padding: 11px 12px;
  border-radius: 12px;
  cursor: pointer;
  color: var(--muted);
  background: oklch(0.225 0.012 250 / 55%);
  border: 1px solid var(--border-soft);
  overflow: hidden;
  transition:
    color 0.2s var(--ease),
    border-color 0.2s var(--ease),
    background 0.2s var(--ease);
}
.demo-step:hover {
  color: var(--fg);
}
.demo-step.active {
  color: var(--fg);
  border-color: oklch(0.72 0.105 184 / 50%);
  background: oklch(0.72 0.105 184 / 10%);
}
.demo-step .dnum {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 12px;
  color: var(--muted);
  background: oklch(1 0 0 / 6%);
  border: 1px solid var(--border);
}
.demo-step.active .dnum {
  color: var(--bg);
  background: var(--primary);
  border-color: transparent;
}
.demo-step .dlabel {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* ============================================================
   复用组件（聊天 / 结果卡 / 输入框）
   ============================================================ */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg);
}
.chat {
  flex: 1;
  padding: 16px 16px 6px;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chat-scroll {
  display: flex;
  flex-direction: column;
  gap: 11px;
  transition: transform 0.55s var(--ease);
}
.chat-scroll.scrolled {
  transform: translateY(-124px);
}
.chat-scroll.web-scrolled {
  transform: translateY(-124px);
}
.msg {
  display: flex;
  max-width: 86%;
}
.msg.user {
  align-self: flex-end;
}
.bubble {
  padding: 8px 11px;
  border-radius: 12px;
  line-height: 1.5;
}
.msg.user .bubble {
  background: var(--chat-user);
  border: 1px solid oklch(0.58 0.09 190 / 34%);
  border-bottom-right-radius: 4px;
  color: oklch(0.965 0.006 230);
}
.msg.user .bubble.with-attach {
  display: flex;
  align-items: center;
  gap: 8px;
}
.msg.user .bubble.prompt-with-ref {
  display: grid;
  gap: 7px;
  max-width: 29em;
}
.ref-file {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  padding: 5px 8px 5px 5px;
  border-radius: 8px;
  color: var(--fg);
  background: oklch(1 0 0 / 7%);
  border: 1px solid oklch(1 0 0 / 12%);
  font-size: 9.5px;
}
.msg.ai {
  gap: 8px;
  align-self: flex-start;
  max-width: 92%;
}
.ai-avatar {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--bg);
  background: linear-gradient(140deg, var(--primary), oklch(0.62 0.13 200));
}
.msg.ai .bubble {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-bottom-left-radius: 4px;
  color: var(--fg);
}

.attach {
  width: 30px;
  height: 22px;
  border-radius: 5px;
  flex: none;
  background: linear-gradient(150deg, oklch(0.42 0.13 255), oklch(0.3 0.09 265));
  border: 1px solid oklch(1 0 0 / 18%);
}

/* 生成图片结果卡 */
.img-result {
  margin-top: 2px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
  max-width: 86%;
}
.img-result .result-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 9px;
  padding: 9px;
}
.img-result .pic {
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 126px;
  border-radius: 9px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 11px;
  background:
    radial-gradient(120px 80px at 78% 22%, oklch(0.72 0.12 200 / 55%), transparent 70%),
    linear-gradient(150deg, oklch(0.42 0.13 255), oklch(0.26 0.08 265) 62%, oklch(0.34 0.1 210));
}
.img-result .pic::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(oklch(1 0 0 / 7%) 1px, transparent 1px),
    linear-gradient(90deg, oklch(1 0 0 / 7%) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(70% 70% at 70% 30%, #000, transparent);
}
.img-result .pic b {
  position: relative;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3px;
  text-shadow: 0 2px 10px rgb(0 0 0 / 45%);
}
.img-result .acts {
  position: absolute;
  left: 11px;
  bottom: 11px;
  z-index: 2;
  display: flex;
  gap: 7px;
}
.img-pages {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.img-page {
  aspect-ratio: 16 / 9;
  border-radius: 7px;
  border: 1px solid var(--border-soft);
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background:
    radial-gradient(36px 28px at 74% 22%, oklch(0.72 0.12 200 / 48%), transparent 72%),
    linear-gradient(150deg, oklch(0.35 0.1 255), oklch(0.22 0.06 265));
}
.img-page:nth-child(2) {
  background:
    radial-gradient(34px 26px at 28% 24%, oklch(0.82 0.12 80 / 42%), transparent 72%),
    linear-gradient(150deg, oklch(0.34 0.08 225), oklch(0.22 0.05 250));
}
.img-page:nth-child(3) {
  background:
    radial-gradient(34px 26px at 70% 28%, oklch(0.72 0.11 170 / 42%), transparent 72%),
    linear-gradient(150deg, oklch(0.32 0.08 245), oklch(0.2 0.05 265));
}
.img-page:nth-child(4) {
  background:
    radial-gradient(34px 26px at 36% 30%, oklch(0.72 0.105 184 / 42%), transparent 72%),
    linear-gradient(150deg, oklch(0.3 0.08 235), oklch(0.2 0.05 260));
}
.img-page span {
  height: 3px;
  border-radius: 999px;
  background: oklch(1 0 0 / 52%);
}
.img-page span:first-child {
  width: 62%;
  background: var(--primary);
}
.img-page span:last-child {
  width: 78%;
}

/* Deck 结果卡 */
.deck-card {
  position: relative;
  margin-top: 2px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--card), var(--card-2));
  overflow: hidden;
}
.deck-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--border-soft);
}
.deck-head .di {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  background: linear-gradient(140deg, oklch(0.62 0.13 200), oklch(0.5 0.12 215));
  flex: none;
}
.deck-head .dt b {
  font-size: 11.5px;
  font-weight: 600;
  display: block;
}
.deck-head .dt small {
  color: var(--muted);
  font-size: 9.5px;
}
.deck-head .badge {
  margin-left: auto;
  font-size: 9px;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--primary-strong);
  background: oklch(0.72 0.105 184 / 14%);
  border: 1px solid oklch(0.72 0.105 184 / 30%);
}
.deck-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 9px;
  padding: 9px;
}
.web-preview {
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 126px;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  background:
    radial-gradient(95px 70px at 78% 25%, oklch(0.72 0.12 200 / 42%), transparent 70%),
    linear-gradient(150deg, oklch(0.42 0.13 255), oklch(0.25 0.08 265));
}
.web-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(oklch(1 0 0 / 7%) 1px, transparent 1px),
    linear-gradient(90deg, oklch(1 0 0 / 7%) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(75% 70% at 70% 32%, #000, transparent);
}
.web-preview .web-copy {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 1;
  width: 58%;
  display: grid;
  gap: 7px;
}
.web-preview .web-kicker {
  width: 48%;
  height: 5px;
  border-radius: 999px;
  background: var(--primary);
}
.web-preview .web-title {
  height: 14px;
  border-radius: 5px;
  background: oklch(1 0 0 / 78%);
}
.web-preview .web-line {
  height: 5px;
  border-radius: 999px;
  background: oklch(1 0 0 / 42%);
}
.web-preview .web-line.short {
  width: 72%;
}
.web-preview-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.thumb {
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  background: linear-gradient(160deg, var(--surface-2), oklch(0.225 0.012 250));
  border: 1px solid var(--border-soft);
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.thumb .tb {
  height: 4px;
  border-radius: 3px;
  background: var(--primary);
  width: 62%;
  opacity: 0.9;
}
.thumb .tl {
  height: 3px;
  border-radius: 3px;
  background: oklch(0.42 0.012 250);
}
.thumb .tl.s {
  width: 70%;
}
.thumb .tk {
  margin-top: auto;
  height: 9px;
  border-radius: 4px;
  background: oklch(0.82 0.12 80 / 22%);
  border: 1px solid oklch(0.82 0.12 80 / 30%);
}
.deck-actions {
  position: absolute;
  left: 14px;
  top: clamp(86px, 54%, 190px);
  z-index: 3;
  display: flex;
  gap: 7px;
}
.pill {
  font-size: 10px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--fg);
  background: oklch(1 0 0 / 4%);
}
.pill.primary {
  color: var(--bg);
  background: var(--primary);
  border-color: transparent;
  font-weight: 600;
}
.pill.open-edit-entry {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  box-shadow:
    0 8px 20px rgb(0 0 0 / 36%),
    0 0 0 1px oklch(1 0 0 / 16%);
  transition:
    filter 0.18s var(--ease),
    box-shadow 0.18s var(--ease);
}
.pill.open-edit-entry.hot {
  filter: saturate(1.15);
  box-shadow:
    0 8px 20px rgb(0 0 0 / 28%),
    0 0 0 3px oklch(0.72 0.105 184 / 18%);
}

/* 底部能力输入框 */
.composer {
  margin: 4px 12px 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: oklch(0.205 0.011 250);
  padding: 9px;
}
.chips {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--muted);
  border: 1px solid var(--border);
  background: oklch(1 0 0 / 3%);
}
.chip.active {
  color: var(--bg);
  background: var(--primary);
  border-color: transparent;
  font-weight: 600;
}
.chip svg {
  opacity: 0.9;
}
.input-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 4px 2px;
}
.input-row .ph {
  flex: 1;
  color: var(--muted-2);
  font-size: 11px;
  display: inline-flex;
  align-items: center;
}
.composer-ref {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin: 0 0 6px 4px;
  padding: 4px 8px 4px 5px;
  border-radius: 8px;
  font-size: 9.5px;
  color: var(--fg);
  background: oklch(1 0 0 / 6%);
  border: 1px solid var(--border);
}
.composer-ref.sent {
  display: none;
}
.composer-ref .attach {
  width: 24px;
  height: 17px;
  border-radius: 4px;
}
.caret {
  display: inline-block;
  width: 1.5px;
  height: 13px;
  margin-left: 1px;
  background: var(--primary-strong);
  animation: caret 1.1s steps(1) infinite;
}
@keyframes caret {
  50% {
    opacity: 0;
  }
}
.send {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--bg);
  background: var(--primary);
  box-shadow: 0 4px 12px oklch(0.72 0.105 184 / 35%);
}

/* ---- 编辑器界面（步骤 3 / 4） ---- */
.ed {
  flex: 1;
  display: flex;
  min-width: 0;
  background: var(--bg);
}
.ed.editing-title .ed-el.sel {
  outline-color: var(--accent-strong);
}
.ed.dragging-title .ed-el.sel {
  box-shadow: 0 10px 22px oklch(0.72 0.105 184 / 20%);
}
.ed.dragging-title .ed-slide::after {
  opacity: 1;
}
.ed.ai-thinking .ed-ai-orb {
  animation: aiPulse 1s var(--ease) infinite;
}
.ed.ai-applied .ed-slide {
  box-shadow:
    0 16px 38px rgb(0 0 0 / 40%),
    0 0 0 2px oklch(0.82 0.12 80 / 55%);
}
.ed-rail {
  width: 124px;
  flex: none;
  background: var(--sidebar);
  border-right: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  padding: 9px 8px;
  gap: 8px;
}
.ed-return {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  font-size: 9.5px;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: 7px;
  color: var(--bg);
  background: var(--primary);
}
.ed-title {
  font-size: 11px;
  font-weight: 600;
  padding: 0 2px;
}
.ed-rlist {
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow: hidden;
}
.ed-rthumb {
  display: flex;
  gap: 6px;
  align-items: center;
}
.ed-rthumb .idx {
  font-size: 8.5px;
  color: var(--muted-2);
  width: 9px;
  flex: none;
}
.ed-rthumb .mini {
  flex: 1;
  aspect-ratio: 16 / 9;
  border-radius: 5px;
  background: linear-gradient(160deg, var(--surface-2), oklch(0.225 0.012 250));
  border: 1px solid var(--border-soft);
}
.ed-rthumb.active .mini {
  border-color: oklch(0.72 0.105 184 / 75%);
  box-shadow: 0 0 0 1px oklch(0.72 0.105 184 / 40%);
}
.ed-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ed-top {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-bottom: 1px solid var(--border-soft);
  background: oklch(0.185 0.009 250);
}
.ed-ic {
  width: 25px;
  height: 25px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  color: var(--muted);
  background: oklch(1 0 0 / 3%);
  position: relative;
}
.ed-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--fg);
  background: oklch(1 0 0 / 3%);
}
.ed-spacer {
  flex: 1;
}
.ed-tool {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--card-2);
  overflow: hidden;
}
.ed-sel {
  font-size: 9.5px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  transition:
    color 0.2s var(--ease),
    border-color 0.2s var(--ease),
    background 0.2s var(--ease);
}
.ed-sel.active {
  color: var(--bg);
  border-color: transparent;
  background: var(--primary);
}
.ed-tg {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  color: var(--muted);
  background: oklch(1 0 0 / 3%);
  font-size: 11px;
  font-weight: 700;
}
.ed-tg.on {
  color: var(--bg);
  background: var(--primary);
  border-color: transparent;
}
.ed-div {
  width: 1px;
  height: 16px;
  background: var(--border);
  margin: 0 3px;
  flex: none;
}
.ed-canvas {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  padding: 16px;
  background: radial-gradient(circle at 50% 40%, oklch(0.22 0.01 250), var(--bg-2));
}
.ed-slide {
  position: relative;
  width: 84%;
  aspect-ratio: 16 / 9;
  border-radius: 9px;
  padding: 20px 22px;
  color: oklch(0.27 0.03 262);
  background: linear-gradient(155deg, oklch(0.97 0.008 250), oklch(0.91 0.016 250));
  box-shadow: 0 16px 38px rgb(0 0 0 / 40%);
  overflow: hidden;
  transition: box-shadow 0.28s var(--ease);
}
.ed-slide::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 8px;
  background-image:
    linear-gradient(oklch(0.5 0.09 255 / 12%) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.5 0.09 255 / 12%) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.ed-slide .kicker {
  font-size: 9px;
  letter-spacing: 1px;
  color: oklch(0.5 0.09 255);
  font-weight: 700;
}
.ed-el {
  position: relative;
  display: inline-block;
  margin-top: 5px;
  transition:
    transform 0.52s var(--ease),
    box-shadow 0.25s var(--ease);
}
.ed-el .htext {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.1;
  color: oklch(0.27 0.06 260);
  transition:
    color 0.25s var(--ease),
    font-family 0.25s var(--ease),
    font-size 0.25s var(--ease);
}
.ed.font-changed:not(.ai-applied) .ed-el .htext {
  color: oklch(0.2 0.09 230);
}
.ed-el.sel {
  outline: 1.5px solid var(--primary-strong);
  outline-offset: 3px;
}
.ed-el.sel .h {
  position: absolute;
  width: 7px;
  height: 7px;
  background: #fff;
  border: 1.5px solid var(--primary-strong);
  border-radius: 1px;
}
.ed-el.sel .h.tl {
  left: -7px;
  top: -7px;
}
.ed-el.sel .h.tr {
  right: -7px;
  top: -7px;
}
.ed-el.sel .h.bl {
  left: -7px;
  bottom: -7px;
}
.ed-el.sel .h.br {
  right: -7px;
  bottom: -7px;
}
.ed-slide .sub {
  margin-top: 12px;
  height: 5px;
  width: 46%;
  border-radius: 3px;
  background: oklch(0.72 0.04 255);
  transition:
    margin-top 0.28s var(--ease),
    width 0.28s var(--ease),
    background 0.28s var(--ease);
}
.ed-slide .sub.s2 {
  margin-top: 7px;
  width: 36%;
}
.ed-note {
  margin-top: 13px;
  display: grid;
  gap: 5px;
  width: 50%;
}
.ed-note .line {
  height: 5px;
  border-radius: 3px;
  background: oklch(0.72 0.04 255);
  transition:
    width 0.28s var(--ease),
    background 0.28s var(--ease);
}
.ed-note .line:nth-child(1) {
  width: 84%;
}
.ed-note .line:nth-child(2) {
  width: 62%;
}
.edit-toast {
  position: absolute;
  left: 18px;
  bottom: 15px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 10px;
  color: var(--fg);
  background: oklch(0.2 0.011 250 / 92%);
  border: 1px solid var(--border);
  box-shadow: 0 12px 28px rgb(0 0 0 / 38%);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.24s var(--ease),
    transform 0.24s var(--ease);
}
.edit-toast.show {
  opacity: 1;
  transform: none;
}
.edit-toast .spark {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary-strong);
  box-shadow: 0 0 0 4px oklch(0.72 0.105 184 / 14%);
}
.ed-slide .pic {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 34%;
  aspect-ratio: 4 / 3;
  border-radius: 7px;
  background:
    radial-gradient(70px 50px at 75% 25%, oklch(0.72 0.12 200 / 60%), transparent 70%),
    linear-gradient(150deg, oklch(0.42 0.13 255), oklch(0.28 0.08 265));
  box-shadow: 0 8px 18px rgb(0 0 0 / 25%);
}
.ed-slide.ed-cover {
  padding: 0;
}
.ed-slide.ed-cover .ed-el {
  position: absolute;
  left: 7.5%;
  top: 15%;
  margin: 0;
}
.ed-slide.ed-cover .sub {
  position: absolute;
  left: 7.5%;
  top: 36.5%;
  width: 39.1%;
  margin: 0;
}
.ed-slide.ed-cover .sub.s2 {
  top: 43.6%;
  width: 30.6%;
  margin: 0;
}
.ed-slide.ed-cover .ed-note {
  position: absolute;
  left: 7.5%;
  top: 54.5%;
  width: 42.5%;
  margin: 0;
}
.ed-slide.ed-cover .pic {
  right: 6.1%;
  bottom: 10.9%;
}
.ed-ai {
  width: 136px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 9px;
  background: oklch(0.18 0.012 250);
  border-left: 1px solid var(--border-soft);
  overflow: hidden;
}
.ed-ai-head {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--fg);
  font-size: 10px;
  font-weight: 700;
}
.ed-ai-orb {
  width: 18px;
  height: 18px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: var(--bg);
  background: linear-gradient(140deg, var(--primary), oklch(0.62 0.13 200));
}
@keyframes aiPulse {
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 5px oklch(0.72 0.105 184 / 13%);
  }
}
.ed-ai-msg {
  padding: 7px 8px;
  border-radius: 9px;
  font-size: 9.5px;
  line-height: 1.45;
  color: var(--fg);
  background: var(--card);
  border: 1px solid var(--border-soft);
}
.ed-ai-msg.user {
  margin-left: 16px;
  background: var(--chat-user);
  border-color: oklch(0.58 0.09 190 / 34%);
}
.ed-ai-card {
  padding: 8px;
  border-radius: 9px;
  color: var(--fg);
  background: oklch(0.225 0.012 250);
  border: 1px solid oklch(0.72 0.105 184 / 36%);
}
.ed-ai-card b {
  display: block;
  margin-bottom: 5px;
  font-size: 9.5px;
}
.ed-ai-card p {
  margin: 0;
  font-size: 9px;
  line-height: 1.45;
  color: var(--muted);
}
.ed-ai-composer {
  margin-top: auto;
  padding: 6px;
  border-radius: 9px;
  background: oklch(0.205 0.011 250);
  border: 1px solid var(--border);
}
.ed-ai-input {
  min-height: 39px;
  font-size: 9.5px;
  line-height: 1.4;
  color: var(--fg);
}
.ed-ai-input .hint {
  color: var(--muted-2);
}
.ed-ai-composer.has-text .hint {
  display: none;
}
.ed-ai-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 5px;
}
.ed-ai-send {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--bg);
  background: var(--primary);
}
.ed-ai-action {
  display: grid;
  place-items: center;
  height: 25px;
  border-radius: 8px;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--bg);
  background: var(--primary);
}
/* 导出下拉菜单 */
.ed-export-wrap {
  position: relative;
  display: inline-flex;
}
.ed-export .caretdown {
  opacity: 0.7;
}
.ed-export-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 12;
  min-width: 116px;
  padding: 5px;
  border-radius: 9px;
  background: oklch(0.2 0.011 250);
  border: 1px solid var(--border);
  box-shadow: 0 16px 36px rgb(0 0 0 / 50%);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition:
    opacity 0.18s var(--ease),
    transform 0.18s var(--ease);
}
.ed-main.show-export .ed-export-menu {
  opacity: 1;
  transform: none;
}
.exi {
  padding: 6px 9px;
  border-radius: 6px;
  font-size: 10.5px;
  color: var(--fg);
}
.exi.hot {
  background: var(--primary);
  color: var(--bg);
  font-weight: 600;
}

/* ---- 步骤 4：全屏翻页演示 ---- */
.pres {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 35%, oklch(0.16 0.01 250), #05070b);
}
.pres-hint {
  position: absolute;
  top: 12px;
  left: 14px;
  font-size: 10px;
  color: var(--muted-2);
  letter-spacing: 0.4px;
}
.pres-page {
  position: absolute;
  bottom: 12px;
  right: 16px;
  font-size: 11px;
  color: var(--muted);
}
.pres-page .pcur {
  color: var(--fg);
  font-weight: 700;
}
.pres-stage {
  width: 88%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgb(0 0 0 / 55%);
}
.pres-track {
  display: flex;
  width: 300%;
  height: 100%;
  transition: transform 0.6s var(--ease);
}
.pres-slide {
  width: 33.3333%;
  height: 100%;
  flex: none;
  padding: 30px 34px;
  color: oklch(0.27 0.03 262);
  position: relative;
  overflow: hidden;
}
.pslide-cover {
  background: linear-gradient(155deg, oklch(0.97 0.008 250), oklch(0.91 0.016 250));
  color: oklch(0.27 0.03 262);
}
.pslide-points,
.pslide-data {
  background: linear-gradient(155deg, oklch(0.97 0.008 250), oklch(0.9 0.018 250));
}
.pres-slide .pk {
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 700;
  opacity: 0.8;
}
.pslide-cover .ph1 {
  position: absolute;
  left: 50%;
  top: 17%;
  transform: translateX(-50%);
  font-size: 32px;
  font-weight: 800;
  color: oklch(0.2 0.09 230);
  white-space: nowrap;
}
.pslide-cover .cover-copy {
  position: absolute;
  display: block;
}
.pslide-cover .cover-line {
  border-radius: 3px;
  background: oklch(0.58 0.1 190);
}
.pslide-cover .cover-pic {
  position: absolute;
  aspect-ratio: 4 / 3;
  border-radius: 9px;
  background:
    radial-gradient(90px 65px at 75% 25%, oklch(0.72 0.12 200 / 60%), transparent 70%),
    linear-gradient(150deg, oklch(0.42 0.13 255), oklch(0.28 0.08 265));
  box-shadow: 0 14px 28px rgb(0 0 0 / 24%);
}
.pres-slide .ph2 {
  font-size: 26px;
  font-weight: 800;
  color: oklch(0.27 0.06 260);
}
.plist {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 13px;
}
.plist li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 15px;
  font-weight: 600;
  color: oklch(0.34 0.04 260);
}
.plist li span:first-child {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--primary);
  flex: none;
}
.plist li span:last-child {
  width: auto;
  height: auto;
  min-width: 0;
  background: transparent;
  border-radius: 0;
  flex: 0 1 auto;
  white-space: nowrap;
}
.pbars {
  margin-top: 22px;
  height: 56%;
  display: flex;
  align-items: flex-end;
  gap: 16px;
}
.pcol {
  flex: 1;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, var(--primary-strong), oklch(0.5 0.1 200));
}

/* ---- 步骤 5：导出 PPT 并打开 ---- */
.ppt-win {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: oklch(0.96 0.005 250);
  position: relative;
}
.ppt-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px;
  background: linear-gradient(180deg, oklch(0.52 0.16 33), oklch(0.46 0.15 33));
  color: #fff;
}
.ppt-ico {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 11px;
  background: oklch(1 0 0 / 22%);
}
.ppt-file {
  font-size: 11px;
  font-weight: 600;
}
.ppt-winbtns {
  margin-left: auto;
  display: flex;
  gap: 8px;
}
.ppt-winbtns i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: oklch(1 0 0 / 45%);
}
.ppt-ribbon {
  display: flex;
  gap: 14px;
  padding: 7px 13px;
  font-size: 10.5px;
  color: oklch(0.4 0.02 260);
  background: oklch(0.91 0.006 250);
  border-bottom: 1px solid oklch(0.82 0.01 250);
}
.ppt-ribbon .rtab.on {
  color: oklch(0.46 0.15 33);
  font-weight: 700;
  position: relative;
}
.ppt-ribbon .rtab.on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 2px;
  background: oklch(0.46 0.15 33);
}
.ppt-body {
  flex: 1;
  display: flex;
  min-height: 0;
  background: oklch(0.86 0.008 250);
}
.ppt-rail {
  width: 88px;
  flex: none;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: oklch(0.93 0.005 250);
  border-right: 1px solid oklch(0.82 0.01 250);
}
.ppt-rt {
  display: flex;
  gap: 5px;
  align-items: center;
}
.ppt-rt .rn {
  font-size: 8.5px;
  color: oklch(0.5 0.02 260);
  width: 7px;
  flex: none;
}
.ppt-rt .rm {
  flex: 1;
  aspect-ratio: 16 / 9;
  border-radius: 3px;
  background: #fff;
  border: 1px solid oklch(0.8 0.01 250);
}
.ppt-rt.active .rm {
  border-color: oklch(0.46 0.15 33);
  box-shadow: 0 0 0 1.5px oklch(0.46 0.15 33 / 55%);
}
.ppt-stage {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 16px;
}
.ppt-slide {
  position: relative;
  width: 84%;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  padding: 20px 24px;
  background: #fff;
  color: oklch(0.27 0.03 262);
  box-shadow: 0 8px 22px rgb(0 0 0 / 22%);
  overflow: hidden;
}
.ppt-slide .pk {
  font-size: 9px;
  letter-spacing: 1px;
  color: oklch(0.5 0.09 255);
  font-weight: 700;
}
.ppt-slide .ph1 {
  position: absolute;
  left: 50%;
  top: 17%;
  transform: translateX(-50%);
  font-size: 24px;
  font-weight: 800;
  color: oklch(0.27 0.06 260);
  margin: 0;
  white-space: nowrap;
}
.ppt-slide .sub {
  position: absolute;
  margin: 0;
  border-radius: 3px;
  background: oklch(0.58 0.1 190);
}
.ppt-slide .ppt-note {
  position: absolute;
  display: block;
}
.ppt-slide .ppt-note span {
  display: block;
  border-radius: 3px;
  background: oklch(0.58 0.1 190);
}
.ppt-slide .pic {
  position: absolute;
  aspect-ratio: 4 / 3;
  border-radius: 7px;
  background:
    radial-gradient(70px 50px at 75% 25%, oklch(0.72 0.12 200 / 60%), transparent 70%),
    linear-gradient(150deg, oklch(0.42 0.13 255), oklch(0.28 0.08 265));
  box-shadow: 0 8px 18px rgb(0 0 0 / 18%);
}

/* Shared final homepage geometry.
   Editor final state, fullscreen presentation, and exported PPT preview
   all use these percentages so the same content is only scaled by slide size. */
.ed.title-centered .ed-slide.ed-cover,
.pslide-cover,
.ppt-slide {
  --home-title-x: 50%;
  --home-title-y: 17%;
  --home-line-x: 8%;
  --home-line-y1: 45%;
  --home-line-y2: 52%;
  --home-line-y3: 64%;
  --home-line-y4: 71%;
  --home-line-w1: 46%;
  --home-line-w2: 29.44%;
  --home-line-w3: 33.12%;
  --home-line-w4: 40.48%;
  --home-line-h: 3%;
  --home-pic-right: 6%;
  --home-pic-y: 45%;
  --home-pic-w: 34%;
  --home-title-font: var(--font-sans);
  --home-title-size: 6.5cqw;
  --home-title-color: oklch(0.27 0.06 260);
  --home-title-letter-spacing: 0;
  --home-title-max-w: 88cqw;
  container-type: inline-size;
}
html[lang="zh-CN"] .ed.title-centered .ed-slide.ed-cover,
html[lang="zh-CN"] .pslide-cover,
html[lang="zh-CN"] .ppt-slide {
  --home-title-font: "Noto Sans SC", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  --home-title-max-w: 86cqw;
}
html[lang="en"] .ed.title-centered .ed-slide.ed-cover,
html[lang="en"] .pslide-cover,
html[lang="en"] .ppt-slide {
  --home-title-font: var(--font-sans);
}
.ed.title-centered .ed-slide.ed-cover .ed-el,
.pslide-cover .ph1,
.ppt-slide .ph1 {
  position: absolute;
  left: var(--home-title-x);
  top: var(--home-title-y);
  transform: translateX(-50%) !important;
  margin: 0;
  white-space: nowrap;
}
.ed.title-centered .ed-slide.ed-cover .ed-el {
  width: max-content;
  max-width: var(--home-title-max-w);
  text-align: center;
}
.ed.title-centered .ed-slide.ed-cover .ed-el .htext,
.pslide-cover .ph1,
.ppt-slide .ph1 {
  font-family: var(--home-title-font);
  font-size: var(--home-title-size);
  font-weight: 800;
  color: var(--home-title-color);
  letter-spacing: var(--home-title-letter-spacing);
  white-space: nowrap;
}
.pslide-cover .ph1,
.ppt-slide .ph1 {
  max-width: var(--home-title-max-w);
}
.ed.ai-applied .ed-slide.ed-cover,
.pslide-cover,
.ppt-slide {
  padding: 0;
}
.pslide-cover .cover-copy,
.ed.ai-applied .ed-slide.ed-cover .ed-note,
.ppt-slide .ppt-note {
  position: absolute;
  inset: 0;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
}
.ed.ai-applied .ed-slide.ed-cover .sub,
.ed.ai-applied .ed-slide.ed-cover .ed-note .line,
.pslide-cover .cover-line,
.ppt-slide .sub,
.ppt-slide .ppt-note span {
  position: absolute;
  left: var(--home-line-x);
  height: var(--home-line-h);
  margin: 0;
  border-radius: 999px;
  background: oklch(0.58 0.1 190);
}
.ed.ai-applied .ed-slide.ed-cover .sub:not(.s2),
.pslide-cover .cover-line:nth-child(1),
.ppt-slide .sub:not(.s2) {
  top: var(--home-line-y1);
  width: var(--home-line-w1);
}
.ed.ai-applied .ed-slide.ed-cover .sub.s2,
.pslide-cover .cover-line:nth-child(2),
.ppt-slide .sub.s2 {
  top: var(--home-line-y2);
  width: var(--home-line-w2);
}
.ed.ai-applied .ed-slide.ed-cover .ed-note .line:nth-child(1),
.pslide-cover .cover-line:nth-child(3),
.ppt-slide .ppt-note span:nth-child(1) {
  top: var(--home-line-y3);
  width: var(--home-line-w3);
}
.ed.ai-applied .ed-slide.ed-cover .ed-note .line:nth-child(2),
.pslide-cover .cover-line:nth-child(4),
.ppt-slide .ppt-note span:nth-child(2) {
  top: var(--home-line-y4);
  width: var(--home-line-w4);
}
.ed.ai-applied .ed-slide.ed-cover .pic,
.pslide-cover .cover-pic,
.ppt-slide .pic {
  top: var(--home-pic-y);
  right: var(--home-pic-right);
  bottom: auto;
  width: var(--home-pic-w);
}
.ppt-toast {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: oklch(0.5 0.14 150 / 96%);
  box-shadow: 0 12px 28px rgb(0 0 0 / 30%);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.4s var(--ease),
    transform 0.4s var(--ease);
}
.ppt-win.show-toast .ppt-toast {
  opacity: 1;
  transform: none;
}