:root{--route-from:#c5acff;--route-to:#ffd36b}
.selection-stage{position:relative;display:grid;grid-template-columns:190px minmax(0,1fr) 190px;align-items:center;gap:24px;width:100%;flex:1;min-height:0;margin-top:14px}
.language-panel{position:relative;z-index:2;border:1px solid #c9b4ff33;border-radius:24px;padding:18px 14px;background:linear-gradient(140deg,#ffffff10,#ffffff03);box-shadow:0 18px 45px #08031c33;backdrop-filter:blur(12px);text-align:left}
.language-panel h2{margin:0 0 14px;font-size:13px;font-weight:600;color:#e0d6ff}.language-panel h2 small{display:block;margin-top:5px;font-size:9px;letter-spacing:1.8px;color:#b5a4df;font-weight:400}
.language-list{display:grid;gap:8px}.language-option{display:flex;align-items:center;gap:9px;min-height:43px;padding:10px 12px;border-radius:12px;border:1px solid #ffffff18;background:#160f3b55;color:#bdb0dd;font:500 14px 'Segoe UI','Malgun Gothic',sans-serif;cursor:pointer;text-align:left;transition:background .2s,border-color .2s,box-shadow .2s}
.language-option .code{display:grid;place-items:center;width:25px;height:25px;flex-shrink:0;border-radius:8px;background:#ffffff09;font-size:10px;font-weight:700;letter-spacing:.5px;color:#aa9bcf}.language-option[aria-pressed=true]{border-color:var(--route-from);background:#aa87ff20;color:white;box-shadow:0 0 24px #b394ff13,inset 0 0 0 1px #c5acff15}.language-option[aria-pressed=true]::after{content:'';width:6px;height:6px;border-radius:50%;margin-left:auto;background:var(--route-from);box-shadow:0 0 12px var(--route-from)}
.target-panel .language-option[aria-pressed=true]{border-color:var(--route-to);background:color-mix(in srgb,var(--route-to) 10%,transparent);box-shadow:0 0 24px color-mix(in srgb,var(--route-to) 10%,transparent)}.target-panel .language-option[aria-pressed=true]::after{background:var(--route-to);box-shadow:0 0 12px var(--route-to)}.target-panel .language-option{min-height:68px;font-size:17px}.target-panel .code{width:32px;height:32px;font-size:12px}.language-option:focus-visible{outline:2px solid white;outline-offset:3px}
.selection-stage .globe-area{height:100%;min-height:0;container-type:size;z-index:1}.selection-stage .globe-box{width:min(100cqw,100cqh,540px);height:min(100cqw,100cqh,540px);max-height:none;max-width:none}
#connections{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0;filter:drop-shadow(0 0 5px #c5acff66)}#connections .wire-base{fill:none;stroke:#c5acff20;stroke-width:5}#connections .wire{fill:none;stroke-width:1.8;stroke-dasharray:5 7;animation:flow 12s linear infinite}.wire.from{stroke:var(--route-from)}.wire.to{stroke:var(--route-to)}@keyframes flow{to{stroke-dashoffset:-120}}
.route-summary{font-size:13px;line-height:1.5;color:#ddd2ff;margin:7px 0 0;max-width:760px;min-height:20px}.route-summary strong{color:var(--route-to)}.btn[aria-disabled=true]{opacity:.5;cursor:default;box-shadow:none;transform:none}.page{max-width:1240px}.hint{margin-top:8px}.where{min-height:17px}h1{margin-top:14px}.btn{min-width:240px;justify-content:center;margin-top:12px}.btn:focus-visible{outline:2px solid white;outline-offset:4px}
@media(max-width:850px){.selection-stage{grid-template-columns:155px minmax(0,1fr) 155px;gap:12px}.language-panel{padding:15px 11px;border-radius:20px}.language-option{padding:8px 10px;font-size:13px}.language-panel h2{font-size:12px}.target-panel .language-option{font-size:15px}}
@media(max-width:600px){h1{font-size:24px;margin-top:17px}.selection-stage{grid-template-columns:1fr 1fr;grid-template-rows:minmax(90px,1fr) auto;gap:10px;margin-top:2px}.selection-stage .globe-area{grid-column:1/3;grid-row:1}.language-panel{grid-row:2;padding:11px;border-radius:17px;align-self:stretch}.source-panel{grid-column:1}.target-panel{grid-column:2}.language-panel h2{font-size:11px;margin-bottom:9px;min-height:30px}.language-panel h2 small{font-size:8px;margin-top:4px;letter-spacing:1px}.language-list{grid-template-columns:1fr 1fr;gap:5px}.language-option{min-height:32px;padding:6px 7px;font-size:10px;border-radius:9px;gap:5px}.language-option .code{display:none}.language-option[aria-pressed=true]::after{width:4px;height:4px;flex-shrink:0}.language-list .language-option:last-child:nth-child(odd){grid-column:1/3}.target-panel .language-list{grid-template-columns:1fr}.target-panel .language-option{min-height:49px;font-size:14px}.target-panel .code{display:grid;width:22px;height:22px;font-size:9px}.hint{font-size:10px;margin-top:6px}.route-summary{font-size:11px;min-height:17px;margin-top:5px}.btn{margin-top:8px}#connections{z-index:1}.language-panel{z-index:2}.btn small{display:none}}
@media(max-height:520px) and (min-width:601px){.selection-stage{grid-template-columns:155px minmax(0,1fr) 155px;gap:14px;margin-top:5px}.language-panel{padding:10px}.language-panel h2{margin-bottom:7px;font-size:11px}.language-panel h2 small{display:none}.language-list{gap:4px}.language-option{min-height:29px;padding:4px 8px;font-size:11px}.language-option .code{width:20px;height:20px;font-size:8px}.target-panel .language-option{min-height:47px;font-size:13px}.route-summary{font-size:10px}.btn{padding:8px 18px;margin-top:5px}}
@media(prefers-reduced-motion:reduce){#connections .wire{animation:none}.language-option{transition:none}}