/* Animated click-path player (scoped). */
/* ---------------- player ---------------- */
.player{margin-top:8px}.stagewrap{position:relative;width:100%;overflow:hidden;border-radius:10px;border:2px solid var(--navy);background:#eef1f6}
.stage{position:absolute;left:0;top:0;width:900px;height:500px;transform-origin:0 0;font-size:12px;line-height:1.35;color:#222}
.pointer{position:absolute;left:450px;top:470px;z-index:50;transition:left .75s cubic-bezier(.4,.1,.2,1),top .75s cubic-bezier(.4,.1,.2,1);pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.pointer.click::after{content:"";position:absolute;left:-10px;top:-10px;width:24px;height:24px;border-radius:50%;border:3px solid var(--coral);animation:rip .5s ease-out}
@keyframes rip{from{transform:scale(.3);opacity:1}to{transform:scale(1.8);opacity:0}}
.hl{outline:3px solid var(--coral)!important;outline-offset:2px;box-shadow:0 0 0 6px rgba(232,115,90,.25)!important;animation:pulse 1s ease-in-out infinite;position:relative;z-index:5}
@keyframes pulse{50%{box-shadow:0 0 0 10px rgba(232,115,90,.08)}}
.cap{min-height:48px;margin-top:8px;background:var(--navy);color:#fff;border-radius:8px;padding:10px 14px;font-size:16px}.capn{font-weight:800;color:#ffc2b3}
.ctrls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.ctrls button{background:#fff;border:2px solid var(--navy);color:var(--navy);border-radius:8px;padding:6px 12px;font-weight:700;font-size:14px}.ctrls button:hover{background:var(--teall)}
.ctrls .b-play{background:var(--teal);border-color:var(--teal);color:#fff}.ctrls .b-replay{background:var(--coralD);border-color:var(--coralD);color:#fff}.spd{font-size:14px;margin-left:auto}
.steps{columns:2;column-gap:24px;font-size:14px;margin:10px 0 0;padding-left:30px}@media(max-width:800px){.steps{columns:1}}
.steps li{break-inside:avoid}.steps button{display:block;width:100%;vertical-align:top;background:none;border:0;padding:2px 4px;text-align:left;color:var(--ink);border-radius:4px}.steps button:hover{background:var(--teall)}
.steps li.cur button{background:var(--corall);font-weight:700}.steps li.done button{color:var(--mut)}
.player.rich .stagewrap{border-color:var(--teal2);box-shadow:0 0 0 4px var(--teall)}
.stage .app{position:absolute;inset:0;background:#fff;display:flex;flex-direction:column}
.stage .tb{display:flex;align-items:center;gap:10px;background:#e7ebf2;border-bottom:1px solid #cfd6e2;padding:6px 10px;height:32px;flex:none}
.stage .dots i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#c4cbd8;margin-right:4px}
.stage .appname{font-weight:700;color:#334}
.stage .ill{margin-left:auto;background:var(--corall);color:var(--coralD);border:1px dashed var(--coralD);font-weight:800;font-size:11px;padding:2px 8px;border-radius:4px}
.stage .body{display:flex;flex:1;min-height:0;position:relative}
.stage .lp{width:150px;flex:none;background:#f4f6fa;border-right:1px solid #e1e5ec;padding:8px}
.stage .nv,.stage .nbtn{padding:6px 8px;border-radius:6px;margin:2px 0}
.stage .nv.sub{margin-left:12px}
.stage .nv.sm{font-size:11px}
.stage .nbtn{background:#fff;border:1px solid #d5dbe5;font-weight:600}
.stage .nv.on,.stage .nv.sub.on{background:var(--teall);font-weight:700}
.stage .app .muted{color:#7a8292}
.stage .center{text-align:center;margin-top:60px}
.stage .mn{flex:1;display:flex;flex-direction:column;padding:10px 14px;min-width:0;position:relative}
.stage .mode{font-weight:700;color:var(--navy);font-size:13px}
.stage .conv{flex:1;overflow:hidden;padding:6px 0;display:flex;flex-direction:column;gap:6px}
.stage .msg{border-radius:10px;padding:7px 10px;max-width:92%}
.stage .msg.u{align-self:flex-end;background:var(--navy);color:#fff;max-width:70%;font-size:11px}
.stage .msg.r{background:#f3f5f9;border:1px solid #e1e5ec}
.stage .rl{font-size:10px;font-weight:800;color:var(--teal);text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
.stage .rb{margin:0;padding-left:16px}
.stage .rb li{margin:2px 0}
.stage .cite{display:inline-block;background:var(--teal);color:#fff;border-radius:3px;font-size:9px;padding:0 3px;margin-left:2px}
.stage .composer{position:relative}
.stage .chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:5px}
.stage .chip{display:inline-flex;align-items:center;gap:4px;background:#eef2f7;border:1px solid #d5dbe5;border-radius:6px;padding:3px 6px;font-size:11px}
.stage .pbox{display:flex;align-items:center;gap:8px;border:2px solid #c9d1de;border-radius:12px;padding:7px 10px;background:#fff}
.stage .plus{font-size:18px;font-weight:700;width:24px;height:24px;display:grid;place-items:center;border-radius:6px;background:#eef1f6}
.stage .ptext,.stage .ptext2{flex:1;color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage .ptext2{display:block;border:1px solid #c9d1de;border-radius:8px;padding:6px 8px;background:#fff;margin:6px 0;white-space:normal;max-height:70px;overflow:hidden}
.stage .send{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--teal);color:#fff;flex:none}
.stage .menu,.stage .menu2{position:absolute;background:#fff;border:1px solid #cfd6e2;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.15);padding:4px;z-index:20}
.stage .menu{bottom:46px;left:0;width:240px}
.stage .mi{padding:6px 8px;border-radius:5px}
.stage .menu2{width:180px;right:20px;top:44px}
.stage .dlg{position:absolute;left:250px;top:110px;width:420px;background:#fff;border:1px solid #b9c2d2;border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.25);z-index:30;padding:10px}
.stage .dlgt{font-weight:700;margin-bottom:6px}
.stage .frow{display:flex;align-items:center;gap:8px;padding:6px;border-radius:6px;border:1px solid transparent}
.stage .frow.on{background:var(--teall);border-color:var(--teal2)}
.stage .cb{width:14px;height:14px;border:2px solid #8a93a5;border-radius:3px;flex:none}
.stage .on>.cb{background:var(--teal);border-color:var(--teal);box-shadow:inset 0 0 0 2px #fff}
.stage .dlgb{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.stage .btn{display:inline-block;border:1px solid #b9c2d2;border-radius:6px;padding:4px 10px;background:#fff;font-weight:600}
.stage .btn.pri{background:var(--teal);color:#fff;border-color:var(--teal)}
.stage .btn.sm{font-size:10px;padding:2px 6px}
.stage .fi{display:inline-block;font-size:8px;font-weight:800;color:#fff;border-radius:3px;padding:2px 3px;min-width:18px;text-align:center}
.stage .fi.w{background:#2b579a}
.stage .fi.x{background:#217346}
.stage .fi.i{background:#7a5af5}
.stage .fi.p{background:#b30b00}
.stage .fi.t{background:#5a6475}
.stage .fi.f{background:#d29a00}
.stage .fi.pp{background:#c43e1c}
.stage table.mini{border-collapse:collapse;width:100%;font-size:11px;background:#fff}
.stage table.mini th,.stage table.mini td{border:1px solid #dfe3ea;padding:3px 5px;text-align:left}
.stage table.mini th{background:#eef1f6}
.stage .bad{color:#b3261e;font-weight:700}
.stage .warn{color:#9a5b00;font-weight:700}
.stage .tag{display:inline-block;font-size:10px;background:#fff3d6;border-radius:4px;padding:1px 4px}
.stage .srcpop{position:absolute;right:16px;top:60px;width:300px;background:#fffef6;border:2px solid #e6c55a;border-radius:8px;padding:8px;z-index:25;box-shadow:0 6px 18px rgba(0,0,0,.15)}
.stage .note{background:#fff3d6;border-radius:6px;padding:5px 8px;font-weight:600}
.stage .srcline{margin-top:4px;font-size:11px}
.stage .prog{list-style:none;padding:0;margin:0}
.stage .prog li{margin:2px 0;color:#2f6f3a}
.stage .ribbon{background:#f4f6fa;border-bottom:1px solid #dde2ea;padding:4px 10px;flex:none}
.stage .tabs{display:flex;gap:4px}
.stage .tab{padding:3px 10px;border-radius:5px 5px 0 0}
.stage .tab.on{background:#fff;font-weight:700;border:1px solid #dde2ea;border-bottom:0}
.stage .rbtns{display:flex;gap:6px;background:#fff;border:1px solid #dde2ea;padding:5px}
.stage .rbtn{border:1px solid #d5dbe5;border-radius:5px;padding:3px 9px;background:#fff}
.stage .rbtn.cop{background:linear-gradient(90deg,#e3f3f2,#fdece7);font-weight:700;border-color:var(--teal2)}
.stage .docarea{flex:1;display:flex;justify-content:center;background:#e9edf3;padding:12px;position:relative;min-height:0}
.stage .margin{position:absolute;left:160px;top:40px;width:26px;height:26px;border-radius:50%;background:var(--teall);border:2px solid var(--teal2);display:grid;place-items:center;font-weight:900;color:var(--teal)}
.stage .page{width:520px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.12);padding:20px 26px;position:relative;overflow:hidden}
.stage .dlg2,.stage .ver{border:2px solid var(--teal2);border-radius:10px;padding:8px;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.stage .ver{position:absolute;left:30px;right:30px;top:150px;z-index:10}
.stage .refchip{display:inline-flex;gap:4px;align-items:center;background:#eef2f7;border:1px solid #d5dbe5;border-radius:6px;padding:2px 6px;font-size:11px;margin:2px 0}
.stage .row{display:flex;gap:6px;justify-content:flex-end;margin-top:6px}
.stage .doc>div{margin:5px 0}
.stage .doc .h{font-weight:800;font-size:15px}
.stage .para.on{background:#cfe3ff}
.stage .page .menu2{left:-6px;top:120px}
.stage .pptarea{flex:1;display:flex;gap:10px;padding:10px;background:#e9edf3;min-height:0;position:relative}
.stage .thumbs{width:120px;display:flex;flex-direction:column;gap:6px}
.stage .thumb{background:#fff;border:1px solid #cfd6e2;border-radius:4px;height:52px;padding:4px;font-size:10px}
.stage .slide{flex:1;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.12);display:grid;place-items:center;font-size:18px;font-weight:700;color:var(--navy);padding:20px;text-align:center}
.stage .phd{color:#999}
.stage .pane{width:250px;flex:none;background:#fff;border-left:1px solid #dde2ea;padding:8px;overflow:hidden}
.stage .outline ol{margin:4px 0;padding-left:18px}
.stage .xlarea{flex:1;display:flex;min-height:0}
.stage .sheet{flex:1;padding:8px;overflow:hidden;position:relative}
.stage table.grid{border-collapse:collapse;font-size:11px;background:#fff}
.stage table.grid th,.stage table.grid td{border:1px solid #d8dde6;padding:3px 6px}
.stage table.grid th{background:#1B2A4A;color:#fff}
.stage table.grid.on{outline:2px solid var(--teal2)}
.stage tr.flag td{background:#fff3d6}
.stage td.nc,.stage th.nc{background:#e3f3f2}
.stage table.grid th.nc{background:var(--teal)}
.stage code{font-size:9px;background:#eef1f6;display:block;padding:3px;margin:3px 0;word-break:break-all}
.stage .chart{position:absolute;right:10px;bottom:10px;width:330px;background:#fff;border:1px solid #cfd6e2;border-radius:6px}
.stage .chart .ax{stroke:#999}
.stage .chart .ln{fill:none;stroke:var(--teal2);stroke-width:3;stroke-dasharray:600;stroke-dashoffset:0}
.stage .chart circle{fill:var(--coral)}
.stage .chart .ct{font-size:9px;fill:#333}
.stage .chart.draw .ln{animation:draw 1.6s ease forwards}
@keyframes draw{from{stroke-dashoffset:600}to{stroke-dashoffset:0}}
.stage .mlist{width:200px;border-right:1px solid #e1e5ec}
.stage .mitem{padding:8px;border-bottom:1px solid #eef0f4;font-size:11px}
.stage .mitem.on{background:var(--teall)}
.stage .rpane{flex:1;padding:8px 12px;position:relative;overflow:hidden}
.stage .subj{font-weight:800;font-size:13px;margin-bottom:6px}
.stage .banner{background:linear-gradient(90deg,#e3f3f2,#fdece7);border-radius:8px;padding:6px 8px;display:flex;justify-content:space-between;align-items:center;font-weight:700}
.stage .mbody{padding:8px 0;color:#444}
.stage .compose{border:1px solid #cfd6e2;border-radius:8px;padding:6px;margin-top:6px;position:relative}
.stage .ctool{display:flex;gap:8px;align-items:center}
.stage .compose .menu2{left:0;top:30px}
.stage .draft{background:#f3f5f9;border-radius:6px;padding:6px;margin-top:4px}
.stage .rail{width:70px;background:#3b3f73;color:#fff;padding:8px 4px;flex:none}
.stage .ri{padding:8px 4px;font-size:10px;text-align:center;border-radius:6px}
.stage .ri.on{background:#5b60a8}
.stage .tmain{flex:1;padding:10px;position:relative}
.stage .calgrid{border:1px solid #dde2ea;border-radius:8px;padding:10px;width:340px}
.stage .ch{font-weight:700;margin-bottom:6px}
.stage .evt{background:#e8e9fb;border-left:4px solid #5b60a8;padding:8px;margin:4px 0;border-radius:4px}
.stage .recapbox{margin-top:6px}
.stage .tab.on{border-bottom:3px solid #5b60a8}
.stage .page2{flex:1;padding:12px;overflow:hidden;font-size:12px}
.stage .odmain{flex:1;padding:8px;position:relative}
.stage .toolbar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e1e5ec;padding-bottom:6px;margin-bottom:6px}
.stage .odmain .menu2{right:0;top:36px}
.stage .flist .frow{border-bottom:1px solid #eef0f4}
.stage .code{background:#14213a;color:#d6f5ee;font-family:ui-monospace,Consolas,monospace;font-size:10px;border-radius:6px;padding:6px;margin:4px 0;white-space:pre-wrap}
.stage .callout{background:#fff3d6;border-left:4px solid var(--coral);padding:4px 8px;margin-top:4px;font-weight:600}
.stage .callout.ok{background:#e3f3f2;border-left-color:var(--teal2)}
.stage .msg.r .chart{position:static;width:300px;margin-top:4px}
.stage .abuild{width:350px;flex:none;border-left:1px solid #dde2ea;padding:8px;background:#fbfcfe;overflow:hidden}
.stage .atabs{display:flex;gap:4px;margin-bottom:4px}
.stage .form label{display:block;font-weight:700;font-size:11px;margin-top:4px}
.stage .fld{border:1px solid #c9d1de;border-radius:6px;min-height:22px;padding:3px 6px;background:#fff;font-size:11px}
.stage .fld.tall{height:62px;overflow:hidden}
.stage .kfiles{display:flex;flex-direction:column;gap:3px;margin-top:3px}
.stage .tog{display:flex;align-items:center;gap:6px;margin-top:6px;font-weight:600}
.stage .sw{width:30px;height:16px;border-radius:999px;background:#c4cbd8;position:relative;transition:background .3s}
.stage .sw::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:left .3s}
.stage .tog.on .sw{background:var(--teal2)}
.stage .tog.on .sw::after{left:16px}
.stage .tpane{position:absolute;left:150px;right:350px;top:0;bottom:0;background:#fff;border-left:2px solid var(--teal2);padding:8px;z-index:12;overflow:hidden;display:flex;flex-direction:column}
.stage .tconv{flex:1;overflow:hidden;display:flex;flex-direction:column;gap:3px}
.stage .qa .q{background:var(--navy);color:#fff;border-radius:8px;padding:3px 7px;font-size:10px;align-self:flex-end;margin-left:30px}
.stage .qa .a{border-radius:8px;padding:3px 7px;font-size:10px;margin-top:2px}
.stage .a.ok{background:#e3f3f2}
.stage .a.bad{background:#fde7e4}
.stage .badge{display:block;font-size:9px;font-weight:800;margin-top:1px}
.stage .badge.ok{color:var(--teal)}
.stage .badge.bad{color:#b3261e}
.stage .nbook{display:flex;flex-direction:column;gap:5px;position:relative;flex:1}
.stage .nbh{display:flex;gap:8px;align-items:center}
.stage .nbname{font-weight:800;font-size:14px;color:var(--navy);flex:1}
.stage .nbook .menu2{right:0;top:28px}
.stage .refs{display:flex;gap:6px;flex-wrap:wrap}
.stage .refcard{display:flex;gap:4px;align-items:center;background:#fff;border:1px solid #cfd6e2;border-left:4px solid var(--coral);border-radius:6px;padding:4px 6px;font-size:10px;max-width:190px}
.stage .audio{background:var(--navy);color:#fff;border-radius:8px;padding:6px 8px}
.stage .audio .rl{color:#ffc2b3}
.stage .wave{display:flex;gap:3px;align-items:center;height:28px}
.stage .wave i{display:block;width:5px;height:6px;background:var(--coral);border-radius:3px}
.stage .audio.on .wave i{animation:wv .9s ease-in-out infinite alternate}
@keyframes wv{to{height:26px;background:#5fd3c8}}
.stage .pbar{height:4px;background:#45577c;border-radius:2px;margin-top:4px}
.stage .pbar span{display:block;height:100%;width:0;background:#5fd3c8}
.stage .audio.on .pbar span{animation:pf 8s linear forwards}
@keyframes pf{to{width:100%}}
.stage .studio{flex:1;padding:12px;display:flex;flex-direction:column;gap:12px}
.stage .flow{display:flex;align-items:center;gap:4px;flex-wrap:nowrap}
.stage .node{width:100px;height:96px;border:2px solid #b9c2d2;border-radius:10px;padding:5px;font-size:11px;background:#fff;display:flex;flex-direction:column;gap:2px;transition:all .3s}
.stage .node b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#c4cbd8;color:#fff}
.stage .node.on{border-color:var(--teal2);background:var(--teall)}
.stage .node.on b{background:var(--teal)}
.stage .node.person{border-style:dashed;border-color:var(--coral)}
.stage .node.person em{font-size:10px;color:var(--coralD);font-weight:800;font-style:normal}
.stage .node.person.on{background:var(--corall)}
.stage .arr{color:#8a93a5;font-size:16px}
.stage .tests{display:flex;gap:8px}
.stage .status{font-size:13px}
.stage .st{display:inline-block;padding:3px 8px;border-radius:999px;background:#eef1f6;border:1px solid #cfd6e2}
.stage .st.on{background:var(--teal);color:#fff;border-color:var(--teal)}
.stage .hid{display:none!important}
.stage .s,.stage .s2{display:none!important}
.stage .in{animation:fi .35s ease both}
@keyframes fi{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.stage .fly.in{animation:fly .5s ease both}
@keyframes fly{from{opacity:0;transform:translate(-60px,-30px) scale(.8)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.stage .pointer{transition:none}
.stage .in,.stage .fly.in,.stage .hl,.stage .audio.on .wave i,.stage .chart.draw .ln,.stage .audio.on .pbar span{animation:none!important}}
@media print{.stage .toc,.stage .player,.stage .ctrls,.stage .copy{display:none}}
.stage .conv,.stage .tconv,.stage .rpane,.stage .page2,.stage .pane,.stage .page{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){.stage .conv,.stage .tconv,.stage .rpane,.stage .page2,.stage .pane,.stage .page{scroll-behavior:auto}}
.stage .sheet .chart{position:static;display:block;width:560px;margin:20px auto}
.stage .realwrap{position:absolute;inset:0;z-index:40;background:#f6f5f3}
.stage .realcap{height:24px;background:var(--navy);color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;padding:0 10px;white-space:nowrap;overflow:hidden}
.stage .shot{position:absolute;top:24px;left:21px;width:858px;height:476px}
.stage .shot img{display:block;width:100%;height:100%}
.stage .hs{position:absolute;border-radius:8px}
.stage .hs.hl{background:rgba(232,115,90,.14)}
.stage .num{position:absolute;left:-14px;top:-14px;width:26px;height:26px;border-radius:50%;background:var(--coral);color:#fff;font-weight:800;font-size:14px;display:grid;place-items:center;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);z-index:6}
.stage .realtag{display:inline-block;font-size:11px;font-weight:800;background:var(--navy);color:#fff;border-radius:4px;padding:1px 6px;margin-right:6px}
.stage .shots-links{font-size:14px;margin:.6em 0 0}
.stage .shots-links a{margin-right:10px}
.stage .illtag.real{color:var(--navy);background:var(--teall);border-color:var(--teal)}/* Enlarged player (Enlarge button) */
.player.player-big{position:fixed;inset:0;z-index:1000;margin:0;padding:14px 16px;overflow:auto;background:rgba(16,24,40,.94);display:flex;flex-direction:column;align-items:center}
.player.player-big > *{width:min(96vw,calc((100vh - 170px) * 1.8));flex:none}
.player.player-big .steps{background:#fff;border-radius:8px;padding:8px 12px 8px 34px}
html.player-big-open{overflow:hidden}