#stx-lion{
  --stx-ink:#12100E; --stx-red:#B3122B; --stx-band:#F3F1EC;
  --stx-mute:#7C7770; --stx-hair:rgba(18,16,14,.16); --stx-max:1180px;
  color:var(--stx-ink); font-family:inherit; font-size:16px; line-height:1.6; text-align:left;
}
#stx-lion *,#stx-lion *::before,#stx-lion *::after{box-sizing:border-box}
#stx-lion p,#stx-lion h2,#stx-lion h3,#stx-lion h4,#stx-lion ul,#stx-lion li{margin:0;padding:0}
#stx-lion ul{list-style:none}
#stx-lion a{color:inherit;text-decoration:none}
#stx-lion .stx-sprite{position:absolute;width:0;height:0;overflow:hidden}
#stx-lion .stx-r{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
#stx-lion .stx-inner{max-width:var(--stx-max);margin:0 auto;padding:64px 24px}

#stx-lion .stx-eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--stx-red);font-weight:600}
#stx-lion .stx-h2{font-size:clamp(28px,4vw,44px);line-height:1.05;margin:12px 0;font-weight:800;letter-spacing:-.01em}
#stx-lion .stx-lede{font-size:17px;color:#3B3835;max-width:62ch}

#stx-lion .stx-picker{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:32px}
#stx-lion .stx-shape{
  border:1px solid var(--stx-hair);background:#fff;cursor:pointer;padding:14px 8px 12px;
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  transition:border-color .16s,transform .16s;margin:0
}
#stx-lion .stx-shape:hover{border-color:var(--stx-ink);transform:translateY(-2px)}
#stx-lion .stx-thumb{width:100%;max-width:76px;aspect-ratio:1/.86;display:flex;align-items:center;justify-content:center;overflow:hidden}
#stx-lion .stx-thumb svg{width:100%;height:auto;display:block}
#stx-lion .stx-thumb-video video{width:100%;height:100%;object-fit:cover;display:block}
#stx-lion .stx-shape b{font-size:14px;font-weight:600;line-height:1.25}
#stx-lion .stx-l1{font-size:11.5px;color:var(--stx-mute);line-height:1.35;min-height:2.7em}

#stx-lion .stx-detail{margin-top:24px;border:1px solid var(--stx-ink);display:grid;grid-template-columns:1fr 1.05fr}
#stx-lion .stx-stage{
  background:linear-gradient(165deg,#FBFAF8,#EDEAE3);border-right:1px solid var(--stx-ink);
  display:flex;align-items:center;justify-content:center;padding:30px 24px;min-height:400px;overflow:hidden
}
#stx-lion .stx-art{width:100%;max-width:300px;height:auto;display:none}
#stx-lion .stx-art-video{max-width:none;width:100%;height:100%}
#stx-lion .stx-art-video video{width:100%;height:100%;max-height:420px;object-fit:contain;display:block}
#stx-lion .stx-copy{padding:30px 32px 32px;display:flex;flex-direction:column}
#stx-lion .stx-panel{display:none;flex-direction:column;flex:1}
#stx-lion .stx-cn{font-size:11px;letter-spacing:.12em;color:var(--stx-red);text-transform:uppercase;font-weight:600}
#stx-lion .stx-panel h3{font-size:28px;margin:8px 0 4px;font-weight:800;line-height:1.1;letter-spacing:-.01em}
#stx-lion .stx-white-note{font-size:13.5px;color:#3B3835;line-height:1.6;margin:0 0 6px;max-width:46ch}
#stx-lion .stx-white-note span{display:block;font-size:12.5px;color:var(--stx-mute);margin-top:3px}
#stx-lion .stx-zh{font-size:14px;color:var(--stx-mute);margin-bottom:14px}
#stx-lion .stx-blk{border-top:1px solid var(--stx-hair);padding:15px 0}
#stx-lion .stx-blk h4{font-size:10.5px;letter-spacing:.1em;color:var(--stx-red);margin-bottom:7px;text-transform:uppercase;font-weight:600}
#stx-lion .stx-blk p{font-size:14.5px;color:#3B3835;line-height:1.65}
#stx-lion .stx-blk li{font-size:14px;color:#3B3835;padding-left:15px;position:relative;margin-bottom:5px}
#stx-lion .stx-blk li::before{content:"—";position:absolute;left:0;color:var(--stx-mute)}
#stx-lion .stx-cta{margin-top:auto;padding-top:20px;display:flex;gap:10px;flex-wrap:wrap}
#stx-lion .stx-btn{
  display:inline-block;background:var(--stx-ink);color:#fff;padding:13px 22px;font-size:12px;
  letter-spacing:.07em;text-transform:uppercase;border:1px solid var(--stx-ink);font-weight:600;transition:.16s
}
#stx-lion .stx-btn:hover{background:#000;color:#fff}
#stx-lion .stx-btn.stx-ghost{background:transparent;color:var(--stx-ink)}
#stx-lion .stx-btn.stx-ghost:hover{background:var(--stx-ink);color:#fff}

/* ── CSS-only switching ── */
#stx-r1:checked ~ .stx-inner .stx-p1.stx-panel,
#stx-r2:checked ~ .stx-inner .stx-p2.stx-panel,
#stx-r3:checked ~ .stx-inner .stx-p3.stx-panel,
#stx-r4:checked ~ .stx-inner .stx-p4.stx-panel,
#stx-r5:checked ~ .stx-inner .stx-p5.stx-panel,
#stx-r6:checked ~ .stx-inner .stx-p6.stx-panel{display:flex}
#stx-r1:checked ~ .stx-inner .stx-art.stx-p1,
#stx-r2:checked ~ .stx-inner .stx-art.stx-p2,
#stx-r3:checked ~ .stx-inner .stx-art.stx-p3,
#stx-r4:checked ~ .stx-inner .stx-art.stx-p4,
#stx-r5:checked ~ .stx-inner .stx-art.stx-p5,
#stx-r6:checked ~ .stx-inner .stx-art.stx-p6{display:flex}

#stx-r1:checked ~ .stx-inner label[for="stx-r1"],
#stx-r2:checked ~ .stx-inner label[for="stx-r2"],
#stx-r3:checked ~ .stx-inner label[for="stx-r3"],
#stx-r4:checked ~ .stx-inner label[for="stx-r4"],
#stx-r5:checked ~ .stx-inner label[for="stx-r5"],
#stx-r6:checked ~ .stx-inner label[for="stx-r6"]{
  border-color:var(--stx-ink);box-shadow:inset 0 0 0 1px var(--stx-ink);background:var(--stx-band)
}
#stx-r1:checked ~ .stx-inner label[for="stx-r1"] .stx-l1,
#stx-r2:checked ~ .stx-inner label[for="stx-r2"] .stx-l1,
#stx-r3:checked ~ .stx-inner label[for="stx-r3"] .stx-l1,
#stx-r4:checked ~ .stx-inner label[for="stx-r4"] .stx-l1,
#stx-r5:checked ~ .stx-inner label[for="stx-r5"] .stx-l1,
#stx-r6:checked ~ .stx-inner label[for="stx-r6"] .stx-l1{color:#3B3835}

#stx-r1:focus-visible ~ .stx-inner label[for="stx-r1"],
#stx-r2:focus-visible ~ .stx-inner label[for="stx-r2"],
#stx-r3:focus-visible ~ .stx-inner label[for="stx-r3"],
#stx-r4:focus-visible ~ .stx-inner label[for="stx-r4"],
#stx-r5:focus-visible ~ .stx-inner label[for="stx-r5"],
#stx-r6:focus-visible ~ .stx-inner label[for="stx-r6"]{outline:2px solid var(--stx-red);outline-offset:3px}

@media(max-width:1024px){
  #stx-lion .stx-picker{grid-template-columns:repeat(3,1fr)}
  #stx-lion .stx-detail{grid-template-columns:1fr}
  #stx-lion .stx-stage{border-right:0;border-bottom:1px solid var(--stx-ink);min-height:300px}
}
@media(max-width:600px){
  #stx-lion .stx-inner{padding:40px 18px}
  #stx-lion .stx-picker{grid-template-columns:repeat(2,1fr);gap:9px}
  #stx-lion .stx-copy{padding:24px 20px 26px}
  #stx-lion .stx-panel h3{font-size:23px}
  #stx-lion .stx-btn{flex:1;text-align:center;padding:13px 14px}
}
@media(prefers-reduced-motion:reduce){
  #stx-lion .stx-shape{transition:none}
  #stx-lion .stx-shape:hover{transform:none}
}