/* 记曲宝：iPhone 外壳、截图演示与时间线 */
.tp-base{background:linear-gradient(170deg,#ffffff 0%,#e9e9ee 100%)!important}
.tp-layer{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:translate(14%,-18%) rotate(6deg) scale(.9)}
.hero-reveal[data-film=bridging] .tp-layer{animation:tp-layer .8s cubic-bezier(.2,.8,.25,1) var(--d) forwards}
@keyframes tp-layer{to{opacity:1;transform:none}}
.brand img{transform:scale(1.25)}
/* 总览：缩进 iPhone */
.overview-story .zoom-stage{width:min(330px,36vh)}
.overview-story .mac-shell{aspect-ratio:330/706}
.overview-story .rp-blackout{display:none}
.mac-frame.tp-phone-frame{position:absolute;inset:0;border:12px solid #1d1d1f;border-radius:15%/7%;box-shadow:0 0 0 2px #3a3a3c,0 40px 100px rgba(0,0,0,.6);opacity:0;z-index:4;pointer-events:none}
.overview-story .mac-screen.rp-screen{left:3.6%;top:1.7%;width:92.8%;height:96.6%;border-radius:12%/5.6%}
.tp-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .45s}
/* 手机组件 */
.tp-phone{position:relative;border-radius:44px;background:#1d1d1f;padding:11px;box-shadow:0 0 0 1.5px #3a3a3c,0 30px 80px rgba(0,0,0,.55)}
.tp-scr{position:relative;border-radius:34px;overflow:hidden;aspect-ratio:1206/2622;background:#000}
.tp-tap{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(255,255,255,.35);border:2px solid rgba(255,255,255,.9);opacity:0;transform:scale(.4);pointer-events:none;z-index:5}
.tp-tap.on{animation:tp-tap .55s ease-out}
@keyframes tp-tap{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(1.3)}}
.tp-type{position:absolute;left:5%;right:5%;bottom:4.2%;height:4.6%;border-radius:999px;background:#2d3a37;color:#fff;font-size:13px;display:flex;align-items:center;padding:0 14px;opacity:0;transition:opacity .2s;z-index:4;font-family:var(--font-text)}
.tp-type.on{opacity:1}
.tp-toast{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.9);padding:12px 18px;border-radius:16px;background:rgba(30,30,32,.92);color:#fff;font-size:14px;font-weight:600;opacity:0;transition:opacity .25s,transform .25s;z-index:6;white-space:nowrap;font-family:var(--font-text)}
.tp-toast.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.tp-stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:48px;background:radial-gradient(ellipse at 50% 40%,#1d2230 0%,#0c0d10 70%);font-family:var(--font-text);color:#eee}
.tp-side{display:grid;gap:12px;width:300px}
.tp-side span{padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-size:15px;line-height:1.45;opacity:0;transform:translateX(-8px);transition:opacity .35s,transform .35s}
.tp-side span.on{opacity:1;transform:none}
.tp-side span b{display:block;font-size:12px;color:#9a9aa2;font-weight:600;margin-bottom:2px}
.tp-timer{position:absolute;right:28px;top:24px;font:600 26px ui-monospace,Menlo,monospace;color:#5fe08a}
.tp-timer small{display:block;font:500 12px var(--font-text);color:#8a8a8e;text-align:right}
/* 库卡片（复刻） */
.tp-cards{display:grid;gap:18px;align-content:start}
.tp-card{border-radius:22px;padding:20px 22px;background:var(--bg);color:#fff;display:grid;gap:12px;transition:opacity .2s;font-family:var(--font-text)}
.tp-card.is-lifted{opacity:.35}
.tp-card h4{margin:0;font-size:26px;line-height:1.35;font-weight:700}
.tp-card .tags{display:flex;gap:6px}.tp-card .tags span{padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.18);font-size:13px}
.tp-card .song{display:flex;align-items:center;gap:12px}
.tp-card .song i{width:46px;height:46px;border-radius:8px;background:var(--cv)}
.tp-card .song b{font-size:17px}.tp-card .song small{display:block;font-size:13px;opacity:.75}
.tp-card .song em{margin-left:auto;font-style:normal;padding:6px 14px;border-radius:999px;background:#fff;color:#111;font-size:14px;font-weight:600}
/* 时间线 */
.tp-tl{width:1496px;height:938px;background:#1f1f22;display:grid;grid-template-rows:auto 1fr;font-family:var(--font-text);color:#ddd}
.tp-tl-top{height:44px;display:flex;align-items:center;gap:14px;padding:0 16px;background:#17171a;border-bottom:1px solid #2c2c30}
.tp-tl-top img{width:22px}
.tp-tracks{padding:30px 40px;display:grid;gap:12px;align-content:start;width:1000px}
.tp-track{display:grid;grid-template-columns:70px 1fr;gap:10px;align-items:center}
.tp-track b{font:600 14px ui-monospace,Menlo,monospace;color:#9a9aa2}
.tp-lane{position:relative;height:84px;border-radius:8px;background:#26262a}
.tp-lane.is-over{outline:2px solid #8b7cf6;background:#2c2840}
.tp-clip{position:absolute;top:6px;bottom:6px;border-radius:6px;padding:8px 10px;font-size:13px;line-height:1.35;overflow:hidden;color:#111}
.tp-clip.v{background:#6d8fd6;color:#fff}.tp-clip.a{background:#4fb07a;color:#fff}
.tp-clip.m{background:linear-gradient(90deg,#ff6a2a,#ff9f0a);color:#fff;animation:entry-in .45s cubic-bezier(.2,.75,.2,1)}
.tp-clip.m small{display:block;opacity:.85}
.tp-head{position:absolute;top:-8px;bottom:-8px;width:2px;background:#ff453a;left:320px}
.tp-fit{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 40%,#1d2230 0%,#0c0d10 70%)}
.rp-demo .tp-stage{width:880px;height:580px}