html,
body {
    height: 100%;
    margin: 0;
}

body {
    font-family: system-ui;
    font-size: 15pt;
    padding: 3rem;
    box-sizing: border-box;
    background: linear-gradient(135deg, #E65758 0%, #771D32 100%);
    background-blend-mode: normal;
}

select,
::picker(select) {
    appearance: base-select;
}

select::picker-icon {
    display: none;
}

select,
option span {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    border: 0;
}

select {
    anchor-name: --my-picker;
    background: linear-gradient(
        135deg,
        rgba(40, 40, 50, 0.4) 0%,
        rgba(60, 60, 70, 0.25) 50%,
        rgba(50, 50, 60, 0.35) 100%
    );
    backdrop-filter: blur(12px) saturate(1.8);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2),
        inset 0 1px 1px rgba(225, 225, 225, 0.15),
        inset 0 -1px 1px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgb(225, 225, 225);
    min-inline-size: 12rem;
}

select::before {
    content: "📂";
}

::picker(select) {
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
    position: absolute;
    position-anchor: --my-picker;
    top: anchor(bottom);
    left: anchor(left);
}

option {
    --stagger-delay: 0.01s;
    --rotation-offset: 4deg;
    transform-origin: right calc(sibling-index() * -1.5rem);
    rotate: 0deg;
    opacity: 0;
    transition: opacity 0.3s ease-out,
        rotate 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: calc((sibling-index() - 1) * var(--stagger-delay));
}

@media (prefers-reduced-motion: reduce) {
    option {
        transition: none;
    }
}

select:open option {
    opacity: 1;
    /* Fixed missing double-dash here */
    rotate: calc(sibling-index() * -1 * var(--rotation-offset));
}

@starting-style {
    select:open option {
        opacity: 0;
        rotate: 0deg;
    }
}

option span {
    align-self: center;
    color: white;
}

option::before {
  content: "📁";
  display: block;
  font-size: 2.5rem;
  align-self: center;
  filter: drop-shadow(0 0 1rem rgba(0, 0, 0, 0.3));
}

option:checked::before {
    content: "📁";
}

option:hover {
    background: none;
}

option:hover span {
    background: rgba(245, 245, 245, 0.25);
    color: #fff;
}

option::checkmark {
    content: "☆";
    color: whitesmoke;
}

option:focus-visible {
    outline: none;
}

option:focus-visible span {
    outline: 2px solid whitesmoke;
    outline-offset: 2px;
}