.process-explorable{--px-ground: oklch(.985 .003 80);--px-card: oklch(.965 .003 80);--px-ink: oklch(.21 .006 285.885);--px-muted: oklch(.552 .016 285.938);--px-faint: oklch(.705 .015 286.067);--px-rule: oklch(.92 .004 286.32);--px-pick: #2FA37B;--px-on-pick: #fff;--px-mono: "Geist Mono", ui-monospace, monospace;container-type:inline-size;color:var(--px-ink);background:var(--px-ground);border:1px solid oklch(.17 .005 80 / .08);border-radius:.75rem}:where(.dark) .process-explorable{--px-ground: oklch(.135 .003 80);--px-card: oklch(.205 .003 80);--px-ink: oklch(.985 0 0);--px-muted: oklch(.705 .015 286.067);--px-faint: oklch(.552 .016 285.938);--px-rule: oklch(.37 .013 285.805);--px-on-pick: oklch(.141 .005 285.823);border-color:#f9f8f617}.px-sim{aspect-ratio:16 / 9;cursor:default;-webkit-user-select:none;user-select:none;outline:none;border-radius:inherit}.px-sim:focus-visible{box-shadow:0 0 0 2px var(--px-pick)}.px-pad{height:100%;padding:4cqw 4.5cqw 3cqw;display:flex;flex-direction:column}.px-head>div{animation:px-in .35s ease-out}.px-line{margin:0;font-size:3cqw;font-weight:700;letter-spacing:-.03em;line-height:1.15;text-wrap:balance}.px-sub{margin:.8cqw 0 0;font-size:1.8cqw;line-height:1.3;color:var(--px-muted)}.px-label{font-family:var(--px-mono);font-size:1.1cqw;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--px-muted)}.px-stage{flex:1;min-height:0;margin-top:2.6cqw;display:grid;grid-template-rows:auto auto auto 1fr;gap:1cqw}.px-above{display:grid;grid-template-columns:repeat(6,1fr);gap:1.2cqw;height:7.5cqw}.px-boss{grid-column:4;justify-self:center;display:flex;flex-direction:column;align-items:center;gap:.5cqw;opacity:0;transform:translateY(9cqw) scale(.8);transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .5s}.px-boss-label{font-family:var(--px-mono);font-size:1.1cqw;font-weight:500;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}.px-avatar{position:relative;width:3.6cqw;height:3.6cqw;border-radius:50%;background:var(--px-ink)}.px-avatar:before{content:"";position:absolute;left:50%;top:22%;width:34%;height:34%;border-radius:50%;background:var(--px-ground);transform:translate(-50%)}.px-avatar:after{content:"";position:absolute;left:50%;bottom:14%;width:58%;height:26%;border-radius:1.6cqw 1.6cqw .4cqw .4cqw;background:var(--px-ground);transform:translate(-50%)}.px-wire{width:.2cqw;height:0;margin-bottom:-1.2cqw;background:var(--px-ink);transition:height .6s .5s}.px-sim.is-above .px-boss{opacity:1;transform:none}.px-sim.is-above .px-wire{height:2.2cqw}.px-row{display:grid;grid-template-columns:repeat(6,1fr);gap:1.2cqw}.px-task{position:relative;min-height:9cqw;display:flex;flex-direction:column;gap:.9cqw;padding:1.3cqw 1.3cqw 1.1cqw;background:var(--px-card);border:.2cqw solid transparent;border-radius:1.1cqw;transition:background .5s,border-color .5s,color .5s,transform .5s,box-shadow .4s}.px-task-name{font-size:1.7cqw;font-weight:600;letter-spacing:-.01em;line-height:1.15}.px-who{margin-top:auto;display:flex;align-items:center;gap:.6cqw;font-family:var(--px-mono);font-size:1.05cqw;font-weight:500;letter-spacing:.12em;text-transform:uppercase}.px-who i{flex:none;width:1.1cqw;height:1.1cqw;border-radius:50%;background:currentColor}.px-tag{position:absolute;top:-1.1cqw;left:1cqw;padding:.25cqw .7cqw;font-family:var(--px-mono);font-size:.95cqw;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--px-muted);background:var(--px-ground);border:1px solid var(--px-rule);border-radius:.4cqw;opacity:0;transform:translateY(.4cqw);transition:opacity .4s,transform .4s,color .4s,border-color .4s}.px-task.is-tagged .px-tag{opacity:1;transform:none}.px-task.is-repetitive.is-tagged .px-tag{color:var(--px-pick);border-color:var(--px-pick)}.px-task.is-planned{border-color:var(--px-pick);border-style:dashed}.px-task.is-agent{color:var(--px-on-pick);background:var(--px-pick);border-color:var(--px-pick);border-style:solid}.px-task.is-supervised{background:transparent;border-color:var(--px-ink);border-style:dashed}.px-task.is-fix{transform:translateY(-.4cqw);box-shadow:0 0 0 .35cqw var(--px-ground),0 0 0 .6cqw var(--px-ink)}.px-task.is-fix .px-tag{opacity:1;transform:none;color:var(--px-ink);border-color:var(--px-ink)}.px-loop{position:relative;height:4.2cqw}.px-loop svg{display:block;width:100%;height:100%;overflow:visible}.px-loop path{fill:none;stroke:var(--px-faint);stroke-width:2;stroke-dasharray:6 7;animation:px-flow 1.4s linear infinite;transition:stroke .5s}.px-loop polygon{fill:var(--px-faint);transition:fill .5s}.px-sim.is-auto .px-loop path{stroke:var(--px-pick);animation-duration:.7s}.px-sim.is-auto .px-loop polygon{fill:var(--px-pick)}.px-loop-label{position:absolute;left:50%;bottom:-.2cqw;padding:0 1cqw;background:var(--px-ground);transform:translate(-50%);white-space:nowrap}.px-infra{position:absolute;left:0;right:0;bottom:-1.6cqw;text-align:center;opacity:0;transition:opacity .5s}.px-sim.is-auto .px-infra{opacity:1}.px-bar{display:grid;grid-template-columns:1fr 1fr;gap:3cqw;align-items:end;padding-top:2.2cqw}.px-meter-top{display:flex;justify-content:space-between;align-items:baseline;gap:1cqw}.px-meter-value{font-size:2.2cqw;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.px-track{height:1.2cqw;margin-top:.9cqw;overflow:hidden;background:var(--px-card);border-radius:.6cqw}.px-fill{height:100%;background:var(--px-ink);border-radius:.6cqw;transition:width .9s cubic-bezier(.2,.8,.2,1) .3s}.px-kpi{padding:1.3cqw 1.6cqw;background:var(--px-card);border-radius:1.1cqw;opacity:0;transform:translateY(.6cqw);transition:opacity .45s,transform .45s,box-shadow .4s}.px-kpi.is-on{opacity:1;transform:none}.px-kpi.is-back{box-shadow:0 0 0 .25cqw var(--px-ink)}.px-kpi ul{display:grid;grid-template-columns:repeat(3,1fr);gap:1cqw;margin:.8cqw 0 0;padding:0;list-style:none}.px-kpi li{display:flex;flex-direction:column;gap:.3cqw;font-size:1.5cqw;font-weight:600}.px-kpi-state{font-family:var(--px-mono);font-size:1.05cqw;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--px-faint);transition:color .4s}.px-kpi li.is-up .px-kpi-state{color:var(--px-pick)}.px-kpi li.is-down .px-kpi-state{color:var(--px-ink)}.px-return{display:flex;align-items:center;gap:.7cqw;max-height:0;margin-top:.9cqw;overflow:hidden;opacity:0;font-family:var(--px-mono);font-size:1.1cqw;font-weight:500;letter-spacing:.12em;text-transform:uppercase;transition:max-height .4s,opacity .4s}.px-kpi.is-back .px-return{max-height:3cqw;opacity:1}.px-return svg{width:1.8cqw;height:1.8cqw;animation:px-spin 1.6s linear infinite}.px-foot{flex:none;display:flex;justify-content:space-between;align-items:center;margin-top:2.6cqw}.px-dots{display:flex;align-items:center;gap:1cqw}.px-dots i{width:1.1cqw;height:1.1cqw;border-radius:50%;background:var(--px-rule);transition:background .3s}.px-dots i.is-on{background:var(--px-pick);animation:px-blink 1.4s ease-in-out infinite}.px-hint{font-family:var(--px-mono);font-size:1.5cqw;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--px-muted)}@keyframes px-in{0%{opacity:0;transform:translateY(.6cqw)}to{opacity:1;transform:none}}@keyframes px-flow{to{stroke-dashoffset:-26}}@keyframes px-blink{50%{opacity:.25;transform:scale(.8)}}@keyframes px-spin{to{transform:rotate(-360deg)}}@container (max-width: 700px){.px-sim{aspect-ratio:9 / 16}.px-pad{padding:7cqw 5cqw 5cqw}.px-line{font-size:6.4cqw}.px-sub{margin-top:2cqw;font-size:3.8cqw}.px-label{font-size:2.4cqw}.px-stage{margin-top:6cqw;gap:3cqw;grid-template-rows:auto auto auto auto;align-content:start}.px-above{grid-template-columns:1fr;height:17cqw}.px-boss{grid-column:1;gap:1.2cqw;transform:translateY(18cqw) scale(.8)}.px-boss-label{font-size:2.4cqw}.px-avatar{width:8cqw;height:8cqw}.px-wire{width:.4cqw}.px-sim.is-above .px-wire{height:3cqw}.px-row{grid-template-columns:repeat(2,1fr);gap:3.4cqw 2.6cqw}.px-task{min-height:17cqw;gap:2cqw;padding:3cqw 3cqw 2.6cqw;border-width:.4cqw;border-radius:2.4cqw}.px-task-name{font-size:3.6cqw}.px-who{gap:1.4cqw;font-size:2.3cqw}.px-who i{width:2.2cqw;height:2.2cqw}.px-tag{top:-2.2cqw;left:2.4cqw;padding:.5cqw 1.4cqw;font-size:2.1cqw;border-radius:.8cqw}.px-loop{height:8cqw}.px-infra{bottom:-3.4cqw}.px-bar{grid-template-columns:1fr;gap:4cqw;padding-top:4cqw}.px-meter-value{font-size:4.6cqw}.px-track{height:2.4cqw;margin-top:2cqw;border-radius:1.2cqw}.px-kpi{padding:3cqw 3.4cqw;border-radius:2.4cqw}.px-kpi ul{gap:2cqw;margin-top:2cqw}.px-kpi li{gap:.8cqw;font-size:3.2cqw}.px-kpi-state{font-size:2.2cqw}.px-return{gap:1.4cqw;margin-top:2cqw;font-size:2.3cqw}.px-kpi.is-back .px-return{max-height:6cqw}.px-return svg{width:3.6cqw;height:3.6cqw}.px-foot{margin-top:auto}.px-dots{gap:2.2cqw}.px-dots i{width:2.4cqw;height:2.4cqw}.px-hint{font-size:3cqw}}@media (prefers-reduced-motion: reduce){.process-explorable *,.process-explorable *:before,.process-explorable *:after{transition:none!important;animation:none!important}}
