/*
 * 新版体验引导（临时插件）
 * 旧版页面也要用，旧模板没有 klp.css 的变量，所以邀请卡和过场用写死的颜色（取自 klp.css 浅色那套）；
 * 只有新版里的侧栏入口和分享提示用 klp.css 的变量，跟着夜间模式走。
 * 根节点挂在 <html> 下而不是 body 里：旧模板给 body 下的元素写了不少全局样式，挂在外面不受影响。
 * 口径：纯色、不用渐变和粒子特效，动效靠位移 / 缩放 / 透明度的节奏。
 */

.klp-try, .klp-try * { box-sizing: border-box; margin: 0; padding: 0; border: 0; font: inherit; color: inherit; letter-spacing: normal; text-transform: none; }
.klp-try { position: fixed; inset: 0; z-index: 2147483001; font: 14px/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; color: #111413; -webkit-font-smoothing: antialiased; }
.klp-try svg.ic { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* 动效节奏：进场统一用这条曲线，起步快、收尾柔，带一点点回弹 */
.klp-try { --e-in: cubic-bezier(.2, .9, .25, 1.04); --e-move: cubic-bezier(.75, 0, .2, 1); }

/* ───────── 旧版：邀请卡 ───────── */
.klp-try-veil { position: absolute; inset: 0; background: rgba(17, 20, 19, .34); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .4s ease, background-color .7s ease; }
.klp-try.in .klp-try-veil { opacity: 1; }

/* 居中交给 flex，卡片本身不用 translate(-50%) —— 高度是奇数时会落在半像素上，文字动画结束那一下会「跳」一下变清楚；
   入场也只做位移不做缩放，缩放中的文字每帧重新栅格化，看着像在抖 */
.klp-try-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; pointer-events: none; }
.klp-try-card { position: relative; pointer-events: auto; width: 460px; max-width: 100%; padding: 8px; border-radius: 22px; background: #fff;
	box-shadow: 0 24px 64px rgba(17, 20, 19, .18), 0 2px 6px rgba(17, 20, 19, .06), 0 0 0 1px rgba(17, 20, 19, .05);
	transform: translate3d(0, 40px, 0); opacity: 0;
	transition: transform .7s var(--e-in), opacity .35s ease, background-color .4s ease, box-shadow .4s ease; }
.klp-try.in .klp-try-card { transform: none; opacity: 1; }

.klp-try-x { position: absolute; right: 16px; top: 16px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #4F5856; background: rgba(255, 255, 255, .8); transition: background .15s, color .15s, opacity .2s; }
.klp-try-x:hover { background: #fff; color: #111413; }
.klp-try-x:focus-visible, .klp-try-btn:focus-visible { outline: 2px solid #61CAB8; outline-offset: 2px; }

/* 展示区：浅青底上摆一张新版界面的示意图，底边裁掉，像从下面露出来 */
.klp-try-hero { position: relative; height: 212px; border-radius: 15px; background: #E3F4F0; overflow: hidden; padding: 26px 26px 0; transition: background-color .4s ease; }
.klp-try-mock { position: relative; width: 100%; height: 100%; display: flex; overflow: hidden; background: #FAFAF9; border-radius: 10px 10px 0 0; box-shadow: 0 0 0 1px rgba(17, 20, 19, .06), 0 10px 30px rgba(10, 107, 93, .14);
	transform: translateY(46px); opacity: 0; transition: transform .8s var(--e-in) .12s, opacity .4s ease .12s; }
.klp-try.in .klp-try-mock { transform: none; opacity: 1; }
.klp-try-mock i, .klp-try-mock b { display: block; border-radius: 3px; background: #E8EBEA; }

.klp-try-mock-side { flex: none; width: 24%; max-width: 248px; padding: 12px 10px; background: #FAFAF9; border-right: 1px solid #E8EBEA; display: flex; flex-direction: column; gap: 7px; }
.klp-try-mock-side .lg { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; background: none; }
.klp-try-mock-side .lg::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: #61CAB8; }
.klp-try-mock-side .lg::after { content: ""; width: 44%; height: 7px; border-radius: 3px; background: #111413; }
.klp-try-mock-side i { height: 7px; }
.klp-try-mock-side .on { height: 15px; border-radius: 5px; background: #fff; box-shadow: 0 0 0 1px #E8EBEA; }
.klp-try-mock-side .dot { display: flex; align-items: center; gap: 5px; background: none; }
.klp-try-mock-side .dot::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--c, #61CAB8); }
.klp-try-mock-side .dot::after { content: ""; flex: 1; max-width: 62%; height: 6px; border-radius: 3px; background: #E8EBEA; }

.klp-try-mock-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.klp-try-mock-top { flex: none; height: 28px; border-bottom: 1px solid #E8EBEA; display: flex; align-items: center; gap: 6px; padding: 0 10px; background: #FAFAF9; }
.klp-try-mock-top i { height: 13px; width: 38%; max-width: 420px; border-radius: 7px; background: #fff; box-shadow: 0 0 0 1px #E8EBEA; }
.klp-try-mock-top b { margin-left: auto; width: 30px; height: 13px; border-radius: 5px; background: #111413; }
.klp-try-mock-top u { width: 13px; height: 13px; border-radius: 50%; background: #CDEFE8; }
.klp-try-mock-body { flex: 1; min-height: 0; display: flex; gap: 8px; padding: 10px; }
.klp-try-mock-cards { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: max-content; gap: 8px; }
.klp-try-mock-rail { flex: none; width: 27%; max-width: 320px; display: flex; flex-direction: column; gap: 8px; }
.klp-try-mock-card { background: #fff; border-radius: 7px; box-shadow: 0 0 0 1px #E8EBEA; padding: 7px; display: flex; flex-direction: column; gap: 5px; }
.klp-try-mock-card .img { aspect-ratio: 16 / 7; height: auto; border-radius: 4px; background: var(--c, #CDEFE8); }
.klp-try-mock-card i { height: 5px; }
.klp-try-mock-card i:last-child { width: 55%; }
.klp-try-mock-rail .klp-try-mock-card { gap: 6px; }
.klp-try-mock-rail .num { height: 12px; width: 40%; background: #111413; opacity: .85; }

/* 示意图里的部件依次搭起来 */
.klp-try-mock [style*="--d"] { opacity: 0; transform: translateY(8px); transition: opacity .35s ease var(--d), transform .55s var(--e-in) var(--d); }
.klp-try-mock-side [style*="--d"] { transform: translateX(-8px); }
.klp-try.in .klp-try-mock [style*="--d"] { opacity: 1; transform: none; }

.klp-try-body { padding: 20px 18px 14px; }
.klp-try-body > * { opacity: 0; transform: translateY(10px); transition: opacity .35s ease var(--d, .3s), transform .55s var(--e-in) var(--d, .3s); }
.klp-try.in .klp-try-body > * { opacity: 1; transform: none; }
.klp-try-title { font-size: 22px; line-height: 1.35; font-weight: 700; color: #111413; }
.klp-try-title em { font-style: normal; color: #0A6B5D; }
.klp-try-desc { margin-top: 6px; font-size: 14px; color: #4F5856; }
.klp-try-feats { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.klp-try-feats span { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; color: #4F5856; background: #F2F4F3; }
.klp-try-feats svg { color: #0A6B5D; }
.klp-try-acts { display: flex; gap: 8px; margin-top: 20px; }
.klp-try-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; padding: 0 18px; border-radius: 11px; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: transform .12s ease, background-color .15s ease; -webkit-appearance: none; appearance: none; }
.klp-try-btn:active { transform: scale(.97); }
.klp-try-go { flex: 1; color: #fff; background: #111413; }
.klp-try-go:hover { background: #2a302e; }
.klp-try-go svg { transition: transform .2s ease; }
.klp-try-go:hover svg { transform: translateX(3px); }
.klp-try-later { color: #4F5856; background: #F2F4F3; }
.klp-try-later:hover { background: #E8EBEA; color: #111413; }
.klp-try-note { margin-top: 10px; font-size: 12px; color: #6E7775; text-align: center; }

/* 关掉：直接往下沉、淡掉，不等进场的延迟 */
.klp-try.out .klp-try-card { transition: transform .35s cubic-bezier(.4, 0, 1, 1), opacity .25s ease .05s; transform: translate3d(0, 24px, 0); opacity: 0; }
.klp-try.out .klp-try-veil { opacity: 0; transition-delay: .05s; }

/* ───────── 粒子转场 ───────── */
/* 从下到上：舞台底色画布（盖住已崩解的旧页）< 新版 iframe < 粒子画布 < 加载提示 */
.klp-try-cv { position: absolute; left: 0; top: 0; z-index: 1; display: block; pointer-events: none; }
.klp-try-fx { z-index: 3; }
.klp-try-frame { position: absolute; left: 0; top: 0; z-index: 2; border: 0; display: block; visibility: hidden; background: #FAFAF9; transform-origin: 50% 50%; }
/* 新版加载慢时舞台底部的提示 */
.klp-try-pill { position: absolute; left: 50%; bottom: 36px; z-index: 4; display: flex; align-items: center; gap: 10px; height: 38px; margin-left: -76px; width: 152px; padding: 0 14px; border-radius: 19px; background: rgba(255, 255, 255, .08); color: rgba(242, 244, 243, .85);
	font-size: 13px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .3s ease, transform .4s cubic-bezier(.2, .9, .25, 1); }
.klp-try-pill.on { opacity: 1; transform: none; }
.klp-try-pill i { flex: none; width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(242, 244, 243, .2); border-top-color: #61CAB8; animation: klpTrySpin .7s linear infinite; }

/* ───────── 新版：侧栏反馈入口（跟夜间模式走，用 klp.css 变量） ───────── */
.klp-try-entry { display: none; align-items: center; gap: 10px; margin-bottom: 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--soft); color: var(--soft-ink); text-decoration: none; transition: background var(--dur-1) var(--ease-io), transform var(--dur-1) var(--ease-io); }
.klp-side-bottom .klp-try-entry { display: flex; }
.klp-try-entry:hover { text-decoration: none; background: color-mix(in srgb, var(--brand) 22%, var(--soft)); }
.klp-try-entry:active { transform: scale(.98); }
.klp-try-entry-ic { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--brand); color: #fff; }
.klp-try-entry-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.klp-try-entry-tx b { font-size: 13.5px; font-weight: 600; }
.klp-try-entry-tx span { font-size: 12px; color: var(--text-3); }
.klp-try-entry-go { flex: none; opacity: .6; }

/* ───────── 新版：聚光灯 + 分享提示 ───────── */
.klp-try-shade { position: fixed; inset: 0; z-index: 2147483000; }
.klp-try-spot { position: fixed; z-index: 2147483001; border-radius: 14px; pointer-events: none; box-shadow: 0 0 0 200vmax rgba(8, 10, 10, .5); transition: left .75s cubic-bezier(.75, 0, .2, 1), top .75s cubic-bezier(.75, 0, .2, 1), width .75s cubic-bezier(.75, 0, .2, 1), height .75s cubic-bezier(.75, 0, .2, 1), opacity .3s ease; }
.klp-try-spot::before, .klp-try-spot::after { content: ""; position: absolute; inset: -2px; border-radius: 16px; border: 2px solid var(--brand); opacity: 0; }
.klp-try-spot.on::before { opacity: 1; transition: opacity .3s; }
.klp-try-spot.on::after { animation: klpTryPulse 1.8s ease-out .2s infinite; }

.klp-try-tip { position: fixed; z-index: 2147483002; width: 300px; padding: 18px 18px 16px; border-radius: var(--r-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-pop); font-family: var(--font); opacity: 0; transform: translateX(-12px) scale(.97); transform-origin: 0 100%; transition: opacity .3s ease, transform .5s cubic-bezier(.2, .9, .25, 1.04); }
.klp-try-tip.on { opacity: 1; transform: none; }
.klp-try-tip::before { content: ""; position: absolute; left: -7px; bottom: var(--arrow-b, 24px); width: 14px; height: 14px; background: var(--surface); transform: rotate(45deg); box-shadow: -1px 1px 0 var(--line); border-radius: 2px; }
.klp-try-tip.noarrow::before { display: none; }
.klp-try-tip-h { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; }
.klp-try-tip-h svg { color: var(--ink); flex: none; }
.klp-try-tip p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.klp-try-tip-acts { display: flex; gap: 8px; margin-top: 14px; }
.klp-try-tip-acts .k-btn { flex: 1; justify-content: center; }
.klp-try-point { position: absolute; left: -46px; bottom: calc(var(--arrow-b, 24px) - 10px); color: var(--brand); animation: klpTryNudge 1.1s ease-in-out infinite; }
.klp-try-tip.noarrow .klp-try-point { display: none; }

@keyframes klpTrySpin { to { transform: rotate(360deg); } }
@keyframes klpTryPulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.12, 1.4); opacity: 0; } }
@keyframes klpTryNudge { 50% { transform: translateX(-7px); } }

@media (max-width: 520px) {
	.klp-try-hero { height: 170px; padding: 18px 18px 0; }
	.klp-try-title { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.klp-try *, .klp-try *::before, .klp-try *::after, .klp-try-spot, .klp-try-spot::after, .klp-try-tip { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}