.pillo{--pillo-card-line:#dcdfe4;--pillo-stage:#e6e8ec;--pillo-ink:#000;--pillo-muted:#7c7e89;--pillo-violet:#865cf6;--pillo-violet-deep:#53389d;--pillo-violet-ink:#36236a;--pillo-zone:#ded7f2;--pillo-chip-on:#f4f0ff;--pillo-chip-off:#f5f6f8;--pillo-circle-on:#e2d8fb;--pillo-idle-dash:#b9bdc6;--pillo-zone-idle:#dfe2e7;--pillo-zone-idle-border:#a5a9b3;--pillo-idle-label:#3e4049;background:var(--pillo-stage);height:370px;color:var(--pillo-ink);flex-direction:column;justify-content:center;align-items:center;padding:36px 24px;display:flex}.pillo-pill{z-index:2;border:1px solid var(--pillo-card-line);white-space:nowrap;background:#fff;border-radius:17px;flex:none;justify-content:center;align-items:center;width:160px;height:34px;font-size:12px;font-weight:700;line-height:1.5;transition:border-color .3s,background .3s;display:flex;position:relative}.pillo-pill.on{border-color:var(--pillo-violet);background:var(--pillo-zone)}.pillo-link{z-index:1;flex:none;width:16px;height:36px;position:relative}.pillo-link .pillo-line{width:2px;height:36px;position:absolute;top:0;left:7px}.pillo-link .pillo-line line{stroke:var(--pillo-idle-dash);stroke-width:2px;stroke-dasharray:4 2;transition:stroke .3s}.pillo-link.on .pillo-line line{stroke:var(--pillo-violet)}.pillo-link .pillo-arrow{will-change:transform;width:16px;height:16px;position:absolute;top:0;left:0;transform:translateY(10px)}.pillo-link .pillo-arrow path{fill:none;stroke:var(--pillo-violet-deep);stroke-width:2px;stroke-linecap:round}.pillo-zone{z-index:2;background:var(--pillo-zone-idle);border-radius:24px;flex-direction:column;flex:none;align-items:center;gap:10px;width:278px;max-width:100%;padding:12px;transition:background .35s;display:flex;position:relative}.pillo-zone .pillo-border{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.pillo-zone .pillo-border rect{fill:none;width:calc(100% - 1px);height:calc(100% - 1px);stroke:var(--pillo-zone-idle-border);stroke-width:1px;stroke-dasharray:4 4;transition:stroke .35s}.pillo-zone.on{background:var(--pillo-zone)}.pillo-zone.on .pillo-border rect{stroke:var(--pillo-violet);stroke-width:1.5px;stroke-dasharray:none}.pillo-zone-label{color:var(--pillo-idle-label);font-size:12px;line-height:1.5;transition:color .35s}.pillo-zone.on .pillo-zone-label{color:var(--pillo-violet-deep)}.pillo-panel{border:1px solid var(--pillo-card-line);background:#fff;border-radius:16px;flex-direction:column;gap:12px;width:100%;padding:16px;display:flex}.pillo-panel>*{flex:none}.pillo-panel-label{margin:-3px 0;font-size:12px;font-weight:700;line-height:1.5}.pillo-modes{gap:4px;height:58px;display:flex}.pillo-mode{border:1px solid var(--pillo-card-line);background:var(--pillo-chip-off);text-transform:uppercase;color:var(--pillo-violet);border-radius:8px;flex:1;justify-content:center;align-items:center;font-size:10px;font-weight:700;transition:background .35s,border-color .35s;display:flex}.pillo-mode.on{background:var(--pillo-chip-on);border-color:var(--pillo-violet)}.pillo-browser{border:1px solid var(--pillo-card-line);background:var(--pillo-chip-off);border-radius:8px;flex-direction:column;height:58px;display:flex;overflow:hidden}.pillo-browser-bar{border-bottom:1px solid var(--pillo-card-line);align-items:center;gap:4px;height:15px;padding:0 8px;display:flex}.pillo-browser-bar i{background:var(--pillo-card-line);border-radius:50%;width:6px;height:6px}.pillo-steps{flex:1;align-items:stretch;gap:4px;padding:8px;display:flex}.pillo-step{border:1px solid var(--pillo-card-line);background:var(--pillo-chip-off);text-transform:uppercase;min-width:0;color:var(--pillo-muted);border-radius:8px;flex:1 1 0;justify-content:center;align-items:center;font-size:10px;font-weight:700;transition:background .35s,border-color .35s,color .35s;display:flex}.pillo-step.on{background:var(--pillo-chip-on);border-color:var(--pillo-violet);color:var(--pillo-violet)}.pillo-review{border:1px solid var(--pillo-card-line);background:var(--pillo-chip-off);border-radius:8px;flex-direction:column;gap:8px;height:58px;padding:8px;display:flex}.pillo-review-row{align-items:center;gap:8px;height:16px;display:flex}.pillo-review-row span{width:80px;color:var(--pillo-violet-ink);font-size:12px;line-height:1.5}.pillo-circle{border:1px solid var(--pillo-card-line);background:#fff;border-radius:50%;width:16px;height:16px;transition:background .3s,border-color .3s}.pillo-circle.on{background:var(--pillo-circle-on);border-color:var(--pillo-violet)}.pillo-tick{flex:none;width:16px;height:16px}.pillo-tick path{fill:none;stroke:var(--pillo-violet);stroke-width:2px;stroke-linecap:round;stroke-dasharray:24;stroke-dashoffset:24px;transition:stroke-dashoffset .3s}.pillo-tick.on path{stroke-dashoffset:0}