/* KeyHole design code: the one look of every KeyHole plugin. Values measured from KeyHole Animation 0.1.x (dark.css, final-ui.css,
   warm-theme.css). Generated once from those measurements; loaded last, wins over the older layers below it. */
:root{--k-font:"Segoe UI",Arial,sans-serif;
 --k-stage:#c9e7ff;--k-panel:#e6f4ff;--k-card:#f1f9ff;--k-card2:#e2f1ff;--k-field:#fff;--k-raise:linear-gradient(145deg,#fff,#e7f4ff);
 --k-line:rgba(255,255,255,.88);--k-line-2:rgba(255,255,255,.95);--k-text:#0a104f;--k-muted:#4c609e;--k-muted-2:#8a9ac0;--k-track:rgba(20,50,120,.14);--k-disabled:#d5e4f5;
 --k-raise-sh:inset 0 1px 2px #fff,0 3px 9px rgba(20,87,255,.1);--k-card-sh:inset 0 1px 2px #fff,0 7px 24px rgba(57,125,211,.1);
 --k-fill:linear-gradient(135deg,#30c9fa,#1663ff 43%,#0040ed 76%,#138fff);--k-fill-line:#d5fcff;
 --k-fill-sh:inset 0 2px 6px rgba(169,239,255,.5),0 5px 17px rgba(17,126,255,.22);--k-fill-sh-s:inset 0 1px 0 rgba(255,255,255,.5),0 3px 8px rgba(24,83,210,.25);--ks-stage:#111316}
html.dark-mode{--k-stage:#1d1d1d;--k-panel:#232323;--k-card:#2a2a2a;--k-card2:#1f1f1f;--k-field:#1a1a1a;--k-raise:linear-gradient(180deg,#363636,#2e2e2e);
 --k-line:rgba(255,255,255,.07);--k-line-2:rgba(255,255,255,.12);--k-text:#e4e4e4;--k-muted:#9b9b9b;--k-muted-2:#6d6d6d;--k-track:rgba(255,255,255,.14);--k-disabled:#2c2c2c;
 --k-raise-sh:inset 0 1px 0 rgba(255,255,255,.05),0 2px 6px rgba(0,0,0,.25);--k-card-sh:inset 0 1px 0 rgba(255,255,255,.03),0 6px 18px rgba(0,0,0,.25);--k-fill-line:rgba(143,197,255,.9)}
html body{background:var(--k-stage)!important}
html:not(#ks):not(#kh) body{font-family:var(--k-font)!important;font-weight:450!important;font-feature-settings:normal!important}
html:not(#ks):not(#kh) body button,html:not(#ks):not(#kh) body input,html:not(#ks):not(#kh) body select,html:not(#ks):not(#kh) body textarea{font-family:var(--k-font)!important;font-feature-settings:normal!important}
html:not(#ks):not(#kh) body .workspace{padding:6px!important;gap:5px!important;background:var(--k-stage)!important;grid-template-columns:60px minmax(0,1fr)!important}
html:not(#ks):not(#kh) body .nav-bar,html:not(#ks):not(#kh) body .content-column{background:var(--k-panel)!important;border:1px solid var(--k-line)!important;border-radius:18px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important;padding:5px!important}
html:not(#ks):not(#kh) body .nav-bar{width:60px!important;align-items:center!important;box-sizing:border-box!important}
html:not(#ks):not(#kh) body .content-column{min-width:0!important;gap:6px!important}
html:not(#ks):not(#kh) body #tabs{padding:10px 0 10px!important;gap:8px!important;align-items:center!important}
html:not(#ks):not(#kh) body #tabs>button,html:not(#ks):not(#kh) body #account{background:var(--k-raise)!important;border:1px solid var(--k-line-2)!important;color:var(--k-text)!important;box-shadow:var(--k-raise-sh)!important;transition:filter .16s ease!important}
html:not(#ks):not(#kh) body #tabs>button{width:44px!important;height:47px!important;border-radius:16px!important;padding:0!important}
html:not(#ks):not(#kh) body #account{width:48px!important;height:42px!important;border-radius:12px!important;padding:0!important}html:not(#ks):not(#kh) body #account.on{background:var(--k-raise)!important;box-shadow:var(--k-raise-sh)!important;color:var(--k-text)!important}@media (hover:hover) and (pointer:fine){html:not(#ks):not(#kh) body #account.on:hover{background:var(--k-raise)!important;box-shadow:var(--k-raise-sh)!important;color:var(--k-text)!important}}@media (hover:hover) and (pointer:fine){html:not(#ks):not(#kh) body #tabs>button:hover:not(.active),html:not(#ks):not(#kh) body #account:hover{background:var(--k-raise)!important;filter:brightness(1.14)!important;color:var(--k-text)!important}}html:not(#ks):not(#kh) body #tabs>button.active{background:var(--k-fill)!important;border-color:var(--k-fill-line)!important;color:#fff!important;box-shadow:var(--k-fill-sh)!important}@media (hover:hover) and (pointer:fine){html:not(#ks):not(#kh) body #tabs>button.active:hover{background:var(--k-fill)!important;border-color:var(--k-fill-line)!important;color:#fff!important;box-shadow:var(--k-fill-sh)!important}}
html:not(#ks):not(#kh) body #tabs>button svg{width:24px!important;height:24px!important}
html:not(#ks):not(#kh) body #account svg{width:22px!important;height:22px!important}
html:not(#ks):not(#kh) body #nav-mode{width:30px!important;height:30px!important;border-radius:50%!important;background:var(--k-raise)!important;border:1px solid var(--k-line-2)!important;color:var(--k-text)!important;box-shadow:var(--k-raise-sh)!important}@media (hover:hover) and (pointer:fine){html:not(#ks):not(#kh) body #nav-mode:hover{background:var(--k-raise)!important;filter:brightness(1.14)!important}}
html:not(#ks):not(#kh) body .toolbar{min-height:36px!important;padding:0 7px!important;border:0!important;margin:0!important}
html:not(#ks):not(#kh) body .khs-brand{font-size:13px!important;font-weight:700!important;letter-spacing:-.26px!important;color:var(--k-text)!important}
html:not(#ks):not(#kh) body .khs-frame-btn{width:36px!important;height:30px!important;border-radius:12px!important;background:var(--k-raise)!important;border:1px solid var(--k-line-2)!important;color:var(--k-text)!important;box-shadow:var(--k-raise-sh)!important}@media (hover:hover) and (pointer:fine){html:not(#ks):not(#kh) body .khs-frame-btn:hover{background:var(--k-raise)!important;filter:brightness(1.14)!important;color:var(--k-text)!important}}
html:not(#ks):not(#kh) body .khs-frame-btn[aria-pressed="true"],html:not(#ks):not(#kh) body .khs-frame-btn.on{background:var(--k-fill)!important;border-color:var(--k-fill-line)!important;color:#fff!important;box-shadow:var(--k-fill-sh)!important}
html:not(#ks):not(#kh) body .content-column main>article,html:not(#ks):not(#kh) body .content-column>main>article{background:var(--k-card)!important;border:1px solid var(--k-line)!important;border-radius:14px!important;box-shadow:var(--k-card-sh)!important;padding:8px!important}
html:not(#ks):not(#kh) body main[data-pane=uikit]>article,html:not(#ks):not(#kh) body main[data-pane=uikit] .apply-row{background:transparent!important}
html:not(#ks):not(#kh) body main[data-pane=uikit]>article{background:var(--k-card)!important}
html:not(#ks):not(#kh) body .content-column .workspace-scroll{padding:0 2px 0 0!important;background:transparent!important}
html:not(#ks):not(#kh) body .preset-panel{background:var(--k-card)!important;border:1px solid var(--k-line)!important;border-radius:14px!important;box-shadow:var(--k-card-sh)!important;padding:8px!important}
html:not(#ks):not(#kh) body .preset-panel>.panel-label{display:none!important}
html:not(#ks):not(#kh) body #face-modes.khs-list,html:not(#ks):not(#kh) body #uk-cats{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(66px,1fr))!important;gap:6px!important;background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;margin:0 0 8px!important;overflow:visible!important}
html:not(#ks):not(#kh) body #face-modes.khs-list>button,html:not(#ks):not(#kh) body #uk-cats>button{display:flex!important;align-items:center!important;justify-content:center!important;width:auto!important;height:34px!important;min-height:34px!important;padding:0 4px!important;border-radius:12px!important;background:var(--k-raise)!important;border:1px solid var(--k-line-2)!important;color:var(--k-text)!important;box-shadow:var(--k-raise-sh)!important;font-size:11px!important;font-weight:500!important;white-space:nowrap!important}@media (hover:hover) and (pointer:fine){html:not(#ks):not(#kh) body #face-modes.khs-list>button:hover,html:not(#ks):not(#kh) body #uk-cats>button:hover{background:var(--k-raise)!important;filter:brightness(1.14)!important;color:var(--k-text)!important}}html:not(#ks):not(#kh) body #face-modes.khs-list>button.active,html:not(#ks):not(#kh) body #face-modes.khs-list>button.on,html:not(#ks):not(#kh) body #uk-cats>button.on,html:not(#ks):not(#kh) body #uk-cats>button.active{background:var(--k-fill)!important;border-color:var(--k-fill-line)!important;color:#fff!important;font-weight:500!important;box-shadow:var(--k-fill-sh)!important}@media (hover:hover) and (pointer:fine){html:not(#ks):not(#kh) body #face-modes.khs-list>button.active:hover,html:not(#ks):not(#kh) body #uk-cats>button.on:hover{background:var(--k-fill)!important;border-color:var(--k-fill-line)!important;color:#fff!important;font-weight:500!important;box-shadow:var(--k-fill-sh)!important}}
html:not(#ks):not(#kh) body .parameters-card,html:not(#ks):not(#kh) body .khs-card{background:var(--k-card)!important;border:1px solid var(--k-line)!important;border-radius:16px!important;box-shadow:var(--k-card-sh)!important;padding:12px 10px 14px!important}
html:not(#ks):not(#kh) body .content-column .parameters-card{padding:12px 10px 14px!important}
html:not(#ks):not(#kh) body .field-label,html:not(#ks):not(#kh) body .field-label span,html:not(#ks):not(#kh) body .khs-form label,html:not(#ks):not(#kh) body .parameters-card label{color:var(--k-text)!important;font-size:12px!important;font-weight:450!important}
html:not(#ks):not(#kh) body .range-control output,html:not(#ks):not(#kh) body .khs-form output{color:var(--k-muted)!important;font-size:11px!important}
html:not(#ks):not(#kh) body .segmented:not(#uk-cats),html:not(#ks):not(#kh) body .segmented-control{background:var(--k-field)!important;border:1px solid var(--k-line)!important;border-radius:12px!important;padding:3px!important;gap:3px!important}
html:not(#ks):not(#kh) body .segmented:not(#uk-cats)>button,html:not(#ks):not(#kh) body .segmented-control>button{border-radius:9px!important;min-height:28px!important;color:var(--k-muted)!important;font-size:12px!important;font-weight:500!important;background:transparent!important;box-shadow:none!important;border:1px solid transparent!important}@media (hover:hover) and (pointer:fine){html:not(#ks):not(#kh) body .segmented:not(#uk-cats)>button:hover:not(.on):not(.active),html:not(#ks):not(#kh) body .segmented-control>button:hover:not(.active){color:var(--k-text)!important;background:rgba(127,127,127,.12)!important}}
html:not(#ks):not(#kh) body .segmented:not(#uk-cats)>button.on,html:not(#ks):not(#kh) body .segmented:not(#uk-cats)>button.active,html:not(#ks):not(#kh) body .segmented-control>button.active{background:var(--k-fill)!important;border-color:var(--k-fill-line)!important;color:#fff!important;font-weight:500!important;box-shadow:var(--k-fill-sh-s)!important}
html:not(#ks):not(#kh) body .khs-dd-btn{background:var(--k-field)!important;border:1px solid var(--k-line-2)!important;border-radius:12px!important;color:var(--k-text)!important;min-height:34px!important;height:34px!important;font-size:12px!important;padding:0 11px 0 12px!important}@media (hover:hover) and (pointer:fine){html:not(#ks):not(#kh) body .khs-dd-btn:hover{border-color:rgba(127,127,127,.6)!important}}
html:not(#ks):not(#kh) body .khs-dd-list{background:var(--k-card)!important;border:1px solid var(--k-line-2)!important;border-radius:12px!important;color:var(--k-text)!important}
html:not(#ks):not(#kh) body .khs-dd-opt.sel,html:not(#ks):not(#kh) body .khs-dd-opt[aria-selected="true"]{background:var(--k-fill)!important;color:#fff!important}@media (hover:hover) and (pointer:fine){html:not(#ks):not(#kh) body .khs-dd-opt:hover:not(.sel){background:rgba(127,127,127,.14)!important}}
html:not(#ks):not(#kh) body select,html:not(#ks):not(#kh) body input:not([type=range]):not([type=color]):not([type=checkbox]),html:not(#ks):not(#kh) body textarea{background:var(--k-field)!important;color:var(--k-text)!important;border:1px solid var(--k-line-2)!important;border-radius:12px!important}
html:not(#ks):not(#kh) body .khs-form input:not([type=range]):not([type=checkbox]):not([type=color]):not(.khs-input),html:not(#ks):not(#kh) body select{min-height:34px!important;height:34px!important;border-radius:12px!important}
html:not(#ks):not(#kh) body #element-search{height:34px!important;min-height:34px!important;border-radius:12px!important}
html:not(#ks):not(#kh) body input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,#2d7cf6 0 var(--range-fill,0%),var(--k-track) var(--range-fill,0%))!important;height:6px!important;border-radius:3px!important}
html:not(#ks):not(#kh) body input[type=range]::-webkit-slider-thumb{width:18px!important;height:18px!important;margin-top:-6px!important;border-radius:50%!important;background:#eef2ff!important;border:0!important;box-shadow:0 2px 8px rgba(0,0,0,.5)!important}
html:not(#ks):not(#kh) body .apply-row{gap:6px!important;margin-top:8px!important;padding:0!important}
html:not(#ks):not(#kh) body .apply-row .primary,html:not(#ks):not(#kh) body button.primary{background:var(--k-fill)!important;border:1px solid var(--k-fill-line)!important;color:#fff!important;border-radius:12px!important;box-shadow:var(--k-fill-sh)!important;font-size:12px!important;font-weight:600!important;min-height:38px!important;height:38px!important}@media (hover:hover) and (pointer:fine){html:not(#ks):not(#kh) body .apply-row .primary:hover:not(:disabled),html:not(#ks):not(#kh) body button.primary:hover:not(:disabled){filter:brightness(1.08) saturate(1.1)!important}}
html:not(#ks):not(#kh) body .apply-row .primary:disabled,html:not(#ks):not(#kh) body button.primary:disabled{background:var(--k-disabled)!important;border-color:var(--k-line)!important;color:var(--k-muted-2)!important;box-shadow:none!important}
html:not(#ks):not(#kh) body .khs-remove,html:not(#ks):not(#kh) body .apply-row .khs-remove{background:var(--k-raise)!important;border:1px solid var(--k-line-2)!important;color:var(--k-text)!important;border-radius:12px!important;box-shadow:var(--k-raise-sh)!important;font-size:12px!important;font-weight:600!important;min-height:38px!important;height:38px!important}@media (hover:hover) and (pointer:fine){html:not(#ks):not(#kh) body .khs-remove:hover,html:not(#ks):not(#kh) body .apply-row .khs-remove:hover{background:var(--k-raise)!important;filter:brightness(1.14)!important;color:var(--k-text)!important}}
html:not(#ks):not(#kh) body details.uk-section{background:var(--k-card2)!important;border:1px solid var(--k-line)!important;border-radius:14px!important;padding:10px 12px!important;margin:8px 0 0!important}
html:not(#ks):not(#kh) body details.uk-section>summary,html:not(#ks):not(#kh) body details>summary{font-size:12px!important;font-weight:700!important;color:var(--k-text)!important}
html:not(#ks):not(#kh) body .element-tile-stage{background:var(--k-card2)!important;border-radius:14px!important;box-shadow:inset 0 0 0 1px var(--k-line)!important}
html:not(#ks):not(#kh) body .element-tile[aria-selected=true] .element-tile-stage,html:not(#ks):not(#kh) body .element-tile.active .element-tile-stage,html:not(#ks):not(#kh) body .element-tile.on .element-tile-stage{box-shadow:inset 0 0 0 2px #2d7cf6,0 4px 14px rgba(17,126,255,.25)!important}
html:not(#ks):not(#kh) body .element-tile,html:not(#ks):not(#kh) body .element-tile[aria-selected=true]{border:0!important;background:transparent!important;border-radius:14px!important}
html:not(#ks):not(#kh) body #caption-grid .caption-tile{background:var(--k-card2)!important;border:1px solid var(--k-line)!important;border-radius:14px!important;box-shadow:none!important}
html:not(#ks):not(#kh) body #caption-grid .caption-tile.selected{border-color:#2d7cf6!important;box-shadow:0 0 0 1px #2d7cf6,0 4px 14px rgba(17,126,255,.25)!important}
html:not(#ks):not(#kh) body #caption-grid .caption-tile.selected>span{color:var(--k-text)!important}
html:not(#ks):not(#kh) body .khs-bt-preview,html:not(#ks):not(#kh) body .khs-ease,html:not(#ks):not(#kh) body main[data-pane=uikit] .workspace-scroll>.preview-card.khs-stage-card{background-color:#111316!important;background-image:linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px)!important;background-size:26px 26px!important;background-position:center!important;border:1px solid var(--k-line)!important;border-radius:16px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 28px rgba(54,124,255,.05)!important}
html:not(#ks):not(#kh) body .khs-ease .khs-ease-frame{background:#1a1b1f!important;border-radius:10px!important}
html:not(#ks):not(#kh) body .khs-msg input.khs-input{border-radius:12px!important;height:32px!important;background:var(--k-field)!important}
html:not(#ks):not(#kh) body .khs-msg.me input.khs-input{background:rgba(21,100,255,.18)!important;border-color:rgba(45,124,246,.45)!important}
html:not(#ks):not(#kh) body .khs-chat-add>button,html:not(#ks):not(#kh) body .khs-paste-box .khs-chat-add>button{background:var(--k-raise)!important;border:1px solid var(--k-line-2)!important;color:var(--k-text)!important;border-radius:12px!important;height:32px!important;min-height:32px!important;line-height:30px!important;box-shadow:var(--k-raise-sh)!important}
html:not(#ks):not(#kh) body .khs-paste-box .khs-paste-ok{background:var(--k-fill)!important;border-color:var(--k-fill-line)!important;color:#fff!important}
html:not(#ks):not(#kh) body .khs-ghost{background:var(--k-raise)!important;border:1px solid var(--k-line-2)!important;color:var(--k-text)!important;border-radius:12px!important;box-shadow:var(--k-raise-sh)!important}@media (hover:hover) and (pointer:fine){html:not(#ks):not(#kh) body .khs-ghost:hover{background:var(--k-raise)!important;filter:brightness(1.14)!important}}
html:not(#ks):not(#kh) body #khr-steps .khr-step.is-current{background:var(--k-card2)!important;border:1px solid var(--k-line-2)!important;border-radius:14px!important}
html:not(#ks):not(#kh) body #khr-steps .khr-step.is-current .khr-num{background:var(--k-fill)!important;box-shadow:var(--k-fill-sh-s)!important}
html:not(#ks):not(#kh) body #khr-steps .khr-title{font-weight:700!important;color:var(--k-text)!important}
html:not(#ks):not(#kh) body #khr-steps .khr-sum{color:var(--k-muted)!important}
html:not(#ks):not(#kh) body #element-back{color:var(--k-text)!important}
@media(max-width:300px){html:not(#ks):not(#kh) body .workspace{grid-template-columns:48px minmax(0,1fr)!important;padding:4px!important;gap:4px!important}html:not(#ks):not(#kh) body .nav-bar{width:48px!important;padding:4px!important;border-radius:14px!important}html:not(#ks):not(#kh) body .content-column{border-radius:14px!important;padding:4px!important}html:not(#ks):not(#kh) body #tabs>button{width:36px!important;height:38px!important;border-radius:12px!important}html:not(#ks):not(#kh) body #account{width:38px!important;height:36px!important;border-radius:10px!important}html:not(#ks):not(#kh) body #tabs>button svg,html:not(#ks):not(#kh) body #account svg{width:20px!important;height:20px!important}}
html:not(#ks):not(#kh) body #tabs>button{flex:0 0 47px!important;min-height:47px!important;max-height:47px!important}
html:not(#ks):not(#kh) body #account svg,html:not(#ks):not(#kh) body #account svg *{stroke:currentColor!important;color:var(--k-text)!important}
@media(max-width:300px){html:not(#ks):not(#kh) body #tabs>button{flex:0 0 38px!important;min-height:38px!important;max-height:38px!important}}
html:not(#ks):not(#kh) body details.uk-section{background:transparent!important;border:0!important;border-top:1px solid var(--k-line)!important;border-radius:0!important;padding:10px 0!important;margin:0!important}
html:not(#ks):not(#kh) body .parameters-card details.uk-section:first-child{border-top:0!important;padding-top:0!important}
html:not(#ks):not(#kh) body .content-column .parameters-card,html:not(#ks):not(#kh) body .parameters-card{padding:10px!important}
html:not(#ks):not(#kh) body .content-column main>article,html:not(#ks):not(#kh) body .content-column>main>article{padding:6px!important}
html:not(#ks):not(#kh) body .segmented:not(#uk-cats)>button,html:not(#ks):not(#kh) body .segmented-control>button{font-size:11.5px!important;padding-inline:1px!important}
html:not(#ks):not(#kh) body main[data-pane=uikit][data-view=controls] .preset-panel,html:not(#ks):not(#kh) body main[data-pane=uikit][data-view=controls] #uk-cats{display:none!important}
#khs-models{position:relative;flex:0 0 30px;display:flex;align-items:center;justify-content:space-between;gap:8px;height:30px;padding:0 10px;overflow:hidden;box-sizing:border-box;border-radius:10px;background:var(--k-card2);border:1px solid var(--k-line-2);color:var(--k-text);font:450 11px/1 var(--k-font);box-shadow:var(--k-card-sh)}
#khs-models[hidden]{display:none}
#khs-models b{font-weight:600;font-variant-numeric:tabular-nums}
#khs-models i{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--k-fill);transition:width .2s linear}
