.sl-stage{display:grid;gap:.4rem;justify-items:start;padding:1.25rem 1rem;background:color-mix(in srgb,var(--fg) 4%,transparent)}
.sl-label{color:var(--muted)}
.demo .sl-select{min-width:min(100%,220px);min-height:2.5rem;padding:.35rem .6rem}
.sl-key{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin:0 0 .9rem;padding:0;list-style:none;color:var(--muted)}
.sl-key[hidden]{display:none}
.sl-key li{display:flex;align-items:center;gap:.4rem;margin:0}
.sl-key i{display:inline-block;width:18px;height:12px;border-radius:2px}
.sl-key code{font-size:.95em}
.sl-k-picker{outline:2px solid var(--redline);outline-offset:-2px}
.sl-k-button{border:1.5px dashed var(--fg)}
.sl-k-content{border:1.5px dotted var(--muted)}
.sl-k-check{background:color-mix(in srgb,var(--redline) 30%,transparent)}
.sl-k-icon{border:1.5px solid var(--redline);width:12px!important}

.sl-kb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:1.25rem;align-items:start}
.sl-kb-try{display:grid;gap:.4rem;justify-items:start}
.sl-free{margin:.6rem 0 0;color:var(--muted)}
.sl-checks{display:grid;gap:.35rem;margin:0;padding:0;list-style:none}
.sl-checks li{display:flex;gap:.6rem;align-items:flex-start;margin:0;padding:.4rem .5rem;border:1px solid var(--rule);transition:border-color 160ms ease-out}
.sl-checks small{display:block;color:var(--muted)}
.sl-box{flex:none;position:relative;width:16px;height:16px;margin-top:.1rem;border:1px solid var(--muted)}
.sl-checks li.is-done{border-color:var(--fg)}
.sl-checks li.is-done .sl-box{border-color:var(--redline);background:var(--redline)}
.sl-checks li.is-done .sl-box::after{content:"";position:absolute;left:4.5px;top:1px;width:4px;height:9px;border:solid var(--bg);border-width:0 2px 2px 0;transform:rotate(45deg)}
.sl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sl-reset{margin:.9rem 0 0}
@media (max-width:560px){.sl-kb{grid-template-columns:minmax(0,1fr)}}

/* The swatches only exist where the browser keeps rich option content. */
.sl-sw{display:none}

@supports (appearance: base-select){
  .demo .sl-select,.demo .sl-select::picker(select){appearance:base-select}
  .demo .sl-select{display:flex;align-items:center;gap:.5rem;padding:.35rem .6rem;border:1px solid var(--rule);border-radius:8px;background:var(--bg);color:var(--fg);cursor:pointer;transition:border-color 120ms ease-out}
  .demo .sl-select:open{border-color:var(--fg)}
  .sl-select > button{display:flex;align-items:center;flex:1;min-width:0;padding:0;border:0;background:none;color:inherit;font:inherit}
  .sl-select selectedcontent{display:flex;align-items:center;gap:.55rem}
  .sl-select::picker-icon{content:"";width:12px;height:12px;margin-inline-start:auto;background:var(--muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;transition:rotate 160ms ease-out}
  .sl-select:open::picker-icon{rotate:180deg}
  .sl-sw{display:inline-block;flex:none;width:14px;height:14px;border-radius:4px;background:var(--c);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 15%,transparent)}
  .sl-select::picker(select){margin-block:6px;padding:4px;border:1px solid var(--rule);border-radius:10px;background:var(--bg);color:var(--fg);box-shadow:0 12px 32px -12px rgba(0,0,0,.3);opacity:1;transition:opacity 140ms ease-out,translate 140ms ease-out,display 140ms allow-discrete,overlay 140ms allow-discrete}
  @starting-style{.sl-select:open::picker(select){opacity:0;translate:0 -4px}}
  .sl-select option{display:flex;align-items:center;gap:.55rem;min-height:2.25rem;padding:0 .55rem;border-radius:6px;font-size:.875rem}
  .sl-select option:focus-visible{outline:none;background:color-mix(in srgb,var(--fg) 9%,transparent)}
  @media (hover:hover) and (pointer:fine){.sl-select option:hover{background:color-mix(in srgb,var(--fg) 6%,transparent)}}
  .sl-select option::checkmark{order:1;margin-inline-start:auto;content:"\2713";color:var(--redline);font-size:.8rem;line-height:1}
  .sl-select option:not(:checked)::checkmark{visibility:hidden}

  /* Show the parts: each outline is plain CSS on one real part. */
  .sl-show .sl-select::picker(select){outline:2px solid var(--redline);outline-offset:3px}
  .sl-show .sl-select > button{outline:1.5px dashed var(--fg);outline-offset:3px}
  .sl-show .sl-select selectedcontent{outline:1.5px dotted var(--muted);outline-offset:1px}
  .sl-show .sl-select option::checkmark{outline:5px solid color-mix(in srgb,var(--redline) 30%,transparent)}
  .sl-show .sl-select::picker-icon{outline:1.5px solid var(--redline);outline-offset:4px;border-radius:1px}
}
@media (prefers-reduced-motion:reduce){.sl-select::picker(select),.sl-select::picker-icon{transition:none!important}}