@font-face { font-family: Smiley; src: url("fonts/smiley.woff2") format("woff2"); font-display: block; }
/* 演示播放窗 + Edigent 界面复刻（颜色、布局照着软件本体） */
.dm-bg { position: fixed; inset: 0; z-index: 100; background: rgba(6,5,10,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: grid; place-items: center; padding: 16px; opacity: 0; transition: opacity .35s; }
.dm-bg.on { opacity: 1; }
.dm-win { width: min(1240px, 100%); border-radius: 20px; overflow: hidden; transform: translateY(18px) scale(.98); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.dm-bg.on .dm-win { transform: none; }
.dm-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px 10px; }
.dm-head h3 { margin: 0; font-size: 17px; flex: 1; } .dm-head .k { font-size: 12px; color: var(--brand); letter-spacing: 2px; }
.dm-x { width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08); color: #fff; font-size: 18px; cursor: pointer; transition: background .2s, transform .3s; }
.dm-x:hover { background: rgba(255,255,255,.16); transform: rotate(90deg); }
.dm-view { position: relative; margin: 0 14px; border-radius: 12px; overflow: hidden; background: #0d0e11; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.dm-scale { position: absolute; left: 0; top: 0; width: 1280px; height: 760px; transform-origin: 0 0; }
.dm-cap { min-height: 48px; padding: 12px 20px 4px; font-size: 15px; color: #e9e3f7; text-align: center; transition: opacity .3s; }
.dm-cap b { color: var(--brand); }
.dm-ctl { display: flex; align-items: center; gap: 12px; padding: 6px 18px 16px; }
.dm-ctl button { width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; background: rgba(255,255,255,.08); font-size: 14px; transition: background .2s, transform .2s; }
.dm-ctl button:hover { background: rgba(179,136,255,.3); transform: scale(1.06); }
.dm-bar { flex: 1; height: 18px; position: relative; cursor: pointer; touch-action: none; background: linear-gradient(rgba(255,255,255,.12), rgba(255,255,255,.12)) center / 100% 4px no-repeat; }
.dm-bar:hover { background-size: 100% 6px; }
.dm-bar i { position: absolute !important; left: 0; top: 50%; transform: translateY(-50%); height: 4px !important; border-radius: 4px; }
.dm-bar:hover i { height: 6px !important; }
.dm-bar b { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(179,136,255,.35), 0 0 12px var(--brand); transform: scale(.0); transition: transform .2s; }
.dm-bar:hover b, .dm-bar:active b { transform: scale(1); }
.dm-ticks s { position: absolute; top: 50%; width: 2px; height: 10px; margin: -5px 0 0 -1px; background: rgba(255,255,255,.35); border-radius: 1px; }
.dm-time { font: 12px/1 ui-monospace, Consolas, monospace; color: var(--muted); min-width: 92px; text-align: center; }
.dm-ff *, .dm-ff *::before, .dm-ff *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; }
.dm-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7b4dff, var(--brand)); box-shadow: 0 0 10px var(--brand); }
.dm-list { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; padding: 0 18px 16px; }
.dm-list span { font-size: 12px; padding: 4px 10px; border-radius: 99px; background: rgba(255,255,255,.05); color: var(--muted); cursor: pointer; transition: all .25s; }
.dm-list span:hover { color: #fff; background: rgba(179,136,255,.18); } .dm-list span.on { color: #fff; background: rgba(179,136,255,.3); box-shadow: inset 0 0 0 1px rgba(179,136,255,.6); }
.dm-paused *, .dm-paused *::before, .dm-paused *::after { animation-play-state: paused !important; }

/* ---------- 复刻的软件界面 ---------- */
.rp { --bg: #121316; --panel: #1b1d22; --panel2: #23262c; --line: #2f333b; --line2: #3a3f49; --tx: #e8eaee; --mu: #9aa0ab; --fa: #6b717c;
  --ac: #4d7cff; --ai: #b388ff; --ok: #3ccf8e; --tfx: #ff8a3d; --ttext: #4d7cff; --tsfx: #e2b93b; --tvid: #5b6170;
  position: relative; width: 1280px; height: 760px; background: var(--bg); color: var(--tx); font: 13px/1.45 "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
  display: grid; grid-template-rows: 46px minmax(0, 1fr) 236px; overflow: hidden; text-align: left; user-select: none; }
.rp * { box-sizing: border-box; }
.rp-top { display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
.rp-top img { width: 26px; height: 26px; } .rp-top .bw { font: 700 17px 'Segoe UI', 'Microsoft YaHei UI', sans-serif; color: #fff; margin-right: 6px; } .rp-top .bw span { color: var(--ai); }
.rp-proj { color: var(--mu); padding: 0 10px; border-left: 1px solid var(--line); }
.rp-sp { flex: 1; }
.rp-tb { height: 28px; padding: 0 9px; display: inline-flex; align-items: center; gap: 4px; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; white-space: nowrap; transition: all .3s; }
.rp-tb i { font-style: normal; background: var(--line2); border-radius: 8px; padding: 0 6px; font-size: 11px; }
.rp-acct { height: 28px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border-radius: 14px; background: rgba(179,136,255,.16); color: #e2d4ff; font-size: 12px; }
.rp-acct b { width: 18px; height: 18px; border-radius: 50%; background: var(--ai); color: #1b1230; display: grid; place-items: center; font-size: 11px; }
.rp-exp { height: 28px; padding: 0 14px; display: inline-flex; align-items: center; background: var(--ac); border-radius: 6px; color: #fff; font-weight: 600; }

.rp-main { display: grid; grid-template-columns: 300px minmax(0, 1fr) 250px; min-height: 0; }
.rp-chat { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; position: relative; }
.rp-tabs { height: 38px; display: flex; align-items: center; gap: 16px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.rp-tabs b { font-weight: 600; color: var(--mu); padding: 9px 0; border-bottom: 2px solid transparent; } .rp-tabs b.on { color: var(--tx); border-color: var(--ai); }
.rp-tabs b i { font-style: normal; font-size: 11px; background: var(--line2); border-radius: 8px; padding: 0 5px; margin-left: 3px; }
.rp-msgs { flex: 1; overflow: hidden; padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.rp-msg { max-width: 92%; padding: 8px 10px; border-radius: 10px; white-space: pre-wrap; word-break: break-word; animation: rpIn .35s cubic-bezier(.2,.8,.2,1); }
@keyframes rpIn { from { opacity: 0; transform: translateY(8px); } }
.rp-msg.u { align-self: flex-end; background: #2b3a66; border-bottom-right-radius: 3px; }
.rp-msg.u .vt { font-size: 11px; color: var(--mu); margin-bottom: 2px; }
.rp-msg.a { align-self: flex-start; background: var(--panel2); border: 1px solid var(--line); border-bottom-left-radius: 3px; }
.rp-msg .who { font-size: 11px; color: var(--ai); margin-bottom: 2px; }
.rp-msg .st { font-size: 12px; color: var(--mu); display: flex; align-items: center; gap: 6px; }
.rp-msg .st i { width: 18px; height: 6px; background: radial-gradient(circle, var(--ai) 2px, transparent 2.5px) 0 0 / 6px 6px repeat-x; animation: rpDots 1s steps(3) infinite; }
@keyframes rpDots { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.rp-msg b.h { color: var(--ai); font-weight: 600; }
.rp-chg { margin-top: 8px; border: 1px solid var(--line2); border-radius: 8px; padding: 6px 8px; background: #1f2229; font-size: 12px; }
.rp-chg ul { margin: 4px 0 6px; padding-left: 16px; color: var(--mu); }
.rp-btn { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 6px; font-size: 12px; border: 1px solid var(--line2); background: transparent; color: var(--tx); transition: all .2s; }
.rp-btn.p { background: var(--ac); border-color: var(--ac); color: #fff; font-weight: 600; }
.rp-btn.press { transform: scale(.94); filter: brightness(1.25); }
.rp-btn.done { background: transparent; border-color: var(--ok); color: var(--ok); }
.rp-row { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; align-items: center; }
.rp-card { margin-top: 8px; padding: 9px 11px; border-radius: 10px; background: linear-gradient(160deg, rgba(179,136,255,.13), rgba(179,136,255,.04)); border: 1px solid rgba(179,136,255,.35); white-space: normal; }
.rp-card ol { margin: 2px 0 0; padding-left: 18px; line-height: 1.7; } .rp-card ol li::marker { color: var(--ai); font-weight: 600; }
.rp-card .t { font-weight: 600; margin-bottom: 2px; }
.rp-sfx { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; white-space: normal; }
.rp-sfx .hd { font-size: 12px; color: var(--fa); }
.rp-sfx .c { display: flex; align-items: center; gap: 6px; background: #1f2229; border: 1px solid var(--line2); border-radius: 8px; padding: 5px 8px; font-size: 12px; transition: border-color .3s; }
.rp-sfx .c.cur { border-color: rgba(179,136,255,.55); } .rp-sfx .c .nm { flex: 1; } .rp-sfx .c .nm i { color: var(--fa); font-style: normal; font-size: 11px; } .rp-sfx .c .nm b { color: var(--ai); font-weight: 500; font-size: 11px; }
.rp-sfx .pl { width: 26px; height: 22px; border-radius: 6px; border: 1px solid var(--line2); display: grid; place-items: center; font-size: 10px; }
.rp-sfx .pl.on { background: rgba(179,136,255,.25); border-color: var(--ai); }
.rp-mem { margin-top: 8px; padding: 8px 10px; border: 1px dashed var(--line2); border-radius: 8px; white-space: normal; }
.rp-comp { border-top: 1px solid var(--line); padding: 10px; }
.rp-input { min-height: 46px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; transition: border-color .3s; }
.rp-input.f { border-color: var(--ac); } .rp-input .ph { color: var(--fa); } .rp-input .tx:not(:empty) + .ph, .rp-input.has .ph { display: none; }
.rp-input .tx .mn { color: var(--ai); background: rgba(179,136,255,.14); border-radius: 4px; padding: 0 3px; }
.rp-input .caret { display: inline-block; width: 1.5px; height: 15px; background: var(--tx); vertical-align: -3px; animation: rpBlink 1s steps(1) infinite; opacity: 0; } .rp-input.f .caret { opacity: 1; }
@keyframes rpBlink { 50% { visibility: hidden; } }
.rp-crow { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.rp-mic { height: 28px; padding: 0 10px; border-radius: 14px; background: var(--panel2); border: 1px solid var(--line); display: inline-flex; align-items: center; gap: 5px; transition: all .3s; }
.rp-mic.on { background: rgba(255,92,108,.18); border-color: #ff5c6c; color: #ffb3bb; }
.rp-mic .wv { display: none; gap: 2px; align-items: center; height: 14px; } .rp-mic.on .wv { display: inline-flex; }
.rp-mic .wv i { width: 2px; height: 30%; background: #ff8a95; border-radius: 1px; animation: rpWv .5s ease-in-out infinite alternate; } .rp-mic .wv i:nth-child(2) { animation-delay: -.2s; } .rp-mic .wv i:nth-child(3) { animation-delay: -.35s; } .rp-mic .wv i:nth-child(4) { animation-delay: -.1s; }
@keyframes rpWv { to { height: 100%; } }
.rp-send { margin-left: auto; height: 26px; padding: 0 12px; border-radius: 6px; background: var(--ac); color: #fff; font-weight: 600; display: inline-flex; align-items: center; transition: transform .15s, filter .2s; }

.rp-center { display: flex; flex-direction: column; min-width: 0; background: #0b0c0e; }
.rp-stage { flex: 1; display: grid; place-items: center; min-height: 0; position: relative; overflow: hidden; }
.rp-frame { position: relative; width: 600px; aspect-ratio: 16 / 9; overflow: hidden; background: #000; transition: width .8s cubic-bezier(.2,.8,.2,1), aspect-ratio .8s cubic-bezier(.2,.8,.2,1); }
.rp-frame.v916 { width: 214px; aspect-ratio: 9 / 16; }
.rp-scene { position: absolute; left: 50%; top: 50%; width: 600px; aspect-ratio: 16 / 9; transform: translate(-50%, -50%); transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.rp-frame.v916 .rp-scene { transform: translate(-50%, -50%) scale(.357); }
.rp-frame.v916 .rp-blur { opacity: 1; }
.rp-blur { position: absolute; inset: -20px; opacity: 0; transition: opacity .8s; filter: blur(16px) brightness(.6); background: linear-gradient(#7cc8f2, #c9eafa 42%, #55bdea 56%, #a5d880 63%); }
.rp-scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rp-sub { position: absolute; left: 0; right: 0; bottom: 6%; text-align: center; font-size: 15px; color: #fff; text-shadow: 0 1px 3px #000, 0 0 2px #000; transition: opacity .2s; }
.rp-trans { height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-top: 1px solid var(--line); background: var(--panel); color: var(--mu); }
.rp-trans .pb { width: 28px; height: 28px; border-radius: 50%; background: var(--panel2); display: grid; place-items: center; color: var(--tx); font-size: 11px; }
.rp-props { background: var(--panel); border-left: 1px solid var(--line); padding: 12px; overflow: hidden; }
.rp-props .h { font-weight: 600; margin-bottom: 8px; } .rp-props .m { color: var(--mu); font-size: 12px; line-height: 1.7; }
.rp-props .fld { margin: 8px 0; } .rp-props .fld label { display: block; color: var(--fa); font-size: 11px; margin-bottom: 3px; }
.rp-props .fld .v { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; transition: all .3s; } .rp-props .fld .v.chg { border-color: var(--ai); box-shadow: 0 0 0 3px rgba(179,136,255,.2); }
.rp-props .sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-right: 5px; transition: background .4s; }
.rp-curve { width: 100%; height: 90px; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; }
.rp-curve path { fill: none; stroke: #e2b93b; stroke-width: 2; stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1.4s ease; } .rp-curve.on path { stroke-dashoffset: 0; }
.rp-curve circle { fill: #e2b93b; opacity: 0; transition: opacity .3s 1.2s; } .rp-curve.on circle { opacity: 1; }

/* 时间线 */
.rp-tl { background: var(--panel); border-top: 1px solid var(--line); display: grid; grid-template-rows: 34px 20px 1fr; position: relative; }
.rp-tlbar { display: flex; align-items: center; gap: 5px; padding: 0 10px; border-bottom: 1px solid var(--line); color: var(--mu); font-size: 12px; }
.rp-tlbar span { height: 24px; padding: 0 8px; display: inline-flex; align-items: center; gap: 4px; border-radius: 5px; background: var(--panel2); border: 1px solid var(--line); transition: all .3s; }
.rp-tlbar span.on { border-color: var(--ac); color: #fff; } .rp-tlbar kbd { font: 10px monospace; color: var(--fa); }
.rp-ruler { margin-left: 110px; position: relative; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(90deg, var(--line2) 0 1px, transparent 1px 10%) ; background-size: 100% 6px; background-repeat: no-repeat; background-position: 0 100%; font-size: 10px; color: var(--fa); }
.rp-ruler b { position: absolute; top: 2px; font-weight: 400; }
.rp-tracks { position: relative; display: flex; flex-direction: column; }
.rp-trow { flex: 1; display: flex; border-bottom: 1px solid #23262c; min-height: 0; }
.rp-trow .lb { width: 110px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 10px; color: var(--mu); font-size: 12px; background: #191b20; border-right: 1px solid var(--line); }
.rp-trow .lb .lk { margin-left: auto; font-size: 10px; opacity: .5; }
.rp-trow .ln { flex: 1; position: relative; }
.rp-blk { position: absolute; top: 3px; bottom: 3px; border-radius: 5px; padding: 0 6px; font-size: 11px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; animation: rpBlk .45s cubic-bezier(.3,1.5,.5,1); transition: all .4s, opacity .3s; transform-origin: left center; }
@keyframes rpBlk { from { transform: scaleX(0); opacity: 0; } }
.rp-blk.fx { background: var(--tfx); } .rp-blk.tx { background: var(--ttext); } .rp-blk.sfx { background: var(--tsfx); color: #2a2208; }
.rp-blk.vid { background: linear-gradient(90deg, #4b4462 0 12%, #3c3552 12% 25%, #534a6e 25% 40%, #3c3552 40% 55%, #4b4462 55% 70%, #3c3552 70% 85%, #534a6e 85%); color: #d8d0ee; animation: none; }
.rp-blk.sel { box-shadow: 0 0 0 2px #fff; } .rp-blk.dim { opacity: .45; } .rp-blk.gone { opacity: 0; transform: scaleY(.3); }
.rp-blk .lck { font-size: 10px; }
.rp-blk.hot { box-shadow: 0 0 0 2px var(--ai), 0 0 14px var(--ai); }
.rp-head { position: absolute; top: 54px; bottom: 0; width: 2px; background: #ff5c6c; left: calc(110px + (100% - 110px) * var(--p, 0)); z-index: 5; }
.rp-head::before { content: ""; position: absolute; top: -6px; left: -5px; border: 6px solid transparent; border-top-color: #ff5c6c; }

/* 画面上的花字 */
.rp-hz { --r: -4deg; position: absolute; transform: translate(-50%, -50%) scale(0) rotate(var(--r)); font: 30px/1.05 Smiley, "Noto Sans SC", "Microsoft YaHei UI", sans-serif; white-space: nowrap; letter-spacing: 1px; z-index: 3; isolation: isolate; color: #FFDE1A;
  transition: left 1.2s cubic-bezier(.4,0,.2,1), top 1.2s cubic-bezier(.4,0,.2,1), font-size .4s cubic-bezier(.3,1.6,.5,1), color .3s, background .3s; }
.rp-hz::before, .rp-hz::after { content: attr(data-t); position: absolute; left: 0; top: 0; z-index: -1; color: #111; -webkit-text-stroke: 9px #111; pointer-events: none; }
.rp-hz::after { z-index: -2; transform: translate(2px, 5px); }
.rp-hz.in { animation: rpPop .42s cubic-bezier(.3,1.6,.5,1) forwards; }
.rp-hz.out { animation: rpOut .3s forwards; }
@keyframes rpPop { 0% { transform: translate(-50%, -50%) scale(.2) rotate(calc(var(--r) * 3)); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1) rotate(var(--r)); opacity: 1; } }
@keyframes rpOut { from { transform: translate(-50%, -50%) scale(1) rotate(var(--r)); } to { transform: translate(-50%, -50%) scale(0) rotate(12deg); opacity: 0; } }
.rp-hz.y { color: #FFDE1A; } .rp-hz.b { color: #36C3F2; } .rp-hz.w { color: #fff; }
.rp-hz.big { font-size: 40px; }
/* 弹幕气泡款 */
.rp-hz.bub { font: 700 15px/1 "Noto Sans SC", "Microsoft YaHei UI", sans-serif; letter-spacing: .5px; color: #111; background: #fff; padding: 7px 14px; border: 3.5px solid #111; border-radius: 12px; box-shadow: 0 5px 0 #111; }
.rp-hz.bub::before, .rp-hz.bub::after { content: none; }
.rp-hz.bub.y { background: #FFDE1A; color: #111; } .rp-hz.bub.b { background: #36C3F2; color: #111; }
/* 没套方案前的“裸字” */
.rp-hz.plain { font: 700 22px/1.1 "Microsoft YaHei UI", sans-serif; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.rp-hz.plain::before, .rp-hz.plain::after { content: none; }
.rp-hz.sel { outline: 2px dashed #fff; outline-offset: 6px; }
.rp-hz.bad { outline: 2.5px solid #ff4d5e; outline-offset: 6px; }
/* 音效字（爆炸框） */
.rp-burst { position: absolute; z-index: 4; width: 74px; height: 66px; transform: translate(-50%, -50%) scale(0) rotate(-8deg); display: grid; place-items: center; animation: rpBurst .4s cubic-bezier(.3,1.7,.5,1) forwards;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Cpath d='M50 3 L60 25 L84 12 L76 36 L98 44 L76 54 L86 78 L61 66 L50 88 L40 66 L14 78 L24 54 L2 44 L24 36 L16 12 L40 25Z' fill='%23FFDE1A' stroke='%23111' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.rp-burst span { font: 20px/1 Smiley, sans-serif; color: #111; transform: rotate(-4deg); }
@keyframes rpBurst { to { transform: translate(-50%, -50%) scale(1) rotate(-8deg); } }
.rp-tag { position: absolute; z-index: 6; font-size: 11px; padding: 2px 7px; border-radius: 5px; transform: translate(-50%, 0); white-space: nowrap; animation: rpIn .3s; }
.rp-tag.r { background: #ff5c6c; color: #fff; } .rp-tag.g { background: var(--ok); color: #082015; } .rp-tag.p { background: var(--ai); color: #1b1230; }
.rp-box { position: absolute; z-index: 4; border: 2px solid var(--ai); border-radius: 8px; box-shadow: 0 0 14px rgba(179,136,255,.6); animation: rpIn .3s; }
.rp-box.r { border-color: #ff5c6c; box-shadow: 0 0 14px rgba(255,92,108,.6); }
.rp-scan { position: absolute; inset: 0; z-index: 7; pointer-events: none; background: linear-gradient(180deg, transparent 0, rgba(179,136,255,.0) 40%, rgba(179,136,255,.35) 50%, transparent 52%); background-size: 100% 220%; animation: rpScan 1.4s linear infinite; }
@keyframes rpScan { from { background-position: 0 120%; } to { background-position: 0 -120%; } }
.rp-flash { position: absolute; inset: 0; background: #fff; opacity: 0; z-index: 8; animation: rpFlash .35s; pointer-events: none; }
@keyframes rpFlash { 30% { opacity: .35; } }
.rp-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px var(--ok); transform: translate(-50%, -50%); z-index: 4; animation: rpDotF 1.6s forwards; }
@keyframes rpDotF { 70% { opacity: 1; } to { opacity: 0; } }
.rp-sfxtag { position: absolute; z-index: 6; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: #111; color: #FFDE1A; box-shadow: 0 0 0 2px #FFDE1A; transform: translate(-50%, -50%); animation: rpSfx 1.4s forwards; }
@keyframes rpSfx { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 25%, 75% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -90%); } }

/* 浮层：拖进来的文件、选位置、参考页、看画面的缩略图 */
.rp-drop { position: absolute; inset: 0; z-index: 20; background: rgba(10,11,14,.78); display: grid; grid-template-columns: repeat(4, 180px); gap: 14px; place-content: center; animation: rpIn .25s; }
.rp-drop div { height: 130px; border: 2px dashed var(--line2); border-radius: 12px; display: grid; place-items: center; text-align: center; color: var(--mu); font-size: 13px; transition: all .25s; }
.rp-drop div.on { border-color: var(--ai); color: #fff; background: rgba(179,136,255,.15); transform: scale(1.04); }
.rp-file { position: absolute; z-index: 30; padding: 8px 12px; border-radius: 8px; background: #2a2e36; box-shadow: 0 10px 30px rgba(0,0,0,.5); font-size: 12px; transition: left .9s cubic-bezier(.4,0,.2,1), top .9s cubic-bezier(.4,0,.2,1), opacity .3s; }
.rp-pages { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
.rp-pages div { aspect-ratio: 4/3; border-radius: 6px; background: #BFE3F6; position: relative; overflow: hidden; animation: rpIn .4s; }
.rp-pages div i { position: absolute; border: 2px solid #111; border-radius: 4px; }
.rp-pages i.t { left: 8%; top: 9%; width: 46%; height: 13%; background: #FFDE1A; } .rp-pages i.w1 { left: 8%; top: 30%; width: 56%; height: 44%; background: #fff; box-shadow: 0 3px 0 #111; }
.rp-pages i.w2 { right: 8%; top: 30%; width: 22%; height: 22%; background: #36C3F2; } .rp-pages i.s { left: 8%; right: 8%; bottom: 8%; height: 9%; background: #111; }
.rp-pages .pg-b i.t { background: #36C3F2; } .rp-pages .pg-k i.w1 { background: #111; } .rp-pages .pg-w i.w2 { background: #FFDE1A; border-radius: 50%; }
.rp-strip { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 9; display: flex; gap: 8px; padding: 8px; border-radius: 10px; background: rgba(20,21,26,.92); box-shadow: 0 0 0 1px var(--line2); animation: rpIn .3s; }
.rp-strip div { flex: 1; aspect-ratio: 16/9; border-radius: 5px; overflow: hidden; position: relative; background: linear-gradient(#7cc8f2 0 46%, #55bdea 46% 55%, #a5d880 55%); }
.rp-strip div i { position: absolute; bottom: 0; width: 22%; height: 52%; border-radius: 50% 50% 0 0; background: #ff8a5b; border: 1.5px solid #1d1d1d; left: 18%; } .rp-strip div i + i { left: auto; right: 18%; background: #7b6cf0; }
.rp-strip div span { position: absolute; left: 4px; bottom: 2px; font-size: 10px; color: #fff; text-shadow: 0 1px 2px #000; }
.rp-script { position: absolute; left: 10px; top: 46px; width: 280px; z-index: 9; background: rgba(20,21,26,.96); border: 1px solid var(--line2); border-radius: 10px; padding: 8px 10px; animation: rpIn .3s; font-size: 12px; }
.rp-script p { margin: 3px 0; color: var(--mu); transition: all .3s; padding: 2px 4px; border-radius: 4px; } .rp-script p.on { color: #fff; background: rgba(179,136,255,.18); }
.rp-script p em { font-style: normal; color: var(--fa); margin-right: 6px; }

/* 鼠标、指给你看的光圈 */
.rp-cur { position: absolute; z-index: 50; width: 20px; height: 20px; left: 640px; top: 400px; transition: left .7s cubic-bezier(.4,0,.2,1), top .7s cubic-bezier(.4,0,.2,1), opacity .3s; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.rp-cur.hide { opacity: 0; }
.rp-click { position: absolute; z-index: 49; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2px solid #fff; animation: rpClick .5s forwards; pointer-events: none; }
@keyframes rpClick { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.rp-ring { position: absolute; z-index: 40; pointer-events: none; border-radius: 10px; border: 2px solid var(--ai); box-shadow: 0 0 0 4px rgba(179,136,255,.25), 0 0 24px 4px rgba(179,136,255,.6); animation: rpRing 1s ease-in-out infinite; }
@keyframes rpRing { 50% { box-shadow: 0 0 0 8px rgba(179,136,255,.12), 0 0 34px 8px rgba(179,136,255,.75); } }
.rp-key { position: absolute; z-index: 45; padding: 4px 10px; border-radius: 6px; background: rgba(255,255,255,.92); color: #111; font: 600 12px monospace; box-shadow: 0 4px 12px rgba(0,0,0,.4); animation: rpIn .2s; }

/* 画面里的人 */
.ch .pupil, .ch .brow, .ch .head, .ch .mouth, .ch .sweat { transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s; transform-box: fill-box; transform-origin: center; }
.ch .mouth { opacity: 0; } .ch .m-n { opacity: 1; }
.ch.smug .head { transform: rotate(-7deg) translateY(-3px); } .ch.smug .m-n { opacity: 0; } .ch.smug .m-s { opacity: 1; } .ch.smug .brow { transform: translateY(-3px); }
.ch.roll .pupil { transform: translate(2px, -5px); } .ch.roll .brow.l { transform: rotate(-12deg) translateY(-2px); } .ch.roll .m-n { opacity: 0; } .ch.roll .m-f { opacity: 1; }
.ch.guilty .pupil { transform: translateX(-5px); } .ch.guilty .sweat { opacity: 1; transform: translateY(4px); } .ch.guilty .brow.l { transform: rotate(10deg); } .ch.guilty .brow.r { transform: rotate(-10deg); }
.ch.shock .m-n { opacity: 0; } .ch.shock .m-o { opacity: 1; } .ch.shock .brow { transform: translateY(-5px); }
.ch.talk .m-n, .ch.talk .m-s, .ch.talk .m-f { opacity: 0 !important; } .ch.talk .m-t { animation: rpTalk .22s steps(2) infinite; }
@keyframes rpTalk { 0% { opacity: 1; } 100% { opacity: 0; } }
.ch .sweat { opacity: 0; }
.ch-pos { transition: transform 2.6s cubic-bezier(.45,0,.25,1); }
.ch-turn .head { transition: transform .9s cubic-bezier(.4,0,.2,1); }

/* 置景：云飘、水流 */
.rp-scene .cl { animation: rpCloud 26s ease-in-out infinite alternate; } .rp-scene .c2 { animation-duration: 32s; animation-direction: alternate-reverse; } .rp-scene .c3 { animation-duration: 20s; }
@keyframes rpCloud { to { transform: translateX(34px); } }
.rp-scene .rip { stroke-dasharray: 24 14; animation: rpRip 3s linear infinite; } @keyframes rpRip { to { stroke-dashoffset: -76; } }
.rp-sub { font-family: "Noto Sans SC", "Microsoft YaHei UI", sans-serif; font-weight: 700; color: #fff; -webkit-text-stroke: 3px #111; paint-order: stroke fill; text-shadow: none; }

/* 工程台 + 导入窗口（照软件里的真实页面） */
.rp-studio { position: absolute; left: 0; right: 0; top: 46px; bottom: 0; z-index: 25; background: var(--bg); padding: 18px 22px; animation: rpIn .3s; transition: opacity .35s; }
.rp-studio.out { opacity: 0; }
.st-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .st-head b { font-size: 18px; } .st-head .st-t { color: var(--mu); } .st-head i { font-style: normal; color: var(--fa); }
.st-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.st-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px; animation: rpIn .35s; }
.st-card .th { aspect-ratio: 16/9; border-radius: 8px; margin-bottom: 8px; position: relative; overflow: hidden; background: #a5d880; }
.st-card .th svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-card .nm { font-weight: 600; } .st-card .mt { color: var(--mu); font-size: 12px; margin: 2px 0 8px; min-height: 18px; } .st-card .mt .ok { color: var(--ok); font-weight: 600; }
.rp-modal { position: absolute; inset: 0; z-index: 30; background: rgba(8,9,11,.66); display: grid; place-items: center; animation: rpIn .2s; }
.rp-modal .mw { width: 560px; background: var(--panel); border: 1px solid var(--line2); border-radius: 14px; padding: 18px 20px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.rp-modal h4 { margin: 0 0 12px; font-size: 16px; }
.imp-sec { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; } .imp-sec h5 { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.imp-sec .files { margin-top: 8px; font-size: 12px; color: var(--mu); } .imp-sec .files em { color: var(--fa); font-style: normal; }
.imp-sec .files div { padding: 4px 8px; background: var(--panel2); border-radius: 6px; color: var(--tx); animation: rpIn .25s; } .imp-sec .files div.hot { box-shadow: 0 0 0 1px #FFDE1A; }
.rp-modal .hint { font-size: 12px; color: var(--fa); margin: 4px 0 12px; } .rp-row.end { justify-content: flex-end; }
.rp-chat { position: relative; }
.rp-refs { position: absolute; left: 0; right: 0; top: 40px; bottom: 0; z-index: 5; background: var(--panel); padding: 12px; animation: rpIn .25s; }
.rp-refs .rc { display: flex; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; } .rp-refs .pg { width: 46px; height: 60px; border-radius: 4px; background: #BFE3F6; border: 2px solid #111; box-shadow: inset 0 10px 0 #FFDE1A; }
.rp-refs .mu { color: var(--mu); font-size: 12px; } .rp-refs .ok { color: var(--ok); font-size: 12px; font-weight: 600; }
.rp-refs .lb { margin: 12px 0 6px; color: var(--fa); font-size: 12px; } .rp-refs .nt { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.8; }
/* 片尾 */
.rp-end { position: absolute; inset: 0; z-index: 60; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; background: radial-gradient(60% 70% at 50% 40%, #2a1d4a, #0c0b12); animation: rpIn .6s; }
.rp-end img { width: 92px; } .rp-end .bw { font-size: 40px; font-weight: 800; } .rp-end .bw span { color: #b388ff; }
.rp-end h2 { margin: 6px 0 4px; font-size: 44px; line-height: 1.25; } .rp-end h2 em { font-style: normal; color: #b388ff; }
.rp-end .dl { padding: 10px 26px; border-radius: 99px; background: linear-gradient(135deg, #7b4dff, #b388ff); font-weight: 700; font-size: 18px; }
.dm-mone .dm-list { display: none; }