html.gate-on body > *:not(.gate) {
    filter: blur(var(--gate-blur, 0px));
    transition: filter 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
html.gate-on { --gate-blur: 12px; overflow: hidden; }
html.gate-leaving { --gate-blur: 0px; }

dialog.gate.gate {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
    border: 0;
    background: transparent;
    color: var(--text);
    font-family: var(--sans);
    display: grid;
    place-items: center;
    overflow: hidden;
    outline: none;
}
dialog.gate.gate::backdrop {
    background: color-mix(in oklch, var(--bg) 42%, transparent);
    opacity: 1;
    transition: opacity 0.5s ease;
}
dialog.gate.gate.leaving::backdrop { opacity: 0; }

.g-panel {
    position: relative;
    width: min(340px, 100%);
    background: var(--raised);
    border: 1px solid var(--line-2);
    border-radius: 18px;
    padding: 18px 8px 8px;
    box-shadow:
        0 1px 0 color-mix(in oklch, white 6%, transparent) inset,
        0 2px 6px oklch(0 0 0 / 0.06),
        0 24px 64px -12px oklch(0 0 0 / 0.28);
    transform-origin: 50% 60%;
}
.g-title {
    margin: 0 0 12px;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 560;
    letter-spacing: 0.02em;
    color: var(--text-3);
}
.g-list { position: relative; display: grid; gap: 2px; }
.g-hl {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: var(--hl-h, 52px);
    border-radius: 11px;
    background: var(--sel);
    transform: translateY(var(--hl-y, 0px));
    transition: transform 0.32s var(--spring, cubic-bezier(0.3, 1.3, 0.5, 1)), height 0.2s ease, background-color 0.2s ease;
    pointer-events: none;
}
.g-opt {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 14px;
    border: 0;
    border-radius: 11px;
    background: none;
    font: inherit;
    font-size: 1rem;
    font-weight: 540;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}
.g-opt:focus-visible { outline: 1.5px solid color-mix(in oklch, var(--accent) 60%, transparent); outline-offset: -1.5px; }
.g-code {
    width: 30px; height: 22px;
    display: grid; place-items: center;
    border-radius: 6px;
    font-family: var(--pixel, var(--mono));
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: var(--text-2);
    background: var(--cap, var(--bg));
    box-shadow: inset 0 -1.5px 0 var(--cap-edge, var(--line-2)), 0 0 0 1px var(--line);
}
.g-name { flex: 1; }
.g-key {
    font-family: var(--pixel, var(--mono));
    font-size: 0.6875rem;
    color: var(--text-3);
}
.g-check { width: 18px; height: 18px; color: #fff; opacity: 0; }
.g-check path { stroke-dasharray: 24; stroke-dashoffset: 24; }

.g-fill {
    position: absolute; inset: 0; z-index: -1;
    border-radius: inherit;
    background: var(--accent);
    clip-path: inset(0 100% 0 0 round 11px);
}
.g-opt.chosen { color: #fff; }
.g-opt.chosen .g-code { color: var(--accent); background: #fff; box-shadow: none; }
.g-opt.chosen .g-key { color: color-mix(in oklch, white 75%, transparent); }
.g-opt.chosen .g-fill { clip-path: inset(0 0 0 0 round 11px); transition: clip-path 0.34s cubic-bezier(0.22, 1, 0.36, 1); }
.g-opt.chosen .g-check { opacity: 1; transition: opacity 0.1s 0.2s; }
.g-opt.chosen .g-check path { stroke-dashoffset: 0; transition: stroke-dashoffset 0.26s 0.22s ease-out; }
.g-foot {
    margin: 10px 6px 2px;
    display: flex;
    justify-content: center;
    gap: 14px;
    font-family: var(--pixel, var(--mono));
    font-size: 0.625rem;
    color: var(--text-3);
}

@media (prefers-reduced-motion: no-preference) {
    
    dialog.gate.gate[open] .g-panel { animation: g-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 0.06s; }
    dialog.gate.gate[open] .g-title,
    dialog.gate.gate[open] .g-opt,
    dialog.gate.gate[open] .g-foot { animation: g-item 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; }
    dialog.gate.gate[open] .g-title { animation-delay: 0.18s; }
    dialog.gate.gate[open] .g-opt:nth-of-type(1) { animation-delay: 0.24s; }
    dialog.gate.gate[open] .g-opt:nth-of-type(2) { animation-delay: 0.3s; }
    dialog.gate.gate[open] .g-foot { animation-delay: 0.38s; }
    @keyframes g-rise {
        from { opacity: 0; transform: translateY(18px) scale(0.94); filter: blur(6px); }
    }
    @keyframes g-item {
        from { opacity: 0; transform: translateY(8px); }
    }
    
    dialog.gate.gate.leaving .g-panel { animation: g-leave 0.38s cubic-bezier(0.4, 0, 0.2, 1) both; }
    .g-opt.chosen { animation: g-press 0.28s cubic-bezier(0.3, 1.4, 0.5, 1); }
    @keyframes g-press { 40% { transform: scale(0.97); } }
    @keyframes g-leave {
        to { opacity: 0; transform: translateY(-10px) scale(1.04); filter: blur(4px); }
    }
}

@media (max-width: 480px) {
    .g-panel { width: 100%; max-width: 360px; border-radius: 20px; }
    .g-opt { min-height: 56px; font-size: 1.0625rem; }
    .g-key, .g-foot { display: none; }
}
@media (hover: hover) and (pointer: fine) {
    .g-opt:active { transform: scale(0.985); }
}
.g-opt.chosen .g-key { display: none; }
.g-stage { position: relative; transition: height 0.38s cubic-bezier(0.22, 1, 0.36, 1); }

.g-step { transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease 0.1s; }
.g-step.exit-to-left, .g-step.exit-to-right { transition: transform 0.28s cubic-bezier(0.4, 0, 1, 1), opacity 0.1s ease; }
.g-step[hidden] { display: none; }
.g-step.enter-from-right { transform: translateX(28px); opacity: 0; }
.g-step.exit-to-left { transform: translateX(-28px); opacity: 0; position: absolute; inset: 0 0 auto 0; }
.g-step.enter-from-left { transform: translateX(-28px); opacity: 0; }
.g-step.exit-to-right { transform: translateX(28px); opacity: 0; position: absolute; inset: 0 0 auto 0; }
.g-title span { display: inline-block; }
.g-code svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) {
    .g-stage, .g-step, .g-step.exit-to-left, .g-step.exit-to-right { transition: none; }
}

dialog.gate.gate[open] .g-step[data-step="2"] .g-opt { animation: none; }
.g-panel .th-mark { display: block; width: 28px; height: 28px; margin: 0 auto 10px; }
.g-panel .th-mark .th-bg { fill: var(--accent); }
.g-panel .th-mark .th-fg { fill: var(--bg); }