.dd{position:relative;width:100%}
.dd > select{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
.dd-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;font:inherit;cursor:pointer;background:var(--paper,#f5efe4);color:inherit;border:1px solid var(--line,rgba(38,32,29,.16));border-radius:10px;padding:.7rem .8rem}
.dd-toggle:focus-visible{outline:2px solid var(--berry,#9d2b50);outline-offset:1px}
.dd-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-caret{flex:none;width:.62em;height:.62em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.55;transition:transform .15s}
.dd.open .dd-caret{transform:rotate(-135deg) translateY(0)}
.dd-list{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 6px);margin:0;padding:6px;list-style:none;max-height:320px;overflow:auto;background:var(--card,#fffdf8);border:1px solid var(--line,rgba(38,32,29,.16));border-radius:12px;box-shadow:var(--shadow,0 18px 50px -28px rgba(54,30,24,.45))}
.dd-list:focus{outline:none}
.dd-option{padding:.55rem .6rem;border-radius:8px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-option:hover{background:var(--paper,#f5efe4)}
.dd-option.active{background:var(--paper,#f5efe4);box-shadow:inset 0 0 0 1px var(--line,rgba(38,32,29,.16))}
.dd-option[aria-selected="true"]{background:color-mix(in srgb,var(--berry,#9d2b50) 12%,transparent);color:var(--berry-deep,#7c1f3e);font-weight:700}
.dd-option[aria-selected="true"]::after{content:"\2713";float:right;margin-left:10px;opacity:.8}