.mode-picker{gap:16px}
.mode-picker .mode-card{isolation:isolate;overflow:hidden;min-height:148px;padding:24px;justify-content:center;gap:8px;border:1px solid #30394c;border-radius:16px;background:#111725;color:#f4f7fb;box-shadow:0 8px 24px rgb(0 0 0 / 10%);transition:border-color .2s ease,box-shadow .2s ease}
.mode-picker .mode-card::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#111725 0%,#111725f5 33%,#111725bf 49%,#11172500 76%)}
.mode-picker .mode-card img{position:absolute;right:-8px;top:50%;z-index:0;width:58%;height:174px;object-fit:contain;mix-blend-mode:lighten;transform:translateY(-50%);pointer-events:none;user-select:none;transition:transform .3s ease}
.mode-picker .mode-card b,.mode-picker .mode-card span{position:relative;z-index:2;max-width:61%;text-wrap:pretty}
.mode-picker .mode-card b{font-size:23px;line-height:1.25;color:#f4f7fb}
.mode-picker .mode-card span{max-width:56%;font-size:13px;line-height:1.6;color:#c4ccdc}
.mode-picker .mode-card:hover{border-color:#7287b4;box-shadow:0 8px 28px rgb(0 0 0 / 18%)}
.mode-picker .mode-card:hover img{transform:translateY(-50%) scale(1.035)}
.mode-picker .mode-card[aria-pressed=true]{border-color:var(--lime);box-shadow:inset 0 0 0 1px var(--lime),0 8px 24px rgb(0 0 0 / 12%)}
.mode-picker .mode-card[aria-pressed=true] b{color:var(--lime)}
.mode-picker .mode-card:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
@media(max-width:1000px){.mode-picker .mode-card{padding:20px}.mode-picker .mode-card b{font-size:21px}.mode-picker .mode-card span{font-size:12px}}
@media(max-width:700px){.mode-picker{gap:12px}.mode-picker .mode-card{min-height:148px}.mode-picker .mode-card b{max-width:63%;font-size:20px}.mode-picker .mode-card img{height:164px;width:60%}}
@media(prefers-reduced-motion:reduce){.mode-picker .mode-card,.mode-picker .mode-card img{transition:none!important}}