.ks{--demo-accent:#6e8bff;min-width:0;color:var(--ink);font-family:var(--font-sans);gap:14px;padding:18px;display:grid;container:ks/inline-size}.ks *,.ks :before,.ks :after{box-sizing:border-box}.ks .btn{appearance:none;border:1px solid var(--line-2);background:var(--panel);color:var(--ink);font:500 12px/1 var(--font-mono);letter-spacing:.03em;cursor:pointer;text-transform:uppercase;white-space:nowrap;border-radius:4px;padding:9px 12px}.ks .btn:hover{border-color:var(--ink-2)}.ks .btn.danger{border-color:color-mix(in srgb, var(--bad) 55%, transparent);color:var(--bad)}.ks .btn.danger:hover{background:var(--bad);color:var(--on-color)}.ks .ks-controls{flex-wrap:wrap;align-items:flex-end;gap:12px 18px;display:flex}.ks .ks-field{gap:6px;min-width:0;display:grid}.ks .ks-lbl{font:500 10.5px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.ks .ks-palette{flex:420px}.ks .ks-pods{flex-wrap:wrap;gap:6px;display:flex}.ks .ks-pod{appearance:none;text-align:left;border:1px solid var(--line-2);border-left:3px solid var(--c);background:var(--panel);color:var(--ink);cursor:pointer;border-radius:4px;gap:3px;padding:6px 9px 6px 11px;transition:background .2s,transform .1s;display:grid}.ks .ks-pod:hover{background:color-mix(in srgb, var(--c) 14%, var(--panel))}.ks .ks-pod:active{transform:translateY(1px)}.ks .ks-pod b{font:500 12px/1 var(--font-mono)}.ks .ks-pod small{font:400 9.5px/1 var(--font-mono);color:var(--muted)}.ks .ks-seg{border:1px solid var(--line-2);background:var(--panel);border-radius:4px;display:inline-flex;overflow:hidden}.ks .ks-seg button{appearance:none;color:var(--ink-2);font:500 11.5px/1 var(--font-mono);letter-spacing:.03em;text-transform:uppercase;cursor:pointer;white-space:nowrap;background:0 0;border:0;padding:9px 11px;transition:background .2s,color .2s}.ks .ks-seg button+button{border-left:1px solid var(--line-2)}.ks .ks-seg button[aria-pressed=true]{background:var(--demo-accent);color:var(--on-color)}.ks .ks-btns{gap:8px;display:flex}.ks .ks-mode{font:500 10.5px/1.2 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:-4px 0 0}.ks .ks-mode.is-auto:before{content:"";background:var(--demo-accent);vertical-align:1px;border-radius:50%;width:6px;height:6px;margin-right:8px;animation:1.4s ease-in-out infinite ks-pulse;display:inline-block}@keyframes ks-pulse{50%{opacity:.25}}.ks .ks-stage-wrap{border:1px solid var(--line);background:radial-gradient(70% 60% at 50% 0%, color-mix(in srgb, var(--demo-accent) 8%, transparent), transparent 70%), var(--bg);border-radius:6px;position:relative;overflow:hidden}.ks .ks-stage{touch-action:pan-y;-webkit-user-select:none;user-select:none;width:100%;height:510px;display:block}.ks .ks-stage.is-grab{cursor:grab}.ks .ks-stage.is-dragging{cursor:grabbing;touch-action:none}.ks .ks-caption{font:400 15px/1.35 var(--font-sans);text-wrap:balance;opacity:0;max-width:70ch;transition:opacity .5s, transform .5s var(--ease-out,ease);pointer-events:none;margin:0;position:absolute;bottom:10px;left:14px;right:14px;transform:translateY(6px)}.ks .ks-caption.is-on{opacity:1;transform:none}.ks .ks-caption b{color:var(--demo-accent);font:500 11px/1 var(--font-mono);letter-spacing:.08em;vertical-align:2px;margin-right:8px}.ks .ks-bottom{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:start;gap:14px;display:grid}.ks .ks-stats{background:var(--line);border:1px solid var(--line);border-radius:6px;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;margin:0;display:grid;overflow:hidden}.ks .ks-stats div{background:var(--panel);min-width:0;padding:9px 10px}.ks .ks-stats dt{font:500 9.5px/1.2 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ks .ks-stats dd{font:500 19px/1.1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;margin:4px 0 0}.ks .ks-stats dd[data-tone=warn]{color:var(--warn)}.ks .ks-stats dd[data-tone=bad]{color:var(--bad)}.ks .ks-log{min-height:7.75em;font:400 10.5px/1.55 var(--font-mono);color:var(--ink-2);margin:0;padding:0;list-style:none}.ks .ks-log li{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ks .ks-log li:not(:first-child){opacity:.55}.ks .ks-log li span{color:var(--muted);margin-right:6px}.ks .ks-log li[data-tone=ok]{color:var(--ok)}.ks .ks-log li[data-tone=warn]{color:var(--warn)}.ks .ks-log li[data-tone=bad]{color:var(--bad)}.ks .ks-log li[data-tone=info]{color:var(--info)}.ks .ks-foot{font:400 10.5px/1.5 var(--font-mono);color:var(--muted);margin:0}@container ks (width<=900px){.ks .ks-bottom{grid-template-columns:minmax(0,1fr)}.ks .ks-stage{height:490px}}@container ks (width<=560px){.ks .ks-stage{height:500px}.ks .ks-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.ks .ks-stats dd{font-size:16px}.ks .ks-caption{font-size:13px}.ks .ks-pod{padding:5px 7px 5px 9px}.ks .ks-pod small{display:none}.ks .ks-seg button{padding:9px 8px;font-size:11px}.ks .ks-btns{width:100%}.ks .ks-btns .btn{flex:1}}