.lp .lp-demo{background:var(--lp-surface);border:1px solid var(--lp-hairline);border-radius:var(--lp-radius-lg);box-shadow:var(--lp-shadow-lg);contain:paint;overflow:hidden;transform:perspective(1600px)rotateY(-5deg)rotateX(1.5deg)}@media (max-width:860px){.lp .lp-demo{transform:none}}.lp .lp-demo__bar{background:var(--lp-canvas-warm);border-bottom:1px solid var(--lp-hairline);align-items:center;gap:7px;height:38px;padding:0 14px;display:flex}.lp .lp-demo__dot{border-radius:50%;width:10px;height:10px}.lp .lp-demo__toggle{cursor:pointer;width:24px;height:24px;color:var(--lp-muted);background:0 0;border:0;border-radius:6px;place-items:center;margin-left:auto;display:grid}.lp .lp-demo__toggle:hover{background:var(--lp-jade-tint);color:var(--lp-jade-dark)}.lp .lp-demo__body{grid-template-columns:52px 1fr;min-height:336px;display:grid}.lp .lp-demo__rail{background:#14303a;flex-direction:column;align-items:center;gap:14px;padding:16px 0;display:flex}.lp .lp-demo__ic{background:#ffffff1a;border-radius:8px;width:26px;height:26px}.lp .lp-demo__ic--on{background:#6fdcd938}.lp .lp-demo__main{flex-direction:column;gap:12px;padding:16px 18px;display:flex}.lp .lp-demo__head{justify-content:space-between;align-items:baseline;display:flex}.lp .lp-demo__head h4{color:var(--lp-ink);margin:0;font-size:14px;font-weight:600}.lp .lp-demo__head span{color:var(--lp-muted);font-size:11px}.lp .lp-demo__list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.lp .lp-demo__row{background:var(--lp-surface);border:1px solid var(--lp-hairline);border-radius:11px;align-items:center;gap:10px;padding:9px 11px;display:flex}.lp .lp-demo__time{color:var(--lp-jade-dark);font-variant-numeric:tabular-nums;flex:none;width:38px;font-size:11px;font-weight:700}.lp .lp-demo__who{color:var(--lp-ink);flex-direction:column;gap:2px;font-size:12px;font-weight:600;display:flex}.lp .lp-demo__who em{color:var(--lp-muted);font-size:10px;font-style:normal;font-weight:500}.lp .lp-demo__chip{letter-spacing:.02em;white-space:nowrap;border-radius:999px;padding:3px 8px;font-size:9.5px;font-weight:700}.lp .lp-demo__chip--done{background:var(--lp-jade-tint);color:var(--lp-jade-dark);margin-left:auto}.lp .lp-demo__status{margin-left:auto;display:grid;position:relative}.lp .lp-demo__status>.lp-demo__chip{grid-area:1/1}.lp .lp-demo__chip--wait{background:var(--lp-canvas-warm);color:var(--lp-muted)}.lp .lp-demo__chip--ok{background:var(--lp-jade-tint);color:var(--lp-jade-dark)}.lp .lp-demo__chip--paid{color:#1b6b3a;background:#dcf3e4}.lp .lp-demo__row--new{border-left:3px solid var(--lp-jade)}.lp .lp-demo__wa{color:var(--lp-jade-dark);background:var(--lp-jade-tint);border-radius:999px;align-self:flex-start;align-items:center;gap:7px;padding:5px 11px;font-size:10.5px;font-weight:600;display:inline-flex}.lp .lp-demo__wa-dot{background:var(--lp-jade);border-radius:50%;width:6px;height:6px}.lp .lp-demo__revenue{background:var(--lp-canvas-warm);border:1px solid var(--lp-hairline);border-radius:12px;justify-content:space-between;align-items:center;margin-top:auto;padding:11px 13px;display:flex}.lp .lp-demo__revenue-label{color:var(--lp-muted);font-size:11px;font-weight:500}.lp .lp-demo__revenue-window{min-width:74px;height:22px;display:inline-block;position:relative}.lp .lp-demo__revenue-track{display:block;position:static}.lp .lp-demo__revenue-track span{color:var(--lp-ink);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;font-size:16px;font-weight:700;line-height:22px;position:absolute;top:0;left:0;right:0}.lp .lp-demo__revenue-track span:first-child{opacity:1}.lp .lp-demo__revenue-track span:last-child{opacity:0}.lp[data-motion=on] .lp-demo__row--new{opacity:0;transform:translateY(-6px)}.lp[data-motion=on] .lp-demo__chip--ok,.lp[data-motion=on] .lp-demo__chip--paid{opacity:0}.lp[data-motion=on] .lp-demo__wa{opacity:0;transform:translateY(8px)scale(.96)}.lp[data-motion=on] .lp-demo__revenue{box-shadow:0 0 0 0 var(--lp-jade-tint)}.lp[data-motion=on] .lp-demo__row--new,.lp[data-motion=on] .lp-demo__chip--wait,.lp[data-motion=on] .lp-demo__chip--ok,.lp[data-motion=on] .lp-demo__chip--paid,.lp[data-motion=on] .lp-demo__wa,.lp[data-motion=on] .lp-demo__revenue,.lp[data-motion=on] .lp-demo__revenue-track span{transition:opacity .45s,transform .55s cubic-bezier(.22,1,.36,1),box-shadow .5s}.lp[data-motion=on] .lp-demo[data-beat] .lp-demo__row--new,.lp[data-motion=on] .lp-demo[data-confirmed] .lp-demo__wa{opacity:1;transform:none}.lp[data-motion=on] .lp-demo[data-confirmed] .lp-demo__chip--wait{opacity:0}.lp[data-motion=on] .lp-demo[data-confirmed] .lp-demo__chip--ok{opacity:1}.lp[data-motion=on] .lp-demo[data-paid] .lp-demo__chip--ok{opacity:0}.lp[data-motion=on] .lp-demo[data-paid] .lp-demo__chip--paid{opacity:1}.lp[data-motion=on] .lp-demo[data-summed] .lp-demo__revenue-track span:first-child{opacity:0}.lp[data-motion=on] .lp-demo[data-summed] .lp-demo__revenue-track span:last-child{opacity:1}.lp[data-motion=on] .lp-demo[data-summed] .lp-demo__revenue{box-shadow:0 0 0 3px var(--lp-jade-tint)}.lp:not([data-motion=on]) .lp-demo__chip--wait,.lp:not([data-motion=on]) .lp-demo__chip--ok,.lp:not([data-motion=on]) .lp-demo__revenue-track span:first-child{opacity:0}.lp:not([data-motion=on]) .lp-demo__revenue-track span:last-child{opacity:1}