.kc-demo,.kc-run{--kc-demo-act:#1a4a6b;--kc-demo-act-glow:#1a4a6b47;--kc-demo-checking:#a86a0b;--kc-demo-pass:#2e7d4f;--kc-demo-pass-tint:#2e7d4f1f;--kc-demo-record:#a63a2b;--kc-demo-term-bg:#0f1a24;--kc-demo-term-ink:#e3e9ee;--kc-demo-term-dim:#8a9aa8;--kc-demo-term-label:#76d8ff;--kc-demo-term-pass:#7fcb9c;--kc-demo-term-dot:#e0786a}.kc-demo{width:100%;min-width:0;margin:0;position:relative}.kc-demo-stage{aspect-ratio:16/10;border:1px solid var(--sl-color-hairline);border-radius:var(--kc-radius-sm) var(--kc-radius-sm) 0 0;background:#f2f2f2;position:relative;overflow:hidden}.kc-demo-cam{width:var(--kc-demo-frame-w,2400px);height:var(--kc-demo-frame-h,1448px);transform-origin:0 0;transition:transform .7s cubic-bezier(.45,0,.2,1);position:absolute;inset:0 auto auto 0}.kc-demo-frame{opacity:0;width:100%;max-width:none;height:100%;transition:opacity .22s ease-out;position:absolute;inset:0}.kc-demo-frame.is-front{opacity:1}.kc-demo-marks{pointer-events:none;position:absolute;inset:0}.kc-demo-mark{box-sizing:border-box;border-radius:calc(5px / var(--s,.4));position:absolute}.kc-demo-mark.is-act{border:calc(2px / var(--s,.4)) solid var(--kc-demo-act);animation:.9s ease-out forwards kc-demo-outline}.kc-demo-mark.is-act:after{content:"";width:calc(44px / var(--s,.4));height:calc(44px / var(--s,.4));margin:calc(-22px / var(--s,.4));background:var(--kc-demo-act-glow);border:calc(2px / var(--s,.4)) solid var(--kc-demo-act);border-radius:50%;animation:.9s ease-out forwards kc-demo-ripple;position:absolute;top:50%;left:50%}@keyframes kc-demo-ripple{0%{opacity:1;transform:scale(.2)}to{opacity:0;transform:scale(1.6)}}@keyframes kc-demo-outline{0%,55%{opacity:1}to{opacity:0}}.kc-demo-mark.is-noted,.kc-demo-mark.is-checking,.kc-demo-mark.is-passed{border:calc(2.5px / var(--s,.4)) dashed var(--kc-demo-act);outline:calc(4px / var(--s,.4)) solid #ffffffb3}.kc-demo-mark.is-checking{border-color:var(--kc-demo-checking)}.kc-demo-mark.is-passed{border-style:solid;border-color:var(--kc-demo-pass);background:var(--kc-demo-pass-tint)}.kc-demo-mark.is-noted:after,.kc-demo-mark.is-checking:after,.kc-demo-mark.is-passed:after{right:calc(-2px / var(--s,.4));margin-bottom:calc(3px / var(--s,.4));padding:calc(1px / var(--s,.4)) calc(6px / var(--s,.4));border-radius:calc(4px / var(--s,.4));color:#fff;font:600 calc(11px / var(--s,.4)) / 1.4 var(--sl-font);white-space:nowrap;position:absolute;bottom:100%}.kc-demo-mark.is-noted:after{content:"check";background:var(--kc-demo-act)}.kc-demo-mark.is-checking:after{content:"checking";background:var(--kc-demo-checking)}.kc-demo-mark.is-passed:after{content:"✓ passed";background:var(--kc-demo-pass)}.kc-demo-badge{background:var(--kc-demo-term-bg);color:var(--kc-demo-term-ink);font:600 var(--sl-text-xs) / 1.5 var(--sl-font);white-space:nowrap;border-radius:999px;padding:.15rem .55rem;position:absolute;bottom:.5rem;left:.5rem}.kc-demo-badge:empty{display:none}.kc-demo[data-state=record] .kc-demo-badge{background:var(--kc-demo-record);color:#fff}.kc-demo[data-state=passed] .kc-demo-badge,.kc-demo[data-state=end] .kc-demo-badge{background:var(--kc-demo-pass);color:#fff}.kc-demo-toggle{width:2rem;height:2rem;color:var(--kc-demo-term-ink);cursor:pointer;opacity:.85;background:#ffffff1f;border:0;border-radius:50%;place-items:center;padding:0;display:grid;position:absolute;bottom:.5rem;right:.5rem}.kc-demo-toggle:hover,.kc-demo-toggle:focus-visible{opacity:1}.kc-demo-toggle:focus-visible{outline:2px solid var(--sl-color-accent);outline-offset:2px}.kc-demo-toggle svg{fill:currentColor;width:.9rem;height:.9rem}.kc-demo-icon-play,[data-paused=true] .kc-demo-icon-pause{display:none}[data-paused=true] .kc-demo-icon-play{display:block}.kc-demo-log{background:var(--kc-demo-term-bg);border:1px solid var(--sl-color-hairline);border-radius:0 0 var(--kc-radius-sm) var(--kc-radius-sm);height:calc(4.8em + 1.1rem);color:var(--kc-demo-term-ink);font:.75rem / 1.6 var(--sl-font-mono);text-align:start;border-top:0;flex-direction:column;justify-content:flex-end;padding:.55rem 3rem .55rem .75rem;display:flex;overflow:hidden}.kc-demo-line{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.kc-demo-label{color:var(--kc-demo-term-label)}.kc-demo-label:not(:empty){min-width:3.2ch;margin-right:.6ch;display:inline-block}.kc-demo-line.is-say .kc-demo-text{font-family:var(--sl-font);font-size:1.05em}.kc-demo-line.is-check .kc-demo-label,.kc-demo-line.is-meta{color:var(--kc-demo-term-dim)}.kc-demo-gutter{width:1.6ch;color:var(--kc-demo-term-dot);display:inline-block}.kc-demo-line.is-java .kc-demo-gutter,.kc-demo-line.is-ran .kc-demo-gutter,.kc-demo-line.is-pass .kc-demo-gutter{color:var(--kc-demo-term-pass)}.kc-demo-line.is-out{color:var(--kc-demo-term-dim)}.kc-demo-line.is-pass{color:var(--kc-demo-term-pass);font-weight:600}.kc-demo-caption{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.hero .hero-html:has(.kc-demo){width:100%;min-width:0}@media (width>=50rem){.hero:has(.kc-demo){grid-template-columns:1fr 1fr}}@media (width<=40rem){.kc-demo-log,.kc-run-console{font-size:.68rem}}@media (prefers-reduced-motion:reduce){.kc-demo-cam,.kc-demo-frame{transition:none}}