.kpc-window{position:fixed;box-sizing:border-box;margin:0;padding:0;max-width:calc(100vw - 20px);max-height:calc(100vh - 20px);min-width:min(600px,calc(100vw - 20px));min-height:min(560px,calc(100vh - 20px));border:var(--cb-border-width) solid var(--cb-border);border-radius:calc(var(--cb-radius) * 0.83333);background:var(--cb-raised);color:var(--cb-text);box-shadow:var(--cb-shadow);resize:both;overflow:hidden;isolation:isolate;font-size:calc(12px * var(--cb-type-scale))}
.kpc-window[open]{display:flex;flex-direction:column}
.kpc-window::backdrop{background:color-mix(in srgb, var(--cb-overlay-ink) 33.33333%, transparent);backdrop-filter:blur(2px)}
.kpc-window.is-maximized{resize:none}
.kpc-window button,.kpc-window input,.kpc-window select{box-sizing:border-box;font:inherit}
.kpc-window button{min-height:28px;padding:calc(var(--cb-editor-space) * 0.2) calc(var(--cb-editor-space) * 0.45);border:var(--cb-border-width) solid var(--cb-border);border-radius:calc(var(--cb-radius) * 0.41667);background:var(--cb-raised);color:var(--cb-text);cursor:pointer;white-space:nowrap}
.kpc-window button:hover:not(:disabled){background:var(--cb-hover);border-color:var(--cb-border-strong)}
.kpc-window button:disabled{opacity:.5;cursor:default}
.kpc-window button:focus-visible,.kpc-window input:focus-visible,.kpc-window select:focus-visible,.kpc-viewport:focus-visible,.kpc-heading:focus-visible{outline:max(2px, var(--cb-border-width)) solid var(--cb-focus);outline-offset:2px}
.kpc-heading{display:flex;align-items:center;gap:calc(var(--cb-editor-space) * 0.5);flex-shrink:0;min-height:43px;padding:calc(var(--cb-editor-space) * 0.35) calc(var(--cb-editor-space) * 0.55);background:var(--cb-inset);border-bottom:var(--cb-border-width) solid var(--cb-border);cursor:move;touch-action:none;user-select:none}
.kpc-heading>strong{font-size:calc(14px * var(--cb-type-scale));white-space:nowrap}
.kpc-heading>span{flex:1;min-width:0;color:var(--cb-text);font-size:calc(11px * var(--cb-type-scale));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpc-window .kpc-icon-button{flex:none;width:28px;height:28px;min-height:28px;padding:0;line-height:1;font-size:18px;border-color:transparent;background:transparent}
.kpc-stage{position:relative;flex:1;min-width:0;min-height:160px;overflow:hidden;background:var(--cb-inset)}
.kpc-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.kpc-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:calc(var(--cb-editor-space) * 0.35);height:100%;padding:calc(var(--cb-editor-space) * 0.35);box-sizing:border-box;pointer-events:none}
.kpc-card{display:flex;flex-direction:column;min-width:0;min-height:0;border:var(--cb-border-width) solid var(--cb-border);border-radius:calc(var(--cb-radius) * 0.5);overflow:hidden;pointer-events:auto}
.kpc-card.is-selected{border:calc(var(--cb-border-width) * 2) solid var(--cb-border-strong);box-shadow:0 0 0 1px color-mix(in srgb, var(--cb-focus) 20%, transparent)}
.kpc-card-heading{display:flex;align-items:center;gap:calc(var(--cb-editor-space) * 0.35);flex:none;min-height:34px;padding:calc(var(--cb-editor-space) * 0.15) calc(var(--cb-editor-space) * 0.35);background:var(--cb-raised);border-bottom:var(--cb-border-width) solid var(--cb-border)}
.kpc-choice{display:flex;align-items:center;gap:calc(var(--cb-editor-space) * 0.3);margin:0;white-space:nowrap;cursor:pointer}
.kpc-choice strong{font-size:calc(12px * var(--cb-type-scale));font-weight:650}
.kpc-choice>span{font-size:calc(10px * var(--cb-type-scale));color:var(--cb-text)}
.kpc-window select[data-kpc-entry]{flex:1;min-width:0;width:0;height:28px;padding:3px 6px;border:var(--cb-border-width) solid var(--cb-border);border-radius:calc(var(--cb-radius) * 0.33333);background:var(--cb-surface);color:var(--cb-text);font-weight:650}
.kpc-window select[data-kpc-entry]:disabled{opacity:.65}
.kpc-window .kpc-choice input,.kpc-window .kpc-options input{flex:0 0 14px;width:14px;min-width:14px;height:14px;margin:0;accent-color:var(--cb-primary);padding:0}
.kpc-count{flex:1;min-width:0;text-align:right;font-size:calc(11px * var(--cb-type-scale));color:var(--cb-text);white-space:nowrap}
.kpc-viewport{position:relative;flex:1 0 96px;min-height:96px;min-width:0;touch-action:none;cursor:grab;overflow:hidden}
.kpc-viewport:active{cursor:grabbing}
.kpc-original-label{display:none;position:absolute;right:9px;top:8px;padding:calc(var(--cb-editor-space) * 0.15) calc(var(--cb-editor-space) * 0.35);border-radius:calc(var(--cb-radius) * 0.33333);background:color-mix(in srgb, var(--cb-primary) 80%, transparent);color:var(--cb-on-primary);font-size:calc(11px * var(--cb-type-scale));pointer-events:none}
.kpc-window.show-original .kpc-original-label{display:block}
.kpc-unavailable{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:calc(var(--cb-editor-space) * 0.8);color:var(--cb-text);background:var(--cb-inset);font-size:calc(12px * var(--cb-type-scale))}
.kpc-window [hidden]{display:none!important}
.kpc-metrics{flex:0 1 auto;min-height:25px;max-height:132px;overflow:auto;overscroll-behavior:contain;padding:calc(var(--cb-editor-space) * 0.25) calc(var(--cb-editor-space) * 0.4);background:var(--cb-raised);border-top:var(--cb-border-width) solid var(--cb-border);font-size:calc(11px * var(--cb-type-scale));color:var(--cb-text)}
.kpc-data-summary{display:flex;gap:calc(var(--cb-editor-space) * 0.6);align-items:center;flex-wrap:wrap;min-height:19px;font-size:calc(10px * var(--cb-type-scale))}
.kpc-data-summary b{color:var(--cb-text);font-weight:600;font-variant-numeric:tabular-nums}
.kpc-card-performance{min-height:16px;color:var(--cb-text);font-size:calc(9px * var(--cb-type-scale));font-variant-numeric:tabular-nums}
.kpc-data-detail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--cb-editor-space) * 0.15) calc(var(--cb-editor-space) * 0.6);margin:6px 0}
.kpc-data-detail>div{display:flex;justify-content:space-between;gap:calc(var(--cb-editor-space) * 0.3);min-width:0}
.kpc-data-detail dt,.kpc-data-detail dd{margin:0;font-size:calc(10px * var(--cb-type-scale));line-height:calc(1.4 * var(--cb-leading-scale))}
.kpc-data-detail dd{color:var(--cb-text);font-variant-numeric:tabular-nums;text-align:right}
.kpc-metrics p.kpc-metric-error{color:var(--cb-danger-ink)}
.kpc-peak{display:flex;align-items:center;gap:calc(var(--cb-editor-space) * 0.45);flex-wrap:wrap;min-height:24px}
.kpc-peak b{font-weight:600;color:var(--cb-text)}
.kpc-peak>span{white-space:nowrap}
.kpc-window .kpc-peak button{margin-left:auto;min-height:23px;font-size:calc(10px * var(--cb-type-scale));padding:calc(var(--cb-editor-space) * 0.1) calc(var(--cb-editor-space) * 0.25);background:transparent}
.kpc-metrics details{margin-top:2px;max-height:92px;overflow:auto}
.kpc-metrics summary{cursor:pointer;color:var(--cb-text);font-size:calc(10px * var(--cb-type-scale))}
.kpc-average{padding-top:calc(var(--cb-editor-space) * 0.25);line-height:calc(1.6 * var(--cb-leading-scale))}
.kpc-metrics p{margin:3px 0 0;line-height:calc(1.5 * var(--cb-leading-scale));font-size:calc(10px * var(--cb-type-scale));color:var(--cb-muted)}
.kpc-grid.is-expanded{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.kpc-grid.is-expanded>.kpc-card:not(.is-expanded){display:none}
.kpc-toolbar{display:flex;align-items:center;gap:calc(var(--cb-editor-space) * 0.5);flex-shrink:0;padding:calc(var(--cb-editor-space) * 0.45) calc(var(--cb-editor-space) * 0.6) calc(var(--cb-editor-space) * 0.35);background:var(--cb-raised);border-top:var(--cb-border-width) solid var(--cb-border)}
.kpc-transport{display:flex;align-items:center;gap:calc(var(--cb-editor-space) * 0.2);flex:none}
.kpc-window .kpc-transport button[data-kpc-action="play"]{min-width:55px}
.kpc-window input[data-kpc-progress]{flex:1;min-width:70px;width:auto;height:20px;margin:0;padding:0;accent-color:var(--cb-primary)}
.kpc-toolbar output{flex:none;min-width:103px;text-align:right;font-size:calc(11px * var(--cb-type-scale));font-variant-numeric:tabular-nums;color:var(--cb-text);white-space:nowrap}
.kpc-speed{display:block;flex:none;margin:0}
.kpc-window select[data-kpc-speed]{width:68px;height:28px;min-height:28px;margin:0;padding:3px 5px;border:var(--cb-border-width) solid var(--cb-border);border-radius:calc(var(--cb-radius) * 0.33333);background:var(--cb-surface);color:var(--cb-text)}
.kpc-footer{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--cb-editor-space) * 0.6);flex-shrink:0;padding:0 calc(var(--cb-editor-space) * 0.6) calc(var(--cb-editor-space) * 0.4);background:var(--cb-raised)}
.kpc-options{display:flex;align-items:center;gap:calc(var(--cb-editor-space) * 0.65);flex-wrap:wrap}
.kpc-options label{display:flex;align-items:center;gap:calc(var(--cb-editor-space) * 0.25);margin:0;font-size:calc(11px * var(--cb-type-scale));white-space:nowrap;cursor:pointer}
.kpc-window .kpc-options button{min-height:25px;padding:calc(var(--cb-editor-space) * 0.15) calc(var(--cb-editor-space) * 0.3);font-size:calc(11px * var(--cb-type-scale))}
.kpc-window .kpc-apply{min-width:136px;padding:calc(var(--cb-editor-space) * 0.3) calc(var(--cb-editor-space) * 0.55);border-color:var(--cb-border-strong);background:var(--cb-primary);color:var(--cb-on-primary);font-weight:600}
.kpc-window .kpc-apply:hover:not(:disabled){background:var(--cb-hover);border-color:var(--cb-border-strong)}
.kpc-benchmark-bar{display:flex;align-items:center;gap:calc(var(--cb-editor-space) * 0.45);flex-shrink:0;padding:calc(var(--cb-editor-space) * 0.3) calc(var(--cb-editor-space) * 0.6);border-top:var(--cb-border-width) solid var(--cb-border);background:var(--cb-raised);font-size:calc(10px * var(--cb-type-scale));color:var(--cb-text);flex-wrap:wrap}
.kpc-benchmark-bar>span:first-child{font-variant-numeric:tabular-nums;color:var(--cb-text);white-space:nowrap}
.kpc-performance-note{flex:1;min-width:150px;font-size:calc(9px * var(--cb-type-scale));color:var(--cb-muted)}
.kpc-window .kpc-benchmark-bar button{min-height:25px;padding:calc(var(--cb-editor-space) * 0.15) calc(var(--cb-editor-space) * 0.35);font-size:calc(10px * var(--cb-type-scale))}
.kpc-status{flex-shrink:0;margin:0;padding:calc(var(--cb-editor-space) * 0.25) calc(var(--cb-editor-space) * 0.6) calc(var(--cb-editor-space) * 0.35);min-height:22px;border-top:var(--cb-border-width) solid var(--cb-border);background:var(--cb-inset);color:var(--cb-text);font-size:calc(10px * var(--cb-type-scale));line-height:calc(1.5 * var(--cb-leading-scale))}
.kpc-window.has-error .kpc-status{color:var(--cb-danger-ink);background:var(--cb-danger-soft)}
@media(max-width:700px){.kpc-heading{gap:calc(var(--cb-editor-space) * 0.25);padding:calc(var(--cb-editor-space) * 0.3) calc(var(--cb-editor-space) * 0.4)}.kpc-heading>strong{font-size:calc(12px * var(--cb-type-scale))}.kpc-heading>span{font-size:calc(10px * var(--cb-type-scale))}.kpc-card-heading{gap:calc(var(--cb-editor-space) * 0.15);padding:calc(var(--cb-editor-space) * 0.15) calc(var(--cb-editor-space) * 0.2)}.kpc-choice{gap:calc(var(--cb-editor-space) * 0.15)}.kpc-choice strong{font-size:calc(11px * var(--cb-type-scale))}.kpc-count{font-size:calc(9px * var(--cb-type-scale))}.kpc-grid{gap:calc(var(--cb-editor-space) * 0.2);padding:calc(var(--cb-editor-space) * 0.2)}.kpc-metrics{padding:calc(var(--cb-editor-space) * 0.2)}.kpc-peak{gap:calc(var(--cb-editor-space) * 0.15);font-size:calc(9px * var(--cb-type-scale))}.kpc-peak>span{flex:1}.kpc-window .kpc-peak button{font-size:calc(9px * var(--cb-type-scale))}.kpc-toolbar{gap:calc(var(--cb-editor-space) * 0.25);padding:calc(var(--cb-editor-space) * 0.3)}.kpc-toolbar output{min-width:84px;font-size:calc(10px * var(--cb-type-scale))}.kpc-transport{gap:calc(var(--cb-editor-space) * 0.1)}.kpc-window .kpc-transport button{padding:calc(var(--cb-editor-space) * 0.15) calc(var(--cb-editor-space) * 0.3)}.kpc-window .kpc-transport button[data-kpc-action="play"]{min-width:40px}.kpc-footer{padding:0 calc(var(--cb-editor-space) * 0.35) calc(var(--cb-editor-space) * 0.35);gap:calc(var(--cb-editor-space) * 0.3)}.kpc-options{gap:calc(var(--cb-editor-space) * 0.25)}.kpc-options label{font-size:calc(10px * var(--cb-type-scale))}.kpc-window .kpc-apply{min-width:111px;font-size:calc(11px * var(--cb-type-scale))}.kpc-window select[data-kpc-speed]{width:58px}.kpc-status{padding:calc(var(--cb-editor-space) * 0.2) calc(var(--cb-editor-space) * 0.35);font-size:calc(9px * var(--cb-type-scale))}}
