#travelerPicker[hidden]{display:none}
#travelerPicker{position:fixed;inset:0;z-index:40;color:#344c57;background:radial-gradient(ellipse at 22% 44%,#dbe9e7 0,transparent 40%),radial-gradient(ellipse at 77% 44%,#e5e0f0 0,transparent 40%),#f2f1e9;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:auto;padding:clamp(16px,3vh,36px) max(16px,6vw);isolation:isolate}
#travelerPicker:before{content:'';position:absolute;inset:18px;border:1px solid #b3b39a66;pointer-events:none;z-index:-1}
.traveler-heading{text-align:center;position:relative}.traveler-heading .eyebrow{color:#83908e;letter-spacing:.4em;font-size:11px;margin:0 0 10px}.traveler-heading h2{font:500 clamp(25px,4vw,40px) var(--serif);letter-spacing:.18em;margin:0 0 10px}.traveler-heading p{font-size:12px;letter-spacing:.08em;color:#6a7c82;margin:0}.traveler-back{position:absolute;left:0;top:10px;background:none;border:0;color:#536a70;font:inherit;font-size:12px;cursor:pointer;padding:10px}
.traveler-stage{position:relative;min-height:360px;width:min(100%,960px);margin:auto;align-self:stretch;height:100%}
#travelerCanvas{display:block;width:100%;height:calc(100% - 100px);min-height:250px;pointer-events:none}
.traveler-options{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-bottom:8px}
.traveler-option{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:18px 10px 10px;border:0;background:transparent;color:inherit;cursor:pointer;font-family:inherit;border-radius:10px;transition:background .2s}
.traveler-option:after{content:'';position:absolute;inset:8px;border:1px solid transparent;pointer-events:none;border-radius:48% 48% 10px 10px;transition:border-color .2s}
.traveler-option[aria-pressed=true]:after{border-color:#8ca4a777;background:linear-gradient(0deg,#ffffff35,transparent 20%);z-index:-1}
.traveler-option[data-choice=girl][aria-pressed=true]:after{border-color:#a69bc177}
.traveler-option .traveler-type{font-size:10px;letter-spacing:.3em;color:#728389}.traveler-option strong{font:500 clamp(24px,4vw,32px) var(--serif);letter-spacing:.25em;margin:8px 0 7px}.traveler-option .traveler-description{font-size:11px;letter-spacing:.08em;color:#6b8086}.traveler-check{position:absolute;top:30px;right:25px;border:1px solid #96a7a9;transform:rotate(45deg);width:12px;height:12px}.traveler-option[aria-pressed=true] .traveler-check{background:#527881;box-shadow:inset 0 0 0 2px #f0f4ef}
.traveler-footer{text-align:center;padding:14px 0 5px}.traveler-footer p{font-size:11px;color:#7e8989;margin:0 0 12px}.traveler-confirm{background:#3b5966;color:#fffdf1;border:1px solid #3b5966;min-width:260px;padding:14px 26px;font:15px var(--serif);letter-spacing:.16em;border-radius:3px;cursor:pointer;box-shadow:0 6px 18px #455e6420}.traveler-confirm:hover{background:#294650}.traveler-option:focus-visible,.traveler-back:focus-visible,.traveler-confirm:focus-visible{outline:2px solid #9f813e;outline-offset:3px}
#changeTravelerBtn{background:transparent;border:0;border-bottom:1px solid #d3d0be99;color:#e9e4d8;font:inherit;font-size:12px;padding:7px 0;cursor:pointer;width:max-content}.traveler-current{color:#c5cbbb;font-size:12px;letter-spacing:.08em}
@media(max-width:600px){#travelerPicker{padding:16px 10px}#travelerPicker:before{inset:6px}.traveler-heading{padding-top:24px}.traveler-back{top:-7px}.traveler-heading h2{font-size:26px}.traveler-heading p{font-size:11px}.traveler-stage{min-height:360px}#travelerCanvas{min-height:250px}.traveler-options{gap:4px}.traveler-option strong{font-size:26px}.traveler-option .traveler-description{font-size:10px}.traveler-check{right:15px}.traveler-footer{padding-top:5px}}
@media(max-height:620px) and (min-width:601px){#travelerPicker{padding:12px 5vw}.traveler-heading h2{font-size:25px}.traveler-stage{min-height:340px}#travelerCanvas{min-height:240px}.traveler-footer{padding:5px}.traveler-footer p{display:none}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* 手机横屏（高度很矮）：标题一行、预览占满中间、名字和按钮收紧，互不遮挡 */
@media (max-height:480px){
  #travelerPicker{padding:8px max(16px,4vw) 8px}
  #travelerPicker:before{inset:6px}
  .traveler-heading .eyebrow,.traveler-heading p{display:none}
  .traveler-heading h2{font-size:20px;margin:2px 0 0}
  .traveler-back{top:-6px}
  .traveler-stage{min-height:0}
  #travelerCanvas{min-height:0;height:calc(100% - 58px)}
  .traveler-option{padding:6px 10px 4px}
  .traveler-option .traveler-type{display:none}
  .traveler-option strong{font-size:20px;margin:0 0 2px}
  .traveler-check{top:14px}
  .traveler-footer{padding:4px 0 2px}
  .traveler-footer p{display:none}
  .traveler-confirm{padding:9px 22px;min-width:220px;font-size:14px}
}