@import url("./character-card.css");
.page-klein-face-swap{--blue:#f48bc6}.page-klein-face-swap:before{background:radial-gradient(circle at 82% 12%,rgba(244,139,198,.18),transparent 22%),radial-gradient(circle at 5% 75%,rgba(174,226,77,.1),transparent 24%)}.swap-inputs{display:grid;grid-template-columns:1fr 44px 1fr;gap:10px;align-items:center;margin-bottom:15px}.swap-inputs .upload-box{min-height:250px;margin:0}.swap-direction{display:grid;gap:6px;justify-items:center;color:var(--blue)}.swap-direction i{font-size:24px;font-style:normal}.swap-direction small{font-size:9px;color:var(--muted)}.upload-index{position:absolute;z-index:2;top:10px;left:10px;color:var(--blue);font:10px "DM Mono",monospace}.upload-box:has(img:not(.hidden)) .upload-index{padding:4px 5px;background:rgba(12,13,14,.78)}.role-note{margin:0 0 22px;padding:10px 11px;border-left:2px solid var(--blue);background:rgba(244,139,198,.06);color:var(--muted);font-size:10px;line-height:1.7}.role-note b{color:var(--ink)}.page-klein-face-swap select{width:100%;height:41px;border:1px solid rgba(255,255,255,.17);border-radius:4px;background:#151818;color:var(--ink);padding:0 11px;font:500 13px Manrope,"Noto Sans SC",sans-serif;outline:none}.page-klein-face-swap select:focus{border-color:var(--lime)}@media(max-width:650px){.swap-inputs{grid-template-columns:1fr}.swap-direction{grid-row:2;transform:rotate(90deg);margin:-5px 0}.swap-inputs .upload-box{min-height:190px}}