/* Docked workspace: actual CSS pixels, independent of Retina scaling. */
html,body{min-width:0;font-size:12px}
.workspace{grid-template-columns:42px minmax(0,1fr)!important;padding:5px!important;gap:5px!important}
.nav-bar{padding:3px!important;border-radius:12px!important}
.nav-bar #tabs{margin:0!important;padding:4px 0!important;gap:5px!important;-webkit-mask-image:none!important}
.nav-bar #tabs button,.khs-account{width:34px!important;height:34px!important;min-height:34px!important;flex:0 0 34px!important;padding:7px!important;border-radius:9px!important;margin:0 auto!important}
#tabs .tab-icon,#tabs .tab-icon svg,.khs-account svg{width:19px!important;height:19px!important}
#nav-mode{width:26px!important;height:26px!important;font-size:14px!important}
.content-column{padding:6px!important;gap:6px!important;border-radius:12px!important}
.toolbar{height:28px;min-height:28px;gap:6px!important}
.khs-brand{font-size:12px;padding:0}
.toolbar .khs-frame-btn{width:27px;height:27px;border-radius:8px}
.content-column main:not([hidden]){display:flex!important;flex-direction:column!important;gap:6px!important;min-height:0!important}
.content-column main>.preset-panel{flex:0 0 auto!important;height:auto!important;min-height:0!important;overflow:visible!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;gap:5px!important}
.preset-panel>.panel-label,.workspace-scroll>.title{display:none!important}
#presets,#uikit-list{display:none!important}
.khs-preset-picker{width:100%;min-width:0}
.khs-dd-btn{min-height:30px;padding:6px 9px;border-radius:8px;font-size:12px;line-height:16px}
.khs-dd-list{border-radius:9px;padding:4px;font-size:12px}
.khs-dd-opt{padding:7px 9px;border-radius:6px}
/* Columns follow the word widths so the gaps between labels are equal; fixed
   1fr columns put long words (Widgets, Shapes) edge to edge. */
#uk-cats.khs-cats{display:flex!important;justify-content:space-between;gap:2px!important;padding:2px!important;overflow:hidden}
#uk-cats.khs-cats button{flex:1 1 auto!important;font-size:10px!important;padding:4px 5px!important;min-height:25px!important;border-radius:6px;white-space:nowrap}
#face-modes{display:flex!important;flex-wrap:wrap!important;flex-direction:row!important;gap:4px!important;padding:0!important;overflow:visible!important}
#face-modes button{flex:1 1 auto!important;width:auto!important;min-height:28px!important;height:28px!important;padding:4px 7px!important;border-radius:8px!important}
#face-modes .preset-copy strong{font-size:11px!important}
.content-column main>article{flex:1 1 auto!important;min-height:0!important;padding:6px!important;border-radius:10px!important}
.workspace-scroll{padding:0 1px!important;scroll-padding:6px;overflow-x:hidden!important}
.workspace-scroll>.preview-card,.workspace-scroll>.preview-card.khs-stage-card{position:relative!important;top:auto!important;z-index:auto!important;padding:0 0 8px!important;margin:0 0 6px!important;background:transparent!important;box-shadow:none!important}
html.dark-mode .workspace-scroll>.preview-card{background:transparent!important;box-shadow:none!important}
.preview-card .preview.khs-preview{width:min(100%,144px,28vh)!important;max-height:144px!important;aspect-ratio:1!important;border-radius:9px!important;background:#000!important}
.khs-stage,.khs-stage.khs-phone{width:min(100%,calc(min(164px,29vh) * var(--khs-aspect)))!important;max-height:min(164px,29vh)!important;border-radius:9px!important}
.parameters-card{padding:8px!important;margin:0 0 7px!important;border-radius:9px!important;box-shadow:none!important}
html.dark-mode .parameters-card{box-shadow:none!important}
.khs-card-head{font-size:9px;letter-spacing:.06em;margin:0 0 6px}
.khs-form{gap:6px!important}
.khs-form label,form label{margin:0!important;gap:4px!important;font-size:11px!important}
.khs-form .field-label,.khs-pair .field-label{font-size:11px!important;line-height:15px}
.khs-form>label{display:grid!important;grid-template-columns:76px minmax(0,1fr)!important;align-items:center!important}
.khs-pair{gap:7px}
.range-control{gap:6px!important}
.range-control output{min-width:32px;font-size:10px}
input[type=range]{height:23px}
input[type=range]::-webkit-slider-thumb{width:13px;height:13px;margin-top:-4px}
.segmented{border-radius:8px;padding:2px!important;gap:2px!important}
.segmented button{min-height:26px!important;padding:4px!important;font-size:10px!important;border-radius:6px}
.khs-input{padding:6px 8px;border-radius:7px;font-size:11px}
.khs-swatches{gap:6px 9px!important}
.khs-swatch{gap:3px;font-size:9px}
.khs-swatch input[type=color],.khs-color input[type=color],.khs-color-row .khs-swatch input[type=color]{width:28px!important;height:22px!important;border-radius:6px!important;flex-basis:28px}
input[type=color]::-webkit-color-swatch{border-radius:6px}
.khs-reset-btn{padding:5px 8px!important;margin-top:3px;font-size:10px!important;border-radius:6px!important}
.khs-text-card>summary{font-size:11px;min-height:19px;gap:6px}
.khs-more>summary small{font-size:10px;max-width:45%}
.khs-more>.khs-form{margin-top:8px}
.khs-hint,.parameters-card .khs-hint{font-size:10px!important;line-height:1.4!important;margin:2px 0!important;white-space:normal}
#energy-hint{display:none}
.khs-help{margin:4px 0;color:var(--muted);font-size:10px;line-height:1.4}
.khs-help summary{cursor:pointer;font-size:10px}
.apply-row{gap:6px!important;margin-top:6px!important;flex-shrink:0}
.apply-row .primary,.apply-row .khs-remove,#apply-captions,#apply-face,#apply-uikit{min-height:33px!important;height:auto!important;min-width:0!important;padding:7px 9px!important;border-radius:9px!important;font-size:12px!important;line-height:17px!important;margin:0!important;letter-spacing:0}
.apply-row .primary{flex:1 1 auto!important;width:auto!important}
.apply-row .khs-remove{flex:0 0 auto!important;font-size:11px!important}
.khs-ghost{padding:6px 9px;border-radius:8px;font-size:11px}
.khs-file{grid-template-columns:70px minmax(0,1fr);font-size:11px;gap:6px}
.khs-avatar{gap:8px}.khs-av-thumb{width:42px;height:42px;flex-basis:42px}
.khs-ease canvas{height:66px!important}.khs-ease .khs-ease-frame{height:76px!important}
.khs-progress-card{min-width:0;width:min(300px,90vw);padding:14px}
button:focus-visible,summary:focus-visible{outline:2px solid var(--accent)!important;outline-offset:2px}
@media(max-width:320px){.workspace{grid-template-columns:36px minmax(0,1fr)!important;padding:3px!important;gap:3px!important}.nav-bar #tabs button,.khs-account{width:28px!important;height:30px!important;min-height:30px!important;padding:5px!important}.content-column{padding:4px!important}.khs-form>label{grid-template-columns:65px minmax(0,1fr)!important}.khs-pair{grid-template-columns:1fr}.apply-row .primary{font-size:11px!important}}
@media(min-width:620px){.preview-card .preview.khs-preview{width:min(180px,28vh)!important;max-height:180px!important}.khs-form>label{grid-template-columns:100px minmax(0,1fr)!important}.parameters-card{padding:10px!important}}
/* Override inherited Animation catalog/card sizing at the Social workspace boundary. */
body .workspace .preset-panel #presets,body .workspace .preset-panel #uikit-list{display:none!important}
body .workspace .parameters-card{padding:8px!important}
body .workspace .khs-swatch input[type=color],body .workspace .khs-color input[type=color]{width:28px!important;height:22px!important;min-height:22px!important;max-height:22px!important;min-width:28px!important}
body .workspace .parameters-card .khs-swatch{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:3px!important}
/* Social supports narrow docks; discard Animation's inherited width warning. */
html body::before,html body::after{display:none!important;content:none!important}
html.dark-mode body::after{display:none!important;content:none!important}
html body>.workspace{visibility:visible!important}
/* The Animation preset rail, with ordinary vertical wheel scrolling preserved. */
body .workspace .preset-panel #uikit-list{display:flex!important;flex-direction:row!important;gap:5px!important;overflow-x:auto!important;overflow-y:hidden!important;max-height:36px!important;padding:2px 0!important;scrollbar-width:none;user-select:none}
#uikit-list::-webkit-scrollbar{display:none}
body .workspace #uikit-list button{flex:0 0 auto!important;width:auto!important;height:30px!important;min-height:30px!important;padding:5px 10px!important;border-radius:7px!important}
#uikit-list .preset-icon{display:none!important}
#uikit-list .preset-copy strong{font-size:11px!important;white-space:nowrap}
.kh-strip-rail{height:10px;position:relative;background:rgba(128,128,128,.15);border-radius:6px;cursor:pointer;touch-action:none}
.kh-strip-thumb{height:6px;position:absolute;top:2px;left:0;background:#777;border-radius:5px;min-width:28px}
.kh-strip-rail[hidden]{display:none!important}.kh-strip-rail.dragging .kh-strip-thumb{background:#a5a5a5}@media (hover:hover) and (pointer:fine){.kh-strip-rail:hover .kh-strip-thumb{background:#a5a5a5}}
#uikit-list.dragging{cursor:grabbing}
#uk-params .uk-section{border:0;border-top:1px solid rgba(128,128,128,.2);padding:7px 0;margin:0}
#uk-params .uk-section:first-child{border-top:0}
#uk-params .uk-section>summary{cursor:pointer;font-size:11px;font-weight:600;padding:2px 0 7px}
#uk-params .uk-section>.khs-form{display:grid;gap:8px!important}
#uk-params .khs-form>label{grid-template-columns:82px minmax(0,1fr)!important}
#uk-params .khs-form>label[hidden],#emoji-controls[hidden]{display:none!important}
#uk-params .khs-form>label>input,#uk-params .khs-form>label>.khs-dd,#uk-params .khs-form>label>.segmented{width:100%;min-width:0;box-sizing:border-box}
#uk-params .khs-av-thumb{width:32px;height:32px;flex-basis:32px}
#uk-params .khs-av-side{min-width:0}
.khs-av-zoom[hidden]+output{display:none!important}