.sflow{--c: hsl(var(--brand-cyan));--red: hsl(0 84% 64%);--line: hsl(0 0% 100% / .12);display:grid;gap:1.5rem;margin-top:2.5rem;color:#fff}@media(min-width:1024px){.sflow{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:center;gap:2.5rem}}.sflow__screen{position:relative;overflow:hidden;border-radius:var(--r-card, 1.25rem);border:1px solid var(--line);background:radial-gradient(120% 90% at 80% 0%,#11325f,#061427 70%);box-shadow:0 30px 70px -30px #02070ee6}.sflow__screen:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(hsl(0 0% 100% / .04) 1px,transparent 1px),linear-gradient(90deg,hsl(0 0% 100% / .04) 1px,transparent 1px);background-size:32px 32px;-webkit-mask-image:radial-gradient(80% 80% at 50% 40%,#000,transparent 80%);mask-image:radial-gradient(80% 80% at 50% 40%,#000,transparent 80%)}.sflow__bar{position:relative;display:flex;align-items:center;gap:.6rem;padding:.75rem 1rem;font-size:.75rem;font-weight:600;letter-spacing:.02em;color:#ffffffb3;border-bottom:1px solid var(--line)}.sflow__rec{width:.55rem;height:.55rem;border-radius:9999px;background:var(--red)}.sflow__time{margin-left:auto;color:#ffffff8c}.sflow__stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:.9rem;padding:1.25rem}@media(min-width:640px){.sflow__stage{grid-template-columns:minmax(0,1fr) 1.5rem minmax(0,1fr) 1.5rem minmax(0,1.4fr);align-items:center;padding:1.75rem 1.5rem}}.sflow__node{position:relative;min-width:0;border-radius:1rem;border:1px solid var(--line);background:#0e1f39d9;padding:1rem;transition:border-color .5s,box-shadow .5s,opacity .5s}.sflow__icon{position:relative;display:inline-flex;width:2.75rem;height:2.75rem;align-items:center;justify-content:center;border-radius:.8rem;background:#ffffff0f;color:var(--c);overflow:hidden}.sflow__icon>svg{position:relative;z-index:1}.sflow__label{margin-top:.7rem;font-weight:700;font-size:.95rem}.sflow__sub{font-size:.78rem;color:#fff9}.sflow__alert,.sflow__verdict{margin-top:.75rem;display:flex;gap:.4rem;align-items:flex-start;font-size:.75rem;font-weight:600;line-height:1.35;padding:.45rem .55rem;border-radius:.6rem;opacity:0;transform:translateY(6px);transition:opacity .45s,transform .45s}.sflow__alert{background:#ef434329;color:#faa8a8;opacity:1;transform:none}.sflow__verdict{background:#07b6d529;color:#97ecf7}.sflow__wire{position:relative;display:block;height:1.25rem;width:2px;margin-inline:auto;background:var(--line);overflow:hidden}@media(min-width:640px){.sflow__wire{height:2px;width:100%}}.sflow__wire i{position:absolute;inset:0;background:var(--c);transform:scaleY(0);transform-origin:top;transition:transform .6s ease}@media(min-width:640px){.sflow__wire i{transform:scaleX(0);transform-origin:left}}.sflow__node--ticket{padding:0;overflow:hidden;opacity:.35}.sflow__winbar{display:flex;align-items:center;gap:.4rem;padding:.55rem .8rem;font-size:.7rem;font-weight:600;color:#ffffffb3;background:#ffffff0d;border-bottom:1px solid var(--line)}.sflow__ticket{padding:.85rem .9rem 1rem}.sflow__trow{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.7rem;font-weight:700}.sflow__tnr{color:#ffffffbf}.sflow__prio{padding:.12rem .45rem;border-radius:9999px;background:#ef434333;color:#faa8a8}.sflow__status{margin-left:auto;padding:.12rem .5rem;border-radius:9999px;background:#f6a82333;color:#fcd27e;transition:background .4s,color .4s}.sflow__status.is-done{background:#2cba7738;color:#86eabb}.sflow__ttitle{margin-top:.5rem;font-size:.85rem;font-weight:700;line-height:1.3}.sflow__log{margin-top:.6rem;display:grid;gap:.35rem;font-size:.72rem;color:#ffffffc7}.sflow__log li{display:flex;align-items:center;gap:.4rem;padding-left:.9rem;position:relative;opacity:0;transform:translate(-6px);transition:opacity .45s,transform .45s}.sflow__log li:before{content:"";position:absolute;left:0;top:50%;width:.4rem;height:.4rem;margin-top:-.2rem;border-radius:9999px;background:var(--c)}.sflow__progress{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.35rem;padding:0 1rem 1rem}.sflow__progress span{height:3px;border-radius:9999px;background:#ffffff24;overflow:hidden}.sflow__progress i{display:block;height:100%;width:0;background:var(--c)}.sflow__progress .is-past i,.sflow__progress .is-now i{width:100%}.sflow[data-step="0"] .sflow__node--pc{border-color:#f05656b3;box-shadow:0 0 0 4px #f056561f}.sflow:not([data-step="0"]) .sflow__node--pc{opacity:.75}.sflow:is([data-step="1"],[data-step="2"],[data-step="3"]) .sflow__wire--1 i,.sflow:is([data-step="2"],[data-step="3"]) .sflow__wire--2 i{transform:none}.sflow[data-step="1"] .sflow__node--soc{border-color:#08d3f7b3;box-shadow:0 0 0 4px #08d3f71f}.sflow:is([data-step="1"],[data-step="2"],[data-step="3"]) .sflow__verdict{opacity:1;transform:none}.sflow[data-step="1"] .sflow__verdict{transition-delay:.9s}.sflow:is([data-step="2"],[data-step="3"]) .sflow__node--soc{opacity:.75}.sflow:is([data-step="2"],[data-step="3"]) .sflow__node--ticket{opacity:1;border-color:#08d3f78c}.sflow[data-step="3"] .sflow__node--ticket{border-color:#39d08a99;box-shadow:0 0 0 4px #39d08a1f}.sflow:is([data-step="2"],[data-step="3"]) .sflow__log-1,.sflow[data-step="3"] .sflow__log-2,.sflow[data-step="3"] .sflow__log-3{opacity:1;transform:none}.sflow[data-step="2"] .sflow__log-1{transition-delay:.5s}.sflow[data-step="3"] .sflow__log-2{transition-delay:.3s}.sflow[data-step="3"] .sflow__log-3{transition-delay:1.1s}.sflow__sweep{position:absolute;inset:-40%;opacity:0;background:conic-gradient(from 0deg,hsl(189 94% 50% / .45),transparent 30%)}@media(prefers-reduced-motion:no-preference){.sflow[data-running=yes] .sflow__progress .is-now i{width:0;animation:sflow-fill 3.2s linear forwards}.sflow[data-running=yes][data-step="3"] .sflow__progress .is-now i{animation-duration:5.12s}.sflow[data-running=yes] .sflow__rec{animation:sflow-blink 1.2s steps(2) infinite}.sflow[data-running=yes][data-step="0"] .sflow__node--pc{animation:sflow-shake .5s ease 1}.sflow[data-running=yes][data-step="1"] .sflow__sweep{opacity:1;animation:sflow-spin 1.4s linear infinite}}@keyframes sflow-fill{to{width:100%}}@keyframes sflow-blink{50%{opacity:.2}}@keyframes sflow-spin{to{transform:rotate(360deg)}}@keyframes sflow-shake{20%,60%{transform:translate(-3px)}40%,80%{transform:translate(3px)}}@media(prefers-reduced-motion:reduce){.sflow *,.sflow *:before{transition:none!important;animation:none!important}}.sflow__controls{min-width:0}.sflow__play{display:inline-flex;min-height:2.75rem;align-items:center;gap:.5rem;padding:0 1rem;border-radius:9999px;border:1px solid hsl(0 0% 100% / .25);font-size:.875rem;font-weight:600;color:#fff;background:#ffffff0a}.sflow__play:hover{background:#ffffff1a}.sflow__play:focus-visible,.sflow__chapter:focus-visible{outline:3px solid var(--c);outline-offset:2px}.sflow__chapters{margin-top:1rem;display:grid;gap:.5rem}.sflow__chapter{display:flex;width:100%;gap:.85rem;padding:.8rem .9rem;text-align:left;border-radius:.9rem;border:1px solid transparent;transition:background .3s,border-color .3s}.sflow__chapter:hover{background:#ffffff0a}.sflow__chapter.is-now{background:#ffffff0f;border-color:#08d3f766}.sflow__num{display:inline-flex;flex-shrink:0;width:1.75rem;height:1.75rem;align-items:center;justify-content:center;border-radius:9999px;font-size:.8rem;font-weight:700;background:#ffffff14;color:#fffc}.sflow__chapter.is-now .sflow__num{background:var(--c);color:#061427}.sflow__ctitle{display:block;font-weight:700;font-size:.95rem;color:#fff}.sflow__ctext{display:block;margin-top:.15rem;font-size:.85rem;line-height:1.5;color:#ffffffb3}
