.cap-demo{--ink: #2b3440;--line: #e3e8ee;--paper: #fff;--bg-app: #f4f6f9;--side: #1d2732;--good: #178a5c}.cap-demo .stage{position:relative;border-radius:12px;overflow:hidden;border:1px solid #223140;background:var(--bg-app);font-size:clamp(11px,1.35vw,16px)}.cap-demo .browser-bar{display:flex;align-items:center;gap:.5em;background:#0f1620;padding:.55em .9em;border-bottom:1px solid #1c2836}.cap-demo .dot{width:.7em;height:.7em;border-radius:50%;background:#2a3a4a}.cap-demo .urlbox{flex:1;margin-left:.6em;background:#17202c;color:#7d93a6;border-radius:99px;padding:.28em 1em;font-size:.78em}.cap-demo .app{position:relative}.cap-demo .side{position:absolute;left:0;top:0;bottom:0;width:13.5em;background:var(--side);color:#8ba1b5;padding:.85em 0 1em;overflow:hidden}.cap-demo .side .brand{color:#fff;font-weight:800;letter-spacing:.18em;font-size:.85em;padding:.15em 1.1em .7em}.cap-demo .side .side-h{font-size:.6em;letter-spacing:.14em;color:#5d7488;padding:.7em 1.85em .35em;font-weight:700;text-transform:uppercase;margin:0}.cap-demo .side a{display:block;color:#9fb2c4;text-decoration:none;font-size:.78em;padding:.4em 1.4em;border-left:3px solid transparent}.cap-demo .side a.on{background:#26313f;color:#fff;border-left-color:#008fd5}.cap-demo .main{margin-left:13.5em}.cap-demo .scene{display:none;padding:1.1em 1.4em;flex-direction:column;justify-content:center}.cap-demo .scene.active{display:flex}.cap-demo .scene-title{color:var(--ink);font-size:1.05em;margin-bottom:.9em;font-weight:700}.cap-demo .scene-title small{color:#8194a7;font-weight:500;font-size:.78em;margin-left:.6em}.cap-demo .sources{display:grid;gap:.7em;max-width:none}.cap-demo .src{display:flex;align-items:center;gap:.8em;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:.75em 1em;color:var(--ink);font-size:.9em;font-weight:500;opacity:0;transform:translate(-10px)}.cap-demo .active .src{animation:cap-rise .45s ease forwards}.cap-demo .active .src:nth-child(1){animation-delay:.2s}.cap-demo .active .src:nth-child(2){animation-delay:.9s}.cap-demo .active .src:nth-child(3){animation-delay:1.6s}.cap-demo .src .ic{width:2.2em;height:2.2em;border-radius:6px;background:#eef1f6;display:flex;align-items:center;justify-content:center;font-size:.62em;font-weight:700;color:#008fd5}.cap-demo .src .state{margin-left:auto;font-size:.8em;color:var(--good);font-weight:600;opacity:0}.cap-demo .active .src .state{animation:cap-pop .3s ease forwards}.cap-demo .active .src:nth-child(1) .state{animation-delay:.85s}.cap-demo .active .src:nth-child(2) .state{animation-delay:1.55s}.cap-demo .active .src:nth-child(3) .state{animation-delay:2.25s}.cap-demo .sheet{background:var(--paper);border:1px solid var(--line);border-radius:8px;overflow:hidden;max-width:none}.cap-demo .sheet table{width:100%;border-collapse:collapse;color:var(--ink);font-size:.85em}.cap-demo .sheet th{text-align:left;background:#f0f3f7;color:#5d7488;font-weight:600;padding:.55em 1em;border-bottom:1px solid var(--line)}.cap-demo .sheet td{padding:.6em 1em;border-bottom:1px solid #eef1f5;position:relative}.cap-demo .badge{display:inline-block;font-size:.78em;font-weight:600;padding:.15em .7em;border-radius:99px}.cap-demo .b-pend{background:#f2f4f7;color:#8194a7}.cap-demo .b-ok{background:#e2f4ec;color:var(--good);opacity:0;position:absolute;left:1em;top:.55em}.cap-demo .active .row1 .b-ok{animation:cap-pop .35s ease forwards .6s}.cap-demo .active .row2 .b-ok{animation:cap-pop .35s ease forwards 1.5s}.cap-demo .active .row3 .b-ok{animation:cap-pop .35s ease forwards 2.4s}.cap-demo .active .row1 .b-pend{animation:cap-fade .2s ease forwards .6s}.cap-demo .active .row2 .b-pend{animation:cap-fade .2s ease forwards 1.5s}.cap-demo .active .row3 .b-pend{animation:cap-fade .2s ease forwards 2.4s}.cap-demo .lockcard{background:var(--paper);border:1px solid var(--line);border-radius:8px;max-width:none;padding:1.1em 1.3em;color:var(--ink)}.cap-demo .lockrow{display:flex;align-items:center;gap:.7em;font-size:.92em;padding:.5em 0}.cap-demo .lockrow+.lockrow{border-top:1px solid #eef1f5}.cap-demo .lockrow .tag{margin-left:auto;font-size:.78em;font-weight:600;color:#b98a2d}.cap-demo .t-lock{opacity:0}.cap-demo .active .t-lock{animation:cap-pop .35s ease forwards .8s}.cap-demo .cr{margin-top:1em;background:#fdf7ec;border:1px solid #ecd9ae;border-radius:8px;padding:.7em 1em;font-size:.85em;color:#6d5820;max-width:none;opacity:0;transform:translateY(6px)}.cap-demo .active .cr{animation:cap-rise .45s ease forwards 2s}.cap-demo .rollup{display:grid;gap:.55em;max-width:none}.cap-demo .rl{display:flex;justify-content:space-between;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:.6em 1em;color:var(--ink);font-size:.88em;opacity:0;transform:translateY(6px)}.cap-demo .active .rl{animation:cap-rise .4s ease forwards}.cap-demo .active .rl:nth-child(1){animation-delay:.2s}.cap-demo .active .rl:nth-child(2){animation-delay:.55s}.cap-demo .active .rl:nth-child(3){animation-delay:.9s}.cap-demo .rl.total{background:#e8f4fb;border-color:#b7d7ea;font-weight:700}.cap-demo .active .rl.total{animation-delay:1.5s}.cap-demo .rl .v{font-weight:600;font-variant-numeric:tabular-nums}.cap-demo .formula{margin-top:.9em;font-size:.78em;color:#6a7d91;max-width:none;background:#f0f3f7;border-radius:6px;padding:.55em .9em;font-family:ui-monospace,Menlo,monospace;opacity:0}.cap-demo .active .formula{animation:cap-fadein .5s ease forwards 2.2s}.cap-demo .kpis{display:grid;grid-template-columns:1fr 1fr;gap:.9em;max-width:none}.cap-demo .kpi{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:.9em 1.1em;color:var(--ink);opacity:0;transform:translateY(8px)}.cap-demo .active .kpi{animation:cap-rise .45s ease forwards}.cap-demo .active .kpi:nth-child(1){animation-delay:.3s}.cap-demo .active .kpi:nth-child(2){animation-delay:.5s}.cap-demo .active .kpi:nth-child(3){animation-delay:.7s}.cap-demo .active .kpi:nth-child(4){animation-delay:.9s}.cap-demo .kpi .kpi-label{font-size:.8em;color:#5d7488;font-weight:600;margin:0 0 .35em}.cap-demo .kpi .num{font-size:1.45em;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.cap-demo .kpi .num small{font-size:.48em;font-weight:500;color:#8194a7;margin-left:.15em}.cap-demo .caption-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-top:1rem}.cap-demo .caption{min-height:2.8em;flex:1}.cap-demo .caption p{display:none;color:#e8eef2;font-size:1rem;line-height:1.5;margin:0}.cap-demo .caption p strong{color:#4db8e8}.cap-demo .caption p.on{display:block}.cap-demo .dots{display:flex;gap:.45rem;flex:none;padding-top:.45rem}.cap-demo .pdot{width:8px;height:8px;border-radius:50%;background:#2a3a4a;cursor:pointer;border:0;padding:0}.cap-demo .pdot.on{background:#00b4ff}.cap-demo .note{color:#5d7488;font-size:.78rem;margin:.9rem 0 0}@keyframes cap-rise{to{opacity:1;transform:none}}@keyframes cap-pop{0%{opacity:0}to{opacity:1}}@keyframes cap-fade{to{opacity:0}}@keyframes cap-fadein{to{opacity:1}}@media(max-width:700px){.cap-demo .side{display:none}.cap-demo .main{margin-left:0}}@media(prefers-reduced-motion:reduce){.cap-demo .scene,.cap-demo .src,.cap-demo .src .state,.cap-demo .b-ok,.cap-demo .b-pend,.cap-demo .t-lock,.cap-demo .cr,.cap-demo .rl,.cap-demo .formula,.cap-demo .kpi{animation:none!important;transition:none!important}.cap-demo .scene.active .src,.cap-demo .scene.active .src .state,.cap-demo .scene.active .b-ok,.cap-demo .scene.active .t-lock,.cap-demo .scene.active .cr,.cap-demo .scene.active .rl,.cap-demo .scene.active .formula,.cap-demo .scene.active .kpi{opacity:1;transform:none}.cap-demo .scene.active .b-pend{opacity:0}}