.app-mock{--mock-muted-fg: hsl(150 5% 45%);--mock-muted: hsl(150 8% 96%);--mock-line: hsl(0 0% 91%);--mock-success: hsl(142 65% 30%);--mock-success-bg: hsl(142 80% 93%);--mock-info: hsl(205 65% 39%);--mock-info-bg: hsl(205 80% 93%);--mock-error: hsl(2 65% 45%);--mock-error-bg: hsl(2 80% 93%);--mock-in: hsl(140 30% 36%);--mock-out: hsl(2 55% 44%);--mock-sage: #a5c091;--mock-ease: cubic-bezier(.22, 1, .36, 1);color:var(--color-neutral-900);place-items:center;display:grid;position:absolute;inset:0;container-type:size}.app-mock__window{border:1px solid var(--color-secondary-300);background:var(--color-neutral-0);text-align:left;border-radius:1.3333em;flex-direction:column;width:36em;height:20.5em;padding:1.3333em 1.6667em;font-size:min(12px,calc((100cqw - 48px) / 36),calc((100cqh - 32px) / 20.5));line-height:1.5;display:flex;position:relative;overflow:hidden}.app-mock__head{justify-content:space-between;align-items:center;gap:1em;display:flex}.app-mock__title{align-items:center;gap:.5em;font-weight:600;display:flex}.app-mock__title .app-icon{color:var(--color-primary-500);font-size:1.1667em}.app-mock__muted{color:var(--mock-muted-fg)}.app-mock__pill{white-space:nowrap;border:1px solid #0404040f;border-radius:.4em;align-items:center;gap:.3333em;padding:.1667em .6667em;font-size:.75em;font-weight:500;line-height:1.5;display:inline-flex}.app-mock__pill .app-icon{font-size:1em}.app-mock__pill--success{color:var(--mock-success);background:var(--mock-success-bg)}.app-mock__pill--info{color:var(--mock-info);background:var(--mock-info-bg)}.app-mock__pill--error{color:var(--mock-error);background:var(--mock-error-bg)}.app-mock__button{background:var(--color-primary-500);color:var(--color-neutral-0);white-space:nowrap;border-radius:.6667em;align-items:center;gap:.4167em;height:2.5em;padding-inline:1em;font-size:.9167em;font-weight:500;transition:scale .18s,background-color .18s;display:inline-flex}.app-mock__button.is-pressed{background:var(--color-primary-800);scale:.96}@keyframes app-mock-spin{to{rotate:360deg}}.service-scene__stage{font-size:min(13px,4cqw,5cqh);line-height:1.5;place-items:center;display:grid;position:absolute;inset:0;overflow:hidden}.service-scene__stage:before{content:"";background-image:linear-gradient(var(--color-secondary-500) 1px,transparent 1px),linear-gradient(90deg,var(--color-secondary-500) 1px,transparent 1px);background-position:center;background-size:2em 2em;opacity:.55;position:absolute;inset:0;-webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent);mask-image:radial-gradient(closest-side,#000 40%,transparent)}.svc-card{background:var(--color-neutral-0);border:1px solid var(--color-secondary-300);border-radius:1.3333em;flex-direction:column;gap:.8333em;width:min(23em,100% - 2em);padding:1.1667em 1.4167em 1.25em;display:flex;position:relative;box-shadow:0 1.25em 2.5em -.75em #0404042e;transition:transform .5s var(--mock-ease),box-shadow .5s var(--mock-ease)}.svc-card__head{border-bottom:1px solid var(--mock-line);justify-content:space-between;align-items:center;gap:1em;padding-bottom:.75em;display:flex}.svc-card__title{white-space:nowrap;align-items:center;gap:.5em;font-weight:600;display:flex}.svc-card__title .app-icon{color:var(--color-primary-500);font-size:1.1667em}.svc-card__aside{white-space:nowrap;font-size:.8333em}.svc-card__swap{display:grid}.svc-card__swap>*{grid-area:1/1;justify-self:end}.svc-card__foot{border-top:1px solid var(--mock-line);justify-content:space-between;align-items:center;gap:1em;padding-top:.75em;display:flex}.svc-card__who{align-items:center;gap:.6667em;min-width:0;display:flex}.svc-card__avatar{object-fit:cover;border-radius:50%;flex-shrink:0;width:2.3333em;height:2.3333em}.svc-card__name{flex-direction:column;min-width:0;line-height:1.3;display:flex}.svc-card__name strong{font-size:.9167em;font-weight:500}.svc-card__name span{font-size:.75em}.svc-amount{font-variant-numeric:tabular-nums;white-space:nowrap}.svc-out{opacity:0}.service-scene:is(.is-waiting,.is-playing) .svc-in{animation:svc-in .6s var(--mock-ease) var(--at, 0s) both}.service-scene:is(.is-waiting,.is-playing) .svc-pop{animation:svc-pop .45s cubic-bezier(.34,1.56,.64,1) var(--at, 0s) both}.service-scene:is(.is-waiting,.is-playing) .svc-out{animation:svc-out .25s ease var(--at, 0s) both}.service-scene:is(.is-waiting,.is-playing) .svc-ink{animation:svc-ink .4s ease var(--at, 0s) both}.service-scene:is(.is-waiting,.is-playing) .svc-mark{animation:svc-mark var(--for, .8s) ease var(--at, 0s) both}.service-scene:is(.is-waiting,.is-playing) .svc-fill{animation:svc-fill var(--for, .5s) var(--mock-ease) var(--at, 0s) both}.service-scene:is(.is-waiting,.is-playing) .svc-grow{animation:svc-grow var(--for, 1s) linear var(--at, 0s) both}.service-scene:is(.is-waiting,.is-playing) .svc-draw{animation:svc-draw var(--for, .7s) cubic-bezier(.45,0,.55,1) var(--at, 0s) both}.service-scene:is(.is-waiting,.is-playing) .svc-stamp{animation:svc-stamp .4s cubic-bezier(.3,1.3,.6,1) var(--at, 0s) both}.service-scene.is-waiting,.service-scene.is-waiting *{animation-play-state:paused!important}@keyframes svc-in{0%{opacity:0;translate:0 .8em}}@keyframes svc-pop{0%{opacity:0;scale:.6}}@keyframes svc-out{0%{opacity:1}}@keyframes svc-ink{0%{color:var(--mock-muted-fg)}}@keyframes svc-mark{0%,to{background-color:transparent}25%,70%{background-color:var(--mock-muted)}}@keyframes svc-fill{0%{width:0}}@keyframes svc-grow{0%{scale:1 0}}@keyframes svc-draw{0%{stroke-dashoffset:1}}@keyframes svc-stamp{0%{opacity:0;scale:1.6}}