.picker-section { padding-block: clamp(72px, 9vw, 132px); background: #0a0a0a; }
.picker-heading { max-width: 820px; margin-bottom: 44px; }
.picker-eyebrow { margin: 0 0 20px; color: #9bbce1; font-size: 11px; font-weight: 600; letter-spacing: .15em; line-height: 1.6; }
.picker-heading h2 { color: #f5f5f7; font-size: clamp(36px, 5.3vw, 68px); line-height: 1.05; letter-spacing: -.035em; }
.picker-lead { max-width: 640px; margin: 24px 0 0; color: #a3a3a9; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; }
.picker-layout { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #2a2a2e; border-radius: 28px; background: #171719; overflow: hidden; }
.picker-preview { --picker-glow: #f7f3e9; position: relative; display: flex; flex-direction: column; min-width: 0; background: radial-gradient(ellipse at 50% 35%, #3d3b38 0%, #232324 50%, #171719 85%); }
.picker-preview[data-picker-light="warm"] { --picker-glow: #ffc77e; }
.picker-preview[data-picker-light="cool"] { --picker-glow: #b9dfff; }
.picker-preview-tag { position: relative; z-index: 2; margin: 28px 30px 0; color: #b0b0b4; font-size: 10px; font-weight: 600; letter-spacing: .14em; }
.picker-stage { position: relative; display: grid; place-items: center; min-height: 356px; flex: 1; perspective: 1000px; overflow: hidden; }
.picker-wall { position: absolute; inset: 0; opacity: .22; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), #97918a calc(25% - 1px), #97918a 25%); mask-image: linear-gradient(transparent, #000 30%, transparent); }
.picker-mirror { position: relative; z-index: 1; width: 230px; height: 230px; border: 2px solid var(--picker-glow); border-radius: 50%; background: linear-gradient(145deg, #b4b7b1, #79807e 28%, #464c4b 48%, #8d9290 80%, #b2b4ad); box-shadow: 0 0 12px var(--picker-glow), 0 0 44px color-mix(in srgb, var(--picker-glow) 38%, transparent), 0 12px 44px #0007, inset 0 0 18px #fff2; overflow: hidden; transform: rotateY(-8deg) rotateX(2deg); transition: border-radius .8s cubic-bezier(.2,.7,.2,1), width .8s cubic-bezier(.2,.7,.2,1), height .8s cubic-bezier(.2,.7,.2,1), border-color .5s, box-shadow .5s; }
.picker-preview[data-picker-shape="arch"] .picker-mirror { width: 184px; height: 280px; border-radius: 110px 110px 5px 5px; }
.picker-preview[data-picker-shape="capsule"] .picker-mirror { width: 165px; height: 280px; border-radius: 100px; }
.picker-preview[data-picker-shape="rectangle"] .picker-mirror { width: 255px; height: 204px; border-radius: 10px; }
.picker-preview[data-picker-shape="organic"] .picker-mirror { width: 205px; height: 270px; border-radius: 61% 39% 68% 32% / 46% 57% 43% 54%; }
.picker-reflection { position: absolute; inset: 0; background: linear-gradient(116deg, transparent 20%, #e5e6df66 20.5%, #e5e6df44 35%, transparent 35.5%, transparent 67%, #ffffff12 67.5%, #ffffff12 81%, transparent 81.5%); }
.picker-switch { position: absolute; bottom: 22px; left: calc(50% - 5px); width: 10px; height: 10px; border: 1px solid #e8eef2b3; border-radius: 50%; }
.picker-switch::after { content: ''; position: absolute; top: -2px; left: 3px; height: 5px; border-left: 1px solid #e8eef2b3; }
.picker-plinth { position: absolute; bottom: 17px; width: 70%; height: 2px; background: linear-gradient(90deg, transparent, #dad1bc55, transparent); box-shadow: 0 8px 22px #000a; }
.picker-summary { position: relative; padding: 6px 30px 0; text-align: center; }
.picker-summary > span { display: block; margin-bottom: 7px; color: #99999f; font-size: 12px; }
.picker-summary output { display: block; min-height: 44px; color: #f5f5f7; font-size: 16px; line-height: 1.5; }
.picker-illustration-note { max-width: 400px; margin: 14px auto 0; padding: 0 30px 26px; color: #8f8f96; text-align: center; font-size: 11px; line-height: 1.55; }
.picker-controls { min-width: 0; padding: clamp(24px, 3.3vw, 48px); border-left: 1px solid #2a2a2e; }
.picker-fieldset { min-width: 0; margin: 0 0 30px; padding: 0; border: 0; }
.picker-fieldset legend { display: flex; align-items: center; gap: 13px; margin-bottom: 15px; padding: 0; color: #f5f5f7; font-size: 17px; font-weight: 600; }
.picker-step { color: #777780; font-size: 11px; font-weight: 400; letter-spacing: .04em; }
.picker-options { display: flex; flex-wrap: wrap; gap: 9px; }
.picker-option { position: relative; cursor: pointer; }
.picker-option input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.picker-option > span { display: flex; align-items: center; gap: 8px; min-height: 43px; padding: 10px 14px; border: 1px solid #39393f; border-radius: 10px; color: #bcbcc4; background: #1f1f23; font-size: 13px; line-height: 1.5; transition: border-color .2s, color .2s, background .2s; }
.picker-option:hover > span { color: #fff; border-color: #73737d; }
.picker-option input:checked + span { color: #f5f5f7; border-color: #429cff; background: #147be21c; }
.picker-option input:focus-visible + span { outline: 2px solid #68b2ff; outline-offset: 4px; }
.picker-tone-dot { width: 9px; height: 9px; border-radius: 50%; background: #f7f3e9; }
.picker-tone-cool { background: #b9dfff; }
.picker-tone-warm { background: #ffc77e; }
.picker-check { width: 12px; height: 12px; margin-left: 2px; border: 1px solid #696970; border-radius: 3px; }
.picker-option input:checked + span .picker-check { border-color: #429cff; background: #429cff; }
.picker-option input:checked + span .picker-check::after { content: ''; display: block; width: 6px; height: 3px; margin: 2px 0 0 2px; border: solid white; border-width: 0 0 1px 1px; transform: rotate(-45deg); }
.picker-help { margin: 12px 0 0; color: #8e8e96; font-size: 12px; line-height: 1.55; }
.picker-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 17px; padding-top: 1px; }
.picker-primary { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 48px; padding: 13px 20px; border-radius: 999px; color: #fff; background: #087de0; font-size: 14px; font-weight: 500; text-decoration: none; transition: background .2s, transform .2s; }
.picker-primary:hover { background: #2795ee; transform: translateY(-2px); }
.picker-secondary { display: inline-flex; align-items: center; gap: 14px; min-height: 32px; color: #9fcfff; font-size: 13px; text-decoration: none; }
.picker-secondary:hover { color: #fff; }
@media (max-width: 850px) {
  .picker-layout { grid-template-columns: 1fr; }
  .picker-controls { border-left: 0; border-top: 1px solid #2a2a2e; }
  .picker-stage { min-height: 330px; }
  .picker-summary output { min-height: 24px; }
  .picker-illustration-note { max-width: 500px; }
}
@media (max-width: 480px) {
  .picker-heading { margin-bottom: 30px; }
  .picker-layout { border-radius: 20px; }
  .picker-preview-tag { margin: 22px 22px 0; font-size: 9px; }
  .picker-stage { min-height: 315px; }
  .picker-mirror { width: 210px; height: 210px; }
  .picker-preview[data-picker-shape="rectangle"] .picker-mirror { width: 230px; height: 195px; }
  .picker-preview[data-picker-shape="arch"] .picker-mirror,
  .picker-preview[data-picker-shape="capsule"] .picker-mirror { height: 260px; }
  .picker-preview[data-picker-shape="organic"] .picker-mirror { height: 250px; }
  .picker-controls { padding: 26px 20px 30px; }
  .picker-option > span { padding-inline: 12px; font-size: 12px; }
  .picker-options { gap: 8px; }
  .picker-primary { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .picker-mirror, .picker-option > span, .picker-primary { transition: none; }
  .picker-primary:hover { transform: none; }
}