* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root {
--kammii-bg-primary: #0a0a0a;
--kammii-bg-secondary: #121212;
--kammii-bg-tertiary: #1f1f1f;
--kammii-bg-hover: #2a2a2a;
--kammii-text-primary: #ededed;
--kammii-text-secondary: #888888;
--kammii-text-muted: #555555;
--kammii-border: #2a2a2a;
--kammii-accent: #ededed;
--kammii-accent-dim: rgba(255, 255, 255, 0.1);
--kammii-accent-dark: #e0e0e0;
--kammii-success: #30d158;
--kammii-gold: #FFD700;
--kammii-radius-xs: 6px;
--kammii-radius-sm: 10px;
--kammii-radius: 16px;
--kammii-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
--ks-canvas: var(--kammii-bg-primary, #0a0a0a);
--ks-raised: var(--kammii-bg-secondary, #121212);
--ks-tertiary: var(--kammii-bg-tertiary, #1f1f1f);
--ks-hover: var(--kammii-bg-hover, #2a2a2a);
--ks-ink: var(--kammii-text-primary, #ededed);
--ks-ink-2: rgba(237, 237, 237, 0.60);
--ks-ink-3: rgba(237, 237, 237, 0.30);
--ks-ink-4: rgba(237, 237, 237, 0.18);
--ks-surface: rgba(237, 237, 237, 0.04);
--ks-surface-hover: rgba(237, 237, 237, 0.06);
--ks-surface-raised: rgba(237, 237, 237, 0.08);
--ks-line: rgba(237, 237, 237, 0.10);
--ks-success: var(--kammii-success, #30d158);
--ks-error: #ff453a;
--ks-spring: cubic-bezier(0.34, 1.45, 0.5, 1);
--ks-settling: var(--kammii-ease-settling, cubic-bezier(0.16, 1, 0.3, 1));
--bg-primary: var(--kammii-bg-primary); --bg-secondary: var(--kammii-bg-secondary); --bg-tertiary: var(--kammii-bg-tertiary); --bg-hover: var(--kammii-bg-hover); --text-primary: var(--kammii-text-primary); --text-secondary: var(--kammii-text-secondary); --text-muted: var(--kammii-text-muted); --border-color: var(--kammii-border); --accent: var(--kammii-accent); --accent-dim: var(--kammii-accent-dim); --shadow: var(--kammii-shadow); --radius: var(--kammii-radius); --radius-sm: var(--kammii-radius-sm); --radius-xs: var(--kammii-radius-xs); }
body { font-family: var(--kammii-font-sans, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif); background: var(--bg-primary); color: var(--text-primary); line-height: 1.5; min-height: 100vh; -webkit-font-smoothing: antialiased; }
html, body { overflow-x: clip; }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.26); background-clip: padding-box; }
input[type="range"] {
-webkit-appearance: none; appearance: none; accent-color: #ededed;
width: 100%; height: 6px; border-radius: 3px;
background: #89898F66; cursor: pointer; touch-action: pan-y;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 18px; height: 18px; border-radius: 50%;
background: #ededed; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
input[type="range"]::-moz-range-thumb {
width: 18px; height: 18px; border-radius: 50%;
background: #ededed; border: none; cursor: pointer;
}
.kg-slider { position: relative; display: block; width: 100%; height: 28px; touch-action: pan-y; }
.kg-slider > input[type="range"] {
position: absolute; width: 1px; height: 1px; min-width: 0; min-height: 0;
padding: 0; margin: 0; opacity: 0; pointer-events: none; background: none;
}
.kg-slider-track {
position: absolute; left: 0; right: 0; top: 11px; height: 6px;
border-radius: 3px; background: rgba(137, 137, 143, 0.28); cursor: pointer; overflow: hidden;
}
.kg-slider-fill { position: absolute; left: 0; top: 0; height: 6px; width: 100%; border-radius: 3px; background: rgba(237, 237, 237, 0.62); clip-path: inset(0 100% 0 0 round 3px); }
.kg-slider-thumb {
position: absolute; left: 0; top: 0; width: 42px; height: 28px;
border-radius: 14px; cursor: pointer; touch-action: none;
background: rgba(255, 255, 255, 1);
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.1);
transform: translateX(0px) scale(0.6);
}
.kg-slider.kg-focus .kg-slider-thumb { outline: 1px solid rgba(237, 237, 237, 0.6); outline-offset: 2px; }
.cm-toggle { position: relative; display: inline-block; width: 44px; height: 20px; flex-shrink: 0; z-index: 0; }
.cm-toggle::before, .cm-toggle-slider::after { content: none; }
.cm-toggle-slider::before {
content: ''; position: absolute; top: 50%; margin-top: -7px; left: 3px;
width: 14px; height: 14px; border-radius: 50%;
background: #ededed; transform: translateX(0);
}
.cm-toggle input:checked + .cm-toggle-slider::before { transform: translateX(24px); }
.cm-toggle input:checked + .cm-toggle-slider { background: rgba(48, 209, 88, 0.55); }
.cm-toggle.kg-switch-mono input:checked + .cm-toggle-slider { background: rgba(255, 255, 255, 0.18); }
.cm-toggle-thumb { display: none; }
.cm-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.cm-toggle-slider {
position: absolute; cursor: pointer; inset: 0; border: 0;
border-radius: 10px; background: #94949F77; touch-action: none;
}
.cm-toggle input:focus-visible ~ .cm-toggle-slider { outline: 1px solid rgba(237, 237, 237, 0.6); outline-offset: 2px; }
@supports (backdrop-filter: url(#kg-slider-filter)) {
.kg-slider-thumb.kg-lens { backdrop-filter: url(#kg-slider-filter); -webkit-backdrop-filter: url(#kg-slider-filter); }
.kg-glass-on .cm-toggle-slider::before { content: none; }
.kg-glass-on .cm-toggle-thumb {
display: block; position: absolute; left: 0; top: 50%; width: 40px; height: 25.3px;
margin-left: -6.04px; border-radius: 12.65px; cursor: pointer;
background: rgba(255, 255, 255, 1);
box-shadow: 0 4px 22px rgba(0, 0, 0, 0.1);
transform: translateX(0px) translateY(-50%) scale(0.65);
}
.kg-glass-on .cm-toggle-thumb.kg-lens {
backdrop-filter: url(#kg-switch-filter); -webkit-backdrop-filter: url(#kg-switch-filter);
}
}
:root {
--kg-sel-wash: rgba(255, 255, 255, 0.05);
--kg-sel-rim: rgba(255, 255, 255, 0.55);
--kg-sel-rim-soft: rgba(255, 255, 255, 0.3);
--kg-sel-rim-thin: rgba(255, 255, 255, 0.1);
--kg-sel-ink: rgba(255, 255, 255, 0.78);
--kg-sel-solid: rgb(58, 58, 60);
}
[data-theme="light"] {
--kg-sel-wash: rgba(0, 0, 0, 0.05);
--kg-sel-rim: rgba(0, 0, 0, 0.5);
--kg-sel-rim-soft: rgba(0, 0, 0, 0.28);
--kg-sel-rim-thin: rgba(0, 0, 0, 0.1);
--kg-sel-ink: rgba(0, 0, 0, 0.62);
--kg-sel-solid: rgb(214, 214, 220);
}
html { --kg-lg-frost: var(--kg-glass-frost-px, 0px); }
html.kg-lg-on { --kg-lg-frost: 0px; }
[data-kg-liquid-glass]:not([data-kg-liquid-glass="flat"]),
.generate-btn-internal,
.generate-btn-desktop,
.generate-btn-mobile > button,
#kMiniLauncher,
.km-import-card {
background: var(--kg-lg-tint, rgba(34, 34, 34, 0.6));
border: 0;
box-shadow: 0 4px 19px rgba(0, 0, 0, 0.4);
-webkit-backdrop-filter: blur(calc(1px + var(--kg-lg-frost, 0px)));
backdrop-filter: blur(calc(1px + var(--kg-lg-frost, 0px)));
}
[data-kg-liquid-glass="flat"],
.help-icon, .reset-btn, .model-search-clear, .kg-navgroup,
.lora-cat-tab, .size-option, .det-model-pill, .upscale-mode-option,
.image-btn, .experience-choice, .kpl-tab,
.import-upload-box,
#hqSamplerSelect, #hqSchedulerSelect, .kg-select-button,
#userLoraUploadOpenBtn, #userCheckpointUploadOpenBtn {
background: var(--kg-lg-tint, rgba(34, 34, 34, 0.6));
border: 0;
box-shadow:
inset -1px 1px 0 0 rgba(255, 255, 255, 0.1),
inset 1px -1px 0 0 rgba(255, 255, 255, 0.1),
0 4px 19px rgba(0, 0, 0, 0.4);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
html[data-theme="light"] [data-kg-liquid-glass="flat"],
[data-theme="light"] #userLoraUploadOpenBtn,
[data-theme="light"] #userCheckpointUploadOpenBtn {
box-shadow:
inset -1px 1px 0 0 rgba(255, 255, 255, 0.55),
inset 1px -1px 0 0 rgba(0, 0, 0, 0.06),
0 4px 19px rgba(0, 0, 0, 0.4);
}
[data-theme="light"] [data-kg-liquid-glass],
[data-theme="light"] .generate-btn-internal,
[data-theme="light"] .generate-btn-desktop,
[data-theme="light"] .generate-btn-mobile > button,
[data-theme="light"] #kMiniLauncher {
background: var(--kg-lg-tint-light, rgba(255, 255, 255, 0.6));
}
.generate-btn-mobile > button {
background: var(--kg-lg-tint, rgba(34, 34, 34, 0.6)) !important;
border: 0 !important;
box-shadow: 0 4px 19px rgba(0, 0, 0, 0.4) !important;
color: var(--text-primary, #ffffff) !important;
}
[data-theme="light"] .generate-btn-mobile > button {
background: var(--kg-lg-tint-light, rgba(255, 255, 255, 0.6)) !important;
color: var(--text-primary, #1d1d1f) !important;
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
[data-kg-liquid-glass],
.generate-btn-internal,
.generate-btn-desktop,
.generate-btn-mobile > button,
#kMiniLauncher {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
background: var(--bg-secondary, #141414) !important;
border: 1px solid var(--border-color, #2a2a2a) !important;
box-shadow: none !important;
}
}
html.kg-lg-on [data-kg-liquid-glass]:not([data-kg-liquid-glass="flat"]) {
-webkit-backdrop-filter: blur(var(--kg-lg-blur, 0px)) var(--kg-lg-filter, opacity(1));
backdrop-filter: blur(var(--kg-lg-blur, 0px)) var(--kg-lg-filter, opacity(1));
background: var(--kg-lg-tint, rgba(34, 34, 34, 0.6));
border: 0;
box-shadow: 0 4px 19px rgba(0, 0, 0, 0.4);
}
html.kg-lg-on .generate-btn-desktop[data-kg-liquid-glass],
html.kg-lg-on .generate-btn-internal[data-kg-liquid-glass],
html.kg-lg-on .generate-btn-mobile button[data-kg-liquid-glass],
html.kg-lg-on #kMiniLauncher[data-kg-liquid-glass] {
background: var(--kg-lg-tint, rgba(34, 34, 34, 0.6)) !important;
border: 0 !important;
box-shadow: 0 4px 19px rgba(0, 0, 0, 0.4) !important;
color: var(--text-primary, #ffffff) !important;
}
html.kg-lg-on .generate-btn-desktop[data-kg-liquid-glass]:hover:not(:disabled),
html.kg-lg-on .generate-btn-internal[data-kg-liquid-glass]:hover:not(:disabled),
html.kg-lg-on .generate-btn-mobile button[data-kg-liquid-glass]:hover:not(:disabled),
html.kg-lg-on #kMiniLauncher[data-kg-liquid-glass]:hover {
background: var(--kg-lg-tint-hover, rgba(58, 58, 58, 0.64)) !important;
}
html.kg-lg-on #kMiniLauncher[data-kg-liquid-glass],
html.kg-lg-on #kMiniLauncher {
-webkit-backdrop-filter: blur(var(--kg-lg-blur, 0px)) var(--kg-lg-filter, opacity(1)) !important;
backdrop-filter: blur(var(--kg-lg-blur, 0px)) var(--kg-lg-filter, opacity(1)) !important;
}
html:not(.kg-lg-on) #kMiniLauncher {
-webkit-backdrop-filter: blur(calc(14px + var(--kg-lg-frost, 0px))) saturate(1.7) !important;
backdrop-filter: blur(calc(14px + var(--kg-lg-frost, 0px))) saturate(1.7) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 4px 19px rgba(0, 0, 0, 0.4) !important;
}
html.kg-lg-on .generate-btn-desktop[data-kg-liquid-glass]:disabled,
html.kg-lg-on .generate-btn-internal[data-kg-liquid-glass]:disabled,
html.kg-lg-on .generate-btn-mobile button[data-kg-liquid-glass]:disabled {
background: var(--kg-lg-tint, rgba(34, 34, 34, 0.6)) !important;
color: var(--text-primary, #ffffff) !important;
border: 0 !important;
box-shadow: 0 4px 19px rgba(0, 0, 0, 0.4) !important;
-webkit-backdrop-filter: blur(var(--kg-lg-blur, 0px)) var(--kg-lg-filter, opacity(1)) !important;
backdrop-filter: blur(var(--kg-lg-blur, 0px)) var(--kg-lg-filter, opacity(1)) !important;
opacity: 1 !important;
cursor: progress !important;
}
html.kg-lg-on[data-theme="light"] .generate-btn-desktop[data-kg-liquid-glass]:disabled,
html.kg-lg-on[data-theme="light"] .generate-btn-internal[data-kg-liquid-glass]:disabled,
html.kg-lg-on[data-theme="light"] .generate-btn-mobile button[data-kg-liquid-glass]:disabled {
background: var(--kg-lg-tint-light, rgba(255, 255, 255, 0.6)) !important;
color: var(--text-primary, #1d1d1f) !important;
}
html.kg-glass-on:not(.kg-lg-on) .generate-btn-desktop[data-kg-liquid-glass]:disabled,
html.kg-glass-on:not(.kg-lg-on) .generate-btn-internal[data-kg-liquid-glass]:disabled,
html.kg-glass-on:not(.kg-lg-on) .generate-btn-mobile button[data-kg-liquid-glass]:disabled {
background: var(--kg-lg-tint, rgba(34, 34, 34, 0.6)) !important;
color: var(--text-primary, #ffffff) !important;
border: 0 !important;
box-shadow: 0 4px 19px rgba(0, 0, 0, 0.4) !important;
-webkit-backdrop-filter: blur(calc(var(--kg-lg-blur, 1px) + var(--kg-lg-frost, 0px))) var(--kg-lg-filter, opacity(1)) !important;
backdrop-filter: blur(calc(var(--kg-lg-blur, 1px) + var(--kg-lg-frost, 0px))) var(--kg-lg-filter, opacity(1)) !important;
opacity: 1 !important;
cursor: progress !important;
}
html.kg-glass-on:not(.kg-lg-on)[data-theme="light"] .generate-btn-desktop[data-kg-liquid-glass]:disabled,
html.kg-glass-on:not(.kg-lg-on)[data-theme="light"] .generate-btn-internal[data-kg-liquid-glass]:disabled,
html.kg-glass-on:not(.kg-lg-on)[data-theme="light"] .generate-btn-mobile button[data-kg-liquid-glass]:disabled {
background: var(--kg-lg-tint-light, rgba(255, 255, 255, 0.6)) !important;
color: var(--text-primary, #1d1d1f) !important;
}
html.kg-lg-on[data-theme="light"] [data-kg-liquid-glass]:not([data-kg-liquid-glass="flat"]),
html.kg-lg-on [data-theme="light"] [data-kg-liquid-glass]:not([data-kg-liquid-glass="flat"]) {
background: var(--kg-lg-tint-light, rgba(255, 255, 255, 0.6));
border: 0;
box-shadow: 0 4px 19px rgba(0, 0, 0, 0.4);
}
html.kg-lg-on[data-theme="light"] .generate-btn-desktop[data-kg-liquid-glass],
html.kg-lg-on[data-theme="light"] .generate-btn-internal[data-kg-liquid-glass],
html.kg-lg-on[data-theme="light"] .generate-btn-mobile button[data-kg-liquid-glass],
html.kg-lg-on[data-theme="light"] #kMiniLauncher[data-kg-liquid-glass] {
background: var(--kg-lg-tint-light, rgba(255, 255, 255, 0.6)) !important;
border: 0 !important;
box-shadow: 0 4px 19px rgba(0, 0, 0, 0.4) !important;
color: var(--text-primary, #1d1d1f) !important;
}
html.kg-lg-on[data-theme="light"] .generate-btn-desktop[data-kg-liquid-glass]:hover:not(:disabled),
html.kg-lg-on[data-theme="light"] .generate-btn-internal[data-kg-liquid-glass]:hover:not(:disabled),
html.kg-lg-on[data-theme="light"] .generate-btn-mobile button[data-kg-liquid-glass]:hover:not(:disabled),
html.kg-lg-on[data-theme="light"] #kMiniLauncher[data-kg-liquid-glass]:hover {
background: var(--kg-lg-tint-light-hover, rgba(255, 255, 255, 0.74)) !important;
}
html.kg-lg-on .generate-btn-mobile { background: none; }
html.kg-lg-on [data-kg-liquid-glass="menu"] {
-webkit-backdrop-filter: blur(var(--kg-lg-blur, 0px)) var(--kg-lg-filter, opacity(1)) !important;
backdrop-filter: blur(var(--kg-lg-blur, 0px)) var(--kg-lg-filter, opacity(1)) !important;
background: var(--kg-lg-tint, rgba(34, 34, 34, 0.6)) !important;
border: 0 !important;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.1),
0 18px 48px rgba(0, 0, 0, 0.52) !important;
}
html.kg-lg-on[data-theme="light"] [data-kg-liquid-glass="menu"],
html.kg-lg-on [data-theme="light"] [data-kg-liquid-glass="menu"] {
background: var(--kg-lg-tint-light, rgba(255, 255, 255, 0.6)) !important;
box-shadow:
inset 0 0 0 1px rgba(0, 0, 0, 0.08),
0 18px 48px rgba(0, 0, 0, 0.16) !important;
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
html.kg-lg-on [data-kg-liquid-glass] {
-webkit-backdrop-filter: none; backdrop-filter: none;
background: var(--bg-secondary, #141414);
}
html.kg-lg-on [data-kg-liquid-glass="menu"] {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
background: var(--bg-secondary, #141414) !important;
border-color: var(--border-color, #2a2a2a) !important;
}
html.kg-lg-on .generate-btn-desktop[data-kg-liquid-glass],
html.kg-lg-on .generate-btn-internal[data-kg-liquid-glass],
html.kg-lg-on .generate-btn-mobile button[data-kg-liquid-glass],
html.kg-lg-on #kMiniLauncher[data-kg-liquid-glass],
html.kg-lg-on .generate-btn-desktop[data-kg-liquid-glass]:hover,
html.kg-lg-on .generate-btn-internal[data-kg-liquid-glass]:hover,
html.kg-lg-on .generate-btn-mobile button[data-kg-liquid-glass]:hover,
html.kg-lg-on #kMiniLauncher[data-kg-liquid-glass]:hover,
html.kg-lg-on .generate-btn-desktop[data-kg-liquid-glass]:disabled,
html.kg-lg-on .generate-btn-internal[data-kg-liquid-glass]:disabled,
html.kg-lg-on .generate-btn-mobile button[data-kg-liquid-glass]:disabled {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
background: var(--bg-secondary, #141414) !important;
border: 1px solid var(--border-color, #2a2a2a) !important;
box-shadow: none !important;
}
html.kg-lg-on .generate-btn-desktop[data-kg-liquid-glass]:disabled,
html.kg-lg-on .generate-btn-internal[data-kg-liquid-glass]:disabled,
html.kg-lg-on .generate-btn-mobile button[data-kg-liquid-glass]:disabled {
background: var(--bg-tertiary, #1f1f1f) !important;
color: var(--text-primary, #ffffff) !important;
}
html.kg-lg-on[data-theme="light"] .generate-btn-desktop[data-kg-liquid-glass],
html.kg-lg-on[data-theme="light"] .generate-btn-internal[data-kg-liquid-glass],
html.kg-lg-on[data-theme="light"] .generate-btn-mobile button[data-kg-liquid-glass],
html.kg-lg-on[data-theme="light"] #kMiniLauncher[data-kg-liquid-glass],
html.kg-lg-on[data-theme="light"] .generate-btn-desktop[data-kg-liquid-glass]:hover,
html.kg-lg-on[data-theme="light"] .generate-btn-internal[data-kg-liquid-glass]:hover,
html.kg-lg-on[data-theme="light"] .generate-btn-mobile button[data-kg-liquid-glass]:hover,
html.kg-lg-on[data-theme="light"] #kMiniLauncher[data-kg-liquid-glass]:hover,
html.kg-lg-on[data-theme="light"] .generate-btn-desktop[data-kg-liquid-glass]:disabled,
html.kg-lg-on[data-theme="light"] .generate-btn-internal[data-kg-liquid-glass]:disabled,
html.kg-lg-on[data-theme="light"] .generate-btn-mobile button[data-kg-liquid-glass]:disabled {
background: var(--bg-secondary, #ffffff) !important;
border: 1px solid var(--border-color, #d2d2d7) !important;
box-shadow: none !important;
color: var(--text-primary, #1d1d1f) !important;
}
html.kg-lg-on .generate-btn-mobile {
background: linear-gradient(to top, var(--bg-primary, #0a0a0a) 20%, transparent);
}
}
.help-icon, .reset-btn, .model-search-clear, .kg-navgroup,
.lora-cat-tab, .size-option, .det-model-pill, .upscale-mode-option,
.image-btn, .experience-choice, .kpl-tab,
.import-upload-box,
#hqSamplerSelect, #hqSchedulerSelect, .kg-select-button {
background: var(--kg-lg-tint, rgba(34, 34, 34, 0.6)) !important;
border: 0 !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
box-shadow:
inset -1px 1px 0 0 rgba(255, 255, 255, 0.1),
inset 1px -1px 0 0 rgba(255, 255, 255, 0.1),
0 4px 19px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="light"] .help-icon, [data-theme="light"] .reset-btn,
[data-theme="light"] .model-search-clear, [data-theme="light"] .kg-navgroup,
[data-theme="light"] .lora-cat-tab, [data-theme="light"] .size-option,
[data-theme="light"] .det-model-pill, [data-theme="light"] .upscale-mode-option,
[data-theme="light"] .image-btn, [data-theme="light"] .experience-choice,
[data-theme="light"] .kpl-tab, [data-theme="light"] .import-upload-box,
[data-theme="light"] #hqSamplerSelect, [data-theme="light"] #hqSchedulerSelect, [data-theme="light"] .kg-select-button {
background: var(--kg-lg-tint-light, rgba(255, 255, 255, 0.6)) !important;
box-shadow:
inset -1px 1px 0 0 rgba(255, 255, 255, 0.55),
inset 1px -1px 0 0 rgba(0, 0, 0, 0.06),
0 4px 19px rgba(0, 0, 0, 0.4) !important;
}
.help-icon, .reset-btn, .model-search-clear { color: rgba(255, 255, 255, 0.88) !important; }
[data-theme="light"] .help-icon,
[data-theme="light"] .reset-btn,
[data-theme="light"] .model-search-clear { color: rgba(0, 0, 0, 0.8) !important; }
.lora-cat-tab.active,
.det-model-pill.active,
.upscale-mode-option.active,
.kpl-tab.active {
background: var(--bg-hover, #2a2a2a) !important;
color: var(--text-primary, #ededed) !important;
border-color: var(--kammii-hairline-strong, rgba(255, 255, 255, 0.22)) !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}
.size-option.selected {
background:
linear-gradient(var(--kg-sel-wash), var(--kg-sel-wash)),
var(--kg-lg-tint, rgba(34, 34, 34, 0.6)) !important;
box-shadow:
inset -1px 1px 0 0 var(--kg-sel-rim),
inset 1px -1px 0 0 var(--kg-sel-rim),
inset 0 0 0 1px var(--kg-sel-rim-soft),
0 4px 19px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="light"] .size-option.selected {
background:
linear-gradient(var(--kg-sel-wash), var(--kg-sel-wash)),
var(--kg-lg-tint-light, rgba(255, 255, 255, 0.6)) !important;
box-shadow:
inset -1px 1px 0 0 rgba(255, 255, 255, 0.55),
inset 1px -1px 0 0 var(--kg-sel-rim),
inset 0 0 0 1px var(--kg-sel-rim-soft),
0 4px 19px rgba(0, 0, 0, 0.4) !important;
}
.size-option.selected .size-option-dims { color: var(--kg-sel-ink); }
.count-option.selected {
border-color: transparent;
background:
linear-gradient(var(--kg-sel-wash), var(--kg-sel-wash)),
var(--bg-tertiary, #1f1f1f);
box-shadow:
inset -1px 1px 0 0 var(--kg-sel-rim),
inset 1px -1px 0 0 var(--kg-sel-rim),
inset 0 0 0 1px var(--kg-sel-rim-soft);
color: var(--kg-sel-ink);
}
.kg-seg-thumb {
background: var(--kg-sel-wash);
box-shadow:
inset 0 1px 0 0 rgba(255, 255, 255, 0.12),
inset 0 -1px 0 0 rgba(0, 0, 0, 0.3),
0 1px 2px rgba(0, 0, 0, 0.3);
}
[data-theme="light"] .kg-seg-thumb {
background:
linear-gradient(var(--kg-sel-wash), var(--kg-sel-wash)),
rgba(255, 255, 255, 0.95);
box-shadow:
inset 0 1px 0 0 rgba(255, 255, 255, 0.8),
inset 0 -1px 0 0 rgba(0, 0, 0, 0.12),
0 1px 2px rgba(0, 0, 0, 0.16);
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
.size-option.selected, .count-option.selected {
background: var(--kg-sel-solid) !important;
border: 1px solid var(--kg-sel-rim) !important;
box-shadow: none !important;
}
.size-option:focus-visible, .count-option:focus-visible {
box-shadow: 0 0 0 2px var(--accent, #ffffff) !important;
}
.kg-seg-thumb, [data-theme="light"] .kg-seg-thumb {
background: var(--kg-sel-solid);
box-shadow: inset 0 0 0 1px var(--kg-sel-rim);
}
}
.kg-navcell {
background: transparent !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
.lora-cat-tab, .reset-btn, .model-search-clear,
.det-model-pill, .upscale-mode-option, .kg-navgroup {
border-radius: 999px;
}
.help-icon { border-radius: 50%; }
.image-btn, .experience-choice, .import-upload-box, .km-import-card,
.size-option, #userLoraUploadOpenBtn, #userCheckpointUploadOpenBtn {
border-radius: 18px !important;
}
.kpl-tab { border-radius: 12px 12px 0 0; }
#hqSamplerSelect, #hqSchedulerSelect, .kg-select-button {
border-radius: 999px !important;
border: 0 !important;
}
#userLoraUploadOpenBtn, #userCheckpointUploadOpenBtn {
border: 1px dashed rgba(255, 255, 255, 0.28) !important;
}
[data-theme="light"] #userLoraUploadOpenBtn,
[data-theme="light"] #userCheckpointUploadOpenBtn {
border-color: rgba(0, 0, 0, 0.22) !important;
}
.kgp-inner, .kg-menu {
background: var(--kg-lg-tint, rgba(34, 34, 34, 0.6)) !important;
-webkit-backdrop-filter: blur(calc(var(--kg-lg-blur, 1px) + var(--kg-lg-frost, 0px))) var(--kg-lg-filter, opacity(1)) !important;
backdrop-filter: blur(calc(var(--kg-lg-blur, 1px) + var(--kg-lg-frost, 0px))) var(--kg-lg-filter, opacity(1)) !important;
border: 0 !important;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.1),
0 18px 48px rgba(0, 0, 0, 0.52) !important;
}
[data-theme="light"] .kgp-inner, [data-theme="light"] .kg-menu {
background: var(--kg-lg-tint-light, rgba(255, 255, 255, 0.6)) !important;
box-shadow:
inset 0 0 0 1px rgba(0, 0, 0, 0.08),
0 18px 48px rgba(0, 0, 0, 0.16) !important;
}
.glass-btn, .glass-btn-history-restore,
.viewer-nav-btn, .viewer-counter, #viewerSavedInfo,
.viewer-btn, .zoom-controls,
.sg-action-btn, .sg-select-check,
.kg-tile-more,
.ag-chat-attach-remove, .ag-card-avatar-edit,
.regional-box-label {
background: var(--kg-lg-tint-img, rgba(0, 0, 0, 0.62));
border: 0;
color: #ffffff;
-webkit-backdrop-filter: blur(1px);
backdrop-filter: blur(1px);
box-shadow:
inset -1px 1px 0 0 rgba(255, 255, 255, 0.14),
inset 1px -1px 0 0 rgba(255, 255, 255, 0.14),
0 2px 8px rgba(0, 0, 0, 0.28);
}
html.kg-lg-on [data-kg-liquid-glass="img"],
html.kg-lg-on[data-theme="light"] [data-kg-liquid-glass="img"] {
background: var(--kg-lg-tint-img, rgba(0, 0, 0, 0.62)) !important;
border: 0 !important;
color: #ffffff !important;
-webkit-backdrop-filter: blur(var(--kg-lg-blur, 0px)) var(--kg-lg-filter, opacity(1)) !important;
backdrop-filter: blur(var(--kg-lg-blur, 0px)) var(--kg-lg-filter, opacity(1)) !important;
box-shadow:
inset -1px 1px 0 0 rgba(255, 255, 255, 0.14),
inset 1px -1px 0 0 rgba(255, 255, 255, 0.14),
0 2px 8px rgba(0, 0, 0, 0.28) !important;
}
.glass-btn:hover, .glass-btn-history-restore:hover,
.viewer-nav-btn:hover, .viewer-btn:hover,
.sg-action-btn:hover, .kg-tile-more:hover,
.ag-chat-attach-remove:hover,
html.kg-lg-on [data-kg-liquid-glass="img"]:hover {
background: var(--kg-lg-tint-img-hover, rgba(0, 0, 0, 0.78)) !important;
}
.viewer-counter, #viewerSavedInfo, .zoom-controls {
border-radius: 999px;
}
.ag-card-avatar-edit, .regional-box-label { border-radius: 6px; }
.zoom-btn {
background: transparent !important;
border: 0 !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
box-shadow: none !important;
color: #ffffff !important;
}
.zoom-btn:hover { background: rgba(255, 255, 255, 0.16) !important; }
@media (pointer: coarse) {
.glass-btn, .glass-btn-history-restore, .viewer-nav-btn, .viewer-btn,
.sg-action-btn, .kg-tile-more, .ag-chat-attach-remove, .zoom-btn {
position: relative;
}
.glass-btn, .glass-btn-history-restore, .viewer-nav-btn,
.kg-tile-more, .ag-chat-attach-remove {
position: absolute;
}
.glass-btn::after, .glass-btn-history-restore::after,
.viewer-nav-btn::after, .viewer-btn::after,
.sg-action-btn::after, .kg-tile-more::after,
.ag-chat-attach-remove::after, .zoom-btn::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: var(--kg-hit, 44px);
height: var(--kg-hit, 44px);
transform: translate(-50%, -50%);
border-radius: inherit;
pointer-events: auto;
}
.ag-chat-log .output-images .glass-btn { --kg-hit: 30px; }
.ag-chat-log .output-images.ag-output-single .glass-btn { --kg-hit: 40px; }
}
.glass-btn, .glass-btn-history-restore, .viewer-nav-btn,
.kg-tile-more, .ag-chat-attach-remove, .sg-select-check {
position: absolute;
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
.glass-btn, .glass-btn-history-restore,
.viewer-nav-btn, .viewer-counter, #viewerSavedInfo,
.viewer-btn, .zoom-controls, .zoom-btn,
.sg-action-btn, .sg-select-check,
.kg-tile-more,
.ag-chat-attach-remove, .ag-card-avatar-edit,
.regional-box-label,
html.kg-lg-on [data-kg-liquid-glass="img"] {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
background: #141414 !important;
border: 1px solid rgba(255, 255, 255, 0.34) !important;
box-shadow: none !important;
color: #ffffff !important;
}
.zoom-btn { border: 0 !important; background: transparent !important; }
}
.kg-scrim-bottom { isolation: isolate; }
.kg-scrim-bottom::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: var(--kg-scrim-h, 100%);
z-index: -1;
pointer-events: none;
border-radius: inherit;
background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.5) 28%, rgba(0,0,0,0.22) 55%, rgba(0,0,0,0.07) 80%, rgba(0,0,0,0) 100%);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
-webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.82) 30%, rgba(0,0,0,0.45) 58%, rgba(0,0,0,0.12) 82%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.82) 30%, rgba(0,0,0,0.45) 58%, rgba(0,0,0,0.12) 82%, rgba(0,0,0,0) 100%);
}
@media (prefers-reduced-transparency: reduce) {
.kg-scrim-bottom::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
.kgp-inner, .kg-menu,
.help-icon, .reset-btn, .model-search-clear, .kg-navgroup,
.lora-cat-tab, .size-option, .det-model-pill, .upscale-mode-option,
.image-btn, .experience-choice, .kpl-tab,
.import-upload-box, .km-import-card,
#hqSamplerSelect, #hqSchedulerSelect, .kg-select-button,
#userLoraUploadOpenBtn, #userCheckpointUploadOpenBtn {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
background: var(--bg-secondary, #141414) !important;
border: 1px solid var(--border-color, #2a2a2a) !important;
box-shadow: none !important;
}
html[data-theme="light"] [data-kg-liquid-glass="flat"],
[data-theme="light"] #hqSamplerSelect, [data-theme="light"] #hqSchedulerSelect, [data-theme="light"] .kg-select-button,
[data-theme="light"] #userLoraUploadOpenBtn,
[data-theme="light"] #userCheckpointUploadOpenBtn {
box-shadow: none !important;
}
}
:root{--kg-press-in:100ms cubic-bezier(0.4,0,0.6,1); --kg-press-out:100ms cubic-bezier(0.4,0,0.6,1)}
@supports (transition-timing-function: linear(0, 1)){:root{
--kg-press-in:160ms linear(0, 0.2809 5%, 0.4942 10%, 0.6529 15%, 0.7689 20%, 0.8518 25%, 0.9098 30%, 0.9493 35%, 0.9754 40%, 0.9919 45%, 1.0018 50%, 1.0072 55%, 1.0097 60%, 1.0103 65%, 1.0099 70%, 1.0089 75%, 1.0076 80%, 1.0063 85%, 1.0051 90%, 1.004 95%, 1);
--kg-press-out:653ms linear(0, 0.5257 2.5%, 0.9642 5%, 1.3156 7.5%, 1.5537 10%, 1.6787 12.5%, 1.7111 15%, 1.6649 17.5%, 1.5667 20%, 1.4330 22.5%, 1.2871 25%, 1.1506 27.5%, 1.0275 30%, 0.9302 32.5%, 0.8642 35%, 0.8252 37.5%, 0.8127 40%, 0.8213 42.5%, 0.8458 45%, 0.8799 47.5%, 0.9169 50%, 0.9545 52.5%, 0.9878 55%, 1.0147 57.5%, 1.0333 60%, 1.0448 62.5%, 1.0492 65%, 1.0477 67.5%, 1.0419 70%, 1.0332 72.5%, 1.0235 75%, 1.0136 77.5%, 1.0045 80%, 0.9974 82.5%, 0.9919 85%, 0.9886 87.5%, 0.9872 90%, 0.9873 92.5%, 0.9887 95%, 0.9908 97.5%, 1);
}}
.kg-btn{
--kg-btn-ink: var(--kg-ink, var(--text-primary, #ededed));
--kg-btn-rim: inset -1px 1px 0 0 rgba(255,255,255,.10), inset 1px -1px 0 0 rgba(255,255,255,.10);
--kg-btn-drop: 0 4px 19px rgba(0,0,0,.4);
position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
box-sizing:border-box; margin:0; border:0; border-radius:999px;
height:36px; padding:0 16px; font:inherit; font-size:14px; font-weight:650; line-height:1.2;
white-space:nowrap; text-decoration:none; cursor:pointer; user-select:none; -webkit-user-select:none;
appearance:none; -webkit-appearance:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
-webkit-backdrop-filter:none; backdrop-filter:none;
color:var(--kg-btn-ink); background:rgba(237,237,237,.04); box-shadow:var(--kg-btn-rim), var(--kg-btn-drop);
transition:transform var(--kg-press-out), color 200ms cubic-bezier(0.22,1,0.36,1);
}
.kg-btn svg{flex:0 0 auto; width:18px; height:18px}
.kg-btn:hover{background:inherit}
.kg-btn:active:not(:disabled):not([aria-disabled="true"]){transform:scale(.94); transition:transform var(--kg-press-in), color 200ms cubic-bezier(0.22,1,0.36,1)}
.kg-btn:focus{outline:none}
.kg-btn:focus-visible{outline:1px solid rgba(237,237,237,.6); outline-offset:2px}
.kg-btn:disabled,.kg-btn[aria-disabled="true"]{cursor:not-allowed; box-shadow:none}
.kg-btn-s{height:28px; padding:0 12px; font-size:13px}
.kg-btn-s svg{width:16px; height:16px}
.kg-btn-l{height:44px; padding:0 22px; font-size:15px}
.kg-btn-l svg{width:20px; height:20px}
.kg-btn-primary{background:rgba(237,237,237,.07); color:var(--kg-btn-ink); box-shadow:var(--kg-btn-rim), var(--kg-btn-drop)}
.kg-btn-primary:hover{background:rgba(237,237,237,.07)}
.kg-btn-primary:disabled,.kg-btn-primary[aria-disabled="true"]{background:rgba(237,237,237,.04); color:rgba(237,237,237,.30)}
.kg-btn-secondary{background:rgba(237,237,237,.04); color:var(--kg-btn-ink); box-shadow:var(--kg-btn-rim), var(--kg-btn-drop)}
.kg-btn-secondary:hover{background:rgba(237,237,237,.04)}
.kg-btn-secondary:disabled,.kg-btn-secondary[aria-disabled="true"]{color:rgba(237,237,237,.18)}
.kg-btn-quiet{background:transparent; color:rgba(237,237,237,.60); box-shadow:none}
.kg-btn-quiet:hover{background:transparent}
.kg-btn-quiet:disabled,.kg-btn-quiet[aria-disabled="true"]{color:rgba(237,237,237,.18)}
.kg-btn-destructive{background:rgba(255,69,58,.15); color:#ff453a; box-shadow:var(--kg-btn-rim)}
.kg-btn-destructive:hover{background:rgba(255,69,58,.15)}
.kg-btn-destructive:disabled,.kg-btn-destructive[aria-disabled="true"]{color:rgba(255,69,58,.30)}
.kg-btn-disc{width:32px; height:32px; padding:0; gap:0; border-radius:50%}
.kg-btn-disc svg{width:16px; height:16px}
.kg-btn-disc-s{width:28px; height:28px; padding:0; gap:0; border-radius:50%}
.kg-btn-disc-s svg{width:14px; height:14px}
.kg-btn-disc-xs{width:26px; height:26px; padding:0; gap:0; border-radius:50%}
.kg-btn-disc-xs svg{width:14px; height:14px}
@media (pointer:coarse){
.kg-btn::after{content:""; position:absolute; top:50%; left:50%; width:max(100%,44px); height:max(100%,44px); transform:translate(-50%,-50%); border-radius:inherit}
}
@media (prefers-reduced-motion:reduce){ .kg-btn{transition:none} .kg-btn:active:not(:disabled):not([aria-disabled="true"]){transform:none; transition:none} }
.kg-menu {
position: fixed;
z-index: 4000;
min-width: 208px;
max-width: min(280px, calc(100vw - 16px));
padding: 0;
border-radius: 13px;
overflow: hidden;
background: rgba(28, 28, 31, 0.82);
-webkit-backdrop-filter: blur(30px) saturate(170%);
backdrop-filter: blur(30px) saturate(170%);
border: 1px solid rgba(255, 255, 255, 0.13);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 18px 44px rgba(0, 0, 0, 0.55);
transform-origin: right top;
--kgp-menu-off-x: -50%;
--kgp-menu-off-y: -80px;
animation:
kgpMenuScaleIn var(--kgp-menu-scale-in) var(--kgp-menu-curve) both,
kgpMenuSlideIn var(--kgp-menu-slide-in) var(--kgp-menu-curve) both;
}
.kg-menu[hidden] { display: none; }
.kg-menu.kg-menu-out {
pointer-events: none;
animation: kgpMenuScaleOut var(--kgp-menu-scale-out) var(--kgp-menu-curve-out) both;
}
.kg-menu [role="menuitem"] {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 44px;
padding: 0 14px;
border: 0;
background: none;
color: var(--text-primary);
font: inherit;
font-size: 13.5px;
text-align: left;
cursor: pointer;
transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.1s cubic-bezier(0.4, 0, 0.6, 1);
}
.kg-menu [role="menuitem"] + [role="menuitem"] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.kg-menu [role="menuitem"]:active { transform: scale(0.97); }
.kg-menu [role="menuitem"] svg { width: 16px; height: 16px; flex: 0 0 auto; }
.kg-menu .kg-menu-danger { color: var(--kammii-danger, #ff453a); }
@media (prefers-reduced-transparency: reduce) {
.kg-menu { background: var(--bg-secondary); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
.kg-menu { animation: none; }
}
[data-theme="light"] .kg-menu {
background: rgba(255, 255, 255, 0.9);
border-color: rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 18px 44px rgba(0, 0, 0, 0.18);
}
[data-theme="light"] .kg-menu [role="menuitem"] + [role="menuitem"] { box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.07); }
.kg-seg {
position: relative;
isolation: isolate;
display: flex;
gap: 0;
padding: 3px;
border-radius: 999px;
background: transparent;
border: 1px solid transparent;
overflow: visible;
}
.kg-seg.kg-seg-grid { display: grid; border-radius: var(--radius-sm, 10px); }
.kg-seg.kg-seg-grid .kg-seg-thumb { border-radius: var(--radius-xs, 6px); }
.kg-seg-thumb {
position: absolute;
z-index: 0;
pointer-events: none;
left: 0;
top: 0;
bottom: auto;
width: 0;
height: 0;
border-radius: 999px;
pointer-events: none;
transform-origin: 50% 50%;
opacity: 0;
transition: opacity 0.12s linear;
}
.kg-seg[data-kg-seg="true"] .kg-seg-thumb { opacity: 1; }
.kg-seg > .kg-seg-thumb {
background: var(--kg-sel-wash, rgba(255, 255, 255, 0.05));
box-shadow:
inset 0 1px 0 0 rgba(255, 255, 255, 0.12),
inset 0 -1px 0 0 rgba(0, 0, 0, 0.3),
0 1px 2px rgba(0, 0, 0, 0.3);
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
.kg-seg > .kg-seg-thumb {
background: var(--kg-sel-solid, rgb(58, 58, 60));
box-shadow: inset 0 0 0 1px var(--kg-sel-rim, rgba(255, 255, 255, 0.55));
}
}
.kg-seg-lens {
position: absolute;
z-index: 2;
left: 0;
top: 0;
width: 0;
height: 0;
border-radius: 999px;
pointer-events: none;
transform-origin: 50% 50%;
opacity: 0;
-webkit-mask: radial-gradient(closest-side,
rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.55) 84%, #000 100%);
mask: radial-gradient(closest-side,
rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.55) 84%, #000 100%);
}
@media (prefers-reduced-motion: reduce) {
.kg-seg-lens { display: none; }
}
@media (prefers-contrast: more) {
.kg-seg {
background: var(--bg-tertiary);
border-color: rgba(255, 255, 255, 0.16);
}
[data-theme="light"] .kg-seg { border-color: rgba(0, 0, 0, 0.16); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
.kg-seg-lens { display: none; }
}
.kg-seg .kg-seg-item {
position: relative;
z-index: 1;
height: auto;
display: flex;
align-items: center;
justify-content: center;
align-content: center;
text-align: center;
border: 0;
background: none;
color: var(--text-primary);
line-height: 1.2;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.kg-seg:not(.kg-seg-grid) .kg-seg-item {
flex: 1;
min-height: 44px;
gap: 6px;
padding: 0 14px;
border-radius: 999px;
font-size: 0.9375rem;
font-weight: 560;
white-space: nowrap;
}
.kg-seg.kg-seg-compact .kg-seg-item { min-height: 0; }
.kg-seg .kg-seg-item { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.kg-seg .kg-seg-item:active:not(.active):not(.selected) { opacity: 0.55; transition: opacity 0s; }
.kg-seg.kg-seg-grid .kg-seg-item.active,
.kg-seg.kg-seg-grid .kg-seg-item.selected { touch-action: none; }
.kg-seg .kg-seg-item.active,
.kg-seg .kg-seg-item.selected { cursor: grab; }
.kg-seg[data-kg-seg-held] { cursor: grabbing; }
.kg-seg[data-kg-seg-held] .kg-seg-item { cursor: grabbing; }
.kg-seg > .kg-seg-thumb { transition: filter 180ms ease; }
.kg-seg[data-kg-seg-held] > .kg-seg-thumb { filter: brightness(1.18); }
.kg-seg .kg-seg-item {
background: none !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
.kg-seg .kg-seg-item.active { color: var(--text-primary) !important; }
.kg-seg .kg-seg-item.active {
border-color: transparent;
background: none;
color: var(--text-primary);
font-weight: 560;
}
@media (prefers-contrast: more) {
.kg-seg .kg-seg-item:not(.active) { color: var(--text-secondary); }
.kg-seg .kg-seg-item.active { font-weight: 680; }
}
.kg-seg .kg-seg-item[disabled],
.kg-seg .kg-seg-item[aria-disabled="true"] { color: var(--text-muted); cursor: not-allowed; }
.kg-seg .kg-seg-item:focus { outline: none; }
.kg-seg .kg-seg-item:focus-visible {
outline: 1px solid rgba(237,237,237,0.6);
outline-offset: -3px;
border-radius: 999px;
}
.kg-seg.kg-seg-grid .kg-seg-item { flex: none; flex-direction: column; }
.kg-seg.kg-seg-grid .kg-seg-item:focus-visible { border-radius: var(--radius-xs, 6px); }
@media (prefers-reduced-motion: reduce) {
.kg-seg-thumb { transition: none; }
}
.kg-select { position: relative; min-width: 0; width: 100%; }
.kg-select > select.kg-select-native {
position: absolute !important; inset: 0 auto auto 0 !important;
width: 1px !important; height: 1px !important; padding: 0 !important; margin: 0 !important;
opacity: 0 !important; pointer-events: none !important; overflow: hidden !important;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.kg-select-button {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
width: 100%; min-height: 44px; padding: 12px 14px;
border: 1px solid var(--border-color, rgba(255,255,255,0.12)); border-radius: var(--radius-sm, 10px);
background: var(--bg-tertiary, #1c1c1e); color: var(--text-primary, #ededed);
font: inherit; font-size: 14px; line-height: 1.2; text-align: left; cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s cubic-bezier(0.2, 0.9, 0.18, 1);
}
.kg-select-button:disabled { cursor: not-allowed; opacity: 0.55; }
.kg-select-button:focus { outline: none; }
.kg-select-button:focus-visible { outline: 1px solid rgba(237,237,237,0.6); outline-offset: 2px; }
.kg-select-label { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kg-select-button svg { width: 13px; height: 13px; flex: 0 0 auto; color: var(--text-secondary, rgba(255,255,255,0.62)); transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.18, 1); }
.kg-select.open .kg-select-button svg { transform: rotate(180deg); }
.kg-select-button:active:not(:disabled) { transform: scale(0.985); }
.kg-select-menu {
position: absolute; top: calc(100% + 8px); left: 0; z-index: 1260;
width: 100%; min-width: 200px; max-height: min(320px, 50dvh); overflow-y: auto; overscroll-behavior: contain;
padding: 6px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.16);
background: rgba(20,20,20,0.92);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 10px 34px rgba(0,0,0,0.4);
-webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px);
transform-origin: left top; --kgp-menu-off-x: 50%; --kgp-menu-off-y: -80px;
opacity: 0; scale: 0; translate: var(--kgp-menu-off-x) var(--kgp-menu-off-y); pointer-events: none;
transition-property: opacity, scale, translate;
transition-duration: var(--kgp-menu-fade-out, 180ms), var(--kgp-menu-scale-out, 180ms), var(--kgp-menu-slide-out, 180ms);
transition-delay: 0ms;
transition-timing-function: var(--kgp-menu-curve-out, cubic-bezier(0.4, 0, 1, 1)), var(--kgp-menu-curve-out, cubic-bezier(0.4, 0, 1, 1)), var(--kgp-menu-curve-out, cubic-bezier(0.4, 0, 1, 1));
scrollbar-width: thin;
}
.kg-select.up .kg-select-menu { top: auto; bottom: calc(100% + 8px); transform-origin: left bottom; --kgp-menu-off-y: 80px; }
.kg-select.open .kg-select-menu {
opacity: 1; scale: 1; translate: 0 0; pointer-events: auto;
transition-duration: 0ms, var(--kgp-menu-scale-in, 400ms), var(--kgp-menu-slide-in, 600ms);
transition-delay: 0ms;
transition-timing-function: ease, var(--kgp-menu-curve, cubic-bezier(0, 1, 0.2, 1.05)), var(--kgp-menu-curve, cubic-bezier(0, 1, 0.2, 1.05));
}
.kg-select-highlight {
position: absolute; left: 6px; right: 6px; top: 0; height: 0; border-radius: 12px;
background: rgba(255,255,255,0.11); box-shadow: inset 0 1px 0.5px rgba(255,255,255,0.16);
pointer-events: none; opacity: 0; z-index: 0; transform: translateY(0);
transition: transform 0.42s cubic-bezier(0.32,1.35,0.5,1), height 0.42s cubic-bezier(0.32,1.35,0.5,1), opacity 0.2s ease;
}
.kg-select-highlight.instant { transition: none; }
.kg-select-option {
position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px;
min-height: 44px; padding: 8px 10px 8px 12px; border: 0; border-radius: 13px; background: transparent;
color: rgba(255,255,255,0.7); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.25; cursor: pointer; text-align: left;
transition: color 0.2s ease; -webkit-tap-highlight-color: transparent;
}
.kg-select-option:hover, .kg-select-option.active, .kg-select-option:focus-visible { color: #fff; }
.kg-select-option:focus { outline: none; }
.kg-select-option[disabled] { color: rgba(255,255,255,0.32); cursor: not-allowed; }
.kg-select-option > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kg-select-check {
width: 18px; height: 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
color: rgba(255,255,255,0.9); opacity: 0; transform: scale(0.8);
transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.kg-select-option.active .kg-select-check { opacity: 1; transform: scale(1); }
.kg-select-check svg { width: 14px; height: 14px; }
.kg-select-group { position: relative; z-index: 1; padding: 8px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.4); pointer-events: none; }
[data-theme="light"] .kg-select-menu { border-color: rgba(0,0,0,0.12); background: rgba(250,250,250,0.94); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 10px 34px rgba(0,0,0,0.18); }
[data-theme="light"] .kg-select-highlight { background: rgba(0,0,0,0.06); box-shadow: inset 0 1px 0.5px rgba(255,255,255,0.5); }
[data-theme="light"] .kg-select-option { color: rgba(0,0,0,0.7); }
[data-theme="light"] .kg-select-option:hover, [data-theme="light"] .kg-select-option.active { color: #111; }
[data-theme="light"] .kg-select-option[disabled] { color: rgba(0,0,0,0.32); }
[data-theme="light"] .kg-select-check { color: rgba(0,0,0,0.85); }
[data-theme="light"] .kg-select-group { color: rgba(0,0,0,0.42); }
@media (prefers-reduced-motion: reduce) {
.kg-select-menu, .kg-select.open .kg-select-menu { transition-duration: 0ms, 0ms, 0ms; }
.kg-select-highlight, .kg-select-check, .kg-select-button svg { transition: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
.kg-select-menu { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(20,20,20,0.98); }
[data-theme="light"] .kg-select-menu { background: rgba(250,250,250,0.99); }
}
.kg-cf {
position: relative;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 0;
width: 100%;
overflow: hidden;
background: transparent;
cursor: grab;
touch-action: pan-y;
perspective: 1000px;
outline: none;
scroll-snap-type: none;
padding: 0;
}
.kg-cf.kg-cf-dragging { cursor: grabbing; }
.kg-cf::-webkit-scrollbar { display: none; width: 0; height: 0; }
.kg-cf-stage {
position: relative;
width: 100%;
display: flex; align-items: center; justify-content: center;
transform-style: preserve-3d;
pointer-events: none;
}
.kg-cf-card {
position: absolute; top: 50%; left: 50%;
flex-shrink: 0;
transform-style: preserve-3d;
will-change: transform;
pointer-events: auto;
scroll-snap-align: none;
transition: none;
margin: 0;
}
.kg-cf.kg-cf-dragging .kg-cf-card { cursor: grabbing; }
.kg-cf-card > .model-card-image,
.kg-cf-card > .lora-card-image {
width: 100%; height: 100%;
margin-bottom: 0;
aspect-ratio: auto;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}
.kg-cf-card > .model-card-image > img,
.kg-cf-card > .lora-card-image > img {
width: 100%; height: 100%; object-fit: cover;
user-select: none; -webkit-user-drag: none;
}
.kg-cf-card > .model-card-name,
.kg-cf-card > .lora-card-name { display: none; }
.kg-cf-label {
position: relative; z-index: 40;
width: 100%; padding: 14px 8px 2px;
text-align: center; pointer-events: none;
}
.kg-cf-title {
margin: 0;
font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
color: var(--text-primary, #ededed);
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kg-cf-sub {
margin: 3px 0 0;
font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
color: var(--text-secondary, #9a9a9a);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@keyframes kgCfLabelIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
.kg-cf-label.kg-cf-label-in { animation: kgCfLabelIn 0.25s ease-out; }
@media (prefers-reduced-motion: reduce) {
.kg-cf-label.kg-cf-label-in { animation: none; }
}
.kg-disc {
overflow: hidden;
max-height: var(--kg-disc-h, 0px);
transition: max-height 320ms cubic-bezier(0.4, 0, 0.6, 1) 240ms,
visibility 0s linear 1s;
}
.kg-disc.kg-disc-open {
max-height: var(--kg-disc-h, none);
visibility: visible;
transition: max-height 320ms cubic-bezier(0.4, 0, 0.6, 1) 0s,
visibility 0s linear 0s;
}
.kg-disc > * {
--kg-disc-delay: 0s;
--kg-disc-duration: 400ms;
opacity: 0;
transform: translate3d(0, -4px, 0);
transition: var(--kg-disc-duration) cubic-bezier(0.4, 0, 0.6, 1) var(--kg-disc-delay);
transition-property: opacity, transform;
}
.kg-disc.kg-disc-open > * { opacity: 1; transform: translate3d(0, 0, 0); }
.kg-disc > *:nth-child(1) { --kg-disc-duration: 400ms; }
.kg-disc > *:nth-child(2) { --kg-disc-duration: 380ms; }
.kg-disc > *:nth-child(3) { --kg-disc-duration: 360ms; }
.kg-disc > *:nth-child(4) { --kg-disc-duration: 340ms; }
.kg-disc > *:nth-child(5) { --kg-disc-duration: 320ms; }
.kg-disc > *:nth-child(6) { --kg-disc-duration: 300ms; }
.kg-disc > *:nth-child(7) { --kg-disc-duration: 280ms; }
.kg-disc > *:nth-child(n+8) { --kg-disc-duration: 260ms; }
.kg-disc.kg-disc-open > * { --kg-disc-duration: 320ms; }
.kg-disc.kg-disc-open > *:nth-child(1) { --kg-disc-delay: 260ms; }
.kg-disc.kg-disc-open > *:nth-child(2) { --kg-disc-delay: 280ms; }
.kg-disc.kg-disc-open > *:nth-child(3) { --kg-disc-delay: 300ms; }
.kg-disc.kg-disc-open > *:nth-child(4) { --kg-disc-delay: 320ms; }
.kg-disc.kg-disc-open > *:nth-child(5) { --kg-disc-delay: 340ms; }
.kg-disc.kg-disc-open > *:nth-child(6) { --kg-disc-delay: 360ms; }
.kg-disc.kg-disc-open > *:nth-child(7) { --kg-disc-delay: 380ms; }
.kg-disc.kg-disc-open > *:nth-child(n+8) { --kg-disc-delay: 400ms; }
@media (prefers-reduced-motion: reduce) {
.kg-disc, .kg-disc > * { transition: none; }
}
.kg-num-host { position: relative; }
.kg-num-ov {
position: absolute; left: 0; top: 0;
display: flex; align-items: center; justify-content: center;
pointer-events: none; user-select: none;
white-space: nowrap; overflow: hidden;
box-sizing: border-box;
}
.km-roll { display: inline-flex; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.km-roll-cell { position: relative; display: inline-block; height: 1.35em; overflow: hidden; line-height: 1.35em; vertical-align: bottom; }
.km-roll-cur { display: block; opacity: 0; }
.km-roll-cell::before {
position: absolute;
inset: 0;
display: block;
pointer-events: none;
content: attr(data-current);
}
.km-roll-cell::after { content: none; }
.km-roll-cell.km-roll-up,
.km-roll-cell.km-roll-down {
-webkit-mask-image: linear-gradient(transparent 0, #000 18%, #000 82%, transparent 100%);
mask-image: linear-gradient(transparent 0, #000 18%, #000 82%, transparent 100%);
}
.km-roll-cell.km-roll-up::before,
.km-roll-cell.km-roll-down::before {
bottom: auto;
content: attr(data-strip);
white-space: pre;
transform: translateY(calc(var(--km-roll-y, 10) * -1.35em));
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
.km-roll-cell.km-roll-up, .km-roll-cell.km-roll-down { -webkit-mask-image: none; mask-image: none; }
.km-roll-cell.km-roll-up::before,
.km-roll-cell.km-roll-down::before { content: attr(data-current); transform: none; white-space: normal; }
}
.kgp-backdrop {
position: fixed; inset: 0; z-index: 13000;
background: rgba(0, 0, 0, 0.2);
visibility: hidden; opacity: 0; transition-duration: 400ms;
}
.kgp-backdrop.kgp-backdrop-in { visibility: visible; opacity: 1; }
.kgp-popover {
--kgp-radius: 16px;
--kgp-glass-bg: #32323280;
--kgp-glass-shadow:
inset -2px -2px 0.5px -2.5px #fff6, inset 3px 3px 0.5px -3.5px #fff6,
inset 2px 2px 0.5px -2px #262626, inset -2px -2px 0.5px -2px #262626,
inset 0 0 5px 1px #141414, inset 0 0 0 1px #ffffff26,
inset 0 0 10px 0 hsla(0, 0%, 100%, .075), inset 0 0 24px 0 #ffffff0d,
0 0 25px 0 #00000026;
--kgp-border-color: #ffffff26;
--kgp-device-pixel-ratio: 1;
position: absolute; top: 0; left: 0; margin: 0;
width: 260px; max-width: calc(100vw - 20px);
z-index: 13500; display: none;
border-radius: var(--kgp-radius);
opacity: 1; transform: translateZ(0) scale(0);
transition-property: opacity, transform;
will-change: auto;
}
@media (-webkit-min-device-pixel-ratio: 2) { .kgp-popover { --kgp-device-pixel-ratio: 2; } }
@media (-webkit-min-device-pixel-ratio: 3) { .kgp-popover { --kgp-device-pixel-ratio: 3; } }
.kgp-popover.kgp-in { transform: translateZ(0) scale(1); transition-duration: .4s; transition-timing-function: cubic-bezier(0, 1, .2, 1.05); }
.kgp-popover.kgp-in .kgp-inner { transform: translateZ(0) scale(1); transition-duration: .6s; transition-timing-function: cubic-bezier(0, 1, .2, 1.05); }
.kgp-popover.kgp-out { opacity: 0; transform: translateZ(0) scale(0); transition-duration: .3s; }
.kgp-popover.kgp-out .kgp-inner { transition-duration: .5s; }
.kgp-inner {
backdrop-filter: saturate(180%) blur(16px);
-webkit-backdrop-filter: saturate(180%) blur(16px);
background: var(--kgp-glass-bg);
border-radius: var(--kgp-radius);
box-shadow: var(--kgp-glass-shadow);
transform: var(--kgp-inner-offset);
overflow: auto; max-height: 60vh;
-webkit-overflow-scrolling: touch;
}
.kgp-on-top { transform-origin: center bottom; --kgp-inner-offset: translate3d(0%, 80px, 0); }
.kgp-on-top.kgp-on-right { transform-origin: left bottom; --kgp-inner-offset: translate3d(50%, 80px, 0); }
.kgp-on-top.kgp-on-left { transform-origin: right bottom; --kgp-inner-offset: translate3d(-50%, 80px, 0); }
.kgp-on-middle { transform-origin: center center; }
.kgp-on-middle.kgp-on-right { transform-origin: left center; --kgp-inner-offset: translate3d(50%, 0px, 0); }
.kgp-on-middle.kgp-on-left { transform-origin: right center; --kgp-inner-offset: translate3d(-50%, 0px, 0); }
.kgp-on-bottom { transform-origin: center top; --kgp-inner-offset: translate3d(0%, -80px, 0); }
.kgp-on-bottom.kgp-on-right { transform-origin: left top; --kgp-inner-offset: translate3d(50%, -80px, 0); }
.kgp-on-bottom.kgp-on-left { transform-origin: right top; --kgp-inner-offset: translate3d(-50%, -80px, 0); }
.kgp-item {
position: relative; display: flex; align-items: center; gap: 10px;
width: 100%; box-sizing: border-box;
padding: 11px 14px; min-height: 44px;
font: inherit; font-size: 15px; text-align: left;
color: #ededed; background: none; border: 0; cursor: pointer;
}
.kgp-item:hover { background: rgba(255, 255, 255, 0.06); }
.kgp-item:active { background: rgba(255, 255, 255, 0.12); }
.kgp-item:focus-visible { outline: none; background: rgba(255, 255, 255, 0.12); }
.kgp-item:after {
content: ''; position: absolute; left: 14px; right: 0; bottom: 0;
height: 1px; width: auto; background-color: var(--kgp-border-color);
transform-origin: 50% 100%;
transform: scaleY(calc(1 / var(--kgp-device-pixel-ratio)));
z-index: 15;
}
.kgp-item:last-child:after { display: none !important; }
.kgp-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kgp-check { width: 16px; height: 16px; flex-shrink: 0; opacity: 0; }
.kgp-item[aria-checked="true"] .kgp-check { opacity: 1; }
.kgp-item[aria-checked="true"] { font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
.kgp-popover, .kgp-popover .kgp-inner, .kgp-backdrop { transition-duration: 0ms !important; }
}
@media (prefers-reduced-transparency: reduce) {
.kgp-inner { backdrop-filter: none; -webkit-backdrop-filter: none; background: #242424; }
}
.kgp-popover { position: fixed; }
.kgp-group {
padding: 10px 14px 4px;
font-size: 12px; font-weight: 600; color: var(--text-secondary);
}
select[aria-expanded="true"] { outline: none; }
:root {
--kgp-menu-curve: cubic-bezier(0, 1, 0.2, 1.05);
--kgp-menu-scale-in: 400ms;
--kgp-menu-slide-in: 600ms;
--kgp-menu-curve-out: cubic-bezier(0.4, 0, 1, 1);
--kgp-menu-scale-out: 180ms;
--kgp-menu-fade-out: 180ms;
--kgp-menu-slide-out: 180ms;
--kgp-menu-off-x: 0%;
--kgp-menu-off-y: -80px;
}
@keyframes kgpMenuScaleIn { from { scale: 0; } to { scale: 1; } }
@keyframes kgpMenuSlideIn {
from { translate: var(--kgp-menu-off-x) var(--kgp-menu-off-y); }
to { translate: 0 0; }
}
@keyframes kgpMenuScaleOut { from { scale: 1; opacity: 1; } to { scale: 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.ag-agent-model-menu,
.ag-chat-history-menu,
.ag-slash-menu,
.ag-msg-menu,
.k-mini-chatlist,
.kg-menu,
.danbooru-assist-menu,
.danbooru-fix-popover {
animation-duration: 0ms !important;
transition-duration: 0ms !important;
transition-delay: 0ms !important;
}
}
:root, [data-theme="dark"] { --skeleton-color: #515151; }
[data-theme="light"] { --skeleton-color: #ccc; }
@keyframes skeleton-effect-fade {
0% { opacity: 1; }
50% { opacity: 0.2; }
100% { opacity: 1; }
}
@keyframes skeleton-effect-wave {
0% { -webkit-mask-position: 50% top; mask-position: 50% top; }
100% { -webkit-mask-position: -150% top; mask-position: -150% top; }
}
.skeleton-effect-fade { animation: skeleton-effect-fade 1.5s infinite; }
.skeleton-effect-wave {
position: relative;
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, #000 33%, rgba(0, 0, 0, 0.65) 50%, #000 66%);
mask-image: linear-gradient(to right, #000 33%, rgba(0, 0, 0, 0.65) 50%, #000 66%);
-webkit-mask-size: 300% 100%;
mask-size: 300% 100%;
animation: skeleton-effect-wave 1.6s linear infinite;
}
.kgp-skel { display: block; background-color: var(--skeleton-color); border-radius: 6px; }
.kgp-skel-line { height: 11px; border-radius: 999px; }
.kgp-skel-line + .kgp-skel-line { margin-top: 9px; }
.kgp-skel-row {
display: flex; align-items: center; gap: 11px;
min-height: 44px; padding: 8px 10px; box-sizing: border-box;
}
.kgp-skel-avatar { width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto; }
.kgp-skel-lines { flex: 1 1 auto; min-width: 0; }
.kgp-skel-list { display: block; padding: 4px 0; flex: 0 0 auto; }
.kgp-skel-chip { display: inline-block; vertical-align: -0.12em; width: 5.5ch; height: 0.85em; border-radius: 999px; background-color: var(--skeleton-color); }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
@media (prefers-reduced-motion: reduce) {
.skeleton-effect-fade, .skeleton-effect-wave {
animation: none;
}
.skeleton-effect-wave { -webkit-mask-image: none; mask-image: none; }
}
@keyframes kgPageIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: none; }
}
html.kg-anim [data-kg-enter] > *:not([data-kg-enter-skip]) {
animation: kgPageIn var(--kg-enter-dur, 0.9s)
cubic-bezier(0.28, 0.11, 0.32, 1) backwards;
animation-delay: calc(var(--kg-enter-base, 0.05s) +
var(--kg-enter-step, 0.09s) * var(--kg-enter-i, 0));
}
html.kg-anim [data-kg-enter] > [data-kg-enter] { animation: none; }
html.kg-anim [data-kg-enter] > script,
html.kg-anim [data-kg-enter] > style,
html.kg-anim [data-kg-enter] > link,
html.kg-anim [data-kg-enter] > template,
html.kg-anim [data-kg-enter] > [hidden],
html.kg-anim [data-kg-enter] > [role="dialog"]:not([data-kg-enter-skip]),
html.kg-anim [data-kg-enter] > [aria-modal="true"]:not([data-kg-enter-skip]),
html.kg-anim [data-kg-enter] > .modal-overlay,
html.kg-anim [data-kg-enter] > .toast-container,
html.kg-anim [data-kg-enter] > .image-viewer,
html.kg-anim [data-kg-enter] > .floating-progress,
html.kg-anim [data-kg-enter] > .generate-btn-mobile,
html.kg-anim [data-kg-enter] > .k-mini-pill,
html.kg-anim [data-kg-enter] > .k-mini-scrim,
html.kg-anim [data-kg-enter] > .ag-tier-popup-backdrop,
html.kg-anim [data-kg-enter] > .kpl-launch,
html.kg-anim [data-kg-enter] > .kpl-overlay,
html.kg-anim [data-kg-enter] > .km-import-veil,
html.kg-anim [data-kg-enter] > #mobileMaskEditor { animation: none; }
[data-kg-enter] > *:nth-child(1) { --kg-enter-i: 0; }
[data-kg-enter] > *:nth-child(2) { --kg-enter-i: 1; }
[data-kg-enter] > *:nth-child(3) { --kg-enter-i: 2; }
[data-kg-enter] > *:nth-child(4) { --kg-enter-i: 3; }
[data-kg-enter] > *:nth-child(5) { --kg-enter-i: 4; }
[data-kg-enter] > *:nth-child(6) { --kg-enter-i: 5; }
[data-kg-enter] > *:nth-child(7) { --kg-enter-i: 6; }
[data-kg-enter] > *:nth-child(8) { --kg-enter-i: 7; }
[data-kg-enter] > *:nth-child(n+9) { --kg-enter-i: 8; }
@media (max-width: 768px) {
.left-column[data-kg-enter] > *:nth-child(1) { --kg-enter-i: 1; }
.left-column[data-kg-enter] > *:nth-child(2) { --kg-enter-i: 0; }
}
@keyframes kgPopIn {
from { opacity: 0; transform: scale(0.94) translateY(14px); }
to { opacity: 1; transform: none; }
}
@keyframes kgVeilIn {
from { opacity: 0; }
to { opacity: 1; }
}
html.kg-anim .modal-overlay:not([data-kg-enter-skip]) > *,
html.kg-anim [role="dialog"]:not([data-kg-enter-skip]) > *,
html.kg-anim [aria-modal="true"]:not([data-kg-enter-skip]) > * {
animation: kgPopIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
@keyframes kgTileIn {
from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: none; }
}
html.kg-anim .output-images > *,
html.kg-anim .sg-grid > *,
html.kg-anim [data-kg-tiles] > * {
animation: kgTileIn 0.42s cubic-bezier(0.28, 0.11, 0.32, 1) backwards;
animation-delay: calc(var(--kg-tile-step, 0.035s) * var(--kg-tile-i, 0));
}
.output-images > *:nth-child(1), .sg-grid > *:nth-child(1), [data-kg-tiles] > *:nth-child(1) { --kg-tile-i: 0; }
.output-images > *:nth-child(2), .sg-grid > *:nth-child(2), [data-kg-tiles] > *:nth-child(2) { --kg-tile-i: 1; }
.output-images > *:nth-child(3), .sg-grid > *:nth-child(3), [data-kg-tiles] > *:nth-child(3) { --kg-tile-i: 2; }
.output-images > *:nth-child(4), .sg-grid > *:nth-child(4), [data-kg-tiles] > *:nth-child(4) { --kg-tile-i: 3; }
.output-images > *:nth-child(5), .sg-grid > *:nth-child(5), [data-kg-tiles] > *:nth-child(5) { --kg-tile-i: 4; }
.output-images > *:nth-child(6), .sg-grid > *:nth-child(6), [data-kg-tiles] > *:nth-child(6) { --kg-tile-i: 5; }
.output-images > *:nth-child(n+7), .sg-grid > *:nth-child(n+7), [data-kg-tiles] > *:nth-child(n+7) { --kg-tile-i: 6; }
@media (prefers-reduced-motion: reduce) {
[data-kg-enter] > *,
.modal-overlay > *,
[role="dialog"] > *,
[aria-modal="true"] > *,
.output-images > *,
.sg-grid > *,
[data-kg-tiles] > * { animation: none !important; }
}
html.kg-anim-off [data-kg-enter] > *:not([data-kg-enter-skip]):not([role="dialog"]):not([aria-modal="true"]):not(.modal-overlay):not(.toast-container):not(.image-viewer):not(.floating-progress):not(.generate-btn-mobile):not(.k-mini-panel):not(.k-mini-pill):not(.k-mini-scrim):not(.kpl-launch):not(.kpl-overlay):not(.km-import-veil):not(.ag-tier-popup-backdrop):not(#mobileMaskEditor),
html.kg-anim-off .modal-overlay:not([data-kg-enter-skip]) > *,
html.kg-anim-off [role="dialog"]:not([data-kg-enter-skip]) > *,
html.kg-anim-off [aria-modal="true"]:not([data-kg-enter-skip]) > *,
html.kg-anim-off .output-images > *,
html.kg-anim-off .sg-grid > *,
html.kg-anim-off [data-kg-tiles] > * {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
html.kg-blur-all {
--kg-pblur: 18px;
}
html.kg-blur-all img,
html.kg-blur-all video,
html.kg-blur-all .kg-reveal-canvas {
filter: blur(var(--kg-pblur)) !important;
}
html.kg-blur-all .history-slot img,
html.kg-blur-all .history-slot .kg-reveal-canvas,
html.kg-blur-all .model-card-image img,
html.kg-blur-all .lora-card-image img,
html.kg-blur-all #savedGrid .sg-item img,
html.kg-blur-all #savedGrid .sg-item .kg-reveal-canvas {
--kg-pblur: 14px;
transform: scale(1.14) !important;
}
html.kg-blur-all .output-image,
html.kg-blur-all .output-images img,
html.kg-blur-all .output-images .kg-reveal-canvas {
--kg-pblur: 34px;
transform: scale(1.1) !important;
}
html.kg-blur-all .viewer-image,
html.kg-blur-all #viewerImage {
--kg-pblur: 64px;
}
html.kg-blur-all [data-kg-blur-surface] {
filter: blur(16px) !important;
}
html.kg-blur-all .kg-blur-badge { display: inline-flex !important; }
.kg-blur-badge { display: none; }
.kg-confirm-overlay {
--kg-confirm-spring: linear(0.0000, 0.0187 2.5%, 0.0684 5.0%, 0.1405 7.5%, 0.2275 10.0%, 0.3229 12.5%, 0.4215 15.0%, 0.5190 17.5%, 0.6122 20.0%, 0.6986 22.5%, 0.7768 25.0%, 0.8456 27.5%, 0.9048 30.0%, 0.9543 32.5%, 0.9945 35.0%, 1.0260 37.5%, 1.0496 40.0%, 1.0662 42.5%, 1.0767 45.0%, 1.0822 47.5%, 1.0835 50.0%, 1.0815 52.5%, 1.0771 55.0%, 1.0708 57.5%, 1.0634 60.0%, 1.0554 62.5%, 1.0472 65.0%, 1.0391 67.5%, 1.0313 70.0%, 1.0242 72.5%, 1.0178 75.0%, 1.0122 77.5%, 1.0073 80.0%, 1.0033 82.5%, 1.0001 85.0%, 0.9975 87.5%, 0.9956 90.0%, 0.9943 92.5%, 0.9935 95.0%, 0.9931 97.5%, 1.0000);
position: fixed; inset: 0; z-index: 100000;
display: flex; align-items: center; justify-content: center;
padding: 24px;
background: rgba(0, 0, 0, 0.42);
-webkit-backdrop-filter: blur(20px) saturate(120%);
backdrop-filter: blur(20px) saturate(120%);
opacity: 0;
transition: opacity 0.22s var(--kammii-ease-spring, cubic-bezier(0.32, 0.72, 0, 1));
}
.kg-confirm-overlay.kg-confirm-open { opacity: 1; }
.kg-confirm-box {
width: 100%; max-width: 300px;
border-radius: var(--kammii-radius-lg, 18px);
padding: 22px 20px 0;
text-align: center;
color: var(--text-primary, var(--kammii-text-primary, #ffffff));
background: var(--bg-secondary, var(--kammii-bg-secondary, #141414));
border: 1px solid var(--border-color, var(--kammii-border, #2a2a2a));
box-shadow: var(--kammii-glass-shadow, 0 24px 70px rgba(0, 0, 0, 0.55));
overflow: hidden;
transform: scale(0.72, 0.52);
opacity: 0;
transform-origin: center center;
transition: transform 0.44s var(--kg-confirm-spring),
opacity 0.16s ease-out;
will-change: transform;
}
.kg-confirm-overlay.kg-confirm-open .kg-confirm-box {
transform: scale(1, 1);
opacity: 1;
}
.kg-confirm-overlay.kg-confirm-closing .kg-confirm-box {
transform: scale(0.9, 0.72);
opacity: 0;
transition: transform 0.17s cubic-bezier(0.4, 0, 1, 1),
opacity 0.15s ease-in;
}
.kg-confirm-overlay.kg-confirm-closing { opacity: 0; transition: opacity 0.17s ease-in; }
.kg-confirm-box > * {
opacity: 0;
transform: translateY(4px);
transition: opacity 0.24s ease-out 0.06s, transform 0.32s var(--kammii-ease-settling, cubic-bezier(0.16, 1, 0.3, 1)) 0.06s;
}
.kg-confirm-overlay.kg-confirm-open .kg-confirm-box > * {
opacity: 1;
transform: translateY(0);
}
.kg-confirm-overlay.kg-confirm-closing .kg-confirm-box > * {
transition: opacity 0.1s ease-in;
opacity: 0;
}
.kg-confirm-title {
margin: 0;
font-size: 1rem; font-weight: 650; line-height: 1.3;
color: var(--text-primary, var(--kammii-text-primary, #ffffff));
}
.kg-confirm-message {
margin: 6px 0 0;
font-size: 0.8125rem; font-weight: 400; line-height: 1.4;
color: var(--text-secondary, var(--kammii-text-secondary, #888888));
white-space: pre-line;
}
.kg-confirm-box.kg-confirm-has-check { max-width: 360px; }
.kg-confirm-check {
display: flex; align-items: flex-start; gap: 12px;
min-height: 44px; margin: 16px 0 0; padding: 12px;
border-radius: var(--kammii-radius-sm, 10px);
background: rgba(237, 237, 237, 0.04);
text-align: left; cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.kg-confirm-check input {
flex: 0 0 auto; width: 20px; height: 20px; margin: 0;
accent-color: var(--kammii-text-primary, #ededed);
cursor: pointer;
}
.kg-confirm-check input:focus-visible { outline: 1px solid rgba(237, 237, 237, 0.6); outline-offset: 2px; }
.kg-confirm-check-text {
font-size: 0.8125rem; font-weight: 400; line-height: 1.4;
color: var(--text-primary, var(--kammii-text-primary, #ffffff));
}
.kg-confirm-link {
display: inline-block; margin: 8px 0 0; padding: 8px 12px;
font-size: 0.8125rem; line-height: 1.4;
color: var(--text-secondary, var(--kammii-text-secondary, #888888));
text-decoration: underline; text-underline-offset: 2px;
}
.kg-confirm-link:focus-visible { outline: 1px solid rgba(237, 237, 237, 0.6); outline-offset: 2px; border-radius: 6px; }
.kg-confirm-btn:disabled { opacity: 0.4; cursor: default; }
.kg-confirm-btn:disabled:active { background: transparent; }
.kg-confirm-actions {
display: flex;
margin: 20px -20px 0;
border-top: 1px solid var(--border-color, var(--kammii-border, #2a2a2a));
}
.kg-confirm-actions > * + * {
border-left: 1px solid var(--border-color, var(--kammii-border, #2a2a2a));
}
.kg-confirm-btn {
flex: 1 1 0;
min-height: 44px;
padding: 12px 14px;
background: transparent; border: 0;
font: inherit; font-size: 0.9375rem; font-weight: 400;
color: var(--accent, var(--kammii-accent, #ffffff));
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s ease;
}
.kg-confirm-actions > .kg-confirm-btn:first-child {
border-bottom-left-radius: var(--kammii-radius-lg, 18px);
}
.kg-confirm-actions > .kg-confirm-btn:last-child {
border-bottom-right-radius: var(--kammii-radius-lg, 18px);
}
.kg-confirm-actions.kg-confirm-stacked > .kg-confirm-btn:first-child {
border-bottom-left-radius: 0;
}
.kg-confirm-actions.kg-confirm-stacked > .kg-confirm-btn:last-child {
border-bottom-left-radius: var(--kammii-radius-lg, 18px);
border-bottom-right-radius: var(--kammii-radius-lg, 18px);
}
.kg-confirm-btn:active { background: var(--kammii-bg-hover, rgba(255, 255, 255, 0.16)); }
.kg-confirm-btn:focus-visible {
outline: 1px solid rgba(237,237,237,0.6);
outline-offset: -3px;
}
.kg-confirm-btn.kg-confirm-cancel { font-weight: 650; }
.kg-confirm-btn.kg-confirm-danger { color: var(--kammii-danger, #ff453a); }
.kg-confirm-btn.kg-confirm-danger:focus-visible { outline-color: var(--kammii-danger, #ff453a); }
.kg-confirm-actions.kg-confirm-single .kg-confirm-btn { font-weight: 650; }
.kg-confirm-actions.kg-confirm-stacked { flex-direction: column; }
.kg-confirm-actions.kg-confirm-stacked > * + * {
border-left: 0;
border-top: 1px solid var(--border-color, var(--kammii-border, #2a2a2a));
}
@media (prefers-reduced-motion: reduce) {
.kg-confirm-overlay, .kg-confirm-box, .kg-confirm-box > * { transition: none; }
.kg-confirm-box,
.kg-confirm-overlay.kg-confirm-closing .kg-confirm-box { transform: none; }
.kg-confirm-box > * { opacity: 1; transform: none; }
}
@media (prefers-contrast: more) {
.kg-confirm-box { border-color: currentColor; }
}
.kg-confirm-inline {
--kg-ci-spring: linear(0.0000, 0.0187 2.5%, 0.0684 5.0%, 0.1405 7.5%, 0.2275 10.0%, 0.3229 12.5%, 0.4215 15.0%, 0.5190 17.5%, 0.6122 20.0%, 0.6986 22.5%, 0.7768 25.0%, 0.8456 27.5%, 0.9048 30.0%, 0.9543 32.5%, 0.9945 35.0%, 1.0260 37.5%, 1.0496 40.0%, 1.0662 42.5%, 1.0767 45.0%, 1.0822 47.5%, 1.0835 50.0%, 1.0815 52.5%, 1.0771 55.0%, 1.0708 57.5%, 1.0634 60.0%, 1.0554 62.5%, 1.0472 65.0%, 1.0391 67.5%, 1.0313 70.0%, 1.0242 72.5%, 1.0178 75.0%, 1.0122 77.5%, 1.0073 80.0%, 1.0033 82.5%, 1.0001 85.0%, 0.9975 87.5%, 0.9956 90.0%, 0.9943 92.5%, 0.9935 95.0%, 0.9931 97.5%, 1.0000);
position: fixed; left: 0; top: 0; z-index: 100001;
display: inline-flex; align-items: center; gap: 6px;
box-sizing: border-box; height: 36px; padding: 0 3px 0 14px; margin: 0;
border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(20, 20, 20, 0.92);
-webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 10px 34px rgba(0, 0, 0, 0.4);
color: var(--text-primary, var(--kammii-text-primary, #ededed));
font-size: 13px; line-height: 1.2; white-space: nowrap; text-align: left;
transition: clip-path 0.44s var(--kg-ci-spring);
}
.kg-confirm-inline.kg-ci-closing { transition: clip-path 0.2s cubic-bezier(0.4, 0, 1, 1), opacity 0.2s ease-in; opacity: 0; }
.kg-confirm-inline-q { color: rgba(237, 237, 237, 0.6); margin-right: 4px; }
.kg-confirm-inline-sr {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.kg-confirm-ib {
position: relative; display: inline-flex; align-items: center; justify-content: center;
box-sizing: border-box; height: 28px; padding: 0 12px; margin: 0; border: 0; border-radius: 999px;
font: inherit; font-size: 13px; font-weight: 650; line-height: 1.2; white-space: nowrap;
cursor: pointer; -webkit-tap-highlight-color: transparent; appearance: none; -webkit-appearance: none;
box-shadow: inset -1px 1px 0 0 rgba(255, 255, 255, 0.10), inset 1px -1px 0 0 rgba(255, 255, 255, 0.10);
transition: transform var(--kg-press-out, 100ms cubic-bezier(0.4, 0, 0.6, 1));
}
.kg-confirm-ib-cancel { background: rgba(237, 237, 237, 0.04); color: var(--text-primary, var(--kammii-text-primary, #ededed)); }
.kg-confirm-ib-danger { background: rgba(255, 69, 58, 0.15); color: var(--kammii-danger, #ff453a); }
.kg-confirm-ib:active { transform: scale(0.94); transition: transform var(--kg-press-in, 100ms cubic-bezier(0.4, 0, 0.6, 1)); }
.kg-confirm-ib:focus { outline: none; }
.kg-confirm-ib:focus-visible { outline: 1px solid rgba(237, 237, 237, 0.6); outline-offset: 2px; }
@media (pointer: coarse) {
.kg-confirm-ib::after { content: ""; position: absolute; top: 50%; left: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); border-radius: inherit; }
}
.kg-confirm-inline:not(.kg-ci-open) > * { opacity: 0; }
.kg-confirm-inline.kg-ci-open > * { animation: kgCiIn 380ms cubic-bezier(0.34, 1.4, 0.64, 1) backwards; }
.kg-confirm-inline.kg-ci-open > :nth-child(2) { animation-delay: 40ms; }
.kg-confirm-inline.kg-ci-open > :nth-child(3) { animation-delay: 80ms; }
.kg-confirm-inline.kg-ci-closing > * { opacity: 0; transition: opacity 0.1s ease-in; }
@keyframes kgCiIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.kg-confirm-inline, .kg-confirm-inline > *, .kg-confirm-ib { transition: none !important; animation: none !important; }
.kg-confirm-ib:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
.kg-confirm-inline { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(20, 20, 20, 0.98); }
}
:root {
--kg-spring: linear(0.0000, 0.0198 2.5%, 0.0698 5.0%, 0.1386 7.5%, 0.2176 10.0%, 0.3007 12.5%, 0.3835 15.0%, 0.4629 17.5%, 0.5372 20.0%, 0.6051 22.5%, 0.6662 25.0%, 0.7203 27.5%, 0.7677 30.0%, 0.8086 32.5%, 0.8438 35.0%, 0.8735 37.5%, 0.8986 40.0%, 0.9195 42.5%, 0.9367 45.0%, 0.9509 47.5%, 0.9623 50.0%, 0.9716 52.5%, 0.9789 55.0%, 0.9848 57.5%, 0.9893 60.0%, 0.9928 62.5%, 0.9954 65.0%, 0.9974 67.5%, 0.9989 70.0%, 0.9999 72.5%, 1.0006 75.0%, 1.0011 77.5%, 1.0013 80.0%, 1.0015 82.5%, 1.0015 85.0%, 1.0015 87.5%, 1.0014 90.0%, 1.0013 92.5%, 1.0012 95.0%, 1.0011 97.5%, 1.0000);
--kg-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
.kg-src { width: 100%; margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.075); }
.kg-src-toggle {
display: flex; align-items: center; gap: 8px;
padding: 3px 0; border: 0; background: none; cursor: pointer;
font: inherit; font-size: 13px; line-height: 18px;
color: var(--text-secondary, #9a9a9a);
transition: color 0.15s ease;
-webkit-tap-highlight-color: transparent;
}
.kg-src-toggle:hover { color: var(--text-primary, #ededed); }
.kg-src-toggle:focus-visible { outline: none; color: var(--text-primary, #ededed); }
.kg-src-stack { display: flex; align-items: center; }
.kg-src-slot { position: relative; display: block; transition: margin-left 0.25s var(--kg-spring); }
.kg-src-slot + .kg-src-slot { margin-left: -8px; }
.kg-src-toggle:hover .kg-src-slot + .kg-src-slot,
.kg-src-toggle:focus-visible .kg-src-slot + .kg-src-slot { margin-left: 3px; }
.kg-src-fav {
display: flex; align-items: center; justify-content: center;
width: 18px; height: 18px; overflow: hidden;
border-radius: 9999px;
border: 1px solid var(--border-color, rgba(255,255,255,0.12));
background: var(--bg-secondary, #141414);
color: var(--text-secondary, #9a9a9a);
font-size: 9px; font-weight: 600; line-height: 1;
}
.kg-src-fav img { width: 100%; height: 100%; object-fit: cover; }
.kg-src-fav svg { width: 60%; height: 60%; }
.kg-src-more { font-variant-numeric: tabular-nums; }
.kg-src-chev { display: flex; width: 14px; height: 14px; align-items: center; justify-content: center; transition: transform 0.25s var(--kg-spring); }
.kg-src-chev svg { width: 100%; height: 100%; }
.kg-src[data-open="true"] .kg-src-chev { transform: rotate(90deg); }
.kg-src[data-open="true"] .kg-src-stack,
.kg-src[data-open="true"] .kg-src-more { display: none; }
.kg-src-list {
margin: 2px 0 0; padding: 0; list-style: none;
height: 0; opacity: 0; overflow: hidden;
transition: height 0.25s var(--kg-spring), opacity 0.18s var(--kg-ease-out);
}
.kg-src-row a {
display: flex; align-items: flex-start; gap: 9px;
padding: 6px 6px 6px 4px; border-radius: 9px;
text-decoration: none;
transition: background-color 0.15s ease;
}
.kg-src-row a:hover, .kg-src-row a:focus-visible { background: rgba(255,255,255,0.06); outline: none; }
.kg-src-row .kg-src-fav { margin-top: 1px; flex: 0 0 auto; }
.kg-src-text { min-width: 0; }
.kg-src-title {
display: block; font-size: 13px; font-weight: 500; line-height: 18px;
color: var(--text-primary, #ededed);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kg-src-sub {
display: block; font-size: 11px; line-height: 16px;
color: var(--text-secondary, #9a9a9a);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@keyframes kgSrcRowIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
.kg-src[data-open="true"] .kg-src-row {
animation: kgSrcRowIn 0.25s var(--kg-spring) backwards;
animation-delay: calc(35ms * var(--kg-row-i, 0));
}
.kg-src-morph { transition: transform 0.25s var(--kg-spring); }
.kg-cite { position: relative; display: inline-block; vertical-align: super; line-height: 0; }
.kg-cite-pill {
display: inline-flex; align-items: center; justify-content: center;
height: 15px; min-width: 15px; padding: 0 4px;
border-radius: 9999px;
border: 1px solid var(--border-color, rgba(255,255,255,0.12));
background: var(--bg-tertiary, rgba(255,255,255,0.06));
font-size: 9px; font-weight: 600; line-height: 13px;
font-variant-numeric: tabular-nums;
color: var(--text-secondary, #9a9a9a); text-decoration: none;
transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.kg-cite-pill:hover, .kg-cite-pill:focus-visible {
border-color: rgba(255,255,255,0.32);
color: var(--text-primary, #ededed);
outline: none;
}
.kg-cite-card {
position: absolute; bottom: 100%; left: 50%; z-index: 60;
margin-bottom: 7px; width: 288px; max-width: 76vw; padding: 11px 12px;
border-radius: 12px;
border: 1px solid var(--border-color, rgba(255,255,255,0.12));
background: var(--bg-secondary, #141414);
box-shadow: 0 12px 34px rgba(0,0,0,0.45);
text-align: left; line-height: normal;
transform-origin: bottom center;
transform: translateX(-50%) translateY(4px) scale(0.94);
opacity: 0; pointer-events: none;
transition: opacity 0.25s var(--kg-spring), transform 0.25s var(--kg-spring);
}
.kg-cite[data-open="true"] .kg-cite-card {
opacity: 1; pointer-events: auto;
transform: translateX(-50%) translateY(0) scale(1);
}
.kg-cite-head { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.kg-cite-host { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--text-secondary, #9a9a9a); }
.kg-cite-arrow { margin-left: auto; display: flex; width: 12px; height: 12px; color: var(--text-secondary, #9a9a9a); }
.kg-cite-arrow svg { width: 100%; height: 100%; }
.kg-cite-title { display: block; font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--text-primary, #ededed); }
.kg-cite-desc {
display: block; margin-top: 4px; font-size: 11px; line-height: 1.5;
color: var(--text-secondary, #9a9a9a);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kg-cite.kg-cite-chip { display: inline; vertical-align: baseline; line-height: inherit; margin: 0 2px; }
.kg-cite-btn {
position: relative; display: inline-flex; align-items: center; gap: 4px;
height: 24px; max-width: 100%; padding: 0 8px 0 4px; box-sizing: border-box;
margin: -4px 0; vertical-align: middle;
border-radius: 9999px; border: 1px solid var(--border-color, rgba(255,255,255,0.12));
background: var(--bg-tertiary, rgba(255,255,255,0.06));
color: var(--text-secondary, #9a9a9a);
font: inherit; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0;
cursor: pointer; white-space: nowrap;
-webkit-tap-highlight-color: transparent;
transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.kg-cite-btn::after { content: ''; position: absolute; inset: -10px -4px; }
.kg-cite-btn .kg-src-fav { width: 16px; height: 16px; border: 0; background: transparent; flex: 0 0 auto; }
.kg-cite-label { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; }
.kg-cite-more { font-variant-numeric: tabular-nums; }
.kg-cite-btn:hover, .kg-cite-btn:focus-visible, .kg-cite[data-open="true"] .kg-cite-btn {
border-color: rgba(255,255,255,0.32); color: var(--text-primary, #ededed); outline: none;
}
.kg-cite-sheet {
position: fixed; z-index: 10050; box-sizing: border-box; padding: 4px;
border-radius: 16px; border: 1px solid var(--border-color, rgba(255,255,255,0.12));
background: var(--bg-secondary, #121212); box-shadow: 0 12px 32px rgba(0,0,0,0.45);
text-align: left; line-height: normal; font-size: 14px;
max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain;
opacity: 0; pointer-events: none; transform: scale(0.96) translateY(4px);
transform-origin: var(--kg-cite-ox, 50%) var(--kg-cite-oy, 100%);
visibility: hidden;
transition: opacity 0.2s var(--kg-ease-out), transform 0.25s var(--kg-spring), visibility 0s linear 0.25s;
}
.kg-cite[data-open="true"] .kg-cite-sheet { opacity: 1; pointer-events: auto; transform: none; visibility: visible; transition-delay: 0s; }
.kg-cite-row { position: relative; display: block; padding: 8px 12px; border-radius: 12px; color: inherit; text-decoration: none; }
.kg-cite-row + .kg-cite-row::before { content: ''; position: absolute; left: 12px; right: 12px; top: -1px; height: 1px; background: rgba(255,255,255,0.075); }
.kg-cite-row:hover, .kg-cite-row:focus-visible { background: rgba(255,255,255,0.06); outline: none; }
.kg-cite-row .kg-cite-head { margin-bottom: 4px; }
.kg-cite-row .kg-src-fav { width: 16px; height: 16px; border: 0; background: transparent; }
.kg-cite-rtitle {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--text-primary, #ededed);
}
.kg-cite-date { display: block; margin-top: 4px; font-size: 12px; color: var(--text-secondary, #9a9a9a); }
@keyframes kgWordIn {
from { filter: blur(4px); opacity: 0; transform: translateY(2px); }
to { filter: blur(0px); opacity: 1; transform: none; }
}
.kg-word { display: inline-block; animation: kgWordIn 0.22s var(--kg-ease-out) both; }
@media (prefers-reduced-motion: reduce) {
.kg-src-slot, .kg-src-chev, .kg-src-list, .kg-src-morph, .kg-cite-card, .kg-cite-sheet { transition: none; }
.kg-src[data-open="true"] .kg-src-row, .kg-word { animation: none; }
.kg-word { filter: none; opacity: 1; transform: none; }
}
.kg-pic {
position: relative; display: block; flex: 0 0 auto; box-sizing: border-box;
width: 96px; height: 76px; border-radius: 14px; overflow: hidden;
background: var(--bg-tertiary, rgba(255,255,255,0.06));
-webkit-tap-highlight-color: transparent;
}
@supports (corner-shape: squircle) { .kg-pic { corner-shape: squircle; border-radius: 22px; } }
.kg-pic img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
opacity: 0; transition: opacity 0.25s var(--kg-ease-out);
}
.kg-pic[data-state="ready"] img { opacity: 1; }
.kg-pic::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); pointer-events: none; }
.kg-pic[data-state="failed"] { display: none; }
.kg-pic.kg-pic-wide { width: 100%; max-width: 420px; height: auto; aspect-ratio: 16 / 10; margin: 8px 0; }
@media (prefers-reduced-motion: reduce) { .kg-pic img { transition: none; } }
@keyframes loading-ui-swirling-spin {
to { transform: rotate(360deg); }
}
@keyframes loading-ui-swirling-dash {
0% { stroke-dasharray: 1, 800; stroke-dashoffset: 0; }
50% { stroke-dasharray: 400, 400; stroke-dashoffset: -200px; }
100% { stroke-dasharray: 800, 1; stroke-dashoffset: -800px; }
}
.loading-ui-swirling-circle {
transform-origin: center;
stroke-width: var(--kg-swirl-stroke, 36);
animation:
loading-ui-swirling-dash var(--duration, 1.5s) ease-in-out infinite alternate,
loading-ui-swirling-spin calc(var(--duration, 1.5s) * 1.333333) linear infinite;
}
.kg-swirl {
position: relative;
border: 0 !important;
border-radius: 0 !important;
background: none !important;
animation: none !important;
overflow: visible;
display: inline-block;
}
.kg-swirl > .kg-swirl-svg {
position: absolute;
inset: -41.74%;
width: auto; height: auto;
color: inherit;
pointer-events: none;
}
.kg-swirl[data-kg-swirl-paused="1"] > .kg-swirl-svg .loading-ui-swirling-circle,
.ag-img-pending.waiting .kg-swirl > .kg-swirl-svg .loading-ui-swirling-circle {
animation-play-state: paused;
}
.spinner.kg-swirl,
.floating-progress-spinner.kg-swirl,
.ag-img-pending .ag-img-spin.kg-swirl,
.k-mini-chatrow-spin.kg-swirl,
.ag-chat-drawer-spin.kg-swirl,
.km-step-spin.kg-swirl,
.ag-chat-transcribing-spinner.kg-swirl,
.loading-spinner.kg-swirl,
.feed-spinner.kg-swirl,
.stats-loading-spinner.kg-swirl { color: var(--kg-swirl-color, var(--text-secondary, #8e8e93)); }
[data-theme="light"] .spinner.kg-swirl,
[data-theme="light"] .floating-progress-spinner.kg-swirl,
[data-theme="light"] .ag-img-pending .ag-img-spin.kg-swirl,
[data-theme="light"] .k-mini-chatrow-spin.kg-swirl,
[data-theme="light"] .ag-chat-drawer-spin.kg-swirl,
[data-theme="light"] .km-step-spin.kg-swirl,
[data-theme="light"] .loading-spinner.kg-swirl,
[data-theme="light"] .feed-spinner.kg-swirl,
[data-theme="light"] .stats-loading-spinner.kg-swirl { color: var(--kg-swirl-color, var(--text-secondary, #6e6e73)); }
.kg-swirl-inline {
display: inline-block; vertical-align: -0.15em;
width: 1.25em; height: 1.25em; color: currentColor;
}
@media (prefers-reduced-motion: reduce) {
.loading-ui-swirling-circle {
animation: loading-ui-swirling-spin 2.4s linear infinite;
stroke-dasharray: 400, 400;
}
}
:root {
--kg-bi-dur: 0.9s;
--kg-bi-stagger: 25ms;
--kg-bi-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes kgBlurIn {
from {
opacity: 0;
filter: blur(var(--kg-bi-blur, 5px));
transform: translateY(var(--kg-bi-rise, 5px));
}
to {
opacity: 1;
filter: blur(0px);
transform: translateY(0);
}
}
.kg-bi-w { white-space: nowrap; }
button .kg-bi-u, button .kg-bi-w,
[role="button"] .kg-bi-u, [role="button"] .kg-bi-w,
label .kg-bi-u, label .kg-bi-w { pointer-events: none; }
.kg-bi-run .kg-bi-u {
display: inline-block;
white-space: pre;
animation: kgBlurIn var(--kg-bi-dur) var(--kg-bi-ease) backwards;
animation-delay: calc(var(--kg-bi-i, 0) * var(--kg-bi-stagger));
}
.kg-bi-hero {
--kg-bi-blur: 12px;
--kg-bi-rise: 16px;
}
.kg-bi-dots > i {
font-style: normal;
display: inline-block;
opacity: 1;
transform: none;
transform-origin: 50% 80%;
animation: kgBiDotA 1.7s infinite backwards;
}
.kg-bi-dots > i:nth-child(2) { animation-name: kgBiDotB; }
.kg-bi-dots > i:nth-child(3) { animation-name: kgBiDotC; }
@keyframes kgBiDotA {
0%      { opacity: 0; transform: scale(0.45);
animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
9.41%   { opacity: 1; transform: scale(1);
animation-timing-function: linear; }
74.12%  { opacity: 1; transform: scale(1);
animation-timing-function: cubic-bezier(0.4, 0, 0.7, 1); }
83.53%  { opacity: 0; transform: scale(0.45); }
100%    { opacity: 0; transform: scale(0.45); }
}
@keyframes kgBiDotB {
0%      { opacity: 0; transform: scale(0.45); }
10.59%  { opacity: 0; transform: scale(0.45);
animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
20%     { opacity: 1; transform: scale(1);
animation-timing-function: linear; }
63.53%  { opacity: 1; transform: scale(1);
animation-timing-function: cubic-bezier(0.4, 0, 0.7, 1); }
72.94%  { opacity: 0; transform: scale(0.45); }
100%    { opacity: 0; transform: scale(0.45); }
}
@keyframes kgBiDotC {
0%      { opacity: 0; transform: scale(0.45); }
21.18%  { opacity: 0; transform: scale(0.45);
animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
30.59%  { opacity: 1; transform: scale(1);
animation-timing-function: linear; }
52.94%  { opacity: 1; transform: scale(1);
animation-timing-function: cubic-bezier(0.4, 0, 0.7, 1); }
62.35%  { opacity: 0; transform: scale(0.45); }
100%    { opacity: 0; transform: scale(0.45); }
}
button .kg-bi-dots,
[role="button"] .kg-bi-dots,
label .kg-bi-dots { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
.kg-bi-run .kg-bi-u {
animation: none;
opacity: 1;
filter: none;
transform: none;
}
.kg-bi-dots > i {
animation: none;
opacity: 1;
transform: none;
}
}
.kg-reveal-host { position: relative; }
.kg-reveal-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
pointer-events: none;
border-radius: inherit;
z-index: 2;
}
.kg-reveal-hidden { opacity: 0 !important; }
@keyframes kgRevealFade { from { opacity: 0; } to { opacity: 1; } }
.kg-reveal-fade { animation: kgRevealFade 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; }
@media (prefers-reduced-motion: reduce) {
.kg-reveal-fade { animation-duration: 0.01s; }
}
.kg-dots {
position: relative;
display: inline-block;
background: none !important;
border-color: transparent !important;
box-shadow: none !important;
}
.kg-dots::before, .kg-dots::after { display: none !important; }
.kg-dots > .kg-dots-canvas {
background: transparent !important;
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
pointer-events: none;
}
.kg-dots > .kg-swirl-svg { display: none; }
[data-theme="light"] .kg-dots > .kg-dots-canvas { filter: invert(1); }
.kg-dots[data-kg-dots-done="1"] { opacity: 0; transition: opacity 90ms linear; }
@media (prefers-reduced-motion: reduce) {
.kg-dots[data-kg-dots-done="1"] { transition: none; }
.kg-dots-bar-fill,
.progress-bar-wrap > .progress-bar-fill,
.step-progress-container > .step-progress-fill { animation: none; }
}
:root {
--kg-dots-ink: rgb(251, 252, 251);
--kg-dots-glow: rgba(251, 252, 251, 0.34);
}
:root {
--kg-dots-bloom:
0 0 2px rgba(251, 252, 251, 0.86),
0 0 7px rgba(251, 252, 251, 0.32),
0 0 18px rgba(251, 252, 251, 0.11),
0 0 38px rgba(251, 252, 251, 0.04);
}
[data-theme="light"] {
--kg-dots-bloom:
0 0 2px rgba(28, 28, 30, 0.42),
0 0 7px rgba(28, 28, 30, 0.18),
0 0 18px rgba(28, 28, 30, 0.07);
}
@keyframes kgDotsBarBreathe {
0%   { transform: scaleY(1); }
17%  { transform: scaleY(1.34); }
33%  { transform: scaleY(0.92); }
50%  { transform: scaleY(1.18); }
67%  { transform: scaleY(0.97); }
84%  { transform: scaleY(1.06); }
100% { transform: scaleY(1); }
}
.kg-dots-bar-fill.kg-bar-live,
.progress-bar-wrap > .progress-bar-fill.kg-bar-live,
.step-progress-container > .step-progress-fill.kg-bar-live { animation: none; }
.kg-dots-bar > .kg-dots-bar-fill.kg-bar-live,
.progress-bar-wrap > .progress-bar-fill.kg-bar-live,
.step-progress-container > .step-progress-fill.kg-bar-live { transition: none; }
.kg-dots-bar { background: rgba(255, 255, 255, 0.10); }
.kg-dots-bar > .kg-dots-bar-fill,
.kg-dots-bar-fill {
background: var(--kg-dots-ink);
box-shadow: var(--kg-dots-bloom);
transform-origin: center;
will-change: transform;
animation: kgDotsBarBreathe 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.progress-bar-wrap > .progress-bar-fill,
.step-progress-container > .step-progress-fill {
background: var(--kg-dots-ink);
box-shadow: var(--kg-dots-bloom);
transform-origin: center;
will-change: transform;
animation: kgDotsBarBreathe 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.progress-bar-wrap, .step-progress-container,
.kg-dots-bar { overflow-x: clip; overflow-y: visible; }
[data-theme="light"] {
--kg-dots-ink: rgb(28, 28, 30);
--kg-dots-glow: rgba(28, 28, 30, 0.22);
}