❤️✨憧魔大世界✨❤️——憧憬・反派 & 物语！

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ✦ Magia Cupita · Unified CSS · v2.0 Final
   一体化文件:平台外壳 + v4.1 内容卡片 + 双主题联动

   ▸ 平台外壳(顶栏/按钮/输入框/评论区/分页)
   ▸ <ai> 内容卡片(故事/思维链/PC/NPC/记忆等)
   ▸ 白天主题:粉樱花调
   ▸ 夜晚主题:深紫星河调(随系统 prefers-color-scheme 自动切换)
   ▸ 动态纹理:顶栏漂浮粒子 + 扫光 + 输入框呼吸
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */


/* ╔════════════════════════════════════════════════════╗
   ║                                                    ║
   ║   PART A · <ai> 内容卡片样式                         ║
   ║   (原 v4.1 完整内容,粉调白天 + 深紫夜晚)            ║
   ║                                                    ║
   ╚════════════════════════════════════════════════════╝ */

/* ========== A1. 设计令牌(粉调白天) ========== */
ai {
  /* —— 底色系统:粉樱花奶白 —— */
  --bg:           #FFF5F7;
  --bg-card:     #FFFCF6;
  --bg-card-2:   #FCF0F2;
  --bg-inset:    #F8E5EA;
  --bg-cream:    #FFF8E8;
  --bg-night:    #1F1834;

  /* —— 文字色:深酒红系 —— */
  --text:        #5C2A48;
  --text-soft:   #8A4F70;
  --text-mute:   #B58FA0;
  --text-light:  #FFF;

  /* —— 主题色:糖果点缀 —— */
  --c-pink:      #E589B5;
  --c-pink-2:    #F4B3CE;
  --c-blue:      #7FB8D4;
  --c-blue-2:    #A8D2E5;
  --c-yellow:    #E5BD5E;
  --c-yellow-2: #F2D88E;
  --c-purple:    #9B7FC4;
  --c-purple-2: #BDA8DA;
  --c-magenta:   #D85A8B;
  --c-mint:      #88C9A8;

  /* —— 强调色 —— */
  --accent:      #D85A8B;
  --accent-warm: #E59D3D;

  /* —— 线条 —— */
  --line:         rgba(216, 90, 139, 0.12);
  --line-strong: rgba(216, 90, 139, 0.22);
  --line-dash:   rgba(216, 90, 139, 0.28);

  /* —— 阴影 —— */
  --sh-1: 0 1px 2px rgba(216, 90, 139, 0.06),
          0 4px 12px rgba(216, 90, 139, 0.08);
  --sh-2: 0 2px 4px rgba(216, 90, 139, 0.06),
          0 10px 24px rgba(216, 90, 139, 0.10),
          0 20px 44px rgba(82, 65, 110, 0.06);
  --sh-3: 0 4px 8px rgba(216, 90, 139, 0.08),
          0 16px 36px rgba(216, 90, 139, 0.12),
          0 32px 64px rgba(82, 65, 110, 0.08);
  --sh-in:  inset 0 1px 0 rgba(255, 255, 255, 0.72);

  /* —— 字体 —— */
  --ff-title: "Mochiy Pop One", "ZCOOL KuaiLe", "PingFang SC",
              "Microsoft YaHei", system-ui, sans-serif;
  --ff-body:  "Noto Sans SC", -apple-system, BlinkMacSystemFont,
              "PingFang SC", "Microsoft YaHei", sans-serif;
  --ff-mono:  "Cascadia Code", "JetBrains Mono", "Fira Code",
              "Consolas", monospace;

  /* —— 圆角 —— */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;

  /* —— 间距 —— */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  /* —— 过渡 —— */
  --ease:   cubic-bezier(0.32, 0.72, 0.24, 1.00);
  --bounce: cubic-bezier(0.34, 1.42, 0.64, 1.00);

  /* —— SVG 装饰 —— */
  --svg-star: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E5BD5E' d='M10 0 L11 9 L20 10 L11 11 L10 20 L9 11 L0 10 L9 9 Z'/%3E%3C/svg%3E");
  --svg-sparkle: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFF' d='M6 0 L7 5 L12 6 L7 7 L6 12 L5 7 L0 6 L5 5 Z'/%3E%3C/svg%3E");
}

/* ========== A2. 基础与全局 ========== */
ai {
  display: block;
  max-width: 100%;
  margin: 0;
  padding: var(--s-5);

  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.85;
  letter-spacing: 0.012em;
  color: var(--text);

  background:
    radial-gradient(circle at 10% 4%, rgba(229, 137, 181, 0.08) 0 18%, transparent 38%),
    radial-gradient(circle at 92% 8%, rgba(127, 184, 212, 0.06) 0 16%, transparent 36%),
    radial-gradient(circle at 50% 110%, rgba(155, 127, 196, 0.05) 0 28%, transparent 50%),
    var(--bg);

  position: relative;
  overflow-x: hidden;
  scroll-behavior: smooth;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  transition: background-color 0.4s ease, color 0.4s ease;
}

ai *,
ai *::before,
ai *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ai * {
  word-wrap: break-word;
  overflow-wrap: anywhere;
  scrollbar-width: thin;
  scrollbar-color: var(--c-pink) rgba(216, 90, 139, 0.08);
}

ai *::before,
ai *::after { pointer-events: none; }

ai summary,
ai button,
ai a,
ai input,
ai select,
ai textarea { pointer-events: auto; }

/* —— 标题 —— */
ai h4, ai h5 {
  font-family: var(--ff-title);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: var(--s-2);
  color: var(--text);
}

ai h4 { font-size: 15.5px; }
ai h5 { font-size: 14px; color: var(--text-soft); }

/* —— 段落 —— */
ai p {
  margin-bottom: var(--s-4);
  max-width: 65ch;
}

/* —— 列表 —— */
ai ul { list-style: none; padding-left: 0; }

ai li {
  position: relative;
  padding-left: 22px;
  margin-bottom: var(--s-2);
  line-height: 1.78;
}

ai li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 10px;
  height: 10px;
  background: var(--c-yellow);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%,
                     79% 91%, 50% 70%, 21% 91%, 32% 57%,
                     2% 35%, 39% 35%);
  opacity: 0.88;
}

/* —— 代码 —— */
ai pre, ai code {
  font-family: var(--ff-mono);
  font-size: 0.88em;
  white-space: pre-wrap;
}

ai code {
  padding: 0.12em 0.45em;
  background: rgba(216, 90, 139, 0.10);
  border-radius: 5px;
  color: var(--c-magenta);
}

ai pre {
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--s-4);
  overflow-x: auto;
}

/* —— 链接 —— */
ai a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed rgba(216, 90, 139, 0.42);
  transition: color 0.25s var(--ease),
              border-color 0.25s var(--ease);
}

ai a:hover {
  color: #C24578;
  border-bottom-style: solid;
}

/* —— 图片 —— */
ai img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-sm);
  box-shadow: var(--sh-1);
}

/* —— 引用 —— */
ai blockquote {
  border-left: 3px solid var(--c-magenta);
  background: rgba(216, 90, 139, 0.06);
  padding: var(--s-4) var(--s-5);
  margin: var(--s-4) 0;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--text-soft);
  font-style: italic;
}

/* —— 分隔线 —— */
ai hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(216, 90, 139, 0.28) 50%,
    transparent 100%);
  margin: var(--s-5) 0;
  position: relative;
}

ai hr::after {
  content: "✦";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg);
  padding: 0 var(--s-3);
  color: var(--c-magenta);
  font-size: 13px;
  opacity: 0.68;
}

/* ========== A3. 卡片公共质感 ========== */
ai .think,
ai .pc,
ai .npc,
ai .track,
ai .mem,
ai .act,
ai story {
  position: relative;
  background: var(--bg-card);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
  margin-bottom: var(--s-5);
  overflow: hidden;
  padding: var(--s-5);
  padding-left: calc(var(--s-5) + 4px);
  transition: background-color 0.4s ease,
              border-color 0.4s ease,
              box-shadow 0.4s ease;
}

/* —— 左侧 4px 色带 —— */
ai .think::before,
ai .pc::before,
ai .npc::before,
ai .track::before,
ai .mem::before,
ai .act::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 4px 0 0 4px;
}

ai .think::before { background: var(--c-purple); }
ai .pc::before    { background: var(--c-blue); }
ai .npc::before   { background: var(--c-magenta); }
ai .track::before { background: var(--c-purple-2); }
ai .mem::before   { background: var(--c-yellow); }
ai .act::before   { background: var(--c-pink); }

/* —— 折叠标题 —— */
ai .think summary,
ai .pc summary,
ai .npc summary,
ai .track summary,
ai .mem summary,
ai .act summary,
ai .star summary {
  font-family: var(--ff-title);
  font-size: 15.5px;
  letter-spacing: 0.03em;
  cursor: pointer;
  padding: var(--s-3) var(--s-5) var(--s-3) var(--s-3);
  border-radius: var(--r-md);
  position: relative;
  z-index: 1;
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  color: var(--text);
  transition: transform 0.25s var(--ease),
              box-shadow 0.25s var(--ease),
              background 0.25s var(--ease),
              color 0.4s ease;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

ai .think summary::marker,
ai .pc summary::marker,
ai .npc summary::marker,
ai .track summary::marker,
ai .mem summary::marker,
ai .act summary::marker,
ai .star summary::marker { display: none; }

ai .think summary::-webkit-details-marker,
ai .pc summary::-webkit-details-marker,
ai .npc summary::-webkit-details-marker,
ai .track summary::-webkit-details-marker,
ai .mem summary::-webkit-details-marker,
ai .act summary::-webkit-details-marker,
ai .star summary::-webkit-details-marker { display: none; }

ai [open] > summary {
  background: #FFF;
  box-shadow: 0 4px 12px rgba(216, 90, 139, 0.08);
}

/* —— 标题圆形图标 —— */
ai .think summary::before,
ai .pc summary::before,
ai .npc summary::before,
ai .track summary::before,
ai .mem summary::before,
ai .act summary::before {
  content: "";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #FFF;
  font-weight: 700;
  background: var(--c-purple);
  font-family: var(--ff-body);
  transition: transform 0.4s var(--bounce);
}

ai .think summary::before { background: var(--c-purple);  content: "✦"; }
ai .pc summary::before    { background: var(--c-blue);    content: "P"; font-size: 12px; }
ai .npc summary::before   { background: var(--c-magenta); content: "★"; }
ai .track summary::before { background: var(--c-purple-2); content: "◇"; }
ai .mem summary::before   { background: var(--c-yellow);  content: "M"; color: #5C4A1C; font-size: 12px; }
ai .act summary::before   { background: var(--c-pink);    content: "?"; }

ai [open] > summary::before {
  transform: rotate(360deg) scale(1.08);
}

/* ========== A4. 思维链 ========== */
ai .think .think-body {
  margin-top: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

ai .think .mod {
  background: transparent;
  padding: 0;
  margin: 0;
}

ai .think .mod-title {
  font-family: var(--ff-title);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--text);
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--c-purple);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-4);
  margin: 0 0 var(--s-3) 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  box-shadow: 0 2px 6px rgba(216, 90, 139, 0.06);
}

ai .think .grid3 {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-4);
}

ai .think .grid3 > div {
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4);
  position: relative;
  padding-left: calc(var(--s-4) + 6px);
}

ai .think .grid3 > div::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 3px;
}

ai .think .grid3 > div[t="权限"]::before { background: var(--c-blue); }
ai .think .grid3 > div[t="场景"]::before { background: var(--c-pink); }
ai .think .grid3 > div[t="连锁"]::before { background: var(--accent); }

ai .think d {
  display: block;
  font-size: 13.5px;
  line-height: 1.78;
  color: var(--text-soft);
  margin-bottom: var(--s-1);
}

ai .think .sub {
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
  margin-top: var(--s-2);
}

ai .think .sub:first-of-type { margin-top: 0; }

ai .think .sub h5 {
  font-family: var(--ff-title);
  font-size: 12.5px;
  color: var(--text-soft);
  margin-bottom: var(--s-2);
  padding-bottom: var(--s-1);
  border-bottom: 1px dashed var(--line-dash);
  letter-spacing: 0.04em;
}

ai .think .sub d {
  display: block;
  font-size: 12.5px;
  line-height: 1.78;
  color: var(--text-soft);
  margin-bottom: 2px;
  padding-left: 4px;
}

ai .thin

/* 预览已截断；下载 CSS 可查看完整内容。 */

本页只展示本地导出中可核验的公开字段。下载 JSON 可查看完整原始记录。