.avd-ki {
--avd-ki-accent: #156eff;
--avd-ki-radius: 16px;
--avd-ki-border: #e2e5ea;
--avd-ki-text: #16181d;
--avd-ki-muted: #6b7280;
--avd-ki-bg: #fff;
position: relative;
display: flex;
margin: 1.5em 0;
font-family: inherit;
line-height: 1.4;
}
.avd-ki--align-center { justify-content: center; }
.avd-ki--align-right  { justify-content: flex-end; } .avd-ki__trigger {
display: inline-flex;
align-items: center;
gap: .55em;
margin: 0;
padding: .62em 1em;
border: 1px solid var(--avd-ki-border);
border-radius: var(--avd-ki-radius);
background: var(--avd-ki-bg);
color: var(--avd-ki-text);
font: inherit;
font-size: .875rem;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
transition: border-color .15s, box-shadow .15s, background .15s, color .15s;
-webkit-appearance: none;
appearance: none;
} .avd-ki__trigger:hover,
.avd-ki__trigger:focus-visible,
.avd-ki__trigger[aria-expanded="true"] {
border-color: var(--avd-ki-accent);
background: var(--avd-ki-accent);
color: #fff;
box-shadow: 0 2px 10px rgba(16, 24, 40, .09);
}
.avd-ki__trigger:hover .avd-ki__spark,
.avd-ki__trigger:focus-visible .avd-ki__spark,
.avd-ki__trigger[aria-expanded="true"] .avd-ki__spark {
color: #fff;
}
.avd-ki__trigger:focus-visible {
outline: 2px solid var(--avd-ki-accent);
outline-offset: 2px;
}
.avd-ki__spark {
display: inline-flex;
color: var(--avd-ki-accent);
transition: color .15s;
}
.avd-ki__spark svg { width: 1.15em; height: 1.15em; }
.avd-ki__caret svg {
width: .85em;
height: .85em;
transition: transform .18s ease;
}
.avd-ki__trigger[aria-expanded="true"] .avd-ki__caret svg { transform: rotate(180deg); } .avd-ki--bar { display: block; }
.avd-ki--bar .avd-ki__trigger {
width: 100%;
justify-content: flex-start;
border-radius: var(--avd-ki-radius);
background: #f7f8fa;
}
.avd-ki--bar .avd-ki__trigger:hover,
.avd-ki--bar .avd-ki__trigger:focus-visible,
.avd-ki--bar .avd-ki__trigger[aria-expanded="true"] {
background: var(--avd-ki-accent);
}
.avd-ki--bar .avd-ki__caret { margin-left: auto; } .avd-ki__menu {
position: absolute;
z-index: 60;
top: calc(100% + 8px);
left: 0;
min-width: 268px;
padding: 8px;
border: 1px solid var(--avd-ki-border);
border-radius: var(--avd-ki-radius);
background: var(--avd-ki-bg);
box-shadow: 0 12px 32px rgba(16, 24, 40, .14);
}
.avd-ki--align-center .avd-ki__menu { left: 50%; transform: translateX(-50%); }
.avd-ki--align-right  .avd-ki__menu { left: auto; right: 0; }
.avd-ki__menu[hidden] { display: none; } .avd-ki .avd-ki__menu .avd-ki__hint,
.avd-ki .avd-ki__menu .avd-ki__note {
padding: 0;
font-family: inherit;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
} .avd-ki .avd-ki__menu .avd-ki__hint {
margin: 4px 8px 8px;
color: var(--avd-ki-text);
font-size: .8rem;
line-height: 1.45;
} .avd-ki .avd-ki__menu .avd-ki__note {
margin: 8px 8px 2px;
padding-top: 8px;
border-top: 1px solid var(--avd-ki-border);
color: var(--avd-ki-muted);
font-size: .625rem;
line-height: 1.4;
}
.avd-ki .avd-ki__menu .avd-ki__item {
display: flex;
align-items: center;
gap: .6em;
width: 100%;
padding: .5em .65em;
border: 0;
border-radius: calc(var(--avd-ki-radius) * .75);
background: none;
color: var(--avd-ki-text);
font-family: inherit;
font-size: .75rem;
font-weight: 500;
line-height: 1.35;
text-align: left;
text-decoration: none;
cursor: pointer;
box-shadow: none;
transition: background .12s, color .12s;
} .avd-ki .avd-ki__menu a.avd-ki__item,
.avd-ki .avd-ki__menu a.avd-ki__item:link,
.avd-ki .avd-ki__menu a.avd-ki__item:visited {
color: var(--avd-ki-text) !important;
background-image: none;
text-decoration: none;
box-shadow: none;
}
.avd-ki .avd-ki__menu a.avd-ki__item:hover,
.avd-ki .avd-ki__menu a.avd-ki__item:focus,
.avd-ki .avd-ki__menu a.avd-ki__item:focus-visible,
.avd-ki .avd-ki__menu a.avd-ki__item:active,
.avd-ki .avd-ki__menu button.avd-ki__item:hover,
.avd-ki .avd-ki__menu button.avd-ki__item:focus-visible {
background: var(--avd-ki-accent);
color: #fff !important;
text-decoration: none;
outline: none;
}
.avd-ki__icon {
display: inline-flex;
flex: 0 0 auto;
color: var(--avd-ki-muted);
transition: color .12s;
}
.avd-ki__icon svg { width: 1.15em; height: 1.15em; }
.avd-ki .avd-ki__menu .avd-ki__item:hover .avd-ki__icon,
.avd-ki .avd-ki__menu .avd-ki__item:focus-visible .avd-ki__icon,
.avd-ki .avd-ki__menu .avd-ki__item:hover .avd-ki__ext,
.avd-ki .avd-ki__menu .avd-ki__item:focus-visible .avd-ki__ext {
color: #fff;
}
.avd-ki__ext {
margin-left: auto;
color: #b6bcc6;
transition: color .12s;
}
.avd-ki__ext svg { width: .85em; height: .85em; }
.avd-ki__copy.is-done { color: #067647; }
.avd-ki__copy.is-done .avd-ki__icon { color: #067647; } @media (prefers-color-scheme: dark) {
.avd-ki {
--avd-ki-bg: #16181d;
--avd-ki-text: #eceef2;
--avd-ki-border: #2c3038;
--avd-ki-muted: #9aa2ae;
}
.avd-ki--bar .avd-ki__trigger { background: #1c1f26; }
}
@media print {
.avd-ki { display: none; }
}
@media (max-width: 480px) {
.avd-ki__menu {
left: 0;
right: 0;
min-width: 0;
transform: none;
}
.avd-ki--align-center .avd-ki__menu { transform: none; }
}