/* 30 · 猫呼噜声含义 —— 视觉母题「声波与米灰」：暖灰 / 青蓝声波 / 场景磁贴 / 编号事实卡
   独立布局：横向声波插画、场景磁贴网格、三栏事实卡，与其它页不共用组件。 */
.t28.cp-wrap {
    --t28-bg: #f6f6f2;
    --t28-surface: #fffefa;
    --t28-surface-2: #eeefea;
    --t28-ink: #2b3031;
    --t28-sub: #556064;
    --t28-muted: #8a9496;
    --t28-line: #e0e3dd;
    --t28-accent: #4f8589;
    --t28-accent-2: #c58c68;
    --t28-soft: #e5f0ef;
    --t28-on-accent: #ffffff;
    --t28-ok: #3a7a66;
    --t28-warn: #9a6b12;
    --t28-danger: #ad4b52;
    --t28-ok-soft: #e2f0ea;
    --t28-warn-soft: #faf0d5;
    --t28-danger-soft: #f9e6e7;
    --t28-radius: 16px;
    --t28-radius-sm: 10px;
    --t28-font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
    --t28-shadow: 0 6px 24px rgba(60,70,70,.08);
}
:root[data-theme="dark"] .t28.cp-wrap {
    --t28-bg: #111615;
    --t28-surface: #1a2221;
    --t28-surface-2: #222c2a;
    --t28-ink: #edf3f1;
    --t28-sub: #bccbc7;
    --t28-muted: #8fa09c;
    --t28-line: #2d3a37;
    --t28-accent: #8bcbcc;
    --t28-accent-2: #e8b18d;
    --t28-soft: #203a38;
    --t28-on-accent: #111615;
    --t28-ok: #7fd0ac;
    --t28-warn: #ecc079;
    --t28-danger: #f39aa2;
    --t28-ok-soft: #183429;
    --t28-warn-soft: #372c18;
    --t28-danger-soft: #3a2024;
    --t28-shadow: 0 8px 28px rgba(0,0,0,.42);
}
.cp-hero { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 28px; align-items: center; padding: 34px 0 26px; }
.cp-hero h1 em { display: block; font-style: normal; font-size: .52em; color: var(--t28-accent-2); margin-top: 10px; }

/* 声波：纯 CSS 竖条，随场景切换 calm / alert 两种色调与幅度 */
.cp-wave { display: flex; align-items: center; justify-content: center; gap: 5px; height: 150px;
    padding: 18px; border-radius: 18px; background: var(--t28-surface); box-shadow: var(--t28-shadow); }
.cp-wave i { width: 7px; border-radius: 99px; background: var(--t28-accent); opacity: .82;
    animation: cpPulse 1.5s ease-in-out infinite alternate; }
.cp-wave[data-tone="alert"] i { background: var(--t28-danger); animation-duration: .8s; }
@keyframes cpPulse { from { transform: scaleY(.55); } to { transform: scaleY(1); } }
.cp-quick { border-top: 4px solid var(--t28-accent); }

/* 场景磁贴 */
.cp-scenes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.cp-scene { position: relative; padding: 13px 12px; border-radius: 12px; cursor: pointer;
    border: 2px solid var(--t28-line); background: var(--t28-surface-2); text-align: center;
    font-size: 14px; font-weight: 700; color: var(--t28-sub); transition: all .18s; }
.cp-scene:hover { border-color: var(--t28-accent); }
.cp-scene input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cp-scene:has(input:checked) { border-color: var(--t28-accent); background: var(--t28-soft); color: var(--t28-accent); }
.cp-scene small { display: block; font-size: 11px; font-weight: 400; color: var(--t28-muted); margin-top: 3px; }
.cp-signs { padding: 14px 16px; border-radius: 12px; background: var(--t28-surface-2); }
.cp-signs .t28-label { display: block; margin-bottom: 9px; }
.cp-wrap .t28-check.cp-alert:has(input:checked) { border-color: var(--t28-danger); background: var(--t28-danger-soft); color: var(--t28-danger); }

/* 事实卡 */
.cp-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.cp-fact { position: relative; padding: 20px; border-radius: 16px; background: var(--t28-surface);
    border: 1px solid var(--t28-line); border-bottom: 3px solid var(--t28-accent); }
.cp-fact-n { font-family: var(--t28-mono); font-size: 30px; font-weight: 800; color: var(--t28-soft); line-height: 1; }
.cp-fact h3 { font-size: 16px; margin: 8px 0; }
.cp-fact p { font-size: 13.5px; line-height: 1.8; color: var(--t28-sub); margin: 0; }
.cp-reading .t28-prose { max-width: 860px; }

@media (max-width: 860px) { .cp-hero { grid-template-columns: minmax(0, 1fr); } .cp-scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cp-facts { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .cp-scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cp-wave { height: 110px; } }