/* KeyHole Social — interface system. Loaded last: one set of tokens for the shell and the shared controls.
   Measured references: the host After Effects panel (#1E1E1E, Adobe Clean 11 px) and Adobe Spectrum 2 tokens
   (dark greys 17/27/34/44/50/57/68 · text 219/175/109 · controls 24/32 · radii 4/8/10 · grid 4/8/12/16).
   Brand: KeyHole blue, shared with KeyHole Animation; the gradient only on the one primary action of a screen. */

:root{
 --ks-bg:#F4F4F5;--ks-rail:#ECECEE;--ks-card:#FFFFFF;--ks-field:#FFFFFF;--ks-hover:rgba(0,0,0,.05);
 --ks-line:rgba(0,0,0,.08);--ks-line-2:rgba(0,0,0,.14);
 --ks-text:#1D1D1F;--ks-text-2:#5E5E63;--ks-text-3:#A1A1A6;
 --ks-accent:#1457ff;--ks-accent-ink:#1457ff;--ks-accent-soft:rgba(20,87,255,.10);
 --ks-cta:linear-gradient(135deg,#2fc5fa,#1564ff 46%,#0648e7);--ks-cta-ink:#FFFFFF;
 --ks-r-card:10px;--ks-r-ctl:7px;--ks-h:28px;
}
html.dark-mode{
 --ks-bg:#1E1E1E;--ks-rail:#191919;--ks-card:#252525;--ks-field:#2C2C2C;--ks-hover:rgba(255,255,255,.06);
 --ks-line:rgba(255,255,255,.07);--ks-line-2:rgba(255,255,255,.12);
 --ks-text:#DBDBDB;--ks-text-2:#AFAFAF;--ks-text-3:#6D6D6D;
 --ks-accent:#1564ff;--ks-accent-ink:#5aa2ff;--ks-accent-soft:rgba(21,100,255,.20);
 --ks-cta:linear-gradient(135deg,#2fc5fa,#1564ff 46%,#0648e7);
}

/* Shell: edge to edge like a native AE panel — no frame inside the frame. */
html body{background:var(--ks-bg)!important}
html:not(#ks) body .workspace{padding:0!important;gap:0!important;background:var(--ks-bg)!important}
html:not(#ks) body .nav-bar{border-radius:0!important;background:var(--ks-rail)!important;border:0!important;border-right:1px solid var(--ks-line)!important;box-shadow:none!important;width:40px!important;padding:6px 0!important;align-items:center}
html:not(#ks) body .content-column{border-radius:0!important;background:var(--ks-bg)!important;border:0!important;box-shadow:none!important;padding:0 10px 10px!important;min-width:0}
html:not(#ks) body .content-column>main>article,html:not(#ks) body .content-column main>article{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important}
html:not(#ks) body .toolbar{min-height:40px;padding:0!important;border-bottom:1px solid var(--ks-line);margin-bottom:10px}

/* Rail buttons: quiet 30 pt icons, the current one tinted (no outlines, no glow). */
html:not(#ks) body #tabs{padding:4px 0!important;gap:4px!important;align-items:center}
html:not(#ks) body #tabs>button,html:not(#ks) body #account,html:not(#ks) body #nav-mode{width:30px!important;height:30px!important;padding:0!important;border-radius:8px!important;border:0!important;background:transparent!important;box-shadow:none!important;color:var(--ks-text-2)!important;display:grid;place-items:center;transition:background-color .18s ease,color .18s ease}
html:not(#ks) body #tabs>button svg,html:not(#ks) body #account svg,html:not(#ks) body #nav-mode svg{color:currentColor!important;stroke:currentColor}@media (hover:hover) and (pointer:fine){html:not(#ks) body #tabs>button:hover,html:not(#ks) body #account:hover,html:not(#ks) body #nav-mode:hover{background:var(--ks-hover)!important;color:var(--ks-text)!important}}
html:not(#ks) body #tabs>button.active,html:not(#ks) body #account.on{background:var(--ks-accent-soft)!important;color:var(--ks-accent-ink)!important}

/* Cards and grouped settings: one quiet surface, one hairline. */
html:not(#ks) body .parameters-card,html:not(#ks) body .khs-card{background:var(--ks-card)!important;border:1px solid var(--ks-line)!important;border-radius:var(--ks-r-card)!important;box-shadow:none!important}

/* Choice groups (tab chooser, segmented): a field-coloured track, the choice a flat garnet plate. */
html:not(#ks) body .khs-list,html:not(#ks) body .segmented,html:not(#ks) body .segmented-control{background:var(--ks-field)!important;border:1px solid var(--ks-line)!important;border-radius:var(--ks-r-ctl)!important;box-shadow:none!important;padding:2px!important}
html:not(#ks) body .khs-list>button,html:not(#ks) body .segmented>button,html:not(#ks) body .segmented-control>button{border-radius:5px!important;color:var(--ks-text-2)!important;background:transparent!important;box-shadow:none!important;border:0!important;min-height:24px;transition:background-color .18s ease,color .18s ease}@media (hover:hover) and (pointer:fine){html:not(#ks) body .khs-list>button:hover:not(.active):not(.on),html:not(#ks) body .segmented>button:hover:not(.on):not(.active){color:var(--ks-text)!important;background:var(--ks-hover)!important}}
html:not(#ks) body .khs-list>button.active,html:not(#ks) body .khs-list>button.on,html:not(#ks) body .segmented>button.on,html:not(#ks) body .segmented>button.active,html:not(#ks) body .segmented-control>button.active{background:var(--ks-accent)!important;color:#FFFFFF!important}
html:not(#ks) body .khs-list>button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* Fields. */
html:not(#ks) body select,html:not(#ks) body input:not([type=range]):not([type=color]):not([type=checkbox]),html:not(#ks) body textarea{background:var(--ks-field)!important;color:var(--ks-text)!important;border:1px solid var(--ks-line-2)!important;border-radius:var(--ks-r-ctl)!important;box-shadow:none!important}
html:not(#ks) body select{min-height:var(--ks-h)}
html:not(#ks) body select:focus,html:not(#ks) body input:focus,html:not(#ks) body textarea:focus{outline:2px solid var(--ks-accent)!important;outline-offset:1px}

/* Actions: the primary is the brand plate; a disabled one reads as a state, not as broken text. */
html:not(#ks) body .apply-row{gap:8px!important}
html:not(#ks) body .apply-row .primary,html:not(#ks) body button.primary{background:var(--ks-cta)!important;color:var(--ks-cta-ink)!important;border:0!important;border-radius:var(--ks-r-ctl)!important;box-shadow:inset 0 1px 0 rgba(211,245,255,.55)!important;min-height:30px}
html:not(#ks) body .apply-row .primary:disabled,html:not(#ks) body button.primary:disabled{background:var(--ks-field)!important;color:var(--ks-text-3)!important;box-shadow:none!important}
html:not(#ks) body .khs-remove{background:transparent!important;border:1px solid var(--ks-line-2)!important;border-radius:var(--ks-r-ctl)!important;color:var(--ks-text-2)!important;box-shadow:none!important;min-height:30px}@media (hover:hover) and (pointer:fine){html:not(#ks) body .khs-remove:hover{background:var(--ks-hover)!important;color:var(--ks-text)!important}}

/* No explanatory paragraphs in the panel: the explanation lives in the button's tooltip. */
html:not(#ks) body #tk-cam-hint,html:not(#ks) body #energy-hint:empty{display:none!important}

/* Reel steps: the summary sits under the title so a narrow dock never cuts it. */
html:not(#ks) body #khr-steps .khr-head{grid-template-columns:22px minmax(0,1fr)!important;grid-template-rows:auto auto;column-gap:10px!important;row-gap:1px!important;padding:7px 8px!important;min-height:40px}
html:not(#ks) body #khr-steps .khr-num{grid-row:1 / span 2;align-self:center}
html:not(#ks) body #khr-steps .khr-title{grid-column:2;font-size:12.5px!important;line-height:16px}
html:not(#ks) body #khr-steps .khr-sum{grid-column:2;justify-self:start!important;max-width:100%!important;font-size:11px!important;line-height:14px;color:var(--ks-text-2)!important}
html:not(#ks) body #khr-steps .khr-sum:empty{display:none}
html:not(#ks) body #khr-steps .khr-step:not(:last-child)::after{left:18px!important;top:34px!important}

/* The tool chooser wraps to two columns in a narrow dock (labels never cut). */
html:not(#ks) body .khs-list{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(84px,1fr))!important;gap:2px!important}
html:not(#ks) body .khs-list>button{text-align:center;padding:0 6px!important;font-size:11px!important}

/* Custom dropdown and the frame toggle use the same field / quiet-button language. */
html:not(#ks) body .khs-dd-btn{background:var(--ks-field)!important;border:1px solid var(--ks-line-2)!important;border-radius:var(--ks-r-ctl)!important;color:var(--ks-text)!important;box-shadow:none!important;min-height:var(--ks-h)}@media (hover:hover) and (pointer:fine){html:not(#ks) body .khs-dd-btn:hover{border-color:var(--ks-text-3)!important}}
html:not(#ks) body .khs-frame-btn{background:transparent!important;border:0!important;box-shadow:none!important;color:var(--ks-text-2)!important;border-radius:8px!important;width:30px!important;height:30px!important}@media (hover:hover) and (pointer:fine){html:not(#ks) body .khs-frame-btn:hover{background:var(--ks-hover)!important;color:var(--ks-text)!important}}
html:not(#ks) body .khs-frame-btn[aria-pressed="true"],html:not(#ks) body .khs-frame-btn.on{background:var(--ks-accent-soft)!important;color:var(--ks-accent-ink)!important}
html:not(#ks) body .khs-dd-list{background:var(--ks-card)!important;border:1px solid var(--ks-line-2)!important;border-radius:9px!important;box-shadow:0 12px 32px rgba(0,0,0,.35)!important;color:var(--ks-text)!important}html:not(#ks) body .khs-dd-opt.on,html:not(#ks) body .khs-dd-opt[aria-selected="true"]{background:var(--ks-hover)!important}@media (hover:hover) and (pointer:fine){html:not(#ks) body .khs-dd-opt:hover{background:var(--ks-hover)!important}}

/* Form text follows the theme (some legacy rules painted dark-theme greys on both). */
html:not(#ks) body .khs-form label,html:not(#ks) body .parameters-card label{color:var(--ks-text)!important}
html:not(#ks) body .field-label,html:not(#ks) body .field-label span{color:var(--ks-text-2)!important;-webkit-text-fill-color:currentColor}
html:not(#ks) body .range-control output,html:not(#ks) body .khs-form output{color:var(--ks-text-2)!important}
html:not(#ks) body .apply-row .primary:disabled,html:not(#ks) body button.primary:disabled{opacity:1!important}

/* Element tiles: picture on top, the name on the card surface (no black strip in the light theme). */
html:not(#ks) body .element-tile{background:var(--ks-card)!important;color:var(--ks-text-2)!important;border:1px solid var(--ks-line)!important;box-shadow:none!important;border-radius:var(--ks-r-card)!important;overflow:hidden}@media (hover:hover) and (pointer:fine){html:not(#ks) body .element-tile:hover{border-color:var(--ks-line-2)!important;color:var(--ks-text)!important}}
html:not(#ks) body .element-tile.active,html:not(#ks) body .element-tile.on,html:not(#ks) body .element-tile[aria-pressed="true"]{border-color:var(--ks-accent)!important;color:var(--ks-text)!important}
html:not(#ks) body .element-tile[aria-selected=true]{border-color:var(--ks-accent)!important;color:var(--ks-text)!important}
html:not(#ks) body .element-tile>span{color:inherit!important}

/* ===== Hierarchy pass (owner: «нет иерархии, нагружено, непонятно, что выбирается») =====
   One accent only: the primary action (and the selected element's outline). Navigation is quiet text tabs,
   a choice inside a control is a neutral raised plate, settings sit directly on the panel. */
:root{--ks-seg-on:#FFFFFF;--ks-seg-on-ink:#1D1D1F;--ks-seg-track:rgba(0,0,0,.05);--ks-tab-on:#1D1D1F;--ks-fill:#3A3A3C;--ks-track:rgba(0,0,0,.12);--ks-stage:#2B2B30}
html.dark-mode{--ks-seg-on:#4A4A4D;--ks-seg-on-ink:#FFFFFF;--ks-seg-track:rgba(255,255,255,.05);--ks-tab-on:#FFFFFF;--ks-fill:#DBDBDB;--ks-track:rgba(255,255,255,.14);--ks-stage:#2B2B30}

/* Rail: the current section is a neutral plate, not a red one. */
html:not(#ks) body #tabs>button.active,html:not(#ks) body #account.on{background:var(--ks-hover)!important;color:var(--ks-tab-on)!important;box-shadow:inset 2px 0 0 var(--ks-accent)!important}

/* Section header: the current section's name leads the panel. */
html:not(#ks) body .khs-brand{font-size:14px!important;font-weight:650!important;color:var(--ks-text)!important;letter-spacing:-.01em}
html:not(#ks) body .khs-brand b{display:none}

/* Tool / category choosers → quiet tabs in one row (scroll sideways if they don't fit), underline = current. */
html:not(#ks) body #face-modes.khs-list,html:not(#ks) body #uk-cats{display:flex!important;flex-wrap:nowrap!important;gap:14px!important;overflow-x:auto;scrollbar-width:none;background:transparent!important;border:0!important;border-bottom:1px solid var(--ks-line)!important;border-radius:0!important;padding:0 2px!important;margin:0 0 12px!important}
html:not(#ks) body #face-modes.khs-list::-webkit-scrollbar,html:not(#ks) body #uk-cats::-webkit-scrollbar{display:none}
html:not(#ks) body #face-modes.khs-list>button,html:not(#ks) body #uk-cats>button{flex:0 0 auto!important;background:transparent!important;border:0!important;border-radius:0!important;padding:6px 0 8px!important;min-height:0!important;font-size:12px!important;font-weight:500!important;color:var(--ks-text-2)!important;box-shadow:none!important;position:relative;width:auto!important}@media (hover:hover) and (pointer:fine){html:not(#ks) body #face-modes.khs-list>button:hover,html:not(#ks) body #uk-cats>button:hover{color:var(--ks-text)!important;background:transparent!important}}
html:not(#ks) body #face-modes.khs-list>button.active,html:not(#ks) body #face-modes.khs-list>button.on,html:not(#ks) body #uk-cats>button.on,html:not(#ks) body #uk-cats>button.active{color:var(--ks-tab-on)!important;font-weight:600!important;background:transparent!important;box-shadow:inset 0 -2px 0 var(--ks-tab-on)!important}
html:not(#ks) body .preset-panel{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
html:not(#ks) body .preset-panel>.panel-label{display:none!important}

/* Segmented choices: neutral raised plate on a soft track. */
html:not(#ks) body .segmented:not(#uk-cats),html:not(#ks) body .segmented-control{background:var(--ks-seg-track)!important;border:0!important}
html:not(#ks) body .segmented:not(#uk-cats)>button.on,html:not(#ks) body .segmented:not(#uk-cats)>button.active,html:not(#ks) body .segmented-control>button.active{background:var(--ks-seg-on)!important;color:var(--ks-seg-on-ink)!important;box-shadow:0 1px 2px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.06)!important;font-weight:600}

/* Settings directly on the panel: no card in a card; labels small and calm, groups breathe. */
html:not(#ks) body .parameters-card{background:transparent!important;border:0!important;padding:0 2px!important}
html:not(#ks) body .field-label,html:not(#ks) body .field-label span{font-size:11px!important;font-weight:500!important}
html:not(#ks) body .khs-form>label{margin-bottom:4px}

/* Sliders: neutral fill, white thumb (Spectrum): the value reads, the colour doesn't shout. */
html:not(#ks) body input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--ks-fill) 0 var(--range-fill,0%),var(--ks-track) var(--range-fill,0%))!important;height:4px!important;border-radius:2px!important}
html:not(#ks) body input[type=range]::-webkit-slider-thumb{background:#FFFFFF!important;border:0!important;box-shadow:0 1px 3px rgba(0,0,0,.35),0 0 0 .5px rgba(0,0,0,.12)!important;width:14px!important;height:14px!important;margin-top:-5px!important}

/* Gallery tiles: the element on a calm plain screen; the name below on the panel itself. */
html:not(#ks) body .element-tile{background:transparent!important;border:0!important;border-radius:0!important}
html:not(#ks) body .element-tile-stage{background:var(--ks-stage)!important;inset:0 0 20px!important;border-radius:9px!important;box-shadow:inset 0 0 0 1px var(--ks-line)!important}
html:not(#ks) body .element-tile>span{padding:3px 2px 0!important;font-size:11px!important;color:var(--ks-text-2)!important;text-align:left}
html:not(#ks) body .element-tile[aria-selected=true] .element-tile-stage{box-shadow:inset 0 0 0 2px var(--ks-accent)!important}
html:not(#ks) body .element-tile[aria-selected=true]>span{color:var(--ks-text)!important;font-weight:600!important}
html:not(#ks) body .element-group-heading{font-size:11px!important;font-weight:600!important;color:var(--ks-text-3)!important;text-transform:none;letter-spacing:0;margin:10px 0 4px!important}
/* every tab stays visible: the row wraps instead of hiding tools past the edge */
html:not(#ks) body #face-modes.khs-list,html:not(#ks) body #uk-cats{flex-wrap:wrap!important;overflow:visible!important;column-gap:14px!important;row-gap:0!important}
html:not(#ks) body .element-tile>span{background:transparent!important}
html:not(#ks) body #face-modes.khs-list,html:not(#ks) body #uk-cats{justify-content:flex-start!important}
/* Tiles carry no caption: the preview is the name (owner: «зачем писать текст там, где и так визуально понятно»). */
html:not(#ks) body .element-tile>span{display:none!important}
html:not(#ks) body .element-tile-stage{inset:0!important}

/* ===== Spectrum 2 measured pass (opensource.adobe.com/spectrum-css, dark · medium, read 28.10) =====
   Tabs S: 12 px Regular, #DBDBDB / #AFAFAF, 2 px indicator · Field label 12 px Regular #AFAFAF · Picker 32 px,
   #2C2C2C, 1 px #6D6D6D, r 8 · Action group: the selected button is inverted (#DBDBDB plate, #1B1B1B text) ·
   Slider: 2 px track, 16 px ring handle with a 2 px border.
   Type: Adobe Clean is not reachable from CEP, the old stack fell back to Arial — the panel now ships Inter (OFL). */
@font-face{font-family:"KH Inter";src:url("../fonts/bundle/Inter/Inter-Regular.otf") format("opentype");font-weight:400;font-display:block}
@font-face{font-family:"KH Inter";src:url("../fonts/bundle/Inter/Inter-Medium.otf") format("opentype");font-weight:500;font-display:block}
@font-face{font-family:"KH Inter";src:url("../fonts/bundle/Inter/Inter-SemiBold.otf") format("opentype");font-weight:600;font-display:block}
@font-face{font-family:"KH Inter";src:url("../fonts/bundle/Inter/Inter-Bold.otf") format("opentype");font-weight:700;font-display:block}
:root{--ks-font:"KH Inter",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;--ks-sel:#2C2C2C;--ks-sel-ink:#FFFFFF;--ks-field-line:#8F8F8F;--ks-tab-on:#1D1D1F}
html.dark-mode{--ks-sel:#DBDBDB;--ks-sel-ink:#1B1B1B;--ks-field-line:#6D6D6D;--ks-tab-on:#DBDBDB;--ks-fill:#DBDBDB;--ks-track:#444444}
html:not(#ks) body,html:not(#ks) body button,html:not(#ks) body input,html:not(#ks) body select,html:not(#ks) body textarea{font-family:var(--ks-font)!important;font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased}

html:not(#ks) body #face-modes.khs-list>button,html:not(#ks) body #uk-cats>button{font-size:12px!important;font-weight:400!important;padding:9px 0 10px!important}
html:not(#ks) body #face-modes.khs-list>button.active,html:not(#ks) body #face-modes.khs-list>button.on,html:not(#ks) body #uk-cats>button.on,html:not(#ks) body #uk-cats>button.active{font-weight:400!important;color:var(--ks-tab-on)!important;box-shadow:inset 0 -2px 0 var(--ks-tab-on)!important}

html:not(#ks) body .field-label,html:not(#ks) body .field-label span{font-size:12px!important;font-weight:400!important;color:var(--ks-text-2)!important}

html:not(#ks) body .segmented:not(#uk-cats)>button,html:not(#ks) body .segmented-control>button{min-height:28px!important;font-size:12px!important}
html:not(#ks) body .segmented:not(#uk-cats)>button.on,html:not(#ks) body .segmented:not(#uk-cats)>button.active,html:not(#ks) body .segmented-control>button.active{background:var(--ks-sel)!important;color:var(--ks-sel-ink)!important;box-shadow:none!important;font-weight:500!important}

html:not(#ks) body .khs-dd-btn{min-height:32px!important;border-radius:8px!important;border:1px solid var(--ks-field-line)!important;padding:0 11px 0 12px!important;font-size:12px!important}

html:not(#ks) body input[type=range]::-webkit-slider-runnable-track{height:2px!important;border-radius:1px!important}
html:not(#ks) body input[type=range]::-webkit-slider-thumb{width:16px!important;height:16px!important;margin-top:-7px!important;border-radius:50%!important;background:var(--ks-bg)!important;border:2px solid var(--ks-fill)!important;box-shadow:none!important}@media (hover:hover) and (pointer:fine){html:not(#ks) body #tabs>button:hover:not(.active),html:not(#ks) body #account:hover:not(.on){background:rgba(127,127,127,.08)!important}}
html:not(#ks) body #tabs>button.active,html:not(#ks) body #account.on{background:rgba(127,127,127,.22)!important}
/* a segmented row never wraps: equal columns, labels shrink before they break */
html:not(#ks) body .segmented:not(#uk-cats),html:not(#ks) body .segmented-control{display:flex!important;flex-wrap:nowrap!important;gap:2px!important}
html:not(#ks) body .segmented:not(#uk-cats)>button,html:not(#ks) body .segmented-control>button{flex:1 1 0!important;min-width:0!important;padding:0 4px!important;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis}
html:not(#ks) body .segmented.ks-many:not(#uk-cats),html:not(#ks) body .segmented-control.ks-many:not(#uk-cats){display:grid!important;grid-template-columns:1fr 1fr!important}
@media (min-width:420px){html:not(#ks) body .segmented.ks-many:not(#uk-cats),html:not(#ks) body .segmented-control.ks-many:not(#uk-cats){display:flex!important}}
/* the account button is a status, not a section: no selected plate, only its own colour */
html:not(#ks) body #account.on{background:transparent!important;box-shadow:none!important;color:var(--ks-accent-ink)!important}@media (hover:hover) and (pointer:fine){html:not(#ks) body #account.on:hover{background:rgba(127,127,127,.08)!important}}
/* hidden means hidden — legacy display rules must not resurrect removed controls */
html:not(#ks) body [hidden]{display:none!important}

/* ===== Element controls: one navigation level while editing ===== */
html:not(#ks) body main[data-pane=uikit][data-view=controls] #uk-cats{display:none!important}

/* Chat editor (iMessage / Telegram / WhatsApp): who speaks = a colour dot (blue me · grey them, click to switch),
   the line itself is tinted like its bubble; reaction and delete are quiet 22 px icons — the text gets the width. */
html:not(#ks) body .khs-msg{display:flex!important;align-items:center!important;gap:4px!important;margin:0 0 4px!important}
html:not(#ks) body .khs-msg .khs-grip{flex:0 0 8px!important;width:8px!important;opacity:.35;font-size:9px;cursor:grab}
html:not(#ks) body .khs-msg .khs-who{flex:0 0 18px!important;width:18px!important;height:18px!important;min-height:0!important;padding:0!important;border-radius:50%!important;font-size:0!important;border:0!important;box-shadow:none!important;background:#8E8E93!important;cursor:pointer}
html:not(#ks) body .khs-msg.me .khs-who{background:#0088FF!important}
html:not(#ks) body .khs-msg .khs-input{flex:1 1 auto!important;min-width:0!important;width:auto!important;height:30px!important;border-radius:15px!important;padding:0 11px!important;font-size:12px!important;background:var(--ks-field)!important;border:1px solid var(--ks-line)!important}
html:not(#ks) body .khs-msg.me .khs-input{background:rgba(0,136,255,.16)!important;border-color:rgba(0,136,255,.35)!important}
html:not(#ks) body .khs-msg .khs-react,html:not(#ks) body .khs-msg .khs-del{flex:0 0 22px!important;width:22px!important;height:22px!important;min-height:0!important;padding:0!important;border:0!important;border-radius:6px!important;background:transparent!important;box-shadow:none!important;color:var(--ks-text-3)!important;font-size:13px!important;display:grid;place-items:center}@media (hover:hover) and (pointer:fine){html:not(#ks) body .khs-msg .khs-react:hover,html:not(#ks) body .khs-msg .khs-del:hover{background:var(--ks-hover)!important;color:var(--ks-text)!important}}
html:not(#ks) body .khs-chat-add{display:flex!important;gap:4px!important;flex-wrap:nowrap!important;margin-top:6px!important}
html:not(#ks) body .khs-chat-add>button{flex:1 1 0!important;min-width:0!important;height:28px!important;min-height:0!important;padding:0 4px!important;border-radius:7px!important;font-size:11.5px!important;font-weight:500!important;background:var(--ks-seg-track)!important;border:0!important;box-shadow:none!important;color:var(--ks-text)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:28px!important}@media (hover:hover) and (pointer:fine){html:not(#ks) body .khs-chat-add>button:hover{background:var(--ks-hover)!important}}
/* one left edge for the whole panel: no stacked paddings around scroll areas and cards */
html:not(#ks) body .content-column main>article{padding:0!important}
html:not(#ks) body .content-column .workspace-scroll{padding:0 6px 0 0!important}
html:not(#ks) body .content-column .parameters-card{padding:0!important}
html:not(#ks) body .khs-msg.me input.khs-input{background:rgba(0,136,255,.16)!important;border-color:rgba(0,136,255,.35)!important}
html:not(#ks) body .khs-msg input.khs-input{height:30px!important;border-radius:15px!important;padding:0 11px!important}
html:not(#ks) body .segmented.ks-many3:not(#uk-cats),html:not(#ks) body .segmented-control.ks-many3:not(#uk-cats){display:grid!important;grid-template-columns:repeat(3,1fr)!important}
/* binary On/Off: label and a compact switch on one line (Spectrum / AE use a switch, not two big buttons) */
html:not(#ks) body label.ks-inline{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important}
html:not(#ks) body label.ks-inline>.field-label{margin:0!important}
html:not(#ks) body label.ks-inline>.segmented{flex:0 0 92px!important;width:92px!important}
html:not(#ks) body label.ks-inline>.segmented>button{min-height:24px!important;font-size:11px!important}
/* the "Controls" caption says nothing the screen doesn't */
html:not(#ks) body .controls-label{display:none!important}
html:not(#ks) body .khs-form label.ks-inline,html:not(#ks) body label.ks-inline{flex-direction:row!important;grid-template-columns:none!important}
html:not(#ks) body label.ks-inline>.segmented{height:auto!important;align-self:center!important;margin:0!important}
html:not(#ks) body label.ks-inline>.field-label{flex:1 1 auto!important;text-align:left!important;align-self:center!important}
html:not(#ks) body label.ks-inline>.segmented{flex:0 0 112px!important;width:112px!important}
html:not(#ks) body [hidden][hidden]{display:none!important}
html:not(#ks) body .element-group-heading{display:none!important}
html:not(#ks) body .content-column .workspace-scroll{background:transparent!important}
html:not(#ks) body main[data-pane=uikit]>article,html:not(#ks) body main[data-pane=uikit] .apply-row{background:transparent!important}
html:not(#ks) body main[data-pane=uikit] .workspace-scroll>.preview-card.khs-stage-card{background:var(--ks-stage)!important;--khs-panel-bg:var(--ks-stage);border-radius:10px!important;box-shadow:none!important}
/* legacy rules inverted the current section's icon to white (invisible on the light rail) and hard-coded dark-theme greys */
html:not(#ks) body #tabs>button svg,html:not(#ks) body #tabs>button.active svg,html:not(#ks) body #account svg{filter:none!important}
html:not(#ks) body #uk-params summary,html:not(#ks) body .uk-section>summary,html:not(#ks) body details>summary{color:var(--ks-text)!important}
html:not(#ks) body #element-back,html:not(#ks) body .khs-back{color:var(--ks-text-2)!important}@media (hover:hover) and (pointer:fine){html:not(#ks) body #element-back:hover{color:var(--ks-text)!important}}

/* ===================== GRID PASS (owner 28.10: «сетка, воздух, иерархия, паттерны, как AE / Figma») =====================
   One layout per width: ≤300 px the label sits above, wider a fixed 88 px label column; every control fills the value column.
   Rhythm 4/8/12/16 · rows 8 apart · sections 12 + a hairline.
   Radii are concentric: outer = inner + padding (control 6 → its 2 px track 8; CTA 8; tiles/stage 10; sections 12).
   Type: three sizes — 12 Semibold section / button, 12 Regular values, 11 Regular labels (secondary). */
:root{--ks-r-in:6px;--ks-r-track:8px;--ks-r-btn:8px;--ks-r-tile:10px;--ks-gap:8px}
html:not(#ks) body label.ks-inline{display:grid!important}
html:not(#ks) body label.ks-inline>.segmented{width:100%!important;flex:none!important}

/* rows */
html:not(#ks) body .khs-form{display:flex!important;flex-direction:column!important;gap:var(--ks-gap)!important}
html:not(#ks) body .khs-form>label,html:not(#ks) body .khs-form>.khs-file,html:not(#ks) body .khs-form>div>label{margin:0!important}
@media (min-width:301px){
  html:not(#ks) body .khs-form>label,html:not(#ks) body #uk-params .khs-form>label,html:not(#ks) body main[data-pane] .khs-form>label{display:grid!important;grid-template-columns:72px minmax(0,1fr)!important;column-gap:12px!important;row-gap:0!important;align-items:center!important}
  html:not(#ks) body .khs-form>label.ks-tall,html:not(#ks) body #uk-params .khs-form>label.ks-tall{align-items:start!important}
  html:not(#ks) body .khs-form>label.ks-tall>.field-label,html:not(#ks) body #uk-params .khs-form>label.ks-tall>.field-label{padding-top:8px}
}
html:not(#ks) body .khs-form>label>.segmented,html:not(#ks) body .khs-form>label>.khs-dd,html:not(#ks) body .khs-form>label>input,html:not(#ks) body .khs-form>label>.range-control,html:not(#ks) body .khs-form>label>.khs-chat{width:100%!important;min-width:0!important;box-sizing:border-box}

/* type scale */
html:not(#ks) body .khs-brand{font-size:13px!important;font-weight:600!important}
html:not(#ks) body .field-label,html:not(#ks) body .field-label span{font-size:11px!important;font-weight:400!important;letter-spacing:0!important}
html:not(#ks) body .segmented>button,html:not(#ks) body .khs-dd-btn,html:not(#ks) body .khs-form input,html:not(#ks) body .khs-form textarea{font-size:12px!important}
html:not(#ks) body .segmented:not(#uk-cats)>button.on,html:not(#ks) body .segmented:not(#uk-cats)>button.active{font-weight:500!important}
html:not(#ks) body details>summary,html:not(#ks) body .uk-section>summary{font-size:12px!important;font-weight:600!important}
html:not(#ks) body .apply-row .primary,html:not(#ks) body .apply-row .khs-remove{font-size:12px!important;min-height:32px!important;height:32px!important}
html:not(#ks) body .apply-row .primary{font-weight:600!important}
html:not(#ks) body .apply-row .khs-remove{font-weight:500!important}

/* concentric radii */
html:not(#ks) body .segmented:not(#uk-cats),html:not(#ks) body .segmented-control{border-radius:var(--ks-r-track)!important;padding:2px!important}
html:not(#ks) body .segmented:not(#uk-cats)>button,html:not(#ks) body .segmented-control>button{border-radius:var(--ks-r-in)!important;min-height:26px!important}
html:not(#ks) body .khs-dd-btn,html:not(#ks) body .khs-form input:not([type=range]):not([type=checkbox]):not([type=color]):not(.khs-input),html:not(#ks) body select{border-radius:var(--ks-r-track)!important;min-height:30px!important;height:30px!important}
html:not(#ks) body .apply-row .primary,html:not(#ks) body .apply-row .khs-remove{border-radius:var(--ks-r-btn)!important}
html:not(#ks) body .element-tile-stage{border-radius:var(--ks-r-tile)!important}
html:not(#ks) body main[data-pane=uikit] .workspace-scroll>.preview-card.khs-stage-card{border-radius:12px!important}

/* sections: 12 px air, one hairline between them */
html:not(#ks) body details.uk-section{border:0!important;border-top:1px solid var(--ks-line)!important;padding:12px 0!important;margin:0!important;background:transparent!important}
html:not(#ks) body details.uk-section>summary{padding:0!important;margin:0 0 0!important;min-height:20px;display:flex;align-items:center;gap:6px;color:var(--ks-text)!important}
html:not(#ks) body details.uk-section[open]>summary{margin-bottom:10px!important}

/* secondary pairs (Cancel / Use, + Them / + Me / Paste): one height, one radius, Use = the inverted neutral (not the brand red) */
html:not(#ks) body .khs-paste-box{display:flex!important;flex-direction:column!important;gap:8px!important;margin-top:8px!important}
html:not(#ks) body .khs-paste-box .khs-chat-add{margin:0!important}
html:not(#ks) body .khs-paste-box .khs-chat-add>button,html:not(#ks) body .khs-chat-add>button{height:28px!important;min-height:28px!important;margin:0!important;border-radius:var(--ks-r-in)!important;box-shadow:none!important;transform:none!important;align-self:center!important}
html:not(#ks) body .khs-paste-box .khs-paste-ok{background:var(--ks-sel)!important;color:var(--ks-sel-ink)!important;font-weight:600!important}
html:not(#ks) body .khs-paste-box textarea{border-radius:var(--ks-r-track)!important;min-height:84px;padding:8px 10px!important;line-height:1.45!important}

/* ===== busy state: same size, a spinner before the verb, a slow light pass across the plate ===== */
@keyframes ks-spin{to{transform:rotate(360deg)}}
@keyframes ks-pass{from{transform:translateX(-120%)}to{transform:translateX(220%)}}
html:not(#ks) body .apply-row button.ks-busy{pointer-events:none!important;position:relative!important;overflow:hidden!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important}
html:not(#ks) body .apply-row button.ks-busy::before{content:"";width:12px;height:12px;border-radius:50%;border:1.6px solid currentColor;border-right-color:transparent;opacity:.9;animation:ks-spin .75s linear infinite;flex:0 0 auto}
html:not(#ks) body .apply-row button.ks-busy::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);animation:ks-pass 1.4s cubic-bezier(.4,0,.2,1) infinite;pointer-events:none}
html:not(#ks) body .apply-row .khs-remove.ks-busy::after{background:linear-gradient(90deg,transparent,rgba(127,127,127,.12),transparent)}

/* ===== ONE PREVIEW LANGUAGE (owner 28.10: «окно превью везде разное, телефон обрезан, чувак сплющен, серо-буро-малиновый») =====
   Every preview is the same stage: #2B2B30 plate, radius 12, no inner card, content fitted whole (never cropped),
   the same strict vector bust; colour only for the effect itself. */
:root{--ks-stage:#2B2B30}
html:not(#ks) body .khs-bt-preview,html:not(#ks) body .khs-ease,html:not(#ks) body main[data-pane=uikit] .workspace-scroll>.preview-card.khs-stage-card{background:var(--ks-stage)!important;border:0!important;border-radius:12px!important;box-shadow:none!important;overflow:hidden!important}
html:not(#ks) body .khs-bt-preview{aspect-ratio:9/5;width:100%;height:auto!important;margin:0 0 12px!important}
html:not(#ks) body .khs-bt-preview>svg,html:not(#ks) body .khs-bt-preview>canvas{display:block;width:100%!important;height:100%!important}
/* Zoom: the curve and a 9:16 frame with the bust, side by side on one stage — the frame keeps its proportions */
html:not(#ks) body .khs-ease{display:flex!important;align-items:center!important;gap:12px!important;padding:12px!important;margin:0 0 12px!important}
html:not(#ks) body .khs-ease canvas{flex:1 1 auto;min-width:0;height:96px!important;width:auto!important}
html:not(#ks) body .khs-ease .khs-ease-frame{flex:0 0 auto!important;height:96px!important;width:54px!important;border-radius:8px!important;background:var(--ks-stage)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)!important}
html:not(#ks) body .khs-ease .khs-ease-frame i{background:none!important;inset:0!important;border-radius:0!important}
html:not(#ks) body .khs-ease .khs-ease-frame i>svg{display:block;width:100%;height:100%}
/* UI Kit: a stage the width of the panel, the element fitted whole on it — no black box, no cropping */
html:not(#ks) body main[data-pane=uikit] .workspace-scroll>.preview-card.khs-stage-card{padding:12px!important;margin:0 0 12px!important;display:block!important}
html:not(#ks) body main[data-pane=uikit] .khs-stage-wrap{width:100%!important;height:clamp(170px,58vw,280px)!important;max-width:none!important;margin:0!important;overflow:visible!important}
html:not(#ks) body main[data-pane=uikit] .khs-stage,html:not(#ks) body main[data-pane=uikit] .khs-stage.khs-phone{width:100%!important;height:100%!important;max-height:none!important;aspect-ratio:auto!important;background:transparent!important;box-shadow:none!important;border-radius:0!important}
html:not(#ks) body main[data-pane=uikit] .khs-stage-wrap{background:transparent!important}
/* hidden beats every grid rule (the form grid carries attribute + id weight) */
html:not(#ks) body main[data-pane] .khs-form>label[hidden],html:not(#ks) body #uk-params .khs-form>label[hidden],html:not(#ks) body .khs-form>label[hidden][hidden]{display:none!important}
html:not(#ks) body main[data-pane=uikit] .khs-stage>svg{background:transparent!important}

/* Account & License: the same dialog as KeyHole Animation (css/profile.css, css/dark.css carry its look). Only what the
   shared control rules above would otherwise overwrite is restored here. */
html:not(#ks) body .license-shade{z-index:60}
html:not(#ks) body .license-dialog button{height:auto!important;border-radius:11px!important;font-size:11px!important;font-weight:600!important}
html:not(#ks) body .license-dialog .license-close{width:32px!important;height:32px!important;min-height:32px!important;font-size:22px!important;font-weight:300!important}
html:not(#ks) body .license-dialog .license-primary{width:100%;min-height:40px!important;font-size:12px!important;font-weight:650!important;color:#fff!important;background:linear-gradient(135deg,#2fc5fa,#1564ff 46%,#0648e7)!important;border:1px solid #72b9ff!important;box-shadow:inset 0 1px #d3f5ff,0 8px 17px #1457ff2b!important}@media (hover:hover) and (pointer:fine){html:not(#ks) body .license-dialog .license-primary:hover{background:linear-gradient(135deg,#52d3ff,#287aff 46%,#1258ef)!important}}
html:not(#ks) body .license-dialog .license-primary:disabled{opacity:.6}
html:not(#ks) body .license-dialog h3{margin:14px 0 8px;font-size:13px}
html:not(#ks) body .license-dialog input{height:38px!important;font-size:12px!important;border-radius:10px!important}
html:not(#ks) body .license-dialog input:focus{outline:2px solid #1457ff!important}
.license-state-card p{font-size:11px}.license-key-mask{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.license-fonts-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.license-fonts-row p{margin:0!important;font-size:11px;min-width:0}.license-fonts-row button{flex:none}
.license-dialog output:empty{display:none}.license-dialog output{font-size:11px;line-height:1.45}
.license-dialog #lic-diag-out{font-size:10px;margin-top:8px;color:inherit;opacity:.8}.license-dialog #lic-diag-out:empty{display:none}
html:not(#ks) body .license-dialog .license-device-box{padding:10px 14px!important}
html:not(#ks) body .license-dialog{overflow-x:hidden}
html:not(#ks) body .license-dialog .license-close{flex:none!important}
html:not(#ks) body .license-dialog .license-device-actions{flex-wrap:wrap}
html:not(#ks) body .license-dialog .license-device-actions button{flex:1 1 72px;min-width:0;padding-inline:8px!important}
html:not(#ks) body .license-dialog .license-key-actions button{min-width:0;padding-inline:8px!important}
html:not(#ks) body .license-fonts-row{flex-wrap:wrap}
html:not(#ks) body .license-fonts-row p{flex:1 1 110px}
html:not(#ks) body .license-fonts-row button{flex:1 1 auto}
@media(max-width:300px){
 html:not(#ks) body .license-dialog{width:calc(100% - 16px)!important;padding:12px!important;border-radius:16px!important}
 html:not(#ks) body .license-dialog .license-state-card,html:not(#ks) body .license-dialog .license-key-box{padding:10px!important}
 html:not(#ks) body .license-dialog .license-device-box{padding:10px!important}
 html:not(#ks) body .license-heading h2{font-size:15px}
}
html:not(#ks) body .khs-form.ks-stack label:not([hidden]),html:not(#ks) body #uk-params.khs-form.ks-stack label:not([hidden]),html:not(#ks) body main[data-pane] .khs-form.ks-stack label:not([hidden]),html:not(#ks) body #uk-params .khs-form>label.ks-tall:not([hidden]),html:not(#ks) body main[data-pane] .khs-form>label.ks-tall:not([hidden]),html:not(#ks) body .khs-form>label.ks-tall:not([hidden]){display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:6px!important}
html:not(#ks) body .khs-form.ks-stack label>.segmented,html:not(#ks) body .khs-form.ks-stack label>.segmented-control,html:not(#ks) body main[data-pane] .khs-form.ks-stack label>.segmented{width:100%!important;justify-self:stretch!important}
html:not(#ks) body .khs-form .segmented>button,html:not(#ks) body .khs-form .segmented-control>button{padding-inline:2px!important}
html:not(#ks) body .khs-form>label.ks-tall>.field-label{padding-top:0!important}