.spj-demo{isolation:isolate}.spj-runner-grid,.spj-widget-grid{display:grid;gap:var(--demo-gap-lg)}.spj-column,.spj-widget{background:var(--demo-surface-alt);border:1px solid var(--demo-border);border-radius:var(--demo-radius-lg)}.spj-column{padding:var(--demo-pad)}.spj-column-head{display:flex;align-items:center;justify-content:space-between;gap:var(--demo-gap);margin-bottom:12px;color:var(--demo-accent);font-family:var(--demo-font-mono);font-size:var(--demo-font-size-sm)}.spj-time,.spj-hint,.spj-widget strong{color:var(--secondary-text);font-family:var(--demo-font-mono);font-size:var(--demo-font-size-sm);font-weight:400}.spj-task-list{display:grid;gap:var(--demo-gap);list-style:none;margin:0;padding:0}.spj-task,.spj-widget{color:var(--secondary-text);transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease}.spj-task{position:relative;padding:10px 34px 10px 12px;background:var(--demo-surface-deep);border:1px solid var(--demo-border);border-radius:var(--demo-radius);font-family:var(--demo-font-mono);font-size:var(--demo-font-size-sm)}.spj-task.is-running,.spj-widget.is-running{color:var(--demo-accent);background:var(--demo-fill-light);border-color:var(--demo-fill-border-hover)}.spj-task.is-done,.spj-widget.is-done{color:var(--demo-accent);background:var(--demo-fill-medium);border-color:var(--demo-fill-border-strong)}.spj-task.is-done::after{content:'\2713';position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%)}.spj-controls{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:var(--demo-pad)}.spj-runner-btn,.spj-dashboard-btn{background-color:var(--btn-bg);border-color:rgb(157 14 59 / 45%);color:var(--text-color)}.spj-runner-btn:hover,.spj-dashboard-btn:hover{background:var(--btn-bg-hover);border-color:rgb(157 14 59 / 45%);color:var(--text-color)}.spj-widget-grid{margin-top:var(--demo-gap-lg)}.spj-widget{min-height:92px;padding:var(--demo-pad);display:flex;flex-direction:column;justify-content:space-between;transform:translateY(0)}.spj-widget span{color:var(--text-color);font-weight:700}.spj-widget.is-done{transform:translateY(-2px)}.spj-widget.is-done strong::after{content:' loaded';color:var(--demo-accent)}.spj-demo .savvy-code-output{white-space:pre-wrap;overflow-wrap:break-word}.spj-demo .savvy-code-output.is-flashing{border-color:var(--demo-fill-border-hover);background:var(--demo-fill-light)}.cs-codepen-form{position:absolute;top:8px;inset-inline-end:10px;z-index:5;margin:0}.cs-codepen-btn{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:5px 10px;border:1px solid var(--demo-border);border-radius:var(--demo-radius);background:var(--demo-surface-alt);color:var(--secondary-text);cursor:pointer;font-family:var(--demo-font-mono);font-size:var(--demo-font-size-xs);transition:color .2s ease,border-color .2s ease,background .2s ease}.cs-codepen-btn:hover{color:var(--demo-accent);border-color:var(--demo-fill-border-hover);background:var(--demo-fill-light)}.cs-codepen-btn svg{width:14px;height:14px;fill:currentColor}@media (min-width:1123px){.spj-runner-grid,.spj-widget-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.spj-widget-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}